@charset "utf-8";
/* ============================================================
   modulos/escuchar.css — la escucha continua (#escuchar).

   Se carga después de base.css, panel.css y app.css. Solo lo que es de
   esta área: la cabecera de pantalla, la tarjeta, el bloque de datos, los
   botones de borde, la palanca y el estado vacío ya vienen de la plantilla y
   aquí se usan tal cual.

   El color es el de la sección: `t-escuchar` pone el azul de marca en
   `--seccion` y todo lo de aquí lo hereda, en claro y en oscuro, sin una
   sola regla por tema.

   Es la única pantalla pensada para dejar puesta y no mirar, así que lo que
   importa es que se lea de lejos y de un vistazo: la frase en serif grande,
   el botón de reproducir como la pieza más grande y más llena de color, y el
   estado —sonando, cargando, en pausa— dicho con palabras y no solo con un
   icono.
   ============================================================ */

/* ============================================================
   1. El reparto

   Una columna en el móvil —el reproductor, los ajustes y la lista, en ese
   orden—; dos cuando el contenido pasa de 50rem: el reproductor y la lista a
   la izquierda, los ajustes a la derecha. Se decide por el ancho del propio
   contenido (consulta de contenedor) y no de la ventana, porque la columna
   lateral de la aplicación se come 15rem que la ventana no sabe restar.
   ============================================================ */
#tk-esc-cuerpo { container: escucha / inline-size; }

.tk-esc-rejilla {
  display: grid; gap: var(--p-e-45); align-items: start;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "play" "ajustes" "lista";
}
.tk-esc-play, .tk-esc-play-hueco { grid-area: play; }
.tk-esc-ajustes { grid-area: ajustes; }
.tk-esc-lista-bloque { grid-area: lista; }
/* `.bloque` trae su margen de abajo para apilarse suelto; dentro de la
   rejilla lo pone el hueco, y con los dos se sumaban. */
.tk-esc-rejilla > .bloque { margin-bottom: 0; }

@container escucha (min-width: 50rem) {
  /* La segunda fila es flexible para que el alto de más de los ajustes caiga
     debajo de la lista y no abra un hueco entre el reproductor y ella. */
  .tk-esc-rejilla {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "play ajustes" "lista ajustes";
  }
}

/* ---------- mientras carga ---------- */
.tk-esc-esqueleto { display: grid; gap: var(--p-e-45); }
.tk-esc-esqueleto .cargando { display: block; min-width: 0; }
.tk-esc-esq-play { height: 24rem; border-radius: var(--r-xl) !important; }
.tk-esc-esq-ajustes { height: 18rem; border-radius: var(--panel-radio) !important; }
@container escucha (min-width: 50rem) {
  .tk-esc-esqueleto { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}

/* ============================================================
   2. El reproductor
   ============================================================ */
.tk-esc-play { display: grid; gap: var(--e-4); min-width: 0; }

.tk-esc-cab { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--e-2) var(--e-3); }

/* El estado, con su palabra. Neutro en pausa y cargando; del color de la
   sección solo cuando suena, que es lo único que merece llamar la atención. */
.tk-esc-estado {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 1.875rem; padding: .25rem .75rem .25rem .625rem;
  border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 700;
  background: var(--papel-2); color: var(--tinta-2);
}
.tk-esc-estado[data-estado="sonando"] { background: var(--seccion-lavado); color: var(--seccion-tinta); }
.tk-esc-onda { display: inline-flex; align-items: flex-end; gap: 2px; height: .875rem; }
.tk-esc-onda span {
  width: 3px; height: 100%; border-radius: 2px;
  background: currentColor; transform-origin: bottom; transform: scaleY(.35);
}
.tk-esc-estado[data-estado="sonando"] .tk-esc-onda span { animation: tk-esc-barra .82s ease-in-out infinite; }
.tk-esc-estado[data-estado="sonando"] .tk-esc-onda span:nth-child(2) { animation-delay: .16s; }
.tk-esc-estado[data-estado="sonando"] .tk-esc-onda span:nth-child(3) { animation-delay: .32s; }
.tk-esc-estado[data-estado="cargando"] .tk-esc-onda span { animation: tk-esc-latido 1.1s ease-in-out infinite; }
.tk-esc-estado[data-estado="cargando"] .tk-esc-onda span:nth-child(2) { animation-delay: .18s; }
.tk-esc-estado[data-estado="cargando"] .tk-esc-onda span:nth-child(3) { animation-delay: .36s; }
@keyframes tk-esc-barra { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes tk-esc-latido { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.tk-esc-pos { font-size: var(--t-sm); color: var(--tinta-3); font-variant-numeric: tabular-nums; }

/* Alto mínimo generoso: la pista cambia cada dos segundos y, ajustado al
   texto, los mandos subían y bajaban veinte veces por minuto. */
.tk-esc-ahora {
  min-height: 13rem; display: grid; align-content: center; justify-items: center;
  gap: var(--e-2); text-align: center; padding-block: var(--e-2);
}
.tk-esc-play.es-cargando .tk-esc-ahora { opacity: .55; }
.tk-esc-origen {
  display: flex; align-items: center; justify-content: center; gap: var(--e-2);
  max-width: 100%; min-width: 0; font-size: var(--t-sm); color: var(--tinta-3);
}
.tk-esc-leccion { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El chip de nivel en la letra de texto, como en el resto de la aplicación. */
.tk-esc-nv { flex: none; font-size: var(--t-xs); padding: .125rem .5rem; }
.tk-esc-en {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  line-height: 1.12; letter-spacing: -.025em;
  max-width: 16em; text-wrap: balance; overflow-wrap: anywhere;
}
.tk-esc-pron { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .25rem var(--e-3); }
.tk-esc-ipa { font-size: var(--t-lg); font-weight: 700; color: var(--seccion-tinta); }
/* La pronunciación figurada es para leerla en voz alta tal cual: como
   `.unidad-pron` de la plantilla, espaciada y gris, por debajo de la fonética. */
.tk-esc-figurada { font-size: var(--t-sm); font-weight: 600; letter-spacing: .05em; color: var(--tinta-3); }
.tk-esc-es { font-size: var(--t-md); color: var(--tinta-2); max-width: 30em; }

/* La barrita de la pista. Relleno en la variante tinta: con el color vivo no
   llegaba al 3:1 que pide un elemento gráfico sobre su pista. */
.tk-esc-barra {
  justify-self: center; width: min(24rem, 100%); height: .375rem;
  border-radius: var(--r-full); background: var(--papel-2); overflow: hidden;
}
.tk-esc-barra span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--seccion-tinta); }

.tk-esc-mandos { display: flex; align-items: center; justify-content: center; gap: var(--e-5); }
/* Anterior y siguiente son `.btn-borde` de la plantilla, redondos y a 56 px:
   se tocan con el móvil en la mano y sin mirar. */
.tk-esc-btn {
  width: 3.5rem; height: 3.5rem; min-height: 0; padding: 0;
  border-radius: var(--r-full); flex: none;
}
.tk-esc-btn .tk-icono, .tk-esc-btn i[data-ico] { width: 1.375rem; height: 1.375rem; margin: 0; }
/* Reproducir es la pieza más grande y la única llena de color: el relieve
   sólido de los botones de la plantilla, del tono hondo de la sección. */
.tk-esc-btn-play {
  width: 5rem; height: 5rem; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: var(--r-full);
  background: var(--seccion); color: var(--sobre-seccion);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--seccion) 62%, #000);
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.tk-esc-btn-play:hover { background: color-mix(in oklab, var(--seccion) 92%, #000); }
.tk-esc-btn-play:active { transform: translateY(4px); box-shadow: none; background: var(--seccion-hondo); }
.tk-esc-btn-play .tk-icono, .tk-esc-btn-play i[data-ico] { width: 2rem; height: 2rem; margin: 0; }
@media (max-width: 22rem) { .tk-esc-mandos { gap: var(--e-4); } }

/* ============================================================
   3. Los ajustes
   ============================================================ */
.tk-esc-ajustes { min-width: 0; }
.tk-esc-fuentes { display: grid; gap: var(--e-2); }

/* Las tres fuentes son opciones de radio con su explicación: el círculo de
   la izquierda dice «se elige una», y la elegida lleva además el lavado y el
   filo de la sección, dos señales y no solo color. */
.tk-esc-op {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: var(--e-3); row-gap: .125rem;
  align-items: start; width: 100%; padding: var(--e-3);
  font: inherit; text-align: left; color: var(--tinta); cursor: pointer;
  background: var(--papel); border: 2px solid var(--linea); border-radius: var(--r-md);
  transition: background-color .15s ease, border-color .15s ease;
}
.tk-esc-op::before {
  content: ""; grid-row: 1 / span 2; width: 1.25rem; height: 1.25rem; margin-top: .0625rem;
  border-radius: var(--r-full); border: 2px solid var(--tinta-3); background: var(--papel);
}
.tk-esc-op b { grid-column: 2; font-size: var(--t-sm); font-weight: 700; line-height: 1.35; }
.tk-esc-op small { grid-column: 2; font-size: var(--t-xs); color: var(--tinta-3); line-height: 1.45; }
.tk-esc-op:hover:not(:disabled) { border-color: var(--seccion); }
.tk-esc-op[aria-checked="true"] { border-color: var(--seccion); background: var(--seccion-lavado); }
/* El punto del radio: un anillo de papel dentro del círculo lleno. */
.tk-esc-op[aria-checked="true"]::before {
  border-color: var(--seccion-tinta); background: var(--seccion-tinta);
  box-shadow: inset 0 0 0 3px var(--papel);
}
/* Una opción que no está disponible no puede salir marcada y al 50 %: se lee
   como rota. Filo discontinuo y la razón escrita debajo. */
.tk-esc-op:disabled { cursor: not-allowed; background: var(--papel-2); border-style: dashed; }
.tk-esc-op:disabled b { color: var(--tinta-2); }
.tk-esc-op:disabled::before { border-color: var(--linea); background: transparent; }

.tk-esc-grupo { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linea-suave); }
.tk-esc-rotulo {
  font-size: var(--p-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: var(--e-2);
}
.tk-esc-chips, .tk-esc-niveles { display: flex; flex-wrap: wrap; gap: var(--e-2); }
/* Los chips de elegir, con la forma de los de Vídeos, Jugar y Mirar: píldora
   de filo y, elegido, relleno del color. Los niveles son los mismos chips
   con la clase de su escalón (`.n-a1` … `.n-c2` redefine la sección en el
   propio botón), así que el elegido se llena del color de su nivel. Eran
   cuadrados en la serif y parecían otra pieza al lado de los minutos. */
.tk-esc-chip, .tk-esc-nivel {
  min-height: 2.75rem; padding: 0 1.125rem;
  font: inherit; font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  color: var(--tinta); background: var(--papel); cursor: pointer;
  border: 2px solid var(--linea); border-radius: var(--r-full);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.tk-esc-nivel { min-width: 3.5rem; }
.tk-esc-chip:hover, .tk-esc-nivel:hover { border-color: var(--seccion); background: var(--seccion-lavado); }
.tk-esc-chip[aria-checked="true"], .tk-esc-nivel[aria-checked="true"] {
  background: var(--seccion); border-color: var(--seccion); color: var(--sobre-seccion);
}

.tk-esc-linea {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  min-height: 2.75rem; margin-top: var(--e-3);
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2);
}
label.tk-esc-linea { cursor: pointer; }

/* ============================================================
   4. Lo que va a sonar
   ============================================================ */
.tk-esc-lista { list-style: none; margin: 0; padding: var(--e-2); display: grid; gap: 2px; }
.tk-esc-fila {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: var(--e-3);
  padding: var(--e-2); border-radius: var(--panel-radio);
}
.tk-esc-num {
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: var(--r-full); background: var(--papel-2);
  font-size: var(--t-xs); font-weight: 700; color: var(--tinta-3); font-variant-numeric: tabular-nums;
}
.tk-esc-texto { display: grid; min-width: 0; }
.tk-esc-texto b { font-size: var(--t-base); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.tk-esc-texto small { font-size: var(--t-sm); color: var(--tinta-3); line-height: 1.35; overflow-wrap: anywhere; }
/* La actual: el lavado de la sección en la fila y su número lleno. Sin filete
   a un lado: el fondo y el número ya son dos señales. */
.tk-esc-fila.es-actual { background: var(--seccion-lavado); }
.tk-esc-fila.es-actual .tk-esc-num { background: var(--seccion); color: var(--sobre-seccion); }
.tk-esc-fila.es-actual .tk-esc-texto small { color: var(--tinta-2); }

/* ============================================================
   5. Sin audio
   ============================================================ */
.tk-esc-vacio-ico {
  width: 3rem; height: 3rem; display: grid; place-items: center;
  border-radius: var(--r-full); background: var(--seccion-lavado); color: var(--seccion-tinta);
}
.tk-esc-vacio-ico .tk-icono, .tk-esc-vacio-ico i[data-ico] { width: 1.5rem; height: 1.5rem; margin: 0; }
.tk-esc-vacio .tk-esc-rotulo { margin: var(--e-3) 0 0; }
.tk-esc-vacio .tk-esc-niveles { justify-content: center; }
.tk-esc-vacio .btn { margin-top: var(--e-3); }

/* ============================================================
   6. El mando de velocidad

   Es el de `velocidad.js`, uno solo para toda la plataforma, y no se viste
   aquí: la copia acotada a esta pantalla tenía otra letra y otro color al
   pasar el ratón, y el mismo mando cambiaba de aspecto entre la sesión,
   Mirar y Escuchar.
   ============================================================ */

/* ============================================================
   7. Menos movimiento
   ============================================================ */
/* Quien lo pide sigue viendo el estado, pero quieto: que suene o no es
   información, no adorno. Las barras se quedan a distinta altura, que se lee
   como «sonando» sin moverse. */
@media (prefers-reduced-motion: reduce) {
  .tk-esc-estado .tk-esc-onda span { animation: none !important; }
  .tk-esc-estado[data-estado="sonando"] .tk-esc-onda span { transform: scaleY(.55); }
  .tk-esc-estado[data-estado="sonando"] .tk-esc-onda span:nth-child(2) { transform: scaleY(1); }
  .tk-esc-estado[data-estado="cargando"] .tk-esc-onda span { opacity: .6; }
  .tk-esc-btn-play:active { transform: none; }
}

/* ============================================================
   8. Ganchos con nombre
   ============================================================ */
.tk-esc { min-width: 0; }
/* Mientras suena, la tarjeta del reproductor toma el filo de su sección, como
   `.tarjeta-seccion`: se ve de lejos que está en marcha aunque el estado en
   palabras quede pequeño. */
.tk-esc-play.sonando { border-color: color-mix(in srgb, var(--seccion) 38%, var(--linea)); }