/* ==========================================================================
   LORICA SMART CITY - RADAR CLIMÁTICO (V28.0)
   Archivo: 05-clima-ia.css

   Mismo diseño de V27.4 (colores, tipografía y botones), con:
   - Cuadro de resultado (índice de calor, tormenta, UV, vías, caudal…) compacto:
     antes era de 16 px en mayúsculas y ocupaba mucho.
   - Pestañas dentro de cada opción, gráficos SVG, lista por horas, próxima lluvia,
     mapa en vivo, imagen satelital, sismos, modelos, detalle del día y salud.
   - Bloque ENSO y sus botones centrados.
   - Cuadrícula de 20 opciones (5 filas).
   - Se respetan los tamaños de letra de la versión anterior.
   ========================================================================== */

#cl-overlay-ia {
    position: fixed !important; inset: 0 !important;
    background: rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
    z-index: 10000 !important; z-index: var(--lorica-z-modal, 10000) !important;
}

#cl-tarjeta-ia {
    position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
    width: 94% !important; max-width: 400px !important;
    max-height: calc(100vh - 24px) !important; max-height: calc(100dvh - 24px) !important;
    background: #fff !important; padding: 14px 16px !important; border-radius: 20px !important;
    border-width: 1.5px !important; border-style: solid !important; border-color: #28a745;   /* sin !important: el aura se anima */
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    z-index: 10005 !important; z-index: calc(var(--lorica-z-modal, 10000) + 5) !important;
    box-sizing: border-box !important; font-family: inherit !important; outline: none !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
}
#cl-tarjeta-ia * { box-sizing: border-box !important; }
#cl-tarjeta-ia > .lorica-modal-contenido-ia { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; }

#cl-tarjeta-ia [role="button"], #cl-tarjeta-ia a {
    outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent !important;
    text-decoration: none !important; font-family: inherit !important; user-select: none !important; -webkit-user-select: none !important; cursor: pointer !important;
}
#cl-tarjeta-ia [role="button"]:focus-visible { outline: 2px solid #007AFF !important; outline-offset: 2px !important; }

@keyframes auraClimaIA {
    0%   { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 10px rgba(40,167,69,0.3); border-color: #28a745; }
    50%  { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 20px rgba(40,167,69,0.6); border-color: #20c997; }
    100% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 10px rgba(40,167,69,0.3); border-color: #28a745; }
}
@keyframes fadeInClIA { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
    .cl-borde-activo-ia { animation: auraClimaIA 3s infinite; }
    .cl-animado-ia { animation: fadeInClIA 0.3s ease !important; }
}
@media (prefers-reduced-motion: reduce) {
    .cl-borde-activo-ia { animation: none !important; border-color: #28a745 !important; }
}

/* ── CABECERA ── */
.cl-header-ia { display: grid !important; grid-template-columns: 36px 1fr 36px !important; align-items: center !important; margin-bottom: 8px !important; padding-bottom: 6px !important; border-bottom: 1px solid #e5e5ea !important; flex-shrink: 0 !important; }
.cl-btn-close-ia, .cl-btn-audio-ia { color: #6c6c70 !important; font-size: 18px !important; padding: 0 !important; transition: color 0.2s !important; background: transparent !important; border: none !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; }
.cl-btn-close-ia:hover, .cl-btn-audio-ia:hover { color: #0f2c59 !important; }
.cl-btn-audio-ia.lorica-voz-activa { color: #28a745 !important; }
#cl-dinamic-title-ia { font-size: 14px !important; font-weight: 900 !important; color: #28a745 !important; letter-spacing: 0.5px !important; margin: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 6px !important; text-transform: uppercase !important; text-align: center !important; line-height: 1.2 !important; }
#cl-dinamic-title-ia i { color: #28a745 !important; }

/* ── CUERPO CON SCROLL ── */
#cl-cuerpo-ia { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; }
#cl-cuerpo-ia::-webkit-scrollbar { width: 3px; }
#cl-cuerpo-ia::-webkit-scrollbar-thumb { background: #d1d1d6; border-radius: 10px; }
.cl-animado-ia { display: block !important; width: 100% !important; }

/* ── ESTADOS: cargando / error / vacío ── */
.cl-cargando-ia, .cl-error-ia { padding: 50px 12px !important; text-align: center !important; font-size: 11px !important; font-weight: 600 !important; color: #6c6c70 !important; line-height: 1.5 !important; }
.cl-cargando-ia i { font-size: 24px !important; color: #28a745 !important; margin-bottom: 10px !important; }
.cl-error-ia i { font-size: 32px !important; color: #8e8e93 !important; margin-bottom: 10px !important; display: block !important; }
.cl-error-ia > div { margin-bottom: 14px !important; font-size: 12px !important; color: #444 !important; }
.cl-vacio-ia { padding: 24px 12px !important; text-align: center !important; font-size: 11px !important; color: #6c6c70 !important; line-height: 1.6 !important; }
.cl-vacio-ia .cl-btn-corto-ia { margin-top: 10px !important; }

/* ── PORTADA ── */
.cl-loc-ia { display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; margin-bottom: 2px !important; }
.cl-lugar-ia { font-size: 12px !important; font-weight: 800 !important; color: #1c1c1e !important; }
.cl-lugar-ia i { color: #28a745 !important; margin-right: 2px !important; }
.cl-chip-ubic-ia { font-size: 10px !important; font-weight: 700 !important; color: #0f2c59 !important; background: #eef2f7 !important; border: 1px solid #dbe4ee !important; border-radius: 12px !important; padding: 3px 9px !important; }
.cl-chip-ubic-ia:hover { background: #0f2c59 !important; color: #fff !important; }
.cl-reloj-linea-ia { text-align: center !important; font-size: 11px !important; color: #6c6c70 !important; margin-bottom: 8px !important; }

.cl-alerta-ia { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 12px !important; border-radius: 8px !important; font-size: 11px !important; font-weight: 800 !important; margin-bottom: 10px !important; text-align: left !important; }
.cl-alerta-ia .cl-alerta-flecha-ia { margin-left: auto !important; font-size: 10px !important; }
.cl-alerta-ia.al-tormenta { background: rgba(138,43,226,0.1) !important; color: #6a1b9a !important; border: 1px solid rgba(138,43,226,0.35) !important; }
.cl-alerta-ia.al-calor    { background: rgba(255,59,48,0.08) !important; color: #b30000 !important; border: 1px solid rgba(255,59,48,0.35) !important; }
.cl-alerta-ia.al-lluvia   { background: rgba(0,122,255,0.08) !important; color: #0050a0 !important; border: 1px solid rgba(0,122,255,0.3) !important; }

.cl-hero-ia { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin-bottom: 4px !important; }
.cl-temp-ia { font-size: 26px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: -1px !important; }
.cl-icono-clima-ia { font-size: 22px !important; }
.cl-cond-ia { font-size: 15px !important; font-weight: 800 !important; color: #1c1c1e !important; text-transform: uppercase !important; letter-spacing: -0.5px !important; margin: 0 !important; text-align: left !important; }
.cl-cond-sub-ia { text-align: center !important; font-size: 11px !important; color: #6c6c70 !important; margin-bottom: 10px !important; }
.cl-msj-home-ia { font-size: 11px !important; color: #2f6b3d !important; background: rgba(40,167,69,0.06) !important; border-left: 3px solid #28a745 !important; border-radius: 6px !important; padding: 8px 10px !important; margin-bottom: 10px !important; line-height: 1.45 !important; text-align: left !important; }

.cl-pronostico4h-ia { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; background: #f4f5f7 !important; border-radius: 8px !important; padding: 10px 4px !important; margin-bottom: 12px !important; border: 1px solid #e5e5ea !important; }
.cl-p4h-item-ia { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; }
.cl-p4h-hora-ia { font-size: 10px !important; color: #6c6c70 !important; font-weight: 700 !important; }
.cl-p4h-icono-ia { font-size: 16px !important; }
.cl-p4h-temp-ia { font-size: 12px !important; font-weight: 900 !important; color: #1c1c1e !important; line-height: 1 !important; }
.cl-p4h-lluvia-ia { font-size: 9px !important; font-weight: 700 !important; color: #007aff !important; }
.cl-invisible-ia { visibility: hidden !important; }

/* ── CUADRÍCULA 4×4 ── */
.cl-grid-iconos-ia { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; margin-bottom: 12px !important; padding: 6px 4px !important; background: #f4f5f7 !important; border-radius: 8px !important; border: 1px solid #e5e5ea !important; }
.cl-icono-grid-ia { background: transparent !important; border: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 4px 2px !important; border-radius: 6px !important; transition: background-color 0.2s ease, transform 0.2s ease !important; color: #6c6c70 !important; min-height: 42px !important; }
.cl-icono-grid-ia i { font-size: 14px !important; color: #6c6c70 !important; transition: color 0.2s ease !important; margin-bottom: 2px !important; }
.cl-icono-grid-ia span { font-size: 9px !important; font-weight: 500 !important; color: #444 !important; transition: color 0.2s ease !important; text-align: center !important; }
.cl-icono-grid-ia:hover { background: rgba(40,167,69,0.08) !important; }
.cl-icono-grid-ia:hover i, .cl-icono-grid-ia:hover span { color: #28a745 !important; }
.cl-icono-grid-ia:active { transform: scale(0.94) !important; }

/* ── BOTONES ── */
.cl-grid-1-ia { display: grid !important; grid-template-columns: 1fr !important; gap: 4px !important; margin-bottom: 4px !important; width: 100% !important; }
.cl-grid-2-ia { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; margin: 10px 0 4px !important; width: 100% !important; }
.cl-grid-actions-ia { display: grid !important; grid-template-columns: 1fr auto 1fr !important; gap: 6px !important; margin-bottom: 4px !important; width: 100% !important; }
.cl-btn-l-ia { background: #f4f5f7 !important; color: #6c6c70 !important; padding: 10px 4px !important; border-radius: 8px !important; font-size: 10.5px !important; border: 1px solid #e5e5ea !important; font-weight: bold !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: 44px !important; line-height: 1.2 !important; }
.cl-btn-l-ia i { margin-right: 5px !important; font-size: 11px !important; color: #8e8e93 !important; transition: color 0.3s ease !important; }
.cl-btn-l-ia:hover { background: #0f2c59 !important; color: #fff !important; border-color: #0f2c59 !important; }
.cl-btn-l-ia:hover i { color: #fff !important; }
.cl-btn-l-ia:active { background: #28a745 !important; color: #fff !important; border-color: #28a745 !important; transform: scale(0.96) !important; }
.cl-btn-compartir-ia { padding-left: 16px !important; padding-right: 16px !important; min-width: 44px !important; }
.cl-btn-compartir-ia i { margin-right: 0 !important; }
.cl-btn-corto-ia { display: inline-flex !important; width: auto !important; padding: 10px 18px !important; }
.cl-btn-volver-ia { background: #f4f5f7 !important; color: #6c6c70 !important; text-transform: uppercase !important; font-weight: bold !important; letter-spacing: 0.5px !important; border: 1px solid #e5e5ea !important; padding: 10px 4px !important; border-radius: 8px !important; font-size: 11px !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; transition: background-color 0.3s ease, color 0.3s ease !important; min-height: 44px !important; }
.cl-btn-volver-ia i { color: #8e8e93 !important; margin-right: 6px !important; font-size: 12px !important; }
.cl-btn-volver-ia:hover { background: #0f2c59 !important; color: #fff !important; border-color: #0f2c59 !important; }
.cl-btn-volver-ia:hover i { color: #fff !important; }
.cl-cerrar-ia { text-align: center !important; color: #000 !important; font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; display: block !important; width: 100% !important; padding-top: 8px !important; padding-bottom: 2px !important; margin-top: 10px !important; transition: color 0.3s ease !important; background: transparent !important; border: none !important; }
.cl-cerrar-ia:hover { color: #28a745 !important; }
.cl-enlace-ia { color: #0f2c59 !important; font-weight: 700 !important; text-decoration: underline !important; }

/* ── PIE: estado de conexión + atribución ── */
.cl-pie-ia { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; font-size: 9.5px !important; color: #8e8e93 !important; margin: 8px 0 4px !important; text-align: center !important; }
#cl-estado-ia i { margin-right: 3px !important; }
#cl-estado-ia.cl-estado-alerta-ia { color: #856404 !important; background: #fff3cd !important; border: 1px solid #ffe69c !important; border-radius: 6px !important; padding: 3px 8px !important; font-weight: 700 !important; }

/* ── VISTAS ── */
.cl-content-vista-ia { margin-bottom: 6px !important; }
.cl-seccion-tit-ia { font-size: 11px !important; font-weight: 900 !important; color: #1c1c1e !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; margin: 12px 0 8px !important; text-align: center !important; }
.cl-content-vista-ia > .cl-seccion-tit-ia:first-child { margin-top: 4px !important; }
.cl-msj-contextual-ia { background: rgba(40,167,69,0.06) !important; border: 1px solid rgba(40,167,69,0.3) !important; border-radius: 8px !important; padding: 12px !important; margin-top: 12px !important; text-align: center !important; display: block !important; }
.cl-msj-contextual-ia span { font-size: 12px !important; color: #444 !important; line-height: 1.5 !important; display: block !important; }
.cl-aviso-ia { background: #fff3cd !important; color: #856404 !important; border: 1px solid #ffe69c !important; border-radius: 8px !important; padding: 10px 12px !important; margin-top: 10px !important; font-size: 11px !important; line-height: 1.45 !important; text-align: left !important; }
.cl-aviso-ia i { margin-right: 4px !important; }
.cl-dato-linea-ia { font-size: 11px !important; color: #444 !important; text-align: center !important; line-height: 1.5 !important; margin: 4px 0 10px !important; }
.cl-nota-legal-ia { font-size: 10px !important; color: #8e8e93 !important; text-align: center !important; line-height: 1.4 !important; margin-top: 14px !important; padding-top: 10px !important; border-top: 1px dashed #d1d1d6 !important; }
.cl-nota-legal-ia strong { color: #1c1c1e !important; font-weight: 900 !important; }
.cl-separado-ia { margin-top: 12px !important; }

.cl-stats-inline-ia { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-bottom: 12px !important; }
.cl-stat-inline-ia { background: #f4f5f7 !important; border: 1px solid #e5e5ea !important; border-radius: 8px !important; padding: 8px 4px !important; text-align: center !important; display: block !important; }
.cl-stat-inline-ia i { display: inline-block !important; font-size: 13px !important; margin-right: 3px !important; vertical-align: middle !important; }
.cl-stat-inline-ia strong { display: inline-block !important; font-size: 12.5px !important; font-weight: 900 !important; color: #1c1c1e !important; vertical-align: middle !important; }
.cl-stat-inline-ia strong em { font-style: normal !important; font-size: 9px !important; font-weight: 500 !important; color: #6c6c70 !important; }
.cl-stat-inline-ia span { display: block !important; font-size: 8.5px !important; color: #6c6c70 !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; margin-top: 1px !important; line-height: 1.1 !important; font-weight: 500 !important; }

.cl-astro-ia { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important; gap: 6px !important; background: #f4f5f7 !important; border: 1px solid #e5e5ea !important; border-radius: 8px !important; padding: 10px 6px !important; margin-bottom: 12px !important; }
.cl-astro-ia > div { text-align: center !important; font-size: 10px !important; color: #6c6c70 !important; line-height: 1.4 !important; }
.cl-astro-ia > div i { color: #ff9500 !important; margin-right: 3px !important; }
.cl-astro-ia > div strong { color: #1c1c1e !important; font-size: 11px !important; font-weight: 800 !important; display: block !important; margin-top: 2px !important; }

.cl-bars-wrap-ia { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.cl-bar-row-ia { display: grid !important; grid-template-columns: 46px 1fr auto !important; gap: 8px !important; align-items: center !important; }
.cl-bar-hora-ia { font-size: 11px !important; color: #6c6c70 !important; font-weight: 600 !important; }
.cl-bar-track-ia { height: 14px !important; background: #f4f5f7 !important; border-radius: 4px !important; overflow: hidden !important; border: 1px solid #e5e5ea !important; }
.cl-bar-fill-ia { height: 100% !important; transition: width 0.3s ease !important; border-radius: 3px !important; }
.cl-bar-pct-ia { font-size: 11px !important; font-weight: 800 !important; color: #1c1c1e !important; text-align: right !important; min-width: 38px !important; }
.cl-bar-fill-ia.lv-1 { background: #34c759 !important; } .cl-bar-fill-ia.lv-2 { background: #ffcc00 !important; }
.cl-bar-fill-ia.lv-3 { background: #3b82f6 !important; } .cl-bar-fill-ia.lv-4 { background: #1e40af !important; }

.cl-card-fenomeno-ia { background: #f4f5f7 !important; border: 1px solid #e5e5ea !important; border-radius: 8px !important; padding: 12px !important; margin-bottom: 10px !important; }
.cl-fenomeno-estado-ia { font-size: 12px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; text-align: center !important; margin-bottom: 8px !important; }
.cl-fenomeno-estado-ia i { margin-right: 4px !important; }
.cl-fenomeno-detalles-ia { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 6px !important; font-size: 11px !important; color: #6c6c70 !important; text-align: center !important; margin-bottom: 10px !important; padding: 8px !important; background: #fff !important; border-radius: 6px !important; }
.cl-fenomeno-detalles-ia strong { color: #1c1c1e !important; font-weight: 800 !important; display: block !important; margin-top: 2px !important; }
.cl-fenomeno-msj-ia { font-size: 11px !important; color: #444 !important; line-height: 1.5 !important; text-align: center !important; margin-bottom: 6px !important; }
.cl-fuente-ia { font-size: 10px !important; color: #6c6c70 !important; text-align: center !important; margin-top: 6px !important; }
.tend-baja { color: #1da1f2 !important; } .tend-sube { color: #28a745 !important; } .tend-calma { color: #ff9500 !important; } .tend-estable { color: #34c759 !important; }
.enso-nino { color: #ff9500 !important; } .enso-nina { color: #1da1f2 !important; } .enso-vig { color: #b45309 !important; } .enso-neutro { color: #34c759 !important; }

.cl-aire-resumen-ia { text-align: center !important; margin-bottom: 12px !important; padding: 14px !important; background: #f4f5f7 !important; border: 1px solid #e5e5ea !important; border-radius: 8px !important; }
.cl-aire-grande-ia { font-size: 15px !important; font-weight: 900 !important; line-height: 1.15 !important; margin-bottom: 4px !important; text-transform: uppercase !important; }
.cl-aire-sub-ia { font-size: 11px !important; color: #6c6c70 !important; }
.ica-1 { color: #00a651 !important; } .ica-2 { color: #b8a000 !important; } .ica-3 { color: #f47920 !important; }
.ica-4 { color: #e2001a !important; } .ica-5 { color: #8b3a96 !important; } .ica-6 { color: #7e0023 !important; }

/* Niveles (UV, calor, tormenta, vías) */
/* Cuadro de resultado compacto: valor + nivel en una sola línea */
.cl-nivel-ia { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-align: left !important; padding: 7px 12px !important; border-radius: 8px !important; background: #f4f5f7 !important; border: 1px solid #e5e5ea !important; border-left: 3px solid currentColor !important; margin-bottom: 6px !important; line-height: 1.25 !important; }
.cl-nivel-ia i { font-size: 15px !important; margin: 0 !important; flex-shrink: 0 !important; }
.cl-nivel-ia span { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 0 6px !important; }
.cl-nivel-ia strong { font-size: 13px !important; font-weight: 900 !important; color: inherit !important; }
.cl-nivel-ia em { font-style: normal !important; font-size: 11px !important; font-weight: 600 !important; color: #6c6c70 !important; }
.uv-1, .cal-0, .tr-0, .via-ok { color: #28a745 !important; }
.uv-2, .cal-1, .tr-1 { color: #b8a000 !important; }
.uv-3, .cal-2, .tr-2, .via-precaucion { color: #ff9500 !important; }
.uv-4, .cal-3, .tr-3, .via-mal { color: #ff3b30 !important; }
.uv-5, .cal-4 { color: #8b3a96 !important; }
.cl-bar-fill-ia.cal-0 { background: #34c759 !important; } .cl-bar-fill-ia.cal-1 { background: #ffcc00 !important; }
.cl-bar-fill-ia.cal-2 { background: #ff9500 !important; } .cl-bar-fill-ia.cal-3 { background: #ff3b30 !important; } .cl-bar-fill-ia.cal-4 { background: #8b3a96 !important; }
.cl-escala-ia { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 3px !important; margin-bottom: 8px !important; }
.cl-escala-ia span { font-size: 8.5px !important; font-weight: 800 !important; text-align: center !important; padding: 6px 2px !important; border-radius: 5px !important; background: #f4f5f7 !important; line-height: 1.25 !important; }

.cl-chips-horas-ia { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 4px !important; margin: 8px 0 6px !important; }
.cl-chip-hora-ia { font-size: 9.5px !important; font-weight: 800 !important; text-align: center !important; padding: 6px 2px !important; border-radius: 6px !important; background: #f4f5f7 !important; border: 1px solid #e5e5ea !important; }
.cl-chip-hora-ia.tr-1 { background: rgba(255,204,0,0.15) !important; } .cl-chip-hora-ia.tr-2 { background: rgba(255,149,0,0.18) !important; } .cl-chip-hora-ia.tr-3 { background: rgba(255,59,48,0.18) !important; }
.cl-leyenda-ia { font-size: 9.5px !important; color: #6c6c70 !important; text-align: center !important; margin-bottom: 6px !important; }
.cl-leyenda-ia span { margin-left: 6px !important; }
.cl-lista-ia { margin: 0 0 10px 0 !important; padding: 0 0 0 18px !important; text-align: left !important; }
.cl-lista-ia li { font-size: 11px !important; color: #444 !important; line-height: 1.45 !important; margin-bottom: 6px !important; }

.cl-semana-wrap-ia { display: flex !important; gap: 6px !important; overflow-x: auto !important; padding-bottom: 6px !important; -webkit-overflow-scrolling: touch !important; }
.cl-semana-wrap-ia::-webkit-scrollbar { height: 3px; }
.cl-semana-wrap-ia::-webkit-scrollbar-thumb { background: #d1d1d6; border-radius: 10px; }
.cl-semana-card-ia { flex: 0 0 auto !important; width: 70px !important; background: #f4f5f7 !important; border: 1px solid #e5e5ea !important; border-radius: 8px !important; padding: 10px 6px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
.cl-semana-hoy-ia { border-color: #28a745 !important; background: rgba(40,167,69,0.06) !important; }
.cl-semana-dia-ia { font-size: 11px !important; font-weight: 800 !important; color: #1c1c1e !important; margin-bottom: 6px !important; text-transform: uppercase !important; }
.cl-semana-icono-ia { font-size: 16px !important; }
.cl-semana-temps-ia { margin-top: 6px !important; font-size: 12px !important; }
.cl-semana-max-ia { font-weight: 900 !important; color: #1c1c1e !important; }
.cl-semana-min-ia { color: #6c6c70 !important; font-weight: 500 !important; margin-left: 2px !important; }
.cl-semana-lluvia-ia { font-size: 10px !important; color: #1da1f2 !important; margin-top: 4px !important; }

.cl-mun-row-ia { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; padding: 10px 12px !important; background: #f4f5f7 !important; border: 1px solid #e5e5ea !important; border-radius: 8px !important; margin-bottom: 6px !important; }
.cl-mun-activa-ia { border-color: #28a745 !important; background: rgba(40,167,69,0.06) !important; }
.cl-mun-nombre-ia { font-size: 12.5px !important; font-weight: 800 !important; color: #1c1c1e !important; flex: 0 0 34% !important; text-align: left !important; }
.cl-mun-cond-ia { font-size: 10px !important; color: #6c6c70 !important; flex: 1 !important; text-align: left !important; }
.cl-mun-temp-ia { font-size: 16px !important; font-weight: 900 !important; min-width: 40px !important; text-align: right !important; }

.cl-hist-row-ia { display: grid !important; grid-template-columns: 1fr auto auto !important; gap: 10px !important; align-items: center !important; padding: 10px 12px !important; background: #f4f5f7 !important; border: 1px solid #e5e5ea !important; border-radius: 8px !important; margin-bottom: 6px !important; font-size: 11px !important; color: #444 !important; }
.cl-hist-anio-ia { font-weight: 800 !important; color: #1c1c1e !important; text-align: left !important; }
.cl-hist-row-ia i { margin-right: 3px !important; }

.cl-rec-row-ia { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; background: #f4f5f7 !important; border: 1px solid #e5e5ea !important; border-radius: 8px !important; margin-bottom: 8px !important; text-align: left !important; }
.cl-rec-row-ia i { font-size: 18px !important; flex-shrink: 0 !important; text-align: center !important; width: 24px !important; }
.cl-rec-row-ia span { font-size: 11.5px !important; color: #444 !important; line-height: 1.4 !important; }

.cl-alertas-ofi-ia { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.cl-alerta-ofi-ia { display: flex !important; align-items: center !important; gap: 8px !important; padding: 9px 12px !important; border-radius: 8px !important; background: #fff !important; border: 1px solid #dbe4ee !important; font-size: 11px !important; font-weight: 700 !important; color: #0f2c59 !important; }
.cl-alerta-ofi-ia:hover { background: #eef2f7 !important; }
.cl-alerta-ofi-ia .cl-ext-ia { margin-left: auto !important; font-size: 10px !important; color: #8e8e93 !important; }

.cl-compartir-prev-ia { background: #f4f5f7 !important; border: 1px solid #e5e5ea !important; border-radius: 8px !important; padding: 14px !important; font-size: 12px !important; color: #444 !important; line-height: 1.5 !important; text-align: left !important; }

.cl-tabla-wrap-ia { overflow-x: auto !important; border: 1px solid #e5e5ea !important; border-radius: 8px !important; margin-bottom: 6px !important; }
.cl-tabla-ia { width: 100% !important; border-collapse: collapse !important; font-size: 10.5px !important; margin: 0 !important; }
.cl-tabla-ia th { background: #f4f5f7 !important; color: #1c1c1e !important; font-weight: 800 !important; padding: 6px 8px !important; text-align: left !important; white-space: nowrap !important; border: none !important; }
.cl-tabla-ia td { padding: 6px 8px !important; color: #444 !important; border-top: 1px solid #eee !important; border-left: none !important; border-right: none !important; border-bottom: none !important; white-space: nowrap !important; }
.cl-tabla-ia tbody tr:last-child td { font-weight: 800 !important; color: #0f2c59 !important; background: rgba(40,167,69,0.06) !important; }
.cl-rio-iframe-wrap-ia { display: flex !important; justify-content: center !important; }
.cl-rio-iframe-wrap-ia iframe { width: 100% !important; height: 180px !important; border: 1px solid #e5e5ea !important; border-radius: 8px !important; }

/* Luna dibujada con CSS: la parte iluminada crece con --ilum */
.cl-luna-ia { display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; margin: 6px 0 12px !important; }
.cl-luna-disco-ia { width: 58px !important; height: 58px !important; border-radius: 50% !important; flex-shrink: 0 !important; box-shadow: 0 0 12px rgba(246,231,161,0.6) !important;
    background: linear-gradient(to left, #f6e7a1 var(--ilum, 50%), #3a3a3c var(--ilum, 50%)) !important; }
.cl-luna-disco-ia[data-creciente="0"] { background: linear-gradient(to right, #f6e7a1 var(--ilum, 50%), #3a3a3c var(--ilum, 50%)) !important; }
.cl-luna-fase-ia { font-size: 15px !important; font-weight: 900 !important; color: #1c1c1e !important; text-transform: uppercase !important; }
.cl-luna-ia .cl-dato-linea-ia { text-align: left !important; margin: 2px 0 0 !important; }

/* Colores por grupo (antes en línea) */
.cl-c-sol { color: #ffb800 !important; } .cl-c-nube { color: #a9a9a9 !important; } .cl-c-niebla { color: #9fb4cf !important; }
.cl-c-lluvia { color: #1e90ff !important; } .cl-c-tormenta { color: #8a2be2 !important; }
.cl-c-agua { color: #1da1f2 !important; } .cl-c-azul { color: #0f2c59 !important; } .cl-c-verde { color: #28a745 !important; }
.cl-c-naranja { color: #ff9500 !important; } .cl-c-rojo { color: #ff3b30 !important; } .cl-c-morado { color: #8e44ad !important; }
.cl-c-gris { color: #8e8e93 !important; } .cl-c-marron { color: #b45309 !important; }
.cl-t-fresco { color: #007aff !important; } .cl-t-normal { color: #1c1c1e !important; } .cl-t-calor { color: #ff3b30 !important; } .cl-t-extremo { color: #b30000 !important; }

/* ══════════════ NUEVO EN V28.0 ══════════════ */

/* Pestañas dentro de cada opción */
.cl-tabs-ia { display: flex !important; gap: 4px !important; overflow-x: auto !important; padding: 0 0 2px !important; margin: 0 0 8px !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; }
.cl-tabs-ia::-webkit-scrollbar { display: none; }
.cl-tabs-n2-ia, .cl-tabs-n3-ia, .cl-tabs-n5-ia { display: grid !important; overflow: visible !important; }
.cl-tabs-n2-ia { grid-template-columns: 1fr 1fr !important; }
.cl-tabs-n3-ia { grid-template-columns: repeat(3, 1fr) !important; }
.cl-tabs-n5-ia { grid-template-columns: repeat(5, 1fr) !important; }
.cl-tab-ia { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; font-size: 10px !important; font-weight: 700 !important; color: #6c6c70 !important; background: #f4f5f7 !important; border: 1px solid #e5e5ea !important; border-radius: 14px !important; padding: 6px 6px !important; min-height: 30px !important; line-height: 1.15 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transition: background-color 0.2s ease, color 0.2s ease !important; }
.cl-tab-ia:hover { background: rgba(40,167,69,0.08) !important; color: #28a745 !important; }
.cl-tab-ia.cl-tab-activa-ia { background: #28a745 !important; color: #fff !important; border-color: #28a745 !important; }

/* Gráficos SVG */
.cl-grafico-ia { width: 100% !important; background: #fff !important; border: 1px solid #e5e5ea !important; border-radius: 8px !important; padding: 6px 4px 4px !important; margin: 0 0 10px !important; }
.cl-grafico-ia svg { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; overflow: visible !important; }
.cl-grafico-ia svg text { font-family: inherit !important; }
.cl-leyenda-graf-ia { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 4px 10px !important; padding: 4px 2px 0 !important; font-size: 9px !important; color: #6c6c70 !important; }
.cl-leyenda-graf-ia span { display: inline-flex !important; align-items: center !important; gap: 4px !important; }
.cl-ley-barra-ia { display: inline-block !important; width: 9px !important; height: 9px !important; border-radius: 2px !important; }
.cl-ley-linea-ia { display: inline-block !important; width: 12px !important; height: 3px !important; border-radius: 2px !important; }
.cl-ley-punteada-ia { display: inline-block !important; width: 12px !important; height: 0 !important; border-top: 2px dashed currentColor !important; background: transparent !important; }

/* Resumen de la portada */
.cl-resumen-home-ia { font-size: 11px !important; color: #0f2c59 !important; background: #eef2f7 !important; border: 1px solid #dbe4ee !important; border-radius: 6px !important; padding: 7px 10px !important; margin-bottom: 8px !important; line-height: 1.4 !important; text-align: left !important; }
.cl-resumen-home-ia i { color: #28a745 !important; margin-right: 3px !important; }

/* Próxima lluvia */
.cl-proxima-ia { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; margin-bottom: 10px !important; background: rgba(0,122,255,0.06) !important; border: 1px solid rgba(0,122,255,0.25) !important; border-radius: 8px !important; text-align: left !important; }
.cl-proxima-ia > i { font-size: 22px !important; color: #1e40af !important; width: 26px !important; text-align: center !important; flex-shrink: 0 !important; }
.cl-proxima-ia > div { display: flex !important; flex-direction: column !important; gap: 1px !important; min-width: 0 !important; }
.cl-proxima-ia span { font-size: 9px !important; font-weight: 800 !important; color: #6c6c70 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; }
.cl-proxima-ia strong { font-size: 13px !important; font-weight: 900 !important; color: #1c1c1e !important; }
.cl-proxima-ia em { font-style: normal !important; font-size: 10.5px !important; color: #444 !important; line-height: 1.35 !important; }

/* Confianza del pronóstico */
.cl-confianza-ia { font-size: 10.5px !important; text-align: center !important; padding: 6px 8px !important; border-radius: 6px !important; margin: 8px 0 4px !important; color: #444 !important; background: #f4f5f7 !important; }
.cl-confianza-ia i { margin-right: 3px !important; }
.cl-confianza-ia.conf-alta i, .cl-confianza-ia.conf-alta strong { color: #28a745 !important; }
.cl-confianza-ia.conf-media i, .cl-confianza-ia.conf-media strong { color: #ff9500 !important; }
.cl-confianza-ia.conf-baja i, .cl-confianza-ia.conf-baja strong { color: #ff3b30 !important; }

/* Listas por hora y por día */
.cl-horas-lista-ia, .cl-dias-lista-ia { display: flex !important; flex-direction: column !important; gap: 3px !important; margin-bottom: 8px !important; }
.cl-hora-row-ia { display: grid !important; grid-template-columns: 44px 18px 34px 1fr 46px 50px !important; align-items: center !important; gap: 4px !important; padding: 6px 8px !important; background: #f4f5f7 !important; border-radius: 6px !important; font-size: 10.5px !important; color: #444 !important; }
.cl-hora-row-ia i { text-align: center !important; }
.cl-hr-h-ia { font-weight: 800 !important; color: #1c1c1e !important; }
.cl-hr-t-ia { font-weight: 900 !important; color: #1c1c1e !important; }
.cl-hr-s-ia { color: #8e8e93 !important; font-size: 9.5px !important; }
.cl-hr-p-ia { color: #8e8e93 !important; text-align: right !important; }
.cl-hr-p-ia.cl-hr-lluvia-ia { color: #007aff !important; font-weight: 800 !important; }
.cl-hr-v-ia { color: #6c6c70 !important; text-align: right !important; font-size: 9.5px !important; }
.cl-dia-row-ia { display: grid !important; grid-template-columns: 50px 18px 34px 48px 1fr !important; align-items: center !important; gap: 5px !important; padding: 7px 8px !important; background: #f4f5f7 !important; border-radius: 6px !important; font-size: 10.5px !important; color: #444 !important; }
.cl-dia-row-ia i { text-align: center !important; }
.cl-dr-d-ia { font-weight: 800 !important; color: #1c1c1e !important; }
.cl-dr-p-ia { color: #007aff !important; font-weight: 800 !important; }
.cl-dr-mm-ia { font-weight: 700 !important; color: #1c1c1e !important; }
.cl-dr-txt-ia { font-size: 9.5px !important; color: #6c6c70 !important; line-height: 1.3 !important; }
.cl-dr-ancho-ia { grid-column: 3 / -1 !important; font-size: 10.5px !important; }

/* Modelos */
.cl-modelos-ia { display: flex !important; flex-direction: column !important; gap: 4px !important; margin: 8px 0 !important; font-size: 10.5px !important; color: #444 !important; text-align: left !important; }
.cl-punto-ia { display: inline-block !important; width: 9px !important; height: 9px !important; border-radius: 50% !important; margin-right: 6px !important; vertical-align: middle !important; }
.cl-tabla-centro-ia th, .cl-tabla-centro-ia td { text-align: center !important; }
.cl-tabla-ia td small { font-size: 9px !important; color: #007aff !important; font-weight: 700 !important; }
.cl-tabla-plana-ia tbody tr:last-child td { font-weight: normal !important; color: #444 !important; background: transparent !important; }
.cl-tabla-ia tbody tr.cl-fila-act-ia td { font-weight: 800 !important; color: #0f2c59 !important; background: rgba(40,167,69,0.08) !important; }

/* Semana: tarjeta elegible + detalle del día */
.cl-semana-card-ia { cursor: pointer !important; transition: border-color 0.2s ease, background-color 0.2s ease !important; }
.cl-semana-card-ia > span { display: block !important; }
.cl-semana-sel-ia { border-color: #0f2c59 !important; background: #eef2f7 !important; box-shadow: inset 0 -3px 0 #0f2c59 !important; }
.cl-detalle-dia-ia { background: #fff !important; border: 1px solid #e5e5ea !important; border-radius: 8px !important; padding: 10px !important; margin: 6px 0 10px !important; }
.cl-detalle-tit-ia { font-size: 12px !important; font-weight: 900 !important; color: #1c1c1e !important; text-align: center !important; margin-bottom: 8px !important; }
.cl-detalle-tit-ia i { margin-right: 4px !important; }
.cl-mini-horas-ia { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)) !important; gap: 4px !important; margin-bottom: 8px !important; }
.cl-mini-horas-ia > div { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px !important; padding: 6px 2px !important; background: #f4f5f7 !important; border-radius: 6px !important; }
.cl-mini-horas-ia span { font-size: 9px !important; color: #6c6c70 !important; font-weight: 700 !important; }
.cl-mini-horas-ia strong { font-size: 11px !important; color: #1c1c1e !important; font-weight: 900 !important; }
.cl-mini-horas-ia em { font-style: normal !important; font-size: 9px !important; color: #007aff !important; font-weight: 700 !important; }

/* Mapa en vivo e imagen satelital */
.cl-mapa-ia { width: 100% !important; height: 320px !important; border-radius: 8px !important; overflow: hidden !important; border: 1px solid #e5e5ea !important; background: #eef2f7 !important; margin-bottom: 6px !important; }
.cl-mapa-ia iframe { width: 100% !important; height: 100% !important; border: 0 !important; display: block !important; }
.cl-sat-ia { position: relative !important; width: 100% !important; border-radius: 8px !important; overflow: hidden !important; border: 1px solid #e5e5ea !important; background: #111 !important; margin-bottom: 6px !important; min-height: 120px !important; }
.cl-sat-ia img { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; border: 0 !important; }
.cl-sat-fallo-ia { display: none !important; padding: 40px 14px !important; text-align: center !important; color: #fff !important; font-size: 11px !important; }
.cl-sat-ia.cl-sat-error-ia img { display: none !important; }
.cl-sat-ia.cl-sat-error-ia .cl-sat-fallo-ia { display: block !important; }

/* Sismos */
.cl-sismos-lista-ia { display: flex !important; flex-direction: column !important; gap: 4px !important; margin-bottom: 8px !important; }
.cl-sismo-row-ia { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 10px !important; background: #f4f5f7 !important; border-radius: 6px !important; text-align: left !important; }
.cl-sismo-row-ia > div { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
.cl-sismo-row-ia strong { font-size: 11px !important; color: #1c1c1e !important; font-weight: 800 !important; line-height: 1.3 !important; }
.cl-sismo-row-ia em { font-style: normal !important; font-size: 9.5px !important; color: #6c6c70 !important; line-height: 1.3 !important; }
.cl-mag-ia { flex-shrink: 0 !important; width: 38px !important; height: 30px !important; border-radius: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; font-weight: 900 !important; color: #fff !important; }
.cl-mag-ia.mag-1 { background: #34c759 !important; } .cl-mag-ia.mag-2 { background: #ffcc00 !important; color: #1c1c1e !important; }
.cl-mag-ia.mag-3 { background: #ff9500 !important; } .cl-mag-ia.mag-4 { background: #ff3b30 !important; }
.mag-1 { color: #28a745 !important; } .mag-2 { color: #b8a000 !important; } .mag-3 { color: #ff9500 !important; } .mag-4 { color: #ff3b30 !important; }

/* Río (caudal) y dengue */
.rio-1 { color: #b45309 !important; } .rio-2 { color: #0A5A7A !important; } .rio-3 { color: #ff9500 !important; } .rio-4 { color: #ff3b30 !important; }
.den-1 { color: #28a745 !important; } .den-2 { color: #b8a000 !important; } .den-3 { color: #ff9500 !important; } .den-4 { color: #ff3b30 !important; }
.cl-bar-fill-ia.den-f0 { background: #34c759 !important; } .cl-bar-fill-ia.den-f1 { background: #ffcc00 !important; } .cl-bar-fill-ia.den-f2 { background: #ff9500 !important; }
.cl-bar-hora-ia.cl-bar-ancha-ia { white-space: nowrap !important; }
.cl-bar-row-ia.cl-bar-row-ancha-ia { grid-template-columns: 82px 1fr auto !important; }

/* Centrado (ENSO) */
.cl-centro-ia { text-align: center !important; }
.cl-btns-centro-ia { display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 10px !important; width: 100% !important; }
.cl-btns-centro-ia .cl-btn-corto-ia { min-width: 120px !important; }

/* Filas que llevan a otra opción (Salud) */
.cl-rec-link-ia { cursor: pointer !important; transition: background-color 0.2s ease !important; }
.cl-rec-link-ia:hover { background: #eef2f7 !important; }
.cl-rec-link-ia .cl-fila-flecha-ia { margin-left: auto !important; font-size: 11px !important; color: #c7c7cc !important; width: auto !important; }

/* Fuentes de cada opción */
.cl-fuentes-ia { font-size: 9.5px !important; color: #8e8e93 !important; text-align: center !important; line-height: 1.4 !important; margin-top: 8px !important; }
.cl-fuentes-ia i { margin-right: 3px !important; }
.cl-dato-linea-ia .cl-enlace-ia i { margin-right: 4px !important; }

/* ── HORIZONTAL: dos columnas en la portada ── */
@media screen and (max-height: 500px) and (orientation: landscape) {
    #cl-tarjeta-ia { max-width: 680px !important; width: calc(100vw - 24px) !important; max-height: calc(100vh - 16px) !important; max-height: calc(100dvh - 16px) !important; padding: 10px 14px !important; }
    .cl-home-ia { display: grid !important; grid-template-columns: 1fr 1.1fr !important; gap: 12px !important; align-items: start !important; }
    .cl-temp-ia { font-size: 24px !important; }
    .cl-icono-clima-ia { font-size: 20px !important; }
    .cl-cond-sub-ia, .cl-msj-home-ia, .cl-pronostico4h-ia { margin-bottom: 8px !important; }
    .cl-grid-iconos-ia { padding: 4px !important; gap: 2px !important; margin-bottom: 8px !important; }
    .cl-icono-grid-ia { min-height: 36px !important; padding: 2px !important; }
    .cl-icono-grid-ia i { font-size: 12px !important; }
    .cl-btn-l-ia, .cl-btn-volver-ia { min-height: 36px !important; padding: 6px 4px !important; }
    .cl-cerrar-ia { padding-top: 4px !important; margin-top: 4px !important; }
    .cl-stats-inline-ia { grid-template-columns: repeat(4, 1fr) !important; }
    .cl-mapa-ia { height: 200px !important; }
    .cl-tab-ia { min-height: 26px !important; padding: 4px 6px !important; }
    .cl-sat-ia img { max-height: 220px !important; width: auto !important; margin: 0 auto !important; }
}
@media screen and (min-height: 501px) and (max-height: 700px) and (orientation: landscape) {
    #cl-tarjeta-ia { max-width: 500px !important; }
}