@charset "utf-8";
/* ============================================================
   modulos/inicio.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É ES ESTA PANTALLA. El expediente del alumno: el mismo panel que
   `web/panel-alumno.html` —fila de cifras, bloques con cabecera, barras,
   columnas, escalera— con lo que una aplicación de estudio pone encima: la
   sesión de hoy y las formas de practicar. Por eso casi todo son piezas de
   panel.css, y aquí va lo que el panel de la web no tiene: el primer día, la
   tarjeta de la sesión, las herramientas, el objetivo de la semana, qué
   practicar y la liga. También lo que pinta `panel.js` (TKPanel).

   EL COLOR. La vista lleva `t-inicio` (la marca). Cada herramienta y cada
   acceso llevan la clase de SU sección —`t-imagenes`, `t-juegos`…— y toman
   de ahí el lavado del icono: se reconocen por el color antes de leerlas, y
   al entrar no cambia el código. Los colores con significado propio (el jade
   de lo cumplido, el ámbar de lo que falta, los seis del MCER) se escriben
   por su ficha, nunca con un valor a mano.
   ============================================================ */

/* ---------- el contenedor ----------
   Las rejillas de esta pantalla deciden por el ancho de la VISTA y no de la
   ventana. panel.css parte el expediente en una columna por debajo de 68rem de
   ventana, pero en la aplicación la columna lateral se come 15rem: a 1200 px
   la ventana dice «ancho» y dentro quedan 890, con una columna derecha de 280
   donde la escalera ya no respira. */
.inicio { container: inicio / inline-size; }

/* base.css salta el pintado de las <section> fuera de pantalla en el móvil
   (`content-visibility: auto`). Eso trae contención de pintado, y la
   contención RECORTA lo que sale de la caja: el anillo de foco de las
   herramientas del borde —3 px más 2 de separación— se quedaba cortado por la
   mitad justo donde el pulgar navega con teclado externo. Esta pantalla es
   corta; el ahorro no compensa un foco que no se ve. */
.inicio section { content-visibility: visible; }

/* El icono de TKIconos trae margen a la izquierda del texto que le sigue
   (app.css). Donde el hueco ya lo pone un `gap`, se sumaban los dos. */
.inicio .btn > .tk-icono + *,
.inicio-paso-partes .tk-icono + *,
.tk-fallo > .tk-icono + * { margin-left: 0; }

/* ============================================================
   1. La cabecera: el nivel junto al curso
   ============================================================ */
/* Sin margen a la izquierda: el hueco lo pone el espacio del texto, que se
   queda al final del renglón si el chip baja. Con margen, en el móvil el
   chip bajaba de línea sangrado respecto a la entradilla. */
.inicio-nivel .chip { vertical-align: .08em; }
.inicio-nivel .chip b { font-weight: 800; letter-spacing: .02em; }

/* ============================================================
   2. La fila de cifras

   Es `.metricas` de panel.css tal cual —los filetes ya los dibuja cada cifra
   a su derecha y debajo, tenga la rejilla las columnas que tenga— y el color
   de cada cifra es su clase de tono de app.css (`.tono-racha`…), la misma de
   Perfil y Aprender. Aquí solo el reparto: cinco en fila y, en el móvil, de
   dos en dos con la última a lo ancho para que no quede un hueco.
   ============================================================ */
.tk-metricas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tk-metricas .metrica { min-width: 0; }

@container inicio (max-width: 40rem) {
  .tk-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-metricas .metrica:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* El esqueleto de la fila: mismo alto que las cifras, para que la sesión de
   hoy no salte cuando llegan. */
.tk-hueco-rotulo { display: block; width: 5rem; height: .75rem; }
.tk-hueco-cifra { display: block; width: 3.5rem; height: 1.75rem; margin-top: .5rem; }

/* ============================================================
   3. El primer día: el programa en el sitio de las cifras
   ============================================================ */
.tk-primer-dia {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--panel-radio);
  margin-bottom: var(--p-e-45);
}
.tk-pd-txt { padding: var(--e-5); min-width: 0; }
.tk-pd-txt .folio { margin-bottom: var(--e-2); }
.tk-pd-titulo { font-size: var(--t-xl); }
.tk-pd-txt > p:not(.folio) { margin-top: var(--e-2); color: var(--tinta-2); max-width: var(--medida); }
.tk-pd-txt > .tk-pd-salto { margin-top: var(--e-3); font-size: var(--t-sm); }
/* Es un botón con cara de enlace (`.btn-texto`), pero va solo en su renglón
   y se toca con el pulgar: lleva los 44 px, y puede partirse en dos líneas
   en un móvil estrecho en vez de salirse. */
.tk-enlace.btn { min-height: 2.75rem; padding-inline: 0; justify-content: flex-start; text-align: left; }

.tk-pd-cifras { display: flex; margin: 0; border-left: 1px solid var(--linea); }
.tk-pd-cifras .metrica { min-width: 9.5rem; display: flex; flex-direction: column; justify-content: center; }
.tk-pd-cifras .metrica + .metrica { border-left: 1px solid var(--linea); }

@container inicio (max-width: 40rem) {
  .tk-primer-dia { grid-template-columns: minmax(0, 1fr); }
  .tk-pd-txt { padding: var(--e-4); }
  .tk-pd-cifras { border-left: 0; border-top: 1px solid var(--linea); }
  .tk-pd-cifras .metrica { flex: 1 1 0; min-width: 0; border-top: 0; }
  .tk-pd-cifras .metrica + .metrica { border-left: 1px solid var(--linea); }
}

/* ============================================================
   4. La sesión de hoy
   ============================================================ */
/* Tarjeta de la plantilla, sin sombra ni filete de color a un lado: el filo
   ya la separa, y el color va en el cuadro del icono. */
.inicio-paso {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--e-4) var(--e-5);
}
.inicio-paso-ico {
  width: 3rem; height: 3rem; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--seccion-lavado); color: var(--seccion-tinta);
}
.inicio-paso .folio { margin-bottom: var(--e-1); }
.inicio-paso h2 { font-size: var(--t-xl); }
.inicio-paso-texto { min-width: 0; }
.inicio-paso-texto > p:not(.folio) { margin-top: var(--e-2); color: var(--tinta-2); }
.inicio-paso-partes {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  margin-top: var(--e-3); font-size: var(--t-sm); color: var(--tinta-2);
}
.inicio-paso-partes li { display: inline-flex; align-items: center; gap: .375rem; }
.inicio-paso-partes .tk-icono { color: var(--seccion-tinta); }
.inicio-paso-partes b { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }

@container inicio (max-width: 36rem) {
  .inicio-paso { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--e-4) var(--e-3); }
  .inicio-paso-ico { width: 2.5rem; height: 2.5rem; }
  .inicio-paso > .btn { grid-column: 1 / -1; width: 100%; }
}

/* ============================================================
   5. Practica hoy: las cuatro herramientas
   ============================================================ */
.inicio-titulo { margin-top: var(--e-6); }

/* Cuatro en fila en la pantalla ancha y dos en el móvil. El mínimo va dentro
   de min() para que a 320 px, donde no caben dos, se apilen en vez de
   desbordar. */
.tk-herramientas {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}
/* Tarjeta plana de filo grueso, como las de «Método» en el sitio. Al pasar
   por encima solo se tiñe —filo de su color y un 4 % en el papel—: no crece
   ni se levanta, que la haría parecer un botón con relieve. Radio de 22, el
   de `.tarjeta`: con 16 eran las únicas tarjetas de contenido de la
   aplicación con otra esquina, justo encima de las de Mirar, Jugar y
   Pronunciar a las que llevan. */
.tk-herramienta {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3);
  min-width: 0; min-height: 2.75rem; padding: var(--e-4);
  background: var(--papel); color: var(--tinta); text-decoration: none;
  border: 2px solid var(--linea); border-radius: var(--r-xl);
  transition: background-color .15s ease, border-color .15s ease;
}
@media (hover: hover) {
  .tk-herramienta:hover {
    border-color: var(--seccion);
    background: color-mix(in srgb, var(--seccion) 4%, var(--papel));
  }
}
.tk-herramienta:active { border-color: var(--seccion); }
.tk-herramienta-ico {
  width: 2.75rem; height: 2.75rem; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--seccion-lavado); color: var(--seccion-tinta);
}
.tk-herramienta-txt { min-width: 0; }
.tk-herramienta-txt b {
  display: block; font-family: var(--display); font-size: var(--t-lg);
  font-weight: 600; letter-spacing: -.015em; line-height: 1.2;
}
.tk-herramienta-txt small { display: block; margin-top: .25rem; font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.45; }

/* ============================================================
   6. El expediente: la rejilla de bloques
   ============================================================ */
.inicio-panel { margin-top: var(--e-6); }
.tk-columna { min-width: 0; }
/* El hueco entre las dos columnas apiladas ya lo pone la rejilla; con el
   margen del último bloque encima eran 40 px donde en el resto hay 20. */
.tk-columna > .bloque:last-child { margin-bottom: 0; }

@container inicio (max-width: 56rem) {
  .inicio-panel .panel-rejilla-ancha { grid-template-columns: minmax(0, 1fr); }
}
@container inicio (min-width: 56.0625rem) {
  .inicio-panel .panel-rejilla-ancha { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* Lo que se pulsa dentro de un bloque. `.btn-panel` mide 32 px en la web,
   donde se usa con ratón; aquí se usa con el pulgar. */
.inicio .btn-panel { min-height: 2.75rem; }

/* Los huecos del esqueleto de los bloques. */
.inicio-panel .bloque > header > .cargando { width: 9rem; height: 1rem; }
.tk-hueco { display: block; width: 100%; }
.tk-hueco.alto { height: 16rem; }
.tk-hueco.medio { height: 9rem; }

/* El fallo de una llamada es `.fallo` con su botón de reintentar a 44 px,
   pieza común de app.css (§13): Inicio, Aprender, Mirar y Escuchar pintaban
   cada uno el suyo y el mismo corte de red se veía de tres maneras. Aquí solo
   queda el párrafo que envuelve el botón en el expediente (`panel.js`): el
   botón ya trae su margen, y el del párrafo lo duplicaba. */
.tk-fallo-acciones { margin-top: 0; }

/* ---------- las ocho habilidades ---------- */
/* El color de la barra dice cómo va cada una respecto a las demás, que es la
   única comparación que hace este bloque. «Por detrás» va en ámbar y no en
   coral: es lo que toca trabajar, no un suspenso. */
.barra-fila[data-relativo="por delante"] { --tono: var(--acierto-tinta); }
.barra-fila[data-relativo="por detrás"] { --tono: var(--xp-tinta); }
.barra-fila[data-relativo="sin datos"] > .valor { color: var(--tinta-3); font-weight: 400; }
/* La ficha de «qué mide cada una» cuando aún no hay datos. Son ocho filas
   fijas: en el móvil no necesitan la caja con desplazamiento propio que
   panel.css da a las tablas largas —una caja que se desplaza dentro de una
   página que se desplaza atrapa el dedo—, y la segunda columna se parte en
   dos líneas, así que la fila crece en vez de quedarse en 40 px con el
   texto pegado a los filetes. */
.tk-b-habilidades .tabla-envoltorio-panel { max-height: none; overflow: visible; }
.tk-b-habilidades .tabla-panel td { padding-block: var(--e-2); }
.tk-delta { margin-left: .25rem; font-size: var(--p-xs); font-weight: 600; }
.tk-delta.sube { color: var(--acierto-tinta); }
.tk-delta.baja { color: var(--tinta-3); }

/* ---------- la actividad ---------- */
/* panel.css tiene dos `.vacio`: el estado vacío de un bloque, con tres rem de
   relleno, y el día parado de la gráfica. El segundo heredaba el relleno del
   primero y reventaba la tira de sesenta columnas. */
.columnas > i.vacio { padding: 0; }

/* ---------- la escalera ---------- */
/* El tono de cada nivel, por su ficha. La plantilla lo escribe en un `style`
   por escalón; aquí sale de `data-nivel`, que ya dice qué nivel es. */
.escalon[data-nivel="A1"] { --tono: var(--n-a1-tinta); }
.escalon[data-nivel="A2"] { --tono: var(--n-a2-tinta); }
.escalon[data-nivel="B1"] { --tono: var(--n-b1-tinta); }
.escalon[data-nivel="B2"] { --tono: var(--n-b2-tinta); }
.escalon[data-nivel="C1"] { --tono: var(--n-c1-tinta); }
.escalon[data-nivel="C2"] { --tono: var(--n-c2-tinta); }
.tk-proyeccion { margin-top: var(--e-4); font-size: var(--p-sm); color: var(--tinta-2); }
.tk-proyeccion b { color: var(--tinta); font-weight: 700; }
/* La fiabilidad con su rango no cabe en un renglón a 320 px, y `.estado` no
   se parte: se salía del bloque. */
.estado.tk-fiabilidad { white-space: normal; line-height: 1.35; }

/* ---------- el objetivo de la semana ---------- */
.tk-sem-cifra {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .375rem;
  margin-bottom: var(--e-3); font-size: var(--p-sm); color: var(--tinta-3);
}
.tk-sem-cifra b {
  font-family: var(--display); font-size: var(--p-xl); font-weight: 600;
  letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.tk-sem-barra { height: .75rem; }
.tk-sem-pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-2) var(--e-3); margin-top: var(--e-4);
}
.tk-sem-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linea-suave);
}
.tk-sem-form label { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--p-sm); font-weight: 600; }
.tk-sem-form input { width: 5.5rem; }
.tk-sem-form select { flex: 1 1 9rem; min-width: 0; }

/* ---------- los logros ---------- */
.tk-logros { display: flex; flex-wrap: wrap; gap: var(--e-2); }
/* El punto de la medalla. La etiqueta sigue siendo gris: el color es una
   pista, el nombre ya lo dice. */
.tk-logro { gap: .375rem; }
.tk-logro::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%; flex: none;
  background: var(--medalla, var(--tinta-3));
}
.tk-logro[data-nivel="bronce"]  { --medalla: var(--n-c2-tinta); }
.tk-logro[data-nivel="plata"]   { --medalla: var(--tinta-3); }
.tk-logro[data-nivel="oro"]     { --medalla: var(--xp-tinta); }
.tk-logro[data-nivel="platino"] { --medalla: var(--premium-tinta); }

.tk-cerca { display: grid; gap: var(--e-3); }
.tk-logros + .tk-cerca { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linea-suave); }
.tk-cerca-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: .375rem var(--e-3); font-size: var(--p-sm);
}
.tk-cerca-fila .barra-pista { grid-column: 1 / -1; --tono: var(--xp-tinta); }
.tk-cerca-falta { color: var(--tinta-3); white-space: nowrap; }
.tk-cerca-falta b { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* ---------- qué practicar ---------- */
/* El bloque lleva `t-hablar`: los sonidos son del laboratorio de
   pronunciación y llevan su coral. */
.tk-b-practicar { overflow: hidden; }
.tk-debil { display: grid; }
.tk-debil-fila {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: center; gap: var(--e-3);
  width: 100%; min-height: 3rem; padding: var(--e-2) var(--e-4);
  font: inherit; font-size: var(--p-base); text-align: left; color: var(--tinta);
  background: none; border: 0; border-top: 1px solid var(--linea-suave);
}
.tk-debil-fila:first-child { border-top: 0; }
.tk-debil-fila.practicable { cursor: pointer; transition: background-color .15s ease; }
.tk-debil-fila.practicable:focus-visible { outline-offset: -3px; }
.tk-debil-fila > .tk-icono { color: var(--tinta-3); }
@media (hover: hover) {
  .tk-debil-fila.practicable:hover { background: var(--papel-2); }
  .tk-debil-fila.practicable:hover > .tk-icono { color: var(--seccion-tinta); }
}
.tk-fonema {
  font-size: var(--p-lg); font-weight: 700; line-height: 1.4; text-align: center;
  color: var(--seccion-tinta); background: var(--seccion-lavado);
  border-radius: var(--r-sm); padding: .125rem .25rem;
}
.tk-debil-que { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-3); min-width: 0; }
.tk-ej { font-weight: 600; font-style: italic; }
.tk-nota-corta, .tk-tasa { color: var(--tinta-3); font-size: var(--p-sm); }
.tk-tasa { font-variant-numeric: tabular-nums; }

/* ---------- la liga ---------- */
.tk-liga { display: flex; align-items: center; gap: var(--e-4); }
.tk-trofeo {
  width: 3rem; height: 3rem; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--xp-lavado); color: var(--xp-tinta);
}
.tk-puesto {
  font-family: var(--display); font-size: var(--p-xl); font-weight: 600;
  letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums;
}
.tk-puesto span { font-family: var(--texto); font-size: var(--p-sm); font-weight: 400; letter-spacing: 0; color: var(--tinta-3); }
/* El «º» de la serif a 28 px se lee como un signo de grados colgado del
   número. En la letra de texto y a su tamaño es un ordinal. */
.tk-puesto .tk-ordinal { font-size: var(--p-md); font-weight: 700; color: var(--tinta); }
.tk-liga .tk-detalle { margin-top: .375rem; font-size: var(--p-sm); color: var(--tinta-2); }

/* ---------- entre amigos ---------- */
.tk-amigos td.num:first-child { width: 2.5rem; text-align: left; color: var(--tinta-3); }
.tk-amigos tr.tk-yo td { font-weight: 700; background: var(--marca-lavado); }

/* ============================================================
   7. Accesos directos
   ============================================================ */
/* Un bloque de lista, no más tarjetas: aquí se viene a buscar un sitio. El
   `overflow` recorta el fondo de la fila tocada contra las esquinas del
   bloque; por eso el foco va hacia dentro. */
.inicio-accesos { margin-top: var(--p-e-45); overflow: hidden; }
.tk-accesos {
  display: grid; margin-top: -1px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.tk-acceso {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center; gap: var(--e-3);
  min-height: 3.5rem; padding: var(--e-3) var(--e-4);
  border-top: 1px solid var(--linea-suave);
  color: var(--tinta); text-decoration: none;
  transition: background-color .15s ease;
}
.tk-acceso:focus-visible { outline-offset: -3px; }
.tk-acceso-ico {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--seccion-lavado); color: var(--seccion-tinta);
}
.tk-acceso-txt { min-width: 0; }
.tk-acceso-txt b { display: block; font-size: var(--p-base); font-weight: 600; line-height: 1.3; }
.tk-acceso-txt small { display: block; margin-top: .125rem; font-size: var(--p-sm); color: var(--tinta-3); line-height: 1.4; }
.tk-acceso > .tk-icono:last-child { color: var(--tinta-3); }
@media (hover: hover) {
  .tk-acceso:hover { background: var(--papel-2); }
  .tk-acceso:hover > .tk-icono:last-child { color: var(--seccion-tinta); }
}