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

   «Mis clases» es donde el alumno fotografía la pizarra, el libro o el
   examen y sale una lección suya. Va en el azul de la marca (`t-misclases`
   en `--seccion`) y tiene cuatro momentos, cada uno con su pieza:

     1. Subir: una tarjeta de filo discontinuo con el cupo, el modo y el botón.
     2. Esperar: los tres pasos marcándose y el reloj corriendo.
     3. Revisar: las respuestas resueltas, con la pieza de respuesta correcta
        de la plantilla, y el formulario para guardar.
     4. La lista de lecciones ya hechas.
   ============================================================ */

.tk-mc-hueso { display: block; height: .875rem; width: 40%; margin-top: var(--e-3); min-width: 0; }
.tk-mc-hueso.largo { width: 60%; height: 1.5rem; margin-top: 0; }
.tk-mc-hueso.alto { width: 100%; height: 4.5rem; }

/* Dentro de un control con `gap`, el margen que app.css pone detrás de cada
   icono sumaba el doble de aire entre el icono y su texto. */
:is(.tk-mc-subir, .tk-mc-otras, .tk-mc-lecciones, .tk-mc-guardar, .tk-mc-ej) :is(.btn, .btn-panel) > .tk-icono + * { margin-left: 0; }

/* ============================================================
   1. Subir la foto
   ============================================================ */
/* `.tarjeta` repetida en el selector a propósito: la zona es un <section>, y
   `.panel-cuerpo section` de panel.css le quitaba el relleno vertical. */
.tk-mc-subir.tarjeta {
  display: grid; gap: var(--e-4); padding: var(--e-5);
  border-style: dashed;
  border-color: color-mix(in srgb, var(--seccion) 45%, var(--linea));
  margin-bottom: var(--e-4);
}
.tk-mc-subir-cab { display: flex; align-items: center; gap: var(--e-4); min-width: 0; }
.tk-mc-subir-cab > div { min-width: 0; }
.tk-mc-subir-cab h2 { font-size: var(--t-xl); }
.tk-mc-subir-ico {
  width: 3.5rem; height: 3.5rem; flex: none; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--seccion-lavado); color: var(--seccion-tinta);
}
.tk-mc-cupo { margin-top: var(--e-1); color: var(--tinta-2); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
/* Sin fotos no se castiga ni se esconde nada: se dice, y el botón queda
   apagado. «Crear lección a mano» sigue ahí debajo. */
.tk-mc-cupo.agotado { color: var(--racha-tinta); font-weight: 600; }

.tk-mc-pregunta {
  font-size: var(--p-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-3);
  margin-bottom: calc(-1 * var(--e-2));
}

/* ---------- el modo de la foto ----------
   El control segmentado común (`.segmentado .segmentado-ancho`, app.css §12):
   la bandeja, el filo del elegido y su estado son los de Mirar, Vídeos,
   Pronunciar y el perfil. Lo que es de aquí es la forma de cada opción, que
   explica lo que hace: icono, nombre y una línea, alineados a la izquierda,
   y las dos opciones lado a lado mientras quepan 15rem cada una. */
.tk-modo-foto {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.tk-modo {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--e-3); align-items: center;
  justify-items: stretch; min-height: 3.75rem; padding: var(--e-3); text-align: left;
  /* La explicación va en letra normal: el peso de la pieza común es para
     opciones de una o dos palabras. */
  font-weight: 400; line-height: 1.6;
}
.tk-modo[aria-pressed="true"] { color: var(--tinta); }
.tk-modo-ico {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--papel); color: var(--tinta-3);
}
.tk-modo[aria-pressed="true"] .tk-modo-ico { background: var(--seccion-lavado); color: var(--seccion-tinta); }
.tk-modo-texto { min-width: 0; }
.tk-modo-texto b { display: block; font-size: var(--t-sm); font-weight: 700; line-height: 1.3; }
.tk-modo-texto small { display: block; font-size: var(--t-xs); color: var(--tinta-3); line-height: 1.4; margin-top: .125rem; }

.tk-mc-disparo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.tk-mc-pista { font-size: var(--t-sm); color: var(--tinta-3); }
@media (max-width: 48rem) {
  .tk-mc-subir.tarjeta { padding: var(--e-4); }
}
@media (max-width: 30rem) {
  .tk-mc-disparo .btn { width: 100%; }
  .tk-mc-subir-cab { gap: var(--e-3); }
  .tk-mc-subir-ico { width: 3rem; height: 3rem; }
}

.tk-mc-otras { margin-bottom: var(--e-2); }
/* A línea completa en el móvil, «Ver todas las respuestas y su
   pronunciación» parte en dos, y como caja flexible el icono se quedaba
   pegado al borde izquierdo con el texto centrado lejos de él. En bloque, el
   icono va dentro del primer renglón, junto a la primera palabra. */
@media (max-width: 30rem) {
  :is(.tk-mc-otras, .tk-mc-disparo) .btn { display: block; }
  :is(.tk-mc-otras, .tk-mc-disparo) .btn > :is(svg, i[data-ico]) { display: inline-block; margin-right: .5em; vertical-align: -.1875em; }
}

/* ============================================================
   2. La lista de lecciones
   ============================================================ */
.tk-mc-titulo { display: flex; align-items: center; gap: var(--e-3); }
.tk-mc-titulo .chip { font-family: var(--texto); font-variant-numeric: tabular-nums; }

.tk-mc-lecciones {
  list-style: none; display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}
/* Dos filas y la de arriba es la que crece: en una fila de la rejilla con
   una tarjeta de título largo al lado, el botón de «Estudiar» se queda abajo
   en las dos, alineado, en vez de flotar a media altura en la corta. */
.tk-mc-leccion {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--e-2) var(--e-3); align-items: start;
  padding: var(--e-4);
}
@media (hover: hover) {
  .tk-mc-leccion:hover { border-color: color-mix(in srgb, var(--seccion) 45%, var(--linea)); }
}
/* El número de la lección es un nodo del sendero en pequeño: el mismo
   círculo de color que lleva el camino de lecciones de la plantilla. */
.tk-mc-num {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-full);
  display: grid; place-items: center; flex: none;
  background: var(--seccion-lavado); color: var(--seccion-tinta);
  font-family: var(--display); font-weight: 700; font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
}
.tk-mc-leccion-texto { min-width: 0; }
.tk-mc-leccion-texto h3 { font-size: var(--t-lg); line-height: 1.2; overflow-wrap: anywhere; }
.tk-mc-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem;
  margin-top: var(--e-1); font-size: var(--t-sm); color: var(--tinta-2);
}
.tk-mc-leccion-acciones {
  grid-column: 2; display: flex; align-items: center; gap: var(--e-2);
  margin-top: var(--e-2);
}
.tk-mc-leccion-acciones .btn { min-height: 2.75rem; padding: .5rem 1rem; font-size: var(--t-sm); }
.tk-mc-leccion-acciones .btn-x { margin-left: auto; }
.tk-mc-leccion-acciones .btn-x:hover { border-color: var(--racha); color: var(--racha-tinta); }

.tk-mc-vacio p { max-width: 28rem; }
.tk-mc-vacio svg { color: var(--seccion-tinta); }
.tk-mc-reintentar { margin-top: var(--e-3); }

/* ============================================================
   3. La espera
   ============================================================ */
.tk-mc-espera { max-width: 36rem; display: grid; gap: var(--e-4); }
.tk-mc-espera-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }
/* El reloj es la cifra grande de la pantalla y va en tabular: con cifras
   proporcionales el número bailaba un píxel cada segundo. */
.tk-mc-reloj { font-size: var(--t-md); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.tk-mc-reloj b {
  font-family: var(--display); font-size: var(--t-2xl); font-weight: 600;
  color: var(--tinta); letter-spacing: -.02em;
}

/* Los tres pasos, con la línea del sendero uniendo sus marcas. */
.tk-mc-pasos { list-style: none; display: grid; }
.tk-mc-paso {
  position: relative;
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--e-3); align-items: center;
  padding: var(--e-2) 0; color: var(--tinta-3); font-size: var(--t-base);
}
.tk-mc-paso:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1rem - 1.5px); top: calc(50% + 1rem); height: calc(100% - 2rem);
  width: 3px; border-radius: 2px; background: var(--linea);
}
.tk-mc-paso-marca {
  width: 2rem; height: 2rem; border-radius: var(--r-full);
  display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--papel); border: 2px solid var(--linea);
}
.tk-mc-paso-marca svg { width: 1rem; height: 1rem; }
.tk-mc-paso.hecho { color: var(--tinta-2); }
.tk-mc-paso.hecho .tk-mc-paso-marca { background: var(--acierto-lavado); border-color: var(--acierto); color: var(--acierto-tinta); }
.tk-mc-paso.hecho:not(:last-child)::after { background: var(--acierto); }
.tk-mc-paso.ahora { color: var(--tinta); font-weight: 600; }
.tk-mc-paso.ahora .tk-mc-paso-marca { background: var(--seccion); border-color: var(--seccion); color: var(--sobre-seccion); }
/* El paso en marcha late despacio. Quien pide menos movimiento lo ve quieto,
   con el mismo color: el latido acompaña, no informa. */
@keyframes tk-mc-latido { 50% { outline-color: color-mix(in srgb, var(--seccion) 25%, transparent); } }
.tk-mc-paso.ahora .tk-mc-paso-marca { outline: .3125rem solid transparent; animation: tk-mc-latido 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .tk-mc-paso.ahora .tk-mc-paso-marca { animation: none; }
}

/* ============================================================
   4. Revisar lo que salió
   ============================================================ */
.tk-mc-ia { margin-bottom: var(--e-4); }

.tk-mc-ejs { list-style: none; display: grid; gap: var(--e-3); margin-bottom: var(--e-5); }
.tk-mc-ej {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--e-3); align-items: start; padding: var(--e-4);
}
.tk-mc-ej-cuerpo { display: grid; gap: var(--e-3); min-width: 0; }
.tk-mc-ej-cuerpo > p { margin: 0; }
.tk-mc-ej-q { font-size: var(--t-md); line-height: 1.5; overflow-wrap: anywhere; }
/* La respuesta es la pieza `.opcion.es-correcta` de la plantilla, pero aquí
   no se pulsa: se le quitan la mano, el hundimiento y el cambio al pasar por
   encima, que dirían «tócame» sobre algo que solo se lee. */
.tk-mc-ej .opcion.tk-mc-ej-r { margin: 0; cursor: default; min-height: 0; overflow-wrap: anywhere; }
.tk-mc-ej .opcion.tk-mc-ej-r:is(:hover, :active) {
  border-color: var(--acierto); background: var(--acierto-lavado); transform: none; box-shadow: none;
}
.tk-mc-ej-por {
  font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.55;
  padding-left: var(--e-3); border-left: 3px solid var(--linea);
}
.tk-mc-ej-pron { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
/* La pronunciación figurada («THAENK-iu») va como la de la ficha de unidad:
   letra de texto y espaciada, que no se confunda con la fonética. */
.tk-mc-ej-fig { font-size: var(--t-sm); font-weight: 600; letter-spacing: .05em; color: var(--tinta-2); overflow-wrap: anywhere; }
.tk-mc-oir { color: var(--seccion-tinta); }
.tk-mc-oir:hover { border-color: var(--seccion); background: var(--seccion-lavado); color: var(--seccion-tinta); }
@media (max-width: 26rem) {
  .tk-mc-ej, .tk-mc-leccion { grid-template-columns: minmax(0, 1fr); }
  .tk-mc-leccion-acciones { grid-column: 1; }
  .tk-mc-ej .tk-mc-num, .tk-mc-leccion .tk-mc-num { width: 2rem; height: 2rem; font-size: var(--t-sm); }
}

.tk-mc-form { margin-bottom: var(--e-4); }
.tk-mc-form .campo:last-child { margin-bottom: 0; }
.tk-mc-form textarea { font-variant-numeric: tabular-nums; }
.tk-mc-guardar { margin-bottom: var(--e-6); }