/*! =============================================================================
 *  © 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       : mapa.css
 *  Descripción   : Estilos del módulo mapa distrital (vista nacional con
 *                  los 1892 distritos coloreados según margen Keiko vs
 *                  Sánchez normalizado).
 *
 *                  La escala de color usa data-tier en cada path SVG; los
 *                  colores reales se aplican vía atributo selector. El
 *                  módulo JS NO conoce los colores: solo asigna data-tier.
 *                  Esto mantiene la paleta como tokens de diseño.
 *
 *                  v0.1.14.6: nueva convención de buckets, ver bloque de
 *                  changelog más abajo y los selectores [data-tier="..."]
 *                  al final del archivo.
 *
 *  Autor         : Renzo Núñez · RonBStudio
 *  Versión       : 0.1.14.6
 *
 *  v0.1.14.6 — HOMOLOGACIÓN total con el modo Navegar (Opción A):
 *    Antes teníamos 9 tiers (keiko-arrasa..pedro-arrasa) con tints
 *    desaturados intermedios que NO matcheaban la paleta editorial
 *    --c-map-heat-*. Ahora son 5 buckets con las MISMAS keys, MISMOS
 *    umbrales y MISMOS colores que NavColorScale del modo Navegar.
 *    Un distrito con margen Keiko +35pp se pinta idéntico en ambos
 *    mapas: ambos consultan --c-map-heat-a-alto.
 *
 *    Convención de buckets (umbrales coordinados con escala-margen.js):
 *      A_alto   → Keiko ≥ +20pp     → --c-map-heat-a-alto  (#c8470e)
 *      A_medio  → Keiko +5..+20pp   → --c-map-heat-a-medio (#f5751f)
 *      empate   → ±5pp              → --c-map-heat-empate  (#fa9a55)
 *      B_medio  → Pedro +5..+20pp   → --c-map-heat-b-medio (#d12e28)
 *      B_alto   → Pedro ≥ +20pp     → --c-map-heat-b-alto  (#861a16)
 *      sin_datos→ sin info          → --c-mv-border-soft   (gris frío)
 *
 *    Los tokens viven en tokens.css. Tocarlos afecta ambos mapas.
 * ===========================================================================*/


/* ---------------------------------------------------------------------------
 *  TOKENS LOCALES DEL MÓDULO
 *  Definimos solo los tokens específicos del mapa. Los globales (paleta,
 *  spacing, fonts) vienen de tokens.css.
 * -------------------------------------------------------------------------*/

:root {
  /* v0.1.14.6: tokens locales del módulo. Mapean buckets a los tokens
     editoriales --c-map-heat-* compartidos con el modo Navegar.
     Cualquier ajuste cromático se hace en tokens.css y afecta ambos
     mapas en sincronía. */
  --c-mapa-a-alto    : var(--c-map-heat-a-alto);    /* Keiko ≥ +20    */
  --c-mapa-a-medio   : var(--c-map-heat-a-medio);   /* Keiko +5..+20  */
  --c-mapa-empate    : var(--c-map-heat-empate);    /* ±5pp           */
  --c-mapa-b-medio   : var(--c-map-heat-b-medio);   /* Pedro +5..+20  */
  --c-mapa-b-alto    : var(--c-map-heat-b-alto);    /* Pedro ≥ +20    */
  --c-mapa-sin-data  : var(--c-mv-border-soft);     /* gris frío slate */

  /* Trazo de los polígonos */
  --c-mapa-stroke        : #fbf8ee;                    /* mismo que bg-card */
  --mapa-stroke-width    : 0.4px;
  --mapa-stroke-hover    : 1.5px;
  --c-mapa-stroke-hover  : var(--c-mv-ink);

  /* Selección */
  --mapa-stroke-selected : 2px;
  --c-mapa-stroke-sel    : var(--c-mv-ink);

  /* Sección */
  --mapa-section-padding-y : var(--sp-7);
  --mapa-stage-min-height  : 600px;
  --mapa-aspect            : 9 / 12;          /* Perú es alto (norte-sur) */
}


/* ---------------------------------------------------------------------------
 *  SECCIÓN MAPA — layout general
 * -------------------------------------------------------------------------*/

.mapa-section {
  /* v0.1.6.2: padding-y reducido (antes usaba el token; lo overrideamos
     localmente para mantener el resto del proyecto sin cambios). */
  padding: var(--sp-3) var(--container-padding) var(--sp-4);
  max-width: var(--container-max);
  margin: 0 auto;
}

.mapa-section__header {
  margin-bottom: var(--sp-5);
}

.mapa-section__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-mv-ink-soft);
  margin-bottom: var(--sp-2);
}

.mapa-section__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  color: var(--c-mv-ink);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-3);
}

.mapa-section__subtitle {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--c-mv-ink-muted);
  max-width: 60ch;
  line-height: 1.55;
}


/* ---------------------------------------------------------------------------
 *  LAYOUT INTERNO: stage + panel
 *  En desktop: mapa a la izquierda (60%), panel a la derecha (40%).
 *  En mobile: stack vertical.
 * -------------------------------------------------------------------------*/

.mapa-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}

@media (min-width: 900px) {
  .mapa-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--sp-6);
  }
}


/* ---------------------------------------------------------------------------
 *  STAGE: contenedor del SVG del mapa
 * -------------------------------------------------------------------------*/

.mapa-stage {
  /* v0.1.11.0: bordes más redondeados (14px) y sombra premium unificada
     con el card del detalle (--c-card-shadow). Los dos cards dialogan
     como pareja, ya no como elementos disjuntos. */
  position: relative;
  background: var(--c-mv-bg-card);
  border: 1px solid var(--c-mv-border-soft);
  border-radius: var(--c-card-radius);
  box-shadow: var(--c-card-shadow);
  min-height: var(--mapa-stage-min-height);
  aspect-ratio: var(--mapa-aspect);
  overflow: hidden;
}

/* v0.1.13.1 — Mobile: eliminar el aspect-ratio fijo del contenedor.
   En desktop el 9/12 (--mapa-aspect) coincide con Perú entero a nivel
   nacional, pero al drillear a Lima/Lima Met/Callao/etc el viewBox del
   SVG cambia y el contenedor queda con altura proporcional al aspect
   fijo, no al SVG real. Resultado: espacio blanco arriba/abajo del SVG.

   v0.1.13.2: causa raíz REAL del área muerta — `--mapa-stage-min-height`
   se define en mapa.css :root como 600px, y mi override en tokens.css
   :root @media perdía por orden de cascada (mapa.css se carga después).
   Solución: override DIRECTO sobre `.mapa-stage` con height fijo
   responsivo `max(320px, 45vh)`, anula min-height/aspect-ratio.
   Resultado: en mobile típico (800px viewport) → mapa ~360px, sin
   padding vertical, SVG llena el alto. Puede quedar padding LATERAL
   menor (el SVG es casi cuadrado y el contenedor es más ancho), pero
   eso es preferible al área muerta vertical que el usuario reportaba. */
@media (max-width: 768px) {
  .mapa-stage {
    /* v0.1.13.5: altura +20% del valor de v0.1.13.2.
       max(320px, 45vh) → max(385px, 54vh).
       Más espacio vertical para que el mapa respire y se vean mejor
       los detalles de regiones drilleadas. */
    display: flex;
    flex-direction: column;
    height: max(385px, 54vh);
    min-height: 0;
    aspect-ratio: auto;
  }
  .mapa-stage__svg {
    height: 100%;
    width: 100%;
  }
}

/* v0.1.10.3: el foco radial atmosférico del card del mapa se aplicó
   originalmente como ::before del .mapa-stage (v0.1.10.2), pero en
   modo Navegar el overlay `.nav-map` (z-index: 5, background blanco
   opaco) tapaba el pseudo-elemento. El foco se aplica directamente al
   .nav-map en nav-map.css. */

.mapa-stage__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mapa-stage__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--c-mv-ink-soft);
  background: var(--c-mv-bg-card);
  pointer-events: none;
  transition: opacity var(--duration-default) var(--easing-standard);
}

.mapa-stage__loading.is-hidden {
  opacity: 0;
}


/* ---------------------------------------------------------------------------
 *  POLÍGONOS DISTRITALES — escala bicolor por margen
 * -------------------------------------------------------------------------*/

.mapa-distrito {
  stroke: var(--c-mapa-stroke);
  stroke-width: var(--mapa-stroke-width);
  stroke-linejoin: round;
  cursor: pointer;
  transition: stroke-width var(--duration-fast) var(--easing-standard);
}

.mapa-distrito[data-tier="A_alto"]    { fill: var(--c-mapa-a-alto);   }
.mapa-distrito[data-tier="A_medio"]   { fill: var(--c-mapa-a-medio);  }
.mapa-distrito[data-tier="empate"]    { fill: var(--c-mapa-empate);   }
.mapa-distrito[data-tier="B_medio"]   { fill: var(--c-mapa-b-medio);  }
.mapa-distrito[data-tier="B_alto"]    { fill: var(--c-mapa-b-alto);   }
.mapa-distrito[data-tier="sin_datos"] { fill: var(--c-mapa-sin-data); }

/* Hover: borde resaltado, sin cambiar fill */
.mapa-distrito:hover {
  stroke: var(--c-mapa-stroke-hover);
  stroke-width: var(--mapa-stroke-hover);
}

/* Seleccionado: borde más grueso y persistente */
.mapa-distrito.is-selected {
  stroke: var(--c-mapa-stroke-sel);
  stroke-width: var(--mapa-stroke-selected);
}


/* ---------------------------------------------------------------------------
 *  TOOLTIP (sigue al mouse al hacer hover)
 * -------------------------------------------------------------------------*/

.mapa-tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--c-mv-ink);
  color: var(--c-mv-ink-on-accent);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.4;
  box-shadow: var(--shadow-md);
  max-width: 280px;
  z-index: 100;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-standard);
}

.mapa-tooltip.is-visible {
  opacity: 1;
}

.mapa-tooltip__title {
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-1);
}

.mapa-tooltip__location {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-party-fp-tint);
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mapa-tooltip__hint {
  font-size: var(--fs-xs);
  color: var(--c-mv-ink-soft);
  margin-top: var(--sp-2);
  font-style: italic;
}


/* ---------------------------------------------------------------------------
 *  LEYENDA: escala de colores
 * -------------------------------------------------------------------------*/

.mapa-leyenda {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-mv-bg-card);
  border: 1px solid var(--c-mv-border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-mv-ink-muted);
}

.mapa-leyenda__label {
  font-weight: var(--fw-semibold);
  color: var(--c-mv-ink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: var(--sp-2);
}

.mapa-leyenda__scale {
  display: flex;
  align-items: center;
  gap: 1px;
}

.mapa-leyenda__step {
  width: 24px;
  height: 14px;
}

.mapa-leyenda__caption {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.mapa-leyenda__caption-edge {
  font-weight: var(--fw-medium);
}