/* JP Agora - Apuração das Eleições */
.jpa-apuracao {
	--jpa-red: #c81517;
	--jpa-red-2: #dd3333;
	--jpa-orange: #e9510e;
	--jpa-ink: #1b1c1e;
	--jpa-muted: #686c73;
	--jpa-line: #e7e7e9;
	--jpa-soft: #f5f5f6;
	--jpa-green: #17803d;
	/* tons que saem das cores acima (o PHP os refaz quando a cor é trocada em Configurações > Eleições) */
	--jpa-red-dk: #a91113;      /* botão com o mouse em cima */
	--jpa-red-tint: #fff5f3;    /* fundo de quem está na frente */
	--jpa-red-line: #f1b9b0;    /* borda do cartão de quem está na frente */
	--jpa-orange-tint: #fff3ec; /* fundo dos avisos */
	--jpa-font: 'Open Sans', 'Open Sans Regular', Arial, sans-serif;
	/* versão desta folha de estilo: o programa do painel confere e, se a página trouxe a de outra
	   versão (cache), pede a certa. Tem de ser igual à do plugin (o roteiro do zip confere). */
	--jpa-css: "2.1.1";

	position: relative;
	margin: 28px 0;
	background: #fff;
	color: var(--jpa-ink);
	border: 1px solid var(--jpa-line);
	border-radius: 10px;
	overflow: hidden;
	font-family: var(--jpa-font);
	font-size: 15px;
	line-height: 1.4;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .05);
	text-align: left;
}
.jpa-apuracao *,
.jpa-apuracao *::before,
.jpa-apuracao *::after { box-sizing: border-box; }
/* O tema (Newspaper) define fontes próprias para campos, botões e títulos com seletores mais
   fortes; aqui a Open Sans do JP Agora vale para tudo dentro do painel. */
.jpa-apuracao,
.jpa-apuracao *,
.jpa-apuracao *::before,
.jpa-apuracao *::after,
.jpa-apuracao input,
.jpa-apuracao button,
.jpa-apuracao input::placeholder { font-family: 'Open Sans', 'Open Sans Regular', Arial, sans-serif !important; }
.jpa-apuracao [hidden] { display: none !important; }
.jpa-apuracao img { margin: 0 !important; padding: 0; border: 0; max-width: none; }
.jpa-apuracao .jpa-boot { padding: 28px 18px; color: var(--jpa-muted); }
/* Enquanto o painel não é montado, o lugar dele já fica guardado na página (a altura de uma tela).
   Sem isso, o texto que vem depois do painel pulava para baixo quando ele aparecia: é o "CLS" que
   o Google mede. Sem JavaScript nada é guardado; e, se o programa do painel não chegar em 20 s
   (rede ruim, bloqueio), o espaço é solto. */
.jpa-apuracao > .jpa-boot { min-height: 100vh; }
.jpa-apuracao:not([data-jpa-ok]) > .jpa-boot { animation: jpa-solta 1ms linear 20s forwards; }
@keyframes jpa-solta {
	to { min-height: 0; }
}
@media (scripting: none) {
	.jpa-apuracao > .jpa-boot { min-height: 0; animation: none; }
}

/* ---------- cabeçalho ---------- */
.jpa-apuracao .jpa-head {
	position: relative;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 14px 18px 16px;
	background: linear-gradient(100deg, var(--jpa-red) 0%, var(--jpa-red-2) 58%, var(--jpa-orange) 100%);
	color: #fff;
	overflow: hidden;
}
.jpa-apuracao .jpa-head-txt { position: relative; z-index: 1; min-width: 0; }
.jpa-apuracao .jpa-logo {
	position: relative; z-index: 1;
	flex: 0 0 auto;
	display: block;
	width: auto; height: 42px;
	/* logo largo (SVG ou PNG de outra proporção) não espreme o título: encolhe dentro do espaço dele */
	max-width: 46%;
	object-fit: contain; object-position: right center;
	filter: brightness(0) invert(1);
}
/* logo com as cores dele (opção "Mostrar o logo todo em branco" desmarcada em Configurações > Eleições) */
.jpa-apuracao.is-logo-cor .jpa-logo { filter: none; }
/* a imagem do logo não chegou: fica o nome, em texto */
.jpa-apuracao .jpa-logo-txt {
	position: relative; z-index: 1;
	flex: 0 0 auto;
	max-width: 46%;
	font-size: 18px; font-weight: 700; line-height: 1.1;
	color: #fff;
}
.jpa-apuracao .jpa-stripes {
	position: absolute;
	top: 0; right: -10px; bottom: 0;
	width: 46%;
	background: repeating-linear-gradient(105deg, transparent 0 9px, rgba(255, 255, 255, .14) 9px 13px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
	mask-image: linear-gradient(90deg, transparent, #000 70%);
	pointer-events: none;
}
.jpa-apuracao .jpa-head-top {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 6px;
	font-size: 11px; font-weight: 700; line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.jpa-apuracao .jpa-live {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 9px 5px 8px;
	border-radius: 99px;
	background: rgba(0, 0, 0, .22);
}
.jpa-apuracao .jpa-live i {
	width: 8px; height: 8px; border-radius: 50%;
	background: #ffd34d;
}
.jpa-apuracao .jpa-live[data-estado="vivo"] i {
	background: #fff;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, .8);
	animation: jpa-pulso 1.6s infinite;
}
.jpa-apuracao .jpa-live[data-estado="final"] i { background: #7ee2a0; }
.jpa-apuracao .jpa-turno { opacity: .9; }
.jpa-apuracao .jpa-title {
	font-size: 22px; font-style: italic; font-weight: 700; line-height: 1.15;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: #fff;
}
@keyframes jpa-pulso {
	70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.jpa-apuracao .jpa-live[data-estado="vivo"] i { animation: none; }
	.jpa-apuracao .jpa-bar span,
	.jpa-apuracao .jpa-prog-bar span { transition: none; }
}

.jpa-apuracao .jpa-demo {
	padding: 7px 18px;
	background: #fff4cc;
	color: #6b5200;
	font-size: 11px; font-weight: 700; line-height: 1.3;
	letter-spacing: .05em;
	text-align: center;
}

/* ---------- menu de abas ---------- */
.jpa-apuracao .jpa-tabs {
	display: flex; flex-wrap: wrap;
	gap: 0 2px;
	padding: 0 10px;
	border-bottom: 1px solid var(--jpa-line);
}
.jpa-apuracao .jpa-tab {
	flex: 0 0 auto;
	margin: 0; padding: 13px 10px 11px;
	background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
	box-shadow: none;
	color: var(--jpa-muted);
	font-size: 13px; font-weight: 700; line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	height: auto; min-height: 0; width: auto;
}
.jpa-apuracao .jpa-tab:hover { color: var(--jpa-ink); background: none; }
.jpa-apuracao .jpa-tab.is-on { color: var(--jpa-red); border-bottom-color: var(--jpa-red); }
.jpa-apuracao .jpa-tab:focus-visible,
.jpa-apuracao .jpa-btn:focus-visible { outline: 2px solid var(--jpa-orange); outline-offset: 2px; }

/* ---------- local e status ---------- */
.jpa-apuracao .jpa-local {
	padding: 12px 18px;
	background: var(--jpa-soft);
	border-bottom: 1px solid var(--jpa-line);
}
.jpa-apuracao .jpa-local-rot {
	margin-bottom: 8px;
	font-size: 11px; font-weight: 700; line-height: 1;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--jpa-muted);
}
.jpa-apuracao .jpa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jpa-apuracao .jpa-chip {
	margin: 0; padding: 7px 13px;
	background: #fff;
	border: 1px solid #d6d7da; border-radius: 99px;
	box-shadow: none;
	color: var(--jpa-ink);
	font-size: 13px; font-weight: 600; line-height: 1;
	text-transform: none; letter-spacing: 0;
	cursor: pointer;
	height: auto; min-height: 0; width: auto;
}
.jpa-apuracao .jpa-chip:hover { border-color: var(--jpa-red); background: #fff; color: var(--jpa-ink); }
.jpa-apuracao .jpa-chip.is-on { background: var(--jpa-red); border-color: var(--jpa-red); color: #fff; }
.jpa-apuracao .jpa-chip:focus-visible { outline: 2px solid var(--jpa-orange); outline-offset: 2px; }

/* Painel nacional (2º turno): em cima, Brasil e cada estado com bandeira e sigla; embaixo ficam os
   botões das cidades. bandeiras-uf.png traz as 28 bandeiras uma embaixo da outra (24 x 17 cada);
   se a imagem mudar, mude também o nome do arquivo (o site guarda imagens por um ano). */
.jpa-apuracao .jpa-ufs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.jpa-apuracao .jpa-uf {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 5px;
	margin: 0; padding: 4px 7px 4px 5px;
	background: #fff;
	border: 1px solid #d6d7da; border-radius: 6px;
	box-shadow: none;
	color: var(--jpa-ink);
	font-size: 11.5px; font-weight: 700; line-height: 1;
	text-transform: none; letter-spacing: .02em; white-space: nowrap;
	cursor: pointer;
	height: auto; min-height: 0; width: auto; min-width: 0;
}
.jpa-apuracao .jpa-uf:hover { border-color: var(--jpa-red); background: #fff; color: var(--jpa-ink); }
.jpa-apuracao .jpa-uf.is-on { background: var(--jpa-red); border-color: var(--jpa-red); color: #fff; }
.jpa-apuracao .jpa-uf:focus-visible { outline: 2px solid var(--jpa-orange); outline-offset: 2px; }
.jpa-apuracao .jpa-bd {
	flex: 0 0 auto; display: block;
	width: 24px; height: 17px;
	background: url(../img/bandeiras-uf.png) 0 0 / 24px auto no-repeat;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

.jpa-apuracao .jpa-cidade { position: relative; margin-top: 10px; max-width: 420px; }
.jpa-apuracao .jpa-cidade-busca {
	box-sizing: border-box; width: 100%; max-width: 100%;
	margin: 0; padding: 9px 12px 9px 34px;
	height: auto; min-height: 0;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23686c73' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center;
	border: 1px solid #d6d7da; border-radius: 6px;
	box-shadow: none;
	color: var(--jpa-ink);
	font-size: 14px; font-weight: 400; line-height: 1.2;
}
.jpa-apuracao .jpa-cidade-busca:focus { outline: none; border-color: var(--jpa-red); }
.jpa-apuracao .jpa-sug {
	position: absolute; z-index: 20;
	top: calc(100% + 4px); left: 0; right: 0;
	max-height: min(440px, 70vh); overflow-y: auto;
	background: #fff;
	border: 1px solid var(--jpa-line); border-radius: 8px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}
.jpa-apuracao .jpa-sug-item {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid #f2f2f3;
	cursor: pointer;
}
.jpa-apuracao .jpa-sug-item:last-child { border-bottom: 0; }
.jpa-apuracao .jpa-sug-item b { font-size: 14px; font-weight: 600; color: var(--jpa-ink); }
.jpa-apuracao .jpa-sug-item span { font-size: 11.5px; color: var(--jpa-muted); text-align: right; }
.jpa-apuracao .jpa-sug-item.is-ativo,
.jpa-apuracao .jpa-sug-item:hover { background: var(--jpa-red-tint); }
.jpa-apuracao .jpa-sug-vazio { padding: 12px; font-size: 13px; color: var(--jpa-muted); }

.jpa-apuracao .jpa-status { padding: 12px 18px 2px; }
.jpa-apuracao .jpa-status:empty { display: none; }
.jpa-apuracao .jpa-status-linha {
	display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap;
	font-size: 12.5px; color: var(--jpa-muted);
}
.jpa-apuracao .jpa-status-linha b { font-size: 16px; font-weight: 700; color: var(--jpa-ink); }
.jpa-apuracao .jpa-hora { font-size: 12px; }
.jpa-apuracao .jpa-prog-bar {
	height: 4px; margin-top: 6px;
	background: var(--jpa-soft); border-radius: 99px; overflow: hidden;
}
.jpa-apuracao .jpa-prog-bar span {
	display: block; height: 100%;
	background: var(--jpa-ink);
	border-radius: 99px;
	transition: width .6s ease;
}
.jpa-apuracao .jpa-aviso {
	margin: 12px 18px 0; padding: 10px 12px;
	background: var(--jpa-orange-tint);
	border-radius: 6px;
	font-size: 13px; color: var(--jpa-ink);
}
.jpa-apuracao .jpa-nota {
	margin: 8px 18px 0; padding: 8px 10px;
	background: var(--jpa-soft);
	border-radius: 6px;
	font-size: 12.5px; color: var(--jpa-ink);
}
.jpa-apuracao .jpa-status .jpa-nota { margin: 8px 0 0; }
.jpa-apuracao .jpa-nota.is-copia { background: var(--jpa-orange-tint); }

/* ---------- blocos (aba Destaques) e aba de cargo ---------- */
.jpa-apuracao .jpa-bloco,
.jpa-apuracao .jpa-aba { padding: 16px 0 4px; }
.jpa-apuracao .jpa-bloco + .jpa-bloco { border-top: 8px solid var(--jpa-soft); }
.jpa-apuracao .jpa-bloco-head,
.jpa-apuracao .jpa-aba-head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap;
	padding: 0 18px;
}
.jpa-apuracao .jpa-bloco-title {
	margin: 0;
	font-size: 18px; font-style: italic; font-weight: 700; line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: -.005em;
	color: var(--jpa-ink);
}
.jpa-apuracao .jpa-bloco-local {
	font-size: 11px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--jpa-red);
}
.jpa-apuracao .jpa-bloco-foot {
	display: flex; justify-content: center;
	padding: 8px 18px 14px;
}

/* cartões dos majoritários */
.jpa-apuracao .jpa-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 12px 18px 4px;
}
/* sem o botão "Ver todos" embaixo (2º turno), os cartões fecham o bloco com o respiro dele */
.jpa-apuracao .jpa-bloco > .jpa-cards:last-child { padding-bottom: 14px; }
.jpa-apuracao .jpa-cards.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jpa-apuracao .jpa-cards.n1 { grid-template-columns: minmax(0, 1fr); }
.jpa-apuracao .jpa-card {
	display: flex; flex-direction: column; align-items: center;
	padding: 14px 12px 12px;
	border: 1px solid var(--jpa-line);
	border-radius: 8px;
	background: #fff;
	text-align: center;
}
.jpa-apuracao .jpa-card.is-lider { border-color: var(--jpa-red-line); background: linear-gradient(180deg, var(--jpa-red-tint), #fff 60%); }
/* O cartão é uma pilha de partes sempre na mesma ordem (foto, nome, partido, selo, lugar, número,
   votos, barra e as linhas do estado e do Brasil); a parte que não se aplica vai vazia. */
.jpa-apuracao .jpa-card > .jpa-nome { justify-content: center; text-align: center; margin-top: 8px; min-height: 2.4em; align-items: flex-start; }
.jpa-apuracao .jpa-card > .jpa-meta { white-space: normal; margin-top: 5px; }
.jpa-apuracao .jpa-card-selo .jpa-badge { margin-top: 4px; }
/* (o alinhamento das partes entre cartões vizinhos está no fim do arquivo) */
/* Número de votos: encolhe com a largura do cartão para caber até 11 dígitos ("123.456.789" no
   Brasil) mesmo no celular. A medida é tirada da fileira de cartões (--jpa-miolo = largura de
   dentro de um cartão), e não do próprio cartão: um cartão que servisse de medida não poderia
   alinhar as suas linhas com as do vizinho. */
.jpa-apuracao .jpa-cards { container-type: inline-size; --jpa-miolo: calc(50cqw - 31px); }
.jpa-apuracao .jpa-cards.n1 { --jpa-miolo: calc(100cqw - 26px); }
.jpa-apuracao .jpa-cards.n3 { --jpa-miolo: calc(33.33cqw - 33px); }
.jpa-apuracao .jpa-card-pct {
	margin-top: 8px;
	max-width: 100%;
	font-size: 24px; font-weight: 700; line-height: 1;
	color: var(--jpa-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	letter-spacing: -.01em;
}
@supports (font-size: 1cqw) {
	.jpa-apuracao .jpa-card-pct { font-size: clamp(15px, calc(var(--jpa-miolo) * .13), 28px); }
	/* número curto ("15.663", "47,03%"): cabe maior, e é ele o destaque do cartão */
	.jpa-apuracao .jpa-card-pct.is-curto { font-size: clamp(20px, calc(var(--jpa-miolo) * .2), 32px); }
}
.jpa-apuracao .jpa-card.is-lider .jpa-card-pct { color: var(--jpa-red); }
.jpa-apuracao .jpa-card-votos {
	margin-top: 4px;
	font-size: 12px; color: var(--jpa-muted);
	font-variant-numeric: tabular-nums;
}
.jpa-apuracao .jpa-card .jpa-bar { width: 100%; margin-top: 10px; }
/* Em destaque, o resultado do local escolhido (.jpa-card-local é o nome dele); embaixo, uma linha
   para o estado e outra para o Brasil (.jpa-card-geral). */
.jpa-apuracao .jpa-card-geral + .jpa-card-geral { margin-top: 8px; }
.jpa-apuracao .jpa-card-local {
	font-size: 10.5px; font-weight: 700; line-height: 1;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--jpa-red);
}
.jpa-apuracao .jpa-card-local:not(:empty) { margin-top: 10px; }
.jpa-apuracao .jpa-card-local:not(:empty) + .jpa-card-pct { margin-top: 4px; }
.jpa-apuracao .jpa-card-geral {
	width: 100%;
	margin-top: 10px; padding-top: 8px;
	border-top: 1px dashed #d6d7da;
	font-size: 12px; line-height: 1.35; color: var(--jpa-muted);
	font-variant-numeric: tabular-nums;
}
.jpa-apuracao .jpa-card-geral span {
	display: block; margin-bottom: 2px;
	font-size: 10.5px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
}
.jpa-apuracao .jpa-card-geral b { color: var(--jpa-ink); font-size: 12.5px; }
.jpa-apuracao .jpa-geral {
	margin-top: 5px;
	font-size: 12px; color: var(--jpa-muted);
	font-variant-numeric: tabular-nums;
}
.jpa-apuracao .jpa-geral b { color: var(--jpa-ink); }
.jpa-apuracao .jpa-num-local {
	display: block; margin: 0 0 2px auto;
	max-width: 96px;
	font-size: 9.5px; font-weight: 700; line-height: 1.1;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--jpa-red);
}

/* ---------- busca ---------- */
.jpa-apuracao .jpa-tools { padding: 10px 18px 4px; }
.jpa-apuracao .jpa-busca {
	box-sizing: border-box; width: 100%; max-width: 100%;
	margin: 0; padding: 10px 12px;
	height: auto; min-height: 0;
	background: #fff;
	border: 1px solid #d6d7da; border-radius: 6px;
	box-shadow: none;
	color: var(--jpa-ink);
	font-size: 15px; font-weight: 400; line-height: 1.2;
}
.jpa-apuracao .jpa-busca:focus { outline: none; border-color: var(--jpa-red); }

/* ---------- lista de candidatos ---------- */
.jpa-apuracao .jpa-list { padding: 4px 0 2px; }
.jpa-apuracao .jpa-row {
	display: grid;
	grid-template-columns: 30px 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: 0 10px;
	padding: 10px 18px;
	border-bottom: 1px solid #f0f0f1;
}
.jpa-apuracao .jpa-row:last-child { border-bottom: 0; }
.jpa-apuracao .jpa-row.is-lider { background: linear-gradient(90deg, var(--jpa-red-tint), #fff 70%); }
.jpa-apuracao .jpa-pos {
	font-size: 12px; font-weight: 700; line-height: 1;
	color: #a1a4aa;
	text-align: right;
}
.jpa-apuracao .jpa-foto {
	position: relative;
	width: 44px; height: 44px;
	border-radius: 50%;
	/* a cor em volta da foto é a do partido do candidato (--jpa-partido vem na própria foto) */
	border: 2px solid var(--jpa-partido, #8f9299);
	overflow: hidden;
	background: #e9e9ec;
	display: flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
}
.jpa-apuracao .jpa-foto.is-lg { width: 64px; height: 64px; border-width: 3px; }
.jpa-apuracao .jpa-foto::before {
	content: attr(data-ini);
	font-size: 14px; font-weight: 700; line-height: 1;
	color: #8a8d93;
}
.jpa-apuracao .jpa-foto img {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* (por extenso: o iPhone anterior ao iOS 14.5 não conhece "inset") */
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 20%;
	display: block;
}
.jpa-apuracao .jpa-info { min-width: 0; }
.jpa-apuracao .jpa-nome {
	display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
	font-size: 15px; font-weight: 700; line-height: 1.2;
	color: var(--jpa-ink);
	text-transform: uppercase;
}
.jpa-apuracao .jpa-meta {
	margin-top: 2px;
	font-size: 12px; color: var(--jpa-muted);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jpa-apuracao .jpa-rank { font-weight: 700; color: var(--jpa-red); }
.jpa-apuracao .jpa-bar {
	height: 6px; margin-top: 6px;
	background: var(--jpa-soft); border-radius: 99px; overflow: hidden;
}
.jpa-apuracao .jpa-bar span {
	display: block; height: 100%;
	background: #9fa3a9;
	border-radius: 99px;
	transition: width .6s ease;
}
.jpa-apuracao .is-lider .jpa-bar span { background: linear-gradient(90deg, var(--jpa-red), var(--jpa-orange)); }
.jpa-apuracao .is-eleito .jpa-bar span { background: var(--jpa-green); }
.jpa-apuracao .jpa-num { text-align: right; padding-left: 4px; }
.jpa-apuracao .jpa-num b {
	display: block;
	font-size: 17px; font-weight: 700; line-height: 1.1;
	white-space: nowrap;
	color: var(--jpa-ink);
	font-variant-numeric: tabular-nums;
}
.jpa-apuracao .jpa-row.is-lider .jpa-num b { color: var(--jpa-red); }
.jpa-apuracao .jpa-num small {
	display: block; margin-top: 2px;
	font-size: 11.5px; color: var(--jpa-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.jpa-apuracao .jpa-badge {
	display: inline-block;
	padding: 3px 6px;
	border-radius: 3px;
	font-size: 10px; font-weight: 700; line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #fff;
	vertical-align: middle;
}
.jpa-apuracao .jpa-badge.is-eleito { background: var(--jpa-green); }
.jpa-apuracao .jpa-badge.is-2t { background: var(--jpa-orange); }
.jpa-apuracao .jpa-badge.is-sup { background: #8a8d93; }
.jpa-apuracao .jpa-badge.is-nao { background: #fff; color: var(--jpa-muted); box-shadow: inset 0 0 0 1px #c4c6ca; }
.jpa-apuracao .jpa-msg { padding: 18px; color: var(--jpa-muted); font-size: 14px; }
/* "Carregando resultados…" já ocupa a altura dos cartões que vão chegar: o painel não cresce de repente
   e o que está abaixo dele (o mapa) não pula — medido: o salto de layout (CLS) vinha daqui */
.jpa-apuracao .jpa-msg.is-espera { display: flex; align-items: center; justify-content: center; min-height: 200px; box-sizing: border-box; }

/* ---------- botões ---------- */
.jpa-apuracao .jpa-more {
	display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
	padding: 0 18px;
}
.jpa-apuracao .jpa-more:not(:empty) { padding: 8px 18px 14px; }
.jpa-apuracao .jpa-btn {
	margin: 0; padding: 9px 16px;
	background: var(--jpa-red);
	border: 1px solid var(--jpa-red); border-radius: 6px;
	box-shadow: none;
	color: #fff;
	font-size: 13px; font-weight: 700; line-height: 1.2;
	text-transform: none; letter-spacing: 0;
	cursor: pointer;
	height: auto; min-height: 0; width: auto;
}
.jpa-apuracao .jpa-btn:hover { background: var(--jpa-red-dk); border-color: var(--jpa-red-dk); color: #fff; }
.jpa-apuracao .jpa-btn.is-ghost { background: #fff; color: var(--jpa-red); }
.jpa-apuracao .jpa-btn.is-ghost:hover { background: var(--jpa-red-tint); color: var(--jpa-red); }
.jpa-apuracao .jpa-msg .jpa-btn { margin-left: 8px; }

.jpa-apuracao .jpa-foot {
	padding: 10px 18px;
	border-top: 1px solid var(--jpa-line);
	font-size: 11.5px; color: var(--jpa-muted);
}
.jpa-apuracao .jpa-foot a { color: var(--jpa-red); text-decoration: none; font-weight: 600; }
.jpa-apuracao .jpa-foot a:hover { text-decoration: underline; }

/* ---------- celular ---------- */
@media (max-width: 560px) {
	.jpa-apuracao { margin: 20px 0; border-radius: 8px; }
	.jpa-apuracao .jpa-head {
		flex-direction: column; align-items: flex-start; gap: 10px;
		padding: 12px 14px 14px;
	}
	.jpa-apuracao .jpa-logo { order: -1; height: 30px; max-width: 100%; object-position: left center; }
	.jpa-apuracao .jpa-logo-txt { order: -1; max-width: 100%; font-size: 15px; }
	.jpa-apuracao .jpa-title { font-size: 19px; }
	/* No celular as 6 abas ficam todas visíveis, em duas linhas de três. */
	.jpa-apuracao .jpa-tabs {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
		padding: 10px 14px;
	}
	.jpa-apuracao .jpa-tab {
		padding: 9px 4px;
		border: 1px solid #d6d7da; border-radius: 6px;
		font-size: 11px;
		letter-spacing: 0;
		text-align: center;
		white-space: nowrap;
	}
	.jpa-apuracao .jpa-tab.is-on { background: var(--jpa-red); border-color: var(--jpa-red); color: #fff; }
	.jpa-apuracao .jpa-cidade { max-width: none; }
	/* No celular os estados ficam todos à vista, numa grade: bandeira em cima, sigla embaixo
	   (sete por linha num aparelho comum). */
	.jpa-apuracao .jpa-ufs {
		display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px;
		margin-bottom: 12px;
	}
	.jpa-apuracao .jpa-uf {
		flex-direction: column; justify-content: center; gap: 3px;
		padding: 5px 1px 4px;
		font-size: 10.5px; letter-spacing: 0;
	}
	.jpa-apuracao .jpa-local,
	.jpa-apuracao .jpa-status,
	.jpa-apuracao .jpa-bloco-head,
	.jpa-apuracao .jpa-aba-head,
	.jpa-apuracao .jpa-tools { padding-left: 14px; padding-right: 14px; }
	.jpa-apuracao .jpa-aviso,
	.jpa-apuracao .jpa-nota { margin-left: 14px; margin-right: 14px; }
	.jpa-apuracao .jpa-status .jpa-nota { margin-left: 0; margin-right: 0; }
	.jpa-apuracao .jpa-bloco-title { font-size: 16px; }
	.jpa-apuracao .jpa-cards { gap: 8px; padding: 10px 14px 4px; --jpa-miolo: calc(50cqw - 22px); }
	.jpa-apuracao .jpa-cards.n1 { --jpa-miolo: calc(100cqw - 18px); }
	.jpa-apuracao .jpa-cards.n3 { --jpa-miolo: calc(50cqw - 22px); }
	.jpa-apuracao .jpa-card { padding: 12px 8px 10px; }
	.jpa-apuracao .jpa-foto.is-lg { width: 52px; height: 52px; }
	.jpa-apuracao .jpa-card .jpa-nome { font-size: 13px; }
	/* Três cartões (Senado): dois lado a lado e o terceiro centralizado, do mesmo tamanho. */
	.jpa-apuracao .jpa-cards.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jpa-apuracao .jpa-cards.n3 .jpa-card:nth-child(3):last-child {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 4px);
	}
	.jpa-apuracao .jpa-card-votos { font-size: 11px; }
	.jpa-apuracao .jpa-row {
		grid-template-columns: 38px minmax(0, 1fr) auto;
		padding: 10px 14px;
		gap: 0 9px;
	}
	.jpa-apuracao .jpa-pos { display: none; }
	.jpa-apuracao .jpa-row .jpa-foto { width: 38px; height: 38px; }
	.jpa-apuracao .jpa-nome { font-size: 14px; }
	.jpa-apuracao .jpa-num b { font-size: 15px; }
	.jpa-apuracao .jpa-meta { white-space: normal; }
}

/* ---------- cartões alinhados ---------- */
/* Com dois ou três cartões lado a lado, cada parte fica na mesma altura em todos eles: o nome que
   ocupa duas linhas num cartão abre o mesmo espaço no vizinho, e o que vem embaixo segue alinhado.
   (Fica no fim do arquivo para valer também sobre as regras do celular.) */
@supports (grid-template-rows: subgrid) {
	.jpa-apuracao .jpa-cards { row-gap: 0; }
	.jpa-apuracao .jpa-card { display: grid; grid-template-rows: subgrid; grid-row: span 10; justify-items: center; align-items: start; }
	.jpa-apuracao .jpa-card > .jpa-nome { min-height: 0; }
	.jpa-apuracao .jpa-card > .jpa-nome,
	.jpa-apuracao .jpa-card > .jpa-meta,
	.jpa-apuracao .jpa-card > .jpa-card-votos { justify-self: stretch; }
}

/* ---------- mapa do Brasil (2º turno) ---------- */
/* Cada estado na cor do partido de quem está na frente nele (a cor entra pelo JS); sem voto, cinza.
   O espaço do desenho já fica guardado antes de ele chegar (aspect-ratio = o do desenho). */
.jpa-apuracao .jpa-mapa { container-type: inline-size; padding: 16px 0 16px; border-top: 8px solid var(--jpa-soft); }
.jpa-apuracao .jpa-mapa-leg {
	display: flex; flex-wrap: wrap; gap: 4px 16px;
	min-height: 16px; padding: 8px 18px 0;
	font-size: 12px; line-height: 1.3; color: var(--jpa-muted);
}
.jpa-apuracao .jpa-mapa-chip { display: inline-flex; align-items: center; gap: 6px; }
.jpa-apuracao .jpa-mapa-chip i { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; }
.jpa-apuracao .jpa-mapa-chip b { font-weight: 700; color: var(--jpa-ink); text-transform: uppercase; }
.jpa-apuracao .jpa-mapa-area { position: relative; width: calc(100% - 36px); max-width: 520px; margin: 10px auto 0; }
.jpa-apuracao .jpa-mapa-des { aspect-ratio: 1000 / 1026; }
.jpa-apuracao .jpa-mapa-svg {
	display: block; width: 100%; height: 100%; overflow: visible;
	touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.jpa-apuracao .jpa-mapa-uf {
	fill: #dfe0e4;
	stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round;
	cursor: pointer;
	transition: fill .5s ease;
}
@media (hover: hover) {
	.jpa-apuracao .jpa-mapa-uf:hover { fill-opacity: .8; }
}
/* estado que está na caixa: o do toque (ou clique) ou o escolhido no painel */
.jpa-apuracao .jpa-mapa-uf.is-sel { stroke: var(--jpa-ink); stroke-width: 2.2; }

/* Resultado de um lugar: o Brasil ou o estado apontado. No celular é uma faixa colada embaixo do
   mapa (dentro dele as letras não caberiam legíveis), sempre com as mesmas linhas — nome e
   porcentagem, votos embaixo — para a altura não mudar de um estado para outro. */
.jpa-apuracao .jpa-mapa-info {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; align-content: start;
	min-height: 108px; margin-top: 8px; padding: 8px 10px;
	background: #fff;
	border: 1px solid #d6d7da; border-radius: 8px;
	font-size: 12px; line-height: 1.25; color: var(--jpa-muted);
}
.jpa-apuracao .jpa-mapa-info.is-vazia { visibility: hidden; }
.jpa-apuracao .jpa-mapa-info-t { display: flex; align-items: center; gap: 6px; min-width: 0; }
.jpa-apuracao .jpa-mapa-info-t b { min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--jpa-ink); }
.jpa-apuracao .jpa-mapa-info-p { grid-row: 1; grid-column: 2; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jpa-apuracao .jpa-mapa-info-l {
	grid-column: 1 / -1;
	display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 1px 6px; align-items: baseline;
}
.jpa-apuracao .jpa-mapa-info-l i { align-self: center; width: 10px; height: 10px; border-radius: 2px; }
.jpa-apuracao .jpa-mapa-info-l span {
	min-width: 0;
	font-size: 12px; font-weight: 700; line-height: 1.2;
	color: var(--jpa-ink); text-transform: uppercase; overflow-wrap: anywhere;
}
/* (na faixa, a porcentagem e os votos entram direto na grade da linha) */
.jpa-apuracao .jpa-mapa-info-l div { display: contents; font-variant-numeric: tabular-nums; }
.jpa-apuracao .jpa-mapa-info-l b { font-size: 13.5px; font-weight: 700; line-height: 1.2; color: var(--jpa-ink); white-space: nowrap; }
.jpa-apuracao .jpa-mapa-info-l.is-lider b { font-size: 15px; }
.jpa-apuracao .jpa-mapa-info-l small { grid-column: 2 / -1; font-size: 11px; line-height: 1.2; }
.jpa-apuracao .jpa-mapa-info-msg { grid-column: 1 / -1; font-size: 12px; }

/* Com largura (computador), a caixa vai para dentro do mapa, no canto de baixo à esquerda, onde o
   mapa do Brasil é vazio: até 40% da largura e 42% da altura ela não encosta em estado nenhum. */
@container (min-width: 521px) {
	.jpa-apuracao .jpa-mapa-info {
		position: absolute; left: 0; bottom: 0;
		display: block; width: 40%; min-height: 0; max-height: 42%;
		margin: 0; padding: 8px 10px 7px;
		overflow: hidden;
		pointer-events: none;
	}
	.jpa-apuracao .jpa-mapa-info-t { align-items: flex-start; margin-bottom: 3px; }
	.jpa-apuracao .jpa-mapa-info-t b { font-size: 12.5px; line-height: 17px; }
	.jpa-apuracao .jpa-mapa-info-l { grid-template-columns: 10px minmax(0, 1fr); align-items: center; padding: 4px 0; }
	.jpa-apuracao .jpa-mapa-info-l span { font-size: 11.5px; }
	.jpa-apuracao .jpa-mapa-info-l div { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
	.jpa-apuracao .jpa-mapa-info-l b { font-size: 13px; }
	.jpa-apuracao .jpa-mapa-info-p { margin-top: 3px; padding-top: 5px; border-top: 1px dashed #d6d7da; font-size: 10.5px; }
}
@media (max-width: 560px) {
	.jpa-apuracao .jpa-mapa-leg { padding-left: 14px; padding-right: 14px; }
	.jpa-apuracao .jpa-mapa-area { width: calc(100% - 28px); }
}
@media (prefers-reduced-motion: reduce) {
	.jpa-apuracao .jpa-mapa-uf { transition: none; }
}

/* ---------- mapa dos municípios (2º turno, no lugar do mapa de estados) ---------- */
/* Cada município na cor de quem está na frente; o tom (4 faixas) mostra o tamanho da vantagem.
   A janela segue o mouse; no toque, abre acima do dedo e, aberta, o dedo passa de cidade em cidade
   (touch-action: none só enquanto ela está aberta, para a página continuar rolando). */
.jpa-apuracao .jpa-mapa.is-mun .jpa-mapa-area { width: calc(100% - 24px); max-width: 720px; }
.jpa-apuracao .jpa-mun-resumo { margin: 0 0 8px; }
.jpa-apuracao .jpa-mun-r-t { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; font-size: 12px; color: var(--jpa-muted); }
.jpa-apuracao .jpa-mun-r-t b { font-size: 15px; font-weight: 700; color: var(--jpa-ink); }
.jpa-apuracao .jpa-mun-r-barra { display: flex; height: 12px; margin: 8px 0 6px; overflow: hidden; border-radius: 4px; background: var(--jpa-line); }
.jpa-apuracao .jpa-mun-r-barra span { display: block; height: 100%; transition: width .5s ease; }
.jpa-apuracao .jpa-mun-r-c { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jpa-apuracao .jpa-mun-r-cand { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.jpa-apuracao .jpa-mun-r-cand.is-b { align-items: flex-end; text-align: right; }
.jpa-apuracao .jpa-mun-r-cand span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--jpa-ink); text-transform: uppercase; overflow-wrap: anywhere; }
.jpa-apuracao .jpa-mun-r-cand i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; }
.jpa-apuracao .jpa-mun-r-cand b { font-size: 20px; font-weight: 700; line-height: 1.15; color: var(--jpa-ink); font-variant-numeric: tabular-nums; }
.jpa-apuracao .jpa-mun-r-cand small { font-size: 11px; color: var(--jpa-muted); font-variant-numeric: tabular-nums; }
.jpa-apuracao .jpa-mun-r-nota { margin-top: 6px; font-size: 11px; color: var(--jpa-muted); }
.jpa-apuracao .jpa-mun-leg { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; margin: 0 0 8px; font-size: 11px; color: var(--jpa-muted); }
.jpa-apuracao .jpa-mun-leg-c { display: flex; flex-direction: column; gap: 3px; }
.jpa-apuracao .jpa-mun-leg-c b { font-size: 11px; font-weight: 700; color: var(--jpa-ink); text-transform: uppercase; }
.jpa-apuracao .jpa-mun-esc { display: flex; gap: 2px; }
.jpa-apuracao .jpa-mun-esc i { display: block; width: 22px; height: 10px; }
.jpa-apuracao .jpa-mun-esc i:first-child { border-radius: 3px 0 0 3px; }
.jpa-apuracao .jpa-mun-esc i:last-child { border-radius: 0 3px 3px 0; }
.jpa-apuracao .jpa-mun-area { position: relative; touch-action: pan-y; }
.jpa-apuracao .jpa-mun-area.is-explorando { touch-action: none; }
.jpa-apuracao .jpa-mun-svg { display: block; width: 100%; height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent; user-select: none; }
.jpa-apuracao .jpa-mun-svg path {
	fill: #dfe0e4; fill-rule: evenodd;
	stroke: #fff; stroke-width: .25; vector-effect: non-scaling-stroke; stroke-linejoin: round;
	cursor: pointer; /* (sem transição de cor: 5.571 animações juntas travavam o celular) */
}
.jpa-apuracao .jpa-mun-svg path.is-empate { fill: #9fa2a8; }
.jpa-apuracao .jpa-mun-svg path.is-fora { fill: #eeeff1 !important; stroke: #f7f7f8; cursor: default; }
/* município escolhido: borda branca grossa (a sombra e o tamanho maior entram pelo JS: realcar) */
.jpa-apuracao .jpa-mun-svg path.is-sel { stroke: #fff; stroke-width: 3; }
.jpa-apuracao .jpa-mun-svg path.is-sob { stroke: #fff; stroke-width: 2; }
.jpa-apuracao .jpa-mun-aviso {
	position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
	max-width: 80%; padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, .92);
	font-size: 13px; text-align: center; color: var(--jpa-muted);
	pointer-events: none; /* o mouse e o dedo passam por ele até os municípios */
}
.jpa-apuracao .jpa-mun-janela {
	position: absolute; z-index: 3; width: 230px; max-width: calc(100% - 12px);
	display: flex; flex-direction: column; gap: 4px; padding: 9px 11px;
	background: #fff; border: 1px solid #d6d7da; border-radius: 10px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
	font-size: 12px; line-height: 1.3; color: var(--jpa-muted);
	pointer-events: none;
}
.jpa-apuracao .jpa-mun-janela.is-toque { pointer-events: auto; }
.jpa-apuracao .jpa-mun-j-nome { font-size: 14px; font-weight: 700; color: var(--jpa-ink); }
.jpa-apuracao .jpa-mun-j-nome small { font-size: 11px; font-weight: 700; color: var(--jpa-muted); }
.jpa-apuracao .jpa-mun-j-reg { font-size: 11px; }
.jpa-apuracao .jpa-mun-j-l { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 2px 6px; align-items: center; }
.jpa-apuracao .jpa-mun-j-l i { width: 10px; height: 10px; border-radius: 2px; }
.jpa-apuracao .jpa-mun-j-l em { font-style: normal; font-weight: 700; color: var(--jpa-ink); text-transform: uppercase; overflow-wrap: anywhere; }
.jpa-apuracao .jpa-mun-j-l b { font-size: 14px; font-weight: 700; color: var(--jpa-ink); font-variant-numeric: tabular-nums; }
.jpa-apuracao .jpa-mun-j-l.is-lider b { font-size: 15px; }
.jpa-apuracao .jpa-mun-j-t { grid-column: 2; height: 5px; overflow: hidden; border-radius: 3px; background: var(--jpa-line); }
.jpa-apuracao .jpa-mun-j-t span { display: block; height: 100%; }
.jpa-apuracao .jpa-mun-j-l small { grid-column: 3; font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.jpa-apuracao .jpa-mun-j-p { font-size: 11px; }
.jpa-apuracao .jpa-mun-j-bt { display: flex; gap: 6px; margin-top: 4px; }
.jpa-apuracao .jpa-mun-j-bt button {
	flex: 1 1 auto; min-height: 36px; padding: 4px 8px;
	border: 1px solid var(--jpa-red); border-radius: 8px; background: #fff;
	font: inherit; font-size: 13px; font-weight: 700; color: var(--jpa-red); cursor: pointer;
}
.jpa-apuracao .jpa-mun-j-bt .jpa-mun-j-x { flex: 0 0 36px; border-color: #d6d7da; color: var(--jpa-muted); }
/* janela do toque: compacta (nome, porcentagens e botões), para não cobrir o mapa do celular */
.jpa-apuracao .jpa-mun-janela.is-toque { width: 200px; gap: 2px; padding: 7px 9px; font-size: 11px; }
.jpa-apuracao .jpa-mun-janela.is-toque .jpa-mun-j-nome { font-size: 13px; }
.jpa-apuracao .jpa-mun-janela.is-toque .jpa-mun-j-l { grid-template-columns: 9px minmax(0, 1fr) auto; }
.jpa-apuracao .jpa-mun-janela.is-toque .jpa-mun-j-l b { font-size: 13px; }
.jpa-apuracao .jpa-mun-janela.is-toque .jpa-mun-j-bt button { min-height: 32px; font-size: 12px; }
/* "← Voltar para …" (um nível acima: região/cidade → estado → Brasil) */
.jpa-apuracao .jpa-mun-volta {
	display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0 0 10px; padding: 4px 14px;
	border: 1px solid var(--jpa-red); border-radius: 8px; background: #fff;
	font: inherit; font-size: 13px; font-weight: 700; color: var(--jpa-red); cursor: pointer;
}
.jpa-apuracao .jpa-mun-volta[hidden] { display: none; }
/* regiões do estado: minimapa colorido + legenda + cartões com o resultado de cada uma */
.jpa-apuracao .jpa-mun-regioes { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--jpa-line); }
.jpa-apuracao .jpa-mun-reg-t { display: flex; flex-direction: column; gap: 2px; margin: 0 0 8px; }
.jpa-apuracao .jpa-mun-reg-t b { font-size: 15px; font-weight: 700; color: var(--jpa-ink); }
.jpa-apuracao .jpa-mun-reg-t span { font-size: 12px; color: var(--jpa-muted); }
.jpa-apuracao .jpa-mun-mini svg { display: block; width: 100%; max-width: 420px; max-height: 300px; margin: 0 auto; }
.jpa-apuracao .jpa-mun-mini path { stroke-width: .5; vector-effect: non-scaling-stroke; cursor: pointer; transition: opacity .3s ease; }
.jpa-apuracao .jpa-mun-mini path.is-apagada { opacity: .22; }
.jpa-apuracao .jpa-mun-mini text {
	fill: #fff; font-weight: 700; text-anchor: middle; dominant-baseline: central; cursor: pointer;
	paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 3px; vector-effect: non-scaling-stroke;
}
.jpa-apuracao .jpa-mun-reg-leg { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 10px; margin: 8px 0 12px; }
.jpa-apuracao .jpa-mun-reg-leg button {
	display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 4px;
	border: 0; border-radius: 6px; background: none; font: inherit; font-size: 12px; text-align: left; color: var(--jpa-muted); cursor: pointer;
}
.jpa-apuracao .jpa-mun-reg-leg button.is-on { background: var(--jpa-soft); color: var(--jpa-ink); font-weight: 700; }
.jpa-apuracao .jpa-mun-reg-leg button.is-apagada { opacity: .55; }
.jpa-apuracao .jpa-mun-reg-leg i, .jpa-apuracao .jpa-mun-card i { flex: 0 0 auto; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.jpa-apuracao .jpa-mun-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.jpa-apuracao .jpa-mun-card {
	display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 9px 10px;
	border: 1px solid #d6d7da; border-radius: 8px; background: #fff;
	font: inherit; text-align: left; color: var(--jpa-muted); cursor: pointer;
}
.jpa-apuracao .jpa-mun-card.is-on { border: 2px solid var(--jpa-red); padding: 8px 9px; }
.jpa-apuracao .jpa-mun-card b { font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--jpa-ink); }
/* em cada cartão, os dois candidatos: nome e porcentagem, barra da porcentagem e votos */
.jpa-apuracao .jpa-mun-card-c { display: flex; flex-direction: column; gap: 2px; }
.jpa-apuracao .jpa-mun-card-n { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.jpa-apuracao .jpa-mun-card-n em { min-width: 0; font-style: normal; font-size: 11px; font-weight: 700; color: var(--jpa-ink); text-transform: uppercase; overflow-wrap: anywhere; }
.jpa-apuracao .jpa-mun-card-n strong { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--jpa-ink); font-variant-numeric: tabular-nums; }
.jpa-apuracao .jpa-mun-card-c.is-lider .jpa-mun-card-n strong { font-size: 15px; }
.jpa-apuracao .jpa-mun-card-barra { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--jpa-line); }
.jpa-apuracao .jpa-mun-card-barra span { display: block; height: 100%; }
.jpa-apuracao .jpa-mun-card-c small, .jpa-apuracao .jpa-mun-card-m { font-size: 11px; color: var(--jpa-muted); font-variant-numeric: tabular-nums; }
/* celular: a legenda repetiria o que os cartões já mostram (cor, número e nome da região) */
@media (max-width: 520px) {
	.jpa-apuracao .jpa-mun-reg-leg { display: none; }
	.jpa-apuracao .jpa-mun-mini { margin-bottom: 12px; }
}
/* zoom: + e − (aproximar e afastar), ↺ (voltar o zoom, só aparece com o mapa aproximado) */
.jpa-apuracao .jpa-mun-zoom { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.jpa-apuracao .jpa-mun-zoom button {
	width: 36px; height: 36px; padding: 0; border: 1px solid #d6d7da; border-radius: 8px; background: #fff;
	font: inherit; font-size: 20px; font-weight: 700; line-height: 1; color: var(--jpa-ink); cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.jpa-apuracao .jpa-mun-zoom button[hidden] { display: none; }
.jpa-apuracao .jpa-mun-zoom button[data-z="tudo"] { color: var(--jpa-red); border-color: var(--jpa-red); }
.jpa-apuracao .jpa-mun-area.is-zoom { touch-action: none; }
.jpa-apuracao .jpa-mun-area.is-perto .jpa-mun-svg { cursor: grab; }
.jpa-apuracao .jpa-mun-area.is-perto .jpa-mun-svg:active { cursor: grabbing; }
/* troca de local: os cartões de antes ficam, apagados, até os números do novo local chegarem */
.jpa-apuracao .jpa-blocos { transition: opacity .2s ease; }
.jpa-apuracao .jpa-blocos.is-carregando { opacity: .5; }