/* Book de Vendas BR Spices — visual v5 aprovado (02/07/2026) */
:root{
  /* casca azul-petróleo */
  --ink:#183A3F; --ink2:#20494f; --ink-b:#28545a; --ink-t:#dbe7e6; --ink-m:#8fabab;
  /* conteúdo claro */
  --bg:#eef1f2; --card:#ffffff; --line:#e4e9ea; --line2:#eef2f3;
  --txt:#182226; --mut:#64737a; --soft:#8a979d;
  /* marca */
  --teal:#4f9aa0; --teal-d:#2f7d7c; --aqua:#74AFAE; --aqua-l:#C0E2E0; --creme:#F7E7D2;
  --acafrao:#E0A339; --paprica:#C96643;
  /* status */
  --ok:#2e9e63; --ok-bg:#e7f6ee; --warn:#d9a23a; --warn-bg:#fbf3e2;
  --val:#e07b39; --val-bg:#fdefe3; --bad:#cc4b41; --bad-bg:#fbe9e7;
  --shadow:0 1px 2px rgba(16,24,26,.05),0 8px 24px -12px rgba(16,24,26,.12);
  --bd:#d5dedd;   /* borda utilitária (antes só existia via fallback) */
  /* farol para LER SOBRE FUNDO ESCURO (barra da projeção) + a própria barra */
  --ok-l:#4ADE80; --warn-l:#F3C24B; --bad-l:#FB9189; --rprojbar:#13294F;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--txt);font:14px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif}
::selection{background:var(--aqua-l)}
button{font-family:inherit}

/* ================= PORTÃO (carregando / avisos) ================= */
#gate{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:30px;padding:20px;background:#ffffff}
/* ================= página admin ================= */
.admin-wrap{max-width:min(1600px,96vw);margin:0 auto;padding:84px 24px 40px}
.admin-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.admin-top a{color:var(--teal-d);font-size:12.5px;text-decoration:none;font-weight:600}
.badge-adm{background:var(--warn-bg);color:#8a6d1d;border:1px solid #eadcb4;border-radius:20px;
  padding:4px 12px;font-size:11px;font-weight:700}
.lbox{background:var(--ink);border-radius:22px;padding:34px 40px 30px;width:min(440px,92vw);
  text-align:center;box-shadow:0 30px 70px -22px rgba(24,58,63,.6),0 4px 14px rgba(24,58,63,.22)}
.lbox img.lg{width:118px;height:118px;object-fit:contain;margin:2px auto 10px;display:block}
.lbox h1{font-size:21px;letter-spacing:-.01em;color:#fff}
.lbox h1 b{color:var(--creme)}
.lbox .brush{height:9px;width:130px;margin:6px auto 14px;display:block}
.lbox p{color:rgba(255,255,255,.85);font-size:12.5px;margin-bottom:22px}
.lbox input{width:100%;background:#fff;border:1.5px solid transparent;border-radius:12px;
  color:var(--txt);font-size:15px;padding:13px 15px;letter-spacing:.1em;margin-bottom:14px;outline:none;
  text-align:center;transition:border .15s}
.lbox input:focus{border-color:var(--creme)}
.lbox button{width:100%;background:linear-gradient(135deg,#5795A0,#3e7d86);border:0;
  border-radius:12px;color:#fff;font-size:15px;font-weight:700;padding:13px;cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(12,32,35,.6);transition:transform .12s}
.lbox button:hover{transform:translateY(-1px);filter:brightness(1.08)}
.lbox button:disabled{opacity:.6;cursor:wait;transform:none}
.lsub{color:rgba(255,255,255,.9);font-size:13px;margin-bottom:16px}
.lnote{font-size:11.5px;color:rgba(255,255,255,.75);text-align:center;margin-top:14px;line-height:1.7}
.lnote a{color:var(--creme);text-decoration:underline;cursor:pointer}
#gate-load{color:rgba(255,255,255,.85);font-size:13px}
#gate-forgot button,#gate-form #lg-btn{margin-top:2px}
.lerr{display:none;background:var(--bad-bg);color:var(--bad);border-radius:10px;padding:9px 13px;
  font-size:12.5px;font-weight:600;margin-bottom:13px}

/* ================= CASCA ================= */
#app{display:none;min-height:100vh}
#app.on{display:block}
/* barra superior fina (só um traço da marca) */
header.top{position:fixed;top:0;left:0;right:0;height:6px;z-index:50;
  background:linear-gradient(90deg,var(--ink),var(--teal))}

/* rodapé fixo com botões */
.foot{position:fixed;left:230px;right:0;bottom:0;height:37px;z-index:45;background:var(--ink);
  border-top:1px solid var(--ink-b);display:flex;align-items:center;gap:10px;padding:0 18px}
.foot-info{color:var(--ink-t);font-size:12px}
.foot-info b{color:var(--creme)}
.foot-sp{flex:1}
.foot-btn{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);color:#fff;
  border-radius:8px;height:24px;padding:0 12px;display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap}   /* mesma altura dos botões BRS/KHC/HÍBRIDO */
.foot-btn:hover{background:rgba(255,255,255,.28)}
.foot-dd{position:relative}
.foot-menu{position:absolute;right:0;bottom:42px;min-width:172px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px -12px rgba(0,0,0,.4);
  padding:6px;display:none}
.foot-menu.on{display:block}
.foot-menu button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--txt);
  font-size:13px;padding:9px 12px;border-radius:8px;cursor:pointer}
.foot-menu button:hover{background:#f2f5f5}

aside{position:fixed;left:0;top:6px;bottom:0;width:230px;background:var(--ink);
  display:flex;flex-direction:column;overflow-y:auto;z-index:40}
.sbrand{margin:16px 10px 2px;text-align:center}
.sbrand img{width:100%;max-width:163px;height:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
nav{padding:12px 10px;flex:1}
.nsec{font-size:10px;color:var(--ink-m);letter-spacing:.16em;text-transform:uppercase;padding:14px 10px 6px}
/* cabeçalho de grupo (VISÃO COMERCIAL / JBP) — mesma cara dos rótulos .nsec, só que clicável c/ seta */
.navgrp-h{display:flex;align-items:center;gap:6px;padding:14px 10px 6px;cursor:pointer;
  font-size:10px;color:var(--ink-m);letter-spacing:.16em;text-transform:uppercase;font-weight:400;user-select:none}
.navgrp-h:hover{color:#fff}
/* o título do grupo é UMA LINHA (Fernando, 29/08/2026): com o cadeado ao lado, "TIRA TEIMA"
   quebrava em duas e saía do padrão dos outros grupos. O texto vive num flex próprio que não
   encolhe; o cadeado é que cede espaço. */
.navgrp-h{white-space:nowrap}
.navgrp-h>.lockic{width:11px;height:11px;flex:none;margin-left:auto;opacity:.75;stroke:var(--ink-m)}
.gcaret{width:11px;height:11px;stroke:var(--ink-m);transition:transform .18s}
.navgrp.open .gcaret{transform:rotate(90deg)}
.navgrp-body{display:none;padding-left:4px}
.navgrp.open .navgrp-body{display:block}
.nav-i{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;cursor:pointer;
  color:var(--ink-t);font-size:13.5px;font-weight:500;margin-bottom:2px;position:relative}
.nav-i svg{width:17px;height:17px;flex:none;stroke:var(--ink-m)}
.nav-i:hover{background:var(--ink2);color:#fff}
.nav-i.act{background:linear-gradient(90deg,rgba(255,255,255,.24),rgba(255,255,255,.1));color:#fff}
.nav-i.act::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;
  background:var(--creme)}
.nav-i.act svg{stroke:#fff}
.nav-i.soon{opacity:.4;cursor:default}
.nav-i .tag{margin-left:auto;font-size:9px;background:var(--ink2);border:1px solid var(--ink-b);
  padding:2px 7px;border-radius:20px;color:var(--ink-m);letter-spacing:.06em}
/* cadeado (guias restritas) — substitui a etiqueta "RESTRITO" */
.nav-i .lockic{margin-left:auto;width:14px;height:14px;flex:0 0 14px;stroke:var(--ink-m);opacity:.75}
.nav-i.act .lockic{stroke:#fff;opacity:.95}
.who{border-top:1px solid var(--ink-b);padding:14px 16px;font-size:11.5px;color:var(--ink-m)}
.who b{display:block;color:#fff;font-size:12.5px;font-weight:600}
.who .pill{display:inline-block;margin-top:7px;background:rgba(255,255,255,.16);color:#fff;
  border:1px solid rgba(255,255,255,.4);border-radius:20px;padding:2.5px 11px;font-size:10px;letter-spacing:.1em}
.who a{color:var(--ink-m);text-decoration:underline;cursor:pointer;display:inline-block;margin-top:8px;font-size:11px}
.who a:hover{color:#fff}

main{margin-left:230px;padding:22px 24px 66px;max-width:1400px}

/* filtros compactos: barra FINA, rótulo ao lado do campo */
.topbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:5px 8px;margin-bottom:4px;box-shadow:var(--shadow);
  position:sticky;top:10px;z-index:36}   /* barra congelada ao rolar */
.f{display:flex;align-items:center;gap:5px}
.f label{font-size:9.5px;color:var(--soft);letter-spacing:.05em;text-transform:uppercase;font-weight:650}
.f select,.perbtn{background:#f6f8f8;color:var(--txt);border:1px solid var(--line);border-radius:7px;
  padding:3px 7px;font-size:10.5px;font-weight:500;height:24px;cursor:pointer}
.f select{min-width:60px;max-width:132px}
.f select option,select option{font-size:11px;font-weight:500;padding:3px 8px;color:var(--txt)}
.reset{background:none;border:1px solid var(--line);color:var(--mut);border-radius:7px;
  padding:0 10px;height:24px;font-size:11px;cursor:pointer;font-weight:600}
.reset:hover{color:var(--bad);border-color:var(--bad)}
/* filtros ativos: texto itálico discreto ABAIXO da barra, alinhado à direita */
.filtro-linha{text-align:right;min-height:15px;margin:0 4px 12px 0}
#chip-filtro{font-size:11px;font-style:italic;color:var(--mut)}

/* estrutura BRS / KHC / HÍBRIDO (1º nível da hierarquia; fica no rodapé; seleção múltipla) */
.estr{display:flex;gap:0;border:1px solid rgba(255,255,255,.35);border-radius:7px;overflow:hidden;
  margin-left:14px}
.estr button{background:rgba(255,255,255,.08);border:none;border-right:1px solid rgba(255,255,255,.35);
  color:rgba(255,255,255,.8);width:58px;height:24px;font-size:10px;font-weight:700;cursor:pointer;
  letter-spacing:.02em}
.estr button:last-child{border-right:0}
.estr button:hover{color:#fff}
.estr button.on{background:linear-gradient(180deg,var(--aqua),var(--teal-d));color:#fff}

/* dropdown customizado (Ano/Gerente/Vendedor) — mesmo padrão dos painéis de checkbox */
.dd-btn{min-width:96px;max-width:178px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-panel{width:232px;max-height:320px;overflow-y:auto;padding:6px}
.dd-item{padding:5px 9px;border-radius:6px;font-size:11px;font-weight:500;color:var(--txt);
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-item:hover{background:#f2f5f5}
.dd-item.on{background:#e2f0ef;color:var(--teal-d);font-weight:600}

/* seletor de meses (dropdown) + botões de período inline */
.f-per{position:relative}
.perbtn{min-width:100px;text-align:left;display:flex;align-items:center;gap:6px}
.perbtn::after{content:"▾";margin-left:auto;color:var(--soft)}
.perpanel{position:absolute;top:30px;left:0;z-index:30;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 16px 38px -12px rgba(0,0,0,.28);padding:10px;width:180px;display:none}
.perpanel.on{display:block}
.perquick{display:flex;flex-wrap:wrap;gap:3px}
.perquick button{background:#f2f5f5;border:1px solid var(--line);color:var(--mut);border-radius:20px;
  padding:0 5px;height:21px;font-size:9.5px;font-weight:600;cursor:pointer}
.perquick button:hover{border-color:var(--teal);color:var(--teal-d)}
.permeses{display:flex;flex-direction:column;gap:1px;max-height:250px;overflow-y:auto}
.permes-limpar{background:#f2f5f5;border:1px solid var(--line);color:var(--bad);border-radius:7px;
  padding:3px 8px;font-size:10.5px;font-weight:600;cursor:pointer;margin-bottom:5px;text-align:left}
.permes-limpar:hover{border-color:var(--bad)}
/* itens das janelas de checkbox (mês, categorias…): compactos e uniformes
   (label.permes p/ vencer o estilo dos rótulos .f label da barra) */
label.permes{display:flex;align-items:center;gap:7px;padding:3.5px 6px;border-radius:6px;
  font-size:11px;font-weight:500;letter-spacing:.01em;color:var(--txt);cursor:pointer;
  text-transform:capitalize}
label.permes:hover{background:#f2f5f5}
/* APENAS: aparece no hover e isola o item (não empurra o texto — fica à direita da linha) */
.permes-so{margin-left:auto;font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.06em;
  color:var(--teal-d);border:1px solid var(--teal-d);border-radius:5px;padding:0 4px;line-height:14px;
  opacity:0;transition:opacity .12s;flex:none}
label.permes:hover .permes-so{opacity:1}
.permes-so:hover{background:var(--teal-d);color:#fff}
html[data-theme="dark"] .permes-so{color:#5FCF8E;border-color:#5FCF8E}
html[data-theme="dark"] .permes-so:hover{background:#5FCF8E;color:#0d1b13}
label.permes input{width:13px;height:13px;min-width:0;padding:0;margin:0;flex:none;
  background:none;border:none;accent-color:var(--teal-d);cursor:pointer}
label.permes span{white-space:nowrap}

/* títulos */
h2.pg{font-size:20px;letter-spacing:-.02em;margin:4px 0 2px;display:flex;align-items:center;gap:10px}
h2.pg::before{content:"";width:9px;height:9px;background:var(--teal);transform:rotate(45deg);
  border-radius:2px;display:inline-block}
.sub{color:var(--mut);font-size:12.5px;margin-bottom:18px}

/* KPI cards */
.grid{display:grid;gap:14px}
/* itens de grid PODEM encolher além do conteúdo (senão tabela larga estoura a tela
   e quebra o layout — no celular a rolagem interna do .twrap é quem trabalha) */
.grid>.card{min-width:0}
.twrap{max-width:100%}
.kpis{grid-template-columns:repeat(auto-fit,minmax(185px,1fr));margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:7px 13px 7px;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.kpi::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--aqua),var(--teal-d))}   /* faixa azul superior */
.kpi:hover{transform:translateY(-2px);box-shadow:0 4px 6px rgba(16,24,26,.06),0 16px 34px -14px rgba(16,24,26,.18)}
.kpi.klick{cursor:pointer}
.kpi.klick::before{content:"↗";position:absolute;top:8px;right:11px;color:var(--soft);font-size:12px;opacity:0;transition:opacity .15s}
.kpi.klick:hover::before{opacity:1}
.kpi .hd{display:flex;align-items:center;gap:8px;margin:3px 0 5px}
.kpi .ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none;
  background:#eef4f4}
.kpi .ic svg{width:15px;height:15px}
.kpi .t{font-size:10px;color:var(--soft);letter-spacing:.08em;text-transform:uppercase;font-weight:700;line-height:1.25}
.kpi .v{font-size:20px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:12.5px;color:var(--soft);font-weight:600}
.kpi .d{font-size:10.5px;margin-top:1px;color:var(--mut);line-height:1.35}
/* VENDA DO DIA — faixa de mini-cards DENTRO do card (proporção do .rvm-scard, o menor do app).
   São de propósito bem menores que os .kpi da abertura (95px): estes ficam em ~50px, para não
   competir com os indicadores do topo da página (Fernando, 15/08/2026). A barra colorida da
   esquerda amarra cada card à sua linha no gráfico. */
.rminis{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 12px}
/* fundo em var(--line2) (não var(--card)): dentro de um .card branco/escuro o mini precisa de
   um tom próprio, senão no tema dark ele some — o card e o mini teriam o mesmo #141A24 */
/* CABEÇALHO: faixa EM CIMA, como nos cards do Dashboard (Fernando, 16/08/2026) */
.rmini{flex:1 1 152px;min-width:152px;background:var(--card);border:1px solid var(--bd);
  border-radius:10px;padding:11px 12px 8px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.rmini::after{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--rmc,var(--aqua)),var(--teal-d))}
.rsel-b{display:flex;align-items:center;gap:18px;margin-top:6px;flex-wrap:wrap}
.rsel-b .rleg{margin-top:0}
.rmini .rt{display:block;font-size:9px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);font-weight:700}
.rmini .rv{display:block;font-size:26px;line-height:1.18;font-weight:800;color:var(--txt);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-top:1px}
.rmini .rd{display:block;font-size:9.5px;line-height:1.3;color:var(--mut);margin-top:1px}
.rmini-t .rv{font-size:15px;line-height:1.25;letter-spacing:0}
@media(max-width:860px){.rmini{flex:1 1 44%;min-width:44%}}

/* VENDA DO DIA — seletor do que é "realizado" + tabela do faseamento dia a dia.
   A tabela é HTML (não SVG) de propósito: número em SVG não vai para o Excel na exportação
   da visão, e a diretoria quer o número, não o desenho. */
/* MANCHETE — o número que a diretoria veio ver, no tamanho do que importa. Antes o maior
   elemento do card era o gráfico e o realizado tinha 15px: hierarquia invertida. */
.rman{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 8px}
.rman-b{flex:1 1 240px;min-width:240px;background:var(--line2);border:1px solid var(--bd);
  border-radius:11px;padding:8px 14px 10px}
.rman-b.rman-far{border-width:2px}
.rman .rt{display:block;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.rman-v{display:block;font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.1;
  color:var(--txt);font-variant-numeric:tabular-nums;margin:1px 0}
.rman-d{display:block;font-size:11px;color:var(--mut);line-height:1.35}
/* a frase que o diretor copia para o WhatsApp do time */
.rfrase{background:var(--warn-bg);border-left:4px solid var(--acafrao);border-radius:8px;
  padding:7px 13px;font-size:12.5px;line-height:1.5;color:var(--txt);margin-bottom:10px}
/* ALERTAS — o caminho, não só o diagnóstico. Bloco destacado por nível (CEO/gerente/vendedor) */
/* sem a faixa açafrão à esquerda (Fernando, 16/08/2026): quem carrega a cor aqui são os cards
   de dentro, e a faixa amarela do bloco ainda lembrava farol num lugar que é de oportunidade */
.ralbox{border:1.5px solid var(--bd);border-radius:11px;
  padding:9px 13px 10px;margin:0 0 10px;background:var(--line2)}
.ralt{font-size:12px;font-weight:700;color:var(--txt);margin-bottom:7px;line-height:1.4}
.rals{display:flex;gap:8px;flex-wrap:wrap}
.ral{flex:1 1 190px;min-width:190px;background:var(--card);border:1px solid var(--bd);border-radius:9px;
  padding:5px 10px 6px 13px;position:relative;overflow:hidden}
/* SEMPRE VERDE (Fernando, 16/08/2026): estes cards não são farol de resultado, são a lista de
   onde ainda tem venda para buscar na semana. A cor de farol continua nos números. */
.ral::after{content:"";position:absolute;top:0;left:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--ok-l,#4ADE80),var(--ok))}
.ral .rt{display:block;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);line-height:1.3}
.ralv{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--txt);
  font-variant-numeric:tabular-nums;line-height:1.2;margin-top:1px}
.ral .rd{display:block;font-size:9.5px;color:var(--mut);line-height:1.3}
.ralbox .rfoot{margin-top:7px}
.ralbox .rtab{margin-top:6px;background:var(--card);border-radius:8px}
@media(max-width:860px){.ral{flex:1 1 44%;min-width:44%}}

/* ranking: de quem é o desvio */
.rrank{margin-top:12px}
.rrank-t{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.rtab-rank td,.rtab-rank th{text-align:right}
/* o thead global do app pinta a faixa azul escura; aqui o cabeçalho é leve, senão a linha
   de títulos fica mais forte que os números (texto escuro sobre azul = ilegível) */
.rtab-rank thead th{background:none;color:var(--mut);font-size:9px}
.rtab-rank .rlbl{text-align:left;min-width:190px}
.rtab-rank tr.klick{cursor:pointer}
.rtab-rank tr.klick:hover td{background:var(--line2)}
/* linha de TOTAL em azul claro: no meio de 20 linhas iguais o total sumia (Fernando, 16/08/2026).
   O .rlbl é sticky com fundo próprio — sem repetir a cor nele, a primeira célula ficaria branca. */
.rtab-rank tr.rtot-lin td,.rtab-rank tr.rtot-lin .rlbl{background:var(--aqua-l);font-weight:800}
.rtab .rproj{background:var(--warn-bg)}
/* tabela do faseamento com o DIA em linha: números à direita, rótulo à esquerda */
.rtab-dias td,.rtab-dias th{text-align:right}
.rtab-dias thead th{background:none;color:var(--mut);font-size:9px}
.rtab-dias .rlbl{text-align:left;min-width:120px}
.rtab-dias tr.fut td{opacity:.45}
.rtab-dias tr.rhoje td{background:var(--aqua-l)}
.rtab-dias tr.rprojl td{background:var(--rprojbar);color:#fff;font-weight:800;border-bottom:0}
.rtab-dias tr.rprojl .rlbl{color:#fff}
.rtab-dias tr.rprojl td:first-child{border-radius:8px 0 0 8px}
.rtab-dias tr.rprojl td:last-child{border-radius:0 8px 8px 0}
.rtag{display:inline-block;border-radius:9px;padding:1px 6px;font-size:8px;font-weight:800;letter-spacing:.04em;vertical-align:1px}
.rtag-hoje{background:var(--teal);color:#fff}
.rtag-bad{background:var(--bad-bg);color:var(--bad)}
/* bolinha de farol do cliente: verde bateu a meta · amarelo comprou abaixo · vermelho não
   comprou · vermelho com (!) passou de 2 meses sem comprar */
.cfar{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:0;flex:none}
.cfar-ok{background:var(--ok)}
.cfar-warn{background:var(--warn)}
.cfar-bad{background:var(--bad)}
.cfar-x{width:13px;height:13px;line-height:13px;text-align:center;color:#fff;font-size:10px;
  font-weight:800;vertical-align:-2px;letter-spacing:0}
.rult{font-size:9px;color:var(--soft);font-weight:600;margin-left:6px}
/* cliente frio: última compra anterior ao último mês fechado — a data para de ser nota de rodapé */
.rult.rult-bad{color:var(--bad);font-weight:800}
/* UF(s) da bandeira: o ASSAI de um vendedor pode ser MS+MT+GO+RO */
.ruf{display:inline-block;background:var(--line2);border:1px solid var(--bd);border-radius:8px;
  padding:0 6px;font-size:8.5px;font-weight:700;color:var(--mut);margin-left:6px;letter-spacing:.03em}

.rsel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 2px}
.rselnota{font-size:10px;color:var(--soft)}
.rtab-wrap{overflow-x:auto;margin-top:4px}
/* no ranking o rotulo QUEBRA (nome + bandeira + UFs): sem isso, com dois paineis lado a
   lado, a ultima coluna saia da area visivel e o print a perdia sem aviso */
.rtab-rank .rlbl{white-space:normal;min-width:150px}
/* seletor DIÁRIO|SEMANAL dentro do <h3> da visão: encostado à direita, como o .rg */
.card h3 .rmodo{margin-left:auto}
.card h3 .rmodo button{text-transform:none;letter-spacing:0}
.rtab{border-collapse:collapse;width:100%;font-size:10.5px;font-variant-numeric:tabular-nums}
.rtab th,.rtab td{padding:3px 3px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--line2)}
.rtab thead th{font-size:9.5px;font-weight:800;color:var(--mut);border-bottom:1.5px solid var(--bd);line-height:1.15}
.rtab thead th small{font-size:8px;font-weight:600;color:var(--soft)}
.rtab thead th.hoje{color:var(--acafrao)}
.rtab .fut{opacity:.42}
.rtab .rlbl{text-align:left;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mut);position:sticky;left:0;background:var(--card);min-width:108px;padding-left:2px}
.rtab .rtot{font-weight:800;color:var(--txt);background:var(--line2);border-left:1.5px solid var(--bd);min-width:56px}
.rtab tr.sep td,.rtab tr.sep th{border-top:1.5px solid var(--bd)}
.rfoot{font-size:10px;color:var(--soft);margin-top:8px;line-height:1.5}
/* CELULAR: a coluna DIA é congelada (position:sticky) e com 120px engolia a tela — sobrava
   quase nada para as outras seis. Aqui ela encolhe, o rótulo quebra em duas linhas (a data em
   cima, o selo PRÓXIMO embaixo) e ganha uma sombra que mostra que ela está travada. */
@media(max-width:640px){
  .rtab-dias{font-size:9.5px}
  .rtab-dias th,.rtab-dias td{padding:3px 2px}
  .rtab-dias thead th{font-size:8px}
  .rtab-dias .rlbl{min-width:52px;font-size:8.5px;letter-spacing:0;white-space:normal;
    box-shadow:3px 0 5px -3px rgba(16,24,26,.22)}
  .rtab-dias .rtag{font-size:7px;padding:1px 4px;margin-top:1px}
}

.dl{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:1px 7px;font-size:10.5px;font-weight:700}
.dl.up{background:var(--ok-bg);color:var(--ok)} .dl.dn{background:var(--bad-bg);color:var(--bad)}

/* bolinha-farol p/ % da base compradora */
.dotf{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0}
.dotf.ok{background:var(--ok)} .dotf.med{background:#e0a339} .dotf.bad{background:var(--bad)}
.dotf.amar{background:#E3B71A} .dotf.lar{background:#E8862E}   /* farol cobertura: verde>80 amarelo>50 laranja>20 vermelho */
.ult-nula{color:var(--soft)}   /* sem última compra: hífen discreto */

/* gráfico de evolução: barras crescem ao (re)filtrar */
#evo-chart rect{transform-box:fill-box;transform-origin:bottom;animation:barGrow .6s cubic-bezier(.22,.75,.3,1) both}
#evo-chart text{animation:fadeIn .45s ease .4s both}
#evo-chart .lm{animation:fadeIn .6s ease .5s both}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* batalha naval (Volume/Mix): matriz itens × clientes */
.vol-tab{table-layout:auto}
.vol-tab th.vcol{height:96px;vertical-align:bottom;padding:6px 4px;min-width:56px}
.vol-tab th.vcol span{writing-mode:vertical-rl;transform:rotate(180deg);display:inline-block;
  font-size:9.5px;letter-spacing:.02em;max-height:86px;overflow:hidden}
.vol-tab .volfix{position:sticky;left:0;background:#fff;z-index:3;min-width:210px;max-width:250px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:2px 0 4px -2px rgba(0,0,0,.12)}
.vol-tab th.volfix{background:linear-gradient(180deg,var(--aqua),var(--teal-d));z-index:4}
.vol-tab tr.vol-cat{cursor:pointer}
.vol-tab tr.vol-cat td{background:#eef4f4;font-weight:600}
.vol-tab tr.vol-cat td.volfix{background:#e6efef}
.vol-tab tr.vol-cat:hover td{background:#e2edec}
.vol-tab td.vc{font-variant-numeric:tabular-nums;font-size:10.5px;min-width:56px}
.vol-tab td.vz{text-align:center;color:#d3dadb;min-width:56px}
.vol-tab tr.vol-prod td{font-size:10.5px}
.vol-tab tr.fat-total td.volfix{color:#fff}
/* Mix por Cliente: rótulo colorido da linha, células SIM/NÃO e cabeçalhos cliente/UF */
.vlinha{display:inline-block;min-width:76px;max-width:96px;padding:1.5px 6px;border-radius:4px;
  color:#fff;font-size:8.5px;font-weight:700;letter-spacing:.02em;text-align:center;
  overflow:hidden;text-overflow:ellipsis;vertical-align:1px;margin-right:5px}
.vsn{text-align:center;font-size:9px;font-weight:800;letter-spacing:.03em;min-width:44px}
.vsn.s{background:#dcefe2;color:#1d6b3f}
.vsn.n{background:#fdeaea;color:#c0392b}
.vol-tab th.vclih{cursor:pointer;text-align:center;font-size:9px;padding:5px 4px;max-width:110px;
  overflow:hidden;text-overflow:ellipsis}
.vol-tab th.vufh{font-size:8.5px;padding:3px 5px;text-align:center;background:rgba(47,125,124,.85)}
#vol-info .fchip{cursor:pointer}
.vfoto{height:26px;max-width:40px;object-fit:contain;display:inline-block;vertical-align:middle;cursor:zoom-in}
/* Material de Vendas: botões de ação da lista */
.mbt{display:inline-block;padding:3px 9px;border:1px solid var(--bd);border-radius:7px;font-size:10.5px;
  font-weight:600;color:var(--txt);text-decoration:none;cursor:pointer;background:#fff}
.mbt:hover{border-color:var(--teal-d);color:var(--teal-d)}
.mbt-b{background:linear-gradient(180deg,var(--aqua),var(--teal-d));color:#fff;border-color:transparent}
.mbt-b:hover{filter:brightness(1.08);color:#fff}
.mbt-x{color:#c0392b;border-color:#e8c9c4}
.mbt-x:hover{background:#fdeaea;border-color:#c0392b;color:#c0392b}
#mat-busca{min-width:220px}
.mat-thumb{width:44px;height:40px;object-fit:contain;border-radius:4px;vertical-align:middle;background:#f5f8f8;cursor:zoom-in}
tr td:has(> a > .mat-thumb){padding:3px 6px}
/* Material de Vendas: linha-cabeçalho de família nas fotos de produtos */
.fat-tab tr.mat-fam td{background:#eef4f3;border-top:2px solid var(--bd);padding:5px 8px}
.fat-tab tr.mat-fam .vlinha{font-size:9px}
/* chips de família (sub-filtro) + seleção em massa */
.fchip.fchip-sm{font-size:10px;padding:2px 8px}
.fchip.fchip-sm b{color:inherit;opacity:.7;font-size:9px}
#v-mat .mat-chk{width:15px;height:15px;accent-color:var(--teal-d);cursor:pointer;vertical-align:middle;margin:0}
.mat-bulkbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#eef5f4;
  border:1px solid var(--teal);border-radius:9px;padding:7px 11px;margin:8px 0}
.mat-bulkbar button.mbt{cursor:pointer}
/* Análise Basket — dossiê do cliente */
#basket-cli-box,#basket-uf-box{position:relative}
#basket-cli-box .dd-btn{min-width:230px;height:30px}
#basket-uf-box .dd-btn{min-width:150px;height:30px}
.bsk-head .bsk-title{margin-bottom:10px}
.bsk-head .bsk-title b{font-size:16px;color:var(--ink)}
.bsk-head .bsk-title .rg{margin-left:8px}
table.bsk-mtx th.bsk-vth{height:118px;white-space:nowrap;padding:4px 2px;vertical-align:bottom;text-align:center}
table.bsk-mtx th.bsk-vth>div{writing-mode:vertical-rl;transform:rotate(180deg);
  max-height:100px;overflow:hidden;text-overflow:ellipsis;margin:0 auto 3px;font-size:9.5px;font-weight:600}
table.bsk-mtx td.bsk-s,table.bsk-mtx td.bsk-n{width:22px;text-align:center;padding:4px 0}
table.bsk-mtx td.bsk-s{background:rgba(46,158,99,.85)}
table.bsk-mtx td.bsk-n{background:#fdeaea}
table.bsk-mtx tr.bsk-cov td{background:#eef4f3;font-size:9.5px;color:var(--mut);font-weight:700;text-align:center}
.bsk-gaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.bsk-gap{display:flex;gap:10px;border:1px solid var(--bd);border-radius:10px;padding:8px 10px;background:#fff}
.bsk-gimg{width:52px;height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:center;
  background:#f5f8f8;border-radius:8px;overflow:hidden}
.bsk-gimg img{max-width:100%;max-height:100%;object-fit:contain}
.bsk-ginfo{min-width:0;font-size:11.5px}
.bsk-ginfo b{color:var(--ink)}
.bsk-gnum{margin-top:3px;font-size:10.5px;color:var(--mut)}
/* botão de download por visual (canto inferior direito de cada card do Dashboard) */
#v-geral .card,#v-geral #kpis{position:relative}
.card-dl{position:absolute;right:10px;bottom:9px;display:inline-flex;align-items:center;gap:3px;height:22px;
  padding:0 7px;border:1px solid var(--bd);border-radius:7px;background:#fff;color:var(--mut);
  cursor:pointer;opacity:.4;transition:opacity .15s,color .15s,border-color .15s;z-index:6}
.card-dl:hover{opacity:1;color:var(--teal-d);border-color:var(--teal-d)}
.card-dl svg{width:14px;height:14px}
.card-dl .ccaret{font-size:8px;line-height:1}
.card-tip{position:absolute;bottom:calc(100% + 6px);right:0;white-space:nowrap;background:var(--ink);color:#fff;
  font-size:10.5px;font-weight:500;padding:4px 9px;border-radius:6px;opacity:0;pointer-events:none;
  transition:opacity .15s;box-shadow:0 4px 12px rgba(24,58,63,.25)}
.card-dl:hover .card-tip{opacity:1}
.card-dl:has(+ .card-dlmenu.on) .card-tip{opacity:0}
.card-dlmenu button[disabled]{opacity:.4;cursor:default}
.card-dlmenu button[disabled]:hover{background:none;color:var(--txt)}
.card-dlmenu{position:absolute;bottom:37px;right:10px;background:#fff;border:1px solid var(--bd);
  border-radius:8px;box-shadow:0 8px 24px rgba(24,58,63,.18);padding:4px;display:none;z-index:20;min-width:130px}
.card-dlmenu.on{display:block}
.card-dlmenu button{display:block;width:100%;text-align:left;background:none;border:0;padding:6px 10px;
  border-radius:6px;font:inherit;font-size:11.5px;color:var(--txt);cursor:pointer}
.card-dlmenu button:hover{background:#eef4f3;color:var(--teal-d)}
/* Pedidos em Carteira */
#cart-busca{min-width:240px}
tr.cart-ped{cursor:pointer}
tr.cart-ped:hover td{background:#e4efee}
tr.cart-ped.on td{background:#eef4f3}
tr.cart-det>td{background:#f7fafa;padding:6px 10px;border-bottom:2px solid var(--bd)}
tr.cart-det table{width:100%;background:transparent}
tr.cart-det th{background:#4a6b70;font-size:9px}
tr.cart-it td{background:transparent;font-size:11px;border-bottom:1px solid var(--line2)}
.cart-badge{display:inline-block;padding:1px 8px;border-radius:8px;font-size:9.5px;font-weight:700;color:#fff;white-space:nowrap}
/* Anotações */
.anot-form{display:flex;flex-direction:column;gap:8px}
.anot-form textarea{width:100%;border:1px solid var(--bd);border-radius:9px;padding:9px 11px;font:inherit;font-size:12.5px;resize:vertical;min-height:44px}
.anot-form textarea:focus{outline:none;border-color:var(--teal)}
.anot-form-l{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#anot-cli-box .dd-btn{min-width:230px;height:32px}
#anot-busca{min-width:220px}
.anot-grp{font-size:11px;font-weight:700;color:var(--ink);background:#eef4f3;padding:5px 10px;border-radius:7px;margin:12px 0 6px}
.anot-grp .rg{font-weight:500}
.anot-card{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--bd);border-left-width:4px;border-left-color:var(--teal-d);
  border-radius:10px;padding:9px 12px;margin:7px 0;background:#fff}
.anot-card.tarefa{border-left-color:#e2a539}
.anot-card.feito{opacity:.6}
.anot-card.feito .anot-txt{text-decoration:line-through}
.anot-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);margin-top:6px;flex:0 0 8px}
.anot-chk{position:relative;cursor:pointer;margin-top:2px;flex:0 0 18px}
.anot-chk input{position:absolute;opacity:0;width:18px;height:18px;cursor:pointer;margin:0}
.anot-chk span{display:block;width:18px;height:18px;border:2px solid #e2a539;border-radius:5px}
.anot-chk input:checked+span{background:#2e9e63;border-color:#2e9e63}
.anot-chk input:checked+span::after{content:"✓";color:#fff;font-size:12px;position:absolute;left:3px;top:-1px}
.anot-body{flex:1;min-width:0}
.anot-txt{font-size:12.5px;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.anot-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:5px;font-size:10.5px;color:var(--mut)}
.anot-cli-tag{background:var(--teal-d);color:#fff;padding:1px 8px;border-radius:8px;font-weight:600}
.anot-avulsa{color:var(--soft);font-style:italic}
.anot-badge{background:#fff3df;color:#9a6a12;padding:1px 7px;border-radius:8px;font-weight:600}
.anot-badge.ok{background:#e7f3ea;color:#2e7d32}
.anot-del{color:#c0392b;cursor:pointer;text-decoration:none}
.anot-del:hover{text-decoration:underline}
/* Sell Out — Clientes */
#so-cli-box .dd-btn{min-width:180px;height:30px}
.so-evtab td,.so-evtab th{font-size:11px;padding:5px 7px}
.so-evtab .so-clilogo{position:relative;text-align:center;vertical-align:middle;background:#fff;border-top:2px solid var(--line2);min-width:100px;max-width:110px;white-space:normal;word-break:break-word}
.so-evtab .so-clilogo img{max-height:46px;max-width:92px;object-fit:contain}
.so-evtab .so-clinm-txt{font-size:12px;letter-spacing:.01em}
/* meses jan–dez com largura uniforme (sem quebrar número) */
.so-evtab th.so-mes,.so-evtab td.so-mes{min-width:58px;white-space:nowrap}
/* valores de META (modo COM META do visual JBP): itálico, sem negrito */
.so-evtab i.so-meta{font-style:italic;font-weight:400;color:var(--mut)}
/* visual JBP (Evolução Sell-in): todas as células centralizadas */
#jbp-visual .so-evtab th,#jbp-visual .so-evtab td{text-align:center}
/* botão COM META (rodapé do visual JBP) */
.jbp-meta{border:1px solid var(--bd);border-radius:7px;background:#fff;color:var(--mut);
  font:inherit;font-size:10px;font-weight:700;letter-spacing:.05em;padding:2px 10px;cursor:pointer;flex:0 0 auto}
.jbp-meta.on{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.so-evtab .so-rank{position:absolute;top:4px;left:5px;font-size:10px;font-weight:800;color:var(--teal-d);background:#eef5f4;border-radius:6px;padding:0 5px}
.so-evtab .so-exp{position:absolute;top:3px;right:5px;cursor:pointer;color:var(--teal-d);font-weight:800;user-select:none;font-size:13px}
.so-evtab .so-anocol{color:var(--mut)}
.so-evtab tr.so-cresc td{font-size:10.5px;border-top:1px solid var(--line2)}
.so-evtab tr.so-grow:hover td{background:#f6faf9}
.so-evtab tr.so-ufrow td{background:#fbfcfc}
.so-evtab .so-ufname{text-align:left;font-weight:700;color:var(--ink);padding-left:16px;vertical-align:middle;background:#f4f8f7;white-space:nowrap}
.so-evtab .so-ufclick{cursor:pointer}
.so-evtab .so-ufclick:hover{background:#e3efed;color:var(--teal-d)}
.so-ufbanner{display:flex;align-items:center;gap:10px;background:#eef5f4;border:1px solid var(--teal);border-radius:9px;padding:8px 12px;font-size:12.5px;color:var(--ink)}
.so-ufclear{cursor:pointer;color:#c0392b;font-weight:700;font-size:11.5px;margin-left:auto}
.so-ufclear:hover{text-decoration:underline}
/* Sell Out: células centralizadas por padrão; 1ª coluna (dimensão) à esquerda */
#v-sellout .fat-tab th,#v-sellout .fat-tab td{text-align:center}
#v-sellout .fat-tab td.l{text-align:left}   /* só o CONTEÚDO alinha à esquerda; título centralizado */
#v-sellout table.so-sort th{cursor:pointer;user-select:none;white-space:nowrap}
#v-sellout table.so-sort th.so-sortasc::after{content:" ▲";font-size:8px;color:var(--teal-d)}
#v-sellout table.so-sort th.so-sortdesc::after{content:" ▼";font-size:8px;color:var(--teal-d)}
#v-sellout td.so-focoable{cursor:pointer}
#v-sellout td.so-focoable:hover{background:#e8f2f0;color:var(--teal-d)}
#v-sellout td.so-focoable .so-focoic{opacity:0;color:var(--teal-d);font-weight:800;margin-left:3px}
#v-sellout td.so-focoable:hover .so-focoic{opacity:1}
/* separador azul-escuro no topo de cada bloco de estado (UF) na tabela de evolução */
#v-sellout .so-evtab tr.so-grow.so-ufrow>td{border-top:2px solid #23577e}
#v-sellout .so-evtab td.so-ufclick{cursor:pointer;color:var(--teal-d);font-weight:700}
#v-sellout .so-evtab td.so-ufclick:hover{background:#e8f2f0;text-decoration:underline}
/* valores de 2026 nos blocos (Sell-out e visual JBP do Dashboard) na cor da marca */
.so-evtab tr.so-v26 td b{color:var(--teal-d)}
/* LOG Status de Entregas */
#v-entregas .ent-cards{display:flex;flex-wrap:nowrap;gap:6px;align-items:stretch}
#v-entregas /* evolutivo mensal: uma linha por mês — rótulo, barra empilhada (R$) e os números */
.ent-evo{display:flex;flex-direction:column;gap:1px}
.ent-evom{display:grid;grid-template-columns:64px 200px 1fr;gap:12px;align-items:center;
  padding:2px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.ent-evom:hover{background:var(--line2)}
.ent-evom.on{background:var(--aqua-l);border-color:var(--teal)}
.ent-evorot{font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--txt)}
.ent-evobar{display:flex;height:11px;border-radius:6px;overflow:hidden;background:var(--line2)}
.ent-evoseg{display:block;height:100%}
.ent-evoseg+.ent-evoseg{border-left:2px solid var(--card)}
.ent-evonums{display:flex;gap:14px;flex-wrap:wrap;font-size:10.5px;font-variant-numeric:tabular-nums}
.ent-evon b{font-weight:800}
@media(max-width:860px){.ent-evom{grid-template-columns:52px 1fr;grid-template-rows:auto auto}
  .ent-evonums{grid-column:1/-1}}
.ent-scard.neutro .ent-slbl{color:var(--mut)}
/* botões do evolutivo: a cor da situação na borda e no texto; selecionado = preenchido */
.ent-evobtn{font-family:inherit;font-size:10px;font-weight:800;letter-spacing:.04em;
  color:var(--ec);border:1.5px solid var(--ec);background:transparent;border-radius:14px;
  padding:3px 10px;cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.4}
.ent-evobtn:hover{filter:brightness(1.08);background:var(--line2)}
.ent-evobtn.on{background:var(--ec);color:#fff}
.ent-scard{flex:1 1 0;min-width:0;border:1px solid var(--bd,#d5dedd);border-radius:10px;padding:6px 9px;cursor:pointer;background:#fff;display:flex;flex-direction:column;justify-content:center;min-height:52px;transition:border-color .12s,box-shadow .12s}
#v-entregas .ent-scard:hover{border-color:var(--teal,#2f7d7c);box-shadow:0 2px 8px rgba(0,0,0,.06)}
#v-entregas .ent-scard.on{border-color:var(--teal-d,#1f5b5a);background:#e8f2f0}
#v-entregas .ent-scard.aten{border-left:4px solid #E0A339}
#v-entregas .ent-scard.crit{border-left:4px solid var(--bad,#c0392b)}
#v-entregas .ent-slbl{display:block;font-size:11px;font-weight:700;color:var(--ink,#1f2d2b);white-space:normal;line-height:1.14}
#v-entregas .ent-srow{display:block;font-size:10px;color:var(--mut,#67807d);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#v-entregas .ent-kpiclk{cursor:pointer;transition:box-shadow .12s}
#v-entregas .ent-kpiclk:hover{box-shadow:0 3px 12px rgba(0,0,0,.10)}
#v-entregas .ent-kpion{outline:2px solid var(--teal-d,#1f5b5a);outline-offset:-2px}
#v-entregas .twrap{max-height:72vh;overflow:auto}
#v-entregas .ent-tab td,#v-entregas .ent-tab th{white-space:nowrap}
#v-entregas .ent-tab thead th{position:sticky;z-index:3}   /* mantém o gradiente padrão do th (opaco) — fundo branco deixava o texto branco invisível */
#v-entregas .ent-tab thead tr:first-child th.ent-th{top:0;cursor:pointer;user-select:none;padding:3px 8px;font-size:11px;line-height:1.2}
#v-entregas .ent-tab thead tr.ent-qrow th{top:24px;background:#f4f7f7;padding:2px 4px}
#v-entregas .ent-cq{width:100%;min-width:56px;box-sizing:border-box;border:1px solid var(--bd,#d5dedd);border-radius:6px;padding:2px 6px;font-size:10.5px}
/* a lista de CASOS CRÍTICOS também rola dentro do .twrap (até 40 linhas), então o cabeçalho dela
   precisa congelar igual ao da tabela principal — a regra de cima só pegava a .ent-tab */
#v-entregas .ent-crittab thead th{position:sticky;top:0;z-index:3}
#v-entregas .ent-crittab td{white-space:nowrap}
#v-entregas .ent-crittab td.l{white-space:normal}   /* cliente e agenda ocupam duas linhas */
#v-entregas .ent-tab tr.ent-crit>td{background:#fdece9}
#v-entregas .ent-tab tr.ent-aten>td{background:#fdf6e8}
/* Tela cheia: barra lateral recolhida (só ícones); volta a expandir ao passar o mouse */
body.fs aside{width:56px;overflow:hidden;transition:width .16s ease}
body.fs aside:hover{width:230px;overflow:visible;z-index:60;box-shadow:3px 0 22px rgba(0,0,0,.42)}
body.fs aside .nav-i,body.fs aside .navgrp-h{gap:0;font-size:0;justify-content:center}
body.fs aside .nav-i svg,body.fs aside .navgrp-h svg{width:20px;height:20px}
body.fs aside .nsec,body.fs aside .who{visibility:hidden}
body.fs aside .sbrand{padding:10px 0;text-align:center}
body.fs aside .sbrand img{width:40px;height:auto}
body.fs aside:hover .nav-i,body.fs aside:hover .navgrp-h{gap:11px;font-size:13px;justify-content:flex-start}
body.fs aside:hover .nav-i svg,body.fs aside:hover .navgrp-h svg{width:17px;height:17px}
body.fs aside:hover .nsec,body.fs aside:hover .who{visibility:visible}
body.fs aside:hover .sbrand img{width:auto}
body.fs main{margin-left:56px;max-width:none}   /* tela cheia USA a tela toda (mais colunas de clientes no Mix) */
body.fs .foot{left:56px}
/* toggle Mês/Quarter do gráfico de evolução (no rodapé do visual, antes das legendas) */
.evo-modo{display:inline-flex;border:1px solid var(--bd,#d5dedd);border-radius:7px;overflow:hidden;margin-right:12px;align-self:center}
.evo-modo button{border:0;background:#fff;font:inherit;font-size:10px;font-weight:700;padding:2px 11px;cursor:pointer;color:#5f6c70;line-height:1.6}
.evo-modo button+button{border-left:1px solid var(--bd,#d5dedd)}
.evo-modo button.on{background:#2f8f7d;color:#fff}
#so-conteudo .card,#so-conteudo .grid.kpis{position:relative}
#so-evo rect{transform-box:fill-box;transform-origin:bottom;animation:barGrow .6s cubic-bezier(.22,.75,.3,1) both}
#so-evo text{animation:fadeIn .45s ease .4s both}
.soevleg{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:11px;color:var(--mut)}
.soevleg span{display:flex;align-items:center;gap:6px}
.soevleg i{width:13px;height:13px;border-radius:3px;display:inline-block}
/* Notas Fiscais */
.nft{display:inline-block;padding:2px 8px;border-radius:9px;font-size:9.5px;font-weight:700;color:#fff;letter-spacing:.02em;white-space:nowrap}
.nft-v{background:#2f7d7c}.nft-b{background:#c9821f}.nft-d{background:#b3392f}.nft-o{background:#5c6a70}
.nft-c{background:#4f9aa0}   /* pedido em carteira (ainda não faturado) */
.nf-top{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.nfcards{display:flex;gap:8px;flex:0 0 auto}
.nfcard{width:122px;background:#eef4f3;border:1px solid var(--bd);border-left-width:5px;
  border-radius:11px;padding:8px 12px}
.nfcard.nft-v{border-left-color:#2f7d7c}
.nfcard.nft-c{border-left-color:#4f9aa0}   /* pedido em carteira */
.nfcard.nft-d{border-left-color:#b3392f}
.nfcard.nft-b{border-left-color:#c9821f}
.nfcard.nft-o{border-left-color:#5c6a70}   /* outros: remessa, doacao, amostra */
.nfcard span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:650;white-space:nowrap}
.nfcard b{display:block;font-size:15px;color:var(--ink);margin-top:1px}
.nfcard i{display:block;font-style:normal;font-size:10px;color:var(--soft)}
.nf-filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;flex:1;min-width:0}
.nf-filtros>div{position:relative}
.nf-filtros .dd-btn,.nf-filtros .perbtn{min-width:150px;height:30px}
.nfinfo div.nfw b{max-width:220px}   /* bairro é o campo mais longo — não pode empurrar o resto */
.nfinfo2{display:none}               /* o 2º bloco virou continuação do 1º */
tr.nf-row{cursor:pointer}
tr.nf-row:hover td{background:#e4efee}
tr.nf-row.on td{background:#eef4f3}
tr.nf-det>td{background:#f7fafa;padding:10px 14px;border-bottom:2px solid var(--bd)}
/* CABEÇALHO DA NOTA ABERTA (Fernando, 30/08/2026): era uma GRADE de colunas de 170px com o
   rótulo EM CIMA do valor — "UF: SP" ocupava 170px e duas alturas, e o bloco virava cinco
   linhas na tela. Agora cada campo tem a largura do próprio conteúdo e o rótulo fica AO LADO
   ("CÓD.: 109"), no formato que ele pediu. CÓD., UF, NF, PEDIDO e CEP encolhem sozinhos. */
/* FAIXA AZUL-MARINHO (Fernando, 30/08/2026): o cabeçalho da nota aberta virou um bloco só,
   com risco branco separando cada informação. Um fluxo contínuo, não dois blocos: assim os
   campos PREENCHEM a linha em vez de deixar buraco à direita e jogar NF e Pedido para baixo. */
.nfinfo{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin-bottom:10px;
  /* MESMO DEGRADÊ DO CABEÇALHO DAS COLUNAS (Fernando, 30/08/2026): o azul-marinho ficou escuro
     demais ao lado da tabela. Vem por VARIÁVEL, não por hex — senão o tema Dark não acompanha. */
  background:linear-gradient(180deg,var(--aqua),var(--teal-d));border-radius:9px;padding:7px 4px;color:#fff}
.nfinfo div{display:flex;align-items:baseline;gap:5px;font-size:11px;min-width:0;
  padding:1px 11px;border-right:1px solid rgba(255,255,255,.38)}
.nfinfo div:last-child{border-right:0}
.nfinfo span{font-size:8.5px;text-transform:uppercase;letter-spacing:.05em;
  color:rgba(255,255,255,.72);white-space:nowrap}
.nfinfo span::after{content:":"}
.nfinfo b{font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}
.nf-it{font-size:11px}
#nf-lista{overflow-x:auto}
/* linha de busca por coluna sob o cabeçalho (mesmo padrão da guia Entregas) */
#nf-lista tr.nf-qrow th{background:#f4f7f7;padding:2px 4px;border-right:0}
.nf-cq{width:100%;min-width:52px;box-sizing:border-box;border:1px solid var(--bd);border-radius:6px;padding:2px 6px;font-size:10.5px;font-family:inherit}
/* SEMÁFORO DE PENDENTES POR VALOR (guia LOG, 11/08/2026) — o e-mail diário da logística tem
   informação demais e decisão de menos. Aqui a barra responde em 3 segundos "quanto dinheiro
   está preso e em que gravidade", e cada faixa é clicável para virar recorte da tabela. */
.ent-sem{display:flex;gap:6px;align-items:stretch}
.ent-semb{flex:1;min-width:120px;cursor:pointer;border:1px solid var(--bd);border-radius:10px;
  padding:9px 11px 8px;background:var(--card);transition:transform .1s,box-shadow .12s;position:relative;overflow:hidden}
.ent-semb:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.10)}
.ent-semb.on{outline:2px solid var(--teal-d);outline-offset:-2px}
.ent-semb>span{position:absolute;left:0;top:0;bottom:0;width:4px}
.ent-semb b{display:block;font-size:9.5px;letter-spacing:.06em;color:var(--mut);font-weight:800}
.ent-semb i{display:block;font-style:normal;font-size:13px;font-weight:800;color:var(--txt);margin-top:2px}
.ent-semb u{display:block;text-decoration:none;font-size:10px;color:var(--mut);margin-top:1px}
@media(max-width:860px){.ent-sem{flex-direction:column}}

/* CASO CRÍTICO: nota não entregue há mais de 30 dias, ou que perdeu a agenda e foi reagendada.
   Faixa vermelha na lateral da linha + selo com os dias parados. É o que faz a NF 89282
   (70 dias, MUFFATO/PR) saltar aos olhos no meio de 12 mil notas (Fernando, 11/08/2026). */
#nf-lista .fat-tab tr.nf-critica>td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.nf-critsel{display:inline-block;margin-left:5px;font-style:normal;font-size:9px;font-weight:800;
  color:#fff;background:var(--bad);border-radius:5px;padding:1px 5px;vertical-align:middle;white-space:nowrap}
.fchip.fchip-crit{border-color:var(--bad);color:var(--bad);font-weight:800}
.fchip.fchip-crit.on{background:var(--bad);color:#fff;border-color:var(--bad)}

/* LARGURA DAS COLUNAS DA GUIA NOTAS FISCAIS (Fernando, 11/08/2026)
   A coluna DATA nasceu na ponta direita e ficava fora da tela. Em vez de encolher a fonte,
   apertamos as colunas que sobravam largura: a data de emissão cabe em 8 caracteres, NF e
   pedido em 6, e CLIENTE/CIDADE passam a cortar com reticências — o nome inteiro fica no
   title (é só passar o mouse). Assim nada quebra em duas linhas e a tabela inteira aparece. */
#nf-lista .fat-tab td.nfc-dt{color:var(--mut);white-space:nowrap;width:50px;padding-left:5px;padding-right:5px}
#nf-lista .fat-tab td.nfc-nf,#nf-lista .fat-tab td.nfc-ped{white-space:nowrap;width:62px;padding-left:5px;padding-right:5px}
#nf-lista .fat-tab td.nfc-t{width:64px;padding-left:4px;padding-right:4px}
#nf-lista .fat-tab td.nfc-cli b,#nf-lista .fat-tab td.nfc-cid span{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nf-lista .fat-tab td.nfc-cli{max-width:132px;padding-left:6px;padding-right:6px}
#nf-lista .fat-tab td.nfc-cli b{max-width:132px}
#nf-lista .fat-tab td.nfc-cid{max-width:104px;font-size:10.5px;padding-left:6px;padding-right:6px}
#nf-lista .fat-tab td.nfc-cid span{max-width:104px}
#nf-lista .fat-tab td.nfc-uf{font-size:10.5px;text-align:center;width:26px;padding-left:2px;padding-right:2px}
/* os títulos são maiúsculos e podem quebrar em 2 linhas: quebrar o CABEÇALHO é barato,
   quebrar o CONTEÚDO não é. Título um pouco menor e menos espaçado para que sejam as colunas
   de número (emissão, NF, pedido) a ceder largura primeiro — e não as que o vendedor lê. */
#nf-lista .fat-tab thead th{padding-left:5px;padding-right:5px;line-height:1.2;
  font-size:9.5px;letter-spacing:.02em}
#nf-lista .nf-cq{min-width:0}   /* o campo de busca não pode forçar a coluna a crescer */
/* a DATA é a última coluna e era justamente a que sumia: ganha piso de largura para nunca
   apertar. O STATUS fica inteiro de propósito — é a informação principal da guia. */
#nf-lista .fat-tab td.nfd,#nf-lista .fat-tab th:nth-last-child(2){min-width:76px}

/* linha "nada encontrado" DENTRO da tabela — o cabeçalho com os campos de busca fica de pé,
   então dá para corrigir o que foi digitado sem perder os filtros já escolhidos (11/08/2026) */
tr.tab-vazia td{padding:26px 16px;text-align:center;color:var(--mut);font-size:12px;line-height:1.6}
tr.tab-vazia b{display:block;font-size:13px;color:var(--txt);margin-bottom:5px}
.tv-sub{font-size:11px;color:var(--mut)}
.tv-limpar{display:inline-block;margin-top:10px;cursor:pointer;font-size:11px;font-weight:700;
  color:var(--teal-d);border:1px solid var(--bd);border-radius:8px;padding:4px 12px;background:var(--card)}
.tv-limpar:hover{background:var(--hov,#f2f6f6)}

/* status de entrega na lista de NFs (join com a base da logística) */
.nfe{display:inline-block;padding:2px 7px;border-radius:6px;font-size:9.5px;font-weight:700;white-space:nowrap}
.nfcard-clk{cursor:pointer;transition:transform .1s,box-shadow .12s}
.nfcard-clk:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.10)}
.nfcard-on{outline:2px solid var(--teal-d);outline-offset:-2px}
.nfe-aten{background:var(--warn-bg);color:#8a6d1d}
.nfe-crit{background:var(--bad-bg);color:var(--bad)}
/* "Verificar com Logística": a NF não consta na planilha de entregas. Como hoje a planilha só
   traz pendentes, esse é o estado da MAIORIA das notas — então é um aviso neutro (cinza), e não
   um alerta vermelho, senão as ocorrências de verdade se perderiam no meio. */
.nfe-verif{background:#eef1f4;color:#5b6b7c;border:1px dashed #c3ccd6}
.nfe-agend{background:#e8f0fb;color:#2f6bb0}   /* entrega agendada com o cliente */
/* nota anterior ao início da base da logística (05/01/2026): eles não reportavam nessa época —
   é diferente de "verificar", porque não há o que cobrar deles */
.nfe-nd{background:transparent;color:var(--mut);border:1px dashed var(--bd);font-weight:600}

/* coluna DATA da guia Notas Fiscais: a data + o RÓTULO do que ela é. O rótulo não é enfeite —
   sem ele o vendedor lê uma previsão como se fosse entrega confirmada (11/08/2026) */
td.nfd{font-size:11px;line-height:1.15}
td.nfd b{display:block;font-weight:700}
.nfd-rot{display:block;font-style:normal;font-size:8.5px;text-transform:uppercase;letter-spacing:.3px;opacity:.75}
td.nfd-ok b{color:var(--ok)}
td.nfd-atraso b{color:var(--bad)}
td.nfd-agend b{color:#2f6bb0}
td.nfd-prev b{color:var(--mut)}
.nfe-ok{background:var(--ok-bg);color:var(--ok)}   /* entrega confirmada pela logística */
.nfe-cart{background:#e4efee;color:#2f6c70}   /* pedido em carteira: ainda não faturado */

/* barra de rolagem horizontal flutuante (fixa logo acima do rodapé; fina como a vertical) */
#hscroll{position:fixed;bottom:37px;display:none;height:13px;overflow-x:auto;overflow-y:hidden;z-index:44}
#hscroll>div{height:1px}
#hscroll::-webkit-scrollbar{height:9px}
#hscroll::-webkit-scrollbar-track{background:rgba(0,0,0,.06);border-radius:6px}
#hscroll::-webkit-scrollbar-thumb{background:#a9b8bc;border-radius:6px}
#hscroll::-webkit-scrollbar-thumb:hover{background:#8aa0a5}
#nf-busca{min-width:200px}
#nf-mes{min-width:90px}
/* preview flutuante da foto (hover) */
#foto-zoom{position:fixed;z-index:80;display:none;background:#fff;border:1px solid #dfe5e4;
  border-radius:10px;box-shadow:0 10px 30px rgba(24,58,63,.28);padding:10px 12px;
  pointer-events:none;text-align:center}
#foto-zoom.on{display:block}
#foto-zoom img{height:200px;display:block;margin:0 auto}
#foto-zoom .fz-nome{margin-top:6px;font-size:10.5px;font-weight:600;color:var(--ink);max-width:230px}
/* foto ampliada (clique) */
#foto-modal{position:fixed;inset:0;z-index:90;display:none;background:rgba(16,38,42,.55);
  align-items:center;justify-content:center;cursor:zoom-out}
#foto-modal.on{display:flex}
#foto-modal .fm-card{background:#fff;border-radius:14px;padding:22px 26px;text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.35);max-width:min(480px,90vw)}
#foto-modal .fm-card img{height:min(340px,60vh);max-width:100%;object-fit:contain}
#foto-modal .fm-nome{margin-top:10px;font-size:13px;font-weight:700;color:var(--ink)}
#foto-modal .fm-dica{margin-top:4px;font-size:10px;color:var(--mut)}
/* resumo por cliente ACIMA da barra (QTDE DE ITENS / CURVA A / INOVAÇÃO / QUERO) */
.vol-tab tr.vol-sumh th{background:#2c4f56;color:#e8f1f1;font-size:9px;padding:3px 5px;
  text-align:center;font-weight:600;border-right:1px solid rgba(255,255,255,.18);letter-spacing:.03em}
.vol-tab tr.vol-sumh th.vsl{text-align:right;padding-right:12px}
.vol-tab tr.vol-sumh th.vslf{background:#2c4f56}
.vol-tab tr.vol-sumh.qtde th{background:var(--ink);font-weight:800;font-size:10px}
/* células da matriz: verde quando compra, vermelho quando não — sempre centralizadas */
.vcg{text-align:center;font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:600;
  color:#0f3d26;min-width:56px;background:#cdead7}
.vzn{text-align:center;background:#fdeaea;color:#dba9a2;min-width:56px}

/* ===== Mix por Cliente · OPORTUNIDADE v2 (R$) ===== */
.vol-opp2{border-collapse:separate;border-spacing:0;min-width:100%}
/* GRADE BRANCA fininha em toda a tabela (linhas e colunas), como a divisão do cabeçalho */
.vol-opp2 th,.vol-opp2 td{border-bottom:1px solid #fff;border-right:1px solid #fff;font-variant-numeric:tabular-nums}
html[data-theme="dark"] .vol-opp2 th,html[data-theme="dark"] .vol-opp2 td{border-color:rgba(255,255,255,.16)}
.vol-opp2 td{font-size:10.5px}
/* tudo CENTRALIZADO, exceto PRODUTO (.l) */
.vol-opp2 .l{text-align:left}.vol-opp2 .r,.vol-opp2 .c{text-align:center}
.vol-opp2 .vopp-ean,.vol-opp2 .vopp-sku{display:none}             /* EAN e SKU só saem no Excel */
/* ordenar: cabeçalho clicável — texto QUEBRA p/ colunas estreitas ("MÉDIA MÊS CLIENTES" em 2 linhas) */
.vol-opp2 th.vopp-ord{cursor:pointer;white-space:normal;line-height:1.2;user-select:none;vertical-align:middle}
.vol-opp2 thead tr:first-child th{padding:4px 5px;font-size:9.8px}
.vol-opp2 th.vopp-ord:not(.vfix1):not(.vfix2){max-width:76px;min-width:50px}
.vol-opp2 th.vopp-ord:hover{filter:brightness(1.12)}
.vol-opp2 th.ord-on{text-decoration:underline}
/* 2 primeiras colunas congeladas (CATEGORIA · PRODUTO) */
.vol-opp2 th.vfix1,.vol-opp2 td.vfix1,.vol-opp2 th.vfix2,.vol-opp2 td.vfix2{position:sticky;z-index:2}
.vol-opp2 .vfix1{left:0;width:112px;min-width:112px;max-width:112px}
.vol-opp2 .vfix2{left:112px;min-width:200px;max-width:250px}
.vol-opp2 thead th.vfix1,.vol-opp2 thead th.vfix2{z-index:5}
.vol-opp2 td.vfix1,.vol-opp2 td.vfix2{background:#fff}
.vol-opp2 tbody tr:nth-child(odd) td.vfix1,.vol-opp2 tbody tr:nth-child(odd) td.vfix2{background:#f7fafd}
.vol-opp2 td.vopp-prod{white-space:normal;font-weight:600;line-height:1.15}
.vol-opp2 td.vopp-sku{font-size:10px}
/* chip da categoria "FORMATO ATUAL" (26/07/2026): NOME COMPLETO em até 2 linhas, fonte igual à
   da coluna PRODUTO (peso normal — o negrito incomodava), cor de fundo por família, clicável */
/* barra da categoria: fonte 20% menor que o PRODUTO, mas BARRA bem mais grossa */
.vol-opp2 .vlinha{display:block;padding:7px 6px;border-radius:6px;font-size:8.4px;font-weight:600;
  font-family:inherit;letter-spacing:0;white-space:normal;line-height:1.2;max-width:100%}
.vol-opp2 .vlinha-cli{cursor:pointer}
.vol-opp2 .vlinha-cli:hover{filter:brightness(1.12);text-decoration:underline}
.vol-opp2 .vopp-foto{text-align:center;width:44px;min-width:44px}
/* linha de TOTAL / campo total (filtros ▾, buscas 🔎, somas) — azul INTERMEDIÁRIO:
   mais escuro que as linhas da planilha, mais claro que o cabeçalho */
.vol-opp2 .vopp-total th{background:#BFD5EE;padding:2px 5px;font-size:10px;border-bottom:2px solid #9DBBE2}
.vol-opp2 .vopp-total th.vfix1,.vol-opp2 .vopp-total th.vfix2{background:#BFD5EE}
.vol-opp2 .vopp-tf .rvm-cq{width:100%;min-width:52px}
.vol-opp2 .vopp-tsum{text-align:center;font-weight:700;color:var(--txt);white-space:nowrap}
/* números dos totais em retângulo BRANCO (tipo campo de busca) com borda inferior no azul do cabeçalho */
.vol-opp2 .vopp-tot{display:inline-block;font-style:normal;background:#fff;border:1px solid #D3DFEF;
  border-bottom:2px solid #173a68;border-radius:7px;padding:1px 8px 2px;min-width:44px}
html[data-theme="dark"] .vol-opp2 .vopp-tot{background:#0F1620;border-color:#31517F;border-bottom-color:#4E93DE}
.vol-opp2 .vopp-csort{cursor:pointer}.vol-opp2 .vopp-csort:hover{color:var(--teal-d)}
.vol-opp2 .vopp-dot{color:var(--soft)}
/* colunas de cliente HORIZONTAIS */
/* nome do cliente quebra SÓ NO ESPAÇO (GUANABARA RJ vira 2 linhas; ATACADAO fica inteiro e a
   coluna abre o quanto a palavra precisar — nada de partir palavra no meio) */
.vol-opp2 th.vopp-clih{text-align:center;font-size:9.5px;font-weight:700;padding:5px 5px;min-width:58px;max-width:88px;
  white-space:normal;line-height:1.15;word-break:keep-all;overflow-wrap:normal;hyphens:none;vertical-align:bottom}
.vol-opp2 th.vopp-cliexp{cursor:pointer}.vol-opp2 th.vopp-cliexp:hover{filter:brightness(1.14)}
.vol-opp2 th.vopp-cliso{cursor:pointer;color:#8FC7FF}
.vopp-plus{display:inline-block;background:#fff;color:#173a68;border-radius:4px;font-weight:900;padding:0 4px;font-size:10px;line-height:15px}
/* OPP em destaque + célula vermelha sem venda (sem bolinha) — !important p/ vencer a zebra dos temas */
.vol-opp2 th.vopp-opp{background:#173a68}
.vol-opp2 td.vopp-opp{background:rgba(46,107,176,.12) !important;text-align:center;white-space:nowrap}
.vol-opp2 .vopp-total th.vopp-opp{background:#AECBEC !important;text-align:center;white-space:nowrap}
.vol-opp2 td.vopp-opp b{color:var(--teal-d);font-size:11.5px}
.vol-opp2 td.vopp-has{color:var(--txt);text-align:center}
/* célula VERMELHA = cliente não compra o item; o número é o INCREMENTO se cadastrar —
   em dourado claro e ITÁLICO (leve, sem competir com o vermelho) */
.vol-opp2 td.vopp-no{background:#C00000 !important;min-width:54px;padding:1px 3px;text-align:center}
.vol-opp2 td.vopp-no i{color:#F2D399;font-size:10px;font-style:italic;font-weight:400;font-variant-numeric:tabular-nums}
/* NOVO (1ª compra recente) e REATIVOU (voltou depois de 6+ meses) — destaque positivo */
.vol-opp2 td.vopp-novo{background:#E8F5EC !important}
/* OPP em VERDE = item ja CADASTRADO no grupo, falta so ATIVAR na regional */
.vol-opp2 td.vopp-opp-cad{background:#E8F5EC !important}
.vol-opp2 td.vopp-opp-cad b{color:#1E7F46}
.vol-opp2 td.vopp-opp-cad em{display:block;font-style:normal;font-size:9px;color:#1E7F46;opacity:.85;line-height:1.1}
html[data-theme="dark"] .vol-opp2 td.vopp-opp-cad{background:#14301F !important}
html[data-theme="dark"] .vol-opp2 td.vopp-opp-cad b,
html[data-theme="dark"] .vol-opp2 td.vopp-opp-cad em{color:#5FCF8E}
.vol-opp2 td.vopp-reat{background:#EAF1FB !important}
.vol-opp2 td.vopp-has em{display:block;font-style:normal;font-size:7.5px;font-weight:800;letter-spacing:.04em;line-height:1.1;margin-top:-1px}
.vol-opp2 td.vopp-novo em{color:#1E7F46}
.vol-opp2 td.vopp-reat em{color:#1D4E8F}
html[data-theme="dark"] .vol-opp2 td.vopp-novo{background:#14301F !important}
html[data-theme="dark"] .vol-opp2 td.vopp-reat{background:#16263D !important}
/* share/caixas: 2ª linha discreta dentro da célula */
.vol-opp2 td u{display:block;text-decoration:none;font-size:8.5px;color:var(--mut);font-weight:600;line-height:1.15}
/* DELIST invertido: quem NÃO tem fica vazio; quem tem fica amarelo com "SUBSTITUIR" */
.vol-opp2 td.vopp-vazio{background:transparent}
.vol-opp2 td.vopp-subst{background:#FDF3D4 !important;color:#7a5f16}
.vol-opp2 td.vopp-subst em{display:block;font-style:italic;font-size:7.5px;font-weight:700;color:#9a7a1e;line-height:1.1}
html[data-theme="dark"] .vol-opp2 td.vopp-subst{background:#3A2F12 !important;color:#F0D89B}
/* 2ª linha do total por cliente: itens ativos (fixo, 6m + mês atual) */
.vol-opp2 .vopp-at{display:block;font-style:normal;font-size:8.5px;font-weight:600;color:var(--mut);margin-top:1px}
/* cliente que já compra 100% da seleção */
.vol-opp2 .vopp-ok{background:#E8F5EC;border-color:#B6DFC5;border-bottom-color:#1E7F46;color:#1E7F46;font-weight:800;font-size:9.5px}
/* botões de métrica no rodapé da tabela */
.vopp-metricas{display:flex;gap:6px;margin:8px 0 2px}
html[data-theme="dark"] .vol-opp2 td.vfix1,html[data-theme="dark"] .vol-opp2 td.vfix2{background:#0F1620}
html[data-theme="dark"] .vol-opp2 tbody tr:nth-child(odd) td.vfix1,html[data-theme="dark"] .vol-opp2 tbody tr:nth-child(odd) td.vfix2{background:#141C28}
html[data-theme="dark"] .vol-opp2 .vopp-total th{background:#24385C;border-bottom-color:#31517F}
html[data-theme="dark"] .vol-opp2 .vopp-total th.vfix1,html[data-theme="dark"] .vol-opp2 .vopp-total th.vfix2{background:#24385C}
html[data-theme="dark"] .vol-opp2 td.vopp-opp{background:rgba(62,155,230,.16) !important}
html[data-theme="dark"] .vol-opp2 .vopp-total th.vopp-opp{background:#2E4A78 !important}
html[data-theme="dark"] .vol-opp2 td.vopp-no{background:#D33125 !important}

/* ===== BANNER de potencial do GRUPO ATIVO (1 card achatado full-width, cantos todos arredondados) ===== */
.vopp-cards{margin:2px 0 12px}
/* card BAIXO: sem fotos, com as informações lado a lado */
.vopp-card{position:relative;display:flex;align-items:center;gap:18px;width:100%;min-height:58px;
  border-radius:14px;padding:8px 18px;color:#fff;cursor:pointer;overflow:hidden;
  box-shadow:0 10px 24px -12px rgba(10,26,56,.45);transition:transform .14s,box-shadow .14s}
.vopp-card:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(10,26,56,.55)}
/* nome · valor · texto na MESMA LINHA: alinhados À ESQUERDA (margem) e centrados na vertical */
.vopp-card-info{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:16px;flex-wrap:wrap}
.vopp-card-nome{font-size:27px;font-weight:800;letter-spacing:.02em;white-space:nowrap;text-shadow:0 2px 6px rgba(0,0,0,.3)}
.vopp-card-val{font-size:27px;font-weight:800;letter-spacing:-.01em;line-height:1.1;text-shadow:0 2px 6px rgba(0,0,0,.3)}
.vopp-card-sub{font-size:11px;opacity:.85}
/* bloco do CLIENTE selecionado (logo se existir + qtde de itens que faltam do mix ativo) */
.vopp-card-cli{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.vopp-card-logo{max-height:34px;max-width:96px;object-fit:contain;background:#fff;border-radius:8px;padding:3px 7px}
/* "faltam X de N itens" (só com CLIENTE selecionado): é uma OPORTUNIDADE, não um erro —
   fundo branco, BORDA DOURADA e fonte AZUL */
.vopp-card-falta{background:#fff;color:#0E2C58;border:2px solid #D4AF37;font-weight:800;font-size:10.5px;
  border-radius:9px;padding:4px 11px;white-space:nowrap;box-shadow:0 4px 10px -5px rgba(0,0,0,.35)}
.vopp-card-falta b{font-size:12.5px;color:#0E2C58}
/* (o line-up de fotos saiu do card em 26/07/2026 — card mais baixo, informações lado a lado) */
/* CARD DO DELIST: amarelo com texto AZUL — MESMA ALTURA/LAYOUT dos outros grupos
   (o recado de negócio virou uma frase no subtítulo; o parágrafo dobrava a altura) */
.vopp-card-del{color:#0E2C58;border:2px solid #D4AF37}
.vopp-card-del .vopp-card-val{text-shadow:none}
.vopp-card-del .vopp-card-sub{opacity:1;color:#1D4E8F}

/* ===== EVOLUÇÃO DE CADASTROS (2 anos) — uma faixa por UF, estilo Scanntech ===== */
.vevo-leg{display:flex;gap:14px;margin:2px 0 8px;font-size:10.5px;color:var(--mut)}
.vevo-leg i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}
/* leitura do cliente: pontos fortes (verde) antes das oportunidades (dourado) */
.vevo-diag{font-size:11.5px;line-height:1.6;border-radius:10px;padding:8px 12px;margin:6px 0}
.vevo-diag .vd-tit{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.vevo-fortes{background:#EAF6EE;border-left:4px solid #2e9e63}
.vevo-fortes .vd-tit{color:#1E7F46}
.vevo-opor{background:#FCF6E6;border-left:4px solid #D4AF37}
.vevo-opor .vd-tit{color:#8a6d1d}
.vd-up{color:#1E7F46}.vd-dn{color:#cc4b41}
html[data-theme="dark"] .vevo-fortes{background:#14301F}
html[data-theme="dark"] .vevo-opor{background:#332911}
html[data-theme="dark"] .vd-up{color:#5FD08A}
.vevo-linha{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line2);padding:5px 0}
.vevo-uf{flex:0 0 92px;font-size:11px;line-height:1.25}
.vevo-uf b{display:block;font-size:12px}
.vevo-uf span{color:var(--soft);font-size:9.5px}
.vevo-svg{flex:1;min-width:0;height:132px}
.vevo-fim{flex:0 0 54px;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.vevo-fim i{font-style:normal;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}

/* selo 🏆 Mix Campeão à direita: AZUL ESCURO com fonte DOURADA */
.vopp-card-tag{flex:0 0 auto;display:flex;align-items:center;gap:10px;background:#0E2C58;color:#D4AF37;
  border:2px solid #D4AF37;border-radius:12px;padding:12px 18px;font-size:26px;line-height:1;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.vopp-card-tag span{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#D4AF37}

/* selo da curva de vendas — padrão de cores oficial da empresa (A→D azuis, DELIST vermelho) */
.curva{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 5px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.02em}
.c-A{background:#143350;color:#fff}
.c-B{background:#296BA7;color:#fff}
.c-C{background:#438DD1;color:#fff}
.c-D{background:#78ADDE;color:#fff}
.c-DELIST,.c-FL{background:#fff;color:#d0021b;border:1px solid #d0021b}  /* FL = fora de linha */
.c-LCT{background:#FFFF99;color:var(--txt);border:1px solid #E3D454}   /* lançamento: fundo amarelo, letra padrão */
.c-X{background:#f0f0f0;color:#7a848a}

/* tabelas do Dashboard (rankings ricos) */
.dash-tab tr.dlin{cursor:pointer}
.dash-tab tr.dlin:hover td{background:#e4efee}
.dash-tab tr.dlin.on td{background:#e2f0ef;font-weight:600;border-bottom-color:var(--teal)}
.dash-tab tr.dlin.on td:first-child{box-shadow:inset 3px 0 0 var(--teal-d)}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow)}
.card h3{font-size:12.5px;letter-spacing:.08em;color:var(--txt);text-transform:uppercase;font-weight:700;
  margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h3::before{content:"";width:7px;height:7px;background:var(--teal);transform:rotate(45deg);border-radius:1.5px}
.card h3 .rg{margin-left:auto;font-size:10.5px;color:var(--soft);letter-spacing:.04em;text-transform:none;font-weight:600}
.duo{grid-template-columns:2fr 1fr} .trio{grid-template-columns:1fr 1fr 1fr}
/* meio a meio (o .duo padrao e 2fr 1fr). Fica ANTES do @media de 860px de proposito:
   la o .grid.duo empilha e vence esta por vir depois, com a mesma especificidade. */
.duo-meio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.duo-meio.uma-col{grid-template-columns:minmax(0,1fr)}
.gap14{height:14px}

/* tabelas */
.twrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:11.5px}
th{background:linear-gradient(180deg,var(--aqua),var(--teal-d));color:#fff;font-size:10.5px;
  letter-spacing:.03em;text-align:center;text-transform:uppercase;   /* títulos SEMPRE maiúsculos e CENTRALIZADOS */
  padding:4.5px 9px;font-weight:700;white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.35)}
th:last-child{border-right:0}
th:first-child{border-radius:8px 0 0 8px}
th:last-child{border-radius:0 8px 8px 0}
td{padding:3.5px 9px;border-bottom:1px solid var(--line2);line-height:1.35}
tbody tr:hover td{background:#e4efee}
/* zebra padrão (linha sim/linha não) nas tabelas de dados; linhas especiais (totais,
   detalhes, alertas, blocos do sell-out) ficam de fora. :where() zera a especificidade
   dos :not p/ não atropelar cores de linhas destacadas. */
.fat-tab:not(.so-evtab) tbody :where(tr:nth-child(odd):not(.fat-total):not(.nf-det):not(.cart-det):not(.ent-crit):not(.ent-aten):not(.mat-fam):not(.bsk-cov))>td,
.dash-tab tbody :where(tr:nth-child(odd):not(.on))>td{background:#f3f8f7}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
/* coluna CENTRALIZADA: número curto e rótulo lêem melhor no centro que grudados na borda */
td.c,th.c{text-align:center;font-variant-numeric:tabular-nums}

/* ══ CABEÇALHO DE COLUNA É SEMPRE CENTRALIZADO ══════════════════════════════════════════════
   Padrão do Book (Fernando, 30/08/2026 — e não foi a primeira vez que ele teve de sinalizar).
   A regra vive AQUI, no CSS, e não na classe que cada tabela escolhe: enquanto dependia de eu
   lembrar de marcar a coluna, sempre escapava uma tabela nova com o título grudado na borda.
   Vale só para o TÍTULO — o conteúdo continua obedecendo .l / .c / .r de cada coluna. */
.fat-tab thead th, .sim-tab thead th, .rvm-tab thead th, .so-tab thead th{text-align:center}
/* a linha de FILTRO abaixo do cabeçalho não é título: o campo ocupa a célula inteira */
.fat-tab thead tr.ent-qrow th, .fat-tab thead tr.so-fil th{text-align:left}

/* ══ TUDO QUE CLICA MOSTRA A MÃOZINHA ═══════════════════════════════════════════════════════
   Faseamento (Fernando, 30/08/2026): os cards e as linhas do ranking funcionavam no clique,
   mas o ponteiro continuava seta — a pessoa não descobria que dava para clicar. No Dashboard
   isso já funcionava porque o .kpi.klick tem a regra; aqui os elementos são outros.
   A regra é pelo ATRIBUTO, não pela classe: qualquer elemento novo que ganhe um desses
   data-* nasce clicável aos olhos, sem eu precisar lembrar do CSS. */
[data-goran],[data-gopos],[data-goent],[data-rkger],[data-rkvend],[data-rkcli],[data-rmodo],
[data-entmes],[data-entbk],[data-nfc],[data-nft],[data-cord]{cursor:pointer}
[data-rkger]:hover,[data-rkvend]:hover{background:var(--line2)}
td b{font-weight:650}
.bar{height:8px;background:var(--line2);border-radius:20px;overflow:hidden;min-width:100px}
.bar i{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--aqua),var(--teal-d))}
.bar i.gold{background:linear-gradient(90deg,#e8c477,var(--acafrao))}
.bar i.red{background:linear-gradient(90deg,#e08a80,var(--bad))}

.pill{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:3.5px 11px;
  font-size:11px;font-weight:700;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.p-ok{background:var(--ok-bg);color:var(--ok)} .p-warn{background:var(--warn-bg);color:var(--warn)}
.p-val{background:var(--val-bg);color:var(--val)} .p-bad{background:var(--bad-bg);color:var(--bad)}

.spark{display:flex;align-items:flex-end;gap:2.5px;height:26px}
.spark i{width:9px;background:linear-gradient(180deg,var(--aqua),var(--teal-d));border-radius:2.5px 2.5px 0 0;display:block}
.spark i.z{background:#dbe2e4;height:3px!important}

.rk{list-style:none}
.rk li{display:flex;align-items:center;gap:11px;padding:8.5px 0;border-bottom:1px solid var(--line2);font-size:12.8px}
.rk li:last-child{border-bottom:0}
.rk .n{width:24px;height:24px;flex:none;border-radius:8px;background:var(--line2);color:var(--mut);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.rk li:nth-child(1) .n{background:linear-gradient(135deg,#f3d38a,var(--acafrao));color:#4a3607}
.rk li:nth-child(2) .n{background:#e6ebec;color:#5c6a70}
.rk li:nth-child(3) .n{background:#f0dfd0;color:#8a5a34}
.rk .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:550}
.rk .sb{display:block;font-size:10.5px;color:var(--soft);font-weight:400}
.rk .vl{font-variant-numeric:tabular-nums;font-weight:700}

.view{display:none}.view.on{display:block}
.leg{display:flex;gap:16px;font-size:11.5px;color:var(--mut);margin-top:10px;flex-wrap:wrap}
.leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.note{background:linear-gradient(135deg,#fdf7ec,#fbf3e2);border:1px solid #f0e2c4;border-radius:12px;
  padding:11px 15px;font-size:12.5px;color:#6b5620;margin-top:14px}

/* controles de tabela */
.tctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.tctl input{background:#f6f8f8;border:1px solid var(--line);border-radius:9px;padding:8px 12px;
  font-size:13px;min-width:220px;outline:none}
.tctl input:focus{border-color:var(--teal)}
.fchip{background:#f2f5f5;border:1px solid var(--line);color:var(--mut);border-radius:20px;
  padding:6px 13px;font-size:11px;font-weight:600;cursor:pointer}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.more{display:block;margin:14px auto 2px;background:#f2f5f5;border:1px solid var(--line);color:var(--mut);
  border-radius:9px;padding:9px 22px;font-size:12.5px;font-weight:700;cursor:pointer}
.more:hover{color:var(--teal-d);border-color:var(--teal)}
.empty{color:var(--soft);font-size:13px;text-align:center;padding:22px}

/* tabela Faturamento (drill-down UF) */
/* rankings do Dashboard e Top 20: colunas numéricas (de 2025 em diante) CENTRALIZADAS */
.dash-tab th.r,.dash-tab td.r{text-align:center}
#fat-conteudo .fat-tab th.r,#fat-conteudo .fat-tab td.r{text-align:center}
/* MAPA DO BRASIL geográfico: SVG dos 27 estados coloridos pela % de representatividade
   no faturamento — hover realça, clique filtra a página, rótulo UF+% com halo p/ leitura */
.mapa-br{max-width:520px;margin:0 auto}
.mapa-br svg{width:100%;height:auto;display:block}
.mapa-br svg path{stroke:#fff;stroke-width:1.1;cursor:pointer;transition:filter .12s,opacity .3s}
.mapa-br svg path:hover{filter:brightness(.85)}
.mapa-br svg path.on{stroke:var(--teal-d);stroke-width:2.6}
.mapa-zoomout{color:var(--teal-d);font-weight:800;cursor:pointer;text-decoration:underline;white-space:nowrap}
.mapa-cid{margin-top:8px;border-top:1px solid var(--bd);padding-top:8px}
.mapa-cid-h{font-size:11px;color:var(--mut);font-weight:700;margin-bottom:6px}
.mapa-cid-h .rg{font-weight:400;color:var(--soft);font-size:10px}
.mapa-cid-row{display:flex;align-items:center;gap:8px;font-size:11px;margin:3px 0}
.mapa-cid-row .nm{width:150px;flex:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.mapa-cid-row .nm small{color:var(--soft)}
.mapa-cid-row .bar{flex:1;height:9px;background:var(--line);border-radius:5px;overflow:hidden}
.mapa-cid-row .bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--aqua,#4f9aa0),var(--teal-d))}
.mapa-cid-row b{width:44px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.mapa-cid-mais{font-size:10px;color:var(--soft);margin-top:5px;text-align:center}
.mapa-rot{font-family:inherit;font-size:11px;font-weight:800;text-anchor:middle;fill:#16294A;
  paint-order:stroke;stroke:#fff;stroke-width:2.6px;stroke-linejoin:round;pointer-events:none}
.mapa-rot.claro{fill:#fff;stroke:rgba(15,30,60,.6)}
.mapa-leg{display:flex;align-items:center;gap:6px;justify-content:center;font-size:9.5px;
  color:var(--soft);margin-top:6px}
.mapa-leg i{width:34px;height:8px;border-radius:4px;display:inline-block;
  background:linear-gradient(90deg,rgba(29,78,143,.08),rgba(29,78,143,.95))}
.fat-tab th.ord{cursor:pointer;user-select:none}
.fat-tab th.ord:hover{color:var(--aqua-l)}
.fat-tab th.ord-on{color:var(--creme)}
/* Sell-out: linha de filtro logo abaixo do cabeçalho (busca ou multi-seleção) */
.fat-tab tr.so-fil th{background:var(--ink-b);padding:4px 8px;cursor:default}
.fat-tab tr.so-fil th .f-per{vertical-align:middle}
.so-filb{height:24px;border:1px solid var(--bd);border-radius:6px;padding:0 8px;font-size:11.5px;
  font-family:inherit;width:230px;background:#fff;color:var(--ink)}
.so-filb:focus{outline:none;border-color:var(--teal-d)}
.so-filbtn{font-size:11px}
.so-filbtn.on{border-color:var(--acafrao);color:var(--acafrao);font-weight:700}
tr.so-hid{display:none}

/* Positivados: classificação em camadas — o nº no cabeçalho diz em que nível a coluna entra */
.pq-ordn{font-size:9px;font-weight:800;background:var(--creme);color:var(--ink);
  border-radius:6px;padding:0 3px;margin:0 2px 0 3px;vertical-align:super;line-height:12px}
.pq-ordchip{display:inline-flex;align-items:center;gap:4px;cursor:pointer;padding-right:4px}
.pq-ordchip b{font-size:9px;font-weight:800;background:rgba(255,255,255,.28);
  border-radius:6px;padding:0 4px;line-height:13px}
.pq-ordx{font-style:normal;font-size:11px;opacity:.65;padding:0 2px;border-radius:4px}
.pq-ordx:hover{opacity:1;background:rgba(255,255,255,.3)}
.fat-tab tr.fat-total td{background:var(--ink);color:#fff;font-weight:700;border-top:2px solid var(--teal)}
.fat-tab tr.fat-total td:first-child{border-radius:0 0 0 8px}
.fat-tab tr.fat-total td:last-child{border-radius:0 0 8px 0}
.fat-tab tr.fat-total .farolp{background:rgba(255,255,255,.15);color:#fff}
.fat-tab tr.fat-cli{cursor:pointer}
.fat-tab td:nth-child(2){white-space:nowrap}  /* nome do cliente nunca quebra linha */
.fat-tab tr.fat-cli:hover td{background:#e4efee}
/* alerta de cliente sem compra no mês de referência (regra dia 14/15) — só o NOME fica vermelho */
.fat-tab tr.fat-alerta .fat-clinome{color:var(--bad)}
.fat-tab .fat-exp{display:inline-block;width:24px;font-size:19px;line-height:1;vertical-align:middle;color:var(--teal-d);cursor:pointer}
.fat-tab td.qi6c{cursor:pointer}
.fat-tab td.qi6c:hover{color:var(--teal-d);text-decoration:underline;font-weight:700}
.fat-tab .spark{height:18px;gap:2px}
.fat-tab .spark i{width:7px}
.fat-tab .spark i.z{background:rgba(139,29,19,.3)}   /* mês sem compra: vermelho escuro discreto */
.fat-total .spark i.z{background:rgba(255,120,105,.4)}
.fat-tab tr.fat-uf td{background:#fafcfc;font-size:12px;border-bottom:1px solid var(--line2)}
.fat-clinome{cursor:pointer;border-bottom:1px dotted transparent}
.fat-clinome:hover{color:var(--teal-d);border-bottom-color:var(--teal-d)}
.fat-tab tr.fat-on td{background:#e6f0ef}
/* Top 20 Clientes: congela as colunas # e CLIENTE ao abrir os 6 meses (rolagem horizontal).
   sticky em célula de tabela exige border-collapse:separate (collapse bloqueia no Chrome) */
#fat-conteudo .fat-tab{border-collapse:separate;border-spacing:0}
#fat-conteudo .fat-tab th:nth-child(1),#fat-conteudo .fat-tab td:nth-child(1){position:sticky;left:0;z-index:2;width:34px;min-width:34px}
#fat-conteudo .fat-tab th:nth-child(2),#fat-conteudo .fat-tab td:nth-child(2){position:sticky;left:34px;z-index:2;box-shadow:3px 0 5px -3px rgba(24,58,63,.18)}
#fat-conteudo .fat-tab td:nth-child(1),#fat-conteudo .fat-tab td:nth-child(2){background:#fff}
#fat-conteudo .fat-tab tr:nth-child(odd):not(.fat-total) td:nth-child(1),#fat-conteudo .fat-tab tr:nth-child(odd):not(.fat-total) td:nth-child(2){background:#f3f8f7}   /* colunas congeladas acompanham a zebra */
#fat-conteudo .fat-tab th:nth-child(1),#fat-conteudo .fat-tab th:nth-child(2){z-index:3}
#fat-conteudo .fat-tab tr.fat-cli:hover td:nth-child(1),#fat-conteudo .fat-tab tr.fat-cli:hover td:nth-child(2){background:#e4efee}
#fat-conteudo .fat-tab tr.fat-uf td:nth-child(1),#fat-conteudo .fat-tab tr.fat-uf td:nth-child(2){background:#fafcfc}
#fat-conteudo .fat-tab tr.fat-total td:nth-child(1),#fat-conteudo .fat-tab tr.fat-total td:nth-child(2){background:var(--ink)}
.farolp{display:inline-block;padding:2px 8px;border-radius:6px;font-weight:700;font-size:11.5px}
.farolp.cor-ok{background:var(--ok-bg);color:var(--ok)}
.farolp.cor-med{background:var(--warn-bg);color:var(--warn)}
.farolp.cor-bad{background:var(--bad-bg);color:var(--bad)}

.exp{color:var(--teal-d);border-color:rgba(79,154,160,.45)}
.exp:hover{color:#fff;background:var(--teal-d);border-color:var(--teal-d)}

/* ================= impressão / PDF ================= */
#print-head{padding:0 0 14px}
#print-head .ph-t{font-size:20px;font-weight:700;color:#183A3F}
#print-head .ph-s{font-size:12px;color:#64737a;margin-top:3px}
#print-head .ph-b{height:4px;width:180px;background:linear-gradient(90deg,#183A3F,#74AFAE);border-radius:4px;margin-top:8px}
@media print{
  @page{size:A4 landscape;margin:12mm}
  body{background:#fff}
  header.top,aside,.topbar,.tctl,.more,#gate,.foot,.mockbar{display:none!important}
  main{margin:0!important;padding:0!important;max-width:none!important}
  #print-head{display:block!important}
  .card,.kpi{box-shadow:none!important;border:1px solid #d5dcde;break-inside:avoid}
  .kpi:hover{transform:none}
  h2.pg,.sub{display:none}
  .grid.duo,.grid.trio{grid-template-columns:1fr 1fr}
  a{text-decoration:none;color:inherit}
}
/* ---------- CELULAR (até 860px): menu lateral vira GAVETA (botão ☰), conteúdo ocupa a
   tela toda, grades empilham e as tabelas largas rolam de lado com o dedo ---------- */
#menu-burger,#menu-veu{display:none}
@media(max-width:860px){
  aside{top:0;bottom:0;left:-240px;z-index:85;transition:left .22s ease;
    overflow-y:auto;box-shadow:8px 0 28px rgba(5,15,35,.35)}
  body.menu-aberto aside{left:0}
  #menu-burger{position:fixed;top:8px;left:8px;z-index:90;width:40px;height:36px;border-radius:10px;
    background:var(--ink);border:1px solid rgba(255,255,255,.3);display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:4px;cursor:pointer;box-shadow:0 4px 14px rgba(5,15,35,.35)}
  #menu-burger span{width:17px;height:2px;background:#fff;border-radius:2px;display:block}
  body.menu-aberto #menu-veu{display:block;position:fixed;inset:0;background:rgba(8,18,40,.5);z-index:80}
  main{margin-left:0;padding:52px 10px 96px;max-width:none}
  body.fs main{margin-left:0}
  .topbar{gap:5px;padding:8px}
  h2.pg{font-size:17px}
  .sub{font-size:11px}
  .card{padding:12px;border-radius:12px}
  .grid.duo,.grid.trio,.rvm-grupos{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .foot{left:0;height:auto;min-height:37px;flex-wrap:wrap;padding:5px 8px;gap:5px}
  .foot-info{width:100%;order:-1;font-size:10px}
  #hscroll{display:none!important}          /* no toque a rolagem é nativa */
  .perpanel,.dd-panel{width:min(300px,88vw)}
  #rvm-cfpop{width:min(260px,84vw)}
  .dd-btn{max-width:130px}
  .mapa-br{max-width:100%}
  .tctl input{min-width:130px}
  .chip{margin-left:0}
  /* GRÁFICOS: no telefone cabem INTEIROS na tela em vez de rolar de lado. O JS já escolhe o
     desenho compacto, mas esta regra é a rede de segurança — pega o gráfico que já estava na
     tela quando o aparelho é GIRADO, sem precisar redesenhar. (Fernando, 13/08/2026) */
  .chart-scroll{overflow-x:visible}
  .chart-scroll svg{width:100%!important;height:auto}
  .vevo-svg{height:110px}
}

/* ---------- JBP · Revisão de Mix ---------- */
.rvm-scards{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 8px}
.rvm-scard{flex:1;min-width:104px;background:var(--card);border:1px solid var(--bd);border-radius:10px;
  padding:3px 11px 4px;cursor:pointer;user-select:none;border-left:4px solid var(--soft);box-shadow:var(--shadow)}
.rvm-scard b{display:block;font-size:14px;line-height:1.15;color:var(--txt)}
.rvm-scard span{display:block;font-size:9px;line-height:1.3;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);font-weight:700}
.rvm-scard.on{outline:2px solid var(--teal-d);outline-offset:-1px}
.rvm-scard[data-f="EMLINHA"]{border-left-color:var(--teal)}
/* cards de AÇÃO: paleta anterior + ícone GRANDE à esquerda; rótulo e número alinhados após o ícone */
.rvm-scard[data-f="MANTER"]{border-left-color:#7A93B8}
.rvm-scard[data-f="REATIVAR"]{border-left-color:#F2B800}
.rvm-scard[data-f="SUBSTITUIR"]{border-left-color:#E8C84D}
.rvm-scard[data-f="CADASTRAR"]{border-left-color:var(--ok)}
.rvm-scard.ic{display:flex;align-items:center;gap:8px}
.rvm-cico{width:18px;height:18px;flex:0 0 18px}
.rvm-scard[data-f="MANTER"] .rvm-cico{color:var(--teal-d)}
.rvm-scard[data-f="REATIVAR"] .rvm-cico{color:#D9A800}
.rvm-scard[data-f="SUBSTITUIR"] .rvm-cico{color:#C99700}
.rvm-scard[data-f="CADASTRAR"] .rvm-cico{color:var(--ok)}
.rvm-tab th,.rvm-tab td{text-align:center;white-space:nowrap}
.rvm-tab td{font-size:10px}                                   /* linhas padronizadas em 10px */
.rvm-tab td.rvm-prod{text-align:left;font-weight:600}         /* sem quebra de linha */
/* categoria em CHIP retangular arredondado (cores das linhas mantidas) */
.rvm-catchip{display:inline-block;padding:2.5px 10px;border-radius:7px;font-size:9px;
  font-weight:800;letter-spacing:.04em;white-space:nowrap}
/* EAN oculta na tela (economiza largura); volta a aparecer no PDF e na impressão */
.rvm-tab .rvm-ean{display:none}
.rvm-semint .rvm-ean{display:table-cell}
@media print{ #v-revmix .rvm-ean{display:table-cell} }
.rvm-tab img.vfoto{height:20px;max-width:40px;object-fit:contain;vertical-align:middle}
.rvm-tab td{padding-top:2.5px;padding-bottom:2.5px}   /* linha compacta ~26px (foto 20px é o piso) */
/* cabeçalho de filtros da guia mais baixo (~30%): card enxuto e controles de 24px */
#v-revmix > .card{padding:10px 16px}
#v-revmix > .card .tctl{margin-bottom:0}
#v-revmix > .card .fchip{padding:3px 11px}
/* FAROL da última compra (meses fechados): bolinha + texto na cor do estágio, fundo
   translúcido da mesma cor — 🟢 até 2 meses · 🟡 +2 · 🟠 +3 · 🔴 +6 */
.rvm-ult{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;
  font-weight:400;white-space:nowrap;line-height:1.2}
.rvm-ult::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px}
.rvm-ult.u1{color:#157A3C;background:rgba(29,158,80,.13)}
.rvm-ult.u2{color:#B8860B;background:rgba(226,165,57,.16)}
.rvm-ult.u3{color:#C65911;background:rgba(230,126,34,.14)}
.rvm-ult.u4{color:#A81E14;background:rgba(204,43,33,.13)}
/* grupos de cards lado a lado: CENÁRIO ATUAL (esq.) × PRÓXIMOS PASSOS (dir.),
   cada um com a barra fina navy em cima e os 4 cards abaixo */
.rvm-grupos{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:1100px){.rvm-grupos{grid-template-columns:1fr}}
.rvm-gbar{background:#12264F;color:#fff;font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;padding:3px 10px;border-radius:6px;margin:10px 0 7px}
html[data-theme="navy"] .rvm-gbar{background:#12264F}
/* avisinho de progresso dos downloads longos (PPT com uma visão por slide) */
#dl-prog{position:fixed;left:50%;bottom:56px;transform:translateX(-50%);z-index:120;display:none;
  background:var(--ink,#12233F);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:9px 20px;border-radius:22px;box-shadow:0 6px 22px rgba(5,15,35,.4)}
/* gráfico com rolagem horizontal própria (Evolução YTD): o SVG tem largura fixa e rola */
.chart-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:4px}
.chart-scroll svg{display:block}
/* cascata do bloco mensal do Sell-out: linhas de LOJA e PRODUTO inseridas sob demanda */
.so-ljname{padding-left:26px !important;font-size:10px;max-width:190px;white-space:normal}
.so-prname{padding-left:44px !important;font-size:9.5px;color:var(--mut);max-width:190px;white-space:normal}
/* cards de GRUPO DE PRODUTOS (Revisão de Mix): grupo + contagem por ação; clique filtra */
.rvm-gmcards{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.rvm-gmcard{flex:1;min-width:205px;background:var(--card);border:1px solid var(--bd);border-radius:10px;
  padding:5px 12px 7px;cursor:pointer;user-select:none;border-left:4px solid var(--soft);box-shadow:var(--shadow)}
.rvm-gmcard.on{outline:2px solid var(--teal-d);outline-offset:-1px}
.rvm-gmtop{display:flex;align-items:baseline;gap:7px}
.rvm-gmtop span{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.rvm-gmtop small{font-size:9px;color:var(--mut);font-weight:700}
.rvm-gmacoes{display:flex;gap:11px;flex-wrap:wrap;margin-top:4px}
.rvm-gmacoes span{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.rvm-gmacoes svg{width:12px;height:12px;flex:0 0 12px}
.rvm-gmacoes b{font-size:12.5px;color:var(--txt)}
.rvm-gmacoes .gm-MANTER svg{color:var(--teal-d)}
.rvm-gmacoes .gm-REATIVAR svg{color:#D9A800}
.rvm-gmacoes .gm-SUBSTITUIR svg{color:#C99700}
.rvm-gmacoes .gm-CADASTRAR svg{color:var(--ok)}
/* separador não-clicável dentro da janela do dropdown (option disabled) */
.dd-sep{font-size:9px;color:var(--soft);text-transform:uppercase;letter-spacing:.08em;
  padding:7px 9px 3px;border-top:1px dashed var(--bd);margin-top:5px}
/* busca dentro da janela do dropdown (ddProxy com opts.busca) */
.dd-busca{width:100%;height:26px;border:1px solid var(--bd);border-radius:7px;padding:0 8px;
  font-size:11px;margin-bottom:6px;background:#fff;color:var(--txt)}
/* linha de filtros sob o cabeçalho (busca 🔎 e seleção ▾ por coluna) — fundo BRANCO */
tr.rvm-qrow th{background:#fff;padding:3px 4px}
html[data-theme="navy"] tr.rvm-qrow th{background:#fff}
.rvm-cq{width:100%;min-width:52px;height:22px;border:1px solid var(--bd);border-radius:6px;
  padding:0 6px;font-size:10.5px;background:#fff;color:var(--txt)}
.rvm-cf{height:22px;min-width:34px;border:1px solid var(--bd);border-radius:6px;background:#fff;
  color:var(--mut);font-size:10px;cursor:pointer;font-weight:700}
.rvm-cf.on{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
#v-revmix .perbtn:disabled{opacity:.55;cursor:not-allowed}
#rvm-cfpop{position:fixed;z-index:120;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 14px 34px -12px rgba(0,0,0,.35);padding:8px;width:230px}
#rvm-cfpop .permeses{max-height:260px;overflow:auto;grid-template-columns:1fr}
/* PDF do card e impressão: esconde Últ. Compra / Média Mês / % Share (colunas de uso interno),
   a linha de filtros e a coluna "+" — o PDF vai para a reunião com o cliente */
.rvm-semint .rvm-int,.rvm-semint tr.rvm-qrow,.rvm-semint th.rvm-plus,.rvm-semint td.rvm-plusc{display:none}
@media print{
  #v-revmix .rvm-int,#v-revmix tr.rvm-qrow,#v-revmix th.rvm-plus,#v-revmix td.rvm-plusc{display:none}
}
/* AÇÃO: pill retangular (canto pouco arredondado) com ícone antes do texto —
   verde manter · amarelo reativar · laranja substituir · azul cadastrar */
.rvm-pill{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:98px;
  padding:2.5px 10px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.05em}
.rvm-pill svg{width:11px;height:11px;flex:0 0 11px}
.rvm-acao{cursor:pointer}
.rvm-acao:hover .rvm-pill{filter:brightness(.93)}
.rvm-pill.a-MANTER{background:var(--aqua-l);color:var(--teal-d)}
.rvm-pill.a-SUBSTITUIR{background:#FBEFB2;color:#6b5410}
.rvm-pill.a-REATIVAR{background:#FFD21E;color:#111}
.rvm-pill.a-CADASTRAR{background:var(--ok);color:#fff}   /* verde = o destaque dos próximos passos */
.rvm-pill.a-X{background:transparent;color:var(--soft);font-weight:600;min-width:60px}
.rvm-pill.editado{box-shadow:0 0 0 2px var(--teal-d)}   /* ação ajustada manualmente */
.rvm-informar{color:var(--bad);font-style:italic;font-weight:600;font-size:11px}
.rvm-tab th.rvm-plus{cursor:pointer;font-size:15px;min-width:26px;user-select:none}
.rvm-emlinha-s{color:var(--ok);font-weight:800}
.rvm-emlinha-n{color:#C0392B;font-weight:400}   /* NÃO em vermelho, sem negrito */
/* NA REDE: amarelo de ATENÇÃO — a rede tem o item, estas praças não. É ATIVAR, não cadastrar. */
.rvm-emlinha-r{color:#8A6100;background:#FFF3CD;border:1px solid #E9C46A;border-radius:5px;
  padding:1px 5px;font-weight:800;font-size:10px;white-space:nowrap;cursor:help}
.rvm-gmacoes .gm-ATIVAR svg{color:#D9A23A}
html[data-theme="dark"] .rvm-emlinha-r{color:#FFD98A;background:#4A3A12;border-color:#8A6A20}
/* RKG Itens: colunas justas — o cabeçalho pode quebrar; a largura segue o CONTEÚDO das linhas */
#v-curva .fat-tab th{white-space:normal;padding:3.5px 6px;font-size:9.5px;line-height:1.25;
  vertical-align:middle;max-width:86px}
#v-curva .fat-tab td{padding-left:6px;padding-right:6px}

/* ===== Positivação de Clientes por Vendedor (Visual 1 — relatório quinzenal por CNPJ) ===== */
.pq-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.pq-tit{margin:0;font-size:15px;color:var(--ink)}
.pq-obj{font-size:11.5px;color:var(--soft);margin-top:3px;font-style:italic}
.pq-quinz{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--mut);font-weight:700;flex:0 0 auto}
.pq-quinz button{border:1px solid var(--bd);background:#fff;border-radius:14px;padding:3.5px 13px;
  font-size:11.5px;font-weight:800;cursor:pointer;color:var(--mut);font-family:inherit}
.pq-quinz button.on{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.pq-cards{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.pqcard{flex:1 1 160px;min-width:160px;background:#eef4f3;border:1px solid var(--bd);border-left-width:5px;
  border-radius:9px;padding:7px 11px;cursor:pointer;transition:transform .1s,box-shadow .12s}
.pqcard:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.10)}
.pqcard.on{outline:2px solid var(--teal-d);outline-offset:-2px}
.pqcard span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:750}
.pqcard b{display:block;font-size:16px;margin-top:1px;color:var(--ink)}
/* resumo do card com MAIS destaque (a letra estava apagada — pedido do Fernando) */
.pqcard i{display:block;font-style:normal;font-size:11px;color:var(--txt);font-weight:650;margin-top:1px}
.pqcard i em{font-style:normal;font-weight:600;font-size:10px;color:var(--mut);margin-left:3px}
.pqcard.pq-g{border-left-color:#1D9E50}
.pqcard.pq-y{border-left-color:#E3B71A}
.pqcard.pq-o{border-left-color:#E8862E}
.pqcard.pq-r{border-left-color:#CC4B41}
.pq-headline{font-size:12px;color:var(--mut);margin:2px 0 8px}
.pq-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0}
.pq-dot.pq-g{background:#1D9E50}.pq-dot.pq-y{background:#E3B71A}.pq-dot.pq-o{background:#E8862E}.pq-dot.pq-r{background:#CC4B41}
.pqpill{display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:2.5px 8px;
  font-size:10px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.pqpill.pq-g{background:#DCF2E3;color:#14683A}
.pqpill.pq-y{background:#FBF3C8;color:#7A5E00}
.pqpill.pq-o{background:#FCE7D4;color:#9A4E12}
.pqpill.pq-r{background:#F9DBD7;color:#8B1D13}
.pq-tab{min-width:1080px}
/* realce da linha por recência (loja a loja): 2 meses → fonte vermelha + fundo amarelo claro · 3+ meses → fundo vermelho.
   !important vence a zebra gerada dos dois temas (clássico e navy) sem depender de especificidade */
.pq-tab tr.pq-rowo td{background:#FFF6D6!important;color:#B4232A}
.pq-tab tr.pq-rowr td{background:#F4B6B0!important;color:#7A1712}
.pq-tab tr.pq-rowo td b,.pq-tab tr.pq-rowr td b{color:inherit}
tr.pq-total td{background:#122A44;color:#fff;font-weight:700;border-top:2px solid #122A44}
.pq-nota{font-size:10.5px;color:var(--soft);font-style:italic;margin-top:6px}
@media(max-width:860px){.pq-top{flex-direction:column}.pqcard{min-width:calc(50% - 8px)}}

/* ===== Profundidade da Cesta — faixas clicáveis + drill-down (Análise Basket) ===== */
.bkbar{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:11.5px;cursor:pointer;
  padding:3px 6px;border-radius:7px;border:1px solid transparent;transition:background .1s,border-color .1s}
.bkbar:hover{background:#eef4f3}
.bkbar.on{background:#E7EEF6;border-color:#C2D2E4}
.bkbar .bkrot{width:46px;color:var(--mut);font-weight:700;flex:0 0 auto}
.bkbar .bar{flex:1}
.bkbar .bkval{width:150px;text-align:right;flex:0 0 auto;white-space:nowrap}
.bkbar .bkfat{display:inline-block;min-width:64px;margin-left:8px;color:var(--teal-d);font-weight:700}
.bk-tab{min-width:1000px}
tr.bkrow{cursor:pointer}
tr.bkrow:hover td{background:#f3f7f6}
tr.bkrow.on td{background:#E7EEF6}
.bkseta{color:var(--mut);font-size:10px}
.bkchips{max-width:340px}
.bkchip{display:inline-block;background:#eef2f4;border:1px solid var(--bd);border-radius:5px;
  padding:1px 6px;font-size:10px;color:var(--ink);margin:1px 0;white-space:nowrap}
.bkchip.a{background:#FFF1BF;border-color:#E7C65A;font-weight:700}   /* Curva A destacada */
.bkmore{color:var(--soft);font-size:10px;font-weight:700}
tr.bkdet td{background:#fafcfb;border-top:none}
.bkdetbox{padding:6px 4px;font-size:11px;line-height:1.9}
.relchip{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:2px 9px;font-size:10px;font-weight:800;white-space:nowrap}
.relchip.rel-a{background:#DCF2E3;color:#14683A}
.relchip.rel-m{background:#FBF3C8;color:#7A5E00}
.relchip.rel-b{background:#EEF1F3;color:#7A8790}

/* ===== Análise Basket · Visão por Produto (galeria Top 20 + detalhe) ===== */
.bp-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:9px;margin-top:4px}
.bp-card{display:flex;gap:9px;background:var(--card);border:1px solid var(--bd);border-radius:11px;padding:9px;
  position:relative;cursor:pointer;transition:transform .12s,box-shadow .12s}
.bp-card:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.10)}
.bp-card.sel{outline:2.5px solid var(--teal-d);outline-offset:-1px}
.bp-chk{position:absolute;top:7px;right:7px;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--bd);
  background:var(--card);display:grid;place-items:center;font-size:11px;color:transparent;z-index:2}
.bp-card.sel .bp-chk{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.bp-rank{position:absolute;top:7px;left:7px;z-index:2;min-width:20px;height:20px;font-size:10px;margin:0;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.bp-shot{width:56px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;background:#f3f6f8;
  border:1px solid var(--line);overflow:hidden;position:relative}
.bp-shot img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1}
.bp-shot .pkg{display:none}
.bp-shot.nofoto .pkg{display:block;width:32px;height:46px;border-radius:5px 5px 7px 7px;position:relative;
  background:linear-gradient(180deg,var(--tint,#5b7fb0),color-mix(in srgb,var(--tint,#5b7fb0) 68%,#000));
  box-shadow:inset 0 -6px 11px rgba(0,0,0,.16)}
.bp-shot.nofoto .pkg::after{content:"";position:absolute;left:4px;right:4px;top:16px;height:16px;background:rgba(255,255,255,.85);border-radius:2px}
.bp-info{flex:1;min-width:0;display:flex;flex-direction:column}
.bp-nm{display:flex;gap:6px;align-items:flex-start;padding-right:20px}
.bp-nm h4{margin:0;font-size:11.5px;line-height:1.18;color:var(--ink)}
.bp-blk{margin-top:6px}
.bp-blk-t{font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:var(--soft);font-weight:800;margin-bottom:1px}
.bp-row{font-size:10px;color:var(--mut);display:flex;justify-content:space-between;gap:6px;border-top:1px dotted var(--line);padding-top:2px}
.bp-row b{color:var(--ink);font-variant-numeric:tabular-nums} .bp-row b.hl{color:var(--teal-d)}
/* detalhe */
.bp-dhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0 12px;padding:12px 14px;border-radius:12px;
  background:linear-gradient(120deg,#1D4E8F,#143a6b);color:#fff}
.bp-dimg{width:46px;height:58px;object-fit:contain;background:#fff;border-radius:6px;padding:2px;flex:0 0 auto}
.bp-dhead h3{margin:0;font-size:16px} .bp-dhead .sub{font-size:11px;opacity:.85;margin-top:2px}
.bp-dkpis{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.bp-dkpis>div b{display:block;font-size:18px;line-height:1;font-variant-numeric:tabular-nums}
.bp-dkpis>div span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.05em;opacity:.8;margin-top:3px}
.bp-panels{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.bp-panels .panel{border:1px solid var(--bd);border-radius:12px;overflow:hidden;background:var(--card)}
.bp-panels .panel.wide{grid-column:1 / -1}
.bp-panels .ph{padding:9px 13px;font-size:12.5px;font-weight:800;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);color:var(--ink)}
.bp-panels .ph .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.bp-panels .ph .hint{margin-left:auto;font-size:10px;font-weight:600;color:var(--soft)}
.bp-panels .ph.opp{background:linear-gradient(90deg,rgba(29,158,80,.12),transparent)} .bp-panels .ph.opp .dot{background:var(--ok)}
.bp-panels .ph.prot{background:linear-gradient(90deg,rgba(47,125,124,.14),transparent)} .bp-panels .ph.prot .dot{background:var(--teal-d)}
.bp-panels .ph.reg{background:linear-gradient(90deg,rgba(29,78,143,.15),transparent)} .bp-panels .ph.reg .dot{background:#1D4E8F}
.bp-panels .ph .big{background:#1D4E8F;color:#fff;font-size:9px;font-weight:800;padding:2px 7px;border-radius:5px;letter-spacing:.05em}
.bp-panels table{width:100%;border-collapse:collapse;font-size:11.5px}
.bp-panels th,.bp-panels td{padding:6px 12px;text-align:left;white-space:nowrap}
.bp-panels th{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);font-weight:800;background:var(--panel,#f6f9fc);border-bottom:1px solid var(--bd)}
.bp-panels td{border-bottom:1px solid var(--line);color:var(--ink)} .bp-panels tr:last-child td{border-bottom:0}
.bp-panels td.r,.bp-panels th.r{text-align:right;font-variant-numeric:tabular-nums}
.bp-panels .cli{font-weight:700} .bp-panels .pot{font-weight:800;color:var(--ok)}
.bp-panels .up{color:var(--ok);font-weight:700} .bp-panels .down{color:var(--bad);font-weight:700}
.bp-panels .barcell{display:flex;align-items:center;gap:7px}
.bp-panels .minibar{height:7px;border-radius:4px;background:var(--line);flex:1;min-width:48px;overflow:hidden}
.bp-panels .minibar i{display:block;height:100%;border-radius:4px;background:#1D4E8F}
.bp-panels .frac{font-variant-numeric:tabular-nums;color:var(--mut);font-size:10.5px}
.bp-panels .callout{margin:0 12px 12px;border-left:4px solid #1D4E8F;background:var(--panel,#f6f9fc);border-radius:0 9px 9px 0;padding:10px 13px;font-size:12px}
@media(max-width:860px){.bp-gal{grid-template-columns:1fr}.bp-panels{grid-template-columns:1fr}.bp-dkpis{margin-left:0;width:100%;justify-content:space-between;gap:10px}}

/* Análise Basket · mix campeão (multi-seleção de produtos) */
.bp-mix{border:1.5px solid #1D4E8F;border-radius:13px;overflow:hidden;margin-top:4px}
.bp-mix-h{background:linear-gradient(120deg,#1D4E8F,#143a6b);color:#fff;padding:10px 14px;font-size:13px;font-weight:800}
.bp-mix-h .rg{font-weight:600;opacity:.8;font-size:10.5px;margin-left:6px}
.bp-mix-b{padding:13px 14px;background:var(--panel,#f6f9fc);display:flex;flex-direction:column;gap:9px}
.bp-step{display:grid;grid-template-columns:130px 1fr 118px;align-items:center;gap:12px}
.bp-step .lb{font-size:11.5px;font-weight:700;color:var(--ink)}
.bp-step .lb small{display:block;color:var(--soft);font-weight:600;font-size:10px}
.bp-step .track{height:22px;background:var(--line);border-radius:6px;overflow:hidden}
.bp-step .track i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--teal-d),#1D4E8F)}
.bp-step .vv{text-align:right;font-size:14px;font-weight:800;color:#1D4E8F;font-variant-numeric:tabular-nums}
.bp-kick{margin-top:4px;font-size:12px;color:var(--ink)} .bp-kick b{color:#1D4E8F}
@media(max-width:860px){.bp-step{grid-template-columns:92px 1fr 88px;gap:8px}}

/* Top 30 Produtos: miniatura da foto após o nome do produto */
.dash-tab .prod-foto{height:26px;max-width:34px;object-fit:contain;vertical-align:middle;display:inline-block}

/* ===== Basket 2.0 · Central de Cross-Selling (PR × OCS) ===== */
:root{--bk2pr:#2F6BB0;--bk2ocs:#D96B2B;--bk2mix:#7A5FA8}
html[data-theme="dark"]{--bk2pr:#4EA3E8;--bk2ocs:#F0894A;--bk2mix:#A78BE0}
.bk2-lbl{font-size:10px;letter-spacing:.08em;white-space:nowrap}
.bk2-kv{margin-left:auto;font-style:normal;font-size:9.5px;color:var(--soft);font-variant-numeric:tabular-nums}
.bk2-panel label.permes{display:flex;gap:7px}
.bk2-grid{display:grid;grid-template-columns:225px minmax(0,1fr) 225px;gap:14px;align-items:start}
@media(max-width:1100px){.bk2-grid{grid-template-columns:1fr}}
.bk2-side h3{margin-bottom:8px}
.bk2-gsel{font-size:11px;font-weight:700;color:var(--txt);margin:-4px 0 8px}
.bk2-met{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--mut);
  padding:3.5px 0;border-bottom:1px dotted var(--line)}
.bk2-met:last-child{border-bottom:0}
.bk2-met b{color:var(--txt);font-variant-numeric:tabular-nums;white-space:nowrap}
.bk2-venn{max-width:430px;margin:0 auto;display:block}
.bk2-venn [data-z]{cursor:pointer}
.bk2-venn circle.bk2-zon{stroke:var(--txt);stroke-width:2;stroke-dasharray:5 4}
.bk2-vn{font-size:24px;font-weight:800;text-anchor:middle;fill:var(--txt)}
.bk2-vs{font-size:10px;text-anchor:middle;fill:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.bk2-leg{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.bk2-leg button{border:1px solid var(--bd);border-left:4px solid var(--c,#888);background:var(--card);
  color:var(--mut);border-radius:8px;padding:4px 12px;font:inherit;font-size:10px;font-weight:800;cursor:pointer}
.bk2-leg button.on{background:var(--c);border-color:var(--c);color:#fff}
.bk2-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px}
.bk2-ec{background:var(--card);border:1px solid var(--bd);border-left:5px solid var(--c,#888);
  border-radius:11px;padding:8px 12px;box-shadow:var(--shadow)}
.bk2-ec[data-aba]{cursor:pointer}
.bk2-ec[data-aba]:hover{transform:translateY(-1px)}
.bk2-ec span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:750}
.bk2-ec b{display:block;font-size:17px;margin-top:1px;color:var(--txt)}
.bk2-ec i{display:block;font-style:normal;font-size:10px;color:var(--soft)}
.bk2-ec em{font-style:normal;cursor:help;color:var(--teal-d)}
.bk2-sim{display:flex;gap:22px;align-items:center;flex-wrap:wrap;font-size:12px}
.bk2-sim label{display:flex;flex-direction:column;gap:4px;font-size:10.5px;color:var(--mut);font-weight:700}
.bk2-sim input[type=range]{width:220px;accent-color:var(--bk2pr)}
.bk2-sim input[type=number]{width:110px;height:26px;border:1px solid var(--bd);border-radius:7px;
  padding:0 8px;font:inherit;font-size:12px;background:var(--card);color:var(--txt)}
.bk2-simout{font-size:13.5px;color:var(--txt);margin-left:auto}
.bk2-pri{display:inline-block;border-radius:6px;padding:2px 8px;font-size:9px;font-weight:800;letter-spacing:.04em}
.bk2-pri.pa{background:rgba(204,60,45,.15);color:var(--bad)}
.bk2-pri.pm{background:rgba(224,163,57,.16);color:var(--warn)}
.bk2-pri.pb{background:var(--line2);color:var(--soft)}
.bk2-score{font-weight:800;color:var(--teal-d);cursor:help;border-bottom:1px dotted var(--teal-d)}
.bk2-mot{max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;color:var(--mut)}
.bk2-tab{min-width:1150px}
.bk2-tab .prod-foto{height:24px;max-width:32px}
.bk2-rk{display:flex;align-items:center;gap:9px;font-size:12px;padding:5.5px 0;border-bottom:1px solid var(--line2)}
.bk2-rk:last-child{border-bottom:0}
.bk2-rk .n{width:20px;height:20px;flex:none;border-radius:6px;background:var(--line2);color:var(--mut);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.bk2-rk .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk2-rk b{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:11px}

/* ===== Venda mensal por KPI (evolutivo, conceito Scanntech, fim do Dashboard) ===== */
.dm-tab{min-width:1950px;border-collapse:separate;border-spacing:0}   /* 24 meses + coluna KPI */
.dm-tab th,.dm-tab td{white-space:nowrap}
.dm-tab .dm-nm{position:sticky;left:0;z-index:2;text-align:left;min-width:170px;max-width:230px;
  overflow:hidden;text-overflow:ellipsis;background:var(--card)}   /* coluna de KPI congelada à esquerda */
/* cabeçalho da coluna de KPIs: mantém o gradiente/cor do th (era texto BRANCO sobre fundo branco
   porque a regra .dm-nm sobrescrevia o background do th → parecia célula vazia) */
.dm-tab thead .dm-nm{z-index:3}
.dm-tab thead .dm-nmh{background:linear-gradient(180deg,var(--aqua),var(--teal-d));color:#fff;
  font-size:9.5px;letter-spacing:.03em;white-space:normal;line-height:1.2}
/* tooltip do título do card (KPI = Key Performance Indicator) */
.dm-tit{position:relative;cursor:help}
.dm-tit .dm-tip{right:auto;left:0;white-space:normal;width:max-content;max-width:340px;font-weight:400}
.dm-tit .dm-tip i{font-style:italic;font-weight:600}
.dm-tit:hover .dm-tip{opacity:1}
/* valores do evolutivo: máximo/mínimo em destaque (precisa vencer .dmk-v) */
.dmk-v.dmk-ext{font-weight:800;font-size:11px}
.dmk-med{font-size:8.5px;fill:var(--soft);font-style:italic}
/* mês atual: só destaque (a tabela abre já rolada p/ a direita, mostrando os meses recentes) */
.dm-tab td.dm-cur{color:var(--teal-d);font-weight:700}
.dm-tab th.dm-cur{color:var(--creme)}
.dm-tab tbody tr:hover td{background:var(--line2)}
.dm-tab tbody tr:hover .dm-nm{background:var(--line2)}
/* chips de seleção de KPI (mostrar/ocultar) */
.dm-kpis{flex-wrap:wrap}
.dm-kpis button{font-size:9.5px;padding:2px 9px}
/* mini-gráficos evolutivos (um por KPI, empilhados) — altura dobrada */
.dmk{margin-top:2px}
.dmk-tit{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);margin:2px 0 6px}
.dmk-row{display:flex;align-items:center;gap:8px;border-top:1px solid var(--bd)}   /* separador entre KPIs: era var(--line2), claro demais */
.dmk-row:first-of-type{border-top:0}
.dmk-nm{width:88px;flex:0 0 88px;font-size:10px;font-weight:800;letter-spacing:.02em;color:var(--txt);
  padding:5px 6px 5px 0;line-height:1.16;white-space:normal;word-break:break-word}   /* quebra p/ coluna estreita */
.dmk-ax .dmk-nm{padding:0}
.dmk-c{flex:1;min-width:0}
.dmk-svg{width:100%;height:auto;display:block;overflow:visible}
/* números e meses do evolutivo: o AZUL vem do chartPal() (fill inline, segue Navy/Dark);
   os var(--) abaixo são só o fallback se algum ponto vier sem fill */
.dmk-v{font-size:9px;fill:var(--txt);text-anchor:middle;font-variant-numeric:tabular-nums}
.dmk-ml{font-size:9px;fill:var(--txt);text-anchor:middle}
.dmk-ml.dmk-cur{font-weight:800}
/* legenda do card: alinhada à DIREITA e fora do container que rola */
.dm-nota{text-align:right;padding-right:2px}
/* meses da tabela: tudo centralizado (a coluna do KPI segue à esquerda) */
.dm-tab th.r,.dm-tab td.r{text-align:center}
@media(max-width:860px){.dmk-nm{width:96px;flex:0 0 96px;font-size:10px}}

/* Positivados: botão EXPANDIR CNPJS antes das quinzenas (modelo do COM META) */

/* ============ Gerador de Artes (tabloides / box temáticos) ============ */
.art-wrap{display:grid;grid-template-columns:400px minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:1100px){.art-wrap{grid-template-columns:1fr}}
.art-form .f{margin-bottom:10px}
.art-form label.art-lb{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--soft);margin:12px 0 5px}
.art-form input[type=text],.art-form input[type=search],.art-form input[type=number]{width:100%;box-sizing:border-box;background:var(--card);color:var(--txt);border:1px solid var(--bd);border-radius:8px;padding:8px 10px;font:inherit;font-size:12.5px}
.art-chips{display:flex;gap:5px;flex-wrap:wrap}
.art-chips button{background:var(--card);border:1px solid var(--bd);color:var(--txt);border-radius:99px;padding:6px 12px;font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.art-chips button.on{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.art-2col{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.art-medidas{display:flex;gap:8px;align-items:center}
.art-medidas input{width:84px!important}
.art-medidas .x{color:var(--soft);font-weight:800}
/* galeria de produtos */
.art-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px;max-height:290px;overflow:auto;margin-top:6px;padding:2px}
.art-gp{border:1px solid var(--bd);border-radius:8px;padding:5px 4px;text-align:center;cursor:pointer;background:var(--card);position:relative}
.art-gp:hover{border-color:var(--teal-d)}
.art-gp.on{border-color:var(--teal-d);box-shadow:0 0 0 2px var(--teal-d) inset}
.art-gp img{width:52px;height:52px;object-fit:contain;display:block;margin:0 auto 3px}
.art-gp .ph{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--soft);margin:0 auto 3px}
.art-gp .nm{font-size:8.8px;line-height:1.15;color:var(--txt);display:block;max-height:31px;overflow:hidden}
.art-gp .ck{position:absolute;top:3px;right:4px;font-size:11px;color:var(--teal-d);font-weight:900}
/* selecionados com preços */
.art-sel{margin-top:6px}
.art-si{display:flex;align-items:center;gap:6px;border:1px solid var(--bd);border-radius:8px;padding:5px 6px;margin-bottom:5px;background:var(--card)}
.art-si img{width:30px;height:30px;object-fit:contain;flex:0 0 30px}
.art-si .ph{width:30px;flex:0 0 30px;text-align:center;color:var(--soft)}
.art-si .nm{flex:1;min-width:0;font-size:10.5px;font-weight:700;line-height:1.15;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.art-si input{width:64px!important;padding:5px 6px!important;font-size:11px!important;text-align:right}
.art-si .lb{font-size:8.5px;color:var(--soft);text-transform:uppercase;font-weight:800;display:block;text-align:center}
.art-si button{background:none;border:0;color:var(--bad);cursor:pointer;font-size:14px;padding:2px 4px}
/* prévia */
.art-prevcard h3 .reset{padding:7px 12px;font-size:11px}
.art-preview{border:1px solid var(--bd);border-radius:10px;padding:14px;display:flex;justify-content:center;align-items:flex-start;overflow:auto;max-height:calc(100vh - 250px);min-height:280px;
  background:repeating-conic-gradient(rgba(127,127,127,.08) 0% 25%,transparent 0% 50%) 0 0/22px 22px}
.art-preview svg{max-width:100%;height:auto;display:block;box-shadow:0 6px 24px rgba(0,0,0,.25)}

/* ---- Gerador de Artes v3: fontes OFICIAIS da marca (Id Visual 2021) ---- */
@font-face{font-family:'Ardalos';font-weight:400;src:url('../fonts/Ardalos.ttf');font-display:swap}
@font-face{font-family:'Gotham';font-weight:400;src:url('../fonts/Gotham-Book.otf');font-display:swap}
@font-face{font-family:'Gotham';font-weight:500;src:url('../fonts/Gotham-Medium.otf');font-display:swap}
@font-face{font-family:'Gotham';font-weight:700;src:url('../fonts/Gotham-Bold.otf');font-display:swap}
@font-face{font-family:'Gotham';font-weight:900;src:url('../fonts/Gotham-Black.otf');font-display:swap}
@font-face{font-family:'Congenial';font-weight:800;src:url('../fonts/Congenial.otf');font-display:swap}
@font-face{font-family:'HeinzLabel';font-weight:800;src:url('../fonts/HeinzLabel.ttf');font-display:swap}
/* chips de modelo com a cor da página do catálogo */
.art-modelos button{border-width:2px;font-weight:800}
.art-modelos button.on{outline:3px solid var(--teal);outline-offset:1px}
/* linha de grupo (vários produtos num card) */
.art-si input[data-gk]{width:14px!important;flex:0 0 14px;accent-color:var(--teal-d)}
.art-si .pics{display:flex;flex:0 0 auto}
.art-si .pics img{width:24px;height:30px;object-fit:contain;margin-right:-9px}
.art-si.grp{border-color:var(--teal-d);background:rgba(31,175,166,.06)}
/* prévia interativa (modo Canva) */
.art-preview svg [data-mv]{cursor:grab}
.art-preview svg [data-mv]:hover{filter:brightness(1.04)}

/* ---- ESTÚDIO BR Spices (barra de edição na prévia) ---- */
.art-studio{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px;position:relative}
.art-studio>button{padding:5px 11px;font-size:11px;font-weight:700}
.st-props{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border:1px solid var(--teal);border-radius:8px;background:rgba(31,175,166,.07)}
.st-props input#st-tam{padding:4px 6px!important;font-size:11px!important}
#st-fontes button{margin:0 1px}
.st-painel{position:absolute;top:100%;left:0;z-index:40;background:var(--card);border:1px solid var(--bd);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);padding:10px;min-width:300px;max-width:460px}
.st-kitgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:7px}
.st-kiti{border:1px solid var(--bd);border-radius:8px;padding:5px;cursor:pointer;text-align:center;background:rgba(127,127,127,.05)}
.st-kiti:hover{border-color:var(--teal)}
.st-kiti img{width:100%;height:44px;object-fit:contain}
.st-kiti span{display:block;font-size:8.5px;color:var(--soft);line-height:1.1;margin-top:3px}
.st-arte{display:flex;align-items:center;gap:8px;padding:5px 2px;border-bottom:1px solid var(--bd);font-size:11.5px}
.st-arte span{flex:1}

/* ---- MODO ESTÚDIO (tela cheia, estilo Canva) ---- */
#studio{position:fixed;inset:0;z-index:900;background:#20242B;display:flex;flex-direction:column}
.stf-top{display:flex;align-items:center;gap:10px;padding:9px 16px;background:#171A1F;border-bottom:1px solid #31363E;color:#F2F4F7}
.stf-top b{font-size:14px}
.stf-nome{font-size:11.5px;color:#9AA3AF;font-style:italic}
.stf-top .reset{border-color:#3A4048;color:#E7EAEE;padding:6px 13px}
.stf-corpo{flex:1;display:flex;min-height:0}
.stf-lateral{width:330px;flex:0 0 330px;overflow:auto;background:var(--bg,#fff);border-right:1px solid #31363E;padding:12px}
.stf-lateral .art-form{box-shadow:none;border:0;margin:0;padding:0}
.stf-canvas{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:22px;gap:10px}
.stf-canvas .art-studio{position:sticky;top:0;z-index:5;background:#20242B;padding:6px 10px;border-radius:10px;margin-bottom:0}
.stf-canvas .art-studio>button{background:#2A2F37;border-color:#3A4048;color:#E7EAEE}
.stf-canvas .art-preview{border:0;background:transparent;max-height:none;overflow:visible;padding:0}
.stf-canvas .art-preview svg{box-shadow:0 18px 60px rgba(0,0,0,.55)}
.stf-zoom{position:fixed;right:18px;bottom:14px;z-index:920;display:flex;align-items:center;gap:8px;background:#171A1F;
  border:1px solid #31363E;border-radius:99px;padding:6px 14px;color:#E7EAEE;font-size:11px}
.stf-zoom input[type=range]{width:130px;accent-color:#1FAFA6}
.stf-zoom .reset{color:#E7EAEE;border-color:#3A4048;padding:3px 10px}
@media (max-width:860px){.stf-lateral{width:260px;flex-basis:260px}}

/* ---- Estúdio segue o TEMA do site (claro no Navy, escuro só no tema Dark) ---- */
#studio{background:var(--bg)}
.stf-top{background:var(--card);border-bottom:1px solid var(--bd);color:var(--ink)}
.stf-top .reset{border-color:var(--bd);color:var(--ink)}
.stf-nome{color:var(--soft)}
.stf-lateral{background:var(--card);border-right:1px solid var(--bd)}
.stf-canvas{background:rgba(127,127,127,.10)}
.stf-canvas .art-studio{background:var(--card);border:1px solid var(--bd)}
.stf-canvas .art-studio>button{background:var(--card);border-color:var(--bd);color:var(--ink)}
.stf-canvas .art-preview svg{box-shadow:0 14px 44px rgba(0,0,0,.28)}
.stf-zoom{background:var(--card);border:1px solid var(--bd);color:var(--ink)}
.stf-zoom .reset{color:var(--ink);border-color:var(--bd)}

/* ---- tela inicial do Gerador (estilo "Criar um design" do Canva) ---- */
#art-inicio .art-lb{margin-top:16px}
.ini-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:8px}
.ini-card{border:1px solid var(--bd);border-radius:12px;overflow:hidden;cursor:pointer;text-align:center;
  transition:transform .12s, box-shadow .12s;background:var(--card);position:relative;min-height:120px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px}
.ini-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.18);border-color:var(--teal)}
.ini-of img{width:100%;height:150px;object-fit:cover;object-position:top;border-radius:8px}
.ini-of span{display:block;font-size:11px;font-weight:800;margin-top:7px}
.ini-linha img{width:82%;height:44px;object-fit:contain;opacity:.9}
.ini-linha b{display:block;font-size:12.5px;margin-top:6px}
.ini-mais{border-style:dashed;color:var(--soft)}
.ini-mais .mais{font-size:34px;line-height:1;font-weight:300}
.ini-mais span{font-size:10.5px;margin-top:6px;line-height:1.3}
.ini-mais small{color:var(--soft);font-weight:400}
/* indicador do modelo atual (painel esquerdo enxuto) */
.art-mod{display:flex;align-items:center;gap:8px;background:rgba(31,175,166,.08);border:1px solid var(--teal);
  border-radius:10px;padding:7px 10px;margin-bottom:4px}
.art-mod span{flex:1;font-size:11.5px;font-weight:800}
.art-mod .reset{padding:4px 10px;font-size:10.5px}

/* ---- seletor de páginas (frente/verso) na barra do Estúdio ---- */
.st-pags{display:inline-flex;align-items:center;gap:3px;font-size:12px;padding-left:6px;border-left:1px solid var(--bd)}
.st-pags .reset{padding:3px 9px;font-size:11px;font-weight:800}

/* ---- chevron de recolher na borda do painel (como no Canva) + rodapé do Estúdio ---- */
.stf-corpo{position:relative}
#stf-recolhe{position:absolute;left:330px;top:50%;transform:translateY(-50%);width:17px;height:56px;
  background:var(--card);border:1px solid var(--bd);border-left:0;border-radius:0 9px 9px 0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--soft);z-index:8;user-select:none}
#stf-recolhe:hover{color:var(--teal-d);border-color:var(--teal)}
#studio.fech .stf-lateral{display:none}
#studio.fech #stf-recolhe{left:0}
#stf-pginfo{font-weight:800}
@media (max-width:860px){#stf-recolhe{left:260px}}

/* ---- tira de páginas com miniatura+nome · chip/painel de cores · camadas ---- */
.st-pags{max-width:340px;overflow-x:auto;padding-bottom:2px}
.st-pg{display:inline-flex;flex-direction:column;align-items:center;gap:2px;border:2px solid var(--bd);border-radius:8px;
  padding:3px 5px;cursor:pointer;background:var(--card);min-width:56px;max-width:76px}
.st-pg.on{border-color:var(--teal-d)}
.st-pg img,.st-pg i{width:44px;height:30px;object-fit:cover;border-radius:4px;display:block;border:1px solid var(--bd)}
.st-pg span{font-size:8.5px;font-weight:800;color:var(--soft);max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-corchip{width:24px;height:24px;border-radius:50%;border:2px solid var(--bd);cursor:pointer;padding:0}
.st-corchip:hover{border-color:var(--teal)}
.st-corpainel{min-width:280px;max-width:340px}
.st-corpainel b{font-size:9.5px;color:var(--soft);letter-spacing:.05em;display:block;margin:9px 0 4px}
.st-corpainel input#st-hex{padding:6px 8px;border:1px solid var(--bd);border-radius:8px;background:var(--card);color:var(--txt);font-size:12px}
.st-swgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.st-sw{width:26px;height:26px;border-radius:50%;border:2px solid var(--bd);cursor:pointer;padding:0}
.st-sw.on,.st-sw:hover{border-color:var(--teal-d)}

/* ================= SIMULADOR DE PROPOSTA COMERCIAL (Trade e JBP) ================= */
.sim-etapas{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.sim-et{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--soft);
  background:var(--card);border:1px solid var(--line);border-radius:20px;padding:5px 12px 5px 5px}
.sim-et i{width:18px;height:18px;border-radius:50%;background:var(--line2);color:var(--soft);
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:9.5px;font-weight:800}
.sim-et.on{color:#fff;background:var(--teal-d);border-color:var(--teal-d)}
.sim-et.on i{background:rgba(255,255,255,.25);color:#fff}
.sim-et.ok{color:var(--txt);border-color:var(--bd)}
.sim-et.ok i{background:#2e9e63;color:#fff}
.sim-et.fut{opacity:.55}
.sim-et em{font-style:normal;font-size:9px;font-weight:700;color:var(--soft);
  background:var(--line2);border-radius:10px;padding:1px 6px;margin-left:2px}
.sim-hd{padding:12px 14px}
.sim-hd-tit{font-size:16px;font-weight:800;color:var(--txt);letter-spacing:-.01em;margin-bottom:9px}
.sim-hd-tit .sim-uf{font-size:11px;font-weight:800;color:#fff;background:var(--teal-d);
  border-radius:20px;padding:2px 9px;vertical-align:middle;margin-left:4px}
.sim-hd-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px 16px}
.sim-hd-i span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.sim-hd-i b{font-size:12px;color:var(--txt);font-weight:700}
.sim-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px;margin:12px 0}
.sim-card{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--teal-d);
  border-radius:12px;padding:9px 12px;box-shadow:var(--shadow)}
.sim-card-r{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.sim-card-v{font-size:19px;font-weight:800;color:var(--txt);letter-spacing:-.02em;line-height:1.25;
  font-variant-numeric:tabular-nums}
.sim-card-s{font-size:10px;color:var(--mut);font-style:italic}
.sim-card.sim-up{border-left-color:#2e9e63}.sim-card.sim-up .sim-card-v{color:#1d7a4c}
.sim-card.sim-down{border-left-color:var(--bad)}.sim-card.sim-down .sim-card-v{color:var(--bad)}
.sim-card.sim-ok{border-left-color:#2e9e63}
.sim-card.sim-warn{border-left-color:var(--acafrao)}
.sim-tab{min-width:1180px}
.sim-tab th{white-space:nowrap;cursor:pointer;user-select:none}
.sim-tab th.l,.sim-tab td.l{text-align:left}
.sim-tab th.c,.sim-tab td.c{text-align:center}
.sim-tab td{font-size:11.5px;vertical-align:middle}
.sim-tab tbody tr:hover td{background:var(--line2)}
.sim-tab .sim-dim{color:var(--mut)}
.sim-tab .sim-sug{color:var(--mut);font-variant-numeric:tabular-nums}
.sim-prod{display:flex;align-items:center;gap:8px;min-width:290px}
.sim-prod .vfoto{width:30px;height:30px;object-fit:contain;flex:0 0 30px}
.sim-prod .vfoto-x{display:inline-block;background:var(--line2);border-radius:6px}
.sim-prod b{font-size:11.5px;line-height:1.2;display:block}
.sim-sku{display:block;font-style:normal;font-size:9.5px;color:var(--soft);font-weight:600}
.sim-ccli{display:inline-block;min-width:15px;margin-left:5px;font-size:9px;font-weight:800;
  color:var(--mut);background:var(--line2);border-radius:4px;padding:1px 4px}
.sim-inp{width:74px;text-align:center;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--txt);background:var(--card);border:1.4px solid var(--bd);border-radius:7px;padding:3px 4px;outline:none}
.sim-inp:focus{border-color:var(--teal-d);box-shadow:0 0 0 3px rgba(47,125,124,.14)}
.sim-inp.sim-edit{border-color:var(--acafrao);background:#FFFBF0;color:#8a6d1d}
html[data-theme="dark"] .sim-inp.sim-edit{background:#2A2412;color:#F0D89B}
.sim-badge{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;
  border-radius:20px;padding:2px 9px 2px 6px;white-space:nowrap}
.sim-ic{width:12px;height:12px;flex:0 0 12px}
.sim-acel{background:#E7F6EE;color:#1d7a4c}
.sim-rep{background:var(--line2);color:var(--mut)}
.sim-lct{background:#FFF7DB;color:#8a6d1d}
.sim-sub{background:#FBE9E7;color:#a8352c}
html[data-theme="dark"] .sim-acel{background:#123322;color:#57D497}
html[data-theme="dark"] .sim-lct{background:#332B12;color:#F0D89B}
html[data-theme="dark"] .sim-sub{background:#3A1D1A;color:#F4948B}
.sim-risco{font-size:9.5px;font-weight:700;white-space:nowrap}
.sim-r-ok{color:#1d7a4c}.sim-r-med{color:#b8860b}.sim-r-alto{color:var(--bad)}.sim-r-novo{color:var(--soft)}
.sim-alert{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex:0 0 15px;
  border-radius:50%;background:var(--acafrao);color:#fff;font-size:10px;font-weight:800;cursor:help}
.sim-fl td{opacity:.6}
.sim-tot th{background:var(--line2);color:var(--txt);font-size:11.5px;font-weight:800;
  border-top:2px solid var(--bd);font-variant-numeric:tabular-nums;text-align:center;cursor:default}
.sim-tot th.l{text-align:left}
.sim-pend{padding:12px 14px}
.sim-pend h3{font-size:12px;margin-bottom:7px}
.sim-pend ul{margin:0;padding-left:17px}
.sim-pend li{font-size:11.5px;color:var(--mut);line-height:1.65}
.sim-pend li b{color:var(--txt)}
@media(max-width:860px){.sim-cards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}

/* atalhos da janela de meses do Sell-out (TODOS / YTD) — ficam no topo do painel */
.so-mesatalhos{display:flex;gap:6px;padding:0 2px 8px;border-bottom:1px solid var(--bd);margin-bottom:6px}
.so-mesatalhos .fchip{flex:1;text-align:center;justify-content:center}

/* NF de origem na coluna Pedido: é referência, não pedido — some do peso visual do número */
.nf-orig{color:var(--mut);font-size:10.5px;font-weight:600;white-space:nowrap}
/* barra de ação da nota expandida */
.nf-detbar{display:flex;justify-content:flex-end;margin:0 0 8px}
.nf-baixa{border:1px solid var(--bd);background:var(--card);color:var(--teal-d);
  font:inherit;font-size:11px;font-weight:700;padding:5px 12px;border-radius:7px;cursor:pointer}
.nf-baixa:hover{background:var(--line2)}
.nf-baixa:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ══ Status de Entregas · acabamento de 29/08/2026 ══════════════════════════════════════════ */
/* barra de filtros: era um .card de altura cheia para 4 controles — fica na medida dos outros */
.ent-bar{padding:9px 14px}
.ent-bar .tctl{margin-bottom:0}
/* cards mais baixos: o conteúdo é curto e a altura antiga empurrava o evolutivo para fora da tela */
.ent-kpis{gap:11px;margin-bottom:0}
.ent-kpis .kpi{padding:5px 12px 7px}
.ent-kpis .kpi .hd{margin:2px 0 3px}
.ent-kpis .kpi .ic{width:22px;height:22px;border-radius:7px}
.ent-kpis .kpi .ic svg{width:13px;height:13px}
.ent-kpis .kpi .v{font-size:19px}
/* ponto de atenção se anuncia pela moldura inteira, não só pela faixa de cima */
.kpi.kborda{border-width:1.5px}
.kpi.kborda::after{background:var(--kfx)}
/* janelas de seleção da linha de filtro da tabela */
.ent-selwrap{position:relative;display:block}
.ent-selbtn{width:100%;min-width:0;height:24px;font-size:10.5px;padding:0 18px 0 8px;text-align:left;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ent-selbtn.on{border-color:var(--teal-d);color:var(--teal-d);font-weight:800}
.ent-selpan{width:250px;left:0;right:auto}
th.ent-qth{overflow:visible}
tr.ent-qrow th{overflow:visible}

/* Faseamento · modo ÚLTIMO DIA: a lista de pedidos que fecham o mês */
tr.pd-fecha td{background:rgba(47,125,74,.07)}
tr.pd-corte td{background:var(--ok);color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.06em;text-align:center;padding:3px 6px}

/* ══ Guia Entregas · larguras (Fernando, 30/08/2026) ════════════════════════════════════════
   NF, datas e UF ocupavam largura de sobra e jogavam a tabela na rolagem horizontal. */
#v-entregas .ent-tab .ent-wnf{width:64px;padding-left:5px;padding-right:5px}
#v-entregas .ent-tab .ent-wdt{width:62px;padding-left:4px;padding-right:4px}
#v-entregas .ent-tab .ent-wuf{width:30px;padding-left:2px;padding-right:2px;text-align:center}

/* ══ Detalhe da NF · a 2ª linha do cabeçalho e a barra de total ════════════════════════════ */
.nfinfo2{margin-top:-4px}
/* o rodapé de total fecha a nota com o MESMO azul do cabeçalho: começo e fim têm o mesmo peso */
/* a linha do total vive DENTRO de tr.nf-det, cujo fundo claro tem seletor mais específico —
   por isso o !important: sem ele o azul não pinta e o texto branco some (30/08/2026) */
#nf-lista tr.nf-ittot td, tr.nf-ittot td{
  background:linear-gradient(180deg,var(--aqua),var(--teal-d))!important;border-top:0;
  font-weight:800;color:#fff!important;font-size:11px;padding-top:5px;padding-bottom:5px}
tr.nf-ittot td+td{border-left:1px solid rgba(255,255,255,.38)}
tr.nf-ittot td:first-child{letter-spacing:.05em}
/* números dos itens com respiro à esquerda: colados na borda direita eles brigam com a coluna
   seguinte e o olho perde a linha */
.nf-it td.nfit-n{padding-right:14px}
.nf-it th{padding-left:6px;padding-right:6px}

/* busca DENTRO da janela de seleção do Sell-out (achar a loja na lista, sem rolar 200 nomes) */
/* seleção de linhas na PRÓPRIA tabela (Sell-out) — botão no canto do cabeçalho da coluna */
.so-selbtn{margin-left:7px;border:0;background:rgba(255,255,255,.22);color:#fff;border-radius:5px;
  width:19px;height:17px;font-size:11px;line-height:1;cursor:pointer;vertical-align:middle;padding:0}
.so-selbtn:hover{background:rgba(255,255,255,.42)}
.so-selbtn.on{background:var(--creme);color:var(--ink)}
.so-selbar{display:inline-flex;align-items:center;gap:8px;margin-left:8px}
.so-selbar .so-seln{font-size:11px;color:var(--txt)}
.so-selrow{vertical-align:middle;margin-right:6px;cursor:pointer}
.so-selon tbody tr{cursor:pointer}
.so-selon tbody tr:hover td{background:var(--line2)}