@charset "utf-8";
/* ============================================================
   modulos/aprender.css

   Se carga después de base.css, panel.css y app.css. Solo lo que es de
   esta área: todo lo común (tarjetas, botones, campos, cifras, tablas,
   avisos, cabecera de pantalla) ya viene de ahí.

   QUÉ HAY AQUÍ. La pantalla Aprender (el camino de lecciones y la columna
   de tu día), la hoja previa a una lección y la guía de gramática. El mando
   de velocidad de `velocidad.js` ya no está aquí: es común, en app.css.

   EL CAMINO ES EL SENDERO DE LA PLANTILLA (`.sendero/.paso/.paso-nodo`,
   base.css §14), no uno propio. Antes era un zigzag de círculos de 70 px con
   relieve, degradado y un cartel que latía: parecía un juego y no dejaba ver
   dónde empezaba un nivel y acababa otro. Ahora es una columna, partida en
   tramos, y cada tramo lleva el color de su nivel —el mismo de la tabla del
   programa—, así que quien pasa de A2 a B1 lo ve sin leerlo.
   ============================================================ */

/* ============================================================
   1. La pantalla: el camino y, al lado, tu día
   ============================================================ */
.aprender { display: grid; gap: var(--e-6); }
.aprender-camino, .aprender-lado { min-width: 0; }

/* En el escritorio la columna va al lado y se queda pegada arriba: con
   sesenta lecciones, quien va por la cuarenta sigue teniendo el repaso y los
   desafíos a la vista sin subir. 70rem y no los 60 del armazón: entre medias
   la columna lateral de la aplicación ya ocupa su sitio y al camino le
   quedarían menos de 400 px. */
@media (min-width: 70rem) {
  .aprender { grid-template-columns: minmax(0, 1fr) 18.5rem; gap: var(--e-7); align-items: start; }
  .aprender-lado { position: sticky; top: var(--e-5); }
  /* Los botones de la cabecera y los de la columna son los mismos: se ve
     solo una copia de cada uno según dónde caiga la columna. */
  .aprender-en-cabeza { display: none; }
}
@media (max-width: 69.9375rem) {
  .aprender-lado-acciones { display: none; }
}
/* `.app-cabeza .acciones` lleva `flex: none`, y con dos botones a línea
   completa su ancho es la suma de los dos: a 320 px la cabecera se salía 54
   px por la derecha. Aquí ocupa la fila entera y los botones se apilan. */
@media (max-width: 30rem) {
  .aprender .app-cabeza > .acciones { flex: 1 1 100%; min-width: 0; }
}

/* El número que acompaña a «Repaso de hoy» y «Mis errores». Va aparte de la
   frase para que el diccionario la encuentre entera. */
.aprender-cuenta {
  display: inline-grid; place-items: center;
  min-width: 1.5rem; height: 1.5rem; padding-inline: .375rem;
  border-radius: var(--r-full);
  background: var(--seccion-lavado); color: var(--seccion-tinta);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   2. Los tramos del programa
   ============================================================ */
/* El tramo pone `.n-a1`…`.n-c2`, y con eso el folio, el filete, los nodos y
   el sendero andado cambian de color solos: aquí no se escribe ni un color
   por nivel. */
/* Cada tramo es un <section>, y base.css da a las secciones del sitio, en el
   móvil, `content-visibility: auto` con una altura estimada de 32rem. Un
   tramo de doce lecciones mide el triple: al llevar la vista hasta la lección
   de ahora, los tramos de encima aún sin pintar medían lo estimado y la
   barra de desplazamiento daba saltos al subir. */
.aprender-tramo { content-visibility: visible; }
.aprender-tramo + .aprender-tramo {
  margin-top: var(--e-6); padding-top: var(--e-6);
  border-top: 1px solid var(--linea);
}
.aprender-tramo-cabeza {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  margin-bottom: var(--e-5);
}
.aprender-tramo-cabeza > div { min-width: 0; }
.aprender-tramo-cabeza .folio { margin-bottom: var(--e-2); }
.aprender-tramo-cabeza h2 { font-size: var(--t-xl); }
.aprender-tramo-cuenta {
  font-size: var(--t-sm); color: var(--tinta-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.aprender-tramo-cuenta b {
  font-family: var(--display); font-size: var(--t-lg); font-weight: 600;
  color: var(--seccion-tinta);
}

/* ============================================================
   3. Cada lección, un paso del sendero
   ============================================================ */
/* La línea y la rejilla del paso son las de base.css; aquí solo cambia el
   nodo. El de la plantilla lleva relieve de botón porque en el sitio es un
   número de pasos; en la aplicación el nodo dice un ESTADO, y un relieve en
   sesenta nodos era justo el aspecto de juguete que se quería quitar. */
.aprender .paso-nodo {
  box-shadow: none;
  background: var(--papel); color: var(--tinta-2);
  border: 2px solid var(--linea);
  font-size: var(--t-md); font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
/* `.node` es el enganche con el que el camino busca la lección de ahora y la
   recién hecha; al ratón le sirve de atajo para abrirla. */
.aprender .node { cursor: pointer; }
@media (hover: hover) {
  .aprender .paso-nodo.pendiente:hover { border-color: var(--seccion); color: var(--seccion-tinta); }
}
/* Empezada: el filo ya es del color, el relleno todavía no. */
.aprender .paso-nodo.empezada { border-color: var(--seccion); color: var(--seccion-tinta); }
/* Hecha: lavado del nivel con la marca de verificación. Lavado y no relleno
   entero: si las hechas fueran macizas, a mitad de curso habría veinte
   círculos llenos y el de ahora no destacaría entre ellos. */
.aprender .paso-nodo.done { background: var(--seccion-lavado); border-color: var(--seccion); color: var(--seccion-tinta); }
/* La de ahora es la ÚNICA maciza del camino, con un anillo quieto. Quieto a
   propósito: el cartel que latía y la onda que se expandía sin parar cansaban
   la vista en una pantalla donde se pasan minutos. */
.aprender .paso-nodo.current {
  background: var(--seccion); border-color: var(--seccion); color: var(--sobre-seccion);
  outline: 3px solid color-mix(in srgb, var(--seccion) 32%, transparent);
  outline-offset: 3px;
}
.aprender .paso-nodo .tk-icono { width: 1.375rem; height: 1.375rem; }

/* El tramo de sendero que ya se ha andado lleva el color del nivel. */
.aprender .paso.es-hecha::before { background: var(--seccion); }

/* Lo recién terminado: un halo que se abre y se apaga una vez. Sin rebote y
   sin cambiar de tamaño; quien pide menos movimiento lo tiene a cero por la
   regla general de base.css. */
.aprender .paso-nodo.justdone { animation: aprender-recien 1.1s ease-out 1; }
@keyframes aprender-recien {
  0%   { outline: 0 solid color-mix(in srgb, var(--seccion) 55%, transparent); outline-offset: 0; }
  35%  { outline: 6px solid color-mix(in srgb, var(--seccion) 45%, transparent); outline-offset: 2px; }
  100% { outline: 6px solid transparent; outline-offset: 12px; }
}

.aprender .paso-cuerpo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  min-width: 0; min-height: 3.5rem;
}
.aprender .paso-texto { flex: 1 1 15rem; min-width: 0; }
.aprender .paso h3 { font-size: var(--t-lg); margin-top: 0; overflow-wrap: anywhere; }
/* `.paso p` de base.css pesa más que `.paso-meta` y le ponía el cuerpo y el
   gris del párrafo: por eso estas reglas llevan `.aprender .paso` delante. */
.aprender .paso .paso-meta {
  margin-top: var(--e-1); gap: 0 var(--e-3);
  font-size: var(--t-sm); color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}
.aprender-nivel { font-weight: 700; color: var(--seccion-tinta); }

.aprender .paso-acciones { display: flex; align-items: center; gap: var(--e-2); flex: none; }
/* Pequeños, pero con los 44 px de zona pulsable. */
.aprender .paso-acciones .btn { min-height: 2.75rem; padding: .5rem 1rem; font-size: var(--t-sm); }
.aprender .paso-acciones .btn-borde { padding-block: calc(.5rem - 2px); }
.aprender .paso-acciones .btn-texto { padding-inline: .5rem; }
/* «Seguir» es más corto que «Empezar» y «Repasar»: con el mismo ancho, la
   columna de botones y la de «Guía» quedan alineadas lección a lección. */
.aprender .paso-acciones .btn:last-child { min-width: 6.5rem; }
/* El hover de `.btn-texto` mete margen negativo para no mover el texto en
   una línea; aquí movía el botón de al lado. */
.aprender .paso-acciones .btn-texto:hover { margin-inline: 0; }

/* «Estás aquí»: la tarjeta de filo grueso de la plantilla, en el color del
   nivel, con la descripción de la lección y el botón principal. Destaca por
   forma y color, no por movimiento. */
.aprender .paso.es-actual > .paso-cuerpo {
  padding: var(--e-4); margin-top: calc(-1 * var(--e-2));
  background: var(--papel);
  border: 2px solid var(--seccion); border-radius: var(--r-xl);
}
.aprender .paso .aprender-aqui {
  margin: 0 0 var(--e-2);
  color: var(--seccion-tinta); font-size: var(--t-xs);
}
.aprender .paso .aprender-desc {
  margin-top: var(--e-1); max-width: var(--medida);
  font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.5;
}

@media (max-width: 30rem) {
  .aprender .paso.es-actual > .paso-cuerpo { padding: var(--e-3); }
  .aprender-tramo + .aprender-tramo { margin-top: var(--e-5); padding-top: var(--e-5); }
}

/* ============================================================
   4. La columna de tu día
   ============================================================ */
.aprender-lado { display: grid; gap: var(--e-4); align-content: start; }
.aprender-lado .metricas, .aprender-lado .bloque { margin-bottom: 0; }

/* Dos cifras siempre lado a lado: apiladas solo gastan alto. Los filetes y el
   color (`.tono-racha`, `.tono-xp`) son los de panel.css y app.css. */
.aprender-marcador { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aprender-marcador .metrica { min-width: 0; }

.aprender-lado-acciones { display: grid; gap: var(--e-2); }
.aprender-lado-acciones .btn-texto { min-height: 2.75rem; }

.aprender-retos .bloque-cuerpo { padding-bottom: var(--e-5); }
.aprender-retos-lista { list-style: none; display: grid; gap: var(--e-4); }
.aprender-reto-fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3);
  margin-bottom: var(--e-2);
  font-size: var(--t-sm); font-weight: 600;
}
.aprender-reto-cifra {
  display: inline-flex; align-items: center; gap: .25rem; flex: none;
  color: var(--tinta-3); font-variant-numeric: tabular-nums;
}
.aprender-reto.hecho .aprender-reto-cifra { color: var(--acierto-tinta); }
.aprender-reto .progreso { height: .625rem; }

/* ============================================================
   5. Cargando, vacío y fallo
   ============================================================ */
.aprender-esqueleto .paso-nodo { box-shadow: none; }
.aprender-esq { display: grid; gap: var(--e-2); align-content: center; min-height: 3.5rem; }
.aprender-esq-titulo { width: min(22rem, 80%); height: 1.25rem; }
.aprender-esq-meta { width: min(12rem, 50%); height: .875rem; }


/* ============================================================
   6. Las ventanas: la hoja previa y la guía
   ============================================================ */
/* Las dos son `.modal .box` de app.css; aquí solo el orden de dentro. */
.aprender-modal { display: grid; gap: var(--e-4); }
/* El hueco lo pone la rejilla; el `p + p` de base.css lo doblaba. */
.aprender-modal > p + p { margin-top: 0; }
.aprender-modal-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); }
.aprender-modal-cabeza > div { min-width: 0; }
/* La cabecera se queda arriba al desplazar: una guía tiene cuatro o cinco
   bloques largos, y el botón de cerrar se iba con el primero. El margen
   negativo la pega al borde de la caja, por encima de su relleno. */
.aprender-modal > .aprender-modal-cabeza {
  position: sticky; z-index: 1; top: calc(-1 * var(--e-6));
  margin-top: calc(-1 * var(--e-6)); padding-block: var(--e-6) var(--e-2);
  background: var(--papel);
}
@media (max-width: 30rem) {
  .aprender-modal > .aprender-modal-cabeza {
    top: calc(-1 * var(--e-5)); margin-top: calc(-1 * var(--e-5)); padding-top: var(--e-5);
  }
}
.aprender-modal-cabeza .folio { margin-bottom: var(--e-2); }
.aprender-modal-cabeza h3 { overflow-wrap: anywhere; }
.aprender-modal .aprender-desc { color: var(--tinta-2); font-size: var(--t-base); line-height: 1.55; }

.aprender-previa-pos {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3);
  font-size: var(--t-sm); color: var(--tinta-2);
}

/* Tres cifras en fila a cualquier ancho: son tres datos de la misma lección
   y apilados parecían tres avisos. */
.aprender-previa-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.aprender-previa-cifras .metrica { padding: var(--e-3); min-width: 0; }
@media (max-width: 26rem) {
  .aprender-previa-cifras .metrica dd { font-size: var(--p-lg); }
}

.aprender-premio { justify-self: start; }
.aprender-premio .tk-icono + * { margin-left: 0; }
.aprender-previa-acciones { display: grid; gap: var(--e-3); }
.aprender-previa-acciones .btn-texto { justify-self: center; min-height: 2.75rem; }

.aprender-guia-bloques { display: grid; gap: var(--e-5); }
/* La ventana cuelga de <body>, fuera del cuerpo del panel que anula el aire
   de las secciones del sitio: sin esto cada bloque llevaba 44–88 px arriba y
   abajo, y la guía parecía tener huecos. */
.aprender-guia-bloque { padding-block: 0; content-visibility: visible; }
.aprender-guia-bloque + .aprender-guia-bloque { padding-top: var(--e-5); border-top: 1px solid var(--linea); }
.aprender-guia-bloque h4 { font-size: var(--t-lg); }
.aprender-guia-bloque > p { margin-top: var(--e-2); color: var(--tinta-2); font-size: var(--t-base); line-height: 1.55; }
.aprender-guia-vacia { color: var(--tinta-2); }
.aprender-guia-todas { margin-top: var(--e-2); }

/* Las fichas de ejemplo: tarjeta plana de filo, la frase en serif y su
   traducción debajo. Se pulsan para oírla, así que responden a la mano como
   las opciones de respuesta de la plantilla. */
.aprender-ejemplos { list-style: none; display: grid; gap: var(--e-2); margin-top: var(--e-3); }
.aprender-ejemplo {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--e-3); row-gap: .125rem; align-items: center;
  padding: var(--e-3) var(--e-4); min-height: 2.75rem;
  font: inherit; text-align: left; cursor: pointer;
  background: var(--papel); color: var(--tinta);
  border: 2px solid var(--linea); border-radius: var(--r-md);
  transition: border-color .15s ease, background-color .15s ease;
}
.aprender-ejemplo-en { grid-column: 1; font-family: var(--display); font-size: var(--t-md); font-weight: 600; line-height: 1.3; }
.aprender-ejemplo-es { grid-column: 1; font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.4; }
.aprender-ejemplo .tk-icono { grid-column: 2; grid-row: 1 / span 2; color: var(--seccion-tinta); }
@media (hover: hover) {
  .aprender-ejemplo:hover { border-color: var(--seccion); background: var(--seccion-lavado); }
}
.aprender-ejemplo:active { border-color: var(--seccion); background: color-mix(in srgb, var(--seccion) 12%, var(--seccion-lavado)); }

/* ============================================================
   7. El mando de velocidad
   ============================================================ */
/* `.tk-vel` se dibuja una sola vez en app.css (§10): lo usan la sesión, los
   vídeos, Mirar y Escuchar, y vivía copiado en tres hojas de módulo. */