/*
 * Institute Theme Center
 * Adaptador tipográfico global de la Web pública.
 *
 * Normaliza familias semánticas históricamente dispersas
 * sin modificar las utilidades originales de Rocket LMS.
 */


/* =========================================================
 * TEXTO AUXILIAR
 * Fechas, metadatos, ayudas y texto secundario pequeño.
 * Canon: 12px.
 * ========================================================= */

.font-12.text-gray,
.text-gray.font-12 {
    font-size: var(--theme-text-aux-size, 12px);
}


/* =========================================================
 * TEXTO NORMAL
 * Descripciones, contenido explicativo y texto corriente.
 * Canon: 14px.
 * ========================================================= */

.font-14.text-gray,
.text-gray.font-14 {
    font-size: var(--theme-text-base-size, 14px);
}


/* =========================================================
 * TÍTULO DE COMPONENTE
 * Títulos pequeños de tarjetas, bloques y componentes.
 * Canon: 16px.
 * ========================================================= */

.font-16.font-weight-bold,
.webinar-title.font-16,
.sidebar-title.font-16 {
    font-size: var(--theme-component-title-size, 16px);
}


/* =========================================================
 * TEXTO NORMAL — CONTENIDO ENRIQUECIDO
 * Descripciones principales de Course, Bundle,
 * Upcoming Course y Products.
 * Canon: 14px.
 * ========================================================= */

.course-description:not(.institute-rich-content),
.course-description:not(.institute-rich-content) p {
    font-size: var(--theme-text-base-size, 14px);
}


/* =========================================================
 * TÍTULO PRINCIPAL — PÁGINAS Y CABECERAS PÚBLICAS
 * Títulos grandes blancos de banners/páginas y títulos
 * principales de Course / Bundle.
 * ========================================================= */

.font-30.text-white,
.course-title.font-30 {
    font-size: var(--theme-page-title-size, 24px);
}


/* =========================================================
 * DATO DESTACADO — VALORACIONES
 * Puntuación principal de reviews en Course, Product y Bundle.
 * Canon: 30px.
 * ========================================================= */

.reviews-rate.font-36 {
    font-size: var(--theme-highlight-size, 30px);
}


/* =========================================================
 * TÍTULO DE COMPONENTE — FILTROS Y MODALES
 * Normaliza encabezados internos históricamente en 20px.
 * Canon: 16px.
 * ========================================================= */

.category-filter-title,
.section-title.after-line.font-20 {
    font-size: var(--theme-component-title-size, 16px);
}


/* =========================================================
 * TÍTULO DE COMPONENTE — BLOQUES, FORMULARIOS Y ESTADOS
 * Normalización de títulos históricos en 20px.
 * Canon: 16px.
 * ========================================================= */

/* Home: bloques descriptivos principales */
.institute-theme-component-title,
h3.font-20.font-weight-bold.text-white {
    font-size: var(--theme-component-title-size, 16px);
}

/* Formularios y estados públicos */
.auth-page h1.font-20,
h1.font-20.font-weight-bold,
h1.font-20.mt-30 {
    font-size: var(--theme-component-title-size, 16px);
}

/* Instructor Finder */
.instructor-finder-wizard h3.font-20,
h3.font-20.text-dark.font-weight-bold {
    font-size: var(--theme-component-title-size, 16px);
}

/* Estados y mensajes internos */
h3.font-20.font-weight-bold.text-dark-blue.text-center,
h2.font-20.text-dark-blue {
    font-size: var(--theme-component-title-size, 16px);
}


/* =========================================================
 * DATO DESTACADO — PRECIOS Y MONTOS PRINCIPALES
 * Precios, importes principales y estados "Gratis".
 * Canon: 30px.
 * ========================================================= */

.font-30.text-primary,
.font-36.text-primary {
    font-size: var(--theme-highlight-size, 30px);
}


/* =========================================================
 * TÍTULO PRINCIPAL — ENCABEZADOS HISTÓRICOS DE 24px
 * Secciones principales, perfiles y bloques destacados.
 * Canon: 24px.
 * ========================================================= */

h1.font-24,
h2.font-24,
h3.font-24.font-weight-bold.text-white {
    font-size: var(--theme-page-title-size, 24px);
}


/* =========================================================
 * TEXTO NORMAL — DESCRIPCIONES HISTÓRICAS DE 16px
 * Texto explicativo y descriptivo.
 * Canon: 14px.
 * ========================================================= */

p.font-16.text-gray,
p.text-gray.font-16,
p.font-16.font-weight-normal.text-gray,
div.font-16.text-gray {
    font-size: var(--theme-text-base-size, 14px);
}


/* =========================================================
 * TÍTULO DE COMPONENTE — ENCABEZADOS DE 16px
 * Títulos internos de bloques, modales y componentes.
 * Canon: 16px.
 * ========================================================= */

h3.font-16.text-dark-blue,
h3.section-title.font-16,
h3.font-16.text-dark {
    font-size: var(--theme-component-title-size, 16px);
}


/* =========================================================
 * TEXTO NORMAL — ESPECIFICACIONES
 * Datos relevantes de Course, Upcoming Course y Bundle:
 * fechas, duración, capacidad, contenidos, acceso, etc.
 * Canon: 14px.
 * ========================================================= */

.institute-specifications .font-14 {
    font-size: var(--theme-text-base-size, 14px);
}


/* =========================================================
 * NORMALIZACIÓN DE TAMAÑOS INTERMEDIOS
 * Elimina tamaños históricos 13 / 15 / 18px cuando su
 * función semántica ya pertenece a la escala Institute.
 * ========================================================= */


/* ---------------------------------------------------------
 * 13px → TEXTO AUXILIAR
 * Etiquetas, ayudas y datos secundarios.
 * Canon: 12px.
 * --------------------------------------------------------- */

.font-13.text-gray,
.text-gray.font-13,
#courseShareModal p.font-13,
#courseShareModal span.font-13 {
    font-size: var(--theme-text-aux-size, 12px);
}


/* ---------------------------------------------------------
 * 13px → TEXTO NORMAL
 * Acciones y controles del modal Compartir.
 * Canon: 14px.
 * --------------------------------------------------------- */

#courseShareModal .btn.font-13,
#courseShareModal .close-swl.font-13 {
    font-size: var(--theme-text-base-size, 14px);
}


/* ---------------------------------------------------------
 * 15px → TEXTO NORMAL
 * Información de pago.
 * Canon: 14px.
 * --------------------------------------------------------- */

.cart-payment-section .font-15,
strong.font-15,
div.font-15 {
    font-size: var(--theme-text-base-size, 14px);
}


/* ---------------------------------------------------------
 * 18px → TÍTULO DE COMPONENTE
 * Subtítulos internos de Formación presencial/digital.
 * Canon: 16px.
 * --------------------------------------------------------- */

h4.font-18.text-white {
    font-size: var(--theme-component-title-size, 16px);
}


/* =========================================================
 * TEXTO AUXILIAR — METADATOS DE TARJETAS
 * Duración y fecha de publicación en tarjetas públicas.
 * Canon: 12px.
 * ========================================================= */

span.duration.font-14,
span.date-published.font-14 {
    font-size: var(--theme-text-aux-size, 12px);
}


/* =========================================================
 * TEXTO AUXILIAR — CONTROLES Y ETIQUETAS SECUNDARIAS
 * Opciones pequeñas de formularios, etiquetas de paquetes
 * y acciones secundarias de Course / Bundle / Upcoming.
 * Canon: 12px.
 * ========================================================= */

/* Opciones pequeñas de formularios */
label.font-12.cursor-pointer {
    font-size: var(--theme-text-aux-size, 12px);
}

/* Límites y datos pequeños de paquetes */
span.font-12.text-dark-blue.font-weight-bold {
    font-size: var(--theme-text-aux-size, 12px);
}

/* Recordatorio / favorito / compartir */
.favorites-share-box .font-12 {
    font-size: var(--theme-text-aux-size, 12px);
}

/* Badges pequeños */
.off-label.font-12 {
    font-size: var(--theme-text-aux-size, 12px);
}


/* =========================================================
 * TEXTO NORMAL — FORMULARIOS, NAVEGACIÓN Y CONTENIDOS
 * Familias históricas de 14px que corresponden a texto
 * funcional corriente.
 * Canon: 14px.
 * ========================================================= */

/* Formularios y opciones */
select.form-control.font-14,
label.font-14.text-dark-blue,
label.text-dark-blue.font-14,
.checkbox-button.font-14 {
    font-size: var(--theme-text-base-size, 14px);
}

/* Navegación superior y footer */
.top-navbar .font-14.text-white,
.footer-copyright-card .font-14.text-white,
.institute-navbar-auth-link.font-14 {
    font-size: var(--theme-text-base-size, 14px);
}

/* Nombres de archivos y contenidos */
.file-title.font-14 {
    font-size: var(--theme-text-base-size, 14px);
}


/* =========================================================
 * TEXTO NORMAL — CONTENIDO INCLUIDO
 * Beneficios/características de Course y Upcoming Course:
 * descargable, certificado, quizzes, soporte, foro, etc.
 * Canon: 14px.
 * ========================================================= */

.institute-course-includes .font-14 {
    font-size: var(--theme-text-base-size, 14px);
}


/* =========================================================
 * TEXTO NORMAL — METADATOS DEL HERO DE CURSO
 * Valoraciones, autor/profesor, progreso y datos equivalentes
 * de Course, Bundle y Upcoming Course.
 * Canon: 14px.
 * ========================================================= */

.institute-course-hero-meta .font-14 {
    font-size: var(--theme-text-base-size, 14px);
}


/* =========================================================
 * TEXTO NORMAL — NAVEGACIÓN POR PESTAÑAS
 * Etiquetas de tabs en Course, Bundle, Product, Profile
 * y otras superficies públicas equivalentes.
 * Canon: 14px.
 * ========================================================= */

#tabs-tab .font-14 {
    font-size: var(--theme-text-base-size, 14px);
}


/* =========================================================
 * TEXTO NORMAL — RESUMEN DE CARRITO
 * Conceptos, porcentajes y valores del bloque de totales.
 * Canon: 14px.
 * ========================================================= */

.cart-checkout-item .font-14 {
    font-size: var(--theme-text-base-size, 14px);
}


/* =========================================================
 * TEXTO NORMAL — MODALES COMPARTIR
 * Descripciones, enlaces, acciones y redes sociales.
 * Canon: 14px.
 * ========================================================= */

#blogShareModal .font-14,
#productShareModal .font-14,
#courseShareModal .font-14 {
    font-size: var(--theme-text-base-size, 14px);
}


/* =========================================================
 * TEXTO NORMAL — INTRO INSTITUCIONAL HOME
 * Párrafo descriptivo del bloque institucional.
 * El gran titular de 36px permanece como excepción marketing.
 * Canon del cuerpo: 14px.
 * ========================================================= */

.home-institutional-intro p.font-16 {
    font-size: var(--theme-text-base-size, 14px);
}

/* =========================================================
 * Theme Center — Public top search family
 * Categories / instructors / upcoming / blog / products
 * ========================================================= */

.search-top-banner .top-search-categories-form .search-input {
    background: var(--theme-content-surface, #ffffff) !important;
    border: 1px solid var(--theme-content-border, rgba(0, 0, 0, .07));
}

.search-top-banner .top-search-categories-form .search-input .form-control {
    color: var(--theme-content-text, #171347);
    background: transparent;
}

.search-top-banner .top-search-categories-form .search-input .form-control:focus {
    color: var(--theme-content-text, #171347);
    background: transparent;
}

.search-top-banner .top-search-categories-form .search-input .form-control::placeholder {
    color: var(--theme-content-text-muted, #818894);
    opacity: 1;
}

/* =========================================================
 * Theme Center — Search page fields
 * Results header + no-results search
 * ========================================================= */

.search-top-banner .top-search-form .search-input,
.no-result .search-input {
    background: var(--theme-content-surface, #ffffff) !important;
    border: 1px solid var(--theme-content-border, rgba(0, 0, 0, .07));
}

.search-top-banner .top-search-form .search-input .form-control,
.no-result .search-input .form-control {
    color: var(--theme-content-text, #171347);
    background: transparent;
}

.search-top-banner .top-search-form .search-input .form-control:focus,
.no-result .search-input .form-control:focus {
    color: var(--theme-content-text, #171347);
    background: transparent;
}

.search-top-banner .top-search-form .search-input .form-control::placeholder,
.no-result .search-input .form-control::placeholder {
    color: var(--theme-content-text-muted, #818894);
    opacity: 1;
}

/* =========================================================
 * Theme Center — Forum public search
 * ========================================================= */

.forum-hero-section .search-input {
    background: var(--theme-content-surface, #ffffff) !important;
    border: 1px solid var(--theme-content-border, rgba(0, 0, 0, .07));
}

.forum-hero-section .search-input .form-control {
    color: var(--theme-content-text, #171347);
    background: transparent;
}

.forum-hero-section .search-input .form-control:focus {
    color: var(--theme-content-text, #171347);
    background: transparent;
}

.forum-hero-section .search-input .form-control::placeholder {
    color: var(--theme-content-text-muted, #818894);
    opacity: 1;
}

/*
 * ==========================================================
 * THEME CENTER — WEB / BASE CROMÁTICA V1
 * ==========================================================
 *
 * Sustituye el fondo oscuro fijo heredado de
 * institute-legacy-global.css sin modificar ese archivo.
 *
 * Conserva la fotografía histórica de fondo y deriva el
 * overlay y el texto desde la Central de Temas.
 * ==========================================================
 */

html {
    background-color: var(--theme-page-bg, #160f12);
}

body {
    color: var(
        --theme-page-contrast,
        var(--theme-text, #f5f1f2)
    );

    background:
        linear-gradient(
            135deg,
            light-dark(
                color-mix(
                    in srgb,
                    var(--theme-page-bg, #160f12)
                        var(--theme-web-page-overlay-light-start, 88%),
                    transparent
                ),
                color-mix(
                    in srgb,
                    var(--theme-page-bg, #160f12) 90%,
                    transparent
                )
            ),
            light-dark(
                color-mix(
                    in srgb,
                    var(--theme-page-bg, #160f12)
                        var(--theme-web-page-overlay-light-end, 82%),
                    transparent
                ),
                color-mix(
                    in srgb,
                    var(--theme-page-bg, #160f12) 80%,
                    transparent
                )
            )
        ),
        url('/store/1/Logos%20Motion%20education/IMAGEN%20FONDO%20MOTION%20BYN.webp')
        center center / cover no-repeat fixed !important;

    background-color: var(--theme-page-bg, #160f12);
}

/*
 * ==========================================================
 * CLASSES — MOBILE COURSE CARD WIDTH
 * ==========================================================
 * Solo grid de /classes.
 * No afecta list view ni otros usos de webinar-card.
 * ==========================================================
 */
@media (max-width: 767.98px) {

    #filtersForm
    .webinar-card:not(.webinar-list) {
        width: 100% !important;
        max-width: 330px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* QUIZ RESULT — corrección cromática puntual */
.institute-quiz-page .quiz-card p.text-gray > span {
    color: inherit !important;
}

.institute-quiz-page .answer-label .answer-title,
.institute-quiz-page .answer-label .answer-title * {
    color: inherit !important;
}

.institute-quiz-page
.answer-item
input[type="radio"]:checked + .answer-label {
    color: var(--theme-content-text, #171347) !important;
}

/* QUIZ RESULT — tarjeta de estadísticas sobre superficie clara fija */
#app .institute-quiz-page .activities-container .text-secondary {
    color: var(--theme-content-text, #171347) !important;
}

#app .institute-quiz-page .activities-container .text-gray {
    color: var(--theme-content-text-muted, #818894) !important;
}

/* QUIZ RESULT — nombre del instructor */
.institute-quiz-page a[href*="/users/"][href*="/profile"] {
    color: var(--theme-text, #343434) !important;
}

/* QUIZ RESULT — sin glow en respuesta seleccionada */
.institute-quiz-page
.answer-item
input[type="radio"]:checked + .answer-label {
    box-shadow: none !important;
}

/* QUIZ RESULT — respuestas deshabilitadas no necesitan hover */
.institute-quiz-page
.answer-item
input[type="radio"]:disabled:not(:checked) + .answer-label:hover {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* QUIZ RESULT — respuesta seleccionada con superficie CONTENT más sutil */
.institute-quiz-page
.answer-item
input[type="radio"]:checked + .answer-label {
    background-color: color-mix(
        in srgb,
        var(--theme-content-surface, #ffffff) 84%,
        transparent
    ) !important;
}

/* QUIZ RESULT — respuesta seleccionada con superficie CONTENT más sutil */
.institute-quiz-page
.answer-item
input[type="radio"]:checked + .answer-label {
    background-color: color-mix(
        in srgb,
        var(--theme-content-surface, #ffffff) 84%,
        transparent
    ) !important;
}

/* QUIZ RESULT — respuesta seleccionada con superficie CONTENT más sutil */
.institute-quiz-page
.answer-item
input[type="radio"]:checked + .answer-label {
    background-color: color-mix(
        in srgb,
        var(--theme-content-surface, #ffffff) 84%,
        transparent
    ) !important;
}

/* QUIZ RESULT — respuesta seleccionada con superficie CONTENT más sutil */
.institute-quiz-page
.answer-item
input[type="radio"]:checked + .answer-label {
    background-color: color-mix(
        in srgb,
        var(--theme-content-surface, #ffffff) 84%,
        transparent
    ) !important;
}



/* QUIZ RESULT — respuesta seleccionada con superficie CONTENT más sutil */

.institute-quiz-page

.answer-item

input[type="radio"]:checked + .answer-label {

    background-color: color-mix(

        in srgb,

        var(--theme-content-surface, #ffffff) 70%, 

        transparent

    ) !important;

}


/* QUIZ RESULT — texto de la respuesta seleccionada con mayor énfasis */
.institute-quiz-page
.answer-item
input[type="radio"]:checked + .answer-label
.answer-title {
    font-weight: 600 !important;
}


/* QUIZ RESULT — NUEVO RESUMEN COMPACTO */

#app .institute-quiz-page .institute-quiz-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;

    background: var(
        --theme-glass-surface-strong,
        rgba(255, 255, 255, .10)
    );

    border: 1px solid var(
        --theme-border,
        rgba(255, 255, 255, .14)
    );

    border-radius: calc(var(--theme-control-radius, 10px) + 4px);
}


#app .institute-quiz-page .institute-quiz-summary__item {
    min-width: 0;
    min-height: 94px;
    padding: 12px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}


#app .institute-quiz-page
.institute-quiz-summary__item + .institute-quiz-summary__item {
    border-left: 1px solid
        color-mix(
            in srgb,
            var(--theme-border, rgba(255,255,255,.14)) 65%,
            transparent
        );
}


#app .institute-quiz-page .institute-quiz-summary__icon {
    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

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


#app .institute-quiz-page .institute-quiz-summary__icon svg {
    width: 100%;
    height: 100%;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


#app .institute-quiz-page .institute-quiz-summary__value {
    margin-top: 7px;

    color: var(--theme-text, #343434) !important;

    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}


#app .institute-quiz-page .institute-quiz-summary__label {
    margin-top: 5px;

    color: var(--theme-text-muted, #818894) !important;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}


/* ==========================================================
 * MOBILE — 2 x 2
 * ========================================================== */

@media (max-width: 767.98px) {

    #app .institute-quiz-page .institute-quiz-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #app .institute-quiz-page .institute-quiz-summary__item {
        min-height: 82px;
        padding: 10px 8px;
    }

    #app .institute-quiz-page
    .institute-quiz-summary__item:nth-child(odd) {
        border-left: 0;
    }

    #app .institute-quiz-page
    .institute-quiz-summary__item:nth-child(n+3) {
        border-top: 1px solid
            color-mix(
                in srgb,
                var(--theme-border, rgba(255,255,255,.14)) 65%,
                transparent
            );
    }

    #app .institute-quiz-page .institute-quiz-summary__icon {
        width: 18px;
        height: 18px;
    }

    #app .institute-quiz-page .institute-quiz-summary__value {
        margin-top: 5px;
        font-size: 19px;
    }

    #app .institute-quiz-page .institute-quiz-summary__label {
        margin-top: 4px;
        font-size: 11px;
    }
}

/* QUIZ RESULT — SVG del resumen hereda el color semántico del icono */
#app .institute-quiz-page
.institute-quiz-summary__icon svg {
    color: inherit !important;
}

/* QUIZ RESULT — trazos internos de iconos heredan el color temático */
#app .institute-quiz-page
.institute-quiz-summary__icon svg * {
    color: inherit !important;
    stroke: currentColor !important;
}

/* ==========================================================
 * QUIZ RESULT — RESPUESTAS / MOBILE
 * En móvil: una respuesta por fila y altura según contenido.
 * ========================================================== */

@media (max-width: 767.98px) {

    #app .institute-quiz-page
    .quiz-form
    .question-multi-answers {
        grid-template-columns: minmax(0, 1fr);
        grid-column-gap: 0;
        grid-row-gap: 12px;
    }

    #app .institute-quiz-page
    .quiz-form
    .question-multi-answers
    .answer-item {
        height: auto !important;
        min-height: 118px;
    }

    #app .institute-quiz-page
    .quiz-form
    .question-multi-answers
    .answer-item
    .answer-label {
        height: auto !important;
        min-height: 118px;
        padding: 18px 16px;
    }

    #app .institute-quiz-page
    .quiz-form
    .question-multi-answers
    .answer-title {
        width: 100%;
        line-height: 1.45;
    }
}

/* ==========================================================
 * QUIZ RESULT — navegación gobernada por Central de Temas
 * Neutraliza el rojo histórico de .btn-primary del legacy.
 * ========================================================== */

#app .institute-quiz-page
.quiz-form .btn-primary {
    background-color: var(
        --primary,
        var(--theme-accent, #b4283e)
    ) !important;

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

#app .institute-quiz-page
.quiz-form .btn-primary:not(:disabled):hover,
#app .institute-quiz-page
.quiz-form .btn-primary:not(:disabled):focus,
#app .institute-quiz-page
.quiz-form .btn-primary:not(:disabled):active {
    background-color: var(
        --primary-hover,
        var(--theme-accent, #b4283e)
    ) !important;

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


/* QUIZ — timer y contenido interno del resumen heredan el valor temático */
#app .institute-quiz-page
.institute-quiz-summary__value * {
    color: inherit !important;
}

/* QUIZ START — temporizador en una sola línea */
#app .institute-quiz-page
.institute-quiz-summary__value
.timer {
    display: inline-flex !important;
    align-items: baseline;
    justify-content: center;
    white-space: nowrap;
}

#app .institute-quiz-page
.institute-quiz-summary__value
.timer > div {
    display: inline !important;
}

#app .institute-quiz-page
.institute-quiz-summary__value
.timer .jst-clearDiv {
    display: none !important;
}

/* ==========================================================
 * QUIZ START — FINALIZAR
 * Acción final del flujo: accent temático en variante outline.
 * Neutraliza el btn-danger rojo histórico de Rocket.
 * ========================================================== */

#app .institute-quiz-start-page
.quiz-form .finish.btn-danger {
    background-color: transparent !important;

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

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

    box-shadow: none !important;
}

#app .institute-quiz-start-page
.quiz-form .finish.btn-danger:hover,
#app .institute-quiz-start-page
.quiz-form .finish.btn-danger:focus,
#app .institute-quiz-start-page
.quiz-form .finish.btn-danger:active {
    background-color: var(
        --theme-accent,
        var(--primary, #b4283e)
    ) !important;

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

    color: var(
        --theme-accent-contrast,
        #ffffff
    ) !important;

    transform: none !important;
}


/* ==========================================================
 * QUIZ START — ACCIONES / MOBILE
 * Anterior + Siguiente arriba; Finalizar separado debajo.
 * ========================================================== */

@media (max-width: 767.98px) {

    #app .institute-quiz-start-page
    .institute-quiz-actions {
        flex-wrap: wrap;
        gap: 12px;
    }

    #app .institute-quiz-start-page
    .institute-quiz-actions
    .previous,
    #app .institute-quiz-start-page
    .institute-quiz-actions
    .next {
        flex: 1 1 calc(50% - 6px);
        width: auto;
        margin: 0 !important;
        white-space: normal;
    }

    #app .institute-quiz-start-page
    .institute-quiz-actions
    .finish {
        flex: 0 0 100%;
        width: 100%;
        margin: 0 !important;
    }
}

/* QUIZ START — hover de alternativa con 70% de transparencia */
#app .institute-quiz-start-page
.question-multi-answers
.answer-item
input[type="radio"]:not(:checked) + .answer-label:hover {
    background-color: color-mix(
        in srgb,
        var(--theme-content-surface, #ffffff) 30%,
        transparent
    ) !important;

    box-shadow: none !important;
}


/* ==========================================================
 * QUIZ STATUS — ACCIONES
 * Central de Temas + jerarquía primaria/secundaria.
 * ========================================================== */

/* Acción principal */
#app .institute-quiz-status-page
.institute-quiz-status-actions
.btn-primary {
    background-color: var(
        --theme-accent,
        var(--primary, #b4283e)
    ) !important;

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

    color: var(
        --theme-accent-contrast,
        #ffffff
    ) !important;

    box-shadow: none !important;
}


/* Segunda acción: variante outline */
#app .institute-quiz-status-page
.institute-quiz-status-actions
.btn-primary + .btn-primary {
    background-color: transparent !important;

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


/* Hover acción principal */
#app .institute-quiz-status-page
.institute-quiz-status-actions
.btn-primary:hover,
#app .institute-quiz-status-page
.institute-quiz-status-actions
.btn-primary:focus {
    background-color: var(
        --primary-hover,
        var(--theme-accent, #b4283e)
    ) !important;

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

    color: var(
        --theme-accent-contrast,
        #ffffff
    ) !important;

    transform: none !important;
}


/* Hover acción secundaria */
#app .institute-quiz-status-page
.institute-quiz-status-actions
.btn-primary + .btn-primary:hover,
#app .institute-quiz-status-page
.institute-quiz-status-actions
.btn-primary + .btn-primary:focus {
    background-color: var(
        --theme-accent,
        var(--primary, #b4283e)
    ) !important;

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

    color: var(
        --theme-accent-contrast,
        #ffffff
    ) !important;
}

/* ==========================================================
 * QUIZ STATUS — TEXTO + ESPACIADO DE ACCIONES
 * ========================================================== */

/* Instructor: énfasis principal, no blanco legacy */
#app .institute-quiz-status-page
section:first-of-type p.text-gray
.font-weight-bold {
    color: var(--theme-text, #343434) !important;
}


/* Mensaje central del resultado */
#app .institute-quiz-status-page
.no-result {
    color: var(--theme-text, #343434) !important;
}

#app .institute-quiz-status-page
.no-result h2,
#app .institute-quiz-status-page
.no-result p,
#app .institute-quiz-status-page
.no-result p * {
    color: inherit !important;
}


/* Separación entre acciones */
#app .institute-quiz-status-page
.institute-quiz-status-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}