/* === PALETA OFICIAL === */
#lc-clima-app {
            --c-azul: #0026FF;
            --c-fucsia: #FF1C7E;
            --c-carbon: #1F1F1F;
            --c-gris-fondo: #F5F6F8;
            --c-gris-borde: #E5E7EB;
            --c-blanco: #FFFFFF;
            --c-lima: #C6FF00;
            --c-rojo: #FF0033;
            
            --f-titulos: 'Dosis', sans-serif;
            --f-textos: 'Exo', sans-serif;
        }

        /* === RESET & GLOBALS === */
#lc-clima-app * { margin: 0; padding: 0; box-sizing: border-box; }
#lc-clima-app html, #lc-clima-app {
            max-width: 100%;
            overflow-x: hidden;
        }
#lc-clima-app {
            font-family: var(--f-textos);
            background-color: var(--c-blanco);
            color: var(--c-carbon);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            position: relative;
        }
        
#lc-clima-app button { cursor: pointer; font-family: inherit; }
        
        /* Ocultar barra de desplazamiento para un Iframe más limpio */
#lc-clima-app html, #lc-clima-app { -ms-overflow-style: none; scrollbar-width: none; }
        
#lc-clima-app .container {
            width: 100%;
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 16px;
        }

        /* === SKELETON ANIMATION === */
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.4; }
            100% { opacity: 1; }
        }
#lc-clima-app .skeleton {
            background-color: var(--c-gris-borde);
            border-radius: 8px;
            animation: pulse 1.5s infinite ease-in-out;
        }
#lc-clima-app .skeleton-text { height: 20px; width: 60%; margin-bottom: 8px; }
#lc-clima-app .skeleton-temp { height: 80px; width: 120px; border-radius: 16px; }
#lc-clima-app .skeleton-card { height: 120px; width: 100%; border-radius: 16px; }

        /* === ENCABEZADO === */
#lc-clima-app .app-header {
            padding: 24px 0 16px;
            border-bottom: 1px solid var(--c-gris-borde);
            margin-bottom: 24px;
        }
#lc-clima-app .app-header-top {
            font-family: var(--f-titulos);
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--c-azul);
            font-weight: 800;
            margin-bottom: 8px;
        }
#lc-clima-app .app-header-main {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 16px;
        }
#lc-clima-app .app-title {
            font-family: var(--f-titulos);
            font-size: 32px;
            font-weight: 800;
            color: var(--c-carbon);
            line-height: 1.1;
            word-break: break-word; /* Prevent long city names from overflowing */
        }
#lc-clima-app .app-date {
            font-size: 14px;
            color: #6B7280;
            margin-top: 4px;
        }
#lc-clima-app .btn-change-location {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--c-gris-fondo);
            border: 1px solid var(--c-gris-borde);
            padding: 10px 16px;
            border-radius: 12px;
            font-weight: 600;
            color: var(--c-carbon);
            transition: all 0.2s;
        }
#lc-clima-app .btn-change-location:hover { background: #e5e7eb; }
#lc-clima-app .btn-change-location i { color: var(--c-azul); }

        /* === CONTENIDO PRINCIPAL (GRID) === */
#lc-clima-app .main-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
            margin-bottom: 48px;
        }
#lc-clima-app .main-grid > div {
            min-width: 0; /* Critical fix for Grid blowout */
        }
        @media (min-width: 992px) {
#lc-clima-app .main-grid { grid-template-columns: 3fr 2fr; align-items: start; }
        }

        /* === TARJETA CLIMA ACTUAL === */
#lc-clima-app .card {
            background: var(--c-blanco);
            border: 1px solid var(--c-gris-borde);
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.02);
            position: relative;
            overflow: hidden;
            min-width: 0; /* Prevent flex blowout */
        }
        
        /* Fade effect on data load */
#lc-clima-app .data-fade {
            transition: opacity 0.4s ease;
        }
        
#lc-clima-app .current-weather {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 24px;
        }
#lc-clima-app .current-temp-box {
            display: flex;
            align-items: center;
            gap: 16px;
        }
#lc-clima-app .current-icon {
            font-size: 72px;
            color: var(--c-azul);
        }
#lc-clima-app .current-temp-val {
            font-family: var(--f-titulos);
            font-size: 80px;
            font-weight: 800;
            color: var(--c-azul);
            line-height: 1;
            letter-spacing: -2px;
        }
        @media (max-width: 768px) {
#lc-clima-app .current-temp-val { font-size: 64px; }
#lc-clima-app .current-icon { font-size: 60px; }
#lc-clima-app .app-title { font-size: 28px; }
        }
        @media (max-width: 480px) {
#lc-clima-app .current-temp-val { font-size: 52px; }
#lc-clima-app .current-icon { font-size: 48px; }
#lc-clima-app .app-title { font-size: 24px; }
#lc-clima-app .current-weather { flex-direction: column; align-items: flex-start; gap: 16px; }
#lc-clima-app .current-temp-box { gap: 12px; }
#lc-clima-app .card { padding: 16px; }
#lc-clima-app .extra-grid { grid-template-columns: 1fr; gap: 12px; }
        }
#lc-clima-app .current-details {
            font-size: 16px;
            color: var(--c-carbon);
        }
#lc-clima-app .current-condition {
            font-weight: 700;
            font-size: 20px;
            margin-bottom: 4px;
            color: var(--c-carbon);
        }
#lc-clima-app .current-feels-like {
            color: #6B7280;
            margin-bottom: 8px;
        }
#lc-clima-app .current-hl {
            display: flex; gap: 12px; font-weight: 600;
        }
#lc-clima-app .current-hl span { color: #6B7280; }

        /* === RESUMEN EDITORIAL TIPO IA === */
#lc-clima-app .summary-box {
            background: var(--c-gris-fondo);
            border-radius: 16px;
            padding: 24px;
            font-size: 16px;
            color: var(--c-carbon);
            margin-top: 24px;
            border-left: 4px solid var(--c-fucsia);
            position: relative;
        }
#lc-clima-app .summary-box .update-tag {
            display: inline-block;
            background: var(--c-carbon);
            color: var(--c-lima);
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            padding: 4px 10px;
            border-radius: 20px;
            margin-bottom: 12px;
            letter-spacing: 1px;
        }
#lc-clima-app .summary-box p {
            margin-bottom: 12px;
            line-height: 1.6;
        }
#lc-clima-app .summary-box p:last-child {
            margin-bottom: 0;
        }

        /* === PRONOSTICO POR HORA === */
#lc-clima-app .section-title {
            font-family: var(--f-titulos);
            font-size: 20px;
            font-weight: 800;
            margin-bottom: 16px;
            color: var(--c-carbon);
            display: flex; align-items: center; gap: 8px;
        }
#lc-clima-app .section-title i { color: var(--c-fucsia); }
        
#lc-clima-app .hourly-scroll {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            padding-bottom: 12px;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
        }
#lc-clima-app .hourly-scroll::-webkit-scrollbar { display: none; }
        
#lc-clima-app .hourly-item {
            scroll-snap-align: start;
            flex: 0 0 auto;
            background: var(--c-blanco);
            border: 1px solid var(--c-gris-borde);
            border-radius: 16px;
            padding: 16px;
            text-align: center;
            min-width: 80px;
        }
#lc-clima-app .hourly-item .time { font-size: 14px; color: #6B7280; margin-bottom: 8px; font-weight: 600; }
#lc-clima-app .hourly-item .icon { font-size: 32px; color: var(--c-azul); margin-bottom: 8px; }
#lc-clima-app .hourly-item .temp { font-weight: 700; font-size: 18px; }
#lc-clima-app .hourly-item .rain { font-size: 12px; color: var(--c-azul); margin-top: 4px; font-weight: 600;}

        /* === PRONOSTICO DIARIO === */
#lc-clima-app .daily-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        @media (min-width: 992px) {
#lc-clima-app .daily-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
        }
#lc-clima-app .daily-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--c-blanco);
            border: 1px solid var(--c-gris-borde);
            padding: 16px;
            border-radius: 16px;
        }
        @media (min-width: 992px) {
#lc-clima-app .daily-item { flex-direction: column; text-align: center; gap: 12px; padding: 24px; }
#lc-clima-app .daily-item .day-info { display: flex; flex-direction: column; align-items: center; gap: 4px; }
        }
#lc-clima-app .daily-item .day { font-weight: 700; font-size: 16px; color: var(--c-carbon); }
#lc-clima-app .daily-item .date { font-size: 13px; color: #6B7280; }
#lc-clima-app .daily-item .icon { font-size: 28px; color: var(--c-azul); }
#lc-clima-app .daily-item .temps { display: flex; gap: 12px; font-size: 16px; }
#lc-clima-app .daily-item .temps .max { font-weight: 700; color: var(--c-carbon); }
#lc-clima-app .daily-item .temps .min { font-weight: 500; color: #9CA3AF; }


#lc-clima-app .extra-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            margin-top: 24px;
        }
#lc-clima-app .extra-card {
            background: var(--c-gris-fondo);
            border-radius: 16px;
            padding: 16px;
        }
#lc-clima-app .extra-label { font-size: 13px; color: #6B7280; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
#lc-clima-app .extra-label i { color: var(--c-fucsia); }
#lc-clima-app .extra-val { font-size: 18px; font-weight: 700; color: var(--c-carbon); }

        /* === ALERTAS === */
#lc-clima-app .alert-box {
            background: #fef2f2;
            border: 1px solid #fecaca;
            border-left: 4px solid var(--c-rojo);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 24px;
            display: none; /* Hidden by default */
        }
#lc-clima-app .alert-title { color: var(--c-rojo); font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
#lc-clima-app .alert-desc { color: #991b1b; font-size: 14px; }

        /* === FOOTER SEO === */
#lc-clima-app .seo-footer {
            margin-top: 48px;
            padding-top: 24px;
            border-top: 1px solid var(--c-gris-borde);
            font-size: 13px;
            color: #6B7280;
            text-align: center;
        }
#lc-clima-app .btn-share {
            display: inline-flex; align-items: center; gap: 6px;
            background: transparent; border: 1px solid var(--c-gris-borde);
            padding: 8px 16px; border-radius: 20px; font-weight: 600;
            color: var(--c-carbon); margin-bottom: 16px; transition: all 0.2s;
        }
#lc-clima-app .btn-share:hover { background: var(--c-gris-fondo); }
#lc-clima-app .btn-share i { color: var(--c-fucsia); }

        /* === MODAL / BOTTOM SHEET === */
#lc-clima-app .modal-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
            z-index: 1000; opacity: 0; visibility: hidden;
            transition: all 0.3s ease;
        }
#lc-clima-app .modal-overlay.active { opacity: 1; visibility: visible; }
        
#lc-clima-app .modal-content {
            position: fixed; bottom: -100%; left: 0; right: 0;
            background: var(--c-blanco);
            border-radius: 24px 24px 0 0;
            padding: 24px; z-index: 1001;
            transition: bottom 0.4s cubic-bezier(0.1, 0.9, 0.2, 1);
            max-height: 90vh; overflow-y: auto;
        }
        @media (min-width: 768px) {
#lc-clima-app .modal-content {
                width: 500px; left: 50%; bottom: auto; top: 50%;
                transform: translate(-50%, -50%) scale(0.9);
                border-radius: 24px; opacity: 0; visibility: hidden;
                transition: all 0.3s ease;
            }
#lc-clima-app .modal-overlay.active .modal-content {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1; visibility: visible;
            }
        }
#lc-clima-app .modal-overlay.active .modal-content { bottom: 0; }
        
#lc-clima-app .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
#lc-clima-app .modal-title { font-family: var(--f-titulos); font-size: 22px; font-weight: 800; }
#lc-clima-app .btn-close { background: none; border: none; font-size: 24px; color: #6B7280; }
        
#lc-clima-app .search-box { position: relative; margin-bottom: 16px; }
#lc-clima-app .search-box i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #9CA3AF; }
#lc-clima-app .search-input {
            width: 100%; padding: 14px 14px 14px 44px;
            border: 2px solid var(--c-gris-borde); border-radius: 12px;
            font-family: var(--f-textos); font-size: 16px; outline: none;
            transition: border-color 0.2s;
        }
#lc-clima-app .search-input:focus { border-color: var(--c-azul); }
        
#lc-clima-app .btn-geo {
            width: 100%; padding: 14px; background: var(--c-gris-fondo);
            border: 1px solid var(--c-gris-borde); border-radius: 12px;
            font-weight: 600; color: var(--c-azul); display: flex; align-items: center; justify-content: center; gap: 8px;
            margin-bottom: 24px;
        }
#lc-clima-app .btn-geo:hover { background: #e5e7eb; }
        
#lc-clima-app .quick-links h4 { font-size: 14px; color: #6B7280; margin-bottom: 12px; text-transform: uppercase; }
#lc-clima-app .quick-links-grid { display: flex; flex-wrap: wrap; gap: 8px; }
#lc-clima-app .quick-link {
            background: var(--c-blanco); border: 1px solid var(--c-gris-borde);
            padding: 8px 16px; border-radius: 20px; font-size: 14px; color: var(--c-carbon);
            font-weight: 500; transition: all 0.2s;
        }
#lc-clima-app .quick-link:hover { background: var(--c-azul); color: var(--c-blanco); border-color: var(--c-azul); }