/* ============================================================
   PATAGONIA LACUSTRE · MAPA DE LA CUENCA
   Estilos de /js/mapa-cuenca.v1.js. Carga DESPUÉS de leaflet.css:
   varias reglas de acá pisan las de Leaflet (popup, atribución,
   controles) para que el mapa no se vea como cualquier mapa.

   PALETA
   El brief traía una paleta de agua profunda propia (#08161C / #0E2831
   / #5FD0D6) «si no hay tokens definidos». Sí los hay: la landing tiene
   su paleta teal/dorado en tema-app.v2.css, así que los tokens del
   componente se derivan de ahí y no de valores sueltos. El extremo
   oscuro de la marca (#060F0E / #0D2322) ya ES agua profunda, y el teal
   claro #67C0BE está a un grado del turquesa glaciar propuesto. Para
   volver a la paleta del brief basta cambiar el bloque de tokens de
   abajo: nada más en el archivo lleva un hex de fondo.

   Nombre versionado: firebase.json cachea CSS como immutable por un
   año. Para cambiar esto, crear v2 y actualizar el <link>.
   ============================================================ */

.mapa-cuenca {
    /* --- tokens del componente, derivados de la paleta de marca --- */
    --mc-fondo:     var(--color-negro);            /* #060F0E */
    --mc-panel:     var(--color-sepia-profundo);   /* #0D2322 */
    --mc-acento:    var(--color-bosque-claro);     /* #67C0BE */
    --mc-oro:       var(--color-dorado);           /* #D99A2B */
    --mc-texto:     var(--color-crema);            /* #FAF0D6 — 14:1 sobre el panel */
    --mc-texto-2:   #9BB3B6;                       /* 7.4:1 sobre el panel  ✅ AA */
    --mc-borde:     rgba(103, 192, 190, 0.20);
    --mc-borde-2:   rgba(103, 192, 190, 0.34);
    --mc-alto:      clamp(360px, 62vh, 620px);

    width: var(--container);
    margin: 0 auto;
    background: var(--mc-panel);
    border: 1px solid var(--mc-borde);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(21, 59, 56, 0.18);
    color: var(--mc-texto);
    font-family: var(--font-body);
}

.mapa-cuenca[hidden] { display: none; }

/* ---------- cabecera y pestañas ---------- */
.mapa-cuenca__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--mc-borde);
}

.mapa-cuenca__titulo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    font-feature-settings: "ss01", "ss02";
    color: var(--mc-texto);
    margin: 0 0 0.35rem;
}

.mapa-cuenca__bajada {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--mc-texto-2);
    max-width: 46ch;
}

.mapa-cuenca__pestanas {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgba(6, 15, 14, 0.6);
    border: 1px solid var(--mc-borde);
    border-radius: 50px;
}

.mapa-cuenca__pestana {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--mc-texto-2);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.55rem 1.1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.mapa-cuenca__pestana:hover { color: var(--mc-texto); }

/* Foco de teclado en toda la UI del componente. Va con :focus-visible
   para que no aparezca en el clic con mouse, y con el teal claro que
   pasa 7.7:1 sobre el panel. */
.mapa-cuenca__pestana:focus-visible,
.mapa-cuenca__volcan-btn:focus-visible,
.mapa-cuenca__encuadre:focus-visible {
    outline: 3px solid var(--mc-acento);
    outline-offset: 2px;
}

.mapa-cuenca__pestana[aria-selected="true"] {
    background: var(--color-bosque);
    color: var(--color-blanco);
}

/* ---------- cuerpo: lienzo + panel ---------- */
.mapa-cuenca__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
}

.mapa-cuenca__lienzo {
    height: var(--mc-alto);
    background: var(--mc-fondo);
    border-right: 1px solid var(--mc-borde);
}

.mapa-cuenca__panel {
    height: var(--mc-alto);
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: var(--mc-panel);
}

.mapa-cuenca__bloque-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mc-acento);
    margin: 0 0 0.85rem;
}

/* ---------- toggles de capa ---------- */
.mapa-cuenca__toggles {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.mapa-cuenca__toggle {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s var(--ease);
}

.mapa-cuenca__toggle:hover { background: rgba(103, 192, 190, 0.08); }

/* El input real se mantiene en el DOM y enfocable: sólo se saca de
   vista. Sin esto no hay teclado ni lectores de pantalla. */
.mapa-cuenca__toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.mapa-cuenca__toggle-marca {
    flex: 0 0 auto;
    width: 34px;
    height: 19px;
    border-radius: 50px;
    background: rgba(6, 15, 14, 0.85);
    border: 1px solid var(--mc-borde-2);
    position: relative;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.mapa-cuenca__toggle-marca::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--mc-texto-2);
    transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

.mapa-cuenca__toggle input:checked + .mapa-cuenca__toggle-marca {
    background: var(--color-bosque);
    border-color: var(--color-bosque);
}

.mapa-cuenca__toggle input:checked + .mapa-cuenca__toggle-marca::after {
    transform: translateX(15px);
    background: var(--color-blanco);
}

/* El input está fuera de vista: el anillo de foco tiene que pintarlo
   la pastilla, o navegar con Tab por las capas queda a ciegas. */
.mapa-cuenca__toggle input:focus-visible + .mapa-cuenca__toggle-marca {
    outline: 3px solid var(--mc-acento);
    outline-offset: 3px;
}

.mapa-cuenca__toggle-texto {
    font-size: 0.92rem;
    color: var(--mc-texto);
}

/* ---------- volcanes en el panel ---------- */
.mapa-cuenca__volcanes {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
}

.mapa-cuenca__volcan-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 4px;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background 0.3s var(--ease);
}

.mapa-cuenca__volcan-btn:hover { background: rgba(103, 192, 190, 0.10); }

.mapa-cuenca__volcan-nombre {
    flex: 1 1 auto;
    font-size: 0.9rem;
    color: var(--mc-texto);
}

.mapa-cuenca__volcan-nivel {
    flex: 0 0 auto;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mc-texto-2);
}

.mapa-cuenca__encuadre {
    appearance: none;
    width: 100%;
    background: transparent;
    color: var(--mc-acento);
    border: 1px solid var(--mc-borde-2);
    border-radius: 50px;
    padding: 0.55rem 1rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.mapa-cuenca__encuadre:hover {
    background: var(--color-bosque);
    color: var(--color-blanco);
    border-color: var(--color-bosque);
}

/* ---------- leyenda del semáforo ---------- */
.mapa-cuenca__leyenda-titulo {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mc-texto-2);
    margin: 1.25rem 0 0.6rem;
}

.mapa-cuenca__leyenda {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mapa-cuenca__leyenda-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    color: var(--mc-texto);
}

/* Punto de color del semáforo: es UI funcional, no decoración, y por eso
   todos los tonos pasan 3:1 sobre el panel (el más justo es la roja,
   3.6:1). El texto que lo acompaña nunca depende del color. */
.mapa-cuenca__punto {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(6, 15, 14, 0.55);
}

/* ---------- notas ---------- */
.mapa-cuenca__nota {
    margin: 0.85rem 0 0;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--mc-texto-2);
}

.mapa-cuenca__nota strong { color: var(--mc-texto); font-weight: 600; }
.mapa-cuenca__nota[hidden] { display: none; }

/* ---------- bloque de Kimche ---------- */
.mapa-cuenca__bloque--kimche {
    margin-top: auto;
    padding: 1rem;
    background: rgba(6, 15, 14, 0.5);
    border: 1px solid var(--mc-borde);
    border-left: 2px solid var(--mc-oro);
    border-radius: 4px;
}

.mapa-cuenca__kimche-marca {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mc-oro);
}

.mapa-cuenca__kimche-texto {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: -0.01em;
    font-feature-settings: "ss01", "ss02";
    color: var(--color-dorado-claro);   /* #F5DAAC — 12:1 sobre el fondo del bloque */
    font-style: italic;
}

/* ============================================================
   MARCADORES DEL MAPA
   ============================================================ */

/* Flechas de viento: apuntan a donde VA el aire. La rotación la calcula
   el JS con la dirección real; acá sólo se aplica. */
.mc-flecha-icono { background: none; border: 0; }

.mc-flecha {
    display: block;
    width: 24px;
    height: 32px;
    transform: rotate(var(--mc-rot, 0deg)) scale(var(--mc-esc, 1));
    transform-origin: 50% 50%;
    opacity: 0.85;
    filter: drop-shadow(0 1px 2px rgba(6, 15, 14, 0.9));
    animation: mc-latido 3.2s var(--ease) infinite;
}

.mc-flecha svg { display: block; }
.mc-flecha svg path:first-child {
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    fill: none;
}
.mc-flecha svg path:last-child { fill: currentColor; }

@keyframes mc-latido {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 0.95; }
}

/* Estación: el único punto donde el dato se midió de verdad. */
.mc-estacion-icono { background: none; border: 0; }

.mc-estacion {
    display: block;
    position: relative;
    width: 18px;
    height: 18px;
}

.mc-estacion__punto,
.mc-estacion__pulso {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.mc-estacion__punto {
    inset: 4px;
    background: var(--mc-color, #67C0BE);
    border: 2px solid rgba(250, 240, 214, 0.9);
    box-shadow: 0 1px 4px rgba(6, 15, 14, 0.9);
}

.mc-estacion__pulso {
    background: var(--mc-color, #67C0BE);
    opacity: 0.35;
    animation: mc-pulso 2.4s var(--ease) infinite;
}

@keyframes mc-pulso {
    0%   { transform: scale(0.6); opacity: 0.45; }
    70%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* Volcanes: triángulo con el color del semáforo + nombre siempre visible.
   El nombre no se esconde tras un hover: en teléfono no hay hover. */
.mc-volcan-icono { background: none; border: 0; }

.mc-volcan {
    display: block;
    position: relative;
    color: var(--mc-color, #8A9A9C);
}

.mc-volcan svg {
    display: block;
    fill: currentColor;
    stroke: rgba(250, 240, 214, 0.85);
    stroke-width: 1.4;
    filter: drop-shadow(0 2px 4px rgba(6, 15, 14, 0.95));
}

.mc-volcan__nombre {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 3px;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-crema);
    background: rgba(6, 15, 14, 0.78);
    border-radius: 3px;
    padding: 1px 5px;
}

.mc-sismo {
    stroke: var(--color-dorado);
    fill: var(--color-dorado);
}

/* ============================================================
   LEAFLET: ajustes de tema
   ============================================================ */
.mapa-cuenca .leaflet-container {
    background: var(--mc-fondo);
    font-family: var(--font-body);
    outline-offset: -3px;
}

/* Foco de teclado visible: el contenedor de Leaflet es enfocable y se
   pilotea con las flechas. Sin esto no se ve dónde está el foco. */
.mapa-cuenca .leaflet-container:focus-visible {
    outline: 3px solid var(--mc-acento);
}

.mapa-cuenca .leaflet-bar a,
.mapa-cuenca .leaflet-bar a:hover {
    background: var(--mc-panel);
    color: var(--mc-texto);
    border-bottom-color: var(--mc-borde);
}

.mapa-cuenca .leaflet-bar a:hover { background: var(--color-bosque); }
.mapa-cuenca .leaflet-bar { border: 1px solid var(--mc-borde-2); }

.mapa-cuenca .leaflet-bar a:focus-visible {
    outline: 3px solid var(--mc-acento);
    outline-offset: 1px;
}

.mapa-cuenca .leaflet-control-attribution {
    background: rgba(6, 15, 14, 0.78);
    color: var(--mc-texto-2);
    font-size: 0.68rem;
    padding: 2px 7px;
}

.mapa-cuenca .leaflet-control-attribution a { color: var(--mc-acento); }

.mapa-cuenca .leaflet-popup-content-wrapper,
.mapa-cuenca .leaflet-popup-tip {
    background: var(--mc-panel);
    color: var(--mc-texto);
    border: 1px solid var(--mc-borde-2);
    box-shadow: 0 12px 36px rgba(6, 15, 14, 0.6);
}

.mapa-cuenca .leaflet-popup-content-wrapper { border-radius: 4px; }

.mapa-cuenca .leaflet-popup-content {
    margin: 0.85rem 1rem;
    font-size: 0.86rem;
    line-height: 1.55;
}

.mapa-cuenca .leaflet-popup-close-button { color: var(--mc-texto-2) !important; }

.mc-popup__titulo {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    font-feature-settings: "ss01", "ss02";
    color: var(--mc-texto);
    margin-bottom: 0.3rem;
}

.mc-popup__linea {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--mc-texto);
}

.mc-popup__pie {
    display: block;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--mc-borde);
    font-size: 0.72rem;
    color: var(--mc-texto-2);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .mapa-cuenca {
        --mc-alto: clamp(300px, 52vh, 420px);
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        width: 100%;
    }

    .mapa-cuenca__cabecera {
        align-items: flex-start;
        padding: 1.25rem 1rem 1rem;
    }

    .mapa-cuenca__pestanas { width: 100%; }
    .mapa-cuenca__pestana { flex: 1 1 auto; text-align: center; }

    .mapa-cuenca__cuerpo { grid-template-columns: minmax(0, 1fr); }

    .mapa-cuenca__lienzo {
        border-right: 0;
        border-bottom: 1px solid var(--mc-borde);
    }

    /* En teléfono el panel deja de ser columna con scroll propio: se
       apila bajo el mapa y crece con su contenido. Dos áreas de scroll
       anidadas en una pantalla chica es una trampa. */
    .mapa-cuenca__panel {
        height: auto;
        overflow: visible;
        padding: 1.25rem 1rem;
    }

    .mapa-cuenca__bloque--kimche { margin-top: 0; }
}

@media (max-width: 480px) {
    .mapa-cuenca__pestana { font-size: 0.78rem; padding: 0.5rem 0.6rem; }
    .mc-volcan__nombre { font-size: 0.6rem; }
}

/* ============================================================
   MOVIMIENTO REDUCIDO — innegociable en este repo
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .mc-flecha,
    .mc-estacion__pulso {
        animation: none;
    }
    .mc-flecha { opacity: 0.85; }
    .mc-estacion__pulso { opacity: 0.3; }

    .mapa-cuenca__pestana,
    .mapa-cuenca__toggle,
    .mapa-cuenca__toggle-marca,
    .mapa-cuenca__toggle-marca::after,
    .mapa-cuenca__volcan-btn,
    .mapa-cuenca__encuadre {
        transition: none;
    }
}