/*! =============================================================================
 *  © 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       : nivel-switcher.css
 *  Descripción   : Segmented control para cambiar el nivel geográfico del
 *                  mapa. v0.1.6.2: 4 botones (Navegar / Departamento /
 *                  Provincia / Distrito), montado como overlay DENTRO del
 *                  mapa-stage en su esquina superior izquierda.
 *
 *                  Comportamiento del switcher (acordado con Renzo):
 *                    Breadcrumb — el botón activo refleja el nivel en el
 *                    que estás navegando ahora. Al hacer click en una
 *                    entidad del mapa el nivel avanza automáticamente al
 *                    siguiente.
 *
 *                  El botón "Navegar" es el modo por defecto. Su lógica
 *                  exacta queda pendiente de definir; visualmente se trata
 *                  igual que los demás (mutuamente exclusivos).
 *
 *  Autor         : Renzo Núñez · RonBStudio
 *  Versión       : 0.1.14.5
 *
 *  v0.1.14.5 cambios:
 *    · Eliminado el botón "Departamento" (redundante con Navegar).
 *      Switcher queda con 3 opciones: Navegar / Provincia / Distrito.
 *    · Estilo del botón activo diferenciado por nivel:
 *        - Navegar:   indigo institucional (--c-mv-indigo) — modo neutro
 *        - Provincia: naranja medio (--c-map-heat-a-medio) — calor
 *        - Distrito:  naranja profundo (--c-map-heat-a-alto) — más calor
 *      Esta gradación cromatica refleja visualmente lo que el usuario
 *      verá en el mapa al elegir cada opción (mapa heredado en modo
 *      "mapa de calor puro" sin etiquetas, desde v0.1.14.5).
 * ===========================================================================*/

/* ---------------------------------------------------------------------------
 *  Wrapper del switcher en su rol de overlay del mapa.
 *  Lo posicionamos absoluto en la esquina superior del .mapa-stage.
 *  El propio switcher (.nivel-switcher) hereda el sizing.
 * -------------------------------------------------------------------------*/

.mapa-stage__switcher {
  position: absolute;
  top:  var(--sp-3);
  left: var(--sp-3);
  /* Sobre el SVG del mapa pero debajo del header sticky.
     v0.1.14.0: subido de 5 a 11 porque el .nav-map (modo Navegar)
     también usa z-index: 5 y se monta DESPUÉS en el DOM, lo que
     hacía que tapara al switcher en desktop (donde el nav-map ocupa
     todo el card). Con 11 quedamos por encima del nav-map (5),
     breadcrumbs (10) y de cualquier overlay del modo Navegar. */
  z-index: 11;
}

/* ---------------------------------------------------------------------------
 *  Componente switcher en sí
 * -------------------------------------------------------------------------*/

.nivel-switcher {
  display: inline-flex;
  gap: 0;
  padding: 3px;
  background: var(--c-mv-bg-card);
  border: 1px solid var(--c-mv-border-soft);
  border-radius: var(--radius-pill);
  /* Sombra un poco más marcada porque ahora flota sobre el mapa. */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.nivel-switcher__btn {
  background: transparent;
  border: none;
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-mv-ink-soft);
  cursor: pointer;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition:
    background var(--duration-default) ease,
    color      var(--duration-default) ease;
}
.nivel-switcher__btn:hover {
  color: var(--c-mv-ink);
}

/* ---------------------------------------------------------------------------
 *  Estado activo por nivel (v0.1.14.5)
 *
 *  Cada botón activo toma un color que refleja el modo:
 *    · Navegar:   indigo institucional. Es el modo "principal/feature"
 *                con etiquetas de %; semanticamente neutro.
 *    · Provincia: naranja medio del mapa de calor. Indica que al
 *                elegirlo el mapa se pinta con esta intensidad.
 *    · Distrito:  naranja profundo del mapa de calor. Más intenso para
 *                evocar la granularidad más fina del coropleta.
 *
 *  Los colores vienen de tokens.css (paletas --c-mv-indigo y --c-map-heat-*),
 *  no se introducen hex nuevos. La sombra ring aporta dimension subtle.
 * -------------------------------------------------------------------------*/

.nivel-switcher__btn.is-active {
  /* Fallback genérico si por algún flujo aparece otro nivel activo. */
  background: var(--c-mv-ink);
  color: var(--c-mv-ink-on-accent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.nivel-switcher__btn.is-active[data-nivel="navegar"] {
  background: var(--c-mv-indigo);
  color: var(--c-mv-ink-on-accent);
  box-shadow: 0 1px 3px rgba(31, 58, 95, 0.30);
}

.nivel-switcher__btn.is-active[data-nivel="provincia"] {
  background: var(--c-map-heat-a-medio);
  color: var(--c-mv-ink-on-accent);
  box-shadow: 0 1px 3px rgba(245, 117, 31, 0.32);
}

.nivel-switcher__btn.is-active[data-nivel="distrito"] {
  background: var(--c-map-heat-a-alto);
  color: var(--c-mv-ink-on-accent);
  box-shadow: 0 1px 3px rgba(200, 71, 14, 0.34);
}

/* ---------------------------------------------------------------------------
 *  Responsive  (v0.1.12.0 — consolidado de 540 → 480 para unificar
 *  breakpoints; las pantallas 481-540 ya pintaban bien con las reglas
 *  desktop, no necesitaban override.)
 *  En móvil bajamos el padding de los botones para que los 4 quepan
 *  sin scroll horizontal, y subimos el min-height a 36px para touch
 *  target más cómodo (todavía bajo el ideal de 44px porque son 4
 *  botones en una fila, pero significativamente mejor que el default).
 * -------------------------------------------------------------------------*/

@media (max-width: 768px) {
  /* v0.1.13.5: switcher mucho más delgado (Renzo: "come mucha pantalla").
     padding 4px 12px → 2px 10px, font 12 → 10, min-height 24 → 22.
     v0.1.15.4: font 10 → 11 por legibilidad mínima en móvil. */
  .nivel-switcher__btn {
    position: relative;       /* ancla del área táctil ampliada (::after) */
    padding: 2px 10px;
    font-size: 11px;
    min-height: 22px;         /* alto VISUAL delgado: decisión "come mucha pantalla" */
  }
  /* v0.1.15.4: área táctil invisible de 44px (mínimo iOS/Android) SIN engordar
     el control. El pseudo-elemento no pinta nada; solo amplía la zona que
     captura el tap a 44px de alto centrados sobre el botón, respetando el
     alto visual delgado. Los ::after de botones contiguos se ladean en
     horizontal (left/right:0 dentro de cada botón) sin solaparse entre sí. */
  .nivel-switcher__btn::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }
  .mapa-stage__switcher {
    top: 6px;
  }
}

@media (max-width: 480px) {
  .mapa-stage__switcher {
    top:    6px;
    left:   var(--sp-2);
    right:  var(--sp-2);
    /* Ocupa el ancho completo cuando hay poco espacio. */
  }
  .nivel-switcher {
    width: 100%;
    justify-content: space-between;
  }
  .nivel-switcher__btn {
    /* v0.1.13.5: compactado en mobile chico también.
       v0.1.15.4: font 9 → 11px por legibilidad (área táctil 44px heredada
       del ::after definido en el breakpoint 768px). */
    padding: 2px 8px;
    font-size: 11px;
    flex: 1;
    text-align: center;
    min-height: 22px;
  }
}