/* LOVÉ RAIN — identidade do sistema.

   Direção: painel de instrumentos. Superfícies levemente elevadas, traço fino,
   e UM acento que só aparece onde há ação ou estado. O futurismo vem da LUZ e
   do espaçamento, não de fonte de ficção científica — é um sistema para
   trabalhar oito horas por dia.

   UM acento de marca — framboesa — nos dois temas. Havia violeta no escuro e
   framboesa no claro: duas cores brigando pelo mesmo papel.

   A BARRA tem cor cheia e jogo de tinta PRÓPRIO (--barra-*). Ela é o que
   divide a tela e dá identidade; a área de dados fica calma de propósito,
   senão tabela de imposto vira leitura difícil.

   DOIS TEMAS, o mesmo desenho:
   · NOITE  — quase-preto com barra ameixa, acento rosa luminoso, números com
              halo. É o padrão.
   · DIA    — papel rosado quente com barra framboesa cheia, sem halo. Não é o
              negativo do escuro: o contraste é recalculado para o claro, e
              a temperatura vem da marca (cosmético), não de cinza de escritório.
   Regra de ouro: COR só existe como token aqui em cima. Nenhum componente
   define cor dentro de bloco de tema — senão um tema vaza no outro. */

/* ---------------------------------------------------------------- NOITE */
:root{
  --ground:#07090E;
  --ground-2:#0A0E15;
  --surface:#0D111A;
  --surface-2:#141A26;
  --surface-3:#1A2130;
  --ink:#E9EEF7;
  --ink-soft:#96A3B8;
  --ink-faint:#6C7890;
  --rule:#1C2433;
  --rule-forte:#273248;

  --accent:#F2699C;
  --accent-texto:#FF9DC2;
  --accent-vidro:rgba(242,105,156,.14);
  --accent-brilho:rgba(242,105,156,.42);
  --tinta-no-acento:#1A0510;

  --ok:#35E0A0;      --ok-vidro:rgba(53,224,160,.12);   --ok-borda:rgba(53,224,160,.26);
  --alerta:#FFC24D;  --alerta-vidro:rgba(255,194,77,.12); --alerta-borda:rgba(255,194,77,.26);
  --alerta-forte:#FFD98A;
  --risco:#FF6B81;   --risco-vidro:rgba(255,107,129,.12); --risco-borda:rgba(255,107,129,.30);
  --tinta-no-risco:#12060A;

  --fio:rgba(242,105,156,.45);
  --fio-porta:rgba(242,105,156,.62);
  --halo-num:0 0 26px rgba(233,238,247,.16);
  --halo-ok:0 0 26px rgba(53,224,160,.28);
  --halo-alerta:0 0 26px rgba(255,194,77,.28);
  --halo-risco:0 0 26px rgba(255,107,129,.28);
  --brilho-logo:drop-shadow(0 0 18px rgba(242,105,156,.42));
  --brilho-logo-porta:drop-shadow(0 0 28px rgba(242,105,156,.45));
  --brilho-medidor:0 0 14px rgba(242,105,156,.45);
  --brilho-medidor-risco:0 0 14px rgba(255,107,129,.50);
  --brilho-ponto:0 0 8px currentColor;
  --brilho-filtro:0 0 16px rgba(242,105,156,.26);
  --nevoa-1:rgba(242,105,156,.13);
  --nevoa-2:rgba(123,140,255,.06);
  --nevoa-porta:rgba(242,105,156,.16);
  --barra-fundo:linear-gradient(180deg, #33122A 0%, #1B0A17 100%);
  --sombra:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 32px -20px rgba(0,0,0,.9);
  --sombra-porta:0 1px 0 rgba(255,255,255,.04) inset, 0 40px 80px -40px rgba(0,0,0,.95);

  --fonte-titulo:"Bodoni Moda", "Sora", Georgia, serif;
  --fundo-extra:none;
  --barra:264px;
  --raio:12px;
  --barra-tinta:#F6E9F0;
  --barra-tinta-suave:#C9A6B8;
  --barra-tinta-apagada:#A17F90;
  --barra-rule:rgba(255,255,255,.10);
  --barra-ativo-fundo:rgba(255,255,255,.14);
  --barra-ativo-tinta:#FFFFFF;
  --barra-selo:rgba(0,0,0,.28);
}

/* ------------------------------------------------------------------ DIA */
/* Papel rosado quente — o mesmo desenho, contraste recalculado e temperatura
   de marca. O acento é framboesa #A62C58 (passa em legibilidade sobre branco,
   o que rosa claro não faz). Halos e névoas somem: em fundo claro viram
   sujeira, não luz; no lugar entra uma lavagem de papel quente. */
@media (prefers-color-scheme: light){
  :root:not([data-tema="noite"]){
    --ground:#FBF6F6;
    --ground-2:#FFFFFF;
    --surface:#FFFFFF;
    --surface-2:#F8F0F1;
    --surface-3:#F1E3E6;
    --ink:#1E1418;
    --ink-soft:#5E4C54;
    --ink-faint:#7A646F;
    --rule:#EFE2E4;
    --rule-forte:#DCC7CC;

    --accent:#A62C58;
    --accent-texto:#8E2149;
    --accent-vidro:rgba(166,44,88,.08);
    --accent-brilho:rgba(166,44,88,.22);
    --tinta-no-acento:#FFFFFF;

    --ok:#1A7A5A;      --ok-vidro:rgba(14,138,98,.10);   --ok-borda:rgba(14,138,98,.28);
    --alerta:#8A5A12;  --alerta-vidro:rgba(143,94,12,.10); --alerta-borda:rgba(143,94,12,.28);
    --alerta-forte:#6A4409;
    --risco:#B3243F;   --risco-vidro:rgba(192,40,63,.09); --risco-borda:rgba(192,40,63,.28);
    --tinta-no-risco:#FFFFFF;

    --fio:rgba(166,44,88,.34);
    --fio-porta:rgba(166,44,88,.50);
    --halo-num:none;
    --halo-ok:none;
    --halo-alerta:none;
    --halo-risco:none;
    --brilho-logo:drop-shadow(0 3px 10px rgba(166,44,88,.20));
    --brilho-logo-porta:drop-shadow(0 8px 24px rgba(166,44,88,.22));
    --brilho-medidor:none;
    --brilho-medidor-risco:none;
    --brilho-ponto:none;
    --brilho-filtro:0 2px 12px rgba(166,44,88,.20);
    --nevoa-1:rgba(166,44,88,.09);
    --nevoa-2:rgba(214,160,110,.10);
    --nevoa-porta:rgba(166,44,88,.12);
    --barra-fundo:linear-gradient(180deg, #A62C58 0%, #7C1E40 100%);
    --sombra:0 1px 2px rgba(30,20,24,.05), 0 14px 32px -26px rgba(30,20,24,.35);
    --sombra-porta:0 1px 2px rgba(30,20,24,.06), 0 34px 64px -36px rgba(30,20,24,.30);
    --fundo-extra:radial-gradient(1100px 700px at 100% 0%, rgba(214,160,110,.16), transparent 60%),radial-gradient(900px 620px at 0% 100%, rgba(166,44,88,.09), transparent 62%);
    --barra-tinta:#FFF3F7;
    --barra-tinta-suave:#F2CBDA;
    --barra-tinta-apagada:#F2D0DE;
    --barra-rule:rgba(255,255,255,.20);
    --barra-ativo-fundo:rgba(255,255,255,.22);
    --barra-ativo-tinta:#FFFFFF;
    --barra-selo:rgba(0,0,0,.18);
  }
}
/* escolha explícita do usuário vence o sistema, nos dois sentidos */
:root[data-tema="dia"]{
  --ground:#FBF6F6;
  --ground-2:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F8F0F1;
  --surface-3:#F1E3E6;
  --ink:#1E1418;
  --ink-soft:#5E4C54;
  --ink-faint:#7A646F;
  --rule:#EFE2E4;
  --rule-forte:#DCC7CC;

  --accent:#A62C58;
  --accent-texto:#8E2149;
  --accent-vidro:rgba(166,44,88,.08);
  --accent-brilho:rgba(166,44,88,.22);
  --tinta-no-acento:#FFFFFF;

  --ok:#1A7A5A;      --ok-vidro:rgba(14,138,98,.10);   --ok-borda:rgba(14,138,98,.28);
  --alerta:#8A5A12;  --alerta-vidro:rgba(143,94,12,.10); --alerta-borda:rgba(143,94,12,.28);
  --alerta-forte:#6A4409;
  --risco:#B3243F;   --risco-vidro:rgba(192,40,63,.09); --risco-borda:rgba(192,40,63,.28);
  --tinta-no-risco:#FFFFFF;

  --fio:rgba(166,44,88,.34);
  --fio-porta:rgba(166,44,88,.50);
  --halo-num:none; --halo-ok:none; --halo-alerta:none; --halo-risco:none;
  --brilho-logo:drop-shadow(0 3px 10px rgba(166,44,88,.20));
  --brilho-logo-porta:drop-shadow(0 8px 24px rgba(166,44,88,.22));
  --brilho-medidor:none; --brilho-medidor-risco:none; --brilho-ponto:none;
  --brilho-filtro:0 2px 12px rgba(166,44,88,.20);
  --nevoa-1:rgba(166,44,88,.09);
  --nevoa-2:rgba(214,160,110,.10);
  --nevoa-porta:rgba(166,44,88,.12);
  --barra-fundo:linear-gradient(180deg, #A62C58 0%, #7C1E40 100%);
  --sombra:0 1px 2px rgba(30,20,24,.05), 0 14px 32px -26px rgba(30,20,24,.35);
  --sombra-porta:0 1px 2px rgba(30,20,24,.06), 0 34px 64px -36px rgba(30,20,24,.30);
  --fundo-extra:radial-gradient(1100px 700px at 100% 0%, rgba(214,160,110,.16), transparent 60%),radial-gradient(900px 620px at 0% 100%, rgba(166,44,88,.09), transparent 62%);
  --barra-tinta:#FFF3F7;
  --barra-tinta-suave:#F2CBDA;
  --barra-tinta-apagada:#F2D0DE;
  --barra-rule:rgba(255,255,255,.20);
  --barra-ativo-fundo:rgba(255,255,255,.22);
  --barra-ativo-tinta:#FFFFFF;
  --barra-selo:rgba(0,0,0,.18);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  background-color:var(--ground);
  background-image:var(--fundo-extra);
  background-attachment:fixed;
  color:var(--ink);
  font:15px/1.6 "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(760px 420px at 6% -6%, var(--nevoa-1), transparent 62%),
    radial-gradient(620px 380px at 92% 4%, var(--nevoa-2), transparent 60%);
}

a{color:var(--accent-texto);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ------------------------------------------------------------------ barra */
.barra{
  position:fixed; inset:0 auto 0 0; width:var(--barra); z-index:2;
  background:var(--barra-fundo);
  border-right:1px solid var(--barra-rule);
  color:var(--barra-tinta);
  backdrop-filter:blur(14px);
  display:flex; flex-direction:column; overflow-y:auto;
}
.marca{
  padding:26px 22px 20px; border-bottom:1px solid var(--barra-rule);
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.marca img.simbolo{width:64px; height:64px; display:block; filter:var(--brilho-logo)}
.marca .nome{
  font-family:var(--fonte-titulo);
  font-size:21px; font-weight:700; letter-spacing:.17em; line-height:1;
  text-transform:uppercase; color:var(--barra-tinta);
}
.marca .sub{
  font-size:11.5px; color:var(--barra-tinta-suave); line-height:1.45;
  letter-spacing:.02em; margin-top:6px;
}
.marca .demo{
  font-family:"IBM Plex Mono", monospace;
  font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--barra-tinta); background:var(--barra-selo);
  border:1px solid var(--barra-rule);
  padding:4px 9px; border-radius:3px;
}

nav{padding:14px 12px 22px; display:flex; flex-direction:column; gap:3px}
nav .grupo{
  font-family:"IBM Plex Mono", monospace;
  font-size:9.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--barra-tinta-apagada); padding:18px 12px 8px;
}
nav a{
  position:relative; display:flex; align-items:center; gap:10px;
  min-height:42px; padding:10px 13px; border-radius:7px;
  color:var(--barra-tinta-suave); font-size:14.5px; font-weight:500;
  transition:background .16s ease, color .16s ease;
}
nav a::before{
  content:""; position:absolute; left:0; top:50%;
  width:2px; height:0; border-radius:2px; background:var(--barra-ativo-tinta);
  transform:translateY(-50%); transition:height .18s ease;
}
nav a:hover{background:var(--barra-ativo-fundo); color:var(--barra-tinta); text-decoration:none}
nav a.ativo{background:var(--barra-ativo-fundo); color:var(--barra-ativo-tinta); font-weight:600}
nav a.ativo::before{height:20px; box-shadow:var(--brilho-medidor)}
nav .conta{
  margin-left:auto; font-family:"IBM Plex Mono", monospace;
  font-size:10.5px; font-weight:700;
  background:var(--barra-ativo-tinta); color:var(--accent);
  border-radius:10px; padding:2px 7px; min-width:20px; text-align:center;
}
.rodape-barra{
  margin-top:auto; padding:18px 22px; border-top:1px solid var(--barra-rule);
  font-size:11.5px; color:var(--barra-tinta-apagada); line-height:1.6;
}
.rodape-barra a{color:var(--barra-tinta); text-decoration:underline; text-underline-offset:2px}

/* ------------------------------------------------------- troca de tema */
.tema{
  display:flex; gap:4px; margin:0 0 14px;
  background:var(--barra-selo); border:1px solid var(--barra-rule);
  border-radius:20px; padding:3px;
}
.tema button{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:32px; padding:5px 8px;
  border:none; border-radius:16px; background:transparent;
  color:var(--barra-tinta-apagada); cursor:pointer;
  font-family:"IBM Plex Sans", sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:.04em;
  transition:background .16s ease, color .16s ease;
}
.tema button:hover{color:var(--barra-tinta)}
.tema button[aria-pressed="true"]{
  background:var(--barra-ativo-fundo); color:var(--barra-ativo-tinta);
}

/* --------------------------------------------------------------- conteúdo */
main{position:relative; z-index:1; margin-left:var(--barra); padding:34px 38px 80px; max-width:1560px}
.cabeca{margin-bottom:28px}
.cabeca h1{
  font-family:var(--fonte-titulo);
  font-size:clamp(24px,3vw,31px); font-weight:600; letter-spacing:-.02em;
  line-height:1.15; margin:0 0 8px; text-wrap:balance;
}
.cabeca p{margin:0; color:var(--ink-soft); max-width:76ch; font-size:14.5px}

h2{
  font-family:Sora, sans-serif;
  font-size:17px; font-weight:600; letter-spacing:-.01em; margin:38px 0 14px;
  display:flex; align-items:center; gap:12px;
}
h2::after{content:""; flex:1; height:1px; background:var(--rule)}
h2:first-child{margin-top:0}

/* ---------------------------------------------------------------- cartões */
.cartao{
  position:relative; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--raio);
  box-shadow:var(--sombra); margin-bottom:20px; overflow:hidden;
}
.cartao::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, var(--fio), transparent);
}
.cartao-cabeca{
  padding:15px 19px; border-bottom:1px solid var(--rule);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--surface-2);
}
.cartao-cabeca h3{font-family:Sora,sans-serif; margin:0; font-size:14.5px; font-weight:600}
.cartao-cabeca .nota{font-size:12.5px; color:var(--ink-faint); margin-left:auto}
.cartao-corpo{padding:19px}
.cartao-corpo > :last-child{margin-bottom:0}

/* ------------------------------------------------------------- mostradores */
.cifras{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:15px; margin-bottom:24px}
.cifra{
  position:relative;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--rule); border-radius:var(--raio);
  padding:17px 19px 18px; box-shadow:var(--sombra);
}
.cifra .rot{
  font-family:"IBM Plex Mono", monospace;
  font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-faint); display:block; margin-bottom:11px;
}
.cifra .val{
  font-family:"IBM Plex Mono", monospace; font-variant-numeric:tabular-nums;
  font-size:25px; font-weight:600; letter-spacing:-.025em; line-height:1.08;
  display:block; color:var(--ink); text-shadow:var(--halo-num);
}
.cifra .obs{font-size:12.5px; color:var(--ink-soft); margin-top:9px; display:block; line-height:1.5}
.cifra.ok .val{color:var(--ok); text-shadow:var(--halo-ok)}
.cifra.warn .val{color:var(--alerta); text-shadow:var(--halo-alerta)}
.cifra.risk .val{color:var(--risco); text-shadow:var(--halo-risco)}

/* ---------------------------------------------------------------- tabelas */
.rolagem{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13.5px}
th,td{padding:10px 15px; text-align:left; border-bottom:1px solid var(--rule); vertical-align:top}
thead th{
  font-family:"IBM Plex Mono", monospace;
  font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); background:var(--surface-2);
  border-bottom:1px solid var(--rule-forte);
  white-space:nowrap; position:sticky; top:0; z-index:1;
}
tbody tr{transition:background .13s ease}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right; font-family:"IBM Plex Mono", monospace; font-variant-numeric:tabular-nums; white-space:nowrap}
tfoot td{font-weight:600; background:var(--surface-2); border-top:1px solid var(--rule-forte); border-bottom:none}
.forte{font-weight:600; color:var(--ink)}
.mudo{color:var(--ink-faint)}
.sub{display:block; font-size:11.5px; color:var(--ink-faint); margin-top:3px; font-weight:400; line-height:1.45}
/* Documento não quebra linha: CNPJ partido ao meio é ilegível de relance. */
.cod{font-family:"IBM Plex Mono", monospace; font-size:12.5px; letter-spacing:-.01em}
td > .cod, td.cod{white-space:nowrap}

/* -------------------------------------------------------------- etiquetas */
.etiq{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
  padding:3px 9px; border-radius:20px; white-space:nowrap;
  border:1px solid transparent;
}
.ponto{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; box-shadow:var(--brilho-ponto)}
.e-ok{color:var(--ok); background:var(--ok-vidro); border-color:var(--ok-borda)}
.e-warn{color:var(--alerta); background:var(--alerta-vidro); border-color:var(--alerta-borda)}
.e-risk{color:var(--risco); background:var(--risco-vidro); border-color:var(--risco-borda)}
.e-accent{color:var(--accent-texto); background:var(--accent-vidro); border-color:var(--accent-brilho)}
.e-neutra{color:var(--ink-soft); background:var(--surface-3); border-color:var(--rule-forte)}

/* ---------------------------------------------------------------- medidor */
.medidor{height:7px; border-radius:4px; background:var(--surface-3); overflow:hidden; margin:11px 0 9px; border:1px solid var(--rule)}
.medidor > i{
  display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent-texto));
  box-shadow:var(--brilho-medidor);
}
.medidor.estourado > i{
  background:linear-gradient(90deg, var(--risco), var(--risco));
  box-shadow:var(--brilho-medidor-risco);
}

/* ---------------------------------------------------------------- alertas */
.alerta{
  position:relative; background:var(--surface);
  border:1px solid var(--rule); border-left:2px solid var(--risco);
  border-radius:var(--raio); box-shadow:var(--sombra);
  margin-bottom:17px; overflow:hidden;
}
.alerta.medio{border-left-color:var(--alerta)}
.alerta-cabeca{padding:17px 21px; display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap}
.alerta-cabeca h3{font-family:Sora,sans-serif; margin:0 0 5px; font-size:15.5px; font-weight:600}
.alerta-cabeca .resumo{margin:0; color:var(--ink-soft); font-size:14px}
.alerta-cabeca .cifra-lado{margin-left:auto; text-align:right; flex:none}
.alerta-cabeca .cifra-lado b{
  font-family:"IBM Plex Mono", monospace; font-variant-numeric:tabular-nums;
  font-size:19px; font-weight:600; display:block; letter-spacing:-.02em;
}
.alerta-cabeca .cifra-lado span{font-size:11px; color:var(--ink-faint)}
.alerta .porque{
  padding:13px 21px; background:var(--surface-2);
  border-top:1px solid var(--rule); font-size:13.5px; color:var(--ink-soft);
}

/* ------------------------------------------------------------------ fluxo */
.fluxo{display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:13px}
.fluxo .no{background:var(--surface-3); border:1px solid var(--rule-forte); border-radius:5px; padding:4px 10px; font-weight:500}
.fluxo .seta{color:var(--accent); font-size:15px}

/* ------------------------------------------------------------ aviso e filtros */
.aviso-demo{
  background:var(--alerta-vidro); border:1px solid var(--alerta-borda);
  color:var(--alerta); border-radius:var(--raio);
  padding:13px 17px; margin-bottom:24px; font-size:13.5px;
}
.aviso-demo b{font-weight:700; color:var(--alerta-forte)}

.filtros{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.filtros a{
  padding:7px 14px; border-radius:20px;
  border:1px solid var(--rule-forte); background:var(--surface);
  font-size:13px; color:var(--ink-soft); font-weight:500;
  transition:all .15s ease;
}
.filtros a:hover{background:var(--surface-2); color:var(--ink); text-decoration:none}
.filtros a.ativo{
  background:var(--accent-vidro); border-color:var(--accent);
  color:var(--accent-texto); box-shadow:var(--brilho-filtro);
}

/* ------------------------------------------------------------------ móvel */
@media (max-width:980px){
  :root{--barra:0px}
  .barra{position:static; width:auto; border-right:none; border-bottom:1px solid var(--rule)}
  .marca{flex-direction:row; align-items:center; gap:14px; padding:16px 18px}
  .marca img.simbolo{width:44px; height:44px}
  .marca .sub{display:none}
  nav{flex-direction:row; flex-wrap:wrap; padding:10px 14px 16px}
  nav .grupo{display:none}
  nav a{min-height:40px}
  nav a::before{display:none}
  .rodape-barra{display:flex; align-items:center; gap:14px; padding:12px 18px; font-size:11px}
  .tema{margin:0; width:auto; flex:none}
  main{margin-left:0; padding:22px 16px 60px}
  .cabeca h1{font-size:23px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
}

/* ==========================================================================
   PAINEL — a tela de início deixou de ser uma coluna só.

   Três defeitos que o Rafael apontou e o que resolve cada um:
   · "parece uma página inteira, nada para dividir" → duas colunas com papéis
     diferentes: o grupo à esquerda, o que pede atenção à direita.
   · "pouco interativo" → mostrador é LINK, e cada empresa ABRE. Número que não
     leva a lugar nenhum é cartaz, não painel.
   · "parece ter muito mais informação do que tem" → o parágrafo fiscal saiu de
     dentro da tabela. Ele era quase o mesmo texto repetido seis vezes: enchia a
     tela sem dizer nada de novo. Agora só aparece quando se abre a empresa.
   ========================================================================== */

.painel{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:20px; align-items:start;
}
@media (max-width:1180px){ .painel{grid-template-columns:1fr} }

/* ------------------------------------------------- mostrador que é link */
a.cifra{
  color:inherit; text-decoration:none; display:block;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
a.cifra:hover{
  text-decoration:none; transform:translateY(-2px);
  border-color:var(--accent); box-shadow:var(--brilho-filtro), var(--sombra);
}
.cifra .ir{
  display:block; margin-top:7px; color:var(--accent-texto);
  font-weight:600; font-size:12px; opacity:0; transform:translateX(-4px);
  transition:opacity .16s ease, transform .16s ease;
}
a.cifra:hover .ir, a.cifra:focus-visible .ir{opacity:1; transform:none}

/* ------------------------------------------------------ lista de empresas */
.empresas{display:flex; flex-direction:column}
.empresa{border-bottom:1px solid var(--rule)}
.empresa:last-child{border-bottom:none}

.empresa > summary{
  list-style:none; cursor:pointer;
  display:grid; align-items:center; gap:14px;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.85fr) 22px;
  padding:14px 19px;
  transition:background .14s ease;
}
.empresa > summary::-webkit-details-marker{display:none}
.empresa > summary:hover{background:var(--surface-2)}
.empresa > summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}

.empresa .quem b{display:block; font-weight:600; font-size:14.5px}
.empresa .chips{display:flex; gap:6px; flex-wrap:wrap}
.empresa .numeros{text-align:right}
.empresa .numeros b{
  display:block; font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums; font-size:14px; font-weight:600;
}
.empresa .numeros .sub{text-align:right}

/* a seta: gira ao abrir, para o estado ficar visível sem ler nada */
.empresa .abre{
  width:22px; height:22px; position:relative; justify-self:end;
  border-radius:50%; border:1px solid var(--rule-forte);
  transition:transform .2s ease, border-color .16s ease, background .16s ease;
}
.empresa .abre::before{
  content:""; position:absolute; left:50%; top:50%;
  width:6px; height:6px; margin:-4px 0 0 -3px;
  border-right:1.5px solid var(--ink-faint); border-bottom:1.5px solid var(--ink-faint);
  transform:rotate(45deg);
}
.empresa > summary:hover .abre{border-color:var(--accent); background:var(--accent-vidro)}
.empresa[open] .abre{transform:rotate(180deg); border-color:var(--accent)}

.empresa .detalhe{
  padding:4px 19px 20px 19px;
  background:var(--surface-2);
  border-top:1px solid var(--rule);
}
.empresa .detalhe .porque{
  margin:14px 0 0; color:var(--ink-soft); font-size:13.5px; max-width:68ch;
}
.empresa .detalhe .onde{
  margin:12px 0 0; color:var(--ink-faint); font-size:12px;
}

.mini{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px; margin:16px 0 0;
}
.mini > div{
  background:var(--surface); border:1px solid var(--rule);
  border-radius:8px; padding:11px 13px;
}
.mini dt{
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:6px;
}
.mini dd{
  margin:0; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:15px; font-weight:600;
}

/* --------------------------------------------------- lista de alertas */
.lista-alertas{list-style:none; margin:0; padding:0}
.lista-alertas li{border-bottom:1px solid var(--rule)}
.lista-alertas li:last-child{border-bottom:none}
.lista-alertas a{
  display:grid; grid-template-columns:3px minmax(0,1fr) auto;
  gap:13px; align-items:center;
  padding:14px 19px; color:inherit; text-decoration:none;
  transition:background .14s ease;
}
.lista-alertas a:hover{background:var(--surface-2); text-decoration:none}
.marca-grav{align-self:stretch; border-radius:2px; background:var(--alerta)}
.marca-grav.grave{background:var(--risco)}
.lista-alertas .corpo b{display:block; font-size:13.5px; font-weight:600; line-height:1.35}
.lista-alertas .corpo .sub{margin-top:4px}
.lista-alertas .valor{
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:13px; font-weight:600; white-space:nowrap; color:var(--ink-soft);
}
.lista-alertas .vazio{padding:20px 19px; color:var(--ink-faint); font-size:13.5px}

@media (max-width:620px){
  .empresa > summary{grid-template-columns:minmax(0,1fr) 22px; gap:10px}
  .empresa .chips{grid-column:1 / -1}
  .empresa .numeros{grid-column:1 / -1; text-align:left}
  .empresa .numeros .sub{text-align:left}
}

/* O primeiro mostrador vem cheio de cor. Com todos neutros, a tela ficava sem
   ponto de entrada — o olho não sabia por onde começar. */
.cifra.destaque{
  background:var(--accent); border-color:var(--accent); color:var(--tinta-no-acento);
}
.cifra.destaque .rot{color:var(--tinta-no-acento); opacity:.72}
.cifra.destaque .val{color:var(--tinta-no-acento); text-shadow:none}
.cifra.destaque .obs{color:var(--tinta-no-acento); opacity:.82}
a.cifra.destaque .ir{color:var(--tinta-no-acento)}
a.cifra.destaque:hover{filter:brightness(1.06)}

/* ==========================================================================
   ALERTA QUE ABRE — o mesmo tratamento da tela de início.
   Antes cada alerta despejava a tabela inteira na tela: cinco tabelas
   empilhadas, e a página parecia não acabar. Agora a tela mostra cinco
   cabeçalhos e só abre o que interessa.
   ========================================================================== */
details.alerta > summary{
  list-style:none; cursor:pointer;
  display:grid; align-items:center; gap:15px;
  grid-template-columns:auto minmax(0,1fr) auto 22px;
  padding:16px 21px;
  transition:background .14s ease;
}
details.alerta > summary::-webkit-details-marker{display:none}
details.alerta > summary:hover{background:var(--surface-2)}
details.alerta > summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}

.alerta .grav{
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:4px 9px; border-radius:20px; white-space:nowrap;
  color:var(--alerta); background:var(--alerta-vidro); border:1px solid var(--alerta-borda);
}
.alerta .grav.alto{color:var(--risco); background:var(--risco-vidro); border-color:var(--risco-borda)}
.alerta .corpo b{display:block; font-family:Sora,sans-serif; font-size:15px; font-weight:600; line-height:1.3}
.alerta .corpo .sub{margin-top:4px}
.alerta .cifra-lado{text-align:right}
.alerta .abre{
  width:22px; height:22px; position:relative; justify-self:end;
  border-radius:50%; border:1px solid var(--rule-forte);
  transition:transform .2s ease, border-color .16s ease, background .16s ease;
}
.alerta .abre::before{
  content:""; position:absolute; left:50%; top:50%;
  width:6px; height:6px; margin:-4px 0 0 -3px;
  border-right:1.5px solid var(--ink-faint); border-bottom:1.5px solid var(--ink-faint);
  transform:rotate(45deg);
}
details.alerta > summary:hover .abre{border-color:var(--accent); background:var(--accent-vidro)}
details.alerta[open] .abre{transform:rotate(180deg); border-color:var(--accent)}
details.alerta[open] > summary{border-bottom:1px solid var(--rule)}

/* títulos curtos dentro do bloco aberto */
.detalhe h4{
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  margin:18px 0 8px;
}

@media (max-width:760px){
  details.alerta > summary{grid-template-columns:minmax(0,1fr) 22px; gap:10px}
  .alerta .grav{grid-column:1 / -1; justify-self:start}
  .alerta .cifra-lado{grid-column:1 / -1; text-align:left}
}