/* ═══════════════════════════════════════════════════════════════════════════
   tAILly — O MAPA 3D (Onda 1 · composição revista na Onda 1.5)

   Nenhuma cor nova nasce aqui. Tudo vem dos tokens de application.css, que
   saíram do validador (scripts/validate_palette.js). Esta folha só ARRUMA —
   grade, camada, densidade, alvo de toque.

   COMPOSIÇÃO. O cromo mora em TRÊS trilhos (esquerda, direita, base). O da
   esquerda é filho do palco; os outros dois são IRMÃOS do palco, posicionados
   por cima dele no desktop. Isso não é estética: no celular o palco vira
   `position: sticky` de altura fixa, e o que estivesse dentro dele teria de
   caber ali. Fora, a leitura desce em fluxo e a barra de tempo vira faixa
   FIXA no rodapé — mapa e tempo na mesma tela, sempre.

   MEDIDAS QUE MOTIVARAM CADA REGRA (auditoria de 27/07/2026, produção):
     · celular: mapa terminava em y=808 e o scrubber nascia em y=1371 —
       519 px de distância numa viewport de 844. Coexistência impossível.
     · scrubber com 6 px de área de toque (polegar desenhado: 22 px).
     · painel da direita: scrollHeight 1131 × clientHeight 475 — 58% oculto.
     · pílulas de controle com 29 px de altura (piso de toque: 44 px).
     · texto da nota de fonte pousando sobre o WebGL vivo, sem véu.

   Esta folha é inlinada, junto com application.css, dentro do artefato offline
   research/mapa/atlas3d_build.html. Nada de @import, nada de url() externo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. página ───────────────────────────────────────────────────────────── */

.layout--palco { max-width: none; padding: 0 0 var(--e-8); }

.mapa-pular {
  position: absolute; left: -9999px; z-index: 60;
  background: var(--plano-elevado); color: var(--tinta);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio-2);
  border: 1px solid var(--linha-forte);
}
.mapa-pular:focus { left: var(--e-4); top: calc(var(--topo-alt) + var(--e-2)); }

/* A altura do palco é UM valor, declarado aqui, porque o trilho de baixo se
   pendura nele (`top: var(--palco-alt)` + translateY(-100%)). Se os dois
   discordarem, a barra de tempo descola do rodapé da cena. */
.mapa {
  position: relative;
  --palco-alt: max(560px, min(90vh, 940px));
  overflow: visible;      /* sticky no celular morre com overflow:hidden acima */
  border: 0; border-radius: 0; background: transparent;
}

/* Âncora (#tabela, #leitura) não pode nascer atrás da barra fina. */
.mapa [id] { scroll-margin-top: calc(var(--topo-alt) + var(--e-2)); }

/* ── 1. cena ─────────────────────────────────────────────────────────────── */

.mapa-palco {
  position: relative;
  width: 100%;
  height: var(--palco-alt);
  overflow: hidden;
  border: 1px solid var(--linha-grade);
  border-radius: var(--raio-4);
  background: radial-gradient(120% 80% at 50% 0%, var(--plano-carta) 0%, var(--plano-pagina) 62%);
}

.mapa-palco__gl {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  cursor: grab; touch-action: none;
}
.mapa-palco__gl:active { cursor: grabbing; }
.mapa-palco__gl:focus-visible { outline: 2px solid var(--marca); outline-offset: -3px; }

/* Sem WebGL o palco não pode continuar ocupando 90vh de nada. */
.mapa-palco[data-falhou="1"] { height: auto; min-height: 0; padding: var(--e-5); }
.mapa-palco[data-falhou="1"] .mapa-palco__gl,
.mapa-palco[data-falhou="1"] .mapa-trilho { display: none; }
.mapa-palco[data-falhou="1"] .mapa-aviso { position: static; transform: none; margin: 0 auto; }
/* Os trilhos da direita e de baixo agora são irmãos do palco: sem cena, eles
   também não têm o que sobrepor. */
.mapa:has(.mapa-palco[data-falhou="1"]) > .mapa-trilho--dir,
.mapa:has(.mapa-palco[data-falhou="1"]) > .mapa-trilho--baixo {
  position: static; transform: none; width: auto;
  max-width: 1080px; margin: var(--e-4) auto 0; padding: 0 var(--e-5);
}

/* ── 2. os três trilhos ──────────────────────────────────────────────────── */
/* ARMADILHA HERDADA (docs/04-DESIGN.md): dar pointer-events:auto ao contêiner
   do cromo faz a caixa cobrir a largura inteira e MATAR o hover das colunas.
   O trilho é transparente ao ponteiro; só as folhas recebem evento. */

.mapa-trilho { position: absolute; z-index: 4; pointer-events: none; display: flex; }

.mapa-trilho--esq {
  top: 0; left: 0; bottom: var(--baixo-alt, 210px);
  width: min(430px, 34vw);
  flex-direction: column; gap: var(--e-3);
  padding: var(--e-5) 0 0 var(--e-5);
  overflow: hidden;
}
.mapa-trilho--dir {
  top: var(--e-4); right: var(--e-4);
  width: min(310px, 27vw);
  flex-direction: column; gap: var(--e-3);
}
/* Pendurado no rodapé da cena sem número mágico: desce a altura do palco e
   sobe a própria altura. */
.mapa-trilho--baixo {
  left: 0; right: 0; top: var(--palco-alt);
  transform: translateY(-100%);
  flex-direction: column; gap: var(--e-2);
  padding: var(--e-6) var(--e-5) var(--e-4);
  background: linear-gradient(transparent,
              color-mix(in srgb, var(--plano-pagina) 70%, transparent) 22%,
              color-mix(in srgb, var(--plano-pagina) 92%, transparent) 55%);
}

.mapa-cabeca,
.mapa-detalhe,
.mapa-leitura,
.mapa-nacional,
.mapa-legenda-caixa,
.mapa-seg,
.mapa-tempo__topo,
.mapa-tempo__trilho,
.mapa-aviso { pointer-events: auto; }

/* ── 3. cabeça ───────────────────────────────────────────────────────────── */

/* O VÉU NÃO PODE CHEGAR A `transparent` DEBAIXO DE TEXTO.
   Antes ele terminava em transparent no fim da própria caixa: as últimas
   linhas pousavam no WebGL vivo e o print de produção mostrava a sigla de
   Roraima atravessando a palavra ("dado atuRRalizado"). Agora o véu é um
   pseudo-elemento que ULTRAPASSA a caixa em 56 px: dentro do texto ele nunca
   fica abaixo de 82% do plano, e o desvanecimento acontece onde não há letra.
   O blur é a segunda barreira, para o caso de uma coluna clara passar ali. */
.mapa-cabeca {
  position: relative;
  max-width: 52ch;
  margin: calc(var(--e-5) * -1) 0 0 calc(var(--e-5) * -1);
  padding: var(--e-5) var(--e-7) var(--e-4) var(--e-5);
}
.mapa-cabeca::before {
  content: "";
  position: absolute; inset: 0 0 -56px 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--plano-pagina) 94%, transparent) 0%,
    color-mix(in srgb, var(--plano-pagina) 86%, transparent) 55%,
    color-mix(in srgb, var(--plano-pagina) 82%, transparent) calc(100% - 56px),
    transparent 100%);
  backdrop-filter: blur(10px);
  /* A borda direita também desvanece — senão o véu vira um retângulo opaco
     jogado sobre a cena. O desvanecimento só começa depois do texto: a
     coluna de leitura tem 46ch e o véu, 52ch. */
  mask-image: linear-gradient(to right, #000 86%, transparent 100%);
  pointer-events: none;
}
.mapa-cabeca__titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.15rem, 2.2vw, 1.85rem);
  line-height: 1.15; margin: 0; letter-spacing: -0.015em; text-wrap: balance;
}
.mapa-cabeca__titulo em { font-style: normal; color: var(--marca); }
.mapa-cabeca__linha { margin: var(--e-2) 0 0; color: var(--tinta-2); font-size: var(--t-menor); max-width: 46ch; }
.mapa-cabeca__linha strong { color: var(--tinta); font-weight: 600; }

/* A procedência do payload agora mora no rodapé da página (era o texto que
   colidia com a cena). */
.mapa-procedencia {
  margin: var(--e-5) 0 0; color: var(--tinta-3);
  font-size: var(--t-micro); font-family: var(--fonte-mono); line-height: 1.5;
}

/* ── 4. leitura de estado ────────────────────────────────────────────────── */

.mapa-leitura {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  background: color-mix(in srgb, var(--plano-elevado) 84%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--linha-grade);
  border-radius: var(--raio-3);
  flex: 0 0 auto;
}
.mapa-leitura__item { display: grid; gap: 1px; min-width: 0; }
.mapa-leitura__valor {
  font-family: var(--fonte-mono); font-size: var(--t-md);
  line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis;
}
.mapa-leitura__chave { font-size: var(--t-micro); color: var(--tinta-3); line-height: 1.2; }
/* HERÓI: 1.339 é o censo, é o produto. Os outros três são linha de apoio —
   antes os quatro saíam no mesmo corpo, sem hierarquia nenhuma. */
.mapa-leitura__item:first-child { grid-column: 1 / -1; }
/* `line-height: 1` com `overflow: hidden` recorta o próprio número-herói:
   medido em 390×844, `1.339` pedia 37 px de caixa de glifo e recebia 34. */
.mapa-leitura__item:first-child .mapa-leitura__valor { font-size: var(--t-xl); line-height: 1.12; }
.mapa-leitura__item:first-child .mapa-leitura__chave { font-size: var(--t-mini); }

/* Agregado nacional fora da geografia (slot preenchido pelo núcleo). */
.mapa-nacional {
  margin: 0; padding: var(--e-2) var(--e-3);
  background: color-mix(in srgb, var(--plano-elevado) 84%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--linha-grade); border-radius: var(--raio-3);
  font-size: var(--t-mini); color: var(--tinta-2);
}

/* ── 5. faixa de leitura (era o painel lateral) ──────────────────────────── */
/* 656 px de 1.131 ficavam invisíveis atrás de uma rolagem sem afordância.
   Agora os sete blocos são cartões numa faixa larga: nada rola, nada some. */

.mapa-painel {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  align-items: start;
}
.mapa-bloco {
  display: grid; gap: var(--e-2); align-content: start;
  padding: var(--e-4);
  background: var(--plano-carta);
  border: 1px solid var(--linha-grade);
  border-radius: var(--raio-3);
}
.mapa-bloco__titulo {
  margin: 0; font-family: var(--fonte);
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--tinta-3); font-weight: 600;
}
.mapa-bloco__numero {
  margin: 0; font-family: var(--fonte-mono); font-size: var(--t-lg);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.mapa-bloco__nota { margin: 0; font-size: var(--t-micro); color: var(--tinta-3); line-height: 1.45; }

.mapa-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.mapa-barras__item {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px 32px;
  align-items: center; gap: var(--e-2); font-size: var(--t-mini);
}
.mapa-barras__rotulo { color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-barras__trilho { height: 7px; background: var(--plano-afundado); border-radius: var(--raio-1); overflow: hidden; }
.mapa-barras__preenche {
  display: block; height: 100%;
  background: var(--seq-500);
  border-radius: 0 var(--raio-1) var(--raio-1) 0;
  transition: width var(--dur-lento) var(--ease-dado);
}
.mapa-barras__n { text-align: right; font-family: var(--fonte-mono); color: var(--tinta); font-variant-numeric: tabular-nums; }

.mapa-dl { margin: 0; display: grid; gap: var(--e-1); font-size: var(--t-mini); }
.mapa-dl > div { display: flex; justify-content: space-between; gap: var(--e-3); }
.mapa-dl dt { color: var(--tinta-3); }
.mapa-dl dd { margin: 0; color: var(--tinta); font-variant-numeric: tabular-nums; text-align: right; }

/* ── 6. detalhe da UF (drill-down) ───────────────────────────────────────── */

.mapa-detalhe {
  width: min(360px, 100%);
  min-height: 0; overflow-y: auto;
  padding: var(--e-4);
  background: color-mix(in srgb, var(--plano-elevado) 92%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-4);
  box-shadow: var(--sombra-3);
  animation: mapa-entra var(--dur-medio) var(--ease-saida);
}
@keyframes mapa-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mapa-detalhe__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.mapa-detalhe__titulo { margin: 0; font-family: var(--fonte-titulo); font-size: var(--t-md); }
.mapa-detalhe__titulo span { color: var(--tinta-3); font-size: var(--t-menor); font-family: var(--fonte-mono); }
.mapa-detalhe__linha { margin: var(--e-2) 0 var(--e-3); font-size: var(--t-mini); color: var(--tinta-2); }
.mapa-detalhe__nota { margin: var(--e-3) 0 0; font-size: var(--t-micro); color: var(--tinta-3); line-height: 1.45; }

/* ALVO DE TOQUE: piso de 44 px em TODO controle. Estava em 29 px no desktop e
   inconsistente no celular (47 px num grupo, 29 nos outros três). Quem cresce
   é a área, não a letra. */
.mapa-botao {
  appearance: none; font: inherit; font-size: var(--t-mini);
  min-height: 44px; padding: 0 var(--e-4);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-pilula); cursor: pointer;
  background: var(--marca); color: var(--tinta-invertida); border: 0;
  transition: filter var(--dur-toque) var(--ease-padrao);
  white-space: nowrap;
}
.mapa-botao:hover { filter: brightness(1.08); }
.mapa-botao--fantasma { background: transparent; color: var(--tinta-2); border: 1px solid var(--linha-forte); }
.mapa-botao--play { min-width: 118px; }
.mapa-botao--play[data-on="1"] { background: var(--linha-forte); color: var(--tinta); }

/* ── 7. avisos ───────────────────────────────────────────────────────────── */

.mapa-aviso {
  position: absolute; top: var(--e-4); left: 50%; transform: translateX(-50%);
  z-index: 8; max-width: 58ch; margin: 0;
  padding: var(--e-3) var(--e-4);
  /* A lavagem declara a base. Sem ela o aviso pousa translúcido SOBRE O CANVAS
     3D — fundo imprevisível — e, no plano da página, `--status-atencao` da
     variante branda cai para 4,08:1 (medido). Com `--plano-elevado`: 4,72:1. */
  background: linear-gradient(var(--lavagem-critico), var(--lavagem-critico)) var(--plano-elevado);
  color: var(--status-critico);
  border: 1px solid currentColor; border-radius: var(--raio-2);
  font-size: var(--t-menor);
}
/* Aviso de <noscript>: ESTÁTICO no fluxo (o .mapa-aviso é absoluto dentro do
   palco e aqui não haveria palco para ancorar). Plano sólido e --tinta, para
   não depender de nenhuma lavagem composta. */
.mapa-sem-js {
  max-width: 1080px; margin: var(--e-4) auto 0;
  padding: var(--e-3) var(--e-4);
  background: var(--plano-carta); color: var(--tinta);
  border: 1px solid var(--marca); border-radius: var(--raio-2);
  font-size: var(--t-menor); line-height: 1.6;
}
.mapa-aviso--brando {
  position: static; transform: none; max-width: none;
  background: linear-gradient(var(--lavagem-atencao), var(--lavagem-atencao)) var(--plano-elevado);
  color: var(--status-atencao);
  font-size: var(--t-mini);
}

/* ── 8. dica ─────────────────────────────────────────────────────────────── */

.mapa-dica {
  position: absolute; top: 0; left: 0; z-index: 9;
  pointer-events: none; max-width: 290px;
  padding: var(--e-3) var(--e-4);
  background: var(--plano-elevado);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-2);
  box-shadow: var(--sombra-2);
  font-size: var(--t-menor);
  will-change: transform;
}
.mapa-dica__nome { font-weight: 600; margin-bottom: var(--e-1); }
.mapa-dica__linha { color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.mapa-dica__linha b { color: var(--tinta); }
.mapa-dica__inst { display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-2); }
.mapa-dica__inst i { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.mapa-dica__acao { margin-top: var(--e-2); color: var(--tinta-3); font-size: var(--t-micro); }

/* ── 9. legenda e controles ──────────────────────────────────────────────── */

/* A legenda também pousava direto na cena: 'PARANA ANALISE CONSUMIDOR' caía
   sobre a coluna do PR e 'sem registro no TSE' sobre a do RS. Agora ela tem
   véu próprio, opaco o bastante para ser lida, com blur atrás. */
.mapa-legenda-caixa {
  max-width: 78ch;
  padding: var(--e-2) var(--e-3);
  background: color-mix(in srgb, var(--plano-pagina) 88%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--linha-grade);
  border-radius: var(--raio-2);
}
.mapa-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.mapa-legenda__item { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-mini); color: var(--tinta-2); }
.mapa-legenda__item i { width: 11px; height: 11px; border-radius: 2px; flex: 0 0 auto; }
.mapa-legenda__rampa { display: inline-flex; border-radius: var(--raio-1); overflow: hidden; }
.mapa-legenda__rampa i { width: 26px; height: 11px; }
.mapa-legenda__extremos { font-size: var(--t-mini); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.mapa-legenda__regua {
  color: var(--tinta-3); font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--linha-eixo); padding-left: var(--e-3);
}
.mapa-legenda__nota { margin: var(--e-2) 0 0; font-size: var(--t-micro); color: var(--tinta-3); max-width: 84ch; }

.mapa-controles { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.mapa-seg {
  display: inline-flex;
  background: color-mix(in srgb, var(--plano-elevado) 86%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--linha-grade);
  border-radius: var(--raio-pilula);
  padding: 2px;
}
.mapa-seg button {
  appearance: none; border: 0; background: transparent;
  color: var(--tinta-3); font: inherit; font-size: var(--t-mini);
  min-height: 44px; padding: 0 var(--e-4);
  display: inline-flex; align-items: center;
  border-radius: var(--raio-pilula); cursor: pointer;
  transition: background-color var(--dur-rapido) var(--ease-padrao), color var(--dur-rapido) var(--ease-padrao);
}
.mapa-seg button:hover { color: var(--tinta); }
.mapa-seg button[aria-pressed="true"] { background: var(--lavagem-marca); color: var(--marca); }

/* ── 10. linha do tempo ──────────────────────────────────────────────────── */

.mapa-tempo { display: grid; gap: var(--e-1); }
.mapa-tempo__topo { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; }
.mapa-tempo__quando {
  font-family: var(--fonte-mono); font-size: var(--t-lg);
  letter-spacing: -0.02em; min-width: 9ch; font-variant-numeric: tabular-nums;
}
.mapa-tempo__recorte { font-size: var(--t-mini); color: var(--tinta-3); }

/* ÁREA DE TOQUE DO SCRUBBER: 44 px de alto, trilho de 6 px DESENHADO no
   pseudo-elemento. O visual é o mesmo; a área de toque saiu de 6 px para 44.
   `touch-action: pan-x` impede que um arraste levemente diagonal role a
   página em vez de mover o tempo. */
.mapa-tempo__trilho { position: relative; height: 70px; }
.mapa-tempo__faixa { position: absolute; left: 0; right: 0; bottom: 30px; width: 100%; height: 38px; }
.mapa-tempo__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mapa-tempo__trilho input[type="range"] {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 44px; margin: 0; padding: 0;
  appearance: none; -webkit-appearance: none;
  background: transparent; z-index: 3; cursor: pointer;
  touch-action: pan-x;
}
.mapa-tempo__trilho input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; background: var(--plano-afundado); border-radius: 3px; border: 0;
}
.mapa-tempo__trilho input[type="range"]::-moz-range-track {
  height: 6px; background: var(--plano-afundado); border-radius: 3px; border: 0;
}
.mapa-tempo__trilho input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--marca); margin-top: -8px;
  border: 3px solid var(--plano-pagina); box-shadow: 0 0 0 1px var(--marca);
}
.mapa-tempo__trilho input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--marca); border: 3px solid var(--plano-pagina);
}
.mapa-tempo__trilho input[type="range"]:focus-visible { outline: 2px solid var(--marca); outline-offset: 4px; border-radius: 4px; }

/* ── 11. seções fora do palco ────────────────────────────────────────────── */

.mapa-secao { max-width: 1080px; margin: var(--e-7) auto 0; padding: 0 var(--e-5); }
.mapa-secao--larga { max-width: 1320px; }
.mapa-secao__titulo { font-family: var(--fonte-titulo); font-size: var(--t-lg); margin: 0 0 var(--e-2); text-wrap: balance; }
.mapa-secao__linha { margin: 0 0 var(--e-4); color: var(--tinta-2); font-size: var(--t-menor); max-width: 72ch; }

/* Prova a um clique: 28 linhas em que 27 dizem "bate" não são leitura, são
   log. O veredito fica à vista; o log abre quem quiser conferir. */
.mapa-detalhes { border: 1px solid var(--linha-grade); border-radius: var(--raio-3); background: var(--plano-carta); }
.mapa-detalhes__abre {
  display: flex; align-items: center; gap: var(--e-2);
  min-height: 44px; padding: 0 var(--e-4);
  cursor: pointer; color: var(--tinta-2); font-size: var(--t-menor);
  list-style: none;
}
/* `display:flex` num <summary> apaga o marcador nativo — sem seta, a caixa
   deixa de parecer clicável, que é exatamente o defeito que este <details>
   veio consertar. A seta volta explícita e gira ao abrir. */
.mapa-detalhes__abre::-webkit-details-marker { display: none; }
.mapa-detalhes__abre::before {
  content: "▸"; flex: 0 0 auto; color: var(--marca);
  transition: transform var(--dur-rapido) var(--ease-padrao);
}
.mapa-detalhes[open] .mapa-detalhes__abre::before { transform: rotate(90deg); }
.mapa-detalhes__abre:hover { color: var(--tinta); }
.mapa-detalhes[open] .mapa-detalhes__abre { border-bottom: 1px solid var(--linha-grade); }
.mapa-detalhes .mapa-tabela-rolo { border: 0; border-radius: 0 0 var(--raio-3) var(--raio-3); }

.mapa-tabela-rolo { overflow-x: auto; border: 1px solid var(--linha-grade); border-radius: var(--raio-3); }
.mapa-tabela { width: 100%; border-collapse: collapse; font-size: var(--t-menor); min-width: 640px; }
.mapa-tabela th, .mapa-tabela td { padding: 7px var(--e-3); text-align: left; border-bottom: 1px solid var(--linha-grade); }
.mapa-tabela tbody tr:last-child th, .mapa-tabela tbody tr:last-child td { border-bottom: 0; }
.mapa-tabela thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--plano-carta);
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--tinta-3); font-weight: 600;
}
.mapa-tabela tbody tr:hover { background: var(--lavagem-neutra); }
/* A lavagem do hover derruba --tinta-3 de 4,70:1 para 4,19:1 sobre o composto
   #DBE2E4 (rgba(94,113,120,.10) sobre --plano-pagina #E9EEF0) — mesmo motivo
   pelo qual a linha selecionada já sobe de tinta. Medido, não estimado. */
.mapa-tabela tbody tr:hover .mapa-tabela__nome,
.mapa-tabela tbody tr:hover .mapa-tabela__peso { color: var(--tinta-2); }
/* Linha selecionada: a lavagem escurece o fundo o bastante para derrubar
   --tinta-3 de 4,70:1 para 4,13:1. Quem está selecionado sobe de tinta.
   aria-current, não aria-selected: <tr> de tabela comum não suporta o
   segundo, e o destaque nunca chegava à tecnologia assistiva. */
.mapa-tabela tbody tr[aria-current="true"] { background: var(--lavagem-marca); }
.mapa-tabela tbody tr[aria-current="true"] .mapa-tabela__nome,
.mapa-tabela tbody tr[aria-current="true"] .mapa-tabela__peso { color: var(--tinta-2); }
/* Coluna numérica alinha à DIREITA — é o motivo de existir tabular-nums.
   O seletor precisa do elemento junto (`td.classe`) para vencer a regra
   `.mapa-tabela th, .mapa-tabela td { text-align: left }`, que tem
   especificidade maior que a classe sozinha. Era esse o bug: a regra
   existia e nunca ganhava. */
.mapa-tabela th.mapa-tabela__n,
.mapa-tabela td.mapa-tabela__n { text-align: right; font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }
.mapa-tabela__uf {
  appearance: none; background: transparent; border: 0; color: inherit;
  font: inherit; cursor: pointer;
  /* 26 dos 41 alvos da página são estes botões, e são o caminho principal de
     drill-down por toque. Estavam em 32 px enquanto o docs/UX_PRINCIPLES.md
     prometia 44. O piso vem do PADDING: o corpo da letra não muda. */
  padding: 10px 0; min-height: 44px;
  display: inline-flex; align-items: center; gap: var(--e-2);
}
/* MEDIDO (27/07, quando --marca claro ainda era #12766D): a marca sobre o fundo
   composto do hover (#DBE2E4) dava 4,17:1 — reprovava 4,5:1, e esta regra vinha DEPOIS da que sobe a tinta na
   linha em hover, então ela desfazia a correção. A afordância passa a ser o
   sublinhado (pista não cromática) e a cor sobe para --tinta-2 (6,14:1). */
.mapa-tabela__uf:hover .mapa-tabela__nome,
.mapa-tabela__uf:focus-visible .mapa-tabela__nome { color: var(--tinta-2); text-decoration: underline; text-underline-offset: 0.18em; }
.mapa-tabela__bolha { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.mapa-tabela__nome { color: var(--tinta-3); font-weight: 400; }
.mapa-tabela__peso { color: var(--tinta-3); font-family: var(--fonte-mono); }

/* Ausência de dado NÃO é zero e NÃO é cor: é hachura + texto. (regra 7) */
.mapa-vazio {
  color: var(--tinta-3); font-style: italic;
  background: var(--hachura); padding: 1px 6px; border-radius: var(--raio-1);
}

.mapa-notas { margin: 0; padding-left: var(--e-4); display: grid; gap: var(--e-2); color: var(--tinta-2); font-size: var(--t-menor); max-width: 78ch; }

.mapa-rodape {
  max-width: 1080px; margin: var(--e-7) auto 0; padding: var(--e-5);
  border-top: 1px solid var(--linha-grade);
  color: var(--tinta-3); font-size: var(--t-mini); line-height: 1.6;
}
/* Link dentro de bloco de texto não pode se distinguir SÓ pela cor: contra o
   texto ao redor a marca dá 1,01:1 (medido). O sublinhado é a pista não
   cromática — e o offset mantém a leitura limpa. */
.mapa-rodape a,
.mapa-notas a,
.mapa-secao__linha a {
  color: var(--marca);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}
.mapa-rodape a:hover,
.mapa-notas a:hover,
.mapa-secao__linha a:hover { text-decoration-thickness: 2px; }

/* ── 12. CELULAR: mapa e tempo na MESMA tela ─────────────────────────────── */
/* O palco gruda no topo (sticky) e a barra de tempo gruda no rodapé (fixed).
   Entre os dois, tudo rola. É a única composição em que "arraste o tempo e
   veja a corrida se acender" é verdade num aparelho de 844 px de altura. */

@media (max-width: 900px) {
  .mapa-palco {
    position: sticky; top: var(--topo-alt); z-index: 3;
    height: 52svh; min-height: 240px;
    border-left: 0; border-right: 0; border-radius: 0;
  }

  /* Título vira sobreposição curta no alto da cena, com o mesmo véu. */
  .mapa-trilho--esq {
    inset: 0 0 auto 0; width: 100%; bottom: auto;
    padding: var(--e-3) var(--e-3) 0; overflow: visible;
  }
  .mapa-cabeca { margin: 0; padding: var(--e-3) var(--e-4) var(--e-3) var(--e-3); max-width: none; }
  .mapa-cabeca::before { inset: -12px 0 -32px -12px; mask-image: none; }
  .mapa-cabeca__titulo { font-size: 1.05rem; }
  .mapa-cabeca__linha { font-size: var(--t-mini); margin-top: var(--e-1); }
  .mapa-detalhe {
    width: auto; max-height: calc(52svh - 132px);
    backdrop-filter: blur(12px);
  }

  /* Leitura e controles descem para o fluxo, logo abaixo do mapa grudado. */
  .mapa-trilho--dir {
    position: static; width: auto; transform: none;
    padding: var(--e-4) var(--e-4) 0;
  }
  .mapa-trilho--baixo {
    position: static; transform: none;
    padding: var(--e-4) var(--e-4) 0; background: none;
  }
  .mapa-leitura, .mapa-legenda-caixa, .mapa-seg, .mapa-nacional { backdrop-filter: none; }
  .mapa-leitura { background: var(--plano-carta); }
  .mapa-legenda-caixa { background: var(--plano-carta); max-width: none; }

  /* A BARRA DE TEMPO: fixa no rodapé, com respiro para a barra do sistema.
     A altura é DECLARADA num só lugar (--tempo-alt) porque o corpo rolável
     reserva exatamente ela como padding-bottom. Antes o número da reserva
     (168 px) não tinha relação nenhuma com a barra (113 px medidos): sobrava
     no fim e faltava em toda a rolagem. */
  .mapa { --tempo-alt: 116px; }
  .mapa-tempo {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: var(--z-scrubber);
    gap: 0;
    min-height: var(--tempo-alt);
    padding: var(--e-2) var(--e-4) calc(var(--e-2) + env(safe-area-inset-bottom, 0px));
    /* VÉU OPACO. Com 94% + blur, a legenda passava por baixo e a tela mostrava
       texto sobre texto: `altura: 0 → 108 pesquisas` × `25 de jul. de 2026` =
       117×23 px, × `▶ animar` = 52×37 px (medido em 390×844 DPR 3). */
    background: var(--plano-pagina);
    border-top: 1px solid var(--linha-grade);
    box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.45);
  }
  .mapa-tempo__topo { gap: var(--e-3); align-items: center; flex-wrap: nowrap; }
  .mapa-tempo__quando { font-size: var(--t-base); min-width: 0; white-space: nowrap; }
  .mapa-tempo__recorte { font-size: var(--t-micro); white-space: nowrap; min-width: 0; }
  .mapa-botao--play { min-width: 0; padding: 0 var(--e-3); }
  .mapa-tempo__trilho { height: 52px; }
  .mapa-tempo__faixa { bottom: 26px; height: 24px; }

  /* RESERVA de espaço: o corpo rolável termina onde a barra começa. */
  .layout--palco { padding-bottom: calc(var(--tempo-alt, 116px) + env(safe-area-inset-bottom, 0px)); }

  .topo-fino__centro { justify-content: flex-start; }
  .mapa-secao { padding: 0 var(--e-4); margin-top: var(--e-6); }
  .mapa-painel { grid-template-columns: 1fr; gap: var(--e-3); }
  .mapa-dica { display: none; } /* em toque não existe hover: a tabela é a leitura */
}

/* ── 12b. ≤ 420 px: a data e o recorte não cabem na mesma linha ──────────── */
/* MEDIDO em 390 px: `25 de jul. de 2026` pede 157 px e recebia 117 (cortado
   no meio da data); `acumulado desde 07 de jan. de 2026` pede 205 e recebia
   152. Duas datas truncadas numa barra que existe para dizer QUANDO. Aqui o
   play ocupa as duas linhas à esquerda e cada data ganha a sua. */
@media (max-width: 420px) {
  .mapa-tempo__topo {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 0 var(--e-3); align-items: center;
  }
  .mapa-botao--play { grid-column: 1; grid-row: 1 / span 2; }
  .mapa-tempo__quando { grid-column: 2; grid-row: 1; }
  .mapa-tempo__recorte { grid-column: 2; grid-row: 2; }

  /* O NOME DO INSTITUTO GANHA A LINHA INTEIRA.
     MEDIDO em produção, 390×844, estado do meio, nos DOIS temas: a linha era
     `minmax(0,1fr) 44px 32px`, o rótulo recebia 232 px e três nomes pediam
     mais — `INSTITUTO PARANA DE PESQUISAS E ANALISE DE CONSUMIDOR LTDA` 416,
     `QUAEST PESQUISAS, CONSULTORIA E PROJETOS LTDA.` 326,
     `ATLASINTEL TECNOLOGIA DE DADOS LTDA` 255. Reticência é corte declarado,
     e o nome inteiro está no `title=` — mas `title` não existe em toque, que
     é justamente o aparelho desta regra: quem lê no celular NÃO tem como
     chegar ao nome inteiro. Aqui o rótulo sobe para a própria linha, com
     largura cheia e quebra livre; a barra e o número descem para a segunda.
     Nada de `-webkit-line-clamp`: clamp é a mesma reticência com outro nome. */
  .mapa-barras__item {
    grid-template-columns: minmax(0, 1fr) 32px;
    row-gap: 2px;
  }
  .mapa-barras__rotulo {
    grid-column: 1 / -1; grid-row: 1;
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  .mapa-barras__trilho { grid-column: 1; grid-row: 2; }
  .mapa-barras__n { grid-column: 2; grid-row: 2; }
}

/* Telas médias: o palco ainda é sobreposto, mas o cromo aperta. */
@media (min-width: 901px) and (max-width: 1180px) {
  .mapa-trilho--esq { width: min(380px, 42vw); }
  .mapa-trilho--dir { width: min(280px, 30vw); }
}

/* ── 13. movimento reduzido ──────────────────────────────────────────────── */
/* O núcleo já corta a interpolação da coluna e o voo de câmera; aqui morre o
   resto do movimento de cromo. */
@media (prefers-reduced-motion: reduce) {
  .mapa-detalhe { animation: none; }
  .mapa-barras__preenche, .mapa-seg button { transition: none; }
}