/*
 * MeteoArchidona
 * Tabla de estaciones
 *
 * Componente autónomo para mostrar en formato tabular las condiciones
 * principales de todas las estaciones públicas de MeteoArchidona.
 *
 * Incluye:
 *
 * - tabla dinámica de estaciones;
 * - presentación compacta;
 * - distribución porcentual de columnas;
 * - coloración meteorológica de celdas;
 * - leyenda cromática desplegable;
 * - rejilla responsive de la leyenda.
 */


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;

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

    background: #071019;
}


body {
    font-family: Arial, sans-serif;

    color:
        var(--text, #f6f8fb);
}


/* ==========================================================
   PALETA LOCAL
   ========================================================== */


:root {
    --tabla-neutro: #252b33;
}


/* ==========================================================
   PANEL
   ========================================================== */


.tabla-estaciones-panel {
    width: 100%;

    padding: 8px;

    background: #071019;
}


/* ==========================================================
   CONTENEDOR
   ========================================================== */


.tabla-estaciones-contenedor {
    width: 100%;

    overflow-x: auto;

    border:
        1px solid
        var(--border-strong, #29435e);

    border-radius: 10px;

    background:
        var(--tabla-neutro);

    box-shadow:
        0 6px 18px
        rgba(
            0,
            0,
            0,
            0.20
        );
}


/* ==========================================================
   TABLA
   ========================================================== */


.tabla-estaciones {
    width: 100%;

    border-collapse: collapse;

    /*
     * Las columnas se reparten exactamente el ancho disponible.
     *
     * No existe ya un min-width general que obligue a la tabla
     * a ser más ancha que el visor en pantallas pequeñas.
     */
    table-layout: fixed;
}


.tabla-estaciones th,
.tabla-estaciones td {
    padding:
        6px
        4px;

    border-bottom:
        1px solid
        var(--border, #1a2d42);

    vertical-align: middle;

    white-space: nowrap;
}


.tabla-estaciones th {
    background:
        var(--tabla-neutro);

    color:
        var(--text-soft, #c9d6e5);

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

    line-height: 1.1;

    letter-spacing: 0.015em;

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


.tabla-estaciones th:first-child,
.tabla-estaciones td:first-child {
    text-align: left;
}


.tabla-estaciones td {
    background:
        var(--tabla-neutro);

    color:
        var(--text, #f6f8fb);

    font-size: 11px;
    line-height: 1.15;

    font-variant-numeric:
        tabular-nums;

    text-align: center;

    transition:
        background-color 160ms ease;
}


.tabla-estaciones tbody tr:last-child td {
    border-bottom: 0;
}


/* ==========================================================
   DISTRIBUCIÓN PORCENTUAL DE COLUMNAS
   ========================================================== */


/*
 * Total: 100 %
 *
 * Estación      14 %
 * Temperatura   13 %
 * Humedad       11 %
 * Presión       14 %
 * Viento        20 %
 * Lluvia día    14 %
 * Lluvia mes    14 %
 */


.tabla-estaciones th:nth-child(1),
.tabla-estaciones td:nth-child(1) {
    width: 14%;
}


.tabla-estaciones th:nth-child(2),
.tabla-estaciones td:nth-child(2) {
    width: 13%;
}


.tabla-estaciones th:nth-child(3),
.tabla-estaciones td:nth-child(3) {
    width: 11%;
}


.tabla-estaciones th:nth-child(4),
.tabla-estaciones td:nth-child(4) {
    width: 14%;
}


.tabla-estaciones th:nth-child(5),
.tabla-estaciones td:nth-child(5) {
    width: 20%;
}


.tabla-estaciones th:nth-child(6),
.tabla-estaciones td:nth-child(6) {
    width: 14%;
}


.tabla-estaciones th:nth-child(7),
.tabla-estaciones td:nth-child(7) {
    width: 14%;
}


/* ==========================================================
   COLUMNAS
   ========================================================== */


.tabla-estaciones-nombre {
    background:
        var(--tabla-neutro) !important;

    color:
        var(--text, #f6f8fb) !important;

    font-weight: 700;

    overflow: hidden;

    text-overflow: ellipsis;
}


.tabla-estaciones-valor {
    min-width: 0;
}


.tabla-estaciones-viento {
    min-width: 0;
}


/* ==========================================================
   COLORES METEOROLÓGICOS
   ========================================================== */


.meteo-azul {
    background: #3b9eff !important;
    color: #071019 !important;
}


.meteo-cian {
    background: #36d5ff !important;
    color: #071019 !important;
}


.meteo-verde {
    background: #22c55e !important;
    color: #071019 !important;
}


.meteo-ambar {
    background: #f2bf58 !important;
    color: #071019 !important;
}


.meteo-naranja {
    background: #f97316 !important;
    color: #071019 !important;
}


.meteo-rojo {
    background: #ef4444 !important;
    color: #071019 !important;
}


/*
 * Gris claro azulado.
 *
 * Reservado exclusivamente para dato no disponible.
 */
.meteo-gris {
    background: #8194aa !important;
    color: #071019 !important;
}


/*
 * Neutro.
 *
 * Utilizado cuando el dato es válido pero no existe fenómeno
 * destacable, por ejemplo lluvia actual de 0 mm/h.
 */
.meteo-neutro {
    background:
        var(--tabla-neutro) !important;

    color:
        var(--text, #f6f8fb) !important;
}


/* ==========================================================
   ESTADOS
   ========================================================== */


.tabla-estaciones-sin-datos {
    color:
        var(--muted, #aabdd0);
}


.tabla-estaciones-cargando td,
.tabla-estaciones-vacia td {
    padding:
        12px
        10px;

    background:
        var(--tabla-neutro);

    color:
        var(--muted, #aabdd0);

    text-align: center;
}


.tabla-estaciones-estado {
    margin:
        5px
        2px
        0;

    color:
        var(--text-faint, #8194aa);

    font-size: 9.5px;
    line-height: 1.2;

    text-align: right;
}


.tabla-estaciones-estado.error {
    color:
        var(--amber-light, #ffd989);
}


/* ==========================================================
   LEYENDA CROMÁTICA
   ========================================================== */


.leyenda-cromatica {
    width: 100%;

    margin-top: 8px;

    border:
        1px solid
        var(--border-strong, #29435e);

    border-radius: 9px;

    overflow: hidden;

    background:
        var(--surface, #0d1520);
}


.leyenda-cromatica > summary {
    display: flex;

    align-items: center;
    gap: 8px;

    width: 100%;

    padding:
        8px
        10px;

    cursor: pointer;

    background: #0c2032;

    color:
        var(--text, #f6f8fb);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;

    list-style: none;

    user-select: none;
}


.leyenda-cromatica > summary::-webkit-details-marker {
    display: none;
}


.leyenda-cromatica > summary::before {
    content: "▸";

    display: inline-block;

    color:
        var(--cyan, #36d5ff);

    font-size: 12px;

    transition:
        transform 140ms ease;
}


.leyenda-cromatica[open] > summary::before {
    transform:
        rotate(
            90deg
        );
}


.leyenda-cromatica > summary:hover {
    background: #10283d;
}


.leyenda-cromatica-contenido {
    padding: 8px;
}


/* ==========================================================
   REJILLA DE LEYENDA
   ========================================================== */


.leyenda-rejilla {
    display: grid;

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

    gap: 6px;
}


.leyenda-columna {
    display: flex;

    flex-direction: column;

    gap: 6px;

    min-width: 0;
}


.leyenda-grupo {
    min-width: 0;
}


.leyenda-grupo-titulo {
    margin: 0;

    padding:
        7px
        9px;

    border:
        1px solid
        var(--border-strong, #29435e);

    background: #0c2032;

    color:
        var(--text, #f6f8fb);

    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
}


.leyenda-grupo-filas {
    display: grid;

    gap: 2px;

    margin-top: 2px;
}


.leyenda-fila {
    display: grid;

    grid-template-columns:
        28px
        minmax(
            72px,
            0.72fr
        )
        minmax(
            86px,
            1fr
        );

    gap: 2px;

    min-width: 0;
    min-height: 29px;
}


.leyenda-color,
.leyenda-rango,
.leyenda-significado {
    display: flex;

    align-items: center;

    min-width: 0;

    border:
        1px solid
        var(--border, #1a2d42);
}


.leyenda-color {
    justify-content: center;
}


.leyenda-rango,
.leyenda-significado {
    padding:
        4px
        6px;

    background:
        var(--card-soft, #0d1a27);

    color:
        var(--text, #f6f8fb);

    font-size: 10px;
    line-height: 1.15;
}


.leyenda-rango {
    white-space: nowrap;

    font-variant-numeric:
        tabular-nums;
}


.leyenda-significado {
    overflow-wrap: anywhere;
}


/* ==========================================================
   MUESTRAS DE COLOR DE LA LEYENDA
   ========================================================== */


.leyenda-color.azul {
    background: #3b9eff;
}


.leyenda-color.cian {
    background: #36d5ff;
}


.leyenda-color.verde {
    background: #22c55e;
}


.leyenda-color.ambar {
    background: #f2bf58;
}


.leyenda-color.naranja {
    background: #f97316;
}


.leyenda-color.rojo {
    background: #ef4444;
}


.leyenda-color.gris {
    background: #8194aa;
}


.leyenda-color.neutro {
    background:
        var(--tabla-neutro);
}


/* ==========================================================
   NOTA DE LEYENDA
   ========================================================== */


.leyenda-nota {
    margin:
        8px
        2px
        0;

    color:
        var(--muted, #aabdd0);

    font-size: 10px;
    line-height: 1.35;
}


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


@media (max-width: 900px) {

    .leyenda-rejilla {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


@media (max-width: 700px) {

    .tabla-estaciones-panel {
        padding: 6px;
    }


    /*
     * La tabla continúa ocupando exactamente el 100 %.
     *
     * En móvil reducimos solo tipografía y padding.
     * No volvemos a introducir ningún ancho mínimo.
     */
    .tabla-estaciones th,
    .tabla-estaciones td {
        padding:
            5px
            2px;
    }


    .tabla-estaciones th {
        font-size: 8px;

        letter-spacing: 0;
    }


    .tabla-estaciones td {
        font-size: 9.5px;
    }


    .tabla-estaciones-nombre {
        font-size: 9.5px;
    }


    .tabla-estaciones-estado {
        font-size: 9px;
    }


    .leyenda-cromatica {
        margin-top: 7px;
    }


    .leyenda-cromatica > summary {
        padding:
            8px
            9px;

        font-size: 11px;
    }


    .leyenda-cromatica-contenido {
        padding: 6px;
    }


    .leyenda-rejilla {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap: 4px;
    }


    .leyenda-columna {
        gap: 4px;
    }


    .leyenda-grupo-filas {
        gap: 2px;
    }


    .leyenda-fila {
        grid-template-columns:
            24px
            minmax(
                58px,
                0.68fr
            )
            minmax(
                66px,
                1fr
            );

        gap: 2px;

        min-height: 26px;
    }


    .leyenda-rango,
    .leyenda-significado {
        padding:
            3px
            4px;

        font-size: 8.5px;
    }

}


/* Fin de fichero: css/tabla-estaciones.css */