/**
 * Tweak #3 — Unidades colapsables: estructura y animación.
 *
 * La animación usa grid-template-rows 0fr→1fr: colapso suave a altura
 * automática sin medir alturas en JS (soportado por todos los navegadores
 * modernos; en navegadores antiguos el cambio es instantáneo, sin rotura).
 *
 * v2.0.0: la piel "Propuesta A" del sidebar que vivía aquí fue reemplazada
 * por la piel Notebook (assets/css/notebook.css), que viste el sidebar y el
 * área de contenido en lecciones/tópicos/quizzes. Esta hoja conserva solo
 * lo transversal: la mecánica del acordeón, los chips, el tratamiento de
 * las unidades en la PORTADA del curso y el fix del botón "Iniciar Curso".
 */

.ldtw-unidad {
    list-style: none;
    margin: 0 0 8px;
}

/* ── Encabezado de unidad ─────────────────────────────────────────── */

.ldtw-unidad > .ld-item-list-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--bb-content-alternate-background-color, #f2f4f5);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ldtw-unidad > .ld-item-list-section-heading:hover {
    border-color: var(--bb-content-border-color, #d6d9dd);
    background: var(--bb-content-background-color, #fff);
}

.ldtw-unidad > .ld-item-list-section-heading:focus-visible {
    outline: 2px solid var(--bb-primary-color, #385dff);
    outline-offset: 2px;
}

/* Tipografía del título que ya trae el tema, normalizada dentro del
   control. El tema trunca con nowrap+ellipsis+hidden; aquí el título
   se muestra completo con salto de línea (el cuerpo del control crece). */
.ldtw-unidad > .ld-item-list-section-heading h3,
.ldtw-unidad > .ld-item-list-section-heading h4,
.ldtw-unidad > .ld-item-list-section-heading .ld-lesson-section-heading {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bb-headings-color, #1e2132);
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* ── Chevron ──────────────────────────────────────────────────────── */

.ldtw-chevron {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--bb-alternate-text-color, #9b9c9f);
    border-bottom: 2px solid var(--bb-alternate-text-color, #9b9c9f);
    transform: rotate(45deg); /* apunta abajo = colapsada */
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: -3px;
}

.ldtw-unidad.ldtw-abierta > .ld-item-list-section-heading .ldtw-chevron {
    transform: rotate(225deg); /* apunta arriba = abierta */
    margin-top: 3px;
}

/* ── Cuerpo animable ──────────────────────────────────────────────── */

.ldtw-unidad-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.ldtw-unidad.ldtw-abierta > .ldtw-unidad-body {
    grid-template-rows: 1fr;
}

.ldtw-unidad-items {
    overflow: hidden;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.24s ease 0.02s, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.ldtw-unidad.ldtw-abierta .ldtw-unidad-items {
    opacity: 1;
    transform: translateY(0);
}

/* Aire entre el encabezado y el primer ítem al abrir */
.ldtw-unidad.ldtw-abierta > .ldtw-unidad-body > .ldtw-unidad-items {
    padding-top: 6px;
}

/* ── Ajustes de contexto ──────────────────────────────────────────── */

/* Sidebar: el encabezado que el tema pintaba dentro del <li> traía sus
   propios márgenes; ya vive fuera, dentro del control */
.bb-lessons-list .ldtw-unidad > .ld-item-list-section-heading {
    margin: 0;
}

/* Portada: los encabezados nativos traen margen superior grande */
.ld-item-list-items .ldtw-unidad > .ld-item-list-section-heading {
    margin: 0;
}

/* ── Chip numerado y progreso de unidad ───────────────────────────── */

.ldtw-num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    background: var(--bb-content-alternate-background-color, #eef1f7);
    color: var(--bb-alternate-text-color, #5a6a84);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ldtw-unidad.ldtw-abierta > .ld-item-list-section-heading .ldtw-num {
    background: var(--bb-primary-color, #385dff);
    color: #fff;
}

.ldtw-prog {
    flex: 0 0 auto;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--bb-alternate-text-color, #8a97ab);
}

/* El contenido propio del encabezado (título del tema) ocupa el resto */
.ldtw-unidad > .ld-item-list-section-heading > *:not(.ldtw-num):not(.ldtw-prog):not(.ldtw-chevron) {
    flex: 1 1 auto;
    min-width: 0;
}

/* Nota v2.1.0: el tratamiento v1.2.x de la portada (halo de unidad
   abierta) fue reemplazado por las tarjetas de la piel Notebook, que
   ahora también cubre sfwd-courses (ver notebook.css). */

/* ── Botón principal del curso (Iniciar/Continuar) ────────────────────
   Fix de regresión del tema 2.21.0: el botón usa
   var(--bb-primary-button-background-regular), que en este sitio resuelve
   a blanco (configuración de botones antigua) con texto blanco encima =
   invisible. El tema pinta con !important a especificidad (0,2,1) y su
   hoja carga después que esta, así que aquí se sube a (0,3,1)+ usando
   los contenedores reales del botón. */
.bb-single-course-sidebar .learndash_join_button a.btn-advance,
.bb-single-course-sidebar .learndash_join_button .btn-join,
.bb-single-course-sidebar .bb-button-wrap a.btn-advance {
    background: var(--bb-primary-color, #385dff) !important;
    border-color: var(--bb-primary-color, #385dff) !important;
    color: #fff !important;
}
.bb-single-course-sidebar .learndash_join_button a.btn-advance:hover,
.bb-single-course-sidebar .learndash_join_button a.btn-advance:focus-visible,
.bb-single-course-sidebar .bb-button-wrap a.btn-advance:hover,
.bb-single-course-sidebar .learndash_join_button .btn-join:hover {
    background: #2447d1 !important;
    background: color-mix(in srgb, var(--bb-primary-color, #385dff) 82%, #000) !important;
    border-color: transparent !important;
    color: #fff !important;
}
/* El estado "curso completado" del tema (gris con texto oscuro) se respeta */
.bb-single-course-sidebar .bb-enroll-widget .btn-advance-completed a.btn-advance {
    background: var(--bb-content-alternate-background-color, #f5f5f5) !important;
    border-color: transparent !important;
    color: var(--bb-headings-color, #1e2132) !important;
}

/* ── Accesibilidad: sin animación si el usuario lo pide ───────────── */

@media (prefers-reduced-motion: reduce) {
    .ldtw-unidad-body,
    .ldtw-unidad-items,
    .ldtw-chevron,
    .ldtw-num {
        transition: none;
    }
}