/* JP Agora - Votos por local de votação em João Pinheiro (usa a base visual de apuracao.css) */
/* Cores dos dois lados do comparativo: o painel troca pelas do partido de cada candidato (bairros.js).
   As "-txt" são as mesmas cores, escurecidas quando preciso para número em cima de fundo branco. */
.jpa-apuracao.jpa-bairros {
	--jpa-a: #c81517; --jpa-a-txt: #c81517;   /* lado A (esquerda) */
	--jpa-b: #1f4fb4; --jpa-b-txt: #1f4fb4;   /* lado B (direita) */
	/* versão desta folha de estilo (ver --jpa-css em apuracao.css): igual à do plugin */
	--jpa-css-locais: "2.5.0";
}

/* ---------- o que comparar ---------- */
.jpa-apuracao .jpa-bm-picks {
	position: relative;
	display: flex; align-items: stretch; gap: 8px;
	margin-top: 10px;
}
.jpa-apuracao .jpa-bm-pick { flex: 1 1 0; min-width: 0; }
.jpa-apuracao .jpa-bm-pick-btn {
	display: flex; align-items: center; gap: 9px;
	width: 100%; height: 100%; min-height: 0;
	margin: 0; padding: 8px 10px;
	background: #fff;
	border: 1px solid #d6d7da; border-radius: 6px;
	box-shadow: none;
	color: var(--jpa-ink);
	font-size: 13px; font-weight: 400; line-height: 1.2;
	text-align: left; text-transform: none; letter-spacing: 0;
	cursor: pointer;
}
.jpa-apuracao .jpa-bm-pick-btn:hover { background: #fff; border-color: var(--jpa-red); color: var(--jpa-ink); }
.jpa-apuracao .jpa-bm-pick-btn[aria-expanded="true"] { border-color: var(--jpa-red); }
.jpa-apuracao .jpa-bm-cor {
	flex: 0 0 auto;
	width: 10px; align-self: stretch; min-height: 30px;
	border-radius: 3px;
	background: var(--jpa-a);
}
.jpa-apuracao .jpa-bm-pick.is-b .jpa-bm-cor { background: var(--jpa-b); }
.jpa-apuracao .jpa-bm-pick-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jpa-apuracao .jpa-bm-pick-txt b {
	font-size: 14px; font-weight: 700; line-height: 1.15;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
.jpa-apuracao .jpa-bm-pick-txt small { font-size: 11.5px; color: var(--jpa-muted); }
.jpa-apuracao .jpa-bm-seta {
	flex: 0 0 auto;
	width: 8px; height: 8px; margin: -4px 3px 0 2px;
	border-right: 2px solid var(--jpa-muted); border-bottom: 2px solid var(--jpa-muted);
	transform: rotate(45deg);
}
.jpa-apuracao .jpa-bm-x {
	flex: 0 0 auto; align-self: center;
	font-size: 16px; font-weight: 700; line-height: 1;
	color: var(--jpa-muted);
}
.jpa-apuracao .jpa-bm-pick-btn:focus-visible,
.jpa-apuracao .jpa-bm-zb:focus-visible,
.jpa-apuracao .jpa-bm-marca:focus-visible,
.jpa-apuracao .jpa-bm-linha-btn:focus-visible { outline: 2px solid var(--jpa-orange); outline-offset: 2px; }
/* nas linhas o contorno do foco vai por dentro: por fora ele seria cortado (cada linha é desenhada isolada) */
.jpa-apuracao .jpa-bm-linha-btn:focus-visible { outline-offset: -2px; }

/* lista de candidatos: ocupa a largura dos dois seletores */
.jpa-apuracao .jpa-bm-pop {
	position: absolute; z-index: 70;
	top: calc(100% + 4px); left: 0; right: 0;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--jpa-line); border-radius: 8px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}
.jpa-apuracao .jpa-bm-ops { max-height: min(330px, 52vh); margin-top: 6px; overflow-y: auto; }
.jpa-apuracao .jpa-bm-op {
	display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px;
	padding: 9px 8px;
	border-bottom: 1px solid #f2f2f3;
	cursor: pointer;
}
.jpa-apuracao .jpa-bm-op:last-child { border-bottom: 0; }
.jpa-apuracao .jpa-bm-op.is-ativo,
.jpa-apuracao .jpa-bm-op:hover { background: var(--jpa-red-tint); }
.jpa-apuracao .jpa-bm-op-nome { font-size: 14px; font-weight: 600; line-height: 1.2; text-transform: uppercase; color: var(--jpa-ink); }
.jpa-apuracao .jpa-bm-op.is-atual .jpa-bm-op-nome { color: var(--jpa-red); }
.jpa-apuracao .jpa-bm-op-nome em { font-size: 11.5px; font-style: normal; font-weight: 400; text-transform: none; color: var(--jpa-muted); }
.jpa-apuracao .jpa-bm-op-meta { font-size: 11.5px; color: var(--jpa-muted); font-variant-numeric: tabular-nums; }

/* ---------- placar da cidade ---------- */
/* (content-visibility: placar e ficha só são calculados e desenhados quando chegam perto da tela) */
.jpa-apuracao .jpa-bm-placar {
	padding: 14px 18px 12px;
	border-bottom: 8px solid var(--jpa-soft);
	content-visibility: auto; contain-intrinsic-size: auto 250px;
}
.jpa-apuracao .jpa-bm-placar-rot {
	margin-bottom: 10px;
	font-size: 11px; font-weight: 700; line-height: 1.2;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--jpa-red);
}
.jpa-apuracao .jpa-bm-duelo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jpa-apuracao .jpa-bm-duelo.is-um { grid-template-columns: minmax(0, 1fr); }
.jpa-apuracao .jpa-bm-lado { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jpa-apuracao .jpa-bm-lado.is-b { flex-direction: row-reverse; text-align: right; }
.jpa-apuracao .jpa-bm-lado.is-b .jpa-nome { justify-content: flex-end; }
.jpa-apuracao .jpa-bm-lado-txt { min-width: 0; }
.jpa-apuracao .jpa-bm-lado.is-a .jpa-foto { border-color: var(--jpa-a); }
.jpa-apuracao .jpa-bm-lado.is-b .jpa-foto { border-color: var(--jpa-b); }
.jpa-apuracao .jpa-bm-lado-num { margin-top: 5px; }
.jpa-apuracao .jpa-bm-lado-num b {
	display: block;
	font-size: 26px; font-weight: 700; line-height: 1;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	color: var(--jpa-a-txt);
}
.jpa-apuracao .jpa-bm-lado.is-b .jpa-bm-lado-num b { color: var(--jpa-b-txt); }
.jpa-apuracao .jpa-bm-lado-num small { display: block; margin-top: 3px; font-size: 12px; color: var(--jpa-muted); font-variant-numeric: tabular-nums; }
.jpa-apuracao .jpa-bm-barra {
	display: flex; justify-content: space-between;
	height: 8px; margin-top: 12px;
	background: #dedfe3; border-radius: 99px; overflow: hidden;
}
.jpa-apuracao .jpa-bm-barra span { display: block; flex: 0 0 auto; height: 100%; }
.jpa-apuracao .jpa-bm-barra .is-a { background: var(--jpa-a); }
.jpa-apuracao .jpa-bm-barra .is-b { background: var(--jpa-b); }
.jpa-apuracao .jpa-bm-dif { margin-top: 8px; font-size: 12.5px; color: var(--jpa-muted); text-align: center; }
.jpa-apuracao .jpa-bm-dif b { color: var(--jpa-ink); font-variant-numeric: tabular-nums; }

/* ---------- eleitorado, comparecimento, abstenção, válidos, brancos e nulos ---------- */
.jpa-apuracao .jpa-bm-est {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px;
	margin-top: 14px; padding-top: 12px;
	border-top: 1px solid var(--jpa-line);
}
.jpa-apuracao .jpa-bm-e { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; min-width: 0; }
.jpa-apuracao .jpa-bm-e span { flex: 0 0 100%; font-size: 11px; line-height: 1.3; color: var(--jpa-muted); }
.jpa-apuracao .jpa-bm-e b {
	font-size: 15.5px; font-weight: 700; line-height: 1.3;
	font-variant-numeric: tabular-nums;
	color: var(--jpa-ink);
}
.jpa-apuracao .jpa-bm-e small { font-size: 11.5px; color: var(--jpa-muted); font-variant-numeric: tabular-nums; }
.jpa-apuracao .jpa-bm-est-nota { margin-top: 8px; font-size: 11.5px; line-height: 1.3; color: var(--jpa-muted); }

/* ---------- legenda ---------- */
.jpa-apuracao .jpa-bm-legenda {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
	padding: 10px 18px 10px;
	font-size: 12px; line-height: 1.3; color: var(--jpa-ink);
}
.jpa-apuracao .jpa-bm-leg { display: inline-flex; align-items: center; gap: 6px; }
.jpa-apuracao .jpa-bm-leg.is-nota { color: var(--jpa-muted); }
.jpa-apuracao .jpa-bm-tons { display: inline-flex; border-radius: 3px; overflow: hidden; }
.jpa-apuracao .jpa-bm-tons i { display: block; width: 13px; height: 13px; }

/* ---------- mapa ---------- */
.jpa-apuracao .jpa-bm-mapa {
	position: relative;
	margin: 0 18px;
	background: #fbfbfc;
	/* cantos de baixo retos: a ficha do local escolhido continua a caixa */
	border: 1px solid var(--jpa-line); border-radius: 8px 8px 0 0;
	overflow: hidden;
}
.jpa-apuracao .jpa-bm-svg {
	display: block; width: 100%; height: 100%;
	touch-action: pan-y;
	-webkit-user-select: none; user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.jpa-apuracao .jpa-bm-mapa.is-perto .jpa-bm-svg { touch-action: none; cursor: grab; }
.jpa-apuracao .jpa-bm-via { fill: #e6e6ea; }
.jpa-apuracao .jpa-bm-verde { fill: #e2ecdb; }
.jpa-apuracao .jpa-bm-agua { fill: #cbe3f3; }
.jpa-apuracao .jpa-bm-rio { fill: none; stroke: #bcdaee; stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* Bairros: fundo neutro para localizar as escolas. A área (quadras + ruas) num tom, as quadras por cima. */
.jpa-apuracao .jpa-bm-a {
	fill: #f2f2f4;
	stroke: #bfc1c7; stroke-width: 1px; stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.jpa-apuracao .jpa-bm-q { fill: #e2e2e6; }

/* nomes dos bairros e círculos dos locais: HTML por cima do desenho, sempre no mesmo tamanho */
/* (top/right/bottom/left por extenso: o iPhone anterior ao iOS 14.5 não conhece "inset") */
.jpa-apuracao .jpa-bm-camada { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; }
/* até o mapa chegar perto da tela e ser arrumado, os nomes e círculos ficam fora da conta do navegador */
.jpa-apuracao .jpa-bm-camada.is-espera { display: none; }
.jpa-apuracao .jpa-bm-rot {
	position: absolute; top: 0; left: 0;
	max-width: 88px;
	padding: 0 2px;
	font-size: 10px; font-weight: 600; line-height: 1.15;
	text-align: center; text-wrap: balance;
	color: #5f6269;
	text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff;
}
.jpa-apuracao .jpa-bm-rot.is-fora { visibility: hidden; }
/* Um círculo por local de votação: a cor diz quem ficou na frente ali e o tamanho, quantos votos. */
.jpa-apuracao .jpa-bm-marca {
	position: absolute; top: 0; left: 0;
	display: flex; align-items: center; justify-content: center;
	min-width: 0; min-height: 0;
	margin: 0; padding: 0;
	border: 2px solid #fff; border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .42);
	color: #fff;
	font-weight: 700; line-height: 1;
	text-transform: none; letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}
.jpa-apuracao .jpa-bm-marca:hover { color: #fff; box-shadow: 0 0 0 2px rgba(27, 28, 30, .5), 0 1px 3px rgba(0, 0, 0, .42); }
.jpa-apuracao .jpa-bm-marca.is-claro,
.jpa-apuracao .jpa-bm-marca.is-claro:hover { color: var(--jpa-ink); }
.jpa-apuracao .jpa-bm-marca.is-sel { box-shadow: 0 0 0 2.5px var(--jpa-ink), 0 2px 6px rgba(0, 0, 0, .45); }
/* área de toque maior que o círculo */
.jpa-apuracao .jpa-bm-marca::after { content: ""; position: absolute; top: -7px; right: -7px; bottom: -7px; left: -7px; border-radius: 50%; }

/* etiqueta do local em destaque, ao lado do círculo: nome do local e, em cada linha, candidato e votos */
.jpa-apuracao .jpa-bm-etq {
	position: absolute; z-index: 62; top: 0; left: 0;
	display: flex; flex-direction: column; gap: 3px;
	min-width: 150px; max-width: 204px;
	padding: 7px 10px 8px;
	background: #fff;
	border: 1px solid #c9cacf; border-radius: 6px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
	color: var(--jpa-ink);
	font-size: 11.5px; line-height: 1.2;
	pointer-events: none;
}
/* o nome do local não alarga a etiqueta: a largura é a das linhas dos candidatos, e o nome quebra dentro dela */
.jpa-apuracao .jpa-bm-etq > b { width: 0; min-width: 100%; margin-bottom: 2px; font-weight: 700; text-transform: uppercase; }
.jpa-apuracao .jpa-bm-etq-l { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.25; }
.jpa-apuracao .jpa-bm-etq-l i {
	flex: 0 0 auto;
	width: 9px; height: 9px;
	border-radius: 2px;
	background: var(--jpa-a);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.jpa-apuracao .jpa-bm-etq-l i.is-b { background: var(--jpa-b); }
.jpa-apuracao .jpa-bm-etq-l span {
	flex: 1 1 auto; min-width: 0;
	font-weight: 600; text-transform: uppercase;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jpa-apuracao .jpa-bm-etq-l b { flex: 0 0 auto; margin-left: 8px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Google Maps no lugar do mapa desenhado (google_maps_key no shortcode) ---------- */
.jpa-apuracao .jpa-bm-gmapa { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
/* enquanto o Google carrega (e é conferido), fica escondido por trás do mapa desenhado */
.jpa-apuracao .jpa-bm-gmapa.is-espera { visibility: hidden; }
.jpa-apuracao .jpa-bm-mapa.is-google > .jpa-bm-svg,
.jpa-apuracao .jpa-bm-mapa.is-google > .jpa-bm-camada { display: none; }
/* camada dos círculos dentro do mapa do Google: a origem é a dele e nada é cortado aqui */
.jpa-apuracao .jpa-bm-gcamada { position: absolute; top: 0; left: 0; }
/* Botões do painel por cima do Google Maps, no lugar dos dele (grandes demais num mapa pequeno):
   "Mapa | Satélite" em cima à esquerda, "Cidade | Município" em cima à direita. */
.jpa-apuracao .jpa-bm-gver {
	position: absolute; z-index: 65; top: 8px; left: 8px; right: 8px;
	display: flex; justify-content: space-between; align-items: flex-start; gap: 6px;
	pointer-events: none;
}
.jpa-apuracao .jpa-bm-gseg {
	display: inline-flex;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
	overflow: hidden;
	pointer-events: auto;
}
.jpa-apuracao .jpa-bm-gb {
	width: auto; height: 30px; min-width: 0; min-height: 0;
	margin: 0; padding: 0 10px;
	background: #fff;
	border: 0; border-left: 1px solid #e3e4e7; border-radius: 0;
	box-shadow: none;
	color: var(--jpa-ink);
	font-size: 12px; font-weight: 600; line-height: 1;
	text-transform: none; letter-spacing: 0;
	cursor: pointer;
}
.jpa-apuracao .jpa-bm-gb:first-child { border-left: 0; }
.jpa-apuracao .jpa-bm-gb:hover { background: #fff; color: var(--jpa-red); }
.jpa-apuracao .jpa-bm-gb.is-on,
.jpa-apuracao .jpa-bm-gb.is-on:hover { background: var(--jpa-ink); color: #fff; }
.jpa-apuracao .jpa-bm-gb:focus-visible { outline: 2px solid var(--jpa-orange); outline-offset: -2px; }
/* os + e - sobem um pouco para não cobrir os créditos do mapa, que o Google exige à vista */
.jpa-apuracao .jpa-bm-mapa.is-google > .jpa-bm-zoom { bottom: 26px; }
/* o tema do site não deve mexer nos elementos do próprio Google */
.jpa-apuracao .jpa-bm-gmapa button:not(.jpa-bm-marca) { min-width: 0; min-height: 0; box-shadow: none; letter-spacing: 0; }

/* zoom no canto de baixo à direita, onde o mapa da cidade não tem bairros */
.jpa-apuracao .jpa-bm-zoom {
	position: absolute; z-index: 65; right: 8px; bottom: 8px;
	display: flex; flex-direction: row-reverse; align-items: center; gap: 4px;
}
.jpa-apuracao .jpa-bm-zb {
	width: 34px; height: 34px; min-height: 0;
	margin: 0; padding: 0;
	background: #fff;
	border: 1px solid #d6d7da; border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
	color: var(--jpa-ink);
	font-size: 19px; font-weight: 700; line-height: 1;
	text-transform: none; letter-spacing: 0;
	cursor: pointer;
}
.jpa-apuracao .jpa-bm-zb:hover { background: #fff; border-color: var(--jpa-red); color: var(--jpa-red); }
.jpa-apuracao .jpa-bm-zb:disabled { opacity: .45; border-color: #d6d7da; color: var(--jpa-ink); cursor: default; }
.jpa-apuracao .jpa-bm-zb.is-volta { width: auto; padding: 0 10px; font-size: 12px; }

/* selo com o número do local (o mesmo do círculo do mapa) */
.jpa-apuracao .jpa-bm-num {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
	width: 22px; height: 22px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
	color: #fff;
	font-size: 11.5px; font-weight: 700; line-height: 1;
	font-variant-numeric: tabular-nums;
}
.jpa-apuracao .jpa-bm-num.is-claro { color: var(--jpa-ink); }
/* na ficha, o selo repete o círculo escolhido no mapa: maior e com o mesmo aro escuro */
.jpa-apuracao .jpa-bm-num.is-lg {
	width: 40px; height: 40px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 2.5px var(--jpa-ink);
	font-size: 16px;
}

/* ---------- ficha do local escolhido: continua a caixa do mapa ---------- */
.jpa-apuracao .jpa-bm-ficha {
	margin: 0 18px 6px;
	background: #fff;
	border: 1px solid var(--jpa-line); border-top: 0; border-radius: 0 0 8px 8px;
	overflow: hidden;
	content-visibility: auto; contain-intrinsic-size: auto 420px;
}
.jpa-apuracao .jpa-bm-ficha-topo {
	display: flex; align-items: center; gap: 14px;
	padding: 13px 16px 13px 18px;
	background: var(--jpa-soft);
	border-bottom: 1px solid var(--jpa-line);
}
.jpa-apuracao .jpa-bm-ficha-tit { min-width: 0; }
.jpa-apuracao .jpa-bm-ficha-tit b {
	display: block;
	font-size: 19px; font-weight: 700; line-height: 1.2;
	text-transform: uppercase;
	color: var(--jpa-ink);
	overflow-wrap: anywhere;
}
.jpa-apuracao .jpa-bm-ficha-tit small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--jpa-muted); }
.jpa-apuracao .jpa-bm-ficha-corpo { padding: 15px 16px 16px; }
.jpa-apuracao .jpa-bm-ficha .jpa-nome { font-size: 13px; }
.jpa-apuracao .jpa-bm-ficha .jpa-bm-lado-num { margin-top: 3px; }
.jpa-apuracao .jpa-bm-ficha .jpa-bm-lado-num b { font-size: 30px; }
.jpa-apuracao .jpa-bm-ficha .jpa-bm-lado-num small { font-size: 12.5px; }
.jpa-apuracao .jpa-bm-ficha .jpa-bm-barra { height: 10px; }
.jpa-apuracao .jpa-bm-ficha .jpa-bm-dif { font-size: 13px; }
.jpa-apuracao .jpa-bm-ficha-col.is-extra { margin-top: 16px; }
/* no celular a segunda parte da ficha (mais votados e seções) abre por este botão */
.jpa-apuracao .jpa-bm-mais {
	display: none;
	width: 100%; height: auto; min-height: 0;
	margin: 12px 0 0; padding: 9px 12px;
	background: #fff;
	border: 1px solid #d6d7da; border-radius: 6px;
	box-shadow: none;
	color: var(--jpa-ink);
	font-size: 12.5px; font-weight: 700; line-height: 1.2;
	text-align: center; text-transform: none; letter-spacing: 0;
	cursor: pointer;
}
.jpa-apuracao .jpa-bm-mais:hover { background: #fff; border-color: var(--jpa-red); color: var(--jpa-red); }
.jpa-apuracao .jpa-bm-mais:focus-visible { outline: 2px solid var(--jpa-orange); outline-offset: 2px; }

/* ---------- listas de locais de votação ---------- */
.jpa-apuracao .jpa-bm-lista { padding: 8px 0 6px; }
/* content-visibility: o navegador só calcula e desenha as linhas que estão perto da tela (são 34);
   a altura reservada evita que a página "pule" quando elas entram. */
.jpa-apuracao .jpa-bm-linha {
	display: flex; flex-direction: column;
	border-bottom: 1px solid #f0f0f1;
	content-visibility: auto; contain-intrinsic-size: auto 112px;
}
.jpa-apuracao .jpa-bm-linha.is-sel { background: linear-gradient(90deg, var(--jpa-red-tint), #fff 75%); }
.jpa-apuracao .jpa-bm-linha-btn {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	grid-template-areas: "selo nome meta" "nums nums nums" "barra barra barra" "bn bn bn";
	/* nome com mais linhas: a sobra de altura fica em cima, e números e barra se alinham com a linha vizinha */
	grid-template-rows: 1fr auto auto auto;
	align-items: start; gap: 6px 8px;
	flex: 1 1 auto;
	width: 100%; height: auto; min-height: 0;
	margin: 0; padding: 11px 18px 12px;
	background: none;
	border: 0; border-radius: 0;
	box-shadow: none;
	color: var(--jpa-ink);
	font-size: 14px; font-weight: 400; line-height: 1.3;
	text-align: left; text-transform: none; letter-spacing: 0;
	cursor: pointer;
}
.jpa-apuracao .jpa-bm-linha-btn:hover { background: rgba(0, 0, 0, .025); color: var(--jpa-ink); }
.jpa-apuracao .jpa-bm-linha-btn .jpa-bm-num { grid-area: selo; margin-top: -2px; }
/* locais fora da cidade não têm número no mapa: só a cor */
.jpa-apuracao .jpa-bm-chip { grid-area: selo; justify-self: center; width: 14px; height: 14px; margin-top: 2px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.jpa-apuracao .jpa-bm-linha-nome { grid-area: nome; font-size: 14.5px; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.jpa-apuracao .jpa-bm-linha-nome small { font-size: 11.5px; font-weight: 400; text-transform: none; color: var(--jpa-muted); }
.jpa-apuracao .jpa-bm-linha-nome .jpa-bm-linha-sub { display: block; margin-top: 3px; line-height: 1.35; }
.jpa-apuracao .jpa-bm-linha-meta { grid-area: meta; margin-top: 2px; font-size: 11.5px; color: var(--jpa-muted); white-space: nowrap; }
.jpa-apuracao .jpa-bm-nums { grid-area: nums; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.jpa-apuracao .jpa-bm-n b { font-size: 17px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.jpa-apuracao .jpa-bm-n.is-a b { color: var(--jpa-a-txt); }
.jpa-apuracao .jpa-bm-n.is-b b { color: var(--jpa-b-txt); }
.jpa-apuracao .jpa-bm-n small { margin-left: 5px; font-size: 11.5px; color: var(--jpa-muted); font-variant-numeric: tabular-nums; }
.jpa-apuracao .jpa-bm-linha .jpa-bm-barra { grid-area: barra; height: 6px; margin-top: 0; }
/* brancos e nulos do local, embaixo da barra */
.jpa-apuracao .jpa-bm-bn { grid-area: bn; display: block; font-size: 11.5px; line-height: 1.3; color: var(--jpa-muted); font-variant-numeric: tabular-nums; }
.jpa-apuracao .jpa-bm-bn b { font-weight: 600; color: var(--jpa-ink); }
.jpa-apuracao .jpa-bm-local .jpa-bm-bn { margin-top: 6px; }

/* linha aberta: os locais de votação dela, o comparecimento e os mais votados, num fundo só */
.jpa-apuracao .jpa-bm-linha.is-aberta > .jpa-bm-linha-btn,
.jpa-apuracao .jpa-bm-linha.is-aberta > .jpa-bm-det { background: var(--jpa-soft); }
.jpa-apuracao .jpa-bm-det { padding: 2px 18px 16px 48px; }
.jpa-apuracao .jpa-bm-det .jpa-bm-local,
.jpa-apuracao .jpa-bm-det .jpa-bm-est { border-color: #dfe0e4; }
.jpa-apuracao .jpa-bm-det-col + .jpa-bm-det-col { margin-top: 14px; }
.jpa-apuracao .jpa-bm-det-rot {
	margin: 0 0 2px;
	font-size: 10.5px; font-weight: 700; line-height: 1.2;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--jpa-muted);
}
/* nome completo, endereço e seções de um local de votação */
.jpa-apuracao .jpa-bm-local { padding-top: 10px; border-top: 1px solid var(--jpa-line); }
.jpa-apuracao .jpa-bm-ficha .jpa-bm-local { margin-top: 12px; }
.jpa-apuracao .jpa-bm-local > b {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	font-size: 13.5px; font-weight: 600; line-height: 1.25;
}
.jpa-apuracao .jpa-bm-local > b span { flex: 0 0 auto; font-size: 11.5px; font-weight: 400; color: var(--jpa-muted); white-space: nowrap; }
.jpa-apuracao .jpa-bm-local > small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--jpa-muted); }
/* na linha aberta o primeiro local vem logo abaixo do nome da linha, sem traço */
.jpa-apuracao .jpa-bm-det-col > .jpa-bm-local:first-child { padding-top: 0; border-top: 0; }
/* localidade com mais de um local: cada escola com o próprio resultado */
.jpa-apuracao .jpa-bm-local.is-parte { padding-bottom: 12px; }
.jpa-apuracao .jpa-bm-local.is-parte .jpa-bm-nums { margin-top: 7px; }
.jpa-apuracao .jpa-bm-local.is-parte .jpa-bm-n b { font-size: 15px; }
.jpa-apuracao .jpa-bm-local.is-parte .jpa-bm-barra { height: 6px; margin-top: 5px; }
.jpa-apuracao .jpa-bm-det .jpa-bm-est { margin-top: 0; }
.jpa-apuracao .jpa-bm-det .jpa-bm-local:not(.is-parte) + .jpa-bm-est { margin-top: 10px; }
/* os mais votados (em <div>, com o tamanho de cada parte dito aqui: o tema do site impõe a letra dele a <li>) */
.jpa-apuracao .jpa-bm-top { margin: 0; padding: 0; }
.jpa-apuracao .jpa-bm-top-i {
	display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 58px; align-items: baseline; gap: 0 8px;
	margin: 0; padding: 4px 0;
	font-size: 13px; line-height: 1.3;
}
.jpa-apuracao .jpa-bm-top-i i { font-size: 12px; font-style: normal; font-weight: 700; line-height: 1.3; color: #a1a4aa; }
.jpa-apuracao .jpa-bm-top-i span { font-size: 13px; font-weight: 600; line-height: 1.3; text-transform: uppercase; color: var(--jpa-ink); }
.jpa-apuracao .jpa-bm-top-i span small { font-size: 11px; font-weight: 400; color: var(--jpa-muted); }
.jpa-apuracao .jpa-bm-top-i b { font-size: 13px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--jpa-ink); }
.jpa-apuracao .jpa-bm-top-i em { font-size: 11.5px; font-style: normal; font-weight: 400; line-height: 1.3; text-align: right; color: var(--jpa-muted); font-variant-numeric: tabular-nums; }
/* os candidatos que estão sendo comparados levam a cor do lado deles */
.jpa-apuracao .jpa-bm-top-i.is-a b { color: var(--jpa-a-txt); }
.jpa-apuracao .jpa-bm-top-i.is-b b { color: var(--jpa-b-txt); }

/* telas largas: listas, ficha e detalhe da linha aberta em duas colunas */
@media (min-width: 700px) {
	/* A linha aberta continua na coluna dela e o detalhe ocupa a largura toda logo abaixo do par:
	   o botão e o detalhe viram itens da grade ("contents") e a vizinha preenche a vaga ("dense"). */
	.jpa-apuracao .jpa-bm-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
	.jpa-apuracao .jpa-bm-linha.is-aberta { display: contents; }
	.jpa-apuracao .jpa-bm-linha.is-aberta > .jpa-bm-det { grid-column: 1 / -1; padding-top: 14px; border-bottom: 1px solid #f0f0f1; }
	.jpa-apuracao .jpa-bm-linha:nth-child(odd):not(.is-aberta),
	.jpa-apuracao .jpa-bm-linha.is-aberta:nth-child(odd) > .jpa-bm-linha-btn { border-right: 1px solid #f0f0f1; }
	.jpa-apuracao .jpa-bm-placar .jpa-bm-est { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.jpa-apuracao .jpa-bm-ficha-corpo,
	.jpa-apuracao .jpa-bm-det { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; align-items: start; }
	.jpa-apuracao .jpa-bm-ficha-col.is-extra,
	.jpa-apuracao .jpa-bm-det-col + .jpa-bm-det-col { margin-top: 0; }
}

/* ---------- celular ---------- */
@media (max-width: 560px) {
	.jpa-apuracao .jpa-bm-placar { padding: 12px 14px 10px; }
	.jpa-apuracao .jpa-bm-legenda { padding-left: 14px; padding-right: 14px; }
	.jpa-apuracao .jpa-bm-mapa { margin: 0 14px; }
	.jpa-apuracao .jpa-bm-ficha { margin-left: 14px; margin-right: 14px; }
	.jpa-apuracao .jpa-bm-ficha-topo { gap: 12px; padding: 11px 12px 11px 14px; }
	.jpa-apuracao .jpa-bm-ficha-tit b { font-size: 16.5px; }
	.jpa-apuracao .jpa-bm-ficha-corpo { padding: 13px 12px 14px; }
	.jpa-apuracao .jpa-bm-ficha .jpa-bm-lado-num b { font-size: 25px; }
	.jpa-apuracao .jpa-bm-ficha .jpa-bm-lado-num small { font-size: 12px; }
	.jpa-apuracao .jpa-bm-num.is-lg { width: 36px; height: 36px; font-size: 15px; }
	.jpa-apuracao .jpa-bm-est { gap: 9px 10px; }
	.jpa-apuracao .jpa-bm-etq { min-width: 132px; max-width: 184px; padding: 6px 9px 7px; font-size: 11px; }
	/* mapa pequeno: o nome do local fica numa linha só (a ficha logo abaixo traz ele inteiro) */
	.jpa-apuracao .jpa-bm-etq > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.jpa-apuracao .jpa-bm-etq-l { font-size: 11.5px; }
	.jpa-apuracao .jpa-bm-etq-l b { margin-left: 6px; font-size: 12.5px; }
	.jpa-apuracao .jpa-bm-linha-btn { padding-left: 14px; padding-right: 14px; }
	.jpa-apuracao .jpa-bm-det { padding: 2px 14px 14px 14px; }
	.jpa-apuracao .jpa-bm-picks { gap: 5px; }
	.jpa-apuracao .jpa-bm-pick-btn { gap: 7px; padding: 7px 8px; }
	.jpa-apuracao .jpa-bm-pick-txt b { font-size: 12.5px; }
	.jpa-apuracao .jpa-bm-seta { display: none; }
	.jpa-apuracao .jpa-bm-duelo { gap: 8px; }
	.jpa-apuracao .jpa-bm-lado { gap: 8px; }
	.jpa-apuracao .jpa-bm-lado .jpa-foto.is-lg { width: 44px; height: 44px; border-width: 2px; }
	.jpa-apuracao .jpa-bm-lado .jpa-nome { font-size: 12.5px; }
	.jpa-apuracao .jpa-bm-lado-num b { font-size: 21px; }
	.jpa-apuracao .jpa-bm-lado-num small { font-size: 11px; }
	.jpa-apuracao .jpa-bm-rot { max-width: 76px; font-size: 9.5px; }
	.jpa-apuracao .jpa-bm-marca { border-width: 1.5px; }
	.jpa-apuracao .jpa-bm-top-i { grid-template-columns: 20px minmax(0, 1fr) auto 52px; }
	/* ficha mais curta: mais votados e seções ficam guardados atrás do botão */
	.jpa-apuracao .jpa-bm-mais { display: block; }
	.jpa-apuracao .jpa-bm-ficha:not(.is-toda) .jpa-bm-ficha-col.is-extra { display: none; }
	.jpa-apuracao .jpa-bm-gver { top: 6px; left: 6px; right: 6px; }
	.jpa-apuracao .jpa-bm-gb { height: 28px; padding: 0 8px; font-size: 11.5px; }
}
/* telas estreitas: os seis números em duas colunas, para "Comparecimento" caber
   (na ficha e na linha aberta, que são mais estreitas que o placar, isso começa antes) */
@media (max-width: 380px) {
	.jpa-apuracao .jpa-bm-ficha .jpa-bm-est,
	.jpa-apuracao .jpa-bm-det .jpa-bm-est { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 350px) {
	.jpa-apuracao .jpa-bm-est { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* mapa pequeno: etiqueta menor, para cobrir menos */
	.jpa-apuracao .jpa-bm-etq { min-width: 120px; max-width: 164px; padding: 5px 8px 6px; font-size: 10.5px; }
	.jpa-apuracao .jpa-bm-etq-l { font-size: 11px; }
	.jpa-apuracao .jpa-bm-etq-l b { font-size: 11.5px; }
}