/* ============================================================
   Patagonia Lacustre · temporal.v1.css
   15-ago-2026 — Franja de aviso de temporal (clima-temporal.v1.js).

   Sólo existe cuando hay algo que avisar: nace con [hidden] y el JS
   la destapa. Ocupa el borde superior, por encima del header fijo,
   para que se imponga. Colores por severidad, en la paleta del sitio.
   Archivo nuevo: la caché immutable de un año se resuelve con nombre
   nuevo, no editando en sitio (ver CLAUDE.md).
   ============================================================ */

.aviso-temporal {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1200;               /* por encima del header fijo */
    padding: 9px clamp(14px, 4vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: .9rem;
    line-height: 1.35;
    color: #1a1207;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .28);
    animation: aviso-bajar .45s ease;
}
.aviso-temporal[hidden] { display: none; }

@keyframes aviso-bajar {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

.aviso-temporal__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1080px;
    flex: 1;
}
.aviso-temporal__icono {
    flex: none;
    width: 20px; height: 20px;
    background: currentColor;
    -webkit-mask: center/contain no-repeat;
    mask: center/contain no-repeat;
    /* triángulo de exclamación */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm0 6v6m0 3v.5' fill='none' stroke='%23000' stroke-width='2' stroke-linjoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm0 6v6m0 3v.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
    opacity: .85;
}
.aviso-temporal__txt { flex: 1; }
.aviso-temporal__txt strong { font-weight: 700; }

.aviso-temporal__link {
    flex: none;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 1px;
}
.aviso-temporal__fuente {
    flex: none;
    font-size: .72rem;
    opacity: .7;
    white-space: nowrap;
}

/* --- colores por severidad --- */
.aviso-temporal--amarillo { background: linear-gradient(180deg, #F5D98C, #EFC969); }
.aviso-temporal--naranjo  { background: linear-gradient(180deg, #F0A24E, #E8843C); color: #241304; }
.aviso-temporal--rojo     { background: linear-gradient(180deg, #E0553C, #CE3B2C); color: #fff; }
.aviso-temporal--rojo .aviso-temporal__icono { opacity: 1; }

@media (max-width: 719px) {
    .aviso-temporal {
        flex-direction: column;
        gap: 4px;
        padding: 8px 14px;
        font-size: .82rem;
    }
    .aviso-temporal__inner { flex-wrap: wrap; gap: 8px; }
    .aviso-temporal__fuente { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .aviso-temporal { animation: none; }
}

/* Cuando la franja está, empuja el header fijo hacia abajo en vez de
   taparlo. --aviso-h la fija el JS midiendo la altura real (varía entre
   una y dos líneas según el ancho). */
body.con-aviso-temporal .header { top: var(--aviso-h, 44px); }
body.con-aviso-temporal .luna-pag__aviso { margin-top: calc(66px + var(--aviso-h, 44px)); }