/* ==========================================================================
   Raíl curricular persistente (estilo Udemy/YouTube): el curso completo
   siempre a mano desde la ficha de un tema/objeto. Mobile-first: bottom-sheet
   con barra de avance; en escritorio, panel lateral pegajoso. Todo el CSS vive
   escopetado bajo .cr-* (nombres compuestos): no toca reglas ajenas de app.css.
   ========================================================================== */
.cr-fab {
    display: inline-flex; align-items: center; gap: .5rem;
    position: fixed; right: 14px; top: 26dvh; z-index: 94;
    margin: 0; padding: .6rem .75rem; border: 1px solid var(--line, #e3e8f0); border-radius: 12px;
    background: var(--surface, #fff); color: var(--ink, #172033);
    box-shadow: 0 6px 20px rgba(10, 15, 30, .28);
    font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
    writing-mode: initial;
}
/* El FAB era un sólido de `--ink` con texto blanco: en el tema noche `--ink` es crema y el rótulo
   desaparecía. Ahora es una tarjeta elevada (surface + tinta + borde), legible en las seis variantes;
   sólo el ícono toma el acento para seguir llamando la atención. */
.cr-fab svg { flex: none; color: var(--accent, #BF4018); }
/* En móvil el botón es compacto (solo ícono + contador); en escritorio despliega la palabra. */
.cr-fab-text { display: none; }
@media (min-width: 900px) {
    .cr-fab { flex-direction: column; gap: .3rem; padding: .7rem .55rem; }
    .cr-fab-text { display: inline; }
    .cr-fab-count { writing-mode: initial; }
}
.cr-fab-count { font-weight: 500; font-size: .72rem; opacity: .85; }

/* Fondos: el sheet móvil cubre media pantalla; en desktop, panel lateral. */
.cr-scrim { position: fixed; inset: 0; z-index: 96; background: rgba(8, 12, 24, .5); border: 0; padding: 0; }
.cr-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 97;
    display: flex; flex-direction: column;
    max-height: 72dvh; width: 100%;
    background: var(--surface, #fff); color: var(--ink, #1d2430);
    border: 1px solid var(--line, #e3e8f0); border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(10, 15, 30, .25);
    transform: translateY(100%); transition: transform .22s ease;
}
body.cr-open .cr-panel { transform: none; }
body.cr-open .cr-fab { visibility: hidden; }

.cr-head {
    display: flex; align-items: center; gap: .5rem; justify-content: space-between;
    padding: .7rem .9rem; border-bottom: 1px solid var(--line, #e3e8f0);
}
.cr-course { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: inherit; text-decoration: none; min-width: 0; }
.cr-course span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-x { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 10px; background: none; color: inherit; cursor: pointer; }
.cr-x:hover { background: var(--accent-soft, rgba(120, 130, 150, .18)); }

.cr-body { overflow-y: auto; padding: .4rem .5rem .8rem; -webkit-overflow-scrolling: touch; }

.cr-mod { border-radius: 10px; }
.cr-mod + .cr-mod { margin-top: .15rem; }
.cr-mod-head {
    display: flex; align-items: center; gap: .5rem; justify-content: space-between;
    padding: .6rem .6rem; border-radius: 10px; cursor: pointer; list-style: none;
    font-weight: 700; font-size: .9rem;
}
.cr-mod-head::-webkit-details-marker { display: none; }
.cr-mod-head:hover { background: var(--accent-soft, rgba(120, 130, 150, .12)); }
.cr-mod[open] > .cr-mod-head { color: var(--accent, #4c6ef5); }
.cr-mod-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-mod-count { flex: none; font-weight: 600; font-size: .74rem; color: var(--muted, #6b7686); background: var(--accent-soft, rgba(120, 130, 150, .18)); border-radius: 999px; padding: .1rem .5rem; }

.cr-lessons { list-style: none; margin: 0; padding: 0 .25rem 0 .35rem; }
.cr-lesson a {
    display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .35rem .55rem;
    border-radius: 9px; color: inherit; text-decoration: none; font-size: .88rem;
}
.cr-lesson a:hover { background: var(--accent-soft, rgba(120, 130, 150, .16)); }
.cr-lesson a:focus-visible { outline: 2px solid var(--accent, #4c6ef5); outline-offset: 2px; }
.cr-n { flex: none; width: 1.6rem; display: inline-flex; justify-content: center; font-size: .74rem; color: var(--muted, #6b7686); }
.cr-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ok, #1d7a4c); color: var(--surface, #fff); }
.cr-ico { flex: none; display: inline-flex; color: var(--muted, #6b7686); }
.cr-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Lección actual: resaltado tipo Udemy (barra de acento + negrita). */
.cr-lesson.is-current a { background: var(--accent-soft, rgba(76, 110, 245, .14)); font-weight: 700; }
.cr-lesson.is-current .cr-ico { color: var(--accent, #4c6ef5); }

.cr-foot {
    display: flex; align-items: stretch; gap: .5rem;
    padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line, #e3e8f0);
}
.cr-nav {
    display: inline-flex; align-items: center; gap: .35rem; flex: 1 1 0; min-width: 0;
    border-radius: 10px; padding: .55rem .7rem; font-size: .82rem; font-weight: 600;
    text-decoration: none; overflow: hidden;
}
.cr-nav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-prev { justify-content: flex-start; color: var(--muted, #6b7686); border: 1px solid var(--line, #e3e8f0); }
.cr-next { justify-content: flex-end; background: var(--accent, #BF4018); color: var(--surface, #fff); }
.cr-nav.is-ghost { border-color: transparent; background: none; pointer-events: none; }
.cr-next.is-ghost { justify-content: flex-end; color: var(--muted, #6b7686); font-weight: 500; }

/* Escritorio: el mismo panel se comporta como columna lateral pegajosa (estilo YouTube). */
@media (min-width: 900px) {
    .cr-panel {
        left: auto; top: 84px; bottom: auto; right: 16px; width: 360px; max-height: calc(100dvh - 120px);
        border-radius: 14px; box-shadow: 0 14px 44px rgba(10, 15, 30, .28);
        transform: translateX(calc(100% + 24px));
    }
    body.cr-open .cr-panel { transform: none; }
    .cr-scrim { background: transparent; }        /* en desktop no oscurece: es una columna, no un modal */
}

/* ==========================================================================
   MODO VISOR (≥1200px, estilo lector de PDF): el temario queda como columna
   derecha FIJA y permanente y la lección se retrae a la izquierda, sin salir
   de la pantalla. course-rail.js pone body.cr-dock (auto-al-cargar y al tocar
   el FAB / «Ver temario»); la ✕ del panel quita la clase y devuelve el FAB.
   Todo sigue bajo prefijos .cr-* / body.cr-dock: no toca reglas ajenas. Por
   debajo de 1200px el raíl conserva el panel deslizante / bottom-sheet de arriba.
   ========================================================================== */
@media (min-width: 1200px) {
    /* Columna permanente: sin deslizamiento, a toda la altura bajo la cabecera. */
    body.cr-dock .cr-panel {
        transform: none; top: 84px; bottom: 24px; right: 24px; width: 340px; max-height: none;
        box-shadow: 0 10px 30px rgba(10, 15, 30, .16);
    }
    body.cr-dock .cr-scrim { display: none; }               /* es una columna, no un modal: sin oscurecer */
    body.cr-dock .cr-fab { visibility: hidden; opacity: 0; pointer-events: none; }

    /* Reserva el ancho de la columna para que la lectura JAMÁS quede debajo del temario. El contenedor
       sigue centrado; el padding derecho come justo el lado donde vive la columna fija. Cubre las dos
       vistas que montan el raíl: la ficha del OA (.object-page) y la ruta (.collection-detail). */
    body.cr-dock .object-page.container,
    body.cr-dock .collection-detail { padding-right: 388px; }
    /* Barra pegajosa de lectura (fixed, left/right 0): recorta su borde derecho hasta el raíl. */
    body.cr-dock .lo-sticky-bar { right: 388px; }

    /* Modo estudio: no hay site-header de 64px, manda la barra de estudio (56px); la columna se apila
       bajo ella y la compensación de altura es la misma regla que ya usa study.css para los anclajes. */
    body.cr-dock.lo-study .cr-panel { top: calc(var(--study-bar-h, 56px) + 16px); }
}

/* Accesibilidad: sin animaciones si el usuario las prefiere así. */
@media (prefers-reduced-motion: reduce) {
    .cr-panel { transition: none; }
}