/* As regras comuns (tokens de base, componentes, mapa e o mapa ampliado) vêm do núcleo, comum/cv.css (comum-web/web/css; PLANO_UNIFICACAO.md, fase 2, M6), carregado antes deste arquivo: aqui fica só o que é do site ou o que muda para ele. */
/* Inter e Fraunces servidas pelo próprio site, de fontes/ (fase 3 de 15/10/2026, 3.2; até então vinham do Google Fonts): os mesmos
   arquivos e o mesmo @font-face do site do exterior, copiados de lá (os seis sites servem as mesmas fontes). São os arquivos "latin"
   que o Google servia, com o mesmo unicode-range. A Inter declara de 400 a 700, como as faces do Google (o <b> dentro de 600 pede 900 e
   recebe 700); a Fraunces declara só o 800, o peso que os títulos já recebiam (os de 700 caíam no 800 do Google). As reservas abaixo
   ("Inter Fallback", "Fraunces Fallback") não mudaram: nada muda de lugar. Licença: fontes/OFL-*.txt (SIL OFL 1.1) */
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(fontes/inter-v1.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;font-style:normal;font-weight:800;font-display:swap;src:url(fontes/fraunces-v1.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* reserva com as medidas da Inter (Arial ajustada): até a Inter chegar, o texto ocupa quase o mesmo espaço */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT");size-adjust:107.12%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%}
/* a mesma ideia para a Fraunces (títulos, todos em negrito): Georgia Bold com a largura do título principal (medida no navegador: a
   Fraunces 800 a 60 px ocupa 92,26% da Georgia Bold; com a Georgia comum, o navegador engrossava a regular, mais estreita) e as alturas da Fraunces (ascendente 0,98 e descendente 0,26 do corpo), revisão de 09/10/2026 */
@font-face{font-family:"Fraunces Fallback";src:local("Georgia Bold"),local("Georgia-Bold"),local("Georgia");font-weight:600 900;size-adjust:92.26%;ascent-override:106.22%;descent-override:28.18%;line-gap-override:0%}
:root{
  --bg:#f6f3ee; --surface:#fffdf9; --ink:#1b1f24; --muted:#5d6570; --line:#e3ddd3; --soft:#efe9df;
  --lula:#c8102e; --flavio:#1f4fb8; --tarcisio:#0e7c86; --ciro:#d38b00; --outro:#a7adb5; --neutro:#d9d3c8;
  --accent:#8a5f00; --bar-text:#ffffff;
  --tarcisio-txt:#0d7079;   /* o --tarcisio como texto (mais votado na tabela): 4,5:1 ou mais também sobre o --soft da linha em foco */
  --focus:#a06e00;   /* anel de foco: 3:1 ou mais contra o fundo, a superfície e a pílula escolhida, nos dois temas */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121417; --surface:#1a1d21; --ink:#eceae6; --muted:#a1a8b1; --line:#2c3137; --soft:#23272c;
    --lula:#ff4d5e; --flavio:#5b8cff; --tarcisio:#3cc4cf; --ciro:#f0a92a; --outro:#6c737c; --neutro:#3a4048;
    --accent:#f2c14e; --bar-text:#121417;
    --tarcisio-txt:#3cc4cf;
  }
}
:root[data-theme="dark"]{
  --bg:#121417; --surface:#1a1d21; --ink:#eceae6; --muted:#a1a8b1; --line:#2c3137; --soft:#23272c;
  --lula:#ff4d5e; --flavio:#5b8cff; --tarcisio:#3cc4cf; --ciro:#f0a92a; --outro:#6c737c; --neutro:#3a4048;
  --accent:#f2c14e; --bar-text:#121417;
  --tarcisio-txt:#3cc4cf;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 Inter,"Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
header.hero{padding-top:56px;padding-bottom:28px}
.kicker{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:700}
h1,h2,.card .verdict{font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0,"dlig" 0}
h1{font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-weight:800;font-size:clamp(34px,6vw,60px);line-height:1.04;margin:10px 0 16px;letter-spacing:-.01em}
h2{font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-weight:700;font-size:clamp(24px,3.4vw,34px);line-height:1.15;margin:0 0 10px}
h3{font-size:15px;margin:0 0 6px;font-weight:700}
.lede{font-size:clamp(17px,2.2vw,20px);max-width:760px}
.lede b{font-weight:700}
.muted{color:var(--muted)}
.small{font-size:13px}
section{padding:40px 0;border-top:1px solid var(--line)}
section.wrap{padding-top:48px;padding-bottom:44px}
.intro{max-width:740px;margin-bottom:22px;color:var(--muted)}

/* cartões do topo */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
.card .lab{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.card .verdict{font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-size:24px;font-weight:700;line-height:1.2;margin:6px 0 14px}
.duel{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:8px}
.duel .who{font-weight:600;font-size:14px;line-height:1.3}
.duel .who small{color:var(--muted);font-weight:500}
.duel .pct{font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.duel .r{text-align:right}
.stack{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--soft)}
.stack span{display:block;height:100%}
.card .note{margin-top:12px;font-size:14px;color:var(--muted)}
.aviso{background:var(--ink);color:var(--bg);font-size:14px;line-height:1.45;padding:10px 64px 10px 16px;text-align:center}
.scatter{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;position:relative}
.scatter svg{display:block;width:100%;height:auto}
.scatter .grid{stroke:var(--line);stroke-width:1}
.scatter .tick{font:11px Inter,"Inter Fallback",system-ui,sans-serif;fill:var(--muted)}
.scatter .axis{font:600 12px Inter,"Inter Fallback",system-ui,sans-serif;fill:var(--muted)}
.scatter .pt{fill-opacity:.72;stroke:var(--surface);stroke-width:1;cursor:pointer}
.scatter .pt:hover{fill-opacity:1;stroke:var(--ink);stroke-width:1.5}
.scatter .pt.sel{fill-opacity:1;stroke:var(--ink);stroke-width:2}
/* quadro do ponto: ao lado do ponto, dentro do gráfico */
.scatter .pop{position:absolute;z-index:5;width:240px;max-width:calc(100% - 12px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:12px 14px;font-size:13px;line-height:1.5;color:var(--ink)}
.scatter .pop h4{margin:0 24px 2px 0;font-size:15px;font-weight:700;line-height:1.3}
.scatter .pop .m{color:var(--muted);font-size:12px;margin-bottom:6px}
.scatter .pop .x{position:absolute;top:4px;right:6px;border:0;background:transparent;color:var(--muted);font-size:20px;line-height:1;padding:4px 6px;cursor:pointer;border-radius:6px}
.scatter .pop .vermapa{margin-top:8px;border:0;background:transparent;padding:0;font:600 13px Inter,"Inter Fallback",system-ui,sans-serif;color:var(--ink);text-decoration:underline;cursor:pointer}
.scatter .lbl{font:600 11px Inter,"Inter Fallback",system-ui,sans-serif;fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.card .cand{margin:10px 0}
.cityrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:12px 0 0;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

/* barras com rótulo */
.row{display:grid;grid-template-columns:62px 1fr;gap:12px;align-items:center;margin:6px 0}
.row .rl{font-size:14px;line-height:1.25}
.row.hl .rl{font-weight:700}
.bar{position:relative;display:flex;height:22px;border-radius:6px;overflow:hidden;background:var(--soft);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.bar span{display:flex;align-items:center;padding:0 7px;color:var(--bar-text);white-space:nowrap;overflow:hidden}
.bar span.e{justify-content:flex-end}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted);margin:4px 0 12px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* controles */
.seg button{border:0;background:transparent;color:var(--muted);font:600 14px Inter,"Inter Fallback",system-ui,sans-serif;padding:7px 14px;border-radius:999px;cursor:pointer}
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 16px}
.selwrap{display:flex;align-items:center;gap:10px;margin:0}
#viewlab{display:inline-block;min-width:3.9em}   /* "Mostrar" e "Partido" com a mesma largura: o seletor não se desloca ao trocar de cargo */   /* largura fixa: a lista muda com o partido e a barra não se mexe */
.selwrap select{font:600 14px Inter,"Inter Fallback",system-ui,sans-serif;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 12px;max-width:100%}
input.search{font:15px Inter,"Inter Fallback",system-ui,sans-serif;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);min-width:240px;flex:1;max-width:340px}
button.more{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px Inter,"Inter Fallback",system-ui,sans-serif;padding:9px 18px;border-radius:999px;cursor:pointer}
button.more.sm{padding:5px 12px;font-size:13px}
button.more:hover{background:var(--soft)}
/* o botão de tema com rótulo visível, no padrão dos seis sites (revisão de 14/10/2026: o "◐" sozinho não dizia o que fazia). Desde
   15/10/2026 o rótulo diz a ação e alterna ("◐ Tema escuro" no claro, "◑ Tema claro" no escuro), com as cores da superfície nos dois
   temas (ligado em negativo, ficava igual nos dois); a largura é a do rótulo mais largo (app.js, medeTema), e o texto fica no meio */
.themebtn{position:absolute;top:12px;right:12px;z-index:1000;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;height:38px;padding:0 14px 0 12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;font:600 13px Inter,"Inter Fallback",system-ui,sans-serif}
.themebtn>span[aria-hidden]{font-size:16px;line-height:1}

/* regiões */
.regions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.reg{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.reg h3{font-size:16px}
.reg .meta{font-size:12px;color:var(--muted);margin-bottom:10px}
.reg .diff{font-size:13px;margin-top:8px;color:var(--muted)}

/* mapa */
.maplayout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:stretch}
.mapbox{position:relative;min-height:600px}
#map{position:absolute;inset:0;border-radius:14px;border:1px solid var(--line);background:var(--soft)}
.leaflet-tooltip{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.mapinfo{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.mapinfo h3{font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-size:24px;margin:2px 0 2px;font-weight:700}
.mapinfo .lab{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.mapinfo .st{font-size:13px;color:var(--muted);margin-bottom:10px}
.mapinfo .st.partial{color:var(--accent)}
.cand{margin:9px 0}
.cand .l{display:flex;justify-content:space-between;gap:8px;font-size:14px;line-height:1.3}
.cand .l span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}  /* uma linha: a altura do painel não depende do nome */
.cand .l .cn{display:flex;align-items:baseline}.cand .l .cn .selo{flex:none}   /* deputados: o nome encurta, a etiqueta da situação fica inteira */
.cand .l small{color:var(--muted);font-size:12px}
.cand .l b{font-variant-numeric:tabular-nums}
.cand .v{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.track{height:8px;border-radius:4px;background:var(--soft);overflow:hidden;margin-top:3px}
.track span{display:block;height:100%}
.cand.minor .l{font-size:13px}
details.others{margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
details.others summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--muted)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.stats span{display:block;font-size:12px;color:var(--muted)}
.stats b{font-size:17px;font-variant-numeric:tabular-nums}
.mapinfo .note{font-size:12px;color:var(--muted);margin:12px 0 0}

/* tabelas */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table.t{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
table.t thead th{position:sticky;top:0;background:var(--surface);text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;user-select:none}
table.t thead th.n{text-align:right}
table.t td,table.t th[scope=row]{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t td.n,table.t th[scope=row].n{text-align:right;white-space:nowrap}
table.t td .sub,table.t th[scope=row] .sub{display:block;font-size:12px;color:var(--muted)}
table.t td .sub.sm,table.t th[scope=row] .sub.sm{display:none}
.mini{display:flex;height:10px;width:130px;border-radius:5px;overflow:hidden;background:var(--soft);margin-top:4px}
.mini span{height:100%}
.win{font-weight:600;white-space:nowrap;color:color-mix(in srgb,var(--wc,var(--ink)),var(--ink) var(--wl,0%))}   /* negrito na cor do candidato: --wc e a dose de tinta de cada tema (--wl no claro, --wd no escuro) vêm inline, do corTxt do app.js */
:root[data-theme="dark"] .win{color:color-mix(in srgb,var(--wc,var(--ink)),var(--ink) var(--wd,0%))}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .win{color:color-mix(in srgb,var(--wc,var(--ink)),var(--ink) var(--wd,0%))}}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
tr.gr{cursor:pointer}
tr.gr:hover td,tr.gr:hover th[scope=row]{background:var(--soft)}
.chev{display:inline-block;width:14px;color:var(--muted);transition:transform .15s}
button.chev{border:0;background:none;padding:0;margin:0 4px 0 0;font:inherit;color:var(--muted);cursor:pointer;width:14px}
#estaduais table.rob thead th{white-space:normal}
tr.gr.open .chev{transform:rotate(90deg)}
tr.det>td,tr.det>th[scope=row]{background:var(--bg);padding:8px 12px 14px}
tr.flash>td,tr.flash>th[scope=row]{animation:flash 1.6s ease-out}
@keyframes flash{from{background:var(--soft)}to{background:transparent}}
.inner{overflow-x:auto;max-width:calc(100vw - 58px)}   /* 58 = 2 x 16 de margem da página, 2 de borda e 2 x 12 do respiro da célula: a tabela do detalhe não alarga a de distritos */
table.locs{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
table.locs thead th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;text-align:right;padding:6px;border-bottom:1px solid var(--line);white-space:nowrap}
table.locs td,table.locs th[scope=row]{padding:6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
table.locs thead th:first-child,table.locs td:first-child,table.locs th[scope=row]:first-child{text-align:left;white-space:normal}   /* o nome quebra linha: a tabela do detalhe cabe em 320 px */
table.locs small{color:var(--muted)}
.det-note{font-size:13px;color:var(--muted);margin:10px 0 0}
.det-note a{white-space:nowrap}
.robwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table.rob{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
table.rob td,table.rob th[scope=row],table.rob thead th{padding:9px 12px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
table.rob thead th{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
table.rob td:first-child,table.rob th[scope=row]:first-child,table.rob thead th:first-child{text-align:left;white-space:normal}
table.rob tr:last-child td,table.rob tr:last-child th[scope=row]{border-bottom:0}
table.rob .sub{display:block;font-size:12px;color:var(--muted)}
/* deputados: a soma dos 3 distritos quebra linha; no celular, maior votação e soma vão numa linha inteira (tr.sm-row) */
table.rob td.soma,table.rob th[scope=row].soma{white-space:normal;min-width:15em}
table.rob tr.sm-row{display:none}
table.rob tr.sm-row td,table.rob tr.sm-row th[scope=row]{white-space:normal;text-align:left;font-size:13px;color:var(--muted);padding-top:0}
table.rob tr.sm-row b{color:var(--ink);font-weight:600}
/* tablet (até 1000 px): a tabela de deputados já empilha "Maior percentual" e a soma dos 3 distritos (tr.md-row), e a de distritos
   leva a região e os válidos para baixo do nome: nenhuma tabela rola de lado entre 320 e 1280 px (revisão de 09/10/2026) */
#tesc thead th,#tcand thead th{white-space:normal}   /* cabeçalho em duas linhas quando falta largura (580 a 620 px), em vez de rolar */
#tcand thead th .sub{font-size:11px;font-weight:500;text-transform:none;letter-spacing:0}   /* "% dos votos válidos" embaixo de "Cidade": letra menor e em caixa normal (14/10/2026) */
table.rob tr.md-row{display:none}
table.rob tr.md-row td,table.rob tr.md-row th[scope=row]{white-space:normal;text-align:left;font-size:13px;color:var(--muted);padding-top:0}
table.rob tr.md-row b{color:var(--ink);font-weight:600}
table.t td .sub.md,table.t th[scope=row] .sub.md{display:none}
.nw{white-space:nowrap}   /* a seta do detalhe fica junto da primeira palavra do nome do distrito */
.duas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.duas h3{margin:0 0 10px}
/* as duas tabelas ocupam a mesma célula: a caixa reserva a altura da maior, e trocar de cargo não move o que vem abaixo */
.porreg{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 12px}
.porreg h3{margin:0}
.cargos{display:grid}
.cargos>*{grid-area:1/1;align-self:start}
.cargos>[inert]{visibility:hidden}
#candcargo{margin:0 0 14px}
#estcardseg{margin:0 0 12px}
#cards.um{grid-template-columns:minmax(0,760px)}  /* um card só no topo, na largura do texto */
#cards .grade2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
#cards .grade2 .verdict,#cards .grade2 .note{grid-column:1/-1}
#cards .grade2 .cand .l{align-items:flex-start}
#cards .grade2 .cand .l span{white-space:normal;overflow:visible}
#cards .grade2 .cand .v b{color:var(--ink);font-size:14px}  /* no Senado do topo, o percentual fica na linha de baixo */  /* em duas colunas o nome quebra linha, sem reticências */
.par{display:flow-root}  /* par de textos com altura reservada junto: a sobra fica no fim, e as margens contam */
.escpares{margin-top:34px;max-width:760px;display:flow-root}  /* flow-root: a margem do último parágrafo fica dentro da altura reservada */
#escnota{margin-bottom:0}
.escpares h3{font-size:17px;margin:0 0 8px}
.escpares .intro{margin-bottom:14px}
#tesc tr.pa td,#tesc tr.pa th[scope=row]{border-bottom:0;padding-bottom:3px}
#tesc tr.pb td,#tesc tr.pb th[scope=row]{padding-top:3px}
#tesc .sub.sm{display:none}
#tesc thead th .sub{font-weight:500;text-transform:none;letter-spacing:0}
.segs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 4px}
#rendanota{margin:12px 0 14px}
.sub22{display:block;font-size:13px;font-weight:500;margin-top:2px}
table.t thead th.wrap{white-space:normal}
/* coluna por deputado: o nome com uma seta e, por cima, o seletor invisível (16 px, para o iPhone não ampliar a página) */
table.t thead th.escolhe{cursor:default;text-transform:none;letter-spacing:0}  /* nome em caixa normal: mais estreito que em maiúsculas */
table.t thead th.escolhe::after{content:none}   /* a seta da ordem vai no botão (.ord) */
table.t thead th.escolhe .nm{position:relative;display:inline-block;cursor:pointer}   /* o seletor cobre só o nome; o botão ao lado ordena */
table.t thead th.escolhe .nm::after{content:" ▾";content:" ▾" / "";color:var(--muted)}  /* / "": o leitor de tela não lê a seta */
table.t thead th.escolhe select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
table.t thead th .ord{background:none;border:0;margin:0 0 0 2px;padding:2px 3px;min-width:24px;min-height:24px;font:inherit;color:var(--muted);cursor:pointer;vertical-align:middle;border-radius:6px}
table.t thead th[aria-sort="descending"] .ord,table.t thead th[aria-sort="ascending"] .ord{color:var(--ink)}
table.t thead th.escolhe:focus-within{outline:2px solid var(--focus);outline-offset:-2px}

.method{max-width:780px}
.method p{margin:0 0 12px}
.method h3{margin:20px 0 6px}
code{font-size:.9em;background:var(--soft);padding:1px 5px;border-radius:4px}
footer{padding:36px 0 60px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
footer ul{padding-left:18px}
.show-sm{display:none}

@media (max-width:860px){
  .cards,.duas{grid-template-columns:minmax(0,1fr)}
  .maplayout{grid-template-columns:minmax(0,1fr)}
  .regions{grid-template-columns:1fr 1fr}
  .mapbox{min-height:480px}
}
@media (max-width:1000px){
  .hide-md{display:none}
  table.rob tr.md-row{display:table-row}
  table.rob tr.depm td,table.rob tr.depm th[scope=row]{border-bottom:0}
  table.t td .sub.md,table.t th[scope=row] .sub.md{display:block}
}
@media (max-width:820px){
  .hide-t{display:none}
  table.t td,table.t th[scope=row],table.t thead th{padding:8px 5px}
  table.t td:first-child,table.t th[scope=row]:first-child,table.t thead th:first-child{padding-left:10px}
  .mini{width:64px}
  table.t{font-size:13px}
  table.t thead th{font-size:11px;letter-spacing:.02em}
  .win{font-size:12px}
}
@media (max-width:560px){
  header.hero{padding-top:58px}   /* o kicker começa abaixo do botão de tema (que rola com a página e vai até 50 px; "◐ Tema escuro" desde 14/10/2026) */
  .regions{grid-template-columns:1fr}
  .duel .pct{font-size:28px}
  input.search{min-width:0;max-width:none;width:100%;flex-basis:100%}
  .toolbar .selwrap{flex:1 1 100%;min-width:0}
  .toolbar .selwrap select{flex:1 1 auto;min-width:0;width:100%}  /* em tela estreita o seletor encolhe em vez de transbordar */
  table.t td,table.t th[scope=row],table.t thead th{padding:8px 5px}
  table.t td:first-child,table.t th[scope=row]:first-child,table.t thead th:first-child{padding-left:10px}
  .mini{width:64px}
  table.t{font-size:13px}
  table.t thead th{font-size:11px;letter-spacing:.02em}  /* cabeçalho em maiúsculas é o que alarga as colunas de candidato */
  .win{font-size:12px}
  .hide-sm{display:none}
  .show-sm{display:inline}
  table.t td .sub.sm,table.t th[scope=row] .sub.sm{display:block}
  table.rob{font-size:14px}
  table.rob td,table.rob th[scope=row],table.rob thead th{padding:8px 8px}
  table.rob thead th{white-space:normal}
  table.rob tr.sm-row{display:table-row}
  .legreg{column-gap:12px}   /* por classe: os clones da medição (escolherVersoes) também a recebem */
  #tesc .sub.sm{display:block}
  table.rob td,table.rob th[scope=row]{white-space:normal}  /* no celular as quatro colunas cabem: nome de distrito e "votos" quebram linha */
  table.rob td.est,table.rob th[scope=row].est{white-space:normal;min-width:7.5em}
  table.rob tr.dep1 td,table.rob tr.dep1 th[scope=row]{border-bottom:0}
  /* Senado por região tem quatro candidatos: menos respiro para caber em 375 px */
  #testsen td,#testsen th[scope=row],#testsen thead th{padding-left:6px;padding-right:6px}
  .seg button{padding:6px 11px;font-size:13px}
}
/* 320 px: a tabela de candidatos (cinco colunas de deputado viram três) precisa de menos respiro para caber */
/* até 400 px: a tabela de distritos com quatro colunas de candidato (Senado, deputados) cabe sem rolar, também em 375 e 320 px */
@media (max-width:400px){
  table.t td,table.t th[scope=row],table.t thead th{padding:8px 3px}
  table.t td:first-child,table.t th[scope=row]:first-child,table.t thead th:first-child{padding-left:8px}
  table.t thead th{font-size:11px;letter-spacing:0}   /* 13 e 11 px desde a revisão de 14/10/2026 (eram 12 e 10) */
  table.t td,table.t th[scope=row]{font-size:13px}
  table.t thead th.wrap{text-transform:none}   /* os nomes de candidato em caixa normal (mais estreitos): as quatro colunas do Senado cabem em 360 px */
  .win{white-space:normal}
  .mini{width:auto;min-width:40px}
}
/* 320 a 345 px: quatro nomes de deputado lado a lado só cabem com a palavra longa quebrada ("Campo-piano") */
@media (max-width:345px){table.t thead th.wrap{overflow-wrap:anywhere;hyphens:auto;font-size:9px}table.t thead th:first-child{width:1%}}   /* a coluna Distrito fica no mínimo e sobra largura para os nomes */
/* 320 a 345 px, com as células de 13 px (14/10/2026): menos respiro nos números e o nome pode quebrar dentro da palavra; a coluna
   "Mais votado" fica (repete o número, mas é a única marca do vencedor) */
@media (max-width:345px){table.t td.n,table.t th[scope=row].n{padding-left:2px;padding-right:2px}table.t td:first-child,table.t th[scope=row]:first-child{overflow-wrap:anywhere}table.t td .nw,table.t th[scope=row] .nw{white-space:normal}}
@media (max-width:360px){
  table.rob thead th{letter-spacing:0}
  table.rob{font-size:13px}
  table.rob td,table.rob th[scope=row],table.rob thead th{padding:8px 5px}
  table.rob td:first-child,table.rob th[scope=row]:first-child,table.rob thead th:first-child{padding-left:8px}
  #tpart td,#tpart th[scope=row],#tpart thead th{padding-left:4px;padding-right:4px}   /* Comparecimento: passava 1 px a 320 com a fonte reserva */
}
/* até a primeira renderização, só o topo aparece: o resto entra já no lugar, sem empurrar nada (CLS na carga) */
html.carregando main,html.carregando footer{display:none}   /* a classe vem do script do <head>: sem JavaScript, nada fica escondido */
footer nav li{margin:2px 0}
footer nav li a{display:inline-block;padding:2px 0}   /* área de toque de 24 px */
#escsegs{margin:10px 0 12px;align-content:flex-start}   /* botões do quadro da escolaridade */
/* situação no estado, nas tabelas de senadores e deputados */

.selo.t2{background:var(--surface);color:var(--ink);border-color:var(--ink)}   /* "2º turno" (16/10/2026): o texto diz, o contorno escuro distingue de "não eleito" */

/* a divisão "Favelas" (14/10/2026, como no site do Rio): o botão da divisão nas seções, os círculos dos locais e as favelas do IBGE */
.quebra{flex-basis:100%;height:0}   /* quebra de linha numa barra de botões (o cargo e a divisão numa linha, os seletores na de baixo) */
#unidlab,#loclab{display:inline-block;min-width:4.4em}   /* "Distrito" ou "Local": trocar de divisão não desloca o seletor */
.seg button{white-space:nowrap}   /* o texto do botão não quebra: quem não cabe desce inteiro para a linha de baixo */
.seg button:disabled{cursor:default}   /* o agrupamento do comparecimento nas Regionais: só "Regionais", desativado, para o lugar não mudar */
.leaflet-tooltip{white-space:normal;width:max-content;max-width:min(280px,64vw)}   /* nomes de local longos quebram linha em vez de sair da tela */
.maplegend.fundo{margin-top:8px}
.skey i.fz{width:16px;height:11px;border-radius:2px;border:1px solid}   /* amostra dos polígonos de fundo (favelas do IBGE) */
.skey i.fav{background:rgba(192,133,82,.26);border-color:#a8703f}
:root[data-theme="dark"] .skey i.fav{background:rgba(217,168,119,.2);border-color:#d9a877}
.maplegend.matas{margin-top:8px}   /* a cobertura vegetal (matasLegenda): a amostra com a cor do mapa em cada tema */
.mtkey{color:var(--muted);font-weight:500}
.mtkey i{display:inline-block;width:16px;height:11px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:rgba(197,219,179,.9)}
:root[data-theme="dark"] .mtkey i{background:rgba(79,143,95,.85)}
#rendasegs{align-content:flex-start}   /* a linha reserva a altura da maior; os botões ficam no alto */
/* 19/10/2026: a quebra antes dos candidatos, ligada pelo app.js quando deixa as alturas mais próximas entre os cargos; o -10 px desfaz o
   vão (gap) da linha vazia da quebra. E abaixo de 360 px, os quatro do Senado numa linha (com 11 px de lado, desciam dois: 33 px a mais) */
#rendasegs .qcand{display:none}
#rendasegs.qcand-on .qcand{display:block;flex-basis:100%;height:0}
#rendasegs.qcand-on #rendacand{margin-top:-10px}
@media (max-width:359.98px){#rendacand button{padding-left:6px;padding-right:6px}}
.ecp{display:flow-root}   /* os painéis do cartão (19/10/2026): as margens ficam dentro, como no item da grade, também nos clones que as versões medem */
#tcand td.hide-md .sub,#tcand th[scope=row].hide-md .sub,#tcand td.hide-sm .sub,#tcand th[scope=row].hide-sm .sub{white-space:normal;min-width:8em}   /* nomes de locais de votação são longos: quebram linha em vez de alargar a tabela */
@media (max-width:400px){#t22up td:first-child,#t22up th[scope=row]:first-child,#t22down td:first-child,#t22down th[scope=row]:first-child,#tcand td:first-child,#tcand th[scope=row]:first-child,#tesc td:first-child,#tesc th[scope=row]:first-child,#tpart td:first-child,#tpart th[scope=row]:first-child{overflow-wrap:anywhere}}   /* nomes de locais com palavras longas: quebram em 320 px */
.segs>#candcargo{margin:0}   /* o botão de cargo de "Onde cada candidato foi melhor" divide a linha com o da divisão: a margem fica na linha */
/* Comparecimento (14/10/2026, como no Rio): o botão de divisão e o de agrupamento ficam lado a lado só onde cabem os dois inteiros (768 px
   ou mais); abaixo, um sobre o outro. Sem isso, esconder um botão do agrupamento (a escolaridade não existe nos locais) deixava o botão
   caber na linha de cima numa faixa de larguras, e a tabela pulava. Até 400 px os quatro botões cabem numa linha (em 320 px também) pelo
   mesmo motivo */
@media (max-width:767px){#comparecimento .segs{flex-direction:column;align-items:flex-start}}
@media (max-width:400px){#partgrupo button{padding:7px 7px;font-size:12px}}
/* Em relação a 2022: a tabela do topo (três colunas) na largura do texto; na largura toda ficava esticada (pedido do André,
   14/10/2026) */
#par22 .robwrap{max-width:760px}
/* No celular, as colunas têm a mesma largura nos dois cargos e nas duas divisões (layout fixo: a da região com 6,6em, onde "Zona
   Oeste" vai em duas linhas, como os números ao lado, e o resto se divide entre os dois candidatos). Na largura automática, "Locais
   com par" numa linha só, na divisão "Favelas", tomava a largura dos números, que quebravam em três linhas, e a tabela ficava 110 px
   mais alta que a dos distritos; a altura reservada é a da maior, e sobrava esse branco antes de "Lula | Flávio" (15/10/2026) */
@media (max-width:560px){#par22 table.rob{table-layout:fixed}#par22 table.rob thead th:first-child{width:6.6em}}
/* 21/10/2026: a tabela por regional de Presidente e a de Governador com a mesma altura de 320 a 560 px: os números ("51,8% → 53,0%") não quebram
   (a de presidente, com algarismos maiores, quebrava de 325 a 340 px e a de governador não: 174 px de diferença) e, até 345 px, o respiro lateral encolhe */
@media (max-width:560px){#par22 table.rob td{white-space:nowrap}}
@media (max-width:345px){#par22 table.rob td,#par22 table.rob th[scope=row],#par22 table.rob thead th{padding-left:3px;padding-right:3px}#par22 table.rob thead th:first-child{width:6em}}
/* Renda, escolaridade, religião e voto: o gráfico de pontos e a legenda dele na largura do texto, como os quadros da escolaridade e
   da religião (760 px); na largura toda, o desenho (720 de largura no viewBox, com a altura proporcional) passava de 1.000 px e
   ficava grande demais no computador (pedido do André, 14/10/2026). A nota de cima (.intro) já fica em 740 px; no celular e no
   tablet a coluna é mais estreita que isso, e nada muda */
#scatter,#scatterlegend{max-width:760px}
/* o texto dos grupos do seletor Deputado, sob o mapa, na largura de leitura (14/10/2026) */
#gruposnota{max-width:740px}
/* o rodapé com a ordem e os grupos da barra lateral (revisão de 14/10/2026) */
footer nav .ft-cid{margin:10px 0 0;font-weight:600;color:var(--ink)}
footer nav ul{margin:2px 0 0}
/* ---------- Fase 2 da revisão de 14/10/2026: componentes comuns aos seis sites (revisoes/2026-10-14/analise/ESPEC_FASE2.md) ---------- */
/* o índice de seções (#chips) saiu em 18/10/2026 (pedido do André): as seções ficam na barra lateral e na folha "Seções". No lugar dele,
   no fim do topo, o bloco "Em resumo" (variante B do mockup aprovado): três ou quatro frases, cada uma com o link da seção */
.resumo{margin:14px 0 18px;padding:12px 14px 10px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;background:var(--surface);max-width:760px}
.resumo .resumo-tit{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;font-weight:700}
.resumo ul{margin:0;padding:0;list-style:none}
.resumo li{font-size:.95rem;line-height:1.4;padding:6px 0;border-top:1px solid var(--line)}
.resumo li:first-child{border-top:0}
.resumo li a{white-space:nowrap;font-weight:600;color:var(--accent);text-decoration:none}
.resumo li a:hover{text-decoration:underline}
/* enquanto a página carrega, o bloco ocupa o lugar, mas não aparece: a troca da fonte e a medição do texto do topo ainda mudam a altura
   acima; aparece depois disso (topo-pronto, no app.js, quando as fontes chegam e o texto do topo é medido), já no lugar, como o índice de antes */
html:not(.topo-pronto) .resumo{visibility:hidden}
/* o "#" de cada título de seção saiu em 16/10/2026 (pedido do André): o id das seções e o endereço com #secao continuam */
/* o botão "Seções" (2.3), como no site do exterior: abaixo de 1.280 px, fixo no canto de baixo, acima da área segura do iPhone; aparece
   depois do topo e some, sem sair do lugar, enquanto o "Comparar com…" do painel passa por baixo dele (classe desvia, no app.js). A folha é um
   diálogo sobreposto, com fundo escuro; no celular, presa embaixo, na largura toda */
.secoesbtn{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));z-index:1100;height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);font:600 14px Inter,"Inter Fallback",system-ui,sans-serif;box-shadow:0 2px 10px rgba(0,0,0,.25);cursor:pointer}
/* no celular (abaixo de 768 px) o botão e a folha também saem (pedido do André, 16/10/2026): fica o índice de seções do topo; o
   app.js tira o hidden do botão depois do topo, e o display:none daqui vale por cima disso */
@media (max-width:767px){.secoesbtn,.secoesfolha{display:none!important}}
/* a partir de 1.280 px, as seções desta página na barra lateral, embaixo do site atual, com a seção corrente marcada; a barra
   continua com 184 px e rola por dentro se a lista não couber */
@media (min-width:1280px){
  .sitesnav .sn-secoes a{margin:0;padding:3px 8px;font-size:13px}
}
/* "Sobre e como citar", no rodapé (2.4; o registro de correções ficou para o futuro, decisão do André de 15/10/2026) */
.sobre{margin:18px 0}
.sobre p{margin:0 0 10px}
.sobre #copiarcitacao{margin-left:4px}
.so-impressao{display:none}
/* movimento reduzido (2.5): sem rolagem suave (a guarda que o site do Rio já tinha) e sem as pequenas animações; o mapa, sem animação
   de zoom (app.js) */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.chev,.method details.topico>summary::before,.copiado{transition:none}tr.flash>td,tr.flash>th[scope=row]{animation:none}}
/* impressão (2.5): tema claro forçado; sem a barra lateral, o botão "Seções", a busca, o índice, os seletores e os botões; tabelas sem
   rolagem e sem corte (o app.js abre as cortadas antes de imprimir); nada partido no meio de um cartão ou de uma linha; no rodapé, o
   endereço da página */
@media print{
  :root,:root[data-theme="dark"],:root:not([data-theme="light"]){
    --bg:#ffffff; --surface:#ffffff; --ink:#1b1f24; --muted:#5d6570; --line:#d9d3c8; --soft:#efe9df;
    --lula:#c8102e; --flavio:#1f4fb8; --tarcisio:#0e7c86; --ciro:#d38b00; --outro:#a7adb5; --neutro:#d9d3c8;
    --accent:#8a5f00; --bar-text:#ffffff; --tarcisio-txt:#0d7079;
  }
  :root[data-theme="dark"] .win{color:color-mix(in srgb,var(--wc,var(--ink)),var(--ink) var(--wl,0%))}
  html{scroll-behavior:auto}
  body{padding-left:0!important;background:#fff;color:#1b1f24}
  .sitesnav,.secoesbtn,.secoesfolha,.themebtn,.aviso,.copiado,.pular,.seg,.selwrap,select,button,input,.leaflet-control-zoom,.mapreset{display:none!important}
  .tablewrap,.robwrap,.inner{overflow:visible!important;max-width:none!important;border-color:#d9d3c8}
  table.t thead th{position:static}
  #panel{position:static!important;width:auto!important;overflow:visible!important;background:#fff!important}
  .card,.reg,.mapinfo,.cand,.escpares,.scatter,.mapbox,tr,details.topico>summary,footer p,footer li{break-inside:avoid}
  h2,h3,summary{break-after:avoid}
  section{break-before:auto}
  .so-impressao{display:block}
}

/* Fase 3 de 15/10/2026, 3.3 (acessibilidade). A primeira célula de cada linha das tabelas é um cabeçalho de linha (<th scope="row">): as
   regras de cabeçalho acima valem só no thead, e cada regra de td vale também para ele (mesma aparência de antes). O cabeçalho da tabela
   de unidades ordena por um botão dentro do th, que ocupa a célula toda e leva a seta da ordem. "Pular o mapa" aparece sobre o mapa, no
   foco, sem empurrar nada */
th[scope=row]{font-weight:inherit;text-align:inherit}
table.t thead th .ordbtn{display:block;width:100%;margin:0;padding:0;border:0;border-radius:0;background:none;font:inherit;color:inherit;text-align:inherit;text-transform:inherit;letter-spacing:inherit;line-height:inherit;white-space:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
table.t thead th[aria-sort="descending"] .ordbtn::after{content:" ↓"}
table.t thead th[aria-sort="ascending"] .ordbtn::after{content:" ↑"}

/* Fase 5 da revisão de 14/10/2026 (ESPEC_FASE5.md): "Comparar com…" (5.5) e, no Rio e em SP, "Procure seu deputado" e "Onde foi mais
   forte" (5.6). Os mesmos nomes nos três sites. "Compartilhar" e "Baixar imagem" saíram em 15/10/2026 (decisão do André): o "Comparar
   com…" fica logo abaixo do nome, com a margem de cima que era a dos botões */
.cmpwrap{margin:10px 0 12px}
.cmpwrap>span{flex:none;white-space:nowrap}
.cmpwrap select{flex:1 1 auto;min-width:0;width:100%}
/* a comparação: lado a lado, com as linhas das duas colunas na mesma altura (subgrid); até 560 px, uma embaixo da outra */
.cmp2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:14px}
.cmp2-u{display:grid;grid-template-rows:subgrid;min-width:0}
.cmp2-n{align-self:end;font-weight:700;font-size:14px;line-height:1.3;overflow-wrap:anywhere;padding-bottom:6px;border-bottom:1px solid var(--line)}
.cmp2-b .cmp2-n{text-align:right}
.cmp2-c{display:flex;align-items:baseline;gap:8px;padding-top:7px;font-size:14px;line-height:1.35;min-width:0}
.cmp2-c .nm{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}   /* o nome longo quebra linha; a linha de B acompanha (subgrid) */
.cmp2-c b{flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.cmp2-c .df{flex:none;min-width:3.3em;text-align:right;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cmp2-b .cmp2-c{justify-content:flex-end}
.cmp2-b .cmp2-c .nm{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}   /* lado a lado, o nome é o da coluna de A, na mesma linha; o leitor de tela o ouve */
.cmp2-v,.cmp2-v b{color:var(--muted);font-weight:400}
@media (max-width:560px){
  .cmp2,.cmp2-u{display:block}
  .cmp2-b{margin-top:16px}
  .cmp2-b .cmp2-n{text-align:left}
  .cmp2-b .cmp2-c{justify-content:normal}
  .cmp2-b .cmp2-c .nm{position:static;width:auto;height:auto;margin:0;clip:auto}
}
@media (max-width:767px),(pointer:coarse){#comparacom{min-height:44px}}
/* "Onde foi mais forte", no painel da cidade com um deputado escolhido */
.forte{margin:0 0 12px;padding:10px 0 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.forte-sub{margin:2px 0 6px;font-size:12px;color:var(--muted)}
.forte ol{margin:0;padding:0;list-style:none;counter-reset:forte}
.forte li{display:flex;align-items:baseline;gap:8px;font-size:14px;line-height:1.35;counter-increment:forte}
.forte li::before{content:counter(forte) ".";flex:none;min-width:1.2em;color:var(--muted);font-variant-numeric:tabular-nums}
.forte-u{flex:1 1 auto;min-width:0;min-height:26px;padding:0;border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.forte-u:hover{text-decoration-color:currentColor}
.forte-n{flex:none;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.forte-n b{color:var(--ink);font-weight:600}
@media (pointer:coarse){.forte-u{min-height:36px}}
/* RF1-7 (revisão final de 15/10/2026, aprovada pelo André): "Deputado" é um combobox só (o "Procure seu deputado" da fase 5 entrou
   nele). Mesma altura e largura em todos os cargos (36 px; 44 px e 16 px no toque e abaixo de 768 px; a largura no computador é a do
   texto mais longo, medida no app.js, ajustaDepSel), com a seta de lista à direita; o rótulo fica ao lado do campo de 360 px
   para cima (abaixo, em cima, com o campo na largura toda). A lista abre sobreposta, na largura da linha (rótulo e campo), e não empurra nada nem passa da
   barra; rola por dentro */
#viewdepwrap,#localwrap{position:relative}
#viewdepwrap .busca-caixa{position:relative;width:300px;max-width:100%}
#viewdepwrap .busca-caixa::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;margin-top:-5px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}
#viewdepwrap input.search,#localwrap input.search{display:block;width:100%;max-width:none;min-width:0;height:36px;font:600 14px Inter,"Inter Fallback",system-ui,sans-serif;padding:0 30px 0 12px;text-overflow:ellipsis;cursor:pointer}
#viewdepwrap input.search:focus,#localwrap input.search:focus{cursor:text}
#viewdepwrap input.search::placeholder,#localwrap input.search::placeholder{color:var(--muted);font-weight:500;opacity:1}
#viewdepwrap input.search:disabled{opacity:.65;cursor:progress}
@media (max-width:560px){#viewdepwrap .busca-caixa{flex:1 1 auto;width:auto;min-width:0}}
@media (max-width:359px){#viewdepwrap{flex-wrap:wrap;row-gap:4px}#viewdepwrap>label{flex:1 1 100%}#viewdepwrap .busca-caixa{flex-basis:100%}}   /* abaixo de 360 px, o rótulo em cima: o campo na largura toda */
@media (max-width:767px),(pointer:coarse){#viewdepwrap input.search{height:44px;font-size:16px}#localwrap input.search{font-size:16px}}   /* 16 px: o iPhone não amplia a página */
@media (min-width:861px){#panel{overflow-y:auto;overscroll-behavior:contain}}   /* com a reserva de altura como teto (fitPanel), o que passa dela rola por dentro */
@media print{#panel{max-height:none!important}}

/* ---------- Revisão final de 15/10/2026 (revisoes/2026-10-14/analise/revisao_final/CORRECAO.md) ---------- */
/* RF1-5: "Pular para o conteúdo", o primeiro do <body>, à vista só no foco, no estilo do "Pular o mapa" (fixo, acima da barra lateral) */
#conteudo:focus{outline:none}
/* RF1-4: abaixo de 1.280 px, o rodapé termina acima do botão "Seções" (o último link ficava embaixo dele); o botão deixa ver um pouco do
   que está por baixo, e fica opaco ao passar o mouse ou com o foco */
@media (max-width:1279px){body>footer.wrap{padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px))}}   /* o .wrap zerava o padding do footer */
.secoesbtn{background:color-mix(in srgb,var(--ink) 80%,transparent)}
/* RF1-3: no quadro da escolaridade e no da religião, o nome não se parte no meio da palavra ("Botafog/o") e a renda fica numa linha */
@media (max-width:400px){
  #tesc th[scope=row]:first-child,#trel th[scope=row]:first-child{overflow-wrap:break-word;word-break:normal;width:35%}
  #tesc .sub.sm,#trel .sub.sm{white-space:nowrap}
  /* 16/10/2026: com os 4 candidatos do Senado em colunas, a tabela dos pares precisa de menos respiro e de cabeçalho menor para caber sem rolar */
  #tesc td,#tesc th[scope=row],#tesc thead th{padding-left:3px;padding-right:3px}
  #tesc thead th{font-size:10px;letter-spacing:0}
  #tesc thead th:first-child .sub{font-size:11px;text-transform:none;font-weight:400;white-space:normal}
}
@media (max-width:345px){#tesc thead th{font-size:9px}}
/* 16/10/2026: as tabelas dos pares dos três cargos com a MESMA altura natural, sem reserva: cabeçalhos de uma linha e nomes sem quebra
   no computador e no tablet; no celular, colunas fixas (a do distrito com a mesma largura nos três cargos, e por isso a mesma quebra) */
@media (min-width:561px) and (max-width:820px){#tesc td,#tesc th[scope=row],#tesc thead th{padding-left:8px;padding-right:8px}}
@media (min-width:561px){#tesc thead th,#tesc th[scope=row]:first-child{white-space:nowrap}}
/* 21/10/2026: com os 4 candidatos do Senado (7 colunas) a tabela rolava de lado de 561 a 1280 px. De 561 a 780 px ela usa o desenho do celular (renda e
   diploma embaixo do nome, colunas fixas) nos três cargos; de 781 px em diante as colunas são fixas, o nome do bairro pode quebrar ("Cidade Industrial
   de Curitiba") e "Superior completo" vai em duas linhas, com as mesmas larguras nos três cargos, e por isso a mesma quebra e a mesma altura */
@media (min-width:561px) and (max-width:780px){#tesc .hide-sm{display:none}#tesc .sub.sm{display:block}#tesc{table-layout:fixed}#tesc thead th:first-child{width:30%;white-space:normal}#tesc th[scope=row]:first-child{white-space:normal}}
@media (min-width:781px){#tesc{table-layout:fixed}#tesc th[scope=row]:first-child,#tesc thead th:nth-child(3){white-space:normal}#tesc thead th:first-child{width:160px}#tesc thead th:nth-child(2){width:100px}#tesc thead th:nth-child(3){width:100px}}
@media (max-width:560px){#tesc{table-layout:fixed}#tesc thead th:first-child{width:34%}#tesc thead th{white-space:nowrap}#tesc thead th:first-child{white-space:normal}}
/* RF1-6: alvos de toque de 44 px no celular: os botões de ordenar da tabela, "Mais N candidatos", os botões pequenos ("Copiar citação",
   "Ver toda a cidade", "Ver no mapa") e o +/− do mapa; os botões dos grupos com 31 px, como nos sites das favelas */
@media (max-width:767px){
  table.t thead th{padding-top:0;padding-bottom:0}
  table.t thead th .ordbtn{min-height:44px;padding:8px 0}
  details.others>summary{min-height:44px}
  button.more.sm{min-height:44px}
  .seg button{min-height:31px}
}
/* e os links das seções na barra lateral com 24 px (WCAG 2.5.8) */
@media (min-width:1280px){.sitesnav .sn-secoes a{min-height:24px}}
/* RF1-15: "Mais N candidatos" abre com o mesmo "›" dos tópicos do método */
details.others>summary{list-style:none;display:flex;align-items:center;gap:6px}
details.others>summary::-webkit-details-marker{display:none}
details.others>summary::before{content:"›";flex:none;width:10px;font-weight:700;transition:transform .15s}
details.others[open]>summary::before{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){details.others>summary::before{transition:none}}
/* RF1-8: na citação, o endereço e "CC BY 4.0" não se partem (o endereço, com cerca de 220 px, cabe numa linha também a 320 px);
   "Copiar citação" numa linha própria, com 44 px no toque */
.nw{white-space:nowrap}
.sobre #copiarcitacao{display:block;margin:8px 0 0}
@media (hover:none){.sobre #copiarcitacao{min-height:44px}}
/* RF1-11: no comparecimento, até 400 px, a sublinha da região fica curta, os cabeçalhos com 11 px e a região com 42% da largura */
@media (max-width:400px){
  #tpart .cv{display:none}
  #tpart thead th{font-size:11px}
  #tpart th[scope=row]:first-child{width:42%}
  #tpart .ab-l{display:none}
  #tpart .ab-c{display:inline}
}
.ab-c{display:none}   /* "Abst." só até 400 px (RF1-11) */
/* RF1-12: na legenda do mapa, o nome e a contagem não se partem ("44 / distritos") e as escalas ficam na mesma altura */
.maplegend .ckey{align-self:stretch;justify-content:flex-end}
.ckey .nm small{white-space:nowrap}
/* O campo "Local" da divisão "Locais" (16/10/2026, como no Rio): no lugar do seletor de unidade, com a mesma caixa (a largura vem do
   ajustaUnidades no computador; no celular, a que sobra ao lado do rótulo) e a lista sobreposta do "Deputado" */
#localwrap .busca-caixa{position:relative;max-width:100%}
#localwrap input.search{height:35px}   /* a altura do seletor de unidade, de que ele toma o lugar (nada se desloca ao trocar de divisão) */
#localwrap .busca-pop{min-width:min(340px,calc(100vw - 32px))}
@media (max-width:560px){#localwrap .busca-caixa{flex:1 1 auto;min-width:0}}
/* C3 (16/10/2026): o nome do distrito no mapa, pequeno, com halo da cor do fundo (os dois temas pelas variáveis), sem receber clique */
/* os nomes no mapa (CV.rotulos, fase 4 da unificação): o desenho do núcleo (.leaflet-rotulos-pane .rotulo), com a altura de linha e o halo de SP */
.leaflet-rotulos-pane .rot-distrito{line-height:13px;text-shadow:0 0 1px var(--bg),0 0 2px var(--bg),0 0 2px var(--bg),0 0 3px var(--bg),0 0 4px var(--bg)}
/* a ficha do local no painel (a divisão "Locais"): blocos com título pequeno e tabelas compactas dos mais votados de cada cargo */
#panel .fbloco{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
#panel .fbloco h4{margin:0 0 6px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
#panel .fbloco p{margin:0 0 6px;font-size:14px;line-height:1.45}
/* o ano da ficha do local (16/10/2026): "2026 | 2022" logo abaixo do bloco "O local" */
#panel .fichaano{margin-top:12px}
#panel .fbloco .stats{margin-top:4px}
table.ficha{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
table.ficha th,table.ficha td{padding:4px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
table.ficha tr:last-child th,table.ficha tr:last-child td{border-bottom:0}
table.ficha th{text-align:left;font-weight:500;overflow-wrap:anywhere}
table.ficha th small{color:var(--muted)}
table.ficha td{text-align:right;white-space:nowrap;padding-left:10px;color:var(--muted)}
table.ficha td b{color:var(--ink)}
/* "Ampliar" (16/10/2026, ESPEC_PEDIDOS_16-10_B.md, item 5): o botão no canto de baixo à esquerda do mapa; a seção do mapa vira uma camada
   fixa na janela inteira (#mapa.ampliado), com a barra em cima e o mapa no resto; a partir de 1.024 px, o painel e a legenda ao lado */
.mapampliar{position:absolute;left:10px;bottom:10px;z-index:800;display:inline-flex;align-items:center;gap:6px}
.mapampliar svg{fill:none;stroke:currentColor;stroke-width:1.6;flex:none}
.mapampliar .amp-fecha,.mapampliar[aria-pressed="true"] .amp-abre{display:none}
.mapampliar[aria-pressed="true"] .amp-fecha{display:inline}
html.mapa-ampliado{overflow:hidden;padding-right:var(--sbw,0px)}   /* a barra de rolagem some: o preenchimento é o da largura dela medida ao abrir (0 sem barra); o scrollbar-gutter:stable encolhia a página em 15 px onde não há barra (o texto de cima quebrava diferente: 40 px a cada abrir e fechar) */
#mapa.ampliado{position:fixed;inset:0;z-index:2000;margin:0;max-width:none;width:auto;padding:12px 16px;border:0;background:var(--bg);overflow-y:auto;overscroll-behavior:contain}
#mapa.ampliado>h2,#mapa.ampliado>.intro{display:none}
#mapa.ampliado .toolbar{margin:0 0 12px}
#mapa.ampliado .maplayout{grid-template-columns:minmax(0,1fr)}
#mapa.ampliado .mapbox{min-height:0;height:calc(100vh - var(--ampbarra, 140px));height:calc(100dvh - var(--ampbarra, 140px))}
#mapa.ampliado #panel{min-height:0!important;max-height:none!important}
@media (min-width:1024px){
  #mapa.ampliado{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-rows:auto minmax(0,1fr) auto;column-gap:16px;overflow:hidden}
  #mapa.ampliado .toolbar{grid-column:1/-1}
  #mapa.ampliado .maplayout{display:contents}
  #mapa.ampliado .mapbox{grid-column:1;grid-row:2/4;height:auto}
  #mapa.ampliado #panel{grid-column:2;grid-row:2;overflow-y:auto;overscroll-behavior:contain}
  #mapa.ampliado #legendbox{grid-column:2;grid-row:3;max-height:40vh;overflow-y:auto}
}
@media print{.mapampliar{display:none!important}}
/* abaixo de 768 px, sem "Ampliar" (pedido do André, 18/10/2026: no celular ele diminuía o mapa); sem ocupar lugar, e o botão está
   fora do fluxo (absoluto, no canto de baixo à esquerda): nada se move ao redor. A partir de 768 px, como antes */
@media (max-width:767px){.mapampliar{display:none!important}}
/* "Camadas" (16/10/2026, ESPEC_PEDIDOS_16-10_C.md, C2): ao lado do zoom, com o menu flutuante (nada se desloca); a linha da legenda de
   uma camada desligada fica apagada */
.camadas{position:absolute;left:54px;top:10px;z-index:850}
/* abaixo de 768 px, os botões do zoom têm 44 px (o alvo de toque, cv.css): "Camadas" vai para depois deles, com o mesmo vão do computador
   (até 18/10/2026 os dois se cobriam por 5 px) */
@media (max-width:767px){.camadas{left:68px}}
.camadas-menu{position:absolute;left:0;top:calc(100% + 6px);min-width:220px;padding:10px 12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.18);font-size:14px}
.camadas-menu[hidden]{display:none}
/* fase 3 da unificação: a amostra de cada camada e "Voltar ao padrão desta divisão" no menu (os do .cammenu do núcleo, no menu de SP) */
.camadas-menu .amostra{flex:none;display:inline-block;width:16px;height:11px;border-radius:2px}
.camadas-menu .camvolta{display:block;margin:4px 0 2px;padding:4px 0;border:0;background:none;font:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;cursor:pointer}
.camadas-menu .camvolta:disabled{color:var(--muted);text-decoration:none;cursor:default}
.camadas-menu label{display:flex;align-items:center;gap:8px;min-height:32px;cursor:pointer}
.camadas-menu label:has(input:disabled){color:var(--muted);cursor:default}
.camadas-menu small{color:var(--muted)}
.camadas-menu p{margin:4px 0 0}
@media (pointer:coarse){.camadas-menu label{min-height:44px}}
.maplegend.off{opacity:.4}
@media print{.camadas{display:none!important}}
/* "Variação desde 2022" (C5): o sub-seletor na legenda e a hachura das unidades sem par */
#legendbox .varsel{margin-top:12px}
i.hach22{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:6px;background:repeating-linear-gradient(45deg,#e4e7eb 0 3px,#9aa3ad 3px 4.2px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) i.hach22{background:repeating-linear-gradient(45deg,#3a3f46 0 3px,#80878f 3px 4.2px)}}
:root[data-theme="dark"] i.hach22{background:repeating-linear-gradient(45deg,#3a3f46 0 3px,#80878f 3px 4.2px)}
/* Curitiba: o empate em primeiro lugar (hachura em outro ângulo e tom areia, como no mapa), o aviso de poucos votos e a nota da posição aproximada */
i.hach22.emp{background:repeating-linear-gradient(-45deg,#ebe6d8 0 3px,#8a7a4a 3px 4.2px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) i.hach22.emp{background:repeating-linear-gradient(-45deg,#3a3f46 0 3px,#c9b78a 3px 4.2px)}}
:root[data-theme="dark"] i.hach22.emp{background:repeating-linear-gradient(-45deg,#3a3f46 0 3px,#c9b78a 3px 4.2px)}
.pouco{display:inline-block;margin-left:6px;font-size:12px;font-weight:600;color:var(--accent)}
.aprox{margin-top:6px}

/* Votos por faixa (19/10/2026, ESPEC_TABELA_FAIXAS): uma linha por célula (nenhum rótulo nem cabeçalho quebra), a coluna das faixas
   na largura do texto mais longo (o número de votantes, em letra menor, embaixo do nome do grupo) e os números nas colunas que sobram; no celular, menos respiro (o Senado,
   com quatro candidatos, cabe sem rolar a 320 px) */
.fxbloco{margin-top:28px}
#fxsegs{margin:10px 0 12px;align-content:flex-start}
#fxnota{margin:12px 0 0}
#fxrodape{margin:8px 0 0}
#tfx th,#tfx td,#tfx thead th{white-space:nowrap}
#tfx thead th:first-child,#tfx th[scope=row]{text-align:left}
#tfx tr.fxcid th[scope=row],#tfx tr.fxcid td{border-top:1px solid var(--line)}
@media (max-width:560px){#tfx td,#tfx th[scope=row],#tfx thead th{padding-left:5px;padding-right:5px}#tfx thead th{letter-spacing:0}}
@media (max-width:400px){#tfx{font-size:13px}#tfx thead th{font-size:10px}#tfx td,#tfx th[scope=row],#tfx thead th{padding-left:3px;padding-right:3px}#tfx th[scope=row]:first-child,#tfx thead th:first-child{padding-left:8px}}
/* 320 a 345 px: o Senado (quatro colunas) com os votantes sob o nome do grupo cabe sem rolar com menos respiro nos números; até 400 px,
   a palavra "votantes" sai das linhas e fica no cabeçalho (20/10/2026) */
@media (max-width:345px){#tfx td{padding-left:2px;padding-right:2px}}
#tfx thead .fxvh{display:none}
#tfx .fxrc{display:none}
#tfx thead th .sub{font-weight:500;text-transform:none;letter-spacing:0}
/* até 400 px: largura fixa das colunas (a mesma nos três cargos), e o nome do grupo pode quebrar, igual em todos os estados */
@media (max-width:400px){#tfx thead .fxvh{display:block}#tfx .fxvt{display:none}#tfx{table-layout:fixed}#tfx thead th:first-child{width:34%}#tfx .fxrl{display:none}#tfx .fxrc{display:inline}#tfx th[scope=row]{white-space:normal}}
/* as regionais no mapa em duas linhas: "Regional" (do CSS, em cima) e o nome embaixo (o rotulos.json tem só o nome); o que não couber cai (R3, 21/10/2026) */
.leaflet-rotulos-pane .rot-regionais{text-align:center;font-size:12px;font-weight:700;line-height:13px}
.leaflet-rotulos-pane .rot-regionais::before{content:"Regional";display:block;font-size:10px;font-weight:600;letter-spacing:.03em}