/* ==========================================================================
   Tema claro — variante B del experimento de tema (ver content/experimentos/tema-claro.md)

   Solo aplica cuando el script del <head> pone la clase `tema-claro` en <html>
   (y cambia data-bs-theme a "light", lo que devuelve los tokens de Bootstrap
   del template a su modo claro nativo). Todo va bajo `html.tema-claro`: su
   especificidad le gana al `:root` y a los selectores de una clase del <style>
   en línea de cada página, sin depender del orden de carga.

   Calibración (mismo criterio que el bloque CALIBRACION DE LEGIBILIDAD):
   el texto de cuerpo (.text-muted, #5c5a76) tiene luminancia 0.109 y el cian
   de texto (#0e6870) 0.112 — brecha 1.03×. Contraste sobre el fondo #f6f5fb:
   tinta 16.5, cuerpo 6.1, cian de texto 6.0, violeta 5.5. El cian de acento
   (#0a9ba4, 3.1) es solo para iconos y bordes, nunca para texto.

   Las «islas oscuras» (franja del CTA final en degradado violeta, la ventana
   de código de /servicios, la insignia flotante del hero de la portada) se
   conservan oscuras a propósito; se localizan por su estilo en línea porque
   no tienen clase propia. Si cambias ese estilo en el marcado, revisa aquí.
   ========================================================================== */

html.tema-claro {
    /* Las variables del tema oscuro se reutilizan con valores claros para que
       todas las reglas en línea que las consumen se volteen solas.
       Ojo: --starlight-white pasa a ser la tinta oscura. */
    --deep-space-black: #f6f5fb;
    --midnight-blue: #ffffff;
    --neon-cyan: #0a9ba4;
    --starlight-white: #16142e;
    --cyan-text: #0e6870;

    --claro-texto: #3f3d58;
    --claro-tenue: #5c5a76;
    --claro-borde: rgba(22, 20, 46, 0.10);
    --claro-banda: #efedf8;
    --claro-sombra: 0 1px 2px rgba(22, 20, 46, 0.05), 0 8px 24px rgba(22, 20, 46, 0.06);

    --bs-body-bg: var(--deep-space-black);
    --bs-body-color: var(--claro-texto);
    --bs-heading-color: var(--starlight-white);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: var(--claro-borde);
    --cosmic-gradient: radial-gradient(circle at top right, #ece6fb 0%, var(--deep-space-black) 60%);
}

/* Fondo: sin campo de estrellas */
html.tema-claro body,
html.tema-claro body.case-page {
    background-image: none;
    color: var(--claro-texto);
}

/* Tarjetas */
html.tema-claro .card,
html.tema-claro .system-card,
html.tema-claro .case-tile,
html.tema-claro .legal-container {
    box-shadow: var(--claro-sombra);
}
html.tema-claro .card:hover,
html.tema-claro .system-card:hover {
    box-shadow: 0 8px 28px rgba(10, 155, 164, 0.16);
}

/* Navbar */
html.tema-claro nav.layout-navbar {
    background-color: rgba(255, 255, 255, 0.88);
}
html.tema-claro nav.layout-navbar .navbar.landing-navbar .navbar-nav .nav-link:hover,
html.tema-claro nav.layout-navbar .navbar.landing-navbar .navbar-nav .active > .nav-link,
html.tema-claro nav.layout-navbar .nav-link:hover {
    color: var(--electric-violet);
    text-shadow: none;
}
html.tema-claro .app-brand-logo {
    /* logo_idoo.png es blanco (#f0f0f0): lo llevamos a tinta */
    filter: brightness(0.12);
}
@media (max-width: 991.98px) {
    html.tema-claro .navbar-collapse.landing-nav-menu {
        background-color: #ffffff;
        box-shadow: 0 10px 40px rgba(22, 20, 46, 0.12);
    }
    html.tema-claro .navbar-nav .nav-link:hover {
        background-color: rgba(22, 20, 46, 0.04);
    }
}

/* Botones */
html.tema-claro .btn-primary {
    box-shadow: 0 4px 14px rgba(138, 43, 226, 0.28);
}
html.tema-claro .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.40);
}
html.tema-claro .btn-outline-primary {
    color: var(--cyan-text);
    border-color: var(--neon-cyan);
}
html.tema-claro .btn-outline-primary:hover {
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(10, 155, 164, 0.30);
}

/* Hero */
html.tema-claro .landing-hero {
    background: radial-gradient(circle at 50% 50%, rgba(138, 43, 226, 0.08) 0%, rgba(246, 245, 251, 0) 70%);
}
html.tema-claro .landing-hero::before {
    background: radial-gradient(ellipse at center, rgba(138, 43, 226, 0.07) 0%, transparent 70%);
}
html.tema-claro .hero-title,
html.tema-claro .legal-container h1 {
    background: linear-gradient(to right, #16142e, #6b21c8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}
html.tema-claro .floating-img {
    filter: drop-shadow(0 12px 24px rgba(22, 20, 46, 0.12));
}
html.tema-claro .floating-img img {
    opacity: 1 !important;
}

/* Texto */
html.tema-claro .text-muted,
html.tema-claro .case-page .text-muted {
    color: var(--claro-tenue) !important;
}
html.tema-claro .text-white {
    color: var(--starlight-white) !important;
}
html.tema-claro .text-cyan {
    color: var(--cyan-text) !important;
}

/* Tarjetas de servicio y comunidad */
html.tema-claro .feature-card,
html.tema-claro .post-card,
html.tema-claro .video-card,
html.tema-claro .client-item,
html.tema-claro .sys-nav {
    background: #ffffff;
    border-color: var(--claro-borde);
    box-shadow: var(--claro-sombra);
}
html.tema-claro .feature-card:hover,
html.tema-claro .post-card:hover,
html.tema-claro .video-card:hover,
html.tema-claro .sys-nav:hover {
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(138, 43, 226, 0.14);
}
html.tema-claro .feature-icon {
    background: rgba(138, 43, 226, 0.08);
    border-color: rgba(138, 43, 226, 0.18);
}
html.tema-claro .bg-label-primary {
    background-color: rgba(138, 43, 226, 0.08) !important;
    color: #6b21c8 !important;
    border-color: rgba(138, 43, 226, 0.20);
}
html.tema-claro .discussion-item {
    border-bottom-color: var(--claro-borde);
}
html.tema-claro .post-thumb,
html.tema-claro .video-thumb,
html.tema-claro .short-thumb {
    background: var(--claro-banda);
}
html.tema-claro .short-thumb {
    border-color: var(--claro-borde);
}

/* Fondos utilitarios que el tema oscuro había forzado */
html.tema-claro .bg-light {
    background-color: var(--claro-banda) !important;
}
html.tema-claro .bg-white {
    background-color: #ffffff !important;
}
html.tema-claro .border-secondary {
    border-color: var(--claro-borde) !important;
}
html.tema-claro .modal-header .btn-close {
    filter: none;
}

/* Footer (en /servicios y legales lleva !important en línea de hoja) */
html.tema-claro footer,
html.tema-claro .landing-footer {
    background-color: #eeecf6 !important;
    border-top: 1px solid var(--claro-borde);
}
/* Las legales fijan `p, li { color: #d0d0e0 }`, que el footer copiado hereda */
html.tema-claro footer p,
html.tema-claro footer li {
    color: var(--claro-tenue);
}

/* Estilos en línea con blancos translúcidos */
html.tema-claro [style*="border-top:1px solid rgba(255,255,255,0.07)"] {
    border-top-color: var(--claro-borde) !important;
}
html.tema-claro [style*="background: rgba(255,255,255,0.02)"] {
    background: var(--claro-banda) !important;
}

/* Páginas de casos */
html.tema-claro .challenge {
    border-top-color: var(--claro-borde);
}
html.tema-claro .challenge-num {
    background: linear-gradient(to bottom, var(--electric-violet), rgba(138, 43, 226, 0.25));
    -webkit-background-clip: text;
    background-clip: text;
}
html.tema-claro .tech-panel,
html.tema-claro .eco-panel {
    background: linear-gradient(160deg, rgba(138, 43, 226, 0.07) 0%, #ffffff 60%);
}
html.tema-claro .assurance {
    background: rgba(10, 155, 164, 0.05);
    border-color: rgba(10, 155, 164, 0.25);
}
html.tema-claro .brand-chip,
html.tema-claro .eco-chip {
    background: #ffffff;
}
html.tema-claro .case-toc a {
    color: var(--claro-tenue);
    border-left-color: var(--claro-borde);
}
html.tema-claro .case-toc a:hover {
    color: var(--cyan-text);
}
html.tema-claro .case-tile-featured {
    background: linear-gradient(140deg, rgba(138, 43, 226, 0.10) 0%, #ffffff 55%);
}
html.tema-claro .eco-chip {
    color: var(--claro-tenue);
}
html.tema-claro .eco-chip:hover {
    color: var(--starlight-white);
    background: rgba(10, 155, 164, 0.07);
}
html.tema-claro .eco-chip-actual {
    background: rgba(138, 43, 226, 0.10);
    color: #6b21c8;
}

/* /servicios */
html.tema-claro .badge-tech {
    background: rgba(10, 155, 164, 0.08);
    color: var(--cyan-text);
    border-color: rgba(10, 155, 164, 0.30);
}
html.tema-claro .service-item {
    border-bottom-color: var(--claro-borde);
}
html.tema-claro .service-item:hover {
    background: rgba(22, 20, 46, 0.02);
}
html.tema-claro .pricing-card-header {
    background: var(--claro-banda);
    border-bottom-color: var(--claro-borde);
}
html.tema-claro .pricing-features li,
html.tema-claro .accordion-body {
    color: var(--claro-texto);
}
html.tema-claro .accordion-button {
    background-color: #ffffff;
}
html.tema-claro .accordion-button:not(.collapsed) {
    background-color: rgba(138, 43, 226, 0.08);
    color: #6b21c8;
}
html.tema-claro [style*="rgba(10, 10, 31, 0.9) 100%"] {
    /* tarjeta de precio destacada */
    background: linear-gradient(145deg, rgba(138, 43, 226, 0.10) 0%, #ffffff 100%) !important;
}
html.tema-claro .bg-dark-subtle {
    background-color: #ffffff !important;
    box-shadow: var(--claro-sombra);
}

/* Páginas legales */
html.tema-claro .legal-container h2 {
    border-bottom-color: var(--claro-borde);
}
html.tema-claro .legal-container p,
html.tema-claro .legal-container li {
    color: var(--claro-texto);
}

/* Islas oscuras: conservan texto claro */
html.tema-claro [style*="var(--electric-violet) 0%, var(--nebula-purple) 100%"] .text-white,
html.tema-claro [style*="rgba(10, 10, 31, 0.9) !important"] .text-white,
html.tema-claro [style*="rgba(5, 5, 16, 0.9)"] .text-white,
html.tema-claro .bg-dark .text-white {
    color: #ffffff !important;
}
/* .btn-outline-white no existe en core.min.css: en oscuro se veía blanco
   solo porque heredaba el color del cuerpo */
html.tema-claro [style*="var(--electric-violet) 0%, var(--nebula-purple) 100%"] .btn-outline-white {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.7);
}
html.tema-claro [style*="var(--electric-violet) 0%, var(--nebula-purple) 100%"] .btn-outline-white:hover {
    background-color: rgba(255, 255, 255, 0.12);
}
html.tema-claro [style*="rgba(10, 10, 31, 0.9) !important"] .text-muted,
html.tema-claro [style*="rgba(5, 5, 16, 0.9)"] .text-muted {
    color: #c3c3d8 !important;
}
html.tema-claro [style*="rgba(5, 5, 16, 0.9)"] .text-cyan {
    color: #8fd2d4 !important;
}