@charset "utf-8";
/* ============================================================
   modulos/programa.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í.

   Tres pantallas de la academia que tienen su modelo en el sitio:
     · Programa (`catalogo.js`)   → la página «Programa»: tabla de niveles con
       la clave en su color, el temario en desplegables y las fichas de dato.
     · Prueba de nivel (`nivelacion.js`) → la página «Prueba de nivel»: tarjeta
       blanca, `.opcion`, `.progreso` y el nivel en el color de su escalón.
     · Guía de la lección (`guia.js`) → la ficha `.unidad` de la plantilla.

   Aquí casi no se inventa nada: se colocan las piezas de base.css y se
   ajusta lo que una aplicación necesita y un sitio no (densidad, foco,
   estados de carga).
   ============================================================ */

/* ============================================================
   0. Lo común a las tres
   ============================================================ */

/* El esqueleto de carga. `.cargando` de panel.css está pensado para un dato
   en línea —min-width 3rem—; aquí ocupa el sitio de un bloque entero para que
   la pantalla no dé el salto cuando contesta la API. */
:is(.tk-catalogo, .tk-np, .tk-guia) .tk-carga { display: grid; gap: var(--e-3); }
:is(.tk-catalogo, .tk-np, .tk-guia) .tk-carga .cargando {
  display: block; width: 100%; height: 4.5rem; border-radius: var(--panel-radio);
}
:is(.tk-catalogo, .tk-np, .tk-guia) .tk-carga .cargando:first-child { height: 6rem; }

/* `app.css` separa un icono del texto que le sigue con `.tk-icono + *`. Dentro
   de una rejilla —el aviso, el fallo, las filas con icono— el hueco ya lo pone
   `gap`, y ese margen de más descuadra la segunda columna. */
:is(.tk-catalogo, .tk-np, .tk-guia) :is(.aviso, .tk-np-avisos li, .tk-guia-trampa, .tk-cat-videos li) > .tk-icono + * {
  margin-left: 0;
}
/* El fallo de una llamada (`.fallo` y su botón de reintentar) es pieza común
   de app.css (§13). */

/* ============================================================
   1. Programa
   ============================================================ */

.tk-cat-cifras { margin-bottom: var(--e-6); }
.tk-cat-cifras .metrica dd { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); }
/* Los filetes entre cifras, en dos columnas o en cinco, ya los dibuja
   panel.css para cualquier número de columnas: aquí no se parchean. */

/* ---------- la tabla de niveles ---------- */
.tk-catalogo .tabla-envoltorio { margin-bottom: var(--e-2); }
.tk-cat-tabla :is(th, td) { vertical-align: middle; }
.tk-cat-tabla thead th.num { text-align: right; }
.tk-cat-tabla td.num { font-size: var(--t-md); }
.tk-cat-que b { display: block; font-weight: 700; color: var(--tinta); }
.tk-cat-que span { display: block; margin-top: .125rem; font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.45; }
.tk-cat-estado { white-space: nowrap; }

@media (max-width: 45rem) {
  /* Apilada en fichas, la píldora de estado se queda al principio de su línea
     y no estirada a lo ancho de la columna. */
  .tk-cat-tabla td.tk-cat-estado { justify-self: start; }
  /* La clave ocupa tres filas y aquí hay cinco celdas: sin fijarles la
     columna, la cuarta caía debajo de la clave, en la columna estrecha. */
  .tk-cat-tabla td { grid-column: 2; }
  .tk-cat-tabla tr { padding-inline: var(--e-3); }
}

/* ---------- nivel por nivel ---------- */
/* `.faq` es una rejilla de pista automática: cualquier fila de dentro que no
   pueda partirse la ensancha por encima de la pantalla. */
.tk-cat-niveles { grid-template-columns: minmax(0, 1fr); }
.tk-cat-niveles summary { min-height: 2.75rem; }
.tk-cat-sum { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e-3); }
.tk-cat-sum > span:last-child {
  font-family: var(--display); font-size: var(--t-lg); font-weight: 600; letter-spacing: -.015em;
}
.tk-cat-sum-dato {
  flex: none; font-size: var(--t-sm); font-weight: 600; color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}
/* El desplegable de la plantilla limita lo de dentro a una medida de lectura
   y lo pinta en gris: aquí dentro hay una lista de vídeos y botones, no un
   párrafo. */
.tk-cat-niveles .tk-cat-detalle {
  max-width: none; color: var(--tinta);
  display: grid; gap: var(--e-4); padding-top: var(--e-2);
  /* `minmax(0, 1fr)` y no la pista automática: con ella la lista de vídeos
     empujaba la columna a su ancho mínimo y a 320 px el desplegable se salía
     19 px de la pantalla. */
  grid-template-columns: minmax(0, 1fr);
}
.tk-cat-cuenta { font-size: var(--t-sm); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.tk-cat-detalle .progreso { height: .625rem; margin-top: calc(-1 * var(--e-2)); }

.tk-cat-videos {
  list-style: none;
  display: grid; column-gap: var(--e-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}
.tk-cat-videos li {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem var(--e-3);
  min-height: 2.75rem; padding-block: .375rem;
  border-bottom: 1px solid var(--linea-suave);
  font-size: var(--t-sm); color: var(--tinta);
}
.tk-cat-videos li > svg { width: 1.125rem; height: 1.125rem; color: var(--seccion-tinta); }
/* Base de 9rem: en un móvil estrecho las marcas bajan a la línea de abajo en
   vez de dejar el título partido palabra a palabra. */
.tk-cat-videos li > span:first-of-type { flex: 1 1 9rem; min-width: 0; }
.tk-cat-videos li small { color: var(--tinta-3); font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-cat-videos li.bloqueado { color: var(--tinta-3); }
.tk-cat-videos li.bloqueado > svg { color: var(--tinta-3); }

/* ---------- los idiomas del catálogo ---------- */
.tk-cat-nota { max-width: var(--medida); color: var(--tinta-2); margin: calc(-1 * var(--e-2)) 0 var(--e-5); }

/* Ficha de dato, no tarjeta que desarrolla una idea: radio corto, como `.plan`.
   El filo es la elevación. */
.tk-cat-idioma {
  display: grid; align-content: start; gap: .25rem;
  background: var(--papel); color: var(--tinta);
  border: 2px solid var(--linea); border-radius: var(--r-md);
  padding: var(--e-4);
}
.tk-cat-idioma.abierto { border-color: color-mix(in srgb, var(--seccion) 38%, transparent); }
.tk-cat-idioma p { margin: 0; }
.tk-cat-idioma-alto {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  margin-bottom: var(--e-2);
}
/* El código del idioma en lugar de la bandera: un cuadro de letra de titular,
   que se lee igual en todos los sistemas. */
.tk-cat-codigo {
  display: inline-grid; place-items: center;
  min-width: 2.75rem; height: 2.75rem; padding-inline: .5rem;
  border-radius: var(--r-sm);
  background: var(--papel-2); color: var(--tinta-2);
  font-family: var(--display); font-size: var(--t-md); font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
}
.tk-cat-idioma.abierto .tk-cat-codigo { background: var(--seccion-lavado); color: var(--seccion-tinta); }
.tk-cat-idioma-nombre { font-family: var(--display); font-size: var(--t-lg); line-height: 1.2; letter-spacing: -.015em; }
.tk-cat-idioma-nombre b { font-weight: 600; }
.tk-cat-idioma-ruta { font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.4; }
.tk-cat-idioma .tk-cat-idioma-niveles { margin-top: var(--e-1); font-size: var(--t-sm); color: var(--tinta-3); }
.tk-cat-idioma-niveles b { color: var(--seccion-tinta); font-variant-numeric: tabular-nums; }

/* En el móvil dieciséis fichas apiladas de 150 px eran tres pantallas de
   desplazamiento. Se vuelven filas: el código a la izquierda y el resto a su
   lado, con la píldora encima del nombre. */
@media (max-width: 30rem) {
  .tk-cat-idiomas { gap: var(--e-2); }
  .tk-cat-idioma { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e-3); padding: var(--e-3); }
  .tk-cat-idioma-alto { display: contents; }
  .tk-cat-codigo { grid-row: 1 / span 4; align-self: start; }
  .tk-cat-idioma > :not(.tk-cat-idioma-alto), .tk-cat-idioma .estado { grid-column: 2; }
  .tk-cat-idioma .estado { justify-self: start; margin-bottom: .125rem; }
}

/* ============================================================
   2. Prueba de nivel
   ============================================================ */

/* La medida de la prueba del sitio (`pliego-estrecho`): cuatro respuestas a
   todo lo ancho de 72rem obligarían a leer cada opción de lado a lado. */
.tk-np { max-width: 48rem; }
.tk-np:focus { outline: none; }

.tk-np-tarjeta { margin-bottom: var(--e-5); }
.tk-np-titulo { font-size: var(--t-xl); }

/* Tres garantías con su icono. La tinta del icono es la de la sección; el
   texto va en gris de lectura. */
.tk-np-avisos { list-style: none; display: grid; gap: var(--e-3); margin: var(--e-4) 0 var(--e-5); }
.tk-np-avisos li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--e-3); align-items: start; color: var(--tinta-2); }
.tk-np-avisos li > svg { width: 1.25rem; height: 1.25rem; margin-top: .15rem; color: var(--seccion-tinta); }
.tk-np-pista { margin-top: var(--e-4); font-size: var(--t-sm); color: var(--tinta-3); }

/* El último resultado, en el lavado de su propio nivel. */
.tk-np-anterior {
  display: flex; align-items: center; gap: var(--e-4);
  margin-bottom: var(--e-5); padding: var(--e-4) var(--e-5);
  background: var(--seccion-lavado); color: var(--tinta);
  border-radius: var(--r-lg);
}
.tk-np-anterior .prueba-nivel { margin: 0; flex: none; }
.tk-np-anterior .prueba-nivel span { width: 3.75rem; height: 3.75rem; font-size: var(--t-xl); border-radius: var(--r-md); }
.tk-np-anterior .folio { margin-bottom: .125rem; }
.tk-np-anterior p { margin: 0; }
.tk-np-anterior-escalon { font-family: var(--display); font-size: var(--t-lg); font-weight: 600; }
.tk-np-anterior-dato { font-size: var(--t-sm); color: var(--tinta-2); font-variant-numeric: tabular-nums; }

/* ---------- la pregunta ---------- */
/* `.btn-texto` es un enlace en el sitio; aquí es un <button>, y el navegador le
   pone su borde biselado en los tres lados que base.css no toca. Y necesita
   los 44 px de zona pulsable que un enlace en línea no pide. */
.tk-np .btn-texto {
  border-width: 0 0 2px; border-style: solid; border-color: transparent;
  cursor: pointer; font-size: .9375rem;
  min-height: 2.75rem; display: inline-flex; align-items: center;
}
.tk-np .btn-texto:hover { border-bottom-color: currentColor; }
.tk-np .btn-texto[disabled] { cursor: default; opacity: .6; }
.tk-np .app-cabeza .acciones { align-self: center; }

.tk-np .progreso { height: .75rem; }
.tk-np .prueba-voz { overflow-wrap: anywhere; }

/* La respuesta elegida se queda hundida y con el filo de la sección mientras
   viaja al servidor. Sin verde ni rojo: la prueba mide, no corrige. El peso
   del selector le gana al apagado a la mitad que base.css pone a las opciones
   deshabilitadas. */
.tk-np .opcion.elegida[disabled] {
  opacity: 1;
  border-color: var(--seccion); background: var(--seccion-lavado);
  color: var(--seccion-tinta); font-weight: 700;
  box-shadow: none; transform: translateY(3px);
}
@media (prefers-reduced-motion: reduce) {
  .tk-np .opcion.elegida[disabled] { transform: none; }
}

.tk-np-pie { margin-top: var(--e-4); display: flex; justify-content: center; }
.tk-np-nose { color: var(--tinta-2); }
.tk-np .tk-np-nose.elegida[disabled] { color: var(--seccion-tinta); border-bottom-color: currentColor; opacity: 1; }

/* ---------- el resultado ---------- */
.tk-np-resultado {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-5); align-items: center;
  margin-bottom: var(--e-5);
}
.tk-np-resultado .prueba-nivel { margin: 0; }
.tk-np-resultado .prueba-nivel span { width: 6rem; height: 6rem; font-size: var(--t-3xl); }
/* El número del escalón y los aciertos, en la tinta de su nivel. */
.tk-np-cifras { --tono: var(--seccion-tinta); gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); }
.tk-np-cifras .cifra dd { font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem); }
@media (max-width: 30rem) {
  .tk-np-resultado { grid-template-columns: 1fr; gap: var(--e-4); }
  .tk-np-resultado .prueba-nivel span { width: 4.5rem; height: 4.5rem; font-size: var(--t-2xl); }
}

.tk-np-margen { margin-bottom: var(--e-5); }

.tk-np-desglose .barras { gap: var(--e-2); }
/* Una columna de 8,5rem para un chip de dos letras dejaba media fila vacía, y
   por debajo de 34rem panel.css manda el nombre a su propia línea: aquí el
   nombre es corto y cabe siempre en la fila. */
.tk-np-desglose .barra-fila {
  --tono: var(--seccion-tinta);
  grid-template-columns: 3.5rem minmax(0, 1fr) 3rem;
  font-size: var(--t-sm); min-height: 2rem;
}
.tk-np-desglose .barra-fila > .nombre { grid-column: auto; }
.tk-np-desglose .barra-pista { height: .625rem; }
.tk-np-desglose .barra-fila > .valor { color: var(--tinta); }

.tk-np-acciones { margin-top: var(--e-2); }

/* ============================================================
   3. Guía de la lección
   ============================================================ */

/* ---------- elegir lección ---------- */
.tk-guia-grupo { margin-bottom: 0; }
.tk-guia-grupo > header h2 .chip { font-family: var(--texto); }
.tk-guia-lista { list-style: none; }
.tk-guia-lista li + li { border-top: 1px solid var(--linea-suave); }
.tk-guia-item {
  width: 100%; min-height: 2.75rem;
  display: flex; align-items: center; gap: var(--e-3);
  padding: .5rem var(--e-4);
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--tinta); font-size: var(--p-base);
}
.tk-guia-item:hover { background: var(--papel-2); }
.tk-guia-item:hover > svg { color: var(--seccion-tinta); }
.tk-guia-lista li:last-child .tk-guia-item { border-radius: 0 0 var(--panel-radio) var(--panel-radio); }
.tk-guia-item-titulo { flex: 1; min-width: 0; font-weight: 500; line-height: 1.35; }
.tk-guia-item-cuenta { flex: none; font-size: var(--p-sm); color: var(--tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-guia-item > svg { width: 1rem; height: 1rem; color: var(--tinta-3); }

/* ---------- la guía ---------- */
.tk-guia .app-cabeza h1 { overflow-wrap: anywhere; }
.tk-guia-estado { margin-bottom: var(--e-5); }

.tk-guia-gramatica { margin-bottom: var(--e-5); }
.tk-guia-explica + .tk-guia-explica { margin-top: var(--e-5); }
.tk-guia-explica .medida { color: var(--tinta-2); font-size: var(--t-md); line-height: 1.65; }
/* La sangría del <blockquote> ya la quita `.unidad-cita` de base.css. */
.tk-guia-explica .unidad-cita { max-width: var(--medida); }
.tk-guia-explica .unidad-cita + .unidad-cita { margin-top: var(--e-3); }

/* Cuatro sonidos, dos por fila también en el móvil: uno por fila eran cuatro
   tarjetas altas antes de llegar a la primera respuesta. */
.tk-guia-focos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.tk-guia-foco {
  display: grid; align-content: start; gap: var(--e-2);
  background: var(--papel); color: var(--tinta);
  border: 2px solid var(--linea); border-radius: var(--r-md);
  padding: var(--e-4);
}
.tk-guia-foco-simbolo {
  font-size: var(--t-2xl); font-weight: 700; line-height: 1.1;
  color: var(--seccion-tinta);
}
.tk-guia-foco b { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.tk-guia-foco p { margin: 0; font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.5; }

.tk-guia-titulo .etiqueta { vertical-align: .3em; font-family: var(--texto); font-variant-numeric: tabular-nums; }

/* La ficha de unidad del sitio, a la escala de una lista de cuarenta: el
   inglés a 2,5rem está pensado para enseñar UNA ficha, no para recorrerlas. */
.tk-guia .unidad { padding: var(--e-4) var(--e-5) var(--e-5); }
.tk-guia .unidad p { margin-bottom: 0; }
.tk-guia .unidad-alto { align-items: flex-start; flex-wrap: nowrap; }
.tk-guia-u-texto { min-width: 0; }
.tk-guia .unidad-en { font-size: var(--t-xl); overflow-wrap: anywhere; }
.tk-guia-u-acciones { flex: none; display: flex; align-items: center; gap: var(--e-2); }
.tk-guia-oir { min-height: 2.75rem; padding: .5rem .875rem; font-size: var(--t-sm); }
.tk-guia .unidad.sin-pron { border-top-color: var(--linea); }
.tk-guia-nopron { margin-top: var(--e-2); font-size: var(--t-sm); color: var(--tinta-3); }

.tk-guia-sonidos { list-style: none; display: grid; gap: var(--e-2); margin-top: var(--e-4); }
.tk-guia-sonidos li {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--e-3); align-items: baseline;
  font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.5;
}
.tk-guia-sonidos .tk-simbolo-fonetico { text-align: center; }

.tk-guia-trampa {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-2); align-items: start;
  margin-top: var(--e-3); font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.5;
}
.tk-guia-trampa > svg { width: 1rem; height: 1rem; margin-top: .2rem; color: var(--xp-tinta); }

@media (max-width: 30rem) {
  .tk-guia .unidad { padding: var(--e-4); }
  .tk-guia .unidad-alto { flex-wrap: wrap; }
}