/*! =============================================================================
 *  © 2026 Renzo Núñez · RonBStudio — "Perú Elige 2026 · Segunda Vuelta".
 *  Todos los derechos reservados. Código propietario: queda prohibida su copia,
 *  redistribución, ingeniería inversa o uso no autorizado, total o parcial.
 *  https://www.ronbstudio.com
 * ============================================================================= */
/* =============================================================================
 *  Proyecto      : Perú Elige 2026 — Segunda Vuelta
 *  Archivo       : nav-map.css
 *  Descripción   : Estilos del modo Navegar (PAS-style drill-down).
 *
 *                  v0.1.8.2:
 *                    · Cursors grab/grabbing para indicar pan.
 *                    · Estado is-panning aplicado desde JS durante drag.
 *
 *                  v0.1.8.1:
 *                    · Botón "Atrás" temporal removido.
 *                    · Breadcrumbs overlay arriba-derecha.
 *                    · prefers-reduced-motion respeta también los hover
 *                      del componente breadcrumbs.
 *
 *                  v0.1.8.0 (heredado):
 *                    · Stage overlay encima de .mapa-stage (mismo frame)
 *                    · Polígonos en gris cálido con hover
 *                    · Loading + error overlays
 *
 *                  Convención BEM. Tokens locales referencian tokens.css.
 *                  Cero hex hardcoded.
 *
 *  Autor         : Renzo Núñez · RonBStudio
 *  Versión       : 0.1.13.16
 * ===========================================================================*/

:root {
  /* Tokens locales del modo navegar. */
  --nav-map-feat-fill     : var(--c-mv-border-soft);   /* gris cálido placeholder */
  --nav-map-feat-stroke   : var(--c-mv-ink-soft);
  --nav-map-feat-hover    : var(--c-mv-mostaza);
  --nav-map-bg            : var(--c-mv-bg-card);
  --nav-map-loading-bg    : rgba(26, 22, 18, 0.55);
  --nav-map-loading-fg    : var(--c-mv-ink-on-accent);
  --nav-map-error-bg      : var(--c-mv-cochineal);
  --nav-map-error-fg      : var(--c-mv-ink-on-accent);

  /* v0.1.9.3: paleta divergente del mapa, referenciada a tokens
     `--c-map-heat-*` definidos en tokens.css. NO usar party colors
     directos — la paleta editorial del mapa es distinta de la
     identidad de marca de cada partido. */
  --nav-color-a-alto      : var(--c-map-heat-a-alto);
  --nav-color-a-medio     : var(--c-map-heat-a-medio);
  --nav-color-empate      : var(--c-map-heat-empate);
  --nav-color-b-medio     : var(--c-map-heat-b-medio);
  --nav-color-b-alto      : var(--c-map-heat-b-alto);
  --nav-color-sin-datos   : var(--c-mv-border-soft);
}


/* =============================================================================
 *  Stage (contenedor del modo navegar)
 *
 *  Vive como overlay encima de .mapa-stage. Mismo frame visual: hereda
 *  el rect del padre y se posiciona absoluto. El padre tiene
 *  `position: relative` (asumido — si no, lo agregamos en mapa.css).
 *
 *  v0.1.8.3: cuando NavApp está activo, el .mapa-stage padre recibe la
 *  clase `.is-nav-active`. Las reglas de abajo ocultan el SVG heredado
 *  y su loading para que no haya doble render bajo el overlay (defensa
 *  contra artifacts subpixel y para que el browser no gaste pintando
 *  algo que no se va a ver).
 * ===========================================================================*/

.mapa-stage.is-nav-active > .mapa-stage__svg,
.mapa-stage.is-nav-active > .mapa-stage__loading {
  display: none;
}


.nav-map {
  position: absolute;
  inset: 0;
  /* v0.1.10.3: foco radial atmosférico institucional sobre el fondo
     blanco del overlay. El gradient indigo decae desde top-left hacia
     transparente, dando "respiración" cromática al card del mapa sin
     interferir con la lectura del coroplético. Se aplica acá (no en
     .mapa-stage::before) porque el .nav-map cubre todo el card en
     modo Navegar y antes tapaba cualquier capa de fondo del padre. */
  background:
    radial-gradient(
      ellipse at top left,
      var(--c-mv-mapa-radial-from) 0%,
      var(--c-mv-mapa-radial-mid)  60%,
      transparent 100%
    ),
    var(--nav-map-bg);
  z-index: 5;
  overflow: hidden;

  /* Cursor por default: grab — indica "puedes arrastrar para panear".
     Durante drag activo cambia a grabbing (clase is-panning aplicada
     desde JS). */
  cursor: grab;
}

.nav-map.is-panning {
  cursor: grabbing;
}

.nav-map.is-hidden {
  display: none;
}


/* Mount donde se planta el SVG. Ocupa todo el stage. */
.nav-map__mount {
  position: absolute;
  inset: 0;
}


/* =============================================================================
 *  SVG
 * ===========================================================================*/

.nav-map__svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* =============================================================================
 *  Features (polígonos)
 * ===========================================================================*/

/* v0.1.9.2: CRITICAL — el atributo fill SVG (presentation attribute)
   tiene MENOR precedencia que CSS rules. Si declaramos `fill` aquí, el
   browser ignora el setAttribute('fill', '#c8302a') que aplica el
   renderer dinámicamente y muestra siempre este valor. Por eso NO
   declaramos fill aquí — el renderer asume control total via attribute.
   El default gris se aplica desde JS en _mount cuando no hay datos. */
/* v0.1.9.4: stroke más grueso y con contraste para que los bordes entre
   regiones colindantes del MISMO bucket de color se sigan viendo
   claramente. 0.5px se perdía cuando dos regiones adyacentes caían en el
   mismo bucket — parecían una sola. 1.2px con color ink puro garantiza
   separación visible incluso en ese caso. */
.nav-map__feat {
  stroke:         var(--c-mv-ink);
  stroke-width:   1.2;
  stroke-opacity: 0.55;
  vector-effect:  non-scaling-stroke;
  cursor:         pointer;
  /* v0.1.15.48: transición suave (ease-out, SIN overshoot — el rebote se sentía
     "brusco") para un lift animado agradable como en 1V. */
  transition:     stroke-width 160ms ease, filter 200ms ease,
                  transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  /* escala relativa a la bounding box del path (no al origen del SVG) — sin
     esto el scale en hover "volaría" la región. */
  transform-box:    fill-box;
  transform-origin: center;
  outline:          none;
}

/* v0.1.9.0: hover ya NO cambia fill — sobreescribir el bucket de color
   sería contraproducente. En su lugar, engrosamos el borde y aplicamos
   un brillo leve. Comunica "interactivo" sin tapar el dato. */
.nav-map__feat:hover,
.nav-map__feat:focus-visible {
  stroke-width: 1.5;
  stroke:       var(--c-mv-ink);
  filter:       brightness(1.08);
}

/* v0.1.15.48 — Efecto "pieza de rompecabezas": SOLO con puntero real (mouse),
   la región bajo el cursor se ELEVA (scale + sombra de profundidad). nav-app
   la sube al frente para que sobresalga sobre las vecinas. En touch no aplica
   (un tap no debe levantar piezas) y el tap-drill sigue intacto. */
@media (hover: hover) and (pointer: fine) {
  .nav-map__feat:hover,
  .nav-map__feat:focus-visible {
    /* lift 3D: la pieza se DESPLAZA hacia arriba (sale de su lugar) + crece, y
       proyecta una sombra DESPLAZADA hacia abajo → sensación de flotar sobre el
       tablero, no solo de agrandarse. translateY en % (relativo a la bbox del
       path vía transform-box:fill-box) para que sea consistente con el zoom. */
    transform:    translateY(-5%) scale(1.05);
    stroke:       #ffffff;
    stroke-width: 2;
    filter:       drop-shadow(2px 6px 6px rgba(15, 23, 42, 0.42)) brightness(1.06);
  }
}

/* Durante pan, no queremos cursor pointer sobre features — queremos
   grabbing en todo el área. Y nada de elevación (evita jank al arrastrar). */
.nav-map.is-panning .nav-map__feat {
  cursor:    inherit;
  transform: none !important;
  filter:    none !important;
}


/* =============================================================================
 *  Filtro de mesas 900K (v0.1.15.49) — toggle segmentado arriba-izquierda +
 *  chip de resumen nacional abajo-centro. Overlays flotantes sobre el mapa.
 * ===========================================================================*/
.nav-map__filter900k {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 11;
  display: inline-flex;
  gap: 1px;
  padding: 2px;
  border-radius: 999px;
  background: var(--c-mv-bg-card, #ffffff);
  border: 1px solid var(--c-mv-card-border, rgba(15, 23, 42, 0.10));
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.14);
  font-family: 'Inter', system-ui, sans-serif;
}
.nav-map__filter900k-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-mv-ink-muted, #64748b);
  transition: background 140ms ease, color 140ms ease;
}
.nav-map__filter900k-btn:hover { color: var(--c-mv-ink, #1e293b); }
.nav-map__filter900k-btn.is-active {
  background: #1f3a5f;
  color: #ffffff;
}

/* v0.1.16: SLIDER DE TIEMPO. En histórico el filtro 900K se deshabilita (no hay
   900K por-depto histórico): se atenúa y deja de responder a clicks. */
.nav-map__filter900k--disabled {
  opacity: 0.45;
  filter: grayscale(0.4);
  pointer-events: none;
}

.nav-map__filter900k-chip {
  position: absolute;
  bottom: var(--sp-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  display: none;
  max-width: calc(100% - var(--sp-3) * 2);
  padding: 5px 13px;
  border-radius: 999px;
  background: #1f3a5f;
  color: #ffffff;
  font: 600 11.5px 'Inter', system-ui, sans-serif;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.nav-map__filter900k-chip.is-visible { display: block; }

@media (max-width: 768px) {
  .nav-map__filter900k-btn { padding: 4px 9px; font-size: 11px; }
  .nav-map__filter900k-chip { font-size: 10.5px; padding: 4px 10px; }
}


/* =============================================================================
 *  Breadcrumbs mount + componente (v0.1.8.1)
 *
 *  Overlay arriba-derecha del stage, opuesto al switcher (que vive
 *  arriba-izquierda). En mobile cae debajo del switcher en una línea
 *  propia.
 *
 *  El componente NavBreadcrumbs inserta dentro del mount un <ol> con
 *  <li> alternados (.crumb) y separadores (.sep).
 * ===========================================================================*/

.nav-map__bc-mount {
  position: absolute;
  top:    var(--sp-3);
  right:  var(--sp-3);
  z-index: 10;

  max-width: calc(100% - var(--sp-3) * 2);
}


/* Bloque del componente NavBreadcrumbs. */
.nav-bc {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--c-mv-bg-card);
  border: 1px solid var(--c-mv-border-soft);
  box-shadow: 0 1px 3px rgba(26, 22, 18, 0.06);

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-mv-ink-muted);

  /* Sin selección de texto accidental al hacer doble-click. */
  user-select: none;
}

.nav-bc.is-hidden {
  display: none;
}


.nav-bc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.nav-bc__crumb {
  display: inline-flex;
  align-items: center;
}

.nav-bc__crumb.is-current {
  color: var(--c-mv-ink);
  font-weight: 700;
}

.nav-bc__crumb__btn {
  appearance: none;
  background: transparent;
  border: none;
  padding: 2px 4px;
  margin: 0;
  font: inherit;
  color: var(--c-mv-ink-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: color 120ms ease, background-color 120ms ease;
}

.nav-bc__crumb__btn:hover,
.nav-bc__crumb__btn:focus-visible {
  color: var(--c-mv-ink);
  background: var(--c-mv-bg-overlay);
  outline: none;
}

.nav-bc__sep {
  color: var(--c-mv-ink-soft);
  font-weight: 400;
  margin: 0 2px;
  /* La fuente principal puede no tener el char ›; fallback a system. */
  font-family: var(--ff-sans, system-ui, sans-serif);
}


/* ===========================================================================
 *  Breadcrumbs en mobile (v0.1.13.2)
 *
 *  Renzo: "Mételos como parte de los elementos del mapa si es necesario,
 *  igual estará anclado arriba, y que parezcan botones, no letras
 *  clickeables."
 *
 *  HISTORIAL:
 *    · v0.1.12.2 intentó position absolute con top calc + sombra. Renzo
 *      reportó que se siguen viendo "como en la misma posición de siempre".
 *
 *  FIX REAL:
 *    Ahora que .nav-map es relative (no overlay absolute) en mobile,
 *    el .nav-map__bc-mount entra al flujo natural arriba del mount del
 *    SVG. position: static (default) + width 100% + padding + bg sólido
 *    = visualmente parece un "toolbar" del mapa, no un texto flotante.
 *
 *    Diseño: barra superior crema con el chip del breadcrumb centrado.
 *    El switcher de niveles (también overlay absolute) sigue arriba
 *    pero ahora encima de la toolbar, no del SVG.
 * ===========================================================================*/

@media (max-width: 768px) {
  /* v0.1.13.4: bc-mount ahora vive como hijo del .mapa-stage (no del
     .nav-map). nav-app.js lo inserta ahí en mobile via matchMedia.

     v0.1.13.5 — Refinamiento (Renzo):
       · Toolbar mucho más delgada (consumía mucha pantalla)
       · Colores por nivel (país/dpto/provincia/distrito) usando
         data-level que nav-breadcrumbs.js asigna al render. */
  /* v0.1.15.40 (Renzo en S23): "la línea es mucho más ancha que los botones,
     se pierde espacio... y sigue con el fondo blanco que se ve básico".
     SOLUCIÓN: el breadcrumb deja de ser una BANDA en el flujo (que reservaba
     una franja propia con fondo) y pasa a FLOTAR sobre el mapa como overlay.
     El mapa ocupa toda la tarjeta (sin top:34px) y las cápsulas —que ya tienen
     su propio fondo sólido— se leen encima. Sin fondo de banda → sin "bloque
     blanco". `pointer-events: none` en el mount deja pasar los gestos del mapa
     en las zonas vacías; solo los botones capturan el toque. */
  /* v0.1.15.51: el breadcrumb se ANCLA A LA DERECHA y deja libre la izquierda
     para el toggle de mesas 900K — antes ambos iban centrados/izquierda y se
     solapaban al estar drilleado. */
  .nav-map__bc-mount {
    position: absolute;
    top: var(--sp-3);
    left: auto;
    right: var(--sp-2);
    width: auto;
    max-width: calc(100% - 230px);   /* espacio para el toggle "Mesas 900K" + gap */
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    text-align: right;
    margin-top: 0;
    z-index: 12;
    pointer-events: none;
  }
  /* Solo los elementos interactivos capturan el toque; el resto pasa al mapa. */
  .nav-map__bc-mount .nav-bc__back,
  .nav-map__bc-mount .nav-bc__crumb__btn {
    pointer-events: auto;
  }
  .nav-bc {
    /* v0.1.13.15: contenedor TRANSPARENTE. Antes era una pill larga
       blanca que englobaba todo, dando la sensación de "un solo botón
       texto encerrado". Ahora cada crumb es un botón pill independiente
       con su color, y el contenedor solo agrupa visualmente. */
    font-size: 11px;
    padding: 0;
    min-height: 24px;
    background: transparent;
    border: none;
    box-shadow: none;
    font-weight: 600;
    color: var(--c-mv-ink);
  }
  .nav-bc__list {
    /* Reset del list para que los crumbs queden alineados con gap.
       v0.1.15.51: alineados a la DERECHA (el breadcrumb vive a la derecha). */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* v0.1.15.40: el mapa LLENA SIEMPRE la tarjeta. Ya no se reserva una franja
     para el breadcrumb porque ahora flota encima (overlay). Esto elimina el
     strip superior en país Y el espacio desperdiciado al estar drilleado. */
  .nav-map {
    top: 0 !important;
    inset: 0;
  }

  /* Botón "atrás" del breadcrumb. v0.1.13.5: más compacto. */
  .nav-bc__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 6px;
    border-radius: 50%;
    border: 1px solid var(--c-mv-border);
    background: var(--c-mv-bg-card);
    color: var(--c-mv-ink);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    line-height: 1;
    /* v0.1.15.40: flota sobre el mapa → sombra para despegarlo del fondo. */
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.20);
  }
  .nav-bc__back:hover,
  .nav-bc__back:active {
    /* v0.1.15.37: navy neutral en vez de mostaza (color de candidato). */
    background: #1f3a5f;
    color: #ffffff;
    border-color: #1f3a5f;
  }

  /* v0.1.13.15 — Cada crumb es un botón pill independiente.
     Antes los crumbs eran solo TEXTO con color por nivel dentro de
     una pill larga. Renzo: "parecen texto encerrado en un solo
     botón largo". Ahora cada uno tiene su propio fondo + border.

     IMPORTANTE: NO usar `currentColor` para el background mientras se
     reescribe `color` en la misma regla — ambas declaraciones se
     resuelven con el valor FINAL del color, lo cual hace que background
     y color queden iguales (texto invisible). Los colores se declaran
     EXPLÍCITAMENTE por data-level más abajo. */

  /* Botón clickeable (niveles anteriores en la jerarquía).
     Layout base — color y borde se definen por data-level. */
  .nav-bc__crumb__btn {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid;
    background: var(--c-mv-bg-card);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    transition: background 120ms ease, color 120ms ease;
    /* v0.1.15.40: flota sobre el mapa → sombra para legibilidad. */
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.20);
  }

  /* Crumb actual (nivel donde estás parado). Pill SÓLIDA con el color
     del nivel y texto blanco. Layout base — el background se define
     por data-level más abajo. No clickeable. */
  .nav-bc__crumb.is-current {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    /* v0.1.15.40: flota sobre el mapa → sombra para legibilidad. */
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.20);
  }

  /* Separador "›" — sin background, gris sutil, solo orienta. */
  .nav-bc__sep {
    color: var(--c-mv-ink);
    font-weight: 700;
    padding: 0 2px;
    opacity: 0.85;
    /* v0.1.15.40: flota sobre el mapa → halo claro para que no se pierda
       sobre regiones de color oscuro. */
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.7);
  }

  /* v0.1.15.37: colores por nivel NEUTRALES a la elección. Antes usaban
     mostaza (#b8762a) y rojo cochineal (#a13228) que se leían como los colores
     de los candidatos (Keiko naranja / Sánchez rojo) → tendenciosos. Ahora una
     progresión fría azul-pizarra (de navy a gris azulado conforme se profundiza),
     sin ningún matiz cálido/partidario:
       0 = País        → navy profundo  (#1f3a5f)
       1 = Departamento→ azul acero     (#355f86)
       2 = Provincia   → pizarra        (#5f7c97)
       3 = Distrito    → gris azulado   (#7d8a99)
     Crumbs CLICKEABLES: color + borde del nivel sobre fondo claro (outlined).
     Crumb ACTUAL (.is-current): background sólido del nivel + texto blanco. */
  .nav-bc__crumb[data-level="0"] .nav-bc__crumb__btn {
    color: #1f3a5f; border-color: #1f3a5f;
  }
  .nav-bc__crumb[data-level="1"] .nav-bc__crumb__btn {
    color: #355f86; border-color: #355f86;
  }
  .nav-bc__crumb[data-level="2"] .nav-bc__crumb__btn {
    color: #4f6c87; border-color: #5f7c97;
  }
  .nav-bc__crumb[data-level="3"] .nav-bc__crumb__btn {
    color: #5d6b7a; border-color: #7d8a99;
  }
  .nav-bc__crumb[data-level="0"].is-current { background: #1f3a5f; }
  .nav-bc__crumb[data-level="1"].is-current { background: #355f86; }
  .nav-bc__crumb[data-level="2"].is-current { background: #5f7c97; }
  .nav-bc__crumb[data-level="3"].is-current { background: #7d8a99; }

  /* Hover/active: el botón se "rellena" con su color del nivel y el
     texto pasa a blanco. */
  .nav-bc__crumb[data-level="0"] .nav-bc__crumb__btn:hover,
  .nav-bc__crumb[data-level="0"] .nav-bc__crumb__btn:active { background: #1f3a5f; color: #ffffff; }
  .nav-bc__crumb[data-level="1"] .nav-bc__crumb__btn:hover,
  .nav-bc__crumb[data-level="1"] .nav-bc__crumb__btn:active { background: #355f86; color: #ffffff; }
  .nav-bc__crumb[data-level="2"] .nav-bc__crumb__btn:hover,
  .nav-bc__crumb[data-level="2"] .nav-bc__crumb__btn:active { background: #5f7c97; color: #ffffff; }
  .nav-bc__crumb[data-level="3"] .nav-bc__crumb__btn:hover,
  .nav-bc__crumb[data-level="3"] .nav-bc__crumb__btn:active { background: #7d8a99; color: #ffffff; }

  /* v0.1.13.10: touch-action: none aplicado al .nav-map (overlay del SVG),
     NO al .mapa-stage entero como en v0.1.13.7.

     Razón (Renzo): el switcher y el breadcrumb deben permitir scroll
     vertical de la página al arrastrarlos. Son la "manija de escape"
     para salir del scroll del mapa en pantallas pequeñas — sin esto,
     el usuario podía quedar atrapado en gestos del mapa.

     Ahora:
       · .mapa-stage           → touch-action: auto (heredado, permite scroll)
       · .mapa-stage__switcher → permite scroll vertical de la página
       · .nav-map__bc-mount    → permite scroll vertical de la página
       · .nav-map (SVG)        → touch-action: none → todos los gestos llegan
                                  a map-pinch-zoom.js (pinch, pan 1-dedo,
                                  doble-tap reset)
     map-pinch-zoom.js cambió su STAGE_SELECTOR de '#mapa-stage' a '.nav-map'
     para que el listener viva donde debe. */
  .nav-map {
    touch-action: none;
  }
}


/* ===========================================================================
 *  Tooltip de hover — desactivado en touch (v0.1.12.0)
 *
 *  En dispositivos touch, un tap dispara mouseenter brevemente antes
 *  del click. Eso hacía que el tooltip apareciera medio segundo justo
 *  cuando el usuario está intentando drillar, generando "ruido visual"
 *  y posibles tap perdidos sobre el tooltip. Decisión 4 de Renzo:
 *  el tooltip solo aplica donde hay hover real (cursor de mouse).
 *  En touch desaparece completamente — el tap directo drillea sin
 *  feedback intermedio (es lo natural en mobile).
 *
 *  Selector `(hover: none)` cubre 100% de dispositivos touch puros
 *  (iOS, Android sin trackpad). Pantallas con touch+mouse (Surface)
 *  caen en `(hover: hover)` y mantienen tooltip.
 * ===========================================================================*/

@media (hover: none) {
  .nav-map__tooltip {
    display: none !important;
  }
}


/* ===========================================================================
 *  Altura del mapa en mobile (v0.1.13.3 — vuelta atrás de v0.1.13.2)
 *
 *  HISTORIAL:
 *    · v0.1.12.0: bajé --mapa-stage-min-height en ≤480. No suficiente.
 *    · v0.1.12.2: extendí a ≤768 + max-height 65vh. No suficiente.
 *    · v0.1.13.1: aspect-ratio: auto + .mapa-stage__svg height: auto.
 *      Estaba tocando el SVG equivocado.
 *    · v0.1.13.2: saqué .nav-map del overlay absolute. ROMPÍ TODO —
 *      el JS del nav-renderer calculó viewBox con dimensiones erróneas
 *      del nav-map colapsado, resultando en viewBox 458×100 (debería
 *      ser 587×599). El mapa de Perú se renderizaba achatado/roto.
 *
 *  v0.1.13.3 — Approach correcto:
 *    Mantener .nav-map como overlay absolute + inset: 0 (igual que
 *    desktop) PORQUE el JS calcula el viewBox basándose en las
 *    dimensiones del contenedor. La limitación de altura se hace
 *    EN EL PADRE (.mapa-stage en mapa.css con `height: max(320px,
 *    45vh)`), no acá.
 *
 *    Resultado: .nav-map llena el .mapa-stage (que ya está bounded a
 *    320px-45vh), el SVG calcula viewBox proporcional a ese contenedor,
 *    el mapa se renderiza correcto y sin área muerta.
 * ===========================================================================*/

/* (Sin reglas mobile aquí — todo el control de altura del mapa vive
   en mapa.css. Esta sección queda como documentación histórica del
   approach correcto.) */


/* =============================================================================
 *  Loading overlay
 *
 *  Aparece cuando el store dispara loading=true. Texto centrado sobre un
 *  velo semitransparente. No bloquea click si quisiera (pointer-events:none),
 *  pero como cargas son cortas es preferible que sí bloquee para evitar
 *  drills durante una carga en curso.
 * ===========================================================================*/

.nav-map__loading {
  position: absolute;
  inset: 0;
  z-index: 20;

  display: none;
  align-items: center;
  justify-content: center;

  background: var(--nav-map-loading-bg);
  color:      var(--nav-map-loading-fg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
}

.nav-map.is-loading .nav-map__loading {
  display: flex;
}


/* =============================================================================
 *  Error toast
 * ===========================================================================*/

.nav-map__error {
  position: absolute;
  bottom: var(--sp-4);
  left:   50%;
  transform: translateX(-50%);
  z-index: 30;

  display: none;

  max-width: 90%;
  padding: 8px 14px;
  border-radius: 6px;

  background: var(--nav-map-error-bg);
  color:      var(--nav-map-error-fg);
  font-family: inherit;
  font-size: 13px;
  box-shadow: 0 2px 10px rgba(176, 58, 46, 0.4);
}

.nav-map__error.is-visible {
  display: block;
}


/* =============================================================================
 *  Accesibilidad: prefers-reduced-motion
 * ===========================================================================*/

@media (prefers-reduced-motion: reduce) {
  .nav-map__feat,
  .nav-bc__crumb__btn {
    transition: none;
  }
}


/* =============================================================================
 *  Globo del Exterior (v0.1.9.3)
 *  Overlay UI clickeable que vive en el SVG pero fuera del grupo zoomable.
 *  Solo aparece cuando el nivel actual es país. Representa los votos de
 *  peruanos en el exterior — ONPE los reporta como circunscripción aparte.
 * ===========================================================================*/

.nav-map__exterior {
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
  transform-box: fill-box;
  transform-origin: center;
  outline: none;
}

.nav-map__exterior:hover,
.nav-map__exterior:focus-visible {
  filter: brightness(1.08);
}

/* =============================================================================
 *  Globo Exterior — v0.1.9.9
 *
 *  Rediseño premium: bubble azul sólido (no más índigo translúcido), stroke
 *  blanco para destaque sobre fondo claro, drop-shadow azul + slate para
 *  elevación. Posicionamiento y dimensiones (r, cx, cy) los maneja
 *  nav-renderer.js — acá solo el aspecto cromático.
 * ===========================================================================*/

.nav-map__exterior-bubble {
  fill:         var(--c-globe-fill);
  stroke:       var(--c-globe-stroke);
  stroke-width: 1.5;
  /* Filtro multi-capa: sombra azul tinted + sombra slate oscura para
     dar la sensación de "objeto flotante con foco propio". */
  filter:
    drop-shadow(0 4px 12px var(--c-globe-shadow-1))
    drop-shadow(0 1px 3px var(--c-globe-shadow-2));
}

.nav-map__exterior-icon {
  stroke:         var(--c-globe-icon-stroke);
  stroke-width:   1.4;
  fill:           none;
  stroke-linecap: round;
}

.nav-map__exterior-label {
  fill:         var(--c-mv-ink-muted);
  font-family:  inherit;
  font-size:    11px;
  font-weight:  700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  user-select:  none;
  pointer-events: none;
}

/* v0.1.13.8: en mobile, el globo Exterior es 50% más chico para no
   competir con el mapa principal. La label "EXTERIOR" también se
   reduce proporcionalmente. */
@media (max-width: 768px) {
  .nav-map__exterior {
    transform: scale(0.5);
    transform-box: fill-box;
    transform-origin: center;
  }
  .nav-map__exterior-label {
    font-size: 9px;
  }
}


/* =============================================================================
 *  Regiones contexto (v0.1.9.4) — regiones colindantes mostradas
 *  atenuadas y sin fill para dar referencia geográfica al hacer zoom
 *  a un nivel inferior. No interactivas.
 * ===========================================================================*/

.nav-map__context {
  fill:           var(--c-mv-bg-overlay);
  stroke:         var(--c-mv-ink);
  stroke-width:   0.8;
  stroke-opacity: 0.30;
  vector-effect:  non-scaling-stroke;
  /* v0.1.9.7: clickeable para navegar a la zona hermana. El click hace
     goToLevel(padre) + drillInto(feature) — el usuario salta de la rama
     actual del árbol a la rama hermana al mismo nivel. */
  cursor:         pointer;
  outline:        none;
  transition:     stroke-opacity 140ms ease, fill 140ms ease;
}

.nav-map__context:hover,
.nav-map__context:focus-visible {
  fill:           var(--c-mv-bg-overlay-strong);
  stroke-opacity: 0.70;
}


/* =============================================================================
 *  Tooltip de hover (v0.1.11.2)
 *
 *  Pequeño rectángulo HTML que aparece al pasar el mouse sobre una
 *  región del mapa. Muestra solo el nombre. Funciona también sobre
 *  regiones de contexto (atenuadas) — útil para reconocer la región
 *  vecina antes de clickearla.
 *
 *  Implementado como <div> HTML dentro del container del mapa (no
 *  como SVG element) para tener tipografía y sombras CSS normales
 *  sin <foreignObject>. El container del mapa debe ser position:
 *  relative (ya lo es vía .mapa-stage).
 *
 *  Posicionamiento: el JS aplica `transform: translate(x, y)` con
 *  offset relativo al cursor. El CSS solo provee la apariencia.
 *  El transform es independiente del transition de opacidad para
 *  evitar lag visual al mover el mouse rápido.
 * ===========================================================================*/

.nav-map__tooltip {
  /* Posicionamiento: absoluto dentro del container; el transform
     que setea JS define la posición concreta cerca del cursor. */
  position:       absolute;
  left:           0;
  top:            0;
  pointer-events: none;            /* nunca capturar mouse */
  z-index:        20;              /* sobre el SVG */

  /* Apariencia editorial sobria — coherente con cards mapa/detalle.
     Fondo blanco, borde y sombra indigo institucional sutiles. */
  background:     var(--c-mv-bg-card);
  color:          var(--c-mv-ink);
  border:         1px solid rgba(31, 58, 95, 0.15);
  border-radius:  6px;
  padding:        6px 10px;

  /* Tipografía: Inter 12px medium. Lo suficientemente legible sin
     competir con el contenido principal del panel. */
  font-family:    var(--font-sans, system-ui, sans-serif);
  font-size:      12px;
  font-weight:    500;
  line-height:    1.2;
  letter-spacing: 0.005em;
  white-space:    nowrap;

  /* Sombra premium coherente con --c-card-shadow (más sutil). */
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.10),
    0 1px 2px rgba(15, 23, 42, 0.08);

  /* Aparece/desaparece con fade. El transform (posición) NO se
     anima — se actualiza directo con cada mousemove sin lag. */
  opacity:        0;
  transition:     opacity 140ms ease;
}

.nav-map__tooltip.is-visible {
  opacity: 1;
}

/* Accesibilidad: ocultarlo siempre con prefers-reduced-motion solo
   si el usuario explícitamente lo quiere. El tooltip es información,
   no decoración, así que por defecto se sigue mostrando. */