/* ========================================================================
   ESTILOS PERSONALIZADOS - APURAÇÃO ELEIÇÕES 2026 (SPARK ADMIN DESIGN)
   MAPA DO BRASIL DINÂMICO, ANIMADO E CHAMATIVO
   ======================================================================== */

:root {
  --spark-primary: #072F1F;
  --spark-primary-dark: #041c13;
  --spark-lime: #B4F105;
  --spark-surface: #FFFFFF;
  --spark-border: #E9EFEF;
  --spark-text-muted: #6C757D;
}

/* =========================================================================
   LOGO OFICIAL: De Olho na Urna - APURAÇÃO 2026 (AJUSTE PERFEITO DE LARGURA)
   ========================================================================= */
.sidebar-wrapper {
  padding: 1.25rem 1rem !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.sidebar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 2px !important;
  margin-bottom: 1.5rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

.sidebar-brand-img {
  height: 34px !important;
  width: auto !important;
  max-width: 36px !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  transition: transform 0.25s ease;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

.sidebar-brand:hover .sidebar-brand-img {
  transform: scale(1.05);
}

.sidebar-brand-text {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

.sidebar-brand-title {
  font-weight: 800 !important;
  font-size: 13px !important;
  color: #FFFFFF !important;
  letter-spacing: -0.2px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sidebar-brand-sub {
  font-size: 9px !important;
  color: var(--spark-lime) !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Suporte geral a qualquer imagem direta dentro de .sidebar-brand */
.sidebar-brand img {
  max-width: 100% !important;
  height: auto !important;
  max-height: 55px !important;
  object-fit: contain !important;
}

body.sidebar-minimized .sidebar-wrapper {
  padding: 1.25rem 0.5rem !important;
  align-items: center !important;
}

body.sidebar-minimized .sidebar-brand,
.sidebar-wrapper.minimized .sidebar-brand {
  justify-content: center !important;
  padding: 0 !important;
}

body.sidebar-minimized .sidebar-brand-text,
.sidebar-wrapper.minimized .sidebar-brand-text {
  display: none !important;
}

body.sidebar-minimized .sidebar-brand-img,
.sidebar-wrapper.minimized .sidebar-brand-img {
  margin: 0 auto !important;
  height: 32px !important;
  max-width: 32px !important;
}

.logo-header-link {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.logo-header-link:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Bolinha pulsante Ao Vivo */
.status-pulse-dot {
  width: 9px;
  height: 9px;
  background-color: #10B981;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulse-green 1.8s infinite;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Ícone de rotação ao sincronizar */
.spin-active {
  animation: spin-refresh 0.8s linear infinite;
  display: inline-block;
}

@keyframes spin-refresh {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Botões de Seleção de Cargo */
.btn-filtro-cargo {
  font-weight: 600;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 30px;
  transition: all 0.25s ease;
  border: 1px solid var(--spark-border);
}

.btn-filtro-cargo:hover {
  background-color: rgba(7, 47, 31, 0.08);
  color: var(--spark-primary);
  transform: translateY(-1px);
}

.btn-filtro-cargo.btn-spark-active {
  background-color: var(--spark-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--spark-primary) !important;
  box-shadow: 0 4px 14px rgba(7, 47, 31, 0.25);
}

/* Cores Primárias do Design System Spark */
.bg-spark-primary {
  background-color: var(--spark-primary) !important;
}

.text-spark-primary {
  color: var(--spark-primary) !important;
}

.bg-spark-lime {
  background-color: var(--spark-lime) !important;
  color: #072F1F !important;
}

.text-spark-lime {
  color: #79a800 !important;
}

/* ========================================================================
   MAPA DO BRASIL DINÂMICO E ANIMADO (ESTILO CINEMATOGRÁFICO)
   ======================================================================== */

.mapa-arena-container {
  background: radial-gradient(circle at 60% 40%, #0d3b28 0%, #062217 60%, #03140d 100%);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(180, 241, 5, 0.2);
}

/* Grade de fundo tática sutil com animação de pulso */
.mapa-arena-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 32px 32px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  pointer-events: none;
}

/* Barra Superior da Arena (Status Ao Vivo + Seletor Rápido de Estados) */
.arena-header-bar {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 16px;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 5;
}

.arena-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  color: #B4F105;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.arena-live-dot {
  width: 9px;
  height: 9px;
  background-color: #B4F105;
  border-radius: 50%;
  box-shadow: 0 0 10px #B4F105;
  animation: liveDotPulse 1.4s infinite ease-in-out;
}

@keyframes liveDotPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
    box-shadow: 0 0 4px #B4F105;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 14px #B4F105;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.6;
    box-shadow: 0 0 4px #B4F105;
  }
}

/* Seletor Rápido de Estados (Inspirado no #seletorv do CodePen davilotus/pen/KgPGaY) */
.seletor-rapido-uf {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border: 1px solid rgba(180, 241, 5, 0.4);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: all 0.25s ease;
  min-width: 170px;
}

.seletor-rapido-uf:hover,
.seletor-rapido-uf:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: #B4F105;
  box-shadow: 0 0 12px rgba(180, 241, 5, 0.4);
}

.seletor-rapido-uf option {
  background: #072f1f;
  color: #FFFFFF;
}

/* Animação de Entrada do SVG */
@keyframes mapReveal {
  0% {
    opacity: 0;
    transform: scale(0.97);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#svg-mapa-brasil-oficial {
  animation: mapReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: center center;
}

/* Estados do Mapa SVG com Animação Fluida e Alta Definição */
.estado-svg-dinamico {
  cursor: pointer;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.85px;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke 0.25s ease, stroke-width 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
  vector-effect: non-scaling-stroke;
}

/* Cinema Focus Mode: quando um estado está em hover, outros ficam sutilmente atenuados */
.mapa-arena-container.has-hover .estado-svg-dinamico:not(.is-hovered) {
  opacity: 0.45;
  filter: grayscale(30%) brightness(0.85);
}

/* Efeito Hover nos Estados (Glow Neon da Cor do Partido)
   IMPORTANTE: sem transform (scale/translate). Transform desloca a área do mouse,
   dispara mouseleave/mouseenter em ciclo e faz o estado "tremer". */
.estado-svg-dinamico:hover,
.estado-svg-dinamico.is-hovered {
  stroke: #FFFFFF !important;
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 0 16px var(--estado-glow, #B4F105)) brightness(1.25) !important;
  cursor: pointer;
}

/* Estado Ativo/Selecionado (destaque estático, sem animação contínua) */
.estado-svg-dinamico.estado-ativo {
  stroke: #B4F105 !important;
  stroke-width: 3.5px !important;
  filter: drop-shadow(0 0 20px #B4F105) brightness(1.3) !important;
}

/* Badges / Pins Interativos de Estados Pequenos e Capitais */
.pin-estado-badge {
  cursor: pointer;
}

.pin-estado-badge circle.pin-bg {
  stroke: #FFFFFF;
  stroke-width: 1.5px;
  transition: stroke-width 0.2s ease, filter 0.2s ease, stroke 0.2s ease;
}

.pin-estado-badge text.pin-txt {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 800;
  fill: #FFFFFF;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.pin-estado-badge:hover circle.pin-bg,
.pin-estado-badge.is-hovered circle.pin-bg {
  stroke-width: 3px !important;
  stroke: #FFFFFF !important;
  filter: drop-shadow(0 0 12px #B4F105) brightness(1.2) !important;
}

.pin-estado-linha {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1px;
  stroke-dasharray: 2 3;
  pointer-events: none;
}

/* Rótulos dos Estados no SVG */
.rotulo-uf-svg {
  pointer-events: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 800;
  fill: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.7);
  transition: opacity 0.2s ease;
}

/* Pontos de Radar / Capitais Pulsantes */
.ponto-radar-circulo {
  animation: radar-pulse 2.2s infinite ease-out;
  fill: none !important;
  pointer-events: none !important;
}

@keyframes radar-pulse {
  0% {
    r: 2px;
    opacity: 1;
    stroke: #B4F105;
    stroke-width: 1.5px;
  }

  50% {
    r: 6px;
    opacity: 0.6;
    stroke: #B4F105;
    stroke-width: 1px;
  }

  100% {
    r: 9px;
    opacity: 0;
    stroke: transparent;
    stroke-width: 0.2px;
  }
}

/* =========================================================================
   SISTEMA DE ZOOM E CAMADA DE CIDADES INTERATIVA NO MAPA DO BRASIL
   ========================================================================= */

/* Transição fluida do SVG oficial quando o viewBox é atualizado */
#svg-mapa-brasil-oficial {
  transform-origin: center center;
  transition: opacity 0.3s ease;
}

/* Modo Zoom do Estado no Mapa: Mantém todos os estados visíveis com integridade de cores */
.mapa-arena-container.modo-zoom-estado .estado-svg-dinamico:not(.estado-ativo) {
  opacity: 0.85 !important;
  filter: brightness(0.92) !important;
  pointer-events: auto;
  cursor: pointer;
}

.mapa-arena-container.modo-zoom-estado .estado-svg-dinamico.estado-ativo {
  opacity: 1 !important;
  stroke: #FFFFFF !important;
  stroke-width: 2.2px !important;
  filter: drop-shadow(0 0 20px var(--estado-glow, #B4F105)) brightness(1.15) !important;
}

/* Em modo zoom, os pins de outros estados continuam visíveis para navegação */
.mapa-arena-container.modo-zoom-estado #camada-pins-estados {
  opacity: 0.85;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}

.mapa-arena-container.modo-zoom-estado #camada-radares {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Suporte a Pan e Drag no Mapa */
#wrapper-svg-mapa {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

#wrapper-svg-mapa.is-dragging-map {
  cursor: grabbing !important;
}

#wrapper-svg-mapa.is-dragging-map * {
  cursor: grabbing !important;
}

/* Camada das Cidades do Estado */
#camada-cidades-ativas {
  animation: cidadesFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cidadesFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Marcador Individual de Cidade */
.cidade-pin-marker {
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease;
}

.cidade-pin-marker:hover,
.cidade-pin-marker.cidade-hovered {
  filter: drop-shadow(0 0 12px var(--cidade-cor, #B4F105)) brightness(1.35) !important;
}

/* Radar pulse na cor do partido vencedor da cidade */
.cidade-radar-pulse {
  animation: cidadeRadarAnim 2.2s infinite ease-out;
  fill: none;
  pointer-events: none;
}

@keyframes cidadeRadarAnim {
  0% {
    r: 2px;
    opacity: 1;
    stroke-width: 1.5px;
  }
  50% {
    r: 8px;
    opacity: 0.6;
    stroke-width: 1px;
  }
  100% {
    r: 15px;
    opacity: 0;
    stroke-width: 0.2px;
  }
}

/* Círculo do Pin da Cidade */
.cidade-pin-circle {
  transition: r 0.2s ease, stroke-width 0.2s ease, stroke 0.2s ease;
}

.cidade-pin-marker:hover .cidade-pin-circle {
  r: 7px;
  stroke-width: 2.2px;
  stroke: #FFFFFF;
}

/* Rótulo da Cidade com Legibilidade Extrema e Contraste */
.cidade-label-bg {
  fill: rgba(4, 28, 19, 0.88);
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 0.8px;
  rx: 3px;
  ry: 3px;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

.cidade-pin-marker:hover .cidade-label-bg {
  fill: rgba(4, 28, 19, 0.98);
  stroke: var(--cidade-cor, #B4F105);
  stroke-width: 1.2px;
}

.cidade-label-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  fill: #FFFFFF;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.cidade-label-percent {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 6.5px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

/* Controles de Zoom Flutuantes no Canto da Arena */
.mapa-zoom-controls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.btn-zoom-action {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-zoom-action:hover {
  background: var(--spark-lime);
  color: #072F1F;
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(180, 241, 5, 0.6);
}

.btn-zoom-reset {
  background: rgba(180, 241, 5, 0.2);
  color: var(--spark-lime);
}

/* Breadcrumb Interativo sobre a Barra Superior */
.arena-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
}

.arena-breadcrumb-btn {
  background: none;
  border: none;
  color: #FFFFFF;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.arena-breadcrumb-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--spark-lime);
}

.arena-breadcrumb-separator {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
}

.arena-breadcrumb-active {
  color: var(--spark-lime);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Dropdown Seletor de Cidades no Modo Zoom */
.seletor-cidade-uf-zoom {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border: 1px solid rgba(180, 241, 5, 0.5);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  max-width: 170px;
}

.seletor-cidade-uf-zoom:hover,
.seletor-cidade-uf-zoom:focus {
  background: rgba(255, 255, 255, 0.22);
  border-color: #B4F105;
  box-shadow: 0 0 10px rgba(180, 241, 5, 0.5);
}

.seletor-cidade-uf-zoom option {
  background: #072F1F;
  color: #FFFFFF;
}

/* HUD Lateral Dinâmico de Raio-X do Estado */
.hud-raio-x-card {
  background: rgba(7, 47, 31, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(180, 241, 5, 0.3);
  border-radius: 16px;
  color: #FFFFFF;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.hud-raio-x-card:hover {
  border-color: rgba(180, 241, 5, 0.6);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}

.hud-animacao-fade {
  animation: hudSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes hudSlideIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.hud-avatar-lider {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--spark-lime);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.hud-percentual-lider {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
}

/* Botão Chamativo de Exploração com Efeito Shimmer de Brilho */
.btn-explorar-estado {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #B4F105 0%, #8ac003 100%);
  color: #072F1F !important;
  font-weight: 800;
  font-size: 13px;
  border: none;
  padding: 12px 24px;
  border-radius: 30px;
  box-shadow: 0 6px 20px rgba(180, 241, 5, 0.45);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.btn-explorar-estado::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: rotate(30deg);
  animation: btnShimmer 3s infinite ease-in-out;
}

@keyframes btnShimmer {
  0% {
    transform: translateX(-100%) rotate(30deg);
  }

  25%,
  100% {
    transform: translateX(100%) rotate(30deg);
  }
}

.btn-explorar-estado:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(180, 241, 5, 0.6);
  background: linear-gradient(135deg, #c4fa20 0%, #9dd604 100%);
}

/* Tooltip Flutuante Glassmorphism de Alta Fidelidade */
.mapa-tooltip-custom {
  position: absolute;
  z-index: 1040 !important;
  background: rgba(4, 28, 19, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #FFFFFF;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  pointer-events: none !important;
  min-width: 240px;
  font-size: 12px;
  border: 1px solid rgba(180, 241, 5, 0.4);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.mapa-tooltip-custom::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 20px;
  width: 12px;
  height: 6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(4, 28, 19, 0.95);
}

/* Avatares dos Candidatos na Tabela */
.candidato-avatar-wrapper {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  flex-shrink: 0 !important;
}

.candidato-avatar-img {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  border: 2px solid #E9EFEF;
}

.candidato-numero-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background-color: var(--spark-primary);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  border: 1.5px solid #FFFFFF;
}

/* Destaque Top 2 Candidatos com Predomínio Partidário */
.card-candidato-destaque {
  border: 1px solid var(--spark-border);
  border-radius: 14px;
  padding: 22px;
  background: #FFFFFF;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.3s ease;
  position: relative;
  overflow: hidden;
}

.card-candidato-destaque:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.card-candidato-destaque.lider {
  border-left: 6px solid var(--spark-primary);
}

.card-candidato-destaque.segundo {
  border-left: 6px solid var(--spark-lime);
}

.destaque-posicao-badge {
  font-weight: 700;
  letter-spacing: 0.3px;
  font-size: 0.78rem;
  transition: all 0.3s ease;
}

/* Container Seguro e Avatares de Destaque */
.destaque-avatar-container {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border: 3px solid var(--spark-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  background-color: #f8f9fa;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.destaque-avatar-lg,
#destaque-lider-foto,
#destaque-segundo-foto {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  flex-shrink: 0 !important;
  border: 3px solid var(--spark-border);
}

.destaque-avatar-container .destaque-avatar-lg {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  border: none !important;
}

.destaque-percentual {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--spark-primary);
  letter-spacing: -0.5px;
}

/* Badges e Status da Tabela */
.status-candidato-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease-in-out;
}

.status-tag-2t {
  background: #FFF8E1 !important;
  color: #B78103 !important;
  border: 1px solid #FFE082 !important;
  box-shadow: 0 2px 6px rgba(255, 193, 7, 0.22);
}

.status-tag-eleito {
  background: #E8F5E9 !important;
  color: #1B5E20 !important;
  border: 1px solid #A5D6A7 !important;
  box-shadow: 0 2px 6px rgba(46, 125, 50, 0.20);
}

.status-tag-nao-eleito {
  background: #F8F9FA !important;
  color: #6C757D !important;
  border: 1px solid #E9ECEF !important;
}

.status-tag-suplente {
  background: #EDE7F6 !important;
  color: #4527A0 !important;
  border: 1px solid #D1C4E9 !important;
}

/* Caixa Informativa da Arquitetura de Cache */
.cache-info-box {
  background: linear-gradient(135deg, #072F1F 0%, #0d422e 100%);
  color: #FFFFFF;
  border-radius: 14px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.cache-info-box h5 {
  color: var(--spark-lime);
  font-weight: 700;
}

.cache-info-box code {
  background: rgba(255, 255, 255, 0.12);
  color: var(--spark-lime);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* Limite e truncamento de nomes e coligações */
.candidate-name {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coligacao-desc {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Legenda dos Partidos */
.cor-indicador-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.legenda-partido-item {
  transition: transform 0.15s ease;
}

.legenda-partido-item:hover {
  transform: translateY(-2px);
}

/* Cards de Municípios e Zonas */
#modal-detalhes-estado-corpo {
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
}

.card-municipio-item,
.card-zona-item {
  transform: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
  background: #FFFFFF;
}

.card-municipio-item:hover,
.card-zona-item:hover {
  transform: none !important;
  border-color: rgba(7, 47, 31, 0.4) !important;
  box-shadow: 0 6px 18px rgba(7, 47, 31, 0.12) !important;
}

#mapa-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  content: "›";
  font-size: 14px;
  font-weight: bold;
}

/* ========================================================================
   DESTAQUE DE SEGUNDO TURNO (Presidente / Governador)
   ======================================================================== */
.badge-2t-glow {
  background: linear-gradient(135deg, #FF6B00 0%, #FFA800 100%);
  color: #FFFFFF !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 12px;
  margin-left: 6px;
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.6);
  animation: pulse-segundo-turno 2.2s infinite ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}

.badge-segundo-turno-pill {
  background: linear-gradient(135deg, #FF6B00 0%, #E65100 100%);
  color: #FFFFFF !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: auto;
  box-shadow: 0 0 8px rgba(255, 107, 0, 0.5);
  animation: pulse-segundo-turno 2.2s infinite ease-in-out;
}

@keyframes pulse-segundo-turno {
  0% {
    transform: scale(0.96);
    box-shadow: 0 0 4px rgba(255, 107, 0, 0.4);
  }

  50% {
    transform: scale(1.04);
    box-shadow: 0 0 14px rgba(255, 107, 0, 0.85);
  }

  100% {
    transform: scale(0.96);
    box-shadow: 0 0 4px rgba(255, 107, 0, 0.4);
  }
}

.btn-filtro-cargo.tem-segundo-turno {
  border-color: #FF8C00 !important;
  position: relative;
}

.btn-filtro-cargo.tem-segundo-turno:not(.btn-spark-active) {
  background: rgba(255, 140, 0, 0.08) !important;
  color: #D35400 !important;
  border-color: rgba(255, 140, 0, 0.45) !important;
}

.btn-filtro-cargo.tem-segundo-turno:hover {
  background: rgba(255, 140, 0, 0.16) !important;
  border-color: #FF8C00 !important;
  color: #BF360C !important;
}

.sidebar-menu-link.tem-segundo-turno {
  border-left: 3px solid #FF8C00 !important;
}

/* ========================================================================
   MAPA COMPACTO (ampliado em 20%) - PRIMEIRO PLANO
   ======================================================================== */
.mapa-compact-card {
  border-radius: 16px;
  border: 1px solid rgba(7, 47, 31, 0.1) !important;
  background: #FFFFFF;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05) !important;
}

.mapa-compact-card .card-header {
  padding: 10px 18px !important;
  border-bottom: 1px solid #EDF2F2 !important;
}

.mapa-compact-card .card-body {
  padding: 12px 18px 16px 18px !important;
}

.mapa-arena-container-compact,
.mapa-arena-container {
  height: 100% !important;
  min-height: 520px !important;
  max-height: none !important;
  flex: 1 1 auto !important;
}

#wrapper-svg-mapa.compact-svg-box {
  width: 100% !important;
  height: 100% !important;
  min-height: 460px !important;
  max-height: none !important;
  flex: 1 1 auto !important;
}

.hud-raio-x-compact {
  height: auto !important;
  min-height: 220px !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding: 10px !important;
}

.hud-raio-x-compact::-webkit-scrollbar {
  width: 4px;
}

.hud-raio-x-compact::-webkit-scrollbar-thumb {
  background: rgba(180, 241, 5, 0.3);
  border-radius: 4px;
}

/* ========================================================================
   SEÇÃO DUELO VERSUS (1º TURNO / 2º TURNO) - FRENTE A FRENTE
   1º Colocado à Esquerda | Centro (VS + Contagem Regressiva) | 2º Colocado à Direita
   ======================================================================== */
.duelo-versus-container {
  display: grid;
  grid-template-columns: 1fr 340px 1fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 24px;
}

@media (max-width: 991px) {
  .duelo-versus-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.card-duelo-candidato {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  border-radius: 20px;
  border: 2px solid rgba(7, 47, 31, 0.12);
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-duelo-candidato::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--candidato-cor, #B4F105);
}

.card-duelo-candidato:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  border-color: var(--candidato-cor, #B4F105);
}

/* Candidato 1º Colocado (Esquerda) */
.card-duelo-candidato.primeiro-lugar {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 244, 0.95) 100%);
  border-color: rgba(180, 241, 5, 0.5);
}

.card-duelo-candidato.primeiro-lugar .badge-posicao {
  background: #B4F105;
  color: #072F1F;
}

/* Candidato 2º Colocado (Direita) */
.card-duelo-candidato.segundo-lugar {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
}

.card-duelo-candidato.segundo-lugar .badge-posicao {
  background: #64748B;
  color: #FFFFFF;
}

.duelo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.badge-posicao {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 5px 12px;
  border-radius: 20px;
}

.badge-partido-tag {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(7, 47, 31, 0.08);
  color: #072F1F;
}

.duelo-body {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}

.duelo-avatar-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

.duelo-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  background: #E2E8F0;
}

.duelo-avatar-badge-num {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: #072F1F;
  color: #B4F105;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 12px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.duelo-info {
  flex-grow: 1;
}

.duelo-nome {
  font-size: 20px;
  font-weight: 800;
  color: #072F1F;
  margin-bottom: 2px;
  line-height: 1.2;
}

.duelo-vice {
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  margin-bottom: 10px;
}

.duelo-percentual {
  font-size: 38px;
  font-weight: 900;
  color: #072F1F;
  line-height: 1;
  letter-spacing: -1px;
}

.duelo-votos-qtd {
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
  margin-top: 4px;
}

/* Painel Central VS com Cronômetro Regressivo */
.painel-central-versus {
  background: linear-gradient(145deg, #072F1F 0%, #041C13 100%);
  border-radius: 20px;
  padding: 20px 18px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  box-shadow: 0 12px 35px rgba(7, 47, 31, 0.35);
  border: 1px solid rgba(180, 241, 5, 0.3);
}

.painel-central-versus::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(circle at center, rgba(180, 241, 5, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.versus-badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(180, 241, 5, 0.15);
  color: #B4F105;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(180, 241, 5, 0.3);
  margin-bottom: 12px;
}

.versus-badge-status .status-dot {
  width: 7px;
  height: 7px;
  background: #B4F105;
  border-radius: 50%;
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.versus-vs-display {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 16px rgba(180, 241, 5, 0.6);
  margin-bottom: 8px;
}

/* Relógio Digital da Contagem Regressiva para Domingo 25 às 17h */
.cronometro-regressivo-box {
  width: 100%;
  margin-top: 6px;
  margin-bottom: 12px;
}

.cronometro-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #94A3B8;
  margin-bottom: 8px;
}

.cronometro-digitos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.cronometro-unidade {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cronometro-valor {
  font-size: 20px;
  font-weight: 800;
  font-family: 'Courier New', Courier, monospace;
  color: #B4F105;
  line-height: 1;
  text-shadow: 0 0 8px rgba(180, 241, 5, 0.4);
}

.cronometro-rotulo {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94A3B8;
  margin-top: 4px;
}

/* Barra de Confronto Direto */
.barra-confronto-wrap {
  width: 100%;
  margin-top: 10px;
}

.barra-confronto-progresso {
  height: 10px;
  width: 100%;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
}

.barra-candidato-esq {
  height: 100%;
  background: #B4F105;
  transition: width 0.8s ease;
}

.barra-candidato-dir {
  height: 100%;
  background: #0284C7;
  transition: width 0.8s ease;
}

.barra-confronto-legenda {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  color: #94A3B8;
  margin-top: 4px;
}

/* ========================================================================
   MODO TV (TRANSMISSÃO 100% FULLSCREEN)
   ======================================================================== */
.btn-modo-tv {
  background: linear-gradient(135deg, #072F1F 0%, #0D472B 100%);
  color: #B4F105 !important;
  border: 1px solid #B4F105;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 8px 16px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(180, 241, 5, 0.25);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-modo-tv:hover {
  background: #B4F105;
  color: #072F1F !important;
  box-shadow: 0 6px 20px rgba(180, 241, 5, 0.5);
  transform: translateY(-1px);
}

body.modo-tv-ativo {
  overflow: hidden !important;
  background-color: #03130C !important;
}

body.modo-tv-ativo .sidebar-wrapper,
body.modo-tv-ativo .navbar-custom,
body.modo-tv-ativo .footer-custom,
body.modo-tv-ativo .desktop-sidebar,
body.modo-tv-ativo .app-header,
body.modo-tv-ativo .app-footer,
body.modo-tv-ativo .sub-header-container,
body.modo-tv-ativo .container-filtro-eleicao {
  display: none !important;
}

body.modo-tv-ativo .main-wrapper,
body.modo-tv-ativo .app-content {
  margin-left: 0 !important;
  padding: 16px 24px !important;
  max-width: 100vw !important;
  height: 100vh !important;
  overflow-y: auto !important;
}

/* Modo TV: Garantir fundo branco sólido e opaco nos quadros de candidatos abaixo da totalização */
body.modo-tv-ativo .card-candidato-destaque,
body.modo-tv-ativo #card-lider-destaque,
body.modo-tv-ativo #card-segundo-destaque {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
}

body.modo-tv-ativo .card-candidato-destaque.lider,
body.modo-tv-ativo #card-lider-destaque {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0FDF4 100%) !important;
}

body.modo-tv-ativo .card-candidato-destaque.segundo,
body.modo-tv-ativo #card-segundo-destaque {
  background: linear-gradient(135deg, #FFFFFF 0%, #FEF2F2 100%) !important;
}

body.modo-tv-ativo .card-candidato-destaque .text-dark,
body.modo-tv-ativo #card-lider-destaque .text-dark,
body.modo-tv-ativo #card-segundo-destaque .text-dark {
  color: #0F172A !important;
}

body.modo-tv-ativo .card-candidato-destaque .text-muted,
body.modo-tv-ativo #card-lider-destaque .text-muted,
body.modo-tv-ativo #card-segundo-destaque .text-muted {
  color: #64748B !important;
}

body.modo-tv-ativo .card-candidato-destaque .border-top,
body.modo-tv-ativo #card-lider-destaque .border-top,
body.modo-tv-ativo #card-segundo-destaque .border-top {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* Modo TV: Garantir fundo sólido também nos cards de duelo do topo */
body.modo-tv-ativo .card-duelo-candidato,
body.modo-tv-ativo #duelo-card-esq,
body.modo-tv-ativo #duelo-card-dir {
  background-color: #FFFFFF !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45) !important;
}

body.modo-tv-ativo .card-duelo-candidato.primeiro-lugar,
body.modo-tv-ativo #duelo-card-esq {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0FDF4 100%) !important;
  border-color: rgba(180, 241, 5, 0.6) !important;
}

body.modo-tv-ativo .card-duelo-candidato.segundo-lugar,
body.modo-tv-ativo #duelo-card-dir {
  background: linear-gradient(135deg, #FFFFFF 0%, #FEF2F2 100%) !important;
  border-color: rgba(227, 27, 35, 0.4) !important;
}

body.modo-tv-ativo #btn-sair-tv {
  display: flex !important;
}

#btn-sair-tv {
  display: none;
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.75);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

#btn-sair-tv:hover {
  background: #EF4444;
  border-color: #EF4444;
}

/* ========================================================================
   DEMARCAÇÃO TERRITORIAL DE MUNICÍPIOS NO MAPA EM ZOOM (100% DA DIV)
   ======================================================================== */
.mapa-arena-container-100 {
  width: 100% !important;
  height: 720px !important;
  min-height: 720px !important;
  max-height: 720px !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#wrapper-svg-mapa.mapa-full-div {
  width: 100% !important;
  height: 100% !important;
  min-height: 620px !important;
  max-height: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto !important;
}

#wrapper-svg-mapa.mapa-full-div svg {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  max-width: none !important;
  display: block;
}

/* Demarcação Territorial dos Municípios (Polígonos vetoriais oficiais IBGE) */
.camada-municipios-ibge {
  animation: fadeInMalhaMun 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInMalhaMun {
  from { opacity: 0; }
  to { opacity: 1; }
}

.municipio-poligono,
.cidade-demarcacao-poligono {
  cursor: pointer;
  transition: fill 0.18s ease, stroke 0.18s ease, stroke-width 0.18s ease, filter 0.18s ease;
  vector-effect: non-scaling-stroke;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.75px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.municipio-poligono.com-resultado {
  stroke: rgba(255, 255, 255, 0.75);
}

.municipio-poligono:hover,
.municipio-poligono.is-hovered,
.cidade-demarcacao-poligono:hover,
.cidade-demarcacao-poligono.cidade-ativa {
  stroke: #B4F105 !important;
  stroke-width: 2.2px !important;
  stroke-opacity: 1 !important;
  fill-opacity: 1 !important;
  filter: drop-shadow(0 0 10px rgba(180, 241, 5, 0.8)) brightness(1.25) !important;
}

.municipio-poligono.is-focado {
  stroke: #FFFFFF !important;
  stroke-width: 2.8px !important;
  stroke-opacity: 1 !important;
  fill-opacity: 1 !important;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.95)) brightness(1.35) !important;
}

.municipio-rotulo {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  fill: #FFFFFF;
  paint-order: stroke fill;
  stroke: rgba(7, 47, 31, 0.95);
  stroke-linejoin: round;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}

.cidade-demarcacao-label {
  pointer-events: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 6.5px;
  font-weight: 700;
  fill: #FFFFFF;
  text-anchor: middle;
  dominant-baseline: central;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.cidade-demarcacao-sublabel {
  pointer-events: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 5.5px;
  font-weight: 800;
  fill: #B4F105;
  text-anchor: middle;
  dominant-baseline: central;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* ========================================================================
   LAYOUT FOCO TOTAL (SEM MENU LATERAL AO ACESSAR O SITE)
   Foco exclusivo na apuração ao vivo e no duelo 2º Turno
   ======================================================================== */
html,
body.layout-foco-total {
  overflow-x: hidden !important;
  max-width: 100vw;
}

body.layout-foco-total .sidebar-wrapper {
  display: none !important;
}

body.layout-foco-total .main-wrapper {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.layout-foco-total .btn-desktop-toggle,
body.layout-foco-total .sidebar-toggle-btn {
  display: none !important;
}

/* Header Navbar: Estilo padrão fora do foco total */
.navbar-custom {
  position: sticky;
  top: 10px;
  z-index: 1000;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 0.65rem 1.25rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
  border: 1px solid rgba(7, 47, 31, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.navbar-custom .navbar-left {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  min-width: 0;
  flex: 1 1 auto;
}

.navbar-custom .navbar-search-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(7, 47, 31, 0.04);
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(7, 47, 31, 0.08);
  font-size: 11.5px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.navbar-custom .navbar-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  flex: 0 0 auto;
}

/* Seletor Compacto de Cargos (Presidente & Governador 2º Turno) na Navbar */
.navbar-cargos-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(7, 47, 31, 0.05);
  border: 1px solid rgba(7, 47, 31, 0.12);
  padding: 4px 8px;
  border-radius: 30px;
}

.btn-nav-cargo {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  border: none;
  background: transparent;
  color: #072F1F;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-nav-cargo:hover {
  background: rgba(7, 47, 31, 0.08);
}

.btn-nav-cargo.active {
  background: #072F1F;
  color: #B4F105;
  box-shadow: 0 2px 8px rgba(7, 47, 31, 0.25);
}

.btn-nav-cargo .badge-2t {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  background: #B4F105;
  color: #072F1F;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Ampliação da Arena do Mapa Adaptada para Proporção 100% Ampla */
.mapa-arena-container-compact,
.mapa-arena-container {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  flex: 1 1 0 !important;
}

/* Quadro de Detalhes Eleitorais (Estado / Cidade) na Coluna Esquerda (3 cols) */
#coluna-esquerda-candidatos #hud-estado-container {
  border-radius: 10px;
  background: rgba(7, 47, 31, 0.94);
  border: 1px solid rgba(180, 241, 5, 0.35);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
  font-size: 11px;
}

#coluna-esquerda-candidatos #hud-estado-container .hud-percentual-lider {
  font-size: 1.4rem !important;
  font-weight: 800;
}

#coluna-esquerda-candidatos #hud-estado-container .hud-avatar-lider {
  width: 38px !important;
  height: 38px !important;
  border-width: 2px !important;
}

#coluna-esquerda-candidatos #hud-estado-container h4 {
  font-size: 12.5px !important;
}

#wrapper-svg-mapa.compact-svg-box {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  flex: 1 1 0 !important;
}

#wrapper-svg-mapa.compact-svg-box svg {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: contain !important;
}

.hud-raio-x-compact {
  flex: 1 1 0 !important;
  min-height: 80px !important;
  height: auto !important;
  max-height: 100% !important;
  overflow-y: auto !important;
}

/* =========================================================================
   ESTILOS DE TELA COMPACTA (VIEWPORT-FIT / 100% TELA / SEM BARRA DE ROLAGEM)
   ========================================================================= */
html:has(body.layout-foco-total),
body.layout-foco-total {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  box-sizing: border-box !important;
  background-color: #F8FAFC !important;
}

body.layout-foco-total .main-wrapper {
  height: calc(100vh - 8px) !important;
  max-height: calc(100vh - 8px) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Navbar em Linha Única Ultra Compacta (Sem sticky, sem sobreposição) */
body.layout-foco-total .navbar-custom,
body.layout-foco-total .navbar-custom-compact {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 2px 10px !important;
  margin: 0 0 4px 0 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(7, 47, 31, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

body.layout-foco-total .logo-compact-img {
  height: 28px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Grid Central Principal */
body.layout-foco-total #main-grid-row {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: calc(100% - 36px - 26px - 8px) !important;
  height: auto !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  margin-left: -4px !important;
  margin-right: -4px !important;
  display: flex !important;
}

body.layout-foco-total #main-grid-row > [class*="col-"] {
  padding-left: 4px !important;
  padding-right: 4px !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Coluna Esquerda: Candidatos + HUD + Apoio PIX */
body.layout-foco-total #coluna-esquerda-candidatos {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  gap: 2px !important;
  overflow: hidden !important;
}

/* Cards Compactos de Candidatos (Coluna Esquerda) */
body.layout-foco-total .card-cand-compact {
  background: #FFFFFF;
  border-radius: 8px !important;
  border: 1.5px solid #E2E8F0;
  padding: 4px 8px !important;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  flex-shrink: 0 !important;
}

body.layout-foco-total .card-cand-compact.lider-cand {
  border-color: rgba(15, 61, 140, 0.35);
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(15, 61, 140, 0.02) 100%);
}

body.layout-foco-total .card-cand-compact.segundo-cand {
  border-color: rgba(227, 27, 35, 0.35);
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(227, 27, 35, 0.02) 100%);
}

body.layout-foco-total .cand-avatar-compact {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

body.layout-foco-total .cand-numero-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  color: #FFFFFF;
  font-size: 8.5px !important;
  font-weight: 800;
  padding: 0 3px !important;
  border-radius: 4px;
  border: 1px solid #FFFFFF;
}

body.layout-foco-total .cand-perc-big {
  font-size: 15px !important;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1 !important;
}

body.layout-foco-total .cand-votos-sub {
  font-size: 8.5px !important;
  font-weight: 600;
  color: #64748B;
}

body.layout-foco-total .faixa-vs-compact {
  padding: 1px 6px !important;
  background: #F1F5F9;
  border-radius: 6px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 1px 0 !important;
  flex-shrink: 0 !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
}

/* HUD Estado / Cidade (Área Elástica Intermediária) */
body.layout-foco-total #hud-estado-container,
#coluna-esquerda-candidatos #hud-estado-container {
  flex: 1 1 0 !important;
  min-height: 40px !important;
  max-height: 100% !important;
  height: auto !important;
  overflow-y: auto !important;
  margin: 1px 0 !important;
  padding: 3px 6px !important;
}

/* Coluna Direita (9 cols) */
body.layout-foco-total #coluna-direita-mapa-kpis {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  gap: 4px !important;
  overflow: hidden !important;
}

body.layout-foco-total #linha-cards-totalizacao {
  flex-shrink: 0 !important;
  margin-bottom: 2px !important;
}

body.layout-foco-total .stat-card-mini {
  padding: 5px 8px !important;
  border-radius: 8px !important;
}

body.layout-foco-total .stat-card-mini .stat-label-mini {
  font-size: 9px !important;
  margin-bottom: 1px !important;
}

body.layout-foco-total .stat-card-mini .stat-value-mini {
  font-size: 15px !important;
  line-height: 1.1 !important;
}

/* Card do Mapa 100% sem rolagem */
body.layout-foco-total #secao-mapa-brasil {
  flex: 1 1 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
  border-radius: 10px !important;
}

body.layout-foco-total #secao-mapa-brasil .card-header {
  flex-shrink: 0 !important;
  padding: 2px 8px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
}

body.layout-foco-total #secao-mapa-brasil .card-body {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
  padding: 2px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}

body.layout-foco-total #container-mapa-brasil {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}

body.layout-foco-total .mapa-arena-container,
body.layout-foco-total .mapa-arena-container-100,
body.layout-foco-total #wrapper-svg-mapa,
body.layout-foco-total #wrapper-svg-mapa.compact-svg-box,
body.layout-foco-total #wrapper-svg-mapa.mapa-full-div {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}

body.layout-foco-total #wrapper-svg-mapa svg,
body.layout-foco-total #wrapper-svg-mapa.mapa-full-div svg,
body.layout-foco-total #svg-mapa-brasil-oficial {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Footer Super Compacto (Nunca sobrepõe elementos superiores) */
body.layout-foco-total .footer-custom {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  margin-top: 0 !important;
  font-size: 9.5px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(7, 47, 31, 0.06) !important;
  position: relative !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
}

/* CARD DE APOIO PIX (ASAAS) - Compacto e Seguro */
.card-pix-apoio {
  background: linear-gradient(135deg, #072F1F 0%, #0d422e 100%) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  border: 1px solid rgba(180, 241, 5, 0.35) !important;
  padding: 5px 8px !important;
  box-shadow: 0 2px 10px rgba(7, 47, 31, 0.2) !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

.card-pix-apoio::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(180, 241, 5, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.btn-pix-valor {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-weight: 700;
  font-size: 10px;
  padding: 1px 5px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}

.btn-pix-valor:hover,
.btn-pix-valor.active {
  background: #B4F105 !important;
  color: #072F1F !important;
  border-color: #B4F105 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(180, 241, 5, 0.35);
}

/* Input embutido no botão de Outro Valor */
.btn-pix-input-container {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #B4F105;
  border-radius: 6px;
  padding: 0 4px;
  height: 22px;
  box-shadow: 0 0 6px rgba(180, 241, 5, 0.4);
}

.btn-pix-input-container .btn-pix-prefix {
  font-size: 9.5px;
  font-weight: 800;
  color: #072F1F;
  margin-right: 2px;
}

.input-pix-embutido {
  width: 38px;
  height: 18px;
  border: none;
  background: transparent;
  color: #072F1F;
  font-size: 10.5px;
  font-weight: 800;
  font-family: monospace;
  outline: none;
  padding: 0;
}

.input-pix-embutido::-webkit-outer-spin-button,
.input-pix-embutido::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-pix-embutido {
  -moz-appearance: textfield;
}

.btn-pix-gerar-inline {
  background: #B4F105;
  color: #072F1F;
  border: none;
  border-radius: 6px;
  font-weight: 800;
  font-size: 9px;
  padding: 1px 5px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-transform: uppercase;
}

.btn-pix-gerar-inline:hover {
  background: #cbf92a;
  transform: translateY(-1px);
}

.pix-qr-box {
  background: #FFFFFF;
  border-radius: 6px;
  padding: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.pix-copia-cola-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #B4F105;
  font-size: 9px;
  font-family: monospace;
  border-radius: 5px;
  padding: 2px 6px;
  width: 100%;
  height: 20px;
}

.btn-pix-copiar {
  background: #B4F105;
  color: #072F1F;
  border: none;
  border-radius: 5px;
  font-weight: 700;
  font-size: 9.5px;
  padding: 2px 8px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-pix-copiar:hover {
  background: #a2db03;
}

/* Cards de KPIs Compactos (Abaixo do Mapa) */
.stat-card-mini {
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  padding: 8px 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.stat-card-mini .stat-label-mini {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.stat-card-mini .stat-value-mini {
  font-size: 18px;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.1;
}

.stat-card-mini.totalizacao-highlight {
  background: linear-gradient(135deg, #072F1F 0%, #0d422e 100%);
  color: #FFFFFF;
  border: 1px solid rgba(180, 241, 5, 0.3);
}

.stat-card-mini.totalizacao-highlight .stat-label-mini {
  color: #B4F105;
}

.stat-card-mini.totalizacao-highlight .stat-value-mini {
  color: #FFFFFF;
}

/* =========================================================================
   ESCOPO DO MAPA: BRASIL VS EXTERIOR (MUNDO)
   ========================================================================= */
.btn-mapa-escopo {
  color: #64748B;
  border: none;
  background: transparent;
  padding: 1px 8px !important;
  font-size: 9.5px !important;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.btn-mapa-escopo:hover {
  color: #072F1F;
  background: rgba(7, 47, 31, 0.08);
}

.btn-mapa-escopo.active {
  background: #072F1F !important;
  color: #B4F105 !important;
  box-shadow: 0 1px 4px rgba(7, 47, 31, 0.25);
}

/* Interatividade do Mapa Mundi dos Brasileiros no Exterior */
.pais-exterior-dinamico {
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease, fill-opacity 0.2s ease;
}

.pais-exterior-dinamico:hover {
  filter: drop-shadow(0 0 10px #B4F105) brightness(1.25);
  fill-opacity: 1 !important;
  stroke: #B4F105 !important;
  stroke-width: 1.8px !important;
}

.pin-cidade-exterior {
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.pin-cidade-exterior:hover {
  filter: drop-shadow(0 0 8px #B4F105) brightness(1.3);
}

.radar-pulse {
  animation: radarPulseAnim 2.2s infinite ease-out;
  pointer-events: none;
}

@keyframes radarPulseAnim {
  0% { r: 3px; opacity: 1; }
  50% { r: 10px; opacity: 0.5; }
  100% { r: 18px; opacity: 0; }
}