/*
 * ==========================================================
 * INSTITUTE — THEME COMPATIBILITY V1-A
 * ==========================================================
 *
 * Adaptador cromático entre utilidades legacy de Rocket LMS
 * y la Central de Temas.
 *
 * Esta primera capa cubre familias de baja ambigüedad.
 *
 * Principio:
 * - Light  -> tokens semánticos de la Central de Temas.
 * - Dark   -> apariencia histórica de Institute/Rocket.
 *
 * text-white queda deliberadamente fuera de V1-A porque
 * también representa texto legítimamente blanco sobre media,
 * botones, badges y estados.
 *
 * Los fallbacks previos a light-dark() mantienen el aspecto
 * histórico en navegadores que no soporten esa función.
 * ==========================================================
 */


/* ==========================================================
 * TEXTO SECUNDARIO
 * ========================================================== */

.text-gray {
    color: #818894 !important;
    color: light-dark(
        var(--theme-text-muted, #818894),
        #818894
    ) !important;
}

a.text-gray:hover,
a.text-gray:focus {
    color: #5c626c !important;
    color: light-dark(
        color-mix(
            in srgb,
            var(--theme-text-muted, #818894) 70%,
            var(--theme-text, #343434) 30%
        ),
        #5c626c
    ) !important;
}


/* ==========================================================
 * TEXTO PRINCIPAL LEGACY
 * ========================================================== */

/*
 * Institute oscuro convirtió text-dark-blue en blanco.
 * Conservamos exactamente ese comportamiento en Dark.
 */
.text-dark-blue {
    color: #ffffff !important;
    color: light-dark(
        var(--theme-text, #343434),
        #ffffff
    ) !important;
}


/*
 * text-dark conserva el color original efectivo de Rocket
 * en Dark y pasa al texto semántico en Light.
 */
.text-dark {
    color: #343434 !important;
    color: light-dark(
        var(--theme-text, #343434),
        #343434
    ) !important;
}

a.text-dark:hover,
a.text-dark:focus {
    color: #0e0e0e !important;
    color: light-dark(
        var(--theme-text, #343434),
        #0e0e0e
    ) !important;
}


/* ==========================================================
 * TÍTULOS DE SECCIÓN LEGACY
 * ========================================================== */

.section-title {
    color: #ffffff !important;
    color: light-dark(
        var(--theme-text, #343434),
        #ffffff
    ) !important;
}


/* ==========================================================
 * LABELS LEGACY
 *
 * institute-form-fields.css se carga después de esta capa,
 * por lo que los campos con semántica propia conservan su
 * sistema field-bg / field-text / field-scheme.
 * ========================================================== */

.form-group .control-label,
.form-group > label {
    color: #ffffff !important;
    color: light-dark(
        var(--theme-text, #343434),
        #ffffff
    ) !important;
}


/*
 * ==========================================================
 * INSTITUTE — THEME COMPATIBILITY V1-B / TEXT-WHITE
 * ==========================================================
 *
 * Rocket utiliza text-white tanto como utilidad cromática
 * general como para texto deliberadamente blanco sobre
 * fotografías, vídeo, acentos, badges y estados.
 *
 * Regla general:
 * - Light -> texto semántico del tema.
 * - Dark  -> blanco histórico.
 *
 * Las excepciones inferiores representan superficies donde
 * el blanco posee significado de contraste local.
 * ==========================================================
 */


/* ----------------------------------------------------------
 * TEXT-WHITE GENERAL
 * ---------------------------------------------------------- */

.text-white {
    color: #ffffff !important;

    color: light-dark(
        var(--theme-text, #343434),
        #ffffff
    ) !important;
}


/* Hover histórico de enlaces */
a.text-white:hover,
a.text-white:focus {
    color: #d9d9d9 !important;

    color: light-dark(
        var(--theme-text, #343434),
        #d9d9d9
    ) !important;
}


/* ==========================================================
 * EXCEPCIONES SEMÁNTICAS
 * ========================================================== */


/*
 * 1. MEDIA / FOTOGRAFÍA / BANNERS
 */

.site-top-banner .text-white,
.cart-banner .text-white,

.course-body-on-cover.text-white,
.course-body-on-cover .text-white,

.upcoming-course-body-on-cover.text-white,
.upcoming-course-body-on-cover .text-white {
    color: #ffffff !important;
}


/*
 * 2. SUPERFICIES CROMÁTICAS ROCKET
 */

.bg-primary .text-white,
.course-content-section .nav-tabs.bg-secondary .text-white,
.bg-danger .text-white,
.bg-success .text-white,
.bg-dark .text-white,

.text-white.bg-primary,
.text-white.bg-danger,
.text-white.bg-success,
.text-white.bg-dark {
    color: #ffffff !important;
}


/*
 * 3. BADGES / ESTADOS / ETIQUETAS
 */

.badge.text-white,
.course-count-badge.text-white,
.off-label.text-white {
    color: #ffffff !important;
}


/*
 * 4. ICONOS SOBRE CAJAS CROMÁTICAS
 */

.contact-icon-box .text-white {
    color: #ffffff !important;
}


/*
 * 5. CONTROLES DE ARCHIVO
 *
 * panel-file-manager tiene superficie propia y necesita
 * conservar contraste local.
 */

.panel-file-manager.text-white,
.panel-file-manager .text-white {
    color: #ffffff !important;
}


/*
 * 6. BOTONES QUE DECLARAN EXPLÍCITAMENTE TEXT-WHITE
 */

.btn.text-white,
.btn .text-white {
    color: #ffffff !important;
}


/* ----------------------------------------------------------
 * HOVER DE EXCEPCIONES
 * ---------------------------------------------------------- */

.site-top-banner a.text-white:hover,
.site-top-banner a.text-white:focus,

.cart-banner a.text-white:hover,
.cart-banner a.text-white:focus,

.course-body-on-cover a.text-white:hover,
.course-body-on-cover a.text-white:focus,

.upcoming-course-body-on-cover a.text-white:hover,
.upcoming-course-body-on-cover a.text-white:focus,

.bg-primary a.text-white:hover,
.bg-primary a.text-white:focus,

.course-content-section .nav-tabs.bg-secondary a.text-white:hover,
.course-content-section .nav-tabs.bg-secondary a.text-white:focus,

.bg-danger a.text-white:hover,
.bg-danger a.text-white:focus,

.bg-success a.text-white:hover,
.bg-success a.text-white:focus,

.bg-dark a.text-white:hover,
.bg-dark a.text-white:focus,

.btn.text-white:hover,
.btn.text-white:focus {
    color: #d9d9d9 !important;
}


/*
 * ==========================================================
 * INSTITUTE — THEME COMPATIBILITY V1-C / HERENCIA GLOBAL
 * ==========================================================
 *
 * Legacy Global contiene:
 *
 *   * { color: #e1e1e1; }
 *
 * Esa regla rompe la herencia cromática normal de CSS:
 * aunque un contenedor tenga un color semántico correcto,
 * cada descendiente recibe directamente #e1e1e1.
 *
 * La capa de compatibilidad restaura la herencia normal.
 * Las reglas específicas de componentes/utilidades siguen
 * prevaleciendo por especificidad.
 * ==========================================================
 */

* {
    color: inherit;
}


/*
 * ==========================================================
 * INSTITUTE — THEME COMPATIBILITY V1-D / PRIMARY
 * ==========================================================
 *
 * Traduce la familia Primary histórica de Rocket LMS
 * al acento semántico definido por la Central de Temas.
 *
 * No modifica --secondary.
 * ==========================================================
 */

:root {
    --primary: var(--theme-accent, #b4283e) !important;

    --primary-hover:
        var(--theme-accent-strong, var(--theme-accent, #b4283e));

    --primary-border:
        var(--theme-accent, #b4283e);

    --primary-border-hover:
        var(--theme-accent-strong, var(--theme-accent, #b4283e));

    --primary-btn-color:
        var(--theme-accent-contrast, #ffffff);

    --primary-btn-color-hover:
        var(--theme-accent-contrast, #ffffff);

    --primary-btn-shadow:
        0 3px 6px 0
        color-mix(in srgb, var(--theme-accent, #b4283e) 30%, transparent);

    --primary-btn-shadow-hover:
        0 3px 8px 0
        color-mix(in srgb, var(--theme-accent, #b4283e) 30%, transparent);
}


/*
 * El legacy global redefine directamente la familia .btn-primary
 * con colores, borde y hover históricos.
 *
 * Esta capa devuelve a Central de Temas la autoridad cromática
 * completa de PRIMARY utilizando los tokens ya traducidos arriba.
 *
 * La geometría específica de cada componente continúa separada.
 */
.btn-primary {
    color:
        var(
            --primary-btn-color,
            var(--theme-accent-contrast, #ffffff)
        ) !important;

    background-color:
        var(
            --primary,
            var(--theme-accent, #b4283e)
        ) !important;

    border:
        1px solid
        var(
            --primary-border,
            var(--theme-accent, #b4283e)
        ) !important;

    box-shadow:
        var(
            --primary-btn-shadow,
            none
        ) !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    color:
        var(
            --primary-btn-color-hover,
            var(--theme-accent-contrast, #ffffff)
        ) !important;

    background-color:
        var(
            --primary-hover,
            var(--theme-accent-strong, var(--theme-accent, #b4283e))
        ) !important;

    border-color:
        var(
            --primary-border-hover,
            var(--theme-accent-strong, var(--theme-accent, #b4283e))
        ) !important;

    box-shadow:
        var(
            --primary-btn-shadow-hover,
            none
        ) !important;
}


/*
 * ==========================================================
 * PANEL LEGACY SURFACES — BG-WHITE ADAPTER
 * ==========================================================
 *
 * Rocket LMS usa históricamente .bg-white como equivalente
 * a "tarjeta / superficie de contenido".
 *
 * Dentro del Panel traducimos esa intención al sistema
 * semántico de Central de Temas.
 *
 * NO modifica .bg-white globalmente.
 * Web, Learning Page, hero, media, etc. quedan intactos.
 * ==========================================================
 */

.panel-content .bg-white {
    background-color: var(
        --theme-content-surface,
        var(--theme-surface, #ffffff)
    ) !important;

    color: var(
        --theme-content-text,
        var(--theme-text, #171717)
    );
}


/*
 * Estados hover/focus heredados de Bootstrap/Rocket.
 */
.panel-content a.bg-white:hover,
.panel-content a.bg-white:focus,
.panel-content button.bg-white:hover,
.panel-content button.bg-white:focus {
    background-color: color-mix(
        in srgb,
        var(
            --theme-content-surface,
            var(--theme-surface, #ffffff)
        ) 94%,
        var(
            --theme-content-text,
            var(--theme-text, #171717)
        ) 6%
    ) !important;
}


/*
 * Utilidades históricas de texto usadas dentro de estas
 * superficies. Se traducen a la familia CONTENT, no a PAGE.
 *
 * No tocamos text-white, primary, danger, success, etc.,
 * porque suelen expresar estados o controles deliberados.
 */
.panel-content .bg-white .text-dark,
.panel-content .bg-white .text-dark-blue {
    color: var(
        --theme-content-text,
        var(--theme-text, #171717)
    ) !important;
}

.panel-content .bg-white .text-gray,
.panel-content .bg-white .text-gray300,
.panel-content .bg-white .text-gray500,
.panel-content .bg-white .text-gray600 {
    color: var(
        --theme-content-text-muted,
        var(--theme-text-muted, #818894)
    ) !important;
}


/*
 * ==========================================================
 * PANEL LEGACY BORDERS — SEMANTIC ADAPTER
 * ==========================================================
 *
 * Traduce utilidades históricas de borde de Rocket LMS
 * al sistema semántico de Central de Temas.
 *
 * Scope exclusivo de .panel-content.
 *
 * Los bordes de estado (primary, danger, success, warning,
 * etc.) quedan deliberadamente fuera.
 * ==========================================================
 */


/* Borde genérico */
.panel-content .border {
    border-color: var(--theme-border, #ececec) !important;
}


/* Bordes direccionales / divisores */
.panel-content .border-top {
    border-top-color: var(--theme-border, #ececec) !important;
}

.panel-content .border-right {
    border-right-color: var(--theme-border, #ececec) !important;
}

.panel-content .border-bottom {
    border-bottom-color: var(--theme-border, #ececec) !important;
}

.panel-content .border-left {
    border-left-color: var(--theme-border, #ececec) !important;
}


/*
 * Los antiguos gray200/gray300 expresan prácticamente
 * la misma intención visual: borde neutro.
 */
.panel-content .border-gray200,
.panel-content .border-gray300 {
    border-color: var(--theme-border, #ececec) !important;
}


/*
 * Cuando el borde pertenece a una superficie legacy
 * .bg-white ya traducida a CONTENT, usamos CONTENT BORDER.
 */
.panel-content .bg-white.border,
.panel-content .bg-white.border-gray200,
.panel-content .bg-white.border-gray300,
.panel-content .bg-white .border,
.panel-content .bg-white .border-gray200,
.panel-content .bg-white .border-gray300 {
    border-color: var(
        --theme-content-border,
        var(--theme-border, #ececec)
    ) !important;
}

.panel-content .bg-white.border-top,
.panel-content .bg-white .border-top {
    border-top-color: var(
        --theme-content-border,
        var(--theme-border, #ececec)
    ) !important;
}

.panel-content .bg-white.border-right,
.panel-content .bg-white .border-right {
    border-right-color: var(
        --theme-content-border,
        var(--theme-border, #ececec)
    ) !important;
}

.panel-content .bg-white.border-bottom,
.panel-content .bg-white .border-bottom {
    border-bottom-color: var(
        --theme-content-border,
        var(--theme-border, #ececec)
    ) !important;
}

.panel-content .bg-white.border-left,
.panel-content .bg-white .border-left {
    border-left-color: var(
        --theme-content-border,
        var(--theme-border, #ececec)
    ) !important;
}


/*
 * ==========================================================
 * PANEL LEGACY SOFT SURFACES — BG-GRAY200 ADAPTER
 * ==========================================================
 *
 * Rocket usa .bg-gray200 principalmente para avatares,
 * chips y pequeñas superficies secundarias.
 *
 * Se traduce a theme-surface-soft.
 *
 * bg-gray300 queda fuera porque actualmente expresa
 * estados disabled.
 *
 * bg-info-light queda fuera porque puede expresar
 * semántica de estado/información y requiere tratamiento
 * independiente.
 * ==========================================================
 */

.panel-content .bg-gray200 {
    background-color: var(
        --theme-surface-soft,
        #f1f1f1
    ) !important;

    color: var(
        --theme-text,
        #171717
    );
}


/*
 * Cuando aparece dentro de una superficie CONTENT,
 * conserva el texto correspondiente a esa familia.
 */
.panel-content .bg-white .bg-gray200 {
    color: var(
        --theme-content-text,
        var(--theme-text, #171717)
    );
}


/*
 * ==========================================================
 * PANEL LEGACY CARDS — CONTEXTUAL GEOMETRY / SHADOW
 * ==========================================================
 *
 * Dentro del Panel, .bg-white ya fue traducido
 * semánticamente como superficie de contenido.
 *
 * Solo cuando esa superficie legacy declara además
 * rounded-sm o shadow, traducimos geometría y sombra
 * a los tokens de card de Central de Temas.
 *
 * NO afecta rounded-sm / rounded-lg / shadow de forma global.
 * NO afecta imágenes, controles, chips, estados ni círculos.
 * panel-shadow ya posee tematización propia.
 * ==========================================================
 */


/* Radio de superficies legacy equivalentes a card */
.panel-content .bg-white.rounded-sm {
    border-radius: var(
        --theme-card-radius-override,
        var(--theme-card-radius, 10px)
    ) !important;
}


/* Sombra de superficies legacy equivalentes a card */
.panel-content .bg-white.shadow {
    box-shadow: var(
        --theme-card-shadow-override,
        var(--theme-card-shadow, 0 3px 15px 0 rgba(0, 0, 0, 0.1))
    ) !important;
}


/*
 * ==========================================================
 * PANEL LEGACY TEXT-SECONDARY — SEMANTIC ADAPTER
 * ==========================================================
 *
 * En Rocket LMS, text-secondary se utiliza extensamente
 * como texto principal / de alto énfasis dentro del Panel.
 *
 * El legacy histórico convirtió --secondary en blanco,
 * pero no modificamos esa variable global porque también
 * alimenta botones, fondos, gráficos y otros componentes.
 *
 * Traducimos únicamente la utilidad textual.
 * ==========================================================
 */

.panel-content .text-secondary {
    color: var(--theme-text, #343434) !important;
}

.panel-content .bg-white .text-secondary {
    color: var(
        --theme-content-text,
        var(--theme-text, #343434)
    ) !important;
}


/*
 * ==========================================================
 * WEB LEGACY CONTENT SURFACES — SEMANTIC ADAPTER
 * ==========================================================
 *
 * En la Web pública no redefinimos .bg-white globalmente:
 * Rocket también la usa en controles y superficies
 * funcionales con otras responsabilidades semánticas.
 *
 * Se consideran superficies CONTENT:
 * - bg-white con geometría/borde/sombra explícita de card;
 * - gift-webinar-card;
 * - superficie principal del Instructor Finder.
 *
 * Quedan deliberadamente fuera:
 * - slider-search;
 * - checkbox-button;
 * - stream-footer / Agora;
 * - otros bg-white sin señal semántica suficiente.
 *
 * Scope exclusivo de #app (Web pública).
 * ==========================================================
 */

#app :is(
    .bg-white.rounded-sm,
    .bg-white.rounded-lg,
    .bg-white.shadow,
    .bg-white.shadow-sm,
    .bg-white.border,
    .gift-item-card .gift-webinar-card.bg-white,
    .instructor-finder-wizard .bg-white
) {
    background-color: var(
        --theme-content-surface,
        var(--theme-surface, #ffffff)
    ) !important;

    color: var(
        --theme-content-text,
        var(--theme-text, #171717)
    );

    border-color: var(
        --theme-content-border,
        var(--theme-border, #ececec)
    ) !important;
}


/* Texto principal dentro de superficies CONTENT */
#app :is(
    .bg-white.rounded-sm,
    .bg-white.rounded-lg,
    .bg-white.shadow,
    .bg-white.shadow-sm,
    .bg-white.border,
    .gift-item-card .gift-webinar-card.bg-white,
    .instructor-finder-wizard .bg-white
) :is(
    .text-dark,
    .text-dark-blue,
    .text-secondary,
    .section-title
) {
    color: var(
        --theme-content-text,
        var(--theme-text, #171717)
    ) !important;
}


/* Texto secundario / metadata dentro de CONTENT */
#app :is(
    .bg-white.rounded-sm,
    .bg-white.rounded-lg,
    .bg-white.shadow,
    .bg-white.shadow-sm,
    .bg-white.border,
    .gift-item-card .gift-webinar-card.bg-white,
    .instructor-finder-wizard .bg-white
) :is(
    .text-gray,
    .text-gray300,
    .text-gray500,
    .text-gray600
) {
    color: var(
        --theme-content-text-muted,
        var(--theme-text-muted, #818894)
    ) !important;
}


/* Bordes internos pertenecientes a la misma superficie */
#app :is(
    .bg-white.rounded-sm,
    .bg-white.rounded-lg,
    .bg-white.shadow,
    .bg-white.shadow-sm,
    .bg-white.border,
    .gift-item-card .gift-webinar-card.bg-white,
    .instructor-finder-wizard .bg-white
) :is(
    .border,
    .border-gray200,
    .border-gray300
) {
    border-color: var(
        --theme-content-border,
        var(--theme-border, #ececec)
    ) !important;
}


/*
 * ==========================================================
 * WEB LEGACY TEXT-SECONDARY — SEMANTIC ADAPTER
 * ==========================================================
 *
 * En la Web pública, Rocket utiliza text-secondary
 * mayoritariamente como texto principal / de alto énfasis.
 *
 * Light -> theme-text.
 * Dark  -> blanco histórico de Institute.
 *
 * Las superficies CONTENT poseen una regla posterior/más
 * específica que utiliza theme-content-text.
 *
 * El Hero sobre imagen conserva blanco como contraste local.
 * ==========================================================
 */

#app .text-secondary {
    color: #ffffff !important;

    color: light-dark(
        var(--theme-text, #343434),
        #ffffff
    ) !important;
}


/* Hero sobre imagen: contraste local deliberadamente blanco */
#app .slider-container .slider-content h1.text-secondary {
    color: #ffffff !important;
}


/* ==========================================================
 * QUIZ STATUS — resultado textual
 * La pantalla pertenece al shell temático, no a CONTENT fijo.
 * Neutraliza #e1e1e1 y .section-title legacy.
 * ========================================================== */

#app .institute-quiz-status-page
.no-result .section-title,
#app .institute-quiz-status-page
.no-result p,
#app .institute-quiz-status-page
.no-result p * {
    color: var(--theme-text, #343434) !important;
}

/* ==========================================================
 * QUIZ STATUS — respiración vertical del bloque de mensaje
 * ========================================================== */
#app .institute-quiz-status-page
.no-result .d-flex.align-items-center.flex-column.mt-30.text-center {
    gap: 10px;
}

#app .institute-quiz-status-page
.no-result .section-title {
    margin-bottom: 0 !important;
    line-height: 1.25;
}

#app .institute-quiz-status-page
.no-result p {
    margin-bottom: 0 !important;
    line-height: 1.4;
}

/*
 * ==========================================================
 * PANEL TABLES — BORDES SEMÁNTICOS
 * ==========================================================
 *
 * Bootstrap/Rocket define bordes de tabla con #ececec.
 * En el Panel, la cromática de esos divisores pertenece a
 * Central de Temas mediante --theme-border.
 *
 * Se conservan grosores y estructura originales.
 * ==========================================================
 */

.panel-content .table th,
.panel-content .table td,
.panel-content .table thead th,
.panel-content .table tbody + tbody {
    border-color: var(--theme-border, #ececec) !important;
}