/**

 * OS TigerLab — Cyber Academy skin

 * Inspiración: academias “hacking / ciber” (hack4u.io y similares): negro azulado,

 * acentos neón, rejilla animada, halos cyan/esmeralda. Código propio — no copia de CSS externos.

 *

 * Activo en modo oscuro: :root[data-theme="dark"]. En tema claro, ajustes mínimos de borde/sombra.

 */



/* ---------- Modo oscuro: tokens semánticos + legacy styles.css ---------- */

:root[data-theme="dark"] {

    color-scheme: dark;



    --color-bg-primary: #070d16;

    --color-bg-secondary: #0b1322;

    --color-bg-elevated: #111b2e;

    --color-bg-muted: #152338;

    --color-bg-glass: rgba(17, 27, 46, 0.82);

    --color-text-primary: #f1f5f9;

    --color-text-secondary: #c8d1e0;

    --color-text-muted: #94a3b8;



    --color-border-subtle: rgba(34, 211, 238, 0.08);

    --color-border-default: rgba(52, 211, 153, 0.14);

    --color-border-strong: rgba(34, 211, 238, 0.22);

    --color-border-accent: rgba(52, 211, 153, 0.45);



    --color-accent-soft: rgba(52, 211, 153, 0.14);

    --color-accent-ring: rgba(52, 211, 153, 0.38);

    --color-accent-2-soft: rgba(34, 211, 238, 0.14);



    --card-inset: inset 0 1px 0 rgba(165, 243, 252, 0.08);



    --shadow-2: 0 2px 16px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(34, 211, 238, 0.06);

    --shadow-3: 0 8px 32px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(34, 211, 238, 0.08);

    --shadow-4: 0 20px 50px rgba(0, 0, 0, 0.62), 0 0 60px rgba(34, 211, 238, 0.09);

    --shadow-5: 0 28px 64px rgba(0, 0, 0, 0.68), 0 0 80px rgba(52, 211, 153, 0.07);



    /* Legacy — usado por styles.css, home, checkout */

    --bg: #070d16;

    --bg-elevated: #111b2e;

    --bg-muted: #152338;

    --bg-alt: #0b1322;

    --bg-alt-2: #0e1626;

    --border: rgba(34, 211, 238, 0.12);

    --border-soft: rgba(52, 211, 153, 0.14);

    --border-strong: rgba(34, 211, 238, 0.22);

    --border-default: 1px solid rgba(34, 211, 238, 0.14);

    --card-bg: rgba(17, 27, 46, 0.88);

    --accent-dim: rgba(52, 211, 153, 0.2);

    --accent-sec-dim: rgba(34, 211, 238, 0.22);

    --shadow-soft: 0 6px 28px rgba(0, 0, 0, 0.5), 0 0 40px rgba(34, 211, 238, 0.07);

    --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(34, 211, 238, 0.08);

    --shadow-featured: 0 16px 48px rgba(0, 0, 0, 0.58), 0 0 50px rgba(52, 211, 153, 0.1);

    --focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.22);

    --focus-ring-sm: 0 0 0 2px rgba(34, 211, 238, 0.18);



    /* Legacy — text/accent (aula curso y home) alineados al DS */

    --text: var(--color-text-primary);

    --text-muted: var(--color-text-muted);

    --text-soft: var(--color-text-secondary);

    --accent: var(--color-accent);

    --accent-sec: var(--color-accent-2);

    --accent-hover: var(--color-accent-hover);



    /* Seguimiento del puntero (mousemove) — assets/scripts/hacklab-pointer-bg.js */

    --hacklab-pointer-x: 50%;

    --hacklab-pointer-y: 42%;

    --hacklab-parallax-x: 0px;

    --hacklab-parallax-y: 0px;

}



:root[data-theme="dark"] .admin-shell__ambient {

    background: radial-gradient(ellipse 90% 70% at 0% 0%, rgba(34, 211, 238, 0.09), transparent 50%),

        radial-gradient(ellipse 70% 50% at 100% 0%, rgba(52, 211, 153, 0.07), transparent 45%),

        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(99, 102, 241, 0.06), transparent 45%);

}



:root[data-theme="dark"] .admin-shell__sidebar {

    border-right-color: rgba(34, 211, 238, 0.14);

    background: linear-gradient(180deg, rgba(14, 22, 38, 0.97) 0%, rgba(7, 13, 22, 0.99) 100%);

}



:root[data-theme="dark"] ::selection {

    background: rgba(52, 211, 153, 0.28);

    color: var(--color-text-primary);

}



/* Fondo global: capas fijas + rejilla animada (detrás del contenido) */

:root[data-theme="dark"] html {

    background-color: #060910;

}



:root[data-theme="dark"] body {

    background-color: transparent !important;

    background-image: none !important;

}



:root[data-theme="dark"] body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background-color: #070d16;

    transform: translate3d(var(--hacklab-parallax-x), var(--hacklab-parallax-y), 0);

    will-change: transform;

    background-image:

        radial-gradient(ellipse 58% 48% at var(--hacklab-pointer-x, 50%) var(--hacklab-pointer-y, 45%), rgba(34, 211, 238, 0.26), transparent 62%),

        radial-gradient(ellipse 42% 36% at calc(var(--hacklab-pointer-x, 50%) + 18%) calc(var(--hacklab-pointer-y, 45%) + 12%), rgba(52, 211, 153, 0.11), transparent 58%),

        radial-gradient(ellipse 92% 68% at 50% -26%, rgba(34, 211, 238, 0.11), transparent 54%),

        radial-gradient(ellipse 52% 44% at 96% 20%, rgba(52, 211, 153, 0.08), transparent 48%),

        radial-gradient(ellipse 44% 36% at 4% 86%, rgba(99, 102, 241, 0.06), transparent 46%),

        repeating-linear-gradient(

            0deg,

            transparent,

            transparent 71px,

            rgba(34, 211, 238, 0.038) 71px,

            rgba(34, 211, 238, 0.038) 72px

        ),

        repeating-linear-gradient(

            90deg,

            transparent,

            transparent 71px,

            rgba(52, 211, 153, 0.026) 71px,

            rgba(52, 211, 153, 0.026) 72px

        );

    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;

    background-size:

        100% 100%,

        100% 100%,

        100% 100%,

        100% 100%,

        100% 100%,

        72px 72px,

        72px 72px;

    background-position:

        0% 0%,

        0% 0%,

        0% 0%,

        0% 0%,

        0% 0%,

        0 0,

        0 0;

    animation: hacklab-bg-drift 36s ease-in-out infinite alternate;

}



:root[data-theme="dark"] body::after {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: 0.42;

    mix-blend-mode: overlay;

    background: repeating-linear-gradient(

        180deg,

        transparent 0,

        transparent 2px,

        rgba(34, 211, 238, 0.028) 2px,

        rgba(34, 211, 238, 0.028) 4px

    );

    animation: hacklab-scan-drift 18s linear infinite;

}



@keyframes hacklab-bg-drift {

    0% {

        background-position:

            0% 0%,

            0% 0%,

            0% 0%,

            0% 0%,

            0% 0%,

            0 0,

            0 0;

    }

    100% {

        background-position:

            0% 0%,

            0% 0%,

            10% 14%,

            -8% 10%,

            12% -6%,

            72px 40px,

            -52px 72px;

    }

}



@keyframes hacklab-scan-drift {

    0% {

        transform: translateY(0);

    }

    100% {

        transform: translateY(28px);

    }

}



/* Landing: rejilla tipo terminal (sección principal) */

:root[data-theme="dark"] .home-academia .home-main {

    background-image: repeating-linear-gradient(

            0deg,

            transparent,

            transparent 79px,

            rgba(34, 211, 238, 0.034) 79px,

            rgba(34, 211, 238, 0.034) 80px

        ),

        repeating-linear-gradient(

            90deg,

            transparent,

            transparent 79px,

            rgba(52, 211, 153, 0.022) 79px,

            rgba(52, 211, 153, 0.022) 80px

        );

    background-size: 80px 80px;

    animation: hacklab-section-grid 28s linear infinite;

}



@keyframes hacklab-section-grid {

    0% {

        background-position: 0 0, 0 0;

    }

    100% {

        background-position: 80px 48px, -56px 80px;

    }

}



:root[data-theme="dark"] .home-academia {

    background: radial-gradient(900px 460px at 85% -6%, rgba(34, 211, 238, 0.11), transparent 60%),

        radial-gradient(700px 420px at 5% 8%, rgba(52, 211, 153, 0.08), transparent 56%),

        var(--bg);

}



/* Hero index: sin foto estática en oscuro — atmósfera “terminal” */

:root[data-theme="dark"] .home-academia .hero {

    background-image: radial-gradient(ellipse 62% 52% at var(--hacklab-pointer-x, 50%) var(--hacklab-pointer-y, 42%), rgba(34, 211, 238, 0.28), transparent 58%),

        radial-gradient(ellipse 48% 40% at calc(var(--hacklab-pointer-x, 50%) + 15%) calc(var(--hacklab-pointer-y, 42%) + 18%), rgba(52, 211, 153, 0.14), transparent 56%),

        radial-gradient(ellipse 100% 88% at 50% -16%, rgba(34, 211, 238, 0.14), transparent 58%),

        radial-gradient(ellipse 54% 42% at 94% 36%, rgba(52, 211, 153, 0.12), transparent 52%),

        repeating-linear-gradient(

            102deg,

            transparent,

            transparent 62px,

            rgba(34, 211, 238, 0.045) 62px,

            rgba(34, 211, 238, 0.045) 63px

        ),

        linear-gradient(188deg, #0f1a2e 0%, #081018 44%, #060910 100%);

    background-size: cover, cover, cover, cover, 104px 104px, cover;

    background-position: center, center, center, center, 0 0, center;

    animation: hacklab-hero-bg 42s ease-in-out infinite alternate;

}



@keyframes hacklab-hero-bg {

    0% {

        background-position: center, center, center, center, 0 0, center;

    }

    100% {

        background-position: center, center, center, center, 104px 52px, center;

    }

}



:root[data-theme="dark"] .home-academia .hero-overlay {

    background:

        linear-gradient(180deg, rgba(7, 13, 22, 0.28) 0%, rgba(5, 10, 18, 0.78) 70%, rgba(4, 8, 14, 0.94) 100%),

        radial-gradient(560px 340px at 78% 6%, rgba(52, 211, 153, 0.14), transparent 62%);

}



:root[data-theme="dark"] .home-academia .hero-subheadline {

    color: var(--color-text-secondary);

}



:root[data-theme="dark"] .home-academia .hero-eyebrow-pill {

    font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;

    letter-spacing: 0.09em;

    background: rgba(52, 211, 153, 0.12);

    border-color: rgba(52, 211, 153, 0.38);

}



:root[data-theme="dark"] .home-academia .hero-badge {

    background: rgba(12, 22, 38, 0.78);

    border-color: rgba(34, 211, 238, 0.2);

    color: var(--color-text-secondary);

}



:root[data-theme="dark"] .home-academia .hero-proof-item {

    border-color: rgba(34, 211, 238, 0.14);

    background: rgba(10, 18, 32, 0.65);

}



:root[data-theme="dark"] .nav-sticky {

    background: linear-gradient(180deg, rgba(7, 13, 22, 0.94) 0%, rgba(11, 19, 34, 0.9) 100%);

    border-bottom: 1px solid rgba(34, 211, 238, 0.14);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.48), 0 0 42px rgba(34, 211, 238, 0.06);

}



:root[data-theme="dark"] .nav-sticky.is-compact {

    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.52), 0 0 36px rgba(34, 211, 238, 0.05);

}



:root[data-theme="dark"] .nav-sticky .btn-cta-nav {

    box-shadow: 0 0 28px rgba(52, 211, 153, 0.16), 0 0 0 1px rgba(52, 211, 153, 0.26);

}



/* Aula curso y panel catálogo: cabecera "glass + neón" */

:root[data-theme="dark"] .curso-page .curso-header,

:root[data-theme="dark"] .panel-header {

    background: linear-gradient(180deg, rgba(7, 13, 22, 0.94) 0%, rgba(11, 19, 34, 0.9) 100%);

    border-bottom: 1px solid rgba(34, 211, 238, 0.14);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.38), 0 0 42px rgba(34, 211, 238, 0.05);

}



:root[data-theme="dark"] .btn.btn-primary {

    box-shadow: 0 12px 28px rgba(52, 211, 153, 0.28), 0 0 28px rgba(34, 211, 238, 0.12), 0 0 0 1px rgba(52, 211, 153, 0.22);

}



:root[data-theme="dark"] .btn.btn-primary:hover:not(:disabled) {

    box-shadow: 0 16px 34px rgba(52, 211, 153, 0.32), 0 0 36px rgba(34, 211, 238, 0.14), 0 0 0 1px rgba(52, 211, 153, 0.32);

}



/* Bloque precios / “pricing” */

:root[data-theme="dark"] .home-academia .price-card--featured,

:root[data-theme="dark"] .price-card--featured {

    border: 1px solid rgba(52, 211, 153, 0.34);

    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(34, 211, 238, 0.14), 0 0 88px rgba(52, 211, 153, 0.09);

}



:root[data-theme="dark"] .block-label {

    letter-spacing: 0.12em;

    font-weight: 600;

    color: var(--color-accent-2);

}



:root[data-theme="dark"] .hero-headline {

    text-shadow: 0 0 56px rgba(34, 211, 238, 0.1);

}



:root[data-theme="dark"] .hero-eyebrow-pill {

    box-shadow: 0 0 24px rgba(52, 211, 153, 0.14);

}



/* DS cards */

:root[data-theme="dark"] .ostl-card:focus-within {

    box-shadow: var(--shadow-3), var(--card-inset), 0 0 32px rgba(34, 211, 238, 0.08);

}



@media (hover: hover) {

    :root[data-theme="dark"] .ostl-card--interactive:hover {

        box-shadow: var(--shadow-4), var(--card-inset), 0 0 40px rgba(34, 211, 238, 0.09);

    }

}



/* Compatibilidad: #planes y #pricing apuntan a la misma sección de inversión */

.pricing-anchor {

    display: block;

    height: 0;

    overflow: hidden;

    scroll-margin-top: clamp(72px, 14vw, 96px);

}



/* Tema claro: solo un toque “tech” en acentos */

:root[data-theme="light"] {

    --color-border-accent: rgba(13, 148, 136, 0.38);

    --shadow-3: 0 8px 28px rgba(15, 76, 92, 0.09), 0 2px 6px rgba(0, 0, 0, 0.04);

    --shadow-4: 0 14px 36px rgba(15, 76, 92, 0.11), 0 4px 10px rgba(0, 0, 0, 0.05);



    --text: var(--color-text-primary);

    --text-muted: var(--color-text-muted);

    --text-soft: var(--color-text-secondary);

}



@media (prefers-reduced-motion: reduce) {

    :root[data-theme="dark"] body::before,

    :root[data-theme="dark"] body::after,

    :root[data-theme="dark"] .home-academia .home-main,

    :root[data-theme="dark"] .home-academia .hero {

        animation: none !important;

    }



    :root[data-theme="dark"] body::after {

        opacity: 0.28;

        transform: none;

    }



    :root[data-theme="dark"] body::before {

        transform: none !important;

        will-change: auto;

    }

}



/* ----- Footer / superficies en modo oscuro “academy” ----- */

:root[data-theme="dark"] .footer {

    background: linear-gradient(180deg, rgba(11, 19, 34, 0.96) 0%, rgba(6, 10, 18, 0.98) 100%);

    box-shadow: 0 -24px 48px rgba(0, 0, 0, 0.38);

}



:root[data-theme="dark"] .faq-item {

    background: rgba(14, 24, 40, 0.74);

    border-color: rgba(34, 211, 238, 0.12);

}



:root[data-theme="dark"] .faq-item.is-open {

    border-color: rgba(52, 211, 153, 0.24);

    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(34, 211, 238, 0.07);

}



:root[data-theme="dark"] .legal-page {

    background: rgba(14, 24, 40, 0.86);

    border-color: rgba(34, 211, 238, 0.14);

    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(34, 211, 238, 0.07);

}



:root[data-theme="dark"] .checkout-form-card,

:root[data-theme="dark"] .checkout-summary-card {

    background: rgba(14, 24, 40, 0.9);

    border-color: rgba(34, 211, 238, 0.16);

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.48), var(--card-inset), 0 0 0 1px rgba(34, 211, 238, 0.06);

}



/* Tema claro: FAQ y legales más limpios */

:root[data-theme="light"] .faq-item {

    background: var(--color-bg-elevated);

    border-color: var(--color-border-default);

}



:root[data-theme="light"] .faq-item.is-open {

    border-color: color-mix(in oklab, var(--color-accent) 22%, var(--color-border-default));

}



:root[data-theme="light"] .footer::before {

    opacity: 0.65;

}