/* Apuração oficial — retrato de 2026-10-11 12:10, identidade sak.bio.
   Gerado por demos/eleicoes/importa.py; não editar à mão. */
:root{
  /* O PADRÃO É CLARO para todo mundo, mesmo com o aparelho no escuro (André, 03/10 17:55:
     «eu não quero modo escuro»). O `only light` é o que impede o Chrome do Android de
     escurecer a página por conta própria. O escuro é ESCOLHA da pessoa (17:56: «mas tem que
     ter a opção para quem prefere») e vem por `data-theme="dark"` no <html>, no fim deste
     arquivo — nunca por `prefers-color-scheme`. */
  color-scheme: only light;
  --bg:#ffffff; --soft:#f7f6f4; --fg:#0a0a0a; --ink:#111014; --muted:#5e5e5e; --border:#e8e6e3;
  --accent:#C40919; --accent-dark:#8D0612; --accent-soft:#fff1f2;
  --font-sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:10px; --radius-lg:18px;
  --grid:#e8e6e3; --axis:#c9c6c1; --context:#7d7a75;
  --vazio:#e8e6e3;          /* cadeira sem dono no semicírculo */
  --neutro:#d4d4d8;         /* o «demais» da barra do duelo */
  --marca:#111;             /* filete da maioria */
  --carimbo:#5e5e5e;        /* o «37% · 19:25» e afins */
  --arquivo:#f4f1ec;        /* fundo da faixa quando é 2022 */
  --divisa:#fff;            /* separador claro sobre cor cheia */
  --sombra:rgba(10,10,10,.1);
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e8:32px;
  --faixa:52px;
}

/* A rolagem desta página é instantânea: o `scroll-behavior:smooth` do site quebra toda medida
   feita logo depois de um scroll (gotcha 1 do agregador, 12/09/2026). */
html{scroll-behavior:auto;scrollbar-gutter:stable}  /* a barra de rolagem não estreita a página
  quando o conteúdo passa a caber: o lugar dela já está guardado (nº 72) */
body{background:var(--bg)}

/* ====================== faixa do topo: ela É a barra de progresso ====================== */
.ap-faixa{position:sticky;top:0;z-index:60;background:var(--bg);
  border-bottom:1px solid var(--border);overflow:hidden}
.ap-faixa::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--apurado,0%);
  background:var(--accent-soft);transition:width .6s ease}
.ap-faixa-in{position:relative;max-width:1600px;margin:0 auto;min-height:var(--faixa);
  padding:var(--e2) var(--e6);display:flex;align-items:center;gap:var(--e4);flex-wrap:wrap;
  font-family:var(--font-sans)}
.ap-turno{font:600 13px/1.3 var(--font-sans);color:var(--fg);white-space:nowrap}
.ap-apurado{font:500 15px/1.25 var(--font-mono);color:var(--accent);min-width:0}
.ap-apurado b{font-weight:600}
.ap-hora{font:400 12px/1.4 var(--font-mono);color:var(--muted);margin-left:auto;
  display:inline-flex;align-items:center;gap:var(--e2)}
.ap-vivo{width:7px;height:7px;border-radius:50%;background:#1baf7a;flex:0 0 auto;
  animation:ap-pulso 2s ease-in-out infinite}
@keyframes ap-pulso{0%,100%{opacity:1}50%{opacity:.25}}
.ap-faixa[data-parado] .ap-vivo{background:var(--accent);animation:none}
.ap-faixa[data-parado] .ap-hora{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.ap-vivo{animation:none}.ap-faixa::before{transition:none}}

/* ====================== cabeça ====================== */
.ap{max-width:1600px;margin:0 auto;padding:0 var(--e6) 64px;font-family:var(--font-sans);
  color:var(--ink)}
.ap-cabeca{padding:var(--e8) 0 var(--e4)}
.ap-h1{font:400 clamp(30px,5vw,54px)/1.05 var(--font-serif);margin:0;color:var(--fg);
  letter-spacing:-.01em}
.ap-h1 em{font-style:italic;color:var(--accent)}
.ap-volta{display:inline-flex;align-items:center;gap:var(--e1);min-height:24px;
  font:500 13px/1 var(--font-sans);color:var(--muted);text-decoration:none;margin-bottom:var(--e2)}
.ap-volta:hover,.ap-volta:focus-visible{color:var(--accent)}

/* ====================== abas ====================== */
.ap-abas{margin-top:var(--e4)}
.abas{display:flex;gap:var(--e1);border-bottom:1px solid var(--border);overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.aba{all:unset;box-sizing:border-box;cursor:pointer;white-space:nowrap;
  padding:var(--e3) var(--e4);min-height:44px;display:inline-flex;align-items:center;
  font:500 14px/1 var(--font-sans);color:var(--muted);border-bottom:2px solid transparent}
.aba:hover{color:var(--fg)}
.aba:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.aba.ativa{color:var(--fg);border-bottom-color:var(--accent);font-weight:600}
.ap-painel{padding-top:var(--e6)}

/* ====================== números do topo de cada corrida ====================== */
.ap-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--e4);
  padding:var(--e3) 0;border-bottom:1px solid var(--border);max-width:1100px}
.ap-kpi{display:flex;flex-direction:column;gap:var(--e1);min-width:0}
.ap-kpi-r{font:500 12px/1.3 var(--font-mono);color:var(--muted);letter-spacing:.01em}
.ap-kpi-n{font:600 clamp(20px,2.2vw,28px)/1.1 var(--font-sans);color:var(--fg);
  font-variant-numeric:tabular-nums}
.ap-kpi-s{font:400 12px/1.3 var(--font-sans);color:var(--muted)}

/* ====================== a corrida (majoritário) ====================== */
.ap-corrida{margin-top:var(--e3);position:relative}
.ap-escala{position:relative;height:18px;margin-left:var(--rot,0);border-bottom:1px solid var(--border)}
.ap-linha{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e1);padding:var(--e3) 0;
  border-bottom:1px solid var(--border)}
.ap-linha:last-child{border-bottom:0}
.ap-topo{display:flex;align-items:baseline;gap:var(--e2);flex-wrap:wrap}
.ap-num{font-style:normal;font-family:var(--font-mono);font-size:12px;font-weight:500;
  color:var(--muted);margin-right:var(--e1)}
.ap-nome{font:600 15px/1.25 var(--font-sans);color:var(--fg);min-width:0}
.ap-part{font:500 12px/1.3 var(--font-mono);color:var(--muted)}
.ap-st{font:600 12px/1.1 var(--font-mono);padding:3px 6px;border-radius:4px;
  background:var(--accent-soft);color:var(--accent-dark);white-space:nowrap}
.ap-st[data-neutra]{background:var(--soft);color:var(--muted)}
.ap-vice{font:400 12px/1.4 var(--font-sans);color:var(--muted)}
.ap-medida{display:flex;align-items:baseline;gap:var(--e3);flex-wrap:wrap}
.ap-pc{font:600 clamp(22px,2.4vw,30px)/1 var(--font-sans);color:var(--fg);
  font-variant-numeric:tabular-nums}
.ap-votos{font:400 13px/1.3 var(--font-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.ap-trilha{position:relative;height:12px;background:var(--soft);border-radius:2px;
  margin-top:var(--e1)}
.ap-barra-c{position:absolute;inset:0 auto 0 0;border-radius:2px;background:var(--context);
  transition:width .6s ease}
@media (prefers-reduced-motion:reduce){.ap-barra-c{transition:none}}
.ap-50{position:absolute;top:-22px;bottom:-4px;left:50%;width:1px;background:var(--axis);
  pointer-events:none}
.ap-50 span{position:absolute;top:2px;left:6px;font:500 12px/1.2 var(--font-mono);
  color:var(--muted);white-space:nowrap;background:var(--bg);padding:0 3px}
.ap-maioria{position:relative;height:20px;margin:var(--e2) 0 var(--e1)}

/* ====================== tabela das 27 UFs ====================== */
.ap-tab{width:100%;max-width:1280px;border-collapse:collapse;font-size:13px}
.ap-tab th{position:sticky;top:var(--faixa);background:var(--bg);text-align:left;
  font:500 12px/1.3 var(--font-mono);color:var(--muted);padding:var(--e2) var(--e3);
  border-bottom:1px solid var(--border);pointer-events:none;z-index:2}
.ap-tab td{padding:var(--e3);border-bottom:1px solid var(--border);vertical-align:top}
.ap-tab tbody tr:hover{background:var(--soft)}
.ap-tab .n{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.ap-uf{font:600 13px/1.3 var(--font-sans);color:var(--fg);text-decoration:none}
.ap-uf:hover,.ap-uf:focus-visible{color:var(--accent);text-decoration:underline}
.ap-sg{font:500 12px/1.3 var(--font-mono);color:var(--muted)}
.ap-dupla{display:flex;flex-direction:column;gap:var(--e1);min-width:0}
.ap-dupla b{font-weight:600}

/* ====================== mapa ====================== */
.ap-duas{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e8);align-items:start}
@media (min-width:1100px){.ap-duas{grid-template-columns:minmax(360px,42%) minmax(0,1fr)}}
/* Área sólida, divisa BRANCA, sem sigla dentro: a régua das referências. O realce do mouse é a
   própria cor um tom mais escura — contorno preto grosso fazia o estado parecer selecionado. */
.ap-mapa svg{width:100%;height:auto;display:block;max-height:560px;overflow:visible}
/* camada de baixo: só preenchimento — é aqui que mora TODO o destaque (seleção e hover) */
.ap-mapa path{stroke:none;cursor:pointer;transition:filter .12s ease}
.ap-mapa path:hover{filter:brightness(.9)}
.ap-mapa a:focus-visible path{outline:none;filter:brightness(.82)}
/* camada de cima: as divisas, uma só para todo o mapa — mesma espessura no litoral e entre
   estados, porque nenhuma fica coberta pelo preenchimento do vizinho */
.ap-mapa-divisas{pointer-events:none}
.ap-mapa-divisas path{fill:none;stroke:#fff;stroke-width:1.2;stroke-linejoin:round;
  stroke-linecap:round;cursor:default}
.ap-mapa-divisas path:hover{filter:none}
.ap-legenda{max-width:1280px;display:flex;position:relative;z-index:1;flex-wrap:wrap;gap:var(--e1) clamp(8px,2cqi,20px);
  margin-bottom:var(--e3);align-items:center;container-type:inline-size}
.ap-legenda-def{flex:0 0 100%;font:400 12px/1.4 var(--font-sans);color:var(--muted)}
.ap-chip{display:inline-flex;align-items:center;gap:var(--e1);
  font:500 12px/1.3 var(--font-mono);color:var(--ink)}
.ap-sw{width:10px;height:10px;border-radius:2px;flex:0 0 auto}

/* ====================== bancadas (proporcional) ====================== */
.ap-banc{display:flex;flex-direction:column;gap:0;margin-top:var(--e4);max-width:1280px}
.ap-banc-l{all:unset;box-sizing:border-box;cursor:pointer;display:grid;
  grid-template-columns:minmax(96px,16%) 56px minmax(0,1fr) auto;gap:var(--e3);
  align-items:center;padding:var(--e3) var(--e2);border-bottom:1px solid var(--border);
  min-height:44px}
.ap-banc-l:hover{background:var(--soft)}
.ap-banc-l:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ap-banc-sg{font:600 13px/1.25 var(--font-sans);color:var(--fg);min-width:0;word-break:break-word}
.ap-banc-c{font:600 18px/1 var(--font-sans);color:var(--fg);text-align:right;
  font-variant-numeric:tabular-nums}
.ap-banc-t{position:relative;height:12px;background:var(--soft);border-radius:2px}
.ap-banc-b{position:absolute;inset:0 auto 0 0;border-radius:2px;transition:width .6s ease}
.ap-banc-v{font:400 12px/1.4 var(--font-mono);color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ap-ficha{border-bottom:1px solid var(--border);background:var(--soft);padding:var(--e4)}
.ap-ficha-t{font:600 13px/1.3 var(--font-sans);color:var(--fg);margin-bottom:var(--e3)}
.ap-ficha-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--e2) var(--e6)}
.ap-ficha-i{display:flex;align-items:baseline;gap:var(--e2);font-size:13px;min-width:0}
.ap-ficha-i b{font-weight:600;color:var(--fg)}
.ap-ficha-i span{color:var(--muted);font-family:var(--font-mono);font-size:12px;
  margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
/* o avatar também é <span>: sem isto ele herdava o margin-left:auto e cada nome da ficha
   começava num x diferente (o desalinhamento que o André já tinha apontado nas listas) */
.ap-ficha-i .ap-av{margin-left:0}
.ap-ficha-fechar{all:unset;cursor:pointer;float:right;font:500 12px/1 var(--font-mono);
  color:var(--muted);min-height:24px;padding:0 var(--e2)}
.ap-ficha-fechar:hover{color:var(--accent)}

/* ====================== listas que rolam ====================== */
/* `.ap-rola` saiu: a lista corre na página, como em todas as abas (03/10 15:4x) */
.ap-vazio{font:400 14px/1.4 var(--font-sans);color:var(--muted);padding:0;
  margin:var(--e2) 0}
.ap-erro{font:500 14px/1.5 var(--font-sans);color:var(--accent);padding:var(--e3) 0}

/* ====================== cartões no lugar da tabela (< 900 px) ====================== */
.ap-cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--e3)}
.ap-cartao{border:1px solid var(--border);border-radius:var(--radius);padding:var(--e4);
  display:flex;flex-direction:column;gap:var(--e2)}
.ap-cartao-h{display:flex;align-items:baseline;gap:var(--e2);justify-content:space-between}
.ap-cartao-ap{font:500 12px/1.3 var(--font-mono);color:var(--muted);white-space:nowrap}
.ap-cartao-l{display:flex;align-items:baseline;gap:var(--e2);font-size:13px;min-width:0}
.ap-cartao-l b{font-weight:600;color:var(--fg)}
.ap-cartao-l i{font-style:normal;color:var(--muted);font:500 12px/1.3 var(--font-mono)}
.ap-cartao-l span{margin-left:auto;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  white-space:nowrap}
@media (max-width:899px){
  .ap{padding-left:var(--e4);padding-right:var(--e4)}
  .ap-so-grande{display:none}
}
@media (min-width:900px){.ap-so-pequeno{display:none}}
@media (min-width:900px){.ap-so-pequeno{display:none}}

.ap-marca{font:600 14px/1.3 var(--font-sans);color:var(--fg);margin:0}
.ap-marca i{font-style:normal;color:var(--accent)}

/* ====================== subtítulo de bloco (a aba é o título; isto nomeia o 2º bloco) ====== */
.ap-sub{padding:var(--e5) 0 var(--e2);border-bottom:1px solid var(--border);margin-bottom:var(--e4)}
.ap-sub-t{font:600 15px/1.3 var(--font-sans);color:var(--fg)}
.ap-bloco-mapa{margin-top:var(--e4)}

/* ====================== busca de candidato ====================== */
.ap-busca{max-width:520px;position:relative}
/* a lupa vive dentro do campo, encostada à esquerda; o texto começa depois dela */
.ap-busca-lupa{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;left:0;top:0;
  height:100%;width:44px;display:grid;place-items:center;color:var(--muted)}
.ap-busca-lupa:focus-visible{outline:2px solid var(--accent);outline-offset:-6px;border-radius:50%}
.ap-busca-i{width:100%;box-sizing:border-box;min-height:48px;padding:0 var(--e4) 0 44px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);
  font:400 16px/1.4 var(--font-sans);color:var(--ink)}
.ap-busca-i:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.ap-busca-r{margin-top:var(--e4);display:flex;flex-direction:column;max-width:760px}
.ap-res{display:flex;flex-direction:column;gap:var(--e1);padding:var(--e3) var(--e2);
  border-bottom:1px solid var(--border);text-decoration:none;min-height:44px;justify-content:center}
.ap-res:hover,.ap-res:focus-visible{background:var(--soft)}
.ap-res-n{display:flex;align-items:baseline;gap:var(--e2);flex-wrap:wrap}
.ap-res-n b{font:600 15px/1.25 var(--font-sans);color:var(--fg)}
.ap-res-n i{font-style:normal;font:500 12px/1.3 var(--font-mono);color:var(--muted)}
.ap-res-d{font:400 12px/1.4 var(--font-sans);color:var(--muted)}

/* ====================== cara de aplicativo no celular ====================== */
/* A navegação principal vai para uma barra fixa embaixo, ao alcance do polegar; o cabeçalho e o
   rodapé longos do site não podem empurrar a apuração para baixo (André, 01/10/2026). */
.ap-nav{display:none}
@media (max-width:899px){
  .ap-nav{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:70;
    grid-auto-flow:column;grid-auto-columns:1fr;background:var(--bg);
    border-top:1px solid var(--border);
    /* a área segura do sistema entra como espaço DENTRO da barra: o rótulo nunca fica embaixo da
       barra do Android */
    padding-bottom:max(env(safe-area-inset-bottom), 8px)}
  .ap-nav-b{all:unset;box-sizing:border-box;cursor:pointer;min-height:56px;
    display:flex;align-items:center;justify-content:center;text-align:center;
    font:500 12px/1.2 var(--font-sans);color:var(--muted);padding:var(--e2) 2px;
    letter-spacing:-.015em;white-space:normal;border-top:2px solid transparent}
  .ap-nav-b.ativa{color:var(--accent);border-top-color:var(--accent);font-weight:600}
  .ap-nav-b:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .ap-nav-t{display:block}
  .abas{display:none}                      /* no celular a navegação é a barra de baixo */
  .nav-links,.nav-toggle{display:none}     /* o menu do site não disputa espaço com a apuração */
  .nav{padding:0;border-bottom:1px solid var(--border)}
  .nav-inner{min-height:44px;padding:var(--e2) var(--e4);display:flex;align-items:center}
  .brand{display:flex;align-items:center;min-height:44px}
  .brand-logo{height:20px;margin:0}
  .ap-app{font-size:12px;padding-left:var(--e2);margin-left:var(--e2)}
  .footer{padding:var(--e4) 0 calc(72px + env(safe-area-inset-bottom))}
  .ap-cabeca{padding:var(--e3) 0 0}
  .ap-h1{font-size:26px;line-height:1.1}
  .ap-painel{padding-top:var(--e3)}
  .ap-legenda{margin-bottom:var(--e2)}
  .ap-banc{margin-top:var(--e2)}
  .ap{padding-bottom:calc(96px + env(safe-area-inset-bottom))}   /* barra + área do sistema */
  .footer{padding:var(--e6) 0 calc(72px + env(safe-area-inset-bottom));font-size:.8rem}
  .ap-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e3)}
  .ap-banc-l{grid-template-columns:minmax(72px,34%) 44px minmax(0,1fr);
    grid-template-areas:"sg n t" "v v v";row-gap:var(--e1)}
  .ap-banc-sg{grid-area:sg}.ap-banc-c{grid-area:n}.ap-banc-t{grid-area:t}
  .ap-banc-v{grid-area:v;font-size:12px}
  .ap-tab th{top:0}
  .ap-mapa svg{max-height:420px}
  .ap-mapa text{display:none}
}
@media (max-width:380px){
  .ap-nav-b{letter-spacing:-.03em;padding-left:0;padding-right:0}
}

/* A faixa é fixa: no celular ela não pode comer três linhas da tela. O turno já está no título
   da página; na faixa fica o que muda — o % apurado e a hora. */
@media (max-width:899px){
  .ap-faixa-in{min-height:40px;padding:var(--e2) var(--e4);gap:var(--e1) var(--e3)}
  .ap-turno{display:none}
  /* nada de overflow:hidden aqui: antes da eleição o texto é longo e seria CORTADO sem barra.
     Ele quebra de linha e a faixa cresce — e depois das 17h volta a caber numa linha só. */
  .ap-apurado{font-size:13px;white-space:normal;min-width:0}
  .ap-hora{margin-left:0;font-size:12px}
  :root{--faixa:40px}
}

/* o rodapé do site usa --muted-2 (3,45:1); nesta página o texto fica em --muted (≥ 4,5:1) */
.footer .footer-bottom, .footer .footer-bottom p{color:var(--muted)}
/* alvo de toque: no celular todo link de estado e de resultado tem 44 px */
@media (max-width:899px){
  .ap-uf,.ap-volta{min-height:44px;display:inline-flex;align-items:center}
  .ap-cartao{min-height:44px}
}

/* O cabeçalho e o rodapé vêm do site; aqui só o que a régua do painel exige — alvo de toque de
   24 px nos links do menu e o teto de 1600 px também neles (acima disso o conteúdo descolava do
   corpo da página na tela de 1896 px). */
.nav-links a{min-height:24px;display:inline-flex;align-items:center}
.nav-toggle{min-width:24px;min-height:24px}
.nav-inner,.footer .container{max-width:1600px;margin-left:auto;margin-right:auto}

/* O cartão e a linha de resultado são links; o `a` do site vem sublinhado e o cartão inteiro
   saía com risco embaixo de cada palavra. Aqui o link se anuncia por cursor, hover e foco. */
.ap-cartao,.ap-cartao *,.ap-res,.ap-res *,.ap-ficha-i,.ap-ficha-i *{text-decoration:none}
.ap-cartao{color:inherit;transition:border-color .15s}
.ap-cartao:hover,.ap-cartao:focus-visible{border-color:var(--accent)}
.ap-cartao:focus-visible,.ap-res:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ====================== foto do candidato ====================== */
/* O lugar da foto tem tamanho fixo e já nasce com as iniciais: a imagem entra por cima quando
   chega e nada pula de lugar (nem no celular, nem com a rede lenta). */
.ap-av{position:relative;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;border-radius:50%;overflow:hidden;background:var(--soft);
  border:1px solid var(--border);color:var(--muted);
  font-family:var(--font-sans);font-weight:600;line-height:1;user-select:none}
.ap-ini{position:relative;z-index:0}
.ap-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  display:block;background:var(--soft)}
.ap-linha{grid-template-columns:40px minmax(0,1fr);align-items:start;column-gap:var(--e3)}
.ap-linha-d{min-width:0}
.ap-ficha-i .ap-av{margin-right:var(--e2)}
.ap-res{flex-direction:row;align-items:center;gap:var(--e3)}
.ap-res-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ap-cartao-l .ap-av{margin-right:var(--e1)}
@media (max-width:899px){
  /* no celular a foto não empurra número nem nome: a coluna dela encolhe antes do resto */
  .ap-linha{grid-template-columns:34px minmax(0,1fr);column-gap:var(--e2)}
  .ap-linha .ap-av{width:34px!important;height:34px!important;font-size:12px!important}
  .ap-cartao-l .ap-av{width:22px!important;height:22px!important;font-size:8px!important}
}

/* ====================== navegação por LUGAR: mapa + 28 botões ====================== */
.ap-duas{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e6);align-items:start;
  margin-top:var(--e4)}
@media (min-width:1024px){
  .ap-duas{grid-template-columns:minmax(300px,30%) minmax(0,1fr);gap:var(--e8)}
  .ap-lugares{position:sticky;top:calc(var(--faixa) + 8px);max-height:calc(100vh - var(--faixa) - 24px);
    overflow:auto;padding-right:var(--e2)}
}
.ap-botoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--e4) var(--e3);align-items:center;margin-top:var(--e5)}
.ap-bt{display:flex;align-items:center;gap:var(--e3);min-height:56px;padding:var(--e2) 0;
  text-decoration:none;color:var(--ink);background:none;border:0;border-radius:var(--radius)}
.ap-bt b{font:500 17px/1.1 var(--font-sans);letter-spacing:.02em;color:var(--fg)}
.ap-bt span{font:400 11px/1.25 var(--font-mono);color:var(--muted);margin-left:auto;
  white-space:nowrap}
.ap-bt:hover b,.ap-bt:focus-visible b{color:var(--accent)}
.ap-bt:active{background:var(--soft)}
.ap-bt.ativo b{color:var(--accent);font-weight:600}
/* o fio é claríssimo: só para a bandeira clara (DF, MG, RJ) não sumir no fundo branco */
.ap-bandeira{display:block;flex:0 0 auto;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px var(--sombra)}


.ap-bt-nac{grid-column:1/-1;gap:var(--e3)}
.ap-bt-nac b{font-size:17px}

/* ====================== cabeça com a lupa ====================== */
.ap-cabeca-l{display:flex;align-items:center;gap:var(--e4);flex-wrap:wrap}
.ap-lupa{all:unset;cursor:pointer;margin-left:auto;min-height:44px;padding:0 var(--e4);
  border:1px solid var(--border);border-radius:999px;font:500 13px/1 var(--font-sans);
  color:var(--muted);display:inline-flex;align-items:center}
.ap-lupa:hover,.ap-lupa:focus-visible{color:var(--accent);border-color:var(--accent)}

/* ====================== cartão de cargo (dentro da UF) ====================== */
.ap-cargo{border-bottom:1px solid var(--border)}
.ap-cargo.aberto>.ap-cargo-h{position:sticky;top:var(--faixa);z-index:25;background:var(--bg);
  border-bottom:1px solid var(--border)}
.ap-cargo-lugar{display:none}
body.ap-sem-titulo .ap-cargo.aberto>.ap-cargo-h .ap-cargo-lugar{display:inline}
.ap-cargo-h .ap-bandeira{flex:0 0 auto}
.ap-cargo-h{all:unset;box-sizing:border-box;cursor:pointer;display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;
  gap:var(--e1) var(--e3);width:100%;min-height:52px;padding:var(--e2) var(--e1)}
.ap-cargo-h:hover{background:var(--soft)}
.ap-cargo-h:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ap-cargo-n{font:600 15px/1.2 var(--font-sans);color:var(--fg);flex:0 0 auto}
.ap-cargo-ap{font:600 12px/1.2 var(--font-sans);color:var(--carimbo);white-space:nowrap;
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.ap-ap-curto{display:none}
@media (max-width:899px){.ap-ap-longo{display:none}.ap-ap-curto{display:inline}}
.ap-cargo-l{display:flex;align-items:center;gap:var(--e2);min-width:0;font-size:14px;
  color:var(--muted);flex-wrap:nowrap}
.ap-cargo-u{display:flex;align-items:center;gap:var(--e2);min-width:0}
.ap-cargo-u b{white-space:nowrap}
/* o resumo é texto corrido, na sans: mono fora do conteúdo (decisão da nº 35) */
.ap-cargo-l .ap-item{font-family:var(--font-sans);font-variant-numeric:tabular-nums;
  color:var(--muted)}
.ap-cargo-s{margin-left:auto;flex:0 0 auto;width:10px;height:10px;border:solid var(--muted);
  border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-right:var(--e2);
  font-size:0;color:transparent;transition:transform .15s}
.ap-cargo.aberto .ap-cargo-s{transform:rotate(-135deg);border-color:var(--accent)}
.ap-cargo.aberto>div,.ap-cargo.aberto>section{padding-bottom:var(--e6)}
.ap-sub2{padding:var(--e3) 0 var(--e2);margin-bottom:var(--e1)}

@media (max-width:1023px){
  /* no celular as três telas são excludentes: Mapa, Nacional (ou o estado) e Buscar */
  body.ap-em-mapa .ap-painel{display:none}
  /* na aba «Estados» a grade já abre com a peça «Brasil»: o título do topo repetiria a mesma
     bandeira e o mesmo nome, empilhados (André, 03/10 14:29) */
  body.ap-em-mapa .ap-tit,
  body.ap-em-busca .ap-tit{display:none}
  body:not(.ap-em-mapa):not(.ap-em-busca) .ap-lugares{display:none}
  body.ap-em-busca .ap-lugares{display:none}
  .ap-botoes{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e5) var(--e2)}
  .ap-bt{gap:var(--e2);padding:var(--e1) 0;min-height:48px}
  .ap-bt b{font-size:16px}
  .ap-bt span{font-size:10px;margin-left:var(--e1)}
}

/* A MARCA APARECE UMA VEZ SÓ, no topo, com o nome do app ao lado (André, 01/10/2026 21:39). */
.ap-tit{display:flex;flex-direction:column;gap:2px;min-width:0}
.ap-app{font:500 13px/1 var(--font-sans);color:var(--muted);letter-spacing:.01em;
  padding-left:var(--e3);margin-left:var(--e3);border-left:1px solid var(--border)}
.brand{display:inline-flex;align-items:center}

.ap-mais{all:unset;cursor:pointer;font:500 12px/1.3 var(--font-mono);color:var(--accent);
  min-height:24px;display:inline-flex;align-items:center;text-decoration:underline}
.ap-mais:hover,.ap-mais:focus-visible{color:var(--accent-dark)}

/* a colocação: na sugestão da busca e na linha da corrida */
.ap-res-c{font:400 12px/1.4 var(--font-mono);color:var(--ink);
  display:flex;gap:var(--e2);align-items:baseline;flex-wrap:wrap}
.ap-res-c b{font-weight:600;color:var(--accent)}
.ap-res-c em{font-style:normal;font-weight:600;color:var(--accent-dark);
  background:var(--accent-soft);border-radius:4px;padding:1px 5px}
.ap-pos{font:600 13px/1 var(--font-mono);color:var(--muted);align-self:center}
/* o destaque não desloca nada: fundo na largura da linha, com o recuo devolvido por margem
   negativa, e some sozinho em ~3 s */
.ap-linha{transition:background-color .8s ease}
@media (prefers-reduced-motion:reduce){.ap-linha{transition:none}}

@media (max-width:560px){
  /* no celular o cartão vira duas linhas — cargo e chevron em cima, quem lidera embaixo */
  .ap-cargo-ap{text-align:right}
}

/* a bandeira ao lado do nome do estado, no cabeçalho */
.ap-h1 .ap-bandeira{display:inline-block;vertical-align:-4px;margin-right:var(--e3)}
.ap-res-d .ap-bandeira{display:inline-block;vertical-align:-2px;margin:0 2px}

/* ====================== navegação: Brasil · Estados · Buscar ====================== */
/* No desktop ela fica no topo da página, como navegação; no celular, fixa embaixo. */
.ap-ico{display:block;width:20px;height:20px;flex:0 0 auto}
@media (min-width:900px){
  .ap-nav{display:flex;gap:var(--e1);border-bottom:1px solid var(--border);
    max-width:1600px;margin:0 auto;padding:0 var(--e6)}
  .ap-nav-b{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;
    gap:var(--e2);min-height:44px;padding:var(--e2) var(--e4);
    font:500 14px/1 var(--font-sans);color:var(--muted);border-bottom:2px solid transparent}
  .ap-nav-b:hover{color:var(--fg)}
  .ap-nav-b:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .ap-nav-b.ativa{color:var(--fg);border-bottom-color:var(--accent);font-weight:600}
  /* no desktop as três telas convivem: Brasil à direita, Estados à esquerda */
  body.ap-em-busca .ap-lugares{display:none}
}
@media (max-width:899px){
  .ap-nav-b{flex-direction:column;gap:3px}

}

/* ====================== dentro do estado: fileira fixa de cargos ====================== */
/* O acordeão empurrava a página a cada toque. Aqui a fileira fica parada e só o conteúdo
   abaixo dela troca (André, 01/10/2026 21:40: «se a pessoa clica em abrir, não pode dar pulo»). */
/* a barra de eleitores: fina, largura toda, total à esquerda e % apurado à direita */
.ap-eleitores{margin:var(--e2) 0 var(--e5)}
.ap-eleitores-t{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3);
  margin-bottom:var(--e2)}
.ap-eleitores-n{font:400 13px/1.3 var(--font-sans);color:var(--muted);
  font-variant-numeric:tabular-nums}
.ap-eleitores-p{font:600 13px/1.3 var(--font-sans);color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ap-eleitores-trilha{height:6px;background:var(--soft);border-radius:3px;overflow:hidden}
.ap-eleitores-barra{height:100%;background:var(--accent);border-radius:3px;
  transition:width .6s ease;min-width:0}
@media (prefers-reduced-motion:reduce){.ap-eleitores-barra{transition:none}}
.ap-corpo{min-height:50vh}

/* o Resumo: uma linha por cargo, que leva ao cargo */
@media (max-width:560px){
        }
/* texto sem mistura: o número do candidato em sans, cinza, tabular */
.ap-num{font-family:var(--font-sans)!important;font-variant-numeric:tabular-nums}
.ap-part{font-family:var(--font-sans)!important;font-size:12px}

/* ====================== o molde único da linha de candidato ====================== */
/* Grade fixa: o texto nunca escolhe a linha. foto · (nome | %) · (nº·partido | votos) · barra */
.ap-linha{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;
  column-gap:var(--e3);padding:var(--e3) 0;border-bottom:1px solid var(--border)}
.ap-linha:last-child{border-bottom:0}
.ap-corrida>.ap-linha:last-of-type{border-bottom:0}
.ap-linha-d{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;column-gap:var(--e3);row-gap:2px;min-width:0;align-items:baseline}
.ap-linha .ap-nome{grid-column:1;grid-row:1;font:600 15px/1.3 var(--font-sans);color:var(--fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ap-linha-r{grid-column:2;grid-row:1;justify-self:end;white-space:nowrap}
.ap-linha-r .ap-pc{font:600 17px/1.2 var(--font-sans);color:var(--fg);
  font-variant-numeric:tabular-nums}
.ap-sub-l{grid-column:1;grid-row:2;font:400 12px/1.35 var(--font-sans);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  font-variant-numeric:tabular-nums}
.ap-sub-r{grid-column:2;grid-row:2;justify-self:end;white-space:nowrap;
  display:flex;gap:var(--e2);align-items:baseline}
.ap-sub-r .ap-pos{font:600 12px/1.3 var(--font-sans);color:var(--muted)}
.ap-sub-r .ap-votos{font:400 12px/1.35 var(--font-sans);color:var(--muted);
  font-variant-numeric:tabular-nums}
.ap-linha-st{grid-column:1/-1;grid-row:3;display:flex;gap:var(--e2);flex-wrap:wrap;
  margin-top:var(--e1)}
.ap-linha .ap-trilha{grid-column:1/-1;grid-row:4;margin-top:var(--e2)}
/* o destaque não desloca nada: fundo na largura da linha, com o recuo devolvido por margem
   negativa, e some sozinho em ~3 s */
.ap-linha{transition:background-color .8s ease}
@media (prefers-reduced-motion:reduce){.ap-linha{transition:none}}
@media (max-width:420px){
  .ap-linha{grid-template-columns:34px minmax(0,1fr);column-gap:var(--e2)}
  .ap-linha .ap-av{width:34px!important;height:34px!important;font-size:12px!important}
  .ap-linha .ap-nome{font-size:14px}
  .ap-linha-r .ap-pc{font-size:16px}
}

/* O fim da página não leva linha nem texto: só o espaço para o último item não ficar debaixo da
   barra (André, 01/10/2026 21:49: «não precisa de nada de linha ali embaixo, nada disso não»). */
@media (max-width:899px){
  .footer{display:none}
  .ap{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
}
/* o pulso do indicador: discreto, acompanha a volta do dado */
.ap-vivo{box-shadow:0 0 0 0 rgba(27,175,122,.55);animation:ap-pulso 2.4s ease-out infinite}
@keyframes ap-pulso{
  0%{box-shadow:0 0 0 0 rgba(27,175,122,.5);opacity:1}
  70%{box-shadow:0 0 0 7px rgba(27,175,122,0);opacity:.85}
  100%{box-shadow:0 0 0 0 rgba(27,175,122,0);opacity:1}
}
.ap-faixa[data-parado] .ap-vivo{box-shadow:none;animation:none;background:var(--accent)}

/* o histórico da busca: cabeçalho discreto e o «limpar» no canto */
.ap-hist-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3);
  padding:var(--e2) var(--e1) var(--e1);font:400 12px/1.4 var(--font-sans);color:var(--muted)}
.ap-hist-limpa{all:unset;cursor:pointer;font:500 12px/1.4 var(--font-sans);color:var(--muted);
  min-height:24px;display:inline-flex;align-items:center}
.ap-hist-limpa:hover,.ap-hist-limpa:focus-visible{color:var(--accent)}

/* o «×» de cada item do histórico: área própria, longe do toque que abre o candidato */
.ap-hist-l{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center}
.ap-hist-l .ap-res{min-width:0}
.ap-hist-x{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;justify-self:end;border-radius:50%;
  font:400 20px/1 var(--font-sans);color:var(--border)}
.ap-hist-x:hover,.ap-hist-x:focus-visible{color:var(--accent);background:var(--accent-soft)}

/* ============================================================================================
   PESQUISA DE DESIGN (docs/PESQUISA-DESIGN.md) — 01/10/2026 23:1x
   Fora, por decisão do André: selo AO VIVO, frase declarativa, marca dos 50%, perdedor em cinza,
   bandeira redonda × retangular (seção C2 do documento).
   ========================================================================================== */

/* B1 · a faixa é texto de serviço: sem mono, sem vermelho, sem segundos */
.ap-faixa-in{font:400 13px/1.4 var(--font-sans);color:var(--muted);min-height:44px}
.ap-apurado{font:400 13px/1.4 var(--font-sans)!important;color:var(--muted)!important}
.ap-hora{font:400 13px/1.4 var(--font-sans);color:var(--muted)}
.ap-turno{font:500 13px/1.4 var(--font-sans)}
@media (max-width:899px){.ap-faixa-in{min-height:40px}.ap-hora{font-size:12px}}

/* B12 · barra de baixo no modo iOS: o ativo se marca por cor e peso, sem linha */
.ap-nav-b.ativa{border-top-color:transparent!important}
.ap-nav-b.ativa .ap-ico{stroke-width:2}
.ap-nav-b{color:var(--muted)}
.ap-nav-b.ativa{color:var(--accent)}
@media (max-width:899px){
  .ap-nav{background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px)}
  .ap-nav-b{min-height:56px}
  .ap-nav-t{font:600 11px/1.2 var(--font-sans)}
}

/* B5 · a linha de cargo cabe numa linha só */
/* DUAS LINHAS FIXAS (André, 02/10 12:3x): em cima o cargo e o carimbo; embaixo o resumo, uma
   linha só, cortado por item. */
.ap-cargo-h{min-height:56px!important;display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"cargo carimbo chevron" "resumo resumo resumo";
  align-items:center;gap:2px var(--e2);padding:var(--e3) var(--e1)}
.ap-cargo-n{grid-area:cargo;font:600 17px/1.2 var(--font-sans);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-cargo-ap{grid-area:carimbo;justify-self:end}
.ap-cargo-s{grid-area:chevron;align-self:center;margin-left:0}
.ap-cargo-l{grid-area:resumo;font:400 14px/1.35 var(--font-sans);color:var(--muted);min-width:0;
  display:flex;flex-wrap:nowrap;gap:var(--e2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ap-cargo-l:empty{display:none}
.ap-cargo-l .ap-item{flex:0 0 auto;white-space:nowrap}
.ap-cargo-l .ap-item+.ap-item::before{content:"·";color:var(--axis);margin-right:var(--e2)}
.ap-cargo-s{width:9px;height:9px;border-width:0 1.5px 1.5px 0;border-color:var(--axis);
  margin-left:auto;margin-right:var(--e3);flex:0 0 auto;
  transition:transform .22s cubic-bezier(.4,0,.2,1)}
.ap-cargo{border-bottom:0}
.ap-cargo+.ap-cargo{border-top:0;position:relative}
.ap-cargo+.ap-cargo::before{content:"";position:absolute;top:0;left:var(--e4);right:0;
  height:1px;background:var(--border)}
@media (max-width:560px){
  .ap-cargo-n{font-size:16px}
  .ap-cargo-l{font-size:14px}
}

/* B2 · a marca no topo também no desktop */
@media (min-width:900px){
  .brand-logo{height:26px}
  .ap-app{font:600 17px/1 var(--font-sans);color:var(--fg)}
}

/* B16 · a coluna de conteúdo não vira planilha */
.ap-painel{max-width:880px}
@media (min-width:1024px){.ap-lugares{top:72px}}

/* B4 · a barra de eleitores: número e trilha como um objeto só */
.ap-eleitores{display:grid;gap:var(--e2);margin:var(--e2) 0 var(--e5)}
.ap-eleitores-t{margin-bottom:0}
.ap-eleitores-trilha{height:4px;border-radius:2px;background:var(--border)}
.ap-eleitores-barra{transition:width .6s cubic-bezier(.4,0,.2,1)}
/* a linha embaixo da barra tem altura fixa, com ou sem o «faltam»: aos 100% o texto some (dizer
   «faltam 0,0%» é ruído) e, sem o `min-height`, a linha perdia a altura e a barra passava por cima
   da abstenção (André, 04/10 20:2x, print do DF com 100% apurado) */
.ap-eleitores[data-falta]::after{content:attr(data-falta);display:block;min-height:1.3em;
  font:400 13px/1.3 var(--font-sans);color:var(--muted);text-align:right}
/* a abstenção fica na MESMA linha do «faltam», à esquerda: é absoluta, então não ocupa lugar no
   fluxo e a linha não cresce nem empurra nada (a linha já existe por causa do «faltam») */
.ap-eleitores{position:relative}
.ap-eleitores[data-abst]::before{content:attr(data-abst);position:absolute;left:0;bottom:0;
  font:400 13px/1.3 var(--font-sans);color:var(--muted)}

/* B7 · a linha de candidato: % grande, votos embaixo, selo só quando o TSE marcar */
.ap-linha-r .ap-pc{font:600 20px/1.1 var(--font-sans)}
.ap-sub-r .ap-votos{font:400 13px/1.35 var(--font-sans)}
.ap-linha .ap-av{width:36px!important;height:36px!important}
.ap-linha{grid-template-columns:36px minmax(0,1fr)}
.ap-eleito-ok{color:#0f7a54;font-weight:700;margin-right:var(--e1)}
.ap-st{font:600 11px/1 var(--font-sans);background:#eaf7f1;color:#0f7a54;padding:3px 6px;
  border-radius:4px}
.ap-st[data-neutra]{background:var(--soft);color:var(--muted)}

/* B8 · a barra empilhada de partidos, acima da lista */
.ap-pilha{margin:var(--e3) 0 var(--e4);max-width:1280px}
.ap-pilha-t{display:flex;height:28px;border-radius:4px;overflow:hidden;background:var(--soft)}
.ap-pilha-s{display:block;height:100%;box-shadow:inset -1px 0 0 #fff}
.ap-pilha-leg{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);margin-top:var(--e2)}
.ap-pilha-i{display:flex;flex-direction:column;gap:2px;min-width:0}
.ap-pilha-i b{font:600 11px/1 var(--font-sans);color:#fff;padding:3px 5px;border-radius:3px;
  align-self:flex-start}
.ap-pilha-i span{font:600 17px/1.1 var(--font-sans);color:var(--fg);
  font-variant-numeric:tabular-nums}

/* B14 · o número que muda pisca o fundo — e só para quem aceita movimento */
@media (prefers-reduced-motion:no-preference){
  [data-mudou]{animation:ap-mudou .9s ease-out}
  @keyframes ap-mudou{from{background:var(--accent-soft)}to{background:transparent}}
}
@media (prefers-reduced-motion:reduce){
  .ap-eleitores-barra,.ap-barra-c,.ap-banc-b,.ap-cargo-s{transition:none!important}
}

/* o ponto de vida fica junto do relógio, não cresce com a fonte nova */
.ap-hora{display:inline-flex;align-items:center;gap:var(--e2)}
.ap-hora .ap-vivo{width:7px;height:7px;flex:0 0 auto}

/* ===== DECISÕES C2 (André, 02/10/2026 00:0x: «acato suas recomendações») ===== */

/* C2.1 · a bandeira é retângulo 4:3 e a sigla é o elemento principal */
.ap-bandeira{border-radius:3px!important;box-shadow:0 0 0 1px var(--sombra)}
.ap-bt b{font:600 17px/1.1 var(--font-sans)}
.ap-h1 .ap-bandeira{vertical-align:-6px;margin-right:var(--e3)}
.ap-nav-b .ap-bandeira{display:none}

/* C2.4 · a marca da maioria */
.ap-50{background:var(--axis)}
.ap-50 span{font:400 11px/1.2 var(--font-sans);color:var(--muted);background:var(--bg);
  padding:0 3px}
.ap-pilha-maioria{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--fg)}
.ap-pilha-t{position:relative}
.ap-pilha-rot{font:400 11px/1.3 var(--font-sans);color:var(--muted);margin-top:var(--e1);
  display:block}

/* C2.5 · o perdedor esmaece — só depois de o TSE marcar */
.ap-linha[data-perdeu] .ap-nome,
.ap-linha[data-perdeu] .ap-sub-l,
.ap-linha[data-perdeu] .ap-pc{color:var(--muted)}
.ap-linha[data-perdeu] .ap-barra-c{background:var(--border)!important}

/* C2.3 · a frase do resultado, uma linha */
.ap-frase{font:400 15px/1.45 var(--font-sans);color:var(--fg);margin:0 0 var(--e4);
  max-width:62ch}
.ap-cargo-l[data-frase]{color:var(--fg);white-space:normal}

/* ============================================================================================
   DESKTOP (≥1024 px) — desenho próprio, não o celular esticado (André, 02/10/2026 11:0x:
   «o desktop pode ter mapa, pode ter tudo»). Abaixo de 1024 px nada muda.
   ========================================================================================== */
.ap-busca-topo:empty{display:none}

@media (min-width:1024px){
  /* a barra de app é do celular */
  .ap-nav{display:none!important}
  .ap{padding-bottom:64px}

  /* a busca é um campo no topo da apuração */
  .ap-busca-topo{max-width:1600px;margin:0 auto var(--e5);position:relative;z-index:20}
  .ap-busca-topo .ap-busca{max-width:520px}
  .ap-busca-topo .ap-busca-i{min-height:44px;font-size:15px}
  .ap-busca-topo .ap-busca-r{position:absolute;left:0;top:100%;width:min(560px,100%);
    background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:0 8px 28px rgba(10,10,10,.1);max-height:60vh;overflow:auto;z-index:30;
    margin-top:var(--e1)}
  .ap-busca-topo .ap-busca-r:empty{display:none}
  .ap-busca-topo .ap-res{padding-left:var(--e4);padding-right:var(--e4)}
  .ap-busca-topo .ap-hist-cab{padding-left:var(--e4);padding-right:var(--e3)}

  /* mapa à esquerda (fixo ao rolar), lugar selecionado à direita */
  .ap-duas{grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:var(--e8);max-width:1600px;
    margin-left:auto;margin-right:auto}
  .ap-lugares{position:sticky;top:calc(var(--faixa) + 16px);padding-right:var(--e3)}
  .ap-mapa svg{max-height:min(62vh,620px)}
  .ap-bloco-mapa{margin-top:0}

  /* a fileira dos estados abaixo do mapa: compacta, sem caixa */
  .ap-botoes{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:var(--e2) var(--e3);
    margin-top:var(--e5)}
  .ap-bt{min-height:40px;gap:var(--e2)}
  .ap-bt b{font-size:15px}

  /* tipografia de desktop: a tela respira */
  .ap-painel{max-width:none}
  .ap-h1{font-size:34px}
  .ap-cargo-n{font-size:18px}
  .ap-cargo-h{min-height:60px!important}
  .ap-linha .ap-nome{font-size:16px}
  .ap-linha-r .ap-pc{font-size:22px}
  .ap-eleitores-n{font-size:14px}
  .ap-faixa-in{min-height:48px;font-size:14px}
  .ap-frase{font-size:15px}
}

/* o selecionado se distingue pela COR, nunca por traço (André, 03/10: «o destaque tem que estar
   só na parte pintada») — a cor vem do `fill` que o JS calcula */
.ap-mapa path[data-sel]{stroke:none}

@media (min-width:1024px){
  .ap-bt-nac{grid-column:1/-1;border-bottom:1px solid var(--border);padding-bottom:var(--e3);
    margin-bottom:var(--e2)}
  .ap-bt-nac b{font-size:17px}
}

/* o cartão do mapa (desktop) */

/* ===== CORREÇÕES DO DESKTOP (02/10/2026 11:0x) ===== */

/* 1 · nenhuma monoespaçada no conteúdo — a régua já dizia, e tinha sobrado em quatro lugares */
.ap-chip,.ap-mais,.ap-bt span,.ap-sg,.ap-cartao-ap,.ap-cartao-l i,.ap-res-n i,.ap-banc-v,
.ap-tab th,.ap-tab .n,.ap-eleitores-n,.ap-eleitores-p,.ap-50 span,.ap-pilha-rot,.ap-mapa text{font-family:var(--font-sans)!important}

/* 3 · o andamento se diz UMA vez: a faixa não repete o preenchimento da barrinha */
.ap-faixa::before{display:none}

/* 5 · uma rolagem só: no desktop a PÁGINA rola; o mapa fica fixo sem barra própria */
@media (min-width:1024px){
  .ap-lugares{overflow:visible;max-height:none}
}

/* ====================== I6 · migalha ====================== */
.ap-migalha{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
  font:400 12px/1 var(--font-sans);color:var(--muted);margin:0 0 var(--e3)}
.ap-migalha a,.ap-migalha .ap-migalha-r{color:var(--muted);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.ap-migalha a:hover{color:var(--fg)}
.ap-migalha b{color:var(--fg);font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.ap-migalha span{color:var(--axis)}

/* ====================== I3 · participação ====================== */
.ap-part{margin:calc(-1 * var(--e3)) 0 var(--e5)}
.ap-part-h{display:flex;align-items:center;gap:var(--e2);width:100%;min-height:44px;
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
  font:400 12px/1 var(--font-sans);color:var(--muted)}
.ap-part-h:hover{color:var(--fg)}
.ap-part.aberto .ap-part-h{color:var(--fg)}
.ap-part.aberto .ap-cargo-s{transform:rotate(-135deg);border-color:var(--accent)}
.ap-part-g{display:grid;grid-template-columns:1fr auto;gap:var(--e1) var(--e4);margin:var(--e1) 0 0}
.ap-part-g dt{font:400 13px/1.5 var(--font-sans);color:var(--muted)}
.ap-part-g dd{margin:0;text-align:right;display:flex;align-items:baseline;justify-content:flex-end;
  gap:var(--e2);font:400 12px/1.5 var(--font-sans);color:var(--context)}
.ap-part-g dd b{font:600 13px/1.5 var(--font-sans);color:var(--ink);
  font-variant-numeric:tabular-nums}

/* ====================== I2 · barra do duelo ====================== */
.ap-duelo{margin:0 0 var(--e4);position:relative}
.ap-duelo-t{position:relative;display:flex;height:14px;border-radius:7px;overflow:hidden;
  background:var(--soft)}
.ap-duelo-s{height:100%;transition:width .5s ease}
/* A marca dos 50% fica na camada de cima e ganha um fio da cor do fundo dos dois lados: sem ele,
   com o candidato em 49,5%, os 2 px de cinza entre a cor e a linha não se viam e parecia que ele
   tinha passado dos 50 (André, 04/10 18:00: «a barra de 50% ultrapassada… tá errado»). O fio usa
   `--divisa` — branco no claro, o fundo no escuro —, e o preto continua centrado no 50% exato. */
.ap-duelo-50{position:absolute;left:50%;top:-3px;height:20px;width:2px;background:var(--marca);
  transform:translateX(-1px);z-index:2;box-shadow:0 0 0 1px var(--divisa)}
.ap-duelo-rot{position:relative;height:12px}
.ap-duelo-rot span{position:absolute;left:50%;top:2px;transform:translateX(-50%);
  font:500 12px/1 var(--font-sans);color:var(--carimbo);white-space:nowrap}
.ap-duelo-pes{display:flex;justify-content:space-between;gap:var(--e4);margin-top:var(--e2)}
.ap-duelo-p{display:flex;flex-direction:column;gap:1px;min-width:0}
.ap-duelo-p.dir{text-align:right;align-items:flex-end}
.ap-duelo-p b{font:600 15px/1.1 var(--font-sans);color:var(--ink);font-variant-numeric:tabular-nums}
.ap-duelo-p span{font:400 12px/1.3 var(--font-sans);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38vw}
@media (min-width:1024px){.ap-duelo-p span{max-width:220px}}

/* ====================== I13 · linha de corte ====================== */
.ap-corte{position:relative;height:0;border-top:2px solid var(--marca);margin:var(--e3) 0 var(--e4)}
.ap-ficha-g.ap-corta{grid-template-columns:minmax(0,1fr);max-height:min(560px,70vh);overflow:auto}
.ap-corte-f{grid-column:1/-1;margin:var(--e2) 0 var(--e3)}
.ap-corte-f span{background:var(--soft)}
.ap-falta-f{grid-column:1/-1;margin-top:-2px}
.ap-corte span{position:absolute;right:0;top:-8px;background:var(--bg);padding:0 0 0 var(--e2);
  font:500 12px/1 var(--font-sans);color:var(--ink);white-space:nowrap}
/* a linha mora numa faixa própria do grid da linha de candidato: sem isto ela caía na coluna 1 e
   cavalgava o «nº · partido · federação» nas telas estreitas */
.ap-falta{grid-column:1/-1;display:block;width:100%;margin-top:1px;
  font:400 12px/1.3 var(--font-sans);color:var(--carimbo);text-align:right;
  font-variant-numeric:tabular-nums}

/* ====================== I4 · hemiciclo ====================== */
.ap-hemi-box{margin:var(--e2) 0 var(--e4)}
.ap-hemi{width:100%;height:auto;display:block;max-width:500px;overflow:visible}
.ap-hemi-maioria{stroke:var(--marca);stroke-width:.7;stroke-linecap:round}


/* ====================== nº 37 · mapa e primeira dobra ====================== */
/* a escala de três tons da legenda (DecideBrasil: «quem lidera e com quanto») */
.ap-escala{display:inline-flex;gap:2px;margin-right:var(--e2);flex:0 0 auto}
.ap-escala i{width:12px;height:12px;border-radius:2px;display:block}
.ap-escala-rot{flex:0 0 100%;font:400 12px/1.4 var(--font-sans);color:var(--muted)}
.ap-legenda-mapa{margin-bottom:var(--e3)}
/* o último estado visto é MARCADO, nunca movido de lugar */
.ap-bt[data-visto] b{position:relative}
.ap-bt[data-visto] b::after{content:"";position:absolute;left:50%;bottom:-6px;width:5px;height:5px;
  margin-left:-2.5px;border-radius:50%;background:var(--accent)}

@media (min-width:1024px){
  /* a cabeça fica só com a busca: o título desceu para a coluna da direita */
  .ap-cabeca{display:flex;align-items:center;justify-content:flex-end;gap:var(--e6);
    padding:var(--e5) 0 var(--e3);flex-wrap:nowrap}
  .ap-cabeca-l:empty{display:none}
  .ap-painel>.ap-tit{margin:0 0 var(--e3)}
  .ap-painel>.ap-tit .ap-h1{font-size:clamp(28px,3vw,40px)}
  .ap-cabeca .ap-busca-topo{margin:0;flex:0 1 520px;max-width:520px}
  .ap-cabeca .ap-busca-topo .ap-busca{max-width:none}
  /* mapa e painel começam na mesma altura */
  .ap-duas{margin-top:0}
  .ap-painel{padding-top:0}
  .ap-lugares>.ap-bloco-mapa:first-child{margin-top:0}
  .ap-mapa svg{max-height:min(66vh,680px)}
}

/* ====================== nº 40/41 · mapa de bandeirinhas ======================
   O seletor de lugar é o Brasil desenhado com as próprias bandeiras: 27 peças iguais na posição
   aproximada da geografia. Vale no celular e no desktop; o mapa geográfico saiu. */
/* o Brasil é uma peça como as outras, com a bandeira NO MÍNIMO do tamanho das dos estados
   (André, 03/10 14:1x) */
.ap-nac{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-decoration:none;color:var(--fg);min-height:44px;margin:0 auto var(--e3);
  padding:var(--e1) var(--e3);border-radius:var(--radius);width:fit-content}
.ap-nac .ap-bandeira{display:block;width:34px;height:auto;aspect-ratio:4/3;object-fit:cover}
.ap-nac b{font:600 15px/1 var(--font-sans)}
.ap-nac span{font:500 12px/1 var(--font-sans);color:var(--muted);
  font-variant-numeric:tabular-nums}
.ap-nac.ativo{background:var(--soft)}
.ap-nac.ativo b{color:var(--accent)}

.ap-grade{display:grid;grid-template-columns:repeat(6,minmax(0,52px));
  grid-auto-rows:minmax(44px,auto);gap:7px;justify-content:center;align-content:start;
  margin:0 auto}
.ap-peca{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;width:100%;min-height:44px;padding:2px 0;border-radius:var(--radius);
  text-decoration:none;color:var(--ink);background:none;border:0;
  transition:background-color .12s ease}
/* bandeirinha menor e sempre igual: 4:3, mesma largura para as 27, com folga de cada lado */
.ap-peca .ap-bandeira{display:block;width:27px;height:auto;aspect-ratio:4/3;object-fit:cover;
  flex:0 0 auto}
.ap-peca b{font:600 13px/1 var(--font-sans);letter-spacing:.02em;color:var(--fg);
  position:relative}
/* o destaque é SÓ preenchimento — nada de contorno (André, 03/10) */
.ap-peca.ativo{background:var(--accent-soft)}
.ap-peca.ativo b{color:var(--accent)}
.ap-peca[data-visto] b::after{content:"";position:absolute;left:50%;bottom:-4px;width:4px;
  height:4px;margin-left:-2px;border-radius:50%;background:var(--accent)}

@media (max-width:380px){
  .ap-grade{grid-template-columns:repeat(6,minmax(0,48px));gap:6px}
  .ap-peca .ap-bandeira{width:25px}
  .ap-nac .ap-bandeira{width:32px}
}
@media (min-width:1024px){
  /* a grade cresce com a coluna: o tamanho da peça vem do JS (`--peca`) */
  .ap-grade{gap:6px}
  .ap-grade[data-ajustada]{grid-template-columns:repeat(6,var(--peca-l,var(--peca)));
    grid-auto-rows:var(--peca);justify-content:center;align-content:start}
  .ap-grade[data-ajustada] .ap-peca{width:var(--peca-l,var(--peca));height:var(--peca);
    padding:0;gap:4px;justify-content:center}
  .ap-grade[data-ajustada] .ap-peca .ap-bandeira{width:min(62%,60px);
    max-height:calc(var(--peca) * 0.56)}
  .ap-grade[data-ajustada] .ap-peca b{font-size:clamp(13px,calc(var(--peca) * 0.2),20px)}
  /* a peça «Brasil» é uma célula da grade, no canto de cima, alinhada ao Acre: mesmo tamanho
     das outras, com a bandeira um pouco maior (ela nunca pode ser menor que as dos estados) */
  .ap-grade>.ap-nac{grid-row:1;grid-column:1;margin:0;padding:2px 0;
    width:var(--peca-l,var(--peca));height:var(--peca)}
  .ap-grade[data-ajustada]>.ap-nac .ap-bandeira{width:min(68%,64px)}
  .ap-grade[data-ajustada]>.ap-nac b{font-size:clamp(12px,calc(var(--peca) * 0.19),19px)}
  .ap-grade>.ap-nac span{display:none}      /* o % não cabe na célula */
}

/* ====================== nº 43 · seletor 2026 | 2022 ====================== */
.ap-anos{display:inline-flex;align-items:center;gap:2px}
.ap-ano,.ap-turno-b{all:unset;cursor:pointer;min-height:28px;padding:0 10px;border-radius:999px;
  font:600 12px/1 var(--font-sans);color:var(--muted);display:inline-flex;align-items:center;
  font-variant-numeric:tabular-nums}
.ap-ano:hover,.ap-turno-b:hover{background:var(--soft);color:var(--fg)}
.ap-ano.ativo,.ap-turno-b.ativo{background:var(--fg);color:#fff}
.ap-ano:focus-visible,.ap-turno-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ap-turnos{display:inline-flex;align-items:center;gap:2px;margin-left:var(--e3);
  padding-left:var(--e3);border-left:1px solid var(--border)}
.ap-anos-slot{margin-left:var(--e4)}
/* 2022 não é ao vivo: fundo de arquivo, sem pulso verde */
.ap-faixa[data-historico]{background:var(--arquivo)}
.ap-faixa[data-historico] .ap-vivo{display:none}
.ap-faixa[data-historico] .ap-apurado{color:var(--fg);font-weight:600}
.ap-h1-ano{font:400 .5em/1 var(--font-sans);color:var(--muted);letter-spacing:0;
  white-space:nowrap;margin-left:.35em}
@media (max-width:560px){
  .ap-anos-slot{margin-left:var(--e2)}
  .ap-ano,.ap-turno-b{padding:0 8px;font-size:11px}
  .ap-turnos{margin-left:var(--e2);padding-left:var(--e2)}
}
.ap-volta-26{all:unset;cursor:pointer;font:600 13px/1 var(--font-sans);color:var(--accent);
  text-decoration:underline;min-height:44px;display:inline-flex;align-items:center}

/* ====================== nº 52/57 · abas de cargo (celular e desktop) ====================== */
/* TODAS as abas cabem na tela E nenhuma palavra se parte (André, 03/10 15:01 e 15:09). Colunas
   iguais obrigavam «Presidência» (72 px) a caber em 65 px e o navegador hifenizava; agora cada aba
   tem a largura do seu nome, espalhadas na faixa, com a fonte acompanhando a tela. */
.ap-abas{display:flex;justify-content:space-between;align-items:flex-end;gap:0;--vao:7px;
  border-bottom:1px solid var(--border);margin:var(--e4) 0 var(--e4)}
/* a faixa respeita a margem da página: encostar na borda ficou feio (André, 03/10 15:23) */
@media (max-width:1023px){
  .ap-abas{margin-left:0;margin-right:0}
  .ap-aba{font-size:clamp(13px,3.45vw,15px)}
  /* a margem da página no celular é de 16 px (era 24): os 16 px que sobram viram respiro entre
     as abas e o fio que as separa */
  .ap{padding-left:16px;padding-right:16px}
}
/* um fio fino entre as abas: elas se separam sem gastar largura (André, 03/10 15:48). É um
   elemento de verdade, para cair no meio do vão que o `space-between` cria. */
.ap-aba-sep{flex:0 0 1px;align-self:center;width:1px;height:14px;background:var(--border);
  margin-bottom:var(--e2)}
.ap-aba{all:unset;cursor:pointer;text-align:center;padding:0 0 var(--e2);
  font:600 clamp(13px,3.7vw,15px)/1.2 var(--font-sans);color:var(--muted);
  white-space:nowrap;hyphens:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  display:inline-flex;align-items:flex-end;justify-content:center;flex:0 0 auto}
.ap-aba.ativa{color:var(--fg);border-bottom-color:var(--accent)}
.ap-aba:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ap-aba-corpo:empty{display:none}
/* dentro da aba o cargo não repete o próprio nome nem a setinha */
.ap-aba-corpo>.ap-cargo-h,.ap-aba-corpo .ap-cargo-s{display:none}
@media (min-width:1024px){
  .ap-abas{margin-top:var(--e5);justify-content:flex-start;gap:clamp(14px,2vw,30px)}
  .ap-aba{font-size:clamp(14px,1.05vw,16px)}
}

/* ====================== nº 57 · o logo nunca some ====================== */
.nav{position:sticky;top:0;z-index:70;background:var(--bg)}
@media (max-width:1023px){
  /* 1ª linha: logo + «Eleições 2026» + hora com o pulso, fixa no topo */
  .nav-inner{display:flex;align-items:center;gap:var(--e3);flex-wrap:nowrap}
  .nav-inner .ap-hora{margin-left:auto;display:inline-flex;align-items:center;gap:var(--e2);
    font:500 12px/1 var(--font-sans);color:var(--muted);white-space:nowrap}
  body.ap-topo-celular .ap-turno{display:none}
  /* 2ª linha: a faixa, só com os botões de ano */
  .ap-faixa{top:var(--topo-nav,56px)}
  .ap-faixa-in{padding:var(--e1) var(--e4);min-height:40px;gap:var(--e2)}
  .ap-anos-slot{margin-left:0}
}


/* ====================== nº 60 · topo preso: logo, ano e lugar ====================== */
@media (max-width:1023px){
  /* (1) o cabeçalho do site já é sticky; (2) a faixa do ano gruda embaixo dele;
     (3) o título com a bandeira gruda embaixo dos dois (André, 03/10 15:16). */
  .ap-faixa{position:sticky;top:var(--topo-nav,56px);z-index:60}
  .ap-tit{position:sticky;top:calc(var(--topo-nav,56px) + var(--topo-faixa,44px));z-index:55;
    background:var(--bg);margin:0;padding:var(--e2) 0 var(--e1)}
  .ap-tit .ap-h1{font-size:22px;line-height:1.15}
}
@media (min-width:1024px){
  .ap-painel>.ap-tit{position:sticky;top:calc(var(--faixa) + 8px);z-index:40;background:var(--bg);
    padding-bottom:var(--e2)}
}

/* ====================== nº 61 · a grade de Estados cabe na tela (celular) ====================== */
@media (max-width:1023px){
  html:has(body.ap-em-mapa),body.ap-em-mapa{overflow:hidden;height:100%}
  body.ap-em-mapa .ap-lugares{overflow:hidden}
  .ap-grade[data-ajustada]{grid-template-columns:repeat(6,var(--peca));grid-auto-rows:var(--peca);
    gap:0;justify-content:center;align-content:center}
  .ap-grade[data-ajustada] .ap-peca{width:var(--peca);height:var(--peca);padding:0;
    justify-content:center;gap:2px}
  .ap-grade[data-ajustada] .ap-peca .ap-bandeira{width:min(72%,34px)}
  .ap-grade[data-ajustada] .ap-peca b{font-size:clamp(11px,calc(var(--peca) * 0.26),15px)}
}

/* ====================== nº 62 · Candidatos | Partidos ====================== */
.ap-visoes{display:inline-flex;align-items:center;gap:2px;margin:0 0 var(--e4)}
.ap-visao{all:unset;cursor:pointer;min-height:30px;padding:0 12px;border-radius:999px;
  font:600 12px/1 var(--font-sans);color:var(--muted);display:inline-flex;align-items:center}
.ap-visao:hover{background:var(--soft);color:var(--fg)}
.ap-visao.ativo{background:var(--fg);color:#fff}
.ap-visao:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* nome de partido e de federação nunca quebra no meio da palavra */
.ap-banc-sg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;hyphens:none;
  word-break:keep-all}

/* ====================== nº 71 · botão claro/escuro (o mais minimalista possível) ============
   André 03/10 17:57: «o padrão é claro e lá em cima, depois de "atualizado em…", tem um botão
   para converter, do jeito mais minimalista possível». Só o ícone — lua no claro, sol no
   escuro —, sem texto, borda, fundo ou círculo, na cor do texto secundário. A área de toque
   tem 40×40 px e é invisível: as margens negativas a devolvem ao fluxo, para a faixa do topo
   não ganhar um pixel de altura. Sem hover.
   Mora DENTRO do `.ap-hora` para nunca se separar dele: no celular o `arrumaTopo()` leva a hora
   inteira para o cabeçalho, e o botão vai junto — «lá em cima, depois de atualizado às». */
.ap-tema{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:inline-grid;
  place-items:center;width:16px;height:16px;color:var(--muted);flex:0 0 auto}
/* a área de toque (40×40) é um pseudo-elemento invisível: não ocupa lugar, então o topo não
   ganha altura nem largura e o ícone não é empurrado para fora da tela no celular */
.ap-tema::after{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;
  transform:translate(-50%,-50%)}
.ap-tema .ap-ico{width:16px;height:16px}
/* no celular ele mora na faixa: encostado na margem direita, sob o «atualizado às» */
.ap-faixa-in>.ap-tema{margin-left:auto}
.ap-tema:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:50%}

/* ============================================================================================
   ESCURO — ESCOLHA DA PESSOA, nunca o padrão (nº 71, André 03/10 17:56: «mas tem que ter a
   opção para a pessoa que prefere»). Entra só com `data-theme="dark"` no <html>, que o botão
   da faixa grava no aparelho (`localStorage`) e um script no <head> aplica antes do primeiro
   desenho. Sem `prefers-color-scheme`: o aparelho no escuro NÃO escurece a página.
   Fundo uniforme (mãe, 17:53): o conteúdo não vira «caixa» mais escura — painel na cor do
   fundo, sem borda de caixa. As trilhas de barra usam `--soft`, que aqui é só um fio acima
   do fundo, o bastante para a barra vazia existir.
   ========================================================================================== */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#15161a; --soft:#22242b; --fg:#f2f2f3; --ink:#e8e8ea; --muted:#a2a3a8;
  --border:#2c2f36; --accent:#ff6b7a; --accent-dark:#ff8a95; --accent-soft:#2a1a1e;
  --grid:#2c2f36; --axis:#4a4d55; --context:#9a9ba1;
  --vazio:#2f323a; --neutro:#3a3d45; --marca:#f2f2f3; --carimbo:#a2a3a8;
  --arquivo:#20222a; --divisa:#15161a; --sombra:rgba(255,255,255,.14);
}
/* o cabeçalho do site, dentro da apuração */
[data-theme="dark"] .nav{background:var(--bg);border-bottom:1px solid var(--border)}
[data-theme="dark"] .nav-links a{color:var(--muted)}
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a[aria-current]{color:var(--fg)}
[data-theme="dark"] .nav-cta{border-color:var(--border);color:var(--fg)}
[data-theme="dark"] .brand-logo{content:url("logo-apuracao-escuro.png")}
/* trilhas de barra (o vazio da barra precisa existir) */
[data-theme="dark"] .ap-eleitores-trilha,
[data-theme="dark"] .ap-banc-t,
[data-theme="dark"] .ap-duelo-t,
[data-theme="dark"] .ap-barra-t,
[data-theme="dark"] .ap-trilha,
[data-theme="dark"] .ap-pilha-t{background:var(--soft)}
/* FUNDO UNIFORME: tudo o que é painel, faixa, ficha ou aba fica na cor do fundo */
[data-theme="dark"] .ap-ficha,
[data-theme="dark"] .ap-nav,
[data-theme="dark"] .ap-faixa,
[data-theme="dark"] .ap-tit,
[data-theme="dark"] .ap-aba-corpo,
[data-theme="dark"] .ap-cargo,
[data-theme="dark"] .ap-cargo-c,
[data-theme="dark"] .ap-painel,
[data-theme="dark"] .ap-corte span,
[data-theme="dark"] .ap-corte-f span{background:var(--bg)}
[data-theme="dark"] .ap-busca-i{background:var(--bg);color:var(--ink);border-color:var(--border)}
[data-theme="dark"] .ap-busca-topo .ap-busca-r{background:var(--soft);color:var(--ink);
  border-color:var(--border)}
[data-theme="dark"] .ap-ano.ativo,
[data-theme="dark"] .ap-turno-b.ativo,
[data-theme="dark"] .ap-visao.ativo{background:var(--fg);color:var(--bg)}
[data-theme="dark"] .ap-peca.ativo{background:var(--accent-soft)}
/* bandeira e foto ficam como são; só ganham um fio para não sumir no fundo escuro */
[data-theme="dark"] .ap-bandeira,
[data-theme="dark"] .ap-av,
[data-theme="dark"] .ap-linha img{box-shadow:0 0 0 1px var(--sombra)}
/* O LETREIRO NÃO SEGUE O TEMA (André, 03/10 18:12: «não tá para ver nada no escuro do
   letreiro»). Ele nasce escuro com texto claro, mas o fundo vinha de `--ink`, que no escuro
   clareia — faixa clara com texto claro, ilegível. Aqui a faixa ganha cor própria nos dois
   temas. Vai com `body` na frente porque o `letreiro.css` carrega DEPOIS deste arquivo e
   empata em especificidade; o `letreiro.css` é da #13 e não se mexe.
   Cuidado com curinga de classe: `[class*="letreiro"]` casava `body.tem-letreiro` e pintava o
   BODY de `--soft`, o que fazia o conteúdo parecer uma caixa mais escura com bordas. */
body .lt,
body .lt-selo{background:#111014}

/* ============================================================================================
   NADA SE MEXE ENQUANTO CARREGA (André, 03/10/2026 18:53: «quando ele tá lendo alguma coisa,
   move ali a luz verde e a lua… nada pode se mover enquanto outra coisa carrega»).
   Tudo o que o dado preenche já ocupa o espaço FINAL antes de o dado chegar. As medidas abaixo
   foram tiradas da página pronta, no ar, a 390 e a 1440 — não são chute.
   ========================================================================================== */
/* no desktop o campo de busca do topo sempre existe: enquanto o JS não o monta, o lugar dele já
   conta — senão a página desce 44 px quando ele aparece */
@media (min-width:1024px){
  .ap-busca-topo:empty{display:block;min-height:44px}
}
/* o «atualizado … às HH:MM» chega depois: o espaço dele fica guardado, sem texto falso */
#faixaHoraTexto{display:inline-block;min-width:190px;text-align:right}
/* o seletor 2026 | 2022 é montado em JS: o vão dele já existe */
.ap-anos-slot{display:inline-flex;align-items:center;min-width:97px;min-height:28px}
/* título do lugar e abas: a altura final desde o começo (quando estão escondidos, nada muda) */
.ap-tit{min-height:50px}
.ap-abas{min-height:28px}
@media (max-width:899px){
  #faixaHoraTexto{min-width:108px}
  .ap-anos-slot{min-width:89px}
  .ap-tit{min-height:39px}
  .ap-abas{min-height:27px}
}
/* o letreiro do desktop é a PRIMEIRA linha da página e só entra quando o script dele sobe:
   o espaço dele fica reservado desde o HTML, e a reserva sai no mesmo quadro em que ele entra */
/* O letreiro (#13) é a primeira linha da página no desktop, mas só aparece quando o arquivo dele
   chega. Em vez de reservar o espaço num elemento à parte — o que fazia a página descer 39 px no
   quadro em que ele entrava —, ele OCUPA o lugar dele desde o começo, escondido: mesma altura
   antes e depois, nada se move. `!important` porque o `[hidden]` do site é `display:none`. */
@media (min-width:900px){
  /* o `body` na frente é de propósito: o `letreiro.css` tem `.lt[hidden]{display:none!important}`
     e carrega depois deste arquivo — sem o peso extra de especificidade, ele vence e o lugar do
     letreiro some bem no meio do carregamento */
  body .lt[hidden]{display:block!important;visibility:hidden;height:39px}
  /* e, antes de o elemento dele sequer existir no HTML, o lugar fica guardado aqui. O `:has`
     tira esta reserva no MESMO layout em que o letreiro entra — por isso nada pula. */
  body:not(:has(.lt))::before{content:"";display:block;flex:0 0 auto;height:39px}
}
/* O rodapé do site não pode entrar na tela e sair de novo enquanto o conteúdo chega: a reserva de
   uma tela de altura vale SEMPRE, e não só até `data-pronto` — quando ela caía, o conteúdo ainda
   estava chegando, o rodapé subia para dentro da tela e descia logo depois (CLS de 0,0065 numa UF
   a 1440, medido em 04/10 11:41). */
@media (min-width:900px){
  main{min-height:calc(100vh - 120px)}
}

/* ====================== o botão «Análise» (painel da #15) ======================
   Celular: 4º item da barra de baixo, igual aos outros. Desktop: à direita da faixa do letreiro,
   que é a primeira linha da página (André, 03/10 18:23: «um botão ali embaixo de análise… do que
   aconteceu nos últimos 10 minutos»). Não é uma vista: nunca fica «ativo».
   Enquanto não há o que ler, ele fica apagado e não abre — mas CONTINUA no lugar, para a barra
   não mudar de forma no meio do carregamento. */
.ap-nav-b[data-nav="analise"].sem-nada{opacity:.4}
.ap-analise{display:none}
@media (min-width:900px){
  .ap-analise{position:fixed;top:0;right:0;z-index:81;display:inline-flex;align-items:center;
    gap:var(--e2);height:39px;padding:0 var(--e4);border:0;cursor:pointer;
    background:#111014;color:#e6e4e1;font:600 13px/1 var(--font-sans);letter-spacing:-.01em;
    border-left:1px solid rgba(255,255,255,.14)}
  .ap-analise .ap-ico{width:16px;height:16px}
  .ap-analise:focus-visible{outline:2px solid #fff;outline-offset:-4px}
  .ap-analise.sem-nada{opacity:.45;cursor:default}
}

/* ====================== o Exterior na grade e na tela ======================
   O globo entra no lugar da bandeira, no traço e na cor do texto, na mesma caixa 4:3 — assim a
   peça tem exatamente o tamanho das outras. O rótulo «Exterior» é maior que uma sigla de duas
   letras: ele encolhe o quanto precisa para caber na peça, sem quebrar linha. */
/* o globo é traço puro: a moldura das bandeirinhas (fio de 1 px e canto arredondado) não vale
   para ele, senão vira um quadro em volta do desenho */
.ap-globo{color:var(--fg);display:block;height:auto;aspect-ratio:4/3;flex:0 0 auto;
  box-shadow:none!important;border-radius:0!important;object-fit:fill}
.ap-peca-zz b,
.ap-peca-br b{font-size:11px;letter-spacing:-.02em;white-space:nowrap}
@media (min-width:1024px){
  .ap-grade[data-ajustada] .ap-peca-zz b,
  .ap-grade[data-ajustada] .ap-peca-br b{font-size:clamp(10px,calc(var(--peca) * 0.14),15px)}
}
@media (max-width:1023px){
  .ap-peca-zz b,
  .ap-peca-br b{font-size:10px}
}
.ap-h1 .ap-globo{width:36px}

/* ============ atalho «Estados» na linha do título (celular, tela Brasil) ============
   André, 04/10/2026 10:35. O botão é ABSOLUTO dentro do título, que já é `position:sticky` no
   celular e por isso já ancora filho absoluto — este bloco NÃO declara `position` para o título.
   (Foi o que quebrou a tela às 10:38: um `.ap-tit{position:relative}` aqui venceu o `sticky` de
   cima e o título caiu por cima das abas.)
   Fora do fluxo, o atalho não muda a altura da linha nem empurra nada. Sem hover. */
.ap-bt-estados{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;right:0;top:4px;
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;
  border:1px solid var(--border);border-radius:999px;color:var(--muted);
  font:600 12px/1 var(--font-sans);white-space:nowrap;z-index:1}
.ap-bt-estados .ap-ico{width:15px;height:15px}
.ap-bt-estados:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width:1024px){.ap-bt-estados{display:none}}

/* ============ a grade se monta ao entrar (nº 79, André 04/10/2026 10:48) ============
   Só `transform` e `opacity`: o layout não muda, o CLS continua zero e a página em volta fica
   parada. A peça já é clicável durante a animação — `animation` não bloqueia toque.
   O atraso vem do JS, por linha e coluna; o efeito inteiro cabe em 488 ms. */
/* enquanto a entrada está pendente, a grade existe e ocupa o lugar dela, mas NADA aparece: o
   primeiro quadro visível já é o começo do efeito (André, 04/10 11:15: «tem que vir o mapa com a
   animação, não pode aparecer nada antes»). Só `opacity` — o espaço continua reservado. */
.ap-grade[data-espera]>.ap-peca{opacity:0}
@media (prefers-reduced-motion:reduce){
  .ap-grade[data-espera]>.ap-peca{opacity:1}
}
/* a sonda da altura da tela PEQUENA (com a barra de endereço à vista): é dela que sai o tamanho
   da peça no celular, e não de `innerHeight`, que muda quando a barra some */
.ap-sonda{position:absolute;left:0;top:0;width:0;height:100vh;height:100svh;
  visibility:hidden;pointer-events:none}
@keyframes ap-entra-grade{
  from{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.9)}
  to{opacity:1;transform:none}
}
.ap-grade[data-anima]>.ap-peca{
  animation:ap-entra-grade var(--dur-entra,320ms) cubic-bezier(.2,.7,.3,1) both;
  animation-delay:var(--atraso,0ms);
  will-change:transform,opacity}
/* quem pediu menos movimento não vê nenhum */
@media (prefers-reduced-motion:reduce){
  .ap-grade[data-anima]>.ap-peca{animation:none}
}

/* ============ «fonte: TSE», a linha 2 do bloco da hora ============
   Vai logo abaixo de «● atualizado às HH:MM», na mesma fonte e no mesmo cinza (herdados), e
   alinhada ao TEXTO da linha 1, não ao pulso — por isso grade, e não flex. Estática no HTML, sem
   link e sem hover. A segunda linha cabe na altura que o topo já tinha: nem o cabeçalho nem a
   faixa crescem.
   Pelo ID de propósito: há três `.ap-hora` mais abaixo neste arquivo (uma delas dentro de
   `.nav-inner`), e qualquer uma venceria uma regra de classe escrita aqui. */
#faixaHora{display:inline-grid;grid-template-columns:auto auto auto;align-items:center;
  column-gap:var(--e2);row-gap:0;justify-items:start}
/* a linha 2 é JUSTIFICADA À DIREITA: o fim dela coincide com o fim de «atualizado às HH:MM», que é
   a margem direita do topo (André, 04/10 11:49: «tem que ficar alinhado, justificado à direita,
   bem no final da tela, abaixo do horário da atualização») */
#faixaHora>.ap-fonte{justify-self:end;text-align:right}
#faixaHora>.ap-vivo{grid-area:1/1}
#faixaHora>#faixaHoraTexto{grid-area:1/2;justify-self:end}
#faixaHora>.ap-fonte{grid-area:2/2;line-height:1;white-space:nowrap}
#faixaHora>.ap-tema{grid-area:1/3/3/4;align-self:center}

/* ============ a lista da busca não espreme os resultados ============
   Desde as 17h cada resultado pode ganhar uma 3ª linha — «603º · 0,01% · 2 votos» —, que só
   aparece quando o arquivo daquele cargo já está carregado. No desktop a lista é um flex em
   coluna com `max-height:60vh`: os itens encolhiam (o `flex-shrink` padrão) até o `min-height`
   de 44 px e o texto da 3ª linha invadia o resultado de baixo — medido no ar em 04/10 17:45:
   caixa até 268, texto até 274. Com `flex:0 0 auto` cada resultado fica do tamanho do próprio
   conteúdo e a lista rola, como já fazia. No celular nada muda: lá a lista não tem altura máxima
   e o encolhimento nunca acontecia. */
.ap-busca-r>.ap-res{flex:0 0 auto}

/* a lista da busca não se reposiciona sozinha: sem isto o navegador ancora a rolagem quando os
   itens trocam ou crescem (a 3ª linha que chega com o dado) e a lista anda sem ninguém pedir */
.ap-busca-r{overflow-anchor:none}