/* ===================================================================================================================
   🧭 FOOTER LEFT STACK - CARD REGIÓN + CIUDADES
   -------------------------------------------------------------------------------------------------------------------
   Este contenedor agrupa:
   - Card de región/provincia
   - Card de ciudades/clima

   Ubicación:
   - Sobre el footer
   - Pegado hacia la izquierda
   - Detrás del reloj
// ================================================================================================================ */

.footer-left-stack {
    position: absolute;
    /* 🔥 Subimos el bloque por encima del footer */
    bottom: 85px;
    /* 🔥 Lo metemos un poco detrás del reloj */
    left: 20px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    /* 🔥 Encima de cámara, pero debajo del footer/reloj */
    opacity: 1;
    transform: translateY(0);
    transition: opacity .45s ease, transform .45s ease;
    z-index: 20;
    pointer-events: none;
}

.footer-left-stack.is-hidden {
    opacity: 0;
    transform: translateY(12px);
}

/* 🔥 CLAVE GLOBAL DEL CARD */
.footer-left-stack,
.footer-left-stack * {
    box-sizing: border-box;
}

/* ===================================================================================================================
   🎨 COLORES POR REGIÓN - HEADER DEL CARD
// ================================================================================================================ */

.region-text.region-noroeste {
    background: rgb(103, 37, 0,0.65) !important;
}

.region-text.region-litoral {
    background: rgb(162, 32, 32,0.65) !important;
}

.region-text.region-cuyo {
    background: rgb(239, 97, 250,0.65) !important;
}

.region-text.region-serrana {
    background: rgb(144, 103, 0,0.65) !important;
}

.region-text.region-pampeana {
    background: rgb(255, 116, 0,0.65) !important;
}

.region-text.region-patagonica {
    background: rgb(63, 140, 71,0.65) !important;
}


/* ===================================================================================================================
   🎨 COLORES POR REGIÓN - CUERPO DEL CARD
// ================================================================================================================ */

.region-noroeste-claro {
    background: rgb(138, 104, 85,0.45);
}

.region-litoral-claro {
    background: rgb(198, 102, 102,0.45);
}

.region-cuyo-claro {
    background: rgb(248, 184, 253,0.45);
}

.region-serrana-claro {
    background: rgb(173, 146, 79,0.45);
}

.region-pampeana-claro {
    background: rgb(253, 164, 90,0.45);
}

.region-patagonica-claro {
    background: rgb(124, 175, 129,0.85);
}


/* ===================================================================================================================
   🌎 CARD REGIÓN + 🌡️ CARD CIUDADES - BASE COMPARTIDA
// ================================================================================================================ */

.footer-region,
.footer-ciudades-weather {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-left: 6px solid var(--codelis-logoL-rgb);
    overflow: hidden;
    /* 🔥 Debajo del reloj */
    z-index: 3;
}


/* ===================================================================================================================
   🌎 CARD REGIÓN / PROVINCIA
// ================================================================================================================ */

/* ===================================================================================================================
   🌎 CARD REGIÓN / PROVINCIA
   -------------------------------------------------------------------------------------------------------------------
   Este bloque contiene:
   - Header (nombre de región)
   - Provincia
   - Imagen

   OBJETIVO:
   ✔ Mantener estructura vertical
   ✔ Imagen perfectamente centrada (horizontal y vertical)
   ✔ Que la imagen "respire" dentro del card
=================================================================================================================== */

.footer-region {

    /* 📏 ancho fijo del card */
    width: 120px;

    /* 📦 usamos flex vertical */
    display: flex;
    flex-direction: column;

    /* 🔥 IMPORTANTE:
       ahora distribuimos el contenido en altura */
    justify-content: space-between;

    /* centrado horizontal general */
    align-items: center;

    /* padding base */
    padding-top: 0;
    padding-bottom: 6px;

    /* estética */
    border-top-left-radius: 8px;
    backdrop-filter: blur(6px);
    border-right: 2px solid var(--codelis-logoL-rgb);

    /* 🔥 ALTURA MÍNIMA para que el centrado vertical funcione */
    min-height: 220px;
}


/* ===================================================================================================================
   🧭 HEADER REGIÓN
=================================================================================================================== */

.region-text {

    width: 100%;

    /* bloque completo */
    display: block;

    margin: 0;
    padding: 4px 8px;

    text-align: center;

    font-size: 14px;
    line-height: 1.1;

    color: var(--blanco);
}

/* etiqueta "Región" */
.region-label {
    font-size: 13px;
}

/* nombre grande */
.region-name-big {
    font-size: 15px;
    font-weight: 800;
}


/* ===================================================================================================================
   📍 TEXTO PROVINCIA
=================================================================================================================== */

.provincia-text {

    display: inline-block;
    padding-top: 10px;
    

    font-size: 16px;
    font-weight: bold;
    line-height: 1.1;

    color: var(--warning-rgb);

    white-space: nowrap;

    transform-origin: center;
}

/* ===================================================================================================================
   ⏳ TEXTO TIMER PROXIMA PROVINCIA
=================================================================================================================== */
.next-prov-name {
    width: 100%;
    margin-top: 5px;
    padding: 3px 5px;

    text-align: center;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;

    color: var(--blanco);
    background: rgba(0,0,0,.25);

    border-top: 1px solid rgba(255,255,255,.18);
    border-bottom: 1px solid rgba(255,255,255,.18);
}

.next-prov-name span {
    display: block;
    font-size: 12px;
    opacity: .75;
}

.next-prov-name strong {
    display: block;
    margin-top: 1px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.next-prov-timer {
    margin-top: 4px;
    margin-bottom: 15px;

    /* 🔥 CLAVE PARA CENTRAR */
    margin-left: auto;
    margin-right: auto;

    padding: 3px 7px;
    width: 50px;

    border-radius: 5px;

    font-size: 13px;
    font-weight: 900;
    line-height: 1;

    color: var(--blanco);
    background: rgba(0,0,0,.35);

    border: 1px solid rgba(255,255,255,.25);

    text-align: center; /* 👈 centra el texto dentro */
}

.next-prov-timer.alert {
    color: var(--blanco);
    background: var(--danger);
    border: 1px solid var(--danger-claro);
    animation: pulseProvTimer .7s infinite alternate;
}

@keyframes pulseProvTimer {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

/* ===================================================================================================================
   🖼️ CONTENEDOR DE IMAGEN
=================================================================================================================== */

.region-img {

    /* ocupa todo el espacio restante */
    flex: 1;

    /* ancho completo */
    width: 100%;

    /* 🔥 FLEX PARA CENTRADO PERFECTO */
    display: flex;

    align-items: center;     /* ✔ centro vertical */
    justify-content: center; /* ✔ centro horizontal */

    /* pequeño margen superior */
    margin-top: 4px;
}


/* ===================================================================================================================
   🖼️ IMAGEN
=================================================================================================================== */

.region-img img {

    /* nunca desborda */
    max-width: 100%;
    /* altura controlada */
    
    /* mantiene proporción */
    width: auto;
    height: auto;
    /* evita deformación */
    object-fit: contain;
    /* 🔥 mejora visual */
    display: block;
    /* ✨ brillo detrás de la figura */
    filter:
        drop-shadow(0 0 4px rgba(175, 157, 202,0.75))
        drop-shadow(0 0 10px rgba(155, 99, 245,0.55))
        drop-shadow(0 0 18px rgba(112, 56, 142,0.45));
}


/* ===================================================================================================================
   ⛅ CARD CIUDADES WEATHER
// ================================================================================================================ */

.footer-ciudades-weather {
    width: 450px;
    max-width: 450px;
    align-items: flex-start;
    padding: 6px 8px;
    border-left: none;
    border-top-right-radius: 8px;
    backdrop-filter: blur(6px);
    background: linear-gradient(
        90deg,
        rgba(56, 21, 75, 0.45),
        rgba(47, 1, 44, 0.45)
    );

    transition: all 0.3s ease;
}


/* ===================================================================================================================
   🌆 LISTADO DE CIUDADES - FORMATO COMPACTO EN 2 FILAS
// ================================================================================================================ */

.city-list {
    width: 100%;
    min-width: 0;
}

/* -------------------------------------------------------------------------------------------------------------------
   CARD POR CADA CIUDAD
// ---------------------------------------------------------------------------------------------------------------- */

.city-weather-card {
    width: 100%;
    min-width: 0;
    padding-bottom: 4px;
    overflow: hidden;
}

/* -------------------------------------------------------------------------------------------------------------------
   FILA 1:
   ciudad / icono clima / temperatura / sensación térmica
// ---------------------------------------------------------------------------------------------------------------- */

.city-row-main {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 6px;
    overflow: hidden;
}

/* 🔥 nombre queda a la izquierda */
.city-name {
    flex: 1 1 auto;
    min-width: 0;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    color: var(--blanco);
}

/* 🔥 contenedor de la derecha */
.city-right {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;

    margin-left: auto;
}

/* 🔥 elementos derechos */
.city-weather-icon {
    font-size: 18px;
    flex: 0 0 auto;
}

.city-temp,
.city-st {
    flex: 0 0 auto;

    height: 24px;
    padding: 2px 7px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 5px;

    font-size: 15px;
    font-weight: 900;
    line-height: 1;

    white-space: nowrap;
}

/* -------------------------------------------------------------------------------------------------------------------
   FILA 2:
   Tmax / Tmin / humedad / prob lluvia / presión / viento
// ---------------------------------------------------------------------------------------------------------------- */

.city-row-extra {
    display: grid;

    grid-template-columns:
        48px     /* Tmax */
        48px     /* Tmin */
        48px     /* humedad */
        52px     /* prob lluvia */
        78px     /* presión */
        minmax(80px, 1fr); /* viento */

    align-items: center;
    gap: 5px;

    width: 100%;
    min-width: 0;

    padding-top: 4px;
    padding-bottom: 4px;

    border-bottom: 2px solid rgba(255,255,255,0.85);

    font-size: 11px;
    font-weight: 800;
    line-height: 1;

    overflow: hidden;
}

/* -------------------------------------------------------------------------------------------------------------------
   ITEMS GENERALES FILA 2
// ---------------------------------------------------------------------------------------------------------------- */

.city-extra-item,
.city-extra-item-temp {
    min-width: 0;
    min-height: 21px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;

    padding: 0 4px;

    border-radius: 4px;

    color: var(--blanco);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.city-extra-item {
    border: 1px solid var(--codelis-logoL-rgb);
    background: var(--codelis-logoR-rgb);
}

/* -------------------------------------------------------------------------------------------------------------------
   ITEM DE VIENTO: necesita más aire
// ---------------------------------------------------------------------------------------------------------------- */

.city-extra-wind {
    justify-content: flex-start;
    padding-left: 6px;
}


/* ===================================================================================================================
   🌡️ BARRA DE TEMPERATURA
// ================================================================================================================ */

.footer-temp-bar {
    width: 100%;
    height: 40px;

    flex-basis: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding-top: 4px;

    border-top: 2px solid var(--codelis-logoL-rgb);
    border-radius: 0 0 8px 8px;

    overflow: hidden;
}


/* Gradiente */

.temp-gradient {
    width: 100%;
    height: 10px;

    border-radius: 6px;

    background: linear-gradient(
        90deg,
        #00ffff,
        #007bff,
        #28a745,
        #ffd43b,
        #fd7e14,
        #dc3545
    );
}


/* Escala */

.temp-scale {
    display: flex;
    justify-content: space-between;

    margin-top: 4px;
    padding: 0 2px;

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

    color: #fff;
}


/* ===================================================================================================================
   📢 FOOTER Y RELOJ POR ENCIMA DEL CARD
// ================================================================================================================ */

.footer {
    position: absolute;
    z-index: 40;
}

.footer-clock,
.clock {
    position: relative;
    z-index: 60;
}

.weather-standby-card {
    display: none;
    height: 50px;
    width: 415px;
    padding: 14px 18px;

    border-radius: 0 12px 0 0;
    border-left: 6px solid var(--codelis-logoL-rgb);

    background: linear-gradient(90deg, #38154b, #2f012c);

    backdrop-filter: blur(6px);

    color: var(--blanco);
}

.footer-left-stack.is-standby .footer-region,
.footer-left-stack.is-standby .footer-ciudades-weather {
    display: none;
}

.footer-left-stack.is-standby .weather-standby-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.weather-standby-title {
    font-size: 16px;
    font-weight: 900;
    line-height: 1.1;
}

#weather-standby-timer {
    color: var(--warning);
    font-size: 22px;
}