/**
 * course.css — AWS-style course layout: left sidebar (banner, search, progress, outline)
 * and main content area. Vantive theme.
 */

/* Área principal: altura fija, sin scroll de página; solo la diapositiva activa ocupa el viewport */
.course-page .drawer-content {
  overflow: hidden;
  overflow-x: hidden;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* Drawer: layout flex para que el sidebar y el contenido tengan espacio */
.course-page .drawer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
}
.course-page .drawer-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

/* Por defecto: sidebar oculto (fuera de vista), contenido ocupa todo */
.course-page .drawer-side {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18rem;
  max-width: 85vw;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 0.25s ease, visibility 0.25s ease;
  visibility: hidden;
  pointer-events: none;
}
.course-page .drawer-side .drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 0;
}
.course-page .drawer-side > aside {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 18rem;
}

/* Desktop (lg 1024px): sidebar en flujo a la izquierda, contenido a la derecha; entre 768–1023px layout columna (contenido visible, drawer por hamburguesa) */
@media (min-width: 1024px) {
  .course-page .drawer.course-drawer-open-lg,
  .course-page .drawer.lg\:drawer-open {
    flex-direction: row;
    overflow: visible;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
  }
  .course-page .drawer.course-drawer-open-lg .drawer-content,
  .course-page .drawer.lg\:drawer-open .drawer-content {
    order: 2;
    flex: 1 1 0%;
    min-width: 200px;
    min-height: 100vh;
    height: 100%;
    margin-left: 0;
    overflow: hidden;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 1;
  }
  .course-page .drawer.course-drawer-open-lg .drawer-side,
  .course-page .drawer.lg\:drawer-open .drawer-side,
  .course-page #courseSidebar {
    order: 1;
    position: relative !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    flex-shrink: 0;
    width: 18rem;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .course-page #courseSidebar.is-closed {
    transform: none !important;
    visibility: visible !important;
  }
  .course-page .drawer.course-drawer-open-lg .drawer-side .drawer-overlay,
  .course-page .drawer.lg\:drawer-open .drawer-side .drawer-overlay {
    display: none;
  }
  .course-page .drawer-content .course-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
}

/* Móvil: cuando el checkbox está marcado, mostrar sidebar en overlay (fixed) */
.course-page .drawer-toggle:checked ~ .drawer-side {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

/* ---- Layout: sidebar + main ---- */
.course-layout {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.course-sidebar {
  width: 280px;
  min-width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-base-100);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
  z-index: 50;
  transition: transform 0.25s ease, margin 0.25s ease;
}

.course-sidebar.is-closed {
  transform: translateX(-100%);
  margin-left: -280px;
}

.course-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 5rem; /* espacio sobre la barra de navegación fija */
  overflow: hidden;
}

/* ---- Sidebar: banner ---- */
.course-sidebar__banner {
  position: relative;
  height: 200px;
  min-height: 200px;
  background: var(--color-primary);
  background-image: linear-gradient(135deg, var(--color-plum) 0%, var(--color-plum-dark) 100%);
  overflow: hidden;
}

.course-sidebar__banner-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.35;
}

.course-sidebar__banner-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
}

.course-sidebar__search-wrap {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
}

/* daisyUI: btn btn-circle btn-ghost btn-sm text-primary-content — overlay theme */
.course-sidebar__search-btn {
  width: 36px;
  height: 36px;
  min-height: 36px;
  background: rgba(255, 250, 235, 0.2);
  border: 1px solid rgba(255, 250, 235, 0.4);
  color: var(--color-primary-content);
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-sidebar__search-btn:hover {
  background: rgba(255, 250, 235, 0.3);
  border-color: rgba(255, 250, 235, 0.6);
}

.course-sidebar__search-btn svg {
  width: 14px;
  height: 14px;
}

.course-sidebar__search-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
  background: var(--color-primary);
  z-index: 3;
  display: none;
}

.course-sidebar__search-area.is-open {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* daisyUI input input-bordered input-sm + overlay theme on primary banner */
.course-sidebar__search-input {
  flex: 1;
  min-width: 0;
  border-color: rgba(255, 250, 235, 0.4);
  background: rgba(255, 250, 235, 0.15);
  color: var(--color-primary-content);
}

.course-sidebar__search-input::placeholder {
  color: rgba(255, 250, 235, 0.7);
}

.course-sidebar__banner-content {
  position: relative;
  z-index: 1;
  padding: 1rem 1rem 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.course-sidebar__title {
  font-family: var(--font-acumin-wide);
  font-size: 1rem;
  line-height: 1.3;
  font-weight: var(--fw-bold);
  color: var(--color-primary-content);
  margin: 0 0 0.5rem;
  letter-spacing: var(--text-headline-tracking);
}

.course-sidebar__title a {
  color: inherit;
  text-decoration: none;
}

.course-sidebar__title a:hover {
  text-decoration: underline;
}

.course-sidebar__progress {
  margin-top: auto;
}

.course-sidebar__progress-track {
  height: 4px;
  background: rgba(255, 250, 235, 0.25);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.35rem;
}

.course-sidebar__progress-runner {
  height: 100%;
  background: var(--color-primary-content);
  border-radius: 2px;
  transition: width 0.25s ease;
}

.course-sidebar__progress-text {
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  color: rgba(255, 250, 235, 0.9);
}

/* ---- Sidebar: outline (TOC) ---- */
.course-sidebar__outline {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0;
}

.course-sidebar__outline-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.course-sidebar__outline-item {
  margin: 0;
}

.course-sidebar__outline-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-acumin);
  font-size: 0.875rem;
  line-height: 1.35;
  white-space: nowrap;
  border-left: 4px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.course-sidebar__outline-link:hover {
  background: var(--color-base-200);
  color: var(--color-primary);
}

.course-sidebar__outline-link.is-active {
  background: var(--color-sage-light);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  border-left-width: 4px;
  border-left-color: var(--color-primary);
}

.course-sidebar__outline-link-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

.course-sidebar__outline-link.is-active .course-sidebar__outline-link-icon {
  opacity: 1;
}

.course-sidebar__outline-link-text {
  flex: 1;
  min-width: 0;
}

.course-sidebar__outline-section {
  margin: 0;
}

/* daisyUI btn btn-ghost btn-sm justify-between — layout + outline theme */
.course-sidebar__section-toggle {
  width: 100%;
  background: var(--color-base-200);
  font-family: var(--font-acumin);
  font-size: 0.8rem;
  color: var(--color-text);
  text-align: left;
}

.course-sidebar__section-toggle:hover {
  background: var(--color-sage-dark);
  color: var(--color-base-100);
}

.course-sidebar__section-toggle-icon {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  display: block;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.course-sidebar__section-toggle[aria-expanded="true"] .course-sidebar__section-toggle-icon {
  transform: rotate(180deg);
}

.course-sidebar__section-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.course-sidebar__section-list.is-collapsed {
  max-height: 0;
  opacity: 0;
}

.course-sidebar__section-item .course-sidebar__outline-link {
  padding-left: 2rem;
}

.lesson-progress-dot {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--color-sage-dark);
  background: var(--color-base-100);
}

.course-sidebar__outline-link.is-completed .lesson-progress-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* ---- Main: header (lesson title + counter), alineado con .lesson-content ---- */
.course-main__header {
  flex-shrink: 0;
  background: var(--color-base-100);
  padding: 1rem 1.5rem 1rem;
  border-bottom: 1px solid var(--color-base-200);
}

@media (min-width: 768px) {
  .course-main__header {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.course-main__header-inner {
  max-width: min(72rem, 100%);
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: left;
}

@media (min-width: 768px) {
  .course-main__header-inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.course-main__counter {
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  color: var(--color-grey);
  margin-bottom: 0.25rem;
}

.course-main__title {
  font-family: var(--font-acumin-wide);
  font-size: var(--text-headline-size);
  line-height: var(--text-headline-line);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin: 0;
  letter-spacing: var(--text-headline-tracking);
  opacity: 0.95;
}

/* Encabezado de diapositiva dentro del panel: "X de 13" + título (igual que Illustrator) */
.slide-content__header {
  flex-shrink: 0;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-base-200, rgba(0,0,0,.08));
}
.slide-content__counter {
  display: block;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  color: var(--color-grey);
  margin-bottom: 0.25rem;
}
.slide-content__header .slide-content__title {
  font-family: var(--font-acumin-wide);
  font-size: var(--text-headline-size);
  line-height: var(--text-headline-line);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin: 0;
  letter-spacing: var(--text-headline-tracking);
}
/* En Portada no duplicar el encabezado de diapositiva (ya tiene su propio hero) */
.slide-content__header--cover {
  display: none;
}

/* ---- Main: un solo slide visible, sin solapamiento (contenedor tipo deck) ---- */
.course-lessons {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 200px;
  min-height: 30vh;
  overflow: hidden;
  background: var(--color-base-200, #f3f4f6);
  isolation: isolate;
  /* Safari: crear stacking context para que solo un panel quede encima */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Solo el panel activo visible; inactivos ocultos sin solapamiento */
.lesson-panel {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  visibility: hidden;
  opacity: 0;
  /* Safari: ocultar por completo para evitar que se vean varios slides como carrusel */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.lesson-panel.is-active {
  display: flex !important;
  pointer-events: auto;
  z-index: 1;
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  clip-path: none;
  -webkit-clip-path: none;
}

/* Safari: paneles no activos totalmente fuera de vista (evita ver varios como carrusel) */
.lesson-panel:not(.is-active) {
  clip-path: inset(100% 100% 100% 100%);
  -webkit-clip-path: inset(100% 100% 100% 100%);
}

/* En el panel activo siempre mostrar el card (slide-art); no depender de has-slide-art para ver contenido */
.lesson-panel.is-active .lesson-panel__slide-art {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
}
.lesson-panel.is-active .lesson-panel__slide-art .slide-art__asset,
.lesson-panel.is-active .lesson-panel__slide-art svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain;
}
.lesson-panel.is-active .lesson-panel__slide-art iframe.slide-art__asset {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border: 0 !important;
}
.lesson-panel.is-active .lesson-panel__scroll {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
}

/* El quiz (slide-content) solo se muestra en su slide: ocultar en paneles no activos */
.lesson-panel:not(.is-active) .lesson-panel__slide-content {
  display: none !important;
  visibility: hidden !important;
  overflow: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Quiz (lección 9): card arriba + contenido abajo, scroll vertical cuando es el activo */
/* Slide dedicado al quiz (sin card Illustrator): scroll y ancho contenido */
.lesson-panel#lesson-13.is-active {
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
}
.lesson-panel#lesson-13.is-active .lesson-panel__slide-content {
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}
.lesson-panel#lesson-13 .lesson-panel__scroll {
  align-items: stretch !important;
  max-width: 720px !important;
  overflow-y: auto !important;
}
/* Quiz: flujo normal para que mensajes de comprobación no se encimen con el resto */
.lesson-panel#lesson-13 .lesson-content {
  display: block !important;
  min-height: 0 !important;
  flex: none !important;
}
.lesson-panel#lesson-13 .lesson-content > *:first-child {
  flex: none !important;
}
.lesson-panel#lesson-13 .sec-quiz {
  display: block !important;
  margin-bottom: var(--space-5) !important;
  padding-bottom: var(--space-4) !important;
  border-bottom: 1px solid var(--color-base-200);
  page-break-inside: avoid;
}
.lesson-panel#lesson-13 .sec-quiz:last-child {
  margin-bottom: 0 !important;
  border-bottom: none !important;
}
.lesson-panel#lesson-13 .quiz-feedback {
  display: block !important;
  margin-top: var(--space-2) !important;
  margin-bottom: 0 !important;
  clear: both;
}

/* ========== UN CARD POR SLIDE: card de Illustrator + contenido HTML siempre visibles ==========
 * Cuando el panel tiene has-slide-art, se muestra el card (SVG/object) y debajo el contenido HTML.
 * No se oculta nada: header y contenido siempre visibles para evitar pantalla en blanco.
 */
.lesson-panel.has-slide-art .lesson-panel__slide-content {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.lesson-panel.has-slide-art .lesson-panel__scroll {
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 auto !important;
}
.lesson-panel.has-slide-art .lesson-panel__scroll::before {
  display: none !important;
}
.lesson-panel.has-slide-art .lesson-panel__slide-art {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  max-width: 100% !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
}
.lesson-panel.has-slide-art .lesson-panel__slide-art svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain;
  flex: 1 1 auto;
  min-width: 0;
}

/* Slide art (SVG): oculto por defecto hasta que haya SVG inline */
.lesson-panel__slide-art {
  display: none;
  width: 100%;
  flex-shrink: 0;
}
.lesson-panel__slide-art svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.lesson-panel__slide-art .slide-art__asset {
  display: block;
  width: 100%;
  height: auto;
}

/* Un card por slide: diseño tipo tarjeta centrada (fiel a Illustrator) */
.slide-art-card {
  background: var(--color-base-100, #fff);
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.slide-art-card svg,
.slide-art-card .slide-art__asset {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  vertical-align: middle;
}
.slide-art-card .slide-art__asset {
  min-height: 0;
}
.slide-art-card iframe.slide-art__asset {
  min-height: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Sin animación de slide completo: cada slider se muestra al pasar a su sección; solo animan elementos granulares dentro del mismo slide (slide-reveal, lesson-step) */
/* Quiz (lesson-13): layout siempre visible; solo .slide-reveal se revelan por step */

/* ---- Componentes granulares: un step revela un pedazo; el resto del slide siempre visible ---- */
.slide-reveal {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.slide-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: slideRevealIn 0.4s ease-out forwards;
}
@keyframes slideRevealIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.slide-reveal-words {
  display: inline;
}

/* Bloque que se revela en el step 2: espacio reservado en blanco hasta entonces (opacity: 0 ya reserva espacio en flujo) */
.slide-reveal--reserve-space {
  display: block;
  min-height: 1px;
}
.lesson-panel__slide-content--reveal {
  width: 100%;
  max-width: 100%;
  padding: var(--space-4) var(--space-4) 0;
  margin: 0;
}
.slide-reveal-list {
  margin: var(--space-2) 0 0;
  padding-left: 1.25rem;
  font-size: var(--content-body-size);
  line-height: var(--content-body-line);
}
.slide-reveal-list li {
  margin-bottom: var(--space-1);
}
.slide-reveal-list li:last-child {
  margin-bottom: 0;
}

/* Imagen complementaria que aparece con fade en step 2 (Inicio, Portada) */
.slide-reveal--img {
  text-align: center;
  padding: var(--space-2) 0;
}
.slide-reveal-img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Línea decorativa que aparece con fade en step 2 (resto de diapositivas) */
.slide-reveal--deco {
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) 0;
}
.slide-reveal-line {
  display: block;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-primary, #0d9488), transparent);
  border-radius: 2px;
  opacity: 0.9;
}

/* Contenido del slide: visible solo cuando NO hay SVG (panel sin has-slide-art) */
.lesson-panel__slide-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  visibility: visible;
  opacity: 1;
}
.lesson-panel__slide-content .lesson-content {
  visibility: visible;
  opacity: 1;
  flex: 1 1 auto;
  min-height: 0;
}

/* Fondo del viewport de slides (gris claro); el card lleva su propio fondo blanco */
.lesson-panel {
  background: transparent;
}
.lesson-panel .lesson-panel__scroll {
  background: transparent;
}

/* Área del módulo: ancho del contenedor, padding escala 8px (32px), pleca morada izquierda (igual que Illustrator) */
.lesson-panel__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-4);
  padding-left: var(--space-4);
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Sin pleca en el nuevo diseño de slides */
.lesson-panel .lesson-panel__scroll::before {
  display: none;
}

/* Paneles con .lesson-content (todos salvo Portada): scroll ocupa todo el espacio y footer queda abajo */
.lesson-panel:not(#lesson-1) .lesson-panel__scroll {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: var(--space-4);
}

/* Contenido amarillo: columna flex que rellena la altura para que el pie quede abajo */
.lesson-panel:not(#lesson-1) .lesson-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100%;
}

/* Primer bloque de contenido crece y empuja el footer hacia abajo */
.lesson-panel:not(#lesson-1) .lesson-content > *:first-child {
  flex: 1 1 auto;
  min-height: 0;
}

/* ========== Sistema del contenido: Material type scale +16%, espaciado 8px ==========
 * Tipografía: type-system.css (Material 3 × 1.16). Contenido usa --text-*.
 * Espaciado: escala base 8px. Superficies planas, contenido primero.
 */
:root {
  /* Tipografía contenido: hereda de type-system (Material +16%) */
  --content-body-size: var(--text-body-size);
  --content-body-line: var(--text-body-line);
  --content-body-spacing: 1.25em;
  --content-heading-size: var(--text-headline-size);
  --content-heading-line: var(--text-headline-line);
  --content-title-size: var(--text-title-size);
  --content-title-line: var(--text-title-line);
  --content-caption-size: var(--text-caption-size);
  --content-cover-title-size: var(--md-display-small-size);
  --content-cover-title-size-md: var(--md-display-medium-size);
  --content-cover-subtitle-size: var(--md-title-large-size);
  --content-cover-subtitle-size-md: var(--md-headline-small-size);
  --content-diagram-primary: var(--md-title-large-size);
  --content-diagram-secondary: var(--md-body-large-size);
  --content-diagram-caption: var(--text-caption-size);
  /* Espaciado: escala base 8px */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 2.5rem;   /* 40px */
}

/* Lesson content: ancho del contenedor, sin padding (lo da .lesson-panel__scroll 32px), tipografía Vantive Acumin */
.lesson-content {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-acumin);
  font-size: var(--content-body-size);
  line-height: var(--content-body-line);
  color: var(--color-text, inherit);
  text-align: left;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ---- Principios básicos: Material type scale +16%, espaciado 8px, plecas moradas y tipografía como Illustrator ---- */
.lesson-content h2 {
  font-family: var(--font-acumin-wide);
  font-size: var(--content-heading-size);
  line-height: var(--content-heading-line);
  letter-spacing: var(--text-headline-tracking);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-2);
  padding: 0 0 0 0.75rem;
  border-left: 4px solid var(--color-primary);
  color: var(--color-primary);
}
.lesson-content h3 {
  font-family: var(--font-acumin-wide);
  font-size: var(--content-title-size);
  line-height: var(--content-title-line);
  letter-spacing: var(--text-title-tracking);
  font-weight: var(--fw-bold);
  margin: var(--space-3) 0 var(--space-1);
  padding: 0 0 0 0.5rem;
  border-left: 3px solid var(--color-primary);
  color: var(--color-primary);
}
.lesson-content h3:first-child {
  margin-top: 0;
}
.lesson-content section {
  margin-bottom: var(--space-3);
}
.lesson-content section:last-child {
  margin-bottom: 0;
}
.lesson-content .sec-intro {
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.lesson-content .sec-intro--row {
  margin-bottom: var(--space-3);
}
.lesson-content .sec-intro__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: stretch;
  min-width: 0;
}
@media (min-width: 640px) {
  .lesson-content .sec-intro__row {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .lesson-content .sec-intro__text {
    flex: 1 1 55%;
    min-width: 0;
  }
  .lesson-content .sec-intro__fig {
    flex: 1 1 45%;
    max-width: 45%;
    margin: 0;
    padding: 0;
    min-width: 0;
  }
}
.lesson-content .sec-intro__text {
  min-width: 0;
  font-size: 1.5em;
}
/* Secciones con fondo amarillo/cream (sin morado): Respuesta Inmune y otras que usen .sec-intro--cream */
.sec-intro--cream {
  background: var(--color-cream, #fffaeb);
}
.sec-intro--cream .sec-intro__text,
.sec-intro--cream .sec-intro__text p,
.sec-intro--cream .sec-intro__text a,
.sec-intro--cream .sec-intro__text li,
.sec-intro--cream .sec-intro__text strong {
  color: var(--color-grey, #49454f);
}
.sec-intro--cream .sec-intro__text h2 {
  color: var(--color-primary);
}
.sec-intro--cream .sec-intro__fig img {
  filter: none;
}
.sec-intro--cream .sec-intro__text .sec-objectives,
.sec-intro--cream .sec-intro__text .sec-concept-list {
  margin-top: var(--space-4);
}
/* Respuesta Inmune: título a ancho completo; lista y vídeo comparten la fila */
/* Párrafo a ancho completo (no comparte fila con el vídeo); solo la lista comparte con el vídeo */
.lesson-content .sec-intro__lead {
  width: 100%;
  margin-top: 0;
  margin-bottom: var(--space-3);
  font-size: 1.5em;
  line-height: 1.5;
}
.sec-intro--cream .sec-intro__lead {
  color: var(--color-grey, #49454f);
}

.sec-intro--cream .sec-intro__row--content {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: stretch;
  min-width: 0;
}
@media (min-width: 640px) {
  .sec-intro--cream .sec-intro__row--content {
    flex-direction: row;
    align-items: flex-start;
  }
  .sec-intro--cream .sec-intro__list-wrap {
    flex: 1 1 55%;
    min-width: 0;
  }
  .sec-intro--cream .sec-intro__row--content .sec-intro__fig {
    flex: 1 1 45%;
    max-width: 45%;
    margin: 0;
    padding: 0;
    min-width: 0;
  }
}
.sec-intro--cream .sec-intro__list-wrap .sec-concept-list {
  margin-top: 0;
}

/* Uso Módulo: misma estructura/alineación que Respuesta Inmune; fondo cream; todos los textos mismo tamaño */
.sec-uso-modulo__hero {
  background: var(--color-cream, #fffaeb);
}
.sec-uso-modulo__hero .sec-intro__text,
.sec-uso-modulo__hero .sec-intro__text p,
.sec-uso-modulo__hero .sec-intro__text strong {
  color: var(--color-grey, #49454f);
}
.sec-uso-modulo__hero .sec-intro__text h2 {
  color: var(--color-primary);
}
.sec-uso-modulo__hero .sec-intro__text p,
.sec-uso-modulo__hero .sec-intro__text p:first-of-type {
  font-size: 1em;
  margin-bottom: var(--space-2);
}
.sec-uso-modulo__hero .sec-intro__text .sec-uso-modulo__label {
  font-size: 1em;
  font-weight: 600;
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
}
/* Solo título y subtítulo: +40% tamaño y 80px margen inferior */
.lesson-content .sec-intro__text h2 {
  font-size: 1.4em;
  font-family: var(--font-acumin-wide);
}
/* En secciones con fondo morado, la pleca del título debe ser clara (primary-content) */
.lesson-content .sec-intro.bg-primary .sec-intro__text h2 {
  border-left-color: var(--color-primary-content);
}
.lesson-content .sec-intro__text p:first-of-type {
  font-size: 1.4em;
  margin-bottom: 80px;
  line-height: 1.5;
}
.lesson-content .sec-intro__text p:not(:first-of-type),
.lesson-content .sec-intro__text .sec-concept-body p {
  font-size: 1em;
}
.lesson-content .sec-intro__text .sec-concept-icon-wrap {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.lesson-content .sec-intro__text .sec-concept-icon-wrap .sec-concept-icon {
  width: 36px;
  height: 36px;
}
.lesson-content .sec-intro__fig img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.lesson-content .sec-objectives {
  list-style: none;
  padding-left: 1.25em;
  margin: 0 0 var(--space-3);
}
.lesson-content .sec-objectives {
  font-family: var(--font-acumin);
}
.lesson-content .sec-objectives li {
  margin-bottom: 0.25em;
  position: relative;
  line-height: 1.45;
}
.lesson-content .sec-objectives li::before {
  content: "→ ";
  position: absolute;
  left: -1.25em;
  color: currentColor;
}
.lesson-content ul:not(.sec-objectives):not(.quiz-options-menu) {
  list-style: disc;
  padding-left: var(--space-3);
  margin: 0 0 var(--space-2);
}
.lesson-content ul:not(.sec-objectives) li {
  margin-bottom: var(--space-1);
}
.lesson-content .sec-note {
  font-size: var(--content-caption-size);
  opacity: 0.9;
  margin-top: var(--space-2);
}
.lesson-content .sec-collapse summary {
  cursor: pointer;
  font-weight: var(--fw-medium);
  margin: var(--space-1) 0;
}
.lesson-content .sec-collapse ul {
  margin: var(--space-1) 0 0 var(--space-2);
  padding-left: var(--space-2);
}
.lesson-content .sec-collapse .sec-concept-list {
  padding-left: 0;
  margin-top: var(--space-2);
}

/* Bloques de texto con mismo tamaño que Respuesta Inmune (sec-intro__text: 1.5em) */
.lesson-content .sec-content--large > p,
.lesson-content .sec-content--large .sec-collapse summary,
.lesson-content .sec-content--large > .sec-note {
  font-size: 1.5em;
  line-height: 1.5;
}
.lesson-content .sec-content--large > .sec-note {
  font-size: 1.25em;
  opacity: 0.9;
}
/* Pie de slider: ancho completo, siempre abajo (margin-top: auto en contenedor flex), sin quedar bajo la barra de controles */
.lesson-content .sec-note--foot {
  font-size: 1.25em;
  line-height: 1.5;
  opacity: 0.9;
  margin-top: auto;
  flex-shrink: 0;
  width: 100%;
}

/* Mismo tamaño de texto en list-wrap para sec-diff y sec-highlight */
.lesson-content .sec-intro__list-wrap.sec-content--large .sec-diff,
.lesson-content .sec-intro__list-wrap.sec-content--large .sec-diff p, .lesson-content .sec-intro__list-wrap.sec-content--large .sec-diff h3,
.lesson-content .sec-intro__list-wrap.sec-content--large .sec-diff ul,
.lesson-content .sec-intro__list-wrap.sec-content--large .sec-highlight {
  font-size: 1.5em;
  line-height: 1.5;
}
.lesson-content .sec-intro__list-wrap.sec-content--large .sec-diff h3 {
  font-size: 1em;
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
}
.lesson-content .sec-intro__list-wrap.sec-content--large .sec-diff h3:first-child {
  margin-top: 0;
}

.lesson-content .sec-cards h3 { margin-top: var(--space-2); }
.lesson-content .sec-cards h3:first-child { margin-top: 0; }

/* Diagramas / placeholders — contenedor liquid glass tema Vantive */
.sec-diagrams {
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
}
.sec-diagrams__title {
  font-size: 1.1em;
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
  color: var(--color-primary, #72256b);
}
.sec-diagrams__title:first-child {
  margin-top: 0;
}
.sec-diagrams__chart {
  margin-bottom: var(--space-3);
  min-height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-3);
  border-radius: var(--border-radius, 0.75rem);
  background: rgba(255, 250, 235, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(114, 37, 107, 0.22);
  box-shadow: 0 2px 8px rgba(73, 10, 77, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.sec-diagrams__chart svg {
  max-width: 100%;
  height: auto;
  border-radius: calc(var(--border-radius, 0.75rem) - 2px);
}
.sec-diagrams__placeholder-text {
  font-size: var(--content-caption-size, 0.875rem);
  color: var(--color-grey, #49454f);
  font-style: italic;
}

/* Diagrama principal en columna */
.sec-diagrams-inline .sec-diagrams__title {
  margin-top: 0;
}
.sec-diagrams-inline .sec-diagrams__chart {
  margin-top: var(--space-2);
  overflow-x: auto;
}
.sec-diagrams-inline .sec-diagrams__chart svg {
  width: 100%;
  min-width: 320px;
}
.sec-diagrams__caption {
  margin-top: var(--space-2);
  margin-bottom: 0;
  font-size: 0.95em;
  line-height: 1.5;
  color: var(--color-grey, #49454f);
}

/* Lista de conceptos con Health Icons (blood, lungs, kidneys, etc.) */
.lesson-content .sec-concept-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lesson-content .sec-concept-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-base-200);
}
.lesson-content .sec-concept-item:last-child {
  border-bottom: none;
}
/* Contenedor redondo con borde para Health Icons */
.lesson-content .sec-concept-icon-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  border: 2px solid;
  padding: 0;
  box-sizing: border-box;
}
.lesson-content .sec-concept-icon-wrap .sec-concept-icon {
  width: 24px;
  height: 24px;
  display: block;
}
/* Colores representativos por tipo de icono (borde + icono) — tonos oscuros y serios */
.lesson-content .sec-concept-icon-wrap--blood {
  border-color: #7f1d1d;
  background: rgba(127, 29, 29, 0.15);
}
.lesson-content .sec-concept-icon-wrap--blood .sec-concept-icon {
  filter: invert(12%) sepia(95%) saturate(2000%) hue-rotate(350deg) brightness(0.7) contrast(1.15);
}
.lesson-content .sec-concept-icon-wrap--blood-bag {
  border-color: #5c1010;
  background: rgba(92, 16, 16, 0.18);
}
.lesson-content .sec-concept-icon-wrap--blood-bag .sec-concept-icon {
  filter: invert(8%) sepia(95%) saturate(2500%) hue-rotate(350deg) brightness(0.6) contrast(1.15);
}
.lesson-content .sec-concept-icon-wrap--heartbeat,
.lesson-content .sec-concept-icon-wrap--heart {
  border-color: #991b1b;
  background: rgba(153, 27, 27, 0.14);
}
.lesson-content .sec-concept-icon-wrap--heartbeat .sec-concept-icon,
.lesson-content .sec-concept-icon-wrap--heart .sec-concept-icon {
  filter: invert(15%) sepia(98%) saturate(1800%) hue-rotate(350deg) brightness(0.75) contrast(1.1);
}
.lesson-content .sec-concept-icon-wrap--lungs {
  border-color: #0e7490;
  background: rgba(14, 116, 144, 0.16);
}
.lesson-content .sec-concept-icon-wrap--lungs .sec-concept-icon {
  filter: invert(32%) sepia(55%) saturate(600%) hue-rotate(165deg) brightness(0.75) contrast(1.05);
}
.lesson-content .sec-concept-icon-wrap--kidneys {
  border-color: #9a3412;
  background: rgba(154, 52, 18, 0.18);
}
.lesson-content .sec-concept-icon-wrap--kidneys .sec-concept-icon {
  filter: invert(38%) sepia(50%) saturate(500%) hue-rotate(340deg) brightness(0.75) contrast(1.05);
}
.lesson-content .sec-concept-icon-wrap--bacteria {
  border-color: #14532d;
  background: rgba(20, 83, 45, 0.18);
}
.lesson-content .sec-concept-icon-wrap--bacteria .sec-concept-icon {
  filter: invert(28%) sepia(60%) saturate(400%) hue-rotate(100deg) brightness(0.75) contrast(1.05);
}
.lesson-content .sec-concept-icon-wrap--doctor {
  border-color: #1e40af;
  background: rgba(30, 64, 175, 0.16);
}
.lesson-content .sec-concept-icon-wrap--doctor .sec-concept-icon {
  filter: invert(22%) sepia(85%) saturate(1000%) hue-rotate(215deg) brightness(0.7) contrast(1.1);
}

/* Iconos tipo liquid glass + cada ítem como card compacta (Respuesta Inmune) */
.lesson-content .sec-concept-list--icons-glass {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 1.44em;
}
.lesson-content .sec-concept-list--icons-glass .sec-concept-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2);
  padding-left: var(--space-2);
  margin: 0;
  border: none;
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--border-radius, 0.5rem) var(--border-radius, 0.5rem) 0;
  background: transparent;
  box-shadow: none;
}
.lesson-content .sec-concept-list--icons-glass .sec-concept-item .sec-concept-icon-wrap {
  flex-shrink: 0;
  margin: 0;
}
.lesson-content .sec-concept-list--icons-glass .sec-concept-item .sec-concept-body {
  flex: 1;
  min-width: 0;
  padding: 0;
}
.lesson-content .sec-concept-list--icons-glass .sec-concept-item .sec-concept-body p {
  margin: 0;
  font-size: 1em;
  line-height: 1.45;
}
.lesson-content .sec-concept-icon-wrap--glass {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.lesson-content .sec-concept-icon-wrap--blood-bag-plus {
  position: relative;
  border-color: rgba(127, 29, 29, 0.5);
  background: rgba(255, 255, 255, 0.4);
}
.lesson-content .sec-concept-icon-wrap--blood-bag-plus .sec-concept-icon {
  filter: invert(12%) sepia(95%) saturate(2000%) hue-rotate(348deg) brightness(0.7) contrast(1.15);
}
.lesson-content .sec-concept-icon-plus {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7f1d1d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.lesson-content .sec-concept-icon-wrap--chart-up {
  border-color: rgba(15, 76, 58, 0.5);
  background: rgba(255, 255, 255, 0.4);
}
.lesson-content .sec-concept-icon-wrap--chart-up .sec-concept-icon--chart {
  color: #0f4c3a;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lesson-content .sec-concept-icon-wrap--chart-up .sec-concept-icon--chart svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}
.lesson-content .sec-concept-body {
  flex: 1;
  min-width: 0;
}
.lesson-content .sec-concept-body h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--content-title-size);
  line-height: var(--content-title-line);
}
.lesson-content .sec-concept-body p {
  margin: 0;
  font-size: var(--content-body-size);
  line-height: var(--content-body-line);
}
.lesson-content .sec-diff h3 { margin-top: var(--space-2); }
.lesson-content .sec-highlight {
  padding: var(--space-2);
  margin: var(--space-2) 0;
  background: var(--color-base-200);
}
.lesson-content .sec-quiz {
  margin-bottom: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-base-200);
}
.lesson-content .sec-quiz .quiz-question { margin-bottom: var(--space-2); }

/* Quiz: instrucciones y helper (Material — helper text legible, no primario para alertas) */
.lesson-content .quiz-instructions {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  background: var(--color-base-200);
  border-radius: 8px;
  font-size: var(--content-body-size);
  line-height: var(--content-body-line);
  border-left: 4px solid var(--color-primary, #0d9488);
}
.lesson-content .quiz-helper {
  display: block;
  font-size: var(--content-caption-size);
  color: var(--color-base-content);
  opacity: 0.75;
  margin-top: var(--space-1);
}
.lesson-content .quiz-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
/* Botones de acción del quiz: aspecto de botón claro (Material contained / outlined) */
.lesson-content .sec-quiz .quiz-submit,
.lesson-content .sec-quiz .quiz-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--content-body-size);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
/* Principal: «Comprobar respuesta» — botón relleno (contained) */
.lesson-content .sec-quiz .quiz-submit.btn-primary {
  background-color: var(--color-primary, #0d9488);
  color: var(--color-primary-content, #fff);
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  min-height: 44px;
  border: 2px solid var(--color-primary, #0d9488);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.lesson-content .sec-quiz .quiz-submit.btn-primary:hover:not(:disabled) {
  background-color: #0b8277;
  border-color: #0b8277;
  filter: none;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35);
}
.lesson-content .sec-quiz .quiz-submit.btn-primary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.lesson-content .sec-quiz .quiz-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
/* Secundario: «Volver a responder» — botón outline/ghost */
.lesson-content .sec-quiz .quiz-actions .btn-ghost {
  padding: 0.5rem 1rem;
  min-height: 36px;
  border: 2px solid var(--color-base-300);
  background: var(--color-base-100);
  color: var(--color-base-content);
  font-weight: 500;
}
.lesson-content .sec-quiz .quiz-actions .btn-ghost:hover {
  background: var(--color-base-200);
  border-color: var(--color-base-300);
}
.lesson-content .sec-quiz .quiz-actions .btn-ghost:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Opciones P1: chips/botones con estado seleccionado (Material: secondary/primary en selection) */
.lesson-content .quiz-option-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-1) 0 var(--space-2);
}
.lesson-content .sec-quiz .quiz-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 2px solid var(--color-base-300);
  background: var(--color-base-100);
  cursor: pointer;
  font-size: var(--content-body-size);
  transition: border-color 0.2s, background-color 0.2s;
}
.lesson-content .sec-quiz .quiz-option:hover {
  border-color: var(--color-primary, #0d9488);
  background: rgba(13, 148, 136, 0.06);
}
.lesson-content .sec-quiz .quiz-option.quiz-option--selected {
  border-color: var(--color-primary, #0d9488);
  background: rgba(13, 148, 136, 0.12);
  color: var(--color-primary);
  font-weight: 600;
}
.lesson-content .sec-quiz .quiz-option input[type="radio"] {
  margin: 0;
  accent-color: var(--color-primary);
}
/* Opciones P2: lista con ítem seleccionado */
.lesson-content .quiz-options-menu {
  list-style: none;
  padding: 0;
  margin: var(--space-1) 0 var(--space-2);
}
.lesson-content .quiz-options-menu li {
  margin-bottom: var(--space-1);
}
.lesson-content .sec-quiz .quiz-option-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem var(--space-2);
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: var(--content-body-size);
  transition: border-color 0.2s, background-color 0.2s;
}
.lesson-content .sec-quiz .quiz-option-item:hover {
  background: var(--color-base-200);
}
.lesson-content .sec-quiz .quiz-option-item:has(input:checked) {
  border-color: var(--color-primary, #0d9488);
  background: rgba(13, 148, 136, 0.1);
  font-weight: 500;
}
.lesson-content .sec-quiz .quiz-option-item input[type="radio"] {
  margin: 0;
  accent-color: var(--color-primary);
}
.lesson-content .quiz-option-label {
  margin-bottom: var(--space-1);
  font-weight: 500;
}
/* Utilidad para mostrar/ocultar (quiz retry, feedback inicial) */
.hidden {
  display: none !important;
}

.lesson-content .sec-tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}
.lesson-content .sec-tabs [role="tab"] {
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  border-radius: 8px;
  border: 2px solid transparent;
  font-weight: 500;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.lesson-content .sec-tabs [role="tab"]:hover {
  background: var(--color-base-200);
}
.lesson-content .sec-tabs [role="tab"].tab-active,
.lesson-content .sec-tabs [role="tab"][aria-selected="true"] {
  background: rgba(13, 148, 136, 0.12);
  border-color: var(--color-primary, #0d9488);
  color: var(--color-primary);
  font-weight: 600;
}
.lesson-content .sec-tabs [role="tab"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.lesson-content .sec-panel { margin-bottom: var(--space-3); }
.lesson-content .sec-table-wrap {
  overflow: auto;
  max-height: 50vh;
  border: 1px solid var(--color-base-300);
}
.lesson-content .sec-fig { margin: var(--space-3) 0; }
.lesson-content .sec-fig img { max-width: 100%; height: auto; display: block; }
.lesson-content .sec-video {
  margin: var(--space-3) 0;
  max-width: 100%;
}
.lesson-content .sec-video-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
}
.lesson-content .sec-video-row .sec-video {
  margin: 0;
}
.lesson-content .sec-video video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  background: var(--color-base-200);
}
/* Párrafos: sin padding; espaciado consistente (body spacing) */
.lesson-content p,
.lesson-content .content-block p,
.lesson-content .card-body > p {
  padding: 0;
  margin-top: 0;
  margin-bottom: var(--content-body-spacing);
  font-size: inherit;
  line-height: var(--content-body-line);
  text-align: left;
}

.lesson-content p:first-child,
.lesson-content .content-block p:first-child,
.lesson-content .card-body > p:first-child {
  margin-top: 0;
}
.lesson-content p:last-child,
.lesson-content .content-block p:last-child,
.lesson-content .card-body > p:last-child {
  margin-bottom: 0;
}

/* Títulos dentro del contenido: sin padding; espaciado con margin */
.lesson-content .slide-title,
.lesson-content h2.slide-title {
  padding: 0;
  font-size: var(--content-heading-size);
  line-height: var(--content-heading-line);
  font-weight: var(--fw-bold);
  margin-top: 0;
  margin-bottom: 1rem;
  text-align: left;
}

/* Hero/banner dentro de lección: padding escala, margen, alineación izquierda */
.lesson-content .hero {
  padding: var(--space-4);
  margin-top: 0;
  margin-bottom: var(--space-3);
  text-align: left !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.lesson-content .hero .slide-title,
.lesson-content .hero .slide-subtitle,
.lesson-content .hero h2,
.lesson-content .hero p {
  text-align: left !important;
  margin-left: 0;
  margin-right: auto;
}
.lesson-content .hero .hero-content {
  padding: 0;
  text-align: left;
  max-width: 100%;
}

/* Cards y bloques: padding y margen escala 8px */
.lesson-content .card,
.lesson-content .content-block {
  margin-top: 0;
  margin-bottom: var(--space-3);
  max-width: 100%;
  box-sizing: border-box;
}
.lesson-content .card-body {
  padding: var(--space-4);
  font-size: inherit;
}
.lesson-content .content-block {
  padding: 0;
}

.lesson-content .collapse .collapse-title,
.lesson-content .collapse .collapse-content {
  padding: var(--space-4);
  min-height: 0;
}
.lesson-content .menu {
  padding: 0;
}

/* Portada (slide-cover): bloque de texto a la izquierda */
.slide-cover .hero-home__content {
  text-align: left;
}

/* Figura desde Illustrator (SvgClipping): decoración de fondo en portada */
.hero-home__content--portada {
  position: relative;
}
.portada-deco-fig {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  color: var(--color-primary-content);
}
.portada-deco-fig svg {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 60%;
  max-width: 520px;
  height: auto;
}
.portada__row,
.portada__text,
.slide-cover__footer {
  position: relative;
  z-index: 1;
}

/* Portadas y banners: títulos muy grandes — sin padding, alineación izquierda */
.lesson-content .hero .slide-title,
.lesson-content .hero h2,
.slide-cover .slide-title,
.slide-cover .focusText,
.hero-home__mainContent .slide-title {
  padding: 0;
  font-size: var(--content-cover-title-size);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
}

@media (min-width: 768px) {
  .lesson-content .hero .slide-title,
  .lesson-content .hero h2,
  .slide-cover .slide-title,
  .slide-cover .focusText,
  .hero-home__mainContent .slide-title {
    font-size: var(--content-cover-title-size-md);
  }
}

.lesson-content .hero .slide-subtitle,
.lesson-content .hero .opacity-95,
.slide-cover .slide-subtitle,
.hero-home__mainContent .slide-subtitle {
  padding: 0;
  font-size: var(--content-cover-subtitle-size);
  line-height: 1.4;
  text-align: left;
}

@media (min-width: 768px) {
  .lesson-content .hero .slide-subtitle,
  .slide-cover .slide-subtitle {
    font-size: var(--content-cover-subtitle-size-md);
  }
}

/* Portada (slide-cover): título y subtítulo +50% y +20% solo en esta sección */
.slide-cover .hero-home__mainContent .slide-title,
.slide-cover .hero-home__mainContent .focusText {
  font-size: 4.05rem; /* +50% y +20% */
}
.slide-cover .hero-home__mainContent .slide-subtitle {
  font-size: 2.25rem;
}
@media (min-width: 768px) {
  .slide-cover .hero-home__mainContent .slide-title,
  .slide-cover .hero-home__mainContent .focusText {
    font-size: 5.4rem;
  }
  .slide-cover .hero-home__mainContent .slide-subtitle {
    font-size: 2.7rem;
  }
}

/* Diagramas: jerarquía de tamaños (stats, timeline, steps, diff) */
.lesson-content .stat-title,
.lesson-content .stat .stat-title,
.lesson-content .timeline .text-lg.font-black,
.lesson-content .timeline-start > .text-lg,
.lesson-content .timeline-end > .text-lg {
  font-size: var(--content-diagram-primary) !important;
  font-weight: 700;
  line-height: 1.3;
}

.lesson-content .stat-desc,
.lesson-content .stat .stat-desc,
.lesson-content .timeline-start,
.lesson-content .timeline-end,
.lesson-content .steps .step {
  font-size: var(--content-diagram-secondary) !important;
  line-height: var(--content-body-line);
}

.lesson-content .diff p,
.lesson-content .diff .text-sm {
  font-size: var(--content-diagram-secondary);
  line-height: var(--content-body-line);
}

.lesson-content .diff .font-bold {
  font-size: var(--content-diagram-primary);
}

/* Diagramas: texto centrado en nodos (no alinear a la derecha para no romper la naturaleza del diagrama) */
.lesson-content .stats,
.lesson-content .stat,
.lesson-content .stat .stat-title,
.lesson-content .stat .stat-desc,
.lesson-content .timeline .timeline-start,
.lesson-content .timeline .timeline-end,
.lesson-content .timeline-start,
.lesson-content .timeline-end,
.lesson-content .steps,
.lesson-content .steps .step,
.lesson-content .diff .diff-item-1,
.lesson-content .diff .diff-item-2,
.lesson-content .diff-item-1,
.lesson-content .diff-item-2,
.lesson-content .diff-item-1 > div,
.lesson-content .diff-item-2 > div {
  text-align: center;
}

.lesson-content .note.cite-abbrev,
.lesson-content .slide-footer {
  font-size: var(--content-diagram-caption);
  line-height: 1.5;
}

.lesson-content .label-text,
.lesson-content .font-semibold.quiz-question,
.lesson-content .font-medium {
  font-size: var(--content-diagram-secondary);
  line-height: var(--content-body-line);
}

/* Listas y ítems dentro del contenido */
.lesson-content ul,
.lesson-content ol,
.lesson-content .menu li {
  font-size: inherit;
  line-height: var(--content-body-line);
}

.lesson-content li {
  margin-bottom: 0.5em;
}

/* Content lyrics y cards: heredan tamaño libro */
.lesson-content .content-lyrics,
.lesson-content .content-lyrics p {
  font-size: inherit;
  line-height: var(--content-body-line);
}


.lesson-content--narrow {
  max-width: min(42rem, 100%);
}

/* Bloques de sección: margen escala, sin desborde */
.lesson-content .stats,
.lesson-content .stat,
.lesson-content .timeline,
.lesson-content .steps,
.lesson-content .grid {
  max-width: 100%;
  margin-top: 0;
  margin-bottom: var(--space-3);
}

/* Steps vertical: ancho del contenedor */
.lesson-content .steps--wide,
.lesson-content .steps.steps-vertical {
  max-width: 100%;
}

.lesson-content .steps--wide .step,
.lesson-content .steps.steps-vertical .step {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}

/* Timeline: usar todo el ancho del contenedor; contenido sin restricción de ancho */
.lesson-content .timeline--wide,
.lesson-content .timeline.timeline-vertical {
  max-width: 100%;
  width: 100%;
}

.lesson-content .timeline--wide .timeline-start,
.lesson-content .timeline--wide .timeline-end,
.lesson-content .timeline.timeline-vertical .timeline-start,
.lesson-content .timeline.timeline-vertical .timeline-end {
  min-width: 0;
  max-width: 100%;
}

.lesson-panel .slide-title {
  margin-top: 0;
}

/* Contenido tipo lyrics: varios renglones, párrafos con indentación (mismo espaciado libro) */
.content-lyrics {
  max-width: 68ch;
  line-height: var(--content-body-line, 1.75);
}

.content-lyrics p {
  margin-bottom: var(--content-body-spacing, 1.25em);
}

.content-lyrics p:last-child {
  margin-bottom: 0;
}

.content-lyrics .lyrics-line {
  margin-left: 0;
  margin-bottom: 0.35em;
}

.content-lyrics .lyrics-indent {
  margin-left: 1.5rem;
}

.content-lyrics .lyrics-indent-2 {
  margin-left: 3rem;
}

.stat-desc.content-lyrics,
.stat-desc .content-lyrics {
  max-width: 100%;
}

/* Quiz: bloque de resultado — padding escala */
.quiz-feedback {
  padding: var(--space-4);
  margin-top: 0;
  margin-bottom: var(--space-3);
  border-radius: 12px;
  background: var(--color-base-200);
  font-family: var(--daisy-font-body, inherit);
  box-sizing: border-box;
  border-left: none;
}

.quiz-feedback--correct {
  background: rgba(16, 87, 66, 0.08);
}

.quiz-feedback--incorrect {
  background: rgba(185, 28, 28, 0.08);
}

.quiz-feedback__status {
  font-size: var(--content-diagram-caption, 0.9375rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem 0;
  color: var(--color-text, inherit);
}

.quiz-feedback--correct .quiz-feedback__status {
  color: var(--color-pine, #105742);
}

.quiz-feedback--incorrect .quiz-feedback__status {
  color: var(--color-error, #b91c1c);
}

.quiz-feedback__body {
  font-size: var(--content-diagram-secondary, 1.0625rem);
  line-height: var(--content-body-line, 1.75);
  margin: 0;
  color: var(--color-text, inherit);
  opacity: 0.95;
}

/* Sección pequeña al final: disclaimers y créditos */
.disclaimers-credits summary {
  list-style: none;
  user-select: none;
}
.disclaimers-credits summary::-webkit-details-marker {
  display: none;
}

/* Slides inside course panels: allow natural height and scroll (no full viewport).
   Override layout-slides default (opacity: 0, visibility: hidden) so content is visible. */
.course-lessons .lesson-panel .slide {
  position: relative;
  min-height: auto;
  height: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.course-lessons .lesson-panel .hero-home__container {
  min-height: 50vh;
}

/* ---- Portada: responsive, box-sizing, altura acotada para evitar crecimiento infinito ---- */
.slide-cover .hero-home__container.hero-home__container--portada,
.slide-cover .hero-home__container.hero-home__container--portada * {
  box-sizing: border-box;
}

/* Portada en flujo normal (sin position absolute): texto + imagen tipo artículo */
.slide-cover--article .hero-home__container--portada {
  position: static;
  overflow-x: hidden;
  overflow-y: auto;
  display: block;
  min-height: 0;
  padding: var(--space-4);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.hero-home__container--portada {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex !important;
  flex-direction: column;
  padding: var(--space-4);
  gap: 0;
  min-height: 50vh;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.cover-card__brand--absolute {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: var(--space-4);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.cover-card__brand--absolute .oxiris-subtitle {
  font-family: var(--font-button);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--color-primary-content);
  opacity: 0.95;
  margin: 0;
  text-transform: uppercase;
}

.slide-cover--article .hero-home__content--portada {
  position: static;
  z-index: auto;
  flex: none;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  padding: var(--space-4) !important;
  gap: var(--space-4);
}

/* Contenedor compartido: texto e imagen al 50% */
.portada__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: stretch;
  min-width: 0;
}
@media (min-width: 640px) {
 .portada__row {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
  }
  .portada__text {
    flex: 1 1 55%;
    min-width: 0;
  }
  .portada__row .portada-fig {
    flex: 1 1 45%;
    max-width: 45%;
    margin: 0;
  }
}

.portada__text {
  min-width: 0;
}

/* Imagen complementaria en portada: no más de la mitad del espacio, se ve bien */
.portada-fig {
  margin: 0;
  padding: 0;
  max-width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.portada-fig img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 800px;
  height: auto;
  object-fit: contain;
  background: transparent;
}
/* Logo Vantive arriba del título en portada */
.hero-home__content--portada .portada-logo-wrap {
  flex-shrink: 0;
  margin-bottom: 120px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-home__content--portada .portada-logo-oxiris {
  display: block;
  width: auto;
  max-width: 202px;
  height: 35px;
  object-fit: contain;
}
.hero-home__content--portada .portada-vantive-logo {
  display: block;
  height: 3.6rem;
  width: auto;
  max-width: 288px;
  object-fit: contain;
}
.hero-home__content--portada h1 {
  font-family: var(--font-acumin-wide);
  font-weight: 700;
  color: var(--color-primary-content);
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0;
  padding: 0;
}
.hero-home__content--portada .portada-title-lead {
  font-size: 1.62em;
}
.hero-home__content--portada .portada-title-lead .portada-oxiris-name {
  font-size: 1em;
}
.hero-home__content--portada .portada-title-rest {
  display: block;
  margin-top: 32px;
}
.hero-home__content--portada .portada-oxiris-name {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
}
@media (min-width: 768px) {
  .hero-home__content--portada h1 { font-size: 1.75rem; }
  .hero-home__content--portada .portada-vantive-logo { max-width: 317px; height: 3.96rem; }
}

.hero-home__mainContent--portada {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 55%;
}

.slide-cover__title-lines {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  margin: 80px 0 0 0 !important;
  padding: 0 var(--space-4);
  text-align: left;
  width: 100%;
  max-width: 100%;
}

/* Imagen a la derecha: zona visible de al menos 240px; no cubierta por el contenido */
.slide-cover__image-bkg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  box-sizing: border-box;
}

.slide-cover__image-bkg img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
  box-sizing: border-box;
}

.slide-cover__title-lines .slide-cover__line {
  display: block;
  font-family: var(--font-acumin-wide);
  font-weight: 700;
  color: var(--color-primary-content);
  line-height: 1.2;
}
.slide-cover__title-lines .slide-cover__line:nth-child(1),
.slide-cover__title-lines .slide-cover__line:nth-child(2) {
  font-size: 2.43rem; /* -40% */
}
.slide-cover__title-lines .slide-cover__line:nth-child(3),
.slide-cover__title-lines .slide-cover__line:nth-child(4) {
  font-size: 1.35rem; /* -40% */
  font-weight: 500;
}
@media (min-width: 768px) {
  .slide-cover__title-lines .slide-cover__line:nth-child(1),
  .slide-cover__title-lines .slide-cover__line:nth-child(2) {
    font-size: 3.24rem; /* -40% */
  }
  .slide-cover__title-lines .slide-cover__line:nth-child(3),
  .slide-cover__title-lines .slide-cover__line:nth-child(4) {
    font-size: 1.62rem; /* -40% */
  }
}

.slide-cover__footer {
  margin: var(--space-4) 0 0 0 !important;
  padding: 0;
  text-align: left;
  flex-shrink: 0;
  font-size: 0.875rem;
  opacity: 0.9;
}
.slide-cover__footer p { margin: 0; }


@media (max-width: 559px) {
  .hero-home__content--portada {
    max-width: calc(100% - 120px);
  }
}

@media (min-width: 768px) {
  .hero-home__container--portada {
    padding: var(--space-4);
  }
  .cover-card__brand--absolute {
    padding: var(--space-4);
  }
  .hero-home__content--portada {
    padding-top: 6rem !important;
  }
  .hero-home__mainContent--portada {
    max-width: 50%;
  }
}

/* References table: fixed header when scrolling long list */
.references-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-base-100);
  box-shadow: 0 1px 0 0 var(--color-base-300);
}

/* How-to-use intro panel */
.lesson-panel--intro {
  padding-top: 0;
}

.course-how-to-use h2 {
  font-family: var(--font-acumin-wide);
  font-size: var(--content-heading-size);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin: 0 0 var(--content-body-spacing);
}

.course-how-to-use p {
  font-family: var(--font-acumin);
  font-size: var(--content-body-size);
  line-height: var(--content-body-line);
  color: var(--color-text);
  margin: 0 0 var(--content-body-spacing);
}

.course-how-to-use ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0 0 1rem;
}

.course-how-to-use li {
  margin-bottom: 0.5rem;
}

/* ---- Mobile: hamburger to toggle sidebar (daisyUI btn btn-circle btn-primary) ---- */
.course-nav-toggle {
  display: none;
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  left: max(1rem, env(safe-area-inset-left));
  z-index: 150;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.course-nav-toggle svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 767px) {
  .course-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    margin-left: 0;
  }

  .course-sidebar.is-closed {
    transform: translateX(-100%);
    margin-left: 0;
  }

  .course-main {
    padding-top: 60px;
  }

  .course-nav-toggle {
    display: flex;
  }
}

@media (min-width: 768px) {
  .course-nav-toggle {
    display: none;
  }
  .course-sidebar.is-closed {
    transform: none;
    margin-left: 0;
  }
}

/* ---- Drawer left: espacio abajo para no solaparse con la barra de controles ---- */
/* Banner del drawer: fondo morado sólido, texto legible */
.course-drawer-banner,
.course-drawer-banner a,
.course-drawer-banner span {
  color: var(--color-primary-content, var(--color-cream, #fffaeb));
}
.course-drawer-banner__logos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: calc(0.75rem + 40px);
}
.course-drawer-banner__logo {
  height: 1.5rem;
  width: auto;
  object-fit: contain;
  opacity: 0.95;
}
.course-drawer-banner__logo--vantive {
  filter: brightness(0) invert(1);
}
.course-drawer-banner__logo--oxiris {
  filter: brightness(0) invert(1);
}
.course-drawer-banner h2 {
  font-size: 1.3125rem; /* +50% sobre text-sm (0.875rem × 1.5) */
}
.course-drawer-banner [role="presentation"] {
  background-color: rgba(255, 255, 255, 0.3) !important;
}
.course-drawer-banner #sidebarProgressBar {
  background-color: #fff !important;
}
.course-drawer-banner a:hover {
  color: var(--color-primary-content);
  opacity: 1;
}

#courseSidebar.drawer-side {
  padding-bottom: 5.5rem;
}

#courseSidebar.drawer-side aside {
  padding-bottom: 0.5rem;
}

/* ---- Drawer: navegación por cards (un card por slide) ---- */
.slide-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.slide-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0;
  list-style: none;
  margin: 0;
}
.slide-nav-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: var(--color-base-content);
  background: var(--color-base-100);
  border-radius: 10px;
  border: 2px solid transparent;
  border-left: none;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  min-height: 0;
}
.slide-nav-card.course-sidebar__outline-link {
  border-left: none;
}
.slide-nav-card:hover {
  background: var(--color-base-200);
  border-color: var(--color-base-300);
}
.slide-nav-card.is-active {
  background: var(--color-primary);
  color: var(--color-primary-content);
  border-color: var(--color-primary);
  border-left: none;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.slide-nav-card__thumb {
  flex-shrink: 0;
  width: 48px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-base-200);
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-nav-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide-nav-card__thumb-label {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--font-acumin-wide);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(230,240,235,0.95));
}
.slide-nav-card.is-active .slide-nav-card__thumb {
  background: rgba(255, 255, 255, 0.25);
}
.slide-nav-card.is-active .slide-nav-card__thumb-label {
  color: var(--color-primary-content);
  background: rgba(255, 255, 255, 0.22);
}
.slide-nav-card__title {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slide-nav-card__num {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.8;
}
.slide-nav-card.is-active .slide-nav-card__num {
  opacity: 1;
}

/* ---- Bottom nav (iSpring-style: prev/next, progress, audio, fullscreen) ---- */
.course-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 56px;
  padding: 0.5rem max(1rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  background: var(--color-neutral, oklch(0.25 0.02 260));
  color: var(--color-neutral-content, #fff);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
}

.course-bottom-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.course-bottom-nav__left {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.course-bottom-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.course-bottom-nav__brand-logo {
  height: 1rem;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  opacity: 0.95;
}
.course-bottom-nav .course-bottom-nav__brand-logo {
  filter: brightness(0) invert(1);
}
.course-bottom-nav__brand-text {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-neutral-content, #fff);
  opacity: 0.95;
}

.course-bottom-nav__center {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  justify-content: center;
}

.course-bottom-nav__progress-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 120px;
  max-width: 280px;
  width: 100%;
}

.course-bottom-nav__progress-wrap .range {
  flex: 1;
  min-width: 60px;
}

.course-bottom-nav__progress-label {
  flex-shrink: 0;
  white-space: nowrap;
}

.course-bottom-nav__right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.course-bottom-nav .btn-circle {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
}

.course-bottom-nav #btnPrev:disabled,
.course-bottom-nav #btnNext:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Énfasis Material: botón principal "Siguiente" en barra inferior */
.course-bottom-nav .nav-action-primary:not(:disabled) {
  background-color: var(--color-primary, #0d9488);
  color: var(--color-primary-content, #fff);
  border: none;
}
.course-bottom-nav .nav-action-primary:hover:not(:disabled) {
  filter: brightness(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.course-bottom-nav .nav-action-primary:focus-visible {
  outline: 2px solid var(--color-primary-content, #fff);
  outline-offset: 2px;
}

.nav-fullscreen-icon--exit.hidden { display: none; }
.nav-fullscreen-icon--enter.hidden { display: none; }
.course-bottom-nav.is-fullscreen .nav-fullscreen-icon--enter { display: none; }
.course-bottom-nav.is-fullscreen .nav-fullscreen-icon--exit { display: block; }

/* ---- Tilt card (hover 3D effect for engagement) ---- */
.tilt-card {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.tilt-card__inner {
  transition: transform 0.2s ease;
  transform-style: preserve-3d;
  margin: 0;
}

.tilt-card:hover .tilt-card__inner {
  transform: rotateY(-4deg) rotateX(2deg);
}

.tilt-card:focus-within .tilt-card__inner {
  transform: rotateY(-2deg) rotateX(1deg);
}