/* Agregador de pesquisas ao Senado — retrato de 2026-10-12 09:07, identidade sak.bio.
   Gerado por demos/eleicoes/importa_senado.py; não editar à mão. */
:root{
  --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;
  --soft-2:#f1efec; --radius:10px; --radius-lg:18px;
  --grid:#e8e6e3; --axis:#c9c6c1; --context:#7d7a75;
  --s1:#C40919; --s2:#2a78d6; --s3:#1baf7a; --s4:#eda100;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e8:32px;
}

/* A rolagem desta página é instantânea. O site inteiro usa `scroll-behavior:smooth`, e isso
   quebra TODA medida feita logo depois de um `scrollIntoView`: a caixa volta na posição antiga
   porque a animação ainda não acabou. Foi o que derrubou o clique na linha da lista e o balão
   do ⓘ na prova de 12/09/2026 — e é o mesmo motivo por que um leitor que usa teclado via o
   foco "pular" fora da tela. Esta página não tem âncora interna, então nada se perde. */
html{scroll-behavior:auto}

/* O cabeçalho e o hero vêm do site. Aqui só o que a régua do painel exige:
   nada cortado sem barra (ROLAGEM), teto de 1600 px (R25) e alvo de toque ≥ 24 px (R22). */
.page-hero{overflow:visible;max-width:1600px;margin-left:auto;margin-right:auto}
/* O brilho decorativo do hero do site é um ::before de 640 px em `right:-10%`, que o
   `overflow:hidden` da seção recortava — conteúdo escondido sem barra, e 38 px de rolagem
   lateral na página. Aqui ele fica DENTRO da caixa. */
.page-hero::before{top:0;right:0;width:min(560px,55%);height:100%}
/* O `.display` do site é grande e sobra sobre o que vem embaixo a partir de ~1120 px. */
.page-hero .ag-sub{margin-top:var(--e4);max-width:72ch}
.nav-links a{min-height:24px;display:inline-flex;align-items:center}
.nav-toggle{min-width:24px;min-height:24px}

.ag{max-width:1600px;margin:0 auto;padding:0 var(--e6) 64px;font-family:var(--font-sans);color:var(--ink)}
.ag-bloco{margin-top:var(--e8)}
.ag h2{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0;color:var(--fg)}
.ag-cab{position:relative;display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
  margin-bottom:var(--e3)}
.ag-sub{font-size:13px;color:var(--muted);margin:var(--e1) 0 0;line-height:1.5;max-width:78ch}

/* ---------- ⓘ : botão colado ao título, balão em dl Pergunta/Régua/Fora ---------- */
.ag-i{all:unset;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;min-width:24px;border:1px solid var(--border);border-radius:50%;
  font:500 12px/1 var(--font-mono);color:var(--muted);background:var(--bg);cursor:help;
  flex:0 0 auto}
.ag-i:hover,.ag-i:focus-visible{color:var(--accent);border-color:var(--accent)}
.ag-bal{position:absolute;z-index:40;top:calc(100% + 6px);left:0;width:300px;max-width:300px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 2px 10px rgba(0,0,0,.08);padding:var(--e3);display:none}
.ag-bal[data-aberto]{display:block}
.ag-bal dl{margin:0;font-size:12px;line-height:1.45}
.ag-bal dt{font:600 12px/1.3 var(--font-sans);color:var(--accent);margin-top:var(--e2)}
.ag-bal dt:first-child{margin-top:0}
.ag-bal dd{margin:2px 0 0;color:var(--ink)}

/* ---------- KPIs ---------- */
.ag-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,248px));gap:var(--e6);
  padding-top:var(--e4);border-top:1px solid var(--border)}
.ag-kpi{display:block;text-align:left;cursor:pointer;border:0;padding:0 var(--e4) 0 0;
  background:none;min-width:0;max-width:320px}
.ag-kpi:hover .rot,.ag-kpi:focus-visible .rot{color:var(--accent)}
.ag-kpi:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.ag-kpi b{display:block;font:600 38px/1 var(--font-sans);color:var(--fg);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ag-kpi .rot{display:block;margin-top:var(--e1);font:500 12px/1.35 var(--font-sans);
  color:var(--muted)}
.ag-kpi .ctx{display:block;margin-top:2px;font:400 12px/1.3 var(--font-sans);color:var(--muted)}

/* ---------- gráfico ---------- */
.ag-graf{min-width:0;padding:0}
.ag-graf svg{width:100%;height:auto;overflow:visible;display:block;margin-top:var(--e2)}
.ag-eixo{font:500 12px/1.4 var(--font-sans);color:var(--muted);margin:0}
.ag-eixo-x{margin-top:var(--e2)}
.ag-legenda{margin:0 0 var(--e2);font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;
  gap:var(--e1) clamp(8px,2cqi,20px);container-type:inline-size}
.ag-legenda > *{flex:0 0 100%}
.ag-legenda .n{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}
.fatos{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e1) var(--e3);
  font-size:12px;color:var(--muted)}
.fatos .n{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}
.fatos .sep{color:var(--muted)}
.ag-legenda .sep{color:var(--muted)}
/* O balão do mapa é um CARTÃO CLARO (André, 13/09/2026 11:4x: «o hover preto ficou
   esquisito»). Caixa preta sobre um mapa preto some dentro dele; o cartão branco com borda
   da casa se descola do desenho e é o mesmo cartão que o resto do site usa. */
.ag-dica{position:fixed;z-index:60;background:var(--bg);color:var(--ink);border-radius:10px;
  border:1px solid var(--border);
  padding:10px 12px;font-size:12px;line-height:1.45;pointer-events:none;
  max-width:min(340px,calc(100vw - 16px));box-shadow:0 6px 20px rgba(17,16,20,.13);
  overflow-y:auto;overscroll-behavior:contain}
/* no celular a lista pode passar da tela (Tocantins tem 8 nomes): o cartão rola por dentro,
   e para isso ele precisa receber o dedo */
@media (hover:none){ .ag-dica{pointer-events:auto;-webkit-overflow-scrolling:touch} }
.ag-dica b{font-weight:600}
/* o balão do mapa: estado, a grandeza, e os três primeiros — UMA linha cada */
.ag-dica .d-uf{font-weight:600;font-size:12px;margin-bottom:1px;white-space:nowrap}
.ag-dica .d-def{color:var(--muted);font-size:11px;margin-bottom:6px;white-space:nowrap}
.ag-dica .d-top{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.ag-dica .d-top li{white-space:nowrap;font-size:12.5px}
.ag-dica .d-top b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  margin-left:8px}
.ag-dica[hidden]{display:none}
.ag-vazio{font-size:13px;color:var(--muted);padding:var(--e2) 0;margin:0}

/* ---------- lista ---------- */
.ag-lista-wrap{border:1px solid var(--border);border-radius:var(--radius);
  display:flex;flex-direction:column;min-height:0}
.ag-rola{overflow:auto;max-height:620px;min-height:0;scrollbar-gutter:stable}
.ag-tab{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;table-layout:auto}
.ag-tab .trot{display:none}
/* O cabeçalho congela (régua 44) e não recebe clique: sem pointer-events:none ele tapa a
   primeira linha da tabela e o clique na pesquisa morria nele. */
.ag-tab th{position:sticky;top:0;z-index:2;background:var(--soft);text-align:left;
  font:500 12px/1.3 var(--font-sans);color:var(--muted);padding:var(--e3);
  border-bottom:1px solid var(--border);white-space:nowrap;pointer-events:none}
.ag-tab td{padding:var(--e3);border-bottom:1px solid var(--border);vertical-align:top;
  color:var(--ink);line-height:1.4}
.ag-tab tbody tr{cursor:pointer}
.ag-tab tbody tr:hover{background:var(--accent-soft)}
.ag-tab tbody tr:last-child td{border-bottom:0}
.ag-tab .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ag-tab .mono{font-family:var(--font-mono);white-space:nowrap}
.ag-tag{display:inline-block;font:500 12px/1.5 var(--font-sans);padding:1px 6px;border-radius:20px;
  border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.ag-tag.fora{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.ag-ficha{border-top:1px solid var(--border);background:var(--soft);padding:var(--e4)}
.ag-ficha h3{margin:0 0 var(--e3);font-size:15px;font-weight:600}
.ag-ficha dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--e3) var(--e6);margin:0;font-size:13px}
.ag-ficha dt{font:500 12px/1.3 var(--font-sans);color:var(--muted)}
.ag-ficha dd{margin:2px 0 0;color:var(--ink);line-height:1.45}
.ag-ficha .fechar{all:unset;cursor:pointer;font:500 12px var(--font-sans);color:var(--accent);
  margin-top:var(--e3);display:inline-flex;align-items:center;min-height:24px;
  border-bottom:1px solid currentColor}
.ag-ficha .elo{display:inline-flex;align-items:center;min-height:24px;margin-top:var(--e3);
  font-size:13px;color:var(--accent)}
.ag-filtro{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);padding:var(--e3);
  background:var(--bg);border-bottom:1px solid var(--border)}
.ag-chip{all:unset;cursor:pointer;font:500 12px/1.6 var(--font-sans);padding:2px 10px;
  border:1px solid var(--border);border-radius:20px;color:var(--muted);min-height:24px;
  display:inline-flex;align-items:center}
.ag-chip:hover{border-color:var(--accent);color:var(--accent)}
.ag-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.ag-fonte{max-width:1600px;margin:var(--e8) auto 0;font-size:12px;color:var(--muted);
  line-height:1.6}
.ag-fonte p{max-width:84ch}
.ag-fonte a{color:var(--accent);display:inline-block;min-height:24px;line-height:24px}
.ag-fonte h2{font-size:15px;margin:0 0 var(--e2);color:var(--fg)}

@media (max-width:839px){
  .ag-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ag-kpi{max-width:none}
}
@media (max-width:620px){
  /* em tela estreita cada fato ocupa a sua linha, em coluna explícita: com `display:block`
     no contêiner flex os spans se sobrepunham entre 320 e 520 px */
  .fatos{flex-direction:column;align-items:flex-start;gap:2px}
  .fatos .sep{display:none}
  .fatos .f{display:block;width:100%}
}
@media (max-width:900px){
  .ag{padding:0 var(--e4) 48px}
  .ag-kpis{gap:var(--e4)}
  /* tabela -> cartões: com nove colunas a linha ficava mais larga que a tela, a página rolava
     de lado e o clique na pesquisa caía fora da viewport. */
  .ag-tab thead{display:none}   /* o rótulo de cada coluna passa a viver dentro do cartão (.trot) */
  .ag-tab,.ag-tab tbody,.ag-tab tr,.ag-tab td{display:block;width:auto}
  .ag-tab tbody tr{border-bottom:1px solid var(--border);padding:var(--e2) 0}
  .ag-tab tbody tr:last-child{border-bottom:0}
  .ag-tab td{border-bottom:0;display:flex;gap:var(--e3);align-items:baseline;
    justify-content:space-between;padding:2px var(--e3);text-align:left}
  .ag-tab td.num{text-align:left}
  .ag-tab .trot{display:block;flex:0 0 auto;font:500 12px/1.4 var(--font-sans);
    color:var(--muted)}
  .ag-tab .tval{flex:1 1 auto;text-align:right;min-width:0}
  .ag-kpi b{font-size:28px}
  .ag-rola{max-height:560px}
  .ag-tab{font-size:12px}
  .ag-tab th,.ag-tab td{padding:var(--e2)}
  .ag-chip{min-height:44px;padding:8px 14px}
  .ag-nchip, .ag-maisnomes{min-height:44px;padding:6px 12px}   /* R22: alvo de toque no celular */
  .ag-i{width:44px;height:44px;min-width:44px}
  .nav-toggle{min-width:44px;min-height:44px}
  .ag-bal{width:min(300px,calc(100vw - 40px))}
  .ag-ficha .fechar,.ag-ficha .elo{min-height:44px}
}

/* ---------- entrada: mapa do Brasil ---------- */
/* A cor do mapa (#116, 13/09/2026 — «não é para ficar vermelho; tem que ser algo na
   identidade visual»). A identidade tem duas cores próprias: o vermelho `--accent` e a
   tinta `--ink`. O vermelho é o ACENTO — o que a página usa para apontar uma coisa de cada
   vez (o itálico do título, o link, o «Meu radar»); espalhado por 25 de 27 estados ele
   deixava de apontar e virava fundo, e concorria com a marca em cada tela. A tinta é a cor
   com que este site escreve: o mapa passa a ser a silhueta ESCRITA do país, o hover levanta
   um tom (mais luz = o estado sob o cursor), e o vermelho continua livre para acentuar
   fora do mapa. Estado sem página fica no papel do próprio site (`--soft-2`): não é uma
   segunda categoria pintada, é o que ainda não foi escrito. */
.ag-mapa{width:100%;height:auto;max-height:72vh;display:block;margin:0 auto}
.ag-mapa .uf{fill:var(--soft-2);stroke:#fff;stroke-width:1.1;pointer-events:none}
.ag-mapa .uf.on{fill:var(--ink);pointer-events:auto;transition:fill .12s}
.ag-mapa .uf.on:hover{fill:#3c3944}
/* O anel de foco é NOSSO, e só para quem navega por teclado. Sem isto o Chrome desenha o
   anel dele (laranja) ao TOCAR o estado no celular — visto em 13/09/2026 num toque no
   Amazonas: uma moldura laranja atravessando o mapa. `:focus` limpa, `:focus-visible` pinta. */
.ag-mapa .uf.on:focus,.ag-mapa .alvo:focus{outline:none}
.ag-mapa .uf.on:focus-visible{fill:#3c3944;stroke:#fff;stroke-width:2.6;
  outline:2px solid var(--ink);outline-offset:3px}
.ag-mapa .ufr{font:500 11px/1 var(--font-mono);fill:#fff;font-weight:700;pointer-events:none}
/* sigla que não cabe com folga no próprio estado (o DF, ~15×13 unidades): fica no lugar,
   em corpo menor, com halo ESCURO — sem ele o glifo branco some dentro da divisa branca,
   que é o defeito que o André apontou em 13/09/2026. O halo cobre o traço, não o vizinho. */
.ag-mapa .ufr.apertado{paint-order:stroke;stroke:var(--ink);stroke-width:2.6px;
  stroke-linejoin:round}

/* alvo do dedo nos estados pequenos: existe para o toque, não para a vista */
.ag-mapa .alvo{fill:transparent;cursor:pointer}
.ag-mapa .alvo:focus-visible{fill:rgba(255,255,255,.14);stroke:#fff;stroke-width:1.6;
  outline:2px solid var(--ink);outline-offset:2px}
.ag-rodape{max-width:1600px;margin:var(--e8) auto 0;font-size:12px;color:var(--muted);
  line-height:1.6}
#bl-estados .ag-filtro{border-bottom:0;padding:0;gap:var(--e2)}
.ag-chip.mudo{color:var(--muted);cursor:default;border-style:dashed}
.ag-chip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);
  text-decoration:none}
.ag-chip.on:hover{background:var(--accent);color:#fff}
.ag-chip .q{font-family:var(--font-mono);font-size:12px}
.ag-chip .sep{opacity:.55}
@media (max-width:900px){
  .ag-mapa{max-height:none}
  .ag-mapa .ufr{font-size:13px}
}

/* ---------- chips de candidato (ligam e desligam a linha) ---------- */
.ag-serie-chips{margin:0 0 var(--e3);display:block}
.ag-chips-linha{display:flex;flex-wrap:wrap;gap:var(--e2)}
.ag-nchip{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border:1px solid var(--border);border-radius:20px;min-height:28px;
  font:500 12px/1.4 var(--font-sans);color:var(--muted);background:var(--bg)}
.ag-nchip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c);
  flex:0 0 auto;opacity:.35}
.ag-nchip.on{color:var(--ink);border-color:var(--c)}
.ag-nchip.on::before{opacity:1}
.ag-nchip:hover{border-color:var(--c);color:var(--ink)}
/* «+N nomes» — a dobra da legenda no celular (12/09/2026, R4 em GO a 360 px). Mesma caixa do
   chip, sem amostra de cor: não é série, é porta para o resto da lista. */
.ag-maisnomes{all:unset;cursor:pointer;display:inline-flex;align-items:center;padding:3px 10px;
  border:1px dashed var(--border);border-radius:20px;min-height:28px;
  font:500 12px/1.4 var(--font-sans);color:var(--muted);background:var(--bg)}
.ag-maisnomes:hover{border-color:var(--ink);color:var(--ink)}
.ag-pt{transition:r .1s}
/* o ponto clicado volta a alfa cheio: é o único que precisa competir com o identificador */
.ag-pt.sel{stroke:var(--ink);stroke-width:2.4;fill-opacity:1;stroke-opacity:1}
.ag-pt:hover{fill-opacity:.85}

/* ---------- cadência ---------- */
.cad.c-serie{fill:var(--accent)}
.cad.c-fora{fill:#eda100}
.cad.c-so{fill:#c9c6c1}
.cad.sel{stroke:var(--ink);stroke-width:1.6}
.ag-escala{display:flex;flex-wrap:wrap;gap:var(--e1) clamp(8px,2cqi,20px);flex:0 0 100%;
  margin-top:var(--e1)}
.ag-escala .it{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.ag-escala .it::before{content:"";width:10px;height:10px;border-radius:2px;flex:0 0 auto}
.ag-escala .it.k-serie::before{background:var(--accent)}
.ag-escala .it.k-fora::before{background:#eda100}
.ag-escala .it.k-so::before{background:#c9c6c1}
.ag-escala .q{font-family:var(--font-mono);font-size:12px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.ag-vaga{margin-top:var(--e3)}
.ag-vaga .ag-ficha{border:1px solid var(--accent);border-radius:var(--radius);
  background:var(--accent-soft)}
.ag-tab tbody tr.sel{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.ag-volta{display:inline-flex;align-items:center;min-height:24px;font:500 13px var(--font-sans);
  color:var(--accent);margin-bottom:var(--e2)}

/* ---------- elos: a íntegra em PDF é o que o leitor clica ---------- */
.elo-pdf{display:inline-flex;align-items:center;min-height:24px;padding:1px 8px;
  border:1px solid var(--accent);border-radius:20px;font:500 12px var(--font-sans);
  color:var(--accent);text-decoration:none}
.elo-pdf:hover{background:var(--accent);color:#fff}
.ag-elos{display:flex;flex-wrap:wrap;gap:var(--e4);margin-top:var(--e3)}
.ag-elos .elo{margin-top:0}
.ag-elos .elo.forte{font-weight:600}
.ag-escala .it.m-on::before{background:var(--accent)}
.ag-escala .it.m-off::before{background:#efedea;box-shadow:inset 0 0 0 1px var(--border)}
@media (max-width:900px){ .ag-elos{gap:var(--e2)} }

/* Alvo de toque: este bloco vem DEPOIS de tudo de propósito — o CSS dos chips foi escrito
   abaixo das media queries e vencia o min-height do celular por ordem de cascata. */
@media (max-width:900px){
  .ag-kpis{gap:var(--e3);padding-top:var(--e3)}
  .ag-kpi{padding-right:var(--e2)}
  .ag-kpi b{font-size:30px}
  .ag-nchip, .ag-maisnomes{min-height:44px;padding:6px 12px}   /* R22: alvo de toque no celular */
  .ag-chip{min-height:44px}
  .elo-pdf{min-height:44px;padding:6px 14px}
}

.ag-escala .sep{color:var(--muted)}

/* a ficha da linha mora DENTRO da tabela, colada na linha clicada */
.ag-ficha-linha > td{padding:0;border-bottom:1px solid var(--border);background:var(--accent-soft)}
.ag-ficha-linha .ag-ficha{border:0;border-radius:0;background:none;border-top:1px solid var(--accent)}
@media (max-width:900px){
  .ag-ficha-linha,.ag-ficha-linha > td{display:block;width:auto}
}

/* candidato que desistiu: o chip diz, e a cor recua — a linha fica, a disputa dele não */
.ag-nchip .saiu{font:500 12px/1.4 var(--font-sans);color:var(--muted)}
/* O CHIP LIGADO SEMPRE PARECE LIGADO (01/10/2026). Estas duas regras davam ao chip LIGADO
   de quem está fora da disputa a cara exata do desligado — no Senado do PR, Ratinho Junior
   e Álvaro Dias desenhavam linha e rótulo de ponta com o chip apagado, e ninguém achava
   onde desligar. O estado do chip é o que o gráfico faz; o motivo («sem candidatura
   registrada no TSE») já vai escrito dentro dele e basta para distinguir. */

/* ── chance de ficar entre os dois primeiros ──────────────────────────────────
   Uma linha por nome: bolinha e barra na cor da série, número à direita da barra
   e o valor-base que gerou a conta. A faixa lo–hi é sensibilidade, marcada por
   dois tiques e uma hairline sobre a barra — discreta, e legível tanto sobre o
   preenchimento quanto sobre a trilha vazia. */
.ag-538 { display: grid; gap: 10px; }
.ag-538-l { display: grid; align-items: center; gap: 2px 14px;
  /* a coluna do nome carrega «Sobrenome (SIGLA)» — «Guerreiro (Missão)» é o mais largo */
  grid-template-columns: minmax(104px, 184px) minmax(96px, 1fr) 74px minmax(64px, 96px);
  grid-template-areas: "nome trilha valor base"; }
.ag-538-n { grid-area: nome; display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .95rem; color: var(--ink); }
.ag-538-bola { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.ag-538-tr { grid-area: trilha; position: relative; height: 14px; border-radius: 7px;
  background: var(--soft); box-shadow: inset 0 0 0 1px var(--border); }
.ag-538-fi { position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 2px 5px 5px 2px; }
.ag-538-fx { position: absolute; top: 50%; height: 2px; margin-top: -1px;
  background: var(--ink); opacity: .34; }
.ag-538-fx::before, .ag-538-fx::after { content: ""; position: absolute; top: -5px;
  width: 2px; height: 12px; background: var(--ink); opacity: .85; }
.ag-538-fx::before { left: 0; }
.ag-538-fx::after { right: 0; }
.ag-538-v { grid-area: valor; display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.ag-538-vn { font-size: 1.45rem; font-weight: 650; line-height: 1.1; }
/* a faixa, sob o valor: 12,5 px serve o piso de 12 px do celular (R23) */
.ag-538-vf { font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--muted); }
.ag-538-b { grid-area: base; font-size: .95rem; color: var(--muted); text-align: right;
  font-variant-numeric: tabular-nums; }
.ag-538-fora { margin: 2px 0 0; font-size: .8rem; color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
.ag-538-fora .nm { color: var(--ink); }
/* cada nome anda junto com a faixa dele: o par não quebra no meio ao virar a linha */
.ag-538-fora .it { display: inline-flex; align-items: baseline; gap: 5px; }
.ag-538-fora .fx { font-family: var(--font-mono); font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--muted); }

/* Título longo: o ⓘ vive DENTRO do h2, para ficar colado ao último texto do rótulo
   mesmo quando o título quebra em três linhas a 360 px (portão INFO). */
#bl-chance .ag-cab { margin-bottom: 4px; }
#bl-chance .ag-cab h2 .ag-i { margin-left: 8px; vertical-align: middle; }
.ag-538-cab { display: grid; align-items: end; gap: 2px 14px; margin-bottom: 8px;
  grid-template-columns: 1fr minmax(64px, 96px);
  font-size: .76rem; color: var(--muted); }
.ag-538-cab-b { text-align: right; }

@media (max-width: 720px) {
  .ag-538 { gap: 14px; }
  .ag-538-cab { grid-template-columns: 1fr; gap: 0; line-height: 1.35; }
  .ag-538-l { grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "nome valor base" "trilha trilha trilha"; }
  .ag-538-vn { font-size: 1.3rem; }
  .ag-538-b { align-self: end; padding-bottom: 3px; }
}

/* ---------- abas das cinco leituras (12/09/2026) ------------------------------
   Uma leitura por vez. A aba ativa é a única alcançável por Tab e a única com
   tinta cheia + risco da marca embaixo; as outras ficam em cinza de rótulo. No
   celular o alvo sobe para 44 px e a fileira rola de lado em vez de quebrar em
   duas linhas, para o gráfico não descer meia tela. */
.abas { display: flex; gap: 4px; align-items: stretch; margin: 0 0 8px;
  padding: 0; border-bottom: 1px solid var(--border); }
.aba { all: unset; cursor: pointer; display: inline-flex; align-items: center;
  font: 500 14px/1.4 var(--font-sans); color: var(--muted); white-space: nowrap;
  padding: 8px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.aba:hover { color: var(--ink); }
.aba.ativa { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.aba:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ag-abas > section { margin-top: 0; }

/* No celular a fileira QUEBRA em duas linhas em vez de rolar de lado: região que rola
   horizontalmente vaza da viewport (R21) e vira mais uma coisa para o dedo descobrir. */
@media (max-width: 600px) {
  .abas { flex-wrap: wrap; gap: 0 4px; }
  .aba { padding: 12px 8px; min-height: 44px; }
}

/* ---------- painel de aba: a aba é o título, o painel começa pelo dado -------------
   (12/09/2026: «você repete a porra do título; confusão para o cliente».) Os seis
   painéis têm a MESMA ordem e o MESMO ritmo: barra de abas → ⓘ + linha de fatos →
   chips → gráfico → ficha. Nenhum heading dentro do painel.
   `align-items:flex-start` é requisito, não gosto: com a linha de fatos quebrando em
   duas ou três linhas a 360 px, o ⓘ centrado cai fora da primeira linha e o portão
   INFO reprova por «em outra linha do rótulo». */
/* GRADE de duas colunas, não flex: o ⓘ na primeira, a linha de fatos na segunda, as
   duas com o MESMO topo. É o que garante — em qualquer largura, com qualquer número de
   fatos — que o ⓘ esteja na mesma linha do rótulo vizinho (portão INFO). Com flex, a
   linha de fatos longa descia inteira para a segunda linha a 768 px, e a 360 px o
   alinhamento dependia da altura da primeira linha de texto. */
.ag-cab-aba { display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: start; gap: var(--e2); margin-bottom: var(--e3); }
.ag-abas > section { padding-top: var(--e4); }
/* o ⓘ da «chance atual» mora no fim do rótulo da escala, e o balão precisa de âncora */
.ag-538-cab { position: relative; }
.ag-538-cab .ag-i { margin-left: var(--e1); vertical-align: -6px; }

/* ---------- régua de seção: UMA linha, e só entre os três trechos da página --------
   («tem coisa que tem linha, tem coisa que não tem»). Os três trechos: os números +
   a chance · o detalhamento das cinco leituras · quem mediu e a lista. */
#abas-chance .ag-cab { margin-bottom: var(--e3); }
#abas { margin-top: var(--e8); padding-top: var(--e6); border-top: 1px solid var(--border); }
#bl-cadencia { margin-top: var(--e8); padding-top: var(--e6);
  border-top: 1px solid var(--border); }
#bl-lista { margin-top: var(--e6); }

/* o ⓘ é o último item da linha de fatos: o rótulo vizinho é sempre o último fato, na
   mesma linha, em qualquer largura (a 768 px o ⓘ fora da linha reprovava INFO). E a
   linha de fatos é legenda do gráfico — como era quando morava dentro dos chips —,
   então não entra no denominador de R1. */
/* E o ⓘ não pode ficar DENTRO da linha de fatos: ali ele encosta no último fato sem
   separador entre os dois, e a varredura de largura acusa «sem projeçãoi». */

/* SEM ⓘ E SEM TEXTO EXPLICATIVO na tela (decisão do cliente, 12/09/2026 17:5x: «não quero
   i»). O painel de cada aba é só: chips → gráfico → ficha. O cabeçalho de coluna que
   sobrou no bloco da chance fica sobre a SUA coluna, não na primeira. */
.ag-538-cab .ag-538-cab-b { grid-column: 2; }
.ag-abas > section { padding-top: var(--e3); }

/* ── a porta da disputa presidencial, na entrada do agregador ────────────────────
   Só o nome, clicável, na mesma família visual do título de seção. Sem número: o dado
   de Presidente vive na página de Presidente (André, 12/09/2026). */
.ag-exec { display: block; }
.ag-exec-l { all: unset; cursor: pointer; display: inline-flex; align-items: center;
  gap: 8px; padding: 6px 0; min-height: 44px; border-bottom: 2px solid transparent; }
.ag-exec-l .n { font: 600 1.35rem/1.2 var(--font-sans); color: var(--ink); }
.ag-exec-l:hover .n, .ag-exec-l:focus-visible .n { color: var(--accent); }
.ag-exec-l:hover, .ag-exec-l:focus-visible { border-bottom-color: var(--accent); }

/* Topo do Executivo: UMA coluna de número — o projetado de 04/10 com a faixa (27/09/2026,
   André: «tira o válidos hoje, a coluna… de todos»). Eram duas, com o valor de hoje ao lado;
   a linha passou a três colunas e o rótulo fica sobre a coluna do número. */
.ag-538-l3 { grid-template-columns: minmax(104px, 184px) minmax(96px, 1fr) 74px;
  grid-template-areas: "nome trilha valor"; }
.ag-538-cab-1 { grid-template-columns: 1fr 74px; }
.ag-538-cab-1 .ag-538-cab-b { grid-column: 2; }
@media (max-width: 720px) {
  .ag-538-l3 { grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nome valor" "trilha trilha"; }
  .ag-538-cab-1 { grid-template-columns: 1fr auto; }
}

/* ── O VOTO VÁLIDO NA FRENTE, A CHANCE EM SEGUNDO PLANO — só o Senado (29/09/2026) ────
   Pedido do Romero em 28/09, aceito pelo André: «o voto válido vem para frente e fica
   negritado… com esse intervalo que fica embaixo do voto válido». As colunas e as áreas
   são as MESMAS de `.ag-538-l` — o que mudou foi o que cada uma carrega: a barra desenha o
   voto válido, a coluna `valor` traz o voto grande com a faixa da projeção sob ele e a
   coluna `base` passou a trazer a chance, menor. Daí este bloco só reafinar largura, peso e
   corpo: com o CSS velho ainda em cache, a linha já sai na ordem certa.
   O Executivo (`.ag-538-l3`) não muda. Vem DEPOIS das regras de `.ag-538-l`/`.ag-538-cab` e
   do @media de 720 px da seção acima: mesma especificidade, quem fica por último vence. */
.ag-538-lv { grid-template-columns: minmax(104px, 216px) minmax(88px, 1fr) 112px minmax(62px, 92px); }
.ag-538-lv .ag-538-vn { font-weight: 800; letter-spacing: -.01em; }
/* a chance: menor que o voto válido e mais clara que ele, sem cair no cinza de rótulo */
.ag-538-lv .ag-538-b { font-size: 1.05rem; font-weight: 500; line-height: 1.15;
  color: var(--ink); opacity: .74; }
/* sem número de chance: o travessão é marca de «não há número», não de zero. Vem DEPOIS da
   regra da chance — mesma especificidade, quem está embaixo manda. */
.ag-538-lv .ag-538-b-sem { color: var(--muted); opacity: 1; font-weight: 400; }
.ag-538-cab-4 { grid-template-columns: minmax(104px, 216px) minmax(88px, 1fr) 112px minmax(62px, 92px); }
.ag-538-cab-4 > :nth-child(1) { grid-column: 1; }
.ag-538-cab-4 > :nth-child(2) { grid-column: 2 / 4; text-align: right; }
.ag-538-cab-4 > :nth-child(3) { grid-column: 4; text-align: right; }

@media (max-width: 720px) {
  /* nome · voto válido · chance na primeira linha, a barra inteira na segunda (as áreas vêm
     de `.ag-538-l`). As duas colunas de número têm largura FIXA e IGUAL no cabeçalho e na
     linha — com `auto`, o rótulo deixa de cair sobre o seu próprio número. */
  .ag-538-lv { grid-template-columns: minmax(0, 1fr) 96px 58px; }
  .ag-538-cab-4 { grid-template-columns: minmax(0, 1fr) 96px 58px; gap: 0 14px; line-height: 1.3; }
  .ag-538-cab-4 > :nth-child(2) { grid-column: 2; }
  .ag-538-cab-4 > :nth-child(3) { grid-column: 3; }
  .ag-538-lv .ag-538-b { font-size: .98rem; }
  .ag-538-lv .ag-538-vn { font-size: 1.3rem; }
}

/* a linha de nomes sem registro respira: sem row-gap e com line-height apertado, o rótulo
   e o primeiro nome se sobrepunham a 360 px (medido em 12/09/2026) */
/* Nomes sem registro de candidatura: linha compacta ao pé dos chips, não um chip cada.
   Como chip, cada um ocupava duas linhas e a 360 px os sete jogavam o gráfico uma tela
   abaixo da legenda (R4). Mesma forma da linha «abaixo de 0,1%» do topo. */
.ag-chips-fora { margin: 4px 0 0; font-size: .8rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline;
  line-height: 1.5; width: 100%; }
.ag-chips-fora .rot { font-weight: 500; }
.ag-chips-fora .nm { color: var(--ink); }
.ag-538-fora { line-height: 1.5; row-gap: 4px; }

/* ============================================================================
   VISTA NACIONAL DO SENADO — mapa à esquerda, o dado à direita (#33, 13/09/2026)
   O mapa não muda de comportamento: só passa a dividir a largura com os dois
   quadros. Abaixo de 980 px vira uma coluna — mapa em cima, quadros embaixo.
   ========================================================================== */
.ag-nacional{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1fr);
  gap:var(--e6);align-items:start;margin-top:var(--e2)}
.ag-nacional>*{min-width:0}
.ag-nacional .ag-mapa{max-height:60vh}
/* sem `gap`: o gap do flex separaria o cabeçalho do gráfico que ele nomeia e abriria
   uma faixa vazia de 36 px dentro do bloco (R19). A separação vem da margem do cabeçalho. */
.nac-quadros{display:flex;flex-direction:column}
/* A ABA é o título do quadro (#134): dentro do painel a primeira linha já é o que a conta é,
   em UMA linha e sem ponto final, com a referência das 54 à direita. Sem `max-width` em ch:
   o texto foi encurtado para caber na largura da coluna no desktop, e quebrar sozinho no
   celular — quebra de linha escrita à mão (`<br>`) está fora. */
.nac-ctx-l{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3);
  flex-wrap:wrap;margin:0 0 var(--e2)}
.nac-anc{margin:0;font:600 12.5px/1.3 var(--font-sans);color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.nac-ctx{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0}
.nac-tot{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}

/* as barras: sigla — trilha (barra cheia até o esperado + traço fino da faixa) — número
   grande com a faixa embaixo. É o desenho das barras de chance da página do estado
   (.ag-538-l), trazido para a vista nacional (André, 13/09/2026). */
.nac-barras{display:flex;flex-direction:column;gap:2px}
.nac-l{display:grid;grid-template-columns:92px minmax(0,1fr) 62px;align-items:center;
  grid-template-areas:"nome trilha valor" "nome trilha faixa";
  gap:2px var(--e2);width:100%;padding:2px 4px;border:0;background:none;border-radius:5px;
  text-align:left;font:inherit;color:inherit}
.nac-l-porta:hover{background:var(--soft)}
.nac-l:focus{outline:none}
.nac-l:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.nac-p{grid-area:nome;font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap;
  overflow:visible;text-overflow:clip}
.nac-t{grid-area:trilha;display:block;height:12px;border-radius:6px;position:relative;
  background:var(--soft);box-shadow:inset 0 0 0 1px var(--border)}
/* UMA COR SÓ, para todas as barras (André, 13/09/2026): aqui a barra diz tamanho, não
   identidade — quem identifica é a sigla ao lado. O cinza quente é claro o bastante para o
   traço da faixa, que é de tinta, continuar legível por cima dele (3,55:1). */
.nac-b{position:absolute;left:0;top:0;bottom:0;border-radius:5px 3px 3px 5px;min-width:2px;
  background:#6f6a63}
/* o traço da faixa, por cima da barra: hairline de ponta a ponta e os dois tiques do piso
   e do teto, que ULTRAPASSAM a barra em cima e embaixo — é assim que a faixa continua
   legível sobre a barra cheia, clara ou escura (mesmo desenho da página do estado). */
.nac-fx{position:absolute;top:50%;height:1px;margin-top:-.5px;min-width:2px;
  background:var(--ink);opacity:.5}
.nac-fx::before,.nac-fx::after{content:"";position:absolute;top:-7px;width:2px;height:16px;
  background:var(--ink);opacity:.9}
.nac-fx::before{left:0}
.nac-fx::after{right:0}
.nac-vn{grid-area:valor;align-self:end;font:650 15px/1.1 var(--font-sans);
  font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.nac-vf{grid-area:faixa;align-self:start;font:500 12px/1.25 var(--font-sans);
  font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;text-align:right}
/* o cabeçalho é a régua: a escala em cadeiras, e o total das 54 na coluna do número */
.nac-l-cab{padding-bottom:5px;border-bottom:1px solid var(--border);margin-bottom:3px;
  align-items:end;position:sticky;top:0;background:var(--bg);z-index:2}
.nac-l-cab .nac-p{font:500 12px/1.3 var(--font-sans);color:var(--muted)}
.nac-l-cab .nac-vn{font:500 12.5px/1.3 var(--font-sans);color:var(--muted);white-space:nowrap}
.nac-escala{height:auto;min-height:15px;background:none;box-shadow:none;border-radius:0}
.nac-tq{position:absolute;bottom:0;transform:translateX(-50%);
  font:500 12px/1 var(--font-sans);color:#5f5b56;
  font-variant-numeric:tabular-nums}
.nac-tq-ini{transform:none}
.nac-l-porta{color:var(--muted);cursor:pointer}
.nac-l-porta .nac-p{color:var(--muted)}
.nac-l-porta[aria-expanded="true"]{background:var(--soft)}

/* a ficha nasce colada à barra que a abriu */
.nac-ficha{margin:2px 0 0 4px;padding:var(--e3);background:var(--soft);
  border-radius:var(--radius);max-height:190px;overflow-y:auto}
.nac-ficha-l{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:2px var(--e4)}
.nac-ficha-l li{display:flex;justify-content:space-between;gap:var(--e2);
  font-size:12.5px;color:var(--ink);padding:1px 0}
.nac-fp{color:var(--muted)}
.nac-fv{font-variant-numeric:tabular-nums;font-weight:500}

/* o gráfico */
.nac-graf{width:100%;min-width:0}
.nac-graf svg{display:block;width:100%;height:auto;overflow:visible}
.nac-linha{transition:opacity .12s,stroke-width .12s}
.nac-ponta{cursor:pointer}
.nac-ponta:focus{outline:none}
.nac-ponta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
[data-sel]:not([data-sel=""]) .nac-linha.apagado,
[data-sel]:not([data-sel=""]) .nac-ponta.apagado{opacity:.16}
[data-sel]:not([data-sel=""]) .nac-linha.aceso{stroke-width:3}
circle.apagado{opacity:.16}

@media (max-width:979px){
  .ag-nacional{grid-template-columns:1fr;gap:var(--e2)}
  .ag-nacional .ag-mapa{max-height:44vh}
}
/* no celular a sigla e o número dividem a primeira linha e a trilha ocupa a de baixo —
   «Republicanos» não cabe numa coluna ao lado da barra a 360 px, e texto de dado não corta. */
@media (max-width:520px){
  .nac-l{grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"nome valor faixa" "trilha trilha trilha";
    gap:3px var(--e2);min-height:44px;padding:5px 4px}
  .nac-p{font-size:12.5px}
  .nac-vn,.nac-vf{align-self:baseline}
  .nac-vn{font-size:15px}
  .nac-l-cab{min-height:0;align-items:center}
}

/* ---------- aba «composição»: as 81 cadeiras do Senado (operária #135, 13/09/2026) ----------
   Uma linha por partido, na mesma grade das outras duas abas, com uma coluna a mais: o «hoje».
   A trilha é um bullet chart — a barra é a PROJEÇÃO, empilhada (cinza = as cadeiras que
   continuam, fato; tinta = as esperadas na eleição, estimativa), e o tique vertical é o HOJE,
   na mesma escala. A distância entre o tique e a ponta da barra é o ganho ou a perda do
   partido: é a pergunta da aba respondida sem o leitor comparar dois gráficos.
   Cor por PAPEL (fato × estimativa), nunca por partido — quem identifica é a sigla ao lado. */
.cmp-leg{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);margin:0 0 var(--e2);
  font:500 12px/1.4 var(--font-sans);color:var(--muted)}
.cmp-k{display:inline-flex;align-items:center;gap:5px}
.cmp-k>i{display:inline-block;width:11px;height:10px;border-radius:2px;background:#6f6a63}
.cmp-k-esp{background:var(--ink)!important}
.cmp-k-hoje{width:2px!important;height:14px!important;border-radius:0!important;
  background:var(--ink)!important;box-shadow:0 0 0 1px var(--bg)}
.cmp-l{grid-template-columns:78px 26px minmax(0,1fr) 58px;
  grid-template-areas:"nome hoje trilha valor" "nome hoje trilha faixa"}
.cmp-hn{grid-area:hoje;font:500 12.5px/1.2 var(--font-sans);font-variant-numeric:tabular-nums;
  color:var(--muted);text-align:right;align-self:center}
.nac-l-cab .cmp-hn{font:500 12px/1.3 var(--font-sans);color:var(--muted)}
/* as duas partes da mesma barra: o canto arredondado é só nas pontas de fora */
.cmp-cont{border-radius:5px 0 0 5px;background:#6f6a63}
.cmp-esp{border-radius:0 3px 3px 0;background:var(--ink)}
.cmp-so{border-radius:5px 3px 3px 5px}
/* o tique do hoje ULTRAPASSA a trilha em cima e embaixo, e leva um fio da cor do fundo em
   volta: é o que o mantém legível tanto sobre a barra escura quanto sobre o trilho claro
   (mesma solução dos tiques da faixa, na aba ao lado) */
.cmp-hoje{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;
  background:var(--ink);box-shadow:0 0 0 1px var(--bg)}
.cmp-fonte{margin:var(--e3) 0 0;font:400 12px/1.45 var(--font-sans);color:var(--muted)}
/* a explicação estica e empurra os dois números para a direita, encostados um no outro pelo
   gap da linha — juntá-los dentro de um invólucro faria a prova ler os dois como um rótulo só */
.cmp-ctx-l .nac-ctx{flex:1 1 240px}
.cmp-anc{margin:0;white-space:nowrap}
/* o «·» é separador, não texto: entra como pseudo na cor do texto de apoio — em #e8e6e3
   ele dava 1,25:1 e o portão VISUAL cobrou, com razão */
.cmp-anc2::before{content:"·";margin:0 6px;color:var(--muted);font-weight:400}
.nac-anc .nac-tot{font-weight:600}
/* no celular a sigla mais longa («Republicanos», «sem partido») ainda tem de caber sem
   encostar no número do hoje: a coluna do nome não encolhe, quem encolhe é a fonte */
@media (max-width:560px){
  /* 58 px, não 50: o cabeçalho «projeção» mede 57 px e vinha CORTADO no celular desde a #135
     (o rótulo da coluna é o que diz o que o número é — cortado, não diz). Só coube agora
     porque a faixa virou inteira: «16–28» ocupa menos que «15,6–29,0» ocupava (#139). */
  .cmp-l{grid-template-columns:80px 22px minmax(0,1fr) 58px}
  .cmp-l .nac-vn{font-size:14px}
}
/* na tela mais estreita a trilha perde a coluna do «hoje» e os tiques de 5 em 5 se encostam:
   ficam os de 10 em 10, que é o que cabe sem dois números lendo como um só */
@media (max-width:420px){
  .cmp-l .nac-tq:nth-child(even){display:none}
}

/* ── ENTRADA EM TRÊS ABAS (27/09/2026, André): Presidência da República · Governo Estadual ·
   Senado Federal. A fileira de cima é a das disputas: o mesmo componente de aba, num corpo
   maior, porque ela é o título da página inteira abaixo dela. */
.ag-disputas > .abas { margin: var(--e2) 0 var(--e4); }
.ag-disputas > .abas > .aba { font-size: 17px; padding: 10px 16px; }
@media (max-width: 600px) { .ag-disputas > .abas > .aba { font-size: 15px; padding: 12px 10px; } }
/* a página do presidente dentro da aba: sem moldura, a largura da coluna, a altura do conteúdo */
.ag-presid { display: block; width: 100%; border: 0; min-height: 70vh; }
/* Governo Estadual: 1º ao 4º colocado em votos válidos projetados; quem passa de 50% vai no
   vermelho da marca, o número e o nome. O mapa acompanha a rolagem da tabela no desktop. */
.gov-quadro { min-width: 0; }
@media (min-width: 980px) { #governo .ag-graf { position: sticky; top: 88px; } }
.gov-leg { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--e2);
  font-size: 12.5px; color: var(--muted); }
.gov-leg-m { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); flex: 0 0 auto; }
.gov-rol { overflow-x: auto; }
.gov-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.gov-tab th, .gov-tab td { text-align: left; vertical-align: top; padding: 7px 8px;
  border-bottom: 1px solid var(--border); }
.gov-tab thead th { font-weight: 500; font-size: 12px; color: var(--muted); white-space: nowrap; }
.gov-tab tbody th { font-weight: 600; white-space: nowrap; position: sticky; left: 0;
  background: var(--bg); }
.gov-tab tbody th a { color: var(--ink); text-decoration: none; }
.gov-tab tbody th a:hover { color: var(--accent); }
.gov-tab td .gov-n { display: block; color: var(--ink); line-height: 1.3; }
.gov-tab td .gov-v { display: block; margin-top: 1px; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.gov-tab td.acima .gov-n, .gov-tab td.acima .gov-v { color: var(--accent); }
.ag-dica .d-top li.acima, .ag-dica .d-top li.acima b { color: var(--accent); }
/* no celular a tabela vira lista: cada estado com os quatro colocados, um por linha, a
   posição à esquerda e o número à direita — cinco colunas não cabem em 360 px sem rolar de lado */
@media (max-width: 600px) {
  .gov-tab thead { display: none; }
  .gov-tab, .gov-tab tbody, .gov-tab tr { display: block; width: 100%; }
  .gov-tab tr { border-bottom: 1px solid var(--border); padding: 0 0 8px; }
  .gov-tab tbody th { display: block; position: static; padding: 12px 0 4px; border-bottom: 0; }
  .gov-tab td { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; border-bottom: 0; }
  .gov-tab td:empty { display: none; }
  .gov-tab td::before { content: attr(data-pos); flex: 0 0 22px; font-size: 12px; color: var(--muted); }
  .gov-tab td .gov-n { display: inline; flex: 1 1 auto; }
  .gov-tab td .gov-v { display: inline; margin: 0; }
}
/* sem o título acima das abas (Executivo, 27/09/2026), a fileira de abas ganha o respiro que o
   título dava — senão ela encosta nos números de cima */
#abas-chance > nav.abas:first-child { margin-top: var(--e8); }

/* ═══════════════════════ o botão e a folha de impressão (#45, 01/10/2026) ═══════════════
   O pessoal do INOP mandava no WhatsApp a página impressa pelo navegador — 2 a 3 folhas de
   web cortada, com menu, aba e chip. O botão monta #folha (painel.js) e chama a impressão;
   a folha é A4 de UMA página e só aparece na mídia de impressão.
   A FOLHA É DESENHADA COM A TIPOGRAFIA FINAL JÁ FORA DA IMPRESSÃO (não dentro de
   `@media print`): assim a caixa escondida mede a MESMA altura que a folha impressa, e o
   painel.js consegue encolher os gráficos até caber em uma página. Dentro de `@media print`
   fica só o que é da impressão: a página, o que some e o que vira estático.             */

/* A LINHA DO TÍTULO NA MESMA GRADE DOS NÚMEROS (01/10/2026, ordem dele: «tá tudo fora do
   lugar»). O hero do site é mais estreito que o painel: o botão à direita fechava 50 px
   antes da coluna onde fecham os números, o quadro da chance e os gráficos. Nas páginas que
   têm o botão, o hero passa a usar a MESMA caixa do `.ag` — um só eixo à esquerda e à
   direita, do título ao rodapé. A entrada do agregador não tem `.ag-tit-linha` e não muda. */
.page-hero .container:has(.ag-tit-linha) { max-width: 1600px; padding: 0 var(--e6); }

/* o botão, na linha do título, alinhado à direita */
.ag-tit-linha { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap; }
.ag-tit-linha .display { margin: 0; }
.ag-pdf { font-family: var(--font-sans); font-size: .9rem; font-weight: 550;
  color: var(--accent); background: #fff; border: 1px solid var(--accent);
  border-radius: 7px; padding: .5rem .95rem; cursor: pointer; white-space: nowrap;
  margin-bottom: 4px; transition: background .15s, color .15s; }
.ag-pdf:hover { background: var(--accent); color: #fff; }
.ag-pdf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) {
  /* a 390 px o botão vira largura cheia sob o título, com alvo de toque de 44 px */
  .ag-tit-linha { display: block; }
  .ag-pdf { display: block; width: 100%; margin: var(--e4) 0 0; padding: .78rem 1rem;
    font-size: .95rem; }
}

/* A folha vive FORA da tela, não escondida: o gráfico se desenha pela largura da caixa, e
   caixa com `display:none` mede 0 — sairia na largura de reserva, não na da folha. */
#folha { position: absolute; left: -20000px; top: 0; width: 718px; pointer-events: none;
  background: #fff; color: var(--fg); }

#folha .folha-cab { display: flex; align-items: center; justify-content: space-between;
  border-bottom: 2px solid var(--accent); padding-bottom: 5px; }
#folha .folha-logo { height: 20px; width: auto; }
#folha .folha-marca { font-family: var(--font-serif); font-size: 19px; color: var(--fg); }
#folha .folha-oque { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .02em;
  color: var(--muted); text-decoration: none; }
#folha .folha-tit { font-family: var(--font-serif); font-size: 29px; line-height: 1.1;
  font-weight: 400; color: var(--fg); margin: 11px 0 0; }
#folha .folha-quando { font-size: 11px; color: var(--muted); margin: 3px 0 0; }

#folha .folha-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin: 11px 0 0; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); }
#folha .folha-num { padding: 7px 12px 7px 0; }
#folha .folha-num + .folha-num { border-left: 1px solid var(--border); padding-left: 12px; }
#folha .folha-num-v { display: block; font-size: 19px; font-weight: 650; line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums; }
#folha .folha-num-r { display: block; font-size: 9.5px; line-height: 1.25;
  color: var(--muted); margin-top: 2px; }

#folha .folha-fig { margin-top: 10px; break-inside: avoid; }
#folha .folha-fig-tit { font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--fg); margin: 0 0 5px; padding-bottom: 3px;
  border-bottom: 1px solid var(--border); }
/* os chips de série são navegação, não folha — o nome vem no fim da linha do gráfico */
#folha .ag-serie-chips, #folha .ag-fora-serie, #folha .ag-vaga,
#folha .ag-i { display: none !important; }
#folha .ag-graf svg { margin-top: 0; }
/* o quadro da chance, compacto: 4 nomes, cabeçalho e o «também na disputa» inteiro */
#folha .ag-538 { gap: 7px; }
#folha .ag-538-cab { margin-bottom: 5px; font-size: 9.5px; }
#folha .ag-538-vn { font-size: 17px; }
#folha .ag-538-vf { font-size: 10px; }
#folha .ag-538-b { font-size: 13px; }
#folha .ag-538-n { font-size: 12.5px; }
#folha .ag-538-fora { font-size: 10px; line-height: 1.45; margin-top: 4px; }
#folha .ag-538-fora .fx { font-size: 9.5px; }
#folha .folha-fonte { font-size: 9px; line-height: 1.35; color: var(--muted);
  margin: 10px 0 0; padding-top: 5px; border-top: 1px solid var(--border); }
#folha .folha-url { color: var(--muted); text-decoration: none; }

/* FOLHA APERTADA — a página cheia. Duas coisas estouram a A4: o «também na disputa» de
   mais de 14 nomes (MG, PI) e o quadro da chance do Executivo, que não tem teto de quatro
   nomes e lista 11 linhas no presidente (477 px dos 1.040 da folha). Aqui o corpo e os vãos
   do QUADRO e da LINHA DE NOMES encolhem — nenhum nome sai, nenhum nome corta —, e o
   painel.js devolve aos gráficos o espaço que isso liberar. */
#folha.folha-apertada .ag-538-fora { font-size: 9px; line-height: 1.35; }
#folha.folha-apertada .ag-538-fora .fx { font-size: 8.5px; }
#folha.folha-apertada .ag-538 { gap: 4px; }
#folha.folha-apertada .ag-538-n { font-size: 11px; }
#folha.folha-apertada .ag-538-vn { font-size: 14px; }
#folha.folha-apertada .ag-538-vf { font-size: 9px; }
#folha.folha-apertada .ag-538-b { font-size: 11.5px; }
#folha.folha-apertada .ag-538-tr { height: 11px; }
#folha.folha-apertada .folha-fig { margin-top: 7px; }
#folha.folha-apertada .folha-tit { font-size: 26px; }
#folha.folha-apertada .folha-num { padding-top: 5px; padding-bottom: 5px; }

@media print {
  @page { size: A4 portrait; margin: 10mm; }
  html, body { background: #fff; margin: 0; padding: 0; }
  /* UMA FOLHA TAMBÉM NO CELULAR (01/10/2026, André: «testei no celular, está trazendo duas
     páginas… uma em branco embaixo»). O `body` do site tem `min-height: 100vh` e é flex; na
     impressão do Chrome do celular o vh é a altura da TELA reescalada para a largura da folha,
     maior que a A4, e a sobra vira uma segunda página vazia. Na impressão o body tem a altura
     do que contém, e a folha não passa de uma A4 útil (277 mm). */
  html, body { min-height: 0 !important; height: auto !important; display: block !important; }
  /* Nada do site na folha: menu, hero, abas, chips, rodapé do site, balão de dica.
     `:has(#folha)` é a trava: sem a folha montada, esconder tudo imprimiria uma página EM
     BRANCO. Sem a folha, a regra não casa e o navegador volta a imprimir a página como
     antes — pior, mas nunca em branco. */
  body:has(#folha) > * { display: none !important; }
  body > #folha { display: block !important; position: static; left: auto;
    width: auto !important; max-width: none;
    max-height: 276mm; overflow: hidden; break-after: avoid; page-break-after: avoid; }
  #folha, #folha * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}