/* Página da apuração. Fontes, tokens, cabeçalho, rodapé e .label vêm de /style.css.
   Mesma linguagem do portfólio: índice suíço, linhas de 1px, sem cards nem sombras,
   mono só para código (actions, rotas, números de urna). O azul só existe aqui, como cor
   de dado (Flávio); a interface continua sem segundo acento. */

:root {
  --surface: #16161a;
  --sem-votos: #1d1d22;
  --palco: #0b0b0d;
}

/* ---------- Palco: três colunas do índice (controles | mapa | placar) ---------- */

.palco {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 360px;
  height: calc(100svh - 62px);
  min-height: 600px;
  border-block: 1px solid var(--line);
}

.painel {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 24px;
  overflow-y: auto;
}

/* Sem rolagem própria: as sugestões da busca precisam poder passar da borda do painel. */
.painel-controles { border-right: 1px solid var(--line); overflow: visible; }
.painel-placar { gap: 32px; border-left: 1px solid var(--line); }

.painel-cabeca { display: grid; gap: 10px; }
.painel-titulo { font-size: 28px; font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; }

.status { color: var(--ink); font-size: 14px; }

.ao-vivo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 6px;
  color: var(--accent);
  font-weight: 600;
}

.ao-vivo::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pulsar 1.6s ease-in-out infinite;
}

@keyframes pulsar { 50% { opacity: 0.25; } }

.aviso-simulacao {
  padding: 10px 12px;
  border-radius: 4px;
  background: var(--rails-red);
  color: #fff;
  font-size: 13px;
}

.aviso-simulacao a { text-decoration: underline; }

/* ---------- Seletores: texto, com o ativo sublinhado (turno, onde, modo, região) ---------- */

.seletor {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.seletor :is(button, a, label) {
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: color 200ms;
}

.seletor :is(button, a, label):hover { color: var(--ink); }

.seletor :is([aria-pressed="true"], [aria-current], label:has(:checked)) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.seletor :is(button, a):focus-visible,
.seletor label:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

.seletor input { position: absolute; opacity: 0; pointer-events: none; }
.seletor label:has(:disabled) { opacity: 0.35; cursor: not-allowed; }
.seletor-miudo { padding-top: 0; border-top: 0; }
.seletor-miudo button { font-size: 13px; }

/* Campo só com sublinhado, como os do portfólio. */
.busca { position: relative; }

.busca input {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

.busca input:focus { border-bottom-color: var(--ink); outline: none; }
.busca input::placeholder { color: var(--muted); }
.busca input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }

.sugestoes {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 5;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  font-size: 14px;
}

.sugestoes li { padding: 9px 12px; cursor: pointer; }
.sugestoes li + li { border-top: 1px solid var(--line); }
.sugestoes li span { margin-left: 4px; color: var(--muted); font-size: 12px; }
.sugestoes [aria-selected="true"] { background: var(--surface); }
.sugestoes .sugestao-vazia { color: var(--muted); cursor: default; }

.legenda { display: grid; gap: 6px; font-size: 13px; }

.legenda-linha {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  align-items: center;
}

.legenda-rampa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.legenda-rampa .amostra { width: 100%; height: 10px; }
.legenda-escala small { color: var(--muted); font-size: 11px; text-align: center; }
.legenda-nota { color: var(--muted); font-size: 12px; }
.legenda-nota .amostra { margin-left: 4px; }
.legenda-virada { display: grid; gap: 4px; }

.trilha { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.trilha span[aria-hidden] { color: var(--muted); }
.trilha a { color: var(--accent); }
.trilha a:hover { text-decoration: underline; text-underline-offset: 3px; }
.trilha [aria-current] { font-weight: 600; }

/* ---------- Moldura do mapa ---------- */

.moldura { position: relative; overflow: hidden; background: var(--palco); }

#mapa { display: block; width: 100%; height: 100%; }

/* Com um estado aberto, os vizinhos somem nas bordas do quadro. */
.moldura::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 48px 32px var(--palco);
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms;
}

.moldura:has(.em-estado)::after { opacity: 1; }

.carregando {
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 2;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--muted);
  font-size: 13px;
  transform: translateX(-50%);
}

/* "← brasil": volta ao país, escrito como rota. */
.voltar {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 2;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--accent);
  font: 400 13px/1.4 var(--mono);
  transition: border-color 200ms;
}

.voltar:hover { border-color: var(--accent); }
.voltar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Onde se está, antes da volta: "[bandeira] pi | ← brasil". */
.voltar-de { margin-right: 10px; padding-right: 10px; border-right: 1px solid var(--line); color: var(--ink); }
.voltar .bandeira { width: 18px; height: 12px; margin-right: 6px; vertical-align: -1px; }

.zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
}

.zoom button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.zoom svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.zoom button + button { border-top: 1px solid var(--line); }
.zoom button:hover { background: var(--surface); }
.zoom button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- Mira (telas de toque, dentro de um estado ou no exterior) ---------- */

/* Cantoneiras de visor com um ponto no centro; o lugar sob ela aparece como rota. */
.mira { display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none; }

@media (hover: none) {
  .moldura:has(.em-estado, .no-exterior) .mira { display: block; }
}

.mira-alvo {
  --canto: linear-gradient(var(--ink), var(--ink));
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  background:
    var(--canto) top left / 12px 2px no-repeat, var(--canto) top left / 2px 12px no-repeat,
    var(--canto) top right / 12px 2px no-repeat, var(--canto) top right / 2px 12px no-repeat,
    var(--canto) bottom left / 12px 2px no-repeat, var(--canto) bottom left / 2px 12px no-repeat,
    var(--canto) bottom right / 12px 2px no-repeat, var(--canto) bottom right / 2px 12px no-repeat;
  filter: drop-shadow(0 0 2px var(--palco));
}

.mira-alvo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--palco);
}

.mira-rotulo {
  position: absolute;
  top: calc(50% + 38px);
  left: 50%;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: 400 13px/1.4 var(--mono);
  white-space: nowrap;
  transform: translateX(-50%);
}

.mira-rotulo:empty { display: none; }
.mira-rotulo span { color: var(--muted); }

/* ---------- Bandeiras ---------- */

.bandeira {
  display: inline-block;
  width: 24px;
  height: 16px;
  margin-right: 8px;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: -2px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12);
}

.placar-escopo .bandeira { width: 30px; height: 20px; margin-right: 10px; vertical-align: -1px; }

.ladrilho-bandeira {
  display: block;
  width: 20px;
  height: 13px;
  margin-bottom: 4px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.15);
}

/* ---------- Placar (em índice) ---------- */

#placar { display: grid; gap: 12px; }

.placar-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.placar-escopo { font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }

.compartilhar {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}

.compartilhar:hover { border-color: var(--muted); color: var(--ink); }
.compartilhar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.compartilhar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.placar-urnas { color: var(--muted); font-size: 13px; }

.urnas { height: 1px; background: var(--line); }
.urnas span { display: block; height: 100%; background: var(--ink); }

.placar-candidatos { border-bottom: 1px solid var(--line); }

/* Uma linha por candidato: foto, nome e ficha (número de urna, partido, votos), percentual. */
.candidato {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: end;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.candidato-foto {
  grid-row: span 2;
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  object-fit: cover;
  object-position: 50% 15%;
}

.candidato-nome { font-size: 15px; font-weight: 600; line-height: 1.2; }
.candidato-pct { grid-row: span 2; align-self: center; font-size: 28px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.candidato-ficha { align-self: start; margin-top: 2px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.candidato-ficha code { color: var(--cor); font: 400 12px/1 var(--mono); }

/* A corrida: cada candidato cresce do seu lado; a marca do meio é a maioria. */
.corrida {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 8px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--sem-votos);
}

.corrida-barra { height: 100%; background: var(--cor); }

.corrida-meio {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: 50%;
  width: 1px;
  background: var(--ink);
}

.corrida-texto { color: var(--muted); font-size: 13px; }
.corrida-texto strong { color: var(--ink); }

.amostra {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 2px;
  vertical-align: -1px;
}

/* ---------- Onde cada um foi mais forte ---------- */

.destaques { display: grid; gap: 20px; }
.destaque h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.destaques-vazio { color: var(--muted); font-size: 13px; }

.destaque a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  padding: 8px 0 9px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.destaque li:last-child a { border-bottom: 1px solid var(--line); }
.destaque-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.destaque-votos { grid-row: 2; color: var(--muted); font-size: 12px; }
.destaque b { grid-row: span 2; align-self: center; font-weight: 500; }

/* Barra fina na base da linha, do tamanho do percentual. */
.destaque a i { position: absolute; bottom: -1px; left: 0; height: 1px; background: var(--cor); }

.destaque a:hover .destaque-nome,
.destaque a[aria-current] .destaque-nome { color: var(--accent); }

/* ---------- Mapa ---------- */

/* A câmera: o zoom é só uma transformação da cena, então tudo se move junto. A transição
   vale só nos movimentos automáticos; sob o dedo a cena acompanha na hora. */
#mapa.movendo .cena { transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1); }

#mapa .base path,
#mapa .detalhe path:not(.bordas-municipios) {
  outline: none;
  cursor: pointer;
  transition: fill 600ms, fill-opacity 600ms, opacity 600ms;
}

/* Com um estado aberto, os vizinhos recuam mas continuam reconhecíveis e clicáveis:
   fronteiras em cinza visível, sigla no centro e o estado aberto contornado em claro. */
#mapa.em-estado .base path:not(.atual) { opacity: 0.5; }
#mapa.em-estado .bordas-estados { stroke: #4a4a55; }
#mapa .contorno-atual { stroke: #c9c9cf; stroke-width: 1.5; }

#mapa .rotulos { pointer-events: none; transition: opacity 300ms; }

#mapa .rotulos text {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: rgb(11 11 13 / 0.75);
  stroke-width: 3px;
  opacity: 0.75;
}

#mapa .rotulos .cidade text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-anchor: start;
  opacity: 1;
}

#mapa .rotulos .cidade circle { fill: var(--ink); stroke: var(--palco); stroke-width: 1.5; }

#mapa.movendo .rotulos, #mapa.no-exterior .rotulos { opacity: 0; }

/* Os municípios só aparecem depois que a câmera para. */
#mapa .detalhe { transition: opacity 450ms; }
#mapa .detalhe.escondido,
#mapa .detalhe.saindo { opacity: 0; pointer-events: none; }
#mapa .detalhe.saindo { transition-duration: 200ms; }

/* Fronteiras desenhadas uma vez só, na cor do fundo, com espessura fixa em qualquer zoom. */
#mapa .bordas-estados,
#mapa .contorno-atual,
#mapa .bordas-municipios,
#mapa .realce,
#mapa .selecao {
  fill: none;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Os outros países: só contexto, sem interação. Perto do Brasil ficam discretos;
   na vista do exterior ganham contraste, para os pontos caírem sobre terra reconhecível. */
#mapa .paises { fill: #141418; pointer-events: none; transition: fill 600ms; }
#mapa .bordas-paises { fill: none; stroke: var(--palco); stroke-width: 0.75; vector-effect: non-scaling-stroke; pointer-events: none; transition: stroke 600ms; }
#mapa .silhueta { fill: var(--palco); pointer-events: none; }
#mapa.no-exterior .paises { fill: #26262e; }
#mapa.no-exterior .bordas-paises { stroke: #4a4a55; stroke-width: 0.6; }

/* Cidades do exterior. */
#mapa .pontos { pointer-events: none; transition: opacity 300ms; }
#mapa .pontos circle { stroke: #c9c9cf; stroke-width: 1.25; transition: r 150ms; }
#mapa .pontos circle.sob-ponteiro { r: 8; stroke: var(--ink); }
#mapa .pontos circle.selecionado { stroke: var(--ink); stroke-width: 2; r: 7; }
#mapa.movendo .pontos { opacity: 0; }

#mapa .bordas-estados { stroke: var(--palco); stroke-width: 1.25; }
#mapa .bordas-municipios { stroke: var(--palco); stroke-width: 0.5; stroke-opacity: 0.85; }
#mapa .realce { stroke: var(--ink); stroke-width: 1.5; }
#mapa .selecao { stroke: var(--ink); stroke-width: 2.5; }
#mapa.movendo .realce { display: none; }

/* As fronteiras são o que mais pesa para redesenhar a cada quadro: somem durante o
   movimento da câmera e voltam num instante quando ela para. */
#mapa.movendo :is(.bordas-estados, .bordas-paises, .bordas-municipios) { visibility: hidden; }
#mapa :is(.bordas-estados, .bordas-paises, .bordas-municipios) { animation: reaparecer 200ms; }

@keyframes reaparecer { from { opacity: 0; } }

/* Arrastar e pinçar movem o mapa em qualquer vista; a página rola fora dele. */
#mapa { touch-action: none; cursor: grab; }
#mapa:active { cursor: grabbing; }

#mapa .marcas { pointer-events: none; transition: opacity 300ms; }
#mapa.movendo .marcas { opacity: 0; transition: none; }
#mapa line { stroke-linecap: round; }

/* Dica que segue o ponteiro. */
.dica {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  display: grid;
  gap: 4px;
  min-width: 200px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  font-size: 14px;
  pointer-events: none;
}

.dica small { color: var(--muted); font-size: 13px; }
.dica p { display: flex; align-items: center; gap: 8px; }
.dica p b { margin-left: auto; }

/* ---------- Seções abaixo do palco ---------- */

/* Rótulo nas colunas 1–3 (de /style.css), conteúdo a partir da 4. */
.estados, .noite, .sobre { grid-column: 4 / 13; }

/* ---------- Estados ---------- */

.mosaico {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 80px));
  grid-auto-rows: 76px;
  gap: 4px;
  margin-top: 32px;
}

.ladrilho {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  overflow: hidden;
  border-radius: 4px;
  font-size: 13px;
  transition: background 600ms, transform 300ms var(--ease-out);
}

.ladrilho b { font-size: 15px; }

.ladrilho i {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--ink);
  opacity: 0.6;
}

.ladrilho:hover { transform: scale(1.04); }
.ladrilho:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.tabela { margin-top: 40px; }

.tabela summary {
  width: max-content;
  color: var(--accent);
  font-size: 15px;
  cursor: pointer;
}

.tabela-rolagem { margin-top: 16px; overflow-x: auto; }

.tabela table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabela th, .tabela td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

.tabela th:first-child { text-align: left; font-weight: 450; }
.tabela thead th { color: var(--muted); font-weight: 450; }
.tabela a:hover { color: var(--accent); }

/* ---------- A noite ---------- */

#noite { margin-top: 32px; }
#noite svg { display: block; width: 100%; height: auto; overflow: visible; }
#noite figcaption, .noite-leitura { margin-top: 8px; color: var(--muted); font-size: 14px; }
.noite-leitura { min-height: 1.45em; color: var(--ink); }
.noite-vazia { color: var(--muted); }

.noite-linha { fill: none; stroke-width: 2; stroke-linejoin: round; }
.noite-meio { stroke: var(--line); stroke-dasharray: 4 4; }
.noite-cursor { stroke: var(--muted); }
.noite-alvo { fill: transparent; }
.eixo { fill: var(--muted); font-size: 13px; }
.noite-rotulo { fill: var(--ink); font-size: 14px; font-weight: 600; }

/* ---------- Sobre os dados ---------- */

.sobre { display: grid; gap: 16px; max-width: 64ch; color: var(--muted); }
.sobre a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Responsivo ---------- */

@media (max-width: 1180px) {
  .palco { grid-template-columns: 260px minmax(0, 1fr) 330px; }
}

/* No celular o palco vira uma coluna: cabeçalho e seletores, mapa, placar e o resto. */
@media (max-width: 900px) {
  .palco {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: auto;
    min-height: 0;
    padding: 16px var(--gutter) 24px;
  }

  .painel { padding: 0; overflow: visible; }
  .painel-controles { display: contents; }
  .painel-placar { order: 6; border-left: 0; }
  .painel-titulo { font-size: 22px; }
  .status, .aviso-simulacao { font-size: 13px; }

  .painel-cabeca { order: 1; }
  #turnos { order: 2; }
  #abas { order: 3; }
  .trilha { order: 4; padding-top: 0; border-top: 0; }
  .moldura { order: 5; height: 62svh; min-height: 360px; margin-inline: calc(-1 * var(--gutter)); }
  #modos { order: 7; }
  .busca { order: 8; }
  #regioes { order: 9; }
  .legenda { order: 10; }

  .estados, .noite, .sobre { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .mosaico { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 64px; }
  .ladrilho { padding: 6px; font-size: 11px; }
  .ladrilho b { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .ao-vivo::before { animation: none; }
  #mapa.movendo .cena { transition: none; }
}

/* A primeira seção depois do palco não precisa do respiro inteiro entre blocos. */
.block.primeira { margin-top: clamp(64px, 8vw, 112px); }