/* ============================================================
   CILearning - Custom CSS
   Brand Colors from Official CILearning Style Guide
   Primary: Cyan (#05C7F2), Orange (#D1095E)
   Secondary: Magenta (#D1095E), Green (#96C127), Gray (#545454)
   Typography: Open Sans
   ============================================================ */

/* ---- CSS Custom Properties ---- */
:root {
    /* Brand Colors - Official CILearning Palette */
    --ci-primary: #05C7F2;           /* Primary Cyan - main brand color */
    --ci-primary-dark: #04A8CC;      /* Darker cyan for hover states */
    --ci-primary-light: #E6F9FD;     /* Light cyan for backgrounds */
    --ci-primary-bright: #05C7F2;    /* Bright cyan (same as primary) */
    --ci-orange: #FA8E48;            /* Primary Orange - CTA color */
    --ci-orange-dark: #E07830;       /* Darker orange for hover */
    --ci-orange-light: #FEF3EB;      /* Light orange for backgrounds */
    --ci-magenta: #D1095E;           /* Secondary Magenta */
    --ci-magenta-dark: #B00850;      /* Darker magenta for hover */
    --ci-magenta-light: #FDE8F0;     /* Light magenta for backgrounds */
    --ci-accent: #FA8E48;            /* Accent - same as orange (CTA) */
    --ci-accent-dark: #E07830;       /* Darker accent */
    --ci-green: #96C127;             /* Success/Sale color */
    --ci-green-dark: #7DA51F;        /* Darker green */

    /* Neutral Palette - Official CILearning */
    --ci-dark: #545454;              /* Dark gray for text */
    --ci-gray-900: #545454;          /* Main text color */
    --ci-gray-700: #6B6B6B;          /* Secondary text */
    /* Lo usaban cuatro reglas —dos aquí y dos en la lista de comprobación de la
       lección— sin que existiera. El tema de Academia sí lo define, así que allí
       funcionaba y aquí no: el texto tachado y el contador se quedaban del color
       que heredaran. Entre el 500 y el 700, que es donde lo daban por hecho. */
    --ci-gray-600: #7A7A7A;          /* Muted text, un punto más oscuro que el 500 */
    --ci-gray-500: #8A8A8A;          /* Muted text */
    --ci-gray-400: #A3A3A3;          /* Placeholder text */
    --ci-gray-300: #D1D1D1;          /* Borders */
    --ci-gray-200: #E8E8E8;          /* Light borders */
    --ci-gray-100: #F5F5F5;          /* Background light */
    --ci-white: #ffffff;
    --ci-cream: #FFFCF8;             /* Cream background */

    /* Typography - Official CILearning: Open Sans */
    --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Shadows - matching cilearning.com.do */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: -1px 4px 15px -2px rgba(150, 150, 150, 0.5);
    --shadow-lg: -1px 9px 25px -3px rgba(150, 150, 150, 1);
    --shadow-deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px rgba(5, 199, 242, 0.15);

    /* Border Radius - 3px on buttons per cilearning.com.do */
    --radius-xs: 3px;
    --radius-sm: 0.25rem;
    --radius-md: 5px;
    --radius-lg: 10px;
    --radius-xl: 16px;
    --radius-pill: 50rem;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Admin sidebar */
    --sidebar-width: 260px;

    /* Override Bootstrap body color to match brand */
    --bs-body-color: #545454;
    --bs-dark-rgb: 84, 84, 84;
}

/* ---- Override Bootstrap primary to Cyan ---- */
.btn-primary {
    --bs-btn-bg: var(--ci-primary);
    --bs-btn-border-color: var(--ci-primary);
    --bs-btn-hover-bg: var(--ci-primary-dark);
    --bs-btn-hover-border-color: var(--ci-primary-dark);
    --bs-btn-active-bg: var(--ci-primary-dark);
    --bs-btn-active-border-color: var(--ci-primary-dark);
    border-radius: var(--radius-xs);
}

.btn-outline-primary {
    --bs-btn-color: var(--ci-primary);
    --bs-btn-border-color: var(--ci-primary);
    --bs-btn-hover-bg: var(--ci-primary);
    --bs-btn-hover-border-color: var(--ci-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ci-primary-dark);
    border-radius: var(--radius-xs);
}

/* Orange CTA buttons - main action color on cilearning.com.do */
.btn-warning {
    --bs-btn-bg: var(--ci-orange);
    --bs-btn-border-color: var(--ci-orange);
    --bs-btn-hover-bg: var(--ci-orange-dark);
    --bs-btn-hover-border-color: var(--ci-orange-dark);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ci-orange-dark);
    --bs-btn-active-color: #fff;
    border-radius: var(--radius-xs);
}

.btn-outline-warning {
    --bs-btn-color: var(--ci-orange);
    --bs-btn-border-color: var(--ci-orange);
    --bs-btn-hover-bg: var(--ci-orange);
    --bs-btn-hover-border-color: var(--ci-orange);
    --bs-btn-hover-color: #fff;
    border-radius: var(--radius-xs);
}

/* Bright cyan buttons */
.btn-info {
    --bs-btn-bg: var(--ci-primary-bright);
    --bs-btn-border-color: var(--ci-primary-bright);
    --bs-btn-hover-bg: var(--ci-primary);
    --bs-btn-hover-border-color: var(--ci-primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ci-primary);
    --bs-btn-active-color: #fff;
    border-radius: var(--radius-xs);
}

.btn-outline-info {
    --bs-btn-color: var(--ci-primary-bright);
    --bs-btn-border-color: var(--ci-primary-bright);
    --bs-btn-hover-bg: var(--ci-primary-bright);
    --bs-btn-hover-border-color: var(--ci-primary-bright);
    --bs-btn-hover-color: #fff;
    border-radius: var(--radius-xs);
}

/* Dark buttons - using brand gray #545454 */
.btn-dark {
    --bs-btn-bg: var(--ci-dark);
    --bs-btn-border-color: var(--ci-dark);
    --bs-btn-hover-bg: #3D3D3D;
    --bs-btn-hover-border-color: #3D3D3D;
    --bs-btn-active-bg: #3D3D3D;
    border-radius: var(--radius-xs);
}

/* Success buttons - using brand green #96C127 */
.btn-success {
    --bs-btn-bg: var(--ci-green);
    --bs-btn-border-color: var(--ci-green);
    --bs-btn-hover-bg: var(--ci-green-dark);
    --bs-btn-hover-border-color: var(--ci-green-dark);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    border-radius: var(--radius-xs);
}

.btn-outline-success {
    --bs-btn-color: var(--ci-green);
    --bs-btn-border-color: var(--ci-green);
    --bs-btn-hover-bg: var(--ci-green);
    --bs-btn-hover-border-color: var(--ci-green);
    --bs-btn-hover-color: #fff;
    border-radius: var(--radius-xs);
}

/* Danger / Accent coral buttons */
.btn-danger {
    --bs-btn-bg: var(--ci-accent);
    --bs-btn-border-color: var(--ci-accent);
    --bs-btn-hover-bg: var(--ci-accent-dark);
    --bs-btn-hover-border-color: var(--ci-accent-dark);
    border-radius: var(--radius-xs);
}

.btn-outline-danger {
    --bs-btn-color: var(--ci-accent);
    --bs-btn-border-color: var(--ci-accent);
    --bs-btn-hover-bg: var(--ci-accent);
    --bs-btn-hover-border-color: var(--ci-accent);
    --bs-btn-hover-color: #fff;
    border-radius: var(--radius-xs);
}

/* General button refinements - 3px radius like cilearning.com.do */
.btn {
    border-radius: var(--radius-xs);
    font-size: 0.925rem;
    padding: 0.5rem 1.25rem;
    transition: all var(--transition-base);
}

.btn-sm {
    border-radius: var(--radius-xs);
    padding: 0.35rem 0.85rem;
    font-size: 0.825rem;
}

.btn-lg {
    border-radius: var(--radius-xs);
    padding: 0.65rem 1.75rem;
    font-size: 1rem;
}

/* Semantic color utility overrides */
.text-primary { color: var(--ci-primary) !important; }
.bg-primary { background-color: var(--ci-primary) !important; }
.bg-primary-subtle { background-color: var(--ci-primary-light) !important; }
.border-primary { border-color: var(--ci-primary) !important; }

.text-info { color: var(--ci-primary-bright) !important; }
.bg-info { background-color: var(--ci-primary-bright) !important; }
.bg-info-subtle { background-color: var(--ci-primary-light) !important; }
.border-info { border-color: var(--ci-primary-bright) !important; }

.text-warning { color: var(--ci-orange) !important; }
.bg-warning { background-color: var(--ci-orange) !important; }
.bg-warning-subtle { background-color: var(--ci-orange-light) !important; }

/* Magenta secondary color utilities */
.text-magenta { color: var(--ci-magenta) !important; }
.bg-magenta { background-color: var(--ci-magenta) !important; }
.bg-magenta-subtle { background-color: var(--ci-magenta-light) !important; }
.border-magenta { border-color: var(--ci-magenta) !important; }

.text-dark { color: var(--ci-dark) !important; }

/* ---- Typography (Open Sans per CILearning Brand Guide) ---- */
/* Brand Guide: Titles = Open Sans Extra Bold (800), Body = Open Sans Regular (400) */
body {
    font-family: var(--font-body);
    font-weight: 400;  /* Regular per brand guide */
    color: var(--ci-gray-900);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Muted text - brand gray */
.text-muted {
    color: var(--ci-gray-500) !important;
    font-weight: 400;
}

/* Lead text for subtitles */
.lead {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--ci-gray-600);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
    font-weight: 800 !important;  /* Extra Bold per CILearning Brand Guide */
    color: var(--ci-dark);
}

/* Override Bootstrap fw-bold to use Extra Bold (800) */
.fw-bold {
    font-weight: 800 !important;
}

/* Section titles - consistent styling */
.section-heading,
h2.fw-bold,
h3.fw-bold {
    font-size: 2rem;
    font-weight: 800 !important;
    color: var(--ci-dark);
    letter-spacing: -0.02em;
}

/* Allow headings to inherit white color in .text-white containers */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6,
.text-white .h1, .text-white .h2, .text-white .h3,
.text-white .h4, .text-white .h5, .text-white .h6,
.text-white p, .text-white .lead {
    color: #fff !important;
}

/* Breadcrumbs on colored backgrounds */
.text-white .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.6);
}

.text-white .breadcrumb-item a {
    color: #fff;
    opacity: 0.85;
}

.text-white .breadcrumb-item a:hover {
    opacity: 1;
}

/* Section headings - orange like cilearning.com.do "Cursos relacionados" */
.section-title {
    color: var(--ci-orange);
    font-weight: 600;
}

/* Section headings - cyan like cilearning.com.do "¿Por qué Ci.Learning?" */
.section-title-cyan {
    color: var(--ci-primary);
    font-weight: 600;
}

.brand-gradient {
    background: linear-gradient(135deg, var(--ci-primary), var(--ci-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

a {
    color: var(--ci-primary);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--ci-primary-dark);
}

/* ---- Navbar (matching cilearning.com.do) ---- */
/* La barra de navegación va por encima del contenido pegajoso de la página.

   Sin esto, el navbar y el panel de compra de la ficha de curso comparten el
   mismo z-index —los dos son .sticky-top, que Bootstrap deja en 1020— y con el
   empate gana el que va después en el HTML, que es el panel. Resultado: el menú
   del usuario se abría DETRÁS de la tarjeta de precio.

   1030 es el escalón de .fixed-top en la escala de Bootstrap: por encima de
   cualquier .sticky-top de la página y por debajo del fondo de las ventanas
   modales (1050) y del offcanvas (1040), que deben seguir tapando la barra.

   Vale para las dos marcas: el navbar de cada tema es distinto —.navbar-glass y
   .ac-navbar— pero los dos son .navbar.sticky-top. */
.navbar.sticky-top {
    z-index: 1030;
}

/* El árbol del editor de contenido se queda pegado al hacer scroll, pero no es
   chrome de la página: es contenido.

   Usaba `.sticky-top` de Bootstrap, que trae z-index 1020. Eso lo ponía por
   encima de los desplegables —que son 1000— y el selector de versiones se abría
   detrás de la columna. Es el mismo empate que tenía el navbar con el panel de
   compra, resuelto al revés: allí había que SUBIR la barra porque es chrome;
   aquí hay que no subir el panel, porque no lo es.

   z-index 1 basta para que se dibuje sobre el contenido estático de al lado sin
   estorbar a nada que se abra encima. */
.editor-arbol {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    z-index: 1;
}

/* El `max-height` de arriba no servía de nada por sí solo. La tarjeta es un
   contenedor flex y sus hijos nacen con `min-height: auto`, así que el cuerpo
   —que es quien lleva el `overflow-auto`— se negaba a encogerse y crecía por
   debajo del borde de la ventana. El scroll interno existía y no se activaba
   nunca: para llegar al final del árbol había que desplazar la página, y el
   panel es sticky, así que no se movía.

   `min-height: 0` deja que el cuerpo se encoja hasta el alto de la tarjeta, y
   entonces sí desborda por dentro. */
.editor-arbol > .card-body {
    min-height: 0;
}

/* Los módulos del árbol se pliegan con <details>, y hay que deshacer lo que el
   navegador pinta por su cuenta: el triángulo del marcador, que aparece además
   del chevron y no se puede colocar. */
.arbol-modulo > summary {
    list-style: none;
    cursor: pointer;
}

.arbol-modulo > summary::-webkit-details-marker {
    display: none;
}

.arbol-modulo > summary:hover {
    background-color: var(--ci-gray-100, #f8f9fa);
}

/* El chevron gira en vez de cambiar de icono: la transición dice que se abrió
   ese módulo y no que se pintó otra cosa. */
.arbol-chevron {
    transition: transform var(--transition-base, .2s);
    font-size: .75rem;
    flex-shrink: 0;
}

.arbol-modulo[open] > summary .arbol-chevron {
    transform: rotate(90deg);
}

/* El módulo seleccionado se pinta de azul entero, así que el hover no puede
   devolverlo al gris. */
.arbol-modulo > summary.bg-primary:hover {
    background-color: var(--ci-primary) !important;
}

.navbar-glass {
    background: var(--ci-white);
    border-bottom: none;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    z-index: 1030;
    padding: 1.25rem 0;
    min-height: 90px;
}

.navbar-glass .container {
    display: flex;
    align-items: center;
}

.navbar-glass .nav-link {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--ci-dark);
    transition: color var(--transition-fast);
    padding: 0.75rem 1.1rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.navbar-glass .nav-link:hover,
.navbar-glass .nav-link.active {
    color: var(--ci-primary);
}

.navbar-glass .navbar-brand {
    font-weight: 700;
    color: var(--ci-primary);
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-glass .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
    padding: 0.5rem 0;
    min-width: 240px;
    margin-top: 0.5rem;
}

.navbar-glass .dropdown-item {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 450;
    color: var(--ci-gray-700);
    border-radius: 0;
    transition: all var(--transition-fast);
}

.navbar-glass .dropdown-item i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    color: var(--ci-gray-400);
    transition: color var(--transition-fast);
}

.navbar-glass .dropdown-item:hover,
.navbar-glass .dropdown-item.active {
    background-color: var(--ci-primary-light);
    color: var(--ci-primary);
}

.navbar-glass .dropdown-item:hover i,
.navbar-glass .dropdown-item.active i {
    color: var(--ci-primary);
}

.navbar-glass .dropdown-divider {
    margin: 0.35rem 1rem;
    border-color: var(--ci-gray-200);
}

/* Navbar search bar - large, like cilearning.com.do */
.navbar-search-form {
    flex: 1 1 300px;
    max-width: 500px;
    display: flex;
    align-items: center;
}

.navbar-search-wrapper {
    position: relative;
    width: 100%;
}

.navbar-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ci-gray-400);
    font-size: 0.9rem;
    pointer-events: none;
}

.navbar-search-input {
    padding-left: 2.5rem !important;
    border: 1px solid var(--ci-gray-300) !important;
    border-radius: 50rem !important;
    background: var(--ci-gray-100) !important;
    font-size: 0.875rem;
    height: 40px;
}

.navbar-search-input:focus {
    background: var(--ci-white) !important;
    border-color: var(--ci-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(5, 199, 242, 0.15) !important;
}

.navbar-search-input::placeholder {
    color: var(--ci-gray-400);
}

/* ---- Search Suggestions Dropdown ---- */
.search-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--ci-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 1050;
    max-height: 400px;
    overflow-y: auto;
}

.search-suggestions.active {
    display: block;
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--ci-dark);
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--ci-gray-200);
}

.search-suggestion-item:last-child {
    border-bottom: none;
}

.search-suggestion-item:hover,
.search-suggestion-item.active {
    background: var(--ci-primary-light);
    color: var(--ci-dark);
}

.search-suggestion-img {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--ci-gray-100);
}

.search-suggestion-info {
    flex: 1;
    min-width: 0;
}

.search-suggestion-title {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-suggestion-category {
    font-size: 0.75rem;
    color: var(--ci-gray-500);
}

.search-suggestion-price {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ci-orange);
    flex-shrink: 0;
}

.search-suggestions-footer {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--ci-primary);
    border-top: 1px solid var(--ci-gray-200);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.search-suggestions-footer:hover,
.search-suggestions-footer.active {
    background: var(--ci-primary-light);
    color: var(--ci-primary-dark);
}

.search-suggestions-empty {
    padding: 16px;
    text-align: center;
    color: var(--ci-gray-500);
    font-size: 0.85rem;
}

.search-suggestions-loading {
    padding: 16px;
    text-align: center;
    color: var(--ci-gray-400);
    font-size: 0.85rem;
}

/* ---- Explore Button (like Udemy) ---- */
.btn-explore {
    background: transparent;
    border: 1px solid var(--ci-gray-300);
    color: var(--ci-dark);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    margin-right: 1rem;
}

.btn-explore:hover,
.btn-explore:focus,
.btn-explore.show {
    background: var(--ci-gray-100);
    border-color: var(--ci-gray-400);
    color: var(--ci-dark);
}

.btn-explore::after {
    margin-left: 0.4rem;
}

/* ---- Mega Menu (Courses Navigation) ---- */
.mega-menu-container {
    position: relative;
}

.dropdown-menu.mega-menu {
    width: 700px;
    max-width: calc(100vw - 2rem);
    left: 0 !important;
    right: auto !important;
    transform: none;
    padding: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.mega-menu .mega-menu-inner {
    display: flex;
    min-height: 320px;
}

.mega-menu .mega-menu-categories {
    width: 220px;
    background: var(--ci-gray-100);
    padding: 0.75rem 0;
    border-right: 1px solid var(--ci-gray-200);
    flex-shrink: 0;
}

.mega-menu .mega-menu-section-title {
    padding: 0.5rem 1rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ci-gray-500);
    margin-bottom: 0.25rem;
}

.mega-menu .mega-menu-category-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    color: var(--ci-gray-700);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 450;
    transition: all var(--transition-fast);
    border-radius: 0;
}

.mega-menu .mega-menu-category-item i:first-child {
    width: 16px;
    text-align: center;
    color: var(--ci-gray-400);
    font-size: 0.9rem;
    transition: color var(--transition-fast);
}

.mega-menu .mega-menu-category-item:hover,
.mega-menu .mega-menu-category-item.active {
    background: var(--ci-white);
    color: var(--ci-primary);
}

.mega-menu .mega-menu-category-item:hover i:first-child,
.mega-menu .mega-menu-category-item.active i:first-child {
    color: var(--ci-primary);
}

.mega-menu .mega-menu-category-item .bi-chevron-right {
    font-size: 0.65rem;
    color: var(--ci-gray-400);
    margin-left: auto;
}

.mega-menu .mega-menu-divider {
    height: 1px;
    background: var(--ci-gray-300);
    margin: 0.5rem 1rem;
}

.mega-menu .mega-menu-view-all {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    color: var(--ci-primary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.mega-menu .mega-menu-view-all:hover {
    background: var(--ci-primary-light);
    color: var(--ci-primary-dark);
}

.mega-menu .mega-menu-subcategories {
    flex: 1;
    background: var(--ci-white);
    padding: 1rem 1.25rem;
    position: relative;
    min-width: 0;
}

.mega-menu .mega-menu-subcategory-panel {
    display: none;
    height: 100%;
}

.mega-menu .mega-menu-subcategory-panel.active {
    display: flex;
    flex-direction: column;
}

.mega-menu .mega-menu-subcategory-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.2rem 1rem;
}

.mega-menu .mega-menu-subcategory-item {
    display: block;
    padding: 0.45rem 0.65rem;
    color: var(--ci-gray-700);
    text-decoration: none;
    font-size: 0.825rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mega-menu .mega-menu-subcategory-item:hover {
    background: var(--ci-primary-light);
    color: var(--ci-primary);
}

.mega-menu .mega-menu-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 1.5rem;
}

.mega-menu .mega-menu-empty i {
    font-size: 2.5rem;
    opacity: 0.3;
    margin-bottom: 0.75rem;
}

.mega-menu .mega-menu-empty p {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

/* Mobile mega menu */
@media (max-width: 991.98px) {
    .dropdown-menu.mega-menu {
        position: relative !important;
        left: 0 !important;
        transform: none;
        width: 100%;
        max-width: none;
        border-radius: var(--radius-md);
        margin: 0.5rem 0;
    }

    .mega-menu .mega-menu-inner {
        flex-direction: column;
        min-height: auto;
    }

    .mega-menu .mega-menu-categories {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--ci-gray-200);
        padding: 0.5rem 0;
    }

    .mega-menu .mega-menu-subcategories {
        display: none;
    }

    .mega-menu .mega-menu-category-item .bi-chevron-right {
        display: none;
    }
}

/* Coral accent line under navbar */
.navbar-accent-line {
    height: 3px;
    background: linear-gradient(90deg, var(--ci-accent) 0%, var(--ci-orange) 50%, var(--ci-accent) 100%);
    opacity: 0.85;
}

/* Accent button (coral "Regístrate") */
.btn-accent {
    background-color: var(--ci-accent);
    border-color: var(--ci-accent);
    color: #fff;
    border-radius: var(--radius-xs);
}

.btn-accent:hover {
    background-color: var(--ci-accent-dark);
    border-color: var(--ci-accent-dark);
    color: #fff;
}

.lang-switch {
    font-size: 0.8rem !important;
    border: 1px solid var(--ci-gray-300);
    border-radius: var(--radius-md) !important;
}

.lang-switch:hover {
    background: var(--ci-primary-light);
    border-color: var(--ci-primary);
}

/* ---- Hero Section - cyan background like cilearning.com.do ---- */
.hero-section {
    background: linear-gradient(135deg, var(--ci-primary-bright) 0%, var(--ci-primary) 100%);
    min-height: 60vh;
    color: white;
}
.hero-section[style*="background: url"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 0;
}
.hero-section[style*="background: url"] .container {
    z-index: 1;
}

.hero-bg-gradient {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(circle at 70% 50%, rgba(209, 9, 94, 0.3), transparent 70%);
    pointer-events: none;
}

.hero-title {
    font-family: var(--font-heading);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: white;
}

.hero-subtitle {
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

.min-vh-50 { min-height: 50vh; }

/* ---- Course Cards ---- */
.course-card {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    cursor: pointer;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.course-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.course-card .card-title a {
    color: var(--ci-primary);
}

.course-card .card-title a:hover {
    color: var(--ci-primary-dark);
}

.course-thumbnail {
    background: var(--ci-gray-100);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Sale/discount badge - green like cilearning.com.do "Oferta!" */
.badge-sale {
    background-color: var(--ci-green);
    color: white;
    padding: 4px 10px;
    font-weight: 700;
    font-size: 0.75rem;
    border-radius: var(--radius-md);
}

.badge-free {
    background-color: var(--ci-green);
    color: white;
    padding: 4px 10px;
    font-weight: 700;
    font-size: 0.75rem;
    border-radius: var(--radius-md);
}

/* Price styling - with discount support */
.price-with-discount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    line-height: 1.2;
}

.price-original {
    color: var(--ci-gray-500);
    text-decoration: line-through;
    font-size: 0.75rem;
    font-weight: 400;
}

.price-sale {
    color: var(--ci-primary);
    font-weight: 700;
    font-size: 1rem;
}

.discount-badge {
    display: none; /* Hidden - already shown in sale-badge */
}

/* Sale badge on course cards */
.sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--ci-magenta);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    z-index: 5;
}

.sale-badge.ending-soon {
    background: var(--ci-magenta-dark);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Sale timer text */
.sale-timer {
    font-size: 0.75rem;
    color: var(--ci-orange);
    font-weight: 500;
}

/* Course detail page - Hero price display */
.course-price-hero {
    padding: 1rem 0;
}

.course-price-hero .price-original-lg {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.course-price-hero .sale-timer-lg {
    font-size: 0.85rem;
    font-weight: 500;
}

/* Price display in course card footer */
.course-card .price-with-discount {
    align-items: flex-end;
    text-align: right;
}

.course-card .price-original {
    font-size: 0.7rem;
}

.course-card .price-sale {
    font-size: 0.95rem;
}

.course-card .price-original {
    font-size: 0.8rem;
}

.course-card .price-sale {
    font-size: 0.95rem;
}

/* ---- Category Cards ---- */
.category-card {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border-radius: var(--radius-md);
}

.category-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    background: var(--ci-primary-light) !important;
}

/* ---- Filter Pills (category filters like cilearning.com.do) ---- */
.filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 500;
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-300);
    color: var(--ci-gray-700);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-pill:hover,
.filter-pill.active {
    background: var(--ci-orange);
    border-color: var(--ci-orange);
    color: white;
    box-shadow: 0 0 0 2px var(--ci-orange);
}

/* ---- Module Header (like cilearning.com.do course sections) ---- */
.module-header {
    background: var(--ci-accent);
    color: white;
    padding: 15px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-weight: 600;
}

/* ---- Filter Section (sidebar filters) ---- */
.filter-section {
    background: var(--ci-primary);
    color: white;
    padding: 15px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.filter-section a,
.filter-section .form-check-label {
    color: white;
}

/* ---- "What you'll learn" section ---- */
.learn-section {
    background: var(--ci-primary-bright);
    padding: 20px;
    border-radius: var(--radius-md);
    color: white;
}

.learn-section .learn-item::before {
    content: "\f26a";
    font-family: "bootstrap-icons";
    margin-right: 8px;
    font-weight: bold;
}

/* ---- CTA Section - cyan/coral gradient like cilearning.com.do bottom banner ---- */
.cta-section {
    background: linear-gradient(135deg, var(--ci-primary-bright) 0%, var(--ci-accent) 100%) !important;
}

.cta-section h1,
.cta-section h2,
.cta-section h3,
.cta-section h4,
.cta-section h5,
.cta-section h6,
.cta-section p,
.cta-section .lead {
    color: #fff !important;
}

.cta-section .lead {
    opacity: 0.9;
}

/* ---- Newsletter Section ---- */
.newsletter-section {
    background: linear-gradient(135deg, var(--ci-primary) 0%, var(--ci-primary-dark) 100%) !important;
}

.newsletter-section .text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ---- Auth Pages ---- */
.auth-section {
    background: linear-gradient(135deg, var(--ci-gray-100), var(--ci-white));
    min-height: 80vh;
    display: flex;
    align-items: center;
}

/* ---- Avatar ---- */
.avatar-placeholder {
    width: 32px;
    height: 32px;
    background: var(--ci-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
}

.avatar-placeholder.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
}

.avatar-placeholder.avatar-lg {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
}

/* ---- Admin Layout ---- */
.admin-body {
    min-height: 100vh;
    background: var(--ci-gray-100);
    /* El mismo color, con nombre, para lo que tenga que taparse al hacer
       scroll por encima (barras pegajosas). Quien cambie el fondo del admin
       debe cambiar los dos: el tema de Academia lo hace en su theme.css. */
    --admin-surface: var(--ci-gray-100);
}

.admin-sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1040;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform var(--transition-base);
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
}

.admin-sidebar .sidebar-brand,
.admin-sidebar .sidebar-footer {
    flex-shrink: 0;
}

.admin-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
}

.admin-topbar {
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* Sidebar navigation */
.sidebar-link {
    color: var(--ci-gray-700) !important;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.sidebar-link i {
    color: var(--ci-gray-500);
}

.sidebar-link:hover {
    color: var(--ci-primary-dark) !important;
    background: var(--ci-primary-light);
}

.sidebar-link:hover i {
    color: var(--ci-primary-dark);
}

.sidebar-link.active {
    color: var(--ci-primary-dark) !important;
    background: var(--ci-primary-light);
    font-weight: 600;
}

.sidebar-link.active i {
    color: var(--ci-primary-dark);
}

.sidebar-brand {
    border-color: #e5e7eb !important;
}

.sidebar-footer {
    border-color: #e5e7eb !important;
}

/* Sidebar avatar */
.admin-sidebar .avatar-placeholder {
    background: var(--ci-primary);
    color: white;
}

/* ---- Stat Cards (Admin Dashboard) ---- */
.stat-card {
    border-radius: var(--radius-lg);
    border: none;
    transition: transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Progress Bar ---- */
.progress {
    border-radius: var(--radius-pill);
    height: 8px;
    background: var(--ci-gray-300);
}

.progress-bar {
    background: linear-gradient(90deg, var(--ci-primary), var(--ci-orange));
    border-radius: var(--radius-pill);
}

/* Un menú abierto dentro de una tabla con scroll se recorta contra el borde
   del contenedor, y acaba dibujándose DENTRO del recuadro en vez de encima de
   la página. Es el precio de .table-responsive: en cuanto un eje va a `auto`,
   el otro deja de ser `visible` aunque se le pida.

   Mientras haya un menú abierto, el contenedor deja de recortar. Se pierde el
   scroll horizontal durante ese rato, que es un momento y con el menú tapando
   la tabla de todas formas.

   Con :has() y no con JavaScript porque el estado ya está en el DOM —la clase
   .show del propio menú— y no hace falta escuchar dos eventos para copiarlo. */
.table-responsive:has(.dropdown-menu.show) {
    overflow: visible;
}

/* ---- Forms ---- */
.form-control,
.form-select {
    border-radius: var(--radius-md);
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--ci-gray-300);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ci-primary);
    box-shadow: 0 0 0 0.2rem rgba(5, 199, 242, 0.15);
}

/* El editor de texto enriquecido es un campo más y tiene que parecerlo.
   Summernote deja su zona de escritura transparente, así que adoptaba el
   fondo de lo que hubiera detrás. Aquí no se notaba —las tarjetas del admin
   son blancas— pero en Academia, que las pinta con su gris, quedaba el único
   campo gris de un formulario donde todos los demás son blancos: justo el más
   grande, y el único donde se escribe una lección entera. */
.note-editor.note-frame {
    border-color: var(--ci-gray-300);
    border-radius: var(--radius-md);
    /* Sin esto el blanco de dentro se sale por las esquinas redondeadas. */
    overflow: hidden;
}

.note-editor .note-editing-area,
.note-editor .note-editing-area .note-editable,
.note-editor .note-editing-area .note-codable {
    background-color: var(--ci-white);
}

/* Search bar styled like cilearning.com.do */
.search-bar {
    max-width: 600px;
    position: relative;
}

.search-bar .form-control {
    border: 1px solid var(--ci-gray-300);
    background: transparent;
    color: var(--ci-dark);
    padding-right: 2.5rem;
    border-radius: var(--radius-md);
}

.search-bar .form-control::placeholder {
    color: var(--ci-gray-500);
}

.search-bar .search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ci-gray-500);
    pointer-events: none;
}

/* ---- Tables ---- */
.table {
    --bs-table-hover-bg: var(--ci-primary-light);
}

.table thead th {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ci-gray-700);
    border-bottom-width: 2px;
}

/* ---- Cards general ---- */
.card {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-sm);
}

/* ---- Footer ---- */
.footer-section {
    background: #1a1a2e;
}

.footer-gradient-border {
    height: 4px;
    background: linear-gradient(90deg, var(--ci-primary) 0%, var(--ci-orange) 50%, var(--ci-magenta) 100%);
}

.footer-main {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

.footer-logo {
    filter: brightness(0) invert(1);
}

.footer-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.7;
}

.footer-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all var(--transition-fast);
}

.footer-links a:hover {
    color: var(--ci-orange);
    padding-left: 5px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    transition: all var(--transition-fast);
}

.footer-social a:hover {
    background: var(--ci-primary);
    color: #fff;
    transform: translateY(-3px);
}

.footer-cert-form .form-control {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.6rem 1rem;
}

.footer-cert-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.footer-cert-form .form-control:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--ci-primary);
    box-shadow: 0 0 0 3px rgba(5, 199, 242, 0.2);
    color: #fff;
}

.footer-bottom {
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.footer-lang a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--transition-fast);
}

.footer-lang a:hover,
.footer-lang a.active {
    color: #fff;
}

.footer-lang a.active {
    font-weight: 600;
}

/* ---- Pagination Custom ---- */
.page-link {
    color: var(--ci-gray-700);
    border-color: var(--ci-gray-300);
    border-radius: var(--radius-sm);
}

.page-item.active .page-link {
    background-color: var(--ci-primary);
    border-color: var(--ci-primary);
}

.page-link:hover {
    color: var(--ci-primary);
    background-color: var(--ci-primary-light);
    border-color: var(--ci-primary);
}

/* ---- Badges ---- */
.badge {
    border-radius: var(--radius-md);
    font-weight: 600;
    padding: 5px 10px;
}

.badge.bg-primary { background-color: var(--ci-primary) !important; }
.badge.bg-info { background-color: var(--ci-primary-bright) !important; }
.badge.bg-warning {
    background-color: var(--ci-orange) !important;
    color: white !important;
}
.badge.bg-danger { background-color: var(--ci-accent) !important; }
.badge.bg-success { background-color: var(--ci-green) !important; }

/* ---- Accordion (like cilearning.com.do course content) ---- */
.accordion-item {
    border: 1px solid var(--ci-gray-300);
    border-radius: var(--radius-md) !important;
    margin-bottom: 8px;
}

.accordion-button:not(.collapsed) {
    background-color: var(--ci-primary-light);
    color: var(--ci-primary);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(5, 199, 242, 0.15);
    border-color: var(--ci-primary);
}

/* ---- Alerts ---- */
.alert-primary {
    --bs-alert-bg: var(--ci-primary-light);
    --bs-alert-color: var(--ci-primary-dark);
    --bs-alert-border-color: var(--ci-primary);
}

.alert-info {
    --bs-alert-bg: var(--ci-primary-light);
    --bs-alert-color: var(--ci-primary-dark);
    --bs-alert-border-color: var(--ci-primary-bright);
}

.alert-warning {
    --bs-alert-bg: var(--ci-orange-light);
    --bs-alert-color: var(--ci-orange-dark);
    --bs-alert-border-color: var(--ci-orange);
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .admin-sidebar {
        transform: translateX(-100%);
    }

    .admin-sidebar.show {
        transform: translateX(0);
    }

    .admin-content {
        margin-left: 0;
    }

    .hero-title {
        font-size: 2.2rem;
    }
}

/* ---- Utility Classes ---- */
.object-fit-cover { object-fit: cover; }
.min-width-0 { min-width: 0; }
.letter-spacing-tight { letter-spacing: -0.02em; }
.text-orange { color: var(--ci-orange) !important; }
.text-cyan { color: var(--ci-primary) !important; }
.bg-cyan { background-color: var(--ci-primary) !important; }
.bg-cyan-bright { background-color: var(--ci-primary-bright) !important; }
.bg-orange { background-color: var(--ci-orange) !important; }

/* Logo on dark backgrounds (footer, sidebar) */
.logo-light {
    filter: brightness(0) invert(1);
}

.footer-section .brightness-0 {
    filter: brightness(0) invert(1);
}

/* ---- Delete confirmation modal ---- */
.modal-confirm .modal-header {
    border-bottom: none;
}

.modal-confirm .modal-footer {
    border-top: none;
}

.modal-content {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-lg);
}

/* ---- Animation: Fade In ---- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.5s ease forwards;
}

/* ---- Skeleton Loading ---- */
.skeleton {
    background: linear-gradient(90deg, var(--ci-gray-100) 25%, var(--ci-gray-300) 50%, var(--ci-gray-100) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Checkout Items Fix ---- */
.checkout-items .min-width-0 {
    min-width: 0;
}

/* ---- Mini Cart Dropdown ---- */
.mini-cart-container {
    position: relative;
}

.mini-cart-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    background: var(--ci-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 1050;
    margin-top: 0.5rem;
}

.mini-cart-container:hover .mini-cart-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mini-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ci-gray-200);
}

.mini-cart-items {
    max-height: 240px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.mini-cart-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    transition: background-color 0.15s ease;
}

.mini-cart-item:hover {
    background-color: var(--ci-gray-100);
}

.mini-cart-thumb {
    width: 48px;
    height: 36px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.mini-cart-thumb-placeholder {
    width: 48px;
    height: 36px;
    background: var(--ci-gray-100);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ci-gray-400);
    flex-shrink: 0;
}

.mini-cart-item-info {
    flex: 1;
    min-width: 0;
}

.mini-cart-item-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ci-dark);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-cart-item-price {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ci-primary);
}

.mini-cart-more {
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--ci-gray-500);
}

.mini-cart-footer {
    border-top: 1px solid var(--ci-gray-200);
    padding: 0.75rem 1rem;
}

.mini-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.mini-cart-actions {
    display: flex;
    gap: 0.5rem;
}

.mini-cart-actions .btn {
    flex: 1;
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
}

.mini-cart-empty {
    padding: 2rem 1rem;
    text-align: center;
}

.mini-cart-empty i {
    font-size: 2.5rem;
    color: var(--ci-gray-300);
    margin-bottom: 0.5rem;
    display: block;
}

.mini-cart-empty p {
    color: var(--ci-gray-500);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Cart badge animation */
.cart-badge {
    font-size: 0.65rem;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide mini cart on mobile */
@media (max-width: 991.98px) {
    .mini-cart-dropdown {
        display: none;
    }
}

/* ---- Print styles ---- */
@media print {
    .navbar-glass,
    .footer-section,
    .admin-sidebar,
    .admin-topbar,
    .btn {
        display: none !important;
    }

    .admin-content {
        margin-left: 0 !important;
    }
}

/* ============================================================
   CONFIRMATION MODAL
   ============================================================ */
.confirm-icon-wrapper {
    display: flex;
    justify-content: center;
}

.confirm-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    transition: all 0.2s ease;
}

.confirm-icon.confirm-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.confirm-icon.confirm-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.confirm-icon.confirm-info {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

#confirmModal .modal-content {
    border: none;
}

#confirmModal .btn-light {
    background: #f3f4f6;
    border: none;
    color: #4b5563;
}

#confirmModal .btn-light:hover {
    background: #e5e7eb;
}

/* Fix loading button alignment */
#confirmModal .btn,
form[data-confirm] button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

#confirmModal .btn .spinner-border,
form[data-confirm] button[type="submit"] .spinner-border {
    flex-shrink: 0;
}

/* ============================================================
   STUDENT UX REDESIGN
   Continue Learning Hero, Filter Tabs, Course Cards, Learn Page
   ============================================================ */

/* ---- Continue Learning Hero ---- */
.continue-hero {
    background: linear-gradient(135deg, var(--ci-primary-light) 0%, transparent 100%);
    border: 1px solid rgba(5, 199, 242, 0.15);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: box-shadow var(--transition-base);
}
.continue-hero:hover {
    box-shadow: var(--shadow-md);
}
.continue-hero .hero-thumb {
    width: 180px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius-md);
}
@media (max-width: 575.98px) {
    .continue-hero .hero-thumb {
        width: 100%;
        height: 120px;
        margin-bottom: 0.75rem;
    }
}

/* ---- Course Filter Tabs ---- */
.course-filter-tabs .nav-link {
    color: var(--ci-gray-500);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    transition: all var(--transition-fast);
}
.course-filter-tabs .nav-link:hover {
    color: var(--ci-primary);
    background: var(--ci-primary-light);
}
.course-filter-tabs .nav-link.active {
    color: white;
    background: var(--ci-primary);
}
.course-filter-tabs .filter-count {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ---- Student Course Cards (enhanced) ---- */
.student-course-card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    overflow: hidden;
}
.student-course-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.student-course-card .card-thumb-wrapper {
    position: relative;
    overflow: hidden;
}
.student-course-card .card-thumb-wrapper img {
    transition: transform var(--transition-slow);
}
.student-course-card:hover .card-thumb-wrapper img {
    transform: scale(1.03);
}
.student-course-card .thumb-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
}
.student-course-card .thumb-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--ci-primary), var(--ci-orange));
    transition: width var(--transition-slow);
}
.student-course-card .card-status-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* ---- Learn Page: Sidebar Improvements ---- */
.learn-sidebar .lesson-active {
    border-left: 3px solid var(--ci-primary);
    background: var(--ci-primary-light);
}
.learn-sidebar .section-progress {
    font-size: 0.7rem;
    color: var(--ci-gray-500);
}

/* ---- Learn Page: Lesson Nav ---- */
.lesson-nav {
    border-top: 1px solid var(--ci-gray-200);
    padding-top: 1rem;
    margin-top: 1rem;
}
.lesson-nav > a {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Learn Page: Mobile Navigation ---- */
.lesson-nav-mobile {
    border-top: 1px solid var(--ci-gray-200);
    padding-top: 1rem;
    margin-top: 1rem;
}
.lesson-nav-mobile .btn {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

/* ---- Learn Page: Mobile Offcanvas ---- */
#courseSidebarOffcanvas .accordion-button {
    padding: 0.75rem 1rem;
}
#courseSidebarOffcanvas .list-group-item {
    padding: 0.5rem 1rem;
}
#courseSidebarOffcanvas .lesson-active {
    border-left: 3px solid var(--ci-primary);
    background: var(--ci-primary-light);
}

/* ---- Content Type Badge ---- */
.content-type-badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: 0.2em 0.6em;
    border-radius: var(--radius-xs);
}

/* ============================================================
   WISHLIST BUTTON STYLES
   ============================================================ */

/* Wishlist Button on Cards */
.btn-wishlist {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: var(--ci-gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0;
    z-index: 2;
}

.card:hover .btn-wishlist,
.btn-wishlist:focus {
    opacity: 1;
}

.btn-wishlist:hover {
    background: #fff;
    color: var(--ci-accent);
    transform: scale(1.1);
}

.btn-wishlist.active {
    opacity: 1;
    color: var(--ci-accent);
}

.btn-wishlist.active i {
    animation: wishlist-pop 0.3s ease;
}

@keyframes wishlist-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Wishlist Button on Course Detail Page */
.btn-wishlist-detail {
    transition: all 0.2s ease;
    background-color: #fff;
}

.btn-wishlist-detail:hover {
    background-color: #fff5f5;
    border-color: #e53e3e !important;
    color: #e53e3e;
}

.btn-wishlist-detail.active {
    background-color: #fff5f5;
    border-color: #e53e3e !important;
    color: #e53e3e;
}

.btn-wishlist-detail.active:hover {
    background-color: #fed7d7;
}

/* ============================================================
   CONTENIDO DE LECCIÓN (.lesson-content)
   Vocabulario de componentes para el material de lectura.
   Todo se apoya en las variables --ci-*, así que cada tema lo
   hereda con su propia paleta sin escribir una línea extra.
   ============================================================ */
.lesson-content { font-size: 1.0625rem; line-height: 1.8; color: var(--ci-gray-900); }
.lesson-content > *:first-child { margin-top: 0; }
.lesson-content > *:last-child { margin-bottom: 0; }
.lesson-content img.img-fluid { display: block; margin: 1.25rem auto 0.5rem; border-radius: 6px; }
.lesson-content p.text-center + p.text-muted.small { margin-top: -0.25rem; }

/* Cada h3 abre una sección. El filete a todo el ancho con un tramo en color
   encima es lo que separa los bloques de una lectura larga: el HTML llega
   plano desde content_body (títulos y párrafos hermanos, sin contenedores),
   así que la división tiene que salir del propio título. */
.lesson-content h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem; font-weight: 700; line-height: 1.25;
    margin: 3.25rem 0 1.15rem; padding-top: 1.9rem; color: var(--ci-dark);
    border-top: 1px solid var(--ci-gray-200);
    position: relative;
}
.lesson-content h3::before {
    content: '';
    position: absolute; top: -1px; left: 0;
    width: 2.75rem; height: 3px; border-radius: 2px;
    background: var(--ci-primary);
}
/* El primero va detrás de la entradilla, que ya separa por su cuenta. */
.lesson-content > h3:first-of-type { margin-top: 2.25rem; }
.lesson-content h4 {
    font-family: var(--font-heading);
    font-size: 1.1875rem; font-weight: 700;
    margin: 2.35rem 0 .8rem; color: var(--ci-dark);
    padding-left: .7rem; border-left: 3px solid var(--ci-gray-300);
}
.lesson-content h5 {
    font-size: 1rem; font-weight: 700; letter-spacing: .02em;
    margin: 1.5rem 0 .5rem; color: var(--ci-gray-700);
}
.lesson-content p { margin: 0 0 1.4rem; }
.lesson-content ul, .lesson-content ol { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.lesson-content li { margin-bottom: .65rem; }
.lesson-content li > ul, .lesson-content li > ol { margin-top: .5rem; }
.lesson-content strong { font-weight: 700; color: var(--ci-dark); }
.lesson-content a { color: var(--ci-primary); text-underline-offset: .18em; }

/* Entradilla: primer párrafo destacado */
.lesson-lead {
    font-size: 1.1875rem; line-height: 1.7; color: var(--ci-gray-700);
    border-left: 3px solid var(--ci-primary);
    background: var(--ci-primary-light);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 1rem 1.25rem; margin-bottom: 2.25rem;
}

/* Avisos. .is-tip consejo · .is-warning cuidado · .is-key idea clave */
.lesson-callout {
    display: flex; gap: .85rem; align-items: flex-start;
    border: 1px solid var(--ci-gray-200);
    border-left: 4px solid var(--ci-primary);
    background: var(--ci-gray-100);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.2rem; margin: 1.9rem 0;
}
.lesson-callout > i, .lesson-callout > .lesson-callout-icon {
    flex: 0 0 auto; font-size: 1.2rem; line-height: 1.4; color: var(--ci-primary);
}
.lesson-callout p:last-child { margin-bottom: 0; }
.lesson-callout-title { display: block; font-weight: 700; margin-bottom: .25rem; color: var(--ci-dark); }
.lesson-callout.is-tip     { border-left-color: var(--ci-green);   }
.lesson-callout.is-tip > i { color: var(--ci-green); }
.lesson-callout.is-warning     { border-left-color: var(--ci-magenta); }
.lesson-callout.is-warning > i { color: var(--ci-magenta); }
.lesson-callout.is-key     { border-left-color: var(--ci-accent); }
.lesson-callout.is-key > i { color: var(--ci-accent); }

/* Figuras: diagramas en SVG en línea, sin archivos externos */
.lesson-figure {
    margin: 2.1rem 0; padding: 1.35rem;
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-200);
    border-radius: var(--radius-lg);
    text-align: center;
}
/* El SVG escala con el contenedor, así que estirarlo más allá de su lienzo
   agranda también su texto. Se limita al ancho natural del viewBox. */
.lesson-figure svg, .lesson-figure img { width: 100%; max-width: 640px; height: auto; }

/* En el móvil el SVG se encogía a la mitad y su texto con él: las etiquetas de
   un diagrama de flujo quedaban en 8 px reales, que no se leen. Se le pone un
   ancho mínimo y la figura desplaza en horizontal, igual que hacen las tablas.
   El desplazamiento vive DENTRO de la figura, así que la página no se mueve. */
@media (max-width: 575.98px) {
    .lesson-figure { overflow-x: auto; }
    .lesson-figure svg { min-width: 460px; }
}
.lesson-figure figcaption {
    margin-top: .85rem; font-size: .875rem; color: var(--ci-gray-500);
    text-align: center;
}

/* Pasos numerados */
.lesson-steps { list-style: none; counter-reset: paso; padding-left: 0; margin: 1.9rem 0; }
.lesson-steps > li {
    position: relative; padding-left: 2.75rem; margin-bottom: 1.1rem; counter-increment: paso;
}
.lesson-steps > li::before {
    content: counter(paso);
    position: absolute; left: 0; top: -.1rem;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--ci-primary); color: #fff;
    font-size: .9rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* Comparativa lado a lado: así no / así sí */
.lesson-compare { display: grid; gap: 1rem; margin: 1.9rem 0; }
@media (min-width: 768px) { .lesson-compare { grid-template-columns: 1fr 1fr; } }
.lesson-compare > div {
    border: 1px solid var(--ci-gray-200); border-radius: var(--radius-md); padding: 1rem 1.15rem;
}
.lesson-compare .lesson-compare-title { display: block; font-weight: 700; margin-bottom: .5rem; }
.lesson-compare .is-bad  { border-top: 3px solid var(--ci-magenta); }
.lesson-compare .is-bad  .lesson-compare-title { color: var(--ci-magenta); }
.lesson-compare .is-good { border-top: 3px solid var(--ci-green); }
.lesson-compare .is-good .lesson-compare-title { color: var(--ci-green-dark); }

/* Glosario */
.lesson-terms { margin: 1.9rem 0; }
.lesson-terms dt { font-weight: 700; color: var(--ci-dark); margin-top: .9rem; }
.lesson-terms dd { margin: .2rem 0 0; padding-left: 0; color: var(--ci-gray-700); }

/* Código y pseudocódigo de PSeInt */
.lesson-content pre {
    background: var(--ci-dark); color: #f4f6f8;
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem; margin: 1.9rem 0;
    overflow-x: auto; font-size: .9rem; line-height: 1.6;
}
.lesson-content pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* Código dentro de un párrafo.
 *
 * Antes era gris sobre gris —fondo gray-100, texto del mismo color que el
 * cuerpo— y en una frase como «la variable `nombre` recibe `Lina`» no se
 * distinguía de la prosa. En este curso eso importa más que en otros: la
 * diferencia entre un nombre y una palabra entre comillas ES lo que se está
 * enseñando, y si en pantalla se ven iguales, la lección no se puede seguir.
 *
 * Mismo aspecto en la lección y en las preguntas, que es donde el alumno
 * compara las dos cosas.
 */
.lesson-content :not(pre) > code,
.lesson-practice code,
.quiz-question code {
    background: rgba(199, 36, 109, .06);
    color: #b0246a;
    border: 1px solid rgba(199, 36, 109, .16);
    border-radius: var(--radius-xs);
    padding: .12rem .4rem;
    font-size: .88em;
    font-weight: 500;
    white-space: nowrap;
}
/* Un `código` dentro de una negrita tiene que verse en negrita.
 *
 * El peso 500 de la píldora gana por especificidad sobre el <strong> que la
 * envuelve, así que «**`touched`** — ¿ha estado el usuario aquí?» llegaba al
 * alumno con el rótulo del mismo grosor que el resto. El marcado siempre fue
 * correcto —el conversor produce <strong><code>—; faltaba esta línea. Son 67
 * sitios de los tres cursos, casi todos rótulos que abren un párrafo.
 */
.lesson-content strong > code,
.lesson-practice strong > code,
.quiz-question strong > code {
    font-weight: 700;
}
/* La pausa de «antes de seguir, predice».
 *
 * En el markdown va como cita (>) y hasta ahora salía como un párrafo más: sin
 * borde, sin fondo, sin nada. Esa pausa existe para cortar la lectura justo
 * antes de dar la respuesta, y si no se distingue del cuerpo no corta nada —
 * el ojo pasa de largo y se lleva la solución por delante.
 */
.lesson-content blockquote {
    margin: 1.9rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--ci-primary);
    background: var(--ci-gray-100);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.lesson-content blockquote > *:first-child { margin-top: 0; }
.lesson-content blockquote > *:last-child  { margin-bottom: 0; }
/* Un bloque de código dentro de la pausa no necesita tanto aire como uno suelto. */
.lesson-content blockquote pre { margin: 1rem 0; }

.lesson-code-label {
    display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ci-gray-500); margin-bottom: -.6rem;
}

/* Tablas: deben poder desplazarse en móvil sin romper la página */
.lesson-table-wrap { overflow-x: auto; margin: 1.9rem 0; }
.lesson-content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.lesson-content th, .lesson-content td {
    border: 1px solid var(--ci-gray-200); padding: .6rem .8rem; text-align: left; vertical-align: top;
}
.lesson-content thead th { background: var(--ci-gray-100); font-weight: 700; color: var(--ci-dark); }

@media (max-width: 575.98px) {
    .lesson-content { font-size: 1rem; }
    .lesson-content h3 { font-size: 1.3rem; }
}


/* ---- Bloque de código: cabecera, aspecto de editor y botón de copiar ---- */
.lesson-code {
    margin: 1.9rem 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    background: var(--ci-dark);
}
.lesson-code-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .5rem .75rem .5rem 1rem;
    background: rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.lesson-code-name {
    font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
}
.lesson-code-copy {
    display: inline-flex; align-items: center; gap: .4rem;
    background: transparent; border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .8);
    border-radius: var(--radius-xs);
    font-size: .78rem; font-weight: 600; padding: .25rem .6rem;
    cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast);
}
.lesson-code-copy:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.lesson-code-copy.is-done { border-color: var(--ci-green); color: var(--ci-green); }
.lesson-code .lesson-code-copy:focus-visible { outline: 2px solid var(--ci-primary); outline-offset: 2px; }

/* El <pre> ya no lleva su propio fondo ni borde: los pone el envoltorio. */
.lesson-code pre {
    margin: 0; border-radius: 0; border: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    tab-size: 4;
}
/* La etiqueta suelta se oculta: su texto pasa a la cabecera del bloque. */
.lesson-content .lesson-code-label.is-consumed { display: none; }


/* ============================================================
   EXAMEN: opciones de respuesta
   El control por defecto de Bootstrap es un círculo de 1em con
   borde muy claro: sobre el fondo del examen apenas se distingue
   cuál está marcada. Se agranda, se le sube el contraste al borde
   y la fila entera se vuelve pulsable.
   ============================================================ */
/* El contenedor ES un <label>, no un div con un label dentro: así toda la caja
   —borde, relleno y espacio en blanco incluidos— selecciona la opción. Antes
   solo respondía el texto, y en una opción corta como «9» eso son doce píxeles
   de blanco en una fila de mil. */
.quiz-option {
    display: flex; align-items: flex-start; gap: .75rem;
    border: 1px solid var(--ci-gray-200);
    border-radius: var(--radius-md);
    padding: .7rem .9rem; margin-bottom: .6rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.quiz-option:hover { border-color: var(--ci-primary); background: var(--ci-primary-light); }
.quiz-option .form-check-input {
    flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin: .1rem 0 0;
    border: 2px solid var(--ci-gray-400);
    cursor: pointer;
}
.quiz-option .form-check-input:checked {
    background-color: var(--ci-primary);
    border-color: var(--ci-primary);
}
.quiz-option .form-check-input:focus {
    border-color: var(--ci-primary);
    box-shadow: 0 0 0 .2rem var(--ci-primary-light);
}
.quiz-option .form-check-label { cursor: pointer; margin: 0; line-height: 1.5; }
/* La opción marcada se distingue de un vistazo, no solo por el punto. */
.quiz-option:has(.form-check-input:checked) {
    border-color: var(--ci-primary);
    background: var(--ci-primary-light);
    box-shadow: inset 0 0 0 1px var(--ci-primary);
}

/* ============================================================
   VISTA DE APRENDIZAJE: panel lateral plegable
   ============================================================ */
.learn-toggle {
    display: inline-flex; align-items: center; gap: .45rem;
    background: transparent; border: 1px solid var(--ci-gray-300);
    color: var(--ci-gray-700); border-radius: var(--radius-md);
    font-size: .85rem; font-weight: 600; padding: .35rem .75rem;
    cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.learn-toggle:hover { border-color: var(--ci-primary); color: var(--ci-primary); }

/* Plegado: el panel desaparece y el contenido ocupa el ancho completo. */
.learn-layout.is-collapsed .learn-sidebar-col { display: none !important; }
.learn-layout.is-collapsed .learn-content-col { flex: 0 0 100%; max-width: 100%; }


/* ============================================================
   NAVEGACIÓN ENTRE LECCIONES
   Los botones eran btn-sm con contorno fino: sobre el fondo claro
   apenas se distinguían entre sí ni del resto de la página, y no
   se veía cuál era la acción principal.
   ============================================================ */
.lesson-nav { gap: .75rem; padding-top: 1rem; }
.lesson-nav .btn {
    padding: .55rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    border-width: 1.5px;
    max-width: 40%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Anterior: secundario, pero legible. */
.lesson-nav-prev {
    --bs-btn-color: var(--ci-gray-700);
    --bs-btn-border-color: var(--ci-gray-300);
    --bs-btn-hover-color: var(--ci-dark);
    --bs-btn-hover-bg: var(--ci-gray-100);
    --bs-btn-hover-border-color: var(--ci-gray-400);
}
/* Siguiente: es la acción que se espera, así que va rellena siempre. */
.lesson-nav-next {
    --bs-btn-bg: var(--ci-primary);
    --bs-btn-border-color: var(--ci-primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--ci-primary-dark);
    --bs-btn-hover-border-color: var(--ci-primary-dark);
    --bs-btn-hover-color: #fff;
    box-shadow: var(--shadow-sm);
}
@media (max-width: 991.98px) {
    .lesson-nav .btn { max-width: none; }
}


/* ============================================================
   TEMARIO: unidades (tercer nivel)
   La unidad se pliega, y la terminada se pliega sola: en un curso
   de diez módulos el panel acaba siendo una lista de cincuenta
   filas de las que la mitad ya están hechas. Plegarlas deja a la
   vista lo que falta.
   El plegado NO usa el acordeón de Bootstrap: las lecciones se
   quedan como hermanas de la cabecera —el JS recorre hermanos
   para recontar el progreso de la unidad— y se esconden con una
   clase. Ver learn-section-children.php.
   ============================================================ */
.unit-head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .4rem 1rem .3rem;
    background: var(--ci-gray-100);
    border-top: 1px solid var(--ci-gray-200);
    border-bottom: 1px solid var(--ci-gray-200);
    cursor: pointer;
    user-select: none;
}
.unit-head:hover { background: var(--ci-gray-200); }
.unit-head:focus-visible { outline: 2px solid var(--ci-primary); outline-offset: -2px; }
/* La flecha apunta abajo cuando está abierta y a la derecha cuando está
   plegada, igual que la del módulo. Es la única señal de que la fila se
   puede pulsar, así que no se esconde en móvil. */
.unit-caret {
    flex: 0 0 auto;
    font-size: .65rem;
    color: var(--ci-gray-500);
    transition: transform .15s ease;
}
.unit-head.is-collapsed .unit-caret { transform: rotate(-90deg); }
/* Unidad terminada: verde. El contador ya lo decía en gris y había que
   leerlo; el color se ve sin leer. */
.unit-head.is-done { background: rgba(150, 193, 39, .12); border-color: rgba(150, 193, 39, .35); }
.unit-head.is-done .unit-title,
.unit-head.is-done .unit-caret { color: var(--ci-green-dark); }
.list-group-item.in-unit.is-hidden { display: none !important; }
.unit-title {
    flex: 1 1 auto;
    font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ci-gray-600); line-height: 1.35;
}
.unit-progress {
    flex: 0 0 auto;
    font-size: .68rem; font-weight: 700; color: var(--ci-gray-500);
    white-space: nowrap;
}
.unit-progress.is-done { color: var(--ci-green-dark); }

/* Número de lección: 3.1, 3.2… Dice en qué punto del módulo estás y cuánto
   queda, que es lo que un título por sí solo no dice. Ancho fijo para que los
   títulos queden alineados en columna y la lista se pueda recorrer con la
   vista sin tropezar. */
.lesson-num {
    flex: 0 0 auto;
    min-width: 2.2rem;
    margin-right: .4rem;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ci-gray-400);
    letter-spacing: .01em;
}
.lesson-active .lesson-num { color: var(--ci-primary); }
.lesson-link:hover .lesson-num { color: var(--ci-gray-500); }

/* Aquí hubo un `background: white` en .lesson-check. Era andamiaje para un
   hilo vertical que uniera las lecciones y que al final no se dibujó, porque
   el riel de la unidad ya cumple esa función y dos líneas verticales al lado
   son ruido. El andamiaje se quedó, y pintaba un recuadro blanco detrás de
   cada visto: invisible sobre fondo blanco, y bien visible sobre la lección
   activa, que va en azul claro. El icono no lleva fondo: hereda el de su fila.

   La lección: un fondo opaco puesto para tapar algo solo es correcto mientras
   ese algo exista. Si se cae la razón, se cae la regla. */

/* El módulo abierto se distingue del resto. Antes había que fijarse en la
   flecha para saber cuál estaba desplegado. */
.learn-sidebar .accordion-button:not(.collapsed),
#courseSidebarOffcanvas .accordion-button:not(.collapsed) {
    background: var(--ci-primary-light);
    box-shadow: none;
}

/* Riel vertical: es lo que hace evidente de un vistazo dónde acaba
   la unidad. Sin él, una lección suelta justo después de una unidad
   parece pertenecer a ella. */
.list-group-item.in-unit {
    padding-left: 2rem !important;
    position: relative;
}
.list-group-item.in-unit::before {
    content: '';
    position: absolute; left: 1rem; top: 0; bottom: 0;
    width: 2px; background: var(--ci-gray-200);
}
/* La lección activa DENTRO de una unidad salía con dos filos azules: el
   borde de .lesson-active pegado al panel y, un poco más adentro, el riel
   de la unidad teñido de primario. Se queda solo el riel, que además dice
   a qué unidad pertenece la lección. El borde no se quita, se vuelve
   transparente: quitarlo movería el texto 3 px al activarse. */
.list-group-item.in-unit.lesson-active::before { background: var(--ci-primary); width: 3px; }
.learn-sidebar .list-group-item.in-unit.lesson-active,
#courseSidebarOffcanvas .list-group-item.in-unit.lesson-active { border-left-color: transparent; }

@media (max-width: 991.98px) {
    #courseSidebarOffcanvas .unit-head { padding: .35rem 1rem .25rem; }
    #courseSidebarOffcanvas .list-group-item.in-unit { padding-left: 1.75rem !important; }
    #courseSidebarOffcanvas .list-group-item.in-unit::before { left: .85rem; }
}