/* ============================================================
   MAPA — Apuração por estado (Eleições 2026)
   App de tela cheia, modo escuro: largura e altura ocupam toda a viewport
   (descontando o header do site, medido em JS via --nsl-mapa-header-h),
   mapa à esquerda, painel à direita — só o painel rola, o resto é fixo.
============================================================ */

@keyframes eleicoes-2026-shimmer {
  0% { background-position: -450px 0; }
  100% { background-position: 450px 0; }
}

.eleicoes-2026_skeleton-bar {
  display: inline-block;
  border-radius: 6px;
  background-color: #22252b;
  background-image: linear-gradient(90deg, #22252b 25%, #2c2f36 37%, #22252b 63%);
  background-size: 450px 100%;
  animation: eleicoes-2026-shimmer 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .eleicoes-2026_skeleton-bar {
    animation: none;
  }
}

.eleicoes-2026_candidato-partido-badge {
  display: inline-block;
  font-size: 0.7em;
  font-weight: 700;
  border-radius: 6px;
  padding: 1px 6px;
  flex-shrink: 0;
}

.eleicoes-2026_erro {
  background: #2a1215;
  border: 1px solid #5a2a2e;
  border-radius: var(--ns-border-radius, 12px);
  padding: 20px;
  text-align: center;
  color: #ff8a80;
}

/* Esconde o rodapé do site só nessa página (classe do body_class(),
   ver nsl_eleicoes_mapa_body_class() em mapa.php) — get_footer() continua
   rodando normalmente (wp_footer() etc.), só o elemento visual some. */
body.eleicoes-2026-mapa-page #colophon {
  display: none;
}

body.eleicoes-2026-mapa-page {
  overflow: hidden;
}

.eleicoes-2026-mapa {
  width: 100%;
  height: calc(100vh - var(--nsl-mapa-header-h, 0px));
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: #0e0f12;
  color: #f2f3f5;
  font-family: var(--font-general, Lato, sans-serif);
}

.eleicoes-2026-mapa_layout {
  display: flex;
  align-items: stretch;
  height: 100%;
}

/* ---------- Mapa (esquerda) ---------- */

.eleicoes-2026-mapa_mapa-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  background: #0b0c0e;
}

.eleicoes-2026-mapa_brasil-btn {
  position: absolute;
  z-index: 10;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1c1e23;
  border: 1px solid #2a2d33;
  border-radius: 999px;
  padding: 10px 18px 10px 14px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85em;
  color: #f2f3f5;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: background 0.15s ease, color 0.15s ease;
}

.eleicoes-2026-mapa_brasil-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Texto que some depois de alguns segundos (.is-contraido, via JS): o
   espaço vem da margem do texto (não do gap), pra encolher junto. */
.eleicoes-2026-mapa_brasil-btn {
  gap: 0;
  transition: background 0.15s ease, color 0.15s ease, padding 0.35s ease;
}

.eleicoes-2026-mapa_brasil-btn-texto {
  display: inline-block;
  max-width: 220px;
  margin-left: 8px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transition: max-width 0.35s ease, margin-left 0.35s ease, opacity 0.2s ease;
}

/* Só o ícone: círculo de 40px (ícone 18 + 10 + 10 + borda). */
.eleicoes-2026-mapa_brasil-btn.is-contraido {
  padding: 10px;
}

.eleicoes-2026-mapa_brasil-btn.is-contraido .eleicoes-2026-mapa_brasil-btn-texto {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
}

/* Mouse por cima ou foco pelo teclado: abre de novo. No toque não — um tap
   já executa a ação. */
@media (hover: hover) {
  .eleicoes-2026-mapa_brasil-btn.is-contraido:hover {
    padding: 10px 18px 10px 14px;
  }

  .eleicoes-2026-mapa_brasil-btn.is-contraido:hover .eleicoes-2026-mapa_brasil-btn-texto {
    max-width: 220px;
    margin-left: 8px;
    opacity: 1;
  }
}

.eleicoes-2026-mapa_brasil-btn.is-contraido:focus-visible {
  padding: 10px 18px 10px 14px;
}

.eleicoes-2026-mapa_brasil-btn.is-contraido:focus-visible .eleicoes-2026-mapa_brasil-btn-texto {
  max-width: 220px;
  margin-left: 8px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .eleicoes-2026-mapa_brasil-btn,
  .eleicoes-2026-mapa_brasil-btn-texto {
    transition: none;
  }
}

.eleicoes-2026-mapa_brasil-btn:hover,
.eleicoes-2026-mapa_brasil-btn.is-active {
  background: var(--color-primary, #295ff2);
  border-color: var(--color-primary, #295ff2);
  color: #fff;
}

/* Legenda "Governador em 2º turno" — primeira linha da sidebar (fora do
   mapa, pra não cobrir estados). Só aparece quando alguma UF está pintada
   com a cor de 2º turno. */
.eleicoes-2026-mapa_legenda {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: #5b616b;
  font-size: 0.82em;
  font-weight: 700;
}

.eleicoes-2026-mapa_legenda[hidden] {
  display: none;
}

.eleicoes-2026-mapa_legenda-cor {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--nsl-el-2turno, #4c82ff);
  flex-shrink: 0;
}

.eleicoes-2026-mapa_dica {
  position: absolute;
  z-index: 11;
  bottom: 16px;
  left: 16px;
  /* Só cresce até onde os botões de zoom começam (canto inferior direito) —
     content-size normal (pill compacta), não uma barra esticada. */
  max-width: calc(100% - 16px - 62px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1c1e23;
  border: 1px solid #2a2d33;
  border-radius: 999px;
  padding: 8px 8px 8px 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.eleicoes-2026-mapa_dica.is-escondida {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.eleicoes-2026-mapa_dica-cursor {
  width: 15px;
  height: 15px;
  color: #f2f3f5;
  flex-shrink: 0;
}

.eleicoes-2026-mapa_dica-texto {
  font-size: 0.85em;
  font-weight: 600;
  color: #f2f3f5;
  white-space: nowrap;
}

.eleicoes-2026-mapa_dica-ok {
  flex-shrink: 0;
  border: none;
  background: #2a2d33;
  color: #f2f3f5;
  font-weight: 700;
  font-size: 0.8em;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.eleicoes-2026-mapa_dica-ok:hover {
  background: var(--color-primary, #295ff2);
  color: #fff;
}

@media (max-width: 900px) {
  .eleicoes-2026-mapa_dica-texto {
    white-space: normal;
  }
}

.eleicoes-2026-mapa_svg-wrap {
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none; /* deixa o pan/pinça na nossa mão — sem isso o navegador tenta rolar/dar zoom sozinho */
}

.eleicoes-2026-mapa_svg-wrap:active {
  cursor: grabbing;
}

.eleicoes-2026-mapa_svg-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
}

.eleicoes-2026-mapa_svg-wrap .eleicoes-2026-mapa_uf-path {
  /* Cinza neutro até a cor real chegar — sem isso o mapa fica praticamente
     invisível (preto sobre preto) por 1-2s a cada carregamento. */
  fill: #2a2d33;
  stroke: #0b0c0e;
  stroke-width: 1.2;
  /* Mantém a espessura da borda constante em pixels de tela mesmo com o
     grupo inteiro escalado (zoom via transform) — sem isso, dar zoom num
     estado pequeno deixa a borda grossa e amadora. */
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.4s ease, filter 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
}

.eleicoes-2026-mapa_svg-wrap .eleicoes-2026-mapa_uf-path:hover {
  filter: brightness(1.25);
}

.eleicoes-2026-mapa_svg-wrap .eleicoes-2026-mapa_uf-path.is-selected {
  stroke: #ffffff;
  stroke-width: 2;
}

.eleicoes-2026-mapa_svg-wrap g.eleicoes-2026-mapa_uf-group {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Enquanto um gesto de arrastar/pinça está rolando, a transição de 0.5s vira
   "lag" atrás do dedo/mouse — desliga só durante o gesto (ver
   semTransicaoEnquanto() no JS). */
.eleicoes-2026-mapa_svg-wrap g.eleicoes-2026-mapa_uf-group.sem-transicao {
  transition: none;
}

.eleicoes-2026-mapa_zoom-controles {
  position: absolute;
  z-index: 10;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.eleicoes-2026-mapa_zoom-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-bottom: 1px solid #2a2d33;
  background: #1c1e23;
  color: #f2f3f5;
  cursor: pointer;
  padding: 0;
}

.eleicoes-2026-mapa_zoom-btn:last-child {
  border-bottom: none;
}

.eleicoes-2026-mapa_zoom-btn:hover {
  background: var(--color-primary, #295ff2);
  color: #fff;
}

.eleicoes-2026-mapa_zoom-btn svg {
  width: 16px;
  height: 16px;
}

.eleicoes-2026-mapa_tooltip {
  position: absolute;
  z-index: 15;
  top: 0;
  left: 0;
  pointer-events: none;
  min-width: 220px;
  background: #1c1e23;
  border: 1px solid #2a2d33;
  border-radius: 10px;
  overflow: hidden;
  color: #f2f3f5;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.eleicoes-2026-mapa_tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .eleicoes-2026-mapa_tooltip {
    transition: none;
  }
}

.eleicoes-2026-mapa_tooltip-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #000000;
  border-bottom: 1px solid #2a2d33;
}

.eleicoes-2026-mapa_tooltip-header svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: var(--color-primary, #4c82ff);
}

.eleicoes-2026-mapa_tooltip-uf {
  background: #2a2d33;
  color: #d5d8dd;
  font-size: 0.78em;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  flex-shrink: 0;
}

.eleicoes-2026-mapa_tooltip-sep {
  color: #5a5f68;
  flex-shrink: 0;
}

.eleicoes-2026-mapa_tooltip-nome {
  font-weight: 700;
  font-size: 0.88em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eleicoes-2026-mapa_tooltip-cand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #24262b;
}

.eleicoes-2026-mapa_tooltip-cand:last-child {
  border-bottom: none;
}

.eleicoes-2026-mapa_tooltip-foto {
  width: 32px;
  height: 32px;
}

.eleicoes-2026-mapa_tooltip-foto.is-eleito {
  outline: 2px solid #34c771;
  outline-offset: 2px;
}

/* Selo de eleito dentro do círculo da foto (.eleicoes-2026-mapa_candidato-foto,
   que é position: relative), no canto inferior direito, por cima da imagem. */
.eleicoes-2026-mapa_tooltip-check {
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* Ícone assets/img/check.svg (branco, 8px) no centro do círculo verde. */
  background: #34c771 url("../img/check.svg") center / 8px 8px no-repeat;
  border: 2px solid #1c1e23;
}

.eleicoes-2026-mapa_tooltip-cand-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.eleicoes-2026-mapa_tooltip-cand-nome {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85em;
  font-weight: 700;
  color: #f2f3f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eleicoes-2026-mapa_tooltip-cand-nome .eleicoes-2026_candidato-partido-badge {
  flex-shrink: 0;
}

.eleicoes-2026-mapa_tooltip-cand-pct {
  font-size: 0.82em;
  font-weight: 800;
  color: #b8bcc4;
}

/* Situação do candidato no card do tooltip (s-eleito / s-2t) — o % não
   ganha mais cor só por liderar; estilize a situação por essas classes. */

/* Sem tooltip em aparelhos de toque (o toque já abre o painel lateral). */
@media (hover: none) and (pointer: coarse) {
  .eleicoes-2026-mapa_tooltip {
    display: none !important;
  }
}

.eleicoes-2026-mapa_tooltip-subjudice {
  font-size: 0.72em;
  font-style: italic;
  color: #d4a94a;
}

.eleicoes-2026-mapa_tooltip-selo {
  flex-shrink: 0;
  font-size: 0.66em;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.eleicoes-2026-mapa_tooltip-selo.eleito {
  background: var(--nsl-el-eleito, #1e7d34);
  color: #fff;
}

.eleicoes-2026-mapa_tooltip-selo.turno2 {
  background: var(--nsl-el-2turno, var(--color-primary, #295ff2));
  color: #fff;
}

.eleicoes-2026-mapa_tooltip-vazio {
  padding: 12px;
  font-size: 0.82em;
  color: #8a8f99;
}

/* ---------- Sidebar (esquerda no desktop — busca + intro/painel, só ela rola) ---------- */

.eleicoes-2026-mapa_sidebar {
  width: 460px;
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #16181c;
  border-right: 1px solid #24262b;
}

/* No desktop a sidebar fica à esquerda e o mapa à direita — invertido só
   aqui via "order" (sem mexer na ordem do HTML/DOM), pra não afetar a
   pilha vertical do mobile logo abaixo (que continua mapa em cima, sidebar
   embaixo, na ordem natural do documento). */
@media (min-width: 901px) {
  .eleicoes-2026-mapa_sidebar {
    order: -1;
  }
}

.eleicoes-2026-mapa_busca-wrap {
  position: relative;
  flex-shrink: 0;
}

.eleicoes-2026-mapa_busca-icone {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #7d828c;
  pointer-events: none;
}

.eleicoes-2026-mapa_busca {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px 12px 40px;
  border: 1px solid #2a2d33;
  border-radius: var(--ns-border-radius, 12px);
  font-family: inherit;
  font-size: 0.95em;
  outline: none;
  background: #1c1e23;
  color: #f2f3f5;
  transition: border-color 0.15s ease;
}

.eleicoes-2026-mapa_busca::placeholder {
  color: #7d828c;
}

.eleicoes-2026-mapa_busca:focus {
  border-color: var(--color-primary, #295ff2);
}

.eleicoes-2026-mapa_busca-lista {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #1c1e23;
  border: 1px solid #2a2d33;
  border-radius: var(--ns-border-radius, 12px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.eleicoes-2026-mapa_busca-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.92em;
  font-weight: 600;
  color: #f2f3f5;
}

.eleicoes-2026-mapa_busca-item:hover {
  background: #24262b;
}

.eleicoes-2026-mapa_busca-item-chip {
  font-size: 0.72em;
  font-weight: 700;
  color: #b8bcc4;
  background: #2a2d33;
  border-radius: 8px;
  padding: 3px 8px;
  flex-shrink: 0;
}

.eleicoes-2026-mapa_titulo {
  font-size: 1.4em;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 4px 0 8px;
  color: #f2f3f5;
}

.eleicoes-2026-mapa_subtitulo {
  color: #9aa0aa;
  font-size: 0.92em;
  line-height: 1.5;
  margin: 0 0 8px;
}

.eleicoes-2026-mapa_status {
  font-size: 0.85em;
  color: var(--color-primary, #4c82ff);
  font-weight: 600;
  min-height: 1.2em;
  margin: 0;
}

.eleicoes-2026-mapa_intro,
.eleicoes-2026-mapa_painel {
  flex-shrink: 0;
}

/* ---------- Painel lateral de um estado ---------- */

.eleicoes-2026-mapa_painel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
}

.eleicoes-2026-mapa_painel-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eleicoes-2026-mapa_painel-voltar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #24262b;
  color: #b8bcc4;
  cursor: pointer;
  padding: 0;
}

.eleicoes-2026-mapa_painel-voltar:hover {
  background: #2c2f36;
  color: #f2f3f5;
}

.eleicoes-2026-mapa_painel-voltar svg {
  width: 18px;
  height: 18px;
}

.eleicoes-2026-mapa_painel-flag {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  background: #24262b;
}

.eleicoes-2026-mapa_painel-nome {
  font-size: 1.25em;
  font-weight: 800;
  margin: 0;
  color: #f2f3f5;
}

.eleicoes-2026-mapa_bloco {
  border: 1px solid #24262b;
  border-radius: var(--ns-border-radius, 12px);
  overflow: hidden;
  background: #1a1c20;
}

.eleicoes-2026-mapa_bloco-titulo {
  font-size: 0.78em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #8b909a;
  padding: 12px 14px 0;
  margin: 0;
}

.eleicoes-2026-mapa_bloco-candidatos {
  list-style: none;
  margin: 0;
  padding: 8px 14px 12px;
  display: flex;
  flex-direction: column;
}

.eleicoes-2026-mapa_candidato {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #24262b;
  font-size: 0.9em;
  color: #f2f3f5;
}

.eleicoes-2026-mapa_candidato:last-child {
  border-bottom: none;
}

.eleicoes-2026-mapa_candidato-foto {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #24262b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eleicoes-2026-mapa_candidato.s-eleito .eleicoes-2026-mapa_candidato-foto{
  outline: 2px solid var(--bs-teal);
  outline-offset: 2px;
}
.eleicoes-2026-mapa_candidato.s-eleito .eleicoes-2026-mapa_candidato-foto:before{
  content: "";
  background-color: #34c771;
  /* Mesmo ícone do selo do tooltip (assets/img/check.svg, branco). */
  background-image: url("../img/check.svg");
  background-size: 8px 8px;
  background-position: 50%;
  background-repeat: no-repeat;
  border: 2px solid #1a1c20;
  border-radius: 80px;
  bottom: -6px;
  color: #fff;
  height: 20px;
  right: 0;
  position: absolute;
  width: 20px;
  z-index: 1;
}

.eleicoes-2026-mapa_candidato-foto svg {
  width: 18px;
  height: 18px;
  color: #5a5f68;
  border-radius: 50%;
}

.eleicoes-2026-mapa_candidato-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #24262b;
  border-radius: 50%;
}

.eleicoes-2026-mapa_candidato-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eleicoes-2026-mapa_candidato-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.eleicoes-2026-mapa_candidato-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.eleicoes-2026-mapa_candidato-pct {
  flex-shrink: 0;
  font-weight: 800;
  white-space: nowrap;
}

.eleicoes-2026-mapa_candidato-rodape {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Barra de progresso do candidato (largura = % dos votos válidos). */
.eleicoes-2026-mapa_candidato-barra {
  height: 5px;
  border-radius: 999px;
  background: #2a2d33;
  overflow: hidden;
}

.eleicoes-2026-mapa_candidato-barra-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.5s ease;
}

/* Linha de cima: partido fixo à direita; linha de baixo centralizada
   verticalmente (votos menores que a porcentagem). */
.eleicoes-2026-mapa_candidato-linha > .eleicoes-2026_candidato-partido-badge {
  flex-shrink: 0;
}

.eleicoes-2026-mapa_candidato-linha.is-rodape {
  align-items: center;
}

.eleicoes-2026-mapa_candidato-votos {
  font-size: 0.82em;
  color: #9ca1ab;
}

.eleicoes-2026-mapa_candidato-subjudice {
  font-style: italic;
  font-size: 0.82em;
  color: #d4a94a;
}

.eleicoes-2026_badge {
  display: inline-block;
  font-size: 0.68em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: middle;
}

.eleicoes-2026_badge.eleito {
  background: var(--nsl-el-eleito, #1e7d34);
  color: #fff;
}

.eleicoes-2026_badge.segundo-turno {
  background: var(--nsl-el-2turno, var(--color-primary, #295ff2));
  color: #fff;
}

.eleicoes-2026-mapa_bloco-link {
  display: block;
  padding: 10px 14px;
  border-top: 1px solid #24262b;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--color-primary, #4c82ff);
  text-decoration: none;
}

.eleicoes-2026-mapa_bloco-link:hover {
  text-decoration: underline;
}

.eleicoes-2026-mapa_bloco-vazio {
  padding: 12px 14px 14px;
  font-size: 0.85em;
  color: #8a8f99;
}

.eleicoes-2026_progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 10px;
}

.eleicoes-2026_progress-pct {
  font-weight: 800;
  font-size: 0.9em;
  color: #f2f3f5;
}

.eleicoes-2026_progress-updated {
  font-size: 0.72em;
  color: #8b909a;
  white-space: nowrap;
}

.eleicoes-2026_progress-bar-outer {
  height: 8px;
  border-radius: 999px;
  background: #24262b;
  overflow: hidden;
}

.eleicoes-2026_progress-bar-fill {
  height: 100%;
  min-width: 6px;
  border-radius: 999px;
  transition: width 0.6s ease, background-color 0.3s ease;
  background-color: #d6433f; /* estágio "início" */
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.35) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.35) 75%, transparent 75%, transparent
  );
  background-size: 22px 22px;
  animation: eleicoes-2026-mapa-stripes 1.1s linear infinite;
}

.eleicoes-2026_progress-bar-fill.andamento {
  background-color: #e2a33d;
}

.eleicoes-2026_progress-bar-fill.avancado {
  background-color: var(--color-primary, #295ff2);
}

.eleicoes-2026_progress-bar-fill.concluido {
  background-color: var(--nsl-el-eleito, #1e7d34);
  background-image: none;
  animation: none;
}

@keyframes eleicoes-2026-mapa-stripes {
  from { background-position: 0 0; }
  to { background-position: 22px 0; }
}

.eleicoes-2026_progress-detail {
  margin-top: 6px;
  font-size: 0.72em;
  color: #8b909a;
}

@media (prefers-reduced-motion: reduce) {
  .eleicoes-2026_progress-bar-fill {
    animation: none;
  }
}

.eleicoes-2026-mapa_dados-gerais-titulo {
  font-size: 0.9em;
  font-weight: 800;
  margin: 0 0 8px;
  color: #f2f3f5;
}

.eleicoes-2026-mapa_dados-gerais-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #24262b;
  border: 1px solid #24262b;
  border-radius: var(--ns-border-radius, 12px);
  overflow: hidden;
}

.eleicoes-2026-mapa_dados-gerais-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #1a1c20;
  padding: 10px 12px;
}

.eleicoes-2026-mapa_dados-gerais-rotulo {
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #8b909a;
}

.eleicoes-2026-mapa_dados-gerais-valor {
  font-size: 0.95em;
  font-weight: 800;
  color: #f2f3f5;
}

.eleicoes-2026-mapa_dados-gerais-pct {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--color-primary, #4c82ff);
}

/* ---------- Responsivo ---------- */

@media (max-width: 900px) {
  .eleicoes-2026-mapa_layout {
    flex-direction: column;
  }

  .eleicoes-2026-mapa_mapa-wrap {
    flex: none;
    height: 42%;
  }

  .eleicoes-2026-mapa_sidebar {
    width: 100%;
    flex: 1;
    min-height: 0;
    border-right: none;
    border-top: 1px solid #24262b;
  }
}

/* Aviso editorial (aba "Geral" do admin) — info ou alerta. */
.eleicoes-2026_aviso {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-left: 4px solid var(--color-primary, #295ff2);
  border-radius: 6px;
  background: #eef2ff;
  color: #1f2937;
  font-size: 0.9em;
  line-height: 1.45;
}
.eleicoes-2026_aviso--alerta {
  border-left-color: #d97706;
  background: #fff7e6;
}
.eleicoes-2026_aviso a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* Deputados: suplente (selo amarelo, ao lado de "Eleito"). */
.eleicoes-2026_badge.suplente {
  background: #facc15;
  color: #422006;
}

/* 5 itens em 2 colunas: o último ímpar (Abstenções) ocupa a linha inteira,
   sem deixar um buraco ao lado. */
.eleicoes-2026-mapa_dados-gerais-grid > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* ============================================================
   SIDEBAR NO MODO CLARO — o mapa (e o tooltip dele) continua escuro;
   só a coluna de busca/painel troca de paleta. Tudo escopado em
   .eleicoes-2026-mapa_sidebar, por cima das cores escuras acima.
============================================================ */
.eleicoes-2026-mapa .eleicoes-2026-mapa_sidebar {
  background: #f4f5f7;
  border-color: #e3e5e9;
  color: #15171a;
}

/* Carregando (skeleton) e erro */
.eleicoes-2026-mapa_sidebar .eleicoes-2026_skeleton-bar {
  background-color: #e9ebee;
  background-image: linear-gradient(90deg, #e9ebee 25%, #f5f6f8 37%, #e9ebee 63%);
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026_erro {
  background: #fdecec;
  border-color: #f5c2c0;
  color: #b42318;
}

/* Busca */
.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_busca {
  background: #fff;
  border-color: #dcdfe4;
  color: #15171a;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_busca::placeholder,
.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_busca-icone {
  color: #8a8f99;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_busca:focus {
  border-color: var(--color-primary, #295ff2);
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_busca-lista {
  background: #fff;
  border-color: #e3e5e9;
  box-shadow: 0 14px 30px rgba(15, 20, 30, 0.12);
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_busca-item {
  color: #15171a;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_busca-item:hover {
  background: #f1f3f6;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_busca-item-chip {
  background: #eef0f3;
  color: #5b616b;
}

/* Busca — campo fixo no topo da barra lateral ao rolar o painel, botão
   limpar, atalho "/", grupos, item ativo (setas) e trecho destacado. */
.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_busca-wrap {
  position: sticky;
  top: -20px; /* = padding da sidebar: gruda rente à borda de cima */
  z-index: 15;
  margin: -8px -20px;
  padding: 8px 20px;
  background: #f4f5f7;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_busca-icone {
  left: 34px;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_busca {
  height: 46px;
  padding: 0 44px 0 42px;
  font-size: 0.95em;
  box-shadow: 0 1px 2px rgba(15, 20, 30, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_busca:focus {
  box-shadow: 0 0 0 3px rgba(41, 95, 242, 0.15);
}

.eleicoes-2026-mapa_busca-atalho,
.eleicoes-2026-mapa_busca-limpar {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
}

.eleicoes-2026-mapa_busca-atalho {
  min-width: 22px;
  height: 22px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 0.75em;
  font-weight: 700;
  color: #8a8f99;
  background: #f4f5f7;
  border: 1px solid #dcdfe4;
  border-bottom-width: 2px;
  border-radius: 6px;
  pointer-events: none;
}

/* Só faz sentido com teclado físico; some quando a busca está em uso. */
.eleicoes-2026-mapa_busca:focus ~ .eleicoes-2026-mapa_busca-atalho,
.eleicoes-2026-mapa_busca:not(:placeholder-shown) ~ .eleicoes-2026-mapa_busca-atalho {
  display: none;
}

@media (hover: none), (max-width: 900px) {
  .eleicoes-2026-mapa_busca-atalho {
    display: none;
  }
}

.eleicoes-2026-mapa_busca-limpar {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #eef0f3;
  color: #5b616b;
  cursor: pointer;
}

.eleicoes-2026-mapa_busca-limpar[hidden] {
  display: none;
}

.eleicoes-2026-mapa_busca-limpar:hover {
  background: #e3e6ea;
  color: #15171a;
}

.eleicoes-2026-mapa_busca-limpar svg {
  width: 14px;
  height: 14px;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_busca-lista {
  top: calc(100% - 2px);
  left: 20px;
  width: calc(100% - 40px);
  max-height: min(380px, 60vh);
  overscroll-behavior: contain;
}

.eleicoes-2026-mapa_busca-grupo {
  padding: 10px 10px 4px;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8f99;
}

.eleicoes-2026-mapa_busca-dica,
.eleicoes-2026-mapa_busca-vazio {
  padding: 10px;
  font-size: 0.82em;
  line-height: 1.45;
  color: #5b616b;
}

.eleicoes-2026-mapa_busca-dica {
  margin-bottom: 2px;
  border-bottom: 1px solid #eef0f3;
}

.eleicoes-2026-mapa_busca-vazio {
  padding: 18px 12px;
  text-align: center;
}

.eleicoes-2026-mapa_busca-vazio strong {
  color: #15171a;
}

.eleicoes-2026-mapa_busca-vazio span {
  display: block;
  margin-top: 4px;
  color: #8a8f99;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_busca-item.is-ativo {
  background: #eaf0fe;
}

.eleicoes-2026-mapa_busca-item-flag,
.eleicoes-2026-mapa_busca-item-icone {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  flex-shrink: 0;
}

.eleicoes-2026-mapa_busca-item-flag {
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(15, 20, 30, 0.08);
}

.eleicoes-2026-mapa_busca-item-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef0f3;
  color: #5b616b;
}

.eleicoes-2026-mapa_busca-item-icone svg {
  width: 15px;
  height: 15px;
}

.eleicoes-2026-mapa_busca-item.is-ativo .eleicoes-2026-mapa_busca-item-icone {
  background: var(--color-primary, #295ff2);
  color: #fff;
}

.eleicoes-2026-mapa_busca-item-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eleicoes-2026-mapa_busca-item-nome mark {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--color-primary, #295ff2);
  font-weight: 800;
}

.eleicoes-2026-mapa_busca-item-sub {
  display: block;
  font-size: 0.8em;
  font-weight: 500;
  color: #8a8f99;
}

/* Título/introdução */
.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_titulo {
  color: #15171a;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_subtitulo {
  color: #5b616b;
}

/* Cabeçalho do painel (voltar + bandeira + nome) */
.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_painel-voltar {
  background: #eaecef;
  color: #5b616b;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_painel-voltar:hover {
  background: #dfe2e6;
  color: #15171a;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_painel-flag {
  background: #eaecef;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_painel-nome {
  color: #15171a;
}

/* Blocos de cargo */
.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_bloco {
  background: #fff;
  border-color: #e6e8eb;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_bloco-titulo {
  color: #6b7079;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_bloco-link {
  border-top-color: #eceef1;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_bloco-vazio {
  color: #8a8f99;
}

/* Candidatos */
.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_candidato {
  border-bottom-color: #eceef1;
  color: #15171a;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_candidato:last-child {
  border-bottom: none;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_candidato-foto,
.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_candidato-foto img {
  background: #eef0f3;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_candidato-foto svg {
  color: #a3a8b1;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_candidato.s-eleito .eleicoes-2026-mapa_candidato-foto:before {
  border-color: #fff;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_candidato-barra {
  background: #eceef1;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_candidato-votos {
  color: #6b7079;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_candidato-subjudice {
  color: #b7791f;
}

/* Progresso da apuração */
.eleicoes-2026-mapa_sidebar .eleicoes-2026_progress-pct {
  color: #15171a;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026_progress-updated,
.eleicoes-2026-mapa_sidebar .eleicoes-2026_progress-detail {
  color: #6b7079;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026_progress-bar-outer {
  background: #eceef1;
}

/* Dados gerais */
.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_dados-gerais-titulo {
  color: #15171a;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_dados-gerais-grid {
  background: #e6e8eb;
  border-color: #e6e8eb;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_dados-gerais-item {
  background: #fff;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_dados-gerais-rotulo {
  color: #8a8f99;
}

.eleicoes-2026-mapa_sidebar .eleicoes-2026-mapa_dados-gerais-valor {
  color: #15171a;
}

/* Indicador ao vivo no cabeçalho do painel: ponto verde pulsando + texto,
   alinhado à direita do nome (Brasil / estado). "Aguardando dados do TSE"
   antes da 1ª seção apurada, "Ao vivo" durante a apuração. */
.eleicoes-2026-mapa_aovivo {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 0.78em;
  font-weight: 700;
  color: #15803d;
  white-space: nowrap;
}

.eleicoes-2026-mapa_aovivo-ponto {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.eleicoes-2026-mapa_aovivo-ponto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22c55e;
  animation: eleicoes-2026-mapa-aovivo 1.6s ease-out infinite;
}

@keyframes eleicoes-2026-mapa-aovivo {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eleicoes-2026-mapa_aovivo-ponto::after {
    animation: none;
  }
}

/* ============================================================
   TELA CHEIA do mapa (botão acima do zoom)
============================================================ */
.eleicoes-2026-mapa_zoom-btn .icone-recolher { display: none; }
.eleicoes-2026-mapa_zoom-btn.is-ativa .icone-expandir { display: none; }
.eleicoes-2026-mapa_zoom-btn.is-ativa .icone-recolher { display: block; }

/* API nativa: o próprio wrap vira a tela inteira */
.eleicoes-2026-mapa_mapa-wrap:fullscreen {
  width: 100vw;
  height: 100vh;
  background: #0b0c0e;
}

/* Sem API (iPhone): o wrap cobre a tela via CSS */
.eleicoes-2026-mapa_mapa-wrap.is-tela-cheia {
  position: fixed !important;
  inset: 0;
  z-index: 100000;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #0b0c0e;
}

html.nsl-mapa-tela-cheia,
html.nsl-mapa-tela-cheia body {
  overflow: hidden;
}

/* ============================================================
   MUNICÍPIOS DENTRO DO MAPA DO BRASIL (hoje só a BA)
   Camada desenhada sobre o estado aberto (mesma <g> do zoom).
============================================================ */
.eleicoes-2026-mapa_mun-path {
  fill: #3a3e46;
  stroke: #0b0c0e;
  stroke-width: 0.5;
  stroke-opacity: 0.7;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill 0.4s ease, filter 0.15s ease;
}

.eleicoes-2026-mapa_mun-path:hover {
  filter: brightness(1.25);
}

.eleicoes-2026-mapa_mun-path.is-ativo {
  stroke: #ffffff;
  stroke-width: 2;
  stroke-opacity: 1;
}

/* Título + subtítulo do município no cabeçalho do painel */
.eleicoes-2026-mapa_painel-titulos {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.eleicoes-2026-mapa_painel-titulos .eleicoes-2026-mapa_painel-nome {
  line-height: 1.15;
}

.eleicoes-2026-mapa_painel-sub {
  font-size: 0.74em;
  color: #6b7079;
  font-weight: 600;
}

/* Crédito das fontes (mapa do IBGE, resultados do TSE) — sidebar, abaixo do status */
.eleicoes-2026-mapa_credito {
  margin: 4px 0 0;
  font-size: 0.74em;
  color: #8a8f99;
}

.eleicoes-2026-mapa_credito a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}