/*
 * MeteoArchidona
 * Cabecera común
 *
 * Lo que comparten todas las páginas: la paleta, los estilos base del
 * documento y la cabecera con la navegación principal.
 *
 * Salió de css/index.css, cuando el sitio dejó de ser un index con
 * paneles en iframes y cada sección pasó a ser una página propia.
 *
 * El marcado que estiliza está en componentes/cabecera.html y lo
 * inserta js/cabecera.js.
 */


/* La paleta está en css/paleta.css, que se carga antes que esta hoja. */


* {
    box-sizing: border-box;
}


html {
    min-width: 320px;
    min-height: 100%;

    /*
     * Color de fondo en el <html> y no solo en el <body>: al girar el
     * móvil, iOS pinta las franjas de los lados (las del notch) con el
     * color de fondo de la página, y el degradado del body no cuenta
     * como color. Sin esto salían blancas.
     */
    background-color: var(--bg);
}


body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background:
        radial-gradient(
            circle at top,
            #0b1b2d 0,
            var(--bg) 38%
        );
    color: var(--text);
    font-family:
        "Sora",
        sans-serif;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font: inherit;
}


.pagina {
    min-height: 100vh;
    min-height: 100dvh;
}


/* ==========================================================
   CABECERA
   ========================================================== */


.cabecera {
    /*
     * La cabecera fija su propia letra en vez de heredarla del <body>:
     * alguna página cambia la del body (Observaciones usa Arial) y la
     * cabecera común tiene que verse igual en todas.
     */
    font-family: "Sora", sans-serif;

    position: sticky;
    top: 0;
    z-index: 100;

    display: grid;

    grid-template-columns:
        minmax(260px, 0.9fr)
        minmax(460px, 1.45fr)
        minmax(230px, 0.75fr);

    align-items: center;

    gap: 18px;

    min-height: 96px;

    padding:
        12px
        clamp(
            20px,
            3vw,
            54px
        );

    background:
        rgba(
            8,
            13,
            20,
            0.94
        );

    border-bottom:
        1px solid
        var(--border);

    backdrop-filter:
        blur(16px);
}


.marca {
    display: flex;
    align-items: center;

    gap: 14px;

    min-width: 0;
}


/*
 * Logotipo de MeteoArchidona (assets/logo-meteoarchidona.png). La
 * cabecera usa una copia de 128 px, assets/logo-cabecera.png, que cubre
 * pantallas de doble densidad sin cargar las 800 KB del original.
 */
.marca-logo {
    display: block;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}


.marca-titulo {
    font-size:
        clamp(
            19px,
            1.6vw,
            26px
        );

    font-weight: 700;

    letter-spacing:
        0.02em;

    white-space:
        nowrap;
}


.marca-titulo span {
    color:
        var(--accent);
}


.marca-subtitulo {
    margin-top: 3px;

    color:
        var(--muted);

    font-size: 12px;

    white-space:
        nowrap;
}


/* ==========================================================
   NAVEGACIÓN PRINCIPAL
   ========================================================== */


.navegacion {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    align-items: center;
    justify-content: center;

    gap: 8px;

    width:
        min(
            720px,
            100%
        );

    height: auto;
}


.navegacion a {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 34px;

    padding:
        7px 10px;

    /*
     * Botones oscuros como las tarjetas de la página, con los acentos de
     * css/paleta.css: cian al pasar el ratón y dorado (el de «ARCHIDONA»
     * y el sol del logotipo) en la sección activa.
     */
    color:
        var(--text-soft);

    background:
        rgba(
            17,
            30,
            46,
            0.88
        );

    border:
        1px solid
        var(--border-strong);

    border-radius: 9px;

    font-size: 10px;
    font-weight: 700;

    line-height: 1.15;

    text-align: center;
    text-transform: uppercase;

    white-space:
        normal;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}


@media (hover: hover) {
.navegacion a:hover {
    color:
        var(--text);

    background:
        rgba(
            22,
            40,
            60,
            0.95
        );

    border-color:
        rgba(
            54,
            213,
            255,
            0.55
        );

    box-shadow:
        0 0 12px
        rgba(
            54,
            213,
            255,
            0.15
        );

    transform:
        translateY(-1px);
}
}


.navegacion a:focus-visible {
    outline:
        2px solid
        var(--cyan);

    outline-offset: 2px;
}


.navegacion a.activo {
    color:
        var(--amber-light);

    background:
        rgba(
            240,
            165,
            0,
            0.14
        );

    border-color:
        rgba(
            242,
            191,
            88,
            0.65
        );

    box-shadow:
        0 0 14px
        rgba(
            240,
            165,
            0,
            0.18
        );
}


.navegacion a.activo::after {
    display: none;
}


/* ==========================================================
   ZONA DERECHA DE CABECERA
   ========================================================== */


.zona-derecha {
    display: flex;

    justify-content:
        flex-end;

    align-items:
        center;

    gap: 18px;
}


.hora {
    display: flex;

    justify-content:
        flex-end;

    align-items:
        center;

    text-align:
        right;
}


.fecha {
    color:
        var(--muted);

    font-size:
        11px;
}


.reloj {
    margin-top:
        3px;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        27px;

    font-weight:
        600;
}


/* ==========================================================
   FIRMA Y&Z
   ========================================================== */


.firma-proyecto {
    position: relative;

    display: grid;

    place-items:
        center;

    width: 70px;
    height: 70px;

    flex:
        0 0 auto;

    padding: 0;

    border:
        1px solid
        rgba(
            59,
            158,
            255,
            0.28
        );

    border-radius:
        50%;

    background:
        rgba(
            8,
            18,
            29,
            0.78
        );

    box-shadow:
        0 6px 20px
        rgba(
            0,
            0,
            0,
            0.28
        );

    cursor:
        pointer;

    user-select:
        none;

    touch-action:
        manipulation;

    -webkit-user-select:
        none;

    -webkit-touch-callout: none;
}



/*
 * El aviso de "Prueba llovizna", "Prueba chubasco"... que sale bajo el
 * logotipo mientras la lluvia de prueba está encendida. Lo escribe
 * actualizarIndicadorSimulacion(), en js/actualidad.js.
 */
.simulacion-global {
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);

    display: none;

    min-width: max-content;
    padding: 3px 6px;

    border: 1px solid rgba(54, 213, 255, 0.32);
    border-radius: 999px;
    background: rgba(6, 22, 35, 0.96);

    color: var(--cyan);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    pointer-events: none;
}


.simulacion-global.visible {
    display: block;
}


.firma-proyecto img {
    display:
        block;

    width: 64px;
    height: 64px;

    object-fit:
        cover;

    border-radius:
        50%;

    pointer-events:
        none;

    user-select:
        none;

    -webkit-user-drag:
        none;
}


@media (hover: hover) {
.firma-proyecto:hover {
    border-color:
        rgba(
            59,
            158,
            255,
            0.62
        );

    box-shadow:
        0 0 22px
        rgba(
            59,
            158,
            255,
            0.18
        );
}
}


.firma-proyecto:focus-visible {
    outline:
        2px solid
        var(--blue);

    outline-offset:
        3px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */


@media (
    max-width: 1250px
) {

    .cabecera {
        grid-template-columns:
            1fr
            auto;

        gap:
            8px 20px;
    }


    .navegacion {
        grid-column:
            1 / -1;

        order:
            3;

        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );

        justify-content:
            stretch;

        gap:
            8px;

        width:
            min(
                900px,
                100%
            );

        margin:
            0 auto;

        padding:
            7px 0;

        overflow:
            visible;

        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                0.04
            );
    }


    .navegacion a {
        min-height:
            34px;

        padding:
            7px 9px;

        font-size:
            10px;
    }


    .zona-derecha {
        justify-content:
            flex-end;
    }

}

@media (
    max-width: 1050px
) {

    .cabecera {
        position:
            relative;

        grid-template-columns:
            1fr;

        gap:
            9px;

        padding-bottom:
            0;
    }


    .marca {
        order:
            1;
    }


    .zona-derecha {
        order:
            2;

        display:
            grid;

        grid-template-columns:
            1fr
            auto;

        align-items:
            center;

        column-gap:
            20px;

        width:
            100%;

        padding:
            0 52px 0 12px;
    }


    .hora {
        justify-content:
            flex-start;

        text-align:
            left;
    }


    .firma-proyecto {
        width:
            96px;

        height:
            96px;
    }


    .firma-proyecto img {
        width:
            90px;

        height:
            90px;
    }


    .navegacion {
        display:
            grid;

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

        grid-auto-rows:
            minmax(
                36px,
                auto
            );

        grid-column:
            auto;

        order:
            3;

        justify-content:
            stretch;

        gap:
            7px;

        width:
            auto;

        margin:
            1px -20px 0;

        padding:
            8px 20px;

        overflow:
            visible;
    }


    .navegacion a {
        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            100%;

        min-width:
            0;

        min-height:
            36px;

        padding:
            7px 5px;

        font-size:
            9px;

        line-height:
            1.15;

        white-space:
            normal;

        text-align:
            center;
    }

}

@media (
    max-width: 390px
) {

    .zona-derecha {
        padding:
            0 34px 0 8px;
    }


    .firma-proyecto {
        width:
            90px;

        height:
            90px;
    }


    .firma-proyecto img {
        width:
            84px;

        height:
            84px;
    }


    .navegacion {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            6px;

        padding-left:
            8px;

        padding-right:
            8px;
    }


    .navegacion a {
        min-height:
            34px;

        padding:
            6px 3px;

        font-size:
            8px;
    }

}


/* ==========================================================
   SOLO PARA LECTORES DE PANTALLA
   ========================================================== */

/*
 * Texto que no se ve pero que leen los lectores de pantalla y los
 * buscadores. Lo usa el <h1> de la portada: el diseño no tiene un
 * título visible, pero la página necesita decir de qué va.
 *
 * No vale display:none ni visibility:hidden, que lo ocultan también a
 * quien sí debe leerlo.
 */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================
   HUECO DE CONTROLES DE PÁGINA
   ========================================================== */

/*
 * En móvil .zona-derecha es una rejilla de dos columnas, y este hueco
 * vacío ocupaba una casilla y mandaba el logotipo a otra fila: la
 * cabecera medía 342 px en vez de 195. Solo Administración lo llena.
 */
.cabecera-acciones:empty {
    display: none;
}


/* ==========================================================
   BOTÓN DEL MENÚ (en escritorio no se ve)
   ========================================================== */

.boton-menu {
    display: none;
}


/* ==========================================================
   MÓVIL: MENÚ DESPLEGABLE
   ========================================================== */

/*
 * Va al final del fichero para mandar sobre las reglas de
 * .navegacion de los @media anteriores.
 *
 * Primera fila: la marca y el botón del menú. Segunda: fecha, hora y
 * logotipo. El menú, cerrado, no ocupa nada; abierto, baja como una
 * lista de enlaces de 48 px de alto, cómodos para el dedo.
 */
@media (max-width: 1050px) {

    .cabecera {
        grid-template-columns: 1fr auto;
        row-gap: 8px;
        padding-bottom: 10px;
    }

    .marca {
        grid-column: 1;
        grid-row: 1;
    }

    .marca-logo {
        width: 48px;
        height: 48px;
    }

    .boton-menu {
        display: inline-grid;
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        place-content: center;
        gap: 5px;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: rgba(13, 21, 32, 0.9);
        cursor: pointer;
        touch-action: manipulation;
    }

    .boton-menu-raya {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: var(--text);
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .menu-abierto .boton-menu-raya:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-abierto .boton-menu-raya:nth-child(2) {
        opacity: 0;
    }

    .menu-abierto .boton-menu-raya:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .boton-menu:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: 2px;
    }

    .zona-derecha {
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 0 4px;
    }

    .firma-proyecto {
        width: 60px;
        height: 60px;
    }

    .firma-proyecto img {
        width: 56px;
        height: 56px;
    }

    .navegacion {
        display: none;
        grid-column: 1 / -1;
        grid-row: 3;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 6px;
        width: 100%;
        margin: 0;
        padding: 4px 0 2px;
    }

    .menu-abierto .navegacion {
        display: grid;
    }

    .navegacion a {
        justify-content: flex-start;
        min-height: 48px;
        padding: 0 16px;
        font-size: 14px;
        text-align: left;
    }

}


/* ==========================================================
   PANTALLAS BAJAS (MÓVIL TUMBADO)
   ========================================================== */

/*
 * Con el móvil en horizontal solo hay unos 390 px de alto y la cabecera
 * se llevaba 150, casi el 40 % de la pantalla: la marca en una fila y
 * la fecha, la hora y el logotipo de Y&Z en otra.
 *
 * Aquí caben las dos en la misma fila y todo encoge un punto, así que
 * la cabecera baja a unos 60 px. El menú desplegable sigue igual, solo
 * que con los enlaces algo más bajos para que quepan sin desplazar.
 */
@media (max-height: 560px) and (min-width: 600px) {

    .cabecera {
        grid-template-columns: 1fr auto auto;
        gap: 12px;
        row-gap: 4px;
        min-height: 0;
        padding: 6px 16px;
    }

    .marca-logo {
        width: 38px;
        height: 38px;
    }

    .marca-titulo {
        font-size: 17px;
    }

    .marca-subtitulo {
        display: none;
    }

    .zona-derecha {
        grid-column: 2;
        grid-row: 1;
        gap: 10px;
        padding: 0;
    }

    .fecha {
        font-size: 10px;
    }

    .reloj {
        margin-top: 1px;
        font-size: 18px;
    }

    .firma-proyecto {
        width: 44px;
        height: 44px;
    }

    .firma-proyecto img {
        width: 40px;
        height: 40px;
    }

    .boton-menu {
        grid-column: 3;
        grid-row: 1;
        width: 42px;
        height: 42px;
    }

    /*
     * Abierto, el menú de seis enlaces en una columna se comía 280 px
     * de los 390 de alto. A dos columnas son tres filas.
     */
    .navegacion {
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: 1fr 1fr;
    }

    .navegacion a {
        min-height: 40px;
        font-size: 13px;
    }

}


/* Fin de fichero: css/cabecera.css */