/**
 * Piel "Notebook" (v2.0.0) — lecciones, tópicos y quizzes.
 *
 * Rediseño 2026 aprobado por el equipo sobre la referencia "Notebook":
 * lienzo gris de página con dos paneles blancos gemelos (el sidebar como
 * tabla de contenidos y el área de contenido como hoja), unidades en
 * tarjetas delineadas con chips de estado, y el bloque de progreso del
 * curso con anillo (dibujado por notebook.js desde el % que LearnDash ya
 * imprime — cero consultas).
 *
 * Decisiones de diseño acordadas:
 *  - Sin iconos por unidad/lección (no existen metadatos para asignarlos).
 *  - Chips de UN solo color que codifican estado: completada (rellena ✓),
 *    actual (tinte del primario), pendiente (contorno neutro). Escala a
 *    cualquier número de unidades sin inventar paletas.
 *  - Cuestionarios con icono y estado binario (los pinta el tema).
 *
 * Alcance: SOLO vistas single de sfwd-lessons/sfwd-topic/sfwd-quiz.
 * La portada del curso (sfwd-courses) conserva el tratamiento v1.2.x que
 * vive en acordeon.css. Reemplaza a la piel "Propuesta A" del sidebar.
 *
 * OJO colores del sitio: --bb-content-alternate-background-color es
 * #FFFCFC (casi blanco, inservible como gris) y
 * --bb-primary-button-background-regular es #FFFFFF (trampa del botón
 * invisible). Los grises salen de --bb-body-background-color o de
 * mezclas sobre --bb-alternate-text-color; los botones se pintan
 * explícitamente desde --bb-primary-color.
 */

/* ── Variables de la piel ─────────────────────────────────────────── */

:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz, .single-sfwd-courses) {
    --ldtw-p: var(--bb-primary-color, #385dff);
    --ldtw-lienzo: var(--bb-body-background-color, #f0f2f5);
    --ldtw-panel: var(--bb-content-background-color, #ffffff);
    --ldtw-borde: var(--bb-content-border-color, #e7e9ec);
    --ldtw-filete: #dfe2e7;
    --ldtw-filete: color-mix(in srgb, var(--bb-alternate-text-color, #9b9c9f) 22%, transparent);
    --ldtw-hover: #f1f4f9;
    --ldtw-hover: color-mix(in srgb, var(--bb-alternate-text-color, #9b9c9f) 12%, var(--ldtw-panel));
    --ldtw-tinta: #eaefff;
    --ldtw-tinta: color-mix(in srgb, var(--ldtw-p) 10%, var(--ldtw-panel));
    --ldtw-tinta-suave: #f2f6ff;
    --ldtw-tinta-suave: color-mix(in srgb, var(--ldtw-p) 6%, var(--ldtw-panel));
    --ldtw-tinta-hover: #dfe7ff;
    --ldtw-tinta-hover: color-mix(in srgb, var(--ldtw-p) 17%, var(--ldtw-panel));
    --ldtw-titulo: var(--bb-headings-color, #1e2132);
    --ldtw-texto: var(--bb-body-text-color, #3c4a60);
    --ldtw-texto-act: #2447d1;
    --ldtw-texto-act: color-mix(in srgb, var(--ldtw-p) 80%, #0d1728);
    --ldtw-atenuado: var(--bb-alternate-text-color, #94a1b5);
    --ldtw-navbtn: #2e3540;
    --ldtw-navbtn: color-mix(in srgb, var(--bb-body-text-color, #1c2028) 88%, #fff);
    --ldtw-card-x: 34px; /* respiración horizontal de la hoja de contenido */
}

/* Modo oscuro del lector (toggle luna/sol del propio sidebar) */
body.bb-dark-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz, .single-sfwd-courses) {
    --ldtw-lienzo: #12161f;
    --ldtw-panel: #1a2232;
    --ldtw-borde: #2a3547;
    --ldtw-filete: #2a3547;
    --ldtw-hover: #232d41;
    --ldtw-tinta: #223255;
    --ldtw-tinta: color-mix(in srgb, var(--ldtw-p) 22%, #1a2232);
    --ldtw-tinta-suave: #1e2940;
    --ldtw-tinta-hover: #2a3c64;
    --ldtw-titulo: #e8edf6;
    --ldtw-texto: #b6c1d4;
    --ldtw-texto-act: #cfdcff;
    --ldtw-atenuado: #77839a;
    --ldtw-navbtn: #3a4658;
}

/* En modo oscuro el tema pinta el panel del sidebar con su propio gris
   (#1C1C1C) por encima de la regla base — se fuerza el de la piel */
body.bb-dark-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data {
    background: var(--ldtw-panel) !important;
    border-color: var(--ldtw-borde) !important;
}

/* Más pisadas del tema oscuro dentro de la hoja de contenido:
   - .bb-lms-header en #121212 → franja negra sobre la tarjeta azulada
   - h1 en azul oscuro casi ilegible
   - títulos de la tabla de tópicos en #AAA apagado */
body.bb-dark-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash-content-body .bb-lms-header {
    background: transparent !important;
}
body.bb-dark-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-header-title h1 {
    color: var(--ldtw-titulo) !important;
}
body.bb-dark-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash_content_wrap .ld-table-list-item a,
body.bb-dark-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash_content_wrap .ld-table-list-item .ld-topic-title,
body.bb-dark-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash_content_wrap .ld-table-list-item .ld-item-title {
    color: var(--ldtw-texto) !important;
}
/* Títulos de unidad del acordeón: su regla base usa --bb-headings-color
   (#000 en este sitio, que el tema NO conmuta en oscuro) */
body.bb-dark-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz, .single-sfwd-courses) .ldtw-unidad .ld-lesson-section-heading {
    color: var(--ldtw-titulo) !important;
}

/* ── Comentarios en modo oscuro ───────────────────────────────────────
   comentarios-b10 no trae variante dark (el toggle luna es una función
   de las páginas LearnDash, así que la armonización vive en esta piel):
   sus pastillas y el selector de orden quedaban BLANCOS sobre la página
   oscura. Además el tema pinta las tarjetas de comentario y el
   formulario en #121212, desentonando con la hoja (#1a2232). Los
   estados activos (primario) se conservan tal cual. */
body.bb-dark-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #comments .cmb10-paginacion .page-numbers:not(.current),
body.bb-dark-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #comments .cmb10-orden .cmb10-orden-opcion:not(.is-actual) {
    background: var(--ldtw-panel) !important;
    border-color: var(--ldtw-borde) !important;
    outline-color: var(--ldtw-borde) !important; /* cmb10 dibuja el aro también con outline */
    color: var(--ldtw-texto) !important;
}
body.bb-dark-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #comments .comment-list .comment-body,
body.bb-dark-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #comments .comment-respond {
    background: #161c29 !important;
    background: color-mix(in srgb, var(--ldtw-panel) 55%, var(--ldtw-lienzo)) !important;
    border-color: var(--ldtw-borde) !important;
}
body.bb-dark-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #comments .comment-body .reply a,
body.bb-dark-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #comments .comment-body .comment-edit-link {
    color: var(--ldtw-atenuado) !important;
}
body.bb-dark-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #comments .comment-body .reply a:hover,
body.bb-dark-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #comments .comment-body .comment-edit-link:hover {
    color: var(--ldtw-p) !important;
}

/* "Publicar" cae en la trampa del botón blanco del sitio (en ambos
   modos): se pinta explícito desde el primario */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #comments .form-submit #submit,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #comments .form-submit input[type="submit"] {
    background: var(--ldtw-p) !important;
    border-color: var(--ldtw-p) !important;
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #comments .form-submit #submit:hover,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #comments .form-submit input[type="submit"]:hover {
    background: color-mix(in srgb, var(--ldtw-p) 82%, #000) !important;
    border-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════
   LIENZO Y HOJA DE CONTENIDO
   La columna de contenido es el div sin clase de .bb-grid (el tema le
   pinta blanco); pasa a lienzo gris y .learndash-content-body se vuelve
   la hoja blanca con la miga como franja superior.
   ══════════════════════════════════════════════════════════════════ */

/* OJO selector: SOLO el grid directo de #learndash-content — un
   ".bb-grid > div" a secas matchea también contenedores exteriores en el
   layout ancho y desplaza toda la maqueta (desfases de 44px) */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #learndash-content > .bb-grid > div:not(.lms-topic-sidebar-wrapper) {
    background: var(--ldtw-lienzo) !important;
    padding: 26px 44px 48px !important;
}

:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash-content-body {
    background: var(--ldtw-panel);
    border: 1px solid var(--ldtw-borde);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(28, 32, 40, 0.04);
}

/* Franja de la miga: pegada al borde superior de la hoja, con filete de
   punta a punta del contenedor (el border va en la franja completa; el
   tema traía uno propio en .ld-breadcrumbs que quedaba corto, dentro del
   padding — se apaga abajo) */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash-content-body .bb-ld-info-bar {
    padding: 18px var(--ldtw-card-x) 16px;
    border-bottom: 1px solid var(--ldtw-filete);
    margin-bottom: 24px;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .bb-ld-info-bar .ld-breadcrumbs {
    border-bottom: none !important;
    padding-bottom: 0;
}

/* ── Miga de pan ──────────────────────────────────────────────────────
   Normalizada: tramos ancestro en el primario del sitio (no el azul del
   customizer de LD), tramo actual en texto oscuro sin subrayado, y
   separador "›" propio y uniforme (el tema pinta li::after ">" en unas
   vistas y en otras nada — aquí se fuerza el mismo en todas y se oculta
   el del último tramo). El rating del curso no va en la miga: ya vive
   bajo el título del curso en el panel del sidebar. */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-breadcrumbs-segments li a {
    color: var(--ldtw-p) !important;
    font-weight: 500;
    text-decoration: none;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-breadcrumbs-segments li a[aria-current="page"],
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-breadcrumbs-segments li:last-child a {
    color: var(--ldtw-titulo) !important;
    font-weight: 500;
    pointer-events: none;
    cursor: default;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-breadcrumbs-segments li::after {
    content: "\203A" !important; /* › */
    color: var(--ldtw-atenuado) !important;
    margin: 0 10px 0 8px;
    font-weight: 400;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-breadcrumbs-segments li:last-child::after {
    content: none !important;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-breadcrumbs .ratings-after-title {
    display: none;
}

/* En pantallas anchas el tema insetea .bb-lms-header (~100px) y
   .learndash_content_wrap (~308px) con márgenes propios: eso dejaba el
   filete de la miga corto y el título desalineado del texto. Aquí el
   header va a ancho completo (miga punta a punta) y encabezado y
   contenido comparten una columna de lectura centrada de 820px con la
   misma fórmula fluida (en hojas angostas equivale al padding normal). */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash-content-body .bb-lms-header {
    margin: 0 !important;
    max-width: none !important; /* el tema lo capa a 1180px en anchas */
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash-content-body .bb-lms-header > *:not(.bb-ld-info-bar) {
    margin-left: max(var(--ldtw-card-x), calc((100% - 820px) / 2));
    margin-right: max(var(--ldtw-card-x), calc((100% - 820px) / 2));
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash-content-body .learndash_content_wrap {
    padding: 0 var(--ldtw-card-x) 40px;
    margin: 0 max(0px, calc((100% - 820px - 2 * var(--ldtw-card-x)) / 2)) !important;
    max-width: none !important; /* el tema lo capa a 760px en anchas y descuadra el centrado */
    width: auto !important;     /* ...y le fija width, que desbordaría con nuestros márgenes */
}

/* ── Línea superior: posición, estado y navegación ────────────────── */

/* "Lección 2 de 12" como eyebrow del primario */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .sfwd-course-position .bb-pages {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ldtw-p);
}

/* Chip de estado — pintado explícito por la trampa del botón blanco */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .bb-ld-status .ld-status {
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    background: var(--ldtw-p) !important;
    color: #fff !important;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .bb-ld-status .ld-status.ld-status-complete {
    background: #1e8e4e !important;
}

/* Anterior / Siguiente: el tema los pinta como píldora segmentada con
   las flechas en ::before/::after (fuente bb-icons) y font-size 0 en el
   texto — se conserva esa mecánica y solo se recolorea: cuadrados
   oscuros rellenos con flecha blanca, como la referencia (el color del
   glifo se hereda del enlace). Nada de padding/font-size aquí:
   romperían el botón de icono. */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash_next_prev_link a {
    background: var(--ldtw-navbtn) !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: #fff !important;
    transition: background-color 0.15s ease;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash_next_prev_link a.next-link {
    margin-left: 6px;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash_next_prev_link a:hover,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash_next_prev_link a:focus-visible {
    background: var(--ldtw-p) !important;
    color: #fff !important;
}
/* Flecha deshabilitada (sin anterior/siguiente): presencia reducida */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash_next_prev_link a.empty-post {
    opacity: 0.4;
}

/* ── Título e instructor ──────────────────────────────────────────── */

:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-header-title h1 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ldtw-titulo);
    margin: 16px 0 10px;
}

/* Firma del autor: avatar + nombre con peso + fecha atenuada con "·" */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-header-instructor {
    margin-bottom: 14px;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-header-instructor .bb-about-instructor .flex {
    gap: 10px;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-header-instructor h5 {
    margin: 0;
    font-size: 14px;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-header-instructor h5 a {
    font-weight: 500;
    color: var(--ldtw-titulo) !important;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-header-instructor .bb-about-instructor-date {
    font-size: 13px;
    color: var(--ldtw-atenuado);
    margin-left: 10px; /* separación por aire, sin glifos intermedios */
}

/* ── Progreso de la lección (bloque LD30 que ven los inscritos en
      tópicos/lecciones) — tratamiento compacto igual al del sidebar ── */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash-content-body .learndash_content_wrap .ld-progress {
    margin: 4px 0 28px;
    padding: 0;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash-content-body .learndash_content_wrap .ld-progress .ld-progress-heading .ld-progress-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ldtw-atenuado);
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash-content-body .learndash_content_wrap .ld-progress .ld-progress-bar {
    height: 4px;
    border-radius: 99px;
    overflow: hidden;
    background: var(--ldtw-hover);
    margin: 8px 0 6px;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash-content-body .learndash_content_wrap .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
    height: 100%;
    border-radius: 99px;
    background: var(--ldtw-p) !important;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash-content-body .learndash_content_wrap .ld-progress .ld-progress-stats {
    font-size: 12.5px;
}

/* ── Fila de acciones de cierre (marcar completada + navegación LD) ── */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash_content_wrap .ld-content-actions {
    margin-top: 30px;
    padding: 24px 0 0;
    border-top: 1px solid var(--ldtw-filete);
    align-items: center;
    gap: 16px;
}
/* Vacía (visitantes): ni borde ni aire fantasma. La clase extra
   .learndash-content-body es por especificidad: la regla display:flex de
   LD lleva dos :not() de clase y suma (0,4,0) */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash-content-body .learndash_content_wrap .ld-content-actions:not(:has(a, form, button, input)) {
    display: none;
}
/* El form dentro de la fila no duplica el filete de su regla propia */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-content-actions form.sfwd-mark-complete {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* ── Cierre: marcar como completada (solo inscritos) ──────────────── */

:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) form.sfwd-mark-complete {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--ldtw-filete);
}
/* El botón se pinta explícito (misma trampa del botón blanco del sitio) */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) form.sfwd-mark-complete input[type="submit"],
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash_mark_complete_button {
    background: var(--ldtw-p) !important;
    border-color: var(--ldtw-p) !important;
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) form.sfwd-mark-complete input[type="submit"]:hover,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash_mark_complete_button:hover {
    background: color-mix(in srgb, var(--ldtw-p) 82%, #000) !important;
    border-color: transparent !important;
}

/* ── Quiz: la acción principal (Empezar) rellena del primario, como el
      resto de acciones principales de la piel; los botones secundarios
      del quiz (reiniciar, revisar) conservan su estilo delineado ────── */
/* Especificidad (0,7,0) a propósito: el tema pinta este botón con
   var(--bb-primary-button-background-regular) — blanco en este sitio, la
   trampa del botón invisible — vía una regla !important de (0,6,0)+ */
.buddyboss-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash-wrapper .wpProQuiz_content .wpProQuiz_text .wpProQuiz_button.wpProQuiz_button {
    background: var(--ldtw-p) !important;
    border-color: var(--ldtw-p) !important;
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
}
.buddyboss-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash-wrapper .wpProQuiz_content .wpProQuiz_text .wpProQuiz_button.wpProQuiz_button:hover,
.buddyboss-theme:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash-wrapper .wpProQuiz_content .wpProQuiz_text .wpProQuiz_button.wpProQuiz_button:focus-visible {
    background: color-mix(in srgb, var(--ldtw-p) 82%, #000) !important;
    border-color: transparent !important;
}

/* ── Conversación (comentarios-b10 se conserva intacto) ───────────── */

:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #comments.comments-area {
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid var(--ldtw-filete);
}

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR — panel blanco sobre el lienzo gris de su columna
   ══════════════════════════════════════════════════════════════════ */

/* La columna entera del sidebar es un riel BLANCO (nada de canal gris
   entre el panel y la barra de scroll); el borde derecho lo separa del
   lienzo gris del contenido */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-wrapper {
    background: var(--ldtw-panel) !important;
    border-right: 1px solid var(--ldtw-borde);
}

/* El !important del fondo es deliberado: con header de Elementor el tema
   pinta este bloque con el gris del body (.elementor-header + .site-content
   .lms-topic-sidebar-data, y variantes elementor-location-single) y esa
   pila de clases vence a esta regla */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data {
    background: var(--ldtw-panel) !important;
    margin: 0;
    /* !important: en pantallas anchas el tema vuelve este bloque un panel
       FIJO (position:fixed, left:0) con padding: 15px 0 — sin la sangría
       lateral las listas quedaban a sangre contra el scrollbar */
    padding: 18px 16px 24px !important;
    /* El borde va también aquí: en modo fijo el panel tapa al wrapper
       (que lleva el suyo para el modo columna) */
    border-right: 1px solid var(--ldtw-borde);
}

/* ── Volver al curso ──────────────────────────────────────────────── */

:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-course-navigation .course-entry-link {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ldtw-borde);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ldtw-texto) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-course-navigation .course-entry-link:hover,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-course-navigation .course-entry-link:focus-visible {
    background: var(--ldtw-hover);
    border-color: var(--ldtw-atenuado);
}

:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .ld-course-navigation h2.course-entry-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ldtw-titulo);
    margin: 14px 2px 4px;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-entry-title .ratings-after-title {
    font-size: 12px;
    margin-top: 4px;
}

/* ── Progreso del curso (anillo dibujado por notebook.js) ─────────── */

/* Compacta como la referencia: anillo pequeño a la izquierda; a su lado
   el "N% Completado" con la barra fina debajo y la última actividad en
   letra menuda (notebook.js mueve el % antes de la barra — el markup de
   LD trae la barra primero). */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-progress {
    border: 1px solid var(--ldtw-borde);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 12px 2px 18px;
}

/* El tema le mete al wrap margin 30px, padding-bottom 25px y un
   border-bottom propio (el "doble borde" pegado a los extremos) —
   fuera todo: la tarjeta de la piel ya da el marco y el aire */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-progress .course-progress-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-progress .ld-progress {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-progress .ld-progress-heading:empty {
    display: none;
}

.ldtw-ring { flex: 0 0 auto; display: block; }
.ldtw-ring-track { stroke: var(--ldtw-hover, #eef1f5); }
.ldtw-ring-fill { stroke: var(--ldtw-p, #385dff); }
.ldtw-ring-text {
    fill: var(--ldtw-p, #385dff);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-progress-stats {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 1px;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-progress-percentage {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ldtw-titulo) !important;
    margin: 0;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-progress-steps {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--ldtw-atenuado);
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-progress-bar {
    height: 4px;
    border-radius: 99px;
    overflow: hidden;
    background: var(--ldtw-hover);
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-progress-bar .ld-progress-bar-percentage {
    height: 100%;
    border-radius: 99px;
    background: var(--ldtw-p) !important;
}

/* ── Etiquetas de sección del panel ───────────────────────────────── */

.ldtw-sb-label,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-course-quizzes-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ldtw-atenuado);
    margin: 18px 4px 10px;
}

/* ── Unidades como tarjetas delineadas ────────────────────────────── */

:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .ldtw-unidad {
    background: var(--ldtw-panel);
    border: 1px solid var(--ldtw-borde);
    border-radius: 12px;
    margin: 0 0 10px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .ldtw-unidad:hover {
    border-color: var(--ldtw-atenuado);
}

:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .ldtw-unidad > .ld-item-list-section-heading {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 13px 14px;
    gap: 12px;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .ldtw-unidad > .ld-item-list-section-heading:hover {
    background: var(--ldtw-hover);
    border: 0;
}
/* Unidad abierta: encabezado con tinte suave del primario */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .ldtw-unidad.ldtw-abierta > .ld-item-list-section-heading {
    background: var(--ldtw-tinta-suave);
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .ldtw-unidad.ldtw-abierta > .ldtw-unidad-body > .ldtw-unidad-items {
    padding: 6px;
}

/* ── Chips de estado (un solo color, el estado es el mensaje) ─────── */

/* Base: pendiente = contorno neutro. Se resetea también la variante
   "abierta → primario" que acordeon.css usa en la portada. */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .ldtw-num,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .ldtw-unidad.ldtw-abierta > .ld-item-list-section-heading .ldtw-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--ldtw-borde);
    background: var(--ldtw-panel);
    color: var(--ldtw-atenuado);
    font-size: 12px;
}

/* Actual: la unidad que contiene el contenido en curso */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .ldtw-unidad.ldtw-actual > .ld-item-list-section-heading .ldtw-num {
    border-color: var(--ldtw-p);
    background: var(--ldtw-tinta);
    color: var(--ldtw-texto-act);
}

/* Completada: rellena con check (el número deja de importar) */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .ldtw-unidad.ldtw-completa > .ld-item-list-section-heading .ldtw-num {
    border-color: var(--ldtw-p);
    background: var(--ldtw-p);
    color: #fff;
    font-size: 0;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .ldtw-unidad.ldtw-completa > .ld-item-list-section-heading .ldtw-num::after {
    content: "\2713";
    font-size: 13px;
    line-height: 1;
}

:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .ldtw-prog {
    font-size: 12px;
}

/* ── Filas: lecciones, tópicos y quizzes de lección ───────────────────
   Regla de oro heredada de la Propuesta A: el hover cambia el FONDO,
   jamás el color del texto; la activa usa tinte + barra interior. */

/* OJO: el <li> de lección CONTIENE la lista anidada de tópicos, así que
   el fondo de hover/activo va en su ancla de cabecera (a.bb-lesson-head)
   — nunca en el li: el :hover de un tópico también activa el :hover de
   su li ancestro y pintaría el bloque entero. */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-lesson-item {
    background: transparent !important;
    margin: 2px 0;
    /* El caret de desplegar (.lms-toggle-lesson) es position:absolute:
       sin esto se ancla a otro ancestro y flota fuera de su fila */
    position: relative;
}

/* Caret de lecciones con contenidos: atenuado, centrado en su fila.
   El tema lo deja rotado -90° (▶) SIEMPRE; aquí la lección abierta
   (el tema le quita .lms-lesson-turnover) lo endereza a ▼ */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .lms-toggle-lesson {
    color: var(--ldtw-atenuado);
    z-index: 1;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .lms-toggle-lesson i {
    transition: transform 0.2s ease;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-lesson-item:not(.lms-lesson-turnover) .lms-toggle-lesson i {
    transform: none !important; /* ▼ abierta */
}

/* El conteo "N Contenidos" lo oculta una regla inline del sitio (CSS
   adicional del customizer, herencia de 2021) — la piel lo restaura,
   como en la referencia aprobada. Van en su PROPIA LÍNEA bajo el
   título: con "N Contenidos | N Evaluaciones" en la misma fila, los
   conteos (nowrap) devoraban el ancho y el título quedaba en astillas.
   El salto lo fuerza el ::after del ancla actuando como ítem flex de
   ancho completo entre el título/check (fila 1) y los conteos (fila 2). */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-lesson-item > a.bb-lesson-head {
    flex-wrap: wrap;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-lesson-item > a.bb-lesson-head::after {
    content: "";
    order: 9;
    flex-basis: 100%;
    height: 0;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .bb-lesson-head .bb-lesson-topics-count,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .bb-lesson-head .bb-lesson-quizzes-count {
    display: block !important;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 11.5px;
    color: var(--ldtw-atenuado);
    margin: 3px 0 0;
    max-width: none !important; /* el tema los capa a 60px y truncaba "N Conteni…" */
    overflow: visible !important;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .bb-lesson-head .bb-lesson-topics-count {
    order: 10;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .bb-lesson-head .bb-lesson-sidebar-ld-sep {
    display: block !important;
    color: var(--ldtw-atenuado);
    order: 11;
    margin: 3px 6px 0;
    font-size: 11.5px;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .bb-lesson-head .bb-lesson-quizzes-count {
    order: 12;
    margin-right: auto; /* los conteos quedan alineados a la izquierda */
}

/* Al desplegar, los contenidos se sangran con línea guía: se entiende
   qué pertenece a la lección abierta. La sangría total se reparte entre
   este margen, la guía y el padding de las anclas (el tema trae 40px
   propios que aquí se recortan). */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .lms-lesson-content {
    margin: 2px 4px 8px 20px;
    padding-left: 8px;
    border-left: 1px solid var(--ldtw-filete);
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .lms-lesson-content li.lms-topic-item a,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .lms-lesson-content li.lms-quiz-item a {
    padding-left: 18px !important;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-lesson-item > a.bb-lesson-head {
    background: transparent !important;
    border-radius: 8px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-lesson-item .bb-lesson-title {
    color: var(--ldtw-titulo) !important;
    transition: none;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-lesson-item > a.bb-lesson-head:hover {
    background: var(--ldtw-hover) !important;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-lesson-item > a.bb-lesson-head:hover .bb-lesson-title {
    color: var(--ldtw-titulo) !important;
}

:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-lesson-item.current > a.bb-lesson-head {
    background: var(--ldtw-tinta) !important;
    box-shadow: inset 3px 0 0 var(--ldtw-p);
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-lesson-item.current .bb-lesson-title {
    color: var(--ldtw-texto-act) !important;
    font-weight: 600;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-lesson-item.current > a.bb-lesson-head:hover {
    background: var(--ldtw-tinta-hover) !important;
}
/* La lista anidada de tópicos jamás hereda fondos del tema */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .lms-lesson-content,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .lms-lesson-content ol {
    background: transparent !important;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-lesson-item.current .bb-lesson-topics-count,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-lesson-item.current .bb-lesson-quizzes-count,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-lesson-item.current .bb-lesson-sidebar-ld-sep {
    color: var(--ldtw-texto-act) !important;
    opacity: 0.75;
}

:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-topic-item,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-quiz-item {
    border-radius: 6px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-topic-item .bb-lms-title,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-quiz-item .bb-lms-title {
    color: var(--ldtw-texto) !important;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-topic-item:hover,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-quiz-item:hover {
    background: var(--ldtw-hover) !important;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-topic-item:hover .bb-lms-title,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-quiz-item:hover .bb-lms-title {
    color: var(--ldtw-texto) !important;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-topic-item.current,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-quiz-item.current {
    background: var(--ldtw-tinta) !important;
    box-shadow: inset 3px 0 0 var(--ldtw-p);
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-topic-item.current .bb-lms-title,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-quiz-item.current .bb-lms-title,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-topic-item.current:hover .bb-lms-title,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-quiz-item.current:hover .bb-lms-title {
    color: var(--ldtw-texto-act) !important;
    font-weight: 600;
}

/* Completadas: texto atenuado (el check del tema ya señala) */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .bb-completed-item .bb-lesson-title,
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .bb-lms-title.bb-completed-item {
    color: var(--ldtw-atenuado) !important;
}

/* Bloqueadas: presencia reducida */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-is-locked {
    opacity: 0.55;
}

/* Foco visible por teclado */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li a:focus-visible {
    outline: 2px solid var(--ldtw-p);
    outline-offset: -2px;
    border-radius: 6px;
}

/* ── Evaluaciones (encabezado nativo del tema) ────────────────────── */

/* Especificidad con li a propósito: debe vencer a la regla genérica de
   filas (.lms-topic-sidebar-data li.lms-quiz-item) que pone radio 6px */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .lms-course-quizzes-list li.lms-quiz-item {
    background: var(--ldtw-panel);
    border: 1px solid var(--ldtw-borde);
    border-radius: 12px;
    margin: 0 0 10px;
    padding: 4px 6px;
    transition: border-color 0.15s ease;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .lms-course-quizzes-list li.lms-quiz-item:hover {
    border-color: var(--ldtw-atenuado);
}

/* Icono del cuestionario: cuadrado redondeado con tinte del primario */
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-course-quizzes-list .bb-lms-ico.bb-lms-ico-quiz {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--ldtw-tinta);
    color: var(--ldtw-texto-act);
    margin-right: 4px;
}
:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-course-quizzes-list .bb-lms-ico.bb-lms-ico-quiz i {
    font-size: 16px;
    color: inherit;
}

/* ══════════════════════════════════════════════════════════════════
   PORTADA DEL CURSO (sfwd-courses) — fase 2 de la piel Notebook.
   Por decisión del equipo, la portada conserva su vista nativa (banner,
   descripción, instructor, inscripción y reseñas tal cual el tema); lo
   que adopta el lenguaje Notebook es la sección "Contenido del Curso":
   la tarjeta contenedora y las unidades como tarjetas con chips de
   estado y progreso n/m, gemelas de las del lateral de lecciones.
   ══════════════════════════════════════════════════════════════════ */

/* Tarjeta contenedora de "Contenido del Curso" */
.single-sfwd-courses .bb-learndash-content-wrap > .learndash-wrapper {
    background: var(--ldtw-panel);
    border: 1px solid var(--ldtw-borde);
    border-radius: 14px;
    padding: 26px 30px;
    margin-bottom: 22px;
    box-shadow: 0 1px 2px rgba(28, 32, 40, 0.04);
}

/* Encabezado de la sección de contenido + Expandir todo */
.single-sfwd-courses .learndash-wrapper .ld-section-heading h2 {
    font-size: 19px;
    font-weight: 700;
    color: var(--ldtw-titulo);
}
.single-sfwd-courses .learndash-wrapper .ld-item-list-actions .ld-expand-button {
    color: var(--ldtw-atenuado);
    font-size: 12.5px;
}
.single-sfwd-courses .learndash-wrapper .ld-item-list-actions .ld-expand-button:hover {
    color: var(--ldtw-p);
}

/* ── Unidades como tarjetas (mismo lenguaje del lateral) ──────────── */

.single-sfwd-courses .ld-item-list-items .ldtw-unidad {
    background: var(--ldtw-panel);
    border: 1px solid var(--ldtw-borde);
    border-radius: 12px;
    margin: 0 0 12px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.single-sfwd-courses .ld-item-list-items .ldtw-unidad:hover {
    border-color: var(--ldtw-atenuado);
}
.single-sfwd-courses .ld-item-list-items .ldtw-unidad > .ld-item-list-section-heading {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 14px 16px;
    gap: 12px;
    margin: 0;
}
.single-sfwd-courses .ld-item-list-items .ldtw-unidad > .ld-item-list-section-heading:hover {
    background: var(--ldtw-hover);
    border: 0;
}
.single-sfwd-courses .ld-item-list-items .ldtw-unidad.ldtw-abierta > .ld-item-list-section-heading {
    background: var(--ldtw-tinta-suave);
}
.single-sfwd-courses .ld-item-list-items .ldtw-unidad.ldtw-abierta > .ldtw-unidad-body > .ldtw-unidad-items {
    padding: 4px 10px 10px;
}

/* Ítems dentro de la unidad: transparentes, separados por filete */
.single-sfwd-courses .ldtw-unidad-items > .ld-item-list-item {
    margin: 0;
    background: transparent;
}
.single-sfwd-courses .ldtw-unidad-items > .ld-item-list-item + .ld-item-list-item {
    border-top: 1px solid var(--ldtw-filete);
}

/* Chips de estado (gemelos del lateral) */
.single-sfwd-courses .ld-item-list-items .ldtw-num,
.single-sfwd-courses .ld-item-list-items .ldtw-unidad.ldtw-abierta > .ld-item-list-section-heading .ldtw-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--ldtw-borde);
    background: var(--ldtw-panel);
    color: var(--ldtw-atenuado);
    font-size: 12px;
}
.single-sfwd-courses .ld-item-list-items .ldtw-unidad.ldtw-completa > .ld-item-list-section-heading .ldtw-num {
    border-color: var(--ldtw-p);
    background: var(--ldtw-p);
    color: #fff;
    font-size: 0;
}
.single-sfwd-courses .ld-item-list-items .ldtw-unidad.ldtw-completa > .ld-item-list-section-heading .ldtw-num::after {
    content: "\2713";
    font-size: 13px;
    line-height: 1;
}
.single-sfwd-courses .ld-item-list-items .ldtw-prog {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--ldtw-atenuado);
}

/* ── Móvil / columnas estrechas ───────────────────────────────────── */

@media (max-width: 992px) {
    :is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) {
        --ldtw-card-x: 20px;
    }
    :is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #learndash-content > .bb-grid > div:not(.lms-topic-sidebar-wrapper) {
        padding: 14px 14px 30px !important;
    }
    :is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data {
        padding: 14px 12px 18px;
    }
}

@media (max-width: 767px) {
    :is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-header-title h1 {
        font-size: 24px;
    }
    .single-sfwd-courses .bb-learndash-content-wrap > .learndash-wrapper {
        padding: 18px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash_next_prev_link a,
    :is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data .ldtw-unidad,
    :is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .lms-topic-sidebar-data li.lms-lesson-item {
        transition: none;
    }
}