/* Hallmark · redesign: aba Saídas (component-scope: painel, sem macrostructure) · tone: utilitarian · anchor hue: sage (preservado)
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 */
/* Athena: executive reporting, restrained contrast and readable data. */
:root{
  --bg:#121515;--surface:#1a1e1e;--surface-2:#202525;--surface-3:#282e2d;
  --border:#343b39;--border-2:#515b57;
  --text:#f1f0e9;--text-2:#c5cbc5;--text-3:#9da8a0;
  --lav:#c3d0ba;--lav-dim:#c3d0ba14;--lav-line:#c3d0ba55;
  --red:#f08f87;--amber:#dbbc80;--green:#9bc5ac;
  --r:5px;--r-sm:4px;--font-ui:'Inter',system-ui,sans-serif;
}
html,body{overflow-x:clip;}
body{font-family:var(--font-ui);max-width:1480px;padding:34px 48px 80px;}
body::before,header::after,.kpi::before,.kpi .label::before,.card h3::after{display:none;}
header{align-items:center;padding-bottom:30px;margin-bottom:0;gap:32px;}
.brand-lockup{gap:18px;min-width:0;}
.brand-lockup>div:last-child{min-width:0;}
.brand{font-family:var(--font-ui);font-size:11px;letter-spacing:.09em;color:var(--text-2);margin-bottom:12px;}
.brand-divider{padding:0 8px;color:var(--text-3);}
.logo-mark{width:66px;height:66px;}
.logo-mark{width:190px;height:70px;padding:7px 12px;background:#f1f0e9;border-radius:var(--r-sm);box-sizing:border-box;}
h1{font-family:var(--font-ui);font-size:clamp(26px,3.2vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1.15;overflow-wrap:anywhere;}
.subtitle{font-size:13px;line-height:1.65;color:var(--text-2);margin-top:12px;}
.subtitle .src{font-size:11px;color:var(--text-3);}
.header-right{flex-shrink:0;max-width:260px;}
.header-right .reset{background:var(--text);color:var(--bg);border:1px solid var(--text);border-radius:var(--r-sm);font-family:var(--font-ui);font-size:12px;font-weight:600;padding:11px 16px;white-space:nowrap;}
.header-right .reset:hover{background:var(--lav);color:var(--bg);border-color:var(--lav);}
.updated,.refresh-status{font-size:11px;}
.tabs{width:100%;background:none;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:0;gap:30px;margin:0 0 30px;}
.tab{font-family:var(--font-ui);text-transform:none;letter-spacing:0;font-size:13px;padding:18px 0 15px;border-radius:0;color:var(--text-3);white-space:nowrap;}
.tab[aria-selected="true"]{background:none;color:var(--text);box-shadow:inset 0 -2px 0 var(--lav);}
.tab-hint{font-size:17px;font-weight:500;color:var(--text);max-width:none;margin:0 0 18px;display:block;}
#tab-hoje>.tab-hint{display:flex;justify-content:space-between;gap:16px;}
.tab-hint span{font-size:11px;font-weight:400;color:var(--text-3);align-self:center;}
.kpis{grid-template-columns:repeat(6,minmax(0,1fr));border-radius:var(--r);margin-bottom:32px;}
.kpi{padding:22px 18px;min-width:0;}
.kpi .label{font-size:11px;text-transform:none;letter-spacing:0;font-weight:500;margin-bottom:18px;min-height:34px;align-items:flex-start;}
.kpi .value{font-family:var(--font-ui);font-size:40px;font-weight:500;letter-spacing:-.03em;}
.kpi .foot{font-size:11px;line-height:1.6;margin-top:16px;}
.kpi:last-child{background:var(--surface-3);}
.card{padding:24px;border-radius:var(--r);}
.card h3{font-family:var(--font-ui);text-transform:none;letter-spacing:-.015em;font-size:16px;font-weight:500;line-height:1.45;flex-wrap:wrap;gap:7px;margin-bottom:22px;}
.card h3 .tag-count{font-size:13px;font-weight:500;color:var(--text-3);}
.jstat{background:transparent;border:0;border-left:1px solid var(--border);border-radius:0;padding:8px 22px;}
.jstat:first-child{border-left:0;padding-left:0;}
.jlabel,.base-label{font-size:12px;color:var(--text-2);text-transform:none;letter-spacing:0;}
.jvalue,.base-value,.risco-tile .rt-count,.motivo-count{font-family:var(--font-ui);font-weight:500;letter-spacing:-.03em;}
.jvalue{font-size:34px;}
.mes-clientes{display:grid;gap:7px;margin-top:10px;}
.mes-cliente{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);font-size:11px;line-height:1.35;color:var(--text-2);}
.mes-cliente>span:first-child{min-width:0;overflow-wrap:anywhere;}.mes-perfil{flex:none;color:var(--text-3);font-size:10px;text-align:right;}
.jfoot,.count{font-size:11px;line-height:1.65;color:var(--text-3);}
.atencao{padding:18px 0 22px;border-bottom:1px solid var(--border);margin-bottom:28px;}
.atencao-label{text-transform:none;letter-spacing:0;font-size:13px;}
.risk-chip{font-size:12px;border-radius:var(--r-sm);padding:7px 11px;}
.risco-grid{gap:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.risco-tile{background:transparent;border:0;border-right:1px solid var(--border);border-radius:0;padding:19px 16px;}
.risco-tile:last-child{border-right:0;}
.risco-tile.open{background:var(--surface-3);box-shadow:inset 0 -2px var(--lav);}
.risco-tile .rt-label{font-size:12px;}.risco-tile .rt-count{font-size:28px;}
.base-stat{border-radius:var(--r);}
.base-stat:hover,.jstat:hover,.risco-tile:hover,.risk-chip:hover{transform:none;}
.filters input,.filters select,.mes-pick select{font-family:var(--font-ui);font-size:12px;min-height:40px;}
.filters input{min-width:0;max-width:100%;width:280px;}
.filters .reset{font-size:12px;white-space:nowrap;min-height:40px;}
.mes-pick label{font-size:11px;text-transform:none;letter-spacing:0;}
.mes-pick select{font-size:15px;min-width:190px;}
.month-checks{display:flex;flex-wrap:wrap;gap:7px;border:0;padding:0;margin:0;min-width:280px;}
.month-checks legend{width:100%;font-size:11px;color:var(--text-2);margin-bottom:4px;padding:0;}
.month-checks legend span{color:var(--text-3);font-weight:400;margin-left:8px;}
.month-checks label{display:inline-flex;align-items:center;cursor:pointer;border:1px solid var(--border);background:var(--surface-2);border-radius:999px;padding:8px 12px;font-size:12px;color:var(--text-2);transition:background .15s,border-color .15s,color .15s;}
.month-checks label:has(input:checked){background:var(--lav);border-color:var(--lav);color:var(--bg);}
.month-checks input{position:absolute;opacity:0;pointer-events:none;}
.month-checks label:focus-within{outline:2px solid var(--lav);outline-offset:2px;}
.tab-hint span{white-space:nowrap;}
.comparativo{margin-top:18px;}
.panel-saidas + .comparativo{margin-bottom:0;}
.ticket-breakdown{margin-top:18px;}
.hist-ticket-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.hist-ticket-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);font-weight:650;margin:0 0 8px;}
@media(max-width:700px){.hist-ticket-cols{grid-template-columns:1fr;gap:14px;}}
.section-kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:14px;}
.ticket-breakdown-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.ticket-tile{padding:14px 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2);}
.ticket-label{font-size:12px;color:var(--text-2);font-weight:650;}.ticket-value{font-size:28px;line-height:1.1;font-weight:760;letter-spacing:-.04em;margin-top:8px;}.ticket-foot{font-size:11px;color:var(--text-3);margin-top:4px;}
.panel-saidas{padding:18px 24px;}.panel-saidas .card h3{margin-bottom:14px;}
.panel-saidas table{border-collapse:separate;border-spacing:0 4px;}.panel-saidas tbody tr:not(.month-row){background:var(--surface-2);}.panel-saidas tbody tr:not(.month-row) td{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:8px 10px;vertical-align:top;}.panel-saidas tbody tr:not(.month-row) td:first-child{border-left:1px solid var(--border);border-radius:var(--r-sm) 0 0 var(--r-sm);}.panel-saidas tbody tr:not(.month-row) td:last-child{border-right:1px solid var(--border);border-radius:0 var(--r-sm) var(--r-sm) 0;}
.month-row th{padding:14px 8px 6px;text-align:left;color:var(--text);font-size:12px;text-transform:uppercase;letter-spacing:.08em;border:0;}.month-row th span{color:var(--text-3);font-weight:500;margin-left:6px;}
.exit-profile{font-size:11px;color:var(--text-2);margin-bottom:5px;}.motivo-pills{display:flex;flex-wrap:wrap;gap:4px;}.motivo-pill{display:inline-flex;align-items:center;border:1px solid var(--border-2);border-radius:999px;padding:3px 7px;color:var(--text-3);font-size:10px;line-height:1.1;}.motivo-pill.muted{opacity:.7;}.clickup-pill{display:inline-flex;align-items:center;border:1px solid var(--lav-line);border-radius:999px;padding:3px 7px;color:var(--lav);font-size:10px;line-height:1.1;background:var(--lav-dim);}.clickup-pill.muted{opacity:.65;}.motivo-pills.labels{margin-top:4px;}.month-inline{font-size:10px;color:var(--text-3);text-transform:capitalize;white-space:nowrap;}
.type-pill,.status-pill.compact{display:inline-flex;align-items:center;border-radius:999px;padding:3px 7px;font-size:10px;line-height:1.1;margin-right:4px;}.type-pill{background:var(--lav-dim);border:1px solid var(--lav-line);color:var(--lav);}.status-pill.compact{background:var(--surface-3);border:1px solid var(--border-2);color:var(--text-3);}
.status-pill.status-offboarding,.status-pill.compact.status-offboarding{background:#cf565622;color:#e18181;border-color:#cf565666}.status-pill.status-vip-offboarding,.status-pill.compact.status-vip-offboarding{background:#7b5ce622;color:#b39af8;border-color:#7b5ce666}.status-pill.status-encerrando,.status-pill.compact.status-encerrando{background:#cf565622;color:#e18181;border-color:#cf565666}.status-pill.status-pausado,.status-pill.compact.status-pausado{background:#f0c24b22;color:#f0c24b;border-color:#f0c24b66}.status-pill.status-ongoing,.status-pill.compact.status-ongoing{background:#5da47722;color:#75c493;border-color:#5da47766}.status-pill.status-onboarding,.status-pill.compact.status-onboarding{background:#6650d822;color:#a99af5;border-color:#6650d866}.score-d{background:#cf565622;color:#e18181;border-color:#cf565666}.score-c{background:#f0c24b22;color:#f0c24b;border-color:#f0c24b66}.score-b{background:#5da47722;color:#75c493;border-color:#5da47766}.score-none{background:#6650d822;color:#a99af5;border-color:#6650d866}.score-confirmado{background:#cf565622;color:#e18181;border-color:#cf565666}.rt-confirmado{color:#e18181}
.exit-detail{margin-top:7px;font-size:11px;color:var(--text-3);max-width:520px;}.exit-detail summary{cursor:pointer;color:var(--lav);font-size:10px;}.exit-detail div{margin-top:6px;padding:8px 10px;border-left:2px solid var(--lav-line);background:var(--surface);line-height:1.5;white-space:pre-wrap;}
body,.tab,.filters input,.filters select,.filters .reset,.mes-pick select,.month-checks label{font-family:'Inter',system-ui,sans-serif;}
h1,.card h3,.kpi .value,.jvalue,.base-value,.risco-tile .rt-count,.motivo-count{font-family:'Inter',system-ui,sans-serif;font-weight:500;}
table{font-size:13px;}thead th{font-size:10px;letter-spacing:.035em;padding:13px 12px;background:var(--surface-2);}
tbody td{padding:14px 12px;line-height:1.5;}tbody tr:hover{background:var(--surface-2);}
.table-scroll{border:1px solid var(--border);border-radius:var(--r);}
button,input,select{font-family:var(--font-ui);}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lav);outline-offset:3px;}
@media(min-width:1100px){#tab-hoje{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0 24px;}#tab-hoje>.tab-hint,#tab-hoje>.kpis,#tab-hoje>.atencao,#tab-hoje>#mes-card,#tab-hoje>#roster-card,#tab-hoje>.panel-negociacao{grid-column:1/-1;}#risco-card{grid-column:1;}#base-card{grid-column:2;grid-row:5;}.risco-grid{grid-template-columns:repeat(5,minmax(0,1fr));}.risco-tile .rt-top{flex-direction:column;gap:16px;}.risco-names{font-size:12px;overflow-wrap:anywhere;}}
@media(max-width:1099px){body{padding:28px 28px 64px;}.kpis{grid-template-columns:repeat(3,minmax(0,1fr));}.kpi .label{min-height:0;}.risco-grid{grid-template-columns:repeat(5,minmax(0,1fr));}.risco-tile .rt-top{flex-direction:column;gap:12px;}}
@media(max-width:700px){body{padding:22px 18px 48px;}header{align-items:flex-start;flex-direction:column;gap:22px;padding-bottom:22px;}.brand-lockup{gap:12px;}.logo-mark{width:48px;height:48px;}.brand{font-size:9px;line-height:1.7;}.brand-divider{padding:0 3px;}h1{font-size:28px;}.subtitle{font-size:12px;}.header-right{max-width:none;width:100%;flex-direction:row;align-items:center!important;flex-wrap:wrap;gap:10px 16px;}.updated{text-align:left;}.refresh-status:empty{display:none;}.tabs{gap:28px;margin-bottom:24px;}.tab-hint{display:block;font-size:16px;}.tab-hint span{display:block;margin-top:4px;}.kpis,.kpis.kpis-4{grid-template-columns:repeat(2,minmax(0,1fr));}.kpi{padding:18px 15px;}.kpi .value{font-size:34px;}.kpi .foot{font-size:10px;}.card{padding:18px;}.card h3{font-size:15px;}.mes-grid,.julho-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;}.jstat{padding:0 12px;}.jstat:nth-child(odd){border-left:0;padding-left:0;}.jvalue{font-size:28px;}.risco-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.risco-tile{border-bottom:1px solid var(--border);}.risco-tile:last-child{grid-column:1/-1;border-bottom:0;}.risco-tile .rt-top{flex-direction:row;}.filters{gap:8px;}.filters input{width:100%;}.filters select{max-width:100%;}.hist-head{gap:18px;}.panels{grid-template-columns:minmax(0,1fr);}.table-scroll{max-width:100%;}thead th,tbody td{padding:12px 9px;}tbody td{font-size:12px;}}

[role="tabpanel"][hidden]{display:none!important;}
html{scrollbar-color:var(--border-2) var(--bg);}
input{caret-color:var(--lav);}
::selection{background:var(--lav);color:var(--bg);}

.risco-tile .rt-label{overflow-wrap:anywhere;}
@media(max-width:700px){#tab-hoje>.tab-hint{display:block;}}
@media(max-width:700px){.ticket-breakdown-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.logo-mark{width:170px;height:62px;}}

/* Painel operacional, não jornal: mais denso, fontes menores, menos ar entre blocos.
   José, 2026-09-14 — pedido depois de várias rodadas achando a tela "muito textual, espaçada". */
body{padding:26px 40px 56px;}
header{padding-bottom:18px;}
.tab-hint{font-size:13px;margin:0 0 12px;}
.kpis{margin-bottom:18px;}
.kpi{padding:13px 15px;}
.kpi .label{font-size:10px;margin-bottom:7px;min-height:0;}
.kpi .value{font-size:28px;}
.kpi .foot{font-size:10px;margin-top:6px;line-height:1.4;}
.card{padding:16px 18px;}
.card h3{font-size:13px;margin-bottom:12px;}
.jstat{padding:6px 16px;}
.jvalue{font-size:23px;}
.atencao{padding:10px 0 14px;margin-bottom:16px;}
.risco-tile{padding:10px 12px;}
.risco-tile .rt-count{font-size:20px;}
.ticket-tile{padding:9px 11px;}
.ticket-tile .ticket-value,.ticket-value{font-size:20px;margin-top:5px;}
.tabs{gap:20px;margin:0 0 18px;}
.tab{padding:11px 0 9px;}
table{font-size:12.5px;}
thead th{padding:8px 9px;}
tbody td{padding:8px 9px;line-height:1.35;}
.base-stat{padding:12px 16px;}
.base-value{font-size:30px;}
.mes-clientes{gap:5px;}
@media(max-width:700px){body{padding:18px 16px 40px;}}

/* Cabeçalho + abas fixos ao rolar (José, 14/09/2026). Fundo sólido porque o conteúdo passa por
   baixo; sombra fina só para separar visualmente do que está rolando. */
.topo-fixo{position:sticky;top:0;z-index:40;background:var(--bg);margin:0 -40px;padding:0 40px;box-shadow:0 8px 16px -12px rgba(0,0,0,.55);}
@media(max-width:700px){.topo-fixo{margin:0 -16px;padding:0 16px;}}

/* Perfil e motivo agora são colunas próprias na aba Saídas (antes vinham juntos com status e
   labels do ClickUp, que saíram — José, 14/09/2026: "só os motivos do churn"). Nome do cliente
   com mais peso visual para não "apagar" perto do resto, que ficou pequeno na compactação. */
.cliente-nome{font-size:13.5px;font-weight:700;letter-spacing:-.01em;}

/* ---- Aba Saídas: cor com significado (José, 14/09/2026: "está morto esse dashboard na aba de
   saída, não tem diferenciação de meses, não tem a diferenciação de cor do tipo de cliente").
   Mês = matiz do calendário; a MESMA cor viaja do chip de filtro ao cabeçalho do grupo e ao trilho
   da linha. Perfil = cor fixa por tipo de cliente, na pill da tabela e no cartão de ticket.
   Contraste medido em 14/09/2026: todas >= 6:1 sobre --surface-2 (AA para texto pequeno). */
:root{
  --mes-1:#8ac9b8;--mes-2:#7ec2d9;--mes-3:#89b3ec;--mes-4:#b7a9f0;--mes-5:#e39ad1;--mes-6:#f09a92;
  --mes-7:#f0b77a;--mes-8:#e2cf78;--mes-9:#b9d17e;--mes-10:#9ccf95;--mes-11:#8cc6a7;--mes-12:#7fc0c9;
  --perfil-premium:#e6c36a;--perfil-high:#c4b0f5;--perfil-tradicional:#7fc8c0;--perfil-outro:#f0a37a;--perfil-sem:var(--text-3);
}
.perfil-premium{--p:var(--perfil-premium);}.perfil-high{--p:var(--perfil-high);}.perfil-tradicional{--p:var(--perfil-tradicional);}.perfil-outro{--p:var(--perfil-outro);}.perfil-sem{--p:var(--perfil-sem);}

/* chips de mês: ponto na cor do mês quando solto, preenchido na cor quando marcado */
.month-checks label{--mes:var(--border-2);gap:7px;}
.month-checks label span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mes);margin-right:7px;vertical-align:1px;transition:background .15s;}
.month-checks label:has(input:checked){background:var(--mes);border-color:var(--mes);color:var(--bg);}
.month-checks label:has(input:checked) span::before{background:var(--bg);opacity:.55;}
.month-checks label:focus-within{outline-color:var(--mes);}

/* cabeçalho do grupo: nome do mês na cor, contagem e MRR do mês em cinza, fio na cor por baixo */
.month-row th{color:var(--mes);padding:16px 8px 7px;border-bottom:1px solid color-mix(in srgb,var(--mes) 38%,transparent);}
.month-row th .mes-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mes);margin-right:8px;vertical-align:1px;}
.month-row th span{color:var(--text-2);}
.month-row th .month-mrr{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;font-size:11px;color:var(--text-3);margin-left:12px;}

/* linha: trilho de 3 px na cor do mês, chip curto do mês na mesma cor */
.panel-saidas tbody tr.saida-row td:first-child{border-left:3px solid var(--mes);padding-left:9px;width:44px;}
.mes-chip{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mes);white-space:nowrap;}
.panel-saidas tbody tr.saida-row:hover{background:color-mix(in srgb,var(--mes) 6%,var(--surface-2));}

/* perfil: pill tingida na cor do tipo; sem classificação fica tracejada e cinza, de propósito */
.type-pill[class*="perfil-"]{color:var(--p);border-color:color-mix(in srgb,var(--p) 48%,transparent);background:color-mix(in srgb,var(--p) 12%,transparent);font-weight:600;}
.type-pill.perfil-sem{border-style:dashed;background:transparent;font-weight:400;}

/* cartões de ticket: fio no topo na cor do perfil, número na cor */
.ticket-tile[class*="perfil-"]{border-top:2px solid var(--p);}
.ticket-tile[class*="perfil-"] .ticket-value{color:var(--p);}
.ticket-tile.perfil-sem{border-top-style:dashed;}
.ticket-tile.perfil-sem .ticket-value{color:var(--text-2);}

/* motivos: barra proporcional em vermelho, a cor que a aba já usa para "perdido" */
.motivo-row{grid-template-rows:auto auto auto;}
.motivo-bar{grid-column:1/-1;grid-row:3;height:3px;margin-top:9px;border-radius:2px;background:var(--surface-3);overflow:hidden;}
.motivo-bar i{display:block;height:100%;background:var(--red);opacity:.8;border-radius:2px;}
/* a aba tem só dois KPIs: sem os dois buracos à direita */
#tab-saidas .kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:700px){.panel-saidas tbody tr.saida-row td:first-child{width:auto;}}
