/*
 * ==========================================================
 * INSTITUTE — COURSE PAGE / COMPLETION STATE VISUAL V1
 *
 * Replica la semántica visual de Learning Page en la pestaña
 * Contenido de la ficha del curso.
 * ==========================================================
 */

/* Contenido individual terminado */
.course-content-section #content
.course-completion-item.is-completed {
    background: light-dark(
        color-mix(
            in srgb,
            var(--theme-completed, #006B3D) 22%,
            transparent
        ),
        color-mix(
            in srgb,
            var(--theme-completed-surface, #14251D) 72%,
            transparent
        )
    ) !important;
}

/* Hover */
.course-content-section #content
.course-completion-item.is-completed:hover {
    background: light-dark(
        color-mix(
            in srgb,
            var(--theme-completed, #006B3D) 28%,
            transparent
        ),
        color-mix(
            in srgb,
            var(--theme-completed-surface, #14251D) 86%,
            var(--theme-glass-hover-override, rgba(255,255,255,.08))
        )
    ) !important;
}

/* Icono del contenido terminado */
.course-content-section #content
.course-completion-item.is-completed
.course-completion-status-icon {
    background: var(
        --theme-completed,
        #006B3D
    ) !important;

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

.course-content-section #content
.course-completion-item.is-completed
.course-completion-status-icon svg {
    color: var(
        --theme-accent-contrast,
        #ffffff
    ) !important;

    stroke: currentColor !important;
}

/* Módulo completamente terminado */
.course-content-section #content
.accordion-content-wrapper
.accordion-row.course-completion-chapter.is-completed {
    background: light-dark(
        color-mix(
            in srgb,
            var(--theme-completed, #006B3D) 24%,
            transparent
        ),
        color-mix(
            in srgb,
            var(--theme-completed-surface, #14251D) 82%,
            var(--theme-surface, #191c22)
        )
    ) !important;

    border-color: light-dark(
        color-mix(
            in srgb,
            var(--theme-completed, #006B3D) 42%,
            var(--theme-border, #c5a4ae)
        ),
        color-mix(
            in srgb,
            var(--theme-completed, #006B3D) 34%,
            var(--theme-border, #303640)
        )
    ) !important;
}

/* Icono del módulo terminado */
.course-content-section #content
.course-completion-chapter.is-completed
.course-completion-chapter-status-icon {
    background: var(
        --theme-completed-strong,
        #007A45
    ) !important;

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

.course-content-section #content
.course-completion-chapter.is-completed
.course-completion-chapter-status-icon svg {
    color: var(
        --theme-accent-contrast,
        #ffffff
    ) !important;

    stroke: currentColor !important;
    stroke-width: 3 !important;
}

/*
 * ==========================================================
 * INSTITUTE — COURSE DETAIL / MOBILE PRIMARY ACTION V6
 *
 * Composición compacta horizontal:
 * precio a la izquierda + CTA a la derecha.
 * Solo móvil. Escritorio permanece intacto.
 * ==========================================================
 */

.course-mobile-primary-card-slot {
    width: 100%;
}

@media (max-width: 991.98px) {

    .course-mobile-primary-card-slot.course-content-sidebar {
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /*
     * La imagen comercial secundaria no participa en móvil.
     */
    .course-mobile-primary-card-slot
    .course-primary-action-block
    > .course-img {
        display: none !important;
    }

    .course-mobile-primary-card-slot
    > .course-primary-action-block {
        width: 100%;
        overflow: visible;
        background: transparent;
    }

    /*
     * Pequeña tarjeta comercial entre hero y tabs.
     */
    .course-mobile-primary-card-slot
    .course-primary-action-body {
        margin: 0 16px;
        padding: 12px 14px !important;

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

        border-radius: 12px;

        background: color-mix(
            in srgb,
            var(--theme-glass-surface-override, transparent) 62%,
            transparent
        );
    }

    /*
     * Precio y acciones comerciales comparten una fila.
     * Los inputs hidden no generan celdas visuales.
     */
    .course-mobile-primary-card-slot
    .course-primary-action-body
    form {
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        column-gap: 14px;
        align-items: center;
    }

    /*
     * Tickets, si existen, conservan ancho completo.
     */
    .course-mobile-primary-card-slot
    .course-primary-action-body
    form > .form-check {
        grid-column: 1 / -1;
    }

    /*
     * Precio: columna izquierda.
     */
    .course-mobile-primary-card-slot
    #priceBox {
        grid-column: 1;
        margin-top: 0 !important;
        justify-content: flex-start !important;
        padding-left: 4px;
    }

    /*
     * Cursos gratuitos: el texto "Gratis" ocupa
     * igualmente la columna izquierda.
     */
    .course-mobile-primary-card-slot
    .course-primary-action-body
    form > .d-flex.align-items-center.justify-content-center.mt-20:not(.flex-column) {
        grid-column: 1;
        margin-top: 0 !important;
        justify-content: flex-start !important;
        padding-left: 4px;
    }

    .course-mobile-primary-card-slot
    #priceBox .text-center {
        text-align: left !important;
    }

    .course-mobile-primary-card-slot
    #realPrice,
    .course-mobile-primary-card-slot
    #priceWithDiscount {
        font-size: 20px !important;
        line-height: 1.15;
        font-weight: 700;
        white-space: nowrap;
    }

    /*
     * Acciones: columna derecha.
     */
    .course-mobile-primary-card-slot
    form > .mt-20.d-flex.flex-column {
        grid-column: 2;
        margin-top: 0 !important;
        align-items: flex-end;
        justify-content: center;
        min-width: 0;
    }

    /*
     * CTA compacto.
     */
    .course-mobile-primary-card-slot
    .course-primary-action-body
    .btn.btn-primary {
        width: 100%;
        max-width: 165px;
        min-height: 38px;
        padding: 8px 12px;
        font-size: 12px;
        line-height: 1.2;
    }

    /*
     * Las pestañas quedan próximas a la tarjeta,
     * pero sin pegarse a ella.
     */
    .course-mobile-primary-card-slot + .mt-35 {
        margin-top: 6px !important;
    }
}

/*
 * ==========================================================
 * INSTITUTE — COURSE DETAIL / MOBILE HERO FLOW V8
 *
 * Rocket LMS desplaza course-content-section hacia arriba
 * para superponer los metadatos sobre la portada.
 *
 * Hacemos que course-body-on-cover reserve exactamente esa
 * profundidad para que CTA, tabs y contenido comiencen
 * DESPUES del hero y nunca dentro de él.
 *
 * También reservamos desde el primer render la altura del
 * CTA para evitar layout shift cuando JS mueve el bloque.
 * ==========================================================
 */

@media (max-width: 991.98px) {

    /*
     * Estado base de Rocket:
     * course-content-section top: -250px.
     */
    .course-content-section
    .course-body-on-cover {
        min-height: 250px;
    }

    /*
     * Rocket reduce el solapamiento a 215px en móvil
     * para course/text_lesson sin progress bar.
     */
    .course-content-section:not(.has-progress-bar).course
    .course-body-on-cover,
    .course-content-section:not(.has-progress-bar).text_lesson
    .course-body-on-cover {
        min-height: 215px;
    }

    /*
     * El slot comienza ya fuera del hero.
     * Su altura queda reservada antes de que cargue JS.
     *
     * 16 top + tarjeta (~64) + 10 bottom = ~90px.
     */
    .course-mobile-primary-card-slot.course-content-sidebar {
        min-height: 90px;
        padding-top: 16px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }
}

/*
 * ==========================================================
 * COURSE COMPLETED — CONTENT CONTRAST
 * ==========================================================
 * El fondo comunica el estado completado.
 * El texto sigue el esquema cromático del tema.
 */
.course-content-section
#content
.course-completion-item.is-completed
.panel-collapse {
    color: var(--theme-text, #f4f5f7) !important;
}

.course-content-section
#content
.course-completion-item.is-completed
.panel-collapse p,
.course-content-section
#content
.course-completion-item.is-completed
.panel-collapse label {
    color: var(--theme-text, #f4f5f7) !important;
}

.course-content-section
#content
.course-completion-item.is-completed
.panel-collapse .text-gray,
.course-content-section
#content
.course-completion-item.is-completed
.panel-collapse .text-gray span {
    color: var(--theme-text-muted, #aeb6c2) !important;
}

.course-content-section
#content
.course-completion-item.is-completed
.panel-collapse svg {
    color: currentColor !important;
    stroke: currentColor !important;
}