/* Padrao visual do painel de Parcerias Day Trade (parcerias_apuracao): Sora + Manrope, cartoes brancos */
:root{--bg:#F2F5F8;--surface:#FFFFFF;--surface-2:#F7F9FB;--ink:#0B2233;--muted:#5A6B79;--faint:#8696A3;--line:#DDE5EB;
--accent:#0B8F9C;--accent-ink:#06707A;--accent-soft:#E2F3F4;--ok:#17875C;--ok-soft:#E1F3EA;--warn:#A8670A;--warn-soft:#FBEFD9;
--bad:#B53B32;--bad-soft:#F8E3E1;--shadow:0 1px 2px rgba(11,34,51,.05),0 4px 16px rgba(11,34,51,.05);
--f-display:"Sora","Manrope",system-ui,sans-serif;--f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light;
/* tons derivados da mesma paleta: texto mais escuro sobre fundo claro (contraste >= 4,5), linhas e realces de tabela */
--line-strong:#C9D4DC;--track:#E5EBF0;--ok-ink:#11704B;--warn-ink:#8A5408;--accent-light:#9DD2D7;
--row-hover:#EEF7F8;--row-zebra:#FAFBFC;--row-sub:#EDF2F5;--row-sub-hover:#E2EEF1;--row-total:#E5ECF1;--row-total-hover:#DAE5EB;
--row-ruim:#FCF2F1;--row-ruim-hover:#F7E4E2}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);font-weight:600;margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:24px}h2{font-size:18px;margin:22px 0 10px}h3{font-size:15px;margin:26px 0 10px}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.conteudo{max-width:1280px;margin:0 auto;padding:0 28px 56px}

/* cabecalho */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding-block:22px 18px;border-bottom:1px solid var(--line);margin-bottom:22px;max-width:1280px;margin-inline:auto;padding-inline:28px}
.brand{display:flex;align-items:center;gap:18px;min-width:0}
.brand img{height:34px;width:auto}
.brand .sep{width:1px;height:30px;background:var(--line)}
.brand .tt{font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.2}
.brand .tt small{display:block;font-family:var(--f-body);font-weight:500;font-size:12px;color:var(--muted);letter-spacing:.02em}
.areas{display:flex;gap:4px;margin-left:8px}
.areas a{font-weight:700;font-size:13px;color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:8px}
.areas a.ativo{background:var(--accent-soft);color:var(--accent-ink)}.areas a:hover{color:var(--ink)}
.user{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--muted);padding-left:18px;border-left:1px solid var(--line)}
.btn-sec,.botao-sec{font-size:12.5px;font-weight:700;color:var(--accent-ink);background:transparent;border:1px solid var(--line);border-radius:8px;padding:6px 12px;text-decoration:none;cursor:pointer;font-family:inherit}
.btn-sec:hover,.botao-sec:hover{border-color:var(--accent)}

/* chips de situacao: fundo claro e texto forte; dentro das tabelas ganham um pontinho colorido */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;line-height:1.5;border-radius:99px;padding:2px 9px;white-space:nowrap;border:1px solid transparent}
.chip.ok{background:var(--ok-soft);color:var(--ok-ink);border-color:#C8E7D6}
.chip.acc{background:var(--accent-soft);color:var(--accent-ink);border-color:#C3E4E7}
.chip.warn{background:var(--warn-soft);color:var(--warn-ink);border-color:#F1DDB6}
.chip.bad{background:var(--bad-soft);color:var(--bad);border-color:#EFCCC8}
.chip.neutral{background:var(--surface-2);color:var(--muted);border-color:var(--line)}
.tabela .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none}
.tabela .chip.ok::before{background:var(--ok)}
.tabela .chip.acc::before{background:var(--accent)}
.tabela .chip.warn::before{background:var(--warn)}
.tabela .chip.bad::before{background:var(--bad)}

/* variacao (ja vem com seta): pilula discreta verde/vermelha */
.var{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;line-height:1.5;padding:1px 7px;border-radius:99px;white-space:nowrap}
.var.pos{background:var(--ok-soft);color:var(--ok-ink)}
.var.neg{background:var(--bad-soft);color:var(--bad)}

/* cabeca da pagina */
.cabeca{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mut{color:var(--muted);margin:2px 0 0}.pequena{font-size:12px}
.sel label,.seletor{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
select{font:inherit;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 30px 7px 10px;appearance:none;
background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer;text-transform:none;letter-spacing:0}
select:hover{border-color:var(--line-strong)}
input{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 10px}
input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}

/* abas */
.abas{display:flex;gap:6px;margin:20px 0 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.abas button{font:inherit;font-weight:700;font-size:13px;background:none;border:0;padding:10px 14px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}
.abas button:hover{color:var(--ink);border-bottom-color:var(--line-strong)}
.abas button.ativa{color:var(--ink);border-bottom-color:var(--accent)}

/* avisos e notas */
.aviso{display:flex;align-items:center;gap:10px;background:var(--warn-soft);color:var(--warn-ink);font-weight:600;padding:10px 14px;border:1px solid #F1DDB6;border-left:3px solid var(--warn);border-radius:10px;margin:0 0 16px}
.aviso::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px rgba(168,103,10,.18);flex:none}
.alerta,.erro{background:var(--bad-soft);color:var(--bad);font-weight:600;padding:10px 12px;border-radius:10px;margin-bottom:18px}
.nota{font-size:12.5px;color:var(--muted);margin:8px 0 10px;max-width:130ch}
.dica{display:flex;align-items:center;gap:8px;margin:22px 0 -4px;font-size:12px;color:var(--faint)}
.dica::before{content:"i";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:10px;font-weight:800;font-style:normal;flex:none}

/* cartoes de indicador */
.grade-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
.kpi-t{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kpi-v{font-family:var(--f-display);font-weight:600;font-size:28px;line-height:1.15;margin:8px 0 6px;font-variant-numeric:tabular-nums}
.kpi-s{font-size:12px;color:var(--muted)}
/* mes em andamento: realizado grande; projetado menor, em teal, na linha de baixo (o tracejado remete a coluna projetada) */
.kpi-v .real{display:block}
.kpi-v .proj-v{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:2px 9px 2px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);
font-family:var(--f-body);font-size:12.5px;font-weight:700;line-height:1.5;letter-spacing:0;white-space:nowrap}
.kpi-v .proj-v::before{content:"";width:9px;height:9px;border:1.5px dashed var(--accent);border-radius:2px;flex:none}
.meta{height:8px;background:var(--surface-2);border-radius:99px;margin:12px 0 6px;overflow:hidden;border:1px solid var(--line)}
.meta-b{height:100%;background:var(--accent);border-radius:99px}
.meta-b.cheia{background:var(--ok)}

/* graficos de colunas (SVG gerado no trader.js; clicar numa coluna escolhe o mes) */
.grade-graf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.grafico{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.g-t{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.grafico svg{display:block;width:100%;height:auto;overflow:visible}
.col{cursor:pointer}
.col rect.alvo,.col rect.barra,.col rect.proj{transition:fill .15s,fill-opacity .15s}
.col.sel rect.alvo{fill:rgba(11,34,51,.035)}
.col:hover rect.alvo{fill:rgba(11,143,156,.07)}
.col:not(.sel):hover rect.barra{fill:var(--accent-light)}
.col.sel:hover rect.barra{fill-opacity:.85}
/* coluna projetada do mes em andamento: so o contorno tracejado em teal translucido */
.col rect.proj{fill:var(--accent);fill-opacity:.08;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 3;stroke-opacity:.8}
.col:hover rect.proj{fill-opacity:.15}
/* contorno branco na barra realizada esconde a franja do tracejado que fica atras dela */
.col:has(rect.proj) rect.barra{stroke:var(--surface);stroke-width:1.5}
.g-eixo{font-size:11.5px;fill:var(--faint);text-anchor:middle;font-family:var(--f-body)}
.col:hover .g-eixo,.col.sel .g-eixo{fill:var(--ink);font-weight:700}
.g-val{font-size:11px;font-weight:700;fill:var(--ink);text-anchor:middle;font-family:var(--f-body);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}

/* funil */
.funil{display:flex;gap:12px;flex-wrap:wrap}
.etapa{flex:1;min-width:140px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.etapa-v{font-family:var(--f-display);font-weight:600;font-size:26px;font-variant-numeric:tabular-nums}
.etapa-t{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.etapa-c{margin-top:8px;font-size:11.5px;font-weight:700;display:inline-block;padding:3px 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink)}

/* interruptor (base antiga da Top Gain) dentro da linha de filtro */
.filtro-linha{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:11px 16px;margin:0 0 4px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
label.interruptor{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;user-select:none}
/* checkbox fora da vista, mas ainda focavel e lido por leitor de tela */
label.interruptor input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
label.interruptor .trilho{position:relative;flex:none;width:38px;height:22px;border-radius:99px;background:var(--line-strong);transition:background-color .2s}
label.interruptor .trilho::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(11,34,51,.28);transition:transform .2s}
label.interruptor:hover input:not(:checked) + .trilho{background:#B7C5CF}
label.interruptor input:checked + .trilho{background:var(--accent)}
label.interruptor:hover input:checked + .trilho{background:var(--accent-ink)}
label.interruptor input:checked + .trilho::after{transform:translateX(16px)}
label.interruptor input:focus-visible + .trilho{outline:2px solid var(--accent);outline-offset:2px}

/* segmentos da aba Clientes: controle segmentado em pilulas */
.segmentos{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;margin:0 0 6px;background:var(--track);border:1px solid var(--line);border-radius:12px}
.segmentos button{font:inherit;font-size:13px;font-weight:700;color:var(--muted);background:transparent;border:0;border-radius:9px;padding:8px 14px;cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s}
.segmentos button:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.segmentos button.ativo{background:var(--surface);color:var(--accent-ink);box-shadow:0 1px 2px rgba(11,34,51,.08),0 2px 8px rgba(11,34,51,.06)}

/* faixas (linha de chips de contagem) e barra pequena de % da meta */
.faixas{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.faixas .chip{background:var(--surface);font-size:12px;font-weight:600;padding:4px 11px}
.faixas .chip b{color:var(--ink);font-weight:800}
.mini-barra{display:inline-block;width:64px;height:7px;margin-right:8px;vertical-align:middle;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.mini-barra > span{display:block;height:100%;background:var(--accent);border-radius:99px}
.mini-barra > span[style="width:100%"]{background:var(--ok)}

/* tabelas */
/* .rolagem tem altura maxima: tabelas longas rolam por dentro com o cabecalho fixo e a linha de total presa embaixo */
.rolagem{overflow:auto;max-height:min(76vh,860px);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.tabela{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
.tabela th{position:sticky;top:0;z-index:2;background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;vertical-align:bottom;line-height:1.3;padding:10px 12px;white-space:nowrap;border-bottom:1px solid var(--line)}
.tabela td{background:var(--surface);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle;transition:background-color .12s}
.tabela tbody tr:last-child > td{border-bottom:0}
.tabela.num td:not(:first-child),.tabela.num th:not(:first-child){text-align:right}
/* colunas de texto (Assessor, Situacao) nas tabelas de clientes ficam a esquerda. O JS marca a tabela inteira como .num;
   aqui as tabelas sao reconhecidas pela estrutura: chip de situacao na 3a/4a coluna, ou a lista logo abaixo das faixas */
.tabela.num:has(tbody td:nth-child(3) > .chip) :is(th,td):is(:nth-child(2),:nth-child(3)),
.tabela.num:has(tbody td:nth-child(4) > .chip) :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(4)),
.faixas + .rolagem .tabela.num :is(th,td):nth-child(2){text-align:left}
.tabela td b{font-weight:700}
.tabela td .mut{color:var(--faint);margin:0}
/* zebra sutil so nas tabelas sem subtotais (nas de canal o subtotal ja separa os blocos) */
:where(.tabela:not(:has(tr.sub))) > tbody > tr:nth-child(even) > td{background:var(--row-zebra)}
/* linha em evidencia ao passar o mouse: fundo suave + realce a esquerda (sombra interna, nao mexe no layout) */
.tabela tbody tr:hover > td{background:var(--row-hover)}
.tabela tbody tr:hover > td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
/* subtotal de canal */
.tabela tr.sub > td{background:var(--row-sub);font-weight:700;color:var(--ink);border-bottom-color:var(--line-strong)}
.tabela tr.sub > td:first-child{font-family:var(--f-display);font-weight:600;font-size:12.5px;box-shadow:inset 3px 0 0 var(--line-strong)}
.tabela tbody tr:has(+ tr.sub) > td{border-bottom-color:var(--line-strong)}
.tabela tbody tr.sub:hover > td{background:var(--row-sub-hover)}
.tabela tbody tr.sub:hover > td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
/* total geral: borda navy em cima e presa no rodape da area de rolagem */
.tabela tr.total > td{position:sticky;bottom:0;z-index:1;background:var(--row-total);font-weight:800;color:var(--ink);border-top:2px solid var(--ink);border-bottom:0}
.tabela tr.total > td:first-child{font-family:var(--f-display);font-weight:600}
.tabela tbody tr:has(+ tr.total) > td{border-bottom:0}
.tabela tbody tr.total:hover > td{background:var(--row-total-hover)}
/* cliente que parou: tom avermelhado leve */
.tabela tbody tr.linha-ruim > td{background:var(--row-ruim)}
.tabela tbody tr.linha-ruim > td:first-child{box-shadow:inset 3px 0 0 rgba(181,59,50,.45)}
.tabela tbody tr.linha-ruim:hover > td{background:var(--row-ruim-hover)}
.tabela tbody tr.linha-ruim:hover > td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.tabela tr.inativo td{color:var(--faint)}
/* campanha dentro do canal: recuo com um conector discreto */
.recuo{display:block;position:relative;padding-left:22px}
.recuo::before{content:"";position:absolute;left:8px;top:-.15em;width:8px;height:.9em;border-left:1.5px solid var(--line-strong);border-bottom:1.5px solid var(--line-strong);border-bottom-left-radius:4px}
/* compacta: cabe em 1280-1400px sem rolagem lateral. Cabecalhos e nomes quebram linha; numeros nunca */
.tabela.compacta{font-size:12.5px}
.tabela.compacta th{white-space:normal;text-wrap:balance;padding:9px 8px;font-size:10.5px;letter-spacing:.045em}
.tabela.compacta td{padding:7px 8px}
.tabela.compacta tr > :first-child{padding-left:14px}
.tabela.compacta tr > :last-child{padding-right:14px}
.tabela.compacta td:first-child,.tabela.compacta td:nth-child(2):has(> b:only-child){white-space:normal;overflow-wrap:break-word}
/* nome (1a coluna, ou a 2a quando a 1a e o ranking "#") com largura minima: quem quebra linha primeiro
   sao os cabecalhos das colunas numericas; a coluna de nomes ainda cresce quando sobra espaco */
.tabela.compacta td:first-child > b,.tabela.compacta td:nth-child(2) > b:only-child{display:inline-block;min-width:19em}
.tabela.compacta .recuo{min-width:19em}
@media (max-width:1180px){.tabela.compacta td:first-child > b,.tabela.compacta td:nth-child(2) > b:only-child,.tabela.compacta .recuo{min-width:12em}}
@media (max-width:1100px){
  .tabela.compacta td:first-child > b,.tabela.compacta td:nth-child(2) > b:only-child,.tabela.compacta .recuo{min-width:9em}
  .tabela.compacta th{padding:8px 6px;letter-spacing:.03em}.tabela.compacta td{padding:7px 6px}
  .tabela.compacta tr > :first-child{padding-left:10px}.tabela.compacta tr > :last-child{padding-right:10px}
}
.tabela.compacta .chip,.tabela.compacta .var{font-size:11px}
.check{display:inline-flex;gap:8px;align-items:center;margin:4px 0 12px;font-size:13px;font-weight:600;color:var(--muted)}

/* login (identico ao do painel de parcerias) */
.tela-central{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.cartao-login{width:min(380px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:32px 28px;
box-shadow:0 1px 2px rgba(11,34,51,.05),0 8px 28px rgba(11,34,51,.07)}
.cartao-login img{height:34px;width:auto;display:block;margin-bottom:22px}
.cartao-login h1{font-size:20px;margin:0 0 4px}
.cartao-login p.sub{margin:0 0 22px;color:var(--muted)}
.cartao-login label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.cartao-login input{width:100%;font-size:15px;border-radius:10px;padding:11px 12px;margin-bottom:16px}
.cartao-login button,.botao{width:100%;font:inherit;font-weight:700;font-size:15px;color:#fff;background:var(--ink);border:0;border-radius:10px;padding:12px;cursor:pointer;margin-top:4px;display:block;text-align:center;text-decoration:none}
.cartao-login button:hover,.botao:hover{background:#163a52}
.cartao-login small{display:block;margin-top:18px;color:var(--muted);font-size:12px;text-align:center}
.cartao-login .aviso{margin-bottom:18px}

/* administracao */
.painel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:16px 0;box-shadow:var(--shadow)}
.painel h2{margin-top:0}
.linha-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.linha-form label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.linha-form .botao{width:auto;padding:9px 18px;margin:0}
.acoes{display:flex;gap:6px}
code.senha{background:var(--ink);color:#fff;padding:3px 8px;border-radius:6px;font-size:15px}
.cartao-msg{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow)}

/* celular e telas estreitas: tudo empilha; tabelas rolam de lado com a 1a coluna presa */
@media (max-width:760px){
  .conteudo,.top{padding-inline:16px}
  .top{gap:12px 16px;padding-block:16px 14px}
  .areas{margin-left:0}
  .user{margin-left:0;border-left:0;padding-left:0;flex-wrap:wrap}
  h1{font-size:21px}
  .cabeca{flex-direction:column;align-items:stretch;gap:12px}
  .seletor{justify-content:space-between}
  .abas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:2px}
  .abas button{white-space:nowrap;padding:10px 12px}
  .grade-kpi{grid-template-columns:1fr;gap:10px}
  .kpi{padding:16px}
  .kpi-v{font-size:24px}
  .grade-graf{grid-template-columns:1fr}
  .grafico{padding:12px}
  .funil{gap:10px}
  .etapa{min-width:calc(50% - 5px);padding:14px}
  .etapa-v{font-size:22px}
  .filtro-linha{flex-direction:column;align-items:flex-start}
  .segmentos{display:flex}
  .segmentos button{flex:1 1 calc(50% - 4px);padding:8px 10px;font-size:12.5px;line-height:1.3}
  .rolagem{max-height:70vh}
  .rolagem .tabela tr > :first-child{position:sticky;left:0;z-index:1}
  .rolagem .tabela th:first-child{z-index:3}
  .rolagem .tabela td:first-child{box-shadow:inset -1px 0 0 var(--line)}
  .tabela.compacta td:first-child > b,.tabela.compacta td:nth-child(2) > b:only-child{display:inline-block;min-width:8.5em}
  .tabela.compacta .recuo{min-width:8.5em}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* ---- KPI do mes em andamento: realizado x projetado contra a meta ---- */
.meta.dupla{position:relative;height:10px}
.meta.dupla .meta-p{position:absolute;inset:0 auto 0 0;height:100%;border-radius:99px;
  background:repeating-linear-gradient(135deg,rgba(11,143,156,.35) 0 4px,rgba(11,143,156,.15) 4px 8px)}
.meta.dupla .meta-p.cheia{background:repeating-linear-gradient(135deg,rgba(23,135,92,.4) 0 4px,rgba(23,135,92,.18) 4px 8px)}
.meta.dupla .meta-b{position:absolute;inset:0 auto 0 0;height:100%}
.duas-linhas{display:grid;gap:3px;font-size:12.5px;color:var(--ink);margin-top:6px}
.duas-linhas .mut{font-size:11.5px}
.leg{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.leg.real-leg{background:var(--accent)}
.leg.proj-leg{background:repeating-linear-gradient(135deg,rgba(11,143,156,.55) 0 3px,rgba(11,143,156,.2) 3px 6px);border:1px dashed var(--accent)}
.ok-txt{color:var(--ok)}.bad-txt{color:var(--bad)}

.mini-barra.cheia > span{background:var(--ok)}

/* ---- Clientes: filtro por assessor e ordenacao por coluna ---- */
.barra-cli{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 6px}
.barra-cli .segmentos{margin:0}
.filtro-ass{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.filtro-ass select{text-transform:none;letter-spacing:0;font-size:13px;min-width:220px;max-width:300px}
.tabela th.ord{cursor:pointer;user-select:none;transition:color .12s,background-color .12s}
.tabela th.ord:hover{color:var(--ink);background:var(--accent-soft)}
.tabela th.ord:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tabela th.ord .seta{display:inline-block;width:9px;margin-left:4px;font-size:9px;color:var(--faint)}
.tabela th.ord .seta::after{content:"\2195"}
.tabela th.ord.asc,.tabela th.ord.desc{color:var(--accent-ink)}
.tabela th.ord.asc .seta::after{content:"\25B2";color:var(--accent)}
.tabela th.ord.desc .seta::after{content:"\25BC";color:var(--accent)}
.tabela.num :is(th,td).t{text-align:left}

/* ---- Graficos da Visao geral: rotulos em todas as colunas e media movel de 3 meses ---- */
.grafico{padding:16px 18px 12px}
.g-t{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;margin-bottom:8px}
.g-leg{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.leg-mm{display:inline-block;width:18px;height:0;border-top:2px solid var(--warn);position:relative}
.leg-mm::after{content:"";position:absolute;left:6px;top:-4px;width:6px;height:6px;border-radius:50%;background:var(--warn)}
.leg-pj{display:inline-block;width:11px;height:11px;margin-left:8px;border-radius:3px;border:1.5px dashed var(--accent);background:rgba(11,143,156,.08)}
.g-val{font-size:11px;font-weight:600;fill:var(--muted);pointer-events:none}
.g-val.sel{font-size:12.5px;font-weight:800;fill:var(--ink)}
.g-val.proj-t{fill:var(--accent-ink);font-style:italic}
.g-val.dentro{fill:var(--ink);stroke:none}
.g-val.dentro.sel{fill:#fff}
.mm{fill:none;stroke:var(--warn);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}
.mm-p{fill:var(--surface);stroke:var(--warn);stroke-width:2;pointer-events:none}
@media (max-width: 900px){.grade-graf{grid-template-columns:1fr}}

/* ---- Balao do grafico (mouse sobre a coluna): mes, realizado, projecao e media movel ---- */
.grafico{position:relative}
.g-tip{position:absolute;left:0;top:0;z-index:6;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;
  min-width:190px;background:#0B2233;color:#fff;border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.5;white-space:nowrap;
  box-shadow:0 10px 28px rgba(11,34,51,.32)}
.g-tip.on{opacity:1;transform:none}
.g-tip .m{display:block;font-family:var(--f-display);font-weight:600;font-size:13px;margin-bottom:5px;color:#fff}
.g-tip .l{display:flex;justify-content:space-between;align-items:center;gap:18px}
.g-tip .l span{color:#B9C9D6}
.g-tip .l b{font-weight:700;font-variant-numeric:tabular-nums;color:#fff}
.g-tip .k{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:-1px}
.g-tip .k.real{background:var(--accent)}
.g-tip .k.pj{border:1.5px dashed #6FD3DC;background:rgba(111,211,220,.18)}
.g-tip .k.mm{background:var(--warn);border-radius:50%}

/* regra curta sob o titulo do grafico */
.g-sub{margin:-4px 0 6px;font-size:11px;line-height:1.35;color:var(--faint)}