/* ============================================================
   🇺🇸 Aprende Inglés — tema propio del curso de inglés.
   Reglas de la casa:
   - Todos los colores en variables desde el día uno.
   - Nada de texto chiquito: se usa en iPad, con el dedo y con lápiz.
   - .hidden gana SIEMPRE (con !important): un panel abierto por error
     no puede quedar tapando la pantalla e impedir los toques.
   ============================================================ */
:root {
  --fondo: #f4f7fc;
  --fondo-abajo: #e6edf8;
  --tinta: #16243a;
  --suave: #5b6f8c;
  --panel: #ffffff;
  --borde: rgba(22, 36, 58, 0.14);
  --primario: #1d3f7a;
  --primario-fuerte: #122c58;
  --acento: #d9483b;
  --alegria: #f0a92c;
  --bien: #1e8e5a;
  --sombra: 0 14px 34px rgba(22, 36, 58, 0.13);
  --redondez: 20px;
  --font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: linear-gradient(175deg, var(--fondo), var(--fondo-abajo));
  color: var(--tinta);
  font-family: var(--font-ui);
  -webkit-tap-highlight-color: transparent;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* ===== candado ===== */
.candado {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(175deg, var(--fondo), var(--fondo-abajo));
  padding: 20px;
}
.candado-caja {
  width: min(420px, 100%);
  background: var(--panel);
  border-radius: var(--redondez);
  box-shadow: var(--sombra);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  text-align: center;
}
.candado-emoji { font-size: 52px; }
.candado-caja h1 { margin: 0; font-size: 24px; }
.candado-caja input {
  min-height: 54px; border-radius: 14px; border: 2px solid var(--borde);
  padding: 0 16px; font-size: 17px; color: inherit;
}
.candado-error { color: var(--acento); font-weight: 700; margin: 0; }

/* ===== portada ===== */
.portada { max-width: 960px; margin: 0 auto; padding: 18px 16px 40px; }
.portada-cabeza { text-align: center; position: relative; padding-top: 8px; }
.portada-cabeza h1 { margin: 6px 0 2px; font-size: clamp(30px, 7vw, 44px); }
.portada-cabeza p { margin: 0 0 18px; color: var(--suave); font-size: 17px; }
.volver-chino {
  position: absolute; left: 0; top: 0;
  font-size: 26px; text-decoration: none;
  min-width: 48px; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
}
.acento-chip {
  position: absolute; right: 0; top: 0;
  min-width: 52px; min-height: 48px; font-size: 24px;
  border-radius: 14px; border: 2px solid var(--borde); background: var(--panel);
}
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.tarjeta {
  --tc: var(--primario);
  background: var(--panel);
  border: 3px solid var(--tc);
  border-radius: var(--redondez);
  box-shadow: var(--sombra);
  padding: 18px 14px;
  min-height: 132px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: inherit; text-align: center;
  transition: transform 0.12s ease;
}
.tarjeta:active { transform: scale(0.96); }
.tarjeta-emoji { font-size: 40px; line-height: 1; }
.tarjeta b { font-size: 19px; }
.tarjeta small { color: var(--suave); font-size: 13px; }
.portada-pie { text-align: center; color: var(--suave); margin-top: 22px; font-size: 14px; }

/* ===== pantalla de módulo ===== */
.modo {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  background: linear-gradient(175deg, var(--fondo), var(--fondo-abajo));
  padding-top: env(safe-area-inset-top, 0px);
}
/* El lienzo y la palabra se abren ENCIMA de cualquier módulo. Con el mismo
   z-index gana el que va después en el HTML, y #modo-trazar (línea 155) va
   antes que #modo-video, #modo-lector, #modo-biblioteca y compañía: al tocar
   ✍️ Escribirla el lienzo quedaba debajo de una pantalla opaca y parecía que
   el botón no hacía nada. Estas dos suben y el problema no vuelve. */
#modo-trazar, #modo-palabra { z-index: 60; }
.modo-cabeza {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}
.modo-cabeza h2 {
  margin: 0; font-size: 22px; min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#trazar-titulo { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.15; font-size: clamp(17px, 2.4vw, 22px); }
.boton-volver {
  min-width: 58px; min-height: 58px;
  font-size: 26px;
  border-radius: 16px; border: 2px solid var(--borde);
  background: var(--panel);
}
.boton-grande {
  min-height: 56px;
  border-radius: 16px; border: none;
  background: var(--primario);
  color: #fff; font-size: 18px; font-weight: 700;
  padding: 0 20px;
  box-shadow: var(--sombra);
}
.boton-grande:active { background: var(--primario-fuerte); }
.boton-suave { background: var(--panel); color: var(--tinta); border: 2px solid var(--borde); }
.boton-trazar { background: var(--bien); }
.boton-mic { background: #8e44ad; }
.boton-mic.is-oyendo { animation: mic-pulso 1s ease infinite; }
@keyframes mic-pulso { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.boton-grande.is-on { background: var(--acento); }
.boton-sig { margin-left: auto; min-height: 52px; font-size: 16px; background: var(--alegria); color: var(--tinta); }
.boton-peligro { background: var(--acento); }

/* ===== aviso ===== */
.aviso {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--tinta); color: #fff;
  padding: 12px 22px; border-radius: 16px;
  font-size: 16px; font-weight: 700;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 300; max-width: 90vw; text-align: center;
}
.aviso.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== chips de nivel (A1…C2, Exámenes) ===== */
.consonantes-fila {
  flex: 0 0 auto; display: flex; gap: 8px; padding: 6px 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.consonantes-fila::-webkit-scrollbar { display: none; }
.consonante-chip {
  flex: 0 0 auto; min-width: 66px; min-height: 56px;
  font-size: 20px; font-weight: 800;
  border-radius: 16px; border: 3px solid var(--cc, var(--primario));
  color: var(--cc, var(--primario)); background: var(--panel);
}
.consonante-chip.is-on { background: var(--cc, var(--primario)); color: #fff; }

/* ===== tira de control (🔁 ×N, 🔔 cada N, ✋/▶️) ===== */
.caso-chip {
  min-width: 52px; min-height: 52px; font-size: 20px; font-weight: 800;
  border-radius: 14px; border: 2px solid var(--borde); background: var(--panel);
  color: var(--tinta);
}
.caso-chip.is-on { border-color: var(--primario); background: var(--primario); color: #fff; }
.tira-control {
  display: flex; align-items: center; justify-content: safe center; gap: 6px;
  padding: 4px 10px; flex-wrap: nowrap; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* Dentro de una columna flex se APLASTABA hasta quedar en una rayita de 10px
     (se veía cortada). Nunca debe encogerse: son los controles de repetición. */
  flex: 0 0 auto; min-height: 54px;
}
.tira-control::-webkit-scrollbar { display: none; }
.tira-control .caso-chip { flex: 0 0 auto; min-width: 48px; min-height: 46px; font-size: 16px; }
.tira-avance { display: inline-flex; gap: 6px; align-items: center; }
.repetir-titulo { color: var(--suave); font-weight: 800; font-size: 15px; }
/* grupos con rótulo; en pantalla angosta la tira se acomoda en dos renglones
   en vez de esconder opciones a la derecha */
.tira-grupo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 12px; background: rgba(0, 0, 0, 0.035); }
.tira-grupo .repetir-titulo { font-size: 13px; white-space: nowrap; }
.tira-control .chip-avance, .tira-control #trazar-decir { font-size: 14px; }
/* en Escribir las tiras viven en un riel angosto: chips más compactos */
#modo-trazar .tira-lienzo .caso-chip, #modo-trazar .tira-abajo .caso-chip { min-width: 36px; min-height: 38px; font-size: 13px; padding: 0 6px; }
#modo-trazar .tira-grupo { gap: 4px; padding: 2px 4px; }
#modo-trazar .tira-grupo .repetir-titulo { font-size: 12px; }
@media (max-width: 720px) {
  .tira-control { flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: 6px; }
  /* en celular solo el icono: las palabras le robarían alto al lienzo */
  .tira-grupo .pal { display: none; }
  .tira-grupo .repetir-titulo.solo-pal { display: none; }
  #modo-trazar .tira-lienzo .caso-chip, #modo-trazar .tira-abajo .caso-chip { min-width: 40px; min-height: 40px; }
}
.trazar-caso { margin-left: auto; display: flex; gap: 6px; }

/* ===== listas: lecciones y palabras ===== */
.palabras-cuadricula {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; padding: 10px 14px 30px;
  /* Sin esto, cuando hay pocas tarjetas el único renglón se ESTIRA para llenar
     la pantalla y quedan tarjetas de 550 px con el texto flotando en medio.
     Cada renglón conserva su alto natural y todos se pegan arriba. */
  align-content: start;
  grid-auto-rows: min-content;
}
/* Los avisos de "todavía no hay nada" caían en UNA columna del rejillado y
   salían apretados en una tira angosta: van de lado a lado. */
.palabras-cuadricula > p,
.palabras-cuadricula > .panel { grid-column: 1 / -1; text-align: center; }
.palabra-celda {
  min-height: 100px;
  border-radius: 16px; border: 3px solid var(--borde);
  background: var(--panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--tinta); text-align: center; padding: 8px;
}
.palabra-celda b { font-size: 21px; }
.palabra-celda small { font-size: 13px; color: var(--suave); }
.palabra-celda .pc-pr { color: var(--acento); font-weight: 700; font-size: 14px; }
.palabra-celda .pc-emoji { font-size: 38px; line-height: 1; }
.palabra-celda:active { transform: scale(0.95); }
.palabra-celda.is-oida { border-color: var(--alegria); }

.leccion-celda {
  min-height: 130px;
  border-radius: 16px; border: 3px solid var(--borde);
  background: var(--panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--tinta); text-align: center; padding: 12px 10px;
  position: relative;
}
.leccion-celda b { font-size: 18px; }
.leccion-celda small { font-size: 13px; color: var(--suave); }
.leccion-celda.is-hecha { border-color: var(--bien); }
.leccion-celda:active { transform: scale(0.96); }
.leccion-barra {
  display: block; width: 80%; height: 7px; margin-top: 6px;
  background: var(--borde); border-radius: 99px; overflow: hidden;
}
.leccion-barra i { display: block; height: 100%; background: var(--bien); }

/* la caja del patrón gramatical de una lección */
.patron-caja {
  flex: 0 0 auto;
  margin: 8px 14px; padding: 12px 16px;
  background: #fff7e8; border: 2px solid var(--alegria);
  border-radius: 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.patron-caja b { font-size: 18px; }
.patron-caja small { color: var(--suave); font-size: 15px; }
.patron-ejemplo {
  align-self: flex-start; margin-top: 4px;
  border: 2px solid var(--alegria); background: var(--panel);
  border-radius: 12px; min-height: 48px; padding: 4px 14px;
  font-size: 16px; font-weight: 700; color: var(--tinta);
}

/* ===== la palabra grande ===== */
.palabra-grande {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 10px; text-align: center;
}
.palabra-en {
  font-size: clamp(44px, 13vw, 110px); font-weight: 800; line-height: 1.05;
  color: var(--primario-fuerte); word-break: break-word; max-width: 100%;
}
.palabra-pr {
  font-size: clamp(22px, 6vw, 44px); font-weight: 700; color: var(--acento);
}
.palabra-es {
  font-size: clamp(20px, 5vw, 36px); color: var(--tinta);
}
.palabra-uk { font-size: 17px; color: var(--suave); }

/* ===== trazar ===== */
.trazar-pista {
  margin: 0; padding: 2px 16px 6px; text-align: center;
  color: var(--suave); font-weight: 700; min-height: 24px; font-size: 16px;
}
.trazar-palabra {
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
  padding: 0 12px 4px;
}
.trazar-palabra span {
  min-width: 38px; text-align: center; cursor: pointer;
  font-size: 28px; font-weight: 800;
  color: var(--borde); border-bottom: 4px solid var(--borde);
  border-radius: 4px; padding: 0 4px;
}
.trazar-palabra span.is-hecha { color: var(--bien); border-color: var(--bien); }
.trazar-palabra span.is-actual { color: var(--primario-fuerte); border-color: var(--alegria); background: rgba(240, 169, 44, 0.18); }
/* El renglón para escribir: SIEMPRE una sola fila. Si la palabra no cabe
   completa a un tamaño que se pueda escribir con el dedo, el renglón se
   desliza (y el código lo centra solo en la letra que toca). */
.trazar-marco {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: safe center;
  position: relative; padding: 0 2px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.trazar-marco::-webkit-scrollbar { display: none; }
/* LA HOJA: papel de cuaderno con su cuadrícula. El lienzo se pinta encima
   (transparente), así que la cuadrícula se ve a través. */
#trazar-lienzo {
  background-color: #fffdf7;
  background-image:
    linear-gradient(rgba(29, 63, 122, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 63, 122, 0.055) 1px, transparent 1px);
  background-size: 32px 32px;
  border-radius: var(--redondez);
  border: 1px dashed rgba(29, 63, 122, 0.22);
  box-shadow: var(--sombra);
  touch-action: none;
  /* que iOS no saque "Copiar / Buscar / Traducir" encima de la escritura */
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  flex: 0 0 auto;
}
/* La palabra + cómo suena + qué significa, ENCIMA de la hoja: la mirada no
   tiene que cruzar la pantalla. El lápiz dibuja a través (pointer-events). */
.trazar-chip {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 3; pointer-events: none;
  max-width: min(94%, 640px); padding: 6px 16px;
  border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(255, 253, 247, 0.94);
  border: 1px solid rgba(29, 63, 122, 0.16);
  box-shadow: 0 2px 10px rgba(22, 36, 58, 0.10);
  font-size: clamp(15px, 2.4vw, 21px); font-weight: 700; color: var(--primario-fuerte);
}
.trazar-vuelta {
  position: absolute; top: 10px; right: 12px; z-index: 3; pointer-events: none;
  font-size: 15px; font-weight: 800; color: var(--suave);
}
/* la calificación que aparece sola */
.trazar-pista.es-bien { color: var(--bien); font-weight: 800; }
.trazar-pista.es-casi { color: var(--acento); }
.tira-lienzo { flex: 0 0 auto; }
.trazar-fiesta {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 110px; pointer-events: none;
  animation: fiesta-pop 0.9s ease;
}
@keyframes fiesta-pop {
  0% { transform: scale(0.2); opacity: 0; }
  50% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}
.trazar-botones {
  flex: 0 0 auto;
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px calc(14px + env(safe-area-inset-bottom, 0px));
}

/* ===== ajustes ===== */
.ajustes-cuerpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 10px 14px 30px; display: flex; flex-direction: column; gap: 14px;
}
.ajuste-bloque {
  background: var(--panel); border: 2px solid var(--borde);
  border-radius: 16px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.ajuste-bloque b { font-size: 18px; }
.ajuste-bloque small { color: var(--suave); font-size: 14px; }
.ajuste-fila { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ajuste-opcion { min-width: auto; padding: 0 16px; font-size: 16px; }
.ajuste-dato { margin: 4px 0 0; color: var(--suave); font-size: 15px; }

/* ============================================================
   Piezas compartidas por los módulos (escucha, arma frases, juego,
   lector, video, notas, biblioteca, exámenes). Todos se ven igual
   porque todos usan estas mismas clases.
   ============================================================ */
.cuerpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 10px 14px 30px; display: flex; flex-direction: column; gap: 12px;
}
.cuerpo-centro {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 12px; text-align: center;
}
.panel {
  background: var(--panel); border: 2px solid var(--borde);
  border-radius: 16px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.panel b { font-size: 18px; }
.panel small { color: var(--suave); font-size: 14px; }
.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; }
.fila-izq { justify-content: flex-start; }
.campo {
  min-height: 52px; border-radius: 14px; border: 2px solid var(--borde);
  padding: 0 14px; font-size: 16px; color: inherit; background: var(--panel);
  flex: 1 1 200px; min-width: 0;
}
.campo-area {
  min-height: 130px; border-radius: 14px; border: 2px solid var(--borde);
  padding: 12px 14px; font-size: 16px; color: inherit; background: var(--panel);
  width: 100%; resize: vertical;
}

/* la frase grande de escucha / karaoke */
.frase-en {
  font-size: clamp(28px, 7vw, 60px); font-weight: 800; line-height: 1.2;
  color: var(--primario-fuerte); max-width: 100%;
}
.frase-pr { font-size: clamp(17px, 4vw, 30px); color: var(--acento); font-weight: 700; }
.frase-es { font-size: clamp(18px, 4.5vw, 32px); color: var(--tinta); }
.frase-en .palabra-toca { cursor: pointer; border-radius: 8px; padding: 0 2px; }
.frase-en .palabra-toca.is-sonando { background: var(--alegria); }

/* fichas para armar frases (cada rol con su color) */
.fichas {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
}
.ficha {
  min-height: 62px; min-width: 74px;
  border-radius: 14px; border: 3px solid var(--fc, var(--primario));
  background: var(--panel); color: var(--tinta);
  font-size: 20px; font-weight: 700; padding: 6px 14px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: var(--sombra);
}
.ficha small { font-size: 12px; color: var(--suave); }
.ficha:active { transform: scale(0.94); }
.ficha.is-usada { opacity: 0.28; pointer-events: none; }
.ficha.is-mal { animation: ficha-no 0.4s ease; border-color: var(--acento); }
@keyframes ficha-no {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}
.ficha.destella { animation: destello 0.6s ease 2; }
@keyframes destello {
  0%, 100% { transform: scale(1); box-shadow: var(--sombra); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(240, 169, 44, 0.35); }
}
.riel {
  min-height: 92px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
  padding: 10px; background: var(--panel);
  border: 3px dashed var(--borde); border-radius: 16px;
}

/* opciones de juego */
.opciones {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 0;
}
.opcion {
  min-height: 110px;
  border-radius: 18px; border: 4px solid var(--borde);
  background: var(--panel); box-shadow: var(--sombra);
  font-size: 24px; font-weight: 800; color: var(--tinta);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px;
}
.opcion small { font-size: 15px; color: var(--suave); font-weight: 600; }
.opcion:active { transform: scale(0.95); }
.opcion.is-bien { border-color: var(--bien); background: #e9f7ef; }
.opcion.is-mal { animation: ficha-no 0.4s ease; border-color: var(--acento); }

/* líneas de subtítulo / lista de frases */
.lista-lineas { display: flex; flex-direction: column; gap: 8px; }
.linea {
  background: var(--panel); border: 2px solid var(--borde); border-radius: 14px;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 2px;
  text-align: left; color: var(--tinta);
}
.linea b { font-size: 18px; }
.linea small { color: var(--suave); font-size: 14px; }
.linea .linea-pr { color: var(--acento); font-weight: 700; font-size: 14px; }
.linea.is-actual { border-color: var(--alegria); background: #fff8ea; }

/* marcador y etiquetas */
.abc-avance { margin-left: auto; color: var(--suave); font-weight: 800; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--panel); border: 2px solid var(--borde);
  border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 700;
  color: var(--suave);
}
.pizarron { background: var(--panel); border-radius: 16px; box-shadow: var(--sombra); touch-action: none; }
@media (max-width: 480px) {
  .opciones { grid-template-columns: 1fr; }
  .palabras-cuadricula { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
/* EL IPAD DE LADO: el lienzo se lleva casi toda la pantalla y lo demás se va a
   un riel angosto a la izquierda. Antes quedaba una tira baja con media
   pantalla vacía. */
@media (orientation: landscape) and (min-width: 760px) {
  #modo-trazar {
    display: grid;
    grid-template-columns: clamp(250px, 27vw, 340px) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
    gap: 6px 10px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  /* columna izquierda: cada cosa en su renglón, sin encimarse */
  #modo-trazar .modo-cabeza    { grid-column: 1; grid-row: 1; flex-wrap: wrap; padding: 0; }
  #modo-trazar .trazar-pista   { grid-column: 1; grid-row: 2; text-align: left; padding: 0 2px; }
  #modo-trazar .trazar-palabra { grid-column: 1; grid-row: 3; justify-content: flex-start; align-content: flex-start; overflow-y: auto; }
  #modo-trazar .trazar-botones { grid-column: 1; grid-row: 4; justify-content: flex-start; padding: 0; }
  #modo-trazar .tira-lienzo    { grid-column: 1; grid-row: 5; justify-content: flex-start; }
  #modo-trazar .tira-abajo     { grid-column: 1; grid-row: 6; justify-content: flex-start; }
  /* la hoja se lleva toda la columna derecha, de arriba abajo */
  #modo-trazar .trazar-marco   { grid-column: 2; grid-row: 1 / -1; height: 100%; }
  /* en el riel angosto los chips se acomodan en varios renglones en vez de
     salirse cortados por un lado */
  #modo-trazar .tira-lienzo,
  #modo-trazar .tira-abajo { flex-wrap: wrap; overflow-x: visible; }
  /* el encabezado cabe: el botón de siguiente se queda con su ícono */
  #modo-trazar .boton-sig span { display: none; }
  #modo-trazar .boton-sig { margin-left: 0; padding: 0 14px; }
  #modo-trazar .modo-cabeza h2 { font-size: 20px; }
  #modo-trazar .trazar-caso { margin-left: 0; }
}

/* En pantalla angosta el encabezado se aprieta y el título salía cortado
   ("w…"). Los botones se quedan con su ícono y el título recupera su lugar. */
@media (max-width: 560px) {
  .boton-sig span, .trazar-botones .boton-grande span { display: none; }
  .boton-sig { padding: 0 14px; }
  .modo-cabeza { gap: 8px; }
  .modo-cabeza h2 { font-size: 19px; }
  .boton-volver { min-width: 52px; min-height: 52px; font-size: 23px; }
  .trazar-caso .caso-chip { min-width: 46px; min-height: 46px; }
}

/* ============================================================
   🎯 PRÁCTICA DE EXAMEN
   Reglas que este bloque respeta a propósito:
   - Nada de texto chiquito: se contesta en iPad y con el dedo.
   - Todo lo ancho (guiones, párrafos, fichas) se envuelve: el cuerpo de
     la página NUNCA se va de lado.
   - Los paneles no se estiran al vacío cuando traen poquito
     (align-content: start), que es el defecto que ya nos mordió antes.
   ============================================================ */
.practica-destreza { margin: 22px 0 6px; padding: 0 4px; }
.practica-destreza b { display: block; font-size: 20px; }
.practica-destreza small { display: block; color: var(--suave); font-size: 14px; margin-top: 2px; }

.practica-tipo { align-content: start; }
.practica-cuenta { color: var(--suave); font-size: 13px; }
.practica-cuenta.grande { font-size: 16px; font-weight: 700; padding: 4px 2px; }
.practica-cuenta.bien { color: var(--bien); }
.practica-cuenta.pasado { color: var(--acento); font-weight: 700; }
.practica-tanda { min-width: 56px; }

.practica-cab { display: flex; align-items: center; gap: 10px; padding: 4px 0 8px; }
.practica-cab h3 { margin: 0; font-size: 19px; flex: 1 1 auto; min-width: 0; }
.practica-al-menu { flex: 0 0 auto; min-height: 46px; padding: 0 14px; font-weight: 700; }

.practica-clave { border-left: 6px solid var(--alegria); }
/* 👀 el ejemplo resuelto: se distingue del reactivo (fondo lila, borde) */
.practica-ejemplo { border: 2px dashed #8e6bb3; background: #f6f1fb; padding: 8px 12px; }
.practica-ejemplo summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px; list-style: none; flex-wrap: nowrap; min-width: 0; }
.practica-ejemplo summary b { white-space: nowrap; }
.practica-ejemplo summary small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.practica-ejemplo summary::-webkit-details-marker { display: none; }
.practica-ejemplo summary::before { content: "▸"; color: #6c3483; font-weight: 900; }
.practica-ejemplo[open] summary::before { content: "▾"; }
.practica-ejemplo summary b { color: #6c3483; font-size: 17px; }
.practica-ejemplo summary small { color: var(--suave); }
.practica-ejemplo-fila { display: grid; grid-template-columns: minmax(84px, auto) 1fr auto; gap: 4px 10px; align-items: center; margin-top: 8px; font-size: 16px; }
.practica-ejemplo-fila b { color: #6c3483; font-size: 14px; }
.practica-ejemplo-fila.porque span { color: #1d3f7a; }
.practica-ejemplo-fila .caso-chip { min-height: 36px; min-width: 40px; }
.practica-regla { display: block; margin-top: 6px; color: #8a5a00; }
.practica-vivo { display: block; margin-top: 6px; color: #1d3f7a; font-weight: 700; min-height: 1.2em; }
.practica-tandas-rotulo { display: block; color: var(--suave); margin: 6px 0 2px; }
.practica-clave b { color: #8a5a00; }

.practica-progreso {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--suave); padding: 2px 4px 8px;
}
.practica-barra {
  flex: 1 1 auto; height: 8px; border-radius: 99px;
  background: rgba(22, 36, 58, 0.10); overflow: hidden;
}
.practica-barra-llena { height: 100%; background: var(--primario); border-radius: 99px; transition: width .25s; }

/* ----- el texto que se lee ----- */
.practica-texto { align-content: start; }
.practica-parrafo { margin: 0 0 10px; line-height: 1.62; font-size: 17px; overflow-wrap: anywhere; }

/* ----- opciones ----- */
.practica-opciones { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.practica-opcion {
  text-align: left; padding: 15px 16px; border-radius: 16px;
  border: 2px solid var(--borde); background: var(--panel); color: var(--tinta);
  font-size: 17px; line-height: 1.45; min-height: 54px; overflow-wrap: anywhere;
}
.practica-opcion:active { background: #eef3fb; }
/* Las opciones ya contestadas se quedan legibles a propósito: son la corrección. */
.practica-opcion:disabled { opacity: 1; }
/* Los botones de acción SÍ tienen que verse apagados cuando no se pueden tocar.
   Un botón que se ve encendido y no hace nada parece una app rota. */
#modo-practica .boton-grande:disabled { opacity: .45; cursor: default; }
.practica-opcion.es-la-buena { border-color: var(--bien); background: #e8f7ef; font-weight: 700; }
.practica-opcion.es-la-mala { border-color: var(--acento); background: #fdeceb; }
.consonante-chip.es-la-buena { background: var(--bien); color: #fff; }
.consonante-chip.es-la-mala { background: var(--acento); color: #fff; }

/* ----- lo que se escribe ----- */
.practica-escribe {
  width: 100%; padding: 14px; border-radius: 16px;
  border: 2px solid var(--borde); background: var(--panel);
  font-size: 17px; line-height: 1.5; color: var(--tinta);
  resize: vertical; min-height: 90px;
}
.practica-escribe.grande { min-height: 220px; }
.practica-escribe:focus { outline: none; border-color: var(--primario); }

.practica-forma { align-content: start; }
.practica-hueco { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; font-size: 17px; }
.practica-etiqueta { color: var(--suave); }
.practica-entrada {
  flex: 1 1 160px; min-width: 130px; min-height: 48px;
  padding: 10px 12px; border-radius: 12px;
  border: 2px solid var(--borde); background: #fff;
  font-size: 17px; color: var(--tinta);
}
.practica-entrada:focus { outline: none; border-color: var(--primario); }
.practica-entrada.bien { border-color: var(--bien); background: #e8f7ef; }
.practica-entrada.mal { border-color: var(--acento); background: #fdeceb; }

.practica-visible { font-weight: 700; }
.practica-cola {
  display: inline-block; min-height: 38px; padding: 2px 6px;
  border: 0; border-bottom: 3px solid var(--primario); border-radius: 0;
  background: #eef3fb; font-size: 17px; font-family: inherit; color: var(--tinta);
}
.practica-cola:focus { outline: none; background: #dde8f8; }
.practica-cola.bien { border-color: var(--bien); background: #e8f7ef; }
.practica-cola.mal { border-color: var(--acento); background: #fdeceb; }

.practica-select {
  width: 100%; min-height: 50px; margin-top: 8px;
  padding: 10px 12px; border-radius: 12px;
  border: 2px solid var(--borde); background: #fff;
  font-size: 16px; color: var(--tinta);
}
.practica-select.bien { border-color: var(--bien); }
.practica-select.mal { border-color: var(--acento); }

/* ----- corrección ----- */
.practica-retro { border-left: 6px solid var(--suave); }
.practica-retro.bien { border-left-color: var(--bien); background: #f2fbf6; }
.practica-retro.medio { border-left-color: var(--alegria); background: #fff9ee; }
.practica-retro.mal { border-left-color: var(--acento); background: #fef4f3; }
.practica-retro b { font-size: 18px; }
.practica-ojo { color: #8a4b00; font-weight: 600; }
.practica-prueba { display: block; margin-top: 8px; color: var(--suave); line-height: 1.5; }

.practica-correccion { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.practica-linea-corr { padding: 8px 10px; border-radius: 12px; background: rgba(22, 36, 58, 0.04); line-height: 1.5; }
.practica-linea-corr b { display: block; }
.practica-linea-corr small { display: block; color: var(--suave); margin-top: 2px; }
.practica-linea-corr.bien { background: #e8f7ef; }
.practica-linea-corr.mal { background: #fdeceb; }

.practica-diff { margin: 8px 0; line-height: 2.1; }
.practica-pal { padding: 3px 6px; border-radius: 8px; font-size: 17px; }
.practica-pal.bien { background: #e8f7ef; }
.practica-pal.mal { background: #fdeceb; text-decoration: underline wavy var(--acento); }
.practica-buena {
  margin: 6px 0; padding: 10px 12px; border-radius: 12px;
  background: #e8f7ef; font-weight: 700; font-size: 17px; overflow-wrap: anywhere;
}

/* ----- guiones ----- */
.practica-oyendo b { font-size: 18px; }
.practica-guion { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.practica-linea { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; line-height: 1.5; }
.practica-linea.voz-a { background: #eef3fb; }
.practica-linea.voz-b { background: #f6efe4; }
.practica-quien { flex: 0 0 auto; }

/* ----- armar la oración ----- */
.practica-armada { align-content: start; }
.practica-hueco-frase {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  min-height: 62px; padding: 10px; margin-top: 8px;
  border: 2px dashed var(--borde); border-radius: 14px;
}
.practica-vacio { color: var(--suave); font-size: 15px; }
.practica-banco { align-content: start; }
.practica-fichas { display: flex; flex-wrap: wrap; gap: 8px; }
/* El párrafo de "completa las palabras" es texto corrido con huequitos DENTRO:
   por eso lleva más aire entre renglones, para que los campos no se peguen. */
.practica-hueco-texto { line-height: 2.4; }
.practica-ficha {
  padding: 12px 14px; min-height: 50px; border-radius: 14px;
  border: 2px solid var(--borde); background: var(--panel);
  font-size: 17px; color: var(--tinta);
}
.practica-ficha.puesta { background: var(--primario); color: #fff; border-color: var(--primario); }
.practica-clave-palabra b { font-size: 22px; letter-spacing: 1px; }

/* ----- reloj y tarjeta de hablar ----- */
.practica-reloj { text-align: center; }
.practica-reloj b { font-size: 30px; font-variant-numeric: tabular-nums; }
.practica-reloj b.poco { color: var(--acento); }
.practica-tarjeta b { font-size: 19px; line-height: 1.4; }
.practica-puntos { margin: 8px 0 4px; padding-left: 4px; list-style: none; }
.practica-puntos li { margin: 6px 0; }
.practica-puntos label { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; line-height: 1.45; }
.practica-puntos input { width: 24px; height: 24px; flex: 0 0 auto; margin-top: 2px; }
.practica-audio { width: 100%; margin: 8px 0; }
.practica-modelo { background: #fbfcfe; }
.practica-afirmacion { align-content: start; }

@media (max-width: 560px) {
  .practica-cab h3 { font-size: 17px; }
  .practica-opcion { font-size: 16px; padding: 13px 13px; }
  .practica-parrafo { font-size: 16px; }
  .practica-reloj b { font-size: 26px; }
  .practica-destreza b { font-size: 18px; }
}

/* ---------- el ojito de la contraseña (igual que el del curso de chino) ---------- */
.candado-clave-caja { position: relative; display: flex; align-items: stretch; }
.candado-clave-caja input { flex: 1 1 auto; width: 100%; padding-right: 52px; }
.ojito { position: absolute; top: 0; right: 0; height: 100%; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center; padding: 0 12px;
  background: transparent; border: 0; color: inherit; opacity: .65; cursor: pointer; }
.ojito:hover, .ojito[aria-pressed="true"] { opacity: 1; }
.ojito:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; border-radius: 10px; }
.ojito svg { display: block; width: 22px; height: 22px; }
.ojito .hidden { display: none; }

/* ============================================================
   🧭 TOEFL: tu ruta (modulos/toefl.js). Todo lo que se toca mide
   44 px o más y nada se sale de la pantalla en un celular de 390 px.
   ============================================================ */
.toefl-cuerpo { gap: 14px; }
.toefl-que-fila, .toefl-retro-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.toefl-cuerpo .caso-chip { min-height: 44px; }
.toefl-que small, .toefl-sub, .toefl-avance-linea small { color: var(--suave); font-size: 14px; }
.toefl-avance-linea { display: flex; flex-direction: column; gap: 2px; }
.toefl-avance .boton-grande, .toefl-desvios .boton-grande, .toefl-sigue .boton-grande, .toefl-acciones .boton-grande { width: 100%; }
.toefl-camino { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.toefl-estacion { position: relative; }
.toefl-estacion + .toefl-estacion::before {
  content: ""; position: absolute; left: 39px; top: -2px; height: 18px; width: 6px; border-radius: 3px;
  background: var(--borde);
}
.toefl-estacion-boton {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--panel); border: 2px solid var(--borde); border-radius: 18px;
  padding: 12px 14px; margin-top: 14px; min-height: 76px; color: var(--tinta); font: inherit;
}
.toefl-circulo {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; font-size: 28px;
  background: #eef3fb; border: 3px solid var(--primario);
}
.toefl-circulo.es-hecho { background: #e8f7ef; border-color: var(--bien); }
.toefl-estacion-texto, .toefl-tema-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.toefl-estacion-texto b { font-size: 18px; overflow-wrap: anywhere; }
.toefl-estacion-texto small, .toefl-tema-texto small { color: var(--suave); font-size: 14px; }
.toefl-estacion.es-pronto .toefl-estacion-boton { opacity: .62; border-style: dashed; }
.toefl-estacion.es-aqui .toefl-estacion-boton, .toefl-tema-celda.es-aqui {
  border-color: var(--alegria); box-shadow: 0 0 0 4px rgba(240, 169, 44, .25);
}
.toefl-aqui {
  align-self: flex-start; background: var(--alegria); color: #fff; font-weight: 700;
  font-size: 13px; border-radius: 999px; padding: 3px 10px; animation: toefl-pulso 1.6s ease infinite;
}
@keyframes toefl-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .toefl-aqui { animation: none; } }
.toefl-barra { display: block; height: 8px; border-radius: 99px; background: #e6edf8; overflow: hidden; }
.toefl-barra > span { display: block; height: 100%; background: var(--bien); border-radius: 99px; }

/* Conoce el examen */
.toefl-secciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.toefl-seccion {
  background: var(--panel); border: 2px solid var(--borde); border-top: 6px solid var(--c);
  border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.toefl-seccion-emoji { font-size: 30px; }
.toefl-seccion-num { font-weight: 700; color: var(--c); }
.toefl-seccion small { color: var(--suave); font-size: 14px; }
.toefl-tiempo { display: flex; height: 42px; border-radius: 12px; overflow: hidden; }
.toefl-tiempo > span { display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; min-width: 0; }
.toefl-formula { font-size: 18px; font-weight: 800; background: #eef3fb; border-radius: 12px; padding: 10px 12px; text-align: center; overflow-wrap: anywhere; }
.toefl-consejo { background: #e8f7ef; border-left: 6px solid var(--bien); border-radius: 10px; padding: 8px 12px; }
.toefl-escala {
  position: relative; height: 70px; margin: 8px 0 0; border-radius: 10px;
  background: linear-gradient(90deg, #fdeceb, #fff9ee 35%, #e8f7ef 70%, #dfeaff);
}
.toefl-escala-marca {
  position: absolute; top: 0; height: 42px; border-left: 2px solid var(--primario);
  padding-left: 3px; font-size: 13px; font-weight: 800; color: var(--primario);
}
.toefl-escala-zona { position: absolute; top: 0; height: 42px; background: rgba(29, 63, 122, .18); border-radius: 6px; }
.toefl-escala-tu {
  position: absolute; bottom: 2px; transform: translateX(-50%); background: var(--primario); color: #fff;
  font-weight: 800; font-size: 13px; border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.toefl-escala-min, .toefl-escala-max { position: absolute; bottom: 4px; font-size: 12px; color: var(--suave); }
.toefl-escala-min { left: 4px; }
.toefl-escala-max { right: 4px; }
.toefl-escala-sec { width: 100%; }
.toefl-cefr { display: grid; gap: 6px; }
.toefl-cefr-fila { display: grid; grid-template-columns: 44px 1fr; gap: 0 10px; align-items: baseline; }
.toefl-cefr-fila small { grid-column: 2; color: var(--suave); }
.toefl-vs-grid { display: grid; grid-template-columns: minmax(70px, .7fr) 1fr 1fr; gap: 6px 10px; font-size: 15px; }
.toefl-vs-grid > * { overflow-wrap: anywhere; min-width: 0; }
.toefl-muestra { display: flex; flex-direction: column; gap: 8px; }

/* Gramática */
.toefl-intro { margin: 0; font-size: 16px; }
.toefl-familia { border-left: 8px solid var(--c); }
.toefl-familia-cab { display: flex; align-items: center; gap: 10px; }
.toefl-familia-emoji { font-size: 26px; }
.toefl-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.toefl-tema-celda, .toefl-ibt-fila {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; text-align: left; min-height: 64px;
  padding: 10px 12px; border-radius: 14px; border: 2px solid var(--borde); background: var(--panel);
  color: var(--tinta); font: inherit;
}
.toefl-tema-emoji { font-size: 26px; flex: 0 0 auto; }
.toefl-tema-texto { flex: 1 1 120px; }
.toefl-tema-texto b { font-size: 16px; overflow-wrap: anywhere; }
.toefl-estrellas { color: var(--alegria); font-size: 18px; letter-spacing: 1px; flex: 0 0 auto; }
.toefl-estrellas.grande { font-size: 34px; }

/* La lección de un tema */
.toefl-regla { border-left: 8px solid var(--c); }
.toefl-regla p, .toefl-trampa p { margin: 0; font-size: 17px; line-height: 1.5; }
.toefl-bloques { display: flex; flex-wrap: wrap; gap: 6px; }
.toefl-bloque {
  display: inline-flex; flex-direction: column; align-items: center; max-width: 100%;
  border-radius: 12px; border: 2px solid var(--c); border-bottom-width: 6px; background: var(--panel); padding: 6px 10px;
}
.toefl-bloque-t { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; text-align: center; }
.toefl-bloque-r { font-size: 12px; color: var(--c); font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.toefl-mal, .toefl-bien { border-radius: 10px; padding: 8px 12px; font-size: 17px; overflow-wrap: anywhere; }
.toefl-mal { background: #fdeceb; color: #a5281d; }
.toefl-bien { background: #e8f7ef; color: #146b43; }
.toefl-oracion { font-size: 19px; line-height: 1.7; margin: 0; overflow-wrap: anywhere; }
.toefl-hueco {
  display: inline-block; min-width: 4em; border-bottom: 3px dashed var(--primario);
  padding: 0 4px; text-align: center; color: var(--primario); font-weight: 700;
}
.toefl-hueco.es-lleno { border-bottom-style: solid; }
.toefl-hueco.es-bien { color: var(--bien); border-color: var(--bien); }
.toefl-resuelto-ops { display: flex; flex-wrap: wrap; gap: 6px; }
.toefl-chip-op { border: 2px solid var(--borde); border-radius: 999px; padding: 4px 12px; font-size: 15px; }
.toefl-chip-op.es-la-buena { border-color: var(--bien); background: #e8f7ef; font-weight: 700; }
.toefl-pasos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.toefl-senales ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.toefl-acciones { display: flex; flex-direction: column; gap: 10px; }

/* Las preguntas */
.toefl-item { display: flex; flex-direction: column; gap: 10px; }
.toefl-instruccion { color: var(--suave); font-size: 15px; }
.toefl-direcciones { background: #eef3fb; border-radius: 10px; padding: 8px 12px; font-size: 15px; }
.toefl-op { display: flex; align-items: center; }
.toefl-letra {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #eef3fb; font-weight: 800; margin-right: 10px; flex: 0 0 auto;
}
.practica-opcion.is-elegida { border-color: var(--primario); background: #eaf1ff; font-weight: 700; }
.toefl-we { line-height: 2.9; }
.toefl-seg {
  display: inline-flex; flex-direction: column; align-items: center; vertical-align: top;
  min-height: 44px; min-width: 44px; max-width: 100%; padding: 2px 6px 0; margin: 0 2px;
  border: 2px solid transparent; border-radius: 10px; background: #f4f7fc; color: var(--tinta);
  font: inherit; line-height: 1.25;
}
.toefl-seg-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; font-size: 19px; overflow-wrap: anywhere; }
.toefl-seg-l { font-size: 12px; font-weight: 800; color: var(--suave); }
.toefl-seg.is-elegida { border-color: var(--primario); background: #eaf1ff; }
.toefl-seg.es-el-error .toefl-seg-t { text-decoration: line-through; text-decoration-color: var(--acento); color: var(--acento); }
.toefl-seg.es-la-mala { border-color: var(--acento); background: #fdeceb; }
.toefl-seg.es-la-buena { border-color: var(--bien); background: #e8f7ef; }
.toefl-arreglo { font-size: 14px; font-weight: 800; color: var(--bien); line-height: 1.1; }
.toefl-trampa-mini { background: #fff9ee; border-radius: 10px; padding: 6px 10px; font-size: 15px; }
.toefl-regla-mini { margin: 0; font-size: 15px; background: #eef3fb; border-radius: 10px; padding: 8px 10px; }
.toefl-reportar {
  align-self: flex-start; background: none; border: none; color: var(--suave);
  font-size: 14px; min-height: 44px; padding: 0 4px; text-decoration: underline;
}

/* Modo examen */
.toefl-examen-barra {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  position: sticky; top: -10px; z-index: 2; background: var(--fondo); padding: 6px 0;
}
.toefl-reloj { font-size: 22px; font-variant-numeric: tabular-nums; }
.toefl-reloj.es-poco { color: var(--acento); }
.toefl-examen-cuenta { color: var(--suave); font-size: 14px; flex: 1 1 auto; }
.toefl-nav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toefl-nav .boton-grande { flex: 1 1 140px; }
.toefl-nav .boton-grande:disabled { opacity: .45; }
.boton-entregar { background: var(--bien); }
.toefl-hoja { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.toefl-hoja-num {
  min-height: 48px; border-radius: 12px; border: 2px solid var(--borde); background: var(--panel);
  font-weight: 700; font-size: 16px; color: var(--tinta);
}
.toefl-hoja-num.es-contestada { background: #eaf1ff; border-color: var(--primario); }
.toefl-hoja-num.es-dudosa { border-color: var(--alegria); }
.toefl-hoja-num.es-actual { outline: 3px solid var(--alegria); }
.toefl-hoja-num.es-bien { background: #e8f7ef; border-color: var(--bien); }
.toefl-hoja-num.es-mal { background: #fdeceb; border-color: var(--acento); }
.toefl-detalle { display: flex; flex-direction: column; gap: 10px; }

/* Resultado */
.toefl-resultado { align-items: center; text-align: center; }
.toefl-resultado-num { font-size: 46px; font-weight: 900; color: var(--primario); }
.toefl-puntaje { font-size: 19px; }
.toefl-diag-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 1fr) 44px; align-items: center; gap: 8px; font-size: 15px; }
.toefl-cargando { color: var(--suave); }

/* ============================================================
   en12 · Práctica: el mapa del IELTS, la ficha de cada tarea y el
   modo «Como el examen» (también lo usa la ruta del TOEFL iBT)
   ============================================================ */
.practica-menu { display: flex; flex-direction: column; gap: 12px; }
.practica-intro { margin: 0; color: var(--suave); font-size: 15px; }
.practica-conoce summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; }
.practica-conoce summary::-webkit-details-marker { display: none; }
.practica-conoce summary::before { content: "▸"; color: var(--primario); font-weight: 900; }
.practica-conoce[open] summary::before { content: "▾"; }
.practica-conoce p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; }
.practica-secciones-tira { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.practica-secciones-tira span { border: 2px solid var(--borde); border-radius: 999px; padding: 4px 10px; font-size: 14px; font-weight: 700; }
.practica-seccion { border-left: 8px solid var(--primario); }
.practica-tarea-fila, .practica-tanda-fila {
  display: flex; align-items: center; gap: 10px; text-align: left; min-height: 56px; width: 100%;
  padding: 10px 12px; border-radius: 14px; border: 2px solid var(--borde); background: var(--panel);
  color: var(--tinta); font: inherit;
}
.practica-tarea-fila:active, .practica-tanda-fila:active, .toefl-ibt-fila:active { background: #eef3fb; }
.practica-tarea-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.practica-tarea-texto b { font-size: 16px; overflow-wrap: anywhere; }
.practica-tarea-texto small { color: var(--suave); font-size: 14px; }
.practica-tarea-fila.es-pronto, .toefl-ibt-fila.es-pronto { opacity: .6; border-style: dashed; }
.practica-asi { border-left: 8px solid var(--alegria); }
.practica-asi p { margin: 0; font-size: 16px; line-height: 1.5; }
.practica-asi-datos { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 4px 10px; font-size: 15px; }
.practica-asi-datos > div { display: contents; }
.practica-asi-datos b { font-size: 14px; color: var(--suave); }
.practica-fuente { font-style: italic; }
.practica-estrategia ul, .practica-puntos-correo ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.practica-modo .fila { justify-content: flex-start; }
.practica-modo .caso-chip { font-size: 16px; padding: 0 14px; }
.practica-dif { color: var(--alegria); font-size: 15px; letter-spacing: 1px; flex: 0 0 auto; }

/* la tanda: reloj del examen, revisión al final */
.practica-reloj-ex { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 18px; color: var(--primario); white-space: nowrap; }
.practica-reloj-ex.poco { color: var(--acento); }
.practica-aviso-examen { display: block; background: #eef3fb; border-radius: 10px; padding: 8px 12px; color: var(--primario) !important; }
.practica-otra { color: var(--acento) !important; font-weight: 700; }
.practica-cierre b { font-size: 22px; }
.practica-revision summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.practica-revision-item { display: flex; flex-direction: column; gap: 4px; border-left: 6px solid var(--borde); padding: 6px 0 6px 10px; }
.practica-revision-item.bien { border-left-color: var(--bien); }
.practica-revision-item.mal { border-left-color: var(--acento); }
.practica-revision-item .practica-retro { display: flex; }

/* Build a Sentence: lo que dice la otra persona y la parte que ya está puesta */
.practica-burbuja { background: #eef3fb; border-color: #c9d8f0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.practica-burbuja small { flex: 1 0 100%; }
.practica-burbuja b { flex: 1 1 200px; font-size: 18px; overflow-wrap: anywhere; }
.practica-fija { font-size: 17px; font-weight: 700; color: var(--suave); align-self: center; }
.practica-pista { display: block; background: #fff8e6; border-radius: 10px; padding: 8px 12px; }
.practica-pista.hidden { display: none; }

/* Read in Daily Life: cada texto con cara de lo que es */
.practica-dl { gap: 4px; }
.practica-dl-tipo { align-self: flex-start; border: 2px solid var(--borde); border-radius: 999px; padding: 2px 10px; font-weight: 800; }
.practica-dl .practica-parrafo { margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.practica-dl-chat .practica-parrafo { background: #eef3fb; border-radius: 14px; padding: 6px 12px; max-width: 92%; }
.practica-dl-chat .practica-parrafo:nth-of-type(even) { align-self: flex-end; background: #e8f7ef; }
.practica-dl-menu .practica-parrafo, .practica-dl-horario .practica-parrafo { border-bottom: 1px dashed var(--borde); padding: 2px 0; }
.practica-dl-aviso, .practica-dl-anuncio { border-color: var(--alegria); }

/* ⏱️ Como el examen: la corrección no se ve hasta el final */
.es-examen .practica-retro { display: none; }
.es-examen .bien, .es-examen .mal, .es-examen .es-la-buena, .es-examen .es-la-mala {
  border-color: var(--borde) !important; background: var(--panel) !important; color: var(--tinta) !important;
}

/* La ruta del TOEFL iBT */
.toefl-ibt-seccion { border-left: 8px solid var(--primario); }
.toefl-ibt-seccion-cab { font-size: 18px; }
.toefl-ibt-fila { width: 100%; }
.toefl-ibt-reloj { width: 100%; }
.toefl-nota { display: block; color: var(--suave); font-size: 14px; margin: 4px 2px 12px; }

/* en12+ · la corrección de la gramática sin estorbar: tu respuesta, el porqué y «por qué cada opción» plegado */
.toefl-retro p { margin: 0; font-size: 16px; line-height: 1.45; }
.toefl-tuya { background: #fdeceb; border-radius: 10px; padding: 6px 10px; }
.toefl-tuya b { font-size: 15px; }
.toefl-cada summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--primario); list-style: none; }
.toefl-cada summary::-webkit-details-marker { display: none; }
.toefl-cada summary::before { content: "▸"; }
.toefl-cada[open] summary::before { content: "▾"; }
.toefl-cada-op { font-size: 15px; line-height: 1.4; padding: 4px 0 4px 10px; border-left: 4px solid var(--borde); margin: 4px 0; overflow-wrap: anywhere; }
.toefl-cada-op.es-buena { border-left-color: var(--bien); }
.toefl-cada-op.es-mala { border-left-color: var(--acento); }
.toefl-cada-op b { font-size: 15px; }
.toefl-retro-fila .caso-chip { font-size: 16px; padding: 0 12px; }
.toefl-retro-fila .toefl-reportar { margin-left: auto; }

/* ============================================================
   🔤 Abecedario y vocales (modulos/abc.js)
   ============================================================ */
.abc-cuerpo { display: flex; flex-direction: column; gap: 12px; }
.abc-intro { margin: 0; color: var(--suave); font-size: 15px; line-height: 1.45; }
.abc-menu { display: flex; flex-direction: column; gap: 10px; }
.abc-opcion {
  display: flex; align-items: center; gap: 12px; text-align: left; min-height: 68px; width: 100%;
  padding: 12px 14px; border-radius: 16px; border: 2px solid var(--borde); background: var(--panel); color: var(--tinta); font: inherit;
}
.abc-opcion:active { background: #eef3fb; }
.abc-emoji { font-size: 30px; flex: 0 0 auto; }
.abc-opcion-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.abc-opcion-texto b { font-size: 18px; }
.abc-opcion-texto small { color: var(--suave); font-size: 14px; }
.abc-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* las 26 letras */
.abc-letras { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.abc-letra {
  position: relative; min-height: 72px; border-radius: 14px; border: 2px solid var(--borde); background: var(--panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--tinta); font: inherit;
  transition: transform .15s, background .15s;
}
.abc-letra b { font-size: 22px; white-space: nowrap; }
.abc-letra small { font-size: 13px; color: var(--suave); }
.abc-letra.ojo { border-color: var(--alegria); }
.abc-letra.ojo::after { content: "⚠"; position: absolute; top: 2px; right: 6px; font-size: 11px; color: #b7791f; }
.abc-letra.is-on { border-color: var(--primario); background: #eaf1ff; }
.abc-detalle-cab { display: flex; align-items: center; gap: 14px; }
.abc-detalle-cab > div { display: flex; flex-direction: column; gap: 2px; }
.abc-grande { font-size: 44px; font-weight: 900; color: var(--primario); line-height: 1; }
.abc-fig { font-size: 20px; color: var(--primario); font-weight: 800; }
.abc-ojo { margin: 0; background: #fff6e0; border-radius: 10px; padding: 8px 10px; font-size: 15px; }

/* las vocales: TODO en una pantalla (el dueño: «no tengo que estar bajando»).
   Arriba, siempre a la vista, las vocales con su color y los extras; abajo,
   solo lo que tocaste. Cada palabra con su dibujo y su vocal pintada. */
.abc-vocales { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 1000px; margin: 0 auto; }
.abc-vocales p { margin: 0; font-size: 15px; line-height: 1.4; }
.abc-voc-nav { display: flex; flex-direction: column; gap: 6px; }
.abc-voc-letras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.abc-voc-extras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.abc-voc-tab {
  min-height: 56px; min-width: 0; padding: 4px 2px; border-radius: 14px; border: 2px solid var(--borde);
  background: var(--panel); color: var(--tinta); font: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: transform .12s, background .15s;
}
.abc-voc-tab:active { transform: scale(.95); }
.abc-voc-tab small { font-size: 13px; font-weight: 700; line-height: 1.15; color: var(--suave); text-align: center; }
.abc-voc-emoji { font-size: 21px; line-height: 1.1; }
.abc-voc-tab.is-on { border-color: var(--primario); background: #eaf1ff; box-shadow: 0 3px 0 var(--primario); }
.abc-voc-tab.is-on small { color: var(--primario); }
.abc-voc-tab.letra { border: 3px solid var(--vc); color: var(--vc); }
.abc-voc-tab.letra b { font-size: 27px; font-weight: 900; line-height: 1; }
.abc-voc-tab.letra small { color: inherit; font-size: 12px; }
.abc-voc-tab.letra.is-on { background: var(--vc); border-color: var(--vc); color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.abc-voc-tab.juego { border-color: var(--alegria); background: #fff7e8; }
.abc-voc-panel > .panel { animation: abc-entra .18s ease-out; }
@keyframes abc-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .abc-voc-panel > .panel { animation: none; } }

/* una vocal: la letra grande, y sus dos sonidos lado a lado */
.abc-vocal { border-left: 8px solid var(--vc, var(--primario)); }
.abc-vocal-cab { display: flex; align-items: center; gap: 14px; }
.abc-vocal-letra {
  position: relative; flex: 0 0 auto; min-width: 100px; min-height: 76px; padding: 4px 14px 8px;
  border-radius: 18px; border: 3px solid var(--vc); background: var(--panel); color: var(--vc);
  font: inherit; font-size: 46px; font-weight: 900; line-height: 1; transition: transform .15s, background .15s;
}
.abc-vocal-letra::after { content: "🔊"; position: absolute; right: 5px; top: 4px; font-size: 13px; }
.abc-vocal-letra.suena { background: var(--vc); color: #fff; transform: scale(1.06); }
.abc-vocal-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.abc-vocal-tx b { font-size: 20px; }
.abc-oir-todo { font-size: 16px; padding: 0 14px; min-height: 46px; }
.abc-sonidos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.abc-sonido { border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.abc-sonido.larga { background: #eef8f2; }
.abc-sonido.corta { background: #fff6e9; }
.abc-sonido-tit { flex: 1 0 auto; display: flex; flex-direction: column; gap: 1px; }
.abc-sonido-tit b { font-size: 16px; }
.abc-sonido-tit small { font-size: 13px; line-height: 1.3; }
.abc-sonido-pals { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }

/* las fichas de palabra */
.abc-pal {
  min-height: 44px; border-radius: 10px; border: 2px solid var(--borde); background: var(--panel); color: var(--tinta);
  font: inherit; text-align: left; padding: 4px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.abc-pal b { font-size: 17px; }
.abc-pal small { color: var(--primario); font-weight: 700; font-size: 14px; }
.abc-pal.suena { border-color: var(--alegria); background: #fff4dc; }
.abc-dib { justify-content: flex-start; gap: 8px; min-height: 56px; min-width: 0; padding: 6px 8px; transition: transform .15s, background .15s; }
.abc-dib:active { transform: scale(.97); }
.abc-dib.suena { transform: scale(1.04); }
.abc-dib-emoji { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.abc-dib-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; line-height: 1.15; }
.abc-dib-tx b { font-size: 19px; }
.abc-dib.alto { flex-direction: column; justify-content: center; gap: 2px; min-height: 96px; padding: 8px 4px; }
.abc-dib.alto .abc-dib-tx { align-items: center; text-align: center; }
.abc-dib.alto .abc-dib-emoji { font-size: 32px; }
.abc-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-width: 640px; }
.abc-marca { color: var(--vc, var(--primario)); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 2px; }
.abc-e-magica { color: #8a5a00; background: #ffe7a0; border-radius: 6px; padding: 0 2px; margin-left: 1px; }

/* la Y, la e mágica, la schwa y las parejas */
.abc-y-fila { display: flex; align-items: center; gap: 10px; }
.abc-y-fila .abc-dib { flex: 0 0 136px; }
.abc-y-fila small { line-height: 1.35; }
.abc-magica { border-left: 8px solid var(--alegria); }
.abc-magica-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
.abc-magica-fila { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.abc-magica-pal { flex: 1 1 auto; gap: 6px; padding: 6px; }
.abc-magica-pal .abc-dib-emoji { font-size: 23px; }
.abc-magica-pal .abc-marca { color: #d9480f; }
.abc-magica-pal.con-e .abc-marca { color: var(--bien); }
.abc-e { font-size: 18px; min-width: 48px; flex: 0 0 auto; }
.caso-chip.abc-e.is-on { background: var(--alegria); border-color: var(--alegria); color: var(--tinta); }
.abc-schwa { border-left: 8px solid #868e96; }
.abc-silabas { display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: center; }
.abc-silaba.fuerte { color: var(--primario); font-weight: 900; font-size: 17px; }
.abc-silaba.debil { color: var(--suave); font-weight: 600; font-size: 13px; }
.abc-silaba-punto { color: var(--suave); padding: 0 1px; }
.abc-parejas { border-left: 8px solid var(--primario); }
.abc-parejas-rejilla { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.abc-pareja-btn {
  min-height: 52px; min-width: 0; padding: 2px; border-radius: 12px; border: 2px solid var(--borde); background: var(--panel);
  color: var(--tinta); font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.abc-pareja-btn b { font-size: 17px; white-space: nowrap; }
.abc-pareja-btn small { font-size: 13px; color: var(--primario); font-weight: 700; }
.abc-pareja-btn.is-on { border-color: var(--primario); background: #eaf1ff; box-shadow: 0 3px 0 var(--primario); }
.abc-pareja-ver { display: flex; flex-direction: column; gap: 8px; }
.abc-pareja-g { font-size: 18px; }

/* celular chico (667 de alto o menos): todo un poco más apretado para que quepa sin bajar */
@media (max-height: 700px) {
  .abc-vocales { gap: 8px; }
  .abc-vocales .abc-intro { font-size: 14px; }
  .abc-voc-tab { min-height: 50px; }
  .abc-vocal-letra { font-size: 40px; min-width: 88px; min-height: 64px; }
  .abc-dib { min-height: 50px; }
  .abc-sonido-tit small { font-size: 12px; }
  .abc-voc-panel > .panel { padding: 10px 12px; }
  .abc-sonido { padding: 6px; gap: 4px; }
  .abc-sonido-pals { gap: 4px; }
  .abc-oir-todo { min-height: 44px; }
}
/* iPad y pantallas anchas: las vocales y los extras en una sola fila */
@media (min-width: 900px) {
  .abc-voc-nav { flex-direction: row; }
  .abc-voc-letras { flex: 6 1 0; }
  .abc-voc-extras { flex: 4 1 0; }
  .abc-voc-tab { min-height: 66px; }
  .abc-voc-tab.letra b { font-size: 32px; }
  .abc-vocal-letra { font-size: 58px; min-width: 128px; min-height: 92px; }
  .abc-parejas-rejilla { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
/* …y si además sobra alto, todo más grande: se aprende con los ojos (y un niño atina mejor) */
@media (min-width: 900px) and (min-height: 700px) {
  .abc-vocales .abc-intro { font-size: 17px; }
  .abc-voc-panel > .panel > b { font-size: 23px; }
  .abc-voc-tab { min-height: 78px; }
  .abc-voc-tab.letra b { font-size: 38px; }
  .abc-voc-tab small { font-size: 14px; }
  .abc-voc-emoji { font-size: 26px; }
  .abc-vocal-tx b { font-size: 26px; }
  .abc-sonido { padding: 12px; gap: 10px; }
  .abc-sonido-tit b { font-size: 20px; }
  .abc-sonido-tit small { font-size: 15px; }
  .abc-sonido-pals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .abc-sonido-pals .abc-dib { flex-direction: column; justify-content: center; min-height: 128px; gap: 4px; padding: 8px 4px; }
  .abc-sonido-pals .abc-dib .abc-dib-tx { align-items: center; text-align: center; }
  .abc-sonido-pals .abc-dib .abc-dib-emoji { font-size: 44px; }
  .abc-dib { min-height: 76px; gap: 12px; padding: 8px 12px; }
  .abc-dib-emoji, .abc-magica-pal .abc-dib-emoji { font-size: 36px; }
  .abc-dib-tx b { font-size: 26px; }
  .abc-dib-tx small { font-size: 17px; }
  .abc-dib.alto { min-height: 128px; }
  .abc-dib.alto .abc-dib-emoji { font-size: 44px; }
  .abc-tarjetas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-width: 760px; gap: 12px; }
  .abc-vocales p { font-size: 17px; }
  .abc-magica-rejilla { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .abc-e { min-width: 64px; font-size: 22px; }
  .abc-pareja-btn { min-height: 64px; }
  .abc-pareja-btn b { font-size: 21px; }
  .abc-pareja-g { font-size: 22px; }
  .abc-silaba.fuerte { font-size: 21px; }
  .abc-silaba.debil { font-size: 16px; }
  .abc-y-fila .abc-dib { flex-basis: 200px; }
  .abc-y-fila small { font-size: 16px; }
}

/* juegos */
.abc-juego-ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.abc-juego-op {
  min-height: 64px; border-radius: 14px; border: 2px solid var(--borde); background: var(--panel); color: var(--tinta);
  font: inherit; font-size: 28px; font-weight: 900;
}
.abc-juego-op.es-la-buena { border-color: var(--bien); background: #e8f7ef; }
.abc-juego-op.es-la-mala { border-color: var(--acento); background: #fdeceb; }
.abc-cortalarga .abc-cl { flex: 1 1 140px; font-size: 18px; }

/* deletrear */
.abc-buscar { display: flex; gap: 8px; align-items: center; }
.abc-entrada {
  flex: 1 1 auto; min-width: 0; width: 100%; min-height: 50px; font-size: 20px; padding: 0 12px;
  border-radius: 12px; border: 2px solid var(--borde); background: var(--panel); color: var(--tinta);
}
.abc-fichas { display: flex; flex-wrap: wrap; gap: 6px; }
.abc-ficha {
  min-width: 48px; min-height: 64px; padding: 4px 8px; border-radius: 12px; border: 2px solid var(--borde); background: var(--panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .15s, background .15s;
}
.abc-ficha b { font-size: 24px; line-height: 1.1; }
.abc-ficha small { font-size: 13px; color: var(--suave); white-space: nowrap; }
.abc-ficha.pausa { min-width: 18px; border-style: dashed; }
.abc-ficha.suena, .abc-letra.suena { background: var(--alegria); border-color: var(--alegria); transform: scale(1.08); }
.abc-ficha.suena small { color: var(--tinta); }
.abc-dobles { font-size: 15px; align-self: flex-start; padding: 0 12px; }
.abc-linea { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 12px; max-width: 92%; }
.abc-linea b { font-size: 17px; }
.abc-linea small { color: var(--suave); }
.abc-voz-a { background: #eef3fb; align-self: flex-start; }
.abc-voz-b { background: #e8f7ef; align-self: flex-end; }

/* buscador */
.abc-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; }
.abc-sugerencias .caso-chip { font-size: 16px; padding: 0 12px; }
.abc-resultado h3 { font-size: 32px; margin: 0; overflow-wrap: anywhere; }
.abc-fig-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.abc-aprox { font-size: 13px; color: var(--suave); border: 1px solid var(--borde); border-radius: 999px; padding: 1px 8px; }
.abc-sin { color: var(--suave); }
.abc-sig { margin: 0; font-size: 17px; }

/* ============================================================
   en14 · TOEFL ITP (escucha con voces grabadas, lectura con líneas numeradas),
   IELTS Part 3 con las preguntas a la vista, y los resúmenes por sección
   ============================================================ */
.itp-quien b { font-size: 18px; }
.itp-pasaje { gap: 0; }
.itp-line-cab { color: var(--suave); font-size: 12px; font-weight: 800; letter-spacing: .5px; }
.itp-linea { display: grid; grid-template-columns: 2.4em 1fr; gap: 8px; align-items: baseline; padding: 1px 4px; border-radius: 6px; }
.itp-num { color: var(--suave); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.itp-txt { font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.itp-marcada { background: #fff3c4; }
.itp-voz-h .practica-quien, .itp-voz-m .practica-quien, .itp-voz-n .practica-quien { font-size: 18px; }
.itp-voz-n { font-style: italic; color: var(--suave); }
.practica-ala-vista { display: flex; flex-direction: column; gap: 6px; }
.practica-sec-res { display: block; font-size: 17px; }
.practica-recomienda { margin: 6px 0 0; background: #fff6e0; border-radius: 10px; padding: 8px 10px; font-weight: 700; }
.toefl-completo { border-color: var(--primario); }
.toefl-completo-sec { display: flex; flex-direction: column; gap: 2px; }
.toefl-completo-sec b { font-size: 17px; }
.toefl-ibt-seccion.es-aqui { border-color: var(--alegria); box-shadow: 0 0 0 3px rgba(240, 169, 44, .25); }

/* En el celular las líneas del ITP no caben: el texto fluye como párrafo y cada 5 líneas
   queda su número como marquita, donde empieza esa línea (en iPad y compu va línea por línea) */
@media (max-width: 599px) {
  .itp-pasaje { display: block; }
  .itp-line-cab { display: block; margin-bottom: 4px; }
  .itp-linea { display: inline; padding: 0; border-radius: 4px; }
  .itp-num:empty { display: none; }
  .itp-num { display: inline-block; vertical-align: super; font-size: 11px; font-weight: 800; color: var(--primario); margin: 0 3px 0 2px; }
  .itp-txt { line-height: 1.75; }
}