/* ============================================================
   OpenCode — Modo día (14/11/2026)
   Se activa con html[data-theme="light"]; la elección se guarda
   en localStorage ('oc-theme'). El modo noche sigue siendo el base.
   ============================================================ */

/* Botón sol / luna del menú */
.theme-toggle {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border); color: var(--text-muted);
    cursor: pointer; font-size: 15px; transition: color .25s, border-color .25s, transform .4s;
}
.theme-toggle:hover { color: var(--orange); border-color: var(--orange-border); transform: rotate(20deg); }
.theme-toggle .fa-sun { display: none; }
html[data-theme="light"] .theme-toggle .fa-sun { display: inline; }
html[data-theme="light"] .theme-toggle .fa-moon { display: none; }
.nav-theme-li { display: flex; align-items: center; }

html[data-theme="light"] {
    --bg: #f6f6f7;
    --bg-light: #ffffff;
    --bg-elevated: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #fafafa;
    --orange-glow: rgba(255, 106, 0, 0.10);
    --orange-border: rgba(255, 106, 0, 0.35);
    --text: #3f3f46;
    --text-muted: #5b5b66;
    --text-heading: #0b0b0f;
    --border: rgba(0, 0, 0, 0.09);
    color-scheme: light;
}
html[data-theme="light"] body { background: var(--bg); color: var(--text); }

/* Navegación */
html[data-theme="light"] #navbar.scrolled { background: rgba(255, 255, 255, 0.92); box-shadow: 0 6px 24px rgba(0,0,0,.06); }
html[data-theme="light"] .nav-logo { color: var(--text-heading); }
html[data-theme="light"] .nav-menu a { color: var(--text-muted); }
html[data-theme="light"] .nav-menu a:hover, html[data-theme="light"] .nav-menu a.active { color: var(--text-heading); }
html[data-theme="light"] .nav-dropdown-menu { background: rgba(255, 255, 255, 0.98); box-shadow: 0 20px 50px rgba(0,0,0,.12); }
html[data-theme="light"] .nav-toggle span { background: var(--text-heading); }
@media (max-width: 991px) {
    html[data-theme="light"] .nav-menu { background: #fff; }
}

/* Hero y CTA: la foto queda detrás de un velo claro */
html[data-theme="light"] .hero-overlay {
    background: linear-gradient(135deg, rgba(250,250,250,.96) 0%, rgba(250,250,250,.90) 45%, rgba(250,250,250,.78) 100%);
}
html[data-theme="light"] .cta-overlay {
    background: linear-gradient(135deg, rgba(250,250,250,.95) 0%, rgba(250,250,250,.86) 45%, rgba(255,106,0,.18) 100%);
}
html[data-theme="light"] .hero-grid {
    background-image:
        linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
}
html[data-theme="light"] .hero-aurora .blob { opacity: .22; }
html[data-theme="light"] .hero-card,
html[data-theme="light"] .fx-hero-card.hero-card { background: rgba(255,255,255,.88); box-shadow: 0 24px 60px rgba(0,0,0,.12); }
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .btn-cta-outline { color: var(--text-heading); border-color: rgba(0,0,0,.2); }
html[data-theme="light"] .btn-ghost:hover,
html[data-theme="light"] .btn-cta-outline:hover { background: rgba(0,0,0,.04); }

/* Secciones y tarjetas */
html[data-theme="light"] .section-light,
html[data-theme="light"] .page-header-light { background: #ffffff; }
html[data-theme="light"] .product-card,
html[data-theme="light"] .service-card-v2,
html[data-theme="light"] .client-card,
html[data-theme="light"] .cta-feature { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04); }
html[data-theme="light"] .product-card:hover,
html[data-theme="light"] .service-card-v2:hover { box-shadow: 0 18px 44px rgba(0,0,0,.10); }
html[data-theme="light"] .about-intro-text h3 { color: var(--text-heading); }
html[data-theme="light"] #showcase { background: radial-gradient(ellipse at 50% 0%, rgba(255,106,0,.10), transparent 60%), var(--bg); }
html[data-theme="light"] .sc-tab { background: #fff; }
html[data-theme="light"] .sc-tab.active { background: var(--orange); color: #fff; }
html[data-theme="light"] .sc-browser,
html[data-theme="light"] .fx-window { box-shadow: 0 30px 80px rgba(0,0,0,.18); }

/* Pie de página */
html[data-theme="light"] #footer { background: #ffffff; }

/* Transición suave al cambiar */
html.theme-anim, html.theme-anim * { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }

/* Encabezados con foto de Servicios */
html[data-theme="light"] .page-hero-overlay {
    background: linear-gradient(180deg, rgba(250,250,250,.94) 0%, rgba(250,250,250,.88) 60%, rgba(246,246,247,.97) 100%);
}
html[data-theme="light"] .service-nav { background: rgba(255,255,255,.92); }

/* Formularios */
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .form-group textarea { background: #fff; border-color: rgba(0,0,0,.14); color: var(--text-heading); }
html[data-theme="light"] .form-group select option { background: #fff; }

/* Libro de Reclamaciones */
html[data-theme="light"] .lr-provider { color: var(--text); border-color: var(--border); background: #fff; }
html[data-theme="light"] .lr-provider strong,
html[data-theme="light"] .lr-radio b { color: var(--text-heading); }
html[data-theme="light"] .lr-radio label,
html[data-theme="light"] .lr-check,
html[data-theme="light"] .lr-tabs button { color: var(--text); border-color: rgba(0,0,0,.14); }
html[data-theme="light"] .lr-tabs button.active { color: var(--orange); }
html[data-theme="light"] .lr-note { color: var(--text-muted); }
html[data-theme="light"] .lr-msg.ok { color: #166534; }
html[data-theme="light"] .lr-msg.err { color: #991b1b; }

/* Páginas legales (Términos, Privacidad, Eliminación de datos) */
html[data-theme="light"] { --text-primary: #0b0b0f; --text-secondary: #3f3f46; }
html[data-theme="light"] .legal-hero { background: #ffffff; border-bottom: 1px solid var(--border); }
html[data-theme="light"] .legal-hero h1 { color: var(--text-heading); }
html[data-theme="light"] .legal-hero .legal-date,
html[data-theme="light"] .legal-nav-link,
html[data-theme="light"] .legal-info-card,
html[data-theme="light"] .legal-contact-item,
html[data-theme="light"] .legal-platform-tag { background: #ffffff; border-color: rgba(0,0,0,.10); }
html[data-theme="light"] .legal-toc a { border-left-color: rgba(0,0,0,.08); }