/* Central de Controle — mockup v3 ("clean")
   Toda cor/espaço/raio/sombra vem de assets/tokens.css (+ tokens-extensao.css).
   Regras: página branca; card = borda, sem sombra; 1 selo colorido por linha.
   Tamanhos por tela: titulo-3 · corpo-p · micro (modais: titulo-4 · corpo-p · micro).

   ── CONTRATO DE COR ────────────────────────────────────────────────────────────────────
   Uma cor, um significado. Vale para as duas telas de módulo e para as de configuração.

     VERMELHO   precisa de você agora — erro que interrompe, e ação que não se desfaz.
                `.alerta-erro`, `.selo-erro`, `.btn-destrutivo`, `.estado-erro`.
     LARANJA    atenção, mas dá para seguir — dado parcial, medição velha, aviso de limite.
                `.alerta-atencao`, `.selo-atencao`, `.estado-atencao`.
     VERDE      deu certo, ou está no lugar — "Salvo", situação normal, valor positivo.
                `.alerta-ok`, `.selo-ok`, `.estado-ok`, `.positivo`.
     AZUL       contexto e navegação — o que a tela está mostrando, e para onde se vai.
                `.alerta-info`, `.selo-info`, `.selo-marca`, `.btn-primario`, destaque.

   O vermelho já significou cinco coisas ao mesmo tempo: erro, marca, destaque de KPI, aba
   ativa, sobretítulo e separador de trilha. Como `--al-erro-*` e `--al-acento-*` apontam para
   a MESMA rampa, um KPI em destaque e um alerta de erro tinham a mesma borda esquerda de 4 px
   — e a cor mais forte da interface não queria dizer nada em particular. O acento saiu do
   papel de "olhe aqui"; quem faz destaque agora é a primária.

   Δ negativo e asterisco de campo obrigatório continuam vermelhos: são convenções que o leitor
   traz de fora, e nenhum dos dois compete com um alerta pela mesma leitura.
   ───────────────────────────────────────────────────────────────────────────────────────  */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; overflow-x: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
a { color: var(--al-primaria); text-decoration: none; } a:hover { text-decoration: underline; }
p a, .alerta a { text-decoration: underline; }
svg { flex: none; }

/* ---------- utilitários ---------- */
/* O sobretítulo era vermelho em toda tela do produto — a cor de erro, permanente, no alto
   da página. Em cinza de apoio ele continua cumprindo o papel (dizer de qual grupo é a
   tela) sem disputar a leitura com um alerta de verdade. */
.overline { font-size: var(--al-txt-micro); font-weight: var(--al-peso-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--al-texto-apoio); margin: 0 0 var(--al-esp-1); }
.num { font-family: var(--al-fonte-mono); font-variant-numeric: tabular-nums; }
.tab { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--al-fonte-mono); font-size: var(--al-txt-micro); color: var(--al-texto-apoio); }
.obrig { color: var(--al-acento); font-weight: var(--al-peso-bold); }
.apoio { color: var(--al-texto-apoio); font-size: var(--al-txt-micro); }
.sec { color: var(--al-texto-secundario); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.linha { display: flex; align-items: center; gap: var(--al-esp-2); flex-wrap: wrap; }
.linha-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--al-esp-3); flex-wrap: wrap; }
.mt-2 { margin-top: var(--al-esp-2); } .mt-4 { margin-top: var(--al-esp-4); } .mt-6 { margin-top: var(--al-esp-6); }
.mb-4 { margin-bottom: var(--al-esp-4); } .mb-6 { margin-bottom: var(--al-esp-6); }
/* `.negativo` aponta para o token de ERRO, e não o de acento: os dois resolvem para o mesmo
   vermelho hoje, mas a intenção fica escrita — se um dia a marca mudar de cor, Δ negativo
   não muda junto. */
.positivo { color: var(--al-sucesso-texto); } .negativo { color: var(--al-erro-texto); }
.dir { text-align: right; }

/* ======================================================================
   SHELL
   ====================================================================== */
.app { display: grid; grid-template-columns: var(--al-largura-sidebar) 1fr; height: 100vh; overflow: hidden; transition: grid-template-columns var(--al-dur-media) var(--al-easing); }
/* Some de vez, e não vira trilha de ícones — redesenhar cada item do menu para caber só no
   ícone seria outra tela, e não foi o que pediram. `overflow: hidden` no `.app` acima é o que
   evita o conteúdo da lateral vazar enquanto a coluna encolhe até 0. */
.app.sidebar-colapsada { grid-template-columns: 0 1fr; }
/* Sem isto, a coluna encolhe até 0 mas o CONTEÚDO da lateral (o seletor de módulo, o retrato do
   rodapé) não acompanha — flex items não encolhem sozinhos — e fica visível por cima da página,
   flutuando sobre o título. O `overflow: hidden` do `.app` não ajuda: só corta o que passaria do
   viewport, não o que um irmão de grid pinta por cima de outro dentro da mesma caixa. */
.app.sidebar-colapsada .sidebar { border-right: 0; overflow: hidden; }
/* O `--al-neutro-50` é uma cor FIXA: no tema escuro a lateral continuava branca enquanto o
   resto escurecia, e a tela saía metade clara, metade escura. O valor claro fica como está —
   é o visual aprovado, e `--al-superficie-alt` sairia mais acinzentado —, e o escuro entra
   como exceção logo abaixo. */
.sidebar { background: var(--al-neutro-50); border-right: 1px solid var(--al-borda); display: flex; flex-direction: column; min-width: 0; height: 100vh; }

/* O arquivo já trazia o override do escuro para `[data-tema="escuro"]` (logo abaixo); o que
   faltava era o mesmo para quem só tem o tema do sistema, que é a maioria. Sem esta regra, a
   lateral ficava branca com o resto escuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .sidebar { background: var(--al-superficie); }
}
:root[data-tema="escuro"] .sidebar { background: var(--al-superficie); }
.sb-topo { padding: var(--al-esp-5) var(--al-esp-4) var(--al-esp-3); display: flex; flex-direction: column; gap: var(--al-esp-3); flex: none; }
.sb-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; padding: var(--al-esp-2) var(--al-esp-3) var(--al-esp-4); }
.sb-nav::-webkit-scrollbar { width: 6px; } .sb-nav::-webkit-scrollbar-thumb { background: var(--al-neutro-300); border-radius: var(--al-raio-full); }
.sb-rodape { flex: none; border-top: 1px solid var(--al-borda); padding: var(--al-esp-3) var(--al-esp-4); display: flex; align-items: center; justify-content: flex-end; gap: var(--al-esp-2); font-size: var(--al-txt-micro); color: var(--al-texto-apoio); font-variant-numeric: tabular-nums; }
.rodape-perfil { position: relative; }
.sb-rodape .estado-sync { display: flex; align-items: center; gap: var(--al-esp-2); flex: 1; min-width: 0; cursor: pointer; background: none; border: 0; padding: var(--al-esp-1) 0; text-align: left; color: inherit; font: inherit; }
.sb-rodape .estado-sync b { display: block; color: var(--al-texto-secundario); font-weight: var(--al-peso-medio); }
.sb-rodape .ponto { width: 8px; height: 8px; border-radius: var(--al-raio-full); background: var(--al-sucesso-600); flex: none; }
/* ======================================================================
   MARCA — logotipo e símbolo
   ====================================================================== */

/* O logotipo tem duas versões porque a marca tem duas, e o vermelho muda entre elas:
   #E13120 sobre claro, #EC1C24 sobre escuro. Não é a mesma arte recolorida por CSS — é o
   arquivo oficial de cada fundo. Por isso as duas vão no HTML e o CSS esconde a que não serve;
   assim a troca acontece sem JavaScript e sem piscar na primeira pintura. */
.logotipo { display: inline-block; line-height: 0; }
.logotipo img { display: block; height: 100%; width: auto; }
.logotipo .negativo { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logotipo .principal { display: none; }
  :root:not([data-tema="claro"]) .logotipo .negativo { display: block; }
}
:root[data-tema="escuro"] .logotipo .principal { display: none; }
:root[data-tema="escuro"] .logotipo .negativo { display: block; }
:root[data-tema="claro"] .logotipo .principal { display: block; }
:root[data-tema="claro"] .logotipo .negativo { display: none; }

.marca { display: flex; align-items: center; gap: var(--al-esp-3); }
.marca img { width: 32px; height: 32px; border-radius: var(--al-raio-sm); }
.marca b { font-family: var(--al-fonte-display); font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-bold); color: var(--al-primaria); line-height: 1.2; display: block; }
.marca span { display: block; font-size: var(--al-txt-micro); font-weight: var(--al-peso-medio); color: var(--al-texto-apoio); }
.modulo { position: relative; }
.modulo > button { width: 100%; min-height: 48px; display: flex; align-items: center; gap: var(--al-esp-3); padding: 0 var(--al-esp-3); background: var(--al-superficie); border: 1px solid var(--al-borda); border-radius: var(--al-raio-md); cursor: pointer; text-align: left; transition: border-color var(--al-dur-rapida) var(--al-easing), box-shadow var(--al-dur-rapida) var(--al-easing); }
.modulo > button:hover { border-color: var(--al-borda-forte); box-shadow: var(--al-sombra-sm); }
.modulo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.modulo .rot { display: block; font-size: var(--al-txt-micro); color: var(--al-texto-apoio); line-height: 1.2; }
.modulo .nome { display: block; font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-semi); color: var(--al-primaria); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modulo .ico { color: var(--al-primaria); flex: none; } .modulo .chev { flex: none; color: var(--al-texto-apoio); }
.pop { position: absolute; z-index: 40; background: var(--al-superficie); border: 1px solid var(--al-borda); border-radius: var(--al-raio-lg); box-shadow: var(--al-sombra-lg); padding: var(--al-esp-2); min-width: 240px; animation: al-aparecer var(--al-dur-rapida) var(--al-easing); }
.pop.abaixo { top: calc(100% + var(--al-esp-1)); left: 0; right: 0; } .pop.direita { top: calc(100% + var(--al-esp-1)); right: 0; }
/* Abre para CIMA, e não para baixo: é o popup do rodapé da lateral — "abaixo" sairia da tela. */
.pop.acima { bottom: calc(100% + var(--al-esp-1)); right: 0; min-width: 200px; }
.pop .pop-cab { padding: var(--al-esp-2) var(--al-esp-3); font-size: var(--al-txt-micro); color: var(--al-texto-apoio); }
.pop .pop-cab b { display: block; color: var(--al-texto); font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-semi); }
.pop .pop-item { display: flex; align-items: center; gap: var(--al-esp-3); width: 100%; padding: var(--al-esp-2) var(--al-esp-3); min-height: 40px; border: 0; background: none; border-radius: var(--al-raio-md); font-size: var(--al-txt-corpo-p); color: var(--al-texto); cursor: pointer; text-align: left; }
.pop .pop-item:hover { background: var(--al-primaria-suave); }
.pop .pop-item.ativo { color: var(--al-primaria); font-weight: var(--al-peso-semi); }
.pop .pop-item[aria-disabled="true"] { color: var(--al-neutro-400); cursor: not-allowed; }
.pop .pop-item .selo { margin-left: auto; } .pop hr { border: 0; border-top: 1px solid var(--al-borda); margin: var(--al-esp-2) 0; }
/* Só o popup do retrato do rodapé (`Shell.tsx`) — os dois itens lado a lado, ícone em cima do
   rótulo, em vez de empilhados. `.pop-item` continua compartilhada com os popups que empilham
   (trocar de módulo): a mudança fica escopada aqui, não na regra de base. */
.pop.acima.pop-linha { display: flex; gap: var(--al-esp-1); min-width: 176px; }
.pop-linha .pop-item {
  width: auto; flex: 1; flex-direction: column; justify-content: center;
  gap: var(--al-esp-1); padding: var(--al-esp-3) var(--al-esp-2); text-align: center;
}
.grupo { margin-bottom: var(--al-esp-1); }
.grupo-cab, .nav a { display: flex; align-items: center; gap: var(--al-esp-3); width: 100%; min-height: 44px; padding: 0 var(--al-esp-3); border: 0; border-left: 3px solid transparent; border-radius: var(--al-raio-md); background: none; font-size: var(--al-txt-corpo-p); color: var(--al-texto-secundario); text-decoration: none; cursor: pointer; text-align: left; white-space: nowrap; transition: background var(--al-dur-rapida) var(--al-easing), color var(--al-dur-rapida) var(--al-easing), border-left-color var(--al-dur-media) var(--al-easing), transform var(--al-dur-rapida) var(--al-easing); }
/* Título comprido ("Centros de custo e locais") sem isto vazava para fora da lateral — texto
   solto ao lado de um ícone não encolhe sozinho num flex row. `.rotulo-nav` é o mesmo truque
   de `.modulo .nome`: vira o item flexível que trunca, o ícone (que já é `flex: none` global)
   continua do tamanho dele. */
.rotulo-nav { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.grupo-cab { font-weight: var(--al-peso-semi); } .nav a { font-weight: var(--al-peso-medio); }
.grupo-cab:hover, .nav a:hover { background: var(--al-primaria-suave); color: var(--al-primaria); text-decoration: none; transform: translateX(2px); }
.grupo-cab .chev { margin-left: auto; transition: transform var(--al-dur-rapida) var(--al-easing), color var(--al-dur-rapida) var(--al-easing); color: var(--al-texto-apoio); }
.grupo-cab[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* A seta acompanha o grupo: cinza fechada, azul ao passar o mouse OU quando o grupo está
   aberto — a mesma cor que o rótulo já ganha em `.grupo-cab:hover`, em vez de ficar cinza
   sozinha no meio de uma linha azul. */
.grupo-cab:hover .chev, .grupo-cab[aria-expanded="true"] .chev { color: var(--al-primaria); }
.grupo-cab.pai-ativo { color: var(--al-primaria); }
/* O desdobrar entra com uma leve queda + esmaecido — sem isto a lista de itens aparecia de
   um corte só, no mesmo instante do clique. Só a ENTRADA anima (o fechar continua instantâneo,
   via `{aberto && (...)}` no componente): animar a saída pediria manter a lista sempre montada
   e escondida por altura, e isso reabre a lista para navegação por Tab enquanto "fechada". */
@keyframes al-desdobrar { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
/* Mesma ideia do desdobrar acima, mas sem direção fixa — serve pop-overs que abrem tanto para
   baixo (`.pop.abaixo`/`.pop.direita`) quanto para cima (`.pop.acima`), então um translateY
   único erraria a direção de um dos dois casos. */
@keyframes al-aparecer { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }
.grupo-itens { list-style: none; margin: 0; padding: 0; animation: al-desdobrar .16s var(--al-easing); }
.grupo-cab[aria-expanded="false"] + .grupo-itens { display: none; }
.grupo-itens a { padding-left: 44px; }
.nav a.ativo { background: var(--al-azul-100); color: var(--al-primaria); font-weight: var(--al-peso-semi); border-left-color: var(--al-primaria); }
:root[data-tema="escuro"] .nav a.ativo { background: var(--al-superficie-alt); }
/* Esqueleto de carregamento e o giro da barra de filtros.
   O esqueleto precisa ter a FORMA do que vai chegar; blocos genéricos fazem a tela saltar
   quando o conteúdo entra, que é justamente o que ele existe para evitar. */
@keyframes al-pulsar { 0%,100% { opacity: .5 } 50% { opacity: .9 } }
@keyframes al-girar { to { transform: rotate(360deg) } }
.esqueleto { background: var(--al-neutro-100); border-radius: var(--al-raio-sm); height: 12px; animation: al-pulsar 1.4s var(--al-easing) infinite; }
:root[data-tema="escuro"] .esqueleto { background: var(--al-superficie-alt); }
.kpi .esqueleto { margin: var(--al-esp-2) 0; }
.girando { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--al-borda); border-top-color: var(--al-primaria); border-radius: var(--al-raio-full); animation: al-girar .7s linear infinite; flex: none; }
/* A barra inteira esmaece enquanto o filtro novo carrega: o clique responde na hora, e fica
   claro que o número na tela ainda é o antigo. */
.barra-filtros.carregando { opacity: .55; pointer-events: none; }
.contagem { margin-left: auto; font-family: var(--al-fonte-mono); font-size: var(--al-txt-micro); font-weight: var(--al-peso-bold); background: var(--al-erro-fundo); color: var(--al-erro-texto); padding: 2px var(--al-esp-2); border-radius: var(--al-raio-full); min-width: 24px; text-align: center; }
.sb-divisor { display: flex; align-items: center; gap: var(--al-esp-2); margin: var(--al-esp-4) var(--al-esp-3) var(--al-esp-2); font-size: var(--al-txt-micro); font-weight: var(--al-peso-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--al-texto-apoio); }
.sb-divisor::after { content: ""; flex: 1; height: 1px; background: var(--al-borda); }

.conteudo { display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow-y: auto; background: var(--al-superficie); }
:root[data-tema="escuro"] .conteudo { background: var(--al-fundo); }
.topo { height: var(--al-altura-header); flex: none; background: var(--al-superficie); border-bottom: 1px solid var(--al-borda); display: flex; align-items: center; gap: var(--al-esp-4); padding: 0 var(--al-esp-8); position: sticky; top: 0; z-index: 30; }
.topo .btn-menu { display: none; }
.topo .btn-colapsar svg { transition: transform var(--al-dur-media) var(--al-easing); }
.breadcrumb { font-size: var(--al-txt-micro); font-weight: var(--al-peso-medio); color: var(--al-texto-apoio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb a { color: var(--al-texto-apoio); } .breadcrumb a:hover { color: var(--al-primaria); text-decoration: none; }
.breadcrumb i { font-style: normal; color: var(--al-borda); margin: 0 var(--al-esp-2); font-weight: var(--al-peso-bold); }
.breadcrumb b { color: var(--al-texto-secundario); font-weight: var(--al-peso-semi); }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: var(--al-esp-2); position: relative; }
.avatar { width: 36px; height: 36px; border-radius: var(--al-raio-full); background: var(--al-azul-700); color: var(--al-neutro-0); display: grid; place-items: center; font-size: var(--al-txt-micro); font-weight: var(--al-peso-bold); border: 0; cursor: pointer; flex: none; transition: background var(--al-dur-rapida) var(--al-easing), transform var(--al-dur-rapida) var(--al-easing), box-shadow var(--al-dur-rapida) var(--al-easing); }
.avatar:hover { background: var(--al-azul-800); transform: scale(1.06); box-shadow: var(--al-sombra-sm); }
.avatar:active { transform: scale(.96); box-shadow: none; }

/* ======================================================================
   PÁGINA · GRADE · RITMO
   ====================================================================== */
.pagina { padding: var(--al-esp-8); width: 100%; min-width: 0; }
.cabecalho-pagina { display: flex; align-items: flex-start; gap: var(--al-esp-4); margin-bottom: var(--al-esp-2); flex-wrap: wrap; }
.cabecalho-pagina > div:first-child { flex: 1 1 360px; min-width: 0; }
.cabecalho-pagina h1 { font-size: var(--al-txt-titulo-3); font-weight: var(--al-peso-bold); color: var(--al-primaria); margin: 0; line-height: var(--al-lh-titulo); }
.cabecalho-pagina p { font-size: var(--al-txt-corpo-p); color: var(--al-texto-secundario); margin: var(--al-esp-1) 0 0; max-width: 68ch; }
.cabecalho-acoes { margin-left: auto; margin-top: var(--al-esp-5); display: flex; gap: var(--al-esp-2); align-items: center; flex-wrap: wrap; }
.cabecalho-pagina + .barra-filtros, .cabecalho-pagina + .empilha, .cabecalho-pagina + .grade, .cabecalho-pagina + .tabela-envolve, .cabecalho-pagina + .abas, .cabecalho-pagina + .card, .cabecalho-pagina + .alerta { margin-top: var(--al-esp-6); }
.grade { display: grid; gap: var(--al-esp-6); }
.grade-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--al-esp-6); }
.grade-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--al-esp-6); }
.c-3 { grid-column: span 3; } .c-4 { grid-column: span 4; } .c-6 { grid-column: span 6; } .c-8 { grid-column: span 8; } .c-12 { grid-column: span 12; }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Duas colunas FIXAS, não `auto-fit` — é para os quatro acordeões do "Detalhamento" (Postos),
   sempre em número par. Com `auto-fit` o número de colunas muda com a largura do cartão: numa
   largura que cabem 3, o quarto item sobra sozinho numa terceira coluna vazia dos dois lados —
   pareceu "desconectado" do resto da grade. Fixando em 2, o último item sempre cai debaixo do
   segundo, nunca sozinho numa ponta. */
.grade-detalhe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-kpi { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.empilha { display: flex; flex-direction: column; gap: var(--al-esp-8); }
.secao-titulo { display: flex; align-items: baseline; gap: var(--al-esp-2); margin: var(--al-esp-8) 0 var(--al-esp-4); }
.secao-titulo:first-child { margin-top: 0; }
.secao-titulo h2 { font-family: var(--al-fonte-display); font-size: var(--al-txt-titulo-4); font-weight: var(--al-peso-bold); color: var(--al-primaria); margin: 0; }
.secao-titulo span { font-size: var(--al-txt-micro); color: var(--al-texto-apoio); }
.secao-titulo .acoes { margin-left: auto; }

/* Só de Postos — rótulo maiúsculo com fio à direita, como o painel de referência. A
   `.secao-titulo` genérica (acima) continua servindo as telas de PF; esta não a substitui,
   existe ao lado dela. */
.secao-titulo-postos { display: flex; align-items: center; gap: var(--al-esp-3);
  margin: var(--al-esp-8) 0 var(--al-esp-4); }
.secao-titulo-postos:first-child { margin-top: 0; }
.secao-titulo-postos h2 { font-family: var(--al-fonte-mono); font-size: var(--al-txt-micro);
  font-weight: var(--al-peso-bold); letter-spacing: .08em; text-transform: uppercase;
  color: var(--al-primaria); margin: 0; white-space: nowrap; }
.secao-titulo-postos::after { content: ""; flex: 1; height: 1px; background: var(--al-borda); }
.apoio-secao > .secao-titulo-postos h2 { color: var(--al-texto-secundario); }

/* faixa de completude — uma linha, sem caixa */
.faixa { display: flex; align-items: center; gap: var(--al-esp-2); flex-wrap: wrap; font-size: var(--al-txt-micro); color: var(--al-texto-secundario); margin: var(--al-esp-2) 0 0; font-variant-numeric: tabular-nums; }
.faixa svg { color: var(--al-neutro-500); } .faixa a { font-weight: var(--al-peso-semi); } .faixa .sep { color: var(--al-neutro-400); }

/* ---------- botões (DS §5) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--al-esp-2); height: 40px; padding: 0 var(--al-esp-4); border-radius: var(--al-raio-md); font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-semi); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--al-dur-rapida) var(--al-easing), border-color var(--al-dur-rapida) var(--al-easing), box-shadow var(--al-dur-rapida) var(--al-easing), transform var(--al-dur-rapida) var(--al-easing); }
.btn:hover { text-decoration: none; }
/* O "squish" do clique — especificidade acima do :hover das variantes (duas pseudo-classes a
   mais) de propósito: sem isso, um clique com o mouse ainda em cima do botão perderia a
   disputa de cascata para o `translateY` do hover, e o toque nunca apareceria. */
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.97); box-shadow: none; }
.btn-primario { background: var(--al-primaria); color: var(--al-texto-invertido); } .btn-primario:hover { background: var(--al-primaria-hover); box-shadow: var(--al-sombra-sm); transform: translateY(-1px); }
.btn-secundario { background: transparent; color: var(--al-primaria); border-color: var(--al-primaria); } .btn-secundario:hover { background: var(--al-primaria-suave); box-shadow: var(--al-sombra-sm); transform: translateY(-1px); }
.btn-terciario { background: transparent; color: var(--al-primaria); } .btn-terciario:hover { background: var(--al-primaria-suave); }
.btn-destrutivo { background: var(--al-acento-acao); color: var(--al-neutro-0); } .btn-destrutivo:hover { background: var(--al-vermelho-800); box-shadow: var(--al-sombra-sm); transform: translateY(-1px); }
.btn-sm { height: 32px; padding: 0 var(--al-esp-3); } .btn-ico { width: 40px; padding: 0; } .btn-ico.btn-sm { width: 32px; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--al-neutro-100); color: var(--al-neutro-400); cursor: not-allowed; border-color: transparent; transform: none; box-shadow: none; }

/* ---------- cards ---------- */
.card { background: var(--al-superficie); border: 1px solid var(--al-borda); border-radius: var(--al-raio-lg); padding: var(--al-esp-6); }
/* Destaque em AZUL, não em vermelho.
   `.alerta` também é `border-left: 4px solid`, e `.alerta-erro` é vermelho: o KPI mais
   importante da tela e a falha mais grave dela tinham exatamente a mesma assinatura. Quem
   olha de longe via duas barras vermelhas e não sabia qual era qual. */
.card-destaque { border-left: 4px solid var(--al-primaria); }
.card-institucional { background: var(--al-azul-700); color: var(--al-neutro-0); border: 0; }
.card-institucional .overline { color: var(--al-vermelho-400); }
.card-cabecalho { display: flex; align-items: baseline; gap: var(--al-esp-3); margin-bottom: var(--al-esp-4); flex-wrap: wrap; }
.card-cabecalho h2 { font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-bold); color: var(--al-primaria); margin: 0; font-family: var(--al-fonte-display); }

/* O ponto de cor de cada viagem — mesma ordem, mesma cor de `CORES` (Graficos.tsx), do
   cartão até a tabela de lançamentos embaixo. Com várias viagens abertas ao longo da sessão,
   é o que permite ligar "esta tabela" a "aquele cartão" sem reler o nome inteiro. Decorativo,
   não é a única forma de diferenciar — o nome continua por extenso ao lado. */
.ponto-viagem { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: var(--al-esp-2); flex-shrink: 0; }
.card-cabecalho .dica { font-size: var(--al-txt-micro); color: var(--al-texto-apoio); max-width: 44ch; }
.card-cabecalho .acoes { margin-left: auto; display: flex; gap: var(--al-esp-2); align-items: center; }
.card .tabela-envolve { border: 0; border-radius: 0; }
.card .alerta { padding: var(--al-esp-3) var(--al-esp-4); }
.legenda { display: inline-flex; gap: var(--al-esp-3); font-size: var(--al-txt-micro); color: var(--al-texto-apoio); align-items: center; }
.legenda i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: var(--al-primaria); vertical-align: middle; margin-right: 4px; }
.legenda i.tick { width: 2px; height: 12px; background: var(--al-acento); }
.legenda i.tracejado { height: 0; border-top: 2px dashed var(--al-acento); background: none; }

/* ---------- tooltip de gráfico (Dica.tsx) ---------- */
/* `position: relative` é o que ancora o balão absoluto; sem isto ele posicionaria contra o
   próximo ancestral posicionado (o `<body>`, geralmente), longe de onde o mouse está. */
.grafico-comp { position: relative; }
.grafico-dica {
  position: absolute; z-index: 20; pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  background: var(--al-neutro-900); color: var(--al-neutro-0);
  font-size: var(--al-txt-micro); font-family: var(--al-fonte-mono);
  white-space: nowrap; padding: var(--al-esp-2) var(--al-esp-3);
  border-radius: var(--al-raio-md); box-shadow: var(--al-sombra-lg);
  line-height: 1.5;
}

/* ---------- KPI ---------- */
.kpi { background: var(--al-superficie); border: 1px solid var(--al-borda); border-radius: var(--al-raio-lg); padding: var(--al-esp-5) var(--al-esp-6); min-height: 112px; min-width: 0; text-decoration: none; color: inherit; display: block; transition: box-shadow var(--al-dur-rapida) var(--al-easing), border-color var(--al-dur-rapida) var(--al-easing); }
a.kpi:hover { box-shadow: var(--al-sombra-md); border-color: var(--al-azul-200); text-decoration: none; }
.kpi .rotulo { font-size: var(--al-txt-micro); font-weight: var(--al-peso-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--al-texto-apoio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sem `white-space: nowrap` no valor, e `min-width: 0` no card: era o que fazia um valor
   grande ("R$ 11.495.403,93") vazar pela borda do card em vez de quebrar, num KPI estreito
   (4-5 por linha). O `moeda()` usa espaço fino entre "R$" e o número (Intl pt-BR), que não
   quebra linha sozinho — e sem `min-width: 0` o item de grid nunca encolhia abaixo do
   tamanho mínimo do conteúdo, então `break-word` não tinha onde agir. `overflow-wrap: anywhere`
   quebra dentro do número quando precisa, e conta para o tamanho mínimo do grid (`break-word`
   não conta, é só uma preferência de quebra — por isso vazava mesmo com ele presente).
   `.faixa-kpis .valor`, ao lado, nunca teve esse problema por não estar num grid apertado. */
.kpi .valor { font-family: var(--al-fonte-display); font-size: var(--al-txt-titulo-3); font-weight: var(--al-peso-bold); color: var(--al-texto); font-variant-numeric: tabular-nums; margin: var(--al-esp-1) 0; line-height: 1.1; overflow-wrap: anywhere; }
.grade-5 .kpi .valor { font-size: var(--al-txt-titulo-4); }
.grade-5 .kpi .rotulo { white-space: normal; overflow: visible; }
.kpi .nota { font-size: var(--al-txt-micro); color: var(--al-texto-apoio); display: flex; align-items: center; gap: var(--al-esp-1); font-variant-numeric: tabular-nums; }

/* Fileira de KPIs agrupados — só a Visão geral de Postos, por ora. Ver `FaixaKpis`/`ColKpi`
   em componentes/postos/Blocos.tsx: o mesmo `.rotulo`/`.valor`/`.nota` do `.kpi` acima, sem
   borda própria, porque quem desenha a borda aqui é o bloco inteiro. */
.faixa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid var(--al-borda); border-top: 3px solid var(--al-primaria);
  border-radius: var(--al-raio-lg); background: var(--al-superficie); overflow: hidden; }
.faixa-kpis .kpi-col { padding: var(--al-esp-4) var(--al-esp-5); border-left: 1px solid var(--al-borda); min-width: 0; }
.faixa-kpis .kpi-col:first-child { border-left: 0; }
.faixa-kpis .rotulo { font-size: var(--al-txt-micro); font-weight: var(--al-peso-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--al-texto-apoio); }
/* Era `--al-txt-titulo-2` (31px) — um número desse tamanho não cabe nos 180px mínimos da
   coluna sem quebrar ou espremer o resto do card. `-3` (25px) é o mesmo tamanho que a versão
   anterior só usava abaixo de 1279px; virou o padrão porque a régua de 1279px nunca foi o
   problema — janelas mais largas que isso, a 100% de zoom (sem a folga de rodar em 75%),
   também apertavam. */
.faixa-kpis .valor { font-family: var(--al-fonte-display); font-size: var(--al-txt-titulo-3); font-weight: var(--al-peso-bold); color: var(--al-texto); margin: var(--al-esp-2) 0 var(--al-esp-1); line-height: 1.1; overflow-wrap: break-word; }
.faixa-kpis .nota { font-size: var(--al-txt-micro); color: var(--al-texto-apoio); }

/* ======================================================================
   HIERARQUIA — manchete, apoio e a tabela de dois níveis
   ----------------------------------------------------------------------
   Nasceu de um pedido literal do gestor: "hoje tudo está no mesmo nível
   visual, com card, gráfico e tabela competindo pela atenção; precisamos
   definir a manchete de cada aba". A causa estava aqui: título de seção e
   título de card tinham o MESMO tamanho (corpo-p bold), e cada aba era um
   `.empilha` chapado onde tudo pesava igual.

   São três degraus, e a regra é um só por tela:
     1. `.manchete`  — dois ou três números, grandes. O que a aba responde.
     2. seção normal — `.secao-titulo` + cards.
     3. `.apoio-secao` — quem só é consultado depois de a pergunta já estar
        respondida. Continua legível; deixa de disputar.
   ====================================================================== */
.manchete { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--al-esp-6); }
.manchete .kpi { min-height: 132px; padding: var(--al-esp-6); }
.manchete .kpi .valor { font-size: var(--al-txt-titulo-2); margin: var(--al-esp-2) 0; }
.manchete .kpi .rotulo { font-size: var(--al-txt-corpo-p); letter-spacing: .02em; text-transform: none; color: var(--al-texto-secundario); white-space: normal; overflow: visible; }

/* O degrau 3. Sem sombra, sem borda forte, número menor — e, principalmente,
   título que não compete com o das seções de verdade. */
.apoio-secao > .secao-titulo h2, .apoio-secao > h2.secao-titulo { font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-semi); color: var(--al-texto-secundario); }
.apoio-secao .kpi .valor { font-size: var(--al-txt-titulo-4); }
.apoio-secao .card { background: transparent; }

/* Combustível não disputa com palheta.
   O pedido: "combustível precisa ter peso visual proporcional ao que
   representa no negócio; não pode competir de igual para igual com óleo,
   aditivo ou palheta" — e vale em qualquer lugar que mostre mix. */
.arvore tr.grupo-forte td { font-weight: var(--al-peso-bold); background: var(--al-neutro-50); font-size: var(--al-txt-corpo); }
:root[data-tema="escuro"] .arvore tr.grupo-forte td { background: var(--al-superficie-alt); }
.arvore tr.grupo-fraco td { color: var(--al-texto-secundario); }
.arvore tr.grupo-fraco td:first-child { font-weight: var(--al-peso-medio); }
.arvore .ocultos a { font-weight: var(--al-peso-medio); }

/* Selo de situação dentro de célula de tabela, sem esticar a linha. */
td .selo { white-space: nowrap; }

/* ======================================================================
   FILTROS — barra de 1 linha + gaveta "Mais filtros"
   ====================================================================== */
.barra-filtros { display: flex; flex-wrap: wrap; gap: var(--al-esp-3) var(--al-esp-2); align-items: center; margin-bottom: var(--al-esp-8); }
/* Só em Pessoa Física: um `.campo` ali tem rótulo em cima do select, mais alto que um botão
   solto ao lado — "Mais filtros" e "Limpar filtros" não têm rótulo. Centralizado (a regra
   acima, que Postos também usa e cujo visual já foi aprovado pixel a pixel), os botões
   ficavam alguns pixels acima da caixa do select em vez de na mesma linha dela. */
.barra-filtros-pf { align-items: flex-end; }
.barra-filtros .campo { position: relative; }
.barra-filtros .campo select, .barra-filtros .campo input { height: 40px; min-width: 152px; padding: 0 var(--al-esp-3); border: 1px solid var(--al-borda-campo); border-radius: var(--al-raio-md); background: var(--al-superficie); color: var(--al-texto); font-size: var(--al-txt-corpo-p); }
.barra-filtros .campo.busca input { width: 320px; padding-left: 40px; }
/* Seletor de posto com seleção múltipla (29/09/2026): o nome escolhe só aquele posto, a caixa soma. */
.seletor-postos { position: relative; flex: 0 1 auto; min-width: 0; }
.seletor-postos > summary { list-style: none; cursor: pointer; height: 40px; min-width: 240px; max-width: 460px; display: flex; align-items: center; gap: var(--al-esp-2); padding: 0 36px 0 var(--al-esp-3); border: 1px solid var(--al-borda-campo); border-radius: var(--al-raio-md); background: var(--al-superficie); color: var(--al-texto); font-size: var(--al-txt-corpo-p); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.seletor-postos > summary::-webkit-details-marker { display: none; }
.seletor-postos > summary::after { content: ""; position: absolute; right: 14px; top: 16px; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.seletor-postos > summary.carregando { opacity: .55; }
.seletor-postos-menu { position: absolute; z-index: 30; top: 44px; left: 0; min-width: 100%; max-width: min(92vw, 460px); max-height: 360px; overflow-y: auto; background: var(--al-superficie); border: 1px solid var(--al-borda); border-radius: var(--al-raio-md); box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: var(--al-esp-2); }
.seletor-postos-menu hr { border: 0; border-top: 1px solid var(--al-borda); margin: var(--al-esp-1) 0; }
.seletor-postos-linha { display: flex; align-items: center; gap: var(--al-esp-2); }
.seletor-postos-linha input { width: 16px; height: 16px; flex: none; }
.seletor-postos-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px var(--al-esp-2); border-radius: var(--al-raio-sm, 6px); color: var(--al-texto); font: inherit; cursor: pointer; }
.seletor-postos-item:hover { background: var(--al-superficie-alt, rgba(0,0,0,.04)); }
.seletor-postos-item.ativo { font-weight: 600; color: var(--al-primaria); }
.seletor-postos-dica { margin: var(--al-esp-1) var(--al-esp-2) 0; font-size: 12px; }
.barra-filtros .campo.busca svg { position: absolute; left: var(--al-esp-3); top: 12px; color: var(--al-texto-apoio); pointer-events: none; }
.barra-filtros .limpar { margin-left: var(--al-esp-1); }
.segmentado { display: inline-flex; border: 1px solid var(--al-borda); border-radius: var(--al-raio-md); overflow: hidden; flex: none; }
.segmentado button, .segmentado a { height: 40px; padding: 0 var(--al-esp-3); border: 0; border-radius: 0; background: var(--al-superficie); font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-medio); color: var(--al-texto-secundario); cursor: pointer; display: inline-flex; align-items: center; gap: var(--al-esp-1); white-space: nowrap; }

/* Pílulas separadas, e não um grupo emendado — só na barra de Postos (`.form`/`.modal` e as
   telas de PF continuam com o `.segmentado` de sempre, logo acima). É o visual do painel de
   referência: cada período é o próprio botão redondo, com vão entre eles. */
.barra-filtros .segmentado { border: 0; overflow: visible; gap: var(--al-esp-2); background: none; }
.barra-filtros .segmentado button, .barra-filtros .segmentado a {
  padding: 0 var(--al-esp-4); border: 1px solid var(--al-borda); border-radius: var(--al-raio-full);
  border-left: 1px solid var(--al-borda) !important; font-weight: var(--al-peso-semi);
}
.barra-filtros .segmentado button[aria-pressed="true"], .barra-filtros .segmentado a[aria-current="true"] {
  background: var(--al-primaria); color: var(--al-texto-invertido); border-color: var(--al-primaria);
}
.form .segmentado, .modal .segmentado { width: 100%; }
.form .segmentado button, .form .segmentado a, .modal .segmentado button, .modal .segmentado a { height: 44px; flex: 1; justify-content: center; }
.segmentado button + button, .segmentado a + a { border-left: 1px solid var(--al-borda); }
.segmentado button[aria-pressed="true"], .segmentado a[aria-current="true"] { background: var(--al-azul-100); color: var(--al-primaria); font-weight: var(--al-peso-semi); }
:root[data-tema="escuro"] .segmentado button[aria-pressed="true"], :root[data-tema="escuro"] .segmentado a[aria-current="true"] { background: var(--al-superficie-alt); }
.btn-filtros .contagem { margin-left: var(--al-esp-1); background: var(--al-azul-100); color: var(--al-primaria); }
.ordenar { margin-left: auto; }
/* Meta × realizado × projeção, uma linha por combustível ou posto — ver `BarrasDeMeta`.
   Uma linha por item, e não colunas: o rótulo é nome de produto e de posto, de largura
   imprevisível, e em coluna estreita ele quebra no meio da palavra. */
/* Os dois lados clicáveis de "Vendas — combustível × outros". O `<summary>` carrega um bloco
   inteiro (rótulo, barra, valores), então precisa de `display: block` — com o `list-item`
   padrão o navegador põe o triângulo no fluxo e empurra o conteúdo para o lado. */
.lado-venda { border: 1px solid var(--al-borda); border-radius: var(--al-raio-lg); background: var(--al-superficie); overflow: hidden; }
.lado-venda > summary { display: block; list-style: none; padding: var(--al-esp-4); cursor: pointer; }
.lado-venda > summary::-webkit-details-marker { display: none; }
.lado-venda > summary:hover { background: var(--al-primaria-suave); }
.lado-venda[open] > summary { border-bottom: 1px solid var(--al-borda); }
.lado-venda .mix-valor { margin-top: var(--al-esp-2); display: block; }
.lado-abrir { margin-left: var(--al-esp-2); font-size: var(--al-txt-micro); font-weight: var(--al-peso-medio); color: var(--al-primaria); white-space: nowrap; }
.lado-venda[open] .lado-abrir::after { content: " ▴"; }
.lado-venda:not([open]) .lado-abrir::after { content: " ▾"; }
.lado-venda .tabela-envolve { border: 0; border-radius: 0; }

.metas-lista { display: flex; flex-direction: column; }
.meta-linha { padding: var(--al-esp-4) 0; border-top: 1px solid var(--al-borda); }
.meta-linha:first-child { border-top: 0; padding-top: 0; }
.meta-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--al-esp-3); margin-bottom: var(--al-esp-2); }
.meta-rot { font-weight: var(--al-peso-bold); color: var(--al-texto); }
.meta-situacao { font-size: var(--al-txt-micro); color: var(--al-texto-apoio); white-space: nowrap; font-variant-numeric: tabular-nums; }
.meta-nota { margin-top: var(--al-esp-2); font-size: var(--al-txt-micro); color: var(--al-texto-apoio); font-variant-numeric: tabular-nums; }

.chips { display: flex; flex-wrap: wrap; gap: var(--al-esp-2); align-items: center; margin: calc(-1 * var(--al-esp-6)) 0 var(--al-esp-8); }
.chip { display: inline-flex; align-items: center; gap: var(--al-esp-1); height: 28px; padding: 0 var(--al-esp-2) 0 var(--al-esp-3); border-radius: var(--al-raio-full); background: var(--al-azul-50); border: 1px solid var(--al-azul-200); color: var(--al-primaria); font-size: var(--al-txt-micro); font-weight: var(--al-peso-medio); }
.chip.fixo { padding-right: var(--al-esp-3); }
:root[data-tema="escuro"] .chip { background: var(--al-superficie-alt); border-color: var(--al-borda); color: var(--al-texto); }
.chip button { border: 0; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--al-raio-full); padding: 0; }
.gaveta-filtros { width: min(400px, 100%); }
.gaveta-filtros .modal-corpo { background: var(--al-neutro-50); }
:root[data-tema="escuro"] .gaveta-filtros .modal-corpo { background: var(--al-superficie-alt); }
.gaveta-filtros hr { border: 0; border-top: 1px solid var(--al-borda); margin: 0; }

/* formulários (DS §6) */
.campo { display: flex; flex-direction: column; gap: var(--al-esp-1); min-width: 0; }
.campo label { font-size: var(--al-txt-micro); font-weight: var(--al-peso-medio); color: var(--al-texto-secundario); }
.campo label .opcional { font-weight: var(--al-peso-regular); color: var(--al-texto-apoio); }
/* `.form-login` incluído aqui — não é decoração, é bug real: `FormLogin.tsx` (o formulário de
   `/entrar`) usa essa classe, e sem ela entrar nesta lista os campos de e-mail/senha de conta
   ficam SEM ESTILO NENHUM (nem borda) — o mesmo bug que apareceu na tela de convite
   (`app/convite/[token]/page.tsx`), que usava um `<form>` sem classe nenhuma. Lá ficou óbvio
   (dois campos em branco, sem nada entre os rótulos); aqui ficava mascarado pelo destaque que
   o navegador dá sozinho a um campo de senha reconhecido/lembrado — mas o problema é o mesmo. */
.form .campo select, .form .campo input, .form-login .campo select, .form-login .campo input, .gaveta-filtros .campo select, .gaveta-filtros .campo input, .modal .campo select, .modal .campo input { height: 44px; padding: 0 var(--al-esp-3); border: 1px solid var(--al-borda-campo); border-radius: var(--al-raio-md); background: var(--al-superficie); color: var(--al-texto); font-size: var(--al-txt-corpo-p); width: 100%; }
.campo textarea { padding: var(--al-esp-3); resize: vertical; min-height: 88px; border: 1px solid var(--al-borda-campo); border-radius: var(--al-raio-md); background: var(--al-superficie); color: var(--al-texto); font-size: var(--al-txt-corpo-p); width: 100%; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--al-placeholder); }
.campo .ajuda { font-size: var(--al-txt-micro); color: var(--al-texto-apoio); min-height: 20px; }
.campo.erro input, .campo.erro select { border-color: var(--al-erro-600); }
.opcao { display: flex; align-items: flex-start; gap: var(--al-esp-3); font-size: var(--al-txt-corpo-p); cursor: pointer; }
.opcao span small { display: block; font-size: var(--al-txt-micro); color: var(--al-texto-apoio); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--al-primaria); margin: 0; flex: none; }

/* ---------- abas ---------- */
/* São oito abas. Com o respiro anterior elas estouravam a largura e a última — "Resultado
   (DRE)" — ficava cortada pela metade, sem nada indicando que havia mais. Agora: respiro
   menor, e um esmaecido na borda direita quando sobra conteúdo, para o corte parecer o que é. */
.abas { display: flex; gap: 0; border-bottom: 1px solid var(--al-borda); margin-bottom: var(--al-esp-6); overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%); }
.abas::-webkit-scrollbar { display: none; }
/* Em tela de notebook os oito rótulos não cabem com ícone. O ícone é decoração aqui — o
   rótulo já diz tudo —, então ele sai antes de o texto ser cortado. */
@media (max-width: 1500px) { .abas a svg, .abas button svg { display: none; } }
.abas a { text-decoration: none; }
.segmentado a { text-decoration: none; }
.abas button, .abas a { height: 44px; padding: 0 var(--al-esp-2); border: 0; background: none; font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-medio); color: var(--al-texto-secundario); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--al-esp-1); }
/* Sublinhado da aba ativa na primária: ele já é azul no texto, e o traço vermelho embaixo
   fazia a navegação parecer estado de erro. */
.abas button[aria-selected="true"], .abas a[aria-current="page"] { color: var(--al-primaria); font-weight: var(--al-peso-semi); border-bottom-color: var(--al-primaria); }
.abas .contagem { margin-left: 0; background: transparent; color: var(--al-texto-apoio); font-family: var(--al-fonte-texto); padding: 0; min-width: 0; }

/* ======================================================================
   TABELAS (DS §8, versão leve)
   ====================================================================== */
.tabela-envolve { overflow-x: auto; border: 1px solid var(--al-borda); border-radius: var(--al-raio-lg); background: var(--al-superficie); }
table { border-collapse: collapse; width: 100%; }
thead th { background: transparent; text-align: left; white-space: nowrap; font-size: var(--al-txt-micro); font-weight: var(--al-peso-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--al-texto-secundario); padding: var(--al-esp-2) var(--al-esp-4); border-bottom: 1px solid var(--al-borda-forte); }
th.ord { cursor: pointer; } th.ord svg { vertical-align: -3px; margin-left: 2px; color: var(--al-neutro-400); } th.ord[aria-sort] { color: var(--al-primaria); } th.ord[aria-sort] svg { color: var(--al-primaria); }
tbody td { padding: var(--al-esp-3) var(--al-esp-4); border-bottom: 1px solid var(--al-borda); font-size: var(--al-txt-corpo-p); vertical-align: middle; height: 48px; }
.tabela-2l tbody td { height: 56px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--al-neutro-50); }
:root[data-tema="escuro"] tbody tr:hover { background: var(--al-superficie-alt); }
tbody tr.clicavel { cursor: pointer; }
/* `width: 1%` + `white-space: nowrap` é o truque clássico de layout de tabela: com
   `table { width: 100% }` (regra acima) e NENHUMA coluna com largura própria, o layout
   automático do navegador espalha a sobra entre todas — um "23" ou "R$ 82.150,00" ganhava a
   mesma fatia de uma coluna de nome de fornecedor, e a tabela inteira parecia arrastada,
   com vão sobrando em toda coluna curta. `1%` é menor que qualquer conteúdo real, então o
   navegador entende como "encolha até o mínimo" — e sobra tudo para a(s) coluna(s) sem
   largura fixada, que normalmente é o nome/rótulo, exatamente onde o espaço extra ajuda a
   ler. Pedido do cliente, com print de referência: "as colunas estão muito largas". */
td.valor, th.valor { width: 1%; text-align: right; font-family: var(--al-fonte-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
td .sub { display: block; font-size: var(--al-txt-micro); color: var(--al-texto-apoio); }
td .sub.bruto { font-family: var(--al-fonte-mono); }
td .principal { font-weight: var(--al-peso-medio); }
tbody td a { font-weight: var(--al-peso-medio); }
tfoot td { padding: var(--al-esp-3) var(--al-esp-4); background: var(--al-neutro-50); font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-semi); border-top: 1px solid var(--al-borda-forte); }
:root[data-tema="escuro"] tfoot td { background: var(--al-superficie-alt); }

/* Cabeçalho e total em azul cheio — só a "Meta × realizado por posto", como no painel de
   referência. `thead`/`tfoot` acima continuam servindo todas as OUTRAS tabelas da Central. */
.tabela-destaque thead th { background: var(--al-primaria); color: var(--al-texto-invertido);
  border-bottom: 0; }
.tabela-destaque tfoot td { background: var(--al-primaria); color: var(--al-texto-invertido);
  border-top: 0; }
.tabela-destaque tfoot td .sub { color: var(--al-primaria-suave); }
.tabela-destaque tfoot .negativo { color: #FFB4AB; }
/* Onze colunas — `table { width: 100% }` (regra geral, linha acima) força o layout automático
   a espremer cada uma até caber, e quem cede primeiro é a única coluna de texto: o nome do
   posto quebrava letra por letra ("AUTO / POSTO / REDINHA" em três linhas). `width: auto` deixa
   a tabela crescer pelo conteúdo; `min-width: 100%` continua enchendo o cartão quando cabe sem
   apertar. O que não couber, o `.tabela-envolve` (scroll horizontal, já existe) resolve — é
   para isso que ele está lá. */
.tabela-destaque { width: auto; min-width: 100%; }
.tabela-destaque .principal { white-space: nowrap; }
.tabela-rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--al-esp-3); padding: var(--al-esp-3) var(--al-esp-4); border-top: 1px solid var(--al-borda); font-size: var(--al-txt-micro); color: var(--al-texto-apoio); flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.tabela-rodape b { color: var(--al-texto); font-weight: var(--al-peso-semi); }
.paginacao { display: flex; gap: var(--al-esp-1); }
.paginacao button { min-width: 32px; height: 32px; border: 1px solid var(--al-borda); background: var(--al-superficie); border-radius: var(--al-raio-md); font-size: var(--al-txt-micro); cursor: pointer; }
.paginacao button[aria-current="page"] { background: var(--al-primaria); color: var(--al-texto-invertido); border-color: var(--al-primaria); }
.matriz td, .matriz th { text-align: center; } .matriz td:first-child, .matriz th:first-child { text-align: left; }
.matriz .area td { background: transparent; font-size: var(--al-txt-micro); font-weight: var(--al-peso-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--al-texto-apoio); height: 32px; padding-top: var(--al-esp-4); }
.col-ico { width: 40px; text-align: center; color: var(--al-neutro-500); }
.col-barra { width: 176px; }
.bullet { position: relative; height: 8px; background: var(--al-azul-100); border-radius: var(--al-raio-sm); }
:root[data-tema="escuro"] .bullet { background: var(--al-superficie-alt); }
.bullet > i { display: block; height: 100%; background: var(--al-primaria); border-radius: inherit; }
.bullet > b { position: absolute; top: -2px; width: 2px; height: 12px; background: var(--al-acento); }
.tab-ico { display: inline-flex; color: var(--al-neutro-500); vertical-align: middle; }
.nota-ico { color: var(--al-primaria); cursor: pointer; }

/* árvore do Analítico */
.arvore tbody tr[data-nivel="2"] td:first-child { padding-left: var(--al-esp-8); }
.arvore tbody tr[data-nivel="3"] td:first-child { padding-left: calc(var(--al-esp-8) + var(--al-esp-6)); font-size: var(--al-txt-corpo-p); }
.arvore tbody tr[data-nivel="3"] { color: var(--al-texto-secundario); }
.arvore .alt { display: inline-flex; align-items: center; gap: var(--al-esp-2); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; font-weight: var(--al-peso-medio); }
.arvore .alt svg { color: var(--al-neutro-500); transition: transform var(--al-dur-rapida) var(--al-easing); }
.arvore .alt[aria-expanded="true"] svg { transform: rotate(90deg); }
.arvore tr[data-nivel="1"] td { font-weight: var(--al-peso-medio); }
.arvore .ocultos td { color: var(--al-texto-apoio); font-size: var(--al-txt-micro); height: 36px; }
.justif { display: flex; align-items: center; gap: var(--al-esp-2); }
.justif input[type="text"] { height: 32px; border: 1px solid transparent; border-radius: var(--al-raio-sm); background: transparent; padding: 0 var(--al-esp-2); width: 100%; min-width: 200px; font-size: var(--al-txt-corpo-p); color: var(--al-texto); }
.justif input[type="text"]:hover, .justif input[type="text"]:focus { border-color: var(--al-borda-campo); background: var(--al-superficie); }
.justif label { font-size: var(--al-txt-micro); color: var(--al-texto-apoio); display: inline-flex; align-items: center; gap: var(--al-esp-1); white-space: nowrap; }

/* faixas de composição (substituem rosquinhas) */
.comp { display: grid; grid-template-columns: 140px 1fr; gap: var(--al-esp-3) var(--al-esp-4); align-items: center; }
.comp .rot { font-size: var(--al-txt-micro); font-weight: var(--al-peso-medio); color: var(--al-texto-secundario); }
.comp .barra { display: flex; height: 24px; border-radius: var(--al-raio-sm); overflow: hidden; gap: 2px; }
.comp .barra span { display: flex; align-items: center; padding: 0 var(--al-esp-2); font-size: var(--al-txt-micro); font-weight: var(--al-peso-medio); color: var(--al-neutro-0); white-space: nowrap; overflow: hidden; cursor: pointer; }
/* Filho DIRETO. Com o seletor de descendente, um `<span>` aninhado dentro da fatia também
   casava `:nth-child(1)` e ganhava fundo azul-escuro — aparecia uma pílula escura dentro de
   cada fatia clara. E a rampa antiga (azul-500/400 com texto branco) não passava em 4,5:1. */
.comp .barra > span:nth-child(1) { background: var(--al-azul-700); }
.comp .barra > span:nth-child(2) { background: var(--al-azul-600); }
.comp .barra > span:nth-child(3) { background: var(--al-azul-200); color: var(--al-neutro-900); }
.comp .barra > span:nth-child(4) { background: var(--al-azul-100); color: var(--al-neutro-900); }
.comp .barra > span:nth-child(5) { background: var(--al-neutro-200); color: var(--al-neutro-900); }
.comp .barra > span:nth-child(6) { background: var(--al-neutro-300); color: var(--al-neutro-900); }
/* Cortar no meio do caractere sem sinal é pior que abreviar. E a fatia não é clicável. */
.comp .barra > span { text-overflow: ellipsis; cursor: default; }

/* Mix de recebimento (MixRecebimento em componentes/postos/Blocos.tsx) — uma barra CHEIA por
   modalidade, com rótulo/percentual/valor sempre por fora dela. Ao contrário da barra composta
   acima (`.comp .barra`), aqui a largura da barra nunca decide se o texto cabe — é o motivo da
   troca: a barra composta cortava o rótulo da fatia menor em telas estreitas. */
.mix-recebimento { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--al-esp-4) var(--al-esp-5); }
.mix-linha { display: flex; flex-direction: column; gap: var(--al-esp-1); min-width: 0; }
.mix-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--al-esp-2); }
.mix-rot { font-size: var(--al-txt-micro); font-weight: var(--al-peso-medio); color: var(--al-texto-secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Era `--al-txt-titulo-4` (20px, o tamanho de um título de seção) — visualmente chamativo
   demais para quatro números lado a lado numa coluna de 150–200px; com quatro modalidades a
   linha toda passava a largura disponível em telas menores. `corpo-p` em negrito continua
   destacando o percentual sem competir por espaço. */
.mix-pct { font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-bold); color: var(--al-texto); font-variant-numeric: tabular-nums; }
.mix-recebimento .progresso { height: 10px; }
/* O "resumo" do painel de referência: as modalidades lado a lado, e não empilhadas. Abaixo de
   ~800px volta a empilhar sozinho — quatro colunas num celular espremem o valor em reais até
   ele quebrar no meio. */
.mix-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--al-esp-5) var(--al-esp-6); }
.mix-colunas .mix-linha { margin: 0; }
.mix-valor { font-size: var(--al-txt-micro); color: var(--al-texto-apoio); }
.mix-total { grid-column: 1 / -1; margin: 0; padding-top: var(--al-esp-2); border-top: 1px solid var(--al-borda); }

/* ---------- selos e estados ---------- */
.selo { display: inline-flex; align-items: center; gap: var(--al-esp-1); padding: 2px var(--al-esp-2); border-radius: var(--al-raio-sm); font-size: var(--al-txt-micro); font-weight: var(--al-peso-semi); white-space: nowrap; }
.selo svg { width: 16px; height: 16px; }
.selo-ok { background: var(--al-sucesso-fundo); color: var(--al-sucesso-texto); }
.selo-atencao { background: var(--al-alerta-fundo); color: var(--al-alerta-texto); }
.selo-erro { background: var(--al-erro-fundo); color: var(--al-erro-texto); }
.selo-info { background: var(--al-info-fundo); color: var(--al-info-texto); }
.selo-neutro { background: var(--al-neutro-100); color: var(--al-texto-secundario); }
:root[data-tema="escuro"] .selo-neutro { background: var(--al-superficie-alt); }
.selo-marca { background: var(--al-azul-100); color: var(--al-azul-700); }
:root[data-tema="escuro"] .selo-marca { background: var(--al-superficie-alt); color: var(--al-primaria); }
.selo-regra { background: var(--al-neutro-100); color: var(--al-texto-secundario); }
.selo-regra.r6 svg { color: var(--al-vermelho-700); } .selo-regra.r4 svg, .selo-regra.r5 svg { color: var(--al-alerta-600); }
button.selo { border: 0; cursor: pointer; } button.selo:hover { text-decoration: underline; }
.estado { display: inline-flex; align-items: center; gap: var(--al-esp-1); font-size: var(--al-txt-micro); font-weight: var(--al-peso-medio); color: var(--al-texto-secundario); white-space: nowrap; }
.estado svg { width: 16px; height: 16px; }
.estado-ok svg { color: var(--al-sucesso-600); } .estado-atencao svg { color: var(--al-alerta-600); } .estado-erro svg { color: var(--al-vermelho-700); }
a.estado, button.estado { background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- alertas ---------- */
.alerta { display: flex; gap: var(--al-esp-3); padding: var(--al-esp-4); border-radius: var(--al-raio-md); font-size: var(--al-txt-corpo-p); border-left: 4px solid; color: var(--al-texto); }
.alerta svg { flex: none; margin-top: 2px; } .alerta b { display: block; font-weight: var(--al-peso-semi); margin-bottom: 2px; }
/* Alerta com título em `<b>` e parágrafos como filhos diretos EMPILHA.
   `.alerta` é `display: flex` em linha, e um item flex é blockificado — então o
   `display: block` do `<b>` acima não tinha efeito nenhum e o título virava uma coluna
   estreita ao lado do texto. Os doze avisos do painel de Postos saíam picotados em colunas,
   incluindo os que explicam divergência de número. Os alertas de uma linha só da PF não têm
   `<b>` e continuam como estão. */
.alerta:has(> b) { flex-direction: column; align-items: flex-start; gap: var(--al-esp-1); }
.alerta:has(> b) > p { margin: 0; }
.alerta:has(> b) > b { margin-bottom: 0; }

/* O `.secao-titulo` do design system é um CONTÊINER (`.secao-titulo h2`). Posto direto no
   `<h2>`, a regra não casava — e o preflight do Tailwind zera peso e tamanho de `h1`-`h6`,
   então o título de seção saía mais fraco que o título dos cards logo abaixo, invertendo a
   hierarquia. Esta linha é a rede para quem repetir o engano. */
h2.secao-titulo { font-family: var(--al-fonte-display); font-size: var(--al-txt-titulo-4); font-weight: var(--al-peso-bold); color: var(--al-primaria); }

/* ---------- interação que faltava ---------- */

/* O card clicável não reagia ao mouse, e o card "Em breve" reagia — a porta da Central
   premiava justamente o que não leva a lugar nenhum. E a regra global `a:hover` sublinhava
   título e descrição inteiros do cartão. */
a.card:hover { border-color: var(--al-azul-200); box-shadow: var(--al-sombra-md); text-decoration: none; }
.abas a:hover, .abas button:hover { color: var(--al-primaria); border-bottom-color: var(--al-borda-forte); text-decoration: none; }
.segmentado a:hover, .segmentado button:hover { background: var(--al-primaria-suave); color: var(--al-primaria); text-decoration: none; }

/* `box-shadow` é recortado por `overflow`, e `.segmentado` e `.abas` recortam — o anel de foco
   dos atalhos de período e das oito abas simplesmente não aparecia para quem navega por
   teclado. O `outline` foi trocado por sombra nos tokens; aqui é preciso deixá-la escapar. */
.segmentado { overflow: visible; }
.segmentado > :first-child { border-radius: var(--al-raio-md) 0 0 var(--al-raio-md); }
.segmentado > :last-child { border-radius: 0 var(--al-raio-md) var(--al-raio-md) 0; }
.segmentado :focus-visible, .abas :focus-visible, .tabela-envolve :focus-visible { position: relative; z-index: 1; }
.abas { padding-block: 3px; }

/* A tabela rola na horizontal e nada dizia isso. As abas ganharam esmaecimento; as tabelas,
   que são mais largas, não tinham nada — no celular o gestor via a primeira coluna e nenhum
   sinal de que havia mais oito. */
.tabela-envolve { scrollbar-width: thin; background:
  linear-gradient(to right, var(--al-superficie) 30%, transparent) left / 40px 100% no-repeat local,
  linear-gradient(to left, var(--al-superficie) 30%, transparent) right / 40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, rgba(0,51,127,.16), transparent) left / 14px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%, rgba(0,51,127,.16), transparent) right / 14px 100% no-repeat scroll,
  var(--al-superficie); }
.alerta .acoes { margin-left: auto; display: flex; gap: var(--al-esp-2); align-items: center; }
.alerta-info { background: var(--al-info-fundo); border-color: var(--al-info-600); }
.alerta-atencao { background: var(--al-alerta-fundo); border-color: var(--al-alerta-600); }
.alerta-ok { background: var(--al-sucesso-fundo); border-color: var(--al-sucesso-600); }
.alerta-erro { background: var(--al-erro-fundo); border-color: var(--al-erro-600); }

/* ---------- progresso / skeleton ---------- */
.progresso { height: 8px; border-radius: var(--al-raio-full); background: var(--al-azul-100); overflow: hidden; }
:root[data-tema="escuro"] .progresso { background: var(--al-superficie-alt); }
.progresso > i { display: block; height: 100%; background: var(--al-primaria); border-radius: var(--al-raio-full); }
.progresso.fina { height: 4px; } .progresso > i.alerta { background: var(--al-alerta-600); }
.spinner { width: 16px; height: 16px; border: 2px solid var(--al-azul-200); border-top-color: var(--al-azul-700); border-radius: var(--al-raio-full); animation: girar .7s linear infinite; display: inline-block; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- stepper ---------- */
.passos { display: flex; gap: var(--al-esp-4); margin-bottom: var(--al-esp-6); }
.passos > div { flex: 1; display: flex; align-items: center; gap: var(--al-esp-2); font-size: var(--al-txt-micro); font-weight: var(--al-peso-medio); color: var(--al-texto-apoio); padding-bottom: var(--al-esp-2); border-bottom: 2px solid var(--al-borda); }
.passos > div i { width: 24px; height: 24px; border-radius: var(--al-raio-full); border: 1px solid var(--al-borda-forte); display: grid; place-items: center; font-style: normal; font-family: var(--al-fonte-mono); }
.passos > div.feito { color: var(--al-sucesso-600); border-bottom-color: var(--al-sucesso-600); } .passos > div.feito i { background: var(--al-sucesso-600); border-color: var(--al-sucesso-600); color: var(--al-neutro-0); }
.passos > div.atual { color: var(--al-primaria); border-bottom-color: var(--al-primaria); } .passos > div.atual i { background: var(--al-primaria); border-color: var(--al-primaria); color: var(--al-texto-invertido); }

/* ---------- acordeão (faturas por mês) ---------- */
/* O "?" ao lado de um rótulo de KPI — ver `Ajuda` em componentes/postos/Blocos.tsx. Fica
   alinhado ao texto do rótulo (que é micro e em caixa alta), e não centralizado na linha: num
   rótulo de duas linhas o `vertical-align: middle` o jogava para o meio do bloco, longe da
   palavra que ele explica.

   **`.ajuda-ico` e não `.ajuda`.** `.ajuda` JÁ EXISTE neste arquivo desde o começo, como o
   texto de ajuda abaixo de um campo de formulário (`.campo .ajuda`). Batizar o ícone com o
   mesmo nome impôs `width: 14px` a todo texto de ajuda do produto, e eles viraram uma coluna
   de uma letra por linha — em sete telas, por horas, até alguém mandar o print. Classe nova
   em folha de estilo compartilhada se procura antes de se criar. */
.ajuda-ico { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1px solid var(--al-borda-forte); border-radius: 50%; font-size: 9px; font-weight: var(--al-peso-bold); line-height: 1; color: var(--al-texto-apoio); cursor: help; flex: none; }
.ajuda-ico:hover, .ajuda-ico-envolve:hover .ajuda-ico, .ajuda-ico-envolve:focus-within .ajuda-ico { border-color: var(--al-primaria); color: var(--al-primaria); }

/* O balão do "?"/"i" — `title` nativo sozinho tem ~1s de atraso (mesmo problema que
   `Dica.tsx` já resolveu para gráfico, ver o cabeçalho de lá); aqui o balão é só CSS
   (`:hover`/`:focus-within`), sem estado de cliente, porque as telas que usam `Ajuda` e
   `InfoCalculo` continuam Server Component — o `title` continua no DOM, por trás, para quem
   usa leitor de tela. `tabIndex` no ícone é o que torna `:focus-within` alcançável do teclado.

   `.faixa-kpis`/`.kpi .rotulo` recortam com `overflow: hidden` (ver as duas regras acima na
   folha) — sem recortar de volta pontos onde carregam um ícone, o balão nascia cortado pela
   própria borda do cartão que ele deveria explicar. */
.ajuda-ico-envolve { position: relative; display: inline-flex; margin-left: var(--al-esp-2); vertical-align: text-bottom; }
.faixa-kpis:has(.ajuda-ico-envolve) { overflow: visible; }
.kpi .rotulo:has(.ajuda-ico-envolve) { overflow: visible; }
.ajuda-balao {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(2px);
  background: var(--al-neutro-900); color: var(--al-neutro-0);
  font-size: var(--al-txt-micro); font-weight: var(--al-peso-regular); text-transform: none;
  letter-spacing: normal; font-family: var(--al-fonte-texto); white-space: normal;
  width: max-content; max-width: 240px; text-align: left;
  padding: var(--al-esp-2) var(--al-esp-3); border-radius: var(--al-raio-md); line-height: 1.4;
  box-shadow: var(--al-sombra-lg); z-index: 30;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 100ms ease, transform 100ms ease;
}
.ajuda-ico-envolve:hover .ajuda-balao, .ajuda-ico-envolve:focus-within .ajuda-balao {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

.acordeao { border: 1px solid var(--al-borda); border-radius: var(--al-raio-lg); background: var(--al-superficie); margin-bottom: var(--al-esp-3); overflow: hidden; }
.acordeao > summary { list-style: none; display: flex; align-items: center; gap: var(--al-esp-3); padding: var(--al-esp-3) var(--al-esp-4); min-height: 56px; cursor: pointer; }
.acordeao > summary::-webkit-details-marker { display: none; }
.acordeao > summary .chev { transition: transform var(--al-dur-rapida) var(--al-easing); color: var(--al-neutro-500); }
.acordeao[open] > summary .chev { transform: rotate(180deg); } .acordeao[open] > summary { border-bottom: 1px solid var(--al-borda); }
.acordeao > summary h3 { font-family: var(--al-fonte-texto); font-size: .92rem; font-weight: var(--al-peso-semi); color: var(--al-texto-secundario); margin: 0; }
.acordeao > summary:hover h3 { color: var(--al-primaria); }
.acordeao > summary .meta { font-size: var(--al-txt-micro); color: var(--al-texto-apoio); font-variant-numeric: tabular-nums; }
.acordeao > summary .direita { margin-left: auto; display: flex; gap: var(--al-esp-3); align-items: center; flex-wrap: wrap; }
.acordeao .tabela-envolve { border: 0; border-radius: 0; }
/* Conteúdo de acordeão que NÃO é tabela (gráfico, barras, o botão de CSV, a nota de rodapé):
   a tabela se encosta nas bordas de propósito, o resto precisa do respiro do card. */
.acordeao .acordeao-corpo { padding: var(--al-esp-4); }
/* Chips de filtro — links, não botões: quem filtra por grupo está navegando, e a escolha
   precisa sobreviver a recarregar e a ser colada num WhatsApp. */
.chips { display: flex; flex-wrap: wrap; gap: var(--al-esp-2); }
.chip { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--al-esp-4); border: 1px solid var(--al-borda); border-radius: var(--al-raio-full); font-size: var(--al-txt-micro); font-weight: var(--al-peso-medio); color: var(--al-texto-secundario); background: var(--al-superficie); text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--al-primaria); color: var(--al-primaria); text-decoration: none; }
.chip-ativo, .chip-ativo:hover { background: var(--al-primaria); border-color: var(--al-primaria); color: var(--al-texto-invertido); }
.acordeao .tabela-envolve + .acordeao-corpo { padding-top: var(--al-esp-3); }
.checklist { display: flex; gap: var(--al-esp-3); flex-wrap: wrap; padding: var(--al-esp-3) var(--al-esp-4); border-bottom: 1px solid var(--al-borda); font-size: var(--al-txt-micro); align-items: center; }
.checklist b { color: var(--al-texto-secundario); font-weight: var(--al-peso-semi); margin-right: var(--al-esp-1); }

/* ---------- dropzone compacta + linha de sync ---------- */
.dropzone { display: flex; align-items: center; gap: var(--al-esp-4); text-align: left; padding: var(--al-esp-4) var(--al-esp-6); min-height: 96px; border: 1px dashed var(--al-borda-campo); border-radius: var(--al-raio-lg); background: var(--al-superficie); transition: all var(--al-dur-rapida) var(--al-easing); }
.dropzone:hover { border-color: var(--al-primaria); background: var(--al-primaria-suave); }
.dropzone svg { color: var(--al-neutro-400); }
.dropzone h3 { font-family: var(--al-fonte-display); font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-semi); color: var(--al-texto); margin: 0 0 2px; }
.dropzone p { font-size: var(--al-txt-micro); color: var(--al-texto-apoio); margin: 0; }
.dropzone .btn { margin-left: auto; }
.linha-sync { display: flex; align-items: center; gap: var(--al-esp-2); font-size: var(--al-txt-micro); color: var(--al-texto-apoio); margin: var(--al-esp-3) 0 var(--al-esp-8); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.linha-sync svg { color: var(--al-neutro-500); }
.anexo { border: 1px dashed var(--al-borda-campo); border-radius: var(--al-raio-md); height: 44px; display: flex; align-items: center; justify-content: center; gap: var(--al-esp-2); font-size: var(--al-txt-micro); color: var(--al-texto-apoio); }

/* ---------- fila de revisão ---------- */
.item-revisao { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--al-esp-4); padding: var(--al-esp-4); border: 1px solid var(--al-borda); border-left: 3px solid var(--al-borda-forte); border-radius: var(--al-raio-lg); background: var(--al-superficie); align-items: center; }
.item-revisao.revisar { border-left-color: var(--al-acento); }
.item-revisao .descritor { font-family: var(--al-fonte-mono); font-size: var(--al-txt-micro); color: var(--al-texto-apoio); word-break: break-all; }
.item-revisao .classificacao { font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-medio); color: var(--al-texto); margin-top: 2px; }
.item-revisao .classificacao em { font-style: normal; color: var(--al-texto-apoio); }
.item-revisao .classificacao .vazio { color: var(--al-alerta-texto); font-style: italic; font-weight: var(--al-peso-regular); }
.item-revisao .origem { font-size: var(--al-txt-micro); color: var(--al-texto-apoio); font-variant-numeric: tabular-nums; }
.item-revisao .lado { text-align: right; display: flex; flex-direction: column; gap: var(--al-esp-2); align-items: flex-end; }
.item-revisao .cifra { font-family: var(--al-fonte-mono); font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-semi); font-variant-numeric: tabular-nums; }
.lote { display: flex; align-items: center; gap: var(--al-esp-4); padding: var(--al-esp-3) var(--al-esp-4); background: var(--al-azul-50); border: 1px solid var(--al-borda); border-radius: var(--al-raio-md); font-size: var(--al-txt-corpo-p); color: var(--al-primaria); font-weight: var(--al-peso-medio); flex-wrap: wrap; }
:root[data-tema="escuro"] .lote { background: var(--al-superficie-alt); color: var(--al-texto); }
.lote .acoes { margin-left: auto; display: flex; gap: var(--al-esp-2); flex-wrap: wrap; }
.resumo-fila { display: flex; gap: var(--al-esp-6); flex-wrap: wrap; font-size: var(--al-txt-micro); color: var(--al-texto-secundario); margin-bottom: var(--al-esp-4); font-variant-numeric: tabular-nums; }
.resumo-fila b { color: var(--al-texto); font-weight: var(--al-peso-semi); }

/* ---------- linha do tempo · diff · conexões ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--al-esp-4); }
.timeline li { display: grid; grid-template-columns: 20px 1fr; gap: var(--al-esp-3); font-size: var(--al-txt-corpo-p); }
.timeline li svg { color: var(--al-primaria); margin-top: 2px; }
.timeline .quando { font-size: var(--al-txt-micro); color: var(--al-texto-apoio); display: block; font-variant-numeric: tabular-nums; }
.timeline .antes { color: var(--al-texto-apoio); text-decoration: line-through; }
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--al-borda); border: 1px solid var(--al-borda); border-radius: var(--al-raio-md); overflow: hidden; }
.diff > div { background: var(--al-superficie); padding: var(--al-esp-3) var(--al-esp-4); }
.diff .titulo { font-size: var(--al-txt-micro); font-weight: var(--al-peso-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--al-texto-apoio); margin-bottom: var(--al-esp-1); display: flex; align-items: center; gap: var(--al-esp-2); flex-wrap: wrap; }
.diff .conteudo { font-size: var(--al-txt-corpo-p); font-family: var(--al-fonte-mono); }
.diff .divergente { background: var(--al-alerta-fundo); padding: var(--al-esp-2); border-radius: var(--al-raio-sm); }
.diff-tab td.div { background: var(--al-alerta-fundo); font-weight: var(--al-peso-semi); }
.conexao { display: flex; flex-direction: column; gap: var(--al-esp-3); }
.conexao .banco { display: flex; align-items: center; gap: var(--al-esp-3); }
.conexao .banco > div { min-width: 0; }
.conexao .logo { width: 40px; height: 40px; border-radius: var(--al-raio-md); background: var(--al-azul-100); color: var(--al-azul-700); display: grid; place-items: center; font-family: var(--al-fonte-display); font-weight: var(--al-peso-extra); font-size: var(--al-txt-corpo-p); flex: none; }
:root[data-tema="escuro"] .conexao .logo { background: var(--al-superficie-alt); color: var(--al-primaria); }
.conexao .banco b { display: block; font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-semi); overflow-wrap: anywhere; }
.conexao .banco span { font-size: var(--al-txt-micro); color: var(--al-texto-apoio); }
.conexao .banco .selo, .conexao .banco .estado { margin-left: auto; }
.conexao ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.conexao li { display: flex; align-items: center; gap: var(--al-esp-2); font-size: var(--al-txt-corpo-p); min-height: 40px; }
.conexao li .qtd { margin-left: auto; font-size: var(--al-txt-micro); color: var(--al-texto-apoio); font-variant-numeric: tabular-nums; }
.conexao .rodape { display: flex; gap: var(--al-esp-2); align-items: center; flex-wrap: wrap; margin-top: auto; }
/* `cursor: default` e sem hover: o card "Em breve" não leva a lugar nenhum, e reagir ao mouse
   é prometer um clique que não existe. O comentário de §Cards registra que a porta da Central
   premiava justamente o que não abre — isto fecha aquele caso. */
.card-fantasma { border: 1px dashed var(--al-borda-campo); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--al-esp-2); color: var(--al-texto-secundario); cursor: default; min-height: 200px; }
.card-fantasma svg { color: var(--al-neutro-400); }

/* ---------- menu dropdown ---------- */
.menu-envolve { position: relative; display: inline-block; }
.menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; background: var(--al-superficie); border: 1px solid var(--al-borda); border-radius: var(--al-raio-md); box-shadow: var(--al-sombra-lg); padding: var(--al-esp-1); min-width: 200px; }
.menu button { display: flex; align-items: center; gap: var(--al-esp-2); width: 100%; min-height: 40px; padding: 0 var(--al-esp-3); border: 0; background: none; border-radius: var(--al-raio-sm); font-size: var(--al-txt-corpo-p); color: var(--al-texto); cursor: pointer; text-align: left; }
.menu button:hover { background: var(--al-primaria-suave); } .menu button.perigo { color: var(--al-erro-texto); }
.menu hr { border: 0; border-top: 1px solid var(--al-borda); margin: var(--al-esp-1) 0; }

/* ======================================================================
   MODAL · GAVETA · TOAST
   ====================================================================== */
.modal-fundo { position: fixed; inset: 0; z-index: 100; background: rgba(11, 26, 54, .45); display: flex; align-items: center; justify-content: center; padding: var(--al-esp-4); }
.modal { background: var(--al-superficie); border-radius: var(--al-raio-lg); box-shadow: var(--al-sombra-xl); width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal.medio { max-width: 760px; } .modal.grande { max-width: 960px; }
.modal-cab { display: flex; align-items: flex-start; gap: var(--al-esp-3); padding: var(--al-esp-6) var(--al-esp-6) var(--al-esp-4); border-bottom: 1px solid var(--al-borda); }
.modal-cab h2 { font-family: var(--al-fonte-display); font-size: var(--al-txt-titulo-4); font-weight: var(--al-peso-semi); color: var(--al-primaria); margin: 0; line-height: var(--al-lh-titulo); }
.modal-cab p { font-size: var(--al-txt-corpo-p); color: var(--al-texto-secundario); margin: var(--al-esp-1) 0 0; }
.modal-cab .fechar { margin-left: auto; } .modal-cab .ico-perigo { color: var(--al-erro-600); }
.modal-corpo { padding: var(--al-esp-6); overflow-y: auto; display: flex; flex-direction: column; gap: var(--al-esp-4); }
.modal-pe { display: flex; gap: var(--al-esp-2); padding: var(--al-esp-4) var(--al-esp-6); border-top: 1px solid var(--al-borda); justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.modal-pe .esq { margin-right: auto; }
.gaveta-fundo { position: fixed; inset: 0; z-index: 100; background: rgba(11, 26, 54, .45); display: flex; justify-content: flex-end; }
.gaveta { width: min(560px, 100%); height: 100%; background: var(--al-superficie); box-shadow: var(--al-sombra-xl); display: flex; flex-direction: column; }
.gaveta .modal-corpo { flex: 1; }
.resumo-alvo { background: var(--al-neutro-50); border: 1px solid var(--al-borda); border-radius: var(--al-raio-md); padding: var(--al-esp-3) var(--al-esp-4); font-size: var(--al-txt-corpo-p); }
:root[data-tema="escuro"] .resumo-alvo { background: var(--al-superficie-alt); }
.resumo-alvo b { display: block; }
.consequencias { margin: 0; padding-left: var(--al-esp-5); font-size: var(--al-txt-corpo-p); color: var(--al-texto-secundario); }
.bloco-aprender { background: var(--al-azul-50); border: 1px solid var(--al-azul-200); border-radius: var(--al-raio-md); padding: var(--al-esp-4); display: flex; flex-direction: column; gap: var(--al-esp-3); }
:root[data-tema="escuro"] .bloco-aprender { background: var(--al-superficie-alt); border-color: var(--al-borda); }
.cab-lanc { display: flex; align-items: flex-start; gap: var(--al-esp-4); flex-wrap: wrap; }
.cab-lanc .cifra { font-family: var(--al-fonte-display); font-size: var(--al-txt-titulo-4); font-weight: var(--al-peso-bold); font-variant-numeric: tabular-nums; margin-left: auto; }
.lista-dl { display: grid; grid-template-columns: 160px 1fr; gap: var(--al-esp-2) var(--al-esp-4); font-size: var(--al-txt-corpo-p); margin: 0; }
.lista-dl dt { color: var(--al-texto-apoio); font-size: var(--al-txt-micro); font-weight: var(--al-peso-medio); padding-top: 2px; } .lista-dl dd { margin: 0; }
.toast { position: fixed; top: var(--al-esp-4); right: var(--al-esp-4); z-index: 120; background: var(--al-superficie); border: 1px solid var(--al-borda); border-left: 4px solid var(--al-sucesso-600); border-radius: var(--al-raio-lg); box-shadow: var(--al-sombra-lg); padding: var(--al-esp-3) var(--al-esp-4); display: flex; align-items: center; gap: var(--al-esp-3); font-size: var(--al-txt-corpo-p); max-width: 420px; }

/* opções em card (exportação) */
.opcao-card { display: flex; gap: var(--al-esp-3); align-items: flex-start; padding: var(--al-esp-3) var(--al-esp-4); border: 1px solid var(--al-borda); border-radius: var(--al-raio-md); cursor: pointer; background: var(--al-superficie); }
.opcao-card:has(input:checked) { border-color: var(--al-primaria); background: var(--al-azul-50); }
:root[data-tema="escuro"] .opcao-card:has(input:checked) { background: var(--al-superficie-alt); }
.opcao-card b { display: block; font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-semi); } .opcao-card small { font-size: var(--al-txt-micro); color: var(--al-texto-apoio); }
.resumo-ia { border: 1px solid var(--al-borda); border-radius: var(--al-raio-md); padding: var(--al-esp-4); display: flex; flex-direction: column; gap: var(--al-esp-3); background: var(--al-neutro-50); }
:root[data-tema="escuro"] .resumo-ia { background: var(--al-superficie-alt); }
.resumo-ia .cartao { background: var(--al-superficie); border: 1px solid var(--al-borda); border-left: 3px solid var(--al-primaria); border-radius: var(--al-raio-sm); padding: var(--al-esp-3) var(--al-esp-4); font-size: var(--al-txt-corpo-p); }
.resumo-ia .cartao.estouro { border-left-color: var(--al-acento); }
.resumo-ia .cartao b { display: block; font-weight: var(--al-peso-semi); margin-bottom: 2px; }
.resumo-ia .cartao q { font-style: italic; color: var(--al-texto-secundario); }

/* ---------- login ---------- */
/* Formulário à esquerda, marca à direita — decisão de layout do mockup aprovado.
   `.painel-marca` some a 900px (regra lá embaixo), então em celular sobra só o formulário. */
.tela-login { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; background: var(--al-superficie); }
.painel-form { display: flex; align-items: center; justify-content: center; padding: var(--al-esp-16); background: var(--al-superficie); }
.form-login { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--al-esp-4); }
.form-login h1 { font-family: var(--al-fonte-display); font-size: var(--al-txt-display-2); font-weight: var(--al-peso-bold); color: var(--al-primaria); line-height: var(--al-lh-apertado); margin: 0; }
.form-login .subtitulo { color: var(--al-texto-secundario); font-size: var(--al-txt-corpo-p); margin: 0; }
/* Só o input entra na área relativa — se fosse o `.campo` inteiro, o botão do olho subiria
   para debaixo do rótulo em vez de ficar dentro do campo de senha.
   `.form-login .campo-senha input`, e não só `.campo-senha input`: precisa da mesma
   especificidade de `.form-login .campo input` (que fixa o padding em todos os lados) para
   o padding-right maior aqui realmente vencer, em vez de ser ignorado silenciosamente. */
.campo-senha { position: relative; }
.form-login .campo-senha input { padding-right: var(--al-esp-10); }
.campo-senha .alternar-senha { position: absolute; right: var(--al-esp-2); top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--al-texto-apoio); cursor: pointer; display: inline-flex; padding: var(--al-esp-1); border-radius: var(--al-raio-sm); }
.campo-senha .alternar-senha:hover { color: var(--al-texto); }

.painel-marca { background: var(--al-azul-950); padding: var(--al-esp-16); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
/* Três fitas diagonais desfocadas (azul, vermelho, azul claro — só cores da marca), com
   `mix-blend-mode: screen` para clarear onde se cruzam. É o jeito em CSS puro de trazer o
   movimento colorido do mockup de referência sem foto de banco de imagens nem marca inventada. */
.painel-marca .fitas { position: absolute; inset: -10% -20%; z-index: 0; pointer-events: none; }
.painel-marca .fitas span { position: absolute; left: -10%; width: 130%; height: 280px; filter: blur(70px); mix-blend-mode: screen; transform: rotate(-14deg); }
.painel-marca .fitas span:nth-child(1) { top: -6%; opacity: .8; background: linear-gradient(90deg, transparent, var(--al-azul-500) 45%, transparent); }
.painel-marca .fitas span:nth-child(2) { top: 34%; opacity: .55; background: linear-gradient(90deg, transparent, var(--al-vermelho-600) 45%, transparent); }
.painel-marca .fitas span:nth-child(3) { top: 68%; opacity: .5; background: linear-gradient(90deg, transparent, var(--al-azul-300) 45%, transparent); }
.painel-marca::after { content: ""; position: absolute; right: -80px; bottom: -128px; width: 80px; height: 640px; background: var(--al-vermelho-600); transform: skewX(var(--al-barra-angulo)); z-index: 0; }
/* O painel é sempre escuro, independente do tema claro/escuro do resto da Central — por isso
   força o logotipo negativo (branco) aqui, em vez de deixar `data-tema` decidir. */
.painel-marca .logotipo .principal { display: none; }
.painel-marca .logotipo .negativo { display: block; }
.painel-marca img { width: 240px; position: relative; z-index: 1; }
.painel-marca p { color: var(--al-neutro-0); font-family: var(--al-fonte-display); font-size: var(--al-txt-titulo-3); font-weight: var(--al-peso-bold); line-height: var(--al-lh-titulo); max-width: 16ch; position: relative; z-index: 1; margin: 0; }
.painel-marca small { color: var(--al-azul-200); font-size: var(--al-txt-micro); position: relative; z-index: 1; }

/* ---------- mapa do mockup (não é produto) ---------- */
.mapa-btn { position: fixed; bottom: var(--al-esp-4); right: var(--al-esp-4); z-index: 90; height: 44px; padding: 0 var(--al-esp-4); border-radius: var(--al-raio-full); background: var(--al-neutro-900); color: var(--al-neutro-0); border: 0; box-shadow: var(--al-sombra-xl); font-size: var(--al-txt-micro); font-weight: var(--al-peso-semi); cursor: pointer; display: inline-flex; align-items: center; gap: var(--al-esp-2); }
.mapa { position: fixed; bottom: 72px; right: var(--al-esp-4); z-index: 90; background: var(--al-neutro-900); color: var(--al-neutro-0); border-radius: var(--al-raio-lg); box-shadow: var(--al-sombra-xl); padding: var(--al-esp-3); width: 300px; max-height: 70vh; overflow-y: auto; }
.mapa h4 { margin: var(--al-esp-2) var(--al-esp-2) var(--al-esp-1); font-size: var(--al-txt-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--al-neutro-400); font-family: var(--al-fonte-texto); }
.mapa button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--al-neutro-200); padding: var(--al-esp-2); border-radius: var(--al-raio-sm); font-size: var(--al-txt-micro); cursor: pointer; }
.mapa button:hover { background: rgba(255,255,255,.1); color: var(--al-neutro-0); }
.tela { display: none; } .tela.ativa { display: block; } .app.tela.ativa { display: grid; }

/* ======================================================================
   RESPONSIVO — DS §4.2
   ====================================================================== */
@media (max-width: 1279px) { .manchete .kpi .valor { font-size: var(--al-txt-titulo-3); } .c-3 { grid-column: span 6; } .c-4 { grid-column: span 6; } .c-8 { grid-column: span 12; } .grade-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grade-5 .kpi .valor { font-size: var(--al-txt-titulo-3); } }
@media (max-width: 1023px) {
  .app.tela.ativa { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 300px; z-index: 110; transform: translateX(-100%); transition: transform var(--al-dur-media) var(--al-easing); box-shadow: var(--al-sombra-xl); }
  .app.menu-aberto .sidebar { transform: none; }
  .scrim { position: fixed; inset: 0; background: rgba(11,26,54,.45); z-index: 105; }
  .topo .btn-menu { display: inline-flex; }
  /* No celular a lateral já é a gaveta do hambúrguer acima — colapsá-la também não faz
     sentido (e o `grid-template-columns: 0 1fr` nem se aplica, a gaveta é `position: fixed`). */
  .topo .btn-colapsar { display: none; }
  .app.sidebar-colapsada { grid-template-columns: var(--al-largura-sidebar) 1fr; }
  .topo { padding: 0 var(--al-esp-4); } .breadcrumb { max-width: 55vw; }
  .pagina { padding: var(--al-esp-6) var(--al-esp-4) var(--al-esp-24); }
  [class^="c-"], [class*=" c-"] { grid-column: span 12; }
  .grade-5 { grid-template-columns: 1fr; }
  .grade-detalhe { grid-template-columns: 1fr; }
  .manchete { grid-template-columns: 1fr; }
  .grade[style*="1fr 1fr"], .grade[style*="320px"] { grid-template-columns: 1fr !important; }
  .cabecalho-acoes { margin-left: 0; width: 100%; margin-top: 0; }
  .barra-filtros { flex-wrap: wrap; }
  /* Esta regra esconde os campos de filtro no celular porque, nas telas de PF, eles se mudam
     para a gaveta "Mais filtros". O painel de Postos NÃO tem gaveta — e o `.campo` dele é o
     seletor de posto. O resultado era o gestor não conseguir trocar de posto no celular: o
     controle simplesmente não existia. `.campo-fixo` é a marca de quem não some. */
  .barra-filtros .campo:not(.busca):not(.campo-fixo),
  .barra-filtros .limpar, .barra-filtros .ordenar { display: none; }
  .barra-filtros .campo-fixo { width: 100%; }
  .barra-filtros .campo-fixo select, .barra-filtros .campo-fixo .seletor-postos { flex: 1; min-width: 0; }
  .seletor-postos > summary { min-width: 0; max-width: none; }
  /* O `.menu-envolve` entrou entre a barra e o `.segmentado` quando "escolher datas" virou o
     quinto item do controle. Sem ele aqui, o grupo parava de esticar no celular: a regra
     alcançava o filho, mas o pai continuava do tamanho do conteúdo. */
  .barra-filtros .menu-envolve,
  .barra-filtros .segmentado, .barra-filtros .campo.busca, .barra-filtros .btn-filtros { width: 100%; }
  /* Cinco itens em 375 px não cabem numa linha: o grupo quebra em duas, e cada item ocupa a
     fração que sobrar em vez de estourar a tela. */
  .barra-filtros .segmentado { flex-wrap: wrap; }
  .barra-filtros .segmentado > * { flex: 1 0 auto; justify-content: center; }
  .barra-filtros .campo.busca input { width: 100%; }
  /* `a` junto de `button`: os atalhos de período são `<Link>`, e sem isto ficavam com 40 px
     de altura e sem esticar, enquanto todo o resto da barra virava 44 px. */
  .barra-filtros .campo input, .barra-filtros .campo select,
  .segmentado button, .segmentado a { height: 44px; }
  .segmentado button, .segmentado a { flex: 1; justify-content: center; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .diff { grid-template-columns: 1fr; } .comp { grid-template-columns: 1fr; }
  .item-revisao { grid-template-columns: 20px 1fr; } .item-revisao .lado { grid-column: 2; align-items: flex-start; text-align: left; }
  .lote .acoes { margin-left: 0; width: 100%; }
  .btn, .btn-sm { height: 44px; } .lista-dl { grid-template-columns: 1fr; }
  .dropzone { flex-wrap: wrap; } .dropzone .btn { margin-left: 0; width: 100%; }
}
@media (max-width: 900px) { .tela-login { grid-template-columns: 1fr; } .painel-marca { display: none; } .painel-form { padding: var(--al-esp-6); } }

/* ======================================================================
   POPOVER DE PERÍODO PERSONALIZADO
   ====================================================================== */

/* Largura fixa e conteúdo em duas colunas. A primeira versão usava `.g-2`, cuja coluna tem
   mínimo de 340 px: os dois campos empilhavam e o popover esticava por cima do conteúdo. */
.pop-datas { width: 336px; padding: var(--al-esp-4); }
.pop-datas-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--al-esp-3); }
/* Empilhado para `type="month"`: o campo imprime por extenso ("janeiro de 2026", no idioma do
   sistema) — bem mais largo que "21/09/2026", e lado a lado esse texto cortava. Ver o
   componente `SeletorPeriodo`, que só liga esta classe quando `granularidade="mes"`. */
.pop-datas-campos.pop-datas-campos-1col { grid-template-columns: 1fr; }
.pop-datas .campo input[type="date"], .pop-datas .campo input[type="month"] { height: 40px; padding: 0 var(--al-esp-2); border: 1px solid var(--al-borda-campo); border-radius: var(--al-raio-md); background: var(--al-superficie); color: var(--al-texto); font-size: var(--al-txt-corpo-p); width: 100%; font-family: var(--al-fonte-mono); font-variant-numeric: tabular-nums; }
.pop-datas .campo label { font-size: var(--al-txt-micro); }
.pop-datas .ajuda { margin: var(--al-esp-3) 0 0; font-size: var(--al-txt-micro); color: var(--al-texto-apoio); min-height: 0; }
.pop-datas-pe { display: flex; justify-content: flex-end; gap: var(--al-esp-2); margin-top: var(--al-esp-4); padding-top: var(--al-esp-3); border-top: 1px solid var(--al-borda); }

/* O popover ancora à esquerda do botão e não pode sair da tela em monitor estreito. */
.menu-envolve { position: relative; }
@media (max-width: 720px) { .pop-datas { width: min(336px, calc(100vw - 32px)); } }

/* O SeletorPeriodo — gatilho único (ícone, recorte atual, seta) que substitui o segmentado de
   período nas duas telas. O popover (`.pop-calendario`, mais abaixo) é a grade de calendário e
   a lista de atalhos nomeados lado a lado, como o print de referência do cliente. */
.seletor-periodo-gatilho { display: inline-flex; align-items: center; gap: var(--al-esp-2); height: 40px; padding: 0 var(--al-esp-3); border: 1px solid var(--al-borda); border-radius: var(--al-raio-md); background: var(--al-superficie); color: var(--al-texto); font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-medio); cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.seletor-periodo-gatilho:hover { border-color: var(--al-azul-200); color: var(--al-primaria); }
.seletor-periodo-gatilho[aria-expanded="true"] { border-color: var(--al-primaria); color: var(--al-primaria); background: var(--al-primaria-suave); }
.seletor-periodo-gatilho svg:last-child { margin-left: var(--al-esp-1); }

/* `.pop-calendario` troca a largura fixa de `.pop-datas` (336px, pensada pra dois campos de
   texto) por uma que cabe dois meses de grade lado a lado MAIS a lista de atalhos — é por isso
   que não herda `.pop-datas`/`.pop-periodo` (as duas versões anteriores deste popover) e define
   padding e largura própria. */
.pop-calendario { width: min(760px, calc(100vw - 32px)); padding: var(--al-esp-4); }
.pop-periodo-corpo { display: flex; gap: var(--al-esp-5); align-items: flex-start; }
.pop-periodo-calendario { flex: 1 1 520px; min-width: 0; }
/* A lista de atalhos rola sozinha: com onze opções (trimestre passado, ano passado…) ela não
   pode ditar a altura do popover inteiro. */
.pop-periodo-presets { list-style: none; margin: 0; padding: 0; flex: 0 0 176px; max-height: 320px; overflow-y: auto; border-left: 1px solid var(--al-borda); padding-left: var(--al-esp-4); }
.pop-periodo-presets button, .pop-periodo-presets a { display: flex; align-items: center; gap: var(--al-esp-2); width: 100%; padding: var(--al-esp-2) var(--al-esp-2); border: 0; border-radius: var(--al-raio-md); background: none; font-size: var(--al-txt-corpo-p); color: var(--al-texto); cursor: pointer; text-align: left; text-decoration: none; }
.pop-periodo-presets button:hover, .pop-periodo-presets a:hover { background: var(--al-primaria-suave); text-decoration: none; }
.pop-periodo-presets button.ativa, .pop-periodo-presets a.ativa { color: var(--al-primaria); font-weight: var(--al-peso-semi); }
.pop-periodo-presets svg { color: var(--al-primaria); flex-shrink: 0; }
@media (max-width: 640px) { .pop-periodo-corpo { flex-direction: column; } .pop-periodo-presets { flex-basis: auto; border-left: 0; padding-left: 0; border-top: 1px solid var(--al-borda); padding-top: var(--al-esp-3); max-height: 180px; } }

/* ---------- a grade do calendário (SeletorPeriodo.tsx) ---------- */
/* Dois meses (ou dois anos, em `granularidade="mes"`) lado a lado — o print de referência do
   cliente é uma agenda de reserva com exatamente esse desenho. Empilha num popover estreito
   pela mesma resposta de sempre: `flex-wrap`, não uma segunda versão da grade. */
.cal-meses { display: flex; gap: var(--al-esp-5); flex-wrap: wrap; }
.cal-mes { flex: 1 1 220px; min-width: 200px; }
.cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--al-esp-3); }
.cal-titulo { font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-semi); color: var(--al-texto); text-transform: capitalize; }
.cal-nav { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: var(--al-raio-md); background: none; color: var(--al-texto-apoio); cursor: pointer; flex: none; }
.cal-nav:hover { background: var(--al-primaria-suave); color: var(--al-primaria); }
.cal-semana { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--al-esp-1); }
.cal-semana span { text-align: center; font-size: var(--al-txt-micro); color: var(--al-texto-apoio); text-transform: uppercase; }
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dia { position: relative; height: 34px; border: 0; background: none; border-radius: var(--al-raio-sm); font-size: var(--al-txt-micro); font-family: var(--al-fonte-mono); font-variant-numeric: tabular-nums; color: var(--al-texto); cursor: pointer; }
.cal-dia:hover:not(:disabled) { background: var(--al-primaria-suave); }
.cal-dia:disabled { color: var(--al-texto-apoio); opacity: .35; cursor: not-allowed; }
.cal-dia.fora-do-mes { color: var(--al-texto-apoio); opacity: .5; }
/* O intervalo INTEIRO fica na cor suave da marca — não é fundo branco com só as pontas
   marcadas, porque aí o olho tem de somar dia a dia pra saber onde o intervalo termina. As
   pontas (`.ponta`) ganham o fundo cheio, por cima. */
.cal-dia.no-intervalo { background: var(--al-primaria-suave); border-radius: 0; }
.cal-dia.ponta-de.no-intervalo, .cal-dia.ponta-de { border-top-left-radius: var(--al-raio-full); border-bottom-left-radius: var(--al-raio-full); }
.cal-dia.ponta-ate.no-intervalo, .cal-dia.ponta-ate { border-top-right-radius: var(--al-raio-full); border-bottom-right-radius: var(--al-raio-full); }
.cal-dia.ponta { background: var(--al-primaria); color: var(--al-texto-invertido); font-weight: var(--al-peso-semi); border-radius: var(--al-raio-full); }
.cal-dia-mes { height: 44px; font-size: var(--al-txt-corpo-p); text-transform: uppercase; }
.cal-grade-meses { grid-template-columns: repeat(3, 1fr); gap: var(--al-esp-2); }
.cal-legenda { margin: var(--al-esp-3) 0 0; font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-semi); color: var(--al-texto); font-variant-numeric: tabular-nums; }

/* ======================================================================
   PERFIL — retrato
   ====================================================================== */

.retrato { width: 88px; height: 88px; border-radius: var(--al-raio-full); background: var(--al-azul-eletrico); color: var(--al-neutro-0); display: grid; place-items: center; overflow: hidden; flex: none; font-family: var(--al-fonte-display); font-size: var(--al-txt-titulo-4); font-weight: var(--al-peso-bold); }
.retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* O mesmo lugar no rodapé da lateral, em miniatura. */
.sb-rodape .retrato { width: 32px; height: 32px; font-size: var(--al-txt-micro); }

/* ======================================================================
   CALENDÁRIO DO CAIXA
   ====================================================================== */

.calendario-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--al-esp-3); margin-bottom: var(--al-esp-4); }
.calendario-nav b { font-family: var(--al-fonte-display); }

.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--al-borda); border: 1px solid var(--al-borda); border-radius: var(--al-raio-lg); overflow: hidden; }
.calendario-cab { background: var(--al-superficie-alt); padding: var(--al-esp-2); text-align: center; font-size: var(--al-txt-micro); font-weight: var(--al-peso-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--al-texto-secundario); }
/* Virou `<button>` (era `<div>`) para o dia ficar clicável — as três regras de `border`/`font`/
   `cursor` abaixo só desfazem o estilo padrão de botão do navegador; o resto continua igual. */
.calendario-dia { background: var(--al-superficie); min-height: 74px; padding: var(--al-esp-2); display: flex; flex-direction: column; gap: 1px; font-size: var(--al-txt-micro); font-variant-numeric: tabular-nums; border: 0; width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
.calendario-dia.fora { background: var(--al-neutro-50); cursor: default; }
:root[data-tema="escuro"] .calendario-dia.fora { background: var(--al-superficie-alt); }
.calendario-dia:hover:not(.fora) { background: var(--al-primaria-suave); }
/* O dia da referência é o "hoje" do painel — o último com dado, não o do relógio. */
.calendario-dia.hoje { box-shadow: inset 0 0 0 2px var(--al-primaria); }
.calendario-dia.futuro { background: var(--al-azul-50); }
:root[data-tema="escuro"] .calendario-dia.futuro { background: var(--al-primaria-suave); }
/* O dia clicado — cor diferente da de "hoje" (`--al-primaria`) porque os dois podem coincidir,
   e a marca de "aberto agora" precisa continuar visível por cima da de "hoje". */
.calendario-dia.selecionado { box-shadow: inset 0 0 0 2px var(--al-acento); }
.calendario-dia b { font-family: var(--al-fonte-display); font-size: var(--al-txt-corpo-p); color: var(--al-texto-secundario); line-height: 1.1; margin-bottom: 2px; }
.calendario-dia .entra { color: var(--al-sucesso-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendario-dia .sai { color: var(--al-erro-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendario-dia .saldo { margin-top: auto; font-weight: var(--al-peso-semi); color: var(--al-texto-secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendario-dia .saldo.negativo { color: var(--al-erro-texto); }

/* O detalhe que aparece ao clicar um dia — os títulos por trás do número, não só o total. */
.calendario-detalhe { margin-top: var(--al-esp-4); padding-top: var(--al-esp-4); border-top: 1px solid var(--al-borda); }
.calendario-detalhe .card-cabecalho { margin-bottom: 0; }

/* No celular a grade de sete colunas fica ilegível com valor dentro. Vira lista dos dias que
   têm movimento — o padrão semanal se perde, mas o número continua acessível. */
@media (max-width: 720px) {
  .calendario { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .calendario-dia { min-height: 44px; padding: 4px 2px; align-items: center; }
  .calendario-dia .entra, .calendario-dia .sai, .calendario-dia .saldo { display: none; }
  /* Sem os valores, o que resta é a marca de que há movimento naquele dia. */
  .calendario-dia:has(.entra) b, .calendario-dia:has(.sai) b { color: var(--al-primaria); font-weight: var(--al-peso-bold); }
}

/* ============================================================================
   IMPRESSÃO
   ============================================================================
   O gestor leva a aba para a reunião. Sem isto, a impressão sai com a barra
   lateral ocupando um terço da folha, os filtros no topo e os links sublinhados
   em azul — três coisas que não servem no papel e empurram o conteúdo para a
   segunda página.

   Nada aqui muda a tela: tudo vive dentro do `@media print`. */
@media print {
  /* A4 deitada: as tabelas Empresas/Produtos têm 11 colunas e não cabem em pé (28/09/2026). */
  @page { size: A4 landscape; margin: 10mm; }

  /* A tela rola dentro de `.conteudo` (altura da janela); no papel, a página inteira tem de
     sair — sem isto a impressão levava só o trecho visível, cortado numa folha. */
  html, body, .app, .conteudo { height: auto !important; min-height: 0 !important;
    overflow: visible !important; }
  .sidebar, .topo, .breadcrumb, .topo-acoes, .menu-flutuante { display: none !important; }
  .tabela-envolve, .tabela-rolagem { overflow: visible !important; max-height: none !important; }
  table { width: 100% !important; font-size: 8pt !important; }
  th, td { padding: 3px 5px !important; height: auto !important; font-size: 8pt !important; }
  canvas { max-width: 100% !important; }
  .logo-impressa { display: block !important; height: 36px; width: auto; margin: 0 0 10px; }

  /* Fundo branco e texto preto: economiza tinta e garante contraste em
     impressora monocromática, onde o cinza do tema vira quase o mesmo tom do
     texto secundário. */
  :root, body { background: #fff !important; color: #000 !important; }

  /* O que é navegação não é conteúdo. */
  .barra-lateral, .barra-filtros, .abas, .cabecalho-acoes, .acoes,
  .nao-imprimir, .menu-envolve, .modal-fundo {
    display: none !important;
  }

  /* A grade de app vira uma coluna só — a lateral saiu. */
  .app, .conteudo { display: block !important; }
  .pagina { max-width: none !important; margin: 0 !important; padding: 0 !important; }

  /* Card com sombra vira retângulo com borda: sombra não imprime, e sem borda
     os blocos se fundem num muro de texto. */
  .card, .kpi, .alerta {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    break-inside: avoid;
  }
  /* Card com tabela pode partir entre folhas — "não partir" empurrava a tabela inteira para a
     folha seguinte e deixava a primeira quase em branco (28/09/2026). A linha não parte. */
  .card:has(table) { break-inside: auto; }

  /* Tabela partida ao meio entre duas folhas perde o cabeçalho. */
  table { break-inside: auto; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }

  /* Gráfico é SVG e imprime bem; só não pode ser cortado. */
  svg { break-inside: avoid; }

  /* Link sublinhado em azul no papel é ruído: o endereço não é clicável. */
  a { color: inherit !important; text-decoration: none !important; }

  /* `<details>` fechado esconde conteúdo que no papel deveria aparecer — é o
     caso das contas de cada linha do DRE operacional. */
  details > summary { list-style: none; }
  details[open] > summary { font-weight: 600; }

  /* O resumo da IA no PDF — ver `imprimirComResumo`. Só existe durante a impressão. */
  .resumo-impresso {
    display: block !important;
    border: 1px solid #999; padding: 10px 14px; margin: 0 0 14px;
    break-inside: avoid; white-space: pre-wrap; font-size: 11pt; line-height: 1.45;
  }
  .resumo-impresso h2 { font-size: 13pt; margin: 0 0 6px; }
}

.resumo-impresso { display: none; }

/* Linhas divisórias nas tabelas (pedido do cliente, 28/09/2026): além da linha entre as
   linhas, uma entre as colunas, para o olho seguir a coluna certa numa tabela de onze. */
.tabela-envolve table th + th, .tabela-envolve table td + td { border-left: 1px solid var(--al-borda); }
.tabela-destaque thead th + th, .tabela-destaque tfoot td + td { border-left-color: rgba(255, 255, 255, .22); }
.tabela-envolve table tbody tr:last-child td { border-bottom: 1px solid var(--al-borda); }

/* Espaçamento dos gráficos padronizado (28/09/2026): o mesmo respiro entre os cards de uma
   seção, e a legenda sempre com a mesma distância do gráfico. */
section > .secao-titulo-postos + .empilha { gap: var(--al-esp-6); }
.pagina .card .legenda { display: flex; flex-wrap: wrap; row-gap: var(--al-esp-1); margin: var(--al-esp-3) 0; }
.pagina .card canvas { display: block; }
.grade.g-2 > .card, .grade.g-2-largo > .card { min-width: 0; }

/* Blocos recolhíveis de Postos (28/09/2026) — ver `ControleDeBlocos.tsx`. */
.controle-blocos { display: flex; align-items: center; gap: var(--al-esp-3); margin: 0 0 var(--al-esp-4); }
.card-cabecalho:has(> .botao-recolher), .secao-titulo-postos:has(> .botao-recolher),
.secao-titulo:has(> .botao-recolher) { display: flex; align-items: center; }
.botao-recolher { margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--al-borda); background: var(--al-superficie); color: var(--al-texto-secundario);
  font-family: var(--al-fonte-mono); font-size: 15px; line-height: 1; cursor: pointer; }
.botao-recolher:hover { border-color: var(--al-primaria); color: var(--al-primaria); }
.card.recolhido > :not(.card-cabecalho) { display: none !important; }
.card.recolhido > .card-cabecalho { margin-bottom: 0; }
section.recolhido > :not(.secao-titulo-postos):not(.secao-titulo) { display: none !important; }
@media print {
  .recolhido, .botao-recolher, .controle-blocos, .fora-do-relatorio { display: none !important; }
}
.escolha-blocos { gap: var(--al-esp-2); }
.escolha-blocos .linha { gap: var(--al-esp-2); align-items: center; font-size: var(--al-txt-corpo-p); }
.escolha-blocos .escolha-filho { margin-left: var(--al-esp-6); color: var(--al-texto-secundario); }
.logo-impressa { display: none; }

/* As instruções editáveis do resumo por IA, na gaveta de relatório. */
.instrucoes-ia { border-top: 1px solid var(--al-borda); padding-top: var(--al-esp-3); }
.instrucoes-ia > summary { cursor: pointer; font-size: var(--al-txt-corpo-p); font-weight: var(--al-peso-semi); display: flex; align-items: center; gap: var(--al-esp-2); }
.instrucoes-ia > * + * { margin-top: var(--al-esp-3); }
.instrucoes-ia .erro { color: var(--al-erro-texto); }

/* Controle que só faz sentido sem JavaScript.
   O caso é o botão "Ver" ao lado do seletor de posto: o `<form>` GET é o que funciona quando o
   script não carrega, mas com script a troca no seletor já navega — e um botão parado ao lado
   de um controle que já agiu faz a pessoa duvidar se precisava clicar.
   `@media (scripting: enabled)` responde exatamente isso. Navegador que não conhece a consulta
   simplesmente mostra o botão, que é o comportamento antigo: falha para o lado seguro. */
@media (scripting: enabled) {
  .so-sem-js { display: none !important; }
}

/* O gatilho de datas dentro do grupo segmentado.
   Ele é o quinto item de um controle de quatro links, e precisa parecer parte do mesmo bloco:
   a seta fica menor e o texto não quebra quando vira "02/08/2026 – 31/08/2026". */
.segmentado button[aria-haspopup="dialog"] { gap: var(--al-esp-1); }
.segmentado button[aria-haspopup="dialog"] svg { opacity: .6; }
/* A divisória entre itens era `a + a` e `button + button`, o que deixava sem borda justamente a
   fronteira nova: um `button` logo depois de um `a`. Com o seletor de irmão genérico, qualquer
   mistura de link e botão no grupo continua dividida. */
.segmentado > * + * { border-left: 1px solid var(--al-borda); }

/* O rodapé da lateral sem o ponto de status — ver o comentário em `pf/Shell.tsx`. O `gap` do
   `.estado-sync` contava com o ponto como primeiro filho; sem ele, o texto encostava na borda. */
.estado-sync.sem-ponto { padding-left: var(--al-esp-1); }

/* ============================================================================
   ESTADO VAZIO E CONTEÚDO DESATUALIZADO
   ============================================================================ */

/* O vazio ocupa espaço de propósito.
   Uma frase de uma linha no lugar de uma tabela faz a página colapsar de altura, e o rodapé
   sobe até o meio da tela. Com altura mínima, a moldura continua sendo a mesma antes e depois
   de o dado chegar — e quem está lendo não perde o lugar. */
.vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--al-esp-1); min-height: 140px; padding: var(--al-esp-6) var(--al-esp-4); color: var(--al-texto-secundario); }
.vazio-titulo { font-weight: var(--al-peso-medio); color: var(--al-texto); margin: 0; }
.vazio .apoio { max-width: 46ch; margin: 0; }

/* Conteúdo que ainda é do pedido anterior.
   Esmaecido e sem receber clique: continua legível — é dado de verdade, só que do período que
   estava selecionado até um segundo atrás —, mas nenhuma interação sobre ele faria sentido.
   `transition` para a volta não piscar. */
.desatualizado { opacity: .45; pointer-events: none; transition: opacity .15s ease; }

/* ============================================================================
   CHIP DE ESCOPO — desempate de uma colisão de nome
   ============================================================================ */

/* `.chip` está declarado DUAS vezes neste arquivo, e são dois componentes diferentes com o
   mesmo nome: o chip de filtro do mockup de PF (pílula azul, 28 px, com "×" para remover) e o
   chip de navegação de Postos (pílula neutra, 32 px, que é um `<a>`). A segunda declaração
   vence pela ordem, e por isso o chip "Escopo: Despesas da família (PF)" saía cinza.

   Renomear um dos dois quebraria telas de um dos módulos, e sequestrar `.chip` para o azul
   quebraria o outro — foi o que já aconteceu uma vez com `.ajuda`. O desempate explícito é
   `.chip.fixo`: o escopo não é um filtro que se remove, é uma afirmação sobre o que a tela
   está contando, e essa é exatamente a variante que só o mockup de PF usa. */
.chip.fixo {
  height: 28px;
  padding: 0 var(--al-esp-3);
  background: var(--al-azul-50);
  border-color: var(--al-azul-200);
  color: var(--al-primaria);
}
.chip.fixo:hover { border-color: var(--al-azul-200); color: var(--al-primaria); }
:root[data-tema="escuro"] .chip.fixo {
  background: var(--al-superficie-alt);
  border-color: var(--al-borda);
  color: var(--al-texto);
}

/* A faixa de chips fica colada na barra de filtros, não solta no meio da página. */
.barra-filtros + .chips { margin: calc(-1 * var(--al-esp-4)) 0 var(--al-esp-6); }

/* ============================================================================
   TOPO — ações e menu da conta
   ============================================================================ */

/* Quem cede espaço no topo é a TRILHA, sempre, e por inteiro.
   O `max-width` em `vw` que estava aqui era um chute recalibrado a cada botão novo — com o
   avatar e as duas ações do mockup, 55vw deixava de caber e a barra inteira vazava para fora
   da tela (o `overflow: hidden` do `.app` cortava o avatar, e não havia como chegar a "Sair"
   no celular). Com o flex explícito não há número a acertar: as ações ocupam o que precisam,
   a trilha fica com a sobra e abrevia sozinha. O `min-width: 0` é o que permite encolher —
   sem ele, o conteúdo de um flex item define um piso e nada disto funciona. */
.topo .breadcrumb { flex: 1 1 auto; min-width: 0; max-width: none; }
.topo .topo-acoes { flex: none; }

/* Em 375 px o topo leva hambúrguer, trilha, "Lançamento rápido", "Tema" e o avatar. A palavra
   "Tema" é a primeira a sair: o ícone de lua/sol já diz o que o botão faz, e o rótulo é o
   único dos cinco que não carrega informação própria. */
@media (max-width: 1023px) {
  /* Só o ícone: a lua/sol já diz o que o botão faz, e "Tema" é o único dos rótulos do topo
     que não carrega informação própria. */
  .topo-acoes .btn-tema { padding: 0; width: 36px; }
  .topo-acoes .btn-tema .rotulo-tema { display: none; }
  /* O mesmo para a ação rápida. O mockup a some de vez no celular; aqui ela vira o raio
     sozinho — cabe na mesma largura e continua alcançável, que é a diferença entre apertar a
     tela e tirar uma função dela. */
  .topo-acoes .btn-primario { padding: 0; width: 36px; }
  .topo-acoes .btn-primario .rotulo-acao { display: none; }


  /* O `.menu-envolve` que embrulha "Personalizado" é filho do `.segmentado`, não da barra.
     A regra de 100% lá de cima é para o que fica SOLTO na barra; aplicada aqui, ela empurrava
     os outros três atalhos para fora da tela. */
  .barra-filtros .segmentado .menu-envolve { width: auto; }
  .barra-filtros .segmentado .menu-envolve > button { width: 100%; }

  /* O grupo de período volta a QUEBRAR LINHA no celular, que é o que o comentário lá de cima
     ("cinco itens em 375 px não cabem numa linha") já dizia que ele devia fazer.

     Ele não fazia. `.segmentado button { flex: 1 }`, mais abaixo no mesmo bloco, vence
     `.segmentado > * { flex: 1 0 auto }` pela ordem — e `flex: 1` é `1 1 0%`, base ZERO. Com
     base zero os quatro itens "cabem" numa linha só (0+0+0+0 ≤ largura), o navegador não
     quebra nada, e aí cada um cresce até o próprio min-content: o grupo passa da tela, a
     coluna inteira passa junto, e a página ganha rolagem horizontal do topo ao rodapé. Era
     por isso que o avatar e o botão de Sair ficavam inalcançáveis em 390 px.

     A base volta a ser `auto`, que é o que permite ao flex decidir quantos cabem por linha. */
  .barra-filtros .segmentado > button,
  .barra-filtros .segmentado > a,
  .barra-filtros .segmentado > .menu-envolve { flex: 1 0 auto; }
}

/* O selo "(balde)" — na árvore do Analítico E na tabela "Acima do orçado" da Visão geral.
   Estava preso a `.arvore`, e fora dela saía sem espaço nenhum: "Outros(balde)". */
.marca-balde { font-size: var(--al-txt-micro); color: var(--al-texto-apoio); font-weight: var(--al-peso-regular); margin-left: var(--al-esp-2); }
.arvore .col-nota { width: 64px; }
.arvore .col-nota svg { color: var(--al-neutro-500); }

/* Botão que se lê como link.
   "mostrar", "Expandir tudo" e companhia são AÇÕES na própria tela — não levam a lugar
   nenhum —, então o elemento certo é `<button>`, não `<a href="#">`. Um `<a>` sem destino é
   um link que o teclado anuncia como link e que não navega, e é assim que o mockup escapa da
   questão. A classe dá a aparência sem mentir sobre o elemento. */
.ligacao {
  border: 0; background: none; padding: 0; font: inherit;
  color: var(--al-primaria); font-weight: var(--al-peso-semi);
  cursor: pointer; text-decoration: none;
}
.ligacao:hover { text-decoration: underline; }
.ligacao:focus-visible { outline: 2px solid var(--al-primaria); outline-offset: 2px; border-radius: 2px; }

/* ============================================================================
   BARRAS HORIZONTAIS COM EIXO — o gráfico do cartão de viagem
   ============================================================================ */

/* Grade de duas colunas: o rótulo mede o que precisar (até um teto), a barra fica com o
   resto. `minmax(0, …)` no rótulo e `min-width: 0` no trilho porque, sem os dois, um nome
   longo empurra a barra para fora do cartão em vez de abreviar. */
.barras-h { display: grid; gap: var(--al-esp-2); }
.bh-linha { display: grid; grid-template-columns: minmax(0, 112px) 1fr; gap: var(--al-esp-3); align-items: center; height: 22px; }
.bh-rot { font-size: var(--al-txt-micro); color: var(--al-texto-secundario); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A escala é a régua, e ela para antes do fim da linha: os 60 px que sobram à direita são
   onde o rótulo do valor cabe quando a barra chega ao topo do eixo. Ver o componente. */
.bh-escala { position: relative; height: 14px; width: calc(100% - 60px); min-width: 0; }
.bh-escala > i { position: absolute; left: 0; top: 0; height: 14px; background: var(--al-primaria); border-radius: var(--al-raio-sm); z-index: 1; }
.bh-escala > i:hover { background: var(--al-azul-800); }
/* z-index acima do `.bh-meta` (2) e fundo sólido: quando o orçado está perto do realizado —
   o caso comum —, o tique cai exatamente onde o valor começa, e sem isto o traço vermelho
   atravessava os dígitos ("915 mil" com um risco no meio do "9"). O texto agora cobre o
   tique por cima, em vez de os dois disputarem o mesmo pixel. */
.bh-val { position: absolute; top: 50%; transform: translateY(-50%); margin-left: var(--al-esp-2); font-size: var(--al-txt-micro); color: var(--al-texto-apoio); white-space: nowrap; z-index: 3; background: var(--al-superficie); padding: 0 2px; border-radius: 2px; }
.bh-clicavel:hover .bh-val { background: var(--al-primaria-suave); }

/* A grade é uma camada absoluta atrás das barras — ver o comentário do componente. */
.bh-grade { position: absolute; inset: -3px 0; pointer-events: none; }
.bh-grade > span { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--al-borda); }

/* A linha do eixo é só a régua: mede o mesmo que as barras e não tem altura de barra. */
.bh-eixo { height: 18px; }
.bh-eixo .bh-escala { height: 14px; border-top: 1px solid var(--al-borda); }
.bh-tique { position: absolute; top: 2px; transform: translateX(-50%); font-size: var(--al-txt-micro); color: var(--al-texto-apoio); white-space: nowrap; }

/* No celular o rótulo sobe para cima da barra: 120 px de gutter em 375 px de tela deixariam
   a barra com menos da metade da largura, e aí o comprimento deixa de comparar coisa alguma. */
@media (max-width: 1023px) {
  .bh-linha { grid-template-columns: 1fr; gap: 0; height: auto; }
  .bh-rot { text-align: left; }
  .bh-eixo .bh-rot { display: none; }
}

/* Cartão marcado por ATENÇÃO, não por importância.
   `.card-destaque` pinta a borda esquerda de azul — é "olhe primeiro para este". Um cartão de
   viagem fora do orçamento pede outra coisa: é o mesmo vermelho de `.alerta-erro`, porque a
   marca não está dizendo "este é o principal", e sim "este passou". Duas intenções, dois
   nomes; pintar `.card-destaque` de vermelho trocaria o significado nas outras telas. */
.card-alerta { border-left: 4px solid var(--al-erro-600); }

/* O cartão de viagem cuja tabela está aberta logo abaixo.
   Não é `.card-destaque` (azul à esquerda, "olhe primeiro para este") nem `.card-alerta`
   (vermelho, "este passou do orçado") — pode conviver com os dois, porque "está aberto" é
   estado, não juízo. Por isso é contorno e fundo, e não a faixa lateral, que já tem dono. */
.card-aberto { border-color: var(--al-primaria); background: var(--al-primaria-suave); }
:root[data-tema="escuro"] .card-aberto { background: var(--al-superficie-alt); }

/* O caminho "Centro · Categoria › Conta" de Desvios, numa linha só.
   Sem isto, "Cartão Banco do Brasil › Cartão de Crédito" quebra em duas linhas e dobra a
   altura da linha inteira da tabela — e são cinquenta linhas. O caminho completo fica no
   `title`, para quem precisar do que foi abreviado. */
.celula-caminho { max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* O tique do orçado sobre a barra horizontal — o mesmo papel do `<b>` de `.bullet`.
   A barra é o realizado; o tique é onde o orçado estava. Responde "passou ou não passou" sem
   subtração mental: se a barra ultrapassou o tique, passou. */
.bh-escala > .bh-meta { position: absolute; top: -3px; width: 2px; height: 20px; background: var(--al-acento-acao); z-index: 2; }

/* Linha clicável: em Categorias e Por casa, clicar na barra filtra a tela. */
.bh-clicavel { cursor: pointer; border-radius: var(--al-raio-sm); }
.bh-clicavel:hover { background: var(--al-primaria-suave); }

/* O rótulo com segunda linha ("Salários / Funcionários" em Maiores contas) precisa de altura
   automática — a fixa de 22px cortava a segunda linha pela metade. */
.bh-linha:has(.bh-rot small) { height: auto; min-height: 34px; }
.bh-rot small { display: block; font-size: var(--al-txt-micro); line-height: 1.2; }

/* Painéis no formato do BI do cliente (Visão Mensal) — ver componentes/postos/PainelBI.tsx.
   Cartão por posto com três barras (Meta, Atual, Mês anterior) e as duas variações ao lado.
   Mínimo de 190px: com o menu lateral aberto numa tela de 1280–1440px sobram ~1.050px, e com
   230px o quinto cartão (4 postos + consolidado) caía sozinho numa segunda linha. */
.painel-bi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--al-esp-3); }
.cartao-bi { border: 1px solid var(--al-borda); border-radius: var(--al-raio-lg); background: var(--al-superficie);
  padding: var(--al-esp-4); min-width: 0; container-type: inline-size; }
.cartao-bi.destaque { background: var(--al-superficie-alt); }
.cartao-bi h3 { text-align: center; font-size: var(--al-txt-corpo); font-weight: var(--al-peso-semi);
  margin: 0 0 var(--al-esp-3); }
.corpo-bi { display: flex; gap: var(--al-esp-3); align-items: stretch; }
.barras-bi { flex: 1; display: flex; gap: 6px; align-items: flex-end; height: 150px; min-width: 0; }
.coluna-bi { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; min-width: 0; }
.valor-bi { font-family: var(--al-fonte-mono); font-size: 10px; color: var(--al-texto-apoio); margin-bottom: 2px;
  white-space: nowrap; }
.barras-bi .barra-bi { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; }
.barra-bi.meta { background: var(--al-azul-300); }
.barra-bi.atual { background: var(--al-sucesso-600); } /* verde desde 29/09/2026: azul e cinza se confundiam */
.barra-bi.anterior { background: var(--al-neutro-400); }
.comparacoes-bi { display: flex; flex-direction: column; justify-content: center; gap: var(--al-esp-4);
  min-width: 84px; font-family: var(--al-fonte-mono); font-size: var(--al-txt-micro); }
.comparacoes-bi > div { display: flex; flex-direction: column; gap: 2px; }
.rotulo-bi { font-family: var(--al-fonte-texto); font-weight: var(--al-peso-semi); color: var(--al-texto); }
.sobe-bi { color: var(--al-sucesso-600); }
.desce-bi { color: var(--al-erro-600); }

/* DRE em barras (Visão Diária, 28/09/2026): trilho cheio = meta (ou projetado, sem meta),
   parte preenchida = realizado, traço = projetado; ao lado, as colunas do BI. Clicar abre o detalhe. */
.dre-barras { display: flex; flex-direction: column; gap: 2px; }
.dre-barras details > summary, .dre-linha, .dre-linha-total, .dre-cabecalho { display: grid; align-items: center;
  grid-template-columns: minmax(170px, 240px) minmax(120px, 1fr) 118px 118px 118px 78px; gap: var(--al-esp-3);
  padding: 6px 4px; border-radius: var(--al-raio-sm, 4px); }
/* Sem "Ver valores em R$": uma coluna a menos (a meta em R$ sai). */
.dre-barras.sem-valores details > summary, .dre-barras.sem-valores .dre-linha,
.dre-barras.sem-valores .dre-linha-total, .dre-barras.sem-valores .dre-cabecalho {
  grid-template-columns: minmax(170px, 240px) minmax(120px, 1fr) 118px 118px 78px; }
.dre-cabecalho { font-size: var(--al-txt-micro); font-weight: var(--al-peso-bold); letter-spacing: .06em;
  text-transform: uppercase; color: var(--al-texto-secundario); border-bottom: 1px solid var(--al-borda-forte); }
.dre-cabecalho > span:nth-child(n+3) { text-align: right; }
.dre-barras details > summary { cursor: pointer; list-style: none; border-bottom: 1px solid var(--al-borda); }
.dre-barras details > summary::-webkit-details-marker { display: none; }
.dre-barras details > summary:hover, .dre-barras details[open] > summary { background: var(--al-superficie-alt); }
.dre-barras details[open] > summary .dre-rotulo { font-weight: var(--al-peso-semi); }
.dre-linha-total { border-top: 2px solid var(--al-borda-forte); margin-top: 4px; font-weight: var(--al-peso-semi); }
.dre-rotulo { font-size: var(--al-txt-corpo-p); color: var(--al-texto); }
.dre-trilho { position: relative; height: 16px; background: var(--al-neutro-100); border-radius: 3px; }
.dre-base, .dre-realizado { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.dre-base { opacity: .3; }
.dre-mais .dre-base, .dre-mais .dre-realizado { background: var(--al-primaria); }
.dre-menos .dre-base, .dre-menos .dre-realizado { background: var(--al-erro-600); }
.dre-proj { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--al-texto); }
.dre-valor { font-family: var(--al-fonte-mono); font-size: var(--al-txt-corpo-p); text-align: right; white-space: nowrap; }
.dre-dif { font-family: var(--al-fonte-mono); font-size: var(--al-txt-micro); text-align: right; }
.dre-dif.ruim { color: var(--al-erro-600); }
.dre-barras details > ul, .dre-barras details > p { margin-left: var(--al-esp-4); }
@media (max-width: 900px) {
  .dre-barras details > summary, .dre-linha, .dre-linha-total, .dre-cabecalho,
  .dre-barras.sem-valores details > summary, .dre-barras.sem-valores .dre-linha,
  .dre-barras.sem-valores .dre-linha-total { grid-template-columns: 1fr auto auto; }
  .dre-trilho { grid-column: 1 / -1; order: 9; }
  .dre-cabecalho { display: none; }
}

/* A marcação laranja do BI: margem abaixo da margem do grupo. */
td.abaixo-da-media { background: var(--al-alerta-fundo); }
/* `minmax(0, 1fr)`, e não `1fr`: `1fr` é `minmax(auto, 1fr)`, e o mínimo "auto" deixava a
   tabela de nove colunas esticar a coluna para além da página (visto no print de 25/09/2026). */
.produtos-bi { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: var(--al-esp-4); align-items: start; }
/* Cartão estreito (cinco num 1280px com o menu aberto): as variações vão para baixo das barras
   em vez de disputar a largura com elas. */
@container (max-width: 250px) {
  .corpo-bi { flex-direction: column; }
  .barras-bi { flex: none; height: 120px; }
  .comparacoes-bi { min-width: 0; gap: var(--al-esp-1); }
  .comparacoes-bi > div { flex-direction: row; flex-wrap: wrap; justify-content: space-between;
    align-items: baseline; gap: 0 var(--al-esp-2); }
  .rotulo-bi { white-space: nowrap; }
  /* A seta e o número são uma coisa só: se não couberem ao lado do rótulo, descem juntos. */
  .comparacoes-bi > div > :last-child { white-space: nowrap; margin-left: auto; }
}
/* A tabela por produto tem nove colunas: ao lado da rosca ela só cabe em tela larga. Abaixo
   disso, a rosca vai para cima e a tabela ganha a largura inteira. */
@media (max-width: 1499px) { .produtos-bi { grid-template-columns: minmax(0, 1fr); } }

/* ── Largura: nada passa da página (25/09/2026) ──────────────────────────────────────────────
   O cliente mandou um print com tabela saindo pela direita e nome de posto quebrando em três
   linhas. Três regras resolvem a família inteira:
   1. item de grade não estica a coluna pelo conteúdo — a tabela larga rola DENTRO do cartão
      (`.tabela-envolve` já tem `overflow-x: auto`); sem `min-width: 0`, o item herda o mínimo
      "auto" e empurra a página;
   2. nas tabelas do BI (`.tabela-destaque`) o nome da linha fica numa linha só — quem cede
      espaço são os cabeçalhos numéricos, que quebram em duas linhas como no BI;
   3. os filtros de uma seção não somam a margem de cada `.barra-filtros` (32px + 32px). */
.grade > *, .painel-bi > *, .produtos-bi > *, .empilha > * { min-width: 0; }
.tabela-destaque tbody td:first-child, .tabela-destaque tfoot td:first-child { white-space: nowrap; }
.tabela-destaque thead th.valor { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.filtros-secao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--al-esp-3) var(--al-esp-6); }
.filtros-secao > .barra-filtros { margin-bottom: 0; }
/* Onze colunas numa tela de 1280px com o menu aberto: a tabela do BI fica mais compacta que a
   tabela comum (célula de 16px de cada lado) para caber sem rolar sempre que der. */
.tabela-destaque th, .tabela-destaque td { padding-left: var(--al-esp-2); padding-right: var(--al-esp-2); }
.tabela-destaque th:first-child, .tabela-destaque td:first-child { padding-left: var(--al-esp-4); }
.tabela-destaque th:last-child, .tabela-destaque td:last-child { padding-right: var(--al-esp-4); }
.tabela-destaque tbody td { height: 40px; padding-top: var(--al-esp-2); padding-bottom: var(--al-esp-2); }
/* Dois cartões lado a lado só quando cada um tem espaço para uma tabela de cinco colunas; abaixo
   disso, um embaixo do outro (a "Galonagem do mês" ficava cortada em meia largura). */
.g-2-largo { grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); }

/* Clientes — a tabela longa do BI (mais de cem clientes): rola dentro de uma área fixa, com o
   cabeçalho e o total sempre à vista, e o nome comprido é cortado com reticências (o nome
   inteiro fica no `title`) em vez de empurrar as colunas de número para fora do cartão. */
.busca-tabela input { height: 40px; width: 100%; max-width: 420px; padding: 0 var(--al-esp-3);
  border: 1px solid var(--al-borda-campo); border-radius: var(--al-raio-md);
  background: var(--al-superficie); color: var(--al-texto); font-size: var(--al-txt-corpo-p); }
.tabela-rolagem { max-height: 620px; overflow: auto; }
.tabela-rolagem thead th { position: sticky; top: 0; z-index: 1; }
.tabela-rolagem tfoot td { position: sticky; bottom: 0; z-index: 1; }
/* Achatada (pedido de 25/09/2026): cabeçalho numa linha só, com rótulos curtos (o nome inteiro
   da coluna fica no `title`), e linha baixa — cabe mais cliente na área que rola. */
.tabela-clientes td:first-child { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.tabela-clientes thead th, .tabela-clientes thead th.valor { white-space: nowrap; padding-top: var(--al-esp-2);
  padding-bottom: var(--al-esp-2); letter-spacing: .03em; }
.tabela-clientes tbody td { height: 32px; padding-top: 2px; padding-bottom: 2px; font-size: var(--al-txt-micro); }
.tabela-clientes tfoot td { padding-top: var(--al-esp-2); padding-bottom: var(--al-esp-2); font-size: var(--al-txt-micro); }
@media (max-width: 1399px) {
  .tabela-clientes td:first-child { max-width: 145px; }
  .tabela-clientes th, .tabela-clientes td { padding-left: 5px; padding-right: 5px; }
  .tabela-clientes thead th { letter-spacing: 0; }
}
/* Barras horizontais: rótulo longo (nome de cliente com razão social inteira) em no máximo duas
   linhas — o nome completo continua no `title`. Sem isso, um nome ocupava cinco linhas. */
.comp .rot { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; }

/* A tabelinha de dados de cada gráfico (28/09/2026): só no papel — na tela o gráfico já mostra. */
.dados-do-grafico { display: none; }
@media print {
  .dados-do-grafico {
    display: table; width: 100%; margin-top: 6px; border-collapse: collapse;
    font-size: 9px; font-family: var(--al-fonte-mono, monospace); break-inside: avoid;
  }
  .dados-do-grafico th, .dados-do-grafico td {
    border: 1px solid #CDD1D9; padding: 2px 6px; text-align: right; height: auto;
  }
  .dados-do-grafico th:first-child, .dados-do-grafico td:first-child { text-align: left; }
  .dados-do-grafico thead th { background: #F2F4F7; font-weight: 600; }
}

/* O ranking (componentes/ui/leaderboard-table, 28/09/2026): as cores dele vêm daqui, ligadas
   aos tokens da marca — e mudam junto no tema escuro. */
:root {
  --vz-ink: var(--al-texto); --vz-text2: var(--al-texto-secundario); --vz-text3: var(--al-texto-secundario);
  --vz-muted: var(--al-texto-terciario, var(--al-texto-secundario)); --vz-muted2: var(--al-texto-terciario, var(--al-texto-secundario));
  --vz-frame: var(--al-borda); --vz-grid: var(--al-borda); --vz-track: var(--al-neutro-100, var(--al-superficie-alt));
  --vz-surface: var(--al-superficie); --vz-hover: var(--al-superficie-alt);
  --vz-chip: var(--al-primaria); --vz-chip-ink: var(--al-texto-invertido);
}
:root[data-tema="escuro"] { --vz-track: var(--al-superficie-alt); }

/* Tabela "Não combustíveis": cada categoria abre nos produtos dela (29/09/2026) — só HTML/CSS,
   para o servidor continuar decidindo o que vai à página (sem R$ para quem não pode ver). */
.grupo-abre .grupo-item { display: none; }
.grupo-abre:has(.grupo-toggle:checked) .grupo-item { display: table-row; }
.grupo-rotulo { display: inline-flex; align-items: center; gap: var(--al-esp-2); cursor: pointer; }
.grupo-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.grupo-rotulo::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
.grupo-abre:has(.grupo-toggle:checked) .grupo-rotulo::before { transform: rotate(45deg); }
.grupo-toggle:focus-visible + span { outline: 2px solid var(--al-primaria); outline-offset: 2px; }
.grupo-item td { background: var(--al-superficie-alt, #F7F8FA); font-size: 13px; }
.grupo-item td:first-child { padding-left: 36px; }

/* Faturamento por dia em barras horizontais, na ordem dos dias (29/09/2026). */
.barras-dia { display: grid; grid-template-columns: 56px 1fr auto; gap: 4px var(--al-esp-3); align-items: center; }
.barras-dia .dia { font-family: var(--al-fonte-mono, monospace); font-size: 12px; color: var(--al-texto-apoio); }
.barras-dia .trilho { height: 14px; background: var(--al-superficie-alt, #F1F3F6); border-radius: 3px; overflow: hidden; }
.barras-dia .trilho i { display: block; height: 100%; background: var(--al-primaria); border-radius: 3px; }
.barras-dia .trilho i.maior { background: var(--al-sucesso-600); }
.barras-dia .valor { font-family: var(--al-fonte-mono, monospace); font-size: 12px; text-align: right; min-width: 88px; }
@media print { .barras-dia .trilho i { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }