@charset "utf-8";
/* ============================================================
   app.css — la aplicación, vestida con la plantilla.

   QUÉ HAY DEBAJO. La aplicación carga las dos hojas de la plantilla tal
   cual, sin copiarlas: `/web/css/base.css` (paleta, letra, temas, botones,
   tarjetas, campos, avisos, la pantalla de acceso) y `/web/css/panel.css`
   (la columna lateral, los bloques, las cifras, las tablas). Esta hoja solo
   añade lo que una aplicación necesita y un sitio no: el armazón con la
   barra de abajo del móvil, la cabecera de cada pantalla, las pestañas de
   sección y los nombres de clase que ya escribe el JavaScript.

   POR QUÉ NO HAY UNA PALETA PROPIA. Hasta ahora la aplicación arrastraba
   tres capas —el <style> del index con el verde de la primera versión,
   `tokens.css` y `vida.css` corrigiendo encima— y el resultado se veía como
   otra empresa al pulsar «Entrar». Con una sola fuente de color, un cambio en
   la plantilla llega a las veinte pantallas sin tocar nada aquí.

   CÓMO SE ORGANIZA. Una hoja por área en `estilo/modulos/`, cargadas después
   de esta. Cada módulo usa las piezas de base.css y panel.css y solo escribe
   lo que es suyo. Si una pieza la necesitan dos módulos, sube aquí.

   LAS REGLAS DE LA PLANTILLA VALEN AQUÍ IGUAL: ni un emoji haciendo de icono,
   ninguna mecánica de castigo, el filo es la elevación (sombra solo en lo que
   flota de verdad) y el color de una pantalla se hereda de su sección.
   ============================================================ */

/* ============================================================
   1. La página
   ============================================================ */
body.app {
  background: var(--fondo);
  /* 16 px y no los 14 del panel: aquí se estudia, no se consulta un dato.
     Una definición, una nota de pronunciación o una frase de ejemplo se leen
     durante minutos seguidos. */
  font-size: 1rem;
  min-height: 100dvh;
}
/* `hidden` tiene que ganar siempre. Es la lección del panel: una regla con
   `display` se come el atributo y aparecen a la vez tres avisos que se
   contradicen. */
body.app [hidden] { display: none !important; }

/* Con :where() la regla pesa cero: es el valor por defecto y cualquier pieza
   (un botón, un enlace de la columna) la sustituye sin pelear. Escrita como
   `body.app a` pesaba más que `.btn-principal` y el texto del botón salía
   del color de un enlace. */
:where(body.app) a { color: var(--marca-tinta); }
:where(body.app) button { font: inherit; }

/* ============================================================
   2. El armazón: columna lateral + contenido
   ============================================================ */
.app-marco { min-height: 100dvh; }

/* La columna es la de panel.css; aquí solo lo que añade la aplicación. */
.app-lateral { z-index: 40; }
.app-lateral .panel-rotulo { color: var(--tinta); }

/* Racha y XP, arriba y a la vista. Estaban en una píldora de la cabecera y
   se leían como un adorno; en dos cifras con su rótulo se leen como lo que
   son, el marcador del día. */
.app-marcador {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 0; background: var(--papel);
  border: 1px solid var(--linea); border-radius: var(--panel-radio);
}
.app-marcador > div { padding: .5rem .75rem; min-width: 0; }
.app-marcador > div + div { border-left: 1px solid var(--linea); }
.app-marcador dt {
  font-size: var(--p-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-3);
}
.app-marcador dd {
  margin: .125rem 0 0; font-family: var(--display); font-size: 1.375rem;
  font-weight: 600; line-height: 1.1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
/* El color de cada cifra lo pone `.tono-racha` / `.tono-xp` (sección 11). */

/* Los enlaces de la columna son <a href="#vista">: se pueden abrir en otra
   pestaña, se copian y el lector de pantalla los anuncia como enlaces. */
.app-lateral .panel-grupo a { cursor: pointer; }

/* El pie de la columna: la cuenta y los dos ajustes que se tocan sin entrar
   al perfil —idioma y tema—. */
.app-lateral .panel-pie { display: grid; gap: var(--e-3); }
.app-rapidos { display: flex; align-items: center; gap: var(--e-2); }
.app-rapidos .tk-language { flex: 1; min-width: 0; }
.app-rapidos .luz { width: 2.75rem; height: 2.75rem; }

.tk-language { display: block; }
.tk-language select {
  width: 100%; min-height: 2.75rem;
  font: inherit; font-size: var(--p-sm); font-weight: 600;
  padding: 0 .625rem; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--panel-radio);
}
.tk-language select:hover { border-color: var(--tinta-3); }

/* ---------- el cuerpo ---------- */
.app-columna { min-width: 0; display: flex; flex-direction: column; }
.app-cuerpo { flex: 1; }
/* La medida del contenido. A 1920 px una tarjeta de lección estirada a 1600
   obliga a recorrer la pantalla entera para leer una frase; 72rem es el
   ancho del sitio (1160 px) con el respiro del panel. */
.app-cuerpo > .view {
  width: 100%; max-width: 72rem; margin-inline: auto;
}

/* ---------- la cabecera del móvil y la barra de abajo ---------- */
.app-cabecera-movil, .app-barra { display: none; }

@media (max-width: 60rem) {
  /* En la aplicación NO se usa la tira horizontal del panel. En un panel se
     salta entre cuatro secciones; aquí hay veinte, y en una tira de 390 px se
     veían tres. La columna entera se abre como hoja desde el botón de menú,
     y lo de todos los días va en la barra de abajo, al alcance del pulgar. */
  .app-marco { display: block; }
  .app-lateral {
    position: fixed; inset: 0 auto 0 0; width: min(20rem, 86vw); height: 100dvh;
    flex-direction: column; align-items: stretch; gap: var(--e-5);
    overflow-x: hidden; overflow-y: auto;
    border-right: 1px solid var(--linea); border-bottom: 0;
    padding: var(--e-4) var(--e-3);
    transform: translateX(-102%); visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
    box-shadow: var(--sombra-alta);
  }
  .app-lateral.abierta { transform: none; visibility: visible; transition: transform .22s ease; }
  .app-lateral .panel-grupo { display: grid; gap: 1px; }
  .app-lateral .panel-grupo > h2 { display: block; }
  .app-lateral .panel-grupo a { white-space: normal; }
  .app-lateral .panel-grupo a svg { display: block; }
  .app-lateral .panel-rotulo { padding: var(--e-2) var(--e-2) 0; }
  .app-lateral .panel-rotulo b { display: inline; }
  .app-lateral .panel-yo .quien { display: block; }
  .app-lateral .panel-pie {
    margin-top: auto; margin-left: 0; position: static;
    border-top: 1px solid var(--linea-suave); padding: var(--e-3) var(--e-2) 0;
    background: none;
  }

  .app-velo {
    position: fixed; inset: 0; z-index: 39;
    background: color-mix(in srgb, var(--tinta) 38%, transparent);
  }

  .app-cabecera-movil {
    display: flex; align-items: center; gap: var(--e-3);
    position: sticky; top: 0; z-index: 30;
    min-height: 3.5rem; padding: .375rem var(--e-4);
    padding-top: max(.375rem, env(safe-area-inset-top));
    background: color-mix(in srgb, var(--fondo) 92%, transparent);
    backdrop-filter: saturate(1.3) blur(10px);
    border-bottom: 1px solid var(--linea);
  }
  .app-menu {
    width: 2.75rem; height: 2.75rem; flex: none;
    display: grid; place-items: center; cursor: pointer;
    background: var(--papel); color: var(--tinta);
    border: 1px solid var(--linea); border-radius: var(--r-md);
  }
  .app-menu svg { width: 1.25rem; height: 1.25rem; }
  .app-cabecera-movil .rotulo { min-height: 2.75rem; color: var(--tinta); }
  .app-cabecera-movil .rotulo svg { width: 1.75rem; height: 1.75rem; }
  .app-cabecera-movil .rotulo b { font-size: 1.0625rem; }
  .app-cifras-movil { margin-left: auto; display: flex; gap: var(--e-2); }
  .app-cifra {
    display: inline-flex; align-items: center; gap: .3rem;
    min-height: 2.25rem; padding: 0 .625rem;
    font-weight: 700; font-size: var(--t-sm); font-variant-numeric: tabular-nums;
    border-radius: var(--r-full); background: var(--papel); border: 1px solid var(--linea);
  }
  .app-cifra svg { width: 1rem; height: 1rem; }

  .app-barra {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--papel); border-top: 1px solid var(--linea);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .app-barra a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1875rem;
    min-height: 3.75rem; padding: .375rem .125rem;
    font-size: .6875rem; font-weight: 600; line-height: 1.1; text-align: center;
    color: var(--tinta-3); text-decoration: none;
    position: relative;
  }
  .app-barra a svg { width: 1.375rem; height: 1.375rem; }
  /* La pestaña actual lleva su filete ARRIBA, en el borde que toca el
     contenido, además del color: dos señales, porque un gris azulado y un
     azul se confunden al sol. */
  .app-barra a[aria-current="page"] { color: var(--marca-tinta); }
  .app-barra a[aria-current="page"]::before {
    content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--marca);
  }
  .app-cuerpo { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 23rem) {
  .app-cabecera-movil .rotulo b { display: none; }
}

/* ============================================================
   3. La cabecera de cada pantalla
   ============================================================ */
/* Folio con su filete, titular en serif y entradilla: la misma apertura que
   las páginas del sitio, a la escala de una aplicación. Quien viene de leer
   «Planes» y entra reconoce la misma voz. */
.app-cabeza {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
  padding-bottom: var(--e-5); margin-bottom: var(--e-5);
  border-bottom: 1px solid var(--linea);
}
.app-cabeza > div:first-child { min-width: 0; flex: 1 1 24rem; }
.app-cabeza .folio { margin-bottom: var(--e-2); }
.app-cabeza h1 { font-size: var(--t-2xl); }
.app-cabeza p:not(.folio) { color: var(--tinta-2); font-size: var(--t-md); margin-top: var(--e-2); max-width: var(--medida); }
.app-cabeza .acciones { flex: none; }
/* En el móvil las acciones bajan a su propia línea y ocupan el ancho: con
   `flex: none` la caja medía lo que pedían sus botones, y `.acciones .btn`
   de base.css pide el 100 % por debajo de 30rem, así que se salían por la
   derecha. */
@media (max-width: 30rem) {
  .app-cabeza .acciones { flex: 1 1 100%; }
}

/* Los títulos de bloque dentro de una pantalla. */
.app-titulo { font-size: var(--t-xl); margin: var(--e-6) 0 var(--e-4); }
.app-titulo:first-child { margin-top: 0; }

/* ============================================================
   4. Las pestañas de sección
   ============================================================ */
/* Aprender y Academia tienen sus pantallas hermanas en pestañas. En el
   escritorio sobran —la columna ya las lista todas, con su grupo— y se
   retiran; en el móvil son la forma de pasar de una a otra sin abrir el
   menú. */
.tk-subnav {
  display: flex; gap: var(--e-1); overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--e-4)) var(--e-5); padding: 0 var(--e-4);
  border-bottom: 1px solid var(--linea);
}
.tk-subnav::-webkit-scrollbar { display: none; }
.tk-subnav :is(a, button) {
  flex: none; background: none; border: 0; cursor: pointer;
  min-height: 2.75rem; padding: 0 var(--e-3);
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2); text-decoration: none;
  display: inline-flex; align-items: center;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tk-subnav :is(a, button):hover { color: var(--tinta); }
.tk-subnav :is(a, button)[aria-current="page"] {
  color: var(--seccion-tinta); border-bottom-color: var(--seccion);
}
@media (min-width: 60.0625rem) { .tk-subnav { display: none; } }

/* ============================================================
   5. El color de la sección viaja con la vista
   ============================================================ */
/* `route()` pone `t-<vista>` en #view y todo lo de dentro hereda las cinco
   fichas de la sección —las mismas cinco de las clases `.s-*` de base.css—.
   Dar color a una pantalla nueva es añadirla a una de estas líneas. */
.t-inicio, .t-escuchar, .t-misclases, .t-guia, .t-estudio, .t-admin {
  --seccion: var(--marca); --seccion-tinta: var(--marca-tinta); --seccion-lavado: var(--marca-lavado); --seccion-hondo: var(--marca-hondo); --sobre-seccion: var(--sobre-marca);
}
.t-estudiar, .t-traductor, .t-referidos {
  --seccion: var(--acierto); --seccion-tinta: var(--acierto-tinta); --seccion-lavado: var(--acierto-lavado); --seccion-hondo: var(--acierto-hondo); --sobre-seccion: var(--sobre-acierto);
}
.t-hablar {
  --seccion: var(--racha); --seccion-tinta: var(--racha-tinta); --seccion-lavado: var(--racha-lavado); --seccion-hondo: var(--racha-hondo); --sobre-seccion: var(--sobre-racha);
}
.t-juegos {
  --seccion: var(--xp); --seccion-tinta: var(--xp-tinta); --seccion-lavado: var(--xp-lavado); --seccion-hondo: var(--xp-hondo); --sobre-seccion: var(--sobre-xp);
}
.t-imagenes {
  --seccion: var(--mirar); --seccion-tinta: var(--mirar-tinta); --seccion-lavado: var(--mirar-lavado); --seccion-hondo: var(--mirar-hondo); --sobre-seccion: var(--sobre-mirar);
}
.t-academia, .t-cursos, .t-nivel, .t-vivo, .t-claustro, .t-docente, .t-concurso, .t-perfil, .t-precios {
  --seccion: var(--premium); --seccion-tinta: var(--premium-tinta); --seccion-lavado: var(--premium-lavado); --seccion-hondo: var(--premium-hondo); --sobre-seccion: var(--sobre-premium);
}

/* ============================================================
   6. Piezas comunes de la aplicación
   ============================================================ */
/* Aquí iban los nombres de la versión anterior dibujados como la plantilla
   —`.card`, `.btn-primary`, `.btn-green`, `.btn-soft`, `.btn-ghost`,
   `.eyebrow`, `.field`, `.tag`, `.list-item`, `.grid3/.stat`, `.empty`,
   `.muted`, `.sub`— para que ninguna pantalla se quedara sin estilo mientras
   se rehacía. Rehechas todas, ya no los escribe nadie y se quitaron: un alias
   que sigue funcionando invita a volver a usarlo, y la plantilla tiene una
   sola forma de decir «tarjeta» o «botón principal». Lo que queda aquí es lo
   que la aplicación necesita y la plantilla no trae. */

/* panel.css anula el aire de TODAS las <section> del cuerpo porque en el
   panel cada bloque es una sección y base.css les pone 44–88 px de relleno de
   portada. Pero en la aplicación una tarjeta también puede ser <section>, y
   se quedaba con el texto pegado al filo de arriba y de abajo. Se le devuelve
   a la tarjeta el suyo; la sección suelta sigue sin aire de portada. */
.app-cuerpo section.tarjeta { padding-block: var(--e-5); }
@media (max-width: 48rem) {
  .app-cuerpo section.tarjeta { padding-block: var(--e-4); }
  /* base.css aligera el móvil del sitio saltándose el pintado de las
     secciones fuera de pantalla con una altura estimada de 32rem. Es para
     páginas largas de lectura; en una pantalla de la aplicación que se repinta
     con cada respuesta, esa altura inventada hace saltar la barra de
     desplazamiento y descoloca el «ir a donde estás» del camino. */
  .app-cuerpo section { content-visibility: visible; contain-intrinsic-size: none; }
}

/* Los botones de base.css, con lo que les falta dentro de la aplicación: el
   estado apagado, y el color del texto cuando son un <a> —`:where(body.app) a`
   no pesa, pero el enlace del navegador sí—. */
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn { text-decoration: none; }
a.btn-principal { color: var(--sobre-marca); }
a.btn-borde { color: var(--tinta); }

/* El botón de cerrar de las ventanas. */
.btn-x {
  width: 2.75rem; height: 2.75rem; flex: none; cursor: pointer;
  display: grid; place-items: center;
  background: var(--papel); color: var(--tinta-2);
  border: 1px solid var(--linea); border-radius: var(--r-md);
}
.btn-x:hover { border-color: var(--tinta-3); color: var(--tinta); }

/* Los campos sueltos que escribe el JavaScript, con el aspecto de .campo. */
:where(body.app) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
  font: inherit; font-size: var(--t-base); color: var(--tinta);
  background: var(--papel); border: 2px solid var(--linea); border-radius: var(--r-md);
  padding: .6875rem var(--e-3); min-height: 2.75rem;
}
:where(body.app) textarea { min-height: 7rem; resize: vertical; }
:where(body.app) :where(input, textarea, select):focus { border-color: var(--marca); outline: none; }
:where(body.app) :where(input, textarea, select):focus-visible { outline: 3px solid color-mix(in srgb, var(--marca) 35%, transparent); outline-offset: 1px; }
:where(body.app) ::placeholder { color: var(--tinta-3); opacity: 1; }
:where(body.app) :where(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--marca); }

.avatar {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-full); flex: none;
  display: grid; place-items: center;
  background: var(--marca); color: var(--sobre-marca);
  font-family: var(--texto); font-weight: 700;
}

/* El estado vacío, el de panel.css con más aire. */
.tk-vacio {
  display: grid; justify-items: center; gap: var(--e-2);
  text-align: center; padding: var(--e-7) var(--e-5);
  background: var(--papel); border: 1px dashed var(--linea); border-radius: var(--r-lg);
  color: var(--tinta-2); font-size: var(--t-sm);
}
.tk-vacio strong, .tk-vacio b {
  display: block; font-family: var(--display); font-size: var(--t-lg); font-weight: 600; color: var(--tinta);
}

/* ============================================================
   7. Lo que flota: aviso breve, ventana y hoja
   ============================================================ */
/* Sombra aquí sí: es de lo poco que flota de verdad sobre la pantalla. */
.toast {
  position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom)); z-index: 90;
  transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  max-width: min(28rem, calc(100vw - 2rem));
  background: var(--tinta); color: var(--papel);
  padding: .75rem 1.125rem; border-radius: var(--r-md);
  font-weight: 600; font-size: var(--t-sm); box-shadow: var(--sombra-alta);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 1em; height: 1em; vertical-align: -.125em; }
@media (max-width: 60rem) { .toast { bottom: calc(5rem + env(safe-area-inset-bottom)); } }

.modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: var(--e-4);
  background: color-mix(in srgb, var(--tinta) 45%, transparent);
}
.modal .box {
  width: 100%; max-width: 32rem; max-height: calc(100dvh - 2rem); overflow-y: auto;
  background: var(--papel); color: var(--tinta);
  border: 2px solid var(--linea); border-radius: var(--r-xl);
  padding: var(--e-6); box-shadow: var(--sombra-alta);
}
.modal .box h3 { font-size: var(--t-xl); }
@media (max-width: 30rem) {
  .modal { place-items: end center; padding: 0; }
  .modal .box { border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; padding: var(--e-5) var(--e-4) calc(var(--e-5) + env(safe-area-inset-bottom)); }
}

/* La ventana de preguntar (`TK.preguntar`, en el armazón del index). Es la
   que sustituye a las preguntas del navegador —confirmar, escribir un
   motivo—, y por eso vive aquí y no en una hoja de área: la usan la sesión,
   la agenda en vivo, los vídeos, la prueba de nivel, el concurso, el perfil y
   la administración. Titular en serif, lo que se va a tocar en su propio
   recuadro —el título de la clase, la cuenta, el modelo— para que no haya
   duda de sobre qué se pregunta, y los botones a la derecha con el que no
   destruye primero. */
.tk-preguntar .folio { margin-bottom: var(--e-2); }
.tk-preguntar-texto { margin-top: var(--e-2); color: var(--tinta-2); max-width: var(--medida); }
.tk-preguntar-objeto {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3);
  margin-top: var(--e-4); padding: var(--e-3) var(--e-4);
  background: var(--papel-2); border-radius: var(--r-md);
  font-weight: 600; overflow-wrap: anywhere;
}
/* El dato secundario (la fecha de la clase) baja a su renglón, en gris. */
.tk-preguntar-objeto > span:not(.etiqueta) { flex-basis: 100%; font-size: var(--t-sm); font-weight: 400; color: var(--tinta-2); }
.tk-preguntar .campo { margin: var(--e-4) 0 0; }
/* La pista y el error son dos <p> seguidos dentro de la rejilla del campo: el
   `p + p` de base.css les sumaba 16 px al hueco y el error quedaba lejos. */
.tk-preguntar .campo p + p { margin-top: 0; }
.tk-preguntar .fallo { margin-top: var(--e-4); }
.tk-preguntar-acciones { justify-content: flex-end; margin-top: var(--e-5); }
/* El motivo por el que un campo no vale lo pone la ventana con
   `aria-invalid`: `.campo .error` de base.css solo se enseña con
   `:user-invalid`, que depende de las reglas del navegador y no sabe que hay
   que escribir BORRAR. */
.campo :is(input, textarea)[aria-invalid="true"] { border-color: var(--racha-tinta); }
.campo :is(input, textarea)[aria-invalid="true"] ~ .error:not(:empty) { display: block; }

/* El aviso global que publica el administrador. */
.tk-aviso-global {
  display: flex; align-items: center; gap: var(--e-3);
  padding: .625rem var(--e-4);
  background: var(--xp-lavado); color: var(--tinta);
  border-bottom: 1px solid color-mix(in srgb, var(--xp) 40%, transparent);
  font-size: var(--t-sm); font-weight: 600;
}
.tk-aviso-global span { flex: 1; }
.tk-aviso-global button {
  width: 2.75rem; height: 2.75rem; flex: none; cursor: pointer;
  display: grid; place-items: center; background: none; border: 0; color: var(--tinta-2);
}

/* La entrada de cada pantalla: un fundido corto, sin desplazamiento. */
.viewfade { animation: app-entra .2s ease both; }
@keyframes app-entra { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   8. La pantalla de acceso de la aplicación
   ============================================================ */
/* Las piezas son las de base.css §29 (.acceso-marco, .acceso, .acceso-recado,
   .acceso-pie): entrar, crear la cuenta, el código del correo, recuperar la
   contraseña y activar una invitación se ven exactamente como `entrar.html`
   del sitio, porque son la misma puerta. Por eso aquí no se toca ni el fondo
   del marco: con `--fondo` en vez del `--papel-2` de la plantilla, pasar de
   `/entrar` a `/app/#entrar` cambiaba el color de la pantalla entera. */
.acceso .campo { margin-bottom: var(--e-4); }
.acceso .campo .pista { font-size: var(--t-xs); color: var(--tinta-3); }
.acceso .campo-codigo {
  font-family: var(--display); font-size: var(--t-xl); letter-spacing: .3em; text-align: center;
}
.acceso-marca svg { width: 2.5rem; height: 2.5rem; }
/* El folio del primer día va debajo de la marca, no a su lado: los dos son
   `inline-flex` y en la tarjeta del primer día se ponían en la misma línea,
   con «PRIMER DÍA» pegado a «Talkademy». */
.acceso > .folio { display: flex; }
.acceso-segundo { margin-top: var(--e-3); }
.acceso-legal { margin-top: var(--e-4); font-size: var(--t-xs); color: var(--tinta-3); }
.acceso-legal a { color: var(--tinta-2); }
.acceso-idioma { margin-top: var(--e-4); max-width: 14rem; }
.acceso-cargando { text-align: center; color: var(--tinta-3); }

/* Los tres pasos del primer día. */
.app-pasos { list-style: none; display: grid; gap: var(--e-4); margin: 0 0 var(--e-5); }
.app-pasos li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--e-3); align-items: start; }
.app-pasos-ico {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--marca-lavado); color: var(--marca-tinta);
}
.app-pasos b { display: block; font-size: var(--t-base); }
.app-pasos li span:not(.app-pasos-ico) { display: block; color: var(--tinta-2); font-size: var(--t-sm); margin-top: .125rem; line-height: 1.5; }

/* ============================================================
   9. Iconos
   ============================================================ */
/* `iconos.js` cambia cada <i data-ico> por un <svg class="tk-icono"> que toma
   `currentColor`. Mientras no lo ha hecho, el hueco ya mide lo que medirá:
   sin esto, la línea salta al llegar el dibujo. */
i[data-ico] { display: inline-block; width: 1.125em; height: 1.125em; vertical-align: -.18em; font-style: normal; }
.tk-icono { display: inline-block; vertical-align: -.18em; flex: none; }
.tk-icono + * { margin-left: .45em; }

/* El símbolo fonético que sustituyó a los emoji de animales en los pares
   mínimos: en Charis SIL, que es la que dibuja bien la fonética, y no en
   letra de máquina. */
.tk-simbolo-fonetico {
  display: inline-block; line-height: 1.35;
  font-family: var(--fonetica); font-size: 1.05em; font-weight: 700;
  color: var(--seccion-tinta); background: var(--seccion-lavado);
  border: 1px solid color-mix(in srgb, var(--seccion) 24%, transparent);
  border-radius: var(--r-sm); padding: .1em .45em;
}

/* ============================================================
   10. El mando de velocidad (`velocidad.js`)
   ============================================================ */
/* `TKVelocidad.control()` es uno para toda la plataforma —la sesión de
   estudio, el reproductor de vídeo, Mirar y Escuchar— y el ajuste es uno solo,
   así que se dibuja igual en todas: menos, el valor y más, pegados en una
   pieza de filo. Vivía copiado en tres hojas de módulo con tres tamaños de
   signo y dos colores para «fuera de 1×»; aquí queda una vez. El color de la
   mano y del valor cambiado es el de la sección donde está: fuera de una
   vista (la ventana del vídeo) cae en la marca, que es lo que vale `--seccion`
   en la raíz. */
.tk-vel {
  display: inline-flex; align-items: stretch; flex: none; vertical-align: middle;
  background: var(--papel); color: var(--tinta);
  border: 2px solid var(--linea); border-radius: var(--r-md);
  overflow: hidden; font-size: var(--t-sm);
}
.tk-vel-tit {
  display: inline-flex; align-items: center;
  padding-inline: var(--e-3) var(--e-2);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-3); white-space: nowrap;
}
.tk-vel.compacto .tk-vel-tit { display: none; }
.tk-vel button {
  font: inherit; line-height: 1; cursor: pointer;
  min-height: 2.75rem; margin: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--tinta-2);
}
.tk-vel .tk-vel-b { width: 2.75rem; font-size: var(--t-lg); font-weight: 700; }
@media (hover: hover) {
  .tk-vel .tk-vel-b:hover:not(:disabled) { background: var(--seccion-lavado); color: var(--seccion-tinta); }
}
/* Apagado cuando ya no hay a dónde ir: un botón que no hace nada y no lo
   dice se toma por una avería. */
.tk-vel .tk-vel-b:disabled { color: var(--tinta-3); opacity: .45; cursor: default; }
.tk-vel .tk-vel-v {
  min-width: 3.5rem; padding-inline: var(--e-2);
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta);
  border-inline: 1px solid var(--linea);
}
/* Fuera de 1× se ve: si no, alguien lo deja al 0,5 sin darse cuenta y cree
   que la plataforma va lenta. */
.tk-vel .tk-vel-v.cambiado { color: var(--seccion-tinta); background: var(--seccion-lavado); }
/* Hacia dentro: la pieza recorta lo que sale de su filo. */
.tk-vel button:focus-visible { outline: 3px solid var(--marca); outline-offset: -3px; }

/* ============================================================
   11. Tonos de familia para piezas pequeñas
   ============================================================ */
/* Una cifra de racha es naranja en Inicio, en Perfil y en Aprender, y cada
   hoja se había escrito la suya (`pf-cifra-racha`, `adm-cifra-usuarios`,
   `ref-cifra-saldo`, `m-racha`…): cuatro nombres para el mismo color y
   cuatro sitios que corregir si la familia cambia. Estas seis son las fichas
   de la plantilla con nombre de pieza:

     · `--tono` con la variante `-tinta`, que es lo que leen `.metrica dd`
       y `.barra-pista > i` de panel.css;
     · `color` con la misma tinta, para una cifra o un texto corto sueltos
       (≥ 4,5:1 sobre papel en claro y en oscuro);
     · las cinco `--seccion*`, para que un `.chip`, un `.estado` o un botón
       de la sección dentro de la pieza tomen el lavado de la misma familia.

   Para piezas pequeñas —una cifra, un chip, una barra, una etiqueta—, no para
   un bloque entero: en un contenedor, `color` teñiría todo el texto de
   dentro. Para dar color a un bloque se usa `.s-<familia>` de base.css. */
.tono-marca   { --tono: var(--marca-tinta);   color: var(--marca-tinta);   --seccion: var(--marca);   --seccion-tinta: var(--marca-tinta);   --seccion-lavado: var(--marca-lavado);   --seccion-hondo: var(--marca-hondo);   --sobre-seccion: var(--sobre-marca); }
.tono-racha   { --tono: var(--racha-tinta);   color: var(--racha-tinta);   --seccion: var(--racha);   --seccion-tinta: var(--racha-tinta);   --seccion-lavado: var(--racha-lavado);   --seccion-hondo: var(--racha-hondo);   --sobre-seccion: var(--sobre-racha); }
.tono-xp      { --tono: var(--xp-tinta);      color: var(--xp-tinta);      --seccion: var(--xp);      --seccion-tinta: var(--xp-tinta);      --seccion-lavado: var(--xp-lavado);      --seccion-hondo: var(--xp-hondo);      --sobre-seccion: var(--sobre-xp); }
.tono-acierto { --tono: var(--acierto-tinta); color: var(--acierto-tinta); --seccion: var(--acierto); --seccion-tinta: var(--acierto-tinta); --seccion-lavado: var(--acierto-lavado); --seccion-hondo: var(--acierto-hondo); --sobre-seccion: var(--sobre-acierto); }
.tono-premium { --tono: var(--premium-tinta); color: var(--premium-tinta); --seccion: var(--premium); --seccion-tinta: var(--premium-tinta); --seccion-lavado: var(--premium-lavado); --seccion-hondo: var(--premium-hondo); --sobre-seccion: var(--sobre-premium); }
.tono-mirar   { --tono: var(--mirar-tinta);   color: var(--mirar-tinta);   --seccion: var(--mirar);   --seccion-tinta: var(--mirar-tinta);   --seccion-lavado: var(--mirar-lavado);   --seccion-hondo: var(--mirar-hondo);   --sobre-seccion: var(--sobre-mirar); }
/* En una cifra el rótulo y el pie siguen en gris: el color es del número. */
:is(.tono-marca, .tono-racha, .tono-xp, .tono-acierto, .tono-premium, .tono-mirar) :is(dt, .pie) { color: var(--tinta-3); }

/* ============================================================
   12. El control segmentado
   ============================================================ */
/* Para elegir entre pocas cosas sin salir de la pantalla: el nivel en Mirar y
   en Vídeos, el modo en Mirar, en Pronunciar y en la foto de Mis clases, el
   tema en el perfil. Una bandeja hundida en `--papel-2` y la opción elegida
   levantada en papel, con el filo y la tinta de la sección: la distinguen la
   superficie, el filo y el texto, no un solo cambio de color, porque un gris
   y un color flojo se confunden al sol. `aria-pressed` es lo que oye un lector
   de pantalla.

   Estaba copiado en cinco hojas de módulo con las mismas medidas escritas
   cinco veces, y cada copia decía en su comentario que era «el mismo dibujo
   que las otras cuatro». Aquí queda una vez; cada hoja pone solo cómo se
   reparte en su pantalla.

     <div class="segmentado" role="group" aria-label="Nivel">
       <button type="button" aria-pressed="true">Todos <small>62</small></button>
       <button type="button" aria-pressed="false">A1 <small>17</small></button>
     </div>

   · Un `<small>` hijo de la opción es su segundo renglón —una cuenta, una
     explicación de tres palabras—, debajo y en gris.
   · `.segmentado-ancho` ocupa el ancho de su caja con las opciones a partes
     iguales; sin ella, la bandeja mide lo que miden sus opciones.
   · `.segmentado-filas` es para muchas opciones cortas (los seis niveles y
     «Todos»): en el móvil se parte en filas de cuatro en vez de salirse de
     lado con el nivel propio escondido.
   · Por debajo de 30rem toda bandeja ocupa el ancho: a 390 px, una bandeja a
     medias deja al lado un hueco que no sirve para nada.

   Las opciones pesan lo mismo que una clase (`:where`) a propósito: la
   pantalla que necesita otra forma dentro —la foto de Mis clases lleva icono
   y explicación a la izquierda— la escribe en su hoja sin pelear con esta. */
.segmentado {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: .25rem; padding: .25rem; max-width: 100%;
  background: var(--papel-2);
  border: 1px solid var(--linea); border-radius: var(--r-md);
}
.segmentado-ancho { display: grid; }
.segmentado > :where(button) {
  display: grid; justify-items: center; align-content: center; gap: .0625rem;
  min-width: 0; min-height: 2.75rem; padding: var(--e-2) var(--e-3);
  font: inherit; font-size: var(--t-sm); font-weight: 600; line-height: 1.2; text-align: center;
  color: var(--tinta-2); background: transparent;
  border: 2px solid transparent; border-radius: calc(var(--r-md) - .25rem);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.segmentado > :where(button) > :where(small) {
  font-size: var(--t-xs); font-weight: 500; color: var(--tinta-3); font-variant-numeric: tabular-nums;
}
.segmentado > :where(button) :where(b) { font-weight: 700; }
.segmentado > :where(button):hover { color: var(--tinta); background: color-mix(in srgb, var(--papel) 60%, transparent); }
.segmentado > :where(button)[aria-pressed="true"] {
  background: var(--papel); color: var(--seccion-tinta); border-color: var(--seccion);
}
.segmentado-filas > :where(button) { min-width: 3.5rem; font-weight: 700; }
@media (max-width: 30rem) {
  .segmentado { display: grid; }
  .segmentado-filas { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .segmentado-filas > :where(button) { min-width: 0; padding-inline: var(--e-1); }
}

/* ============================================================
   13. El fallo de una llamada
   ============================================================ */
/* `.fallo` de panel.css es como toda pantalla dice que una petición no llegó:
   icono y frase sobre el lavado de racha, y un `.btn-panel` para reintentar.
   Tres hojas —Inicio para toda «Tu estudio», Vídeos y el Programa— le añadían
   lo mismo acotado a sus vistas, y Aprender, Perfil o la cuenta se quedaban
   sin ello: el botón a 44 px, porque en panel.css mide 32 y aquí se pulsa con
   el pulgar; el icono arriba y no a media altura cuando la frase ocupa dos
   renglones; aire debajo antes de lo que siga; y sin el margen que
   `.tk-icono + *` pone detrás de cada icono, que dentro de la rejilla se
   sumaba al hueco y descuadraba la columna del texto. */
.fallo { align-items: start; }
.fallo > .tk-icono + * { margin-left: 0; }
.fallo .btn-panel { margin-top: var(--e-3); min-height: 2.75rem; }
.app-cuerpo .fallo { margin-bottom: var(--p-e-45); }

/* ============================================================
   14. En papel
   ============================================================ */
@media print {
  .app-lateral, .app-cabecera-movil, .app-barra, .tk-subnav, .toast { display: none !important; }
  .app-marco { display: block; }
  body.app { background: #fff; }
}