/* public/vendor/weather/css/suaton-weather-widget.css */

.weather-widget {
    transition: all 0.3s ease;
}

.weather-widget .card-header {
    background: linear-gradient(135deg, #0d6efd, #084298);
}

.weather-widget .temperature {
    font-size: 2.5rem;
    font-weight: 700;
}

.weather-widget .weather-description {
    font-size: 1.1rem;
    color: #6c757d;
}

.weather-widget .forecast-container {
    overflow-x: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -5px;
}

.weather-widget .forecast-day {
    margin: 0 5px;
    transition: transform 0.2s ease;
    min-width: 100px;
}

.weather-widget .forecast-day:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.weather-widget .forecast-temp .temp-max {
    color: #dc3545;
    font-weight: 600;
}

.weather-widget .forecast-temp .temp-min {
    color: var(--bs-primary) !important;
    font-weight: 600;
}

/* Estilos para diferentes condiciones climáticas */
.weather-widget.weather-clear {
    background-color: #f8f9fa;
}

.weather-widget.weather-clouds {
    background-color: #f1f3f5;
}

.weather-widget.weather-rain {
    background-color: #e9ecef;
}

.weather-widget.weather-snow {
    background-color: #ffffff;
}

.weather-widget.weather-thunderstorm {
    background-color: #d8dbe2;
}

/* Animaciones para iconos del tiempo */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.weather-widget .weather-icon {
    animation: pulse 2s infinite ease-in-out;
}

/* Adaptaciones para móvil */
@media (max-width: 767.98px) {
    .weather-widget .row {
        flex-direction: column;
    }

    .weather-widget .forecast-container {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 10px;
    }

    .weather-widget .forecast-day {
        min-width: 110px;
        margin: 0 5px;
    }
}

/* Tema oscuro (opcional - se activa con la clase dark-theme) */
.weather-widget.dark-theme {
    background-color: #212529;
    color: #f8f9fa;
}

.weather-widget.dark-theme .card {
    background-color: #343a40;
    border-color: #495057;
}

.weather-widget.dark-theme .card-footer {
    background-color: #212529;
    border-color: #495057;
}

.weather-widget.dark-theme .list-group-item {
    background-color: #343a40;
    color: #f8f9fa;
    border-color: #495057;
}

.weather-widget.dark-theme .text-muted {
    color: #adb5bd !important;
}

.weather-widget.dark-theme .forecast-day {
    background-color: #2b3035;
    border-color: #495057;
}
.weather-widget .card-body{
    padding: unset!important;
}