/* ==========================================================================
   TutorLMS Internal Redesign (SBC Premium Aesthetic)
   ========================================================================== */

/* Variables Corporativas y de Rediseño */
:root {
    --sbc-bg-main: #f8fafc;
    --sbc-card-bg: #ffffff;
    --sbc-blue-dark: #0f172a;
    --sbc-blue-primary: #2563eb;
    --sbc-blue-light: #eff6ff;
    --sbc-border: #e2e8f0;
    --sbc-text-dark: #1e293b;
    --sbc-text-muted: #64748b;
    --sbc-radius-lg: 16px;
    --sbc-radius-md: 10px;
    --sbc-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --sbc-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
}

/* ==========================================================================
   1. Layout General y Fondos
   ========================================================================== */
body.single-lesson {
    background-color: var(--sbc-bg-main) !important;
    overflow-x: hidden;
}

body.single-lesson .tutor-course-single-content-wrapper {
    background-color: var(--sbc-bg-main) !important;
}

/* ==========================================================================
   2. Menú Lateral (Sidebar)
   ========================================================================== */
body.single-lesson .tutor-course-single-sidebar-wrapper.tutor-lesson-sidebar {
    background-color: var(--sbc-card-bg) !important;
    border-right: 1px solid var(--sbc-border) !important;
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.06) !important;
}

body.single-lesson .tutor-course-single-sidebar-title {
    padding: 22px 20px !important;
    background-color: var(--sbc-card-bg) !important;
    border-bottom: 1px solid var(--sbc-border) !important;
}

body.single-lesson .tutor-course-topic {
    margin: 10px 12px !important;
    border: 1px solid var(--sbc-border) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background-color: var(--sbc-card-bg) !important;
}

body.single-lesson .tutor-accordion-item-header {
    padding: 14px 16px !important;
    padding-right: 45px !important;
    /* Espacio para la flecha de expandir */
    background-color: var(--sbc-bg-main) !important;
    position: relative !important;
}

body.single-lesson .tutor-course-topic-summary {
    white-space: nowrap !important;
    /* Evita que el contador se rompa en dos líneas */
}

body.single-lesson .tutor-course-topic-item a {
    padding: 12px 14px !important;
    border-radius: var(--sbc-radius-md) !important;
    margin: 4px 10px !important;
}

body.single-lesson .tutor-course-topic-item.is-active a {
    background-color: var(--sbc-blue-light) !important;
    color: var(--sbc-text-dark) !important;
}

body.single-lesson .tutor-course-topic-item.is-active .tutor-course-topic-item-title,
body.single-lesson .tutor-course-topic-item.is-active .tutor-course-topic-item-duration {
    color: var(--sbc-text-dark) !important;
}

body.single-lesson .tutor-course-topic-item.is-active .tutor-course-topic-item-icon {
    color: var(--sbc-blue-primary) !important;
}

/* ==========================================================================
   3. Cabecera (Top Bar)
   ========================================================================== */
body.single-lesson .tutor-course-topic-single-header.tutor-single-page-top-bar {
    background-color: var(--sbc-blue-dark) !important;
    color: var(--sbc-card-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18) !important;
}

body.single-lesson .tutor-course-topic-single-header-title {
    color: var(--sbc-card-bg) !important;
    font-weight: 700 !important;
}

body.single-lesson .tutor-course-topic-single-header.tutor-single-page-top-bar a {
    color: var(--sbc-card-bg) !important;
}

body.single-lesson .tutor-course-topic-single-header .tutor-btn {
    background-color: var(--sbc-blue-primary) !important;
    border: none !important;
    border-radius: var(--sbc-radius-md) !important;
    color: var(--sbc-card-bg) !important;
}

/* ==========================================================================
   4. Cuerpo de la Lección y Vídeo
   ========================================================================== */
body.single-lesson .tutor-course-topic-single-body {
    padding: 32px !important;
    background-color: var(--sbc-bg-main) !important;
}

body.single-lesson #tutor-single-entry-content {
    background-color: var(--sbc-card-bg);
    border-radius: var(--sbc-radius-lg);
    border: 1px solid var(--sbc-border);
    box-shadow: var(--sbc-shadow-md);
    padding: 30px;
    margin-bottom: 30px;
}

/* Vídeo Contenedor */
body.single-lesson .tutor-video-player-wrapper {
    max-width: 800px !important;
    margin: 0 auto 30px auto !important;
    background-color: var(--sbc-blue-dark) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18) !important;
}

body.single-lesson .tutor-video-player,
body.single-lesson .plyr,
body.single-lesson .plyr__video-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
}

body.single-lesson video.tutorPlayer,
body.single-lesson .plyr iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* ==========================================================================
   5. Navegación (Footer)
   ========================================================================== */
body.single-lesson .tutor-course-topic-single-footer {
    background-color: rgba(248, 250, 252, 0.95) !important;
    border-top: 1px solid var(--sbc-border) !important;
    padding: 20px 32px !important;
    flex-wrap: nowrap !important;
}

body.single-lesson .tutor-single-course-content-prev,
body.single-lesson .tutor-single-course-content-next {
    border-radius: 999px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    border: 1px solid var(--sbc-border) !important;
    background-color: var(--sbc-card-bg) !important;
    color: var(--sbc-blue-dark) !important;
    transition: all 0.2s ease !important;
}

body.single-lesson .tutor-single-course-content-prev:hover,
body.single-lesson .tutor-single-course-content-next:hover {
    background-color: var(--sbc-blue-light) !important;
    border-color: var(--sbc-blue-primary) !important;
    color: var(--sbc-blue-primary) !important;
}

/* ==========================================================================
   6. Ocultar CTA, Footer y Contact en el Player
   ========================================================================== */
body.single-lesson .cta-section,
body.single-lesson #contact.contact-section,
body.single-lesson .contact-section,
body.single-lesson footer.footer,
body.single-lesson footer {
    display: none !important;
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */
@media (max-width: 991px) {
    body.single-lesson .tutor-course-topic-single-body {
        padding: 16px !important;
    }

    body.single-lesson #tutor-single-entry-content {
        padding: 36px 10px 0;
    }
}

/* ==========================================================================
   8. Rediseño del Nav Header (Modo Inmersivo)
   ========================================================================== */
/* Ocultar la barra superior (marquee) */
body.single-lesson .top-bar {
    display: none !important;
}

/* Nav oscuro y elegante solo dentro de lecciones */
body.single-lesson .glass-nav {
    background: linear-gradient(135deg, #0f172a 0%, #111827 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.22) !important;
    top: 0 !important;
    padding: 0 !important;
    /* Si la barra bajaba por culpa del top-bar */
}

/* Ajuste del contenido del nav */
body.single-lesson .glass-nav .nav-content {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Ocultar bloque de menú de escritorio comercial */
body.single-lesson .glass-nav .desktop-menu:not(:has(#btn-inicio-login)) {
    display: none !important;
}

/* Botón de usuario en el nav: estilo claro premium */
body.single-lesson #btn-inicio-login {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 999px !important;
    padding: 0.5rem 1.25rem !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-weight: 600;
    transition: all 0.2s ease;
}

/* Color del icono y texto del botón para asegurar lectura */
body.single-lesson #btn-inicio-login i,
body.single-lesson #btn-inicio-login .user-name {
    color: #0f172a !important;
}

/* Hover del botón de usuario */
body.single-lesson #btn-inicio-login:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.28) !important;
}

/* =========================================================
   AJUSTE: CONTENIDO DE TUTORLMS DEBAJO DEL NAV FIJO
   ========================================================= */
body.single-lesson {
    --sbc-lesson-nav-height: 72px;
}

body.single-lesson .tutor-course-single-content-wrapper {
    margin-top: var(--sbc-lesson-nav-height) !important;
}

@media (max-width: 768px) {
    body.single-lesson {
        --sbc-lesson-nav-height: 64px;
    }
}

/* ==========================================================================
   9. Ajustes de Nav en Móvil para Lecciones
   ========================================================================== */
@media (max-width: 991px) {

    /* Ocultar el menú móvil y el botón hamburguesa */
    body.single-lesson #mobile-menu-btn,
    body.single-lesson #mobile-menu,
    body.single-lesson .nav-overlay {
        display: none !important;
    }

    /* Forzar la visualización del botón de usuario de escritorio en móvil */
    body.single-lesson .glass-nav .desktop-menu:has(#btn-inicio-login) {
        display: flex !important;
    }

    /* Pequeño ajuste para móviles pequeños si hace falta */
    body.single-lesson #btn-inicio-login .user-name {
        display: none;
        /* En móvil solo mostramos el icono para no saturar espacio */
    }

    body.single-lesson #btn-inicio-login {
        padding: 0.5rem 1rem !important;
    }
}

/* =========================================================
   CAMBIAR LOGO SOLO EN PÁGINAS DE LECCIÓN TUTORLMS
   ========================================================= */

body.single-lesson .site-logo img {
    content: url("../img/logo-blanco-removebg.webp");
    width: 90px;
    height: 90px;
    object-fit: contain;
}

/* =========================================================
   AJUSTE DE LA CABECERA PRINCIPAL DEL CURSO (single-courses)
   Logo centrado + botón área privada pegado a la derecha
   ========================================================= */

.sbc-course-header {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

/* Contenedor principal del header */
.sbc-course-header-inner {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    min-height: 90px;
    padding: 0 24px;
    box-sizing: border-box;

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

/* Logo + título centrados */
.sbc-course-home-link {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    z-index: 1;
}

/* Logo */
.sbc-course-logo {
    width: 70px;
    height: 70px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Título */
.sbc-course-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

/* Botón área privada pegado a la derecha */
.sbc-course-user-menu {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 2;
}

/* Botón */
.sbc-course-user-menu #btn-inicio-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 768px) {
    .sbc-course-header-inner {
        min-height: 76px;
        padding: 0 12px;
    }

    .sbc-course-home-link {
        gap: 8px;
    }

    .sbc-course-logo {
        width: 52px;
        height: 52px;
    }

    .sbc-course-title {
        font-size: 1rem;
    }

    .sbc-course-user-menu {
        right: 12px;
    }

    .sbc-course-user-menu #btn-inicio-login .user-name {
        display: none;
    }

    .sbc-course-user-menu #btn-inicio-login {
        padding: 10px 12px;
    }
}