/* =========================================================
   EL TIEMPO
   ========================================================= */

.weather-title-strip {
    padding: 34px 0 30px;

    background: #ffffff;

    border-bottom: 1px solid #dfe6e6;
}

.weather-eyebrow {
    display: block;

    margin-bottom: 7px;

    color: #008080;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.weather-title-strip h1 {
    margin: 0;

    color: #163e44;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.05;
}

.weather-title-strip p {
    margin: 9px 0 0;

    color: #68797b;

    font-size: 15px;
}


.weather-page {
    padding: 42px 0 68px;

    background: #eef1f1;
}


/* =========================================================
   CARGA / ERROR
   ========================================================= */

.weather-loading,
.weather-error {
    padding: 45px 25px;

    background: #ffffff;

    border: 1px solid #dde5e5;

    text-align: center;

    color: #587074;
}

.weather-error {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.weather-error strong {
    color: #173f45;

    font-size: 20px;
}


/* =========================================================
   TIEMPO ACTUAL
   ========================================================= */

.weather-current-card {
    display: grid;

    grid-template-columns:
        minmax(330px, .9fr)
        minmax(0, 1.5fr);

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dce4e4;

    box-shadow:
        0 6px 22px rgba(18, 56, 60, .07);
}


.weather-current-main {
    min-height: 250px;

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

    gap: 27px;

    padding: 34px;

    background: #008080;
    color: #ffffff;
}


.weather-current-icon {
    min-width: 90px;

    color: #ffd451;

    font-size: 76px;
    line-height: 1;

    text-align: center;
}


.weather-current-label {
    display: block;

    margin-bottom: 4px;

    color: rgba(255,255,255,.75);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}


.weather-current-temperature {
    display: flex;
    align-items: flex-start;

    line-height: 1;
}

.weather-current-temperature strong {
    font-size: 70px;
    font-weight: 500;
}

.weather-current-temperature span {
    margin-top: 8px;

    font-size: 25px;
}


.weather-current-description {
    margin-top: 7px;

    font-size: 19px;
    font-weight: 600;
}


.weather-current-feels {
    margin-top: 8px;

    color: rgba(255,255,255,.82);

    font-size: 12px;
}


.weather-current-details {
    display: grid;

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

    align-content: stretch;
}


.weather-detail {
    min-height: 125px;

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

    gap: 7px;

    padding: 18px;

    border-left: 1px solid #e1e7e7;
    border-bottom: 1px solid #e1e7e7;

    text-align: center;
}


.weather-detail span {
    color: #718285;

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

    text-transform: uppercase;
}


.weather-detail strong {
    color: #173f45;

    font-family: Georgia, serif;
    font-size: 20px;
}


/* =========================================================
   SECCIONES
   ========================================================= */

.weather-section {
    margin-top: 34px;

    padding: 24px;

    background: #ffffff;

    border: 1px solid #dce4e4;
}


.weather-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 21px;

    padding-bottom: 14px;

    border-bottom: 2px solid #008080;
}


.weather-section-header > div:first-child > span {
    display: block;

    margin-bottom: 4px;

    color: #008080;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}


.weather-section-header h2 {
    margin: 0;

    color: #173f45;

    font-family: Georgia, serif;
    font-size: 29px;
}


/* =========================================================
   HORAS
   ========================================================= */

.weather-hourly {
    display: grid;

    grid-template-columns:
        repeat(8, minmax(105px, 1fr));

    overflow-x: auto;

    padding-bottom: 7px;
}


.weather-hour {
    min-width: 105px;

    padding: 14px 8px;

    border-right: 1px solid #e4e8e8;

    text-align: center;
}

.weather-hour:last-child {
    border-right: 0;
}


.weather-hour-time {
    display: block;

    color: #627477;

    font-size: 11px;
    font-weight: 700;
}


.weather-hour-icon {
    display: block;

    margin: 12px 0 8px;

    font-size: 30px;
    line-height: 1;
}


.weather-hour-temp {
    display: block;

    color: #173f45;

    font-size: 18px;
    font-weight: 800;
}


.weather-hour-rain {
    display: block;

    margin-top: 6px;

    color: #008080;

    font-size: 10px;
}


/* =========================================================
   SELECTOR 7 / 15
   ========================================================= */

.forecast-switch {
    display: flex;

    padding: 3px;

    background: #edf3f3;

    border-radius: 3px;
}


.forecast-switch button {
    min-height: 36px;

    padding: 0 15px;

    border: 0;

    background: transparent;
    color: #4d6568;

    font: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}


.forecast-switch button.is-active {
    background: #008080;
    color: #ffffff;
}


/* =========================================================
   DÍAS
   ========================================================= */

.weather-daily {
    display: grid;

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

    gap: 10px;
}


.weather-day {
    min-width: 0;

    padding: 17px 10px;

    background: #f8fafa;

    border: 1px solid #e1e7e7;

    text-align: center;
}


.weather-day-name {
    display: block;

    color: #173f45;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
}


.weather-day-date {
    display: block;

    margin-top: 3px;

    color: #7c8a8c;

    font-size: 10px;
}


.weather-day-icon {
    display: block;

    margin: 14px 0 10px;

    font-size: 34px;
    line-height: 1;
}


.weather-day-description {
    min-height: 30px;

    display: block;

    color: #54696c;

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


.weather-day-temperatures {
    margin-top: 10px;

    font-size: 14px;
}


.weather-day-max {
    color: #173f45;

    font-weight: 800;
}


.weather-day-min {
    color: #849194;
}


.weather-day-extra {
    display: flex;
    flex-direction: column;

    gap: 3px;

    margin-top: 10px;

    color: #6c7e80;

    font-size: 9px;
}


.weather-source {
    margin: 18px 0 0;

    color: #7d8c8e;

    font-size: 10px;

    text-align: right;
}


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

@media (max-width: 1050px) {

    .weather-current-card {
        grid-template-columns:
            minmax(300px, .8fr)
            minmax(0, 1.2fr);
    }

    .weather-current-details {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .weather-daily {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


@media (max-width: 760px) {

    .weather-title-strip {
        padding: 25px 0 22px;
    }

    .weather-title-strip h1 {
        font-size: 36px;
    }

    .weather-page {
        padding: 26px 0 45px;
    }

    .weather-current-card {
        grid-template-columns: 1fr;
    }

    .weather-current-main {
        min-height: 205px;
    }

    .weather-current-details {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .weather-detail {
        min-height: 95px;
    }

    .weather-section {
        padding: 17px;
    }

    .forecast-header {
        align-items: flex-start;
        flex-direction: column;
    }

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

}


@media (max-width: 440px) {

    .weather-current-main {
        gap: 14px;

        padding: 25px 16px;
    }

    .weather-current-icon {
        min-width: 65px;

        font-size: 55px;
    }

    .weather-current-temperature strong {
        font-size: 56px;
    }

    .weather-current-description {
        font-size: 16px;
    }

    .weather-detail strong {
        font-size: 17px;
    }

}


/* Los bloques con atributo hidden nunca deben mostrarse */
.weather-loading[hidden],
.weather-content[hidden],
.weather-error[hidden] {
    display: none !important;
}


/* El Tiempo dentro de la plantilla interior */
.weather-page .interior-layout {
    align-items: start;
}

.weather-page .weather-daily {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

@media (max-width: 760px) {

    .weather-page .weather-daily {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}