/* Cadê o eleito? — folha de estilo
   Tema escuro em tons de cinza, azul e neutros. Cada página tem a sua cor de destaque
   (ver "temas por página"). Paleta dos gráficos: paleta de referência validada para o
   fundo escuro (CVD e contraste).
   Tipografia editorial (opção 2 da página Typography): Newsreader, serifa de jornal, nos títulos e
   nomes (peso 600, sem espaçamento negativo); Inter no texto, nos controles e nos números
   (tabulares, alinhados). As duas ficam em public/fonts (licença OFL, sem CDN: a CSP só permite
   fontes do próprio site). As outras opções de comparação estão em css/tipografia.css. */

@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/newsreader-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --fundo: #0c0e12;
  --superficie: #15181d;
  --superficie-2: #1b1f25;
  --superficie-3: #232831;
  --borda: #2a2f37;
  --borda-forte: #3a414c;
  --texto: #eef1f5;
  --texto-2: #b6bdc8;
  --texto-3: #8a93a0;
  --topo: #0f1216;
  --vidro: rgba(255, 255, 255, .07);       /* realces translúcidos sobre o fundo */
  --vidro-forte: rgba(255, 255, 255, .14);
  /* cores do logo (lupa: --logo-1, alfinete: --logo-2) */
  --logo-1: #3b82f6;
  --logo-2: #d5dbe3;
  --azul: #8ab4f8;
  --foco: #5b9cf0;
  --erro: #ff8a8a;
  --erro-fundo: #2a1719;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .45);
  --sombra-2: 0 12px 30px -12px rgba(0, 0, 0, .7);
  --raio: 8px;
  --raio-p: 6px;
  /* Destaque da página (padrão: Resultados, azul). */
  --acento: #2563eb;          /* preenchimentos (botões, números) */
  --acento-tinta: #ffffff;    /* texto sobre --acento */
  --acento-texto: #8ab4f8;    /* texto e detalhes em destaque sobre o fundo escuro */
  --acento-fundo: color-mix(in srgb, var(--acento) 16%, var(--superficie));
  --heroi-a: #0e1626;
  --heroi-b: #15294d;
  --heroi-brilho: rgba(59, 130, 246, .35);
  /* séries (valores do tema escuro da paleta validada) */
  --s1: #3987e5;
  --s1-forte: #6da7ec;
  --s-sem: #24282e;
  /* Densidade de votos no mapa: escala sequencial de UMA cor, a do partido do candidato
     (--partido, definida pelo mapa; js/partidos.js). Os 9 degraus têm a mesma matiz e
     luminosidade fixa (oklch): o salto entre degraus é igual para qualquer partido. No escuro a
     cor mais fraca se aproxima do fundo e a mais forte é a mais clara; no claro, o contrário.
     --l = luminosidade, --c = fração da saturação do partido em cada degrau. */
  --partido: #2a78d6;
  --l1: .36; --l2: .42; --l3: .48; --l4: .55; --l5: .62; --l6: .69; --l7: .76; --l8: .83; --l9: .9;
  --c1: .75; --c2: .85; --c3: .95; --c4: 1; --c5: 1; --c6: .9; --c7: .75; --c8: .6; --c9: .45;
  --s-nd: #4b515b;   /* sem dados (área sem votação publicada) */
  --grade: #252a31;
  --serifa: "Newsreader", Georgia, "Times New Roman", serif;
  --fonte: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- tema claro
   Ativado pelo botão do topo (html[data-tema="claro"]); a escolha fica salva no navegador. */

:root[data-tema="claro"] {
  color-scheme: light;
  --fundo: #f3f5f8;
  --superficie: #ffffff;
  --superficie-2: #f7f8fa;
  --superficie-3: #eceff3;
  --borda: #e1e5eb;
  --borda-forte: #cbd2db;
  --texto: #0f141a;
  --texto-2: #46505c;
  --texto-3: #5b6470;   /* ≥ 4,5:1 também sobre --superficie-3 (WCAG AA) */
  --topo: #ffffff;
  --vidro: rgba(15, 20, 26, .05);
  --vidro-forte: rgba(15, 20, 26, .08);
  --logo-1: #1d4ed8;
  --logo-2: #1f2937;
  --azul: #1d4ed8;
  --foco: #2a78d6;
  --erro: #b42323;
  --erro-fundo: #fdf0f0;
  --sombra-1: 0 1px 2px rgba(15, 20, 26, .06), 0 1px 1px rgba(15, 20, 26, .04);
  --sombra-2: 0 10px 30px -12px rgba(15, 20, 26, .18), 0 2px 6px rgba(15, 20, 26, .05);
  --acento: #2563eb;
  --acento-tinta: #ffffff;
  --acento-texto: #1d4ed8;
  --heroi-a: #edf2fb;
  --heroi-b: #d6e2f7;
  --heroi-brilho: rgba(37, 99, 235, .16);
  /* séries (valores do tema claro da paleta validada) */
  --s1: #2a78d6;
  --s1-forte: #1c5cab;
  --s-sem: #e8ebef;
  --l1: .95; --l2: .88; --l3: .81; --l4: .73; --l5: .65; --l6: .57; --l7: .49; --l8: .41; --l9: .33;
  --c1: .25; --c2: .4; --c3: .55; --c4: .7; --c5: .85; --c6: 1; --c7: 1; --c8: .95; --c9: .85;
  --s-nd: #b9bfc8;
  --grade: #e6e9ee;
}
:root[data-tema="claro"] body[data-pagina="mapa"] {
  --acento: #57534e; --acento-tinta: #ffffff; --acento-texto: #57534e;
  --heroi-a: #f4f2ef; --heroi-b: #e4dfd8; --heroi-brilho: rgba(87, 83, 78, .10);
}
:root[data-tema="claro"] body[data-pagina="sobre"] {
  --acento: #3b5fa8; --acento-tinta: #ffffff; --acento-texto: #2f4f8f;
  --heroi-a: #eef2f8; --heroi-b: #d9e2ee; --heroi-brilho: rgba(59, 95, 168, .14);
}

/* ---------------------------------------------------------------- temas por página */

/* Mapa: neutros (pedra), sem competir com a escala azul de densidade. */
body[data-pagina="mapa"] {
  --acento: #d6d0c8;
  --acento-tinta: #16130f;
  --acento-texto: #ddd6cd;
  --heroi-a: #15130f;
  --heroi-b: #2c2822;
  --heroi-brilho: rgba(214, 208, 200, .14);
}
/* Sobre: azul-ardósia. */
body[data-pagina="sobre"] {
  --acento: #5b8def;
  --acento-tinta: #0c0e12;
  --acento-texto: #a9c4f5;
  --heroi-a: #10141b;
  --heroi-b: #1e2a3b;
  --heroi-brilho: rgba(91, 141, 239, .22);
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 var(--fonte);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3 { margin: 0; font-family: var(--serifa); font-weight: 600; letter-spacing: 0; line-height: 1.15; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; }
p { margin: 0; }
a { color: var(--azul); }
code { font-size: .88em; background: var(--superficie-3); padding: .1em .35em; border-radius: 5px; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icone { width: 18px; height: 18px; flex: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pular {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--superficie); color: var(--texto); padding: 10px 14px; border-radius: 10px; box-shadow: var(--sombra-2);
}
.pular:focus { top: 12px; }

/* ---------------------------------------------------------------- topo */

.topo {
  position: sticky; top: 0; z-index: 30;
  /* Fundo sólido: desfoque (backdrop-filter) por trás do topo fixo custa caro ao rolar sobre o mapa. */
  background: var(--topo);
  color: var(--texto);
  border-bottom: 1px solid var(--borda);
}
.topo-interno, .heroi-interno, .principal, .rodape-interno { width: min(1240px, 100% - 40px); margin-inline: auto; }
.topo-interno { display: flex; align-items: center; gap: 24px; height: 64px; }
.navegacao { margin-left: auto; display: flex; gap: 6px; align-self: stretch; }
/* Seções como num jornal: caixa-alta pequena, a atual sublinhada na cor da página. */
.navegacao a {
  display: flex; align-items: center; color: var(--texto-2); text-decoration: none;
  font-weight: 650; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 0 12px; border-bottom: 3px solid transparent; border-top: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.navegacao a:hover { color: var(--texto); border-bottom-color: var(--borda-forte); }
/* Botão de tema (claro/escuro): mostra o ícone do tema para o qual vai mudar. */
.tema-botao {
  display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--vidro); color: var(--texto-2);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.tema-botao:hover { color: var(--texto); border-color: var(--borda-forte); background: var(--vidro-forte); }
.tema-botao .icone { width: 18px; height: 18px; }
.tema-botao .icone-sol { display: none; }
:root[data-tema="claro"] .tema-botao .icone-sol { display: block; }
:root[data-tema="claro"] .tema-botao .icone-lua { display: none; }
.navegacao a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--acento-texto); }

.heroi {
  background:
    radial-gradient(900px 320px at 85% -40%, var(--heroi-brilho), transparent 62%),
    radial-gradient(700px 260px at 0% 120%, rgba(255, 255, 255, .04), transparent 60%),
    linear-gradient(180deg, var(--heroi-a), var(--heroi-b));
  color: var(--texto);
  padding: 30px 0 92px;
  transition: background .3s;
}
/* Chapéu entre dois fios, título em serifa grande, linha fina e a linha de edição. */
.heroi-sobre {
  display: flex; align-items: center; gap: 14px; max-width: 420px; margin: 0 auto 10px;
  font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--acento-texto);
}
.heroi-sobre::before, .heroi-sobre::after { content: ""; flex: 1; border-top: 1px solid currentColor; opacity: .5; }
.heroi-interno { text-align: center; }
.heroi h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1.05; }
/* Título com o logo "lupa no mapa" logo depois do texto; as cores seguem o tema. */
.titulo-marca { display: inline-flex; align-items: center; gap: .28em; }
.titulo-logo { width: 1.1em; height: 1.1em; flex: none; }
.titulo-logo .lg-s1 { fill: none; stroke: var(--logo-1); }
.titulo-logo .lg-f2 { fill: var(--logo-2); }
.heroi-lema { margin: 12px auto 0; max-width: 640px; color: var(--texto-2); font-family: var(--serifa); font-size: 1.22rem; line-height: 1.4; }
/* Página inicial (só a busca): ilustração em traço dos cartões-postais do Brasil atrás da busca,
   que fica um pouco mais abaixo. As linhas se desenham (stroke-dashoffset, com pathLength="1" em
   cada traço) e se redesenham a cada 1 minuto (o ciclo da animação tem 60 s: ~2,4 s desenhando e
   o resto parado); o bondinho sobe e desce o cabo e os passarinhos planam devagar. */
.heroi { position: relative; overflow: hidden; }
.heroi-interno { position: relative; z-index: 1; }
.heroi-arte {
  display: none; position: absolute; left: 50%; bottom: 0; width: min(1240px, 100%); height: auto;
  transform: translateX(-50%); pointer-events: none; color: var(--acento-texto); opacity: .42;
}
body[data-pagina="resultados"]:has(.filtros-so-busca) .heroi { padding-bottom: 196px; }
body[data-pagina="resultados"]:has(.filtros-so-busca) .heroi-arte { display: block; }
/* A caixa de busca fica com o meio exatamente na divisa entre o fundo da ilustração e o da página:
   começa na divisa (margem 0) e sobe metade da própria altura. */
body[data-pagina="resultados"]:has(.filtros-so-busca) .principal { margin-top: 0; }
body[data-pagina="resultados"] .filtros.filtros-so-busca { transform: translateY(-50%); }
.heroi-arte .traco {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; animation: tracar 60s linear infinite backwards;
}
.heroi-arte g:nth-of-type(2) .traco { animation-delay: .25s; }
.heroi-arte g:nth-of-type(3) .traco { animation-delay: .5s; }
.heroi-arte g:nth-of-type(4) .traco { animation-delay: .75s; }
.heroi-arte g:nth-of-type(5) .traco { animation-delay: 1s; }
.heroi-arte g:nth-of-type(6) .traco { animation-delay: 1.2s; }
.heroi-arte g:nth-of-type(8) .traco { animation-delay: 1.35s; }
.heroi-arte .ave { animation: tracar 60s linear 1.6s infinite backwards, planar 7s ease-in-out 2.8s infinite; }
@keyframes tracar {
  0% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.45, .05, .3, 1); }
  4%, 100% { stroke-dashoffset: 0; }
}
/* Bondinho: do pé do Morro da Urca ao Pão de Açúcar pelo cabo (M82 116 L190 58) e de volta. */
.heroi-arte .bondinho { animation: bondinho 16s ease-in-out 2.6s infinite; }
@keyframes bondinho {
  0%, 8% { transform: translate(0, 0); }
  46%, 54% { transform: translate(86px, -46.4px); }
  92%, 100% { transform: translate(0, 0); }
}
@keyframes planar { 50% { transform: translate(14px, -6px); } }

/* Sobre: só o título no cabeçalho. */
body[data-pagina="sobre"] .heroi-lema, body[data-pagina="mapa"] .heroi-lema { display: none; }

/* ---------------------------------------------------------------- layout */

.principal { flex: 1; margin-top: -64px; padding-bottom: 48px; position: relative; z-index: 2; outline: none; }
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-2);
}
.pagina-conteudo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; }
/* Itens de grid não devem crescer além da coluna por causa de tabelas largas. */
.pagina-conteudo > *, .filtros > *, .filtros-linha > *, .mapa-layout > * { min-width: 0; }
.cartao-topo { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cartao-topo > :first-child { margin-right: auto; }
.cartao-sub { color: var(--texto-3); font-size: .86rem; margin-top: 3px; }

/* ---------------------------------------------------------------- filtros */

.filtros { padding: 18px 20px 14px; display: grid; gap: 14px; }
.filtros-linha { display: grid; gap: 12px; }
.filtros-principal { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.filtros-cascata { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.filtros-rodape { display: flex; align-items: center; gap: 12px; justify-content: space-between; border-top: 1px dashed var(--borda); padding-top: 10px; }
.filtros-dica { color: var(--texto-3); font-size: .8rem; }
.filtros-busca { display: flex; gap: 10px; align-items: center; min-width: 0; }
/* Sem candidato escolhido: só a busca por nome ou número, numa caixa centralizada do tamanho
   do maior nome de urna + número (~36 caracteres). Turno e cascata aparecem depois da escolha. */
.filtros.filtros-so-busca { max-width: 560px; margin-inline: auto; }
.filtros-so-busca .filtros-principal { grid-template-columns: minmax(0, 1fr); }
.filtros-so-busca .filtros-principal > .campo, .filtros-so-busca .filtros-cascata, .filtros-so-busca .filtros-rodape, .filtros-so-busca .filtros-comparar { display: none; }
/* Comparação: botão "Comparar", a 2ª busca e o chip do 2º candidato, numa linha abaixo da busca. */
.filtros-comparar { gap: 6px; }
.filtros-comparar .combo { max-width: 560px; }
.filtros-comparar .controle-busca { height: 42px; font-size: .95rem; }
.filtros-comparar .combo-icone { top: 9px; }
.botao-comparar { border-style: dashed; color: var(--texto-2); }
.botao-comparar:hover { color: var(--texto); }
.botao-comparar-mais { font-size: 1.15rem; font-weight: 700; line-height: 1; }
/* Chip com a cor do candidato na comparação (a mesma dos cartões e do mapa). */
.cand-chip.com-cor { border-left: 5px solid var(--lado); }

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo-rotulo { font-size: .74rem; font-weight: 650; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; }
.controle {
  width: 100%; height: 42px;
  background: var(--superficie-2); color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-p);
  padding: 0 12px; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
select.controle {
  appearance: none; padding-right: 34px; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%), linear-gradient(135deg, var(--texto-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.controle:hover:not(:disabled) { border-color: var(--texto-3); }
.controle:focus { border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 22%, transparent); background-color: var(--superficie); }
.controle:disabled { opacity: .55; cursor: not-allowed; }
.controle-pequeno { height: 36px; max-width: 280px; font-size: .88rem; }

.combo { position: relative; flex: 1; min-width: 0; }
.combo-icone { position: absolute; left: 13px; top: 12px; color: var(--texto-3); pointer-events: none; }
.controle-busca { padding-left: 40px; height: 48px; font-size: 1.02rem; border-radius: var(--raio-p); }
.combo-lista {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none; max-height: 360px; overflow: auto;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-2);
}
.combo-item { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.combo-item:hover, .combo-item[aria-selected="true"] { background: var(--superficie-3); }
.combo-num {
  min-width: 52px; text-align: center; font-weight: 750; font-variant-numeric: tabular-nums;
  background: var(--acento-fundo); color: var(--acento-texto); border-radius: 7px; padding: 3px 6px; font-size: .88rem;
}
.combo-texto { display: flex; flex-direction: column; min-width: 0; }
.combo-texto strong { font-weight: 650; }
.combo-texto small { color: var(--texto-3); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-vazio { padding: 10px; color: var(--texto-3); }

.cand-chip {
  display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 6px;
  background: var(--acento-fundo); border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent); border-radius: var(--raio);
  max-width: 320px; min-width: 0;
}
.cand-chip-num { background: var(--acento); color: var(--acento-tinta); font-weight: 750; border-radius: 8px; padding: 5px 8px; font-variant-numeric: tabular-nums; }
.cand-chip-texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.cand-chip-texto strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92rem; }
.cand-chip-texto small { color: var(--texto-3); font-size: .76rem; }
.botao-icone { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: var(--texto-2); }
.botao-icone:hover { background: var(--vidro-forte); }

.segmentado { display: inline-flex; background: var(--superficie-3); border-radius: var(--raio-p); padding: 3px; height: 42px; }
.segmento {
  border: 0; background: transparent; padding: 0 16px; border-radius: 4px; font-weight: 650; color: var(--texto-2); cursor: pointer;
  transition: background .15s, color .15s;
}
.segmento[aria-checked="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }
.segmento:disabled { opacity: .4; cursor: not-allowed; }

.botao-texto { background: none; border: 0; color: var(--azul); font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.botao-texto:disabled { color: var(--texto-3); cursor: default; opacity: .6; }
.botao-secundario, .botao-primario {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 14px; border-radius: var(--raio-p); font-weight: 650; cursor: pointer; text-decoration: none; font-size: .9rem;
}
.botao-secundario { background: var(--superficie-2); border: 1px solid var(--borda-forte); color: var(--texto); }
.botao-secundario:hover { background: var(--superficie-3); }
.botao-primario { background: var(--acento); color: var(--acento-tinta); border: 0; }
.botao-primario:hover { filter: brightness(1.08); }

/* ---------------------------------------------------------------- recorte */

.recorte { display: grid; gap: 8px; padding: 4px 2px; }
.recorte-titulo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Chapéu (kicker): caixa-alta na cor da página, com um fio curto antes. */
.etiqueta {
  display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acento-texto); width: fit-content;
}
.etiqueta::before { content: ""; width: 18px; border-top: 2px solid currentColor; }
.migalhas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; color: var(--texto-2); font-size: .92rem; }
.migalhas li + li::before { content: "›"; margin: 0 6px 0 2px; color: var(--texto-3); }
.migalhas li:last-child { color: var(--texto); font-weight: 650; }
.recorte-sub { color: var(--texto-3); font-size: .88rem; }

/* Selo "Eleito": cor de status (verde) sempre acompanhada do texto, nunca só a cor. */
.selo-eleito {
  display: inline-block; align-self: flex-start; margin: 2px 0; padding: 1px 8px; border-radius: 999px;
  font-size: .68rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; line-height: 1.6;
  background: rgba(34, 197, 94, .16); color: #6ee7a0; border: 1px solid rgba(34, 197, 94, .35);
}
:root[data-tema="claro"] .selo-eleito { background: #dcfce7; color: #166534; border-color: #86efac; }
h3 .selo-eleito { vertical-align: middle; margin-left: 10px; }


/* ---------------------------------------------------------------- cartão do candidato
   Pensado para print e compartilhamento: marca, candidato, recorte (onde) e números. */

.cartao-social {
  display: grid; gap: 18px; padding: 26px 28px; border-radius: var(--raio);
  width: 100%; max-width: 760px; margin-inline: auto; color: var(--texto);
  background:
    radial-gradient(600px 240px at 90% -20%, var(--heroi-brilho), transparent 60%),
    linear-gradient(135deg, var(--heroi-a), var(--heroi-b));
  border: 1px solid var(--borda-forte); border-top: 4px solid var(--acento-texto); box-shadow: var(--sombra-2);
}
.social-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--borda-forte); }
.social-marca { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serifa); font-weight: 600; font-size: 1.25rem; }
.social-logo { width: 28px; height: 28px; flex: none; }
.social-logo .lg-s1 { fill: none; stroke: var(--logo-1); }
.social-logo .lg-f2 { fill: var(--logo-2); }
.social-eleicao { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acento-texto); }
.social-cand { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.destaque-num { font-size: 1.6rem; font-weight: 700; background: var(--vidro-forte); border-radius: var(--raio-p); padding: 12px 16px; font-variant-numeric: tabular-nums; }
.destaque-sobre { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); font-weight: 650; }
.social-nome h3 { font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.05; margin: 4px 0; overflow-wrap: anywhere; }
.social-nome p { color: var(--texto-2); font-size: .9rem; }
.social-local { display: flex; gap: 10px; align-items: flex-start; border-left: 3px solid var(--acento-texto); padding: 4px 0 4px 14px; }
.social-local > .icone { color: var(--acento-texto); margin-top: 2px; flex: none; }
.social-local > div { display: grid; gap: 2px; min-width: 0; }
.social-rotulo { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.social-local strong { font-family: var(--serifa); font-size: 1.2rem; font-weight: 600; overflow-wrap: anywhere; }
.social-local small { color: var(--texto-2); font-size: .82rem; }
/* Números em destaque como num infográfico de jornal: fio em cima, número grande, legenda curta. */
.social-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 22px; }
.social-metrica { border-top: 2px solid var(--texto); padding: 10px 0 2px; display: grid; gap: 2px; align-content: start; }
.social-metrica strong { font-size: 1.8rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.social-metrica span { font-size: .78rem; color: var(--texto-2); }
.social-fonte { font-size: .74rem; color: var(--texto-2); padding-top: 10px; border-top: 1px solid var(--borda-forte); }
.compartilhar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; width: 100%; max-width: 760px; margin-inline: auto; }
/* Comparação: dois cartões lado a lado (um embaixo do outro em telas estreitas). O fio de cima de
   cada cartão tem a cor do candidato no mapa do duelo. */
.comparacao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.comparacao-item { display: grid; gap: 12px; min-width: 0; align-content: start; }
.comparacao-item .cartao-social { max-width: none; border-top: 6px solid var(--lado); padding: 22px 22px; }
.comparacao .social-nome h3 { font-size: clamp(1.4rem, 2.3vw, 1.9rem); }
.comparacao .social-cand { gap: 12px; }
.comparacao .destaque-num { font-size: 1.3rem; padding: 10px 12px; }
.comparacao-nota { display: flex; margin: 0; gap: 8px; align-items: flex-start; font-size: .84rem; color: var(--texto-2); background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 8px 12px; }
.comparacao-nota .icone { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--acento-texto); }
.comparacao-resumo { text-align: center; font-size: .95rem; color: var(--texto-2); }
.comparacao-resumo strong { color: var(--texto); }
@media (max-width: 900px) { .comparacao { grid-template-columns: minmax(0, 1fr); } }
.compartilhar-titulo { font-weight: 650; color: var(--texto-2); font-size: .9rem; }
.compartilhar-aviso { flex-basis: 100%; text-align: center; font-size: .84rem; color: var(--acento-texto); min-height: 1.3em; }
.compartilhar .icone { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- tabela */

section.cartao { padding: 18px 20px; }
.tabela-rolagem { overflow-x: auto; margin: 0 -6px; }
.tabela-alta { max-height: 380px; overflow-y: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .93rem; font-variant-numeric: tabular-nums; }
.tabela th {
  text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); font-weight: 650;
  padding: 8px 10px; border-bottom: 2px solid var(--texto); position: sticky; top: 0; background: var(--superficie);
}
.tabela th.num { text-align: right; }
.tabela td { padding: 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.vazio { padding: 28px; text-align: center; color: var(--texto-3); }

/* ---------------------------------------------------------------- avisos e carregamento */

.aviso {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra-1);
}
.aviso > .icone { margin-top: 2px; color: var(--texto-3); }
.aviso strong { display: block; margin-bottom: 2px; }
.aviso p { color: var(--texto-2); }
.aviso-erro { background: var(--erro-fundo); border-color: color-mix(in srgb, var(--erro) 30%, transparent); }
.aviso-erro > .icone { color: var(--erro); }
.aviso-corpo { display: grid; gap: 8px; flex: 1; }
.aviso-corpo small { color: var(--texto-3); }
.aviso-corpo .botao-secundario { width: fit-content; }

.esqueleto { display: grid; gap: 12px; padding: 18px 20px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.esqueleto-linha {
  height: 16px; border-radius: 8px;
  background: linear-gradient(90deg, var(--superficie-3), var(--superficie-2), var(--superficie-3));
  background-size: 200% 100%; animation: brilho 1.3s linear infinite;
}
@keyframes brilho { to { background-position: -200% 0; } }

.fonte { display: flex; gap: 8px; align-items: flex-start; color: var(--texto-3); font-size: .8rem; line-height: 1.5; padding: 0 2px; }
.fonte .icone { width: 15px; height: 15px; margin-top: 2px; }


.tabela-dados summary { cursor: pointer; color: var(--azul); font-weight: 600; font-size: .86rem; width: fit-content; padding: 2px 0; }
.tabela-dados table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .88rem; font-variant-numeric: tabular-nums; }
.tabela-dados th, .tabela-dados td { padding: 6px 8px; border-bottom: 1px solid var(--borda); text-align: left; }
.tabela-dados th { border-bottom: 2px solid var(--texto); color: var(--texto-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.tabela-dados .num { text-align: right; }

/* Tooltip em cartão na cor da superfície: as cores das séries mantêm o contraste validado. */
/* position: fixed + transform: mover o tooltip não recalcula o layout da página. */
.tooltip {
  position: fixed; left: 0; top: 0; will-change: transform; z-index: 60; pointer-events: none; display: grid; gap: 2px;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borda-forte);
  border-radius: 10px; padding: 9px 12px; font-size: .82rem; max-width: 320px; font-variant-numeric: tabular-nums;
  box-shadow: var(--sombra-2);
}
.tooltip strong { font-size: .88rem; }
.tooltip > span { color: var(--texto-2); }
.tt-dens { display: grid; gap: 2px; }
.tt-dens > span { color: var(--texto-2); font-size: .84rem; }
.tt-dens .tt-pct { color: var(--texto); font-weight: 800; }
.tt-detalhe { font-size: .78rem !important; }


/* ---------------------------------------------------------------- mapa */

.mapa-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.mapa-layout.sem-painel { grid-template-columns: minmax(0, 1fr); }
/* Mapa "quem venceu": atalhos de cargo e os 3 mais votados do município. */
.chips-cargo { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-cargo {
  border: 1px solid var(--borda-forte); background: transparent; color: var(--texto-2); border-radius: 999px;
  padding: 6px 12px; font-size: .84rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.chip-cargo:hover { color: var(--texto); border-color: var(--texto-3); }
.chip-cargo[aria-checked="true"] { background: var(--texto); border-color: var(--texto); color: var(--superficie); }
.painel-ranking { display: grid; gap: 6px; }
/* Até ~10 linhas visíveis; "Ver mais" acrescenta linhas dentro desta caixa, que rola. */
.ranking-rolagem { max-height: 560px; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.tabela-ranking td { vertical-align: middle; }
.ranking-pos { color: var(--texto-3); font-weight: 700; width: 2.6em; }
.ranking-cand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ranking-foto { width: 32px; height: 42px; border-radius: 6px; flex: none; object-fit: cover; object-position: center 20%; background: var(--superficie-3); font-size: .72rem; }
.ranking-texto { display: grid; gap: 1px; min-width: 0; }
.ranking-texto small { color: var(--texto-3); font-size: .76rem; display: flex; align-items: center; gap: 5px; }
.ranking-nome { background: none; border: 0; padding: 0; text-align: left; color: var(--texto); font-weight: 650; cursor: pointer; text-decoration: underline; text-decoration-color: var(--borda-forte); text-underline-offset: 3px; }
.ranking-nome:hover { text-decoration-color: currentColor; }
.ranking-mais {
  justify-self: center; margin-top: 4px; padding: 6px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--acento-texto) 45%, transparent); background: var(--acento-fundo);
  color: var(--acento-texto); font-weight: 700; font-size: .84rem;
}
.ranking-mais:hover { border-color: var(--acento-texto); }
.legenda-partidos { gap: 6px 14px; }
.legenda-partidos li { font-size: .8rem; color: var(--texto-2); }
.tt-dens .cor-partido { margin-right: 2px; }
.recorte-sub:empty { display: none; }
.mapa-cartao h2 { font-size: 1.55rem; }
.mapa-area { min-height: 320px; display: grid; place-items: center; }
/* Carregando o mapa: ocupa a área toda, com um anel girando e o nome do lugar. */
.mapa-carregando {
  width: 100%; min-height: 420px; display: grid; place-content: center; justify-items: center; gap: 14px;
  color: var(--texto-3); font-size: .9rem; border-radius: var(--raio-p);
  background: repeating-linear-gradient(135deg, transparent 0 14px, var(--vidro) 14px 15px);
}
.mapa-carregando-giro {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--borda-forte); border-top-color: var(--acento-texto);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .mapa-carregando { min-height: 260px; } }
.mapa-svg { width: 100%; height: auto; max-height: 640px; display: block; }
/* Pilha: o mapa colorido numa camada própria (pintada uma vez) e o destaque num SVG por cima,
   do mesmo tamanho e viewBox. Passar o mouse só repinta a camada de cima. */
.mapa-pilha { position: relative; width: 100%; }
.mapa-pilha > .mapa-svg { will-change: transform; }
.mapa-topo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mapa-pilha-municipio > .mapa-svg { cursor: pointer; }
/* Zoom (roda, arrastar, pinça): sem zoom o toque rola a página; com zoom, um dedo move o mapa. */
.mapa-pilha { touch-action: pan-x pan-y; }
.mapa-pilha.ampliado { overflow: hidden; touch-action: none; }
.mapa-pilha.ampliado > .mapa-svg { cursor: grab; }
.mapa-pilha.ampliado > .mapa-svg:active { cursor: grabbing; }
.mapa-zoom {
  position: absolute; top: 8px; right: 8px; z-index: 2; display: grid;
  background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio-p); box-shadow: var(--sombra-1); overflow: hidden;
}
.mapa-zoom-botao {
  width: 34px; height: 34px; border: 0; background: transparent; color: var(--texto); font-size: 1.15rem; font-weight: 600; line-height: 1; cursor: pointer;
}
.mapa-zoom-botao + .mapa-zoom-botao { border-top: 1px solid var(--borda); }
.mapa-zoom-botao:hover:not(:disabled) { background: var(--superficie-3); }
.mapa-zoom-botao:disabled { color: var(--texto-3); cursor: default; }
.mapa-dica { font-size: .78rem; color: var(--texto-3); margin-top: 6px; }
/* Aba Mapa sem candidato: como usar o mapa, em uma linha de passos curtos logo abaixo da busca. */
.mapa-guia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 8px 22px; margin: 0; padding: 0 4px; list-style: none; font-size: .86rem; line-height: 1.4; color: var(--texto-2); }
.mapa-guia li { display: flex; align-items: baseline; gap: 8px; }
.mapa-guia b { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--acento-fundo); color: var(--acento-texto); font-size: .72rem; font-variant-numeric: tabular-nums; }
/* Desempenho: as áreas não têm hover, filtro nem transição próprios (são centenas ou milhares).
   O destaque é uma camada única por cima (.mapa-hover) e a seleção outra (.mapa-selecao). */
.mapa-regiao { stroke: var(--superficie); stroke-width: .7; vector-effect: non-scaling-stroke; cursor: pointer; }
.mapa-regiao:focus-visible { outline: none; stroke: var(--texto); stroke-width: 2; }
.mapa-hover { fill: var(--texto); fill-opacity: .14; stroke: var(--texto); stroke-width: 1.6; vector-effect: non-scaling-stroke; pointer-events: none; }
.modo-zonas .mapa-hover { stroke: none; fill-opacity: .2; }
.mapa-selecao { fill: none; stroke: var(--texto); stroke-width: 2.6; vector-effect: non-scaling-stroke; pointer-events: none; }
.mapa-neutro, .dens-0 { fill: var(--s-sem); background: var(--s-sem); }
.cor-sem { fill: var(--s-nd); background: var(--s-nd); }
/* Duelo: empate em cinza médio (nenhum dos dois lados). */
.mapa-empate { --cor-empate: color-mix(in oklab, var(--texto-3) 70%, var(--superficie)); fill: var(--cor-empate); background: var(--cor-empate); }
/* Degraus calculados no próprio elemento: --partido pode vir do mapa (candidato) ou de cada
   município (mapa "quem venceu"). Navegadores sem oklch relativo: mistura com a superfície. */
.dens-1 { --cor: color-mix(in oklab, var(--partido) 18%, var(--superficie)); }
.dens-2 { --cor: color-mix(in oklab, var(--partido) 28%, var(--superficie)); }
.dens-3 { --cor: color-mix(in oklab, var(--partido) 38%, var(--superficie)); }
.dens-4 { --cor: color-mix(in oklab, var(--partido) 48%, var(--superficie)); }
.dens-5 { --cor: color-mix(in oklab, var(--partido) 58%, var(--superficie)); }
.dens-6 { --cor: color-mix(in oklab, var(--partido) 68%, var(--superficie)); }
.dens-7 { --cor: color-mix(in oklab, var(--partido) 78%, var(--superficie)); }
.dens-8 { --cor: color-mix(in oklab, var(--partido) 88%, var(--superficie)); }
.dens-9 { --cor: var(--partido); }
@supports (color: oklch(from red l c h)) {
  .dens-1 { --cor: oklch(from var(--partido) var(--l1) calc(c * var(--c1)) h); }
  .dens-2 { --cor: oklch(from var(--partido) var(--l2) calc(c * var(--c2)) h); }
  .dens-3 { --cor: oklch(from var(--partido) var(--l3) calc(c * var(--c3)) h); }
  .dens-4 { --cor: oklch(from var(--partido) var(--l4) calc(c * var(--c4)) h); }
  .dens-5 { --cor: oklch(from var(--partido) var(--l5) calc(c * var(--c5)) h); }
  .dens-6 { --cor: oklch(from var(--partido) var(--l6) calc(c * var(--c6)) h); }
  .dens-7 { --cor: oklch(from var(--partido) var(--l7) calc(c * var(--c7)) h); }
  .dens-8 { --cor: oklch(from var(--partido) var(--l8) calc(c * var(--c8)) h); }
  .dens-9 { --cor: oklch(from var(--partido) var(--l9) calc(c * var(--c9)) h); }
}
.dens-1, .dens-2, .dens-3, .dens-4, .dens-5, .dens-6, .dens-7, .dens-8, .dens-9 { fill: var(--cor); background: var(--cor); }
/* Amostra da cor do partido (legenda e tabela do mapa "quem venceu"). */
.cor-partido { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; background: var(--partido); vertical-align: -1px; }
/* Mapa do município: áreas dos locais de votação (recortadas pelo contorno), fronteiras e números
   das zonas. No modo zonas o contorno de cada área tem a cor da própria área (some a costura). */
.mapa-municipio { max-height: 640px; }
/* Áreas agrupadas: um caminho por zona ou por cor (sem contorno: não há costura entre áreas). */
.mapa-celula { stroke: none; }
.mapa-malha { fill: none; stroke: var(--superficie); stroke-width: .5; vector-effect: non-scaling-stroke; pointer-events: none; }
.mapa-zona.apagada { opacity: .35; }
.mapa-fronteira { fill: none; stroke: var(--texto); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; opacity: .85; }
.mapa-contorno-borda { fill: none; stroke: var(--texto); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
/* --z = zoom atual: os rótulos mantêm o tamanho na tela ao aproximar. */
.mapa-rotulos.mapa-rotulos-zona text { font-size: calc(var(--fs, 15px) / var(--z, 1)); stroke-width: calc(var(--fs, 15px) * .22 / var(--z, 1)); }
.modo-mapa { height: 38px; }
.modo-mapa .segmento { font-size: .82rem; padding: 0 12px; }
.painel-bairros { display: grid; gap: 6px; }
.tabela-compacta { font-size: .86rem; }
.tabela-compacta td, .tabela-compacta th { padding: 6px 8px; }
.painel-local { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: .88rem; }
.painel-local dt { color: var(--texto-3); font-weight: 650; }
.painel-local dd { margin: 0; overflow-wrap: anywhere; }
/* Siglas das UFs com contorno da cor do fundo: legíveis sobre qualquer degrau da escala. */
.mapa-rotulos text { font-size: 15px; font-weight: 700; fill: var(--texto); text-anchor: middle; dominant-baseline: middle; pointer-events: none; paint-order: stroke; stroke: var(--superficie); stroke-width: 3px; stroke-linejoin: round; }
.mapa-rotulos:not(.mapa-rotulos-zona) text { font-size: calc(15px / var(--z, 1)); stroke-width: calc(3px / var(--z, 1)); }
.legenda-densidade { display: grid; gap: 8px; padding-top: 14px; }
.legenda-titulo { font-size: .86rem; font-weight: 650; }
.legenda-escala { max-width: 420px; }
.legenda-degraus { display: grid; grid-template-columns: repeat(9, 1fr); height: 14px; border-radius: 4px; overflow: hidden; border: 1px solid var(--borda); }
.legenda-marcas { display: flex; justify-content: space-between; font-size: .76rem; color: var(--texto-3); font-variant-numeric: tabular-nums; padding-top: 4px; }
.legenda-extra { padding: 0; }
.legenda-cor.dens-0, .legenda-cor.cor-sem { border: 1px solid var(--borda-forte); }
.legenda-nota { font-size: .78rem; color: var(--texto-3); }
/* Texto que depende do tema (ex.: "tom mais claro/escuro"): o CSS mostra o do tema atual. */
.so-tema-claro { display: none; }
:root[data-tema="claro"] .so-tema-claro { display: inline; }
:root[data-tema="claro"] .so-tema-escuro { display: none; }
/* Legenda do duelo: uma escala por candidato, com o nome à esquerda e as marcas embaixo. */
.legenda-duelo .legenda-escala { display: grid; gap: 6px; max-width: 560px; }
.legenda-duelo-linha { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 10px; align-items: center; }
.legenda-duelo-nome { font-size: .8rem; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legenda-duelo-linha .legenda-marcas { padding-top: 0; }
.legenda-cor.mapa-empate { border: 1px solid var(--borda-forte); }
/* Painel do duelo: os dois números lado a lado. */
.duelo-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.duelo-kpi { display: grid; gap: 2px; border-top: 2px solid var(--texto); padding-top: 6px; min-width: 0; }
.duelo-nome { display: flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 650; min-width: 0; }
.duelo-nome > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duelo-kpi strong { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.duelo-kpi > span:last-child { font-size: .78rem; color: var(--texto-3); }
.tt-duelo { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tt-frase { font-weight: 650; color: var(--texto) !important; }
/* "Mapa de": qual dos dois candidatos (de estados diferentes) o mapa mostra. */
.foco-mapa { display: grid; gap: 4px; }
.foco-mapa .segmento { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Turno do mapa "quem venceu". */
.turno-mapa { height: 36px; width: fit-content; }
.turno-mapa .segmento { font-size: .82rem; padding: 0 12px; }
.painel-subtitulo { font-size: .86rem; font-weight: 650; color: var(--texto-2); margin-top: 4px; }
.legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 0 4px; margin: 0; font-size: .86rem; }
.legenda li { display: flex; align-items: center; gap: 7px; }
.legenda span:last-child { color: var(--texto-3); }
.legenda-cor { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.mapa-tabela { margin-top: 8px; }
.mapa-painel { padding: 18px 20px; position: sticky; top: 80px; }
.mapa-painel-conteudo { display: grid; gap: 12px; }
.mapa-painel-conteudo .esqueleto, .mapa-painel-conteudo .aviso { box-shadow: none; padding: 0; border: 0; }
.painel-nota { font-size: .84rem; color: var(--texto-2); }
.tabela-detalhe { display: block; color: var(--texto-3); font-size: .78rem; }
.painel-titulo { font-size: 1.5rem; }
.painel-kpis { display: flex; gap: 22px; }
.painel-kpis div { display: grid; }
.painel-kpis div { border-top: 2px solid var(--texto); padding-top: 6px; }
.painel-kpis strong { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.painel-kpis span { font-size: .78rem; color: var(--texto-3); }

/* ---------------------------------------------------------------- sobre */

.sobre article { padding: 34px 40px; display: grid; gap: 14px; width: 100%; max-width: 820px; margin-inline: auto; }
.sobre h2 { font-size: 2rem; padding-bottom: 12px; border-bottom: 1px solid var(--borda-forte); }
.sobre h3 { margin-top: 14px; font-size: 1.35rem; }
.sobre p, .sobre li, .sobre dd { color: var(--texto-2); font-size: 1rem; line-height: 1.65; }
.sobre .recorte-sub { font-family: var(--fonte); font-size: .84rem; }
.sobre ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.fontes-lista { margin: 0; display: grid; gap: 4px 0; }
.fontes-lista dt { font-weight: 700; margin-top: 10px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto); }
.fontes-lista dd { margin: 0; }

/* ---------------------------------------------------------------- rodapé */

.rodape { border-top: 3px double var(--borda-forte); background: var(--superficie); color: var(--texto-3); font-size: .84rem; }
.rodape-interno { padding: 22px 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- responsivo */

@media (max-width: 1080px) {
  .filtros-cascata { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mapa-layout { grid-template-columns: 1fr; }
  .mapa-painel { position: static; }
}
@media (max-width: 820px) {
  .filtros-principal { grid-template-columns: 1fr auto; }
  .filtros-busca { grid-column: 1 / -1; flex-wrap: wrap; }
  .cand-chip { max-width: 100%; flex: 1; }
}
@media (max-width: 640px) {
  .topo-interno, .heroi-interno, .principal, .rodape-interno { width: min(1240px, 100% - 24px); }
  .topo-interno { height: auto; flex-wrap: wrap; gap: 8px; padding: 10px 0; }
  .navegacao { margin-left: 0; width: 100%; justify-content: space-between; order: 2; }
  .tema-botao { margin-left: auto; order: 1; width: 40px; height: 40px; }
  .navegacao a { padding: 7px 6px; flex: 1; justify-content: center; font-size: .72rem; }
  .heroi { padding: 22px 0 84px; }
  .filtros { padding: 14px; }
  .filtros-cascata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtros-rodape { flex-direction: column; align-items: flex-start; }
  /* Busca e candidato escolhido um embaixo do outro (lado a lado o nome ficava espremido). */
  .filtros-busca { flex-direction: column; align-items: stretch; }
  .filtros-busca > .combo { flex: none; width: 100%; }
  .cand-chip { max-width: none; }
  .tabela td, .tabela th { padding: 9px 6px; }
  .mapa-area { min-height: 200px; }
  section.cartao { padding: 14px; }
  h2 { font-size: 1.3rem; }
  /* Cabeçalho de duas linhas não fica fixo: libera a tela pequena para o conteúdo. */
  .topo { position: static; }
  /* iOS amplia a página ao focar campos com texto < 16px. */
  .controle, .controle-busca, .controle-pequeno { font-size: 16px; }
  .controle { height: 44px; }
  .controle-pequeno { max-width: none; width: 100%; }
  /* Alvos de toque com pelo menos 44px. */
  .navegacao a { min-height: 40px; display: flex; align-items: center; justify-content: center; }
  .botao-icone { width: 40px; height: 40px; }
  .segmentado { height: 44px; }
  .segmento { padding: 0 18px; }
  .botao-secundario, .botao-primario, .botao-texto { min-height: 44px; }
  .combo-lista { max-height: 55vh; }
  .combo-item { padding: 10px; }
  .heroi h1 { font-size: 2.3rem; }
  body[data-pagina="resultados"]:has(.filtros-so-busca) .heroi { padding-bottom: 120px; }
  .heroi-lema { font-size: 1.05rem; }
  .sobre article { padding: 22px 18px; }
  .sobre h2 { font-size: 1.8rem; }
}
/* Telas de toque: sem hover, o tooltip do mapa não deve ficar preso na tela. */
@media (hover: none) {
  .tooltip { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .mapa-celula, .mapa-fronteira, .mapa-contorno-borda { stroke: CanvasText; }
  .mapa-regiao { stroke: CanvasText; }
}

/* Cliques em botões, mapa, rótulos e controles não selecionam (destacam) texto sem querer. */
button, summary, .navegacao, .segmentado, .campo-rotulo, .cand-chip, .combo-lista, .mapa-svg, .mapa-legenda,
.etiqueta, .compartilhar, .botao-primario, .botao-secundario, .tabela th {
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
@media (max-width: 640px) {
  .mapa-zoom-botao { width: 40px; height: 40px; }
  .cartao-social { padding: 18px 16px; gap: 14px; }
  .social-cand { gap: 10px; }
  .social-foto { width: 64px; height: 86px; border-radius: 12px; }
  .destaque-num { font-size: 1.25rem; padding: 10px 12px; }
  .social-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-metrica strong { font-size: 1.25rem; }
}

/* ---------------------------------------------------------------- fotos dos candidatos (TSE) */

.combo-foto, .cand-chip-foto, .social-foto { flex: none; object-fit: cover; object-position: center 20%; background: var(--superficie-3); }
.combo-foto { width: 34px; height: 44px; border-radius: 7px; }
.cand-chip-foto { width: 30px; height: 38px; border-radius: 7px; }
.social-foto { width: 108px; height: 144px; border-radius: var(--raio); border: 2px solid var(--vidro-forte); box-shadow: var(--sombra-2); }
.foto-vazia { display: inline-grid; place-items: center; font-weight: 800; color: var(--texto-3); font-size: .78rem; letter-spacing: .02em; }
.social-foto.foto-vazia { font-size: 1.8rem; }

/* ---------------------------------------------------------------- animações
   Todas somem com "prefers-reduced-motion" (regra acima). */

/* Troca de tema: círculo a partir do botão (View Transitions) ou transição de cores. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.tema-mudando, .tema-mudando * { transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, stroke .45s ease !important; }
.tema-botao .icone { animation: tema-icone .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes tema-icone { from { transform: rotate(-120deg) scale(.4); opacity: 0; } }

/* Mapa: uma única animação no <svg> inteiro (as cores "pintam" da esquerda para a direita com
   um recorte que se abre), em vez de uma animação por área, que pesava em estados e cidades grandes. */
.mapa-pilha { animation: revelar .7s cubic-bezier(.2, .7, .2, 1) backwards; }
.heroi-arte .ave { transform-box: fill-box; }
.mapa-pilha.por-zoom { animation: mapa-zoom .5s cubic-bezier(.2, .8, .2, 1) backwards; transform-origin: center; }
.mapa-pilha.saida-zoom { animation: none; } /* o próprio zoom (viewBox) anima a volta */
.mapa-pilha-municipio { animation: mapa-zoom .6s cubic-bezier(.2, .8, .2, 1) backwards; transform-origin: center; }
@keyframes revelar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mapa-zoom { from { opacity: 0; transform: scale(.6); } }
.mapa-fronteira, .mapa-rotulos-zona { animation: surgir .4s ease-out .5s backwards; }
@keyframes surgir { from { opacity: 0; } }
.mapa-selecao { animation: pulso 1.2s ease-in-out 2; }
@keyframes pulso { 50% { stroke-width: 5; } }
.legenda-degraus span { animation: degrau .4s ease-out backwards; transform-origin: left; }
@keyframes degrau { from { transform: scaleX(0); } }
.mapa-painel-conteudo > * { animation: subir .4s ease-out backwards; }
.mapa-painel-conteudo > :nth-child(2) { animation-delay: .05s; }
.mapa-painel-conteudo > :nth-child(3) { animation-delay: .1s; }
.mapa-painel-conteudo > :nth-child(n + 4) { animation-delay: .15s; }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } }

/* Logo do topo: volta ao início com os filtros limpos. */
.marca-topo { display: inline-flex; align-items: center; gap: 8px; color: var(--texto); text-decoration: none; font-family: var(--serifa); font-weight: 600; font-size: 1.25rem; border-radius: var(--raio-p); padding: 4px 6px; margin-left: -6px; }
.marca-topo:hover { background: var(--vidro); }
.marca-topo-logo { width: 28px; height: 28px; flex: none; transition: transform .25s ease; }
.marca-topo:hover .marca-topo-logo { transform: rotate(-12deg) scale(1.08); }
.marca-topo-logo .lg-s1 { fill: none; stroke: var(--logo-1); }
.marca-topo-logo .lg-f2 { fill: var(--logo-2); }
@media (max-width: 640px) {
  .marca-topo { order: 0; font-size: .95rem; }
}