/* Painel Comércio Exterior (Comex Stat), pele Atlas v2 da família logística.

   Referência de aparência: painel-ferrovia (cabeçalho, barra de filtros, combos, chips, cards, cabeçalho
   de card, tabela e régua da marca, com as mesmas classes e medidas). Toda cor vem por PAPEL de tokens.css;
   nenhum hexadecimal aqui. Desvios da referência, todos pelo contraste de 6:1 pedido para texto pequeno
   (medido com a luminância da WCAG sobre os valores de tokens.css):
   - texto de rótulo e auxiliar em --texto-2 (8,8:1 claro, 9,6:1 escuro), e não em --texto-3 (5,6:1 no
     claro) nem em --primary-color (4,1:1 no claro);
   - fundo de cabeçalho de tabela, hover e linha selecionada pelos papéis de superfície, porque --azul-10 e
     --azul-20 são degraus FIXOS da escala e ficam claros no tema escuro, sob texto claro;
   - chip e modo ativos em --cobre-80 com letra --cobre-10 no claro (6,7:1) e em --acento com letra
     --superficie no escuro (7,0:1), no lugar de --primary-color com --superficie (4,1:1 no claro);
   - a marca do cabeçalho é desenhada inline com --marca-ink, que troca por html[data-tema]; sem filter.

   ESCALA DE TEXTO (Plano W, W1, 14/10/2026). --escala vale 1 até 1599 px e sobe por faixa a partir de 1600 px
   (1,08; 1,18; 1,40; 1,85). Todo font-size e o que acompanha o texto (recheio e altura dos controles, folgas,
   altura do cabeçalho e da barra, larguras dos combos, a marca) é calc(<px de antes> * var(--escala)): com
   escala 1 o valor calculado é o mesmo de antes, de 1280 a 1536 px nada muda (medido por
   testes/medir_tipografia.mjs). Cada passo sobe mais de 2% e menos que a raiz do fator de área entre as telas
   (regras ESCALA_AUSENTE e ESCALA_EXCESSIVA do auditar_responsividade.py). Bordas, filetes e raios ficam fixos.
   O JavaScript lê a mesma --escala para o texto do SVG, a medida no canvas e a coluna de rótulos (comum.js, ESC). */
:root{
  --escala:1;
  --primary-color:var(--acento); --accent-color:var(--acento); --bg-light:var(--fundo); --card-bg:var(--superficie);
  --text-primary:var(--texto); --text-secondary:var(--texto-2); --border-color:var(--borda);
  --shadow-sm:0 1px 2px 0 var(--sombra); --neutral-bar:var(--azul-90);
  --ambos:var(--azul);      /* azul    = os dois fluxos */
  --envia:var(--acento);    /* cobre   = sai do Brasil (exportação) */
  --recebe:var(--ameixa);   /* ameixa  = entra no Brasil (importação) */
  --exp:var(--envia); --imp:var(--recebe); --media:var(--ambar);
}
/* faixas de 1600 px para cima (a tabela das faixas e o que muda em cada uma está no PLANO.md, Resultado da W1) */
@media (min-width:1600px){ :root{--escala:1.08} }
@media (min-width:1920px){ :root{--escala:1.18} }
@media (min-width:2560px){ :root{--escala:1.40} }
@media (min-width:3840px){ :root{--escala:1.85} }
*{margin:0;padding:0;box-sizing:border-box}
/* Erro 13 de Barcarena: toda classe com display declarado precisa do [hidden] explícito */
[hidden]{display:none !important}
body{font-family:var(--fonte);background:var(--bg-light);color:var(--text-primary);
     line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;
     height:100vh;display:flex;flex-direction:column}
.main-header,.barra-filtros{flex:0 0 auto}

/* ---------- header (referência: painel-ferrovia) ---------- */
.main-header{background:var(--superficie);padding:0 calc(40px*var(--escala));border-bottom:1px solid var(--border-color);
     box-shadow:var(--shadow-sm)}
.header-top{display:flex;align-items:center;gap:calc(40px*var(--escala));height:calc(64px*var(--escala))}
.header-top[hidden]{display:none}
.header-marca{display:flex;align-items:center;gap:calc(15px*var(--escala));min-width:0;flex:1 1 auto}
.header-marca[hidden]{display:none}
.header-titulo{display:flex;flex-direction:column;justify-content:center;gap:1px;
  border-left:2px solid var(--border-color);padding-left:calc(15px*var(--escala));min-width:0;overflow:hidden}
.header-titulo[hidden]{display:none}
.header-nome{font-size:calc(12.5px*var(--escala));font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--text-primary);white-space:nowrap}
.header-sub{font-size:calc(10.5px*var(--escala));font-weight:700;letter-spacing:.045em;text-transform:uppercase;
  color:var(--text-secondary);white-space:nowrap;overflow:hidden;cursor:default}
.main-nav{display:flex;gap:calc(32px*var(--escala))}
.main-nav[hidden]{display:none}
.header-top .main-nav{margin-left:auto;gap:calc(28px*var(--escala));align-items:center;flex:none}
.header-top .nav-btn{padding:calc(22px*var(--escala)) calc(2px*var(--escala))}
/* o botão do tema vem do tema.js com 30 px; aqui ele acompanha a escala (com escala 1, os mesmos 30 px) */
.header-top .btn-tema{width:calc(30px*var(--escala));height:calc(30px*var(--escala))}
.header-top .btn-tema svg{width:calc(15px*var(--escala));height:calc(15px*var(--escala))}
.nav-btn{background:none;border:none;padding:calc(12px*var(--escala)) calc(4px*var(--escala));font-size:calc(11.5px*var(--escala));font-weight:600;
     color:var(--text-secondary);cursor:pointer;text-transform:uppercase;letter-spacing:.1em;
     border-bottom:2px solid transparent;text-decoration:none;transition:all .2s}
.nav-btn:hover{color:var(--text-primary)}
.nav-btn.active{color:var(--text-primary);border-bottom-color:var(--primary-color);font-weight:700}

/* ---------- filtros: uma linha (Plano V, V5) ----------
   Rótulo à esquerda do controle, combos elásticos (cedem primeiro), Fluxo e Medida em grupo segmentado.
   Altura medida: controles de 30 px e 7 px de folga em cima e embaixo (vezes a escala). */
.barra-filtros{display:flex;align-items:center;gap:calc(14px*var(--escala));padding:calc(7px*var(--escala)) calc(16px*var(--escala));
     background:var(--superficie);border-bottom:1px solid var(--border-color);flex-wrap:nowrap;min-width:0}
.barra-filtros[hidden]{display:none}
.grupo{display:flex;align-items:center;min-width:0}
.grupo[hidden]{display:none}
.grupo-campos{display:flex;gap:calc(14px*var(--escala));align-items:center;min-width:0}
.grupo-campos[hidden]{display:none}
/* na barra, os campos são itens diretos da linha: a largura dos combos sai de pesos fixos, não do texto escolhido
   (um nome de alfândega longo não pode tirar a largura do combo de carga) */
.barra-filtros .grupo,.barra-filtros .grupo-campos{display:contents}
.divisor{width:1px;height:calc(22px*var(--escala));align-self:center;background:var(--border-color);flex:none}
.campo{display:flex;flex-direction:row;align-items:center;gap:calc(7px*var(--escala));min-width:0;flex:none}
.campo[hidden]{display:none}
.campo>span{font-size:calc(9.5px*var(--escala));font-weight:700;text-transform:uppercase;letter-spacing:.06em;
     color:var(--text-secondary);line-height:1;white-space:nowrap;flex:none}
.campo-elastico{flex:1 1 0}
.campo-elastico .combo{flex:1 1 auto;min-width:0}
.campo-urf{flex-grow:1.3;min-width:calc(150px*var(--escala));max-width:calc(320px*var(--escala))}
.campo-sh{flex-grow:1.15;min-width:calc(150px*var(--escala));max-width:calc(290px*var(--escala))}
.campo-pais{flex-grow:1;min-width:calc(128px*var(--escala));max-width:calc(240px*var(--escala))}
select{font-family:var(--fonte);font-size:calc(12px*var(--escala));font-weight:600;height:calc(30px*var(--escala));
     color:var(--text-primary);background:var(--superficie);border:1.5px solid var(--border-color);
     border-radius:8px;padding:0 calc(8px*var(--escala));min-width:0;cursor:pointer;transition:all .2s}
select:hover,select:focus{border-color:var(--primary-color);outline:none;
     box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 10%, transparent)}
#f-via{width:calc(118px*var(--escala));flex:none}
/* registro suspeito (Plano S, S2b): o controle mora no CABEÇALHO, entre o título e as abas, e não na barra de filtros,
   que não tem folga (o botão da S2 na barra cortava "Todas as cargas" e "Todos os países" em 1280 e 1360 px). Incluído:
   etiqueta discreta "Registro suspeito na fonte: retirar"; retirado: o aviso "1 registro retirado (...)" e "desfazer",
   na mesma caixa. A caixa é quem encolhe (o nome e o lugar do cabeçalho não cedem de 1200 px para cima) e o texto troca
   para a variante que cabe (ajustaTexto), com o inteiro na dica. Desabilitado, o botão deixa o mouse passar à caixa,
   que mostra a dica com o motivo. */
.ctrl-suspeito{display:flex;align-items:center;gap:calc(8px*var(--escala));flex:0 1 auto;min-width:0;overflow:hidden;
     height:calc(26px*var(--escala));padding:0 calc(9px*var(--escala));border-radius:8px;border:1px solid var(--border-color);
     color:var(--text-secondary);font-size:calc(11px*var(--escala));font-weight:600;white-space:nowrap;cursor:default}
.ctrl-suspeito.retirado{background:var(--acento-sutil);border-color:var(--cobre-40);color:var(--cobre-90);font-weight:700}
[data-tema="escuro"] .ctrl-suspeito.retirado{color:var(--acento);border-color:var(--acento)}
.ctrl-suspeito.indisponivel{opacity:.6}
.aviso-suspeito{min-width:0;overflow:hidden;white-space:nowrap;flex:0 1 auto}
.aviso-suspeito[hidden]{display:none}
.btn-suspeito{display:flex;align-items:center;gap:calc(4px*var(--escala));min-width:0;flex:0 1 auto;overflow:hidden;
     font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
.btn-suspeito .rot{min-width:0;overflow:hidden;white-space:nowrap}
.ctrl-suspeito.retirado .btn-suspeito{flex:none}   /* retirado: quem encolhe é o aviso, nunca o "desfazer" */
.btn-suspeito .rot:empty{display:none}
.btn-suspeito .acao{flex:none;color:var(--cobre-80);font-weight:700;text-decoration:underline;text-underline-offset:2px}
[data-tema="escuro"] .btn-suspeito .acao{color:var(--acento)}
/* retirado (S3, contraste de 6:1): sobre --acento-sutil o --cobre-80 dá 5,99:1 no claro e o --acento 5,32:1 no escuro;
   o "desfazer" sobe ao --cobre-90 (9,77:1) no claro e, no escuro, o aviso e o "desfazer" sobem ao --acento-forte
   (7,13:1). Mesma cor do aviso nos dois temas (no escuro já era assim); a ação continua sublinhada e em 700. */
.ctrl-suspeito.retirado .btn-suspeito .acao{color:var(--cobre-90)}
[data-tema="escuro"] .ctrl-suspeito.retirado,
[data-tema="escuro"] .ctrl-suspeito.retirado .btn-suspeito .acao{color:var(--acento-forte)}
.btn-suspeito:hover .acao{text-decoration-thickness:2px}
.btn-suspeito:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px;border-radius:4px}
.btn-suspeito:disabled{pointer-events:none;cursor:not-allowed}
.btn-suspeito:disabled .acao{color:inherit;text-decoration:none;font-weight:600}
@media (min-width:1200px){ .header-marca{flex-shrink:0} }
/* abaixo de 1360 px a barra continua numa linha: folgas menores e botões mais justos (os rótulos ficam inteiros),
   para os combos não cortarem o texto da escolha (a escala aqui é sempre 1) */
@media (max-width:1359px){
  .barra-filtros{gap:10px;padding-left:12px;padding-right:12px}
  .campo{gap:5px}
  .segmentado .chip{padding:0 8px}
  #f-via{width:108px}
}

/* combo com busca (alfândega, produto e país) */
.combo{position:relative}
.combo-gatilho{display:flex;align-items:center;justify-content:space-between;gap:calc(10px*var(--escala));
     height:calc(30px*var(--escala));font-size:calc(12px*var(--escala));font-weight:600;background:var(--superficie);color:var(--text-primary);
     border:1.5px solid var(--border-color);
     border-radius:8px;padding:0 calc(10px*var(--escala));cursor:pointer;transition:all .2s;
     white-space:nowrap;overflow:hidden}
.combo-gatilho[hidden]{display:none}
.combo-gatilho:hover{border-color:var(--primary-color)}
.combo.aberto .combo-gatilho{border-color:var(--primary-color);
     box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 10%, transparent)}
.combo-gatilho .txt{overflow:hidden;text-overflow:ellipsis}
.combo-gatilho .seta{font-size:calc(8px*var(--escala));color:var(--text-secondary);flex-shrink:0}
.combo-painel{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:2000;
     width:calc(340px*var(--escala));background:var(--superficie);border:1px solid var(--border-color);border-radius:12px;
     box-shadow:0 8px 28px color-mix(in srgb, var(--texto) 13%, transparent);overflow:hidden}
.combo.aberto .combo-painel{display:block}
.combo-busca{width:100%;border:none;border-bottom:1px solid var(--border-color);
     padding:calc(9px*var(--escala)) calc(12px*var(--escala));font-family:var(--fonte);font-size:calc(12px*var(--escala));outline:none;
     background:var(--superficie);color:var(--text-primary)}
.combo-busca::placeholder{color:var(--text-secondary)}
.combo-lista{max-height:calc(300px*var(--escala));overflow-y:auto;padding:calc(5px*var(--escala))}
.combo-item{padding:calc(7px*var(--escala)) calc(10px*var(--escala));border-radius:7px;font-size:calc(12px*var(--escala));cursor:pointer;color:var(--text-primary);
     white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-item:hover{background:var(--hover)}
.combo-item.sel{background:var(--acento-sutil);font-weight:700}
.combo-item .uf{font-size:calc(9px*var(--escala));font-weight:800;color:var(--text-secondary);margin-left:calc(5px*var(--escala));
     font-variant-numeric:tabular-nums;float:right}
.combo-vazio{padding:calc(14px*var(--escala));text-align:center;font-size:calc(11px*var(--escala));color:var(--text-secondary)}
.combo-grupo{padding:calc(6px*var(--escala)) calc(10px*var(--escala)) calc(3px*var(--escala));font-size:calc(9px*var(--escala));font-weight:800;text-transform:uppercase;
     letter-spacing:.06em;color:var(--text-secondary)}

.chips{display:flex;gap:calc(6px*var(--escala))}
.chips[hidden]{display:none}
.chip{font-family:var(--fonte);font-size:calc(11px*var(--escala));font-weight:700;height:calc(30px*var(--escala));padding:0 calc(12px*var(--escala));border-radius:8px;
     cursor:pointer;background:var(--superficie);border:1.5px solid var(--border-color);
     color:var(--text-secondary);transition:all .2s;white-space:nowrap}
.chip:hover{border-color:var(--primary-color);color:var(--text-primary);background:var(--hover)}
.chip.active{background:var(--cobre-80);color:var(--cobre-10);border-color:var(--cobre-80)}
[data-tema="escuro"] .chip.active{background:var(--acento);color:var(--superficie);border-color:var(--acento)}
.chip:disabled{opacity:.45;cursor:not-allowed}
/* grupo segmentado: uma caixa só, divisores de 1 px, o ativo com as cores do .chip.active */
.segmentado{gap:0;height:calc(30px*var(--escala));border:1.5px solid var(--border-color);border-radius:8px;overflow:hidden;
     background:var(--superficie)}
.segmentado .chip{height:100%;border:0;border-radius:0;padding:0 calc(11px*var(--escala))}
.segmentado .chip+.chip{border-left:1px solid var(--border-color)}
.segmentado .chip:hover{border-color:var(--border-color)}
.segmentado .chip.active,[data-tema="escuro"] .segmentado .chip.active{border-color:var(--border-color)}
.segmentado .chip:focus-visible{outline:2px solid var(--primary-color);outline-offset:-3px}

/* ---------- layout ---------- */
.layout-comex{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
     padding:calc(10px*var(--escala)) calc(16px*var(--escala)) calc(8px*var(--escala));gap:calc(10px*var(--escala));
     overflow:hidden;transition:opacity .15s}
.layout-comex[hidden]{display:none}
.card{background:var(--card-bg);border-radius:10px;border:1px solid var(--border-color);
     box-shadow:0 1px 3px color-mix(in srgb, var(--texto) 6%, transparent);overflow:hidden;display:flex;flex-direction:column;
     min-width:0;min-height:0}
.card[hidden]{display:none}
.panel-header{display:flex;align-items:center;gap:calc(10px*var(--escala));padding:calc(7px*var(--escala)) calc(14px*var(--escala));
     border-bottom:1px solid var(--border-color);position:relative;
     background:linear-gradient(135deg,var(--superficie) 0%,var(--superficie-2) 100%);flex-shrink:0}
.panel-header[hidden]{display:none}
.panel-header h3{font-size:calc(12.5px*var(--escala));font-weight:700;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.panel-header .aux{font-size:calc(11px*var(--escala));font-weight:700;color:var(--text-secondary);white-space:nowrap;
     overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.modos{display:flex;gap:calc(4px*var(--escala));flex-shrink:0}
.modos[hidden]{display:none}
.modo{font-family:var(--fonte);font-size:calc(9.5px*var(--escala));font-weight:700;padding:calc(3px*var(--escala)) calc(9px*var(--escala));border-radius:6px;cursor:pointer;
     background:var(--superficie);border:1.5px solid var(--border-color);color:var(--text-secondary);
     transition:all .15s;white-space:nowrap}
.modo:hover{border-color:var(--primary-color);color:var(--text-primary)}
.modo.active{background:var(--cobre-80);color:var(--cobre-10);border-color:var(--cobre-80)}
[data-tema="escuro"] .modo.active{background:var(--acento);color:var(--superficie);border-color:var(--acento)}
.modo:disabled{opacity:.45;cursor:not-allowed}
.sel-mini{height:calc(24px*var(--escala));font-size:calc(10.5px*var(--escala));padding:0 calc(6px*var(--escala));
     min-width:calc(76px*var(--escala));max-width:calc(210px*var(--escala));border-radius:6px;flex-shrink:0}

/* ---------- indicadores: 4 cartões numa linha (molde do .kpi-card da família Atlas e dos cartões de Barcarena) ----------
   Rótulo pequeno em caixa alta, número grande em Onest 700 com algarismos tabulares, unidade por extenso menor e a
   comparação embaixo; filete esquerdo de 3 px no acento. O lugar foi para o cabeçalho (DV4). */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(10px*var(--escala));flex:0 0 auto}
.kpis[hidden]{display:none}
.kpi{background:var(--card-bg);border:1px solid var(--border-color);border-left:3px solid var(--acento);border-radius:6px;
     box-shadow:0 1px 3px color-mix(in srgb, var(--texto) 6%, transparent);
     padding:calc(7px*var(--escala)) calc(14px*var(--escala)) calc(7px*var(--escala)) calc(13px*var(--escala));min-width:0;
     display:flex;flex-direction:column;gap:1px;text-align:left}
.kpi .l{font-size:calc(10px*var(--escala));font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);
     white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
/* número do cartão, uma régua por faixa (ajuste 8 da revisão do Plano W): até 1599 px, a de antes, pela largura
   (24 px em 1280, 25 px em 1360, 27,2 px em 1536); de 1600 px para cima, 26 px vezes a --escala (28,08 px em 1600,
   30,68 em 1920, 36,4 em 2560, 48,1 em 3840), sem somar as duas.
   A área de conteúdo da Onest passa .08 em da altura de linha de 1,12 em cima e embaixo (medido: 2 px em 25 px),
   e o overflow:hidden cortava 2 px (CONTENCAO_CORTE do auditar_ui.py): o recheio de .1 em em cima e embaixo cobre a
   área da fonte, e a margem negativa igual devolve o espaço, de modo que nem a letra nem o cartão saem do lugar. */
.kpi .v{font-size:clamp(24px, calc(8px + 1.25vw), 30px);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.12;
     letter-spacing:-.01em;white-space:nowrap;overflow:hidden;color:var(--text-primary);
     padding-block:.1em;margin-block:-.1em}
@media (min-width:1600px){ .kpi .v{font-size:calc(26px*var(--escala))} }
.kpi .v small{font-size:calc(12px*var(--escala));font-weight:600;letter-spacing:0;color:var(--text-secondary);margin-left:calc(6px*var(--escala))}
.kpi .d{font-size:calc(11px*var(--escala));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
     font-variant-numeric:tabular-nums;line-height:1.35}
.sobe{color:var(--verde-texto)} .desce{color:var(--vermelho-texto)} .neutro{color:var(--text-secondary)}
/* Erro 15: --vermelho-texto do escuro (#E5826F) dá 5,16:1 sobre a linha da tabela; --vermelho-40 passa de 6:1. tokens.css fica igual ao da ferrovia. */
[data-tema="escuro"] .desce{color:var(--vermelho-40)}

/* ---------- grade de cards ---------- */
.grade-comex{flex:1 1 auto;min-height:0;display:grid;gap:calc(10px*var(--escala));
     grid-template-columns:57% 1fr;grid-template-rows:1fr 1fr}
.grade-comex[hidden]{display:none}
.grade-comex.sazonal{grid-template-columns:52% 1fr;grid-template-rows:1fr 1fr}
.grafico-corpo{flex:1;min-height:0;position:relative;margin:calc(4px*var(--escala)) calc(12px*var(--escala)) 0}
.grafico-corpo[hidden]{display:none}
.grafico-corpo svg{position:absolute;inset:0;width:100%;height:100%}
.aviso-card{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
     color:var(--text-secondary);font-size:calc(11.5px*var(--escala));font-weight:600;text-align:center;padding:0 calc(18px*var(--escala))}
.aviso-card[hidden]{display:none}
.legenda-linha{display:flex;gap:calc(12px*var(--escala));flex-wrap:nowrap;flex:none;
     padding:calc(3px*var(--escala)) calc(14px*var(--escala)) calc(6px*var(--escala));font-size:calc(10.5px*var(--escala));
     font-weight:600;color:var(--text-secondary);overflow:hidden;white-space:nowrap}
.legenda-linha[hidden]{display:none}
.legenda-linha i{display:inline-block;width:calc(10px*var(--escala));height:calc(10px*var(--escala));border-radius:2px;
     margin-right:calc(5px*var(--escala));vertical-align:-1px}
.legenda-linha i.linha{height:3px;border-radius:0;vertical-align:2px}

/* ---------- segmentador "entre" no cabeçalho da série mensal: caixa com o rótulo PERÍODO, o mês de cada ponta e a
   régua dos meses da série inteira com duas alças (dois input range sobrepostos; só as alças recebem o ponteiro).
   Ocupa o espaço livre entre o título e os atalhos; com período escolhido nele (?periodo=datas), a borda acende
   como um atalho ativo. A unidade da série desce para a linha da legenda (.aux-legenda). ---------- */
.segmentador{display:flex;align-items:center;gap:calc(8px*var(--escala));flex:1 1 auto;min-width:0;
     height:calc(28px*var(--escala));padding:0 calc(10px*var(--escala));border-radius:8px;
     background:var(--superficie);border:1.5px solid var(--border-color);transition:border-color .15s}
.segmentador:hover,.segmentador:focus-within{border-color:var(--primary-color)}
.segmentador.ativo{border-color:var(--cobre-80);box-shadow:inset 0 0 0 1px var(--cobre-80)}
[data-tema="escuro"] .segmentador.ativo{border-color:var(--acento);box-shadow:inset 0 0 0 1px var(--acento)}
.seg-titulo{font-size:calc(9.5px*var(--escala));font-weight:700;letter-spacing:.06em;text-transform:uppercase;
     color:var(--text-secondary);white-space:nowrap}
.seg-rot{font-family:var(--fonte);font-size:calc(12px*var(--escala));font-weight:700;color:var(--text-primary);
     font-variant-numeric:tabular-nums;white-space:nowrap;min-width:calc(66px*var(--escala));text-align:center;
     background:none;border:1px solid transparent;border-radius:6px;padding:calc(2px*var(--escala)) calc(5px*var(--escala));
     cursor:pointer;transition:all .15s}
.seg-rot::after{content:"▾";font-size:calc(8px*var(--escala));color:var(--text-secondary);margin-left:calc(4px*var(--escala));
     vertical-align:1px}
.seg-rot:hover,.seg-rot[aria-expanded="true"]{background:var(--hover);border-color:var(--border-color)}
.seg-rot:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}
/* menu suspenso do mês (aba-mensal.js, abreMenu): grade de 12 meses de um ano, ou dos anos da série */
.seg-menu{position:fixed;z-index:2100;width:calc(236px*var(--escala));padding:calc(10px*var(--escala));
     background:var(--superficie);border:1px solid var(--border-color);border-radius:12px;
     box-shadow:0 8px 28px color-mix(in srgb, var(--texto) 16%, transparent)}
.seg-menu[hidden]{display:none}
.seg-menu-titulo{font-size:calc(9.5px*var(--escala));font-weight:700;letter-spacing:.06em;text-transform:uppercase;
     color:var(--text-secondary);margin-bottom:calc(6px*var(--escala))}
.seg-menu-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(6px*var(--escala))}
.seg-menu-nav button,.seg-menu-nav .seg-menu-ano{font-family:var(--fonte);font-size:calc(13px*var(--escala));font-weight:700;
     color:var(--text-primary);background:none;border:1px solid transparent;border-radius:6px;
     padding:calc(3px*var(--escala)) calc(10px*var(--escala));cursor:pointer}
.seg-menu-nav span.seg-menu-ano{cursor:default;margin:0 auto}
.seg-menu-nav button:hover:not(:disabled){background:var(--hover);border-color:var(--border-color)}
.seg-menu-nav button:disabled{opacity:.3;cursor:default}
.seg-menu-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(4px*var(--escala))}
.seg-menu-grade.anos{grid-template-columns:repeat(5,1fr)}
.seg-menu-grade button{font-family:var(--fonte);font-size:calc(12px*var(--escala));font-weight:600;
     font-variant-numeric:tabular-nums;padding:calc(6px*var(--escala)) 0;border-radius:6px;border:1.5px solid transparent;
     background:none;color:var(--text-primary);cursor:pointer}
.seg-menu-grade button:hover:not(:disabled){border-color:var(--primary-color)}
.seg-menu-grade button:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}
.seg-menu-grade button.dentro{background:var(--acento-sutil)}
.seg-menu-grade button.ponta{border-color:var(--cobre-80);font-weight:700}
.seg-menu-grade button.atual{background:var(--cobre-80);color:var(--cobre-10);border-color:var(--cobre-80);font-weight:700}
[data-tema="escuro"] .seg-menu-grade button.ponta{border-color:var(--acento)}
[data-tema="escuro"] .seg-menu-grade button.atual{background:var(--acento);color:var(--superficie);border-color:var(--acento)}
.seg-menu-grade button:disabled{opacity:.35;cursor:not-allowed}
.seg-trilho{--th:calc(16px*var(--escala));position:relative;flex:1 1 auto;min-width:calc(56px*var(--escala));height:var(--th)}
.seg-trilho::before,.seg-faixa{content:"";position:absolute;top:50%;height:6px;margin-top:-3px;border-radius:3px}
.seg-trilho::before{left:calc(var(--th)/2);right:calc(var(--th)/2);background:var(--border-color)}
.seg-faixa{background:var(--cobre-80);left:calc(var(--th)/2 + (100% - var(--th))*var(--a,0));
     right:calc(var(--th)/2 + (100% - var(--th))*(1 - var(--b,1)))}
[data-tema="escuro"] .seg-faixa{background:var(--acento)}
.seg-trilho input{position:absolute;inset:0;width:100%;height:100%;margin:0;background:none;
     -webkit-appearance:none;appearance:none;pointer-events:none}
.seg-trilho input::-webkit-slider-runnable-track{background:none;height:100%}
.seg-trilho input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:var(--th);height:var(--th);
     border-radius:50%;background:var(--cobre-80);border:2.5px solid var(--card-bg);box-shadow:0 0 0 1.5px var(--cobre-80),
     0 1px 3px color-mix(in srgb, var(--texto) 25%, transparent);cursor:grab;box-sizing:border-box}
.seg-trilho input::-moz-range-track{background:none}
.seg-trilho input::-moz-range-thumb{pointer-events:auto;width:var(--th);height:var(--th);border-radius:50%;
     background:var(--cobre-80);border:2.5px solid var(--card-bg);box-shadow:0 0 0 1.5px var(--cobre-80);cursor:grab;
     box-sizing:border-box}
.seg-trilho input:active::-webkit-slider-thumb{cursor:grabbing}
[data-tema="escuro"] .seg-trilho input::-webkit-slider-thumb{background:var(--acento);box-shadow:0 0 0 1.5px var(--acento)}
[data-tema="escuro"] .seg-trilho input::-moz-range-thumb{background:var(--acento);box-shadow:0 0 0 1.5px var(--acento)}
.seg-trilho input:focus-visible{outline:none}
.seg-trilho input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--primary-color);outline-offset:2px}
.seg-trilho input:focus-visible::-moz-range-thumb{outline:2px solid var(--primary-color);outline-offset:2px}
/* linha da legenda: itens à esquerda, a escolha e a unidade à direita */
.linha-serie{align-items:center;justify-content:space-between}
.legenda-itens{display:flex;gap:calc(12px*var(--escala));flex:0 0 auto}
.aux-legenda{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
/* tela estreita (a página já rola): o segmentador desce para uma linha própria no cabeçalho, com a largura toda */
@media (max-width:760px){
  .c-serie .panel-header{flex-wrap:wrap;row-gap:calc(6px*var(--escala))}
  .c-serie .segmentador{order:3;flex:1 1 100%}
  .c-serie .modos{margin-left:auto}
  .linha-serie{flex-wrap:wrap}
  .aux-legenda{flex:1 1 100%;text-align:left}
}

/* ---------- tabela ----------
   A altura da linha é ajustada no JS (ajustaTabela, comum.js) para caber os meses e o TOTAL (piso de 16 px, vezes a
   escala); se não couber, a caixa fica com um número inteiro de linhas, rola por dentro presa nas linhas e abre no
   fim, sem linha meio coberta pelo cabeçalho nem pelo TOTAL. */
.tab-scroll{flex:1;overflow-y:auto;min-height:0;scrollbar-gutter:stable}
.tab-scroll.rola{scroll-snap-type:y mandatory}
.tab-scroll.rola tbody tr:not(.total){scroll-snap-align:start}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:calc(11px*var(--escala));line-height:1.3}
thead th{position:sticky;top:0;z-index:5;background:var(--superficie-2);color:var(--text-secondary);
     font-size:calc(9.5px*var(--escala));font-weight:800;text-transform:uppercase;letter-spacing:.05em;
     padding:calc(6px*var(--escala)) calc(8px*var(--escala));text-align:right;border-bottom:2px solid var(--border-color);white-space:nowrap}
thead th:first-child{text-align:left}
tbody td{padding:calc(3px*var(--escala)) calc(8px*var(--escala));border-bottom:1px solid var(--superficie-2);white-space:nowrap;text-align:right;
     font-variant-numeric:tabular-nums}
table.ajustada tbody tr:not(.total) td{height:var(--h-linha);padding-top:0;padding-bottom:0}
tbody td:first-child{text-align:left;font-weight:600}
tbody td.nome{max-width:calc(210px*var(--escala));overflow:hidden;text-overflow:ellipsis}
tbody tr:hover td{background:var(--hover)}
tbody tr.clicavel{cursor:pointer}
tbody tr.sel td{background:var(--acento-sutil)}
tbody td.pouco{color:var(--text-secondary);font-style:italic;font-weight:500}
tbody tr.total td{position:sticky;bottom:0;background:var(--superficie-2);color:var(--text-primary);
     font-weight:800;border-top:2px solid var(--primary-color);border-bottom:0}

/* ---------- rodapé: nota curta numa linha (texto inteiro na dica), selo dos dados (versão na dica) e um ponto
   discreto com a situação do motor de consultas (só na dica; erro do motor vai ao cartão afetado) ---------- */
.rodape-painel{display:flex;align-items:center;gap:calc(14px*var(--escala));flex:0 0 auto;padding:calc(4px*var(--escala)) calc(12px*var(--escala));
     background:var(--superficie);border:1px solid var(--border-color);border-radius:8px;
     font-size:calc(10.5px*var(--escala));font-weight:700;white-space:nowrap;overflow:hidden;color:var(--text-primary)}
.rodape-painel[hidden]{display:none}
.rodape-painel .nota{flex:1;min-width:0;overflow:hidden;font-weight:600;color:var(--text-secondary);cursor:default}
.rodape-painel .sec{font-weight:600;color:var(--text-secondary);flex-shrink:0;cursor:default}
.motor{flex:none;width:calc(15px*var(--escala));height:calc(15px*var(--escala));display:inline-flex;align-items:center;justify-content:center;cursor:default}
.motor::before{content:"";display:block;width:calc(7px*var(--escala));height:calc(7px*var(--escala));border-radius:50%;background:var(--borda-forte)}
.motor[data-situacao="carregando"]::before{background:var(--ambar)}
.motor[data-situacao="pronto"]::before{background:var(--verde)}
.motor[data-situacao="erro"]::before{background:var(--vermelho)}

/* ---------- dica (o mesmo desenho que o tema.js dá ao tooltip do Chart.js) ---------- */
#dica{position:fixed;z-index:3000;pointer-events:none;opacity:0;transition:opacity .09s;
     background:var(--texto);color:var(--superficie);border:1px solid var(--borda-forte);border-radius:0;
     padding:calc(9px*var(--escala)) calc(10px*var(--escala));font-size:calc(11.5px*var(--escala));max-width:calc(330px*var(--escala));
     box-shadow:0 8px 22px var(--sombra)}
#dica b{color:var(--superficie);font-weight:800}
#dica .l{display:flex;justify-content:space-between;gap:calc(14px*var(--escala));color:var(--superficie-3)}
#dica .l span:last-child{color:var(--superficie);font-variant-numeric:tabular-nums;font-weight:700}
#dica .nota{color:var(--superficie-3);font-size:calc(10.5px*var(--escala));margin:calc(2px*var(--escala)) 0 calc(5px*var(--escala))}

svg text{font-family:var(--fonte)}

/* ---------- a marca, dimensionada pela TINTA (pele Atlas v2; régua copiada da referência) ----------
   A régua tem UMA medida declarada (--altura-do-A) e o resto vem das métricas da peça ativa
   (identidade/marca-metricas.css). A marca é inline e pinta com --marca-ink, que muda por
   html[data-tema]: nenhum filter. Ela acompanha a escala do cabeçalho (com escala 1, os 46 px de sempre). */
:root{
  --altura-do-A: calc(46px * var(--escala));
  --h-logo: calc(var(--altura-do-A) / var(--marca-fracao-a, 0.6693));
  --largura-marca: calc(158px * var(--escala));
}
.logo{
  height: var(--h-logo);
  width: auto; object-fit: contain;
  transform: translateY(calc(-1 * var(--marca-desvio, 0.0551) * var(--h-logo)));
}
.logo{ width: var(--largura-marca); object-position: left center; }
.header-marca{ align-items: center; }

@media (max-width:1100px){
  body{overflow:auto;height:auto}
  .grade-comex,.grade-comex.sazonal{grid-template-columns:1fr;grid-template-rows:repeat(4,minmax(240px,1fr))}
  .barra-filtros{flex-wrap:wrap;row-gap:8px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.celula{cursor:pointer}
/* amostra da faixa na legenda: o mesmo preenchimento e o mesmo contorno do gráfico (V5, medida M7) */
.legenda-linha i.faixa{background:color-mix(in srgb, var(--borda) 85%, transparent);
     box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--texto-3) 85%, transparent)}