/* ==========================================================================
   EDUPREMIUM - THEME MODERNO DE ALTO IMPACTO PARA MOODLE
   Inspirado en la estética EdTech: Púrpura Eléctrico + Oro + Glassmorphism
   ========================================================================== */

:root {
    /* Paleta de Colores Institucional Oficial */
    --color-primary: #1E40AF;
    --color-primary-dark: #1E3A8A;
    --color-accent: #DC2626;
    --color-bg-light: #F3F4F6;
    --color-surface: #FFFFFF;
    --color-dark: #111827;

    /* Dark Mode Variables */
    --color-bg-dark: #0F172A;
    --color-surface-dark: #1E293B;
    --color-text-dark: #F8FAFC;

    /* Compatibilidad Theme EduPremium */
    --ep-primary-1: #1E40AF;
    --ep-primary-2: #1E3A8A;
    --ep-primary-3: #0F172A;
    --ep-primary-grad: linear-gradient(135deg, #1E40AF 0%, #1E3A8A 50%, #0F172A 100%);
    --ep-hero-grad: linear-gradient(135deg, #0F172A 0%, #1E40AF 100%);
    --ep-gold: #DC2626;
    --ep-gold-hover: #B91C1C;
    --ep-accent: #DC2626;
    --ep-dark: #111827;
    --ep-dark-muted: #64748B;
    --ep-surface: #F3F4F6;
    --ep-card-bg: #FFFFFF;
    --ep-border: rgba(226, 232, 240, 0.85);
    --ep-radius: 20px;
    --ep-radius-pill: 9999px;
    --ep-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --ep-shadow-md: 0 12px 28px -8px rgba(30, 64, 175, 0.18), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
    --ep-shadow-hover: 0 20px 35px -10px rgba(30, 64, 175, 0.28), 0 8px 16px -4px rgba(0, 0, 0, 0.06);
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background-color: var(--ep-surface) !important;
    color: var(--ep-dark) !important;
    -webkit-font-smoothing: antialiased;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   1. NAVBAR MODERNA CON GRADIENTE VIOLETA
   ========================================================================== */
.edupremium-navbar {
    background: var(--ep-navbar-grad, var(--ep-primary-grad)) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    padding: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.edupremium-nav-container {
    max-width: 1380px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    height: 100% !important;
}

.edupremium-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.edupremium-logo-icon {
    font-size: 1.6rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.edupremium-logo-text {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #FFFFFF !important;
}

/* Base navbar text & link defaults */
.edupremium-navbar a,
.edupremium-navbar .nav-link,
.edupremium-navbar .usertext,
.edupremium-navbar .edupremium-brand,
.edupremium-navbar .edupremium-logo-text {
    color: var(--ep-navbar-text, #FFFFFF) !important;
    text-decoration: none !important;
}

/* Base dropdown menu styling for all dropdowns (Navbar, Secondary Nav, Action Menus) */
.dropdown-menu,
.edupremium-navbar .dropdown-menu,
.edupremium-secondary-bar .dropdown-menu,
.dropdownmoremenu > .dropdown-menu {
    background-color: #FFFFFF !important;
    border-radius: 14px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 14px 28px -4px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06) !important;
    padding: 8px !important;
    min-width: 220px !important;
    z-index: 1060 !important;
}

.dropdown-menu.show,
.dropdownmoremenu > .dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Links and items inside ANY dropdown menu must ALWAYS be dark and legible */
.dropdown-menu a,
.dropdown-menu .dropdown-item,
.dropdown-menu [role="menuitem"],
.dropdown-menu .menu-action-text,
.edupremium-navbar .dropdown-menu a,
.edupremium-navbar .dropdown-menu .dropdown-item,
.edupremium-navbar .dropdown-menu [role="menuitem"],
.edupremium-navbar .dropdown-menu .menu-action-text,
.edupremium-secondary-bar .dropdown-menu a,
.edupremium-secondary-bar .dropdown-menu .dropdown-item,
.edupremium-secondary-bar .dropdown-menu [role="menuitem"],
.dropdownmoremenu .dropdown-menu a,
.dropdownmoremenu .dropdown-menu .dropdown-item,
.dropdownmoremenu .dropdown-menu .nav-link,
.dropdown-menu .nav-link {
    color: #0F172A !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
}

.moremenu .dropdownmoremenu > .dropdown-menu > .dropdown-item {
    padding: 0 !important;
}
.moremenu .dropdownmoremenu > .dropdown-menu > .dropdown-item a,
.moremenu .dropdownmoremenu > .dropdown-menu > .dropdown-item .nav-link {
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* Hover and Focus states for dropdown items */
.dropdown-menu a:hover,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu a:focus,
.dropdown-menu .dropdown-item:focus,
.edupremium-navbar .dropdown-menu a:hover,
.edupremium-navbar .dropdown-menu .dropdown-item:hover,
.edupremium-navbar .dropdown-menu a:focus,
.edupremium-navbar .dropdown-menu .dropdown-item:focus,
.edupremium-secondary-bar .dropdown-menu a:hover,
.edupremium-secondary-bar .dropdown-menu .dropdown-item:hover,
.dropdownmoremenu .dropdown-menu a:hover,
.dropdownmoremenu .dropdown-menu .dropdown-item:hover {
    color: #4A00E0 !important;
    background-color: #F3E8FF !important;
}

/* Active item inside dropdown */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item[aria-current="true"],
.edupremium-navbar .dropdown-menu .dropdown-item.active,
.edupremium-secondary-bar .dropdown-menu .dropdown-item.active {
    background: linear-gradient(135deg, #4A00E0 0%, #8E2DE2 100%) !important;
    color: #FFFFFF !important;
}
.dropdown-menu .dropdown-item.active *,
.edupremium-navbar .dropdown-menu .dropdown-item.active * {
    color: #FFFFFF !important;
}

/* ==========================================================================
   2. HERO BANNER PRINCIPAL (IDÉNTICO A LA IMAGEN)
   ========================================================================== */
.edupremium-hero {
    background: var(--ep-hero-grad, var(--ep-primary-grad)) !important;
    color: #FFFFFF !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 65px 24px !important;
    box-shadow: 0 20px 40px -15px rgba(74, 0, 224, 0.35) !important;
    margin-bottom: 30px !important;
}

.edupremium-hero-course {
    padding: 40px 24px !important;
}

.edupremium-hero::before {
    content: '' !important;
    position: absolute !important;
    top: -80px !important;
    right: -80px !important;
    width: 380px !important;
    height: 380px !important;
    background: radial-gradient(circle, rgba(255, 210, 0, 0.25) 0%, rgba(255, 255, 255, 0) 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.edupremium-hero-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    position: relative;
    z-index: 2;
}

.edupremium-hero-copy {
    max-width: 640px;
}

.edupremium-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(10px) !important;
    padding: 6px 16px !important;
    border-radius: var(--ep-radius-pill) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #FFFFFF !important;
    margin-bottom: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.edupremium-hero-title {
    font-size: 3.1rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 16px 0 !important;
    color: #FFFFFF !important;
}

.edupremium-hero-subtitle {
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 0 32px 0 !important;
}

.edupremium-hero-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

/* Botón Dorado tipo píldora */
.edupremium-btn-gold {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background-color: var(--ep-gold) !important;
    color: #1E1B4B !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    padding: 14px 34px !important;
    border-radius: var(--ep-radius-pill) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.edupremium-btn-gold:hover {
    background-color: var(--ep-gold-hover) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 14px 28px rgba(255, 210, 0, 0.45) !important;
    color: #0F0E26 !important;
}

.edupremium-btn-glass {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(10px) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 14px 28px !important;
    border-radius: var(--ep-radius-pill) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    transition: all 0.25s ease !important;
}

.edupremium-btn-glass:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    transform: translateY(-2px) !important;
    color: #FFFFFF !important;
}

.edupremium-btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 13px 26px !important;
    border-radius: var(--ep-radius-pill) !important;
    border: 2px solid rgba(255, 255, 255, 0.75) !important;
    transition: all 0.25s ease !important;
}

.edupremium-btn-outline:hover {
    background: #FFFFFF !important;
    color: #1E1B4B !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.25) !important;
}

/* Ilustración Flat del Hero */
.edupremium-hero-visual {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.edupremium-art-card {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(14px) !important;
    border-radius: 24px !important;
    padding: 24px !important;
    width: 320px !important;
    text-align: center !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.edupremium-art-screen {
    background-color: #181135;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 16px !important;
    padding: 30px 15px !important;
    margin-bottom: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 140px !important;
}

.edupremium-play-pulse {
    display: none !important;
}

.edupremium-art-title {
    font-weight: 800 !important;
    font-size: 1rem !important;
    color: #FFFFFF !important;
}

.edupremium-art-desc {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-top: 4px !important;
}

/* ==========================================================================
   3. BARRA DE NAVEGACIÓN RÁPIDA (4 FEATURES)
   ========================================================================== */
.edupremium-quicknav-wrap {
    max-width: 1280px;
    margin: 0 auto 10px auto;
    padding: 0 24px;
    position: relative;
    z-index: 10;
}

.edupremium-quicknav-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

@media (max-width: 768px) {
    .edupremium-quicknav-grid {
        grid-template-columns: 1fr !important;
    }
}

.edupremium-quicknav-card {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 22px !important;
    background: var(--ep-card-bg) !important;
    border-radius: 16px !important;
    border: 2px solid transparent !important;
    box-shadow: var(--ep-shadow-sm) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    text-align: left !important;
    width: 100% !important;
    outline: none !important;
}

.edupremium-quicknav-card:hover {
    transform: translateY(-5px) !important;
    border-color: #8E2DE2 !important;
    box-shadow: var(--ep-shadow-hover) !important;
}

.edupremium-quicknav-card.active {
    border-color: #4A00E0 !important;
    box-shadow: 0 10px 25px -5px rgba(74, 0, 224, 0.22) !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%) !important;
}

.edupremium-quicknav-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: #F3E8FF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.4rem !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease !important;
}

.edupremium-quicknav-card.active .edupremium-quicknav-icon {
    background: #4A00E0 !important;
    color: #FFFFFF !important;
}

.edupremium-quicknav-card h4 {
    margin: 0 0 4px 0 !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--ep-dark) !important;
}

.edupremium-quicknav-card.active h4 {
    color: #4A00E0 !important;
}

.edupremium-quicknav-card p {
    margin: 0 !important;
    font-size: 0.85rem !important;
    color: var(--ep-dark-muted) !important;
}

/* ==========================================================================
   4. SECCIÓN Y CUADRÍCULA DE CURSOS DISPONIBLES (ESTILO 3D EDTECH)
   ========================================================================== */
#frontpage-available-course-list h2 {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    color: #1E1B4B !important;
    margin: 45px 0 25px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

#frontpage-available-course-list h2::before {
    content: '🎓';
    font-size: 1.8rem;
}

/* Contenedor de la lista de cursos en Portada */
#frontpage-course-list,
#frontpage-available-course-list {
    display: block !important;
    width: 100% !important;
    margin-bottom: 40px !important;
}

#frontpage-course-list h2,
#frontpage-available-course-list h2 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 24px 0 !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
}

/* Grid exacta de 3 cursos por fila en desktop */
.courses,
.courses.category-browse,
.course_category_tree .courses,
.courses.frontpage-course-list-all,
.courses.frontpage-course-list-enrolled,
#frontpage-available-course-list .courses,
#frontpage-course-list .courses,
.course-list,
.block-myoverview .card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    margin-bottom: 40px !important;
    box-sizing: border-box !important;
}

@media (max-width: 991px) {
    .courses,
    .courses.category-browse,
    .course_category_tree .courses,
    .courses.frontpage-course-list-all,
    .courses.frontpage-course-list-enrolled,
    #frontpage-available-course-list .courses,
    #frontpage-course-list .courses,
    .course-list,
    .block-myoverview .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .courses,
    .courses.category-browse,
    .course_category_tree .courses,
    .courses.frontpage-course-list-all,
    .courses.frontpage-course-list-enrolled,
    #frontpage-available-course-list .courses,
    #frontpage-course-list .courses,
    .course-list,
    .block-myoverview .card-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Paginación y botón "Todos los cursos" centrado debajo de la grilla */
.courses .paging,
.courses .paging.paging-morelink,
.frontpage-course-list-enrolled .paging,
.frontpage-course-list-all .paging {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    text-align: center !important;
    margin: 20px auto 0 auto !important;
    display: flex !important;
    justify-content: center !important;
}

.courses .paging a,
.courses .paging .btn,
.courses .paging.paging-morelink a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #4A00E0 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 12px 28px !important;
    border-radius: 9999px !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(74, 0, 224, 0.25) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.courses .paging a:hover,
.courses .paging .btn:hover {
    background: #6800E8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(74, 0, 224, 0.35) !important;
    color: #FFFFFF !important;
}

/* Corrección de cuadrícula para Vista general del curso (block_myoverview) */
.block-myoverview .card-grid.row,
.block-myoverview [data-region="card-deck"].row,
[data-region="card-deck"].row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin: 0 !important;
    width: 100% !important;
}

@media (max-width: 991px) {
    .block-myoverview .card-grid.row,
    .block-myoverview [data-region="card-deck"].row,
    [data-region="card-deck"].row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .block-myoverview .card-grid.row,
    .block-myoverview [data-region="card-deck"].row,
    [data-region="card-deck"].row {
        grid-template-columns: 1fr !important;
    }
}

/* Neutralizar el ancho porcentual forzado por Bootstrap (.row-cols-lg-3 > .col { width: 33.33% }) dentro de cada celda grid */
.block-myoverview .card-grid.row > .col,
.block-myoverview [data-region="card-deck"] > .col,
[data-region="card-deck"].row > .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
}

/* Tarjeta de curso en bloque myoverview (course-card) */
.block-myoverview .card.course-card,
[data-region="card-deck"] .card.course-card,
.block-myoverview .card.dashboard-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 18px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.block-myoverview .card.course-card:hover,
[data-region="card-deck"] .card.course-card:hover,
.block-myoverview .card.dashboard-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 28px -6px rgba(74, 0, 224, 0.18) !important;
    border-color: #8E2DE2 !important;
}

.block-myoverview .card.course-card .card-img-top,
[data-region="card-deck"] .card.course-card .card-img-top {
    height: 140px !important;
    min-height: 140px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 18px 18px 0 0 !important;
}

.block-myoverview .card.course-card .card-body,
[data-region="card-deck"] .card.course-card .card-body {
    padding: 16px 18px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.block-myoverview .card.course-card .coursename,
[data-region="card-deck"] .card.course-card .coursename {
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    color: #1E1B4B !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;
}

.block-myoverview .card.course-card .coursename:hover,
[data-region="card-deck"] .card.course-card .coursename:hover {
    color: #6800E8 !important;
}

.block-myoverview .card.course-card .text-muted,
[data-region="card-deck"] .card.course-card .text-muted {
    font-size: 0.82rem !important;
    color: #64748B !important;
}

.block-myoverview .card.course-card .card-footer,
[data-region="card-deck"] .card.course-card .card-footer {
    padding: 10px 18px !important;
    background: #ffffff !important;
    border-top: 1px solid #F1F5F9 !important;
}

/* Ocultar línea de tiempo para estudiantes en el Tablero */
body.user-student .block_timeline,
body.user-student [data-block="timeline"],
body.user-student .block-timeline,
body.edupremium-student-mode .block_timeline,
body.edupremium-student-mode [data-block="timeline"],
.edupremium-student-mode .block_timeline,
.edupremium-student-mode [data-block="timeline"],
.edupremium-student-mode .block-timeline {
    display: none !important;
}

/* ==========================================================================
   ELIMINAR CALENDARIO Y ELEMENTOS ACCEDIDOS RECIENTEMENTE EN MIS CURSOS
   ========================================================================== */
#ep-tab-pane-courses .block_calendar_month,
#ep-tab-pane-courses [data-block="calendar_month"],
#ep-tab-pane-courses .block_recentlyaccesseditems,
#ep-tab-pane-courses [data-block="recentlyaccesseditems"],
#ep-tab-pane-courses .block_recentlyaccessedcourses,
#ep-tab-pane-courses [data-block="recentlyaccessedcourses"],
.pagelayout-mydashboard #ep-tab-pane-courses .block_calendar_month,
.pagelayout-mydashboard #ep-tab-pane-courses [data-block="calendar_month"],
.pagelayout-mydashboard #ep-tab-pane-courses .block_recentlyaccesseditems,
.pagelayout-mydashboard #ep-tab-pane-courses [data-block="recentlyaccesseditems"],
.pagelayout-mydashboard #ep-tab-pane-courses .block_recentlyaccessedcourses,
.pagelayout-mydashboard #ep-tab-pane-courses [data-block="recentlyaccessedcourses"],
.pagelayout-mycourses .block_calendar_month,
.pagelayout-mycourses [data-block="calendar_month"],
.pagelayout-mycourses .block_recentlyaccesseditems,
.pagelayout-mycourses [data-block="recentlyaccesseditems"],
.pagelayout-mycourses .block_recentlyaccessedcourses,
.pagelayout-mycourses [data-block="recentlyaccessedcourses"] {
    display: none !important;
}

/* Ocultar barra lateral en Mis Cursos y expandir la cuadrícula de cursos al 100% */
body:not(.editing) #ep-tab-pane-courses #block-region-side-post,
body:not(.editing) #ep-tab-pane-courses .edupremium-sidebar-right,
body.user-student #ep-tab-pane-courses #block-region-side-post,
body.user-student #ep-tab-pane-courses .edupremium-sidebar-right,
.pagelayout-mycourses #block-region-side-post,
.pagelayout-mycourses .edupremium-sidebar-right {
    display: none !important;
}

#ep-tab-pane-courses .edupremium-content-row,
.pagelayout-mydashboard #ep-tab-pane-courses .edupremium-content-row,
.pagelayout-mycourses .edupremium-content-row {
    display: block !important;
    width: 100% !important;
}

#ep-tab-pane-courses .edupremium-main-area,
.pagelayout-mydashboard #ep-tab-pane-courses .edupremium-main-area,
.pagelayout-mycourses .edupremium-main-area {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

/* Paneles de pestañas interactivas del Tablero (Mis Cursos, Calendario, Calificaciones) */
.edupremium-tab-pane {
    animation: epFadeIn 0.25s ease-in-out;
}

@keyframes epFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.edupremium-tab-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.06) !important;
    padding: 32px !important;
    margin-bottom: 30px !important;
    width: 100% !important;
}

.edupremium-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #F1F5F9;
}

.edupremium-tab-title {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #1E1B4B !important;
    margin: 0 !important;
}

.edupremium-tab-subtitle {
    color: #64748B !important;
    font-size: 0.95rem !important;
    margin: 4px 0 0 0 !important;
}

/* Estilo para la tabla de calificaciones */
#overview-grade {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid #E2E8F0 !important;
}

#overview-grade thead th {
    background: #F8FAFC !important;
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    padding: 16px 20px !important;
    border-bottom: 2px solid #E2E8F0 !important;
}

#overview-grade tbody td {
    padding: 16px 20px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #F1F5F9 !important;
    font-size: 0.95rem !important;
    color: #1E293B !important;
}

#overview-grade tbody tr:hover td {
    background: #F5F3FF !important;
}

#overview-grade tbody td a {
    color: #4A00E0 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

#overview-grade tbody td a:hover {
    color: #6800E8 !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   DISEÑO MODERNO DE CALENDARIO (ESTILO GOOGLE CALENDAR / EDUPREMIUM)
   ========================================================================== */

/* 1. Barra de Controles y Filtros Superior */
.edupremium-calendar-embed div.header,
.calendarwrapper div.header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 0 0 18px 0 !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: transparent !important;
}

.edupremium-calendar-embed div.header .btn-outline-secondary,
.calendarwrapper div.header .btn-outline-secondary {
    border-radius: 10px !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    padding: 8px 16px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

.edupremium-calendar-embed div.header .form-select,
.calendarwrapper div.header .form-select,
.calendarwrapper div.header select.cal_courses_flt {
    border-radius: 10px !important;
    border: 1px solid #CBD5E1 !important;
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #334155 !important;
    max-width: 300px !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

.edupremium-calendar-embed div.header [data-action="new-event-button"],
.edupremium-calendar-embed div.header .btn-primary,
.calendarwrapper div.header [data-action="new-event-button"],
.calendarwrapper div.header .btn-primary {
    background: linear-gradient(135deg, #4A00E0 0%, #8E2DE2 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    padding: 10px 22px !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 12px rgba(74, 0, 224, 0.25) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.edupremium-calendar-embed div.header [data-action="new-event-button"]:hover,
.edupremium-calendar-embed div.header .btn-primary:hover,
.calendarwrapper div.header [data-action="new-event-button"]:hover,
.calendarwrapper div.header .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(74, 0, 224, 0.35) !important;
    color: #ffffff !important;
}

/* 2. Barra de Navegación de Mes (septiembre 2026) */
.edupremium-calendar-embed .calendar-controls,
.calendarwrapper .calendar-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 18px !important;
    margin-bottom: 22px !important;
    background: #F8FAFC !important;
    border-radius: 14px !important;
    border: 1px solid #E2E8F0 !important;
}

.edupremium-calendar-embed .calendar-controls .current,
.calendarwrapper .calendar-controls .current {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: #1E1B4B !important;
    margin: 0 !important;
    text-transform: capitalize !important;
    letter-spacing: -0.02em !important;
}

.edupremium-calendar-embed .calendar-controls .arrow_link,
.calendarwrapper .calendar-controls .arrow_link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 18px !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.edupremium-calendar-embed .calendar-controls .arrow_link:hover,
.calendarwrapper .calendar-controls .arrow_link:hover {
    background: #4A00E0 !important;
    border-color: #4A00E0 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(74, 0, 224, 0.25) !important;
}

.edupremium-calendar-embed .calendar-controls .hide,
.calendarwrapper .calendar-controls .hide {
    display: none !important;
}

/* 3. Cuadrícula de Tabla Mensual */
.calendarwrapper,
.edupremium-calendar-embed {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

table.calendarmonth,
.edupremium-calendar-embed table.calendarmonth,
.calendarwrapper table.calendarmonth {
    width: 100% !important;
    min-width: 680px !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03) !important;
    margin: 0 0 20px 0 !important;
}

/* Forzar despliegue de estructura de tabla estándar */
table.calendarmonth thead,
.calendarwrapper table.calendarmonth thead,
.edupremium-calendar-embed table.calendarmonth thead {
    display: table-header-group !important;
    width: 100% !important;
}

table.calendarmonth thead tr,
.calendarwrapper table.calendarmonth thead tr,
.edupremium-calendar-embed table.calendarmonth thead tr {
    display: table-row !important;
    width: 100% !important;
}

/* Cabecera de días horizontal (Lun, Mar, Mié, Jue, Vie, Sáb, Dom) */
table.calendarmonth thead th,
.edupremium-calendar-embed table.calendarmonth thead th,
.calendarwrapper table.calendarmonth thead th,
.calendarwrapper table.calendarmonth th.header {
    display: table-cell !important;
    width: 14.285% !important;
    background: #F8FAFC !important;
    color: #475569 !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 14px 10px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border-bottom: 2px solid #E2E8F0 !important;
    border-right: 1px solid #E2E8F0 !important;
    margin: 0 !important;
}

table.calendarmonth thead th:last-child,
.edupremium-calendar-embed table.calendarmonth thead th:last-child,
.calendarwrapper table.calendarmonth thead th:last-child {
    border-right: none !important;
}

/* Celdas de días */
table.calendarmonth tbody td,
.edupremium-calendar-embed table.calendarmonth tbody td {
    border-bottom: 1px solid #E2E8F0 !important;
    border-right: 1px solid #E2E8F0 !important;
    vertical-align: top !important;
    padding: 10px 12px !important;
    height: 105px !important;
    min-height: 105px !important;
    width: 14.285% !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    background: #ffffff;
    box-sizing: border-box !important;
    position: relative !important;
}

table.calendarmonth tbody tr:last-child td,
.edupremium-calendar-embed table.calendarmonth tbody tr:last-child td {
    border-bottom: none !important;
}

table.calendarmonth tbody td:last-child,
.edupremium-calendar-embed table.calendarmonth tbody td:last-child {
    border-right: none !important;
}

/* Días vacíos (fuera del mes) */
table.calendarmonth tbody td.dayblank,
.edupremium-calendar-embed table.calendarmonth tbody td.dayblank {
    background: #F8FAFC !important;
}

/* Días de fin de semana */
table.calendarmonth tbody td.weekend,
.edupremium-calendar-embed table.calendarmonth tbody td.weekend {
    background: #FAFBFC !important;
}

/* Hover en días interactivos */
table.calendarmonth tbody td.day.clickable:hover,
.edupremium-calendar-embed table.calendarmonth tbody td.day.clickable:hover {
    background: #F5F3FF !important;
    cursor: pointer !important;
}

/* Día actual (Hoy) */
table.calendarmonth tbody td.today,
.edupremium-calendar-embed table.calendarmonth tbody td.today {
    background: #FAF5FF !important;
    box-shadow: inset 0 0 0 2px #C4B5FD !important;
}

table.calendarmonth tbody td.today .day-number-circle,
.edupremium-calendar-embed table.calendarmonth tbody td.today .day-number-circle {
    background: #4A00E0 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(74, 0, 224, 0.4) !important;
}

/* Círculo con el número del día */
.day-number-circle,
.edupremium-calendar-embed .day-number-circle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    transition: all 0.2s ease !important;
    margin-bottom: 6px !important;
}

table.calendarmonth td.day.clickable:hover .day-number-circle,
.edupremium-calendar-embed td.day.clickable:hover .day-number-circle {
    background: #E0E7FF !important;
    color: #4A00E0 !important;
}

.edupremium-calendar-embed .aalink.day,
table.calendarmonth .aalink.day {
    text-decoration: none !important;
    color: inherit !important;
}

/* 4. Badges y Etiquetas de Eventos Modernos (Actividades de Alumnos y Entregas) */
.edupremium-calendar-embed [data-region="day-content"] ul,
table.calendarmonth [data-region="day-content"] ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 5px 0 0 0 !important;
}

.edupremium-calendar-embed [data-region="day-content"] li[data-region="event-item"],
table.calendarmonth [data-region="day-content"] li[data-region="event-item"] {
    margin-bottom: 5px !important;
    list-style: none !important;
}

.edupremium-calendar-embed [data-region="day-content"] li[data-region="event-item"] a,
table.calendarmonth [data-region="day-content"] li[data-region="event-item"] a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #EFF6FF !important;
    color: #1E40AF !important;
    padding: 5px 9px !important;
    border-radius: 8px !important;
    border: 1px solid #BFDBFE !important;
    border-left: 4px solid #1E40AF !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: left !important;
    box-shadow: 0 1px 3px rgba(30, 64, 175, 0.08) !important;
}

.edupremium-calendar-embed [data-region="day-content"] li[data-region="event-item"] a:hover,
table.calendarmonth [data-region="day-content"] li[data-region="event-item"] a:hover {
    background: #DBEAFE !important;
    color: #1E3A8A !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(30, 64, 175, 0.22) !important;
}

/* Icono y estilo específico para actividad personal del alumno */
.edupremium-calendar-embed [data-region="day-content"] li[data-event-eventtype="user"] a,
.edupremium-calendar-embed [data-region="day-content"] li[data-eventtype-user="1"] a,
table.calendarmonth [data-region="day-content"] li[data-event-eventtype="user"] a,
table.calendarmonth [data-region="day-content"] li[data-eventtype-user="1"] a {
    background: #EFF6FF !important;
    border-color: #BFDBFE !important;
    border-left-color: #1E40AF !important;
    color: #1E40AF !important;
}
.edupremium-calendar-embed [data-region="day-content"] li[data-event-eventtype="user"] a::before,
.edupremium-calendar-embed [data-region="day-content"] li[data-eventtype-user="1"] a::before,
table.calendarmonth [data-region="day-content"] li[data-event-eventtype="user"] a::before,
table.calendarmonth [data-region="day-content"] li[data-eventtype-user="1"] a::before {
    content: '📌' !important;
    font-size: 11px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* Icono y estilo para fechas límite de tareas (due) */
.edupremium-calendar-embed [data-region="day-content"] li[data-event-eventtype="due"] a,
.edupremium-calendar-embed [data-region="day-content"] li[data-eventtype-due="1"] a,
table.calendarmonth [data-region="day-content"] li[data-event-eventtype="due"] a,
table.calendarmonth [data-region="day-content"] li[data-eventtype-due="1"] a {
    background: #FFFBEB !important;
    border-color: #FDE68A !important;
    border-left-color: #F59E0B !important;
    color: #92400E !important;
}
.edupremium-calendar-embed [data-region="day-content"] li[data-event-eventtype="due"] a::before,
.edupremium-calendar-embed [data-region="day-content"] li[data-eventtype-due="1"] a::before,
table.calendarmonth [data-region="day-content"] li[data-event-eventtype="due"] a::before,
table.calendarmonth [data-region="day-content"] li[data-eventtype-due="1"] a::before {
    content: '📝' !important;
    font-size: 11px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* Icono y estilo para cierre de cuestionarios y exámenes (close) */
.edupremium-calendar-embed [data-region="day-content"] li[data-event-eventtype="close"] a,
.edupremium-calendar-embed [data-region="day-content"] li[data-eventtype-close="1"] a,
table.calendarmonth [data-region="day-content"] li[data-event-eventtype="close"] a,
table.calendarmonth [data-region="day-content"] li[data-eventtype-close="1"] a {
    background: #FEF2F2 !important;
    border-color: #FECACA !important;
    border-left-color: #EF4444 !important;
    color: #991B1B !important;
}
.edupremium-calendar-embed [data-region="day-content"] li[data-event-eventtype="close"] a::before,
.edupremium-calendar-embed [data-region="day-content"] li[data-eventtype-close="1"] a::before,
table.calendarmonth [data-region="day-content"] li[data-event-eventtype="close"] a::before,
table.calendarmonth [data-region="day-content"] li[data-eventtype-close="1"] a::before {
    content: '✍️' !important;
    font-size: 11px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* Icono y estilo para eventos de curso (course) */
.edupremium-calendar-embed [data-region="day-content"] li[data-event-eventtype="course"] a,
.edupremium-calendar-embed [data-region="day-content"] li[data-eventtype-course="1"] a,
table.calendarmonth [data-region="day-content"] li[data-event-eventtype="course"] a,
table.calendarmonth [data-region="day-content"] li[data-eventtype-course="1"] a {
    background: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
    border-left-color: #10B981 !important;
    color: #065F46 !important;
}
.edupremium-calendar-embed [data-region="day-content"] li[data-event-eventtype="course"] a::before,
.edupremium-calendar-embed [data-region="day-content"] li[data-eventtype-course="1"] a::before,
table.calendarmonth [data-region="day-content"] li[data-event-eventtype="course"] a::before,
table.calendarmonth [data-region="day-content"] li[data-eventtype-course="1"] a::before {
    content: '📚' !important;
    font-size: 11px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* Truncamiento limpio de texto en nombres de eventos */
.edupremium-calendar-embed [data-region="day-content"] li[data-region="event-item"] a .eventname,
table.calendarmonth [data-region="day-content"] li[data-region="event-item"] a .eventname {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
    max-width: 100% !important;
}

/* Ocultar el punto viejo y borde por defecto de moodle */
.edupremium-calendar-embed .calendar-circle,
table.calendarmonth .calendar-circle {
    display: none !important;
}

/* Tarjeta individual de curso (Coursebox) */
.coursebox {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01) !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.coursebox:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 35px -10px rgba(74, 0, 224, 0.22), 0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
    border-color: #8E2DE2 !important;
}

/* Cabecera superior decorativa para cursos SIN imagen */
.coursebox::before {
    content: '' !important;
    display: block !important;
    height: 160px !important;
    min-height: 160px !important;
    background: linear-gradient(135deg, #4A00E0 0%, #8E2DE2 100%) !important;
    width: 100% !important;
    order: -2 !important;
}

.coursebox.even::before {
    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%) !important;
}

.coursebox:nth-child(3n)::before {
    background: linear-gradient(135deg, #059669 0%, #0D9488 100%) !important;
}

.coursebox:nth-child(4n)::before {
    background: linear-gradient(135deg, #D97706 0%, #EA580C 100%) !important;
}

/* Si el curso tiene imagen cargada, ocultar el fondo falso ::before */
.coursebox:has(.courseimage)::before,
.coursebox.has-courseimage::before {
    display: none !important;
}

/* Para cursos CON imagen: elevar .courseimage a la cabecera superior */
.coursebox:has(.courseimage) .content,
.coursebox.has-courseimage .content,
.coursebox:has(.courseimage) .content .d-flex,
.coursebox.has-courseimage .content .d-flex {
    display: contents !important;
}

.coursebox .courseimage {
    order: -2 !important;
    width: 100% !important;
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #181135 !important;
}

.coursebox .courseimage img {
    width: 100% !important;
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    object-fit: cover !important;
    border-radius: 20px 20px 0 0 !important;
    display: block !important;
    margin: 0 !important;
}

.coursebox .info {
    padding: 20px 22px 10px 22px !important;
    background: #ffffff !important;
    order: 0 !important;
}

.coursebox .coursename {
    margin: 0 0 10px 0 !important;
}

.coursebox .coursename a {
    color: #1E1B4B !important;
    font-weight: 800 !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    display: block !important;
    transition: color 0.2s ease !important;
}

.coursebox .coursename a:hover {
    color: #6800E8 !important;
}

.coursebox .content {
    padding: 0 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    order: 1 !important;
}

.coursebox .content .d-flex {
    flex-grow: 1 !important;
    width: 100% !important;
    margin: 0 !important;
}

.coursebox .content .flex-grow-1 {
    padding: 0 22px 24px 22px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    order: 1 !important;
}

.coursebox .summary {
    color: #64748B !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

.coursebox .teachers {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.coursebox .teachers li {
    font-size: 0.85rem !important;
    color: #475569 !important;
    margin-bottom: 4px !important;
}

.coursebox .teachers a {
    color: #6800E8 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   5. ESTRUCTURA GENERAL Y BLOQUES
   ========================================================================== */
.edupremium-page-body {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 24px 30px 24px;
}

.edupremium-content-row {
    display: flex;
    gap: 30px;
}

.edupremium-sidebar {
    width: 320px;
    flex-shrink: 0;
}

.edupremium-main-area {
    flex: 1;
    min-width: 0;
}

.card,
.block,
.activity-item {
    background: var(--ep-card-bg) !important;
    border: 1px solid var(--ep-border) !important;
    border-radius: var(--ep-radius) !important;
    box-shadow: var(--ep-shadow-sm) !important;
    transition: all 0.25s ease !important;
    margin-bottom: 24px !important;
    overflow: visible !important;
}

.card:hover,
.block:hover,
.activity-item:hover {
    box-shadow: var(--ep-shadow-md) !important;
    border-color: rgba(142, 45, 226, 0.4) !important;
}

.block .card-title,
.block h5 {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--ep-dark) !important;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ep-border);
    margin: 0;
}

.btn-primary,
#page-login-index .btn-primary {
    background-color: var(--ep-gold) !important;
    border-color: var(--ep-gold) !important;
    color: #1E1B4B !important;
    font-weight: 800 !important;
    border-radius: var(--ep-radius-pill) !important;
    padding: 10px 24px !important;
    box-shadow: 0 4px 12px rgba(255, 210, 0, 0.3) !important;
    transition: all 0.25s ease !important;
}

.btn-primary:hover,
#page-login-index .btn-primary:hover {
    background-color: var(--ep-gold-hover) !important;
    border-color: var(--ep-gold-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(255, 210, 0, 0.45) !important;
}

.edupremium-footer {
    background: #FFFFFF;
    border-top: 1px solid var(--ep-border);
    padding: 30px 24px;
    margin-top: 60px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--ep-dark-muted);
}

@media (max-width: 991px) {
    .edupremium-content-row {
        flex-direction: column;
    }
    .edupremium-sidebar {
        width: 100%;
    }
    .edupremium-hero {
        padding: 45px 20px !important;
        text-align: center !important;
    }
    .edupremium-hero-container {
        flex-direction: column !important;
    }
    .edupremium-hero-title {
        font-size: 2.2rem !important;
    }
    .edupremium-hero-actions {
        justify-content: center !important;
    }
}

/* ==========================================================================
   BARRA DE CONFIANZA (TRUST STATS) & FILTROS (EDTECH BEST PRACTICES)
   ========================================================================== */
.edupremium-trust-bar {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--ep-border) !important;
    padding: 20px 24px !important;
    box-shadow: var(--ep-shadow-sm) !important;
}

.edupremium-trust-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}

.edupremium-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.edupremium-trust-num {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--ep-primary-1);
    letter-spacing: -0.02em;
}

.edupremium-trust-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ep-dark-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.edupremium-trust-divider {
    width: 1px;
    height: 36px;
    background: #E2E8F0;
}

/* FILTROS DE CATEGORÍAS */
.edupremium-filters-container {
    max-width: 1280px;
    margin: 30px auto 10px auto;
    padding: 0 24px;
}

.edupremium-filters-scroll {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 2px 14px 2px;
    scrollbar-width: none;
}

.edupremium-filter-chip {
    padding: 8px 18px !important;
    border-radius: var(--ep-radius-pill) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    background: #FFFFFF !important;
    color: var(--ep-dark) !important;
    border: 1px solid var(--ep-border) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    box-shadow: var(--ep-shadow-sm) !important;
}

.edupremium-filter-chip:hover {
    border-color: var(--ep-primary-2) !important;
    color: var(--ep-primary-1) !important;
    text-decoration: none !important;
    transform: translateY(-2px);
}

.edupremium-filter-chip.active {
    background: var(--ep-primary-grad) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(74, 0, 224, 0.3) !important;
}

.edupremium-chip-count {
    background: #F1F5F9;
    color: #64748B;
    padding: 2px 8px;
    border-radius: var(--ep-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    transition: all 0.2s ease;
}

.edupremium-filter-chip:hover .edupremium-chip-count {
    background: #DDD6FE;
    color: var(--ep-primary-1);
}

.edupremium-filter-chip.active .edupremium-chip-count {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

/* ==========================================================================
   VISTA INTERNA DE CURSO (COURSE ACCORDIONS & ACTIVITIES)
   ========================================================================== */
.path-course-view .course-content ul.topics,
.path-course-view .course-content ul.weeks {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.path-course-view .course-section {
    background: #FFFFFF !important;
    border: 1px solid var(--ep-border) !important;
    border-radius: var(--ep-radius) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: var(--ep-shadow-sm) !important;
    transition: all 0.25s ease !important;
}

.path-course-view .course-section:hover {
    box-shadow: var(--ep-shadow-md) !important;
    border-color: rgba(74, 0, 224, 0.3) !important;
}

.path-course-view .course-section-header {
    border-bottom: 1px solid #F1F5F9 !important;
    padding-bottom: 14px !important;
    margin-bottom: 18px !important;
}

.path-course-view .sectionname {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: var(--ep-dark) !important;
    letter-spacing: -0.02em !important;
}

.activity-item {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

.activity-item:hover {
    background: #FFFFFF !important;
    border-color: var(--ep-primary-2) !important;
    transform: translateX(4px) !important;
    box-shadow: 0 6px 15px -3px rgba(74, 0, 224, 0.12) !important;
}

/* Ocultar elementos huérfanos o inyecciones de otros temas */
#dscore-course-hero,
.dscore-course-hero,
.dscore-course-hero-img,
.dscore-course-hero-overlay,
.dscore-course-hero-text,
.dscore-course-tabs,
.dscore-app,
.dscore-site-footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* ==========================================================================
   6. LOGO PERSONALIZADO Y NAVEGACIÓN PRINCIPAL (HORIZONTALES)
   ========================================================================== */
.edupremium-nav-logo-img {
    max-height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.edupremium-primary-nav {
    display: flex !important;
    align-items: center !important;
    flex-grow: 1 !important;
    margin: 0 16px !important;
    height: 100% !important;
}

.edupremium-primary-nav .moremenu,
.edupremium-primary-nav .navigation {
    opacity: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.edupremium-primary-nav .nav,
.edupremium-primary-nav .navbar-nav,
.edupremium-primary-nav .more-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
    border: none !important;
    height: auto !important;
}

.edupremium-primary-nav .nav-item {
    display: inline-flex !important;
    align-items: center !important;
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

.edupremium-primary-nav .nav-item::marker,
.edupremium-primary-nav .nav-item::before {
    display: none !important;
    content: none !important;
}

/* Primary nav buttons: sleek translucent glass pills */
.edupremium-primary-nav .nav-link,
.edupremium-navbar .edupremium-primary-nav .nav-link,
.edupremium-primary-nav .moremenu .nav-link {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 38px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.90rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: var(--ep-radius-pill) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.edupremium-primary-nav .nav-link:hover,
.edupremium-primary-nav .moremenu .nav-link:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
    border: none !important;
    transform: translateY(-1px);
}

.edupremium-primary-nav .nav-link.active,
.edupremium-primary-nav .nav-item.active .nav-link,
.edupremium-primary-nav .moremenu .nav-link.active,
.edupremium-primary-nav .nav-link[aria-current="true"] {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.edupremium-primary-nav .nav-link::after,
.edupremium-primary-nav .moremenu .nav-link::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   7. CONTROLES DERECHOS (IDIOMA, EDICIÓN, MENÚ DE USUARIO)
   ========================================================================== */
.edupremium-nav-right {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.edupremium-nav-right,
.edupremium-nav-right ul,
.edupremium-nav-right li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.edupremium-nav-right li::marker,
.edupremium-nav-right li::before {
    display: none !important;
    content: none !important;
}

.edupremium-nav-right .nav-item,
.edupremium-nav-right li.dropdown {
    display: inline-flex !important;
    align-items: center !important;
    list-style: none !important;
    list-style-type: none !important;
    position: relative !important;
}

/* Selector de idioma tipo píldora */
.edupremium-nav-right .custom-menu,
.edupremium-nav-right li.dropdown > a.nav-link,
.edupremium-nav-right .dropdown-toggle.nav-link {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600 !important;
    font-size: 0.86rem !important;
    padding: 0 14px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 38px !important;
    border-radius: var(--ep-radius-pill) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

.edupremium-nav-right li.dropdown > a.nav-link:hover,
.edupremium-nav-right .dropdown-toggle.nav-link:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-1px);
}

/* Switch de Modo de Edición (Admin y Profesores) */
.edupremium-edit-switch-wrap {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    padding: 0 14px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    border-radius: var(--ep-radius-pill) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.edupremium-edit-switch-wrap:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
}

.edupremium-edit-switch-wrap .form-check-label {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    margin-right: 8px !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
}

.edupremium-edit-switch-wrap .form-check-input {
    cursor: pointer !important;
    width: 2.2em !important;
    height: 1.15em !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.35) !important;
    margin: 0 !important;
}

.edupremium-edit-switch-wrap .form-check-input:checked {
    background-color: var(--ep-gold) !important;
    border-color: var(--ep-gold) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231E1B4B'/%3e%3c/svg%3e") !important;
}

/* Menú de Usuario */
.edupremium-user-menu {
    display: inline-flex !important;
    align-items: center !important;
}

.edupremium-user-menu .usermenu {
    display: inline-flex !important;
    align-items: center !important;
}

.edupremium-user-menu .action-menu-trigger .dropdown a.dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 12px 0 14px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    box-sizing: border-box !important;
    border-radius: var(--ep-radius-pill) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.edupremium-user-menu .action-menu-trigger .dropdown a.dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-1px);
}

.edupremium-user-menu .userbutton {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.edupremium-user-menu .usertext {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
}

.edupremium-user-menu .userinitials {
    background: #FFFFFF !important;
    color: var(--ep-primary-1) !important;
    font-weight: 800 !important;
    font-size: 0.82rem !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

.edupremium-user-menu,
.edupremium-user-menu .usermenu,
.edupremium-user-menu .action-menu,
.edupremium-user-menu .action-menu-trigger,
.edupremium-user-menu .action-menu-trigger .dropdown {
    position: relative !important;
}

/* Contenedor del Dropdown de Usuario */
.edupremium-user-menu .dropdown-menu,
.edupremium-user-menu .dropdown-menu-end,
.edupremium-navbar .dropdown-menu-end,
.edupremium-user-menu [data-region="dropdown-menu"] {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    min-width: 195px !important;
    max-width: 220px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    background: #ffffff !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06) !important;
    padding: 5px !important;
    z-index: 9999 !important;
    animation: epFadeInMenu 0.15s ease-out !important;
}

@keyframes epFadeInMenu {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Items del menú desplegable */
.edupremium-navbar .edupremium-user-menu .dropdown-menu a.dropdown-item,
.edupremium-navbar .edupremium-user-menu .dropdown-menu .dropdown-item,
.edupremium-user-menu .dropdown-menu a.dropdown-item,
.edupremium-user-menu .dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    color: #334155 !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    margin: 1px 0 !important;
    line-height: 1.3 !important;
}

.edupremium-navbar .edupremium-user-menu .dropdown-menu a.dropdown-item:hover,
.edupremium-navbar .edupremium-user-menu .dropdown-menu .dropdown-item:hover,
.edupremium-user-menu .dropdown-menu a.dropdown-item:hover,
.edupremium-user-menu .dropdown-menu .dropdown-item:hover {
    background: #F1F5F9 !important;
    color: #4338CA !important;
    transform: none !important;
}

.edupremium-user-menu .dropdown-menu .dropdown-item > i.icon {
    display: none !important;
}

.edupremium-user-menu .dropdown-menu .menu-action-text {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
}

/* Iconos vectoriales limpios y uniformes para cada elemento */
.edupremium-user-menu .dropdown-menu .menu-action-text::before {
    content: '' !important;
    display: inline-block !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    background-color: #64748B !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    transition: background-color 0.15s ease !important;
}

.edupremium-user-menu .dropdown-menu a.dropdown-item:hover .menu-action-text::before {
    background-color: #4338CA !important;
}

/* Perfil */
.edupremium-user-menu [data-title="profile,moodle"] .menu-action-text::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

/* Calificaciones */
.edupremium-user-menu [data-title="grades,grades"] .menu-action-text::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E") !important;
}

/* Calendario */
.edupremium-user-menu [data-title="calendar,core_calendar"] .menu-action-text::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
}

/* Archivos Privados */
.edupremium-user-menu [data-title="privatefiles,moodle"] .menu-action-text::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") !important;
}

/* Preferencias */
.edupremium-user-menu [data-title="preferences,moodle"] .menu-action-text::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") !important;
}

/* Cambiar rol a... (Solo visible para Admin) */
.edupremium-user-menu [data-title="switchroleto,moodle"] .menu-action-text::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpolyline points='17 11 19 13 23 9'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpolyline points='17 11 19 13 23 9'/%3E%3C/svg%3E") !important;
}

/* Volver a mi rol normal (switchrolereturn) */
.edupremium-user-menu [data-title="switchrolereturn,moodle"] {
    background: #FEF3C7 !important;
    color: #92400E !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}
.edupremium-user-menu [data-title="switchrolereturn,moodle"] .menu-action-text::before {
    background-color: #D97706 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E") !important;
}
.edupremium-user-menu [data-title="switchrolereturn,moodle"]:hover {
    background: #FDE68A !important;
    color: #78350F !important;
}

/* Restricción estricta: Solo el admin puede ver la opción de cambiar rol */
body:not(.is-siteadmin) .edupremium-user-menu [data-title*="switchrole"],
body:not(.is-siteadmin) .edupremium-user-menu a[href*="switchrole"],
body.not-siteadmin .edupremium-user-menu [data-title*="switchrole"],
body.not-siteadmin .edupremium-user-menu a[href*="switchrole"] {
    display: none !important;
}

/* Cerrar sesión */
.edupremium-user-menu [data-title="logout,moodle"] {
    margin-top: 3px !important;
    border-top: 1px solid #F1F5F9 !important;
    padding-top: 6px !important;
    color: #DC2626 !important;
}

.edupremium-user-menu [data-title="logout,moodle"] .menu-action-text::before {
    background-color: #EF4444 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") !important;
}

.edupremium-user-menu [data-title="logout,moodle"]:hover {
    background: #FEF2F2 !important;
    color: #B91C1C !important;
}

.edupremium-user-menu [data-title="logout,moodle"]:hover .menu-action-text::before {
    background-color: #B91C1C !important;
}

/* Divisores dentro del dropdown */
.edupremium-user-menu .dropdown-divider {
    height: 1px !important;
    background: #F1F5F9 !important;
    border: none !important;
    margin: 3px 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
}

.edupremium-user-menu .dropdown-divider .filler {
    display: none !important;
}

.edupremium-user-menu .dropdown-divider:last-child,
.edupremium-user-menu .dropdown-divider + .dropdown-divider {
    display: none !important;
}

/* Quitar botón de idioma */
.edupremium-nav-right .dropdown.nav-item,
[data-region="lang-menu"],
.langmenu,
.edupremium-nav-right .langmenu,
.edupremium-nav-right .dropdown-toggle[title="Idioma"],
.edupremium-nav-right .dropdown-toggle[title="Language"] {
    display: none !important;
}

/* Eliminar Reportes del menú de usuario (Solicitud explícita) */
[data-title="reports,core_reportbuilder"],
.dropdown-item[href*="/reportbuilder/"],
.edupremium-navbar .dropdown-menu a[href*="/reportbuilder/"],
.edupremium-user-menu a[href*="/reportbuilder/"],
.edupremium-navbar .dropdown-menu [data-title="reports,core_reportbuilder"],
.edupremium-navbar .edupremium-user-menu .dropdown-menu a[href*="/reportbuilder/"],
.edupremium-navbar .edupremium-user-menu .dropdown-menu [data-title*="report"],
a[href*="/reportbuilder/"] {
    display: none !important;
}

/* Eliminar enlace a Archivos Privados en toda la plataforma */
[data-title="privatefiles,moodle"],
[data-title="files,moodle"],
.dropdown-item[href*="/user/files.php"],
.edupremium-navbar .dropdown-menu a[href*="/user/files.php"],
.edupremium-user-menu a[href*="/user/files.php"],
.edupremium-navbar .dropdown-menu [data-title="privatefiles,moodle"],
.edupremium-navbar .dropdown-menu [data-title="files,moodle"],
.edupremium-navbar .edupremium-user-menu .dropdown-menu a[href*="/user/files.php"],
.edupremium-navbar .edupremium-user-menu .dropdown-menu [data-title*="files"],
a[href*="/user/files.php"] {
    display: none !important;
}

/* ==========================================================================
   8. BARRA DE NAVEGACIÓN SECUNDARIA (PESTAÑAS DE CURSO Y ADMINISTRACIÓN)
   ========================================================================== */
.edupremium-secondary-bar {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    position: sticky !important;
    top: 64px !important;
    z-index: 990 !important;
    padding: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.edupremium-secondary-inner {
    max-width: 1380px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    height: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.edupremium-secondary-inner::-webkit-scrollbar {
    display: none !important;
}

.edupremium-secondary-inner .moremenu,
.edupremium-secondary-inner .navigation {
    opacity: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.edupremium-secondary-inner .nav-tabs,
.edupremium-secondary-inner .more-nav,
.edupremium-secondary-inner .nav,
.edupremium-secondary-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    list-style: none !important;
    list-style-type: none !important;
    background: transparent !important;
    height: auto !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.edupremium-secondary-tabs::-webkit-scrollbar {
    display: none !important;
}

.edupremium-secondary-inner .nav-item,
.edupremium-secondary-tabs .nav-item {
    display: inline-flex !important;
    align-items: center !important;
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

.edupremium-secondary-inner .nav-item::marker,
.edupremium-secondary-inner .nav-item::before,
.edupremium-secondary-tabs .nav-item::marker,
.edupremium-secondary-tabs .nav-item::before {
    display: none !important;
    content: none !important;
}

/* Botones de navegación secundaria: píldoras elegantes y consistentes */
.edupremium-secondary-inner .nav-link,
.edupremium-secondary-inner .moremenu .nav-link,
.edupremium-secondary-tabs .nav-link {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 36px !important;
    padding: 0 16px !important;
    border-radius: var(--ep-radius-pill) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    border-top: 1px solid #E2E8F0 !important;
    border-left: 1px solid #E2E8F0 !important;
    border-right: 1px solid #E2E8F0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}

.edupremium-secondary-inner .nav-link:hover,
.edupremium-secondary-inner .moremenu .nav-link:hover,
.edupremium-secondary-tabs .nav-link:hover {
    color: var(--ep-primary-1) !important;
    background: #EDE9FE !important;
    border-color: #DDD6FE !important;
    border-bottom-color: #DDD6FE !important;
    transform: translateY(-1px);
}

.edupremium-secondary-inner .nav-link.active,
.edupremium-secondary-inner .nav-item.active .nav-link,
.edupremium-secondary-inner .moremenu .nav-link.active,
.edupremium-secondary-inner .nav-link[aria-current="true"],
.edupremium-secondary-tabs .nav-link.active,
.edupremium-secondary-tabs .nav-item.active .nav-link,
.edupremium-secondary-tabs .nav-link[aria-current="true"] {
    background: var(--ep-primary-grad) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: 0 3px 10px rgba(74, 0, 224, 0.25) !important;
}

.edupremium-secondary-inner .nav-link::after,
.edupremium-secondary-inner .moremenu .nav-link::after,
.edupremium-secondary-tabs .nav-link::after {
    display: none !important;
    content: none !important;
}

/* Botón Más habilitado y estilizado como píldora premium */

.edupremium-tertiary-nav .custom-select,
.edupremium-tertiary-nav select {
    border-radius: var(--ep-radius-pill) !important;
    border: 1.5px solid var(--ep-border) !important;
    padding: 6px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--ep-dark) !important;
    outline: none !important;
    height: 36px !important;
}

/* ==========================================================================
   9. PANTALLA DE LOGIN Y RECUPERACIÓN DE CONTRASEÑA (EDTECH SPLIT SCREEN)
   ========================================================================== */
html:has(.edupremium-login-body),
.edupremium-login-body {
    background: #F8FAFC !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

.edupremium-login-wrapper {
    display: flex;
    height: 100vh;
    max-height: 100vh;
    width: 100%;
    overflow: hidden;
}

.edupremium-login-visual {
    flex: 1.1;
    background: var(--ep-primary-grad, linear-gradient(135deg, #1E40AF 0%, #0F172A 100%));
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #FFFFFF;
    height: 100vh;
    overflow: hidden;
}

.edupremium-login-video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    width: auto !important;
    height: auto !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.edupremium-login-visual-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.82) 0%, rgba(15, 23, 42, 0.88) 100%) !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
    z-index: 2 !important;
}

.edupremium-login-visual-content {
    position: relative !important;
    z-index: 3 !important;
    max-width: 480px !important;
}

.edupremium-login-brand {
    display: none !important;
}

.edupremium-login-logo-img {
    max-height: 52px;
    width: auto;
    object-fit: contain;
}

.edupremium-login-logo-icon {
    font-size: 2rem;
}

.edupremium-login-logo-text {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.edupremium-login-visual-title {
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    color: #FFFFFF;
}

.edupremium-login-visual-subtitle {
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 25px;
}

.edupremium-login-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.edupremium-login-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 18px;
    border-radius: 16px;
}

.ep-feat-icon {
    font-size: 1.35rem;
}

.edupremium-login-feature-item strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 2px;
}

.edupremium-login-feature-item p {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Panel Derecho Formulario - Estático y perfectamente centrado */
.edupremium-login-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background: #F8FAFC;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
}

.edupremium-login-card {
    width: 100%;
    max-width: 420px;
    background: #FFFFFF;
    padding: 26px 32px;
    border-radius: 20px;
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 16px 36px -8px rgba(74, 0, 224, 0.12), 0 4px 16px -4px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}

.edupremium-login-header {
    margin-bottom: 16px;
    text-align: left;
}

.edupremium-login-card-logo,
.edupremium-mobile-logo {
    display: block !important;
    margin-bottom: 10px !important;
    text-align: center !important;
}

.edupremium-login-card-logo img,
.edupremium-login-card-logo-img,
.edupremium-mobile-logo img {
    max-height: 150px !important;
    max-width: 340px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: inline-block !important;
    margin: 0 auto !important;
}

.edupremium-login-title {
    font-size: 1.65rem !important;
    font-weight: 900 !important;
    color: #1E1B4B !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 4px 0 !important;
}

.edupremium-login-desc {
    color: #64748B !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* Ocultar encabezados nativos duplicados de Moodle */
.edupremium-login-moodle-content .loginform h1.h2,
.edupremium-login-moodle-content .loginform h2,
.edupremium-login-moodle-content .loginform > p.text-muted,
.edupremium-login-moodle-content .login-heading {
    display: none !important;
}

/* Personalización compacta de inputs de Moodle en Login */
.edupremium-login-moodle-content .login-form-username,
.edupremium-login-moodle-content .login-form-password,
.edupremium-login-moodle-content .form-group,
.edupremium-login-moodle-content .fitem {
    margin-bottom: 12px !important;
}

.edupremium-login-moodle-content label {
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    color: #1E1B4B !important;
    margin-bottom: 4px !important;
    display: block !important;
}

.edupremium-login-moodle-content .form-control,
.edupremium-login-moodle-content input[type="text"],
.edupremium-login-moodle-content input[type="password"] {
    border-radius: 12px !important;
    border: 1.5px solid #E2E8F0 !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    background: #FFFFFF !important;
    color: #1E1B4B !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.edupremium-login-moodle-content .form-control:focus,
.edupremium-login-moodle-content input[type="text"]:focus,
.edupremium-login-moodle-content input[type="password"]:focus {
    border-color: var(--ep-primary-1) !important;
    box-shadow: 0 0 0 3px rgba(74, 0, 224, 0.12) !important;
    outline: none !important;
}

.edupremium-login-moodle-content .text-end {
    margin-bottom: 10px !important;
}

.edupremium-login-moodle-content .text-end a {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--ep-primary-1) !important;
    text-decoration: none !important;
}

.edupremium-login-moodle-content .text-end a:hover {
    text-decoration: underline !important;
}

.edupremium-login-moodle-content #loginbtn,
.edupremium-login-moodle-content input[type="submit"],
.edupremium-login-moodle-content .btn-primary {
    background: var(--ep-gold) !important;
    border-color: var(--ep-gold) !important;
    color: #1E1B4B !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    border-radius: var(--ep-radius-pill) !important;
    padding: 11px 20px !important;
    width: 100% !important;
    margin-top: 4px !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: 0 6px 16px rgba(255, 210, 0, 0.3) !important;
    transition: all 0.2s ease !important;
}

.edupremium-login-moodle-content #loginbtn:hover,
.edupremium-login-moodle-content input[type="submit"]:hover,
.edupremium-login-moodle-content .btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(255, 210, 0, 0.4) !important;
}

/* Selector de idioma y cookies compactos */
.edupremium-login-moodle-content .login-languagemenu {
    margin: 10px 0 4px 0 !important;
}

.edupremium-login-moodle-content .login-languagemenu a.dropdown-toggle {
    font-size: 0.82rem !important;
    color: #64748B !important;
    text-decoration: none !important;
}

.edupremium-login-moodle-content .login-cookiesnotice {
    margin-top: 4px !important;
}

.edupremium-login-moodle-content .login-cookiesnotice button {
    font-size: 0.8rem !important;
    color: #94A3B8 !important;
    text-decoration: none !important;
}

.edupremium-login-moodle-content .login-cookiesnotice button:hover {
    color: #64748B !important;
    text-decoration: underline !important;
}

.edupremium-login-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--ep-border);
    text-align: center;
}

.edupremium-help-note {
    font-size: 0.84rem;
    color: #64748B;
}

.edupremium-help-note a,
.edupremium-back-link {
    color: var(--ep-primary-1) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.edupremium-help-note a:hover,
.edupremium-back-link:hover {
    color: var(--ep-primary-3) !important;
    text-decoration: underline !important;
}

/* Ocultar elementos sobrantes nativos de Moodle en la pantalla de login */
.edupremium-login-moodle-content .login-divider,
.edupremium-login-moodle-content .login-instructions,
.edupremium-login-moodle-content .potentialidps {
    display: none !important;
}

@media (max-width: 991px) {
    html:has(.edupremium-login-body),
    .edupremium-login-body,
    .edupremium-login-wrapper,
    .edupremium-login-form-panel {
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
    }
    .edupremium-login-wrapper {
        flex-direction: column;
    }
    .edupremium-login-visual {
        display: none;
    }
    .edupremium-mobile-logo {
        display: block;
    }
    .edupremium-login-form-panel {
        padding: 30px 16px;
    }
    .edupremium-login-card {
        padding: 30px 22px;
        box-shadow: none;
    }
}

/* ==========================================================================
   9. PÁGINA DE PERFIL DE USUARIO (ESTILO DASHBOARD EDUPREMIUM)
   ========================================================================== */

/* Hero Banner específico para Perfil de Usuario */
.edupremium-hero-profile {
    padding: 45px 24px !important;
    margin-bottom: 25px !important;
}

.edupremium-profile-avatar-card {
    padding: 10px !important;
    width: 140px !important;
    height: 140px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 3px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25) !important;
}

.edupremium-profile-avatar-wrap img,
.edupremium-profile-avatar-wrap .userpicture,
.edupremium-profile-avatar-wrap .userinitials {
    width: 115px !important;
    height: 115px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    background: #ffffff !important;
    color: #4A00E0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* Ocultar elementos redundantes y sobrantes en la página de perfil */
.pagelayout-mypublic #page-header,
.pagelayout-mypublic .edupremium-page-header,
.pagelayout-mypublic .header-action,
.pagelayout-mypublic form[action*="indexsys.php"],
.pagelayout-mypublic [data-modal-content-str*="resetpageconfirm"],
.pagelayout-mypublic #message-user-button,
.pagelayout-mypublic #region-main > .page-context-header,
.pagelayout-mypublic .page-context-header .header-button-group {
    display: none !important;
}

/* Ocultar secciones no deseadas en el perfil según solicitud del usuario */
/* 1. Privacidad y políticas */
.pagelayout-mypublic .profile_tree section.node_category:has(a[href*="dataprivacy"]),
/* 2. Detalles del curso (perfiles de curso) */
.pagelayout-mypublic .profile_tree section.node_category:has(a[href*="/user/view.php?id="]),
/* 3. Misceláneos (blog, foros, planes de aprendizaje) */
.pagelayout-mypublic .profile_tree section.node_category:has(a[href*="/blog/"]),
.pagelayout-mypublic .profile_tree section.node_category:has(a[href*="/mod/forum/"]),
.pagelayout-mypublic .profile_tree section.node_category:has(a[href*="/lp/"]) {
    display: none !important;
}

/* En la tarjeta de Reportes, ocultar sesiones de navegador y dejar SOLO vista general de calificaciones */
.pagelayout-mypublic .profile_tree section.node_category:has(a[href*="/grade/report/overview/"]) li:has(a[href*="/report/usersessions/"]),
.pagelayout-mypublic .profile_tree section.node_category:has(a[href*="/grade/report/overview/"]) li:has(a[href*="mode=grade"]) {
    display: none !important;
}

/* Encabezados modernos y limpios para las 3 tarjetas de perfil */
.pagelayout-mypublic .profile_tree section.node_category:has(a[href*="user/edit.php"]) h3.lead {
    font-size: 0 !important;
    margin: 0 !important;
}
.pagelayout-mypublic .profile_tree section.node_category:has(a[href*="user/edit.php"]) h3.lead::before {
    content: "👤 Detalles de Usuario" !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #1E1B4B !important;
    display: block !important;
}

.pagelayout-mypublic .profile_tree section.node_category:has(a[href*="/grade/report/overview/"]) h3.lead {
    font-size: 0 !important;
    margin: 0 !important;
}
.pagelayout-mypublic .profile_tree section.node_category:has(a[href*="/grade/report/overview/"]) h3.lead::before {
    content: "📊 Calificaciones" !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #1E1B4B !important;
    display: block !important;
}

.pagelayout-mypublic .profile_tree section.node_category:last-of-type h3.lead {
    font-size: 0 !important;
    margin: 0 !important;
}
.pagelayout-mypublic .profile_tree section.node_category:last-of-type h3.lead::before {
    content: "⏱️ Actividad de Ingreso" !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #1E1B4B !important;
    display: block !important;
}

/* Cuadrícula moderna para las tarjetas de perfil */
.pagelayout-mypublic .profile_tree {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    margin-top: 10px !important;
}

@media (max-width: 991px) {
    .pagelayout-mypublic .profile_tree {
        grid-template-columns: 1fr !important;
    }
}

.pagelayout-mypublic .profile_tree section.node_category {
    margin-bottom: 0 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01) !important;
    background: #ffffff !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.25s ease !important;
}

.pagelayout-mypublic .profile_tree section.node_category:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 18px 35px -8px rgba(74, 0, 224, 0.15) !important;
    border-color: #DDD6FE !important;
}

.pagelayout-mypublic .profile_tree section.node_category .card-body {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.pagelayout-mypublic .profile_tree section.node_category h3.lead {
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    color: #1E1B4B !important;
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.pagelayout-mypublic .profile_tree section.node_category ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pagelayout-mypublic .profile_tree section.node_category dl {
    margin-bottom: 12px !important;
}

.pagelayout-mypublic .profile_tree section.node_category dt {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #64748B !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 4px !important;
}

.pagelayout-mypublic .profile_tree section.node_category dd {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1E1B4B !important;
    margin-bottom: 12px !important;
}

/* Botón estilizado de Editar Perfil dentro de la tarjeta */
.pagelayout-mypublic .profile_tree .editprofile {
    margin-bottom: 16px !important;
}

.pagelayout-mypublic .profile_tree .editprofile a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #EEF2FF !important;
    color: #4A00E0 !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    padding: 8px 18px !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    border: 1px solid #C7D2FE !important;
    transition: all 0.2s ease !important;
}

.pagelayout-mypublic .profile_tree .editprofile a:hover {
    background: #4A00E0 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(74, 0, 224, 0.25) !important;
}

.pagelayout-mypublic .profile_tree .editprofile .ep-btn-subir-foto {
    background: #FEF3C7 !important;
    color: #92400E !important;
    border-color: #FCD34D !important;
    font-weight: 700 !important;
}

.pagelayout-mypublic .profile_tree .editprofile .ep-btn-subir-foto:hover {
    background: #F59E0B !important;
    color: #1E1B4B !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* Botón estilizado de Vista General de Calificaciones dentro de la tarjeta */
.pagelayout-mypublic .profile_tree section.node_category:has(a[href*="/grade/report/overview/"]) a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #4A00E0 0%, #8E2DE2 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    padding: 10px 20px !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(74, 0, 224, 0.25) !important;
    transition: all 0.2s ease !important;
}

.pagelayout-mypublic .profile_tree section.node_category:has(a[href*="/grade/report/overview/"]) a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(74, 0, 224, 0.35) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   10. REPORTE DE CALIFICACIONES DEL CURSO (HOMOGÉNEO CON DASHBOARD)
   ========================================================================== */
.path-grade-report-user .user-report-container,
.path-grade-report-user table.user-grade,
.path-grade table.generaltable {
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-top: 15px !important;
    margin-bottom: 30px !important;
}

.path-grade-report-user table.user-grade thead th,
.path-grade table.generaltable thead th {
    background: #F8FAFC !important;
    color: #1E1B4B !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 14px 16px !important;
    border-bottom: 2px solid #E2E8F0 !important;
}

.path-grade-report-user table.user-grade tbody td,
.path-grade table.generaltable tbody td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    color: #334155 !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    vertical-align: middle !important;
}

.path-grade-report-user table.user-grade tbody tr:hover td,
.path-grade table.generaltable tbody tr:hover td {
    background-color: #F8FAFC !important;
}

/* Fila total del curso destacada */
.path-grade-report-user table.user-grade tr.course-total td,
.path-grade-report-user table.user-grade tbody tr:last-child td {
    background: #F5F3FF !important;
    font-weight: 800 !important;
    color: #4A00E0 !important;
    border-top: 2px solid #DDD6FE !important;
}

/* Ocultar el drawer de índice de curso en vista de calificaciones */
.path-grade-report-user .drawer-left {
    display: none !important;
}

/* ==========================================================================
   MODAL DE CAMBIO DE IDIOMA INSTANTÁNEO (SIN CAMBIAR DE PÁGINA)
   ========================================================================== */
.ep-lang-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    animation: epFadeIn 0.2s ease !important;
}

.ep-lang-modal.ep-modal-visible {
    display: flex !important;
}

.ep-lang-modal.ep-modal-hidden {
    display: none !important;
}

.ep-lang-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.ep-lang-modal-dialog {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 480px !important;
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid #E2E8F0 !important;
    overflow: hidden !important;
    animation: epSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes epSlideUp {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ep-lang-modal-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 24px 28px 20px !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

.ep-lang-modal-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    background: #F5F3FF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    flex-shrink: 0 !important;
}

.ep-lang-modal-heading {
    flex: 1 !important;
    min-width: 0 !important;
}

.ep-lang-modal-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #1E1B4B !important;
    margin: 0 0 4px !important;
}

.ep-lang-modal-subtitle {
    font-size: 0.85rem !important;
    color: #64748B !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.ep-lang-modal-close {
    background: #F1F5F9 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: #64748B !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

.ep-lang-modal-close:hover {
    background: #E2E8F0 !important;
    color: #0F172A !important;
    transform: rotate(90deg) !important;
}

.ep-lang-options {
    padding: 24px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.ep-lang-card {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 20px !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: #ffffff !important;
    margin: 0 !important;
}

.ep-lang-card:hover {
    border-color: #A78BFA !important;
    background: #FAF5FF !important;
    transform: translateY(-1px) !important;
}

.ep-lang-card.active {
    border-color: #6800E8 !important;
    background: #F5F3FF !important;
    box-shadow: 0 4px 14px rgba(104, 0, 232, 0.12) !important;
}

.ep-lang-card input[type="radio"] {
    display: none !important;
}

.ep-lang-flag {
    font-size: 28px !important;
    line-height: 1 !important;
}

.ep-lang-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.ep-lang-name {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: #1E1B4B !important;
}

.ep-lang-code {
    font-size: 0.78rem !important;
    color: #64748B !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

.ep-lang-check {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: 2px solid #CBD5E1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    transition: all 0.2s !important;
}

.ep-lang-card.active .ep-lang-check {
    background: #6800E8 !important;
    border-color: #6800E8 !important;
}

.ep-lang-modal-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 18px 28px 24px !important;
    border-top: 1px solid #F1F5F9 !important;
    background: #F8FAFC !important;
}

.ep-lang-btn-cancel {
    padding: 10px 20px !important;
    border-radius: 9999px !important;
    border: 1px solid #CBD5E1 !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.ep-lang-btn-cancel:hover {
    background: #F1F5F9 !important;
    color: #0F172A !important;
}

.ep-lang-btn-save {
    padding: 10px 24px !important;
    border-radius: 9999px !important;
    border: none !important;
    background: linear-gradient(135deg, #FFD200 0%, #F59E0B 100%) !important;
    color: #1E1B4B !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
    transition: all 0.2s !important;
}

.ep-lang-btn-save:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45) !important;
}

body.ep-modal-open {
    overflow: hidden !important;
}

/* Modal de idioma */

/* ==========================================================================
   EN PREFERENCIAS DEL ALUMNO (/user/preferences.php) SOLO MOSTRAR IDIOMA
   ========================================================================== */
body#page-user-preferences.user-student [role="main"] .card:not(:has(a[href*="/user/language.php"])),
body#page-user-preferences.edupremium-student-mode [role="main"] .card:not(:has(a[href*="/user/language.php"])),
body.path-user-preferences.user-student [role="main"] .card:not(:has(a[href*="/user/language.php"])),
body.path-user-preferences.edupremium-student-mode [role="main"] .card:not(:has(a[href*="/user/language.php"])) {
    display: none !important;
}

body#page-user-preferences.user-student [role="main"] .card:has(a[href*="/user/language.php"]) li:not(:has(a[href*="/user/language.php"])),
body#page-user-preferences.edupremium-student-mode [role="main"] .card:has(a[href*="/user/language.php"]) li:not(:has(a[href*="/user/language.php"])),
body.path-user-preferences.user-student [role="main"] .card:has(a[href*="/user/language.php"]) li:not(:has(a[href*="/user/language.php"])),
body.path-user-preferences.edupremium-student-mode [role="main"] .card:has(a[href*="/user/language.php"]) li:not(:has(a[href*="/user/language.php"])) {
    display: none !important;
}

body#page-user-preferences.user-student [role="main"] .card:has(a[href*="/user/language.php"]),
body#page-user-preferences.edupremium-student-mode [role="main"] .card:has(a[href*="/user/language.php"]),
body.path-user-preferences.user-student [role="main"] .card:has(a[href*="/user/language.php"]),
body.path-user-preferences.edupremium-student-mode [role="main"] .card:has(a[href*="/user/language.php"]) {
    max-width: 500px !important;
    margin: 40px auto !important;
    border-radius: 20px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
    text-align: center !important;
    padding: 24px 20px !important;
}

body#page-user-preferences.user-student [role="main"] .card:has(a[href*="/user/language.php"]) .card-title,
body#page-user-preferences.edupremium-student-mode [role="main"] .card:has(a[href*="/user/language.php"]) .card-title,
body.path-user-preferences.user-student [role="main"] .card:has(a[href*="/user/language.php"]) .card-title,
body.path-user-preferences.edupremium-student-mode [role="main"] .card:has(a[href*="/user/language.php"]) .card-title {
    font-size: 0 !important;
    margin-bottom: 12px !important;
}

body#page-user-preferences.user-student [role="main"] .card:has(a[href*="/user/language.php"]) .card-title::before,
body#page-user-preferences.edupremium-student-mode [role="main"] .card:has(a[href*="/user/language.php"]) .card-title::before,
body.path-user-preferences.user-student [role="main"] .card:has(a[href*="/user/language.php"]) .card-title::before,
body.path-user-preferences.edupremium-student-mode [role="main"] .card:has(a[href*="/user/language.php"]) .card-title::before {
    content: "🌐 Preferencias de Idioma" !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #1E1B4B !important;
    display: block !important;
}

body#page-user-preferences.user-student [role="main"] .card:has(a[href*="/user/language.php"]) ul,
body#page-user-preferences.edupremium-student-mode [role="main"] .card:has(a[href*="/user/language.php"]) ul,
body.path-user-preferences.user-student [role="main"] .card:has(a[href*="/user/language.php"]) ul,
body.path-user-preferences.edupremium-student-mode [role="main"] .card:has(a[href*="/user/language.php"]) ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body#page-user-preferences.user-student [role="main"] .card:has(a[href*="/user/language.php"]) a[href*="/user/language.php"],
body#page-user-preferences.edupremium-student-mode [role="main"] .card:has(a[href*="/user/language.php"]) a[href*="/user/language.php"],
body.path-user-preferences.user-student [role="main"] .card:has(a[href*="/user/language.php"]) a[href*="/user/language.php"],
body.path-user-preferences.edupremium-student-mode [role="main"] .card:has(a[href*="/user/language.php"]) a[href*="/user/language.php"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #4A00E0 0%, #8E2DE2 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 12px 28px !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(74, 0, 224, 0.25) !important;
    transition: all 0.2s ease !important;
}

body#page-user-preferences.user-student [role="main"] .card:has(a[href*="/user/language.php"]) a[href*="/user/language.php"]:hover,
body#page-user-preferences.edupremium-student-mode [role="main"] .card:has(a[href*="/user/language.php"]) a[href*="/user/language.php"]:hover,
body.path-user-preferences.user-student [role="main"] .card:has(a[href*="/user/language.php"]) a[href*="/user/language.php"]:hover,
body.path-user-preferences.edupremium-student-mode [role="main"] .card:has(a[href*="/user/language.php"]) a[href*="/user/language.php"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(74, 0, 224, 0.35) !important;
}

/* ==========================================================================
   PÁGINA DE CAMBIO DE ROL (/course/switchrole.php)
   ========================================================================== */
body#page-course-switchrole #region-main {
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    padding: 36px 32px !important;
    max-width: 580px !important;
    margin: 30px auto !important;
}

body#page-course-switchrole #region-main h2 {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: #1E1B4B !important;
    margin-bottom: 8px !important;
    text-align: center !important;
}

body#page-course-switchrole #region-main .box {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 12px 18px !important;
    color: #64748B !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    margin-bottom: 22px !important;
    text-align: center !important;
}

body#page-course-switchrole #region-main .singlebutton {
    margin: 8px 0 !important;
    display: block !important;
    width: 100% !important;
}

body#page-course-switchrole #region-main .singlebutton form {
    width: 100% !important;
}

body#page-course-switchrole #region-main .singlebutton button.btn,
body#page-course-switchrole #region-main .singlebutton input[type="submit"] {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    background: #F1F5F9 !important;
    color: #1E293B !important;
    border: 1.5px solid #E2E8F0 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    cursor: pointer !important;
}

body#page-course-switchrole #region-main .singlebutton button.btn:hover,
body#page-course-switchrole #region-main .singlebutton input[type="submit"]:hover {
    background: #4338CA !important;
    color: #ffffff !important;
    border-color: #4338CA !important;
    box-shadow: 0 4px 12px rgba(67, 56, 202, 0.25) !important;
    transform: translateY(-1px) !important;
}

body#page-course-switchrole #region-main a[role="button"],
body#page-course-switchrole #region-main a:last-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 14px !important;
    padding: 9px 20px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    color: #64748B !important;
    background: transparent !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

body#page-course-switchrole #region-main a:last-child:hover {
    background: #F1F5F9 !important;
    color: #1E293B !important;
    border-color: #94A3B8 !important;
}

/* ==========================================================================
   1. ELIMINACIÓN DE "QUITAR DE LA VISTA" EN TARJETAS DE CURSOS
   ========================================================================== */
[data-action="hide-course"],
.dropdown-item[data-action="hide-course"],
button[data-action="hide-course"],
a[data-action="hide-course"],
li:has(>[data-action="hide-course"]) {
    display: none !important;
}

/* ==========================================================================
   2. ELIMINACIÓN DEL BOTÓN/PESTAÑA "PARTICIPANTES"
   ========================================================================== */
[data-key="participants"],
.edupremium-secondary-bar [data-key="participants"],
.secondary-navigation [data-key="participants"],
.more-nav [data-key="participants"],
a[href*="/user/index.php?id="],
li:has(>a[href*="/user/index.php?id="]) {
    display: none !important;
}

/* ==========================================================================
   3. RESTRICCIONES PARA ESTUDIANTES: LÍNEA DE TIEMPO Y EDICIÓN
   ========================================================================== */
body.user-student .block_timeline,
body.user-student [data-block="timeline"],
body.user-student .timeline-event-list-item {
    display: none !important;
}

/* Ocultar barra lateral en cursos para alumnos si solo contenía calendario */
body.user-student.pagelayout-course #block-region-side-pre:not(:has(.block:not(.block_calendar_month):not(.block_calendar_upcoming):not(.block_timeline))) {
    display: none !important;
}

/* Ancho completo del curso para alumnos cuando no hay bloques */
body.user-student.pagelayout-course #page-content:not(:has(#block-region-side-pre:visible)) #region-main {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Prohibir y ocultar controles de edición a alumnos */
body.user-student .editingbutton,
body.user-student .inplaceeditable,
body.user-student [data-action="edit"],
body.user-student .activity-actions,
body.user-student .section-actions,
body.user-student .btn-quickedit,
body.user-student .dropdown-item[data-action="edit"],
body.user-student .course-management-action,
body.user-student .edit-icon,
body.user-student .drag-handle,
body.user-student .bulk-actions,
body.user-student .course-editor-action,
body.user-student .edupremium-edit-switch-wrap,
body.user-student .btn-action-wrapper,
body.user-student .action-menu-item:has([data-action="edit"]) {
    display: none !important;
    pointer-events: none !important;
}

/* ==========================================================================
   4. MEJORAS GENERALES DE CURSOS: SECCIONES, ACORDEONES Y ACTIVIDADES
   ========================================================================== */
.course-section,
.course-content .section {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    margin-bottom: 24px !important;
    overflow: visible !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
    position: relative !important;
}

.course-section:hover,
.course-content .section:hover {
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06) !important;
}

.course-section-header {
    cursor: pointer !important;
    user-select: none !important;
    padding: 18px 24px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #eef2f6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: background 0.2s ease !important;
    border-top-left-radius: 19px !important;
    border-top-right-radius: 19px !important;
}

.course-section:hover .course-section-header {
    background: #f1f5f9 !important;
}

.course-section.collapsed .course-section-header,
.course-section:has(.collapse:not(.show)) .course-section-header {
    border-bottom-left-radius: 19px !important;
    border-bottom-right-radius: 19px !important;
    border-bottom: none !important;
}

.course-section-header .sectionname a,
.course-section-header .section-title a,
.course-section-header h3 a {
    color: #1e1b4b !important;
    font-weight: 800 !important;
    font-size: 1.18rem !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
    pointer-events: none !important; /* El header completo maneja el toggle sin saltar de página */
}

.course-section-header .icons-collapse-expand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #e0e7ff !important;
    color: #4338ca !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease !important;
}

.course-section-header .icons-collapse-expand:hover {
    background: #c7d2fe !important;
}

.course-section-header[aria-expanded="false"] .icons-collapse-expand,
.course-section.collapsed .icons-collapse-expand {
    transform: rotate(-90deg) !important;
}

/* Contenido de secciones y listas sin recorte de overflow */
.course-content-item-content,
.course-content-item-content.collapse.show,
.course-section .content,
.course-section .content.collapse.show,
.section .content,
.section.main .content,
.course-content ul.topics,
.course-content ul.weeks,
.course-content ul.section,
.path-course-view .course-content ul.topics,
.path-course-view .course-content ul.weeks,
.path-course-view .course-content ul.section,
.activity,
.section .activity,
.activity-information,
[data-region="activity-information"],
.activity-details,
[data-region="activity-details"],
.completion-info,
[data-region="completion-info"],
[data-region="completionrequirements"],
.completion-dropdown,
.activity-completion {
    overflow: visible !important;
}

.course-content-item-content {
    padding: 20px 24px !important;
}

/* Tarjetas de Actividades */
.activity-item {
    border-radius: 14px !important;
    border: 1px solid #edf2f7 !important;
    background: #ffffff !important;
    margin-bottom: 12px !important;
    padding: 14px 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: visible !important;
    position: relative !important;
}

.activity-item:hover {
    border-color: #6366f1 !important;
    box-shadow: 0 6px 22px rgba(99, 102, 241, 0.08) !important;
}

/* Elevación de capas cuando hay un desplegable abierto para que no quede debajo de otras actividades */
.course-section:has(.dropdown-menu.show),
.course-section:has([aria-expanded="true"]),
.course-section.ep-dropdown-open,
.section:has(.dropdown-menu.show),
.section:has([aria-expanded="true"]),
.section.ep-dropdown-open {
    z-index: 1040 !important;
}

.activity-item:has(.dropdown-menu.show),
.activity-item:has([aria-expanded="true"]),
.activity-item.ep-dropdown-open,
.activity:has(.dropdown-menu.show),
.activity:has([aria-expanded="true"]),
.activity.ep-dropdown-open {
    z-index: 1050 !important;
}

.activity-item .activityiconcontainer {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 14px !important;
}

.activity-item a.aal_test {
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 0.98rem !important;
    text-decoration: none !important;
}

.activity-item a.aal_test:hover {
    color: #4f46e5 !important;
}

/* Identificadores de color por tipo de actividad */
.activity.url .activity-item { border-left: 4px solid #3b82f6 !important; }
.activity.quiz .activity-item { border-left: 4px solid #10b981 !important; }
.activity.assign .activity-item { border-left: 4px solid #f59e0b !important; }
.activity.page .activity-item { border-left: 4px solid #8b5cf6 !important; }
.activity.forum .activity-item { border-left: 4px solid #06b6d4 !important; }

/* Botones y Desplegables de Finalización (Pendiente de hacer / Por hacer / Hecho) */
.activity-item .btn.btn-outline-secondary,
.activity-item .btn.btn-subtle-body,
.activity-item .btn.btn-subtle-success,
.activity-item [data-action="toggle-manual-completion"],
.activity-item [data-bs-toggle="dropdown"],
.activity-item [data-toggle="dropdown"] {
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.activity-item [data-bs-toggle="dropdown"]:hover,
.activity-item [data-toggle="dropdown"]:hover,
.activity-item [data-action="toggle-manual-completion"]:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Menús desplegables dentro de los cursos (Criterios de finalización, menús de acciones, etc.) */
.course-content .dropdown-menu,
.course-section .dropdown-menu,
.activity-item .dropdown-menu,
.completion-dropdown .dropdown-menu,
[data-for="dropdowndialog_dialog"],
.automatic-completion-conditions,
.activity-actions .dropdown-menu,
.section-actions .dropdown-menu {
    background-color: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    z-index: 1070 !important;
    min-width: 250px !important;
    max-width: 380px !important;
    padding: 12px 14px !important;
    white-space: normal !important;
}

/* Contenido interno del cuadro de diálogo de finalización (Usted debe / Requisitos) */
.completion-dialog,
.automatic-completion-conditions {
    color: #1e293b !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
}

.completion-dialog strong,
.automatic-completion-title strong {
    color: #0f172a !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 0.92rem !important;
}

.completion-dialog [role="list"] {
    margin: 0 !important;
    padding: 0 !important;
}

.completion-dialog [role="listitem"] {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-top: 8px !important;
    font-size: 0.86rem !important;
    color: #334155 !important;
    line-height: 1.4 !important;
}

.completion-dialog [role="listitem"] span {
    color: #334155 !important;
    font-weight: 500 !important;
}

.completion-dialog [role="listitem"].text-success,
.completion-dialog [role="listitem"].text-success span {
    color: #16a34a !important;
}

.completion-dialog [role="listitem"].text-danger,
.completion-dialog [role="listitem"].text-danger span {
    color: #dc2626 !important;
}

.completion-dialog [role="listitem"] .icon,
.completion-dialog [role="listitem"] svg,
.completion-dialog [role="listitem"] img {
    margin-top: 3px !important;
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
}

/* ==========================================================================
   5. BARRA DE PROGRESO DE CURSO & BANNER DE CERTIFICADO
   ========================================================================== */
.edupremium-course-progress-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(10px) !important;
    padding: 6px 16px !important;
    border-radius: 30px !important;
    margin-top: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.edupremium-course-progress-pill .prog-label {
    color: #ffffff !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}

.edupremium-course-progress-pill .prog-bar-track {
    width: 130px !important;
    height: 8px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.edupremium-course-progress-pill .prog-bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #ffd200, #ffae00) !important;
    border-radius: 10px !important;
    transition: width 0.4s ease !important;
}

.edupremium-course-progress-pill .prog-percent {
    color: #ffd200 !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
}

.edupremium-cert-banner-wrap {
    max-width: 1400px !important;
    margin: 25px auto 0 auto !important;
    padding: 0 30px !important;
}

.edupremium-cert-banner {
    background: linear-gradient(135deg, #1e1b4b 0%, #311068 50%, #4a00e0 100%) !important;
    border: 2px solid #ffd200 !important;
    border-radius: 20px !important;
    padding: 24px 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    box-shadow: 0 15px 35px rgba(255, 210, 0, 0.18), 0 5px 15px rgba(0,0,0,0.1) !important;
    animation: epPulseGlow 3s infinite alternate !important;
}

@keyframes epPulseGlow {
    0% { box-shadow: 0 10px 25px rgba(255, 210, 0, 0.15); }
    100% { box-shadow: 0 18px 45px rgba(255, 210, 0, 0.35); }
}

.edupremium-cert-banner-icon {
    font-size: 3.2rem !important;
    line-height: 1 !important;
}

.edupremium-cert-banner-content h3 {
    color: #ffffff !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    margin: 0 0 6px 0 !important;
}

.edupremium-cert-banner-content p {
    color: #e2e8f0 !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
}

.edupremium-cert-banner-action .edupremium-btn-gold {
    padding: 12px 26px !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
}

/* ==========================================================================
   6. MODAL DE VIDEO INTERACTIVO (POPUP CON FULLSCREEN Y 2X)
   ========================================================================== */
.edupremium-video-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(10, 15, 30, 0.88) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.edupremium-video-overlay.active,
.edupremium-video-overlay.show {
    display: flex !important;
}

.edupremium-video-dialog {
    background: #0f172a !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
    width: 100% !important;
    max-width: 980px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    animation: epModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes epModalFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.edupremium-video-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 22px !important;
    background: #1e293b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.edupremium-video-topbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: hidden !important;
}

.edupremium-video-topbar-left .ep-video-icon {
    font-size: 1.3rem !important;
}

.edupremium-video-modal-title,
.ep-video-modal-title,
#ep-video-modal-title {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

.edupremium-video-controls {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.ep-speed-group {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    padding: 3px 6px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.ep-speed-label {
    color: #94a3b8 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    margin-right: 4px !important;
}

.ep-speed-btn {
    background: transparent !important;
    border: none !important;
    color: #cbd5e1 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.ep-speed-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.ep-speed-btn.active {
    background: #ffd200 !important;
    color: #1e1b4b !important;
    box-shadow: 0 2px 8px rgba(255, 210, 0, 0.3) !important;
}

.ep-video-btn-fullscreen,
.ep-video-btn-close {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
}

.ep-video-btn-fullscreen:hover,
.ep-video-btn-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffd200 !important;
}

.edupremium-video-player-box {
    position: relative !important;
    padding-bottom: 56.25% !important; /* 16:9 */
    height: 0 !important;
    background: #000000 !important;
}

.edupremium-video-player-box iframe,
.edupremium-video-player-box video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

.edupremium-video-footer {
    padding: 10px 22px !important;
    background: #0b1120 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    text-align: center !important;
}

.ep-video-hint {
    color: #94a3b8 !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   7. MODAL DE CERTIFICADO OFICIAL & FORMATO IMPRESIÓN PDF
   ========================================================================== */
.edupremium-cert-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.edupremium-cert-overlay.active,
.edupremium-cert-overlay.show {
    display: flex !important;
}

.edupremium-cert-dialog {
    background: #1e293b !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
    width: 100% !important;
    max-width: 1060px !important;
    max-height: 94vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.edupremium-cert-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 24px !important;
    background: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.edupremium-cert-topbar-title {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.edupremium-cert-topbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.edupremium-cert-btn-close {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
}

.edupremium-cert-btn-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffd200 !important;
}

.edupremium-cert-scroll-area {
    padding: 30px !important;
    overflow-y: auto !important;
    background: #334155 !important;
    display: flex !important;
    justify-content: center !important;
}

/* Hoja física del certificado (A4 horizontal estilizado) */
.edupremium-certificate-paper {
    background: #ffffff !important;
    width: 920px !important;
    min-height: 600px !important;
    padding: 24px !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.edupremium-cert-inner-frame {
    border: 3px double #d4af37 !important;
    outline: 2px solid #b38728 !important;
    outline-offset: -8px !important;
    padding: 36px 40px !important;
    min-height: 550px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background: radial-gradient(circle at center, #ffffff 60%, #fffdf7 100%) !important;
    position: relative !important;
}

.edupremium-cert-header {
    margin-bottom: 20px !important;
}

.edupremium-cert-logo-img {
    max-height: 60px !important;
    max-width: 220px !important;
    object-fit: contain !important;
    margin-bottom: 8px !important;
}

.edupremium-cert-logo-text {
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    color: #1e1b4b !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.edupremium-cert-org-subtitle {
    font-size: 0.72rem !important;
    letter-spacing: 3px !important;
    color: #64748b !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.edupremium-cert-title-block {
    margin: 15px 0 20px 0 !important;
}

.edupremium-cert-main-title {
    font-family: 'Playfair Display', serif, Georgia !important;
    font-size: 2.8rem !important;
    font-weight: 700 !important;
    color: #1e1b4b !important;
    letter-spacing: 6px !important;
    margin: 0 !important;
}

.edupremium-cert-sub-title {
    font-size: 0.85rem !important;
    letter-spacing: 4px !important;
    color: #947116 !important;
    font-weight: 800 !important;
    margin: 4px 0 16px 0 !important;
    text-transform: uppercase !important;
}

.edupremium-cert-ribbon {
    font-size: 0.95rem !important;
    color: #475569 !important;
    font-style: italic !important;
}

.edupremium-cert-recipient {
    margin: 15px 0 !important;
}

.edupremium-cert-recipient-name {
    font-family: 'Playfair Display', serif, Georgia !important;
    font-size: 2.4rem !important;
    font-weight: 700 !important;
    color: #4338ca !important;
    letter-spacing: 1px !important;
}

.edupremium-cert-recipient-line {
    width: 60% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #b38728, transparent) !important;
    margin: 6px auto 0 auto !important;
}

.edupremium-cert-statement {
    font-size: 0.92rem !important;
    color: #475569 !important;
    max-width: 680px !important;
    margin: 15px auto !important;
    line-height: 1.6 !important;
}

.edupremium-cert-course-name {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 12px 0 16px 0 !important;
}

.edupremium-cert-meta {
    font-size: 0.78rem !important;
    color: #64748b !important;
    margin-bottom: 30px !important;
}

.edupremium-cert-signatures {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    margin-top: 20px !important;
    padding: 0 20px !important;
}

.edupremium-cert-sig-col {
    width: 220px !important;
    text-align: center !important;
}

.edupremium-cert-sig-line {
    height: 1px !important;
    background: #94a3b8 !important;
    margin-bottom: 8px !important;
}

.edupremium-cert-sig-name {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

.edupremium-cert-sig-role {
    font-size: 0.72rem !important;
    color: #64748b !important;
}

.edupremium-cert-gold-seal {
    width: 74px !important;
    height: 74px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #ffd700 0%, #b38728 50%, #fbf5b7 100%) !important;
    border: 3px solid #855806 !important;
    box-shadow: 0 4px 15px rgba(179, 135, 40, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #4a2c00 !important;
    font-weight: 900 !important;
    margin: 0 auto !important;
}

.edupremium-seal-star {
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

.edupremium-seal-text {
    font-size: 0.52rem !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    line-height: 1.1 !important;
}

.edupremium-seal-year {
    font-size: 0.65rem !important;
}

/* ==========================================================================
   8. ESTILOS DE IMPRESIÓN (PDF / PRINT A4 LANDSCAPE)
   ========================================================================== */
@media print {
    body * {
        visibility: hidden !important;
    }
    #edupremium-printable-certificate,
    #edupremium-printable-certificate * {
        visibility: visible !important;
    }
    #edupremium-printable-certificate {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: #ffffff !important;
        z-index: 9999999 !important;
    }
    .edupremium-cert-inner-frame {
        height: calc(100vh - 20px) !important;
        padding: 30px !important;
    }
    @page {
        size: A4 landscape;
        margin: 8mm;
    }
}

/* ==========================================================================
   9. PIE DE PÁGINA INSTITUCIONAL CORPORATIVO (Fiel a la imagen de referencia)
   ========================================================================== */
.edupremium-inst-footer {
    background: #0A1138 !important;
    color: #FFFFFF !important;
    padding: 56px 0 0 0 !important;
    margin-top: 60px !important;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    border-top: 3px solid var(--color-accent, #DC2626) !important;
    position: relative !important;
    z-index: 10 !important;
}

.edupremium-inst-footer-container {
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 0 32px 48px 32px !important;
    display: grid !important;
    grid-template-columns: 1.35fr 1fr 1fr !important;
    gap: 48px !important;
}

@media (max-width: 992px) {
    .edupremium-inst-footer-container {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
        padding: 0 20px 36px 20px !important;
    }
}

.edupremium-inst-footer-col {
    display: flex !important;
    flex-direction: column !important;
}

.edupremium-footer-slogan {
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: #F1F5F9 !important;
    margin: 0 0 28px 0 !important;
}

.edupremium-footer-heading {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 0 14px 0 !important;
    letter-spacing: -0.01em !important;
}

.edupremium-heading-social {
    margin-top: 24px !important;
}

.edupremium-footer-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.edupremium-footer-list li {
    color: #E2E8F0 !important;
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.edupremium-bullet {
    color: #94A3B8 !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
}

.edupremium-footer-socials {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 10px !important;
}

.ep-social-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.ep-social-btn:hover {
    transform: translateY(-3px) !important;
    opacity: 0.9 !important;
    color: #FFFFFF !important;
}

.ep-social-fb { background: #3b5998 !important; }
.ep-social-ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; }
.ep-social-wa { background: #25D366 !important; }
.ep-social-in { background: #0077b5 !important; }

/* Columna 2: Contacto & Libro de Reclamaciones */
.edupremium-footer-contact-item {
    margin-bottom: 22px !important;
}

.edupremium-footer-link-highlight {
    color: #FFFFFF !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    letter-spacing: 0.02em !important;
    transition: color 0.2s ease !important;
}

.edupremium-footer-link-highlight:hover {
    color: #60A5FA !important;
    text-decoration: underline !important;
}

.edupremium-libro-reclamaciones-wrap {
    margin-top: 14px !important;
}

.edupremium-libro-link {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.edupremium-libro-title {
    color: #38BDF8 !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
    transition: color 0.2s ease !important;
}

.edupremium-libro-link:hover .edupremium-libro-title {
    color: #7DD3FC !important;
    text-decoration: underline !important;
}

.edupremium-libro-graphic {
    width: 140px !important;
    max-width: 100% !important;
    transition: transform 0.25s ease !important;
}

.edupremium-libro-link:hover .edupremium-libro-graphic {
    transform: scale(1.05) translateY(-2px) !important;
}

/* Columna 3: Enlaces de información */
.edupremium-footer-nav-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.edupremium-footer-nav-list li {
    margin-bottom: 12px !important;
}

.edupremium-footer-nav-list a {
    color: #FFFFFF !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.edupremium-footer-nav-list a:hover {
    color: #60A5FA !important;
    transform: translateX(4px) !important;
}

/* Sub-footer inferior */
.edupremium-inst-footer-bottom {
    background: #060B24 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 20px 0 !important;
    text-align: center !important;
}

.edupremium-footer-bottom-inner p {
    margin: 0 !important;
    color: #94A3B8 !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   10. ESTILOS DE PROTECCIÓN PARA EL REPRODUCTOR DE VIDEO EN MOODLE
   ========================================================================== */
.edupremium-video-player-box {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: #000000 !important;
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
}

.edupremium-video-player-box iframe,
.edupremium-video-player-box video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

.edupremium-video-player-box iframe.ep-media-active,
.edupremium-video-player-box video.ep-media-active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2 !important;
}

.edupremium-video-player-box iframe.ep-media-hidden,
.edupremium-video-player-box video.ep-media-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Spinner indicador de carga para videos */
.ep-video-loader {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    background: #0F172A !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    z-index: 9 !important;
    transition: opacity 0.3s ease !important;
}

.ep-spinner {
    width: 44px !important;
    height: 44px !important;
    border: 4px solid rgba(255, 255, 255, 0.2) !important;
    border-top-color: var(--color-accent, #DC2626) !important;
    border-radius: 50% !important;
    animation: epSpin 0.8s linear infinite !important;
}

@keyframes epSpin {
    to { transform: rotate(360deg); }
}

/* Escudo protector que neutraliza fugas hacia YouTube pero permite reproducción nativa fluida */
.ep-video-click-shield {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
    pointer-events: none !important;
    background: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Mascarilla superior contra título y botón compartir de YouTube */
.ep-shield-topbar-mask {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important;
    z-index: 12 !important;
    pointer-events: auto !important;
    cursor: default !important;
}

/* Mascarilla inferior derecha contra logo y enlace externo 'Ver en YouTube' */
.ep-shield-branding-mask {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 44px !important;
    height: 38px !important;
    z-index: 12 !important;
    pointer-events: auto !important;
    cursor: default !important;
}

/* Overlay central con botón de Play cuando el video está en pausa */
.ep-shield-play-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 11 !important;
    transition: opacity 0.2s ease !important;
}

.ep-shield-play-circle {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    background: var(--color-primary, #1E40AF) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    padding-left: 4px !important;
    transition: transform 0.2s ease !important;
}

.ep-shield-play-circle:hover {
    transform: scale(1.1) !important;
}

/* Barra de control personalizada de Moodle para el video */
.edupremium-video-custom-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    background: #111827 !important;
    border-radius: 0 0 12px 12px !important;
}

.ep-video-controls-left,
.ep-video-controls-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.ep-custom-btn-play {
    background: var(--color-primary, #1E40AF) !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 8px 20px !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
}

.ep-custom-btn-play:hover {
    background: #1D4ED8 !important;
    transform: translateY(-1px) !important;
}

/* Botones de herramientas del reproductor (Seek, Calidad, Subtítulos, Miniatura) */
.ep-video-tool-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #F1F5F9 !important;
    padding: 7px 13px !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
}

.ep-video-tool-btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

.ep-video-tool-btn.active {
    background: var(--color-primary, #1E40AF) !important;
    border-color: var(--color-primary, #1E40AF) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(30, 64, 175, 0.6) !important;
}

/* Selector desplegable de calidad */
.ep-quality-wrap {
    position: relative !important;
    display: inline-block !important;
}

.ep-quality-menu {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    right: 0 !important;
    background: #1E293B !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
    padding: 6px !important;
    min-width: 150px !important;
    z-index: 60 !important;
    display: none;
    flex-direction: column !important;
    gap: 3px !important;
}

.ep-quality-menu.show {
    display: flex !important;
    animation: epMenuFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes epMenuFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.ep-quality-option {
    background: transparent !important;
    border: none !important;
    color: #E2E8F0 !important;
    padding: 7px 12px !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-align: left !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.15s ease !important;
}

.ep-quality-option:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}

.ep-quality-option.active {
    background: rgba(30, 64, 175, 0.55) !important;
    color: #93C5FD !important;
    font-weight: 700 !important;
}

.ep-quality-option.active::after {
    content: '✓';
    font-weight: 800;
}

.ep-video-protected-tag {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #94A3B8 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}

.ep-lock-icon {
    color: #22C55E !important;
}

/* Indicador de salto temporal en el centro del reproductor (+10s / -10s) */
.ep-seek-indicator {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(17, 24, 39, 0.88) !important;
    color: #FFFFFF !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    border-radius: 9999px !important;
    z-index: 25 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.ep-seek-indicator.left {
    left: 15% !important;
}
.ep-seek-indicator.right {
    right: 15% !important;
}
.ep-seek-indicator.active {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* ==========================================================================
   10b. MODO MINIATURA FLOTANTE (PICTURE-IN-PICTURE NATIVO DE MOODLE)
   ========================================================================== */
.edupremium-video-overlay.ep-pip-mode {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
    z-index: 10500 !important;
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: 24px !important;
    bottom: 24px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
}

.edupremium-video-overlay.ep-pip-mode .edupremium-video-dialog {
    width: 390px !important;
    max-width: calc(100vw - 48px) !important;
    margin: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    animation: epPipDock 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes epPipDock {
    0% {
        transform: scale(0.8) translateY(40px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.edupremium-video-overlay.ep-pip-mode .edupremium-video-topbar {
    padding: 8px 14px !important;
}

.edupremium-video-overlay.ep-pip-mode .ep-speed-group,
.edupremium-video-overlay.ep-pip-mode .ep-video-btn-fullscreen,
.edupremium-video-overlay.ep-pip-mode .ep-btn-pip-trigger,
.edupremium-video-overlay.ep-pip-mode .edupremium-video-footer,
.edupremium-video-overlay.ep-pip-mode .ep-video-protected-tag {
    display: none !important;
}

.edupremium-video-overlay.ep-pip-mode .ep-btn-restore-trigger {
    display: inline-flex !important;
}

.ep-btn-restore-trigger {
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    padding: 5px 10px !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    gap: 5px !important;
    transition: background 0.2s ease !important;
}
.ep-btn-restore-trigger:hover {
    background: var(--color-primary, #1E40AF) !important;
}

/* ==========================================================================
   11. CALENDARIO: ESTILOS INTERACTIVOS Y CREACIÓN DE EVENTOS
   ========================================================================== */
.calendarmonth td.day.clickable {
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}
.calendarmonth td.day.clickable:hover {
    background-color: rgba(30, 64, 175, 0.08) !important;
}
.calendarmonth td.today .day-number-circle {
    background-color: var(--color-primary, #1E40AF) !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   11b. CALENDARIO: PANEL DE ACTIVIDADES Y ENTREGAS PENDIENTES (TAREAS Y EXÁMENES)
   ========================================================================== */
.ep-pending-tasks-wrapper {
    margin-bottom: 28px !important;
}
.ep-pending-tasks-card {
    background: var(--color-surface, #FFFFFF) !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}
.ep-pending-tasks-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #F3F4F6 !important;
}
.ep-pending-tasks-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--color-dark, #111827) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.ep-pending-tasks-count {
    background: var(--color-accent, #DC2626) !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    padding: 2px 10px !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
}
.ep-pending-tasks-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 16px !important;
}
.ep-task-item-card {
    background: #F9FAFB !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: all 0.2s ease !important;
}
.ep-task-item-card:hover {
    border-color: var(--color-primary, #1E40AF) !important;
    box-shadow: 0 6px 16px rgba(30, 64, 175, 0.08) !important;
    transform: translateY(-2px) !important;
}
.ep-task-item-top {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}
.ep-task-icon {
    font-size: 24px !important;
    line-height: 1 !important;
    display: inline-block !important;
}
.ep-task-info {
    flex: 1 !important;
}
.ep-task-course {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--color-primary, #1E40AF) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
}
.ep-task-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1F2937 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.3 !important;
}
.ep-task-deadline {
    font-size: 13px !important;
    color: #4B5563 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.ep-task-badge-urgent {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
}
.ep-task-badge-soon {
    background: #FEF3C7 !important;
    color: #D97706 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
}
.ep-task-badge-ok {
    background: #E0E7FF !important;
    color: #1E40AF !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
}
.ep-task-badge-submitted {
    background: #D1FAE5 !important;
    color: #059669 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
}
.ep-task-item-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px dashed #E5E7EB !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.ep-btn-submit-task {
    background: var(--color-primary, #1E40AF) !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(30, 64, 175, 0.2) !important;
}
.ep-btn-submit-task:hover {
    background: var(--color-primary-dark, #1E3A8A) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   11c. MODAL DE CREACIÓN DE ACTIVIDADES Y EVENTOS EN CALENDARIO
   ========================================================================== */
.ep-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10050 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}
.ep-modal-overlay.active {
    display: flex !important;
}
.ep-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
.ep-modal-dialog {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 520px !important;
    background: #FFFFFF !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid #E2E8F0 !important;
    overflow: hidden !important;
    animation: epSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.ep-modal-content {
    display: flex !important;
    flex-direction: column !important;
}
.ep-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: #FFFFFF !important;
}
.ep-modal-close {
    background: transparent !important;
    border: none !important;
    font-size: 28px !important;
    line-height: 1 !important;
    color: #64748B !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}
.ep-modal-close:hover {
    color: #0F172A !important;
    background: #F1F5F9 !important;
}

/* Sección de Calendario en Perfil de Alumno */
.edupremium-profile-calendar-wrap {
    width: 100% !important;
}
.edupremium-profile-calendar-wrap .edupremium-tab-card {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #E5E7EB !important;
}

/* ==========================================================================
   11. BARRA DE BÚSQUEDA RÁPIDA ADMINISTRATIVA (SITE ADMINISTRATION SEARCH)
   ========================================================================== */
.ep-admin-search-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    padding: 24px 28px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01) !important;
    position: relative !important;
    margin-bottom: 24px !important;
}

.ep-admin-search-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
}

.ep-admin-search-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(30, 64, 175, 0.08) !important;
    color: var(--color-primary, #1E40AF) !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    margin-bottom: 8px !important;
}

.ep-admin-search-title {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 4px 0 !important;
}

.ep-admin-search-subtitle {
    color: #64748B !important;
    font-size: 0.88rem !important;
    margin: 0 !important;
}

.ep-kbd {
    background: #F1F5F9 !important;
    border: 1px solid #CBD5E1 !important;
    border-bottom: 2px solid #94A3B8 !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

.ep-admin-search-form {
    position: relative !important;
}

.ep-admin-search-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #F8FAFC !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 14px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03) !important;
}

.ep-admin-search-input-wrap:focus-within {
    border-color: var(--color-primary, #1E40AF) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.12), 0 4px 12px rgba(0,0,0,0.05) !important;
}

.ep-search-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    padding-left: 16px !important;
    padding-right: 8px !important;
    pointer-events: none !important;
    opacity: 0.8 !important;
}

.ep-admin-search-input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #0F172A !important;
    padding: 14px 10px 14px 4px !important;
    line-height: 1.5 !important;
}

.ep-admin-search-input::placeholder {
    color: #94A3B8 !important;
    font-weight: 400 !important;
}

.ep-search-clear-btn {
    background: transparent !important;
    border: none !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
    color: #94A3B8 !important;
    cursor: pointer !important;
    padding: 4px 10px !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ep-search-clear-btn:hover {
    color: #0F172A !important;
    background: #E2E8F0 !important;
}

.ep-admin-search-submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--color-primary, #1E40AF) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    margin: 5px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 14px rgba(30, 64, 175, 0.25) !important;
    white-space: nowrap !important;
}

.ep-admin-search-submit-btn:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(30, 64, 175, 0.35) !important;
}

.ep-admin-search-submit-btn:active {
    transform: translateY(0) !important;
}

/* Menú Desplegable Autocompletado Predictivo */
.ep-admin-search-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16) !important;
    z-index: 1050 !important;
    overflow: hidden !important;
    animation: epSearchFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes epSearchFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ep-dropdown-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 18px !important;
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #64748B !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.ep-dropdown-list {
    max-height: 360px !important;
    overflow-y: auto !important;
}

.ep-dropdown-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 18px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    text-decoration: none !important;
    color: #0F172A !important;
    transition: all 0.15s ease !important;
    border-left: 4px solid transparent !important;
}

.ep-dropdown-item:last-child {
    border-bottom: none !important;
}

.ep-dropdown-item:hover,
.ep-dropdown-item.selected {
    background: #EFF6FF !important;
    border-left-color: var(--color-primary, #1E40AF) !important;
    padding-left: 22px !important;
    color: var(--color-primary, #1E40AF) !important;
}

.ep-item-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.ep-item-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #1E293B !important;
}

.ep-dropdown-item:hover .ep-item-title,
.ep-dropdown-item.selected .ep-item-title {
    color: var(--color-primary, #1E40AF) !important;
}

.ep-highlight {
    background: #FEF08A !important;
    color: #854D0E !important;
    padding: 1px 3px !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
}

.ep-item-cat {
    font-size: 0.78rem !important;
    color: #64748B !important;
    font-weight: 500 !important;
}

.ep-item-arrow {
    font-size: 0.95rem !important;
    color: var(--color-primary, #1E40AF) !important;
    opacity: 0.5 !important;
    transition: transform 0.15s ease, opacity 0.15s ease !important;
}

.ep-dropdown-item:hover .ep-item-arrow,
.ep-dropdown-item.selected .ep-item-arrow {
    opacity: 1 !important;
    transform: translateX(4px) !important;
}

.ep-dropdown-empty {
    padding: 24px 20px !important;
    text-align: center !important;
    color: #64748B !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
}

.ep-dropdown-footer {
    padding: 10px 16px !important;
    background: #F8FAFC !important;
    border-top: 1px solid #E2E8F0 !important;
}

.ep-btn-deep-search {
    width: 100% !important;
    background: transparent !important;
    border: 1px dashed #CBD5E1 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    text-align: left !important;
    font-size: 0.88rem !important;
    color: var(--color-primary, #1E40AF) !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
}

.ep-btn-deep-search:hover {
    background: #EFF6FF !important;
    border-color: var(--color-primary, #1E40AF) !important;
}

/* Fila de Atajos Rápidos */
.ep-admin-shortcuts-row {
    margin-top: 18px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.ep-shortcuts-label {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #64748B !important;
    white-space: nowrap !important;
}

.ep-shortcuts-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.ep-shortcut-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    background: #F1F5F9 !important;
    color: #334155 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 1px solid #E2E8F0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ep-shortcut-pill:hover {
    background: #EFF6FF !important;
    color: var(--color-primary, #1E40AF) !important;
    border-color: #BFDBFE !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(30, 64, 175, 0.12) !important;
}

/* Alerta de Filtro Activo */
.ep-admin-active-filter-alert {
    background: #EFF6FF !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    color: #1E40AF !important;
    font-size: 0.92rem !important;
}

@media (max-width: 768px) {
    .ep-admin-search-card {
        padding: 18px 16px !important;
    }
    .ep-admin-search-input-wrap {
        flex-wrap: wrap !important;
    }
    .ep-admin-search-submit-btn {
        width: 100% !important;
        justify-content: center !important;
        margin: 6px 0 0 0 !important;
    }
}

/* ==========================================================================
   11.1 REDISEÑO INTEGRAL Y RESPONSIVIDAD DE ADMINISTRACIÓN DEL SITIO & PLUGINS
   ========================================================================== */

/* Layout general de páginas de administración: contenedor balanceado y centrado */
.pagelayout-admin .edupremium-page-body,
.path-admin .edupremium-page-body {
    max-width: 1360px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 24px 20px 48px 20px !important;
    box-sizing: border-box !important;
}

.edupremium-admin-content-row {
    display: flex !important;
    gap: 24px !important;
    width: 100% !important;
}

.edupremium-admin-sidebar {
    width: 260px !important;
    flex-shrink: 0 !important;
}

.edupremium-admin-main-area {
    flex: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: visible !important;
}

@media (max-width: 1199px) {
    .edupremium-admin-content-row {
        flex-direction: column !important;
    }
    .edupremium-admin-sidebar {
        width: 100% !important;
    }
}

/* Pestañas de Navegación Secundaria en Administración */
.pagelayout-admin .edupremium-secondary-bar,
.path-admin .edupremium-secondary-bar {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    margin-bottom: 24px !important;
    padding: 8px 16px !important;
    border-radius: 12px !important;
}

.pagelayout-admin .edupremium-secondary-tabs,
.path-admin .edupremium-secondary-tabs {
    gap: 10px !important;
    padding: 4px 0 !important;
}

.pagelayout-admin .edupremium-secondary-tabs .nav-link,
.path-admin .edupremium-secondary-tabs .nav-link {
    height: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
    padding: 0 18px !important;
    font-size: 0.9rem !important;
    border-radius: 10px !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    color: #475569 !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.pagelayout-admin .edupremium-secondary-tabs .nav-link:hover,
.path-admin .edupremium-secondary-tabs .nav-link:hover {
    background: #EFF6FF !important;
    border-color: #BFDBFE !important;
    color: var(--color-primary, #1E40AF) !important;
}

.pagelayout-admin .edupremium-secondary-tabs .nav-link.active,
.path-admin .edupremium-secondary-tabs .nav-link.active {
    background: var(--color-primary, #1E40AF) !important;
    color: #FFFFFF !important;
    border-color: var(--color-primary, #1E40AF) !important;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25) !important;
}

/* Tarjetas Estructuradas de Subcategorías Administrativas (Pestañas de Administración) */
.path-admin .tab-pane .container-fluid,
.pagelayout-admin .tab-pane .container-fluid {
    padding: 0 !important;
}

.path-admin .tab-pane hr,
.pagelayout-admin .tab-pane hr {
    display: none !important;
}

.path-admin .tab-pane .row,
.pagelayout-admin .tab-pane .row {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04) !important;
    padding: 22px 26px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 20px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: flex-start !important;
}

.path-admin .tab-pane .row:hover,
.pagelayout-admin .tab-pane .row:hover {
    border-color: #CBD5E1 !important;
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.08) !important;
}

.path-admin .tab-pane .row > .col-sm-3,
.pagelayout-admin .tab-pane .row > .col-sm-3 {
    border-right: 2px solid #F1F5F9 !important;
    padding-right: 22px !important;
    padding-left: 0 !important;
}

.path-admin .tab-pane .row > .col-sm-3 h4,
.pagelayout-admin .tab-pane .row > .col-sm-3 h4 {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.path-admin .tab-pane .row > .col-sm-9,
.pagelayout-admin .tab-pane .row > .col-sm-9 {
    padding-left: 24px !important;
    padding-right: 0 !important;
}

.path-admin .tab-pane .row > .col-sm-9 ul.list-unstyled,
.pagelayout-admin .tab-pane .row > .col-sm-9 ul.list-unstyled {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 10px 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.path-admin .tab-pane .row > .col-sm-9 ul.list-unstyled li,
.pagelayout-admin .tab-pane .row > .col-sm-9 ul.list-unstyled li {
    margin: 0 !important;
    padding: 0 !important;
}

.path-admin .tab-pane .row > .col-sm-9 ul.list-unstyled li a,
.pagelayout-admin .tab-pane .row > .col-sm-9 ul.list-unstyled li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 10px 14px !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    color: #1E293B !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.path-admin .tab-pane .row > .col-sm-9 ul.list-unstyled li a:hover,
.pagelayout-admin .tab-pane .row > .col-sm-9 ul.list-unstyled li a:hover {
    background: #EFF6FF !important;
    border-color: #BFDBFE !important;
    color: var(--color-primary, #1E40AF) !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.08) !important;
}

.path-admin .tab-pane .row > .col-sm-9 ul.list-unstyled li a::after,
.pagelayout-admin .tab-pane .row > .col-sm-9 ul.list-unstyled li a::after {
    content: "→" !important;
    font-weight: 700 !important;
    color: var(--color-primary, #1E40AF) !important;
    opacity: 0.45 !important;
    font-size: 0.95rem !important;
    margin-left: 8px !important;
    transition: all 0.2s ease !important;
}

.path-admin .tab-pane .row > .col-sm-9 ul.list-unstyled li a:hover::after,
.pagelayout-admin .tab-pane .row > .col-sm-9 ul.list-unstyled li a:hover::after {
    opacity: 1 !important;
    transform: translateX(3px) !important;
}

@media (max-width: 768px) {
    .path-admin .tab-pane .row,
    .pagelayout-admin .tab-pane .row {
        flex-direction: column !important;
        padding: 18px 16px !important;
    }
    .path-admin .tab-pane .row > .col-sm-3,
    .pagelayout-admin .tab-pane .row > .col-sm-3 {
        border-right: none !important;
        border-bottom: 2px solid #F1F5F9 !important;
        padding-bottom: 12px !important;
        margin-bottom: 14px !important;
        width: 100% !important;
    }
    .path-admin .tab-pane .row > .col-sm-9,
    .pagelayout-admin .tab-pane .row > .col-sm-9 {
        padding-left: 0 !important;
        width: 100% !important;
    }
    .path-admin .tab-pane .row > .col-sm-9 ul.list-unstyled,
    .pagelayout-admin .tab-pane .row > .col-sm-9 ul.list-unstyled {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   ESTRUCTURA DE FORMULARIO DE ADMINISTRACIÓN & RESULTADOS DE BÚSQUEDA
   ========================================================================== */

/* Flujo natural en bloque para evitar deformación por grids erróneos */
#adminsettings,
#adminsettings fieldset,
fieldset.adminsettings {
    display: block !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    clear: both !important;
}

/* Título principal de resultados de búsqueda */
#page-admin-search h2.main {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -0.02em !important;
    margin: 16px 0 24px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #E2E8F0 !important;
}

/* Títulos de sección en búsquedas administrativas */
.adminpagetitle,
#adminsettings h3.adminpagetitle,
#page-admin-search h3.adminpagetitle {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #1E293B !important;
    margin-top: 32px !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.adminpagetitle a,
#adminsettings h3.adminpagetitle a,
#page-admin-search h3.adminpagetitle a {
    color: var(--color-primary, #1E40AF) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    transition: color 0.2s ease !important;
}

.adminpagetitle a:hover,
#adminsettings h3.adminpagetitle a:hover,
#page-admin-search h3.adminpagetitle a:hover {
    color: #1D4ED8 !important;
    text-decoration: underline !important;
    transform: none !important;
    box-shadow: none !important;
}

.adminpagetitle a::before,
#adminsettings h3.adminpagetitle a::before,
#page-admin-search h3.adminpagetitle a::before {
    content: "⚙️" !important;
    font-size: 1rem !important;
}

.adminpagetitle a::after,
#adminsettings h3.adminpagetitle a::after,
#page-admin-search h3.adminpagetitle a::after {
    display: none !important;
    content: none !important;
}

/* Rutas y migas de pan en resultados de búsqueda (ul.adminpagepath) */
ul.adminpagepath,
#page-admin-search ul.adminpagepath {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 8px !important;
    list-style: none !important;
    padding: 6px 14px !important;
    margin: 0 0 16px 0 !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

ul.adminpagepath li,
#page-admin-search ul.adminpagepath li {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.82rem !important;
    color: #64748B !important;
    display: inline-flex !important;
    align-items: center !important;
}

ul.adminpagepath li:not(:last-child)::after,
#page-admin-search ul.adminpagepath li:not(:last-child)::after {
    content: "›" !important;
    margin-left: 8px !important;
    color: #94A3B8 !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
}

ul.adminpagepath li:last-child,
#page-admin-search ul.adminpagepath li:last-child {
    font-weight: 700 !important;
    color: #1E293B !important;
}

/* Resaltado de coincidencias en búsquedas */
#page-admin-search .highlight,
.path-admin .highlight {
    background-color: #FEF08A !important;
    color: #854D0E !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
}

/* Tarjetas de Categorías Administrativas puras (/admin/category.php) */
/* Solo se aplica cuando el fieldset contiene enlaces h3 directos y NO contiene filas de formulario ni títulos de búsqueda */
#adminsettings fieldset:has(> h3:not(.adminpagetitle)):not(:has(.form-item)):not(:has(.adminpagetitle)) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 16px !important;
    border: none !important;
    padding: 14px 0 28px 0 !important;
    margin: 0 !important;
}

#adminsettings fieldset:has(> h3:not(.adminpagetitle)):not(:has(.form-item)):not(:has(.adminpagetitle)) > h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.92rem !important;
}

#adminsettings fieldset:has(> h3:not(.adminpagetitle)):not(:has(.form-item)):not(:has(.adminpagetitle)) > h3 > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 100% !important;
    min-height: 56px !important;
    padding: 14px 18px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    color: #1E293B !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#adminsettings fieldset:has(> h3:not(.adminpagetitle)):not(:has(.form-item)):not(:has(.adminpagetitle)) > h3 > a:hover {
    background: #EFF6FF !important;
    border-color: #BFDBFE !important;
    color: var(--color-primary, #1E40AF) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(30, 64, 175, 0.12) !important;
}

#adminsettings fieldset:has(> h3:not(.adminpagetitle)):not(:has(.form-item)):not(:has(.adminpagetitle)) > h3 > a::after {
    content: "📁" !important;
    font-size: 1rem !important;
    opacity: 0.7 !important;
    margin-left: 10px !important;
    transition: transform 0.2s ease !important;
}

#adminsettings fieldset:has(> h3:not(.adminpagetitle)):not(:has(.form-item)):not(:has(.adminpagetitle)) > h3 > a:hover::after {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

/* Panel de métricas y filtros de plugins (/admin/plugins.php) */
#plugins-overview-panel {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
    padding: 16px 20px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}

#plugins-overview-panel .info {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 9999px !important;
    transition: all 0.2s ease !important;
}

#plugins-overview-panel .info a {
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    color: #475569 !important;
}

#plugins-overview-panel .info .badge,
#plugins-overview-panel .info .number {
    background: #E2E8F0 !important;
    color: #1E293B !important;
    border-radius: 9999px !important;
    padding: 4px 10px !important;
    font-weight: 800 !important;
    font-size: 0.76rem !important;
}

#plugins-overview-panel .info:hover {
    background: #EFF6FF !important;
    border-color: #BFDBFE !important;
}

#plugins-overview-panel .info:hover a {
    color: var(--color-primary, #1E40AF) !important;
}

#plugins-overview-panel .info a.active {
    color: var(--color-primary, #1E40AF) !important;
    font-weight: 800 !important;
}

#plugins-overview-panel .info:has(a.active) {
    background: rgba(30, 64, 175, 0.08) !important;
    border-color: var(--color-primary, #1E40AF) !important;
}

#plugins-overview-panel .info:has(a.active) .badge,
#plugins-overview-panel .info:has(a.active) .number {
    background: var(--color-primary, #1E40AF) !important;
    color: #FFFFFF !important;
}

/* Botón de revisar actualizaciones */
.checkforupdates .btn {
    border-radius: 12px !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    color: #1E293B !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
}

.checkforupdates .btn:hover {
    background: #F8FAFC !important;
    border-color: #94A3B8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Contenedor responsivo de la tabla de plugins */
.path-admin .table-responsive,
.pagelayout-admin .table-responsive {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.05) !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #CBD5E1 #F8FAFC !important;
    margin-bottom: 30px !important;
}

.path-admin .table-responsive::-webkit-scrollbar,
.pagelayout-admin .table-responsive::-webkit-scrollbar {
    height: 8px !important;
}

.path-admin .table-responsive::-webkit-scrollbar-track,
.pagelayout-admin .table-responsive::-webkit-scrollbar-track {
    background: #F8FAFC !important;
    border-radius: 4px !important;
}

.path-admin .table-responsive::-webkit-scrollbar-thumb,
.pagelayout-admin .table-responsive::-webkit-scrollbar-thumb {
    background: #CBD5E1 !important;
    border-radius: 4px !important;
}

.path-admin .table-responsive::-webkit-scrollbar-thumb:hover,
.pagelayout-admin .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94A3B8 !important;
}

/* Tabla de Plugins #plugins-control-panel */
#plugins-control-panel {
    width: 100% !important;
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 0.9rem !important;
    background: #FFFFFF !important;
}

#plugins-control-panel thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #0F172A !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 14px 16px !important;
    border: none !important;
    white-space: nowrap !important;
}

/* Filas divisorias de categorías de plugins */
#plugins-control-panel tr.plugintypeheader th {
    background: linear-gradient(90deg, #EFF6FF 0%, #F8FAFC 100%) !important;
    color: var(--color-primary, #1E40AF) !important;
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 14px 18px !important;
    border-top: 2px solid #DBEAFE !important;
    border-bottom: 1px solid #DBEAFE !important;
    border-left: 5px solid var(--color-primary, #1E40AF) !important;
}

#plugins-control-panel tr.plugintypeheader .action-icon {
    color: var(--color-primary, #1E40AF) !important;
    background: rgba(30, 64, 175, 0.1) !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    margin-left: 8px !important;
}

/* Filas normales de la tabla */
#plugins-control-panel tbody tr {
    transition: background-color 0.15s ease !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

#plugins-control-panel tbody tr:hover {
    background-color: #F8FAFC !important;
}

#plugins-control-panel tbody td {
    padding: 13px 16px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #F1F5F9 !important;
    border-top: none !important;
}

/* Celda de Nombre del Plugin */
#plugins-control-panel td.pluginname .displayname {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    font-size: 0.94rem !important;
}

#plugins-control-panel td.pluginname .pluginicon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

#plugins-control-panel td.pluginname .componentname {
    font-size: 0.75rem !important;
    color: #64748B !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    background: #F1F5F9 !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    display: inline-block !important;
    margin-top: 4px !important;
}

/* Celda de Versión */
#plugins-control-panel td.version .versionnumber {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 0.82rem !important;
    color: #475569 !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    display: inline-block !important;
}

/* Celda de Disponibilidad / Estado */
#plugins-control-panel tr.enabled td.availability {
    color: #065F46 !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
}

#plugins-control-panel tr.enabled td.availability::before {
    content: "● " !important;
    color: #10B981 !important;
    font-size: 0.85rem !important;
}

#plugins-control-panel tr.disabled td.availability {
    color: #64748B !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

#plugins-control-panel tr.disabled td.availability::before {
    content: "○ " !important;
    color: #94A3B8 !important;
    font-size: 0.85rem !important;
}

/* Botón de Configuraciones */
#plugins-control-panel td.settings a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    background: #EFF6FF !important;
    color: var(--color-primary, #1E40AF) !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#plugins-control-panel td.settings a:hover {
    background: var(--color-primary, #1E40AF) !important;
    color: #FFFFFF !important;
    border-color: var(--color-primary, #1E40AF) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(30, 64, 175, 0.25) !important;
}

/* Botón de Desinstalar */
#plugins-control-panel td.uninstall a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    background: transparent !important;
    color: #DC2626 !important;
    border: 1px solid #FECACA !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

#plugins-control-panel td.uninstall a:hover {
    background: #FEF2F2 !important;
    border-color: #F87171 !important;
    color: #B91C1C !important;
}

/* Formularios y campos de configuración en administración (.form-item.row) */
.path-admin #adminsettings .form-item.row,
.pagelayout-admin #adminsettings .form-item.row {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    padding: 22px 26px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 18px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.path-admin #adminsettings .form-item.row:hover,
.pagelayout-admin #adminsettings .form-item.row:hover {
    border-color: #CBD5E1 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05) !important;
}

.path-admin #adminsettings .form-item.row > .form-label,
.pagelayout-admin #adminsettings .form-item.row > .form-label {
    flex: 0 0 32% !important;
    max-width: 32% !important;
    text-align: left !important;
    padding-right: 24px !important;
    padding-left: 0 !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    font-size: 0.94rem !important;
    line-height: 1.4 !important;
}

.path-admin #adminsettings .form-item.row > .form-setting,
.pagelayout-admin #adminsettings .form-item.row > .form-setting {
    flex: 0 0 68% !important;
    max-width: 68% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 991px) {
    .path-admin #adminsettings .form-item.row > .form-label,
    .pagelayout-admin #adminsettings .form-item.row > .form-label {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
        padding-right: 0 !important;
    }
    .path-admin #adminsettings .form-item.row > .form-setting,
    .pagelayout-admin #adminsettings .form-item.row > .form-setting {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

.path-admin #adminsettings .form-shortname,
.pagelayout-admin #adminsettings .form-shortname {
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    display: inline-block !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 0.75rem !important;
    color: #64748B !important;
    margin-top: 6px !important;
}

.path-admin #adminsettings .form-control,
.path-admin #adminsettings .form-select,
.pagelayout-admin #adminsettings .form-control,
.pagelayout-admin #adminsettings .form-select {
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    font-size: 0.92rem !important;
    max-width: 100% !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.path-admin #adminsettings .form-control:focus,
.path-admin #adminsettings .form-select:focus,
.pagelayout-admin #adminsettings .form-control:focus,
.pagelayout-admin #adminsettings .form-select:focus {
    border-color: var(--color-primary, #1E40AF) !important;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15) !important;
    background: #FFFFFF !important;
}

.path-admin #adminsettings .form-defaultinfo,
.pagelayout-admin #adminsettings .form-defaultinfo {
    font-size: 0.82rem !important;
    color: #64748B !important;
    margin-top: 6px !important;
    display: inline-block !important;
}

.path-admin #adminsettings .form-text,
.pagelayout-admin #adminsettings .form-text {
    font-size: 0.88rem !important;
    color: #475569 !important;
    line-height: 1.5 !important;
}

/* Botón Guardar Cambios en administración */
#adminsettings .form-submit,
#adminsettings [type="submit"] {
    background: var(--color-primary, #1E40AF) !important;
    border: none !important;
    color: #FFFFFF !important;
    padding: 10px 24px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.2) !important;
    transition: all 0.2s ease !important;
}

#adminsettings .form-submit:hover,
#adminsettings [type="submit"]:hover {
    background: #1D4ED8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(30, 64, 175, 0.3) !important;
}

/* Tablas generales institucionales en administración */
.path-admin table.generaltable:not(#plugins-control-panel),
.pagelayout-admin table.generaltable:not(#plugins-control-panel) {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    width: 100% !important;
}

.path-admin table.generaltable:not(#plugins-control-panel) thead th,
.pagelayout-admin table.generaltable:not(#plugins-control-panel) thead th {
    background: #F8FAFC !important;
    color: #1E293B !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid #E2E8F0 !important;
}

.path-admin table.generaltable:not(#plugins-control-panel) tbody td,
.pagelayout-admin table.generaltable:not(#plugins-control-panel) tbody td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

.path-admin table.generaltable:not(#plugins-control-panel) tbody tr:hover td,
.pagelayout-admin table.generaltable:not(#plugins-control-panel) tbody tr:hover td {
    background-color: #F8FAFC !important;
}

/* ==========================================================================
   12. SOPORTE DE MODO OSCURO (DARK MODE)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    body.theme-dark, [data-theme="dark"] {
        background-color: var(--color-bg-dark, #0F172A) !important;
        color: var(--color-text-dark, #F8FAFC) !important;
    }
    body.theme-dark .edupremium-main-area,
    [data-theme="dark"] .edupremium-main-area,
    body.theme-dark .edupremium-tab-card,
    [data-theme="dark"] .edupremium-tab-card {
        background-color: var(--color-surface-dark, #1E293B) !important;
        color: var(--color-text-dark, #F8FAFC) !important;
    }
}

/* ==========================================================================
   13. REDISEÑO MODERNO HORIZONTAL: GESTIÓN DE CURSOS Y CATEGORÍAS (/course/management.php)
   ========================================================================== */

/* Contenedores principales de la vista de gestión */
.path-course-management #page-content,
.path-course-management #region-main,
.path-course #course-category-listings {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Layout horizontal de 2 columnas (Categorías y Cursos) y Detalle/Edición abajo */
#course-category-listings {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 24px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Columna Izquierda: Listado de Categorías (35%) */
#course-category-listings #category-listing,
#category-listing {
    flex: 0 0 calc(35% - 12px) !important;
    max-width: calc(35% - 12px) !important;
    width: calc(35% - 12px) !important;
    order: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Columna Derecha: Listado de Cursos (65%) */
#course-category-listings #course-listing,
#course-listing {
    flex: 0 0 calc(65% - 12px) !important;
    max-width: calc(65% - 12px) !important;
    width: calc(65% - 12px) !important;
    order: 2 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Detalle y Edición del curso seleccionado (Fila inferior completa debajo de categorías y cursos) */
#course-category-listings #course-detail,
#course-detail {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    order: 3 !important;
    clear: both !important;
    padding: 0 !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}

@media (max-width: 992px) {
    #course-category-listings {
        flex-wrap: wrap !important;
        gap: 20px !important;
    }
    #course-category-listings #category-listing,
    #category-listing,
    #course-category-listings #course-listing,
    #course-listing {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Tarjetas de Categorías y Cursos */
#course-listing .card,
#category-listing .card,
#course-detail .card {
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}

#course-listing .card-header,
#category-listing .card-header,
#course-detail .card-header {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 16px 20px !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #1E293B !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#course-listing .card-body,
#category-listing .card-body,
#course-detail .card-body {
    padding: 20px !important;
}

/* Botones de acción superior (Crear nuevo curso / categoría) */
.listing-actions .btn {
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    padding: 8px 18px !important;
    transition: all 0.2s ease !important;
}

/* Listas de cursos y categorías */
#course-listing .course-list,
#category-listing .category-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* BARRA HORIZONTAL DEL CURSO: DISEÑO LIMPIO Y MODERNO */
#course-listing .listitem-course,
.course-listing .listitem-course {
    width: 100% !important;
    display: block !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    margin: 0 0 10px 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

#course-listing .listitem-course:hover,
.course-listing .listitem-course:hover {
    border-color: #CBD5E1 !important;
    background-color: #F8FAFC !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-1px) !important;
}

#course-listing .listitem-course.selected,
.course-listing .listitem-course.selected {
    background-color: #EFF6FF !important;
    border-color: var(--color-primary, #1E40AF) !important;
}

/* Contenedor interno flex del curso: alineación horizontal forzada */
#course-listing .listitem-course > .d-flex,
.course-listing .listitem-course > .d-flex {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Manejador de arrastre (Drag & Drop) */
#course-listing .listitem-course .drag-handle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94A3B8 !important;
    cursor: grab !important;
    padding: 4px 6px !important;
    border-radius: 6px !important;
    transition: color 0.15s ease !important;
    flex-shrink: 0 !important;
}

#course-listing .listitem-course .drag-handle:hover {
    color: #475569 !important;
    background: #E2E8F0 !important;
}

/* Checkbox de selección masiva */
#course-listing .listitem-course .form-check,
#category-listing .listitem-category .form-check {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

#course-listing .listitem-course .bulk-action-checkbox,
#category-listing .listitem-category .bulk-action-checkbox {
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    border: 2px solid #CBD5E1 !important;
    cursor: pointer !important;
    margin: 0 !important;
    accent-color: var(--color-primary, #1E40AF) !important;
}

/* Nombre del curso (Enlace principal) */
#course-listing .listitem-course .coursename,
.course-listing .listitem-course .coursename {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
}

#course-listing .listitem-course .coursename:hover,
.course-listing .listitem-course .coursename:hover {
    color: var(--color-primary, #1E40AF) !important;
    text-decoration: underline !important;
}

/* Contenedor de acciones a la derecha */
#course-listing .listitem-course .ms-auto,
.course-listing .listitem-course .ms-auto {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

#course-listing .listitem-course .course-item-actions,
.course-listing .listitem-course .course-item-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Botones de acción individuales (Editar, Copiar, Borrar, Ocultar, Mover) */
#course-listing .listitem-course .course-item-actions a,
.course-listing .listitem-course .course-item-actions a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 1px !important;
    border: 1px solid transparent !important;
    transition: all 0.15s ease !important;
}

#course-listing .listitem-course .course-item-actions a i,
.course-listing .listitem-course .course-item-actions a i {
    font-size: 0.85rem !important;
    margin: 0 !important;
}

#course-listing .listitem-course .course-item-actions a:hover,
.course-listing .listitem-course .course-item-actions a:hover {
    background: #E2E8F0 !important;
    color: #1E293B !important;
    transform: translateY(-1px) !important;
}

#course-listing .listitem-course .course-item-actions a.action-edit:hover {
    background: #DBEAFE !important;
    color: #1D4ED8 !important;
    border-color: #BFDBFE !important;
}

#course-listing .listitem-course .course-item-actions a.action-copy:hover {
    background: #EDE9FE !important;
    color: #6D28D9 !important;
    border-color: #DDD6FE !important;
}

#course-listing .listitem-course .course-item-actions a.action-delete:hover {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
    border-color: #FECACA !important;
}

/* Ítems de Categoría en el panel izquierdo */
#category-listing .listitem-category {
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin-bottom: 6px !important;
    background: #FFFFFF !important;
    transition: all 0.2s ease !important;
}

#category-listing .listitem-category:hover {
    border-color: #CBD5E1 !important;
    background-color: #F8FAFC !important;
}

#category-listing .listitem-category.selected {
    background-color: #EFF6FF !important;
    border-color: var(--color-primary, #1E40AF) !important;
}

#category-listing .listitem-category .categoryname {
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    color: #1E293B !important;
}

/* Estilos Modernos y Estéticos para la tarjeta de Detalle y Edición del Curso (#course-detail) */
#course-detail .card {
    border: 1px solid #E2E8F0 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}

#course-detail .card-header {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 18px 24px !important;
}

#course-detail-title {
    font-size: 1.28rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#course-detail .card-body {
    padding: 24px !important;
}

/* Botones de acción del curso seleccionado (Ver, Editar, Eliminar, Ocultar, Copia de respaldo, etc.) */
#course-detail .course-detail-listing-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

#course-detail .course-detail-listing-actions .btn {
    border-radius: 9999px !important;
    padding: 8px 20px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid transparent !important;
}

#course-detail .course-detail-listing-actions a[href*="course/view.php"] {
    background-color: var(--color-primary, #1E40AF) !important;
    color: #FFFFFF !important;
}

#course-detail .course-detail-listing-actions a[href*="course/edit.php"] {
    background-color: #0284C7 !important;
    color: #FFFFFF !important;
}

#course-detail .course-detail-listing-actions a[href*="user/index.php"] {
    background-color: #7C3AED !important;
    color: #FFFFFF !important;
}

#course-detail .course-detail-listing-actions a[href*="course/delete.php"] {
    background-color: #DC2626 !important;
    color: #FFFFFF !important;
}

#course-detail .course-detail-listing-actions a[href*="action=hidecourse"],
#course-detail .course-detail-listing-actions a[href*="action=showcourse"] {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #334155 !important;
}

#course-detail .course-detail-listing-actions a[href*="backup.php"],
#course-detail .course-detail-listing-actions a[href*="restorefile.php"] {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    color: #475569 !important;
}

#course-detail .course-detail-listing-actions .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
    filter: brightness(1.08) !important;
}

/* Pares de detalle del curso (Clave - Valor) */
#course-detail .detail-pair {
    padding: 10px 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    align-items: center !important;
}

#course-detail .detail-pair:last-child {
    border-bottom: none !important;
}

#course-detail .detail-pair .pair-key {
    color: #64748B !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
}

#course-detail .detail-pair .pair-value {
    color: #0F172A !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

/* Responsividad para pantallas pequeñas en Gestión de Cursos */
@media (max-width: 768px) {
    #course-listing .listitem-course > .d-flex {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    #course-listing .listitem-course .course-item-actions {
        width: 100% !important;
        justify-content: flex-end !important;
        padding-top: 6px !important;
        border-top: 1px dashed #E2E8F0 !important;
    }
}

/* Responsividad Global adicional: Tablas, Contenedores y Overflows */
.generaltable,
.table-responsive,
.box.generalbox {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 768px) {
    .edupremium-main-area {
        padding: 16px 12px !important;
    }
    .edupremium-calendar-header-card {
        padding: 16px !important;
    }
    .edupremium-calendar-header-card h2 {
        font-size: 1.25rem !important;
    }
}

/* ==========================================================================
   14. PANEL DE CONTROL DE TODOS LOS CURSOS REGISTRADOS (MODO ADMINISTRADOR)
       Y ADAPTACIÓN EXACTA DE FOTOS DE CURSOS (SIN DEFORMACIÓN)
   ========================================================================== */
.ep-admin-courses-panel {
    width: 100% !important;
    margin-bottom: 2.5rem !important;
}

.ep-admin-courses-header-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    padding: 24px !important;
}

.ep-admin-stats-row .bg-light {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    transition: all 0.25s ease !important;
}

.ep-admin-stats-row .bg-light:hover {
    transform: translateY(-2px) !important;
    border-color: #CBD5E1 !important;
    background: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04) !important;
}

.ep-admin-course-card {
    border: 1px solid #E2E8F0 !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ep-admin-course-card:hover {
    transform: translateY(-6px) !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 16px 32px -4px rgba(0, 0, 0, 0.1) !important;
}

/* Contenedor del cuadro de foto del curso */
.ep-course-card-thumb {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 17px 17px 0 0 !important;
    background: #0F172A !important;
}

/* ==========================================================================
   REGLAS UNIVERSALES DE ADAPTACIÓN DE IMÁGENES DE CURSO (SIN DEFORMACIÓN)
   Las fotos se adaptan al 100% del contenedor con object-fit: cover
   y object-position: center para mantener siempre su proporción sin estirarse
   ========================================================================== */
.ep-course-card-thumb img,
.coursebox .courseimage img,
.coursebox .content .courseimage img,
.coursebox .summary .courseimage img,
.dashboard-card-img img,
.card-img-top img,
img.dashboard-card-img,
.course-info-container .course-image img,
.course-card .course-card-image img,
.coursebox .courseimage,
.dashboard-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0 !important;
    transition: transform 0.35s ease !important;
}

.ep-admin-course-card:hover .ep-course-card-thumb img,
.coursebox:hover .courseimage img,
.dashboard-card:hover .dashboard-card-img img {
    transform: scale(1.05) !important;
}

/* Badges sobre la foto del curso */
.ep-badge-cat-overlay {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    color: #FFFFFF !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    z-index: 2 !important;
    max-width: 60% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.ep-badge-status-overlay {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.ep-status-active {
    background: rgba(22, 101, 52, 0.92) !important;
    color: #DCFCE7 !important;
    border: 1px solid rgba(74, 222, 128, 0.4) !important;
}

.ep-status-hidden {
    background: rgba(51, 65, 85, 0.92) !important;
    color: #F1F5F9 !important;
    border: 1px solid rgba(148, 163, 184, 0.4) !important;
}

.ep-status-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #4ADE80 !important;
    display: inline-block !important;
}

.ep-status-hidden .ep-status-dot {
    background: #94A3B8 !important;
}

.ep-course-title {
    line-height: 1.4 !important;
    min-height: 2.8em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Botones de filtro de categorías y buscador rápido */
.ep-cat-filter-btn {
    transition: all 0.2s ease !important;
    font-size: 0.82rem !important;
}

.ep-cat-filter-btn:hover {
    transform: translateY(-1px) !important;
}

.ep-cat-filter-btn.active {
    background-color: var(--color-primary, #1E40AF) !important;
    border-color: var(--color-primary, #1E40AF) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.25) !important;
}

#ep-admin-course-search-input:focus {
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15) !important;
    border-color: var(--color-primary, #1E40AF) !important;
}

@media (max-width: 768px) {
    .ep-course-card-thumb {
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
    }
    .ep-admin-courses-header-card {
        padding: 16px !important;
    }
}



/* ==========================================================================
   PESTAÑAS DE NAVEGACIÓN DEL CURSO Y SALAS DE CLASES EN VIVO & GRABACIONES
   ========================================================================== */
.ep-course-nav-tabs-wrapper {
    background: transparent;
}
.ep-course-main-tabs .nav-link {
    border-radius: 9999px !important;
    padding: 0.5rem 1.25rem !important;
    color: #475569 !important;
    background-color: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    transition: all 0.2s ease-in-out !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
.ep-course-main-tabs .nav-link:hover {
    color: #1E293B !important;
    background-color: #E2E8F0 !important;
}
.ep-course-main-tabs .nav-link.active {
    color: #FFFFFF !important;
    background-color: #1E40AF !important;
    border-color: #1E40AF !important;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25) !important;
}

/* Sub-pestañas de Clases en Vivo (Próximas vs Pasadas) */
.ep-live-subtabs-bar {
    display: flex;
    align-items: center;
}
.ep-live-subtab-btn {
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.ep-live-subtab-btn.active {
    background-color: #FFFFFF !important;
    color: #1E293B !important;
}

/* Tarjetas y filas de clases en vivo y grabaciones */
.ep-class-row {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ep-class-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}
.ep-class-thumb-wrap:hover .ep-thumb-play-overlay {
    background-color: rgba(30, 64, 175, 0.9) !important;
    transform: translate(-50%, -50%) scale(1.1);
}
.ep-thumb-play-overlay {
    transition: all 0.2s ease;
}

/* Control de Volumen en Reproductor */
.ep-volume-group {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2px 10px;
}
.ep-volume-slider {
    accent-color: #3B82F6;
    height: 4px;
}
.ep-volume-slider::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3B82F6;
    cursor: pointer;
}


/* ==========================================================================
   ACTUALIZACIÓN 2026: NAVEGACIÓN SECUNDARIA ADAPTATIVA Y REPORTE DE USUARIOS
   ========================================================================== */

/* 1. Barra de Navegación Secundaria de Curso Adaptada */
.edupremium-secondary-bar {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    position: sticky !important;
    top: 64px !important;
    z-index: 990 !important;
    padding: 6px 0 !important;
    min-height: 48px !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.edupremium-secondary-inner {
    max-width: 1380px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2px 16px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Scrollbar sutil y estilizado para pestañas secundarias */
.edupremium-secondary-inner::-webkit-scrollbar {
    height: 4px !important;
    display: block !important;
}
.edupremium-secondary-inner::-webkit-scrollbar-track {
    background: #F1F5F9 !important;
    border-radius: 4px !important;
}
.edupremium-secondary-inner::-webkit-scrollbar-thumb {
    background: #CBD5E1 !important;
    border-radius: 4px !important;
}
.edupremium-secondary-inner::-webkit-scrollbar-thumb:hover {
    background: #94A3B8 !important;
}

.edupremium-secondary-inner .nav-tabs,
.edupremium-secondary-inner .more-nav,
.edupremium-secondary-inner .nav,
.edupremium-secondary-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    height: auto !important;
}

.edupremium-secondary-inner .nav-item,
.edupremium-secondary-tabs .nav-item {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Píldoras compactas, estilizadas y perfectamente acomodadas */
.edupremium-secondary-inner .nav-link,
.edupremium-secondary-inner .moremenu .nav-link,
.edupremium-secondary-tabs .nav-link {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    line-height: 32px !important;
    padding: 0 14px !important;
    border-radius: 9999px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.edupremium-secondary-inner .nav-link:hover,
.edupremium-secondary-inner .moremenu .nav-link:hover,
.edupremium-secondary-tabs .nav-link:hover {
    color: #1E40AF !important;
    background: #EFF6FF !important;
    border-color: #BFDBFE !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(30, 64, 175, 0.12) !important;
}

.edupremium-secondary-inner .nav-link.active,
.edupremium-secondary-inner .nav-item.active .nav-link,
.edupremium-secondary-inner .moremenu .nav-link.active,
.edupremium-secondary-inner .nav-link[aria-current="true"],
.edupremium-secondary-tabs .nav-link.active,
.edupremium-secondary-tabs .nav-item.active .nav-link,
.edupremium-secondary-tabs .nav-link[aria-current="true"] {
    background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: 1px solid transparent !important;
    box-shadow: 0 3px 10px rgba(30, 64, 175, 0.28) !important;
}

/* 2. Reporte de Usuarios: Vista única y sin desplazamiento lateral */
#ep-modal-users-report .modal-dialog {
    max-width: 95% !important;
    width: 1250px !important;
}
#ep-modal-users-report .modal-body {
    overflow-x: hidden !important;
    padding: 24px !important;
}
#ep-rep-table {
    width: 100% !important;
    table-layout: auto !important;
}
#ep-rep-table td, #ep-rep-table th {
    vertical-align: middle !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* 3. Modal de Edición de Usuario */
#ep-modal-edit-user {
    z-index: 1080 !important;
}
#ep-modal-edit-user .modal-dialog {
    z-index: 1085 !important;
}

/* 4. Estilos de la Vista Docente / Alumno */
.ep-teacher-course-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.ep-teacher-course-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1) !important;
}
.ep-teacher-tab-btn {
    transition: all 0.2s ease !important;
}



/* ==========================================================================
   ACTUALIZACIÓN V2: ASIGNACIÓN DE DOCENTE Y REPORTE DE USUARIOS PERFECCIONADO
   ========================================================================== */
.bg-indigo {
    background-color: #4F46E5 !important;
}

#ep-modal-assign-teacher {
    z-index: 1065 !important;
}
#ep-modal-assign-teacher .modal-dialog {
    max-width: 750px !important;
}

#ep-modal-users-report .modal-dialog {
    max-width: 95% !important;
    width: 1300px !important;
}

#ep-modal-users-report .modal-body {
    padding: 24px !important;
    overflow-x: hidden !important;
}

#ep-rep-table {
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#ep-rep-table th {
    font-size: 0.76rem !important;
    letter-spacing: 0.5px !important;
    color: #64748B !important;
    background-color: #F8FAFC !important;
    border-bottom: 2px solid #E2E8F0 !important;
    font-weight: 700 !important;
}

#ep-rep-table td {
    vertical-align: middle !important;
    border-bottom: 1px solid #F1F5F9 !important;
    font-size: 0.85rem !important;
}

#ep-rep-table tbody tr:hover {
    background-color: #F8FAFC !important;
}

.ep-doc-ppt-banner {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}


/* ==========================================================================
   PERFECCIONAMIENTO CABECERA & NAVEGACIÓN SECUNDARIA (RESPONSIVE & PÍLDORAS)
   ========================================================================== */

/* Barra de Navegación Secundaria Flotante / Sticky */
.edupremium-secondary-bar {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
    position: sticky !important;
    top: 64px !important;
    z-index: 990 !important;
    padding: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

.edupremium-secondary-inner {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 24px 0 20px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    height: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Scrollbar muy discreta y fina */
.edupremium-secondary-inner::-webkit-scrollbar {
    height: 3px !important;
    display: block !important;
}
.edupremium-secondary-inner::-webkit-scrollbar-track {
    background: transparent !important;
}
.edupremium-secondary-inner::-webkit-scrollbar-thumb {
    background: #CBD5E1 !important;
    border-radius: 9999px !important;
}

.edupremium-secondary-inner .moremenu,
.edupremium-secondary-inner .navigation {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
}

.edupremium-secondary-inner .nav-tabs,
.edupremium-secondary-inner .more-nav,
.edupremium-secondary-inner .nav,
.edupremium-secondary-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    height: 100% !important;
    list-style: none !important;
}

.edupremium-secondary-inner .nav-item,
.edupremium-secondary-tabs .nav-item {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Píldoras compactas, perfectamente alineadas y sin cortes */
.edupremium-secondary-inner .nav-link,
.edupremium-secondary-inner .moremenu .nav-link,
.edupremium-secondary-tabs .nav-link,
.edupremium-secondary-inner [data-region="morebutton"],
.edupremium-secondary-inner .dropdownmoremenu > a {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    line-height: 32px !important;
    padding: 0 16px !important;
    border-radius: 9999px !important;
    font-size: 0.83rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    margin: 0 !important;
}

.edupremium-secondary-inner .nav-link:hover,
.edupremium-secondary-inner .moremenu .nav-link:hover,
.edupremium-secondary-tabs .nav-link:hover,
.edupremium-secondary-inner [data-region="morebutton"]:hover {
    color: #1E40AF !important;
    background: #EFF6FF !important;
    border-color: #BFDBFE !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(30, 64, 175, 0.12) !important;
}

/* Píldora activa (Curso, etc.) */
.edupremium-secondary-inner .nav-link.active,
.edupremium-secondary-inner .nav-item.active .nav-link,
.edupremium-secondary-inner .moremenu .nav-link.active,
.edupremium-secondary-inner .nav-link[aria-current="true"],
.edupremium-secondary-tabs .nav-link.active,
.edupremium-secondary-tabs .nav-item.active .nav-link,
.edupremium-secondary-tabs .nav-link[aria-current="true"] {
    background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: 1px solid transparent !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3) !important;
}

/* Botón 'Más' estilizado */
[data-region="morebutton"],
.edupremium-secondary-inner [data-region="morebutton"] {
    display: inline-flex !important;
    cursor: pointer !important;
}
.edupremium-secondary-inner [data-region="morebutton"] .dropdown-toggle::after {
    margin-left: 6px !important;
}

/* Menú desplegable flotante de 'Más' */
.edupremium-secondary-inner .dropdown-menu {
    border-radius: 16px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12) !important;
    padding: 8px !important;
    z-index: 1050 !important;
    min-width: 200px !important;
}
.edupremium-secondary-inner .dropdown-menu .dropdown-item {
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #334155 !important;
    transition: all 0.15s ease !important;
}
.edupremium-secondary-inner .dropdown-menu .dropdown-item:hover {
    background-color: #F1F5F9 !important;
    color: #1E40AF !important;
}

/* ==========================================================================
   CABECERA PERFECTAMENTE ALINEADA (PÍLDORAS 38PX CON CENTRADO VERTICAL ABSOLUTO)
   ========================================================================== */
.edupremium-nav-right {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Píldora Switch Modo de Edición */
.edupremium-edit-switch-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 38px !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 9999px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    color: #FFFFFF !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.edupremium-edit-switch-wrap:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.40) !important;
    transform: translateY(-1px);
}

.edupremium-edit-switch-wrap form,
.edupremium-edit-switch-wrap .editmode-switch-form {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}

.edupremium-edit-switch-wrap .input-group {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.edupremium-edit-switch-wrap .form-check.form-switch,
.edupremium-edit-switch-wrap .form-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
}

.edupremium-edit-switch-wrap label,
.edupremium-edit-switch-wrap label.form-check-label {
    display: inline-flex !important;
    align-items: center !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.edupremium-edit-switch-wrap span.form-check-label {
    display: none !important;
}

.edupremium-edit-switch-wrap .form-check-input {
    float: none !important;
    cursor: pointer !important;
    width: 2.2em !important;
    height: 1.15em !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.35) !important;
    margin: 0 !important;
    position: static !important;
    vertical-align: middle !important;
}

.edupremium-edit-switch-wrap .form-check-input:checked {
    background-color: var(--ep-gold, #FFD200) !important;
    border-color: var(--ep-gold, #FFD200) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231E1B4B'/%3e%3c/svg%3e") !important;
}

/* Píldora Menú de Usuario */
.edupremium-user-menu {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.edupremium-user-menu .usermenu {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.edupremium-user-menu .action-menu,
.edupremium-user-menu .action-menu-trigger,
.edupremium-user-menu .action-menu-trigger .dropdown {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.edupremium-user-menu .dropdown-toggle,
.edupremium-user-menu .action-menu-trigger .dropdown a.dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 38px !important;
    box-sizing: border-box !important;
    padding: 0 14px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 9999px !important;
    color: #FFFFFF !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.edupremium-user-menu .dropdown-toggle:hover,
.edupremium-user-menu .action-menu-trigger .dropdown a.dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.40) !important;
    transform: translateY(-1px);
}

.edupremium-user-menu .userbutton {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}

.edupremium-user-menu .usertext {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    line-height: 1 !important;
}

.edupremium-user-menu .userinitials {
    background: #FFFFFF !important;
    color: var(--ep-primary-1, #1E40AF) !important;
    font-weight: 800 !important;
    font-size: 0.80rem !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    line-height: 26px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    margin: 0 !important;
}

.edupremium-user-menu .avatars {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* ==========================================================================
   14. MODAL DETALLE DE USUARIOS (ALUMNOS Y DOCENTES)
   ========================================================================== */
#ep-modal-user-detail .modal-content {
    border-radius: 1.25rem !important;
    overflow: hidden !important;
}
.ep-ud-course-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease-in-out;
}
.ep-ud-course-card:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
    border-color: #CBD5E1;
}
.ep-ud-progress-bar-wrap {
    height: 10px;
    background-color: #E2E8F0;
    border-radius: 9999px;
    overflow: hidden;
}
.ep-ud-progress-bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   15. FIJACIÓN PERMANENTE DE BOTONES DE GUARDADO / ACCIÓN (STICKY FOOTER)
   ========================================================================== */
.stickyfooter,
#sticky-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1050 !important; /* Superior al footer corporativo (10) y por debajo de modales (1080) */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12) !important;
    border-top: 1px solid #E2E8F0 !important;
}

body.hasstickyfooter {
    padding-bottom: 95px !important;
}

body.hasstickyfooter .edupremium-inst-footer {
    margin-bottom: 95px !important;
    z-index: 2 !important; /* Mantener por debajo del sticky footer para no tapar los botones */
}

/* ==========================================================================
   16. BARRA DE ACCIONES ADMINISTRATIVAS DEL CATÁLOGO (IMAGE 1 REDESIGN)
   ========================================================================== */
.ep-admin-action-toolbar button,
.ep-admin-action-toolbar a {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}
.ep-admin-action-toolbar button:hover,
.ep-admin-action-toolbar a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    filter: brightness(1.05);
}
.ep-admin-stats-row .rounded-3 {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ep-admin-stats-row .rounded-3:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
}

/* ==========================================================================
   17. VISOR DE DOCUMENTOS Y DIAPOSITIVAS (PPT)
   ========================================================================== */
#ep-doc-ppt-download-card {
    animation: epFadeIn 0.25s ease-out;
}
@keyframes epFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   18. SISTEMA DE ANUNCIOS POP-UP (GLOBAL & POR CURSO)
   ========================================================================== */
#ep-announcement-popup-modal .modal-content {
    border-radius: 20px !important;
    border: none !important;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35) !important;
    animation: epPopupSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes epPopupSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ep-announcement-html-body {
    color: #1E293B;
    font-size: 1rem;
    line-height: 1.65;
}

.ep-announcement-html-body p:last-child {
    margin-bottom: 0;
}

.ep-announcement-html-body ul,
.ep-announcement-html-body ol {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.ep-announcement-html-body a {
    color: var(--color-primary, #1E40AF);
    font-weight: 600;
    text-decoration: underline;
}

/* Timeline de Anuncios del Curso */
.ep-announcements-timeline .ep-announcement-card {
    background: #FFFFFF;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ep-announcements-timeline .ep-announcement-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   19. RESTRICCIONES RÁPIDAS DE ACTIVIDADES Y SECCIONES
   ========================================================================== */
.ep-btn-activity-restriction,
.ep-btn-section-restriction {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
}

.ep-btn-activity-restriction:hover,
.ep-btn-section-restriction:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.ep-res-mode-card {
    transition: all 0.2s ease;
}

.ep-res-mode-card:hover {
    border-color: #93C5FD !important;
    background-color: #F8FAFC !important;
}


/* ==========================================================================
   17. DISEÑO MODERNO Y ESPACIADO PARA EVALUACIONES (MOD_QUIZ)
   ========================================================================== */

/* Ocultar barra de pestañas del curso durante la realización de evaluaciones */
body.path-mod-quiz .ep-course-nav-tabs-wrapper,
body[class*="pagetype-mod-quiz-"] .ep-course-nav-tabs-wrapper {
    display: none !important;
}

/* Ancho completo y márgenes cómodos en evaluaciones (no más pegado al borde) */
body.path-mod-quiz .edupremium-page-body,
body[class*="pagetype-mod-quiz-"] .edupremium-page-body {
    padding-top: 20px !important;
    padding-bottom: 60px !important;
    max-width: 1220px !important;
}

body.path-mod-quiz .edupremium-main-area,
body[class*="pagetype-mod-quiz-"] .edupremium-main-area {
    padding: 0 4px !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Tarjeta contenedora blanca elegante para la evaluación */
.ep-quiz-card-wrapper {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    padding: 36px 40px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
    margin-bottom: 28px !important;
}

@media (max-width: 768px) {
    .ep-quiz-card-wrapper {
        padding: 22px 18px !important;
        border-radius: 12px !important;
    }
}

/* Botón de acción destacado (Reintentar cuestionario / Comenzar cuestionario) */
body.path-mod-quiz .quizstartbuttondiv,
body.path-mod-quiz .tertiary-navigation {
    margin: 0 0 28px 0 !important;
    display: flex !important;
    align-items: center !important;
}

body.path-mod-quiz .btn.btn-warning,
body.path-mod-quiz .quizstartbuttondiv .btn,
body.path-mod-quiz .tertiary-navigation .btn,
body.path-mod-quiz #page-mod-quiz-view .btn-primary {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 12px 28px !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.path-mod-quiz .btn.btn-warning:hover,
body.path-mod-quiz .quizstartbuttondiv .btn:hover,
body.path-mod-quiz .tertiary-navigation .btn:hover,
body.path-mod-quiz #page-mod-quiz-view .btn-primary:hover {
    background: linear-gradient(135deg, #D97706 0%, #B45309 100%) !important;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45) !important;
    transform: translateY(-2px) !important;
    color: #FFFFFF !important;
}

/* Caja estilizada para parámetros informativos de la evaluación */
body.path-mod-quiz .quizinfo {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-left: 4px solid #2563EB !important;
    border-radius: 12px !important;
    padding: 18px 24px !important;
    margin: 20px 0 28px 0 !important;
}

body.path-mod-quiz .quizinfo p {
    margin: 0 0 8px 0 !important;
    color: #334155 !important;
    font-size: 0.93rem !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
}

body.path-mod-quiz .quizinfo p:last-child {
    margin-bottom: 0 !important;
}

/* Títulos y puntuación */
body.path-mod-quiz h3 {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin: 32px 0 18px 0 !important;
    letter-spacing: -0.3px !important;
}

/* Tarjetas modernas para intentos previos */
body.path-mod-quiz ul.list-unstyled.row {
    margin: 0 !important;
    padding: 0 !important;
    gap: 16px !important;
}

body.path-mod-quiz ul.list-unstyled.row > li.col {
    padding: 0 !important;
    max-width: 560px !important;
    flex: 1 1 460px !important;
}

body.path-mod-quiz .card {
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

body.path-mod-quiz .card:hover {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
}

body.path-mod-quiz .card-header {
    background: #F1F5F9 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 14px 20px !important;
}

body.path-mod-quiz .card-header .card-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin: 0 !important;
}

body.path-mod-quiz table.quizreviewsummary {
    margin-bottom: 0 !important;
    border: none !important;
    width: 100% !important;
}

body.path-mod-quiz table.quizreviewsummary th.cell {
    background: #FFFFFF !important;
    color: #64748B !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    padding: 11px 20px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    width: 40% !important;
}

body.path-mod-quiz table.quizreviewsummary td.cell {
    background: #FFFFFF !important;
    color: #0F172A !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    padding: 11px 20px !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

body.path-mod-quiz .card-body {
    padding: 14px 20px !important;
    background: #FAFAFA !important;
    border-top: 1px solid #F1F5F9 !important;
}

body.path-mod-quiz .card-body a {
    color: #2563EB !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body.path-mod-quiz .card-body a:hover {
    text-decoration: underline !important;
}

/* Preguntas durante el cuestionario (attempt.php / review.php) */
body.path-mod-quiz .que {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    padding: 26px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
}

body.path-mod-quiz .que .info {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    margin-bottom: 18px !important;
}

body.path-mod-quiz .submitbtns {
    margin: 32px 0 !important;
    display: flex !important;
    gap: 12px !important;
}

/* Pie de página reducido (solo copyright) */
.edupremium-inst-footer {
    padding: 0 !important;
    margin-top: 48px !important;
    border-top: 1px solid #1E293B !important;
}

.edupremium-inst-footer-bottom {
    background: #0A1138 !important;
    padding: 24px 20px !important;
    text-align: center !important;
}

.edupremium-footer-bottom-inner p {
    margin: 0 !important;
    color: #94A3B8 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
}