/**
 * OS TigerLab Design System v2 — COMPAT LAYER
 * Capa de compatibilidad para clases legacy. Permite que el HTML/CSS
 * existente siga funcionando sin migración masiva inmediata.
 *
 * Estrategia: extender clases viejas con tokens v2, no reemplazar.
 * Cuando se complete la migración página por página, este archivo se
 * podrá eliminar.
 *
 * IMPORTANTE: cargar DESPUÉS de styles.css y home.css para que los tokens
 * v2 ganen sobre cualquier valor hardcoded.
 */

/* ================================================================== */
/*  body / globals — heredan del nuevo sistema                         */
/* ================================================================== */
body {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-feature-settings: var(--font-features-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Smooth color transitions cuando cambia el tema (sin * global: menos repaints) */
html.ostl-theme-transition body {
    transition: background-color 200ms ease, color 200ms ease;
}

html.ostl-theme-transition :where(
    .nav-sticky,
    .ostl-header,
    .ostl-card,
    .ostl-btn,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-cta-nav,
    .home-card,
    .home-catalogo-card,
    .course-card,
    .testimonio-card,
    .pilar-card,
    .price-card,
    .curso-page .curso-header,
    .admin-shell__sidebar,
    .admin-shell__topbar
) {
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease,
        box-shadow 200ms ease !important;
}

/* ================================================================== */
/*  Botones legacy — heredan de .ostl-btn--*                           */
/* ================================================================== */
.btn,
.btn-primary,
.btn-secondary,
.btn-cta-nav,
.btn-course,
.curso-btn,
.checkout-submit,
.student-dashboard-btn,
.student-dashboard-btn-primary {
    /* Reset implícito legacy → ostl tokens */
    font-family: var(--font-body);
    transition: background-color var(--d-fast) var(--ease-smooth),
                color var(--d-fast) var(--ease-smooth),
                border-color var(--d-fast) var(--ease-smooth),
                transform var(--d-fast) var(--ease-spring),
                box-shadow var(--d-fast) var(--ease-smooth);
}
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-cta-nav:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-shadow);
}

/* ================================================================== */
/*  Cards legacy                                                       */
/* ================================================================== */
.home-card,
.home-catalogo-card,
.course-card,
.student-dashboard-card,
.curso-dash-card,
.testimonio-card,
.pilar-card {
    transition: transform var(--d-base) var(--ease-spring),
                box-shadow var(--d-base) var(--ease-out-cubic),
                border-color var(--d-fast) var(--ease-smooth);
    contain: layout paint;
}
.home-card:hover,
.home-catalogo-card:hover,
.course-card:hover,
.student-dashboard-card:hover {
    transform: translate3d(0, -3px, 0);
}

/* ================================================================== */
/*  Inputs legacy                                                      */
/* ================================================================== */
input[type="text"]:not(.ostl-input):focus-visible,
input[type="email"]:not(.ostl-input):focus-visible,
input[type="password"]:not(.ostl-input):focus-visible,
input[type="tel"]:not(.ostl-input):focus-visible,
textarea:not(.ostl-textarea):focus-visible,
select:not(.ostl-select):focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* ================================================================== */
/*  Skip link (heredado de styles.css) — refuerzo                      */
/* ================================================================== */
.skip-link {
    z-index: var(--z-skip);
}

/* ================================================================== */
/*  Sticky nav — refuerzo z-index                                      */
/* ================================================================== */
.nav-sticky {
    z-index: var(--z-sticky);
}

@media (max-width: 420px) {
    .nav-sticky .container {
        gap: var(--sp-2, 8px);
        padding-left: calc(max(var(--sp-3, 12px), var(--safe-left)));
        padding-right: calc(max(var(--sp-3, 12px), var(--safe-right)));
    }

    .nav-sticky .nav-logo-img {
        max-width: min(148px, 44vw);
    }

    .nav-sticky .btn-cta-nav {
        padding: 7px 10px;
        font-size: 0.8125rem;
        letter-spacing: -0.01em;
    }
}

/* ================================================================== */
/*  Estilos básicos faltantes para legacy                              */
/* ================================================================== */
::selection {
    background: var(--color-accent-soft);
    color: var(--color-text-primary);
}

/* Scrollbar dark/light aware */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--color-border-default);
    border-radius: 8px;
    border: 2px solid var(--color-bg-primary);
}
*::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }

/* ================================================================== */
/*  Responsive baseline (frontend público — evita desbordes comunes)    */
/* ================================================================== */
img,
picture,
video {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

.checkout-page,
.ostl-prose,
#main,
main {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

@media (max-width: 640px) {
    .ostl-page--blog-post main .ostl-prose {
        font-size: var(--fs-base) !important;
        line-height: var(--lh-base) !important;
    }
}

/* ================================================================== */
/*  Polish global — grillas, SVG fluidos                               */
/*  (text-rendering: optimizeLegibility consolidado en :root body)     */
/* ================================================================== */

svg {
    flex-shrink: 0;
}

svg:not([width]):not([height]) {
    max-width: 100%;
    height: auto;
}

/* Grid/flex: evita desbordes por min-width implícito del contenido */
.home-academia .home-catalogo-grid > *,
.home-academia .home-footer-grid > *,
.home-academia .home-numeros-grid > *,
.home-academia .home-pilares > *,
.confian-grid > *,
.pricing-grid > *,
.pricing-single > * {
    min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }
}

/* Contenido por encima de capas decorativas en .block::before */
.block > .container {
    position: relative;
    z-index: 1;
}

.planes-intro {
    color: var(--color-text-secondary);
}

/* ================================================================== */
/*  Print: limpio                                                      */
/* ================================================================== */
@media print {
    .nav-sticky,
    .cta-mobile-sticky,
    .wa-float,
    .ostl-toast-region,
    .ostl-modal-backdrop {
        display: none !important;
    }
    body {
        background: #fff;
        color: #000;
    }
}