/* ============================================================
   base.css — PAINEL DA DIRETORIA · LCA
   Sistema visual do painel. Não contém nada específico de
   vendas: cor, tipografia, espaçamento, animação e as peças
   (cartão, indicador, gráfico, tabela, painel lateral).
   Qualquer módulo novo usa este arquivo sem alteração.
   ============================================================ */

/* ---------- fontes locais (funcionam offline) ---------- */
@font-face{
  font-family:"Bricolage Grotesque"; src:url("fontes/BricolageGrotesque-latin.ttf") format("truetype-variations");
  font-weight:200 800; font-display:swap;
}
@font-face{
  font-family:"Inter Tight"; src:url("fontes/InterTight-latin.ttf") format("truetype-variations");
  font-weight:100 900; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono"; src:url("fontes/JetBrainsMono-latin.ttf") format("truetype-variations");
  font-weight:100 800; font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --radius:.5rem;
  --largura:1180px;          /* largura útil do painel */
  --background:oklch(97.7% .004 85); --surface:oklch(100% 0 0); --surface-raised:oklch(98.2% .003 85);
  --foreground:oklch(21.5% .012 266); --hairline:oklch(88.8% .006 266);
  --ink-dim:oklch(44% .012 266); --ink-faint:oklch(54.5% .012 266);
  --signal:oklch(47.5% .158 266); --signal-soft:oklch(57.5% .14 266);
  --ember:oklch(51.5% .135 42); --mint:oklch(47.5% .105 168);
  --danger:oklch(50.8% .178 27); --graphite:oklch(60% .012 266);
  --grid-line:oklch(85.5% .006 266); --axis-line:oklch(74% .008 266);
  --shadow-card:0 1px 2px oklch(22% .02 266/.06), 0 1px 8px oklch(22% .02 266/.05);
  --topline:transparent;
  --scrim:oklch(21.5% .012 266/.22);
  --header-bg:oklch(97.7% .004 85/.86);
}
html[data-tema="escuro"]{
  --background:oklch(14.5% .012 268); --surface:oklch(18.5% .013 267); --surface-raised:oklch(22.2% .015 266);
  --foreground:oklch(95.5% .004 260); --hairline:oklch(32% .016 266);
  --ink-dim:oklch(68% .013 262); --ink-faint:oklch(50% .013 262);
  --signal:oklch(68% .185 264); --signal-soft:oklch(63% .175 266);
  --ember:oklch(72% .175 48); --mint:oklch(80% .165 168);
  --danger:oklch(60% .18 28); --graphite:oklch(47% .014 262);
  --grid-line:oklch(32% .016 266); --axis-line:oklch(40% .016 266);
  --shadow-card:none; --topline:oklch(100% 0 0/.05);
  --scrim:oklch(8% .01 268/.5);
  --header-bg:oklch(14.5% .012 268/.86);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--background);color:var(--foreground);
  font-family:"Inter Tight",ui-sans-serif,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;transition:background .25s ease,color .25s ease}
.num{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* três famílias, como no modelo: Bricolage Grotesque nos títulos,
   Inter Tight no texto corrido, JetBrains Mono nos números e rótulos */
h1,h2,h3,h4,.drawer h3,.titulo h1{
  font-family:"Bricolage Grotesque","Inter Tight",ui-sans-serif,system-ui,sans-serif}
/* no painel de referência TODO rótulo micro em caixa alta é monoespaçado — é isso
   que dá o ar de terminal financeiro. Texto corrido segue em Inter Tight. */
.rot,.delta,.tick,.tickn,.rotulo,.krot,.dsec,.dbox .r,th,.seg button,.tag{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- animações ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
.rise{opacity:0;animation:rise .62s cubic-bezier(.22,1,.36,1) forwards}
@media (prefers-reduced-motion:reduce){
  .rise,.bar-r,.line,.fill,.accent{animation:none!important;opacity:1;stroke-dashoffset:0;transform:none}
}

/* ---------- topo congelado ---------- */
.topo{position:sticky;top:0;z-index:30;background:var(--header-bg);
  backdrop-filter:saturate(1.6) blur(10px);-webkit-backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--hairline)}
.topo .faixa{max-width:var(--largura);margin:0 auto;padding:14px 22px 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* Dois arquivos oficiais: o triângulo é vermelho nos dois, só as letras mudam.
   Nada de filtro — cada tema mostra o arquivo certo. */
.logo{height:30px;width:auto;display:block}
html[data-tema="escuro"] .logo-clara{display:none}
html[data-tema="claro"]  .logo-escura{display:none}
.logo-txt{font-size:22px;font-weight:700;letter-spacing:.16em}
.titulo .eyebrow{display:flex;align-items:center;gap:7px;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 9px}
.titulo .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--mint);flex:none}
.titulo h1{font-size:38px;font-weight:700;letter-spacing:-.032em;margin:0;line-height:1.02}
.titulo .sub{font-size:12.5px;color:var(--ink-faint);margin:10px 0 0;max-width:74ch;line-height:1.5}
.topo .barra{max-width:var(--largura);margin:0 auto;padding:12px 22px 12px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rotulo{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.dica{font-size:10.5px;color:var(--signal);font-style:italic;white-space:nowrap}
.dica:empty{display:none}

/* ---------- controles ---------- */
.seg{display:flex;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:3px;gap:2px;box-shadow:var(--shadow-card)}
.seg button{background:none;border:none;font:inherit;font-size:12px;color:var(--ink-dim);
  padding:5px 11px;border-radius:calc(var(--radius) - 3px);cursor:pointer;
  transition:background .18s ease,color .18s ease;white-space:nowrap}
/* o :not([aria-pressed="true"]) é obrigatório: sem ele o hover vence o estado
   selecionado por especificidade e o texto branco vira escuro ao passar o mouse */
.seg button:hover:not(:disabled):not([aria-pressed="true"]){color:var(--foreground);
  background:var(--surface-raised)}
.seg button[aria-pressed="true"]{background:var(--signal);color:#fff;font-weight:500}
.seg button[aria-pressed="true"]:hover{background:var(--signal-soft);color:#fff}
html[data-tema="escuro"] .seg button[aria-pressed="true"],
html[data-tema="escuro"] .seg button[aria-pressed="true"]:hover{color:oklch(14.5% .012 268)}
.seg button:disabled{opacity:.32;cursor:default}
.seg.meses button{padding:5px 8px;font-size:11.5px;font-family:"JetBrains Mono",ui-monospace,monospace}
.seg.meses button.dentro:not([aria-pressed="true"]){
  background:color-mix(in oklab,var(--signal) 13%,transparent);color:var(--foreground)}
.icon-btn{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  width:33px;height:33px;cursor:pointer;color:var(--ink-dim);font-size:14px;line-height:1;
  display:grid;place-items:center;transition:all .18s ease;flex:none}
.icon-btn:hover{background:var(--surface-raised);color:var(--foreground)}
.espaco{flex:1 1 auto}

/* ---------- conteúdo ---------- */
.conteudo{max-width:var(--largura);margin:0 auto;padding:20px 22px 60px;
  transition:filter .34s ease, opacity .34s ease}
body.drawer-aberto .conteudo{filter:blur(4px);opacity:.72;pointer-events:none;user-select:none}
body.drawer-aberto .topo{filter:blur(4px);opacity:.72;pointer-events:none}

/* ---------- indicadores ---------- */
/* Faixa única dividida por fios, como no modelo — não são cartões soltos.
   Ao estreitar, os indicadores se reorganizam em linhas DENTRO da mesma faixa:
   os fios são desenhados com box-shadow (esquerda e topo de cada célula) e as
   sobras nas bordas externas ficam escondidas pelo recorte do contêiner. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:0;margin-bottom:12px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:var(--shadow-card);overflow:hidden;position:relative}
.kpis::after{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--topline);
  pointer-events:none}
.kpi{perspective:1000px;height:126px;
  box-shadow:-1px 0 0 var(--hairline), 0 -1px 0 var(--hairline)}
.kpi .face{border:none;box-shadow:none;border-radius:0;background:var(--surface)}
.kpi .face::before{display:none}
.kpi .inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .58s cubic-bezier(.22,1,.36,1)}
.kpi{cursor:pointer}
/* passar o mouse vira; clicar trava virado (a regra .fixo vem por último de propósito) */
.kpi:hover .inner,.kpi:focus-visible .inner{transform:rotateY(180deg)}
.kpi.fixo .inner{transform:rotateY(180deg)}
/* marca discreta de "travado" no canto do verso */
.kpi.fixo .back::after{content:"";position:absolute;top:11px;right:12px;width:5px;height:5px;
  border-radius:50%;background:var(--signal)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:var(--shadow-card);padding:13px 15px;overflow:hidden}
.face::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--topline)}
.back{transform:rotateY(180deg);background:var(--surface-raised)!important;
  display:flex;flex-direction:column;padding:12px 14px}
.rot{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.val{font-size:26px;font-weight:600;display:block;margin:9px 0 5px;letter-spacing:-.025em}
.delta{font-size:11px;color:var(--ink-dim)}
.delta b{font-weight:600}
.up{color:var(--mint)} .down{color:var(--ember)} .flat{color:var(--graphite)}
.accent{display:none}
/* verso do cartão: rótulo encolhe e corta com reticências; o número nunca quebra */
.back .lista{display:flex;flex-direction:column;justify-content:space-around;flex:1;min-height:0}
.brow{display:flex;align-items:baseline;justify-content:space-between;gap:9px;font-size:11px;
  line-height:1.25;color:var(--ink-dim);padding:4px 0;border-bottom:1px solid var(--hairline)}
.brow:last-child{border-bottom:none}
.brow span:first-child{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.brow span:last-child{flex:0 0 auto;color:var(--foreground);font-weight:500;white-space:nowrap;
  font-size:11px}

/* ---------- blocos ---------- */
.grid2{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;margin-bottom:12px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:var(--shadow-card);padding:17px 19px;position:relative;overflow:visible}
.card::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--topline)}
.card h2{font-size:14px;font-weight:600;margin:0;letter-spacing:-.015em}
.card .hint{font-size:11.5px;color:var(--ink-faint);margin:3px 0 14px}

/* ---------- gráficos ---------- */
svg.chart{display:block;width:100%;height:auto;overflow:visible}
.gl{stroke:var(--grid-line);stroke-width:1;stroke-dasharray:3 4}   /* grade tracejada */
.ax{stroke:var(--axis-line);stroke-width:1}
.tick{font-size:10.5px;fill:var(--ink-faint)}
.tickn{font-size:10px;fill:var(--ink-faint);font-family:"JetBrains Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums}
.bar-r{fill:var(--signal);cursor:pointer;transition:fill .18s ease}
.bar-r:hover{fill:var(--signal-soft)}
.bar-r.sel{fill:var(--ember)}
.barlab{font-size:10px;fill:var(--ink-dim);font-family:"JetBrains Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;pointer-events:none}
.area{fill:var(--signal);opacity:.10}
.line{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dot{fill:var(--surface);stroke:var(--signal);stroke-width:2;pointer-events:none}
.dot.oculto{opacity:0}
.rangebox{fill:var(--signal);opacity:.08;transition:x .35s cubic-bezier(.22,1,.36,1),
  width .35s cubic-bezier(.22,1,.36,1)}
.hitbox{fill:transparent;cursor:crosshair}
.crosshair{stroke:var(--axis-line);stroke-width:1;stroke-dasharray:2 3;opacity:0;pointer-events:none}
.crosshair.on{opacity:1}

/* ---------- balão ---------- */
.tip{position:fixed;z-index:60;pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .13s ease,transform .13s ease;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:0 4px 18px oklch(22% .02 266/.14);padding:8px 11px;font-size:12px;color:var(--ink-dim);
  white-space:nowrap}
.tip.on{opacity:1;transform:none}
.tip .t1{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:3px}
.tip .t2{font-size:14px;font-weight:600;color:var(--foreground)}

/* ---------- tabela ---------- */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:500;padding:0 10px 9px 0;border-bottom:1px solid var(--hairline);white-space:nowrap}
td{padding:10px 10px 10px 0;border-bottom:1px solid var(--hairline);color:var(--ink-dim);
  vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:var(--surface-raised)}
td.r,th.r{text-align:right;padding-right:0}
td.nome{color:var(--foreground);font-weight:500}
td .sub2{display:block;font-size:11px;color:var(--ink-faint);margin-top:2px}
.desc{font-weight:600}
.desc.zero{color:var(--mint)} .desc.leve{color:var(--ink-dim)} .desc.forte{color:var(--ember)}

/* ---------- painel lateral ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;
  transition:opacity .34s ease;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(430px,92vw);background:var(--surface);
  border-left:1px solid var(--hairline);z-index:50;transform:translateX(100%);
  transition:transform .38s cubic-bezier(.22,1,.36,1);overflow-y:auto;padding:22px 24px 44px;
  box-shadow:-8px 0 30px oklch(22% .02 266/.10)}
.drawer.on{transform:none}
.drawer .close{position:absolute;top:15px;right:17px;background:none;border:none;color:var(--ink-faint);
  font-size:18px;cursor:pointer;line-height:1;padding:4px}
.drawer .close:hover{color:var(--foreground)}
.krot{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint)}
.drawer h3{font-size:22px;font-weight:600;margin:6px 0 3px;letter-spacing:-.025em}
.dsub{font-size:12px;color:var(--ink-faint);margin:0 0 18px;line-height:1.5}
.dgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:6px}
.dbox{border:1px solid var(--hairline);border-radius:var(--radius);padding:9px 10px;
  background:var(--surface-raised)}
.dbox .r{font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.dbox .v{font-size:15.5px;font-weight:600;margin-top:4px;display:block}
.dsec{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 11px;padding-top:18px;border-top:1px solid var(--hairline)}
.drawer p.txt{font-size:12.5px;line-height:1.65;color:var(--ink-dim);margin:0}
.mix{margin-bottom:9px}
.mix .top{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-dim);margin-bottom:4px}
.mix .top b{color:var(--foreground);font-weight:600}
.track{height:5px;background:var(--surface-raised);border:1px solid var(--hairline);
  border-radius:99px;overflow:hidden}
.fill{height:100%;transform-origin:left;animation:sweep .7s cubic-bezier(.22,1,.36,1) both}
.dlist{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--ink-dim);
  padding:8px 0;border-bottom:1px solid var(--hairline)}
.dlist:last-of-type{border-bottom:none}
.dlist b{color:var(--foreground);font-weight:500;white-space:nowrap}

.foot{font-size:11.5px;color:var(--ink-faint);margin-top:22px;line-height:1.65}