/*
 * MeteoArchidona
 * Página Observaciones / Seguimiento
 *
 * Estilos exclusivos de:
 *
 *     pages/observaciones.html
 *
 * Orden principal:
 *
 * 1. Visor de Seguimiento.
 * 2. Vistazo general.
 */


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;

    width: 100%;
    min-height: 100%;

    background: #071019;
}


body {
    min-height: 100vh;
    min-height: 100dvh;

    overflow-x: hidden;
    overflow-y: auto;

    font-family: Arial, sans-serif;

    color: #ffffff;
}


/* ==========================================================
   CABECERA DE PÁGINA
   ========================================================== */


.cabecera-observaciones {
    flex: 0 0 auto;

    width: 100%;

    padding: 15px 20px 14px;

    background:
        linear-gradient(
            90deg,
            #091725 0,
            #0c2032 50%,
            #091725 100%
        );

    border-top:
        1px solid
        rgba(
            54,
            213,
            255,
            0.12
        );

    border-bottom:
        1px solid
        rgba(
            54,
            213,
            255,
            0.28
        );

    box-shadow:
        0 5px 18px
        rgba(
            0,
            0,
            0,
            0.22
        );
}


.cabecera-observaciones h1 {
    margin: 0;

    font-size:
        clamp(
            21px,
            4.8vw,
            34px
        );

    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0.025em;

    text-transform: uppercase;
}


.cabecera-observaciones h1 span {
    color: #36d5ff;
}


.cabecera-observaciones p {
    margin: 6px 0 0;

    color: #aabdd0;

    font-size:
        clamp(
            11px,
            2.8vw,
            14px
        );

    line-height: 1.35;
}


/* ==========================================================
   REJILLA PRINCIPAL DE SEGUIMIENTO
   ========================================================== */


.seguimiento-rejilla {
    display: grid;

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

    grid-auto-flow: row;

    gap: 14px;

    width: 100%;

    background: #071019;
}


/* ==========================================================
   VISOR
   ========================================================== */


/*
 * Primera posición de la rejilla.
 *
 * No necesita título propio porque la pestaña ya identifica
 * claramente esta sección como Seguimiento.
 */
.visor-contenedor {
    width: 100%;

    height: 100vh;
    height: 100dvh;

    min-height: 620px;

    background: #071019;
}


.observaciones {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    background: #071019;
}


/* ==========================================================
   VISTAZO GENERAL
   ========================================================== */


/*
 * Segunda posición de la rejilla.
 *
 * El bloque contiene:
 *
 * 1. título "Vistazo general";
 * 2. tabla compacta de estaciones.
 */
.vistazo-general {
    display: grid;

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

    grid-template-rows:
        auto
        auto;

    width:
        calc(
            100% - 28px
        );

    margin:
        0
        14px
        14px;

    overflow: hidden;

    border:
        1px solid
        #29435e;

    border-radius: 12px;

    background: #071019;

    box-shadow:
        0 8px 24px
        rgba(
            0,
            0,
            0,
            0.22
        );
}


/* ==========================================================
   TÍTULO VISTAZO GENERAL
   ========================================================== */


.vistazo-general-titulo {
    display: flex;

    align-items: center;

    min-height: 42px;

    margin: 0;

    padding:
        9px
        13px;

    border-bottom:
        1px solid
        #29435e;

    background: #252b33;

    color: #f6f8fb;

    font-size:
        clamp(
            14px,
            2.7vw,
            18px
        );

    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.025em;

    text-transform: uppercase;
}


/* ==========================================================
   TABLA DE ESTACIONES EMBEBIDA
   ========================================================== */


/*
 * La tabla interior se ha compactado considerablemente.
 *
 * Este alto deja visible:
 *
 * - cabecera;
 * - cinco estaciones;
 * - estado de actualización;
 * - leyenda plegada.
 *
 * Si la leyenda se despliega, el contenido adicional queda
 * dentro de este componente sin afectar al visor superior.
 */
.tabla-estaciones-iframe {
    display: block;

    width: 100%;
    height: 330px;

    border: 0;

    background: #071019;
}


/* ==========================================================
   SIN JAVASCRIPT
   ========================================================== */


.sin-js {
    display: grid;

    place-items: center;

    width: 100%;
    height: 100%;

    padding: 24px;

    color: #ffffff;

    background: #071019;

    text-align: center;
}


.sin-js a {
    color: #36d5ff;
}


/* ==========================================================
   TÍTULO DE PÁGINA OCULTO VISUALMENTE
   ========================================================== */


/*
 * El h1 permanece en el documento para buscadores y lectores
 * de pantalla.
 *
 * Visualmente no se muestra porque la propia pestaña y el visor
 * ya identifican Seguimiento.
 */
.cabecera-observaciones {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip:
        rect(
            0
            0
            0
            0
        );

    white-space: nowrap;

    border: 0;
}


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


@media (max-width: 700px) {

    .seguimiento-rejilla {
        gap: 10px;
    }


    .visor-contenedor {
        min-height: 620px;
    }


    .vistazo-general {
        width:
            calc(
                100% - 20px
            );

        margin:
            0
            10px
            10px;

        border-radius: 10px;
    }


    .vistazo-general-titulo {
        min-height: 38px;

        padding:
            8px
            10px;

        font-size: 14px;
    }


    .tabla-estaciones-iframe {
        height: 300px;
    }

}


/* ==========================================================
   MÓVIL HORIZONTAL / VENTANAS BAJAS
   ========================================================== */


@media (max-height: 560px) {

    .visor-contenedor {
        height: 560px;
        min-height: 560px;
    }


    .tabla-estaciones-iframe {
        height: 290px;
    }

}


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