@charset "utf-8";
/* ============================================================
   modulos/sesion.css — la sesión de estudio

   Se carga después de base.css, panel.css y app.css. Es la pantalla donde
   más tiempo se pasa: la unidad presentada, las preguntas, la banda del
   resultado, el resumen del final y el aviso de un error de contenido.

   CASI TODO ES DE LA PLANTILLA. La unidad es `.unidad` (base.css §12), las
   respuestas son `.opcion` con `.es-correcta` / `.es-fallo` (§24), los campos
   son `.campo`, la barra es `.progreso`, las cifras del final `.cifras` y los
   botones los de siempre. Esta hoja solo coloca esas piezas en una columna de
   estudio y dibuja las pocas que no existen en el sitio: el hueco de la
   frase, las piezas de ordenar, el micrófono, la banda y la semana de racha.

   EL COLOR DE LA SESIÓN ES FIJO. `renderStep` pone `.s-marca` en la
   columna: la sesión se pinta dentro de la vista de quien la abre, y en
   Aprender —jade— el filo de la opción al pasar el ratón era del mismo verde
   que el acierto, así que se leía «esta es la buena» antes de elegir. En
   esta pantalla el jade y el coral significan «bien» y «casi», y nada más
   puede usarlos.

   Ninguna mecánica de castigo: fallar pinta la respuesta buena y da tres XP
   por intentarlo. No hay vidas, ni cuenta atrás, ni nada que se pierda.
   ============================================================ */

/* ============================================================
   1. La columna
   ============================================================ */
/* 42rem: la opción más larga —una frase de ocho palabras— cabe en una línea,
   y la vista no tiene que saltar de una punta a otra de un monitor ancho
   para comparar dos respuestas. */
.ses {
  width: 100%; max-width: 42rem; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4);
}
.ses-zona { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }

/* ---------- la cabecera: salir, cuánto falta, por dónde va ---------- */
.ses-cabeza { display: flex; align-items: center; gap: var(--e-3); }
.ses-progreso { flex: 1; min-width: 0; height: .875rem; }
/* La barra se pinta donde estaba y avanza en el fotograma siguiente
   (`renderStep`): sin transición aparecería ya puesta y nunca se vería
   avanzar. */
.ses-progreso > i { transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.ses-cuenta {
  flex: none; min-width: 3.25rem; text-align: right;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ses-cuenta b { color: var(--tinta); font-weight: 700; }

/* ---------- qué se está haciendo, y la velocidad ---------- */
.ses-mandos {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--e-2) var(--e-3);
}
.ses-tipo svg, .ses-tipo i[data-ico] { width: 1em; height: 1em; }
/* En 320 px «Producción — dilo en voz alta» no cabe en una línea con el mando
   al lado, y `.chip` lleva `nowrap`: se salía por la derecha. */
@media (max-width: 26rem) { .ses-tipo { white-space: normal; } }

/* El mando de velocidad de `velocidad.js` se dibuja en app.css, uno solo
   para audios, vídeos y lecciones. Aquí solo se empuja a la derecha. */
.ses-mandos .tk-vel { margin-left: auto; }

/* ============================================================
   2. La unidad presentada
   ============================================================ */
/* La ficha `.unidad` tal cual, con la palabra más grande: en el sitio es una
   muestra entre otras cosas, aquí es lo único que hay que mirar. */
.ses-unidad .unidad-en { font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem); overflow-wrap: anywhere; }
.ses-unidad-cabeza { min-width: 0; }
.ses-unidad .unidad-es { font-size: var(--t-lg); }
/* La sílaba fuerte de la pronunciación figurada («je-LOU»). Ya va en
   mayúsculas; el peso la separa sin cambiar de color, que en esta línea gris
   un color vivo se leería como un enlace. */
.ses .st { color: var(--tinta-2); font-weight: 700; }

/* Los dos botones de audio con su nombre. */
.ses-audio { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.ses-audio .btn { min-height: 2.75rem; padding: .5rem 1rem; font-size: var(--t-sm); }
.ses-pregunta .ses-audio { margin-top: var(--e-2); }

/* ---------- el botón principal de cada paso ---------- */
/* A la derecha en el escritorio, donde se lee «siguiente»; a lo ancho en el
   móvil, donde cae el pulgar. */
.ses-pie { display: flex; justify-content: flex-end; }
.ses-pie .btn { min-width: 12rem; }
@media (max-width: 30rem) { .ses-pie .btn { width: 100%; min-width: 0; } }

/* ============================================================
   3. Las preguntas
   ============================================================ */
.ses-pregunta { display: grid; justify-items: start; gap: var(--e-2); min-width: 0; }
.ses-pide { font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2); }
/* `.prueba-voz` es la palabra grande de la prueba de nivel del sitio. */
.ses-voz { margin-top: 0; overflow-wrap: anywhere; }
.ses-pregunta .unidad-pron { margin-top: 0; }
.ses-traduccion { color: var(--tinta-2); font-size: var(--t-base); }

/* ---------- las respuestas ---------- */
.ses-opciones { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
.ses-opciones.cortas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.ses-opciones .opcion { width: 100%; overflow-wrap: anywhere; }

/* ---------- escuchar ---------- */
.ses-oir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-top: var(--e-1); }
/* El altavoz grande es un `.btn-principal` redondo: el mismo relieve que
   cualquier botón de la casa, y la misma forma y medida que el altavoz de
   Mirar y el de la ronda de Pronunciar. Cuadrado, era el único de los
   instrumentos de sonido que no se reconocía como tal. */
.ses-altavoz { width: 4.5rem; height: 4.5rem; min-height: 4.5rem; padding: 0; border-radius: var(--r-full); }
.ses-altavoz svg, .ses-altavoz i[data-ico] { width: 2rem; height: 2rem; }
.ses-oir .btn-borde { min-height: 2.75rem; padding: .5rem 1rem; font-size: var(--t-sm); }

/* ---------- el hueco de la frase ---------- */
.ses-frase {
  font-family: var(--display); font-size: var(--t-xl); font-weight: 500;
  line-height: 1.5; letter-spacing: -.01em; overflow-wrap: anywhere;
}
.ses-hueco {
  display: inline-block; min-width: 4.5rem; height: 1.15em;
  margin-inline: .2em; vertical-align: -.2em;
  background: var(--seccion-lavado);
  border-bottom: 3px solid var(--seccion-tinta);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
/* Al contestar, la palabra buena entra en el hueco con el color del acierto:
   lo que se queda en la memoria es la frase entera, no la opción suelta. */
.ses-hueco.lleno {
  min-width: 0; height: auto; padding-inline: .25em; vertical-align: baseline;
  color: var(--acierto-tinta); font-weight: 600;
  background: var(--acierto-lavado); border-bottom-color: var(--acierto);
}

/* ---------- ordenar la frase ---------- */
.ses-orden {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--e-2);
  min-height: 4.5rem; padding: var(--e-3);
  background: var(--papel); border: 2px dashed var(--linea); border-radius: var(--r-lg);
  transition: border-color .15s ease, background-color .15s ease;
}
/* El resultado se dice con el filo entero y sólido, no solo con el color:
   de discontinuo a continuo se ve igual sin distinguir el verde del rojo. */
.ses-orden.es-correcta { border-style: solid; border-color: var(--acierto); background: var(--acierto-lavado); }
.ses-orden.es-fallo { border-style: solid; border-color: var(--racha); background: var(--racha-lavado); }
.ses-piezas { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.ses-pieza {
  min-height: 2.75rem; padding: .375rem .875rem; max-width: 100%;
  font: inherit; font-size: var(--t-md); font-weight: 600; overflow-wrap: anywhere;
  background: var(--papel); color: var(--tinta);
  border: 2px solid var(--linea); border-radius: var(--r-md);
  box-shadow: 0 3px 0 var(--linea);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, transform .08s ease, box-shadow .08s ease;
}
.ses-pieza:hover:not(:disabled) { border-color: var(--seccion); background: var(--seccion-lavado); }
.ses-pieza:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.ses-pieza:disabled { cursor: default; }
/* La pieza usada deja su hueco: si desapareciera, las de al lado saltarían
   de sitio y habría que volver a buscar la siguiente palabra. */
.ses-pieza.usada {
  color: transparent; background: var(--papel-2);
  border-style: dashed; box-shadow: none;
}
.ses-pieza.puesta { border-color: color-mix(in srgb, var(--seccion) 50%, var(--linea)); }
.ses-orden.es-correcta .ses-pieza, .ses-orden.es-fallo .ses-pieza { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .ses-pieza:active:not(:disabled) { transform: none; } }

/* ---------- escribir ---------- */
.ses-campo { margin-bottom: 0; }
.ses-campo input { font-size: var(--t-lg); padding: .875rem var(--e-4); min-height: 3.25rem; }
/* Corregido, el campo dice cómo ha ido con su filo. Deshabilitado, el
   navegador lo pintaba en gris claro y no se leía lo que se había escrito
   justo cuando hay que compararlo con la solución. */
.ses-campo input:disabled { opacity: 1; color: var(--tinta); -webkit-text-fill-color: var(--tinta); }
.ses-campo input.es-correcta { border-color: var(--acierto); background: var(--acierto-lavado); }
.ses-campo input.es-fallo { border-color: var(--racha); background: var(--racha-lavado); }

/* ---------- hablar ---------- */
.ses-hablar { display: grid; justify-items: center; gap: var(--e-3); padding-block: var(--e-2); }
/* El micrófono va en coral, el color de Pronunciar en toda la plataforma,
   con el relieve sólido de los botones. */
.ses-mic {
  position: relative;
  width: 5.5rem; height: 5.5rem; border-radius: var(--r-full);
  display: grid; place-items: center; cursor: pointer;
  background: var(--racha); color: var(--sobre-racha);
  border: 0; box-shadow: 0 4px 0 var(--relieve-racha);
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.ses-mic svg, .ses-mic i[data-ico] { width: 2.25rem; height: 2.25rem; }
.ses-mic:hover { background: color-mix(in oklab, var(--racha) 92%, #000); }
.ses-mic:active { transform: translateY(4px); box-shadow: none; }
/* Grabando, un anillo que se abre. Grabar sin señal a la vista es un fallo
   funcional, no un adorno: con menos movimiento el anillo se queda quieto y
   visible en vez de desaparecer. */
.ses-mic.rec::after {
  content: ""; position: absolute; inset: -.5rem; border-radius: inherit;
  border: 3px solid var(--racha); pointer-events: none;
  animation: ses-grabando 1.2s ease-out infinite;
}
@keyframes ses-grabando { from { transform: scale(1); opacity: .75; } to { transform: scale(1.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ses-mic.rec::after { animation: none !important; opacity: .75; transform: none; }
  .ses-mic:active { transform: none; }
}
.ses-oido { min-height: 3.5rem; text-align: center; color: var(--tinta-2); font-size: var(--t-sm); max-width: 100%; }
/* «Se oyó», con la medida de Pronunciar: lo pinta el mismo corrector. */
.ses-oyo { margin-top: var(--e-2); font-size: var(--t-sm); color: var(--tinta-3); }
.ses-oyo q { color: var(--tinta-2); font-style: italic; }

/* La pronunciación coloreada sílaba a sílaba. La usan también las frases y
   la conversación de Pronunciar, así que no va dentro de `.ses`. Cada estado
   con su tinta sobre su lavado: el color no va solo, lleva fondo, y el
   consejo de debajo nombra la sílaba que falla. */
.pron-words {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--e-2) var(--e-4); margin-top: var(--e-2);
}
.pw-word { display: inline-flex; align-items: center; gap: .125rem; }
.pw {
  padding: .1875rem .5rem; border-radius: var(--r-sm);
  font-size: var(--t-md); font-weight: 700; letter-spacing: .03em; line-height: 1.4;
}
.pw.g { color: var(--acierto-tinta); background: var(--acierto-lavado); }
.pw.m { color: var(--xp-tinta); background: var(--xp-lavado); }
.pw.b { color: var(--racha-tinta); background: var(--racha-lavado); }
.pw-h { color: var(--tinta-3); font-weight: 700; }
.pw-hint { margin-top: var(--e-2); font-size: var(--t-sm); color: var(--tinta-2); text-align: center; }
.pw-hint b { color: var(--racha-tinta); }

/* ============================================================
   4. La banda del resultado
   ============================================================ */
/* Pegada abajo con `sticky`, dentro de la zona del ejercicio: si el
   ejercicio cabe en pantalla, se queda justo debajo; si no cabe, se queda a
   la vista sin tener que desplazar la página hasta ella. Plana: el lavado de
   su color, su filo y la tinta encima. Sin degradado ni rebote; entra con un
   fundido corto porque aparecer de golpe bajo el dedo sobresalta. */
.ses-banda {
  --banda: var(--acierto); --banda-tinta: var(--acierto-tinta);
  --banda-lavado: var(--acierto-lavado); --banda-sobre: var(--sobre-acierto);
  position: sticky; bottom: var(--e-3); z-index: 5;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--e-3) var(--e-4);
  padding: var(--e-4);
  background: var(--banda-lavado); color: var(--tinta);
  border: 2px solid color-mix(in srgb, var(--banda) 55%, transparent);
  border-radius: var(--r-lg);
  animation: ses-banda-entra .18s ease-out both;
}
.ses-banda.es-fallo {
  --banda: var(--racha); --banda-tinta: var(--racha-tinta);
  --banda-lavado: var(--racha-lavado); --banda-sobre: var(--sobre-racha);
}
@keyframes ses-banda-entra { from { opacity: 0; transform: translateY(.375rem); } to { opacity: 1; transform: none; } }

.ses-banda-alto {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--e-3); align-items: start; min-width: 0;
}
/* El icono en su disco del color vivo: la marca o el aspa se leen antes que
   el titular, y no solo por el color. */
.ses-banda-ico {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-full);
  display: grid; place-items: center; flex: none;
  background: var(--banda); color: var(--banda-sobre);
}
.ses-banda-ico svg, .ses-banda-ico i[data-ico] { width: 1.375rem; height: 1.375rem; }
.ses-banda-txt { min-width: 0; display: grid; gap: .125rem; }
.ses-banda-titulo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem var(--e-2);
  font-family: var(--display); font-size: var(--t-lg); font-weight: 600;
  line-height: 1.25; color: var(--banda-tinta);
}
/* El XP de este paso, en su chip y al lado del titular: se lee sin buscarlo
   y no salta por la pantalla. */
.ses-banda-xp {
  font-family: var(--texto); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
  padding: .125rem .5rem; border-radius: var(--r-full);
  background: var(--papel); color: var(--xp-tinta);
}
.ses-banda-sol { font-size: var(--t-base); overflow-wrap: anywhere; }
.ses-banda-sol b { font-weight: 700; }
.ses-banda-sol span { color: var(--tinta-2); margin-left: .5em; }
.ses-banda .unidad-pron { margin-top: 0; }
.ses-banda-lento { width: 2.75rem; min-height: 2.75rem; padding: 0; }
.ses-banda-lento svg, .ses-banda-lento i[data-ico] { width: 1.25rem; height: 1.25rem; }
.ses-continuar { min-width: 11rem; }

/* «Muy fácil», «Muy difícil» y «Reportar»: ajustes, no acciones. Van en
   texto y en pequeño para que no compitan con «Continuar», pero con los 44 px
   de alto que pide cualquier cosa pulsable. */
.ses-banda-mas {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 var(--e-2);
  margin-bottom: calc(-1 * var(--e-2));
  padding-top: var(--e-1);
  border-top: 1px solid color-mix(in srgb, var(--banda) 25%, transparent);
}
.ses-ajuste {
  min-height: 2.75rem; padding: 0 var(--e-2);
  display: inline-flex; align-items: center; gap: .375rem;
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--tinta-2); cursor: pointer;
}
.ses-ajuste svg, .ses-ajuste i[data-ico] { width: 1rem; height: 1rem; }
.ses-ajuste:hover { color: var(--tinta); background: color-mix(in srgb, var(--papel) 70%, transparent); }

/* En el móvil la banda NO se pega abajo. Medida a 390 px ocupa un tercio de
   la pantalla, y pegada tapaba justo las dos últimas opciones, que es donde
   cae la buena la mitad de las veces. Va en su sitio, debajo del ejercicio,
   y `showBand` desplaza la página hasta ella. Y se aprieta: el titular baja
   un escalón y «Continuar» vuelve a su tamaño normal. */
@media (max-width: 40rem) {
  .ses-banda {
    position: static; grid-template-columns: minmax(0, 1fr); padding: var(--e-3); gap: var(--e-3);
    /* Lo que tapa la barra de abajo: al desplazar hasta la banda, se deja
       ese hueco libre debajo. */
    scroll-margin-bottom: calc(3.75rem + 1px + env(safe-area-inset-bottom) + var(--e-3));
  }
  .ses-banda-titulo { font-size: var(--t-md); }
  .ses-banda-ico { width: 2.25rem; height: 2.25rem; }
  .ses-continuar { width: 100%; min-width: 0; min-height: 3rem; padding-block: .75rem; font-size: .9375rem; }
  .ses-banda-mas { justify-content: center; gap: 0; }
}
/* En 320 px los tres ajustes no cabían en una línea y el último bajaba solo a
   otra: un «Reportar» huérfano que alargaba la banda 44 px. */
@media (max-width: 26rem) {
  .ses-ajuste { padding-inline: .375rem; font-size: var(--t-xs); gap: .25rem; }
  .ses-ajuste svg, .ses-ajuste i[data-ico] { width: .875rem; height: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ses-banda { animation: none; }
  .ses-progreso > i { transition: none; }
}

/* ============================================================
   5. Reportar un error de contenido
   ============================================================ */
/* Es la ventana `.modal .box` de app.css; los motivos son `.opcion`, porque
   se elige uno igual que una respuesta. */
/* Los ganchos con los que el foco encuentra la ventana y «Entendido». */
.ses-reporte { text-align: left; }
.ses-seguir { scroll-margin-bottom: var(--e-5); }
.ses-reporte-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); }
.ses-reporte-cab h3 { font-size: var(--t-xl); }
.ses-reporte-palabra { margin-top: var(--e-1); font-family: var(--display); font-size: var(--t-lg); font-weight: 600; color: var(--seccion-tinta); overflow-wrap: anywhere; }
.ses-reporte-txt { margin-top: var(--e-3); color: var(--tinta-2); font-size: var(--t-sm); }
.ses-reporte-motivos { display: grid; gap: var(--e-2); margin-top: var(--e-4); }
.ses-reporte-motivos .opcion { width: 100%; }

/* ============================================================
   6. El final de la sesión
   ============================================================ */
.ses-fin { gap: var(--e-4); }
.ses-fin-tarjeta { display: grid; justify-items: center; gap: var(--e-3); text-align: center; }
.ses-fin-tarjeta .folio { margin-bottom: 0; }
.ses-fin-titulo { font-size: var(--t-2xl); overflow-wrap: anywhere; }
.tk-fin-anillo { display: grid; place-items: center; margin-block: var(--e-1); }
/* Tres cifras en fila separadas por un filete, como la franja de cifras del
   sitio. Cada una con el color de lo que cuenta, por su clase de tono de
   app.css (`.tono-xp`, `.tono-acierto`, `.tono-mirar`). */
.ses-fin-cifras {
  width: 100%; margin-top: var(--e-2); padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
  gap: var(--e-4);
}
.ses-fin-cifras .cifra { min-width: 0; }

/* ---------- la racha ---------- */
.ses-racha { display: grid; gap: var(--e-4); }
.ses-racha-alto { display: flex; align-items: center; gap: var(--e-4); }
.ses-racha-num {
  flex: none;
  font-family: var(--display); font-size: clamp(2.75rem, 2.2rem + 2.4vw, 3.75rem);
  font-weight: 600; line-height: 1; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; color: var(--racha-tinta);
}
.ses-racha-tit { font-family: var(--display); font-size: var(--t-lg); font-weight: 600; line-height: 1.2; }
.ses-racha-txt { margin-top: var(--e-1); color: var(--tinta-2); font-size: var(--t-sm); }

/* La semana: siete columnas que encogen hasta 320 px sin salirse. */
.ses-semana {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e-2);
}
.ses-dia { display: grid; justify-items: center; gap: var(--e-1); min-width: 0; }
.ses-dia small { font-size: var(--t-xs); font-weight: 600; color: var(--tinta-3); }
.ses-dia > span {
  width: 100%; max-width: 2.5rem; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--papel-2); color: var(--tinta-3);
}
.ses-dia > span svg, .ses-dia > span i[data-ico] { width: 1.125rem; height: 1.125rem; }
.ses-dia.hecho > span { background: var(--racha-lavado); color: var(--racha-tinta); }
/* Hoy se marca con un filo, no con otro color: así se distingue igual un hoy
   estudiado de un hoy por estudiar. */
.ses-dia.hoy > span { outline: 2px solid var(--racha-tinta); outline-offset: 2px; }
.ses-dia.hoy small { color: var(--tinta); font-weight: 700; }

/* ---------- la meta ---------- */
.ses-meta { display: grid; gap: var(--e-2); padding-top: var(--e-4); border-top: 1px solid var(--linea-suave); }
.ses-meta-tit { font-weight: 600; font-size: var(--t-sm); }
.ses-meta-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.5rem), 1fr)); gap: var(--e-2); }
/* La meta se elige con los chips de la aplicación —los de Jugar, Escuchar,
   Mirar y Vídeos—: píldora de filo y, elegida, rellena del coral de la
   racha. Eran cuadrados con lavado, la única elección de la plataforma con
   esa forma. */
.ses-meta-opciones button {
  min-height: 2.75rem; padding: 0 var(--e-2);
  font: inherit; font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  background: var(--papel); color: var(--tinta);
  border: 2px solid var(--linea); border-radius: var(--r-full);
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ses-meta-opciones button:hover { border-color: var(--racha); background: var(--racha-lavado); }
.ses-meta-opciones button[aria-pressed="true"] {
  border-color: var(--racha); background: var(--racha); color: var(--sobre-racha);
}

.ses-fin-acciones { justify-content: center; }

/* 320 px. Las tres cifras bajaban a dos filas con «Palabras» sola debajo, y
   los cuatro botones de la meta a tres y uno. Tres cifras caben apretando el
   hueco; la meta va de dos en dos, que es una rejilla y no un descuadre. */
@media (max-width: 26rem) {
  .ses-fin-cifras { gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.5rem), 1fr)); }
  .ses-fin-cifras .cifra dt { letter-spacing: .06em; }
}
@media (max-width: 23rem) {
  .ses-meta-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   7. Sin nada que estudiar
   ============================================================ */
.ses-vacio p { max-width: 30em; }
.ses-vacio-ico {
  width: 3rem; height: 3rem; border-radius: var(--r-full);
  display: grid; place-items: center; margin-bottom: var(--e-1);
  background: var(--seccion-lavado); color: var(--seccion-tinta);
}
.ses-vacio-ico svg, .ses-vacio-ico i[data-ico] { width: 1.5rem; height: 1.5rem; }
.ses-vacio .acciones { justify-content: center; margin-top: var(--e-2); }

/* ============================================================
   8. El panel de memoria de FSRS (`fsrs.js`)
   ============================================================ */
/* Estas reglas vivían en un <style> que `fsrs.js` inyectaba al cargar, con
   `--ink`, `--muted` y `--bg`, tres fichas de la paleta vieja que ya no
   existen: una variable sin definir invalida la declaración entera y las
   etiquetas salían sin color. Ahora son de la hoja y de la plantilla. */
.ip-fsrs-barras { display: flex; align-items: flex-end; gap: var(--e-1); height: 7.5rem; margin-top: var(--e-3); }
.ip-fsrs-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.ip-fsrs-col i { display: block; width: 100%; min-height: 4px; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--marca-tinta); }
.ip-fsrs-col.hoy i { background: var(--xp-tinta); }
.ip-fsrs-col b { margin-bottom: var(--e-1); font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.ip-fsrs-col small { margin-top: var(--e-1); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; color: var(--tinta-3); }
.ip-fsrs-nota { color: var(--tinta-2); font-size: var(--t-sm); }
.ip-fsrs-leyenda { margin-top: var(--e-3); }
.ip-fsrs-tarjeta h3 { font-size: var(--t-lg); margin-bottom: var(--e-2); }
.ip-fsrs-nota-pie { margin-top: var(--e-3); color: var(--tinta-3); font-size: var(--t-xs); text-align: center; }
.ip-fsrs-ret { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-3); }
.ip-fsrs-ret b {
  font-family: var(--display); font-size: var(--t-2xl); font-weight: 600; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--tono, var(--tinta));
}
.ip-fsrs-ret.bien { --tono: var(--acierto-tinta); }
.ip-fsrs-ret.medio { --tono: var(--xp-tinta); }
.ip-fsrs-ret.flojo { --tono: var(--racha-tinta); }
.ip-fsrs-ret p { flex: 1 1 14rem; }
.ip-fsrs-ret + .progreso { margin-top: var(--e-3); }
.ip-fsrs-tarjeta + .ip-fsrs-tarjeta, .ip-fsrs-tarjeta + .app-titulo { margin-top: var(--e-4); }
.ip-fsrs-tarjeta > * + .cifras { margin-top: var(--e-4); }
.ip-fsrs-tarjeta .cifras { gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); }
.ip-fsrs-tarjeta .btn { margin-top: var(--e-3); }
.ip-fsrs-cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr)); gap: var(--e-2); }
.ip-fsrs-cal .btn { flex-direction: column; gap: .125rem; padding: .625rem .25rem; line-height: 1.15; }
.ip-fsrs-cal .btn small { font-size: var(--t-xs); font-weight: 600; }