/* politicas — estilo do site (DESIGN.md): azuis do SUS (decisão do Felipe, 30/10/2026). Cores e fontes vêm dos tokens. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fontes/hanken-grotesk-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fontes/hanken-grotesk-400-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C4, U+2C60-2C7F;
}

:root {
  color-scheme: light dark;
  --fundo: #ffffff;
  --fundo-suave: #eef3fc;
  --tinta: #141a2e;
  --tinta-suave: #4d566b;
  --linha: #d3dbea;
  --marca: #1f5fd6;
  --marca-tinta: #ffffff;
  --link: #1a52bd;
  --foco: #6e46c2;
  --pab: #8a8f98;
  --previne: #c4473a;
  --novo: #6e46c2;
  --emenda: #9fd8f2;
  --municipio: #141a2e;
  --titulo: #1b2a6b;
  --marca-serie: #1f5fd6;
  --ciano: #1b9ccc;
  --fonte: "Hanken Grotesk", system-ui, sans-serif;
  --medida: 62ch;
  --raio: 4px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f1730;
    --fundo-suave: #18234a;
    --tinta: #e8ecf6;
    --tinta-suave: #aab4cc;
    --linha: #2c3a66;
    --marca: #12204a;
    --marca-tinta: #e8ecf6;
    --link: #8fb6ff;
    --foco: #c9b6ff;
    --pab: #b5b9c2;
    --previne: #f08a7e;
    --novo: #b9a4f5;
    --emenda: #2f6f8f;
    --municipio: #e8ecf6;
    --titulo: #9cc3ff;
    --marca-serie: #5b93f0;
    --ciano: #5cc8f0;
  }
}

* { box-sizing: border-box; }
html { font-family: var(--fonte); color: var(--tinta); background: var(--fundo); }
body { margin: 0; line-height: 1.55; font-size: 1.0625rem; }
a { color: var(--link); text-underline-offset: 0.15em; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
img, svg { max-width: 100%; }
.tab { font-variant-numeric: tabular-nums; }

/* topo */
.topo { background: var(--marca); color: var(--marca-tinta); }
.topo-dentro { max-width: 72rem; margin: 0 auto; padding: 0.75rem 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; }
.topo a { color: var(--marca-tinta); text-decoration: none; }
.marca { font-weight: 700; font-size: 1.05rem; margin-right: auto; display: inline-flex; align-items: center; gap: 0.55rem; }
.marca img { width: 32px; height: 32px; background: #fff; border-radius: 9px; padding: 3px; }
.menu { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; margin: 0; padding: 0; font-size: 0.95rem; }
.menu a { display: inline-block; padding: 0.5rem 0; border-bottom: 2px solid transparent; }
.menu a[aria-current="page"], .menu a:hover { border-bottom-color: currentColor; }
.aviso { background: var(--fundo-suave); font-size: 0.9rem; }
.aviso p { max-width: 72rem; margin: 0 auto; padding: 0.5rem 1rem; }

main { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
main p, main li, main figcaption { max-width: var(--medida); }
.leitura { max-width: var(--medida); }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: 0.5rem 0 0.75rem; color: var(--titulo); }
h2 { font-size: 1.5rem; margin: 2.5rem 0 0.5rem; color: var(--titulo); scroll-margin-top: 1rem; }
h3 { font-size: 1.15rem; margin: 1.75rem 0 0.4rem; }
.migalhas { font-size: 0.9rem; color: var(--tinta-suave); }
.migalhas a { color: var(--tinta-suave); }
.sub { color: var(--tinta-suave); margin-top: 0; }
.sumario { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding: 0.75rem 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); list-style: none; margin: 1.25rem 0; }
.sumario a { display: inline-block; padding: 0.35rem 0; }
.nota { font-size: 0.9rem; color: var(--tinta-suave); }
.preliminar { font-size: 0.8rem; border: 1px solid var(--linha); border-radius: var(--raio); padding: 0 0.3rem; color: var(--tinta-suave); }

/* busca */
.busca { margin: 1rem 0 2rem; max-width: 40rem; position: relative; }
.busca label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.busca input { width: 100%; font: inherit; font-size: 1.15rem; padding: 0.75rem 0.9rem; border: 2px solid var(--titulo); border-radius: var(--raio); background: var(--fundo); color: var(--tinta); }
.resultados { list-style: none; margin: 0.25rem 0 0; padding: 0; border: 1px solid var(--linha); border-radius: var(--raio); max-height: 22rem; overflow: auto; }
.resultados:empty { display: none; }
.resultados a { display: block; padding: 0.6rem 0.9rem; min-height: 44px; text-decoration: none; color: var(--tinta); }
.resultados a:hover, .resultados a:focus { background: var(--fundo-suave); }
.resultados .vazio { padding: 0.6rem 0.9rem; color: var(--tinta-suave); }

/* régua dos regimes (elemento memorável) */
.regimes { margin: 1.5rem 0 2rem; }
.regimes-faixa { display: grid; grid-template-columns: 2fr 4.33fr 2.67fr; gap: 2px; }
.regimes-faixa div { padding: 0.75rem 0.85rem; color: #fff; min-height: 6rem; }
.regimes-faixa .pab { background: var(--pab); color: #1e1a17; }
.regimes-faixa .previne { background: var(--previne); }
.regimes-faixa .novo { background: var(--novo); }
@media (prefers-color-scheme: dark) { .regimes-faixa .previne, .regimes-faixa .novo { color: #0f1730; } }
.regimes-faixa strong { display: block; font-size: 1.05rem; }
.regimes-faixa span { font-size: 0.9rem; }
@media (max-width: 40rem) { .regimes-faixa { grid-template-columns: 1fr; } .regimes-faixa div { min-height: 0; } }

/* gráficos */
figure { margin: 1.25rem 0 1.75rem; }
figcaption { font-weight: 600; margin-bottom: 0.4rem; }
.grafico text { font-family: var(--fonte); font-size: 12px; fill: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.grafico .eixo { stroke: var(--linha); }
.grafico .barra-regular { fill: var(--titulo); }
.grafico .barra-emenda { fill: var(--emenda); }
.grafico .r-pab { fill: var(--pab); } .grafico .r-previne { fill: var(--previne); } .grafico .r-novo { fill: var(--novo); }
.grafico .linha { fill: none; stroke-width: 2.5; }
.legenda { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.9rem; color: var(--tinta-suave); margin: 0.3rem 0 0; padding: 0; list-style: none; }
.legenda i { display: inline-block; width: 0.9rem; height: 0.9rem; vertical-align: -0.1rem; margin-right: 0.3rem; border-radius: 2px; }

/* réguas de comparação */
.reguas { display: grid; gap: 1.25rem; margin: 1rem 0 1.5rem; }
.regua-nome { font-weight: 600; }
.regua-valor { font-size: 1.6rem; font-weight: 700; color: var(--titulo); }
.regua svg text { font-family: var(--fonte); font-size: 12px; fill: var(--tinta-suave); }

/* tabelas */
.tabela-rolagem { overflow-x: auto; max-height: 32rem; border: 1px solid var(--linha); border-radius: var(--raio); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
caption { text-align: left; font-weight: 600; padding: 0.5rem 0.75rem; }
th, td { padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
td.num, th.num { text-align: right; white-space: nowrap; }
thead th { position: sticky; top: 0; background: var(--fundo-suave); }
th button { font: inherit; font-weight: 600; background: none; border: 0; color: var(--tinta); cursor: pointer; padding: 0; min-height: 44px; }
details { margin: 1rem 0; border-top: 1px solid var(--linha); padding-top: 0.5rem; }
summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

.rodape { border-top: 1px solid var(--linha); color: var(--tinta-suave); font-size: 0.9rem; }
.rodape p { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
code { font-family: inherit; font-size: 0.95em; background: var(--fundo-suave); padding: 0 0.2em; border-radius: 2px; overflow-wrap: anywhere; }