/*
 * Tokens do produto.
 *
 * Promove a camada de acessibilidade do ADR-0006 de "<style> de wireframe"
 * para token de verdade — era o "revisitar quando" registrado lá. As razões
 * de contraste ao lado de cada token são MEDIDAS (tools/contrast-check.mjs),
 * não estimadas: o Industry sintoniza accent/fundo em ~3:1, o que reprova AA
 * para corpo de texto, e o texto pequeno deste produto carrega justamente a
 * procedência, que o R3 exige que seja legível.
 */

:root {
  /* ALIAS do Industry, não cópia. Antes deste arquivo carregar
     `industry.css`, os mesmos três valores estavam escritos duas vezes — aqui e
     lá — e a segunda cópia ia divergir da primeira no dia em que alguém
     retunasse o design system. Agora há um lugar só onde o valor mora. */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --texto: var(--color-text);

  /* 8.06:1 sobre --bg */
  --texto-1: color-mix(in srgb, var(--texto) 80%, transparent);
  /* 5.40:1 · padrão de todo texto secundário informativo */
  --texto-2: color-mix(in srgb, var(--texto) 68%, transparent);
  /* 4.92:1 · piso AA. Abaixo de 65% reprova sobre --surface. */
  --texto-3: color-mix(in srgb, var(--texto) 65%, transparent);
  /* 3.13:1 · REPROVA AA. Só para marca decorativa, nunca para texto. */
  --texto-decor: color-mix(in srgb, var(--texto) 50%, transparent);

  --divisor: var(--color-divider);
  /* Accent puro dá 3.71:1 como texto e REPROVA AA; o passo 700 dá 5.78:1.
     Isto não é desvio do design system: é o que o readme do Industry manda —
     "for paragraph-size text in the accent use a deep ramp step
     (--color-accent-700)". O ADR-0006 chegou nisso medindo, sem ter lido o
     readme, e as duas conclusões bateram. */
  --link: var(--color-accent-700);
  --link-forte: var(--color-accent-800);
  --accent-fraco: var(--color-accent-100);

  --espaco-1: 4px; --espaco-2: 8px; --espaco-3: 12px;
  --espaco-4: 16px; --espaco-6: 24px; --espaco-8: 32px;
}

@media (prefers-color-scheme: dark) {
  /* Só quando NÃO há escolha explícita: `html[data-tema]` vence a preferência
     do sistema, senão o botão de tema não teria efeito no sentido contrário. */
  /* Os percentuais acima foram medidos sobre fundo claro e NÃO valem no
     escuro (ADR-0006, "revisitar quando"). Aqui os valores são recalculados
     para o novo fundo, não reaproveitados. */
  :root:not([data-tema]) {
    /* Os três NÃO são redefinidos aqui, de propósito: `--bg`, `--surface` e
       `--texto` são ALIAS de `--color-*`, e alias se re-resolve sozinho quando
       o token muda. Redefini-los criava uma SEGUNDA paleta escura, e os 17
       pontos do Industry que usam `--color-bg` direto ficavam num tom enquanto
       o resto da página ficava noutro. `--divisor` também sai: ele já é alias
       de `--color-divider`, que o bloco escuro do Industry recalcula. */
    --texto-1: color-mix(in srgb, var(--texto) 92%, transparent);
    --texto-2: color-mix(in srgb, var(--texto) 78%, transparent);
    --texto-3: color-mix(in srgb, var(--texto) 70%, transparent);
    --texto-decor: color-mix(in srgb, var(--texto) 45%, transparent);
    /* No escuro a direção se inverte: o passo CLARO é que passa em contraste.
       Reaproveitar o 700 daria 2,1:1. */
    --link: var(--color-accent-300); --link-forte: var(--color-accent-200);
    --accent-fraco: var(--color-accent-900);
  }
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0; background: var(--bg); color: var(--texto);
  /* `font-family` explícito, e NÃO o atalho `font:`. O atalho zera a família,
     e como este arquivo carrega depois do `industry.css` ele apagava o Barlow
     em silêncio: `getComputedStyle(body).fontFamily` devolvia `system-ui` e
     todo o produto ficava com fonte de sistema enquanto os cabeçalhos, que
     declaram a família à parte, apareciam em Barlow Condensed. Meia
     tipografia é mais estranha que nenhuma. */
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--link-forte); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Pular para o conteúdo: o grid tem muitos links e sem isso a navegação por
   teclado exige atravessar o cabeçalho a cada página. */
.pular {
  position: absolute; left: -9999px; top: 0; background: var(--bg);
  padding: var(--espaco-3); border: 1px solid var(--link); z-index: 10;
}
.pular:focus { left: var(--espaco-3); }

header.topo {
  display: flex; gap: var(--espaco-4); align-items: baseline; flex-wrap: wrap;
  padding: var(--espaco-3) var(--espaco-6); border-bottom: 1px solid var(--divisor);
}
.marca { font-weight: 700; letter-spacing: .04em; }
/* `flex-wrap` no NAV, não só no cabeçalho.
   O cabeçalho já quebrava linha, mas o nav era um item flex indivisível — ao
   ganhar o quinto link (Divergências) ele passou a medir 324px numa viewport de
   320 e o corpo inteiro rolava na horizontal. Medido pelo smoke, em 320px:
   `scrollWidth=336`, e é a única largura em que o produto reprova refluxo.
   `min-width: 0` é o que permite ao item flex encolher abaixo do conteúdo — sem
   ele o `flex-wrap` não tem efeito. */
.topo nav {
  display: flex; flex-wrap: wrap; min-width: 0;
  gap: var(--espaco-2) var(--espaco-4); margin-left: auto; font-size: 14px;
}
/* A identidade da sessão fica depois da navegação, e no refluxo a 320px cai
   para a linha seguinte sem empurrar nada para fora da viewport. */
.sessao { display: flex; gap: var(--espaco-2); align-items: baseline; font-size: 14px; }

main { padding: var(--espaco-6); max-width: 1400px; margin: 0 auto; }
h1 { font-size: 26px; margin: 0 0 var(--espaco-2); line-height: 1.2; }
h2 { font-size: 19px; margin: var(--espaco-8) 0 var(--espaco-3); }
.secundario { color: var(--texto-2); font-size: 13px; }

.faixa {
  border: 1px solid var(--divisor); border-left: 3px solid var(--link);
  padding: var(--espaco-3) var(--espaco-4); margin-bottom: var(--espaco-6);
  font-size: 13.5px; line-height: 1.6; background: var(--surface);
}

/* ── filtros ─────────────────────────────────────────────────────────────── */
.filtros { display: flex; gap: var(--espaco-3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--espaco-4); }
.campo { display: flex; flex-direction: column; gap: var(--espaco-1); }
.campo label { font-size: 12px; color: var(--texto-2); }
input, select, button {
  font: inherit; font-size: 14px; padding: 7px 10px;
  border: 1px solid var(--divisor); border-radius: 3px;
  background: var(--bg); color: var(--texto);
}
button { cursor: pointer; }
button:hover { background: var(--surface); }
.linkish {
  background: none; border: 0; padding: 0; color: var(--link);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit;
}

/* ── tabela ──────────────────────────────────────────────────────────────── */
.rolagem { overflow-x: auto; }           /* a tabela rola, o corpo não (1.4.10) */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-2); padding: var(--espaco-2); border-bottom: 1px solid var(--divisor);
  white-space: nowrap;
}
td { padding: var(--espaco-2); border-bottom: 1px solid color-mix(in srgb, var(--texto) 8%, transparent); vertical-align: top; }
tbody tr:hover { background: color-mix(in srgb, var(--texto) 4%, transparent); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }

/* ── componente ÚNICO de valor financeiro ────────────────────────────────── */
/* Resolve o débito registrado na autocrítica do Gate 4: o wireframe repetia
   três variações de layout para a mesma coisa, e cada variação é uma chance
   de violar o R2 por descuido. Aqui existe um componente só. */
.valor {
  border: 1px solid var(--divisor); padding: var(--espaco-3);
  display: flex; flex-direction: column; gap: var(--espaco-1);
  min-width: 0;
}
.valor[data-estado="indisponivel"] { border-style: dashed; }
.valor[data-estado="carregando"] { border-style: dashed; opacity: .7; }
.valor .estagio {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2);
}
.valor .quantia {
  font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15;
}
.valor[data-estado="indisponivel"] .quantia { font-size: 15px; color: var(--texto-2); }
.valor .rodape {
  display: flex; gap: var(--espaco-2); flex-wrap: wrap; align-items: baseline;
  font-size: 11.5px; color: var(--texto-2); margin-top: var(--espaco-1);
}
.valor .formula { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--texto-2); }
.valor .motivo { font-size: 11.5px; color: var(--texto-2); line-height: 1.45; }

.proc {
  font-size: 9.5px; letter-spacing: .08em; padding: 2px 6px; border: 1px solid var(--divisor);
  white-space: nowrap;
}
.proc[data-p="OFICIAL"] { border-color: var(--link); color: var(--link-forte); }
.proc[data-p="DERIVADA"] { background: var(--surface); }
.proc[data-p="INFERIDA"], .proc[data-p="IA"] { border-style: dashed; color: var(--texto-2); }
.proc[data-p="NÃO DISPONÍVEL"] { border-style: dashed; color: var(--texto-2); }

.grade-valores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--espaco-3);
}

/* Contador NÃO é o componente de valor financeiro, e a diferença é proposital.
   Quantia exige procedência, escopo e caminho até a origem (R3); contagem de
   linhas da base não tem estágio nem fórmula, e vesti-la com a mesma roupa
   convidaria a lê-la como dinheiro. */
.contador {
  display: flex; flex-direction: column; gap: var(--espaco-1);
  padding: var(--espaco-3); border: 1px solid var(--divisor);
}
.contador .conta { font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1.1; }

/* Alerta de operação. A gravidade é uma BORDA, não uma cor de fundo nem de
   texto: a paleta do produto é medida para AA em texto (ADR-0006), e tingir
   texto por gravidade quebraria as razões de contraste — além de violar a
   1.4.1, que proíbe cor como único portador de significado. Por isso a
   gravidade também aparece escrita no título. */
.alerta {
  border-left: 3px solid var(--divisor);
  padding: var(--espaco-2) var(--espaco-3);
  margin: var(--espaco-2) 0;
}
.alerta[data-g="alta"]  { border-left-color: var(--texto-1); }
.alerta[data-g="media"] { border-left-color: var(--texto-2); }
.alerta[data-g="baixa"] { border-left-color: var(--texto-3); }
.sem-margem { margin: 0; }

.saldo {
  display: flex; justify-content: space-between; gap: var(--espaco-4);
  padding: var(--espaco-3) 0; border-bottom: 1px solid var(--divisor); flex-wrap: wrap;
}
.saldo .formula { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--texto-2); }

/* ── diálogo da memória de cálculo ───────────────────────────────────────── */
dialog {
  border: 1px solid var(--divisor); background: var(--bg); color: var(--texto);
  max-width: min(760px, 94vw); width: 100%; padding: 0;
}
dialog::backdrop { background: rgb(0 0 0 / .5); }
.dlg-topo {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--espaco-4);
  padding: var(--espaco-4); border-bottom: 1px solid var(--divisor);
}
.dlg-corpo { padding: var(--espaco-4); max-height: 60vh; overflow: auto; }

@media (max-width: 640px) {
  main { padding: var(--espaco-4) var(--espaco-3); }
  header.topo { padding: var(--espaco-3); }
  .grade-valores { grid-template-columns: 1fr; }
}

/* Classes que substituem estilo inline: o CSP do proprio servidor bloqueia
   `style="..."`, e o CSP esta certo — quem estava errado era o markup. */
.largo { min-width: 260px; }
.estreito { width: 110px; }
.espaco-acima { margin-top: var(--espaco-4); }
.sem-margem { margin: 0; }
.h2-menor { font-size: 16px; }
.dlg-titulo { margin: 0; font-size: 19px; }
.rodape-dlg { margin-top: var(--espaco-4); }
.rodape {
  padding: var(--espaco-6); border-top: 1px solid var(--divisor);
  font-size: 12.5px; color: var(--texto-2);
}

/* Refluxo (1.4.10). A formula do saldo e monoespacada e longa; com
   `white-space: nowrap` no valor ao lado, o par forcava 714px e estourava a
   viewport de 320px. Item flex so encolhe abaixo do conteudo com min-width:0.
   Isto fecha a A-14, reprovada por construcao no wireframe do Gate 4. */
.saldo > * { min-width: 0; }
.saldo .formula { overflow-wrap: anywhere; white-space: normal; }
.saldo .num { white-space: normal; }
.valor .formula, .valor .motivo { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .largo { min-width: 0; width: 100%; }
  .campo { flex: 1 1 100%; }
  .filtros { flex-direction: column; align-items: stretch; }
  .saldo { flex-direction: column; gap: var(--espaco-1); }
  .saldo .num { text-align: left; }
}

/* ── Monitor de licitações (CP-106) ───────────────────────────────────────────
   Layout das telas do desenho `Monitor de Licitações.dc.html`. Os componentes
   (moldura, etiqueta, tabela, segmentado) vêm do Industry em `industry.css`;
   aqui fica só o arranjo, que é o que o desenho define e o design system não. */

.kicker {
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent-texto); margin: 0 0 var(--espaco-1);
}

.monitor-seg { margin-bottom: var(--espaco-4); }
.monitor-seg .seg-opt { text-decoration: none; color: inherit; }
.monitor-seg .seg-ativo { background: var(--color-accent-700); color: #fff; }

.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--espaco-6); margin: var(--espaco-6) 0;
}
.kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--espaco-3) var(--espaco-4); }
.kpi-rotulo {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-2);
}
.kpi-valor {
  font-family: var(--font-heading); font-weight: 600; font-size: 38px; line-height: 1.05;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.kpi-moeda { font-size: 13px; color: var(--accent-texto); font-variant-numeric: tabular-nums; }
.kpi-detalhe { font-size: 11.5px; color: var(--texto-2); }
.kpi-proc { align-self: flex-start; margin-top: var(--espaco-2); }

.monitor-duas {
  display: grid; grid-template-columns: 1.32fr 1fr; gap: var(--espaco-8);
  align-items: start;
}
@media (max-width: 900px) { .monitor-duas { grid-template-columns: 1fr; } }

.prazos { list-style: none; margin: 0; padding: 0; }
.prazos li {
  display: grid; grid-template-columns: 74px 1fr 120px 92px;
  align-items: center; gap: var(--espaco-3);
  padding: var(--espaco-3) 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--texto) 9%, transparent);
}
@media (max-width: 700px) {
  .prazos li { grid-template-columns: 60px 1fr; }
  .prazo-valor, .prazo-data { grid-column: 2; }
}
.prazo-dias {
  text-align: center; text-decoration: none; color: inherit;
  border-right: 1px solid var(--divisor); padding-right: var(--espaco-3);
}
.prazo-n {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: 24px; line-height: 1; color: var(--accent-texto);
  font-variant-numeric: tabular-nums;
}
.prazo-u {
  display: block; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texto-2); margin-top: 3px;
}
.prazo-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prazo-corpo > a { font-size: 14.5px; font-weight: 500; }
.prazo-corpo .secundario { font-size: 11.5px; }
.prazo-valor { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.prazo-data { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }

.funil { padding: var(--espaco-4); }
.funil-etapa { margin-bottom: var(--espaco-3); }
.funil-linha {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--espaco-2); font-size: 12.5px; margin-bottom: 5px;
}
.funil-nome {
  font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.03em;
}
.funil-num { color: var(--texto-2); font-variant-numeric: tabular-nums; text-align: right; }
.funil-barra {
  display: block; height: 9px;
  background: color-mix(in srgb, var(--texto) 7%, transparent);
}
.funil-barra > span { display: block; height: 100%; background: var(--color-accent-600); }
.funil-rodape {
  border-top: 1px solid var(--divisor); margin: var(--espaco-4) 0 0;
  padding-top: var(--espaco-3); font-size: 11.5px;
}

/* Bloco de lacuna declarada. Tem peso visual PRÓPRIO e não é um aviso pequeno
   ao lado de um número: a lacuna é a informação (ADR-0003). */
.bloco-ausente {
  padding: var(--espaco-4); margin: var(--espaco-4) 0;
  border-style: dashed;
}
.ausente-topo {
  display: flex; align-items: center; gap: var(--espaco-2);
  margin: 0 0 var(--espaco-3); font-size: 15px;
}
.ausente-corpo {
  display: grid; grid-template-columns: 168px 1fr; gap: var(--espaco-2) var(--espaco-4);
  margin: 0; font-size: 13px;
}
@media (max-width: 640px) { .ausente-corpo { grid-template-columns: 1fr; gap: 2px var(--espaco-2); } }
.ausente-corpo dt {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--texto-2); padding-top: 2px;
}
.ausente-corpo dd { margin: 0; }

.perfis { display: flex; flex-direction: column; gap: var(--espaco-4); }
.perfil {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: var(--espaco-2) var(--espaco-4); padding: var(--espaco-3) var(--espaco-4);
}
.perfil-nome {
  font-family: var(--font-heading); font-weight: 600; font-size: 18px; letter-spacing: 0.02em;
}
.perfil-filtros { display: flex; flex-wrap: wrap; gap: 5px; grid-column: 1; }
.perfil-abrir { grid-row: 1 / span 2; grid-column: 2; }

/* Barra do funil em DEGRAUS de 5%, não por atributo `style`.
   A CSP é `default-src 'self'` e bloqueia atributo de estilo — o desenho
   original usa `style="width:{{ pct }}"`, que num app com CSP estrita
   simplesmente não desenha, e o console acusa a cada barra. A barra é
   decorativa (`aria-hidden`) e o número exato está ao lado dela, então
   arredondar para 5% não esconde nada. */
.funil-barra > span.b5, .dim-barra > span.b5, .g-linha-barra > span.b5, .comp-fatia.b5 { width: 5%; }
.funil-barra > span.b10, .dim-barra > span.b10, .g-linha-barra > span.b10, .comp-fatia.b10 { width: 10%; }
.funil-barra > span.b15, .dim-barra > span.b15, .g-linha-barra > span.b15, .comp-fatia.b15 { width: 15%; }
.funil-barra > span.b20, .dim-barra > span.b20, .g-linha-barra > span.b20, .comp-fatia.b20 { width: 20%; }
.funil-barra > span.b25, .dim-barra > span.b25, .g-linha-barra > span.b25, .comp-fatia.b25 { width: 25%; }
.funil-barra > span.b30, .dim-barra > span.b30, .g-linha-barra > span.b30, .comp-fatia.b30 { width: 30%; }
.funil-barra > span.b35, .dim-barra > span.b35, .g-linha-barra > span.b35, .comp-fatia.b35 { width: 35%; }
.funil-barra > span.b40, .dim-barra > span.b40, .g-linha-barra > span.b40, .comp-fatia.b40 { width: 40%; }
.funil-barra > span.b45, .dim-barra > span.b45, .g-linha-barra > span.b45, .comp-fatia.b45 { width: 45%; }
.funil-barra > span.b50, .dim-barra > span.b50, .g-linha-barra > span.b50, .comp-fatia.b50 { width: 50%; }
.funil-barra > span.b55, .dim-barra > span.b55, .g-linha-barra > span.b55, .comp-fatia.b55 { width: 55%; }
.funil-barra > span.b60, .dim-barra > span.b60, .g-linha-barra > span.b60, .comp-fatia.b60 { width: 60%; }
.funil-barra > span.b65, .dim-barra > span.b65, .g-linha-barra > span.b65, .comp-fatia.b65 { width: 65%; }
.funil-barra > span.b70, .dim-barra > span.b70, .g-linha-barra > span.b70, .comp-fatia.b70 { width: 70%; }
.funil-barra > span.b75, .dim-barra > span.b75, .g-linha-barra > span.b75, .comp-fatia.b75 { width: 75%; }
.funil-barra > span.b80, .dim-barra > span.b80, .g-linha-barra > span.b80, .comp-fatia.b80 { width: 80%; }
.funil-barra > span.b85, .dim-barra > span.b85, .g-linha-barra > span.b85, .comp-fatia.b85 { width: 85%; }
.funil-barra > span.b90, .dim-barra > span.b90, .g-linha-barra > span.b90, .comp-fatia.b90 { width: 90%; }
.funil-barra > span.b95, .dim-barra > span.b95, .g-linha-barra > span.b95, .comp-fatia.b95 { width: 95%; }
.funil-barra > span.b100, .dim-barra > span.b100, .g-linha-barra > span.b100, .comp-fatia.b100 { width: 100%; }

/* Escolha explícita de tema.
 *
 * O Industry é um sistema de tema CLARO — é assim que o desenho foi feito e é
 * assim que ele deve poder ser visto. Antes disto o produto só obedecia ao
 * `prefers-color-scheme`, então quem tem o sistema no escuro nunca via o
 * design system como ele é, e não havia como pedir.
 *
 * O padrão continua sendo o do sistema: sem `data-tema` no <html>, a media
 * query acima decide. Isto aqui só entra quando alguém escolhe.
 */

  /* Só quando NÃO há escolha explícita: `html[data-tema]` vence a preferência
     do sistema, senão o botão de tema não teria efeito no sentido contrário. */
  /* Os percentuais acima foram medidos sobre fundo claro e NÃO valem no
     escuro (ADR-0006, "revisitar quando"). Aqui os valores são recalculados
     para o novo fundo, não reaproveitados. */
  :root[data-tema="escuro"] {
    /* Os três NÃO são redefinidos aqui, de propósito: `--bg`, `--surface` e
       `--texto` são ALIAS de `--color-*`, e alias se re-resolve sozinho quando
       o token muda. Redefini-los criava uma SEGUNDA paleta escura, e os 17
       pontos do Industry que usam `--color-bg` direto ficavam num tom enquanto
       o resto da página ficava noutro. `--divisor` também sai: ele já é alias
       de `--color-divider`, que o bloco escuro do Industry recalcula. */
    --texto-1: color-mix(in srgb, var(--texto) 92%, transparent);
    --texto-2: color-mix(in srgb, var(--texto) 78%, transparent);
    --texto-3: color-mix(in srgb, var(--texto) 70%, transparent);
    --texto-decor: color-mix(in srgb, var(--texto) 45%, transparent);
    /* No escuro a direção se inverte: o passo CLARO é que passa em contraste.
       Reaproveitar o 700 daria 2,1:1. */
    --link: var(--color-accent-300); --link-forte: var(--color-accent-200);
    --accent-fraco: var(--color-accent-900);
  }


/* Botão de tema. Fica no cabeçalho, ao lado da sessão. */
.btn-tema { font-size: 12px; padding: 4px 10px; }

/* ── login ──────────────────────────────────────────────────────────────────
   Única tela sem dado. O cabeçalho fica só com a marca e o tema, e o rodapé
   sai: os links só trariam de volta aqui, e as garantias do rodapé valem para o
   que vem depois de entrar. O quadriculado é a prancheta da moldura de
   wireframe do Industry — gradiente e não imagem, porque a CSP é
   `default-src 'self'`. Nenhum token novo: tudo sai dos que já existem, e o
   tema escuro vem junto pelos aliases. */
body.tela-login .topo nav,
body.tela-login .topo > .secundario,
body.tela-login .sessao,
body.tela-login .rodape { display: none; }
body.tela-login .btn-tema { margin-left: auto; }

body.tela-login main {
  max-width: none;
  min-height: calc(100vh - 54px);
  display: grid; place-items: center;
  padding: var(--espaco-8) var(--espaco-4);
  background-image:
    linear-gradient(color-mix(in srgb, var(--texto) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--texto) 6%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center top;
}

.login {
  width: min(380px, 100%);
  padding: var(--espaco-8) var(--espaco-6) var(--espaco-6);
  background: var(--bg);
  box-shadow: var(--shadow-md);
}
.login h1 { font-size: 36px; margin: 0 0 var(--espaco-4); }
.login-form { display: flex; flex-direction: column; gap: var(--espaco-4); }
.login .field > label { font-size: 13px; }
/* 44px: alvo de toque confortável, e o campo deixa de parecer filtro de tabela. */
.login .input { min-height: 44px; font-size: 15px; }
.login .btn-primary { min-height: 44px; font-size: 15px; justify-content: center; margin-top: 0; }

.login-senha { position: relative; }
.login-senha .input { padding-right: 88px; }
.login-mostrar {
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  min-height: 34px; padding: 0 var(--espaco-3); font-size: 13px; background: none;
}
/* Altura reservada: o aviso de Caps Lock aparece sem empurrar o botão. A margem
   negativa devolve ao botão o respiro que a linha reservada tomou — sem ela o
   vão entre senha e "Entrar" era o dobro do vão entre os campos. */
.login-caps {
  min-height: 1.25em; margin: 2px 0 calc(-1 * var(--espaco-2));
  font-size: 12.5px; line-height: 1.25; color: var(--texto-2);
}

/* Erro com peso próprio; informação neutra. Antes os dois eram `.faixa`, a mesma
   caixa do parágrafo explicativo, e o erro passava por texto de apoio. */
.login-aviso {
  margin: 0 0 var(--espaco-4); padding: var(--espaco-2) var(--espaco-3);
  border-left: 3px solid var(--link); background: var(--surface);
  font-size: 14px; line-height: 1.45;
}
.login-aviso[data-tipo="erro"] { border-left-color: var(--texto); font-weight: 600; }
.login-aviso[hidden] { display: none; }
.login-ajuda { margin: var(--espaco-4) 0 0; text-align: center; }

@media (max-width: 640px) {
  body.tela-login main { place-items: start center; padding: var(--espaco-6) var(--espaco-3); }
  .login { padding: var(--espaco-6) var(--espaco-4) var(--espaco-4); }
  .login h1 { font-size: 30px; }
}

/* A licitação de origem, ao lado do prazo. O dado já estava projetado desde o
   começo (3.969 de 3.971) e nenhuma tela usava — para quem procura
   oportunidade, saber que um contrato vence diz metade; saber de que pregão
   ele veio diz como ele volta ao mercado. */
.prazo-lic { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; }
.prazo-lic .tag { font-size: 10px; padding: 1px 7px; }

.edital-dias {
  font-family: var(--font-heading); font-weight: 600; font-size: 19px;
  color: var(--accent-texto); font-variant-numeric: tabular-nums;
}
.ausente-lista { margin: 0; padding-left: 18px; font-size: 13px; }
.ausente-lista li { margin-bottom: 4px; }

/* Larguras da tabela de editais em CLASSE, não em atributo `style`: a CSP é
   `default-src 'self'` e bloqueia estilo inline — a coluna não se ajustava e o
   console acusava uma violação por célula. É a segunda vez que caio nisso; o
   desenho usa `style=` em toda parte e copiar dele traz o atributo junto. */
.table th.col-prazo { width: 78px; }
.table th.col-modalidade { width: 150px; }
.table th.col-valor { width: 120px; }
.table th.col-unidade { width: 150px; }

/* Ícones Lucide, inline e decorativos.
   `vertical-align` e não flex: eles nascem dentro de texto corrido — botão,
   link, cabeçalho — e alinhar pelo baseline é o que faz um ícone parecer parte
   da palavra em vez de um objeto solto ao lado dela. */
.icone {
  display: inline-block;
  vertical-align: -0.15em;
  margin-right: 5px;
  flex: none;
}
/* Depois do texto o respiro inverte. `:last-child` cobre o link externo, que
   é o único caso em que o ícone fecha a frase em vez de abrir. */
a > .icone:last-child { margin-right: 0; margin-left: 5px; opacity: 0.7; }
.btn .icone, .seg-opt .icone { margin-right: 6px; }

/* Metadados de linha na tabela de contratos.
   O tipo de ato tem cardinalidade 2 na base inteira — como coluna ele ocupava
   largura sem separar nada. Vira metadado sob o número, e o espaço vai para a
   vigência, que o filtro "vencendo em N dias" já usava e a tabela escondia. */
.linha-meta { display: block; font-size: 11px; margin-top: 2px; }
.linha-lic { display: block; font-size: 11.5px; margin-top: 3px; }
.col-vigencia { width: 104px; }
.vig-prazo {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: 15px; font-variant-numeric: tabular-nums; color: var(--accent-texto);
}
.vig-passado { color: var(--texto-2); font-weight: 400; }
.vig-data { display: block; font-size: 11px; font-variant-numeric: tabular-nums; }

/* Divergências entre fontes. As duas colunas de valor têm o MESMO peso visual
   de propósito: o ADR-0017 estabelece que nenhuma fonte prevalece, e destacar
   uma delas seria a tela decidindo o que o produto se recusa a decidir. */
.barra-ordem { display: flex; align-items: center; gap: var(--espaco-3); margin: var(--espaco-4) 0; flex-wrap: wrap; }
.barra-ordem .seg-opt { text-decoration: none; color: inherit; }
.barra-ordem .seg-ativo { background: var(--color-accent-700); color: #fff; }
.dif-valor { font-weight: 600; color: var(--accent-texto); }
.col-conferir { width: 150px; }
.kpi-moeda-grande { font-size: 26px; }
.kpi-fracao { font-size: 20px; color: var(--texto-2); font-weight: 400; }
.bloco-padrao { padding: var(--espaco-4); margin: var(--espaco-4) 0; }
.bloco-padrao p:last-child { margin-bottom: 0; }

/* A coluna "Cadeia" dizia a mesma coisa em 83% das linhas — 679 dos 3.971
   contratos têm execução ligada. Repetir "sem execução localizada" 50 vezes por
   página é ruído com custo de largura. Virou badge por EXCEÇÃO: aparece só
   quando HÁ execução, que é o caso informativo. */
.tag-cadeia { margin-top: 4px; font-size: 10px; }

/* Cobertura por dimensão. Oito medições que só existiam por API — são o que
   sustenta a confiança em todo o resto e não apareciam em tela nenhuma.
   Sem nota única de propósito: uma dimensão está em 100% e outra em 0%, e
   nenhuma média as representa. */
.dimensoes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--espaco-6); margin: var(--espaco-6) 0;
}
.dimensao { display: flex; flex-direction: column; gap: 6px; padding: var(--espaco-3) var(--espaco-4); }
.dim-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espaco-2); }
.dim-rotulo { font-size: 13px; font-weight: 500; line-height: 1.3; }
.dim-numero { display: flex; align-items: baseline; gap: var(--espaco-2); }
.dim-pct {
  font-family: var(--font-heading); font-weight: 600; font-size: 28px;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.dim-fracao { font-size: 11.5px; }
.dim-barra { display: block; height: 7px; background: color-mix(in srgb, var(--texto) 7%, transparent); }
.dim-barra > span { display: block; height: 100%; background: var(--color-accent-600); }
/* Dimensão abaixo de 50% não muda de COR — o produto é mono e cor semântica
   inventada quebraria a diretriz do design system. Muda a espessura da moldura,
   que é o vocabulário que o Industry já usa para dar peso. */
.dimensao-baixa { border-width: 2px; }
.dimensao-baixa .dim-pct { color: var(--accent-texto); }
.dim-consequencia { font-size: 11.5px; margin: 2px 0 0; }
.faixa-nota { margin-top: var(--espaco-4); }

/* ── Gráficos ────────────────────────────────────────────────────────────────
   SVG inline, sem biblioteca: a CSP é `default-src 'self'` (sem CDN), não há
   etapa de build (ADR-0007), e barra é geometria de retângulo. A menor
   biblioteca custaria mais que os dois `<rect>` que desenhamos.

   Cor: só o acento. O design system é mono e "nenhuma cor decorativa além do
   acento" é diretriz escrita do Industry — série colorida aqui seria inventar
   semântica de cor que o sistema não tem. */
.g-caixa { padding: var(--espaco-4); }
.grafico { display: block; width: 100%; height: auto; min-width: 560px; }
.g-barra { fill: var(--color-accent-600); }
.g-valor {
  font-family: var(--font-heading); font-weight: 600; font-size: 11px;
  fill: var(--texto-1);
}
.g-rotulo, .g-eixo {
  font-size: 10px; fill: var(--texto-2);
  letter-spacing: .04em; text-transform: uppercase;
}
/* Guias finas e discretas: elas orientam a leitura da altura, não competem
   com a barra. Duas apenas — mais que isso vira grade de papel milimetrado. */
.g-guia { stroke: var(--divisor); stroke-width: 1; }

.g-horizontal { display: flex; flex-direction: column; gap: var(--espaco-3); }
.g-linha { display: grid; grid-template-columns: 130px 1fr 92px; gap: var(--espaco-3); align-items: center; }
@media (max-width: 640px) { .g-linha { grid-template-columns: 96px 1fr 76px; gap: var(--espaco-2); } }
.g-linha-rotulo { font-size: 12.5px; }
.g-linha-barra { display: block; height: 12px; background: color-mix(in srgb, var(--texto) 7%, transparent); }
.g-linha-barra > span { display: block; height: 100%; background: var(--color-accent-600); }
.g-linha-num {
  text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums;
  font-family: var(--font-heading); font-weight: 600;
}
.g-linha-num .secundario { font-family: var(--font-body); font-weight: 400; margin-left: 4px; }

/* A parede de texto que ficava no rodapé do painel virou UMA linha. As lacunas
   continuam declaradas — com motivo e tamanho — em Dados & Fontes, que é onde
   quem quer investigar procedência já vai. No painel elas eram três blocos de
   três parágrafos cada, abaixo do conteúdo útil. */
.nota-lacunas {
  display: flex; align-items: center; gap: var(--espaco-2); flex-wrap: wrap;
  margin-top: var(--espaco-8); padding-top: var(--espaco-3);
  border-top: 1px solid var(--divisor); font-size: 12.5px;
}

/* Composição do valor por exercício — barras empilhadas.
   Escala de cinzas do acento, do mais escuro (maior fatia) ao mais claro. Não é
   cor semântica: o sistema é mono, e a rampa do Industry serve para ordenar
   peso, não para atribuir significado a matiz. */
.destaque { margin: var(--espaco-8) 0; }
.comp { display: flex; flex-direction: column; gap: var(--espaco-2); }
.comp-linha { display: grid; grid-template-columns: 92px 1fr 190px; gap: var(--espaco-3); align-items: center; }
@media (max-width: 720px) {
  .comp-linha { grid-template-columns: 62px 1fr; }
  .comp-topo { grid-column: 2; font-size: 11px; }
}
.comp-ano { font-family: var(--font-heading); font-weight: 600; font-size: 15px; }
.comp-n { font-family: var(--font-body); font-weight: 400; font-size: 11px; margin-left: 5px; }
.comp-barra { display: flex; height: 20px; background: color-mix(in srgb, var(--texto) 6%, transparent); }
.comp-fatia { display: block; height: 100%; }
.b-900 { background: var(--color-accent-800); }
.b-700 { background: var(--color-accent-600); }
.b-500 { background: var(--color-accent-400); }
.b-300 { background: var(--color-accent-300); }
.b-200 { background: var(--color-accent-200); }
.b-100 { background: var(--color-accent-100); }
.comp-topo { font-size: 12.5px; text-align: right; }
.comp-legenda { display: flex; flex-wrap: wrap; gap: var(--espaco-3); margin-top: var(--espaco-3); font-size: 11.5px; }
.comp-item { display: inline-flex; align-items: center; gap: 5px; }
.comp-chave { width: 11px; height: 11px; display: block; }
.comp-nota { border-top: 1px solid var(--divisor); margin: var(--espaco-4) 0 0; padding-top: var(--espaco-3); font-size: 12px; }