/* ═══════════════════════════════════════════════════════════════════════════
   Potenciadores de Skills · estilos del piloto (ADR 0020)
   Capa AISLADA: no duplica lesson.css ni el motor. Reutiliza los tokens de
   lesson.css (--bg, --bg2, --bg3, --line, --muted, --ok, --err, --accent, --fr,
   --radius, --shadow) con fallbacks, para mantener la estética CHARLO.

   Presentación: la práctica REEMPLAZA en su lugar el contenido de la lección
   dentro de <main> (no superpone una ventana). Es un PIZARRÓN FIJO: mientras el
   potenciador está abierto, la página no hace scroll y el panel se ajusta a la
   pantalla; el ejercicio y sus controles caben sin desplazarse. El área baja del
   sidebar es la LISTA de potenciadores (estilo de las filas de lección).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Selector al final de la lección: elegir potenciador (CHARLO PLUS) ───────── */
/* Sin contenedor grande (.card): es un bloque transparente; las tres tarjetas
   quedan independientes con espacio entre ellas (.pot-chooser gap). */
.pot-launcher { text-align: center; margin: 26px auto 0; }
.pot-launcher .pot-eyebrow {
  display: inline-block;
  font-family: "Outfit", sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted, #6A7080);
  margin-bottom: 6px;
}
.pot-launcher h2 {
  font-family: var(--fr, "Noto Sans", sans-serif);
  font-style: italic;
  font-size: 1.5rem;
  margin: 0 0 6px;
  color: var(--text, #333);
}
.pot-launcher p {
  color: var(--muted, #6A7080);
  max-width: 46ch;
  margin: 0 auto 16px;
  font-size: .98rem;
}
.pot-chooser {
  display: grid;
  gap: 12px;
  max-width: 540px;
  margin: 0 auto;
  text-align: left;
}
.pot-choose-btn {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 78px;
  padding: 16px 20px;
  cursor: pointer;
  font: inherit;
  color: var(--text, #333);
  background: var(--bg, #fff);
  border: 2px solid var(--line, #E2E6EC);
  border-radius: 16px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, transform .1s;
}
.pot-choose-btn:not(:disabled):hover { border-color: var(--ac, var(--accent, #1C1C1C)); }
.pot-choose-btn:disabled { cursor: not-allowed; opacity: .62; }
.pot-choose-btn:focus-visible { outline: 3px solid var(--ac, var(--accent, #1C1C1C)); outline-offset: 2px; }
/* Columna de iconos de ANCHO FIJO → los textos de las tres tarjetas arrancan en
   el mismo borde izquierdo. Chip uniforme (1 o 2 iconos) y algo más grande. */
.pot-choose-btn .pot-badge {
  width: 52px;
  min-width: 52px;
  height: 52px;
  border-radius: 12px;
  justify-self: center;
}
.pot-choose-btn .pot-ico { width: 20px; height: 20px; }
.pot-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 40px;
  height: 40px;
  padding: 0 9px;
  box-sizing: border-box;
  color: #fff;
  background: var(--ac, #1C1C1C);
  border-radius: 10px;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .02em;
}
/* Iconos inline dentro del chip (heredan el color blanco del badge vía
   currentColor, contrastando con el color de acento del potenciador). */
.pot-badge-icons { padding: 0 8px; }
.pot-ico { width: 18px; height: 18px; display: block; flex: none; }
/* Columna de texto: título y descripción alineados al MISMO borde izquierdo y
   verticalmente centrados igual en las tres tarjetas. */
.pot-choose-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
.pot-choose-name { display: block; font-family: "Outfit", sans-serif; font-weight: 800; font-size: 1.1rem; line-height: 1.2; }
.pot-choose-desc { display: block; font-size: .88rem; line-height: 1.3; color: var(--muted, #6A7080); }
.pot-choose-go { color: var(--muted, #6A7080); font-size: 1.35rem; line-height: 1; }

/* ── Pizarrón fijo: bloqueo de scroll SOLO mientras el potenciador está abierto ─ */
body.pot-open { overflow: hidden; padding-bottom: 0; }
body.pot-open .pot-practice-wrap { padding-top: 0; padding-bottom: 0; }
/* Mientras el pizarrón está abierto, el pie y la celebración de la lección no
   ocupan alto (evita área muerta bajo el pizarrón). Se restauran al cerrar. */
body.pot-open footer,
body.pot-open .cele-overlay { display: none; }

/* ── Panel de práctica (pizarrón) EN SU LUGAR dentro de <main> ──────────────── */
.pot-practice-wrap { padding-top: 22px; padding-bottom: 44px; }
.pot-practice {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 0;
  padding: 16px 22px 18px;
  overflow: hidden;             /* pizarrón: nunca hace scroll */
  background: var(--bg2, #F7F8FA);
  border: 1px solid var(--line, #E2E6EC);
  border-radius: var(--radius, 18px);
  box-shadow: var(--shadow, 0 12px 30px -18px rgba(20, 20, 40, .16));
}
@media (prefers-reduced-motion: no-preference) {
  .pot-practice { animation: potRise .3s cubic-bezier(.2, .7, .3, 1) both; }
}
@keyframes potRise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.pot-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line, #E2E6EC);
}
.pot-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--text, #333);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pot-head-tools { flex: none; display: flex; align-items: center; gap: 8px; }
.pot-audio { display: flex; align-items: center; gap: 6px; }
/* Botones de la barra superior (reiniciar · audio · X): SIN cuadro — sin fondo ni
   borde. Conservan área táctil de 44px, icono nítido (currentColor heredado),
   hover sutil (feedback transitorio, no una caja permanente) y foco de teclado. */
.pot-restart,
.pot-audio-btn,
.pot-close {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  color: var(--text, #333);
  background: transparent;
  border: 0;
  border-radius: 10px;
  -webkit-appearance: none;
  appearance: none;
}
.pot-restart:hover,
.pot-audio-btn:hover,
.pot-close:hover { background: rgba(var(--pot-ac-rgb, 28, 28, 28), .10); }
.pot-restart:focus-visible,
.pot-audio-btn:focus-visible,
.pot-close:focus-visible {
  outline: 3px solid var(--pot-ac, var(--accent, #1C1C1C));
  outline-offset: 2px;
}
.pot-head-tools .pot-ico { width: 22px; height: 22px; display: block; }

/* ── Cuerpo del pizarrón: contenido centrado, sin scroll ───────────────────── */
.pot-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
}
/* Reading can combine a conversation, question and answers in a short viewport.
   Start at the top with a safe inset so hair and heads are never clipped. */
.pot-practice[data-mode="reading-quiz"] .pot-body {
  box-sizing: border-box;
  justify-content: flex-start;
  padding-top: clamp(8px, 1.5vh, 14px);
  padding-bottom: 52px;
}
/* Instrucción breve (Escritura y Conjugación): arriba a la izquierda del área de
   práctica, fuera del flujo centrado para preservar el espacio de respuesta. */
.pot-instruction {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 70%;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: .98rem;
  color: var(--muted, #6A7080);
  text-align: left;
}
.pot-conj-instruction { max-width: min(78%, 680px); }
/* ── Estímulo en español: CENTRADO en el pizarrón ──────────────────────────── */
.pot-stimulus { text-align: center; }
.pot-prompt {
  font-family: var(--fr, "Noto Sans", sans-serif);
  font-size: clamp(1.3rem, 3.4vw, 1.6rem);
  line-height: 1.3;
  color: var(--text, #333);
  text-align: center;
}
/* Los controles de audio comparten el estilo SIN cuadro de la barra superior
   (definido junto a .pot-restart/.pot-close). Aquí solo el contenedor. */

@media (max-width: 480px) {
  .pot-practice { padding-left: 14px; padding-right: 14px; }
  .pot-title { font-size: 1rem; }
  .pot-restart, .pot-audio-btn, .pot-close { width: 42px; height: 42px; }
}

/* ── Campo de respuesta: una sola LÍNEA (sin caja) ─────────────────────────── */
.pot-input {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 2px solid var(--line, #E2E6EC);
  border-radius: 0;
  background: transparent;
  padding: 10px 4px 8px;
  font-family: var(--fr, "Noto Sans", sans-serif);
  font-size: 1.1rem;
  color: var(--text, #333);
  transition: border-color .15s;
}
.pot-input::placeholder { color: var(--muted, #6A7080); opacity: .7; }
/* Foco INTEGRADO en la línea (no una caja). Alta especificidad + !important para
   anular el contorno de foco global del sitio, que dibujaba un recuadro. */
.pot-practice .pot-input:focus,
.pot-practice .pot-input:focus-visible { outline: none !important; box-shadow: none !important; }
.pot-practice .pot-input:focus { border-bottom-color: var(--accent, #1C1C1C); border-bottom-width: 2px; }
.pot-practice .pot-input.is-ok { border-bottom-color: var(--ok, #1A7F4B); }
.pot-practice .pot-input.is-no { border-bottom-color: var(--err, #B3261E); }
/* Escritura activa: cada palabra ocupa una línea. Solo se muestran las palabras
   que el estudiante ya produjo; las siguientes permanecen vacías. */
.pot-word-stage {
  width: min(100%, 680px);
  min-height: 58px;
  margin: 4px auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 12px 10px;
}
.pot-word-slot {
  min-width: clamp(54px, 9vw, 84px);
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  padding: 4px 6px 7px;
  border-bottom: 3px solid var(--line, #E2E6EC);
  font-family: var(--fr, "Noto Sans", sans-serif);
  font-size: clamp(1.12rem, 3vw, 1.34rem);
  line-height: 1.15;
}
.pot-word-slot.is-done {
  color: var(--ok, #1A7F4B);
  border-bottom-color: var(--ok, #1A7F4B);
  font-weight: 700;
}
.pot-word-slot.is-active {
  min-width: clamp(78px, 13vw, 112px);
  border-bottom-color: var(--pot-ac, var(--accent, #1C1C1C));
  background: rgba(var(--pot-ac-rgb, 28,28,28), .045);
}
.pot-word-slot.is-active.is-no { border-bottom-color: var(--err, #B3261E); }
/* Palabra correcta que ESPERA Espacio: color de acierto de CHARLO. */
.pot-word-slot.is-active.is-ok {
  border-bottom-color: var(--ok, #1A7F4B);
  background: rgba(26, 127, 75, .08);
}
.pot-word-slot.is-future { opacity: .72; }
.pot-word-input {
  width: 8ch;
  max-width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: var(--text, #333);
  font: inherit;
  line-height: 1.15;
  text-align: center;
}
.pot-word-input:focus,
.pot-word-input:focus-visible { outline: none !important; box-shadow: none !important; }
.pot-word-input.is-no { color: var(--err, #B3261E); }
.pot-word-input.is-ok { color: var(--ok, #1A7F4B); font-weight: 700; }
/* Estado «frase completa»: refuerza el color de acierto semántico de CHARLO
   (--ok) en todo el pizarrón de palabras. Sin celebración visual. */
.pot-word-stage.is-complete .pot-word-slot.is-done {
  color: var(--ok, #1A7F4B);
  border-bottom-color: var(--ok, #1A7F4B);
}

.pot-actions { flex: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pot-actions .btn { min-height: 44px; }
.pot-actions .btn:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.pot-feedback { flex: none; text-align: center; font-size: .96rem; line-height: 1.45; min-height: 1.2em; }
/* Ítem resuelto cuyo repaso no cabe (el runner añade .is-scroll solo si
   desborda): desplazamiento interno desde arriba e instrucción en el flujo. */
.pot-practice .pot-body.is-scroll {
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pot-practice .pot-body.is-scroll .pot-instruction { position: static; max-width: none; }
/* Mensaje + flecha de continuar (Escritura y Conjugación ya resueltas). */
.pot-done-row { flex: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; }
.pot-done-row .pot-feedback { flex: 0 1 auto; min-width: 0; }
.pot-done-row .pot-continue { flex: none; width: 40px; height: 40px; }
.pot-done-row .pot-continue .pot-ico { width: 21px; height: 21px; }
.pot-feedback.is-ok { color: var(--ok, #1A7F4B); font-weight: 600; }
.pot-feedback.is-no { color: var(--err, #B3261E); }

/* ── Repaso posterior (tarjetas por palabra: inglés + significado + audio) ────── */
/* Se muestra SOLO tras completar el ítem. La «pronunciación» es el TTS real (botón
   🔊 por tarjeta); no hay transcripción fonética inventada. */
.pot-review { flex: none; width: min(100%, 620px); margin: 2px auto 0; text-align: center; }
.pot-review-title {
  font-family: "Outfit", sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted, #6A7080);
  margin-bottom: 8px;
}
.pot-review-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pot-review-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 92px;
  padding: 8px 12px 8px;
  background: var(--bg, #fff);
  border: 1px solid var(--line, #E2E6EC);
  border-top: 3px solid var(--pot-ac, var(--accent, #1C1C1C));
  border-radius: 12px;
}
.pot-review-en { font-family: "Outfit", sans-serif; font-weight: 800; font-size: 1.02rem; color: var(--text, #333); }
.pot-review-es { font-size: .82rem; line-height: 1.25; color: var(--muted, #6A7080); }
.pot-review-audio {
  width: 30px;
  height: 30px;
  margin-top: 1px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text, #333);
  background: transparent;
  border: 1px solid var(--line, #E2E6EC);
  border-radius: 8px;
}
.pot-review-audio:hover { border-color: var(--pot-ac, var(--accent, #1C1C1C)); background: rgba(var(--pot-ac-rgb, 28,28,28), .06); }
.pot-review-audio:focus-visible { outline: 2px solid var(--pot-ac, var(--accent, #1C1C1C)); outline-offset: 1px; }
.pot-review-audio .pot-ico { width: 16px; height: 16px; }

/* Texto solo para lectores de pantalla (contador y pista de iniciales). */
.pot-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Progreso del potenciador («3/21») junto al nombre, sin competir con él. */
.pot-progress {
  flex: none;
  font-family: "Outfit", sans-serif;
  font-size: .86rem;
  font-weight: 700;
  color: var(--muted, #6A7080);
  font-variant-numeric: tabular-nums;
}

/* ── Reconstrucción con iniciales (Typing & Listening · initial-cue) ───────── */
/* Pista sobre el campo: centrada, sin borde ni fondo (no parece editable). La
   fuente monoespaciada y el espaciado entre letras hacen contables los guiones;
   las palabras nunca se parten y la línea salta solo entre palabras. */
.pot-initial-cue { width: min(100%, 680px); margin: 0 auto; }
.pot-cue-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 1em;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(1.05rem, 2.6vw, 1.22rem);
  line-height: 1.5;
  letter-spacing: .12em;
  color: var(--muted, #6A7080);
}
.pot-cue-word { white-space: nowrap; }
.pot-cue-initial { color: var(--text, #333); font-weight: 700; }
.pot-practice.is-compact .pot-cue-words { gap: 2px .85em; font-size: 1.02rem; line-height: 1.35; }
@media (max-width: 480px) {
  .pot-cue-words { gap: 2px .8em; letter-spacing: .08em; font-size: 1rem; }
  .pot-progress { font-size: .8rem; }
}

/* ── Conjugación ───────────────────────────────────────────────────────────── */
/* --pot-conj-min la calcula el runner: la fila más larga sin recortes (sujeto +
   campo + palabra más larga). Con filas largas usa menos columnas, nunca desborda. */
.pot-conj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pot-conj-min, 180px)), 1fr));
  gap: 12px;
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
}
.pot-conj-row { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 42px; }
.pot-conj-sentence {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 7px;
  width: 100%;
  min-width: 0;
  font-family: var(--fr, "Noto Sans", sans-serif);
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--text, #333);
}
/* El sujeto no se parte; el resto de la frase sí puede partirse dentro de su
   celda, para que un context largo nunca se recorte ni desborde la cuadrícula. */
.pot-conj-lead { white-space: nowrap; }
.pot-conj-tail { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
/* El ancho (en ch) lo fija el runner: igual en todo el bloque y suficiente para
   la respuesta más larga (doesn't, does not); no se encoge para no recortarla. */
.pot-conj-row .pot-conj-input {
  flex: 0 0 auto;
  width: 7ch;
  min-width: 4.5ch;
  max-width: 100%;
  min-height: 36px;
  padding: 4px 3px 5px;
  text-align: center;
}
.pot-conj-row.is-ok .pot-input { border-bottom-color: var(--ok, #1A7F4B); }
.pot-conj-row.is-no .pot-input { border-bottom-color: var(--err, #B3261E); }

/* ── Lectura y conversación (una pregunta por paso) ────────────────────────── */
/* Escena: ilustraciones raster CHARLO a los extremos y diálogo al centro.
   Fondo transparente, sin panel; responsive (se reducen en móvil). */
.pot-scene {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 3vw, 22px);
  width: 100%;
}
.pot-scene-side { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; }
.pot-figure { line-height: 0; overflow: visible; }
.pot-figure picture { display: block; line-height: 0; }
/* Personaje raster (WebP/PNG) o SVG de compat: proporción original (object-fit),
   fondo transparente, sin tarjeta detrás. */
.pot-figure img, .pot-figure svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(72px, min(13vw, 18vh), 128px);
  object-fit: contain;
  object-position: center;
}
.pot-scene .pot-passage { margin: 0; width: auto; min-width: 0; flex: 0 1 auto; }

/* Conversación por turnos: cada turno tiene NOMBRE y GLOBO propios; la figura del
   hablante va en su lado (Ana izq., Omar der.), a extremos opuestos del área. Figuras
   grandes, fondo transparente, sin tarjeta detrás; no tapan el contenido. */
.pot-convo {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.6vh, 12px);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.pot-turn { display: flex; align-items: flex-end; gap: clamp(4px, 1.6vw, 12px); }
.pot-turn-left { justify-content: flex-start; }
.pot-turn-right { justify-content: flex-end; }
.pot-convo .pot-figure { flex: 0 0 auto; }
.pot-convo .pot-figure img, .pot-convo .pot-figure svg {
  height: clamp(88px, min(15vw, 19vh), 132px);
}
.pot-bubble-wrap { display: flex; flex-direction: column; gap: 3px; max-width: 74%; min-width: 0; }
.pot-turn-right .pot-bubble-wrap { align-items: flex-end; }
.pot-turn-name {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #6A7080);
  padding: 0 6px;
}
.pot-bubble {
  background: var(--bg3, #F1F4F7);
  border: 1px solid var(--line, #E2E6EC);
  border-radius: 14px;
  padding: 10px 14px;
  font-family: var(--fr, "Noto Sans", sans-serif);
  font-size: clamp(1rem, 2.6vw, 1.12rem);
  line-height: 1.4;
  color: var(--text, #333);
}
.pot-turn-left .pot-bubble { border-bottom-left-radius: 4px; }
.pot-turn-right .pot-bubble { border-bottom-right-radius: 4px; text-align: right; }
.pot-passage {
  max-width: 40ch;
  width: 100%;
  margin: 0 auto;
  background: var(--bg3, #F1F4F7);
  border: 1px solid var(--line, #E2E6EC);
  border-radius: 14px;
  padding: 12px 16px;
  text-align: center;
}
.pot-passage p {
  margin: 0 0 2px;
  font-family: var(--fr, "Noto Sans", sans-serif);
  font-size: 1.12rem;
  line-height: 1.45;
  color: var(--text, #333);
}
.pot-quiz { display: flex; flex-direction: column; gap: 10px; max-width: 760px; width: 100%; margin: 0 auto; }
.pot-q-prompt { font-weight: 600; margin-bottom: 6px; color: var(--text, #333); text-align: center; }
.pot-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
}
.pot-option {
  text-align: left;
  min-height: 44px;
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
  color: var(--text, #333);
  background: var(--bg, #fff);
  border: 1px solid var(--line, #E2E6EC);
  border-radius: 10px;
  -webkit-appearance: none;
  appearance: none;
}
.pot-option:hover { border-color: var(--accent, #1C1C1C); }
.pot-option:focus-visible { outline: 3px solid var(--accent, #1C1C1C); outline-offset: 2px; }
.pot-option.correct { border-color: var(--ok, #1A7F4B); background: rgba(26, 127, 75, .08); }
.pot-option.wrong { border-color: var(--err, #B3261E); }
/* Estado también en texto (no solo color). */
.pot-option-mark { margin-left: .45em; font-weight: 800; }
.pot-option.correct .pot-option-mark { color: var(--ok, #1A7F4B); }
.pot-option.wrong .pot-option-mark { color: var(--err, #B3261E); }
.pot-option:disabled { cursor: default; }
.pot-q-feedback { font-size: .9rem; margin-top: 4px; min-height: 1em; text-align: center; }
.pot-q-feedback.is-ok { color: var(--ok, #1A7F4B); }
.pot-q-feedback.is-no { color: var(--err, #B3261E); }

/* Continuación de Lectura: una flecha estable en la esquina inferior izquierda.
   Sale del flujo y tiene espacio reservado para no tapar ni ser recortada. */
.pot-reading-actions {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  justify-content: flex-start;
}
.pot-reading-next {
  width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  background: var(--pot-ac, var(--accent, #1C1C1C));
  border: 1px solid var(--pot-ac, var(--accent, #1C1C1C));
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(20, 20, 40, .14);
  -webkit-appearance: none;
  appearance: none;
}
.pot-reading-next .pot-ico { width: 24px; height: 24px; }
.pot-reading-next:hover:not(:disabled) { filter: brightness(.94); }
.pot-reading-next:focus-visible { outline: 3px solid var(--pot-ac, var(--accent, #1C1C1C)); outline-offset: 2px; }
.pot-reading-next:disabled {
  cursor: not-allowed;
  color: var(--muted, #6A7080);
  background: var(--bg, #fff);
  border-color: var(--line, #E2E6EC);
  opacity: .65;
  box-shadow: none;
}

/* ── Lista de potenciadores en el sidebar (estilo filas de lección) ─────────── */
.cn-scroll.pot-nav-active > :not(.pot-nav) { display: none; }
.pot-nav { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.pot-nav-title {
  font-family: "Outfit", sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted, #6A7080);
  margin: 2px 2px 6px;
}
.pot-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 11px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text, #333);
  background: var(--bg, #fff);
  border: 1px solid var(--line, #E2E6EC);
  border-radius: 12px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, background .15s;
}
.pot-nav-item:hover { border-color: rgba(var(--ac-rgb, 28, 28, 28), .55); }
.pot-nav-item:focus-visible { outline: 3px solid var(--ac, #1C1C1C); outline-offset: 2px; }
.pot-nav-item.is-active {
  border-color: var(--ac, #1C1C1C);
  background: rgba(var(--ac-rgb, 28, 28, 28), .07);
  box-shadow: inset 3px 0 0 var(--ac, #1C1C1C);
}
.pot-nav-item .pot-badge { min-width: 32px; height: 32px; border-radius: 8px; font-size: .72rem; padding: 0 6px; gap: 3px; }
.pot-nav-item .pot-ico { width: 15px; height: 15px; }
.pot-nav-meta { display: flex; flex-direction: column; min-width: 0; }
.pot-nav-name {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: .9rem;
  color: var(--text, #333);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Resumen final ─────────────────────────────────────────────────────────── */
.pot-summary { text-align: center; margin: auto 0; }
.pot-summary h3 { font-family: "Outfit", sans-serif; font-size: 1.15rem; margin: 0 0 6px; }
.pot-summary p { color: var(--muted, #6A7080); margin: 0 0 14px; max-width: 40ch; margin-left: auto; margin-right: auto; }

/* ── Alturas compactas y teclado móvil ────────────────────────────────────── */
.pot-practice.is-compact {
  padding-top: 10px;
  padding-bottom: 10px;
}
.pot-practice.is-compact .pot-head {
  padding-bottom: 7px;
  margin-bottom: 7px;
}
.pot-practice.is-compact .pot-body { gap: 7px; }
.pot-practice.is-compact .pot-prompt {
  font-size: clamp(1.05rem, 3vw, 1.28rem);
  line-height: 1.2;
}
.pot-practice.is-compact .pot-word-stage {
  min-height: 46px;
  gap: 8px;
}
.pot-practice.is-compact .pot-conj-grid { gap: 4px; }
.pot-practice.is-compact .pot-done-row .pot-continue { width: 36px; height: 36px; }
.pot-practice.is-compact .pot-conj-row .pot-input {
  min-height: 34px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.pot-practice.is-compact .pot-passage { padding: 8px 12px; }
.pot-practice.is-compact .pot-passage p {
  font-size: 1rem;
  line-height: 1.3;
}
.pot-practice.is-compact .pot-figure img, .pot-practice.is-compact .pot-figure svg { height: clamp(58px, 11vw, 96px); }
.pot-practice.is-compact .pot-convo { gap: 5px; }
.pot-practice.is-compact .pot-convo .pot-figure img, .pot-practice.is-compact .pot-convo .pot-figure svg {
  height: clamp(72px, min(11vw, 17vh), 108px);
}
.pot-practice.is-compact .pot-bubble { padding: 7px 11px; font-size: 1rem; }
.pot-practice.is-compact .pot-quiz,
.pot-practice.is-compact .pot-options { gap: 6px; }
.pot-practice.is-compact .pot-option { padding-top: 7px; padding-bottom: 7px; }
.pot-practice.is-compact .pot-feedback,
.pot-practice.is-compact .pot-q-feedback { font-size: .86rem; line-height: 1.25; }
.pot-practice.is-compact .pot-review { margin-top: 0; }
.pot-practice.is-compact .pot-review-title { margin-bottom: 5px; }
.pot-practice.is-compact .pot-review-grid { gap: 6px; }
.pot-practice.is-compact .pot-review-card { min-width: 84px; padding: 6px 10px; gap: 2px; }
.pot-practice.is-compact .pot-review-en { font-size: .96rem; }
.pot-practice.is-compact .pot-review-audio { width: 26px; height: 26px; font-size: .82rem; }

/* Con el teclado virtual abierto el alto visible puede ser menor que cualquier
   composición sin scroll. En ese único estado el cuerpo obtiene desplazamiento
   interno como salvaguarda; la página sigue bloqueada y el encabezado queda fijo. */
.pot-practice.is-keyboard-tight .pot-body {
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.pot-practice.is-keyboard-tight .pot-body::-webkit-scrollbar { display: none; }
.pot-practice.is-keyboard-tight[data-mode="reading-quiz"] .pot-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
  overflow: hidden;
}
.pot-practice.is-keyboard-tight[data-mode="reading-quiz"] .pot-quiz {
  align-self: stretch;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.pot-practice.is-keyboard-tight[data-mode="reading-quiz"] .pot-quiz::-webkit-scrollbar { display: none; }
.pot-practice.is-keyboard-tight[data-mode="reading-quiz"] .pot-actions {
  align-self: end;
}

@media (max-width: 480px) {
  .pot-word-stage { gap: 9px 7px; }
  .pot-word-slot {
    min-width: 46px;
    min-height: 42px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .pot-word-slot.is-active { min-width: 72px; }
  .pot-word-input { width: 7ch; }
  .pot-conj-grid,
  .pot-options { grid-template-columns: 1fr; }
  .pot-conj-sentence { gap: 5px; font-size: 1rem; }
  .pot-conj-row .pot-conj-input { min-width: 4ch; }
  .pot-reading-actions { left: 2px; bottom: 2px; }
  .pot-reading-next { width: 42px; height: 42px; }
  /* Escena de lectura: personajes más pequeños y diálogo compacto para que no se
     tape el texto en pantallas angostas. */
  .pot-scene { gap: 6px; }
  .pot-figure img, .pot-figure svg { height: clamp(52px, 15vw, 72px); }
  .pot-scene .pot-passage { padding: 8px 10px; }
  .pot-passage p { font-size: 1rem; }
  /* Conversación en móvil: figuras algo menores y globos compactos, ambos turnos
     visibles sin desbordamiento. */
  .pot-convo .pot-figure img, .pot-convo .pot-figure svg {
    height: clamp(72px, min(22vw, 16vh), 100px);
  }
  .pot-bubble-wrap { max-width: 72%; }
  .pot-bubble { padding: 8px 11px; font-size: 1rem; }
  .pot-turn { gap: 6px; }
}

/* ── Series de práctica (ADR 0021): SOLO capa de navegación ───────────────────
   No cambia los ejercicios. Los boosters v2 añaden una segunda línea en la
   cabecera (serie activa + progreso total); la primera línea (título, progreso,
   reiniciar, audio, X) queda igual. Tarjeta, lista y resumen reemplazan el
   cuerpo del pizarrón (sin ventanas superpuestas). El formato heredado no
   muestra nada de esto. */
.pot-head.has-series { flex-wrap: wrap; row-gap: 8px; }
/* Fuera del ejercicio (tarjeta, lista, resumen) no hay actividad que reiniciar. */
.pot-restart[hidden] { display: none; }
.pot-head.has-series .pot-title { flex: 1 1 0; }
.pot-series-bar {
  flex: 1 0 100%;
  order: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.pot-series-bar[hidden] { display: none; }
.pot-series-btn {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  cursor: pointer;
  font: inherit;
  color: var(--text, #333);
  background: var(--bg, #fff);
  border: 1px solid var(--line, #E2E6EC);
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, background .15s;
}
.pot-series-btn:hover,
.pot-series-btn[aria-expanded="true"] {
  border-color: var(--pot-ac, var(--accent, #1C1C1C));
  background: rgba(var(--pot-ac-rgb, 28, 28, 28), .06);
}
.pot-series-btn:focus-visible { outline: 3px solid var(--pot-ac, var(--accent, #1C1C1C)); outline-offset: 2px; }
.pot-series-btn .pot-ico { width: 16px; height: 16px; color: var(--muted, #6A7080); }
.pot-series-btn[aria-expanded="true"] .pot-ico { transform: rotate(180deg); }
.pot-series-label { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.pot-series-count {
  flex: none;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: .82rem;
  color: var(--pot-ac, var(--accent, #1C1C1C));
  white-space: nowrap;
}
.pot-series-name {
  min-width: 0;
  font-size: .9rem;
  color: var(--text, #333);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pot-series-total { flex: none; display: flex; align-items: center; gap: 8px; }
.pot-series-dots { display: inline-flex; gap: 5px; }
.pot-series-dot {
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--line, #E2E6EC);
  background: transparent;
}
.pot-series-dot.is-done { border-color: var(--ok, #1A7F4B); background: var(--ok, #1A7F4B); }
.pot-series-dot.is-current { border-color: var(--pot-ac, var(--accent, #1C1C1C)); }
.pot-series-dot.is-current.is-done { background: var(--ok, #1A7F4B); border-color: var(--pot-ac, var(--accent, #1C1C1C)); }
.pot-series-done {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: .8rem;
  color: var(--muted, #6A7080);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* «Refuerzo» en el contador: fuera del conteo formal de la serie. */
.pot-progress-recovery { color: var(--pot-ac, var(--accent, #1C1C1C)); }
.pot-recovery-skip {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  min-height: 32px;
  padding: 4px 10px;
  cursor: pointer;
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--muted, #6A7080);
  background: transparent;
  border: 1px solid var(--line, #E2E6EC);
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
}
.pot-recovery-skip:hover { color: var(--text, #333); border-color: var(--pot-ac, var(--accent, #1C1C1C)); }
.pot-recovery-skip:focus-visible { outline: 3px solid var(--pot-ac, var(--accent, #1C1C1C)); outline-offset: 2px; }

/* Vistas de serie dentro del cuerpo: tarjeta de inicio, lista y resumen. */
.pot-practice .pot-body.is-series-view { padding-bottom: 0; }
.pot-series-card { text-align: center; margin: auto 0; max-width: 520px; align-self: center; }
.pot-series-card h3 { font-family: "Outfit", sans-serif; font-size: 1.2rem; margin: 0 0 8px; color: var(--text, #333); }
.pot-series-objective { margin: 0 auto 8px; max-width: 46ch; line-height: 1.45; color: var(--text, #333); }
.pot-series-meta { margin: 0 0 14px; font-size: .9rem; color: var(--muted, #6A7080); }
.pot-series-notice {
  margin: 0 auto 14px;
  max-width: 44ch;
  padding: 8px 12px;
  font-size: .9rem;
  color: var(--text, #333);
  background: rgba(var(--pot-ac-rgb, 28, 28, 28), .07);
  border-left: 3px solid var(--pot-ac, var(--accent, #1C1C1C));
  border-radius: 8px;
  text-align: left;
}
.pot-series-view {
  flex: 1;
  min-height: 0;
  width: min(100%, 640px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pot-series-view-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pot-series-view-head h3 { font-family: "Outfit", sans-serif; font-size: 1.05rem; margin: 0; color: var(--text, #333); }
.pot-series-view-head p { margin: 0; font-size: .86rem; color: var(--muted, #6A7080); }
.pot-series-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  margin: 0;
  padding: 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pot-series-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text, #333);
  background: var(--bg, #fff);
  border: 1px solid var(--line, #E2E6EC);
  border-radius: 12px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, background .15s;
}
.pot-series-row:hover { border-color: rgba(var(--pot-ac-rgb, 28, 28, 28), .55); }
.pot-series-row:focus-visible { outline: 3px solid var(--pot-ac, var(--accent, #1C1C1C)); outline-offset: 2px; }
.pot-series-row[aria-current] {
  border-color: var(--pot-ac, var(--accent, #1C1C1C));
  background: rgba(var(--pot-ac-rgb, 28, 28, 28), .06);
  box-shadow: inset 3px 0 0 var(--pot-ac, var(--accent, #1C1C1C));
}
.pot-series-state {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--line, #E2E6EC);
  color: #fff;
}
.pot-series-state .pot-ico { width: 13px; height: 13px; }
.pot-series-row.is-completed .pot-series-state { background: var(--ok, #1A7F4B); border-color: var(--ok, #1A7F4B); }
.pot-series-row.is-in-progress .pot-series-state {
  border-color: var(--pot-ac, var(--accent, #1C1C1C));
  background: linear-gradient(90deg, var(--pot-ac, var(--accent, #1C1C1C)) 50%, transparent 50%);
}
.pot-series-row.is-recommended .pot-series-state { border-color: var(--pot-ac, var(--accent, #1C1C1C)); }
.pot-series-row.is-updated .pot-series-state { border-style: dashed; border-color: var(--pot-ac, var(--accent, #1C1C1C)); }
.pot-series-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pot-series-row-title { font-family: "Outfit", sans-serif; font-weight: 800; font-size: .95rem; }
.pot-series-row-meta { font-size: .82rem; color: var(--muted, #6A7080); }
.pot-series-row.is-recommended .pot-series-row-meta,
.pot-series-row.is-updated .pot-series-row-meta { color: var(--pot-ac, var(--accent, #1C1C1C)); font-weight: 600; }
.pot-series-row-hint { font-size: .8rem; color: var(--muted, #6A7080); font-style: italic; }
.pot-series-actions { flex: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pot-series-actions .btn { min-height: 40px; }
/* La lista se alinea arriba (el resto de vistas se centran como el pizarrón). */
.pot-body.is-series-view.has-list { justify-content: flex-start; }

/* Sidebar y botonera: progreso total del potenciador (solo v2). */
.pot-nav-sub { font-size: .74rem; color: var(--muted, #6A7080); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pot-choose-meta { display: block; font-size: .8rem; font-weight: 600; color: var(--ac, var(--muted, #6A7080)); }

.pot-practice.is-compact .pot-head.has-series { row-gap: 5px; }
.pot-practice.is-compact .pot-series-btn { min-height: 32px; padding-top: 3px; padding-bottom: 3px; }
.pot-practice.is-compact .pot-series-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.pot-practice.is-compact .pot-series-objective,
.pot-practice.is-compact .pot-series-meta { margin-bottom: 6px; font-size: .9rem; }

@media (max-width: 480px) {
  .pot-series-done { display: none; }
  .pot-series-name { font-size: .84rem; }
  .pot-series-actions .btn { flex: 1 1 calc(50% - 8px); padding-left: 8px; padding-right: 8px; font-size: .88rem; }
  .pot-recovery-skip { font-size: .8rem; padding: 3px 8px; }
}