/* ============================================================
   OBSERVATÓRIO NACIONAL DA FORMAÇÃO EM ODONTOLOGIA
   Design tokens.

   Mesmo sistema de design dos observatórios de Farmácia, Fonoaudiologia,
   Psicologia e Administração — mesma tipografia, mesma grade, mesmos
   componentes — com paleta própria, para que se leiam como parentes sem
   se confundirem um com o outro.

   Paleta: grafite esverdeado (institucional), verde-menta profundo
   (secundária) e ouro velho (destaque editorial). Três matizes, não
   mais: cada matiz a mais é uma decisão que o leitor precisa interpretar.

   CONTRASTE MEDIDO, NÃO PRESUMIDO
   -------------------------------
   Todo par usado como texto sobre fundo foi calculado antes de entrar
   aqui. Os valores contra o papel (--bg #FAFAF8):

       --deep  #232B29   13,87      --text        #19211F   15,72
       --mid   #2F6F5E    5,65      --text-muted  #59615E    6,10
       --warm  #8A6410    5,14

   E os tons usados SOBRE o grafite (--deep), todos acima de 4,5:

       --warm-claro #D8A73A  6,56     rodapé rótulo #9DB5AC  6,65
       kicker       #A9C3B9  7,72     rodapé texto  #C6D3CE  9,39
       lede         #D8E2DE 10,94

   O ouro institucional mede 2,70 sobre o grafite — abaixo do mínimo de
   4,5. Como ele marca justamente o número da manchete, o elemento mais
   visível do site seria o menos legível. Por isso existe --warm-claro,
   que é a variante para uso sobre fundo escuro. O ouro institucional
   fica para fundo claro, onde mede 5,14.

   Trocar a paleta é a maneira mais fácil de reprovar em contraste sem
   que nada quebre na tela: o site continua bonito e fica ilegível para
   parte dos leitores. Por isso `tests/test_acessibilidade.py` mede os
   pares que existem DE FATO neste arquivo, em vez de confiar nesta tabela.
   ============================================================ */
:root {
  /* Cores institucionais */
  --deep:  #232B29;
  --mid:   #2F6F5E;
  --warm:  #8A6410;

  /* Variante clara do destaque, para uso SOBRE fundo escuro.
     O ouro institucional mede 2,70 contra o grafite — abaixo do mínimo de
     4,5. Como ele marca justamente o número da manchete, o elemento mais
     visível do site ficaria sendo o menos legível. Esta variante mede 6,56
     contra o mesmo fundo. */
  --warm-claro: #D8A73A;

  /* Estado: sem dados.
     Cinza neutro, deliberadamente fora da paleta: um estado cinza no mapa
     precisa ser lido como ausência de dado, nunca como valor baixo. */
  --nodata: #C9CDD2;

  /* SWOT */
  --swot-strength:    #3F6B2E;
  --swot-weakness:    #B23A2E;
  --swot-opportunity: #2F6F5E;
  --swot-threat:      #8A6410;

  /* Acento de identidade (editorial/científico) */
  --accent:      #2F6F5E;
  --accent-soft: #E9F1EE;

  /* Superfícies — papel levemente quente. Fonoaudiologia usa creme e
     Psicologia usa papel frio; repetir qualquer um dos dois faria os
     sites se confundirem à primeira vista. */
  --bg:        #FAFAF8;
  --surface:   #FFFFFF;
  --border:    #E4E7E4;
  --text:      #19211F;
  --text-muted:#59615E;

  /* Neutros derivados, usados em tabelas e realces */
  --zebra:     #F2F5F3;
  --realce:    #E7EEEB;

  /* Escala divergente RdBu — sempre RdBu, nunca RdYlGn.
     Vermelho-verde é a combinação que o daltonismo mais comum apaga, e um
     mapa que some para 8% dos homens não é um mapa. */
  --rdbu-1: #2166AC;
  --rdbu-2: #4393C3;
  --rdbu-3: #92C5DE;
  --rdbu-4: #D1E5F0;
  --rdbu-5: #F7F7F7;
  --rdbu-6: #FDDBC7;
  --rdbu-7: #F4A582;
  --rdbu-8: #D6604D;
  --rdbu-9: #B2182B;

  /* Escala sequencial em verde (indicadores sem ponto médio natural).
     Luminância estritamente decrescente do passo 1 ao 8 — conferido, não
     estimado: uma rampa não monotônica inverte a leitura do mapa em algum
     ponto do meio, e ninguém percebe olhando. */
  --seq-1: #EEF3F1;
  --seq-2: #D5E3DE;
  --seq-3: #B5CDC5;
  --seq-4: #8FB4A9;
  --seq-5: #69988C;
  --seq-6: #46796C;
  --seq-7: #2F6F5E;
  --seq-8: #234E44;

  /* Tipografia — Inter (UI/dados) + Lora (títulos editoriais) */
  --font: 'Inter', 'Segoe UI', system-ui, Arial, sans-serif;
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-mono: 'Cascadia Mono', 'Consolas', monospace;
}
/* ============================================================
   RESET E BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mid); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; }

code, pre { font-family: var(--font-mono); font-size: 0.9em; }

:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }

.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--deep); color: #fff; padding: 10px 16px; z-index: 999;
}
.pular:focus { left: 8px; top: 8px; }

/* ============================================================
   TOPO
   ============================================================ */
.topo {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 500;
}
.topo-interno {
  max-width: 1180px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.marca { display: flex; flex-direction: column; line-height: 1.2; color: inherit; }
.marca:hover { text-decoration: none; }
.marca-nome {
  font-family: var(--font-serif); font-weight: 600;
  font-size: 1.16rem; color: var(--deep);
}
.marca-sub { font-size: 0.76rem; color: var(--text-muted); letter-spacing: 0.02em; }

.nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
/* Alvo de toque de 44px de altura, o mínimo confortável no dedo. O padding
   sozinho dava 34px, e num item de menu isso é a diferença entre acertar e
   errar o link ao lado. */
.nav a {
  color: var(--deep); font-size: 0.9rem; font-weight: 500;
  padding: 6px 11px; border-radius: 7px;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: background 0.12s, color 0.12s;
}
.nav a:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }

/* ============================================================
   ESTRUTURA
   ============================================================ */
main { max-width: 1180px; margin: 0 auto; padding: 0 24px 64px; }

.secao { margin: 48px 0; }
.secao-titulo {
  font-size: 1.5rem; color: var(--deep);
  padding-bottom: 8px; border-bottom: 2px solid var(--accent-soft);
  margin-bottom: 18px;
}
.secao-cabecalho {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.secao-cabecalho .secao-titulo { margin-bottom: 0; flex: 1 1 auto; }
.secao-lede { color: var(--text-muted); max-width: 68ch; margin-bottom: 16px; }
.nota { font-size: 0.85rem; color: var(--text-muted); margin-top: 12px; max-width: 78ch; }
.lista { margin: 12px 0 0 20px; }
.lista li { margin-bottom: 10px; max-width: 78ch; }
.destaque {
  font-size: 1.06rem; border-left: 4px solid var(--warm);
  padding: 12px 0 12px 18px; margin: 16px 0; max-width: 70ch;
}
.codigo {
  background: var(--deep); color: #E7EFEC; padding: 16px 18px;
  border-radius: 10px; overflow-x: auto; margin-top: 12px;
}

.migalhas { font-size: 0.85rem; color: var(--text-muted); padding: 18px 0 0; }
.migalhas a { color: var(--mid); }

/* ============================================================
   HERÓI EDITORIAL
   ============================================================ */
.heroi {
  background: linear-gradient(160deg, var(--deep) 0%, #161C1A 100%);
  color: #F2F6F4;
  margin: 0 -24px 8px;
  padding: 0 24px;
}
.heroi-interno { max-width: 1180px; margin: 0 auto; padding: 52px 0 46px; }
.heroi-etiqueta {
  font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: #A9C3B9; margin-bottom: 14px;
}
.heroi-manchete {
  font-size: clamp(1.85rem, 4.2vw, 3rem);
  line-height: 1.14; color: #FFFFFF; max-width: 20ch; margin-bottom: 20px;
}
.heroi-manchete strong { color: var(--warm-claro); font-weight: 600; }
.heroi-lede {
  font-size: 1.06rem; line-height: 1.65; max-width: 62ch;
  color: #D8E2DE; margin-bottom: 16px;
}
.heroi-nota {
  font-size: 0.88rem; color: #BACEC7; max-width: 62ch;
  border-left: 3px solid var(--warm-claro); padding-left: 14px;
}
.heroi-nota em { color: #D8E2DE; font-style: normal; }

/* ============================================================
   CARTÕES DE INDICADOR
   ============================================================ */
.kpis {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.kpis-compacto { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 3px;
}
.kpi-valor {
  font-family: var(--font-serif); font-size: 1.72rem;
  font-weight: 600; color: var(--deep); line-height: 1.1;
}
.kpi-rotulo { font-size: 0.86rem; color: var(--text); font-weight: 500; }
.kpi-nota { font-size: 0.78rem; color: var(--text-muted); }
.kpi-link { color: var(--text-muted); }
.kpi-link:hover { color: var(--accent); }

/* Ausência tem tratamento visual PRÓPRIO — não é um número pequeno nem um
   traço discreto. Precisa se ler como "não existe dado aqui" à primeira
   passada, senão o leitor a confunde com valor baixo. */
.sem-dados {
  color: var(--text-muted) !important;
  font-style: italic;
  font-family: var(--font) !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
}

/* ============================================================
   MAPAS E LEGENDAS
   ============================================================ */
.mapa {
  height: 540px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); overflow: hidden;
}
.leaflet-container { background: var(--surface); font-family: var(--font); }

.legenda {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 12px; font-size: 0.78rem; color: var(--text-muted);
}
.legenda-item { display: inline-flex; align-items: center; gap: 5px; }
.legenda-item i {
  width: 15px; height: 15px; border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.08); display: inline-block;
}
.legenda-ausente { margin-left: 8px; font-style: italic; }

.tooltip-mapa { font-size: 0.85rem; line-height: 1.4; }
.tooltip-mapa strong { color: var(--deep); }

/* ============================================================
   TABELAS
   ============================================================ */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--border); border-radius: 11px; }
table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 0.9rem; }
.tabela-simples { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }

thead th {
  background: var(--deep); color: #F2F6F4; text-align: left;
  padding: 11px 14px; font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.02em; white-space: nowrap; position: relative;
}
thead th.ordenavel { cursor: pointer; user-select: none; padding-right: 26px; }
thead th.ordenavel::after {
  content: '⇅'; position: absolute; right: 10px; opacity: 0.4; font-size: 0.9em;
}
thead th.ordenado-asc::after { content: '↑'; opacity: 1; }
thead th.ordenado-desc::after { content: '↓'; opacity: 1; }

tbody td { padding: 9px 14px; border-top: 1px solid var(--border); }
tbody tr:nth-child(even) { background: var(--zebra); }
tbody tr:hover { background: var(--realce); }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A COR do texto da célula é decidida em JS por `pintarCelula`, que mede
   a luminância do fundo — uma escala que vai do quase branco ao índigo
   profundo não tem uma cor de texto que sirva para as duas pontas. Aqui
   fica só o peso. */
td.celula-cor { font-weight: 600; }
td.nao-significativo { color: var(--text-muted); }
td.parcial { color: var(--warm); }

.variacao-alta { color: #2F6B4F; font-weight: 600; }
.variacao-baixa { color: #B2182B; font-weight: 600; }

.linha-sem-oferta td:first-child { border-left: 3px solid var(--nodata); }
.marca-sem-oferta {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 10px; background: var(--nodata); color: #343B39;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
  vertical-align: middle;
}

/* ============================================================
   CONTROLES
   ============================================================ */
.botao {
  display: inline-block; background: var(--deep); color: #F2F6F4;
  border: 1px solid var(--deep); border-radius: 8px;
  padding: 8px 15px; font-size: 0.86rem; font-weight: 500;
  cursor: pointer; font-family: var(--font);
}
.botao:hover { background: var(--mid); border-color: var(--mid); text-decoration: none; }
.botao-fantasma { background: transparent; color: var(--deep); border-color: var(--border); }
.botao-fantasma:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.campo {
  display: inline-flex; flex-direction: column; gap: 5px;
  font-size: 0.8rem; color: var(--text-muted); font-weight: 500;
}
.campo select, .campo input[type="search"] {
  font-family: var(--font); font-size: 0.92rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 11px; min-width: 230px;
}
.campo-busca input { min-width: 320px; }
.campo input[type="checkbox"] { margin-right: 6px; }
.contador { font-size: 0.82rem; color: var(--text-muted); }

.painel {
  display: flex; gap: 20px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; padding: 18px;
}
.painel-bloco { border: 0; flex: 1 1 320px; }
.painel-bloco legend {
  font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px;
}
.acoes-linha { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips-titulo {
  width: 100%; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); margin-top: 8px;
}
.chip {
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); border-radius: 20px; padding: 4px 12px;
  font-size: 0.8rem; cursor: pointer; font-family: var(--font);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip-ativo { background: var(--deep); color: #F2F6F4; border-color: var(--deep); }
.chip-ativo:hover { background: var(--mid); border-color: var(--mid); color: #fff; }
.chip-sem-oferta { border-style: dashed; }

.pesos { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.peso-linha { display: grid; grid-template-columns: 1fr 200px 42px; gap: 12px; align-items: center; }
.peso-rotulo { font-size: 0.9rem; }
.peso-valor { font-variant-numeric: tabular-nums; text-align: right; color: var(--text-muted); }
.peso-linha input[type="range"] { accent-color: var(--mid); width: 100%; }

/* ============================================================
   AVISOS E BLOCOS EDITORIAIS
   ============================================================ */
.aviso {
  background: var(--accent-soft); border-left: 4px solid var(--accent);
  border-radius: 0 9px 9px 0; padding: 14px 18px; margin: 16px 0;
  font-size: 0.92rem; max-width: 80ch;
}
.aviso-destaque { background: #FBF2E2; border-left-color: var(--warm); }

.cabecalho-uf { padding: 26px 0 6px; }
.cabecalho-uf h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--deep); }
.sigla-uf {
  font-family: var(--font); font-size: 0.9rem; font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
  padding: 3px 9px; border-radius: 6px; vertical-align: middle; margin-left: 6px;
}
.linha-contexto { color: var(--text-muted); font-size: 0.92rem; margin-top: 8px; }

.grafico-caixa {
  height: 420px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; padding: 14px; margin-top: 14px;
}

.modelo {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; padding: 20px; margin-bottom: 18px;
}
.modelo h3 { font-size: 1.1rem; color: var(--deep); margin-bottom: 8px; max-width: 70ch; }
.modelo-resposta { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 14px; }
.modelo table { margin-top: 6px; max-width: 460px; }

.vazio { color: var(--text-muted); font-style: italic; padding: 24px; text-align: center; }

/* ============================================================
   GLOSSÁRIO
   ============================================================ */
.glossario-cat { margin-bottom: 34px; }
.glossario-cat h2 {
  font-size: 1.24rem; color: var(--deep);
  border-bottom: 2px solid var(--accent-soft); padding-bottom: 6px; margin-bottom: 14px;
}
.verbete {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; padding: 16px 18px; margin-bottom: 12px;
}
.verbete:target { border-color: var(--warm); box-shadow: 0 0 0 3px #FBF2E2; }
.verbete h3 { font-size: 1.02rem; color: var(--deep); margin-bottom: 6px; }
.verbete-sigla {
  font-family: var(--font); font-size: 0.74rem; font-weight: 700;
  background: var(--deep); color: #F2F6F4; padding: 2px 8px;
  border-radius: 5px; margin-right: 7px; vertical-align: middle;
}
.verbete p { font-size: 0.92rem; max-width: 82ch; color: var(--text); }
.verbete-meta {
  display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 10px;
  font-size: 0.8rem; color: var(--text-muted);
}
.verbete-meta div { display: flex; gap: 6px; }
.verbete-meta dt { font-weight: 600; }

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape {
  background: var(--deep); color: #C6D3CE;
  margin-top: 64px; padding: 40px 24px 28px;
}
.rodape-interno {
  max-width: 1180px; margin: 0 auto;
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.rodape-bloco h3 {
  font-family: var(--font); font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: #9DB5AC; margin-bottom: 10px;
}
.rodape-bloco ul { list-style: none; }
.rodape-bloco li { font-size: 0.86rem; margin-bottom: 6px; }
.rodape-bloco a { color: #E4EDE9; }
.rodape-nota {
  max-width: 1180px; margin: 26px auto 0; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.82rem; color: #AFC5BC; max-width: 90ch;
}
.rodape-nota strong { color: #E4EDE9; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 760px) {
  main { padding: 0 16px 48px; }
  .heroi { margin: 0 -16px 8px; padding: 0 16px; }
  .topo-interno { padding: 12px 16px; }
  .nav { margin-left: 0; width: 100%; }
  .mapa { height: 380px; }
  .grafico-caixa { height: 340px; }
  .peso-linha { grid-template-columns: 1fr 1fr 40px; }
  .campo select, .campo input[type="search"], .campo-busca input { min-width: 0; width: 100%; }
  .campo { width: 100%; }
}

@media print {
  .topo, .rodape, .botao, .painel, .nav { display: none; }
  .mapa, .grafico-caixa { break-inside: avoid; }
}

/* ============================================================
   PÁGINA DE AUTORIA
   ============================================================ */
.autor-topo {
  display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; padding: 24px;
}
.autor-retrato { flex-shrink: 0; text-align: center; }
.autor-retrato img {
  width: 200px; height: 200px; object-fit: cover; object-position: center top;
  border-radius: 50%; border: 4px solid var(--mid); display: block;
}
.autor-lattes {
  display: inline-block; margin-top: 12px; font-size: 0.8rem;
  font-weight: 600; color: var(--mid); letter-spacing: 0.02em;
}
.autor-identidade { flex: 1 1 300px; }
.autor-identidade h2 {
  font-size: 1.5rem; color: var(--deep); margin-bottom: 6px;
}
.autor-cargo {
  font-size: 0.94rem; color: var(--accent); font-weight: 500;
  line-height: 1.55; margin-bottom: 16px;
}
.autor-etiquetas { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.autor-etiqueta {
  background: var(--accent-soft); color: var(--accent);
  border-radius: 20px; padding: 3px 13px; font-size: 0.76rem; font-weight: 600;
}
.autor-numeros { margin-top: 20px; }
.autor-numeros .kpi { text-align: center; }
.autor-numeros .kpi-valor { font-size: 1.5rem; }

.citacao {
  background: var(--surface); border-left: 4px solid var(--mid);
  border-radius: 0 9px 9px 0; padding: 14px 18px; margin: 12px 0;
  font-size: 0.9rem; line-height: 1.7; max-width: 82ch;
}

.secao h3 {
  font-size: 1.05rem; color: var(--deep); margin: 22px 0 8px;
}

@media (max-width: 760px) {
  .autor-topo { padding: 18px; gap: 20px; }
  .autor-retrato { width: 100%; }
  .autor-retrato img { margin: 0 auto; width: 160px; height: 160px; }
}
.rodape-copyright { color: #9DB5AC; }
.rodape-copyright a { color: #C6D3CE; text-decoration: underline; }

/* ============================================================
   ACESSIBILIDADE E TOQUE
   Correções vindas da auditoria: 51 alvos abaixo de 44px e os
   controles do Leaflet com contraste 1,75.
   ============================================================ */

/* Controles de zoom do mapa: o padrão do Leaflet é #bbb sobre #f4f4f4 — 1,75
   de contraste, ilegível. Também eram 30px, abaixo do alvo de toque. */
.leaflet-touch .leaflet-bar a,
.leaflet-bar a {
  width: 44px; height: 44px; line-height: 44px;
  color: var(--deep); background: var(--surface);
  border-bottom-color: var(--border); font-size: 1.25rem;
}
.leaflet-bar a:hover { background: var(--accent-soft); color: var(--accent); }
.leaflet-bar a.leaflet-disabled { color: var(--text-muted); background: var(--zebra); }

/* Botões, chips e campos: altura confortável sem inchar o desktop. */
.botao { min-height: 44px; display: inline-flex; align-items: center; }
.chip { min-height: 36px; display: inline-flex; align-items: center; }
.campo select,
.campo input[type="search"] { min-height: 44px; }
thead th.ordenavel { padding-top: 14px; padding-bottom: 14px; }
.rodape-bloco li { margin-bottom: 2px; }
.rodape-bloco a { display: inline-block; padding: 7px 0; }
.migalhas a { display: inline-block; padding: 6px 2px; }

/* Legenda de tabela: presente para leitor de tela, invisível na tela. Não use
   display:none — isso a remove também da árvore de acessibilidade. */
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Aviso de rolagem lateral. Uma tabela de 910px dentro de 375px rola, mas nada
   na tela diz isso — o leitor conclui que faltam colunas. */
.tabela-rolagem { position: relative; }
.tabela-dica {
  display: none; font-size: 0.78rem; color: var(--text-muted);
  margin: 6px 2px 0;
}

/* Quem pediu menos movimento recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 760px) {
  /* O cabeçalho fixo ocupava 181px — 22% da tela de um telefone, o tempo
     todo. Aqui ele deixa de ser fixo e devolve a altura ao conteúdo; a
     navegação continua a um toque de distância pelo topo da página. */
  .topo { position: static; }
  .topo-interno { padding: 12px 16px 8px; gap: 10px; }
  .marca-nome { font-size: 1.02rem; }
  .nav {
    width: 100%; margin-left: 0; gap: 2px;
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; padding: 6px 10px; }

  .heroi-interno { padding: 34px 0 30px; }
  .heroi-lede { font-size: 1rem; }

  /* O mapa é o conteúdo principal desta página; 380px num telefone deixava o
     Brasil pequeno demais para distinguir estado. */
  .mapa { height: 62vh; min-height: 420px; }
  .grafico-caixa { height: 58vh; min-height: 320px; }

  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpis-compacto { grid-template-columns: 1fr 1fr; }
  .kpi { padding: 13px 14px; }
  .kpi-valor { font-size: 1.42rem; }

  .tabela-dica { display: block; }
  .secao { margin: 34px 0; }
  .secao-cabecalho { gap: 10px; }
  .autor-numeros { grid-template-columns: repeat(3, 1fr); }
}

/* Duas colunas continuam legíveis a 375px e cortam pela metade a rolagem até
   o mapa, que é o conteúdo principal da home. Só abaixo de 340px, onde o
   número e o rótulo começam a quebrar feio, cai para uma. */
@media (max-width: 400px) {
  .heroi-manchete { font-size: 1.72rem; }
  .kpi-nota { font-size: 0.72rem; }
}

@media (max-width: 339px) {
  .kpis, .kpis-compacto { grid-template-columns: 1fr; }
}

/* A navegação rola de lado no telefone; sem um sinal na borda, o leitor não
   descobre que existem Série e Glossário depois de Correlações. */
@media (max-width: 760px) {
  .topo-interno { position: relative; }
  .nav {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    padding-right: 18px;
  }
}

/* Links dentro de tabela: 17px de altura é alvo pequeno demais para o dedo.
   O padding vertical leva a ~29px, acima do mínimo de 24px da WCAG 2.5.8, sem
   inflar a altura da linha a ponto de reduzir quantas cabem na tela. */
td a { display: inline-block; padding: 6px 0; }

/* Link inline do rodapé: 16px de altura. A WCAG isenta links em meio a frase,
   mas 24px custa quatro pixels de padding e não desalinha o parágrafo. */
.rodape-copyright a { display: inline-block; padding: 4px 0; }