/* ============================================================
   METEO MANCHUELA - ESTILOS COMPLETOS v3
   ============================================================ */

/* ===== BOTÓN INSTALAR ===== */
.compartir-btn.instalar {
    background: linear-gradient(135deg, #00f2fe, #4facfe);
    color: #0a0f1e;
    font-weight: 600;
    padding: 10px;
    width: 100%;
    grid-column: 1 / -1;
    margin-top: 4px;
    font-size: 0.8rem;
}

.compartir-btn.instalar:hover {
    background: linear-gradient(135deg, #00d4e0, #3a8fcb);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 242, 254, 0.3);
}

.compartir-btn.instalar i {
    font-size: 1rem;
    margin-right: 6px;
}

.compartir-btn.instalar .badge-nuevo {
    background: #ff6b6b;
    color: white;
    font-size: 0.55rem;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    font-weight: 700;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ===== BOTÓN COMPARTIR ===== */
.btn-compartir {
    background: rgba(0, 242, 254, 0.15);
    border: 1px solid rgba(0, 242, 254, 0.3);
    color: #00f2fe;
    padding: 4px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.65rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-compartir:hover {
    background: rgba(0, 242, 254, 0.25);
    transform: scale(1.02);
}

.btn-compartir i {
    font-size: 0.7rem;
}

/* ===== MODAL COMPARTIR ===== */
.modal-compartir {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    z-index: 999999;
    align-items: center;
    justify-content: center;
}

.modal-compartir-content {
    background: #0a0f1e;
    border: 1px solid rgba(0, 242, 254, 0.2);
    border-radius: 12px;
    padding: 16px 20px 20px 20px;
    max-width: 280px;
    width: 90%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
    animation: slideUp 0.25s ease;
}

.close-compartir {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 1.2rem;
    color: #6a88aa;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
}

.close-compartir:hover {
    color: #ff6b6b;
}

.compartir-opciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 4px;
}

.compartir-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 8px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.7rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
    color: white;
}

.compartir-btn i {
    font-size: 0.9rem;
}

.compartir-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.compartir-btn.whatsapp { background: #25D366; }
.compartir-btn.whatsapp:hover { background: #1da851; }
.compartir-btn.telegram { background: #0088cc; }
.compartir-btn.telegram:hover { background: #006fa8; }
.compartir-btn.email { background: #6a88aa; }
.compartir-btn.email:hover { background: #5577a0; }
.compartir-btn.copiar { background: #3a4a6a; }
.compartir-btn.copiar:hover { background: #2a3a5a; }

@keyframes slideUp {
    from { transform: translateY(20px) scale(0.95); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* ===== TOAST DE COPIA ===== */
.toast-copia {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(32, 201, 151, 0.9);
    color: white;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-family: 'Inter', sans-serif;
    z-index: 1000000;
    animation: toastAnim 2.5s ease forwards;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

@keyframes toastAnim {
    0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
    15% { opacity: 1; transform: translateX(-50%) translateY(0); }
    85% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* ===== BOTÓN FAVORITO ===== */
.favorito-btn {
    background: rgba(0, 20, 40, 0.8);
    border: 1px solid rgba(0, 242, 254, 0.4);
    color: #f9ca24;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.favorito-btn:hover {
    background: rgba(0, 242, 254, 0.2);
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
}

.favorito-btn.activo {
    color: #f9ca24;
    background: rgba(249, 202, 36, 0.2);
    border-color: #f9ca24;
}

.favorito-btn.activo i {
    font-weight: 900;
}

/* ===== ICONO CARGAR ESTACIÓN EN RANKINGS ===== */
.ranking-item {
    position: relative;
    transition: all 0.2s ease;
}

.cargar-estacion {
    opacity: 0;
    margin-left: 8px;
    font-size: 0.7rem;
    color: #00f2fe;
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 20px;
    background: rgba(0, 242, 254, 0.1);
}

.cargar-texto {
    font-size: 0.6rem;
    font-weight: normal;
}

.ranking-item:hover .cargar-estacion {
    opacity: 1;
}

.cargar-estacion:hover {
    transform: scale(1.05);
    background: rgba(0, 242, 254, 0.3);
    color: #00f2fe;
}

/* Tooltip al pasar el ratón por el icono */
.cargar-estacion:hover::after {
    content: "Cargar esta estación";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #00f2fe;
    font-size: 0.6rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.3rem;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    margin-bottom: 5px;
}

.ranking-item .nombre {
    cursor: default;
}

@media (max-width: 680px) {
    .cargar-estacion {
        opacity: 1;
    }
    .cargar-texto {
        display: none;
    }
}

/* ===== ESTILOS BASE ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: linear-gradient(135deg, #0a0f1e 0%, #0c1222 50%, #0a0f1e 100%);
    font-family: 'Inter', sans-serif;
    padding: 2rem 1.8rem;
    color: #e2e8f0;
    min-height: 100vh;
}

.container { max-width: 1600px; margin: 0 auto; }

.header-modern {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.title-area h1 {
    font-size: 2.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #00f2fe, #4facfe, #00f2fe);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.5px;
    text-shadow: 0 0 20px rgba(0, 242, 254, 0.3);
}

.title-area p {
    color: #8ba3c4;
    font-weight: 500;
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.live-badge {
    background: rgba(0, 20, 40, 0.85);
    backdrop-filter: blur(12px);
    padding: 0.4rem 1rem;
    border-radius: 100px;
    color: #00f2fe;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.3px;
    border: 1px solid rgba(0, 242, 254, 0.4);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.2);
}

.live-badge i {
    margin-right: 6px;
    color: #00f2fe;
    animation: pulse 1.5s infinite;
    font-size: 0.5rem;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes dataFlash { 0% { filter: brightness(1); } 50% { filter: brightness(1.6); } 100% { filter: brightness(1); } }

.card-value.flash { animation: dataFlash 0.6s ease; }

.status-badge {
    background: rgba(0, 242, 254, 0.15);
    border-radius: 30px;
    padding: 2px 8px;
    font-size: 0.6rem;
    margin-left: 8px;
    color: #00f2fe;
    border: 1px solid rgba(0, 242, 254, 0.3);
}

/* ===== LOGO ===== */
.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 0.3rem;
}

.logo-icon-animated {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #00f2fe;
    background: linear-gradient(145deg, rgba(0,242,254,0.1), rgba(79,172,254,0.05));
    border-radius: 50%;
    border: 2px solid rgba(0,242,254,0.25);
    flex-shrink: 0;
}

.logo-rings { position: absolute; width: 100%; height: 100%; pointer-events: none; }

.ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1.5px solid rgba(0,242,254,0.3);
    animation: ringPulse 3s ease-out infinite;
}

.ring1 { width: 40px; height: 40px; animation-delay: 0s; }
.ring2 { width: 50px; height: 50px; animation-delay: 0.6s; }
.ring3 { width: 60px; height: 60px; animation-delay: 1.2s; }

@keyframes ringPulse {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-main {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: #b8d4ff;
}

.logo-m { color: #ff6b6b; }
.logo-e { color: #ff8c00; }
.logo-t { color: #f9ca24; }
.logo-e2 { color: #20c997; }
.logo-o { color: #4facfe; }
.logo-c { 
    font-weight: 900;
    background: linear-gradient(135deg, #00f2fe, #4facfe, #00f2fe);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: logoShine 3s ease infinite;
    background-size: 200% 200%;
}

@keyframes logoShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.logo-domain {
    font-size: 0.8rem;
    color: #00f2fe;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-left: 1px;
}

.logo-tagline {
    font-size: 0.65rem;
    color: #6a88aa;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* ===== PANEL TIEMPO REAL ===== */
.realtime-panel { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 0.6rem; 
    margin-bottom: 1rem; 
}

.real-card {
    background: rgba(10, 20, 35, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 1.2rem;
    padding: 0.8rem 0.6rem;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    position: relative;
    overflow: hidden;
}

.real-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 242, 254, 0.08), transparent);
    transition: left 0.5s;
}

.real-card:hover::before { left: 100%; }
.real-card:hover { transform: translateY(-4px); }

.real-card:nth-child(1):hover { border-color: #ff6b6b; box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3); }
.real-card:nth-child(2):hover { border-color: #4facfe; box-shadow: 0 8px 20px rgba(79, 172, 254, 0.3); }
.real-card:nth-child(3):hover { border-color: #20c997; box-shadow: 0 8px 20px rgba(32, 201, 151, 0.3); }
.real-card:nth-child(4):hover { border-color: #7c3aed; box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3); }
.real-card:nth-child(5):hover { border-color: #f9ca24; box-shadow: 0 8px 20px rgba(249, 202, 36, 0.3); }

.card-icon { 
    font-size: 2.2rem; 
    margin-bottom: 0.5rem; 
    color: #00f2fe; 
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.5); 
}

.card-label { 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-size: 0.6rem; 
    color: #7f9fcf; 
}

.card-value { 
    font-size: 2.5rem; 
    font-weight: 800; 
    background: linear-gradient(135deg, #fff, #a0c4ff); 
    -webkit-background-clip: text; 
    background-clip: text; 
    color: transparent; 
    line-height: 1; 
    margin: 0.3rem 0 0.1rem; 
    letter-spacing: -1px; 
}

.card-unit { 
    font-size: 0.65rem; 
    font-weight: 600; 
    color: #7f9fcf; 
}

.sub-detail { 
    font-size: 0.55rem; 
    color: #6a88aa; 
    margin-top: 4px; 
    font-weight: 500; 
}

/* ===== BARRAS DE PROGRESO ===== */
.visual-gauge { margin-top: 8px; width: 100%; }

.gauge-bar-container { 
    width: 100%; 
    height: 4px; 
    background: rgba(0, 50, 70, 0.6); 
    border-radius: 10px; 
    overflow: hidden; 
    margin: 4px 0 3px; 
}

.gauge-bar-fill { 
    height: 100%; 
    width: 0%; 
    border-radius: 10px; 
    transition: width 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1); 
}

.gauge-labels { 
    display: flex; 
    justify-content: space-between; 
    font-size: 0.5rem; 
    font-weight: 500; 
    color: #6a88aa; 
    margin-top: 2px; 
}

.gauge-value-text { 
    font-size: 0.6rem; 
    font-weight: 700; 
    margin-top: 2px; 
    color: #00f2fe; 
}

.fill-temp { background: linear-gradient(90deg, #ff6b6b, #ff4757); }
.fill-hum { background: linear-gradient(90deg, #4facfe, #00f2fe); }
.fill-rain { background: linear-gradient(90deg, #5f9ea0, #20c997); }
.fill-wind { background: linear-gradient(90deg, #a8e6cf, #3b82f6); }
.fill-pres { background: linear-gradient(90deg, #f9ca24, #f0932b); }
.fill-solar { background: linear-gradient(90deg, #f9ca24, #ff6b6b); }
.fill-uv { background: linear-gradient(90deg, #20c997, #4facfe); }

/* ===== TEMP RANGE - UNIFICADO Y CORREGIDO ===== */
.temp-range {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-top: 3px !important;  /* Reducido */
    margin-bottom: 2px !important;  /* Nuevo */
    font-size: 0.55rem !important;
    gap: 2px 8px !important;  /* gap vertical reducido a 2px */
    line-height: 1.2 !important;  /* Reducir interlineado */
}

/* Tarjeta de precipitación: centrado y separado */
.real-card:first-child .temp-range {
    justify-content: center !important;
    gap: 2px 12px !important;  /* gap vertical reducido */
}

/* Tarjetas de temperatura y humedad: max/min centrados */
.real-card:nth-child(2) .temp-range,
.real-card:nth-child(4) .temp-range {
    justify-content: center !important;
    gap: 2px 1.8rem !important;  /* gap vertical reducido */
}

/* Cada elemento (Máx y Mín) */
.temp-range .range-high,
.temp-range .range-low {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    padding: 0px !important;  /* Eliminar padding extra */
    margin: 0px !important;  /* Eliminar margin extra */
}

/* Números */
.temp-range .range-high span,
.temp-range .range-low span {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}

/* Colores */
.temp-range .range-high { color: #ff6b6b !important; }
.temp-range .range-low { color: #4facfe !important; }
.range-mid { color: #f9ca24; font-weight: 500; }

/* Iconos */
.temp-range .range-high i,
.temp-range .range-low i {
    font-size: 0.6rem !important;
}

/* ===== PRECIPITACIÓN - MENSUAL Y ANUAL ===== */
.real-card:first-child .range-mid,
.real-card:first-child .range-low {
    font-size: 0.6rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    white-space: nowrap !important;
    padding: 0px !important;
    margin: 0px !important;
}

#precipMes,
#precipAnual,
#precipAyer {
    font-size: 0.85rem !important;  /* Reducido de 1rem */
    font-weight: 700 !important;
    display: inline-block !important;
    width: auto !important;
    text-align: center !important;
    padding: 0 2px !important;
}

#precipMes {
    color: #20c997 !important;
}

#precipAnual {
    color: #f9ca24 !important;
}

#precipAyer {
    color: #4facfe !important;
    transition: color 0.3s ease;
}

.real-card:first-child .range-mid i,
.real-card:first-child .range-low i {
    font-size: 0.5rem !important;
    flex-shrink: 0 !important;
}

/* Cuando saltan a nueva línea, que queden juntos */
.real-card:first-child .temp-range .range-mid,
.real-card:first-child .temp-range .range-low {
    margin: 0px !important;
    padding: 0px 2px !important;
}
/* ===== ANIMACIONES DE CALOR (CORREGIDAS) ===== */
.real-card.hot-card {
    border-color: #ff6b6b !important;
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.5) !important;
    background: linear-gradient(135deg, rgba(10, 20, 35, 0.8), rgba(150, 0, 0, 0.3)) !important;
    animation: heatPulse 0.8s ease-in-out infinite !important;
}

.real-card.extreme-hot-card {
    border-color: #ff4757 !important;
    box-shadow: 0 0 25px rgba(255, 71, 87, 0.7) !important;
    background: linear-gradient(135deg, rgba(10, 20, 35, 0.8), rgba(200, 0, 0, 0.4)) !important;
    animation: heatPulseFast 0.4s ease-in-out infinite !important;
}

@keyframes heatPulse {
    0%, 100% { 
        border-color: #ff6b6b; 
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.5); 
    }
    50% { 
        border-color: #ff4757; 
        box-shadow: 0 0 30px rgba(255, 71, 87, 0.8); 
    }
}

@keyframes heatPulseFast {
    0%, 100% { 
        border-color: #ff4757; 
        box-shadow: 0 0 20px rgba(255, 71, 87, 0.6); 
    }
    50% { 
        border-color: #ff0000; 
        box-shadow: 0 0 35px rgba(255, 0, 0, 0.9); 
    }
}

/* Animación del icono de temperatura (solo calor) */
.real-card.hot-card .card-icon i,
.real-card.extreme-hot-card .card-icon i {
    animation: tempHotPulse 0.8s ease-in-out infinite !important;
    color: #ff4757 !important;
    text-shadow: 0 0 15px rgba(255, 71, 87, 0.8) !important;
}

.real-card.extreme-hot-card .card-icon i {
    animation: tempHotPulse 0.4s ease-in-out infinite !important;
    color: #ff0000 !important;
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.8) !important;
}

@keyframes tempHotPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Texto de alerta de temperatura */
.temp-warning {
    font-size: 0.55rem;
    margin-top: 4px;
    font-weight: 600;
    animation: fadeInOut 2s ease-in-out infinite;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ===== ANIMACIONES DE ICONOS EN TIEMPO REAL ===== */
@keyframes rainDrop {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-4px); }
    75% { transform: translateY(2px); }
}
@keyframes tempPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
@keyframes windBlow {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}
@keyframes humidityWave {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.8); }
}
@keyframes pressurePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.card-icon.raining i {
    animation: rainDrop 0.6s ease-in-out infinite;
    color: #4facfe;
    text-shadow: 0 0 15px rgba(79, 172, 254, 0.8);
}

.card-icon.hot i {
    animation: tempPulse 0.8s ease-in-out infinite;
    color: #ff4757;
    text-shadow: 0 0 20px rgba(255, 71, 87, 0.8);
}

.card-icon.cold i {
    animation: tempPulse 1.5s ease-in-out infinite;
    color: #4facfe;
    text-shadow: 0 0 15px rgba(79, 172, 254, 0.8);
}

.card-icon.windy i {
    animation: windBlow 0.7s ease-in-out infinite;
    color: #a8e6cf;
    text-shadow: 0 0 12px rgba(168, 230, 207, 0.6);
}

.card-icon.humid i {
    animation: humidityWave 0.5s ease-in-out infinite;
    color: #00f2fe;
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.6);
}

.card-icon.pressure-change i {
    animation: pressurePulse 2s ease-in-out infinite;
    color: #f9ca24;
    text-shadow: 0 0 12px rgba(249, 202, 36, 0.6);
}

/* ===== RESPONSIVE TIEMPO REAL ===== */
@media (max-width: 680px) {
    .realtime-panel {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 0.4rem;
    }
    .real-card {
        padding: 0.5rem 0.3rem;
        border-radius: 1rem;
    }
    .real-card .card-icon { 
        font-size: 1.2rem;
        margin-bottom: 0.2rem;
    }
    .real-card .card-label {
        font-size: 0.5rem;
    }
    .real-card .card-value {
        font-size: 3.0rem !important;
        margin: 0.2rem 0 0.1rem !important;
    }
    .real-card .card-unit {
        font-size: 0.55rem;
    }
    .real-card .sub-detail {
        font-size: 0.5rem;
    }
    .real-card .temp-range {
        font-size: 0.5rem;
    }
    .visual-gauge {
        margin-top: 5px;
    }
    .gauge-bar-container {
        height: 3px;
    }
    .gauge-labels {
        font-size: 0.45rem;
    }
    .gauge-value-text {
        font-size: 0.55rem;
    }
}

@media (max-width: 768px) {
    .real-card:nth-child(2) .temp-range,
    .real-card:nth-child(4) .temp-range {
        gap: 1.2rem !important;
    }
    
    .temp-range .range-high,
    .temp-range .range-low {
        font-size: 0.65rem !important;
    }
    
    .temp-range .range-high span,
    .temp-range .range-low span {
        font-size: 0.9rem !important;
    }
    
    .real-card:first-child .temp-range {
        gap: 0.5rem !important;
    }
    
    .real-card:first-child .range-mid,
    .real-card:first-child .range-low {
        font-size: 0.6rem !important;
    }
    
    #precipMes,
    #precipAnual {
        font-size: 0.85rem !important;
        padding: 0 3px !important;
        width: auto !important;
    }
}

@media (max-width: 480px) {
    .realtime-panel { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
    .real-card { padding: 1rem 0.5rem; border-radius: 1.2rem; }
    .card-value { font-size: 2rem; }
    
    .real-card:nth-child(2) .temp-range,
    .real-card:nth-child(4) .temp-range {
        gap: 0.8rem !important;
        flex-direction: row !important;
    }
    
    .temp-range .range-high,
    .temp-range .range-low {
        font-size: 0.6rem !important;
    }
    
    .temp-range .range-high span,
    .temp-range .range-low span {
        font-size: 0.8rem !important;
    }
    
    .real-card:first-child .temp-range {
        gap: 0.3rem !important;
    }
    
    .real-card:first-child .range-mid,
    .real-card:first-child .range-low {
        font-size: 0.55rem !important;
    }
    
    #precipMes,
    #precipAnual {
        font-size: 0.75rem !important;
        padding: 0 2px !important;
        width: auto !important;
    }
    
    .live-badge {
        padding: 0.4rem 0.8rem;
        font-size: 0.65rem;
        letter-spacing: 0.1px;
    }
    .live-badge i {
        margin-right: 4px;
        font-size: 0.5rem;
    }
    .status-badge {
        padding: 2px 8px;
        font-size: 0.55rem;
        margin-left: 6px;
    }
}

/* ===== GRÁFICOS ===== */
.graphics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1rem; margin: 0.8rem 0; }
.graph-card { background: rgba(10, 20, 35, 0.75); backdrop-filter: blur(12px); border-radius: 1.5rem; padding: 1rem 0.8rem; border: 1px solid rgba(0, 242, 254, 0.1); transition: all 0.2s; }
.graph-card:hover { border-color: rgba(0, 242, 254, 0.3); box-shadow: 0 8px 25px rgba(0, 242, 254, 0.1); }
.graph-title { font-weight: 700; font-size: 0.95rem; padding-left: 1rem; margin-bottom: 0.7rem; display: flex; align-items: center; gap: 8px; color: #b8d4ff; border-left: 3px solid #00f2fe; }
canvas { max-height: 200px; width: 100% !important; }

/* ===== MAPA ===== */
.map-section { background: rgba(10, 20, 35, 0.75); backdrop-filter: blur(12px); border-radius: 1.5rem; padding: 1.3rem; margin: 0.8rem 0 0.5rem; border: 1px solid rgba(0, 242, 254, 0.2); }
.map-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.2rem; }
.map-title { display: flex; align-items: center; gap: 10px; }
.map-title i { font-size: 1.4rem; color: #00f2fe; }
.map-title h3 { font-weight: 700; color: #b8d4ff; font-size: 1.2rem; }
.map-coords { font-size: 0.7rem; color: #6a88aa; background: rgba(0,0,0,0.3); padding: 4px 12px; border-radius: 20px; }
.map-container { width: 100%; min-height: 400px; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(0, 242, 254, 0.3); background: #e8e8e8; }
.map-attribution { font-size: 0.65rem; color: #6a88aa; margin-top: 0.8rem; text-align: center; }
.leaflet-control-zoom a { background: rgba(255,255,255,0.9) !important; color: #333 !important; border: 1px solid #ccc !important; }
.leaflet-control-zoom a:hover { background: #f4f4f4 !important; }
.leaflet-control-attribution { background: rgba(255,255,255,0.8) !important; color: #333 !important; font-size: 0.65rem !important; }

/* ===== POPUP ===== */
.leaflet-popup-content-wrapper {
    background: #0a0f1e !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(0, 242, 254, 0.2) !important;
}
.leaflet-popup-tip { background: #0a0f1e !important; }
.leaflet-popup-close-button { color: #00f2fe !important; }

/* ===== PANEL DE CAPAS SUPERPUESTO ===== */
.map-layers-panel {
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 1000;
    background: transparent;
    border-radius: 0.8rem;
    padding: 0.3rem 0.4rem;
    border: none;
    max-width: 220px;
}

.layers-panel-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.65rem;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    text-shadow: 0 0 8px rgba(0,0,0,0.9);
    background: rgba(0,0,0,0.3);
    padding: 2px 8px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

.layers-panel-title i {
    font-size: 0.6rem;
    transition: transform 0.3s;
}

.layers-panel-title.collapsed i {
    transform: rotate(-90deg);
}

.layers-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 160px;
    overflow-y: auto;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    padding: 2px 4px;
    background: rgba(0,0,0,0.25);
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

.layers-list.hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
}

.layer-categoria {
    display: block;
    width: 100%;
    color: #00f2fe;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 0 1px 0;
    margin-top: 2px;
    border-bottom: 1px solid rgba(0,242,254,0.15);
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
}

.layer-categoria:first-of-type { margin-top: 0; }

.layer-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255,255,255,0.8);
    padding: 1px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.55rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    transition: all 0.15s ease;
    white-space: nowrap;
    text-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.layer-btn:hover {
    background: rgba(0, 242, 254, 0.15);
    border-color: rgba(0, 242, 254, 0.3);
    color: #00f2fe;
}

.layer-btn.active {
    background: rgba(0, 242, 254, 0.2);
    border-color: rgba(0, 242, 254, 0.4);
    color: #00f2fe;
    font-weight: 500;
}

.layers-list::-webkit-scrollbar { width: 2px; }
.layers-list::-webkit-scrollbar-track { background: transparent; }
.layers-list::-webkit-scrollbar-thumb { background: rgba(0, 242, 254, 0.2); border-radius: 2px; }

/* ===== TABLAS ===== */
.historical-section { background: rgba(10, 20, 35, 0.7); backdrop-filter: blur(12px); border-radius: 1.5rem; padding: 1.3rem; margin-top: 1rem; border: 1px solid rgba(0, 242, 254, 0.1); }
.section-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; margin-bottom: 1rem; }
.section-header h3 { font-weight: 700; color: #b8d4ff; font-size: 1.1rem; }
.table-wrapper { overflow-x: auto; border-radius: 1rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
th { text-align: left; padding: 0.7rem 0.5rem; background: rgba(0, 242, 254, 0.08); font-weight: 600; color: #00f2fe; cursor: pointer; user-select: none; }
th:hover { background: rgba(0, 242, 254, 0.15); }
td { padding: 0.5rem 0.5rem; border-bottom: 1px solid rgba(0, 242, 254, 0.1); color: #b8d4ff; }
tr:hover td { background-color: rgba(0, 242, 254, 0.05); }

.annual-section { background: rgba(10, 20, 35, 0.75); backdrop-filter: blur(12px); border-radius: 1.5rem; padding: 1.5rem; margin-top: 2rem; border: 1px solid rgba(0, 242, 254, 0.2); }
.annual-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.annual-title { display: flex; align-items: center; gap: 12px; }
.annual-title i { font-size: 1.5rem; color: #00f2fe; }
.annual-title h2 { font-size: 1.3rem; font-weight: 700; color: #b8d4ff; }

.search-box { background: rgba(0, 20, 40, 0.8); border: 1px solid rgba(0, 242, 254, 0.3); border-radius: 40px; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 8px; }
.search-box i { color: #00f2fe; font-size: 0.8rem; }
.search-box input { background: transparent; border: none; color: white; font-size: 0.8rem; outline: none; width: 200px; }
.search-box input::placeholder { color: #6a88aa; }

.table-info { font-size: 0.7rem; color: #6a88aa; margin-top: 1rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.sort-icon { cursor: pointer; margin-left: 4px; font-size: 0.7rem; color: #00f2fe; }
.annual-table-wrapper { border-radius: 1rem; }
.annual-table-wrapper.open { max-height: 550px; overflow-y: auto; }
.badge-year { background: rgba(0, 242, 254, 0.2); padding: 4px 12px; border-radius: 20px; font-size: 0.7rem; color: #00f2fe; }
.precip-mm { color: #20c997; font-weight: 600; }

footer { margin-top: 2rem; text-align: center; font-size: 0.7rem; opacity: 0.6; color: #6a88aa; }
.loader { text-align: center; padding: 2rem; color: #00f2fe; }

/* ===== PANEL DE REDES SOCIALES ===== */
.social-panel {
    background: rgba(10, 20, 35, 0.7);
    backdrop-filter: blur(12px);
    border-radius: 1.5rem;
    padding: 1.5rem;
    margin: 2rem 0;
    text-align: center;
    border: 1px solid rgba(0, 242, 254, 0.15);
}

.social-title {
    color: #b8d4ff;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.social-title i { color: #00f2fe; font-size: 1.1rem; }

.social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.social-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    color: #fff;
}

.social-btn i { font-size: 1rem; transition: transform 0.3s ease; }
.social-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.3); }
.social-btn:hover i { transform: scale(1.2); }

.social-btn.twitter { background: rgba(29, 161, 242, 0.2); border-color: rgba(29, 161, 242, 0.4); }
.social-btn.twitter:hover { background: rgba(29, 161, 242, 0.4); box-shadow: 0 8px 25px rgba(29, 161, 242, 0.3); }
.social-btn.facebook { background: rgba(66, 103, 178, 0.2); border-color: rgba(66, 103, 178, 0.4); }
.social-btn.facebook:hover { background: rgba(66, 103, 178, 0.4); box-shadow: 0 8px 25px rgba(66, 103, 178, 0.3); }
.social-btn.instagram { background: rgba(225, 48, 108, 0.2); border-color: rgba(225, 48, 108, 0.4); }
.social-btn.instagram:hover { background: rgba(225, 48, 108, 0.4); box-shadow: 0 8px 25px rgba(225, 48, 108, 0.3); }
.social-btn.email { background: rgba(0, 242, 254, 0.2); border-color: rgba(0, 242, 254, 0.4); }
.social-btn.email:hover { background: rgba(0, 242, 254, 0.4); box-shadow: 0 8px 25px rgba(0, 242, 254, 0.3); }

.social-hashtag {
    color: #6a88aa;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

@media (max-width: 480px) {
    .social-links { flex-direction: column; align-items: center; }
    .social-btn { width: 80%; justify-content: center; }
}

/* ===== RESPONSIVE GENERAL ===== */
@media (max-width: 680px) { 
    body { padding: 1rem; } 
    .card-value { font-size: 2.8rem; } 
    .annual-table-wrapper { font-size: 0.7rem; } 
    .layers-list { gap: 0.3rem; }
    .layer-btn { padding: 0.3rem 0.5rem; font-size: 0.6rem; }
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast-notification {
    position: fixed;
    bottom: 100px;
    right: 20px;
    background: rgba(10, 20, 35, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b8d4ff;
    font-size: 0.8rem;
    font-weight: 500;
    z-index: 10000;
    transform: translateX(120%);
    transition: transform 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.toast-notification.show { transform: translateX(0); }
.toast-notification.success i { color: #20c997; }
.toast-notification.error i { color: #ff6b6b; }
.toast-notification.info i { color: #00f2fe; }

/* ===== BOTÓN DE TEMA ===== */
.theme-toggle {
    background: rgba(0, 20, 40, 0.8);
    border: 1px solid rgba(0, 242, 254, 0.4);
    color: #00f2fe;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.theme-toggle:hover {
    background: rgba(0, 242, 254, 0.2);
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
}

.theme-toggle:active { transform: scale(0.95); }

/* ===== TEMA CLARO ===== */
body.light-theme #estacionSelect {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 242, 254, 0.5);
    color: #1a2a3a;
}

body.light-theme #estacionSelect option {
    background: #ffffff;
    color: #1a2a3a;
}

body.light-theme .theme-toggle {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 242, 254, 0.5);
    color: #0a6a8a;
}

body.light-theme .chart-expand-btn {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #0a6a8a;
}

body.light-theme .chart-expand-btn:hover {
    background: rgba(0, 242, 254, 0.3);
    color: #1a2a3a;
}

body.light-theme .graph-control-btn {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #0a6a8a;
}

body.light-theme .graph-control-btn:hover {
    background: rgba(0, 242, 254, 0.3);
    color: #1a2a3a;
}

body.light-theme .chart-modal-header {
    background: rgba(240, 245, 250, 0.95);
    border: 1px solid rgba(0, 242, 254, 0.3);
}

body.light-theme .chart-modal-header span { color: #1a2a3a; }

body.light-theme .chart-modal-canvas-wrapper {
    background: rgba(240, 245, 250, 0.95);
    border: 1px solid rgba(0, 242, 254, 0.3);
}

body.light-theme .chart-modal-close {
    background: rgba(220, 53, 69, 0.8);
    color: #fff;
}

body.light-theme .chart-modal-close:hover { background: rgba(220, 53, 69, 1); }

body.light-theme {
    background: linear-gradient(135deg, #e8ecf1 0%, #d4dce6 100%);
}

body.light-theme .real-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

body.light-theme .real-card:hover { border-color: #00f2fe; }
body.light-theme .card-label { color: #4a6a8a; }

body.light-theme .card-value {
    background: linear-gradient(135deg, #1a2a3a, #2a3a4a);
    -webkit-background-clip: text;
    background-clip: text;
}

body.light-theme .card-unit,
body.light-theme .sub-detail,
body.light-theme .gauge-labels,
body.light-theme .temp-range span {
    color: #4a6a8a;
}

body.light-theme .graph-card,
body.light-theme .forecast-section,
body.light-theme .map-section,
body.light-theme .historical-section,
body.light-theme .annual-section,
body.light-theme .social-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-theme .graph-title,
body.light-theme .forecast-title h3,
body.light-theme .map-title h3,
body.light-theme .annual-title h2,
body.light-theme .section-header h3,
body.light-theme .social-title {
    color: #1a2a3a;
}

body.light-theme th {
    background: rgba(0, 242, 254, 0.15);
    color: #0a6a8a;
}

body.light-theme .table-info,
body.light-theme .forecast-updated,
body.light-theme .map-attribution,
body.light-theme footer {
    color: #6a8aaa;
}

body.light-theme .search-box {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 242, 254, 0.3);
}

body.light-theme .search-box input {
    color: #1a2a3a;
}

body.light-theme .search-box input::placeholder {
    color: #8aa0b5;
}

body.light-theme .live-badge,
body.light-theme .theme-toggle,
body.light-theme #estacionSelect {
    background: rgba(255, 255, 255, 0.85);
    color: #0a6a8a;
    border-color: rgba(0, 242, 254, 0.4);
}

body.light-theme .status-badge {
    background: rgba(0, 242, 254, 0.15);
    color: #0a6a8a;
}

body.light-theme .csv-btn {
    background: rgba(32, 201, 151, 0.15);
    color: #1a8a6a;
}

body.light-theme .csv-btn:hover {
    background: rgba(32, 201, 151, 0.3);
}

body.light-theme .badge-year {
    background: rgba(0, 242, 254, 0.15);
    color: #0a6a8a;
}

body.light-theme .precip-mm {
    color: #1a8a6a;
}

body.light-theme .leaflet-popup-content-wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(0, 242, 254, 0.3) !important;
}

body.light-theme .leaflet-popup-tip {
    background: #ffffff !important;
}

body.light-theme .leaflet-popup-content-wrapper div {
    color: #1a2a3a !important;
}

body,
.real-card,
.graph-card,
.forecast-section,
.map-section,
.historical-section,
.annual-section,
.social-panel,
.live-badge,
.theme-toggle,
#estacionSelect,
.search-box,
.csv-btn,
.leaflet-popup-content-wrapper {
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ===== TABLA RESUMEN VISUAL ===== */
.summary-section {
    background: rgba(10, 20, 35, 0.7);
    backdrop-filter: blur(12px);
    border-radius: 1.5rem;
    padding: 1.3rem;
    margin-top: 1rem;
    border: 1px solid rgba(0, 242, 254, 0.1);
}

.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    cursor: pointer;
}

.summary-header h3 {
    font-weight: 700;
    color: #b8d4ff;
    font-size: 1.1rem;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.summary-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 242, 254, 0.1);
}

.summary-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 242, 254, 0.3);
    background: rgba(0, 242, 254, 0.05);
}

.summary-icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 242, 254, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #00f2fe;
}

.summary-info { flex: 1; }

.summary-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #7f9fcf;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.summary-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #b8d4ff;
    line-height: 1;
}

.summary-unit {
    font-size: 0.7rem;
    color: #6a88aa;
    margin-left: 4px;
}

.summary-date {
    font-size: 0.6rem;
    color: #00f2fe;
    margin-top: 4px;
}

.summary-content {
    max-height: 800px;
    overflow-y: auto;
}

@media (max-width: 680px) {
    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
    .summary-card {
        padding: 0.8rem;
        gap: 0.5rem;
    }
    .summary-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    .summary-value {
        font-size: 1.2rem;
    }
    .summary-label {
        font-size: 0.55rem;
    }
    .summary-unit {
        font-size: 0.55rem;
    }
    .summary-date {
        font-size: 0.5rem;
    }
}

@media (max-width: 480px) {
    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
}

body.light-theme .summary-section {
    background: rgba(255, 255, 255, 0.85);
}

body.light-theme .summary-header h3 {
    color: #1a2a3a;
}

body.light-theme .summary-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .summary-card:hover {
    background: rgba(0, 242, 254, 0.1);
}

body.light-theme .summary-value {
    color: #1a2a3a;
}

body.light-theme .summary-label {
    color: #4a6a8a;
}

/* ===== RESUMEN DE LLUVIA MENSUAL ===== */
.monthly-rain-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 242, 254, 0.2);
}

.monthly-rain-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.monthly-rain-header h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: #b8d4ff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.monthly-rain-total {
    font-size: 0.7rem;
    color: #20c997;
    background: rgba(32, 201, 151, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
}

.monthly-rain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.8rem;
}

.monthly-card {
    background: rgba(0, 242, 254, 0.05);
    border-radius: 0.8rem;
    padding: 0.8rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 242, 254, 0.1);
}

.monthly-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 242, 254, 0.3);
    background: rgba(0, 242, 254, 0.1);
}

.monthly-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: #00f2fe;
    margin-bottom: 8px;
}

.monthly-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: #b8d4ff;
    line-height: 1;
}

.monthly-unit {
    font-size: 0.6rem;
    color: #6a88aa;
}

.monthly-bar-container {
    width: 100%;
    height: 4px;
    background: rgba(0, 50, 70, 0.6);
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0 4px;
}

.monthly-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #20c997, #4facfe);
    border-radius: 4px;
    transition: width 0.6s ease;
}

.monthly-loader {
    text-align: center;
    padding: 1rem;
    color: #6a88aa;
    grid-column: 1 / -1;
}

body.light-theme .monthly-rain-header h4 { color: #1a2a3a; }
body.light-theme .monthly-card { background: rgba(0, 0, 0, 0.03); }
body.light-theme .monthly-card:hover { background: rgba(32, 201, 151, 0.1); }
body.light-theme .monthly-value { color: #1a2a3a; }
body.light-theme .monthly-name { color: #0a6a8a; }

@media (max-width: 680px) { .monthly-rain-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .monthly-rain-grid { grid-template-columns: repeat(3, 1fr); } }

/* ===== PRECIPITACIÓN MENSUAL (SECCIÓN INDEPENDIENTE) ===== */
.monthly-rain-section {
    background: rgba(10, 20, 35, 0.75);
    backdrop-filter: blur(12px);
    border-radius: 1.5rem;
    padding: 1.3rem;
    margin: 1rem 0;
    border: 1px solid rgba(0, 242, 254, 0.2);
}

.monthly-rain-header h4 {
    font-size: 0.9rem;
}

.monthly-rain-total {
    font-size: 0.7rem;
    color: #20c997;
    background: rgba(32, 201, 151, 0.15);
    padding: 4px 12px;
}

.monthly-rain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.8rem;
}

body.light-theme .monthly-rain-section {
    background: rgba(255, 255, 255, 0.85);
}

/* ===== EFECTO DE LLUVIA EN TARJETA ===== */
.real-card.raining-card {
    border-color: #4facfe;
    box-shadow: 0 0 20px rgba(79, 172, 254, 0.5);
    background: linear-gradient(135deg, rgba(10, 20, 35, 0.8), rgba(0, 100, 150, 0.3));
    transition: all 0.3s ease;
}

.real-card.raining-card::before {
    background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.15), transparent);
}

.real-card.heavy-rain-card {
    border-color: #ff6b6b;
    box-shadow: 0 0 25px rgba(255, 107, 107, 0.6);
    background: linear-gradient(135deg, rgba(10, 20, 35, 0.8), rgba(150, 0, 0, 0.3));
}

@keyframes rainGlow {
    0%, 100% { border-color: rgba(79, 172, 254, 0.5); }
    50% { border-color: rgba(79, 172, 254, 1); }
}

.real-card.raining-card {
    animation: rainGlow 1s ease-in-out infinite;
}

.real-card.heavy-rain-card {
    animation: rainGlow 0.5s ease-in-out infinite;
}

.real-card.raining-card .card-icon i {
    animation: rainDrop 0.6s ease-in-out infinite;
    color: #4facfe;
    text-shadow: 0 0 15px rgba(79, 172, 254, 0.8);
}

.real-card.heavy-rain-card .card-icon i {
    animation: rainDrop 0.3s ease-in-out infinite;
    color: #ff6b6b;
    text-shadow: 0 0 15px rgba(255, 107, 107, 0.8);
}

/* ===== ROSA DE LOS VIENTOS ===== */
.wind-rose {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px 0;
    position: relative;
}

.wind-rose-svg {
    width: 70px;
    height: 70px;
    filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.3));
}

.wind-direction-indicator {
    transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    transform-origin: center;
}

.wind-direction-text {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 700;
    color: #00f2fe;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

@media (max-width: 680px) {
    .wind-rose-svg {
        width: 55px;
        height: 55px;
    }
    .wind-direction-text {
        font-size: 0.6rem;
        bottom: -8px;
    }
}

/* ===== MINI GRÁFICOS (SPARKLINES) ===== */
.mini-chart {
    margin-top: 10px;
    padding: 5px 0;
    position: relative;
}

.mini-canvas {
    width: 100%;
    height: 40px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.mini-chart-label {
    font-size: 0.55rem;
    color: #6a88aa;
    text-align: center;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
}

.mini-chart-label span:first-child { color: #4facfe; }
.mini-chart-label span:last-child { color: #ff6b6b; }

body.light-theme .mini-canvas {
    background: rgba(0, 0, 0, 0.05);
}

/* ===== RANKINGS DE ESTACIONES ===== */
.rankings-section {
    background: rgba(10, 20, 35, 0.75);
    backdrop-filter: blur(12px);
    border-radius: 1.5rem;
    padding: 1.3rem;
    margin: 1rem 0;
    border: 1px solid rgba(0, 242, 254, 0.2);
}

.rankings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(0, 242, 254, 0.2);
}

.rankings-header h3 {
    font-weight: 700;
    color: #b8d4ff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rankings-date {
    font-size: 0.7rem;
    color: #6a88aa;
    background: rgba(0, 242, 254, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
}

.rankings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.ranking-card {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 1rem;
    padding: 0.8rem;
    border: 1px solid rgba(0, 242, 254, 0.1);
    transition: all 0.3s ease;
}

.ranking-card:hover {
    border-color: rgba(0, 242, 254, 0.3);
    transform: translateY(-2px);
}

.ranking-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #00f2fe;
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid rgba(0, 242, 254, 0.15);
}

.ranking-title i { font-size: 0.9rem; }
.ranking-unit { font-size: 0.6rem; color: #6a88aa; font-weight: normal; }

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ranking-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.ranking-item:hover {
    background: rgba(0, 242, 254, 0.1);
    transform: translateX(3px);
}

.ranking-item .posicion {
    font-size: 0.65rem;
    font-weight: 700;
    color: #f9ca24;
    min-width: 28px;
}

.ranking-item .nombre {
    flex: 1;
    font-size: 0.7rem;
    font-weight: 500;
    color: #b8d4ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
}

.ranking-item .valor {
    font-size: 0.75rem;
    font-weight: 700;
    color: #20c997;
    text-align: right;
}

.ranking-item.temp-max .valor { color: #ff6b6b; }
.ranking-item.temp-min .valor { color: #4facfe; }
.ranking-item.viento .valor { color: #a8e6cf; }

.ranking-loader {
    text-align: center;
    padding: 1rem;
    color: #6a88aa;
    font-size: 0.7rem;
}

.ranking-item.pos-1 .posicion {
    color: #ffd700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.ranking-item.pos-2 .posicion { color: #c0c0c0; }
.ranking-item.pos-3 .posicion { color: #cd7f32; }

body.light-theme .rankings-section {
    background: rgba(255, 255, 255, 0.85);
}

body.light-theme .rankings-header h3 { color: #1a2a3a; }
body.light-theme .ranking-title { color: #0a6a8a; }
body.light-theme .ranking-item .nombre { color: #2a3a4a; }
body.light-theme .ranking-item { background: rgba(0, 0, 0, 0.03); }
body.light-theme .ranking-item:hover { background: rgba(0, 242, 254, 0.1); }

@media (max-width: 680px) { .rankings-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; } }
@media (max-width: 480px) { .rankings-grid { grid-template-columns: 1fr; } }

/* ===== TABLA CALENDARIO ===== */
.calendar-table-container {
    overflow-x: auto;
    border-radius: 1rem;
}

#calendarTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
    min-width: 600px;
}

#calendarTable th {
    background: rgba(0, 242, 254, 0.15);
    color: #00f2fe;
    padding: 0.5rem 0.3rem;
    text-align: center;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
}

#calendarTable th:first-child {
    position: sticky;
    left: 0;
    background: rgba(0, 242, 254, 0.2);
    z-index: 20;
}

#calendarTable td {
    padding: 0.4rem 0.3rem;
    text-align: center;
    border-bottom: 1px solid rgba(0, 242, 254, 0.1);
    transition: all 0.2s ease;
}

#calendarTable td:first-child {
    position: sticky;
    left: 0;
    background: rgba(10, 20, 35, 0.9);
    font-weight: 700;
    color: #b8d4ff;
    z-index: 5;
}

#calendarTable tr:hover td {
    background: rgba(0, 242, 254, 0.08);
}

#calendarTable td.cell-empty {
    background: rgba(255, 255, 255, 0.02);
    color: #4a6a8a;
    font-style: italic;
}

#calendarTable td[data-tooltip] {
    cursor: help;
    position: relative;
}

#calendarTable td[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #00f2fe;
    font-size: 0.6rem;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
}

.variable-selector {
    background: rgba(0, 20, 40, 0.8);
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 40px;
    padding: 0.4rem 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.variable-selector i {
    color: #00f2fe;
    font-size: 0.8rem;
}

.variable-selector select {
    background: transparent;
    border: none;
    color: white;
    font-size: 0.75rem;
    outline: none;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
}

.variable-selector select option {
    background: #0a0f1e;
    color: white;
}

body.light-theme .variable-selector {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 242, 254, 0.5);
}

body.light-theme .variable-selector select {
    color: #1a2a3a;
}

body.light-theme .variable-selector select option {
    background: white;
    color: #1a2a3a;
}

body.light-theme #calendarTable td:first-child {
    background: rgba(240, 245, 250, 0.95);
}

/* ===== MENÚ DE ADMINISTRACIÓN ===== */
.admin-menu {
    background: rgba(10, 20, 35, 0.75);
    backdrop-filter: blur(12px);
    border-radius: 1rem;
    margin: 1.5rem 0 1rem;
    border: 1px solid rgba(0, 242, 254, 0.2);
    overflow: hidden;
    transition: all 0.3s ease;
}

.admin-menu-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.2rem;
    background: rgba(0, 242, 254, 0.08);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    color: #00f2fe;
    border-bottom: 1px solid rgba(0, 242, 254, 0.15);
}

.admin-menu-title i { margin-right: 8px; }

.admin-menu-toggle {
    transition: transform 0.3s ease;
    cursor: pointer;
    font-size: 0.7rem;
}

.admin-menu-toggle.collapsed {
    transform: rotate(180deg);
}

.admin-menu-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
    flex-wrap: wrap;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 200px;
    opacity: 1;
}

.admin-menu-links.collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0 1rem;
    overflow: hidden;
}

.admin-menu-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1.2rem;
    background: rgba(0, 242, 254, 0.1);
    border-radius: 40px;
    text-decoration: none;
    color: #b8d4ff;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 242, 254, 0.2);
}

.admin-menu-link i {
    font-size: 0.8rem;
    color: #00f2fe;
}

.admin-menu-link:hover {
    background: rgba(0, 242, 254, 0.25);
    transform: translateY(-2px);
    border-color: rgba(0, 242, 254, 0.5);
    color: #00f2fe;
}

body.light-theme .admin-menu {
    background: rgba(255, 255, 255, 0.85);
}

body.light-theme .admin-menu-title {
    background: rgba(0, 242, 254, 0.15);
    color: #0a6a8a;
}

body.light-theme .admin-menu-link {
    background: rgba(0, 0, 0, 0.05);
    color: #2a3a4a;
}

body.light-theme .admin-menu-link i {
    color: #0a6a8a;
}

body.light-theme .admin-menu-link:hover {
    background: rgba(0, 242, 254, 0.2);
}

@media (max-width: 680px) {
    .admin-menu-links {
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }
    .admin-menu-link {
        width: 80%;
        justify-content: center;
    }
}

/* ===== ESTADO DE SINCRONIZACIÓN ===== */
.status-badge.offline {
    background: rgba(220, 53, 69, 0.2) !important;
    color: #ff6b6b;
    border-color: rgba(220, 53, 69, 0.3);
}

.status-badge[style*="rgba(255, 193, 7"] { color: #f9ca24; }

/* ===== BOTONES FLOTANTES ===== */
.floating-buttons {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
}

.floating-btn {
    position: absolute;
    right: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 242, 254, 0.2);
    border: 2px solid rgba(0, 242, 254, 0.5);
    color: #00f2fe;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin: 0;
    padding: 0;
}

.refresh-btn { bottom: 0; }

.back-to-top {
    bottom: 60px;
    opacity: 0;
    transform: scale(0.8);
    display: none;
    transition: all 0.3s ease;
}

.back-to-top.show {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 768px) {
    .floating-buttons {
        bottom: 20px;
        right: 20px;
    }
    .refresh-btn { bottom: 0; }
    .back-to-top { bottom: 55px; }
    .floating-btn {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
}

/* ===== RESUMEN DE ESTACIONES ===== */
.stations-summary {
    background: rgba(10, 20, 35, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 0.8rem;
    padding: 0.4rem 0.8rem;
    margin: 0.5rem 0 1rem;
    border: 1px solid rgba(0, 242, 254, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.summary-stats {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.25rem 0.6rem;
    border-radius: 0.6rem;
    transition: all 0.2s ease;
}

.stat-item i { font-size: 0.7rem; }
.stat-item .stat-number { font-size: 0.9rem; font-weight: 700; line-height: 1; }
.stat-item .stat-label { font-size: 0.55rem; color: #7f9fcf; margin-left: 0.15rem; }

.stat-item i { color: #00f2fe; }
.stat-item.active i { color: #28a745; }
.stat-item.inactive i { color: #dc3545; }
.stat-item.data i { color: #17a2b8; }

.stat-item.active .stat-number { color: #28a745; }
.stat-item.inactive .stat-number { color: #dc3545; }
.stat-item.data .stat-number { color: #17a2b8; }

.last-report {
    font-size: 0.6rem;
    color: #6a88aa;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.25rem 0.6rem;
    border-radius: 0.6rem;
}

.last-report i {
    margin-right: 0.2rem;
    font-size: 0.6rem;
    color: #00f2fe;
}

body.light-theme .stations-summary {
    background: rgba(255, 255, 255, 0.8);
}

body.light-theme .stat-item {
    background: rgba(0, 0, 0, 0.05);
}

body.light-theme .stat-item .stat-label {
    color: #4a6a8a;
}

@media (max-width: 768px) {
    .stations-summary {
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem;
    }
    .summary-stats {
        justify-content: space-around;
        gap: 0.5rem;
    }
    .stat-item {
        flex: 1;
        justify-content: center;
        padding: 0.2rem 0.4rem;
    }
    .stat-item .stat-number { font-size: 0.85rem; }
    .stat-item .stat-label { font-size: 0.5rem; }
    .last-report {
        text-align: center;
        font-size: 0.55rem;
    }
}

/* ===== ESTILOS OPEN-METEO ===== */
.pronostico-openmeteo {
    background: rgba(10, 20, 35, 0.75);
    backdrop-filter: blur(12px);
    border-radius: 1.5rem;
    padding: 1.5rem;
    margin: 1rem 0;
    border: 1px solid rgba(0, 242, 254, 0.2);
}

.pronostico-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.pronostico-header i { font-size: 1.4rem; color: #00f2fe; }
.pronostico-header h3 { font-weight: 700; color: #b8d4ff; margin: 0; }

.openmeteo-badge {
    background: rgba(0,0,0,0.3);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    color: #6a88aa;
}

.pronostico-dias {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.tarjeta-dia {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1.2rem;
    padding: 1rem;
    min-width: 130px;
    text-align: center;
    transition: all 0.3s;
    border: 1px solid rgba(0, 242, 254, 0.1);
}

.tarjeta-dia:hover { transform: translateY(-5px); border-color: #00f2fe; }
.tarjeta-dia.hoy { background: linear-gradient(135deg, rgba(0,242,254,0.1), rgba(0,100,150,0.2)); }

.dia-nombre { font-weight: 800; font-size: 0.9rem; color: #00f2fe; margin-bottom: 10px; }
.temp-max { font-size: 1.4rem; font-weight: 700; color: #ff6b6b; }
.temp-min { font-size: 1rem; font-weight: 500; color: #4facfe; margin-left: 8px; }
.icono-clima { font-size: 2rem; margin: 10px 0; }
.detalle-extra { margin-top: 12px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.7rem; }

.pronostico-dias::-webkit-scrollbar { height: 4px; }
.pronostico-dias::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); border-radius: 10px; }
.pronostico-dias::-webkit-scrollbar-thumb { background: #00f2fe; border-radius: 10px; }

/* ===== FOOTER MEJORADO ===== */
.footer-content {
    background: rgba(10, 20, 35, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 1.2rem;
    padding: 1.5rem;
    border: 1px solid rgba(0, 242, 254, 0.15);
}

.footer-info {
    font-size: 0.75rem;
    margin-bottom: 1rem;
}

.footer-aviso {
    background: rgba(255, 107, 107, 0.12);
    border-left: 3px solid #ff6b6b;
    padding: 0.8rem 1rem;
    border-radius: 0.8rem;
    margin: 1rem 0;
    font-size: 0.7rem;
    color: #ffb8b8;
    text-align: left;
}

.footer-aviso i {
    color: #ff6b6b;
    margin-right: 8px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0;
    font-size: 0.7rem;
}

.footer-link {
    color: #00f2fe;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-link:hover {
    color: #20c997;
    text-decoration: underline;
}

.separator { color: #4a6a8a; }

.footer-copyright {
    font-size: 0.65rem;
    opacity: 0.6;
    margin-top: 0.8rem;
}

body.light-theme .footer-content {
    background: rgba(255, 255, 255, 0.85);
}

body.light-theme .footer-aviso {
    background: rgba(255, 107, 107, 0.08);
    color: #b34a4a;
}

body.light-theme .footer-link {
    color: #0a6a8a;
}

body.light-theme .separator { color: #aaa; }

@media (max-width: 680px) {
    .footer-links {
        flex-direction: column;
        gap: 0.5rem;
    }
    .separator { display: none; }
    .footer-aviso { font-size: 0.65rem; }
}

/* ===== MODALES DE PRIVACIDAD Y TÉRMINOS ===== */
.modal-privacy {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease;
}

.modal-privacy.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-privacy-content {
    background: rgba(10, 20, 35, 0.98);
    backdrop-filter: blur(12px);
    border-radius: 1.5rem;
    width: 90%;
    max-width: 650px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 242, 254, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease;
}

.modal-privacy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(0, 242, 254, 0.2);
}

.modal-privacy-header h3 {
    color: #00f2fe;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.modal-privacy-header h3 i { margin-right: 8px; }

.modal-close {
    font-size: 1.8rem;
    font-weight: bold;
    cursor: pointer;
    color: #6a88aa;
    transition: all 0.2s;
    line-height: 1;
}

.modal-close:hover {
    color: #ff6b6b;
    transform: scale(1.1);
}

.modal-privacy-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-privacy-body h4 {
    color: #00f2fe;
    font-size: 0.9rem;
    margin: 1rem 0 0.5rem 0;
    border-left: 3px solid #00f2fe;
    padding-left: 10px;
}

.modal-privacy-body p {
    font-size: 0.75rem;
    line-height: 1.5;
    color: #b8d4ff;
    margin-bottom: 0.8rem;
}

.modal-privacy-body ul {
    margin: 0.5rem 0 1rem 1.5rem;
}

.modal-privacy-body li {
    font-size: 0.7rem;
    color: #b8d4ff;
    margin-bottom: 0.3rem;
}

.modal-privacy-body a {
    color: #20c997;
    text-decoration: none;
}

.modal-privacy-body a:hover {
    text-decoration: underline;
}

.warning-box {
    background: rgba(255, 107, 107, 0.15);
    border-left: 3px solid #ff6b6b;
    padding: 0.8rem;
    border-radius: 0.8rem;
    margin: 1rem 0;
}

.warning-box i {
    color: #ff6b6b;
    font-size: 1rem;
    margin-right: 8px;
}

.warning-box strong {
    color: #ff6b6b;
    font-size: 0.8rem;
}

.warning-box p {
    margin-top: 5px;
    font-size: 0.7rem;
    color: #ffb8b8;
}

.modal-privacy-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(0, 242, 254, 0.2);
    text-align: center;
}

.btn-close-modal {
    background: rgba(0, 242, 254, 0.2);
    border: 1px solid rgba(0, 242, 254, 0.4);
    color: #00f2fe;
    padding: 0.5rem 1.5rem;
    border-radius: 40px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.btn-close-modal:hover {
    background: rgba(0, 242, 254, 0.4);
    transform: translateY(-2px);
}

body.light-theme .modal-privacy-content {
    background: rgba(255, 255, 255, 0.98);
}

body.light-theme .modal-privacy-body p,
body.light-theme .modal-privacy-body li {
    color: #2a3a4a;
}

body.light-theme .warning-box {
    background: rgba(255, 107, 107, 0.1);
}

body.light-theme .warning-box p {
    color: #a34a4a;
}

/* ===== EFECTOS HOVER PARA TARJETA UV ===== */
.real-card:last-child:hover {
    border-color: #9b59b6 !important;
    box-shadow: 0 8px 25px rgba(155, 89, 182, 0.4) !important;
}

.real-card:last-child .card-icon i {
    transition: all 0.3s ease;
}

.real-card:last-child:hover .card-icon i {
    transform: scale(1.2);
    text-shadow: 0 0 15px rgba(155, 89, 182, 0.8);
}

.real-card:last-child:hover .gauge-bar-fill.fill-uv {
    filter: brightness(1.2);
    box-shadow: 0 0 8px rgba(155, 89, 182, 0.5);
}

.real-card:last-child:hover .sub-detail {
    color: #9b59b6;
    transition: all 0.3s ease;
}

.real-card:last-child .uv-risk-low { color: #20c997; }
.real-card:last-child .uv-risk-moderate { color: #f9ca24; }
.real-card:last-child .uv-risk-high { color: #e67e22; }
.real-card:last-child .uv-risk-extreme { color: #e74c3c; }

.real-card:last-child:hover .uv-risk-high,
.real-card:last-child:hover .uv-risk-extreme {
    animation: uvPulse 0.8s ease-in-out infinite;
}

@keyframes uvPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; text-shadow: 0 0 5px currentColor; }
}

body.light-theme .real-card:last-child:hover {
    border-color: #8e44ad !important;
    box-shadow: 0 8px 25px rgba(142, 68, 173, 0.25) !important;
}

/* ===== POPUP DE BIENVENIDA ===== */
.welcome-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.welcome-popup.show { display: flex; }

.welcome-popup-content {
    background: rgba(10, 20, 35, 0.98);
    backdrop-filter: blur(12px);
    border-radius: 1.5rem;
    max-width: 500px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    border: 1px solid rgba(0, 242, 254, 0.3);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.4s ease;
}

.welcome-popup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(0, 242, 254, 0.2);
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.08), transparent);
    border-radius: 1.5rem 1.5rem 0 0;
}

.welcome-popup-header i {
    font-size: 1.8rem;
    color: #00f2fe;
}

.welcome-popup-header h3 {
    flex: 1;
    font-size: 1.2rem;
    font-weight: 700;
    color: #00f2fe;
    margin: 0;
}

.welcome-popup-close {
    background: rgba(220, 53, 69, 0.2);
    border: none;
    color: #ff6b6b;
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.welcome-popup-close:hover {
    background: rgba(220, 53, 69, 0.4);
    transform: scale(1.1);
}

.welcome-popup-body {
    padding: 1.5rem;
    text-align: center;
}

.welcome-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.welcome-icon i {
    background: linear-gradient(135deg, #00f2fe, #4facfe);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.welcome-popup-body p {
    color: #b8d4ff;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.welcome-features {
    text-align: left;
    margin: 1.2rem 0;
    padding: 0;
    list-style: none;
}

.welcome-features li {
    padding: 0.5rem 0;
    color: #b8d4ff;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(0, 242, 254, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.welcome-features li i {
    width: 24px;
    color: #20c997;
    font-size: 0.9rem;
}

.welcome-note {
    background: rgba(32, 201, 151, 0.1);
    padding: 0.8rem;
    border-radius: 0.8rem;
    font-size: 0.75rem;
    margin-top: 1rem;
}

.welcome-popup-footer {
    padding: 1rem 1.5rem 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    border-top: 1px solid rgba(0, 242, 254, 0.1);
}

.welcome-btn-primary {
    background: linear-gradient(135deg, #00f2fe, #4facfe);
    border: none;
    color: #1a2a3a;
    padding: 0.6rem 1.5rem;
    border-radius: 40px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.welcome-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 242, 254, 0.3);
}

.welcome-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 242, 254, 0.3);
    color: #b8d4ff;
    padding: 0.6rem 1.5rem;
    border-radius: 40px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.welcome-btn-secondary:hover {
    background: rgba(0, 242, 254, 0.15);
}

.welcome-popup-content::-webkit-scrollbar { width: 4px; }
.welcome-popup-content::-webkit-scrollbar-track { background: rgba(0, 242, 254, 0.1); border-radius: 4px; }
.welcome-popup-content::-webkit-scrollbar-thumb { background: #00f2fe; border-radius: 4px; }

body.light-theme .welcome-popup-content {
    background: rgba(255, 255, 255, 0.98);
}

body.light-theme .welcome-popup-header {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.08), transparent);
}

body.light-theme .welcome-popup-body p,
body.light-theme .welcome-features li {
    color: #2a3a4a;
}

body.light-theme .welcome-note {
    background: rgba(32, 201, 151, 0.08);
}

/* ===== SELECTOR DE AÑO ===== */
.year-selector {
    background: rgba(0, 20, 40, 0.8);
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 40px;
    padding: 0.4rem 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.year-selector i {
    color: #00f2fe;
    font-size: 0.8rem;
}

.year-selector select {
    background: transparent;
    border: none;
    color: white;
    font-size: 0.75rem;
    outline: none;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
}

.year-selector select option {
    background: #0a0f1e;
    color: white;
}

body.light-theme .year-selector {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 242, 254, 0.5);
}

body.light-theme .year-selector select {
    color: #1a2a3a;
}

body.light-theme .year-selector select option {
    background: white;
    color: #1a2a3a;
}

/* ===== HINT PARA SELECTOR DE AÑO ===== */
.year-hint {
    color: #00f2fe;
    font-size: 0.7rem;
    cursor: help;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.year-hint:hover {
    opacity: 1;
}

.year-hint:hover::after {
    content: "Al cambiar el año se actualizan automáticamente el resumen estadístico y la precipitación mensual";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #00f2fe;
    font-size: 0.65rem;
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    z-index: 100;
    margin-bottom: 5px;
    pointer-events: none;
}

body.light-theme .year-hint:hover::after {
    background: rgba(255, 255, 255, 0.95);
    color: #0a6a8a;
    border: 1px solid rgba(0, 242, 254, 0.3);
}

.update-badge {
    font-size: 0.55rem;
    background: rgba(32, 201, 151, 0.2);
    color: #20c997;
    padding: 0.15rem 0.4rem;
    border-radius: 20px;
    margin-left: 0.3rem;
    white-space: nowrap;
}

/* ===== SECCIÓN DE AVISOS METEOROLÓGICOS ===== */
.avisos-section {
    background: linear-gradient(135deg, rgba(10, 15, 30, 0.95), rgba(5, 10, 20, 0.95));
    border-radius: 1.5rem;
    margin: 0.8rem 0;
    padding: 0.6rem;
    border: 1px solid rgba(0, 242, 254, 0.2);
    backdrop-filter: blur(10px);
}

.avisos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid rgba(0, 242, 254, 0.3);
}

.avisos-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.avisos-title i {
    font-size: 1.2rem;
    color: #ff6b6b;
    animation: pulseWarning 2s infinite;
}

.avisos-title h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    background: linear-gradient(135deg, #fff, #4facfe);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.avisos-badge {
    background: rgba(0, 242, 254, 0.2);
    padding: 0.1rem 0.5rem;
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: 500;
    color: #00f2fe;
    border: 1px solid rgba(0, 242, 254, 0.4);
}

.avisos-refresh {
    font-size: 0.6rem;
    color: #6a88aa;
}

.avisos-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 450px;
    overflow-y: auto;
    padding-right: 0.3rem;
}

.avisos-container::-webkit-scrollbar { width: 4px; }
.avisos-container::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 4px; }
.avisos-container::-webkit-scrollbar-thumb { background: rgba(0, 242, 254, 0.4); border-radius: 4px; }

.avisos-loading {
    text-align: center;
    padding: 2rem;
    color: #6a88aa;
}

.avisos-loading i {
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

.aviso-card-compact {
    background: rgba(0, 0, 0, 0.25);
    border-left: 3px solid;
    border-radius: 0.5rem;
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.6rem;
}

.aviso-header-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
    gap: 0.5rem;
}

.aviso-header-compact i {
    font-size: 0.85rem;
    width: 1.2rem;
}

.aviso-header-compact strong {
    font-size: 0.8rem;
    flex: 1;
}

.aviso-nivel-compact {
    padding: 0.15rem 0.6rem;
    border-radius: 12px;
    font-size: 0.6rem;
    font-weight: bold;
    white-space: nowrap;
}

.aviso-zona-compact {
    font-size: 0.7rem;
    color: #aac8e0;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.aviso-zona-compact i {
    font-size: 0.65rem;
    width: 0.9rem;
}

.aviso-descripcion-compact {
    font-size: 0.7rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.3rem 0.5rem;
    border-radius: 0.4rem;
    margin: 0.3rem 0;
    line-height: 1.35;
}

.aviso-fechas-compact {
    font-size: 0.6rem;
    color: #6a88aa;
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 0.3rem;
}

.aviso-fuente-compact {
    font-size: 0.55rem;
    margin-top: 0.3rem;
    text-align: right;
    opacity: 0.7;
}

.sin-avisos {
    text-align: center;
    padding: 2rem;
    color: #20c997;
}

.sin-avisos i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.sin-avisos p { margin: 0.5rem 0; }
.sin-avisos small { color: #6a88aa; font-size: 0.7rem; }

.avisos-error {
    text-align: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1rem;
}

.avisos-error i {
    font-size: 2rem;
    color: #ff8c42;
    margin-bottom: 0.5rem;
}

.avisos-error p {
    margin: 0.5rem 0;
    color: #ff8c42;
}

.avisos-error a {
    color: #00f2fe;
    text-decoration: none;
    font-size: 0.85rem;
}

.avisos-error a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .avisos-header { flex-direction: column; align-items: flex-start; }
    .aviso-header { flex-direction: column; align-items: flex-start; }
    .aviso-fechas { flex-direction: column; gap: 0.3rem; }
    .aviso-card:hover { transform: translateX(0); }
    .avisos-container { max-height: 200px; }
    .aviso-card-compact { padding: 0.5rem; margin-bottom: 0.5rem; }
    .aviso-header-compact strong { font-size: 0.75rem; }
    .aviso-descripcion-compact { font-size: 0.65rem; padding: 0.25rem 0.4rem; }
}

.status-badge.offline {
    animation: blinkOffline 1s ease-in-out infinite;
}

@keyframes blinkOffline {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ===== RADAR OVERLAY ===== */
.radar-overlay {
    filter: brightness(1.1) contrast(1.1);
    mix-blend-mode: multiply;
}

body.light-theme .radar-overlay {
    mix-blend-mode: normal;
    opacity: 0.5 !important;
}

/* ===== PREVISIÓN AEMET ===== */
.aemet-section {
    background: rgba(10, 20, 35, 0.75);
    backdrop-filter: blur(12px);
    border-radius: 1.5rem;
    padding: 1.5rem;
    margin: 1rem 0;
    border: 1px solid rgba(0, 242, 254, 0.2);
}

.aemet-section .pronostico-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.aemet-section .pronostico-header i {
    font-size: 1.4rem;
    color: #00f2fe;
}

.aemet-section .pronostico-header h3 {
    font-weight: 700;
    color: #b8d4ff;
    margin: 0;
    font-size: 1rem;
}

.aemet-section .pronostico-header h3 span {
    color: #00f2fe;
}

.aemet-badge {
    background: rgba(0, 100, 200, 0.15);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.65rem;
    color: #4facfe;
    border: 1px solid rgba(79, 172, 254, 0.3);
}

.aemet-badge i {
    font-size: 0.55rem;
    margin-right: 4px;
}

.aemet-update {
    font-size: 0.6rem;
    color: #6a88aa;
    margin-left: auto;
}

.aemet-section .pronostico-dias {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.5rem 0;
    overflow: visible;
}

.aemet-dia-expandible {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 1rem;
    border: 1px solid rgba(0, 242, 254, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.aemet-dia-expandible:hover {
    border-color: rgba(0, 242, 254, 0.3);
    background: rgba(0, 0, 0, 0.35);
}

.aemet-dia-expandible.alerta-calor {
    border-color: rgba(255, 107, 107, 0.3);
    background: rgba(255, 107, 107, 0.05);
}

.aemet-dia-expandible.alerta-calor:hover {
    border-color: rgba(255, 107, 107, 0.5);
    background: rgba(255, 107, 107, 0.08);
}

.aemet-dia-expandible.alerta-lluvia {
    border-color: rgba(79, 172, 254, 0.3);
    background: rgba(79, 172, 254, 0.05);
}

.aemet-dia-expandible.alerta-lluvia:hover {
    border-color: rgba(79, 172, 254, 0.5);
    background: rgba(79, 172, 254, 0.08);
}

/* Cabecera */
.aemet-dia-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.aemet-dia-header:hover {
    background: rgba(0, 242, 254, 0.05);
}

.aemet-dia-info {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    min-width: 120px;
}

.aemet-dia-nombre {
    font-weight: 800;
    font-size: 0.9rem;
    color: #00f2fe;
    letter-spacing: 0.5px;
}

.aemet-dia-fecha {
    font-size: 0.65rem;
    color: #6a88aa;
}

.aemet-dia-resumen {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.aemet-dia-icono {
    font-size: 1.6rem;
    line-height: 1;
}

.aemet-dia-temp {
    display: flex;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.aemet-dia-temp .temp-max { color: #ff6b6b; }
.aemet-dia-temp .temp-min { color: #4facfe; }

.aemet-dia-lluvia {
    font-size: 0.75rem;
    font-weight: 600;
}

.aemet-dia-lluvia i { font-size: 0.65rem; }

.aemet-dia-expand-icon {
    color: #6a88aa;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    padding: 0 4px;
}

.aemet-dia-expandible.expandido .aemet-dia-expand-icon {
    color: #00f2fe;
}

/* Detalles expandidos */
.aemet-dia-detalles {
    padding: 0 1rem 1.2rem 1rem;
    border-top: 1px solid rgba(0, 242, 254, 0.08);
    animation: slideDown 0.3s ease;
    background: linear-gradient(180deg, rgba(0, 242, 254, 0.03), rgba(0, 0, 0, 0.2));
    border-top: 2px solid rgba(0, 242, 254, 0.2);
}

.aemet-detalles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 0.8rem 0;
}

.detalle-grupo {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.8rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(0, 242, 254, 0.08);
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.detalle-grupo:hover {
    border-color: rgba(0, 242, 254, 0.2);
    background: rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 242, 254, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.detalle-titulo {
    font-size: 0.7rem;
    font-weight: 700;
    color: #00f2fe;
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(0, 242, 254, 0.1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.detalle-titulo .icono { font-size: 1.1rem; }

.detalle-item {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.75rem;
    color: #b8d4ff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.detalle-item:last-child { border-bottom: none; }

.detalle-item span:first-child {
    color: #8ba3c4;
    font-weight: 400;
}

.detalle-item span:last-child { font-weight: 600; }

.detalle-item .temp-max-val {
    color: #ff6b6b !important;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.2);
}

.detalle-item .temp-min-val {
    color: #4facfe;
    text-shadow: 0 0 10px rgba(79, 172, 254, 0.2);
}

.detalle-item .prob-lluvia-val {
    color: #20c997;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(32, 201, 151, 0.2);
}

.detalle-item .uv-val { font-weight: 700; }

.detalle-alertas {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.5rem 0;
}

.alerta-badge {
    font-size: 0.6rem;
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    font-weight: 600;
    background: rgba(255, 107, 107, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.2);
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 107, 107, 0.12);
    border: 1px solid rgba(255, 107, 107, 0.25);
    padding: 0.25rem 0.8rem;
}

.alerta-badge .icono { font-size: 0.8rem; }

.detalle-recomendaciones {
    font-size: 0.7rem;
    color: #b8d4ff;
    padding: 0.6rem 1rem;
    background: rgba(0, 242, 254, 0.05);
    border-radius: 0.8rem;
    border-left: 3px solid #00f2fe;
    margin-top: 0.8rem;
    line-height: 1.6;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.05), rgba(0, 242, 254, 0.01));
    padding: 0.7rem 1.2rem;
}

.detalle-recomendaciones .icono-recomendacion { margin-right: 6px; }

@media (max-width: 768px) {
    .aemet-dia-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.6rem 0.8rem;
    }
    .aemet-dia-info {
        min-width: 80px;
        gap: 0.5rem;
    }
    .aemet-dia-nombre { font-size: 0.8rem; }
    .aemet-dia-resumen {
        gap: 0.8rem;
        flex: 1;
        justify-content: flex-end;
    }
    .aemet-dia-icono { font-size: 1.3rem; }
    .aemet-dia-temp {
        font-size: 0.95rem;
        gap: 0.3rem;
    }
    .aemet-dia-lluvia { font-size: 0.65rem; }
    .aemet-detalles-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .aemet-dia-detalles {
        padding: 0 0.8rem 0.8rem 0.8rem;
        padding-top: 0.2rem !important;
        padding-bottom: 0.4rem !important;
        border-top-width: 1px !important;
    }
    .detalle-grupo { padding: 0.6rem 0.7rem; }
    .detalle-item {
        font-size: 0.65rem;
        padding: 0.2rem 0;
    }
    .detalle-titulo { font-size: 0.6rem; }
    .detalle-recomendaciones {
        font-size: 0.6rem;
        padding: 0.4rem 0.7rem;
    }
}

@media (max-width: 480px) {
    .aemet-dia-header {
        padding: 0.5rem 0.6rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.3rem;
    }
    .aemet-dia-info { justify-content: space-between; }
    .aemet-dia-resumen {
        justify-content: space-between;
        gap: 0.5rem;
    }
    .aemet-dia-nombre { font-size: 0.7rem; }
    .aemet-dia-fecha { font-size: 0.55rem; }
    .aemet-dia-icono { font-size: 1.1rem; }
    .aemet-dia-temp { font-size: 0.8rem; }
    .aemet-dia-lluvia { font-size: 0.6rem; }
    .aemet-detalles-grid {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    .detalle-grupo { padding: 0.5rem 0.6rem; }
    .detalle-item { font-size: 0.6rem; }
    .detalle-recomendaciones {
        font-size: 0.6rem;
        padding: 0.4rem 0.6rem;
    }
}

/* Tema claro para AEMET */
body.light-theme .aemet-section {
    background: rgba(255, 255, 255, 0.85);
}

body.light-theme .aemet-section .pronostico-header h3 {
    color: #1a2a3a;
}

body.light-theme .aemet-section .pronostico-header h3 span {
    color: #0a6a8a;
}

body.light-theme .aemet-dia-expandible {
    background: rgba(255, 255, 255, 0.6);
}

body.light-theme .aemet-dia-expandible:hover {
    background: rgba(255, 255, 255, 0.8);
}

body.light-theme .aemet-dia-nombre {
    color: #0a6a8a;
}

body.light-theme .detalle-grupo {
    background: rgba(0, 0, 0, 0.04);
}

body.light-theme .detalle-item {
    color: #2a3a4a;
}

body.light-theme .detalle-item span:first-child {
    color: #6a8aaa;
}

body.light-theme .detalle-recomendaciones {
    color: #2a3a4a;
    background: rgba(0, 242, 254, 0.05);
}

body.light-theme .aemet-dia-expandible.alerta-calor {
    background: rgba(255, 107, 107, 0.05);
}

body.light-theme .aemet-dia-expandible.alerta-lluvia {
    background: rgba(79, 172, 254, 0.05);
}

/* ===== ESTILOS PARA DATOS EXTRA AEMET ===== */
.hora-temp {
    background: rgba(0, 242, 254, 0.08);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.6rem;
    color: #b8d4ff;
    border: 1px solid rgba(0, 242, 254, 0.1);
}

.hora-temp:hover {
    background: rgba(0, 242, 254, 0.15);
    border-color: rgba(0, 242, 254, 0.3);
}

.estado-periodo {
    font-size: 0.6rem;
    color: #6a88aa;
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
}

.detalle-item .viento-periodo {
    color: #a8e6cf;
    font-weight: 400;
}

@media (max-width: 768px) {
    .hora-temp {
        font-size: 0.55rem;
        padding: 1px 6px;
    }
    .detalle-item .viento-periodo {
        font-size: 0.6rem;
    }
}

/* ===== ESTADO DEL CIELO - CAJÓN INDEPENDIENTE ===== */
.detalle-grupo.estado-cielo {
    grid-column: 1 / -1 !important;
    background: rgba(0, 242, 254, 0.05) !important;
    border: 1px solid rgba(249, 202, 36, 0.15) !important;
}

.detalle-grupo.estado-cielo .detalle-titulo {
    color: #f9ca24 !important;
    border-bottom-color: rgba(249, 202, 36, 0.2) !important;
}

.estado-cielo-icono {
    font-size: 2rem;
    text-align: center;
}

.estado-cielo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
}

@media (max-width: 480px) {
    .estado-cielo-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== BOTÓN CSV ===== */
.csv-btn {
    background: rgba(32, 201, 151, 0.2);
    border: 1px solid rgba(32, 201, 151, 0.5);
    color: #20c997;
    padding: 0.5rem 1rem;
    border-radius: 40px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.csv-btn:hover {
    background: rgba(32, 201, 151, 0.4);
    box-shadow: 0 5px 20px rgba(32, 201, 151, 0.3);
    transform: translateY(-2px);
}

/* ===== MODAL GRÁFICOS ===== */
.chart-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 99999;
    cursor: pointer;
}

.chart-modal.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-modal-overlay {
    width: 98%;
    height: 95%;
    display: flex;
    flex-direction: column;
    cursor: default;
}

.chart-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: rgba(10, 20, 35, 0.95);
    border-radius: 1rem 1rem 0 0;
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-bottom: none;
}

.chart-modal-header span {
    color: #b8d4ff;
    font-size: 1.1rem;
    font-weight: 700;
}

.chart-modal-close {
    background: rgba(220, 53, 69, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    line-height: 1;
}

.chart-modal-close:hover {
    background: rgba(220, 53, 69, 1);
}

.chart-modal-canvas-wrapper {
    flex: 1;
    background: rgba(10, 20, 35, 0.95);
    border-radius: 0 0 1rem 1rem;
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-top: none;
    padding: 1rem;
    position: relative;
    min-height: 0;
}

.chart-modal-canvas-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: calc(100% - 2rem) !important;
    height: calc(100% - 2rem) !important;
}

.chart-expand-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 242, 254, 0.15);
    border: 1px solid rgba(0, 242, 254, 0.3);
    color: #00f2fe;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 5;
    opacity: 0;
}

.graph-card:hover .chart-expand-btn { opacity: 1; }
.chart-expand-btn:hover { background: rgba(0, 242, 254, 0.3); }

/* ===== HEADERS COLAPSABLES ===== */
.collapsible-header {
    cursor: pointer;
    user-select: none;
}

.collapsible-header:hover { opacity: 0.8; }

.header-arrow {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    margin-left: 5px;
}

.header-arrow.open { transform: rotate(180deg); }

.collapsed-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.collapsed-content.open {
    max-height: 600px;
    overflow-y: auto;
}

#annualContent.open {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: auto;
}

/* ===== BOTÓN DE RECARGA FLOTANTE ===== */
.refresh-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 242, 254, 0.2);
    border: 2px solid rgba(0, 242, 254, 0.5);
    color: #00f2fe;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 20px rgba(0, 242, 254, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.refresh-btn:hover {
    background: rgba(0, 242, 254, 0.4);
    box-shadow: 0 8px 30px rgba(0, 242, 254, 0.4);
    transform: scale(1.1);
}

.refresh-btn:active { transform: scale(0.95); }

.refresh-btn.spinning i {
    animation: spin 0.8s ease-in-out;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================================
   PRESIÓN - DOS LÍNEAS COMPACTAS
   ============================================================ */

/* Tarjeta de presión (quinta tarjeta) */
.real-card:nth-child(5) .temp-range {
    display: flex !important;
    flex-direction: column !important;   /* Una debajo de otra */
    align-items: center !important;
    justify-content: center !important;
    gap: 0.15rem !important;             /* Espacio mínimo entre líneas */
    width: 100% !important;
    margin-top: 2px !important;          /* Menos margen superior */
}

/* Cada elemento (Máx y Mín) */
.real-card:nth-child(5) .temp-range .range-high,
.real-card:nth-child(5) .temp-range .range-low {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;         /* Reducir altura de línea */
}

/* Números */
.real-card:nth-child(5) .temp-range .range-high span,
.real-card:nth-child(5) .temp-range .range-low span {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}

/* Iconos de flecha */
.real-card:nth-child(5) .temp-range .range-high i,
.real-card:nth-child(5) .temp-range .range-low i {
    font-size: 0.6rem !important;
}

/* Colores específicos para presión */
.real-card:nth-child(5) .temp-range .range-high {
    color: #f9ca24 !important;
}

.real-card:nth-child(5) .temp-range .range-low {
    color: #f0932b !important;
}

/* ============================================================
   VERSIÓN MÓVIL
   ============================================================ */

@media (max-width: 768px) {
    .real-card:nth-child(5) .temp-range {
        gap: 0.1rem !important;
        margin-top: 1px !important;
    }
    
    .real-card:nth-child(5) .temp-range .range-high,
    .real-card:nth-child(5) .temp-range .range-low {
        font-size: 0.55rem !important;
    }
    
    .real-card:nth-child(5) .temp-range .range-high span,
    .real-card:nth-child(5) .temp-range .range-low span {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .real-card:nth-child(5) .temp-range {
        gap: 0.05rem !important;
    }
    
    .real-card:nth-child(5) .temp-range .range-high,
    .real-card:nth-child(5) .temp-range .range-low {
        font-size: 0.5rem !important;
    }
    
    .real-card:nth-child(5) .temp-range .range-high span,
    .real-card:nth-child(5) .temp-range .range-low span {
        font-size: 0.65rem !important;
    }
    
    .real-card:nth-child(5) .temp-range .range-high i,
    .real-card:nth-child(5) .temp-range .range-low i {
        font-size: 0.5rem !important;
    }
}
/* ============================================================
   AEMET - AUMENTAR TODOS LOS DATOS EXPANDIDOS (PC Y MÓVIL)
   ============================================================ */

/* --- CABECERA (siempre visible) --- */
.aemet-dia-lluvia {
    font-size: 1rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(0, 0, 0, 0.15) !important;
    padding: 2px 10px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.aemet-dia-lluvia i {
    font-size: 0.9rem !important;
}

/* --- DETALLES EXPANDIDOS (TODOS LOS DATOS) --- */

/* 1. Títulos de los grupos */
.detalle-titulo {
    font-size: 0.85rem !important;      /* Aumentado de 0.7rem */
    font-weight: 700 !important;
}

.detalle-titulo .icono {
    font-size: 1.2rem !important;       /* Aumentado de 1.1rem */
}

/* 2. Todas las etiquetas (lado izquierdo) */
.detalle-item span:first-child {
    font-size: 0.85rem !important;      /* Aumentado de 0.75rem */
    font-weight: 500 !important;
    color: #8ba3c4 !important;
}

/* 3. Todos los valores (lado derecho) */
.detalle-item span:last-child {
    font-size: 0.95rem !important;      /* Aumentado de 0.75rem */
    font-weight: 600 !important;
}

/* 4. Valores específicos con colores */
.detalle-item .temp-max-val {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #ff6b6b !important;
}

.detalle-item .temp-min-val {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #4facfe !important;
}

.detalle-item .sensacion-val {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

.detalle-item .prob-lluvia-val {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}

.detalle-item .viento-dir {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

.detalle-item .viento-vel {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

.detalle-item .racha-val {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}

.detalle-item .hum-val {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

.detalle-item .uv-val {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}

.detalle-item .estado-cielo-val {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

/* 5. Alertas */
.alerta-badge {
    font-size: 0.8rem !important;       /* Aumentado de 0.6rem */
    padding: 0.3rem 0.9rem !important;
}

.alerta-badge .icono {
    font-size: 0.9rem !important;
}

/* 6. Recomendaciones */
.detalle-recomendaciones {
    font-size: 0.85rem !important;      /* Aumentado de 0.7rem */
    padding: 0.8rem 1.2rem !important;
    line-height: 1.6 !important;
}

.detalle-recomendaciones .icono-recomendacion {
    font-size: 1.1rem !important;
}

/* 7. Temperaturas por horas (badges) */
.hora-temp {
    font-size: 0.75rem !important;      /* Aumentado de 0.6rem */
    padding: 3px 10px !important;
}

.hora-temp span:first-child {
    font-size: 0.6rem !important;
}

.hora-temp span:last-child {
    font-size: 0.8rem !important;
}

/* 8. Estado del cielo - periodos */
.estado-periodo {
    font-size: 0.75rem !important;
    padding: 3px 10px !important;
}

/* ============================================================
   VERSIÓN MÓVIL (TODOS LOS DATOS MÁS GRANDES)
   ============================================================ */

@media (max-width: 768px) {
    /* Cabecera - móvil */
    .aemet-dia-lluvia {
        font-size: 0.95rem !important;
        padding: 2px 12px !important;
    }
    
    .aemet-dia-lluvia i {
        font-size: 0.85rem !important;
    }
    
    /* Títulos de grupos - móvil */
    .detalle-titulo {
        font-size: 0.9rem !important;
    }
    
    .detalle-titulo .icono {
        font-size: 1.3rem !important;
    }
    
    /* Etiquetas - móvil */
    .detalle-item span:first-child {
        font-size: 0.9rem !important;
    }
    
    /* Valores - móvil */
    .detalle-item span:last-child {
        font-size: 1rem !important;
    }
    
    /* Valores específicos - móvil */
    .detalle-item .temp-max-val,
    .detalle-item .temp-min-val,
    .detalle-item .sensacion-val,
    .detalle-item .prob-lluvia-val,
    .detalle-item .viento-dir,
    .detalle-item .viento-vel,
    .detalle-item .racha-val,
    .detalle-item .hum-val,
    .detalle-item .uv-val,
    .detalle-item .estado-cielo-val {
        font-size: 1rem !important;
    }
    
    /* Alertas - móvil */
    .alerta-badge {
        font-size: 0.85rem !important;
        padding: 0.35rem 1rem !important;
    }
    
    .alerta-badge .icono {
        font-size: 0.95rem !important;
    }
    
    /* Recomendaciones - móvil */
    .detalle-recomendaciones {
        font-size: 0.9rem !important;
        padding: 0.8rem 1rem !important;
    }
    
    .detalle-recomendaciones .icono-recomendacion {
        font-size: 1.2rem !important;
    }
    
    /* Horas - móvil */
    .hora-temp {
        font-size: 0.8rem !important;
        padding: 3px 10px !important;
    }
    
    .hora-temp span:first-child {
        font-size: 0.65rem !important;
    }
    
    .hora-temp span:last-child {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    /* Móvil muy pequeño */
    .aemet-dia-lluvia {
        font-size: 0.85rem !important;
        padding: 2px 10px !important;
    }
    
    .aemet-dia-lluvia i {
        font-size: 0.75rem !important;
    }
    
    .detalle-titulo {
        font-size: 0.8rem !important;
    }
    
    .detalle-titulo .icono {
        font-size: 1.1rem !important;
    }
    
    .detalle-item span:first-child {
        font-size: 0.75rem !important;
    }
    
    .detalle-item span:last-child {
        font-size: 0.85rem !important;
    }
    
    .detalle-item .temp-max-val,
    .detalle-item .temp-min-val,
    .detalle-item .sensacion-val,
    .detalle-item .prob-lluvia-val,
    .detalle-item .viento-dir,
    .detalle-item .viento-vel,
    .detalle-item .racha-val,
    .detalle-item .hum-val,
    .detalle-item .uv-val,
    .detalle-item .estado-cielo-val {
        font-size: 0.85rem !important;
    }
    
    .alerta-badge {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.8rem !important;
    }
    
    .alerta-badge .icono {
        font-size: 0.8rem !important;
    }
    
    .detalle-recomendaciones {
        font-size: 0.8rem !important;
        padding: 0.6rem 0.8rem !important;
    }
    
    .hora-temp {
        font-size: 0.7rem !important;
        padding: 2px 7px !important;
    }
    
    .hora-temp span:first-child {
        font-size: 0.55rem !important;
    }
    
    .hora-temp span:last-child {
        font-size: 0.75rem !important;
    }
}
/* ============================================================
   GRUPO DE BOTONES FLOTANTES - CORREGIDO
   ============================================================ */

.floating-buttons {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
    display: flex;
    flex-direction: column;  /* El primero (arriba) aparece arriba */
    align-items: center;
    gap: 10px;                       /* Espacio entre botones */
}

.floating-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 242, 254, 0.2);
    border: 2px solid rgba(0, 242, 254, 0.5);
    color: #00f2fe;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

/* Botón de refrescar - siempre visible */
.refresh-btn {
    position: relative;
    bottom: auto;
    right: auto;
}

/* Botón volver arriba - aparece al hacer scroll */
.back-to-top {
    position: relative;
    bottom: auto;
    right: auto;
    opacity: 0;
    transform: scale(0.8);
    display: none;
    transition: all 0.3s ease;
}

.back-to-top.show {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

.floating-btn:hover {
    background: rgba(0, 242, 254, 0.4);
    box-shadow: 0 8px 30px rgba(0, 242, 254, 0.4);
    transform: scale(1.1);
}

.floating-btn:active {
    transform: scale(0.95);
}

.refresh-btn.spinning i {
    animation: spin 0.8s ease-in-out;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================================
   VERSIÓN MÓVIL
   ============================================================ */

@media (max-width: 768px) {
    .floating-buttons {
        bottom: 20px;
        right: 20px;
        gap: 8px;
    }
    
    .floating-btn {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .floating-buttons {
        bottom: 15px;
        right: 15px;
        gap: 6px;
    }
    
    .floating-btn {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
        border-width: 1.5px;
    }
}

/* ============================================================
   AEMET - CORREGIR COLORES EN DETALLES EXPANDIDOS
   ============================================================ */

/* FORZAR COLOR ROJO PARA TEMPERATURA MÁXIMA EN DETALLES */
.detalle-item .temp-max-val,
.aemet-dia-detalles .detalle-item .temp-max-val,
div.detalle-item .temp-max-val {
    color: #ff6b6b !important;
    font-weight: 700 !important;
}

/* FORZAR COLOR AZUL PARA TEMPERATURA MÍNIMA EN DETALLES */
.detalle-item .temp-min-val,
.aemet-dia-detalles .detalle-item .temp-min-val,
div.detalle-item .temp-min-val {
    color: #4facfe !important;
    font-weight: 700 !important;
}

/* También para los iconos ▲ Máx y ▼ Mín */
.detalle-item span[style*="color: #ff6b6b"] {
    color: #ff6b6b !important;
    font-weight: 700 !important;
}

.detalle-item span[style*="color: #4facfe"] {
    color: #4facfe !important;
    font-weight: 700 !important;
}

/* Tema claro */
body.light-theme .detalle-item .temp-max-val {
    color: #ff6b6b !important;
}

body.light-theme .detalle-item .temp-min-val {
    color: #4facfe !important;
}