/* =====================================================
   VARIABLES GLOBALES
   ===================================================== */

:root {

    --meteo-color-principal: #1976d2;
    --meteo-color-principal-hover: #125ea8;

    --meteo-fondo: #ffffff;
    --meteo-fondo-suave: #f5f7fa;

    --meteo-texto: #222222;
    --meteo-texto-secundario: #666666;

    --meteo-borde: #dde3eb;

    --meteo-radio: 24px;

    --aviso-rojo: #c62828;
    --aviso-rojo-suave: #ffebee;

    --aviso-naranja: #ef6c00;
    --aviso-naranja-suave: #fff3e0;

    --aviso-amarillo: #f9a825;
    --aviso-amarillo-suave: #fffde7;

}



/* =====================================================
   BASE
   ===================================================== */

.lameteo-bloque {
    margin: 20px 0;
    color: var(--meteo-texto);
}

.lameteo-bloque h3 {
    margin: 0 0 15px;
}

.lameteo-disclaimer {
    font-size: .8rem;
    color: var(--meteo-texto-secundario);
    margin-top: 15px;
}



/* =====================================================
   [meteo_actual]
   ===================================================== */

.lameteo-actual {
    background: var(--meteo-fondo-suave);
    border: 1px solid var(--meteo-borde);
    border-radius: var(--meteo-radio);
    padding: 20px;
}

.lameteo-actual ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lameteo-actual li {
    margin-bottom: 10px;
}

.lameteo-actual-cielo {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
}



/* =====================================================
   [meteo_horas]
   ===================================================== */

.lameteo-linea-horas{
    display:flex;
    gap: 16px;
    overflow-x:auto;
    align-items:stretch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-snap-align: start;
}

.lameteo-cambio-dia{
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    font-weight: bold;
    color: var(--meteo-texto-secundario);
    border: 1px solid var(--meteo-borde);
    padding: 4px;
    writing-mode: sideways-lr;
    border-radius: var(--meteo-radio);
    background: var(--meteo-fondo-suave);
}

.lameteo-dia-horas::-webkit-scrollbar {
    height: 8px;
}

.lameteo-dia-horas::-webkit-scrollbar-thumb {
    background: #cdd6e1;
    border-radius: 20px;
}

.lameteo-hora {
    display: flex;
    flex-direction: column;
    gap: 0px;
    flex-shrink: 0;
    min-width: 180px;
    padding: 16px;
    background: var(--meteo-fondo-suave);
    border: 1px solid var(--meteo-borde);
    border-radius: var(--meteo-radio);
}

.lameteo-hora-hora {
    font-size: 12px;
    font-weight: 700;
    opacity: .6;
    margin-bottom: 4px;
}

.lameteo-hora-temp {
    font-size: 1.5rem;
    font-weight: 700;
}

.lameteo-hora-cielo {
    margin-bottom: 8px;
}

.lameteo-hora-viento,
.lameteo-hora-prec {
    font-size: 14px;
    color: var(--meteo-texto-secundario);
    display: flex;
    align-items: center;
}



/* =====================================================
   [meteo_dias]
   ===================================================== */

.lameteo-dias {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    align-items: stretch;
}

.lameteo-dia-resumen {
    flex: 1;
    min-width: 180px;
    background: var(--meteo-fondo-suave);
    border: 1px solid var(--meteo-borde);
    border-radius: var(--meteo-radio);
    padding: 16px;
}

.lameteo-dia-resumen h4 {
    margin-top: 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    opacity: .6;
    margin-bottom: 16px;
}

.lameteo-dia-estado {
    margin-bottom: 8px;
}

.lameteo-dia-temperaturas {
    font-size: 1.2rem;
}



/* =====================================================
   [meteo_avisos]
   ===================================================== */

.lameteo-aviso {
    margin-bottom: 20px;
    padding: 15px;
    border-left: 8px solid transparent;
    border-radius: var(--meteo-radio);
}

.lameteo-aviso span {
    display: block;
    margin-bottom: 8px;
}



/* NIVEL ROJO */

.lameteo-aviso[data-nivel="rojo"] {
    background: var(--aviso-rojo-suave);
    border-left-color: var(--aviso-rojo);
}


/* NIVEL NARANJA */

.lameteo-aviso[data-nivel="naranja"] {
    background: var(--aviso-naranja-suave);
    border-left-color: var(--aviso-naranja);
}


/* NIVEL AMARILLO */

.lameteo-aviso[data-nivel="amarillo"] {
    background: var(--aviso-amarillo-suave);
    border-left-color: var(--aviso-amarillo);
}



/* =====================================================
   [meteo_selector]
   ===================================================== */

.lameteo-selector-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

.lameteo-selector-form select {
    flex: 1;
    min-width: 220px;
    padding: 10px;
    border: 1px solid var(--meteo-borde);
    border-radius: var(--meteo-radio);
}

.lameteo-selector-form button {
    border: none;
    background: var(--meteo-color-principal);
    color: #ffffff;
    cursor: pointer;
    border-radius: var(--meteo-radio);
    padding: 10px 20px;
}

.lameteo-selector-form button:hover {
    background: var(--meteo-color-principal-hover);
}



/* =====================================================
   ICONOS DE CIELO AEMET
   ===================================================== */

[data-cielo="11"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/clear-day.svg);
}

[data-cielo="11n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/clear-night.svg);
}

[data-cielo="12"]::before, [data-cielo="17"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/partly-cloudy-day.svg);
}

[data-cielo="12n"]::before, [data-cielo="17n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/partly-cloudy-night.svg);
}

[data-cielo="13"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/overcast-day.svg);
}

[data-cielo="13n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/overcast-night.svg);
}

[data-cielo="14"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/overcast-day.svg);
}

[data-cielo="14n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/overcast-night.svg);
}

[data-cielo="15"]::before, [data-cielo="15n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/cloudy.svg);
}

[data-cielo="16"]::before, [data-cielo="16n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/cloudy.svg);
}

[data-cielo="43"]::before, [data-cielo="44"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/partly-cloudy-day-drizzle.svg);
}

[data-cielo="43n"]::before, [data-cielo="44n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/partly-cloudy-night-drizzle.svg);
}

[data-cielo="45"]::before, [data-cielo="45n"]::before, [data-cielo="46"]::before, [data-cielo="46n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/drizzle.svg);
}

[data-cielo="23"]::before, [data-cielo="24"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/partly-cloudy-day-rain.svg);
}

[data-cielo="23n"]::before, [data-cielo="24n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/partly-cloudy-night-rain.svg);
}

[data-cielo="25"]::before, [data-cielo="25n"]::before, [data-cielo="26"]::before, [data-cielo="26n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/rain.svg);
}

[data-cielo="71"]::before, [data-cielo="72"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/partly-cloudy-day-sleet.svg);
}

[data-cielo="71n"]::before, [data-cielo="72n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/partly-cloudy-night-sleet.svg);
}

[data-cielo="73"]::before, [data-cielo="73n"]::before, [data-cielo="74"]::before, [data-cielo="74n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/sleet.svg);
}

[data-cielo="33"]::before, [data-cielo="33n"]::before, [data-cielo="34"]::before, [data-cielo="34n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/partly-cloudy-day-snow.svg);
}

[data-cielo="33n"]::before, [data-cielo="34n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/partly-cloudy-night-snow.svg);
}

[data-cielo="35"]::before, [data-cielo="35n"]::before, [data-cielo="36"]::before, [data-cielo="36n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/snow.svg);
}

[data-cielo="51"]::before, [data-cielo="52"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/thunderstorms-day.svg);
}

[data-cielo="51n"]::before, [data-cielo="52n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/thunderstorms-night.svg);
}

[data-cielo="53"]::before, [data-cielo="53n"]::before, [data-cielo="54"]::before, [data-cielo="54n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/thunderstorms.svg);
}

[data-cielo="61"]::before, [data-cielo="62"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/thunderstorms-day-rain.svg);
}

[data-cielo="61n"]::before, [data-cielo="62n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/thunderstorms-night-rain.svg);
}

[data-cielo="63"]::before, [data-cielo="63n"]::before, [data-cielo="64"]::before, [data-cielo="64n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/thunderstorms-rain.svg);
}

[data-cielo="81"]::before, [data-cielo="81n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/fog.svg);
}

[data-cielo="82"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/haze-day.svg);
}

[data-cielo="82n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/haze-night.svg);
}

[data-cielo="83"]::before, [data-cielo="83n"]::before {
  background-image: url(/recursos/vectores/iconos-tiempo/mist.svg);
}



/* =====================================================
   ICONOS DE AVISOS
   ===================================================== */

[data-fenomeno="lluvias"]::before {
    content: "🌧️ ";
}

[data-fenomeno="tormentas"]::before {
    content: "⛈️ ";
}

[data-fenomeno="viento"]::before {
    content: "💨 ";
}

[data-fenomeno="temperaturas-altas"]::before {
    content: "🌡️ ";
}

[data-fenomeno="temperaturas-bajas"]::before {
    content: "🥶 ";
}

[data-fenomeno="nevadas"]::before {
    content: "❄️ ";
}

[data-fenomeno="niebla"]::before {
    content: "🌫️ ";
}



/* =====================================================
   ICONOS DE VIENTO - PRECIPITACIÓN
   ===================================================== */
.lameteo-hora-viento::before {
    font-family: 'Material Symbols Outlined';
    font-size: 16px;
    line-height: 1;
    margin-right: 8px;
}

[data-viento-dir="N"]::before {
    content:"north";
}

[data-viento-dir="NE"]::before {
    content:"north_east";
}

[data-viento-dir="E"]::before {
    content:"east";
}

[data-viento-dir="SE"]::before {
    content:"south_east";
}

[data-viento-dir="S"]::before {
    content:"south";
}

[data-viento-dir="SO"]::before {
    content:"south_west";
}

[data-viento-dir="O"]::before {
    content:"west";
}

[data-viento-dir="NO"]::before {
    content:"north_west";
}

.lameteo-hora-prec::before {
    font-family: 'Material Symbols Outlined';
    content: "water_drops";
    font-size: 16px;
    line-height: 1;
    margin-right: 8px;
}



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

@media (max-width:768px) {

    .lameteo-dia-resumen {
        width: 100%;
        min-width: auto;
    }

    .lameteo-hora {
        min-width: 150px;
    }

    .lameteo-selector-form {
        flex-direction: column;
    }

}