:root{
  color-scheme:light;
  --bg:#fcfcfb; --panel:#fff; --panel2:#f4f3f0; --line:#e2e0da;
  --txt:#0b0b0b; --txt2:#52514e; --muted:#7d7b75;
  --s1:#1268b5; --s2:#e05a1e; --s3:#0f9e6e; --s4:#b8770a; --s5:#7d4bc4;
  --good:#0ca30c; --warn:#b8770a; --crit:#d03b3b;
  /* cores da logo: azul #0c246c, laranja #f05418, amarelo #f8d800 */
  --marca:#0c246c; --marca2:#173a95; --laranja:#f05418; --amarelo:#f8d800;
  --sobre-marca:#eaf2ff; --aba-ativa:#173a95;
  --grid:#e8e6e0; --sombra:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
}
:root[data-tema="escuro"]{
  color-scheme:dark;
  --bg:#131513; --panel:#1c1e1c; --panel2:#232622; --line:#31352f;
  --txt:#fff; --txt2:#c3c2b7; --muted:#8e8c83;
  --s1:#2f8fd6; --s2:#e0663a; --s3:#12a578; --s4:#bd8420; --s5:#8a68d0;
  --good:#3fbf3f; --warn:#e0a341; --crit:#e8615c;
  --marca:#0a1c52; --marca2:#14307c; --laranja:#f0703a; --amarelo:#f8d800;
  --sobre-marca:#dce8ff; --aba-ativa:#7fb2ff;
  --grid:#2a2d28; --sombra:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--txt);
  font:15.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
a{color:var(--s1)}

/* ------------------------------- login ------------------------------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:34px 30px;box-shadow:var(--sombra)}
.marca{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.marca .m{width:32px;height:32px;border-radius:9px;background:var(--s1);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:16px}
.marca b{font-size:17px;font-weight:660;letter-spacing:-.3px}
.logo-login{display:block;height:52px;width:auto;margin:0 auto 10px}
.login p.sub{color:var(--muted);font-size:13px;margin:0 0 24px;text-align:center}
.login{border-top:4px solid var(--laranja)}
label{display:block;font-size:12px;font-weight:620;color:var(--txt2);
  text-transform:uppercase;letter-spacing:.5px;margin:0 0 6px}
.campo{margin-bottom:16px}
input[type=text],input[type=password],input[type=date],select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);outline:none;transition:border-color .12s}
input:focus,select:focus{border-color:var(--s1)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid color-mix(in srgb,var(--amarelo) 70%,#fff);outline-offset:2px}
.btn{width:100%;padding:11px;border:none;border-radius:9px;background:var(--s1);color:#fff;
  font-weight:640;cursor:pointer;transition:filter .12s}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.55;cursor:default}
.erro{background:color-mix(in srgb,var(--crit) 12%,transparent);border:1px solid var(--crit);
  color:var(--crit);border-radius:9px;padding:9px 12px;font-size:13px;margin-bottom:14px;display:none}
.erro.on{display:block}
.dica{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.6}
.dica code{background:var(--panel2);padding:1px 5px;border-radius:4px;font-size:12px}

/* ------------------------------- shell ------------------------------- */
.topo{position:sticky;top:0;z-index:40;
  background:linear-gradient(100deg,var(--marca) 0%,var(--marca2) 62%,var(--marca) 100%);
  border-bottom:3px solid var(--laranja);
  display:flex;align-items:center;gap:16px;padding:0 24px;height:64px}
.topo .logo{height:38px;width:auto;display:block}
.topo .marca b{font-size:15px;color:#fff}
.topo .marca .m{width:27px;height:27px;font-size:14px;border-radius:8px;
  background:var(--laranja)}
.topo .esp{flex:1}
.portal{color:#fff;font-weight:700;font-size:15.5px;letter-spacing:-.2px;
  padding-left:14px;margin-left:2px;border-left:1px solid rgba(255,255,255,.25)}
.perfil{display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  font-size:13px;color:var(--sobre-marca);line-height:1.3}
.perfil .quem{display:flex;align-items:center;gap:8px}
.perfil .atualizado{font-size:11px;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
@media(max-width:760px){.portal{display:none}}
.badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);color:#fff}
.badge.diretoria{background:var(--laranja);border-color:transparent}
.badge.escritorio{background:var(--s1);border-color:transparent}
.badge.gerente{background:var(--s3);border-color:transparent}
.badge.vendedor{background:var(--amarelo);border-color:transparent;color:#3a2c00}
.icone{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);border-radius:8px;
  width:34px;height:34px;cursor:pointer;color:#fff;display:grid;place-items:center;font-size:14px}
.icone svg{width:17px;height:17px;display:block}
.icone:hover{background:var(--laranja);border-color:var(--laranja)}

nav{background:var(--panel);border-bottom:1px solid var(--line);padding:0 24px;
  display:flex;gap:2px;overflow-x:auto;position:static;
  box-shadow:0 1px 0 var(--line)}
nav button{background:none;border:none;padding:13px 18px;cursor:pointer;color:var(--muted);
  font-weight:650;font-size:14px;border-bottom:3px solid transparent;white-space:nowrap}
nav button:hover{color:var(--txt)}
nav button.on{color:var(--aba-ativa);border-bottom-color:var(--laranja)}

.filtros{background:var(--panel2);border-bottom:1px solid var(--line);padding:12px 20px;
  display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.fg{display:flex;flex-direction:column;gap:4px;min-width:130px}
.fg label{margin:0;font-size:10.5px}
.fg select,.fg input{padding:7px 9px;font-size:13px;border-radius:7px;min-height:34px}
/* O período virou um seletor só (29/09/2026): eram 13 botões em fila. */
.presets{display:flex;flex-direction:column;gap:4px;min-width:200px}
.presets label{margin:0;font-size:10.5px}
.presets select{padding:7px 9px;font-size:13px;border-radius:7px;min-height:34px;font-weight:600}
.limpar{background:none;border:none;color:var(--s1);cursor:pointer;font-size:12.5px;padding:8px 4px}

main{padding:26px 24px 72px;max-width:1480px;margin:0 auto}
h2{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);margin:30px 0 10px}
h2:first-child{margin-top:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:14px 16px;
  box-shadow:var(--sombra)}
.kpi .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.kpi .v{font-size:23px;font-weight:660;letter-spacing:-.6px;margin-top:3px;font-variant-numeric:tabular-nums}
.kpi .n{font-size:12px;color:var(--txt2);margin-top:2px}
.up{color:var(--good);font-weight:640}
.down{color:var(--crit);font-weight:640}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px 10px;
  box-shadow:var(--sombra);overflow:hidden}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.g2{grid-template-columns:1fr}}
.cap{font-size:12.5px;color:var(--txt2);margin-bottom:10px}
svg{display:block;width:100%;overflow:visible}
.ax{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.gl{stroke:var(--grid);stroke-width:1}
.dl{fill:var(--txt);font-size:12px;font-weight:620;font-variant-numeric:tabular-nums}
.legenda{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px;font-size:12.5px;color:var(--txt2)}
.legenda i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}

table{border-collapse:collapse;width:100%;font-size:13.5px;font-variant-numeric:tabular-nums}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.45px;color:var(--muted);
  font-weight:650;padding:8px 10px 8px 0;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--panel);user-select:none}
th:hover{color:var(--txt)}
.ordenar{display:block;width:100%;padding:0;border:0;background:none;color:inherit;
  font:inherit;text-transform:inherit;letter-spacing:inherit;text-align:inherit;cursor:pointer}
th.n .ordenar{text-align:right}
td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line)}
tbody tr:hover{background:var(--panel2)}
th.n,td.n{text-align:right}
td.neg{color:var(--crit);font-weight:620}
/* o número negativo marcado DENTRO da célula ou do cartão (24/10/2026): sem
   isto só a célula inteira (td.neg) ficava vermelha, e o −7,8 p.p. saía preto */
td .neg,.kpi .neg,.faixa .neg{color:var(--crit);font-weight:620}
.kpi .ok,.faixa .ok{color:var(--good)}
.mut{color:var(--muted)}
.rolar{overflow:auto;max-height:620px}
.rolar table{min-width:640px}

.tip{position:fixed;pointer-events:none;background:var(--panel);border:1px solid var(--line);
  border-radius:9px;padding:8px 11px;font-size:12.5px;box-shadow:0 8px 26px rgba(0,0,0,.18);
  opacity:0;transition:opacity .1s;z-index:90;font-variant-numeric:tabular-nums;max-width:280px}
.tip b{display:block;font-size:11.5px;color:var(--muted);font-weight:650;text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:3px}
.tip .r{display:flex;justify-content:space-between;gap:16px}
.vazio{text-align:center;color:var(--muted);padding:60px 0;font-size:14px}
.carregando{position:fixed;top:0;left:0;right:0;height:2px;background:var(--s1);
  transform:scaleX(0);transform-origin:left;transition:transform .3s;z-index:100}
.carregando.on{transform:scaleX(.75)}
.rodape{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.aviso{background:color-mix(in srgb,var(--warn) 10%,transparent);border:1px solid var(--warn);
  border-radius:9px;padding:10px 14px;font-size:13px;color:var(--txt2);margin-bottom:16px}

/* ---- medidor de meta ------------------------------------------------ */
/* a cor nunca decide sozinha: o numero e o rotulo vao sempre junto */
/* O medidor é só o número colorido. A barrinha ao lado saiu em 15/09/2026:
   em três colunas seguidas ela comia a largura da tabela sem acrescentar
   nada ao percentual escrito, e sumia em qualquer exportação. */
.med{display:flex;align-items:center;justify-content:flex-end;min-width:56px}
.med .n{font-variant-numeric:tabular-nums;font-weight:620;min-width:49px;text-align:right}
.med.bom  .n{color:var(--good)}
.med.meio .n{color:var(--warn)}
.med.ruim .n{color:var(--crit)}
.med.sem  .n{color:var(--muted);font-weight:500}
.acoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 18px}
.acoes .bt{padding:8px 14px;border:1px solid var(--line);border-radius:9px;background:var(--panel);
  color:var(--txt);font:inherit;font-size:13.5px;font-weight:560;cursor:pointer}
.acoes .bt:hover{border-color:var(--s1);color:var(--s1)}
.acoes .bt.pri{background:var(--s1);border-color:var(--s1);color:#fff}
.acoes .obs{color:var(--muted);font-size:12.5px}
.aviso{border-left:3px solid var(--s4);background:var(--panel2);border-radius:8px;
  padding:10px 14px;margin:12px 0;font-size:13.5px;color:var(--txt2)}
.resumo-executivo{margin:2px 0 24px}
.resumo-titulo{display:flex;align-items:baseline;justify-content:space-between;margin:10px 0 9px;
  font-weight:720;font-size:18px;color:var(--marca2)}
.resumo-titulo small{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.heroi{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:12px;margin-bottom:22px}
/* Compras tem sete cartões: dois indicadores de CMV, a folga e as quatro
   bases (compra por vencimento, compra por emissão, venda projetada e
   estoque). Em quatro colunas caem 4+3, com uma célula vazia no fim; em três
   sobraria um cartão sozinho na terceira linha. */
.heroi.seis{grid-template-columns:repeat(4,minmax(190px,1fr))}
.heroi .c{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  box-shadow:var(--sombra)}
.heroi .c.principal{background:linear-gradient(135deg,var(--marca),var(--marca2));color:#fff;
  border-color:transparent}
.heroi .c.principal .l,.heroi .c.principal .n{color:rgba(255,255,255,.78)}
.heroi .c .l{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  font-weight:640;margin-bottom:7px}
.heroi .c .v{font-size:25px;font-weight:660;letter-spacing:-.6px;line-height:1.15}
.heroi .c .n{font-size:12.5px;color:var(--txt2);margin-top:5px}

/* ============ O PAR: um número âncora e o seu par ============

   A Visão da Rede tinha quatro cartões do mesmo tamanho e o olho não sabia
   onde pousar. Agora são dois, e os pesos são diferentes DE PROPÓSITO: o
   Faturamento é o fato e é a âncora (44px); a Projeção é previsão e vem ao
   lado, menor (28px). Dar o mesmo corpo aos dois recriaria o problema.

   FIGURAS PROPORCIONAIS aqui, não tabulares: `tabular-nums` dá a todo dígito
   a largura de um zero, e em corpo grande um "R$ 121" fica frouxo. A tabular
   fica onde ela serve — nas colunas de número, que precisam alinhar. */
.par{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;
  align-items:stretch;margin-bottom:14px}
.par .c{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;box-shadow:var(--sombra);min-width:0}
.par .c.ancora{background:linear-gradient(135deg,var(--marca),var(--marca2));color:#fff;
  border-color:transparent}
.par .c.ancora .l,.par .c.ancora .n{color:rgba(255,255,255,.80)}
.par .c .l{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  font-weight:640;margin-bottom:6px}
.par .c .v{font-size:28px;font-weight:660;letter-spacing:-.7px;line-height:1.1;
  font-variant-numeric:proportional-nums}
.par .c.ancora .v{font-size:44px;letter-spacing:-1.2px}
.par .c .n{font-size:12.5px;color:var(--txt2);margin-top:6px}
.resumoFrase{margin:0 0 20px;font-size:14.5px;color:var(--txt2);line-height:1.5}
.resumoFrase b{color:var(--txt);font-weight:680}

/* ============ Trilho de metas ============

   Substitui as três roscas. Três anéis comparavam o MESMO faturamento contra
   três alvos e escondiam justamente isso — que o numerador é um só. Um
   trilho mostra de uma vez onde a rede está e qual é o próximo degrau.

   As três cores da rede (#E97132, #0070C0, #00B050) são claras demais para
   carregar significado sozinhas sobre fundo claro — medido: contraste 2,98,
   2,79 e 1,60. Elas separam bem ENTRE SI, inclusive sob daltonismo, então
   servem para identificar; o que não podem é substituir texto. Por isso cada
   marca do trilho tem nome e valor escritos na legenda abaixo. */
.trilho{margin:0 0 22px}
.trilhoPista{position:relative;height:14px;border-radius:7px;background:var(--line);
  margin:3px 0 0}
.trilhoFat{height:100%;border-radius:7px;min-width:7px}
/* A marca sobe e desce além da pista para não sumir dentro do preenchimento
   quando o faturamento já passou dela. */
.trilhoMarca{position:absolute;top:-6px;width:2px;height:26px;border-radius:1px;
  transform:translateX(-1px)}
.trilhoLeg{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:9px;font-size:12.5px}
.trilhoItem{display:flex;align-items:baseline;gap:6px;color:var(--txt2)}
.trilhoItem i{width:9px;height:9px;border-radius:2px;flex:none;align-self:center}
.trilhoItem b{color:var(--txt);font-weight:640}
.trilhoItem em{font-style:normal;color:var(--muted)}

/* ============ Seletor de medida ============

   No lugar de cinco tabelas com as mesmas doze lojas. A cor do bloco vive
   AQUI, na aba, ao lado de um texto legível — nunca como preenchimento que
   alguém precise enxergar. Genéricos leva o #FFC000 da planilha; as demais
   usam o tom de sistema do próprio bloco, que tem contraste para texto. */
.medidas{display:flex;flex-wrap:wrap;gap:2px;margin:18px 0 0;
  border-bottom:1px solid var(--line)}
.medidaAba{appearance:none;background:none;border:0;border-bottom:3px solid transparent;
  padding:9px 14px;font:inherit;font-size:13px;font-weight:600;color:var(--muted);
  cursor:pointer;margin-bottom:-1px;white-space:nowrap}
.medidaAba:hover{color:var(--txt)}
.medidaAba.on{color:var(--txt);border-bottom-color:var(--marca-aba,var(--ac))}
.medidas + .bloco{margin-top:0}
.medidas + .bloco > .blocoCab h2{font-size:15px}
@media(max-width:700px){
  .par{grid-template-columns:1fr}
  .par .c.ancora .v{font-size:36px}
  .medidas{overflow-x:auto;flex-wrap:nowrap}
}

/* numeros e nomes de loja nao quebram linha: a tabela rola na horizontal */
.rolar table td, .rolar table th{white-space:nowrap}

/* ---- blocos do acompanhamento e cadastro ---------------------------- */
.bloco{margin-bottom:30px}
.bloco h2{margin-bottom:8px}
.faixa{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
/* Números de resumo, não botões (29/09/2026): sem caixa nem fundo, só o
   traço da cor do bloco — antes pareciam clicáveis. */
.faixa > div{background:none;border:none;border-radius:0;
  padding:3px 16px 3px 11px;display:flex;align-items:baseline;gap:8px}
.faixa .r{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:640}
.faixa .v{font-size:15.5px;font-weight:660;font-variant-numeric:tabular-nums}
.nota{color:var(--muted);font-size:12.5px;margin-top:8px}
.med .ok,td .ok{color:var(--good);font-weight:620}
.subabas{display:flex;gap:6px;margin-bottom:14px}
.subabas button{padding:7px 14px;border:1px solid var(--line);border-radius:9px;background:var(--panel);
  color:var(--txt2);font:inherit;font-size:13.5px;font-weight:560;cursor:pointer}
.subabas button.on{background:var(--s1);border-color:var(--s1);color:#fff}
.acoes .bt[disabled]{opacity:.45;cursor:not-allowed}
table.grade td{padding:4px 8px 4px 0}
table.grade input[type=number],table.grade input.cargo{
  width:118px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;
  background:var(--bg);color:var(--txt);font:inherit;font-size:13px;text-align:right;
  font-variant-numeric:tabular-nums}
table.grade input.cargo{text-align:left;width:150px}
table.grade select.cargo{width:175px;text-align:left}
table.grade input:focus{border-color:var(--s1);outline:none}
table.grade tfoot td{border-top:2px solid var(--line);border-bottom:none;
  padding-top:9px;font-weight:660;font-variant-numeric:tabular-nums}
.acoes input[type=month]{padding:7px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--txt);font:inherit;font-size:13.5px}
.acoes input[type=month]:focus{border-color:var(--s1);outline:none}

/* ---- identidade por bloco -------------------------------------------
   Cada assunto tem uma cor fixa, sempre a mesma, para o olho encontrar o
   bloco sem ler o título. A cor é decorativa: todo número aparece escrito.
   Paleta validada em claro e escuro (contraste >= 3:1, separação CVD ok). */
.bloco{--ac:var(--s1)}
.bloco[data-cor="gerais"]{--ac:var(--s1)}
.bloco[data-cor="genericos"]{--ac:var(--s3)}
.bloco[data-cor="produtividade"]{--ac:var(--s5)}
.bloco[data-cor="ecofitus"]{--ac:var(--s2)}
.bloco[data-cor="vitnutry"]{--ac:var(--s4)}

.bloco h2{display:flex;align-items:center;gap:9px;color:var(--txt);
  font-size:13px;letter-spacing:.6px}
.bloco h2::before{content:"";width:4px;height:15px;border-radius:3px;background:var(--ac)}
.bloco .card{border-top:3px solid var(--ac)}
.bloco thead th{background:color-mix(in srgb,var(--ac) 8%,var(--panel))}
.faixa > div{border-left:3px solid var(--ac)}
.faixa .v{color:var(--txt)}
tbody tr:hover{background:color-mix(in srgb,var(--ac) 7%,transparent)}

/* a primeira coluna é a identidade da linha: fica firme */
.rolar table td:first-child{font-weight:560;color:var(--txt)}

/* ---- gestao de usuarios --------------------------------------------- */
.bt.mini{padding:4px 9px;font-size:12px;border-radius:7px}
.acoes-linha{display:flex;gap:5px;white-space:nowrap}
tr.inativo td{opacity:.5}
/* os botoes da linha inativa continuam legiveis: e por eles que se reativa */
tr.inativo td.acoes-linha,tr.inativo td:nth-last-child(3){opacity:1}
tr.inativo td:first-child b{text-decoration:line-through}
table.grade select{padding:5px 7px;border:1px solid var(--line);border-radius:7px;
  background:var(--bg);color:var(--txt);font:inherit;font-size:12.5px;max-width:170px}
table.grade input[type=text]{width:180px;padding:5px 8px;border:1px solid var(--line);
  border-radius:7px;background:var(--bg);color:var(--txt);font:inherit;font-size:13px;text-align:left}
.acoes input[type=text]{padding:7px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--txt);font:inherit;font-size:13.5px}
.acoes select{padding:7px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--txt);font:inherit;font-size:13.5px;width:auto;min-width:150px}
.aviso .det,.nota .det{margin-top:7px;font-size:12.5px;line-height:1.55;opacity:.9}
.selo-adm{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  background:var(--laranja);color:#fff;padding:2px 6px;border-radius:20px;margin-left:6px}
.marca-adm{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--txt2);
  text-transform:none;letter-spacing:0;font-weight:560;margin:0}
.sigla{display:inline-block;min-width:26px;padding:1px 6px;border-radius:5px;
  background:var(--panel2);border:1px solid var(--line);font-weight:660;font-size:12px;
  letter-spacing:.3px;text-align:center;cursor:default}

/* ============ barra fixa e cabeçalho de tabela grudado ============ */
/* Abas e filtros acompanham a rolagem: em lista longa, ninguém deveria
   voltar ao topo só para trocar o período. */
.fixo{position:sticky;top:64px;z-index:30;background:var(--bg);
  box-shadow:0 6px 14px -12px rgba(0,0,0,.7)}
/* a tabela rola dentro dela mesma e o cabeçalho fica parado no topo dela;
   --stick é medido em tempo real, porque a barra muda de altura por aba */
.rolar{max-height:calc(100vh - var(--stick, 190px) - 150px);min-height:220px}
.bloco thead th{position:sticky;top:0;z-index:4}
.rolar th:first-child,.rolar td:first-child{position:sticky;left:0;background:var(--panel);z-index:3;
  padding-left:10px;box-shadow:1px 0 0 var(--line)}
.rolar thead th:first-child{z-index:7}
.rolar tbody tr:hover td:first-child{background:var(--panel2)}
.fora-time td{opacity:.62}
.fora-time td:first-child,.fora-time td:nth-child(2),.fora-time td:nth-child(3){opacity:1}
.regra-cargos{margin:0 0 12px;max-width:1100px}

/* ============ cores das metas, iguais às da planilha ============ */
/* O usuário reconhece a coluna pela cor que já usa no Excel. O texto vai
   sempre junto: a cor identifica a meta, não informa desempenho. */
th.cor{color:#fff;border-bottom:none;padding-left:8px;padding-right:8px}
th.cor.meta {background:#E97132}
th.cor.super{background:#0070C0}
th.cor.aniv {background:#00B050}
th.cor.min  {background:#C00000}   /* Fat. Mínimo (13/10/2026) */
/* amarelo com texto branco não se lê — aqui o texto é preto */
th.cor.gen  {background:#FFC000;color:#111}
th.cor:hover{color:#fff;filter:brightness(1.08)}
th.cor.gen:hover{color:#111}

/* ============ roscas das metas ============ */
.roscas{display:grid;grid-template-columns:repeat(3,minmax(200px,1fr));gap:12px;margin:0 0 26px}
.rosca{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px 12px 12px;box-shadow:var(--sombra);text-align:center}
.rosca figcaption{font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);font-weight:640;margin-bottom:6px}
.rosca svg{width:100%;max-width:168px;height:auto;display:block;margin:0 auto}
.roscaPct{font-size:25px;font-weight:660;letter-spacing:-.6px;fill:var(--txt)}
.roscaLeg{display:flex;flex-direction:column;gap:3px;margin-top:8px;
  font-size:12.5px;color:var(--txt2);text-align:left}
.roscaLeg span{display:flex;align-items:center;gap:7px}
.roscaLeg i{width:10px;height:10px;border-radius:2px;flex:none}
/* NÃO usar .vazio aqui: já existe na linha 153 como estado vazio de tela,
   com padding de 60px. Reaproveitar o nome esticava o quadradinho para 120px
   de altura. Nome próprio, colisão resolvida. */
.roscaLeg i.roscaVazio{background:var(--line)}
.roscas.duas{grid-template-columns:repeat(2,minmax(220px,1fr))}
/* a busca precisa caber "Procurar por nome ou CNPJ" sem cortar o placeholder */
#qForn{min-width:270px}
.roscaLeg span.mut{color:var(--muted);padding-left:17px}
@media(max-width:980px){.roscas{grid-template-columns:repeat(2,minmax(180px,1fr))}}
@media(max-width:700px){.roscas{grid-template-columns:1fr}}

/* ============ notas recolhidas ============ */
.notas{margin:0 0 12px}
.notas details{border:1px solid var(--line);border-radius:8px;padding:0;margin-bottom:6px;
  background:var(--panel)}
.notas summary{cursor:pointer;padding:7px 12px;font-size:12.5px;color:var(--muted);
  list-style:none;user-select:none}
.notas summary::-webkit-details-marker{display:none}
.notas summary::before{content:'▸ ';color:var(--ac)}
.notas details[open] summary::before{content:'▾ '}
.notas details[open] summary{color:var(--txt)}
.notas details>div{padding:0 12px 10px;font-size:12.5px;color:var(--muted);line-height:1.55}

/* ============ campanha trimestral ============ */
.campanha .triSel{display:flex;gap:6px;align-items:center;margin:2px 0 14px;flex-wrap:wrap}
.campanha .triSel button{padding:7px 14px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--muted);cursor:pointer;font-size:13px}
.campanha .triSel button.on{background:var(--marca2);border-color:var(--marca2);color:#fff;font-weight:620}
.campanha .triSel .mut{margin-left:8px;font-size:12.5px}

/* campo de busca de colaborador, no lugar da lista suspensa */
.filtros input[type=search]{padding:6px 9px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--txt);font-size:13px;min-width:190px}
.filtros input[type=search]:focus{border-color:var(--ac);outline:none}

/* período efetivo, vindo da resposta do servidor */
.periodo{font-size:12.5px;color:var(--muted);margin:0 0 10px;padding:6px 10px;
  border:1px dashed var(--line);border-radius:8px;display:inline-block}
.periodo b{color:var(--txt);font-weight:640}

/* busca dentro da grade de cadastro */
.buscaGrade{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.buscaGrade input[type=search]{padding:7px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--txt);font-size:13px;min-width:260px}
.buscaGrade input[type=search]:focus{border-color:var(--ac);outline:none}
table.grade select.lot{padding:5px 7px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);color:var(--txt);font-size:12.5px;max-width:210px}
table.grade select.lot:focus{border-color:var(--ac);outline:none}

/* ============ senha ================================================= */
dialog{border:0;border-radius:16px;padding:0;background:var(--panel);color:var(--txt);
  width:min(440px,calc(100vw - 32px));box-shadow:0 24px 80px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(5,13,35,.62);backdrop-filter:blur(2px)}
.modal{padding:26px}
.modal h2{font-size:20px;text-transform:none;letter-spacing:-.2px;color:var(--txt);margin:0 0 4px}
.submodal{color:var(--muted);margin:0 0 20px;font-size:14px}
.acoes-modal{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
.acoes-modal .bt{width:auto;padding:9px 15px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);cursor:pointer}
.acoes-modal .bt.pri{background:var(--marca2);border-color:var(--marca2);color:#fff}

@media(max-width:1000px){
  .heroi{grid-template-columns:repeat(2,minmax(180px,1fr))}
}
@media(max-width:700px){
  /* Topo em DUAS linhas, não três (29/09/2026): logo e ícones em cima;
     Vendas/Compras e o perfil embaixo. O nome some no celular — o selo do
     perfil fica, e o nome aparece ao tocar nele (title). */
  .topo{height:auto;min-height:56px;padding:9px 12px;gap:8px 8px;flex-wrap:wrap}
  .topo .logo{height:30px;order:0}.topo .esp{order:1}.topo .icone{order:2;width:32px;height:32px}
  .areaSel{order:3;flex:1 1 60%;margin-left:0}.areaSel button{flex:1}
  .perfil{order:4;align-items:flex-end;justify-content:center}.perfil .atualizado,.perfil #uNome{display:none}
  .fixo{top:0;position:relative}.filtros{padding:10px 14px}.presets{width:100%}
  nav{padding:0 8px}nav button{padding:12px 11px;font-size:13px}
  main{padding:18px 12px 60px}.heroi{grid-template-columns:1fr}.heroi .c{padding:14px 15px}
  .resumo-titulo{font-size:16px}.fg{min-width:calc(50% - 6px);flex:1}
  .rolar{max-height:none}.card{padding:12px 10px 8px}.acoes{gap:7px}
}

/* ============ áreas: Vendas e Compras ============ */
.areaSel{display:flex;gap:4px;margin-left:18px}
.areaSel button{padding:6px 14px;border:1px solid rgba(255,255,255,.25);border-radius:8px;
  background:rgba(255,255,255,.08);color:#fff;font-size:12.5px;cursor:pointer;font-weight:560}
.areaSel button.on{background:#fff;color:var(--marca2);border-color:#fff;font-weight:700}
.areaSel button:hover:not(.on){background:rgba(255,255,255,.2)}

.escolha{max-width:820px;margin:60px auto;padding:0 20px;text-align:center}
.escolha h2{font-size:20px;font-weight:640;margin:0 0 22px;color:var(--txt)}
.escolha .cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.escolha .cartoes button{display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  padding:22px 20px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  cursor:pointer;text-align:left;transition:border-color .12s,transform .12s}
.escolha .cartoes button:hover{border-color:var(--ac);transform:translateY(-2px)}
.escolha .cartoes .t{font-size:17px;font-weight:660;color:var(--txt)}
.escolha .cartoes .d{font-size:12.5px;color:var(--muted);line-height:1.5}
.escolha .obs{margin-top:18px;font-size:12.5px;color:var(--muted)}

/* o cartão principal do CMV fica vermelho quando estourou o teto */
.resumo-executivo.compras .c.principal.estourou{background:var(--crit);border-color:var(--crit)}

/* ============ exportar tabela ============ */
.blocoCab{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.blocoCab h2{margin-bottom:0}
.exportar{display:flex;gap:6px;flex:none}
.exportar button{padding:4px 11px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);color:var(--muted);font-size:11.5px;cursor:pointer}
.exportar button:hover{border-color:var(--ac);color:var(--txt)}

/* Selo de estado da apuração de comissão.
   Nome próprio (seloComp) para não colidir com .selo-adm, que já existe e é
   outra coisa. Reaproveitar classe por parecer parecido já custou uma
   legenda de 120px neste projeto. */
.seloComp{border-radius:9px;padding:11px 14px;margin-bottom:12px;font-size:13.5px;
  line-height:1.5;border:1px solid var(--line);background:var(--panel2)}
.seloComp.provisoria{border-left:3px solid var(--warn);
  background:color-mix(in srgb,var(--warn) 7%,var(--panel2))}
.seloComp.fechada{border-left:3px solid var(--ok,#00B050);
  background:color-mix(in srgb,var(--ok,#00B050) 8%,var(--panel2))}

/* Busca dos filtros de campanha — três caixas lado a lado, resultado embaixo.
   Nome próprio para não colidir com nada que já exista. */
.buscas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.buscaCx{flex:1 1 240px;min-width:220px;position:relative}
.buscaCx label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);font-weight:640;margin-bottom:4px}
.buscaCx input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--txt);font-size:13.5px}
.buscaRes{max-height:220px;overflow:auto;margin-top:4px}
.buscaRes:not(:empty){border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.buscaRes .mut,.buscaRes .neg{padding:8px 10px;font-size:12.5px}
.linhaRes{display:block;width:100%;text-align:left;padding:7px 10px;border:0;
  border-bottom:1px solid var(--line);background:transparent;color:var(--txt);
  font-size:13px;cursor:pointer;font-family:inherit}
.linhaRes:last-child{border-bottom:0}
/* Segunda linha do resultado: de onde a classificação desce, quantos produtos
   tem. Fica embaixo do nome porque numa caixa estreita quebrava no meio da
   frase e a lista virava um parágrafo. */
.resDet{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.linhaRes:hover{background:color-mix(in srgb,var(--ac) 10%,transparent)}
.linhaBusca td{background:var(--panel2)}
.linhaBusca input{width:100%;max-width:520px;padding:7px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);color:var(--txt);font-size:13px}
/* A lista de filtros escolhidos NÃO usa .rolar: aquela classe tem
   min-height 220px, pensada para tabela grande, e aqui deixava 140px de vão
   branco embaixo de uma linha só. Rolagem horizontal sem altura mínima. */
.listaSel{overflow-x:auto}
.listaSel .vazio{padding:18px;text-align:center}

/* Um item da campanha pode ter VÁRIAS embalagens ligadas: cada uma numa
   linha própria, com o botão de tirar encostado à direita. Empilhar em vez
   de virar uma frase só deixa claro que são coisas separadas — e que dá
   para tirar uma sem mexer nas outras. */
.linhaLig{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:3px 0;font-size:13px;max-width:560px}
.linhaLig+.linhaLig{border-top:1px dashed var(--line)}
.linhaLig .bt.mini{flex:0 0 auto;opacity:.65}
.linhaLig:hover .bt.mini{opacity:1}
/* Campo de valor por unidade dentro da tabela: os valores vieram de leitura
   automática do portfólio e precisam ser conferíveis no lugar. */
.vlItem{width:96px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--txt);font-size:13px;text-align:right;
  font-variant-numeric:tabular-nums}

/* ===================== Regra aplicada e cadastro de campanha =====================

   O selo de regra fica ACIMA do resultado de propósito. Uma apuração que diz
   quanto sem dizer por quê obriga o usuário a confiar; e o portão de genéricos
   valia, em julho/2026, um terço de tudo que a rede pagou no mês. Quem confere
   precisa ver a regra antes do número. */
.seloRegra{border-radius:9px;padding:11px 14px;margin-bottom:12px;font-size:13px;
  line-height:1.55;border:1px solid var(--line);background:var(--panel2);
  border-left:3px solid var(--ac)}
.seloRegra>b{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.seloRegra .det{margin-top:5px}

/* Formulário da campanha. Grade que se acomoda: numa tela estreita cada campo
   ocupa a linha inteira em vez de espremer rótulo e valor lado a lado. */
.formCamp{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:10px 14px;margin-bottom:6px}
.formCamp label{display:flex;flex-direction:column;gap:4px;font-size:11px;
  text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:640}
.formCamp label.larga{grid-column:1/-1}
.formCamp label.chk{flex-direction:row;align-items:center;gap:7px;text-transform:none;
  letter-spacing:0;font-size:12.5px;font-weight:500;color:var(--txt)}
.formCamp input,.formCamp select{width:100%;padding:8px 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);color:var(--txt);font-size:13.5px;
  text-transform:none;letter-spacing:0;font-weight:400}
.formCamp label.chk input{width:auto}
.formCamp input:disabled{opacity:.45}
.subTit{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  font-weight:700;margin:16px 0 7px}
.listaSel td input{width:100%;padding:5px 8px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);color:var(--txt);font-size:13px}
.listaSel td input[type=checkbox]{width:auto}
textarea#cMecanica{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--txt);font-size:13.5px;font-family:inherit;resize:vertical}

/* A cor de cada aba, espelhando a do bloco. O Genéricos leva o #FFC000 da
   planilha — é por essa cor que a rede reconhece o indicador —, e ele só
   aparece como sublinhado de 3px, espesso o bastante para ser visto com
   1,6:1 de contraste. O texto da aba nunca usa essas cores. */
.medidaAba[data-cor="gerais"].on{border-bottom-color:var(--s1)}
.medidaAba[data-cor="genericos"].on{border-bottom-color:#FFC000}
.medidaAba[data-cor="ecofitus"].on{border-bottom-color:var(--s2)}
.medidaAba[data-cor="vitnutry"].on{border-bottom-color:var(--s4)}
.medidaAba[data-cor="produtividade"].on{border-bottom-color:var(--s5)}

/* A aba ativa JÁ é o título do bloco. Repeti-lo 20px abaixo é ruído — os
   botões de exportar continuam onde estavam, e o nome segue indo no arquivo
   exportado. */
.medidas + .bloco > .blocoCab h2{position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.medidas + .bloco > .blocoCab{justify-content:flex-end;min-height:0;margin-bottom:8px}

/* Campo cujo valor o portal não entendeu. Fica marcado até a pessoa corrigir
   — e nada foi salvo enquanto ele estiver assim. */
.grade input.ruim{border-color:var(--crit);background:color-mix(in srgb,var(--crit) 8%,var(--panel))}

/* Produtos já ligados a um item, dentro do formulário de campanha. */
.listaSel .linhaLig{display:flex;align-items:center;gap:8px;justify-content:space-between;
  font-size:12.5px;padding:2px 0}
.listaSel .buscaIt{margin-top:4px}

/* ==================== ACOMPANHAR CAMPANHA EM ANDAMENTO ====================

   Pedido dos gerentes, 22/09/2026, para campanhas bimestrais e trimestrais. */

/* Quanto da janela já passou. Barra e não frase: "dia 31 de 61" lido como
   texto exige fazer a conta de cabeça, e numa tela de acompanhamento ninguém
   faz. A barra responde antes de a pessoa ler. */
.ritmo{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel)}
.ritmoCab{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;font-size:13.5px;margin-bottom:8px}
.ritmoCab b{font-variant-numeric:tabular-nums}
.ritmoBarra{height:8px;border-radius:99px;background:var(--panel2);overflow:hidden}
.ritmoBarra i{display:block;height:100%;border-radius:99px;background:var(--marca2)}
:root[data-tema="escuro"] .ritmoBarra i{background:var(--aba-ativa)}
.ritmo .det{margin-top:8px;font-size:12px;color:var(--muted)}

/* A LINHA DE QUEM ESTÁ OLHANDO. Numa tabela de onze lojas, achar a sua é a
   primeira coisa que o gerente faz — e ele fazia isso lendo nome por nome.
   Fundo, não cor de texto: a cor do texto já carrega significado de valor
   (negativo, alerta) e não pode ser gasta para dizer "é você". */
tbody tr.minha{background:color-mix(in srgb,var(--marca2) 7%,transparent)}
tbody tr.minha td:first-child{box-shadow:inset 3px 0 0 var(--marca2);font-weight:600}
:root[data-tema="escuro"] tbody tr.minha{
  background:color-mix(in srgb,var(--aba-ativa) 12%,transparent)}
:root[data-tema="escuro"] tbody tr.minha td:first-child{
  box-shadow:inset 3px 0 0 var(--aba-ativa)}

/* ==================== HERÓI E BARRAS RANQUEADAS ====================

   Aprovado em 22/09/2026. A tela de campanha que o usuário mandou tinha nove
   colunas, uma só de traços, outra repetindo a mesma frase dez vezes — e a
   coluna que decide a ordem ficava de fora. Comparar em ordem é trabalho de
   barra; a tabela fica embaixo para o número exato e para a exportação. */

/* numHeroi, e NÃO .heroi: .heroi já existe lá em cima (linha ~184) — é a
   GRADE de cartões do Compras e da Visão da Rede. Em 22/09 eu redefini
   .heroi aqui como flex com quebra de linha, e isso desmontou a grade: cada
   cartão do CMV da rede passou a ter a largura do próprio texto. O usuário
   viu e pediu "organizado e uniforme" em 23/09. Mesmo erro do .trilho, do
   outro lado: numa folha sem build, nome de classe é espaço global.

   Um número grande e os apoios ao lado. UM por tela. Figuras proporcionais
   no número grande: tabular-nums dá a todo dígito a largura do zero e faz
   "121" parecer frouxo em corpo grande. */
.numHeroi{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 28px;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.numHeroi .rot{display:block;margin-bottom:2px;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.numHeroi .n1{font-size:clamp(38px,9vw,50px);line-height:.95;font-weight:650;
  letter-spacing:-.02em;display:block}
.numHeroi .n2{font-size:25px;line-height:1.1;font-weight:600;color:var(--txt2);display:block}
.numHeroi small{display:block;font-size:12.5px;font-weight:500;color:var(--muted)}

.barras{display:grid;gap:3px}
.barras .lin{display:grid;
  grid-template-columns:28px minmax(88px,150px) 1fr minmax(74px,150px);
  align-items:center;gap:12px;padding:6px 10px;border-radius:9px}
.barras .pos{font-size:11.5px;color:var(--muted);text-align:right;
  font-variant-numeric:tabular-nums}
.barras .nomeB{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barras .lin.minha{background:color-mix(in srgb,var(--s1) 8%,transparent)}
.barras .lin.minha .nomeB{font-weight:700}
.barras .lin.minha .pos{color:var(--txt2);font-weight:700}
/* pistaB e não .trilho: .trilho já é o trilho de metas da Visão da Rede,
   lá em cima, e leva margin-bottom:22px. Herdar aquela margem engordava cada
   linha da barra em 22px calados. */
.barras .pistaB{position:relative;height:22px;min-width:0}
/* a linha do zero, onde ela realmente está na escala */
.barras .pistaB::before{content:"";position:absolute;left:var(--zero,0);top:-2px;
  bottom:-2px;width:1px;background:var(--line)}
/* ponta arredondada só do lado do dado; quadrada na linha de base */
.barras .bar{position:absolute;top:3px;height:16px;background:var(--s1);
  border-radius:0 4px 4px 0}
.barras .bar.neg{background:var(--crit);border-radius:4px 0 0 4px}
.barras .lin.minha .bar{background:var(--marca2)}
:root[data-tema="escuro"] .barras .lin.minha .bar{background:var(--aba-ativa)}
/* coluna de números: aqui SIM tabular-nums, porque eles alinham na vertical */
/* A fita do prêmio pode ser longa ("bicicleta elétrica") e estava sendo
   cortada pela borda do cartão. O valor não quebra; a fita quebra para a
   linha de baixo, e só na linha que tem prêmio. */
.barras .vlrB{font-size:13px;font-weight:600;color:var(--txt2);
  font-variant-numeric:tabular-nums;text-align:right;line-height:1.35}
.barras .vlrB>span.fita{white-space:normal}
.barras .lin.minha .vlrB{color:var(--txt)}
.barras .vlrB.queda{color:var(--crit)}
.barras .fita{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:99px;
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  vertical-align:1px;color:var(--txt);
  background:color-mix(in srgb,var(--s3) 22%,transparent)}
.eixoLin{display:grid;
  grid-template-columns:28px minmax(88px,150px) 1fr minmax(74px,150px);
  gap:12px;padding:0 10px;margin-top:2px}
.eixoLin .eixo{grid-column:3;position:relative;height:18px;padding-top:5px;
  border-top:1px solid var(--line)}
.eixoLin .eixo span{position:absolute;top:5px;font-size:10.5px;color:var(--muted);
  transform:translateX(-50%);font-variant-numeric:tabular-nums;white-space:nowrap}

/* CMV da rede: seis cartões iguais, duas fileiras de três (23/09/2026).
   grid-auto-rows:1fr deixa as DUAS fileiras da mesma altura — sem isso a
   fileira do "Comprei no mês", que tem a nota mais longa, ficava mais alta
   que a de cima. Os @media repetem .tres porque .heroi.tres ganha de .heroi
   em especificidade e ignoraria os @media originais. */
.heroi.tres{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr}
@media(max-width:1000px){ .heroi.tres{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:700px){ .heroi.tres{grid-template-columns:1fr;grid-auto-rows:auto} }

/* ====================== OBJETIVOS - SELL IN (28/09/2026) ======================
   Prefixo "si" em tudo: .trilho e .heroi já colidiram nesta folha, e o teste
   de classe duplicada só pega a colisão depois que ela existe. */
.siGrade{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:14px;margin:0 0 26px}
.siCard{position:relative;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--s1);
  border-radius:14px;padding:15px 18px 13px;box-shadow:var(--sombra);
  display:flex;flex-direction:column;gap:9px;min-width:0}
.siCard.bom{border-top-color:var(--good)}
.siCard.meio{border-top-color:var(--warn)}
.siCard.ruim{border-top-color:var(--crit)}
.siTopo{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.siNome{margin:0;font-size:15.5px;font-weight:720;letter-spacing:-.2px;line-height:1.25}
.siSub{font-size:12px;color:var(--muted);margin-top:2px}
.siSelo{flex:0 0 auto;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap;
  background:color-mix(in srgb,var(--s1) 12%,transparent);color:var(--s1)}
.siSelo.bom{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.siSelo.meio{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.siSelo.ruim{background:color-mix(in srgb,var(--crit) 13%,transparent);color:var(--crit)}
.siPer{font-size:12.5px;color:var(--txt2)}
.siNum{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.siPct{font-size:34px;font-weight:740;letter-spacing:-1.2px;line-height:1}
.siPct.bom{color:var(--good)}.siPct.meio{color:var(--warn)}.siPct.ruim{color:var(--crit)}
.siDe{font-size:12px;color:var(--txt2);text-align:right;line-height:1.4}
.siPista{position:relative;height:12px;background:var(--panel2);border-radius:99px;margin-top:3px}
.siFat{position:absolute;left:0;top:0;bottom:0;background:var(--s1);border-radius:99px}
.siMeta{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--txt);transform:translateX(-1px)}
.siPed{position:absolute;top:50%;width:11px;height:11px;background:var(--s2);border:2px solid var(--panel);
  transform:translate(-50%,-50%) rotate(45deg);border-radius:2px}
.siLeg{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.siLeg .q{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px;border-radius:2px}
.siLeg .q.fat{background:var(--s1)}
.siLeg .q.meta{width:2px;height:12px;background:var(--txt);border-radius:0}
.siLeg .q.ped{background:var(--s2);transform:rotate(45deg) scale(.8)}
.siRodape{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;
  border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.siRodape .r{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);font-weight:650}
.siRodape .v{display:block;font-size:15px;font-weight:660;letter-spacing:-.2px}
.siRodape .v.ok{color:var(--good)}
.siRodape .d{display:block;font-size:11px;color:var(--muted);line-height:1.3}
.siForn{font-size:11.5px;color:var(--muted)}
/* Sell In 29/10/2026: marca dos 80% na pista e mês a mês no cartão */
.si80{opacity:.55;background:repeating-linear-gradient(var(--txt) 0 3px,transparent 3px 5px)}
.si80Nota{font-size:11.5px;color:var(--muted)}
.siMes{font-size:12px}
.siMes table{width:100%;margin-top:6px;border-collapse:collapse}
.siMes th,.siMes td{padding:3px 4px;border-bottom:1px solid var(--line)}
.siMes th{font-weight:600;color:var(--muted);text-align:left}
.siMes .n{text-align:right}
.siAcoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.siAcoes .bt{border:1px solid var(--line);background:var(--panel);color:var(--txt);cursor:pointer}
.siAcoes .bt:hover{border-color:var(--s1);color:var(--s1)}
.siAcoes .bt.pri{background:var(--s1);border-color:var(--s1);color:#fff}
.siTit{font-size:16px;margin:6px 0 10px}
.siTit small{color:var(--muted);font-weight:600;font-size:13px}
.siLista{max-height:320px;overflow:auto}
@media(max-width:700px){ .siGrade{grid-template-columns:1fr} .siPct{font-size:30px} }
/* No tema escuro o título do resumo saía em azul-marinho sobre fundo quase
   preto (visto na prévia do Sell In em 28/09/2026; o CMV da Rede tinha o
   mesmo defeito). */
:root[data-tema="escuro"] .resumo-titulo{color:var(--aba-ativa)}

/* Explicação longa recolhida: a primeira frase fica à vista (29/09/2026) */
.notaLonga{color:var(--muted);font-size:12.5px;margin-top:8px;line-height:1.55}
.notaLonga summary{cursor:pointer;list-style:none}
.notaLonga summary::-webkit-details-marker{display:none}
.notaLonga .mais{color:var(--s1);font-weight:600;white-space:nowrap}
.notaLonga .mais::after{content:' ▾'}
.notaLonga[open] .mais{display:none}
.notaLonga > div{margin-top:4px}

/* Cabeçalho em grupos e tabela compacta (CMV por loja, 29/09/2026) */
.comGrupos thead tr.grupos th{font-size:10.5px;color:var(--muted);text-align:center;
  padding:6px 6px 4px;border-bottom:1px solid var(--line);letter-spacing:.6px}
.comGrupos thead tr.grupos th.grupo{border-left:1px solid var(--line);color:var(--txt2)}
.comGrupos thead tr:nth-child(2) th{top:27px}
.rolar table.compacta th{white-space:normal;vertical-align:bottom;line-height:1.25;padding:6px 7px}
.rolar table.compacta td{padding:7px 7px}
.rolar table.compacta th .ordenar{white-space:normal}
@media(max-width:700px){
  .rolar td:first-child{max-width:132px;white-space:normal;line-height:1.3}
}
.siNome a{color:inherit;text-decoration:none}
.siNome a:hover{text-decoration:underline;color:var(--s1)}
.siAcoes a.bt{text-decoration:none;display:inline-block}
.siRodape .v.neg{color:var(--crit)}
.siRodape.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
/* faturamento, lucro, margem e prêmio do cartão: 2 x 2, número numa linha só */
.siRodape.siFin{margin-top:10px;padding:10px 12px;border:0;border-radius:9px;background:var(--panel2);gap:10px 18px}
.siRodape.siFin .v{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:16px}

/* ================== CONCENTRAÇÃO DE BOLETOS (29/09/2026) ==================
   Prefixo "bg". Barra por dia do calendário; cor = categoria (Duplicatas
   --s1, Folha --s2, par validado para daltonismo nos dois temas). */
.bgCtl{align-items:flex-end}
.bgCampo{display:flex;flex-direction:column;gap:4px;font-size:10.5px;min-width:170px}
.bgCampo.largo{flex:1;min-width:260px;max-width:520px}
.bgCampo select,.bgCampo input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--txt);font-size:13.5px;text-transform:none;letter-spacing:0}
.bgGraf{display:grid;grid-template-columns:74px 1fr;height:280px;padding:22px 6px 26px 0}
.bgEixo{position:relative}
.bgEixo span{position:absolute;right:8px;transform:translateY(50%);font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bgArea{position:relative;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.bgGrade{position:absolute;left:0;right:0;border-top:1px dashed var(--grid)}
.bgBarras{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--n),1fr);
  gap:2px;padding:0 4px;align-items:end}
.bgCol{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;cursor:default}
.bgCol:not(.vazia):hover .bgPilha{filter:brightness(1.12)}
.bgPilha{width:78%;max-width:26px;display:flex;flex-direction:column-reverse;gap:2px;min-height:3px}
.bgSeg{display:block;width:100%;min-height:0}
.bgSeg:last-child{border-radius:4px 4px 0 0}
.bgSeg.dup{background:var(--s1)}
.bgSeg.folha{background:var(--s2)}
.bgDia{position:absolute;bottom:-21px;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.bgDia.hoje{color:var(--txt);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.bgRot{position:absolute;font-size:11px;font-weight:700;color:var(--txt);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.bgLeg{display:flex;gap:16px;font-size:12px;color:var(--txt2);margin:4px 0 0 74px}
.bgLeg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.bgLeg i.dup{background:var(--s1)}.bgLeg i.folha{background:var(--s2)}
@media(max-width:700px){
  .bgGraf{grid-template-columns:52px 1fr;height:220px}
  .bgEixo span{font-size:9.5px;right:4px}
  .bgDia{font-size:8.5px}.bgCol:nth-child(even) .bgDia:not(.hoje){visibility:hidden}
  .bgBarras{gap:1px;padding:0 1px}
  .bgLeg{margin-left:52px}
}

/* ---------- Ciclos de Compra (29/09/2026) — prefixo cc ---------- */
.ccLink{border:0;background:none;padding:0;color:var(--s1);font:inherit;font-weight:620;cursor:pointer;
  text-align:left;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--s1) 35%,transparent);
  text-underline-offset:3px}
.ccLink:hover{text-decoration-color:var(--s1)}
.ccNao{color:var(--crit);font-weight:620}
.ccSub{font-size:12.5px;color:var(--txt2);line-height:1.55;margin:-4px 0 12px}
.ccNf{white-space:nowrap}
.ccRot{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);white-space:nowrap;text-transform:none;letter-spacing:0}
.ccRot input,.acoes select#ccSit{padding:7px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--txt);font:inherit}
.ccAbrirForm{margin:0 0 18px}
.ccNota{margin-top:10px;font-size:12.5px;color:var(--txt2)}
.ccDiv{display:inline-block;font-size:11.5px;font-weight:650;padding:2px 8px;border-radius:99px;white-space:nowrap;
  background:color-mix(in srgb,var(--s1) 11%,transparent);color:var(--s1)}
.ccDiv.preco_maior,.ccDiv.qtd_menor,.ccDiv.sem_nota{background:color-mix(in srgb,var(--crit) 12%,transparent);color:var(--crit)}
.ccDiv.preco_menor,.ccDiv.qtd_maior{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
.ccDiv.sem_pedido{background:color-mix(in srgb,var(--s2) 13%,transparent);color:var(--s2)}
.ccDiv.produto_novo{background:color-mix(in srgb,var(--s5) 13%,transparent);color:var(--s5)}
.ccMover{padding:4px 8px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--txt);font:inherit;font-size:12px}
td .ccDiv{margin:1px 2px 1px 0}

/* ---------- Comissão: resumo da rede, dois cartões, detalhe (30/09/2026) ---------- */
.comResumo .faixa{margin-bottom:6px}
.comCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:4px 0 18px}
.comCard{appearance:none;font:inherit;color:var(--txt);text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--line);border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.comCard:hover{border-color:var(--s1)}
.comCard.on{border-top-color:var(--s1);box-shadow:0 0 0 1px var(--s1) inset}
.comCard:focus-visible{outline:2px solid var(--s1);outline-offset:2px}
.comTopo{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.comNome{font-size:15.5px;font-weight:720;letter-spacing:-.2px}
.comSelo{flex:0 0 auto;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;
  background:var(--panel2);color:var(--muted)}
.comCard.on .comSelo{background:color-mix(in srgb,var(--s1) 14%,transparent);color:var(--s1)}
.comSub{font-size:12px;color:var(--muted)}
.comTotal{font-size:26px;font-weight:740;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.comNums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  border-top:1px solid var(--line);padding-top:9px}
.comNums .r{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:640}
.comNums .v{display:block;font-size:15px;font-weight:660;font-variant-numeric:tabular-nums}

.etq{display:inline-block;font-size:11px;font-weight:650;padding:1px 8px;border-radius:99px;
  background:var(--panel2);color:var(--txt2);white-space:nowrap;vertical-align:1px}
.etq.ok{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.etq.alerta{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}

tr.abre{cursor:pointer}
tr.abre:hover td{background:var(--panel2)}
tr.abre > td:first-child::before{content:'▸';display:inline-block;width:12px;color:var(--muted);font-size:11px}
tr.abre.aberta > td:first-child::before{content:'▾'}
tr.abre:focus-visible{outline:2px solid var(--s1);outline-offset:-2px}
tr.detalheLinha > td,.rolar table tr.detalheLinha > td:first-child{background:var(--panel2);padding:12px 14px 14px;
  white-space:normal;font-weight:400;position:static;cursor:default}
.rolar tr.detalheLinha td td,.rolar tr.detalheLinha td th{white-space:normal}
.rolar tr.detalheLinha td td:first-child,.rolar tr.detalheLinha td th:first-child{position:static}
.detCalc{display:flex;flex-direction:column;gap:12px;max-width:1100px}
.detFatos{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px 14px;margin:0}
.detFatos > div{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:7px 10px}
.detFatos dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:640}
.detFatos dd{margin:2px 0 0;font-size:14px;font-weight:650;font-variant-numeric:tabular-nums}
.detFatos dd small{display:block;font-size:11.5px;font-weight:500;color:var(--txt2);margin-top:1px}
.detFatos .ok{color:var(--good)}
table.parcelas{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:9px}
table.parcelas th,table.parcelas td{padding:6px 10px;font-size:12.5px;text-align:left;border-bottom:1px solid var(--line)}
table.parcelas th{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
table.parcelas .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.parcelas tr.naoPagou td{color:var(--muted)}
table.parcelas tfoot td{border-bottom:0;font-weight:650}

.pendencias details.pend{border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:8px 12px;margin:0 0 8px}
.pendencias summary{cursor:pointer;font-size:13.5px}
.pendencias .nota{margin:6px 0 8px}
.pendencias .rolar{min-height:0;max-height:420px}

.card.dgp input.vinc{width:100%;min-width:230px;padding:4px 8px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);color:var(--txt);font:inherit;font-size:12.5px}
.card.dgp td{vertical-align:top}
.ausManual{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:12px}
.ausManual input,.ausManual select{padding:2px 5px;border:1px solid var(--line);border-radius:6px;
  background:var(--panel);color:var(--txt);font:inherit;font-size:12px}
@media (max-width:700px){
  .comTotal{font-size:22px}
  .detFatos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* o detalhe fica preso à parte visível da tabela quando ela rola de lado
   (no celular a tabela é mais larga que a tela) */
.rolar tr.detalheLinha .detCalc{position:sticky;left:14px;max-width:min(1100px,calc(100vw - 72px))}
.rolar tr.abre > td:first-child{white-space:nowrap}
.ausManual select,.ausManual input{width:auto;max-width:150px}
.ausManual .etq{flex:0 0 auto}
.rolar table.parcelas{min-width:0}
.rolar table.parcelas td,.rolar table.parcelas th{white-space:normal}
.rolar table.parcelas td.n,.rolar table.parcelas th.n{white-space:nowrap}
@media (max-width:700px){table.parcelas .conta{display:none}}

/* pesquisa e filtro do Time de Vendas na Comissão (01/10/2026) */
.comFiltro{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 6px}
.comFiltro input[type=search]{flex:1 1 260px;max-width:420px;padding:7px 11px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);color:var(--txt);font:inherit;font-size:13.5px}
.comFiltro .chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--txt2);cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:500}
.detAcoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12px}

/* Sell In: filtros, retrato e histórico (06/10/2026) */
.siFiltros{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:6px 0 14px}
.siFiltros label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--txt2);
  text-transform:none;letter-spacing:0;font-weight:560}
.siFiltros select{padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);
  color:var(--txt);font:inherit;font-size:13px;max-width:280px}
.siRetrato{font-size:11.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:6px}
.bt.lnk{background:none;border:0;color:var(--muted);text-decoration:underline;padding:4px 2px}
.siHist table th{text-align:left;font-size:12px}
.siHist .blocoCab{display:flex;justify-content:space-between;align-items:center}
.card .blocoSub{font-size:12.5px;margin:2px 0 8px;color:var(--muted)}   /* título do grupo no ranking (13/10/2026) */
.etq.neg{background:color-mix(in srgb,var(--crit) 14%,transparent);color:var(--crit)}
.fichasLoja .etq{text-decoration:none;margin:2px 2px 0 0;cursor:pointer}   /* lojas do ranking com portão (13/10/2026) */

/* ---------- Campanha: painel de acompanhamento (13/10/2026) ---------- */
.paCamp{margin:10px 0 22px}
.paTit{font-size:13px;letter-spacing:.5px;text-transform:uppercase;margin:20px 0 10px;
  border-left:4px solid var(--s1);padding-left:8px}
.paTempo{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--txt2);
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.paPista{flex:1;height:8px;background:var(--panel2);border-radius:99px;overflow:hidden}
.paPista i{display:block;height:100%;background:var(--marca2)}
.paKpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.paKpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.paKpi .r{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:650}
.paKpi .v{display:block;font-size:24px;font-weight:740;letter-spacing:-.5px}
.paKpi .d{display:block;font-size:12.5px;color:var(--txt2)}
.paCamp .pos{color:var(--good)}.paCamp .neg{color:var(--crit)}
.paLojas{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.paLojas.um{grid-template-columns:1fr}
.paLoja{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--line);border-radius:12px;
  padding:12px 14px;cursor:pointer}
.paLoja.lib{border-top-color:var(--good)}.paLoja.rit{border-top-color:var(--s1)}.paLoja.ris{border-top-color:var(--crit)}
.paLoja.destaque{box-shadow:0 0 0 2px var(--s1)}
.paLojaTopo{display:flex;justify-content:space-between;align-items:center}
.paLojaTopo b{font-size:16px}
.paSelo{font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;white-space:nowrap;background:var(--panel2);color:var(--muted)}
.paSelo.lib{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.paSelo.rit{background:color-mix(in srgb,var(--s1) 14%,transparent);color:var(--s1)}
.paSelo.ris{background:color-mix(in srgb,var(--crit) 14%,transparent);color:var(--crit)}
.paBarra{position:relative;height:14px;background:var(--panel2);border-radius:99px;margin:10px 0 6px}
.paBarra i{display:block;height:100%;border-radius:99px}
.paEsp{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--txt)}
.paTick{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--muted)}
.paLeg{font-size:11.5px;color:var(--muted);margin:-2px 0 6px}
.paNums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;font-size:12.5px}
.paNums .r{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.paNums .v{font-weight:650}
.paCompacto{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.paCompacto > div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13px;cursor:pointer}
.paCompacto b.lib{color:var(--good)}.paCompacto b.rit{color:var(--s1)}.paCompacto b.ris{color:var(--crit)}.paCompacto b.sem{color:var(--muted)}
.paMini{display:block;height:6px;background:var(--panel2);border-radius:99px;margin-top:4px;overflow:hidden}
.paMini i{display:block;height:100%;border-radius:99px;background:var(--muted)}
.paMini i.lib{background:var(--good)}.paMini i.rit{background:var(--s1)}.paMini i.ris{background:var(--crit)}
.paGrupo{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.paGrupoTit{font-weight:700;margin-bottom:6px}
.paTab{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--panel)}
.paTab th{background:var(--panel2);text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:7px 10px}
.paTab td{padding:7px 10px;border-top:1px solid var(--line)}
.paTab .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.paTab tr.eu td{background:color-mix(in srgb,var(--s1) 9%,transparent);font-weight:650}
.paTab tr.paCorte td{font-size:11px;color:var(--muted);text-align:center;padding:3px;background:var(--panel2)}
.paFita{font-size:11px;font-weight:700;padding:1px 8px;border-radius:99px;white-space:nowrap;
  background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.paFita.apagado{background:var(--panel2);color:var(--muted)}
.paCamp .aviso.ok{border-color:var(--good)}
@media (max-width:760px){.paNums{grid-template-columns:1fr 1fr}.paLojas{grid-template-columns:1fr}
  .paTempo{flex-wrap:wrap}}
b.ating.pos{color:var(--good)}b.ating.neg{color:var(--crit)}
/* gráfico de ganhadores: nome inteiro, quebrando linha se precisar */
.barras.cheio .lin{grid-template-columns:28px minmax(160px,340px) 1fr minmax(74px,190px)}
.barras.cheio .nomeB{white-space:normal;overflow:visible;line-height:1.25}
.eixoLin.cheio{grid-template-columns:28px minmax(160px,340px) 1fr minmax(74px,190px)}
/* campanhas: seções por duração, seleção para renovar, totais por pagador (14/10/2026) */
.secCamp{display:flex;align-items:center;gap:12px;margin:18px 0 8px}
.secCamp h3{margin:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.siSel{position:absolute;top:8px;left:8px;z-index:1}
.siSel input{width:16px;height:16px;cursor:pointer}
.siCard:has(.siSel) .siTopo{padding-left:20px}
.selCamp{position:sticky;top:0;z-index:5;background:var(--bg);padding:8px 0}
.tabPag tr.sec td{background:var(--panel2);padding-top:10px}
.tabPag tr.tot td{font-weight:650;border-top:1px solid var(--line)}

/* Campanhas de Incentivo: abas Campanhas | Por colaborador (15/10/2026) */
.abasPrem{display:flex;gap:8px;margin-bottom:12px}
.tabColab tr.pessoa{cursor:pointer}
.tabColab tr.pessoa:hover td{background:var(--panel2)}
.tabColab tr.pessoa.on td{background:var(--panel2);font-weight:600}
.tabColab .seta{display:inline-block;width:12px;color:var(--muted)}
.tabColab tr.pessoaDet>td{padding:6px 10px 14px 26px;background:var(--panel)}
.tabColab tr.pessoaDet table{font-size:12.5px}
.tabColab tr.tot td{border-top:1px solid var(--line)}
.tabPagador tr.sec td{background:var(--panel2);padding-top:8px;border-top:1px solid var(--line)}
.tabPagador td.ind{padding-left:22px}
.tabConj tr.tot td{border-top:1px solid var(--line);background:var(--panel2)}
.nivelB{display:inline-block;padding:2px 8px;border-radius:10px;color:#fff;font-size:11.5px;font-weight:650;white-space:nowrap}
.rkCargo{display:flex;flex-direction:column;gap:6px}
.rkLinha{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:9px}
.rkLinha .rkRot{min-width:160px}
.rkCargos{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px}

/* Participação em Medicamentos — mês anterior x mês atual (19/10/2026) */
th.cor.medic{background:#1F3864}   /* "med" já é o medidor (display:flex) */
.ppSobe{color:#0a8a3a;font-weight:600}
.ppCai{color:#c00000;font-weight:600}

/* ============================ EXTRATO (22/10/2026) ============================
   Visual dos modelos do usuário: folha clara, azul-marinho, laranja e amarelo.
   É um documento — fica claro também no tema escuro, como papel. */
.xtAcoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 auto 16px;max-width:1000px}
.xtAcoes label{font-size:12px;display:flex;gap:6px;align-items:center;color:var(--muted)}
.xtAcoes #xtPdf{margin-left:auto}
.xtFolha{--xn:#0d2a6b;--xl:#f7941d;--xa:#ffc61a;--xm:#5b6475;--xf:#f3f5f9;
  background:var(--xf);color:#14213d;border-radius:22px;padding:26px;max-width:1000px;margin:0 auto 26px;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.xtTopo{background:#fff;border-radius:20px;padding:20px 26px;display:flex;justify-content:space-between;align-items:center;gap:18px;
  box-shadow:0 6px 0 var(--xl)}
.xtLogo{height:64px;width:auto}
.xtTit{text-align:right}
.xtTit h1{margin:0;color:var(--xn);font-size:28px;font-weight:800;letter-spacing:-.3px;line-height:1.15}
.xtSub{color:var(--xm);font-size:15px;margin:4px 0 8px}
.xtChip{display:inline-block;background:var(--xa);color:var(--xn);font-weight:800;border-radius:999px;padding:5px 16px;font-size:13px}
.xtKpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:22px 0 16px}
.xtKpi{background:#fff;border-radius:16px;padding:14px 18px;box-shadow:inset 0 5px 0 var(--c);display:flex;flex-direction:column;gap:2px;min-width:0}
.xtKpi .r{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--xm);font-weight:600;margin-top:4px}
.xtKpi .v{font-size:24px;font-weight:800;color:var(--xn);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xtKpi .d{font-size:12px;color:var(--xm)}
.xtFaixa{background:var(--xn);color:#fff;border-radius:16px;padding:14px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:16px}
.xtFaixaR{font-size:14px}
.xtPills{display:flex;flex-wrap:wrap;gap:8px}
.xtPill{background:rgba(255,255,255,.13);border-radius:999px;padding:5px 12px;font-size:13px}
.xtPill b,.xtAm{color:var(--xa)}
.xtCard{background:#fff;border-radius:18px;padding:16px 18px;margin-bottom:14px;overflow-x:auto}
.xtH3{margin:2px 0 12px;color:var(--xn);font-size:17px}
.xtTab{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.xtTab thead th{background:var(--xn);color:#fff;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;padding:10px 10px;text-align:left;font-weight:700;white-space:nowrap}
.xtTab thead th:first-child{border-radius:10px 0 0 10px}
.xtTab thead th:last-child{border-radius:0 10px 10px 0}
.xtTab th.n,.xtTab td.n{text-align:right}
.xtTab td{padding:9px 10px;border-bottom:1px solid #eceff4;vertical-align:middle;white-space:nowrap}
.xtTab tbody tr{break-inside:avoid}
.xtTab tr.xtTot td{background:#fff5d6;font-weight:800;color:var(--xn);border-bottom:none}
.xtForte{font-weight:800;color:var(--xn)}
.xtMut{color:var(--xm)}
.xtPos{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#e8ecf4;color:var(--xn);font-weight:800;font-size:12.5px}
.xtPos.p1{background:#f5b301;color:#fff}.xtPos.p2{background:#9aa3b2;color:#fff}.xtPos.p3{background:#c8733b;color:#fff}
.xtNome{display:flex;flex-direction:column;gap:2px;min-width:200px;white-space:normal}
.xtNome b{font-weight:650}
.xtNome span{font-size:11.5px;color:var(--xm)}
.xtAbre{cursor:pointer}.xtAbre:hover b{text-decoration:underline}
.xtBarra{display:block;height:5px;border-radius:9px;background:#e8ecf4;margin-top:4px;max-width:320px}
.xtBarra i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--xl),var(--xa))}
.xtSelo{display:inline-block;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}
.xtSelo.sup{background:#e3f6ea;color:#17803d}.xtSelo.met{background:#fff1cc;color:#9a6b00}.xtSelo.nao{background:#f1f2f5;color:var(--xm)}
.xtPag{display:inline-block;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:700;background:#e8ecf4;color:var(--xn)}
.xtPag.brasil{background:#fff1cc;color:#9a6b00}.xtPag.outros{background:#e3f6ea;color:#17803d}
.xtTres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.xtTres>div{background:var(--xf);border-radius:14px;padding:12px 16px;display:flex;flex-direction:column;gap:2px}
.xtTres .r{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--xm);font-weight:600}
.xtTres b{font-size:20px;color:var(--xn)}
.xtTres .d{font-size:12px;color:var(--xm)}
.xtTres .xtDest{background:#fff5d6;box-shadow:inset 0 0 0 2px var(--xa)}
.xtTres .xtOk{box-shadow:inset 4px 0 0 #17803d}.xtTres .xtOk .d{color:#17803d;font-weight:700}
.xtTres .xtNok{box-shadow:inset 4px 0 0 #c0392b}
.xtAviso{background:#fff4e5;color:#8a4b00;border-radius:12px;padding:10px 14px;margin:16px 0 0;font-size:13px}
.xtNota{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--xm);margin-top:6px}
@media(max-width:760px){
  .xtFolha{padding:14px;border-radius:16px}
  .xtTopo{flex-direction:column;align-items:flex-start}.xtTit{text-align:left}
  .xtTit h1{font-size:21px}
  .xtKpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xtTres{grid-template-columns:1fr}
  .xtKpi .v{font-size:18px;white-space:normal}
  .xtNome{min-width:150px}
  .xtNota{flex-direction:column}
}
/* PDF: só as folhas, uma por página A4 */
@media print{
  @page{size:A4;margin:8mm}
  body.xtImprimindo>*:not(#xtPrint){display:none!important}
  body.xtImprimindo{background:#fff!important}
  body.xtImprimindo .xtFolha{max-width:none;margin:0;border-radius:0;padding:10px;break-after:page;page-break-after:always;font-size:11px}
  body.xtImprimindo .xtFolha:last-child{break-after:auto;page-break-after:auto}
  body.xtImprimindo .xtTab{font-size:10.5px}
  body.xtImprimindo .xtTab td{padding:5px 7px}
  body.xtImprimindo .xtKpi .v{font-size:19px}
  body.xtImprimindo .xtTit h1{font-size:22px}
  body.xtImprimindo .xtLogo{height:48px}
}

#xtPrint{display:none}
body.xtImprimindo #xtPrint{display:block}

/* Extrato de Campanhas (26/10/2026): o layout do Extrato com as cores do PDF
   antigo — azul para o Mercadão, verde para a Brasil Medicamentos */
.xcLarga,.xcDet{max-width:1240px}
.xcTab td,.xcTab th{padding:7px 8px}
.xcTab thead th.xcG{text-align:center;border-radius:0}
.xcTab thead tr:first-child th:first-child{border-radius:10px 0 0 0}
.xcTab thead tr:first-child th:last-child{border-radius:0 10px 0 0}
.xcTab thead tr:last-child th:last-child{border-radius:0 0 10px 0}
.xcTab thead th.xcG2{font-size:10.5px;border-radius:0}
.xcTab thead th.m{background:#ffc61a;color:#0d2a6b}.xcTab thead th.b{background:#1a9b54}.xcTab thead th.t{background:#0d2a6b}
/* Taxa 2% na cor da Flash (rosa da marca) */
.xcTab td.xcTx{color:#e6007e}
.xcTab thead th.xcG2.xcTx{background:#ff1f8e}
.xcTab tr.xcSub td{background:#fffaf0;font-weight:700}
.xcGer{color:#c0392b}
.xtSelo.xcNao{background:#fde8e8;color:#c0392b}
.xcCongelado{background:#e8f1fd;color:#0d2a6b}
.xcAcoesEnvio{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.xcSt{display:inline-block;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;background:#f1f2f5;color:#5b6475}
.xcSt.enviado{background:#fff1cc;color:#9a6b00}.xcSt.pago{background:#e3f6ea;color:#17803d}.xcSt.substituido{background:#f1f2f5;color:#8a93a3;text-decoration:line-through}
.xcCamp{background:#fff;border-radius:18px;padding:14px 16px 10px;margin-bottom:16px;break-inside:avoid;page-break-inside:avoid}
.xcCamp .xtCard{padding:0;margin-bottom:8px}
.xcCampTopo{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:8px}
.xcCampTopo h3{margin:0;color:var(--xn);font-size:17px;font-weight:800}
.xcCampTopo span{color:var(--xm);font-size:13px}
.xcCampTopo .xcPeriodo{background:#eef1f7;color:var(--xn);font-weight:700;font-size:12px;border-radius:999px;padding:2px 10px}
.xcPagador{background:#f7941d;color:#fff;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.3px;border-radius:10px;padding:6px 12px;margin-bottom:10px}
.xcPagador.brasil{background:#1a9b54}.xcPagador.outros{background:#5b6475}
.xcV.xcAcima{background:#cde6fb;color:#0b4f8a;border-radius:6px;padding:2px 6px;font-weight:700}
.xcV.xcAbaixo{background:#fbd5d5;color:#a61b1b;border-radius:6px;padding:2px 6px;font-weight:700}
.xcPos{display:inline-block;min-width:30px;text-align:center;background:#0d2a6b;color:#fff;border-radius:999px;padding:2px 8px;font-weight:800}
.xcPos.xcPremiado{background:#17803d}
.xcPosTipo{display:inline-block;margin-left:5px;font-size:10.5px;font-weight:700;color:var(--xm);text-transform:uppercase;letter-spacing:.3px}
.xcRedeCamp .xtTab td.xcTx{color:#e6007e}
.xcPagaPor{display:inline-block;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700;background:#fff1dc;color:#9a5a00;white-space:nowrap}
.xcPagaPor.brasil{background:#e3f6ea;color:#17803d}.xcPagaPor.outros{background:#eef1f7;color:#5b6475}
.xcUn{margin:2px 0 6px;padding-left:16px}.xcUn li{margin:1px 0}
.xcBarr{color:#c0392b;font-size:12px;font-weight:600}
.xcLeg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:11.5px;color:var(--xm);margin:4px 0 6px}
.xcLeg i{display:inline-block;width:14px;height:10px;border-radius:3px}
.xcLeg i.xcAcima{background:#cde6fb}.xcLeg i.xcAbaixo{background:#fbd5d5}
.xcRegra{border:1px solid #e3e6ec;border-radius:12px;padding:8px 12px;font-size:12.5px;margin-top:6px}
.xcRegra b:first-child{color:#c0392b;text-transform:uppercase;font-size:11.5px}
.xcRegra p{margin:4px 0 0}
.xcEnvios{max-width:1240px}
@media print{
  /* tudo do extrato de campanhas na mesma folha deitada: misturar retrato e
     paisagem fazia o navegador escalar as folhas e esticar linhas e colunas */
  @page paisagem{size:A4 landscape;margin:8mm 8mm 11mm}
  body.xtImprimindo .xcLarga,body.xtImprimindo .xcDet{page:paisagem}
  /* o navegador mede a largura pela folha em pé e aplicava as regras de celular
     (max-width:760px) na folha deitada: desfaz aqui, só nas folhas de campanhas */
  body.xtImprimindo :is(.xcLarga,.xcDet) .xtTopo{flex-direction:row;align-items:center}
  body.xtImprimindo :is(.xcLarga,.xcDet) .xtTit{text-align:right}
  body.xtImprimindo .xcLarga .xtKpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.xtImprimindo .xcLarga .xtKpi .v{white-space:nowrap}
  /* folha da rede: a nota caía sozinha na folha seguinte */
  body.xtImprimindo .xcLarga .xtKpis{margin:12px 0 10px}
  body.xtImprimindo .xcLarga .xtNota{margin-top:2px}
  body.xtImprimindo :is(.xcLarga,.xcDet) .xtNota{flex-direction:row}
  body.xtImprimindo .xcTab td,body.xtImprimindo .xcCamp .xtTab td{line-height:1.25}
  /* regras à direita da lista, centralizadas: cada campanha cabe numa folha só */
  body.xtImprimindo .xcCamp{display:grid;grid-template-columns:minmax(0,72%) minmax(0,1fr);column-gap:14px;align-items:start}
  body.xtImprimindo .xcCampTopo,body.xtImprimindo .xcPagador{grid-column:1/-1}
  body.xtImprimindo .xcCamp .xtCard,body.xtImprimindo .xcLeg{grid-column:1}
  body.xtImprimindo .xcRegra{grid-column:2;grid-row:3/span 2;align-self:center;margin-top:0}
  body.xtImprimindo .xcCamp .xtTab{font-size:10px}
  body.xtImprimindo .xcCamp .xtTab th,body.xtImprimindo .xcCamp .xtTab td{padding:3px 10px}
  body.xtImprimindo .xcCamp .xtTab th.n,body.xtImprimindo .xcCamp .xtTab td.n{padding-left:12px}
  body.xtImprimindo .xcCamp .xtCard{overflow:visible}
  body.xtImprimindo .xcCamp .xtTab th{white-space:nowrap;font-size:9.5px}
  body.xtImprimindo .xcCamp .xtNome b{white-space:nowrap}
  body.xtImprimindo .xcCamp .xtNome span{font-size:9px}
  body.xtImprimindo .xcPos{min-width:0;padding:1px 6px}
  body.xtImprimindo .xcCampTopo h3{font-size:14px}
  body.xtImprimindo .xcPagador{padding:4px 10px;margin-bottom:6px;font-size:10.5px}
  body.xtImprimindo .xcRegra{padding:5px 10px;font-size:10.5px}
  body.xtImprimindo .xcTab{font-size:9.5px}
  body.xtImprimindo .xcTab td{padding:4px 5px}
  body.xtImprimindo .xcCamp{padding:8px 10px 6px;margin-bottom:10px}
}

/* Usuários: departamentos e permissões (23/10/2026) */
.chipDep{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:20px;
  background:var(--sobre-marca);color:var(--marca2);white-space:nowrap;margin:1px 0}
:root[data-tema="escuro"] .chipDep{background:var(--panel2);color:var(--aba-ativa)}
.linhaAcesso{margin-top:12px;border-left:4px solid var(--marca2)}
.grade tr.selAcesso > td{background:var(--sobre-marca)}
:root[data-tema="escuro"] .grade tr.selAcesso > td{background:var(--panel2)}
.painelAcesso{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:24px;align-items:start}
@media (max-width:760px){.painelAcesso{grid-template-columns:1fr}}
.painelAcesso h3{font-size:14px;margin:0 0 8px}
.painelAcesso label.chk{display:flex;align-items:flex-start;gap:7px;font-size:13px;margin:4px 0;
  text-transform:none;letter-spacing:0;font-weight:500;color:var(--txt)}
.painelAcesso label.chk input{width:auto;margin-top:2px}
.painelAcesso label.setor{padding-left:22px}
.grupoPerm{margin:8px 0 10px}
.grupoPerm > b{display:block;font-size:12px;color:var(--txt2);margin-bottom:2px}
.seloAjuste{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:20px;
  background:var(--warn);color:#fff;margin-left:4px;white-space:nowrap}
.matrizDep th{font-size:12px;vertical-align:bottom}
.matrizDep tr.grupo td{background:var(--panel2);font-size:12px}
.matrizDep td.n input{width:auto}

/* ======================= CELULAR (24/10/2026) ==========================
   Pedido do usuário: melhor visualização pelo navegador do celular. Fica no
   fim do arquivo de propósito, para valer por cima das regras de cima.
   - topo em duas linhas: logo, selo e ícones em cima; as áreas embaixo,
     numa faixa que rola de lado (com Logística e Marketing já não cabiam);
   - grupos de botão (período, tipo de nota) numa linha só, rolando de lado,
     em vez de quatro linhas de botão empilhadas;
   - cartões e textos mais compactos;
   - nas tabelas a primeira coluna (que já fica parada ao rolar de lado)
     quebra linha em vez de ocupar meia tela. */
@media (max-width:700px){
  .topo{gap:8px}
  .topo .logo{order:0}
  .perfil{order:1;align-items:flex-start;margin-right:auto}
  .topo .esp{display:none}
  .topo .icone{order:2;width:30px;height:30px}
  /* o selo agora mostra o cargo, que pode ser longo: encolhe e corta com "…" */
  .perfil{min-width:0;flex:1 1 0}
  .perfil .quem{min-width:0;max-width:100%}
  .badge{font-size:9.5px;padding:3px 7px;letter-spacing:.3px;max-width:100%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topo .logo{height:26px}
  .areaSel{order:5;flex:1 1 100%;margin:0 -12px;padding:0 12px 2px;overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .areaSel::-webkit-scrollbar{display:none}
  .areaSel button{flex:0 0 auto;padding:6px 12px;font-size:13px}

  nav{scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}

  .acoes .bt{padding:6px 10px;font-size:13px}
  .acoes.abasPrem{flex-wrap:nowrap;overflow-x:auto;margin-left:-12px;margin-right:-12px;padding:0 12px 4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .acoes.abasPrem::-webkit-scrollbar{display:none}
  .acoes.abasPrem > *{flex:0 0 auto}
  .acoes.abasPrem label{white-space:nowrap}
  .acoes input[type=search]{min-width:0 !important;width:100%}

  .nota{font-size:11.5px;line-height:1.45}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kpi{padding:10px 11px}
  .kpi .v{font-size:19px}
  .kpi .n{font-size:11px}
  .bloco{margin-bottom:22px}
  .faixa .v{font-size:14px}

  /* a primeira coluna já fica parada (regra .rolar td:first-child acima);
     aqui ela só pode quebrar linha, para não ocupar meia tela */
  .rolar table td:first-child{white-space:normal;min-width:96px;max-width:150px}

  .escolha{margin:22px auto;padding:0 14px}
  .escolha h2{font-size:17px;margin-bottom:14px}
  .escolha .cartoes{grid-template-columns:1fr 1fr;gap:10px}
  .escolha .cartoes button{padding:14px 12px}
  .escolha .cartoes .t{font-size:15px}
  .escolha .cartoes .d{font-size:11.5px}
}
@media (max-width:380px){
  .escolha .cartoes{grid-template-columns:1fr}
  .kpi .v{font-size:17px}
}

/* ====================================================================
   CELULAR COMO APLICATIVO (29/10/2026, pedido do usuário)
   O time de vendas abre o portal pelo celular, instalado na tela inicial.
   - abas numa barra fixa EMBAIXO, com ícone e nome curto, ao alcance do
     polegar — como os aplicativos de banco e de entrega;
   - filtros dobrados num botão que diz o que está filtrado: antes eles
     ocupavam metade da tela antes do primeiro número;
   - no time de vendas (body.timeVendas) cada linha de tabela vira cartão,
     com o nome da coluna do lado do valor: nada de rolar de lado.
   No computador nada muda: o ícone, o nome curto e o botão ficam ocultos.
==================================================================== */
#nav .ic, #nav .tc, .filtrosCel{display:none}
@media (max-width:700px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .topo{height:auto;min-height:54px;padding:env(safe-area-inset-top) 12px 0}
  .fixo{position:static;box-shadow:none}

  #nav{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 0 env(safe-area-inset-bottom);
    gap:0;border-top:1px solid var(--line);border-bottom:0;box-shadow:0 -4px 14px -8px rgba(0,0,0,.35);
    overflow-x:auto;scrollbar-width:none}
  #nav button{flex:1 0 68px;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 4px 7px;border-bottom:0;border-top:3px solid transparent;font-size:11px;font-weight:620}
  #nav button.on{border-top-color:var(--laranja);color:var(--aba-ativa)}
  #nav .ic{display:block;width:23px;height:23px}
  #nav .tt{display:none}
  #nav .tc{display:block;white-space:nowrap}

  .filtrosCel{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 14px;border:0;border-bottom:1px solid var(--line);background:var(--panel2);
    color:var(--txt);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
  .filtrosCel[hidden]{display:none}
  .filtrosCel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .filtrosCel b{flex:0 0 auto;color:var(--s1);font-size:13px}
  .fixo:not(.aberto) .filtros{display:none !important}

  /* --- time de vendas: linha de tabela vira cartão --- */
  body.timeVendas #conteudo .rolar{max-height:none;min-height:0;overflow:visible}
  body.timeVendas #conteudo .rolar table, body.timeVendas #conteudo table{min-width:0;width:100%}
  body.timeVendas #conteudo table thead{display:none}
  body.timeVendas #conteudo table tbody tr{display:block;margin:0 0 10px;padding:6px 12px;
    border:1px solid var(--line);border-radius:12px;background:var(--panel)}
  body.timeVendas #conteudo table tfoot tr{display:block;padding:6px 12px}
  body.timeVendas #conteudo table td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    padding:6px 0;border:0;border-bottom:1px solid var(--line);white-space:normal;text-align:right;
    position:static;box-shadow:none;background:none;max-width:none;min-width:0}
  body.timeVendas #conteudo table td:last-child{border-bottom:0}
  body.timeVendas #conteudo table td[data-l]::before{content:attr(data-l);flex:0 0 auto;max-width:55%;
    text-align:left;color:var(--muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
  /* a primeira célula é o nome da linha: título do cartão, sem rótulo */
  body.timeVendas #conteudo table td:first-child{font-weight:700;font-size:15px;text-align:left;justify-content:flex-start}
  body.timeVendas #conteudo table td:first-child::before{display:none}
  body.timeVendas #conteudo table td[colspan]{display:block;text-align:left}
  body.timeVendas #conteudo table tr.detalheLinha{padding:0;border:0;background:none}
  /* no celular do vendedor, Excel e Imagem não servem a ninguém */
  body.timeVendas #conteudo .exportar{display:none}
  /* a moldura em volta da tabela sobra quando cada linha já é um cartão */
  body.timeVendas #conteudo .card:has(> .rolar), body.timeVendas #conteudo .card:has(> table){border:0;padding:0;background:none;box-shadow:none}

  /* --- cartão colorido (29/10/2026): o cinza todo deixava a tela apagada.
     Faixa de cima na cor da aba (Geral azul, Genéricos verde...), cada
     grupo de meta com a cor do cabeçalho do computador, o faturamento em
     destaque e o % numa pílula verde/âmbar/vermelha. --- */
  body.timeVendas #conteudo table tbody tr{border-top:4px solid var(--ac,var(--s1));overflow:hidden;
    box-shadow:0 2px 8px -4px rgba(0,0,0,.25)}
  body.timeVendas #conteudo table tbody tr.detalheLinha, body.timeVendas #conteudo table tbody tr:has(> td[colspan]){
    border:0;border-top:0;padding:0;background:none;box-shadow:none}
  body.timeVendas #conteudo table td:first-child:not([colspan]){margin:-6px -12px 4px;padding:9px 12px;
    background:color-mix(in srgb,var(--ac,var(--s1)) 12%,transparent);color:var(--ac,var(--s1));border-bottom:0}
  body.timeVendas #conteudo table td.mut{color:var(--txt)}
  body.timeVendas #conteudo table td[data-cor]{--cc:var(--s1);margin:0 -12px;padding:6px 12px 6px 9px;
    border-left:3px solid var(--cc);background:color-mix(in srgb,var(--cc) 8%,transparent)}
  body.timeVendas #conteudo table td[data-cor]::before{color:var(--cc)}
  body.timeVendas #conteudo table td[data-cor="meta"]{--cc:#E97132}
  body.timeVendas #conteudo table td[data-cor="super"]{--cc:#0070C0}
  body.timeVendas #conteudo table td[data-cor="aniv"]{--cc:#00A04A}
  body.timeVendas #conteudo table td[data-cor="min"]{--cc:#C00000}
  body.timeVendas #conteudo table td[data-cor="gen"]{--cc:#D9A000}
  body.timeVendas #conteudo table td[data-cor="medic"]{--cc:#1F3864}
  /* Bonificação › Apuração: o que a pessoa recebe vai em verde, e o
     líquido (o que cai no Flash) em destaque */
  body.timeVendas #conteudo table td[data-cor="premio"]{--cc:var(--good);font-weight:650;color:var(--good)}
  body.timeVendas #conteudo table td[data-col="liquido"]{font-size:16.5px;font-weight:750;color:var(--good)}
  /* Comissão (29/10/2026): cada parcela com a sua cor, o valor que pagou em
     negrito na cor dela, e o Total em verde, maior, no fim do cartão */
  body.timeVendas #conteudo table td:is([data-col="pct_meta"],[data-col^="c_"]){margin:0 -12px;
    padding:6px 12px 6px 9px;border-left:3px solid var(--cc);background:color-mix(in srgb,var(--cc) 8%,transparent)}
  body.timeVendas #conteudo table td:is([data-col="pct_meta"],[data-col^="c_"])::before{color:var(--cc)}
  body.timeVendas #conteudo table td:is([data-col="pct_meta"],[data-col^="c_"]) > span:not(.mut){color:var(--cc);font-weight:750}
  body.timeVendas #conteudo table td[data-col="pct_meta"]{--cc:var(--s1);font-weight:750;color:var(--s1)}
  body.timeVendas #conteudo table td[data-col="c_fat"]{--cc:#E97132}
  body.timeVendas #conteudo table td[data-col="c_gen"]{--cc:#C98F00}
  body.timeVendas #conteudo table td[data-col="c_pre"]{--cc:#7D4BC4}
  body.timeVendas #conteudo table td[data-col="c_ipa"]{--cc:#0070C0}
  body.timeVendas #conteudo table td[data-col="c_mar"]{--cc:#0F9E6E}
  body.timeVendas #conteudo table td[data-col="c_pv"]{--cc:#C00000}
  body.timeVendas #conteudo table td[data-col="c_sup"]{--cc:#00A04A}
  body.timeVendas #conteudo table td[data-col="total"]{margin:4px -12px -6px;padding:10px 12px;font-size:18px;
    font-weight:800;color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent)}
  body.timeVendas #conteudo table td[data-col="total"]::before{color:var(--good);font-size:12.5px}
  body.timeVendas #conteudo table td[data-col="faturamento"]{font-size:16.5px;font-weight:750;color:var(--s1)}
  body.timeVendas #conteudo table td[data-col="faturamento"]::before{color:var(--s1)}
  body.timeVendas #conteudo td .med{min-width:0}
  body.timeVendas #conteudo td .med .n{min-width:0;padding:2px 9px;border-radius:999px;font-weight:750}
  body.timeVendas #conteudo td .med.bom .n{background:color-mix(in srgb,var(--good) 15%,transparent)}
  body.timeVendas #conteudo td .med.meio .n{background:color-mix(in srgb,var(--warn) 17%,transparent)}
  body.timeVendas #conteudo td .med.ruim .n{background:color-mix(in srgb,var(--crit) 15%,transparent)}
  body.timeVendas #conteudo td .med.sem .n{padding:0}
  body.timeVendas #conteudo td .med .n.ok{padding:2px 9px;color:var(--good);background:color-mix(in srgb,var(--good) 15%,transparent)}
  /* abas sem cor no cabeçalho (Genéricos no diário, Ecofitus, VitNutry,
     Produtividade): meta e % na cor da aba, o diário em anil, IPA
     em azul e margem em roxo — cada grupo com a sua faixa */
  body.timeVendas #conteudo table td:not([data-cor]):is([data-col^="meta_"],[data-col^="pct_"],
    [data-col^="dia_"],[data-col^="diaria_"],[data-col^="pct_diaria_"],[data-col$="_ipa"],[data-col="ipa"],
    [data-col="margem"],[data-col="objetivo_margem"]){--cc:var(--ac,var(--s1));margin:0 -12px;padding:6px 12px 6px 9px;
    border-left:3px solid var(--cc);background:color-mix(in srgb,var(--cc) 8%,transparent)}
  body.timeVendas #conteudo table td:not([data-cor]):is([data-col^="dia_"],[data-col^="diaria_"],[data-col^="pct_diaria_"]){--cc:#4F5FD0}
  body.timeVendas #conteudo table td:not([data-cor]):is([data-col$="_ipa"],[data-col="ipa"]){--cc:var(--s1)}
  body.timeVendas #conteudo table td:not([data-cor]):is([data-col="margem"],[data-col="objetivo_margem"]){--cc:var(--s5)}
  body.timeVendas #conteudo table td:not([data-cor]):is([data-col^="meta_"],[data-col^="pct_"],[data-col^="dia_"],
    [data-col^="diaria_"],[data-col$="_ipa"],[data-col="ipa"],[data-col="margem"],[data-col="objetivo_margem"])::before{color:var(--cc)}
  /* o faturamento de cada aba é o número principal do cartão */
  body.timeVendas #conteudo table td:is([data-col="fat_genericos"],[data-col="fat_ecofitus"],[data-col="fat_vitnutry"]){
    font-size:16.5px;font-weight:750;color:var(--s1)}
  body.timeVendas #conteudo table td:is([data-col="fat_genericos"],[data-col="fat_ecofitus"],[data-col="fat_vitnutry"])::before{color:var(--s1)}
}

/* Comissão › Faixa: qual meta pagou, escrito ao lado do valor (29/10/2026) */
.faixaNv{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11px;
  font-weight:700;color:#fff;background:#E97132;vertical-align:1px;white-space:nowrap}
.faixaNv.sup{background:#0070C0}