/* Clima — clima.php */

:root {
            --azul: #0ea5e9;
            --azul-osc: #0284c7;
            --oscuro: #0f172a;
            --muted: #64748b;
            --line: #e2e8f0;
            --white: #ffffff;
            --whatsapp: #25d366;
            --radius-xl: 26px;
            --radius-lg: 18px;
            --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
            --shadow-md: 0 12px 40px -12px rgba(15, 23, 42, 0.12);
        }

body.clima-page.td-page-body {
    color: var(--td-text, var(--oscuro));
    background: var(--td-page-bg, #d8e2ee);
}

body.clima-page .td-page-ambient--sky {
    background: linear-gradient(165deg, rgba(219, 234, 254, 0.85) 0%, rgba(240, 249, 255, 0.5) 35%, transparent 60%);
}

html[data-theme="dark"] body.clima-page .td-page-ambient--sky {
    background: radial-gradient(110% 52% at 50% -12%, rgba(14, 165, 233, 0.12), transparent 52%);
}

        #contenedor-alertas { margin-bottom: 14px; }

        .alerta-item {
            background: linear-gradient(90deg, #fef2f2, #fff1f2);
            border: 1px solid #fecaca;
            color: #991b1b;
            padding: 12px 16px;
            border-radius: var(--radius-lg);
            font-size: 12px;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
            box-shadow: var(--shadow-sm);
            animation: climaPulse 2.2s ease-in-out infinite;
        }
        @keyframes climaPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.92; transform: scale(0.995); }
        }

        /* Hero principal (el fondo lo sigue pintando JS con gradiente) */
        .card-main-clima {
            position: relative;
            overflow: hidden;
            border-radius: var(--radius-xl);
            padding: 28px 22px 32px;
            margin-bottom: 16px;
            color: #fff;
            text-align: center;
            box-shadow: var(--shadow-md);
            border: 1px solid rgba(255, 255, 255, 0.12);
            transition: background 0.75s ease, box-shadow 0.35s ease;
        }
        .card-main-clima::before {
            content: '';
            position: absolute;
            width: 220px;
            height: 220px;
            right: -80px;
            top: -100px;
            background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 70%);
            pointer-events: none;
        }
        .card-main-clima::after {
            content: '';
            position: absolute;
            width: 160px;
            height: 160px;
            left: -50px;
            bottom: -60px;
            background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 65%);
            pointer-events: none;
        }

        .z-index-up { position: relative; z-index: 2; }

        .clima-loc-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            opacity: 0.92;
            padding: 6px 14px;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 18px;
        }
        .clima-loc-pill i { font-size: 13px; opacity: 0.95; }

        .temp-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            flex-wrap: wrap;
            margin: 8px 0 4px;
        }

        .clima-icon-ring {
            width: 88px;
            height: 88px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.22);
            backdrop-filter: blur(8px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        .main-weather-icon {
            font-size: 52px;
            filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
            line-height: 1;
        }

        .clima-temp-wrap {
            display: flex;
            align-items: baseline;
            gap: 2px;
        }
        .temp-num {
            font-size: 76px;
            font-weight: 800;
            letter-spacing: -4px;
            line-height: 0.95;
            text-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
        }
        .temp-unit {
            font-size: 26px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.72);
            margin-left: 2px;
        }

        .frase-clima {
            margin-top: 18px;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.45;
            max-width: 320px;
            margin-left: auto;
            margin-right: auto;
            padding: 12px 18px;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.18);
            border: 1px solid rgba(255, 255, 255, 0.18);
            backdrop-filter: blur(10px);
        }

        .btn-share-weather {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            margin: 0 0 22px;
            padding: 14px 18px;
            border-radius: var(--radius-lg);
            text-decoration: none;
            font-size: 13px;
            font-weight: 800;
            color: var(--oscuro);
            background: var(--white);
            border: 1px solid var(--line);
            box-shadow: var(--shadow-sm);
            transition: transform 0.15s ease, box-shadow 0.2s ease;
        }
        .btn-share-weather:active { transform: scale(0.98); }
        .btn-share-weather i { color: var(--whatsapp); font-size: 20px; }

        .clima-section-head {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 22px 0 10px;
            padding-left: 2px;
        }
        .clima-section-head i {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: #fff;
            color: var(--azul);
            font-size: 16px;
            border: 1px solid var(--line);
            box-shadow: var(--shadow-sm);
        }
        .clima-section-head span {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .bloque-dia-completo {
            background: var(--white);
            border-radius: var(--radius-xl);
            padding: 20px 16px 18px;
            margin-bottom: 8px;
            border: 1px solid var(--line);
            box-shadow: var(--shadow-md);
        }
        .resumen-texto-integrado {
            font-size: 14px;
            color: var(--muted);
            text-align: center;
            font-weight: 600;
            line-height: 1.5;
            padding: 0 4px 16px;
            margin-bottom: 16px;
            border-bottom: 1px solid #f1f5f9;
        }

        .pasos-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .paso-item {
            text-align: center;
            padding: 12px 6px 10px;
            border-radius: var(--radius-lg);
            background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
            border: 1px solid #e2e8f0;
        }
        .paso-label {
            font-size: 9px;
            font-weight: 800;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .paso-ic {
            display: block;
            font-size: 22px;
            margin: 8px 0 4px;
        }
        .paso-ic.dia { color: #f59e0b; }
        .paso-ic.noche { color: #64748b; }
        .paso-temp {
            font-size: 17px;
            font-weight: 800;
            color: var(--oscuro);
        }

        .card-pronostico {
            background: var(--white);
            border-radius: var(--radius-xl);
            overflow: hidden;
            border: 1px solid var(--line);
            box-shadow: var(--shadow-md);
        }
        .pronostico-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 16px 18px;
            border-bottom: 1px solid #f1f5f9;
            transition: background 0.15s ease;
        }
        .pronostico-item:last-child { border-bottom: none; }
        .pronostico-item:hover { background: #fafbfc; }

        .pron-dia {
            text-transform: capitalize;
            font-weight: 800;
            font-size: 14px;
            color: var(--oscuro);
            min-width: 96px;
        }
        .pron-mid {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .pron-mid i { font-size: 26px; line-height: 1; }
        .prob-lluvia {
            font-size: 10px;
            color: var(--azul-osc);
            font-weight: 800;
            margin-top: 4px;
            min-height: 14px;
        }
        .pron-temps {
            text-align: right;
            min-width: 88px;
        }
        .pron-tmax { font-weight: 800; font-size: 16px; color: var(--oscuro); }
        .pron-tmin { color: #94a3b8; font-size: 13px; font-weight: 700; margin-left: 6px; }

        .pronostico-item--empty {
            justify-content: center;
            color: var(--muted);
            font-weight: 700;
            font-size: 13px;
            padding: 22px 16px;
        }