/* ══════════════════════════════════════════════════════════════════════════
   EL CURSO · Parte 7 del plan de construcción (14-ago-2026)

   Tres superficies, portadas de `docs/prototipo-s106/pantallas/`:
     · la tarjeta de Hoy            → hoy.html §4 · EL CURSO
     · el índice                    → curso.html
     · un módulo por dentro         → curso-modulo.html

   El problema de la pantalla del índice no es mostrar nueve módulos: es dejar
   recorrer más de cien horas de lectura sin que abrume. Se resuelve en tres
   niveles —PARTE → CAPÍTULO → MÓDULO— con solo la rama donde estás abierta, más
   dos atajos para volver atrás (buscador y últimos leídos), porque nadie navega
   tres niveles para encontrar algo que leyó hace un mes.

   Los tres estados, y la regla que los une:
     leído     → se puede reabrir siempre, y lo dice con todas sus letras
     actual    → es el que toca
     bloqueado → todavía no, y se explica por qué en el primero de la fila

   ⚠️ Los prefijos `p-curso-` se repiten a propósito entre la tarjeta de Hoy y
   la pantalla del índice: es como están escritos en el prototipo. Las 34
   pantallas viven en UN documento, así que cada bloque va anclado a su pantalla
   (`#screen-home` · `#screen-curso` · `#screen-curso-modulo`) y no se pisan.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   1 · LA TARJETA DE HOY
   ══════════════════════════════════════════════════════════════════════════ */

.home-curso { margin-top: 8px; }

/* La línea de apoyo de la sección. `.home-sec-titulo` ya existe (lo trajo la
   Parte 5 en `css/journal.css`) y se reutiliza tal cual: las secciones de Hoy
   llevan el mismo rótulo para que no queden dos estilos de título sin regla en
   la misma pantalla. Lo que faltaba era esta segunda línea, que en el prototipo
   es `p-sec-apoyo`: el título nombra la cosa y esta dice qué es, porque el botón
   de la tarjeta dice «Seguir leyendo» y no nombra ningún curso. */
.home-sec-apoyo {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  margin: -6px 0 14px;
}

#screen-home .p-curso-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 16px 18px 18px;
  background: var(--surface);
  border: 1px solid var(--faint);
  border-radius: 18px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, transform .12s ease;
}
#screen-home .p-curso-card:active { transform: scale(.985); }
@media (hover: hover) {
  #screen-home .p-curso-card:hover { border-color: var(--accent); }
}
#screen-home .p-curso-cover {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: radial-gradient(circle at 34% 30%, var(--accent-soft), var(--canvas) 82%);
  border: 1px solid var(--faint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
#screen-home .p-curso-body { flex: 1; min-width: 0; }
#screen-home .p-curso-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
#screen-home .p-curso-title {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
#screen-home .p-curso-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--faint);
  overflow: hidden;
  margin: 12px 0 8px;
}
#screen-home .p-curso-bar-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
}
#screen-home .p-curso-meta {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
#screen-home .p-curso-cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}


/* ══════════════════════════════════════════════════════════════════════════
   2 · EL ÍNDICE
   ══════════════════════════════════════════════════════════════════════════ */

#screen-curso .p-curso-wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 52px) 24px calc(env(safe-area-inset-bottom, 0px) + 96px);
  /* `.screen` es un flex column y este bloque trae `margin: 0 auto`. Un margen
     automático en el eje transversal ANULA el estirado, así que se dimensionaba
     a su contenido: la fila de «últimos leídos» mide 790px por dentro y
     arrastraba la pantalla entera de lado, aunque su propio overflow-x ya la
     deja hacer scroll sola. Con ancho explícito vuelve a medir el teléfono. */
  width: 100%;
  min-width: 0;
  /* ⚠️ SIN `min-height: 100dvh` A PROPÓSITO — fila 88 del tablero. Ese alto
     recorta el contenedor al del teléfono y deja el último botón por debajo de
     la barra de abajo en siete pantallas del repo. Acá el contenido manda y el
     `.screen` ya hace scroll. */
}

/* ── portada ─────────────────────────────────────────────────────────────── */
#screen-curso .p-curso-cover {
  position: relative;
  overflow: hidden;
  background: var(--contrast);
  color: var(--night-fg);
  border-radius: var(--r-card-lg);
  padding: 26px 22px 22px;
  margin-bottom: 14px;
}
#screen-curso .p-curso-cover-art {
  position: absolute;
  top: -34px;
  right: -34px;
  width: 150px;
  height: 150px;
  color: var(--gold);
  opacity: .5;
  pointer-events: none;
}
#screen-curso .p-curso-kicker { color: var(--faint); position: relative; }
#screen-curso .p-curso-title {
  position: relative;
  font-size: 32px;
  color: var(--night-fg);
  margin: 8px 0 12px;
}
#screen-curso .p-curso-arc {
  position: relative;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--faint);
  margin: 0 0 18px;
  max-width: 30em;
}
#screen-curso .p-curso-facts {
  position: relative;
  display: flex;
  gap: 10px;
  border-top: 1px solid rgba(243, 228, 209, .16);
  padding-top: 14px;
}
#screen-curso .p-curso-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}
#screen-curso .p-curso-fact b {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--gold);
}

/* ── la nota del temario: sobria, no un cartel ───────────────────────────── */
#screen-curso .p-curso-nota {
  display: flex;
  gap: 10px;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 14px 16px;
  margin-bottom: 26px;
}
#screen-curso .p-curso-nota-mark {
  width: 3px;
  border-radius: 2px;
  background: var(--gold);
  flex-shrink: 0;
}
#screen-curso .p-curso-nota p {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
#screen-curso .p-curso-nota b { color: var(--ink); font-weight: 600; }

/* ── avance: una barra por parte, para que se vea el tamaño real ─────────── */
#screen-curso .p-curso-prog { margin-bottom: 22px; }
#screen-curso .p-curso-prog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
#screen-curso .p-curso-prog-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  margin: 0;
}
#screen-curso .p-curso-prog-num b {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}
#screen-curso .p-curso-track { display: flex; gap: 3px; }
#screen-curso .p-curso-seg {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: var(--faint);
  overflow: hidden;
}
#screen-curso .p-curso-seg.is-full { background: var(--accent); }
#screen-curso .p-curso-seg-fill {
  display: block;
  height: 100%;
  background: var(--accent);
}
#screen-curso .p-curso-prog-line {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 10px 0 0;
}
#screen-curso .p-curso-prog-line b { color: var(--ink); font-weight: 600; }

#screen-curso .p-curso-continue { margin-bottom: 10px; }
#screen-curso .p-curso-continue-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--muted);
  text-align: center;
  margin: 0 0 30px;
}
#screen-curso .p-curso-continue-sub b {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}

/* ── volver atrás: buscador + últimos leídos ─────────────────────────────── */
#screen-curso .p-curso-sec-label { margin-bottom: 12px; }

#screen-curso .p-curso-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--faint);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  margin-bottom: 14px;
}
@media (hover: hover) {
  #screen-curso .p-curso-search:hover { border-color: var(--accent); }
}

/* El buscador ABIERTO. El prototipo dibuja el botón y no lo que pasa al
   tocarlo: la decisión («¿entra el buscador? sí, entra») es de Andrés, la forma
   es mínima a propósito — el mismo contorno de píldora, con el campo dentro y
   los resultados debajo. Busca SOBRE EL ÍNDICE, que ya está entero en el
   cliente: cero llamadas al servidor por tecla. */
#screen-curso .p-curso-searchbox {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 8px 0 16px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 999px;
  margin-bottom: 14px;
}
#screen-curso .p-curso-searchbox input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15px;   /* 16px o menos hace que iOS haga zoom al enfocar; 15 con
                        el `maximum-scale` del viewport no lo dispara */
  color: var(--ink);
  padding: 12px 0;
  outline: none;
}
#screen-curso .p-curso-searchbox input::placeholder { color: var(--muted); }
#screen-curso .p-curso-search-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 999px;
}
#screen-curso .p-curso-search-res {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
#screen-curso .p-curso-search-hit {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--faint);
  border-radius: var(--r-card-sm);
  text-align: left;
  font-family: var(--font-sans);
  cursor: pointer;
}
#screen-curso .p-curso-search-hit:disabled { cursor: default; opacity: .72; }
#screen-curso .p-curso-search-hit-t {
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.24;
  letter-spacing: -0.012em;
  color: var(--ink);
}
#screen-curso .p-curso-search-hit-m {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
#screen-curso .p-curso-search-vacio {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 20px;
}

#screen-curso .p-curso-recientes {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -24px 30px;
  padding: 2px 24px;
  /* Sin esto el enganche alinea la primera tarjeta contra el borde del teléfono
     y se come los 24px de aire de la izquierda. */
  scroll-padding: 0 24px;
}
#screen-curso .p-curso-recientes::-webkit-scrollbar { display: none; }
#screen-curso .p-curso-rec {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 178px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--faint);
  border-radius: var(--r-card);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, transform .12s ease;
}
#screen-curso .p-curso-rec:active { transform: scale(.985); }
@media (hover: hover) {
  #screen-curso .p-curso-rec:hover { border-color: var(--accent); }
}
#screen-curso .p-curso-rec-d {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
#screen-curso .p-curso-rec-t {
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.24;
  letter-spacing: -0.012em;
  color: var(--ink);
  flex: 1;
}
#screen-curso .p-curso-rec-p {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--muted);
}

/* ── el camino ───────────────────────────────────────────────────────────── */
#screen-curso .p-curso-camino-label { margin-top: 32px; margin-bottom: 10px; }
#screen-curso .p-curso-camino {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--faint);
}

#screen-curso .p-curso-parte { border-bottom: 1px solid var(--faint); }
#screen-curso .p-curso-parte-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-height: 44px;
  padding: 15px 2px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
#screen-curso .p-curso-parte-head::-webkit-details-marker { display: none; }
#screen-curso .p-curso-parte.is-bloq .p-curso-parte-head { cursor: default; }

#screen-curso .p-curso-pmark {
  width: 26px;
  height: 26px;
  border-radius: 13px;
  border: 1.5px solid var(--faint);
  background: var(--canvas);
  color: var(--canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
#screen-curso .p-curso-parte.is-leida .p-curso-pmark {
  background: var(--accent);
  border-color: var(--accent);
}
#screen-curso .p-curso-parte.is-curso .p-curso-pmark { border: 2px solid var(--accent); }
#screen-curso .p-curso-pcore {
  width: 9px;
  height: 9px;
  border-radius: 5px;
  background: var(--accent);
}
#screen-curso .p-curso-parte.is-bloq .p-curso-pmark {
  color: var(--muted);
  opacity: .75;
}

#screen-curso .p-curso-ptxt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
#screen-curso .p-curso-pn {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
#screen-curso .p-curso-parte.is-curso .p-curso-pn { color: var(--accent); }
/* Andrés (05-ago): «me gustaría que quedaran más claros los títulos». El número
   de la parte deja de ser un rótulo suelto arriba y entra al título como una
   etiqueta dorada: se lee «Parte 3 · El cuerpo como puerta de entrada» de un
   golpe. Y el título sube a 20 para separarse del de un capítulo (14.5) y del
   de un módulo (15.5), que es lo que hacía confusa la jerarquía de tres niveles. */
#screen-curso .p-curso-pt {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink);
}
#screen-curso .p-curso-pnum {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  vertical-align: 3px;
  margin-right: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  white-space: nowrap;
}
#screen-curso .p-curso-pm {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
}
#screen-curso .p-curso-pwhy {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--accent);
  margin-top: 3px;
}
#screen-curso .p-curso-pbar {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--faint);
  overflow: hidden;
  margin-top: 6px;
  max-width: 180px;
}
#screen-curso .p-curso-pbar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* Los bloqueados no se apagan del todo: el camino se tiene que poder leer. */
#screen-curso .p-curso-parte.is-bloq .p-curso-pt { color: var(--muted); }

#screen-curso .p-curso-caret {
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 8px;
  transition: transform .2s ease;
}
#screen-curso details[open] > .p-curso-parte-head > .p-curso-caret,
#screen-curso details[open] > .p-curso-tramo > .p-curso-caret { transform: rotate(180deg); }

#screen-curso .p-curso-parte-body {
  display: flex;
  flex-direction: column;
  padding: 0 0 12px 39px;
}

/* ── capítulos ───────────────────────────────────────────────────────────── */
#screen-curso .p-curso-tramo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-card-sm);
  text-align: left;
  font-family: var(--font-sans);
  cursor: pointer;
  list-style: none;
  margin-bottom: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s ease, transform .12s ease;
}
#screen-curso .p-curso-tramo::-webkit-details-marker { display: none; }
#screen-curso .p-curso-tramo:active { transform: scale(.99); }
@media (hover: hover) {
  #screen-curso .p-curso-tramo.is-leido:hover { border-color: var(--accent); }
}
#screen-curso .p-curso-tramo.is-curso {
  background: var(--accent-soft);
  margin-bottom: 4px;
}
#screen-curso .p-curso-tramo.is-bloq {
  background: transparent;
  border: 1px dashed var(--faint);
  cursor: default;
}
#screen-curso .p-curso-ttxt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
#screen-curso .p-curso-tt {
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.24;
  letter-spacing: -0.012em;
  color: var(--ink);
}
#screen-curso .p-curso-tramo.is-bloq .p-curso-tt { color: var(--muted); }
#screen-curso .p-curso-tm {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
#screen-curso .p-curso-tramo.is-curso .p-curso-tm { color: var(--accent); }
#screen-curso .p-curso-tlock { color: var(--muted); flex-shrink: 0; opacity: .7; }
#screen-curso .p-curso-twhy {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--accent);
  margin-top: 3px;
}

/* La marca de que un capítulo o un módulo LEÍDO se vuelve a abrir. Andrés no
   pudo reabrir uno en el prototipo anterior, así que acá se dice con texto, no
   solo con un chevrón que se puede pasar por alto. */
#screen-curso .p-curso-reabrir {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
}
#screen-curso .p-curso-reabrir::after {
  content: '›';
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1;
}
#screen-curso .p-curso-reabrir.is-seguir { font-weight: 600; }

/* El título se queda con la fila entera y la marca de reabrir viaja abajo,
   junto a la fecha. Al costado del título le comía la mitad del ancho. */
#screen-curso .p-curso-tfoot,
#screen-curso .p-curso-mfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
  margin-top: 3px;
}
#screen-curso .p-curso-tfoot .p-curso-reabrir,
#screen-curso .p-curso-mfoot .p-curso-reabrir { margin-left: auto; }

#screen-curso .p-curso-tramo-d { margin-bottom: 8px; }

/* ── módulos ─────────────────────────────────────────────────────────────── */
#screen-curso .p-curso-mods {
  display: flex;
  flex-direction: column;
  padding: 12px 0 4px 6px;
}
#screen-curso .p-curso-mod {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s ease;
}
#screen-curso .p-curso-mod:active { opacity: .6; }
#screen-curso .p-curso-mod.is-bloq { cursor: default; }
#screen-curso .p-curso-mod.is-bloq:active { opacity: 1; }

#screen-curso .p-curso-mmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22px;
  flex-shrink: 0;
}
#screen-curso .p-curso-mdot {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  border: 1.5px solid var(--faint);
  background: var(--canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--canvas);
}
#screen-curso .p-curso-mline {
  flex: 1;
  width: 1.5px;
  background: var(--faint);
  margin-top: 4px;
  min-height: 14px;
}
#screen-curso .p-curso-mod.is-leido .p-curso-mdot {
  background: var(--accent);
  border-color: var(--accent);
}
#screen-curso .p-curso-mod.is-curso .p-curso-mdot { border: 2px solid var(--accent); }
#screen-curso .p-curso-mcore {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--accent);
}
#screen-curso .p-curso-mod.is-bloq .p-curso-mdot {
  color: var(--muted);
  border-style: dashed;
}

#screen-curso .p-curso-mtxt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  padding-bottom: 18px;
}
#screen-curso .p-curso-mt {
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.25;
  letter-spacing: -0.014em;
  color: var(--ink);
}
#screen-curso .p-curso-mod.is-bloq .p-curso-mt { color: var(--muted); }
#screen-curso .p-curso-mod.is-curso .p-curso-mt { font-weight: 600; }
#screen-curso .p-curso-mm {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
#screen-curso .p-curso-mod.is-curso .p-curso-mm { color: var(--accent); }
#screen-curso .p-curso-mwhy {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--accent);
  margin-top: 4px;
}

/* ── al día: terminó todo lo publicado ───────────────────────────────────── */
/* Estado que el prototipo no dibuja porque está escrito como si los 750
   módulos existieran a la vez. En la realidad el curso se publica por partes,
   así que hay un momento —el de quien lee más rápido de lo que se escribe— en
   que no hay siguiente. Decirlo es más honesto que dejar la pantalla sin
   ningún botón, y no promete ninguna fecha. */
#screen-curso .p-curso-aldia {
  background: var(--accent-soft);
  border-radius: var(--r-card);
  padding: 16px 18px;
  margin-bottom: 26px;
}
#screen-curso .p-curso-aldia p {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* ── cierre ──────────────────────────────────────────────────────────────── */
#screen-curso .p-curso-end {
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  line-height: 1.55;
  color: var(--muted);
  margin: 24px 0 0;
}
#screen-curso .p-curso-disclaimer {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  opacity: .85;
  margin: 18px 0 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   3 · UN MÓDULO POR DENTRO
   Es una lectura, no una sesión: serif para el cuerpo, medida corta,
   interlineado alto. Cero controles de audio en toda la pantalla.
   ══════════════════════════════════════════════════════════════════════════ */

#screen-curso-modulo .p-mod-wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 52px) 24px calc(env(safe-area-inset-bottom, 0px) + 96px);
  width: 100%;
  min-width: 0;
  /* ⚠️ Sin `min-height: 100dvh`, misma razón que arriba (fila 88). */
}

/* ── dónde estás: en un curso de 750 módulos, esto no es un adorno ───────── */
#screen-curso-modulo .p-mod-donde {
  background: var(--surface);
  border-radius: var(--r-card-sm);
  padding: 11px 14px 12px;
  margin-bottom: 18px;
}
#screen-curso-modulo .p-mod-donde-txt {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 9px;
}
#screen-curso-modulo .p-mod-donde-txt b {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}
#screen-curso-modulo .p-mod-ticks { display: flex; gap: 3px; }
#screen-curso-modulo .p-mod-ticks span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--faint);
}
#screen-curso-modulo .p-mod-ticks .is-hecho { background: var(--accent); opacity: .45; }
#screen-curso-modulo .p-mod-ticks .is-aqui { background: var(--accent); height: 6px; margin-top: -1px; }

#screen-curso-modulo .p-mod-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
#screen-curso-modulo .p-mod-badge {
  display: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 9px;
  letter-spacing: .1em;
}
#screen-curso-modulo.is-leido .p-mod-badge { display: inline-block; }
#screen-curso-modulo .p-mod-title {
  font-size: 28px;
  line-height: 1.16;
  margin: 0 0 18px;
}
#screen-curso-modulo .p-mod-rule {
  width: 46px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 22px;
}

/* ── el texto ────────────────────────────────────────────────────────────── */
/* Solo los párrafos sueltos del artículo. Con el selector suelto ganaba también
   al eyebrow de la caja práctica y lo servía en serif de 16px. */
#screen-curso-modulo .p-mod-article > p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.78;
  letter-spacing: -0.006em;
  color: var(--ink);
  margin: 0 0 18px;
}
#screen-curso-modulo .p-mod-lead {
  font-size: 18.5px !important;
  line-height: 1.62 !important;
  color: var(--ink);
  margin-bottom: 22px !important;
}
#screen-curso-modulo .p-mod-h {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 30px 0 12px;
}

#screen-curso-modulo .p-mod-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  border-left: 2px solid var(--gold);
  padding: 2px 0 2px 18px;
  margin: 26px 0 28px;
}

/* ── la figura ───────────────────────────────────────────────────────────── */
#screen-curso-modulo .p-mod-fig {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 18px 16px 16px;
  margin: 26px 0 28px;
}
#screen-curso-modulo .p-mod-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
#screen-curso-modulo .p-mod-figcap {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  margin: 6px auto 0;
  max-width: 30em;
}

/* ── la caja práctica ────────────────────────────────────────────────────── */
#screen-curso-modulo .p-mod-box {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 18px 18px 16px;
  margin: 28px 0 0;
}
#screen-curso-modulo .p-mod-box-label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  margin-bottom: 10px;
}
#screen-curso-modulo .p-mod-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
#screen-curso-modulo .p-mod-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
}
#screen-curso-modulo .p-mod-list li:last-child { margin-bottom: 0; }
#screen-curso-modulo .p-mod-list li::before {
  content: '·';
  position: absolute;
  left: 3px;
  color: var(--accent);
  font-weight: 700;
}
#screen-curso-modulo .p-mod-list strong { color: var(--ink); font-weight: 600; }

/* ── el cierre: completar abre el siguiente ──────────────────────────────── */
#screen-curso-modulo .p-mod-foot {
  position: relative;
  border-top: 1px solid var(--faint);
  margin-top: 32px;
  padding-top: 24px;
}

#screen-curso-modulo .p-mod-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--canvas);
  border: none;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .22s ease, color .22s ease, transform .12s ease;
}
#screen-curso-modulo .p-mod-mark:active { transform: scale(.985); }
#screen-curso-modulo .p-mod-mark[disabled] { cursor: default; opacity: .7; }
#screen-curso-modulo .p-mod-mark-off,
#screen-curso-modulo .p-mod-mark-on {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
#screen-curso-modulo .p-mod-mark-on { display: none; }
#screen-curso-modulo .p-mod-mark:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

#screen-curso-modulo .p-mod-guardado {
  display: none;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  margin: 10px 0 0;
}

/* El siguiente, todavía cerrado */
#screen-curso-modulo .p-mod-nextlock {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px dashed var(--faint);
  border-radius: 18px;
}
#screen-curso-modulo .p-mod-nextlock-ico {
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 3px;
  opacity: .8;
}
#screen-curso-modulo .p-mod-next-why {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
#screen-curso-modulo .p-mod-nextlock .p-mod-next-title { color: var(--muted); }

/* El siguiente, ya abierto */
#screen-curso-modulo .p-mod-next {
  display: none;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 18px;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease;
}
#screen-curso-modulo .p-mod-next:active { transform: scale(.985); }
#screen-curso-modulo .p-mod-next-texts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#screen-curso-modulo .p-mod-next-eyebrow { color: var(--accent); }
#screen-curso-modulo .p-mod-next-title {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
#screen-curso-modulo .p-mod-next-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
#screen-curso-modulo .p-mod-next-chev {
  margin-left: auto;
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
}

#screen-curso-modulo .p-mod-indice {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 12px;
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
}

/* ── EL CAMBIO DE ESTADO ─────────────────────────────────────────────────── */
/* En el prototipo esto era una casilla escondida más `:has()`, sin JavaScript,
   para que el cambio se viera al tocar dentro de un documento estático. Acá el
   estado lo manda el SERVIDOR —marcar terminado es lo que abre el siguiente, y
   esa regla no puede vivir en una casilla del navegador— así que la clase la
   pone `js/course.js` sobre la pantalla. Las reglas visuales son las mismas. */
#screen-curso-modulo.is-leido .p-mod-mark {
  background: var(--accent-soft);
  color: var(--accent);
}
#screen-curso-modulo.is-leido .p-mod-mark-off { display: none; }
#screen-curso-modulo.is-leido .p-mod-mark-on { display: inline-flex; }
#screen-curso-modulo.is-leido .p-mod-guardado { display: block; }
#screen-curso-modulo.is-leido .p-mod-nextlock { display: none; }
#screen-curso-modulo.is-leido .p-mod-next { display: flex; }

#screen-curso-modulo .p-mod-disclaimer {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  opacity: .85;
  margin: 18px 0 0;
}