/* ============================================================
   PATAGONIA LACUSTRE · MAZO DE RIBERAS SOBRE OSCURO
   PRUEBA DE FUEGO DEL REDISEÑO NEÓN — v3 (14-ago-2026)
   ============================================================

   QUÉ ES ESTO
   La prueba barata antes de comprometer el rediseño completo: convertir
   SOLO el bloque de riberas (#riberas en /clima) al lenguaje de mazo
   sobre fondo oscuro.

   CAMBIO DE v3 — EL QUE HACÍA FALTA
   `overflow: visible` en el panel. `clima.v2.css` le pone
   `overflow: hidden` a .lago-panel, y eso RECORTA los pseudo-elementos
   al borde de la caja: las láminas se dibujaban y se cortaban justo
   donde tenían que asomar. Verificado con getComputedStyle sobre el
   sitio en producción, no deducido.

   Historia del mismo bug, para no repetirlo: en v1 la causa era
   `isolation: isolate` (contexto de apilamiento propio → las láminas con
   z-index negativo quedaban detrás del fondo opaco del panel). Se sacó
   en v2 y seguía sin verse, porque había una SEGUNDA causa encima. Dos
   propiedades distintas, el mismo síntoma.

   >>> REGLA: un mazo hecho con ::before/::after desplazados necesita
   >>> TRES cosas — sin isolation, sin overflow hidden, z-index negativo.
   >>> Si falta una, el abanico existe en el DOM y no se ve.

   CAMBIOS DE v2 (se mantienen)
   - Grilla de minmax(232px) a minmax(320px): con 232 entraban CUATRO
     columnas en escritorio y cada ribera quedaba apretada.
   - min-height en el nombre para alinear barras cuando un nombre parte
     en dos líneas ("Puerto Norte Isla Huapi").
   - Mapa y carpeta unidos en una sola losa: esquinas enfrentadas
     cuadradas, sin separación.
   - #clima-consejo:empty escondido (franja crema fantasma bajo el mazo).

   CÓMO SE REVIERTE
   Se borra el <link> de este archivo y el <script> de
   /js/riberas-neon.v1.js en clima.html. Nada más: este archivo no
   reemplaza reglas de clima.v2.css, las gana por especificidad (#riberas),
   sin un solo !important.

   ORDEN DE CARGA — OBLIGATORIO
   Va DESPUÉS de /css/clima.v2.css.

   DE DÓNDE SALE EL COLOR
   Los colores de estado (barra, cifra de metros, puntos del mapa) NO
   están acá: vienen inline desde PL_CLIMA.ESTADOS, que
   /js/riberas-neon.v1.js reemplaza por la rampa fosforescente. Este
   archivo pone fondo, forma y tipografía; el JS pone el color del dato.
   ============================================================ */

#riberas {
    --noche-fondo:      #071615;
    --noche-lamina:     #0C201E;
    --noche-tarjeta:    #0F2725;
    --noche-borde:      rgba(93, 231, 214, 0.16);
    --noche-borde-vivo: rgba(93, 231, 214, 0.42);
    --noche-texto:      #F2EFE6;
    --noche-tenue:      #8FB3B0;
    --noche-apagado:    #6E9491;
    --noche-cian:       #5DE7D6;
}

#riberas .clima-seccion__titulo {
    margin-bottom: 0.4rem;
}

/* ===== EL MAPA: TAPA DE LA CARPETA ===== */
#riberas .clima-mapa {
    background: var(--noche-fondo);
    border: 1px solid var(--noche-borde);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    padding: clamp(0.75rem, 2vw, 1.15rem);
    margin-bottom: 0;
}

#riberas .clima-mapa__etiqueta {
    fill: var(--noche-tenue);
}

#riberas .clima-mapa__leyenda {
    color: var(--noche-tenue);
    border-top: 1px solid var(--noche-borde);
    padding-top: 0.7rem;
    margin-top: 0.5rem;
}

/* ===== LA CARPETA =====
   Tres condiciones para que el abanico se vea, y las tres tienen que
   cumplirse a la vez: overflow visible, sin isolation, láminas en
   z-index negativo. Ver cabecera. */
#riberas .lago-panel {
    position: relative;
    overflow: visible;
    background: var(--noche-fondo);
    border: 1px solid var(--noche-borde);
    border-radius: 0 0 18px 18px;
    padding: clamp(1.15rem, 3vw, 1.75rem);
    color: var(--noche-texto);
    box-shadow: none;
}

#riberas .lago-panel::before,
#riberas .lago-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 0 0 18px 18px;
    background: var(--noche-lamina);
    border: 1px solid rgba(93, 231, 214, 0.10);
}

#riberas .lago-panel::before {
    transform: translate(9px, 9px) rotate(0.5deg);
}

#riberas .lago-panel::after {
    transform: translate(18px, 17px) rotate(1.1deg);
    opacity: 0.55;
}

/* En pantalla angosta el abanico se sale de la caja: se achica el
   desfase. El body ya tiene overflow-x oculto, así que no genera scroll
   horizontal, pero un desfase grande en teléfono se ve descuidado. */
@media (max-width: 620px) {
    #riberas .lago-panel::before { transform: translate(4px, 5px) rotate(0.4deg); }
    #riberas .lago-panel::after  { transform: translate(8px, 9px) rotate(0.8deg); }
}

/* ===== CABECERA DE LA CARPETA ===== */
#riberas .lago-panel__cabecera {
    border-bottom: 1px solid var(--noche-borde);
    padding-bottom: 0.85rem;
    margin-bottom: 1rem;
}

#riberas .lago-panel__titulo {
    color: var(--noche-texto);
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

#riberas .lago-panel__viento {
    color: var(--noche-cian);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* ===== ESTADO DESTACADO Y CONSEJO ===== */
#riberas .lago-estado {
    background: var(--noche-tarjeta);
    border-width: 1px;
    border-radius: 14px;
}

#riberas .lago-estado__frase,
#riberas .lago-consejo,
#riberas .lago-rafagas {
    color: var(--noche-tenue);
}

#riberas .lago-estado__num {
    color: var(--noche-texto);
    font-variant-numeric: tabular-nums;
}

#riberas .lago-estado__unidad,
#riberas .lago-estado__pie {
    color: var(--noche-apagado);
}

#riberas .lago-panel__subtitulo {
    color: var(--noche-apagado);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.7rem;
    display: block;
    margin: 1.4rem 0 0.75rem;
}

/* ===== LAS OCHO LÁMINAS ===== */
#riberas .lago-riberas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.75rem;
}

#riberas .lago-ribera {
    background: var(--noche-tarjeta);
    border: 1px solid var(--noche-borde);
    border-radius: 14px;
    padding: 0.85rem 0.95rem 0.9rem;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

#riberas .lago-ribera:hover {
    border-color: var(--noche-borde-vivo);
    transform: translateY(-2px);
}

#riberas .lago-ribera__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    min-height: 2.5em;
}

#riberas .lago-ribera__nombre {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--noche-texto);
    letter-spacing: -0.012em;
    line-height: 1.2;
}

/* El color de esta cifra viene inline desde ESTADOS: es el dato
   fosforeciendo, no un adorno. */
#riberas .lago-ribera__m {
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* La barra de exposición es el protagonista visual del mazo: ocho barras
   de largo distinto cuentan el estado del lago de una mirada. */
#riberas .lago-ribera__barra {
    height: 5px;
    background: rgba(93, 231, 214, 0.12);
    border-radius: 0;
    overflow: hidden;
    margin: 0.5rem 0 0.5rem;
}

#riberas .lago-ribera__barra span {
    display: block;
    height: 100%;
    border-radius: 0;
}

#riberas .lago-ribera__estado {
    display: block;
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    color: var(--noche-tenue);
}

#riberas .lago-ribera__nota {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--noche-apagado);
}

#riberas .lago-ribera.is-destacada {
    border-color: var(--noche-borde-vivo);
    background: #12302D;
}

/* ===== NOTA METODOLÓGICA ===== */
#riberas .lago-panel__nota {
    color: var(--noche-apagado);
    border-top: 1px solid var(--noche-borde);
    padding-top: 0.85rem;
    margin-top: 1.1rem;
}

/* ===== FRANJA FANTASMA =====
   renderSectores vacía #clima-consejo porque el consejo ahora vive
   dentro del panel, pero el contenedor vacío seguía dibujando su fondo y
   su padding: una franja crema bajo el mazo que parecía error de carga. */
#riberas #clima-consejo:empty {
    display: none;
}