@charset "utf-8";
/* ============================================================
   modulos/hablar.css — Pronunciar: frases, sonidos y conversaciones.

   Se carga después de base.css, panel.css y app.css. Solo lo que es de
   esta área: la ficha de la frase es `.unidad`, las respuestas del
   ejercicio son `.opcion`, los avisos son `.aviso` y la barra es
   `.progreso`, todos de la plantilla. Aquí va lo que la plantilla no tiene:
   el selector de modo, el micrófono, las burbujas y el corte de boca.

   El color es el coral de la sección (`t-hablar` pone `--seccion`); no hay
   aquí ni un color escrito a mano.
   ============================================================ */

/* ============================================================
   1. El selector de modo
   ============================================================ */
/* Es el control segmentado común (`.segmentado .segmentado-ancho`, app.css
   §12), el mismo de los modos de Mirar, el tema del perfil y la foto de Mis
   clases: aquí se escribía como una caja de filo con divisiones y lavado, y
   al pasar de Mirar a Pronunciar el mismo control cambiaba de forma. Lo que
   es de esta pantalla es el ancho y el icono delante de cada modo. */
.hablar-modos { max-width: 34rem; margin-bottom: var(--e-5); }
/* El icono va al lado de la palabra y no encima, como un segundo renglón. */
.hablar-modo { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.hablar-modo .tk-icono { width: 1.125rem; height: 1.125rem; }
@media (max-width: 26rem) {
  /* A 320 px «Conversación» no cabe con su icono en un tercio de pantalla:
     el icono repite lo que dice la palabra, así que cede él. */
  .hablar-modo { padding-inline: .125rem; }
  .hablar-modo .tk-icono, .hablar-modo i[data-ico] { display: none; }
}
@media (max-width: 22rem) {
  .hablar-modo { font-size: var(--t-xs); }
}

.hablar-intro { color: var(--tinta-2); max-width: var(--medida); margin-bottom: var(--e-4); }
.hablar-pie { margin-top: var(--e-4); }
.hablar-meta { font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em; color: var(--tinta-3); }

/* El «volver» es un enlace de texto, pero se pulsa con el pulgar. */
.hablar-volver { margin-bottom: var(--e-3); }
.hablar-volver .btn-texto { min-height: 2.75rem; }

/* El icono del aviso ya tiene su columna en la rejilla de `.aviso`: el
   margen que app.css pone detrás de cada icono lo descolocaba. */
.t-hablar .aviso > .tk-icono + * { margin-left: 0; }

/* ============================================================
   2. Frases
   ============================================================ */
.hablar-frase {
  display: grid; gap: var(--e-4); align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.hablar-ficha .unidad-en { font-size: var(--t-3xl); overflow-wrap: anywhere; }
/* La pronunciación figurada es la que lee quien no sabe fonética: aquí va a
   un tamaño que se lee, no de nota al pie, y la sílaba fuerte se ve sin
   depender del color —negrita y subrayada—. */
.hablar-figurada { font-size: var(--t-md); color: var(--tinta-2); margin-top: var(--e-1); }
.hablar-figurada .st,
.hablar-burbuja-pron .st {
  color: var(--seccion-tinta); font-weight: 700;
  text-decoration: underline 2px var(--seccion); text-underline-offset: .22em;
}
/* Escuchar y Más lento son una pareja pequeña dentro de la ficha, con la
   medida de los de la sesión de estudio (`.ses-audio`): a tamaño de botón
   de acción competían con el micrófono. En el móvil van lado a lado y no
   apilados a línea completa como pide `.acciones`. */
.hablar-oir { margin-top: var(--e-4); gap: var(--e-2); }
.hablar-oir .btn { min-height: 2.75rem; padding: .5rem 1rem; font-size: var(--t-sm); }
@media (max-width: 30rem) {
  .hablar-oir { display: flex; }
  .hablar-oir .btn { width: auto; }
}
.hablar-ficha .unidad-nota > span { display: block; }

/* ============================================================
   3. El micrófono
   ============================================================ */
.hablar-microfono {
  display: grid; align-content: center; justify-items: center;
  text-align: center; gap: var(--e-3);
}
.hablar-microfono > .aviso { text-align: left; }
.hablar-mic { display: grid; justify-items: center; gap: var(--e-3); width: 100%; }

/* Un círculo del color de la sección con el icono en la tinta que le toca
   encima. Grande a propósito: es lo único de la pantalla que hay que tocar
   para practicar, y se toca mirando la frase, no el botón. Lleva el relieve
   sólido de los botones de la plantilla, igual que el micrófono de la sesión,
   el altavoz de Mirar y el de Jugar y el reproductor de Escuchar: los cinco
   instrumentos redondos se hunden igual al pulsarlos. Sin él, este era el
   único plano y encogía en vez de bajar. */
.hablar-mic-boton {
  position: relative;
  width: 5.5rem; height: 5.5rem; flex: none;
  display: grid; place-items: center;
  background: var(--seccion); color: var(--sobre-seccion);
  border: 0; border-radius: var(--r-full); cursor: pointer;
  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;
  /* El aire que necesita el anillo de grabación al crecer, para no pisar
     el «Escuchando…» de debajo. */
  margin-block: .875rem;
}
.hablar-mic-boton .tk-icono { width: 2.25rem; height: 2.25rem; }
.hablar-mic-boton:hover { background: color-mix(in oklab, var(--seccion) 92%, #000); }
.hablar-mic-boton:active { background: var(--seccion-hondo); transform: translateY(4px); box-shadow: none; }
.hablar-mic-boton:focus-visible { outline: 3px solid var(--seccion-tinta); outline-offset: 4px; border-radius: var(--r-full); }

/* Grabando: un anillo que sale del botón y se desvanece. */
.hablar-mic-boton.grabando { background: var(--seccion-hondo); }
.hablar-mic-boton.grabando::after {
  content: ""; position: absolute; inset: -.5rem; pointer-events: none;
  border: 3px solid var(--seccion); border-radius: inherit;
  animation: hablar-late 1.2s ease-out infinite;
}
@keyframes hablar-late {
  from { transform: scale(1); opacity: .9; }
  to { transform: scale(1.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* Grabar sin una señal a la vista es un fallo, no un adorno que se quita:
     el anillo se queda quieto y entero, en la tinta, que se ve mejor que el
     color vivo sobre el papel. base.css deja las animaciones en una milésima
     de segundo, y una animación infinita así parpadea; por eso se anula. */
  .hablar-mic-boton.grabando::after { animation: none; opacity: 1; transform: none; border-color: var(--seccion-tinta); }
  .hablar-mic-boton:active { transform: none; }
}

.hablar-mic-salida { width: 100%; min-height: 3rem; display: grid; justify-items: center; }
.hablar-mic-salida > .aviso { text-align: left; justify-self: stretch; }
.hablar-mic-pista { color: var(--tinta-2); font-size: var(--t-sm); }

/* ---------- el resultado ---------- */
.hablar-resultado { display: grid; justify-items: center; gap: var(--e-3); width: 100%; }
.hablar-nota {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: .25rem var(--e-3); font-weight: 700;
}
.hablar-nota b {
  font-family: var(--display); font-size: var(--t-2xl); font-weight: 600;
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.hablar-resultado.es-bien .hablar-nota { color: var(--acierto-tinta); }
.hablar-resultado.es-casi .hablar-nota { color: var(--xp-tinta); }
.hablar-resultado.es-otra .hablar-nota { color: var(--racha-tinta); }

/* Las sílabas coloreadas (`.pron-words`, `.pw`) se dibujan una sola vez en
   sesion.css: las pinta el mismo `elsaColors()` aquí y en la sesión, y con
   dos copias la misma corrección salía en píldoras en una pantalla y en
   baldosas más grandes en la otra. */
.hablar-oido { font-size: var(--t-sm); color: var(--tinta-3); }
.hablar-oido q { color: var(--tinta-2); font-style: italic; }

/* ============================================================
   4. Sonidos: la rejilla de pares mínimos
   ============================================================ */
.hablar-sonidos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.hablar-sonido, .hablar-charla {
  font: inherit; color: var(--tinta); text-align: left; cursor: pointer;
  min-height: 2.75rem; width: 100%;
}
/* En columna y con la barra empujada al fondo: las tarjetas de una fila miden
   lo que la más alta, y así las barras quedan a la misma altura y se
   comparan de un vistazo. */
.hablar-sonido { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
/* Como `.tarjeta-seccion`: al pasar por encima se tiñe, no se mueve. */
@media (hover: hover) {
  .hablar-sonido:hover, .hablar-charla:hover {
    border-color: var(--seccion);
    background: color-mix(in srgb, var(--seccion) 4%, var(--papel));
  }
}
.hablar-sonido:active, .hablar-charla:active { border-color: var(--seccion); }

.hablar-simbolos { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.hablar-simbolos .tk-simbolo-fonetico { font-size: var(--t-lg); }
.hablar-sonido-titulo {
  font-family: var(--display); font-size: var(--t-lg); font-weight: 600;
  line-height: 1.2; letter-spacing: -.012em; margin-top: var(--e-1);
  text-wrap: balance;
}
.hablar-palabras {
  display: flex; flex-wrap: wrap; gap: .5em;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2);
}
.hablar-palabras > span { color: var(--tinta-3); font-weight: 400; }
/* La barra de la tarjeta es la de la plantilla a media altura: a 16 px pesa
   más que el título. La franja clara de dentro no cabe en 8 px. */
.hablar-barra { height: .5rem; margin-top: auto; align-self: stretch; }
.hablar-palabras { margin-bottom: var(--e-3); }
.hablar-barra > i { box-shadow: none; }

/* ============================================================
   5. El detalle de un sonido y su corte de boca
   ============================================================ */
.hablar-porque { margin-bottom: var(--e-2); }
/* En el móvil `.acciones` pone los botones a línea completa, pero la
   cabecera deja su caja de acciones con `flex: none`, así que el 100 % se
   medía contra el contenido y los dos botones se salían por la derecha. */
@media (max-width: 30rem) {
  .t-hablar .app-cabeza .acciones { flex: 1 1 100%; }
}
.hablar-bocas { gap: var(--e-4); }
/* Sueltos en la pantalla son dos tarjetas de contenido, y llevan su radio de
   22; dentro del repaso de Jugar se quedan en el corto, porque allí van
   metidos en un bloque de datos. */
.hablar-bocas .tk-bc-lado { padding: var(--e-4); border-radius: var(--r-xl); }
.hablar-bocas .tk-bc-lado > b { font-size: var(--t-md); }
.hablar-bocas .tk-bc-lado > small { font-size: var(--t-sm); max-width: 26em; }
.hablar-bocas .tk-bc { max-width: 15rem; }
.hablar-ejemplos { font-size: var(--t-sm); font-weight: 600; color: var(--tinta); }
.hablar-truco { margin-top: var(--e-5); max-width: 44rem; }
.hablar-truco > span { display: block; }
@media (max-width: 26rem) {
  .hablar-bocas { gap: var(--e-2); }
  .hablar-bocas .tk-bc-lado { padding: var(--e-3) var(--e-2); }
}

/* ---------- el corte de boca (boca.js) ----------
   Va aquí porque `boca.js` es de esta área, y lo pintan dos pantallas: el
   detalle de un sonido y el repaso de Jugar. Una sola definición para las
   dos, así que la lengua es del mismo azul en las dos.

   Cada color dice una cosa y siempre la misma, en los diez contrastes:
   azul la lengua, jade el aire, violeta la voz, ámbar «aguántalo», coral
   los labios. Todo con fichas, porque tiene que leerse igual en claro y en
   oscuro y una foto de una boca no puede hacer eso. */
.tk-bc { display: block; width: 100%; height: auto; max-width: 13rem; margin-inline: auto; overflow: visible; }
/* El techo, el fondo y el suelo: el marco, visible pero en segundo plano. */
.tk-bc-hueso { fill: none; stroke: var(--tinta-3); stroke-width: 2.4; stroke-linecap: round; opacity: .7; }
.tk-bc-hueso.tenue { opacity: .4; stroke-dasharray: 3 4; }
/* La lengua, y el hueco que deja contra el techo, que es lo que hay que ver. */
.tk-bc-lengua { fill: var(--marca-lavado); stroke: var(--marca); stroke-width: 2.2; stroke-linejoin: round; }
.tk-bc-diente { fill: var(--papel); stroke: var(--tinta-3); stroke-width: 1.5; }
/* El contacto labio-diente de /v/: sin él, /b/ y /v/ salían iguales. */
.tk-bc-contacto { fill: var(--racha); }
.tk-bc-aire { fill: none; stroke: var(--acierto); stroke-width: 2.4; stroke-linecap: round; }
.tk-bc-aire.tenue { opacity: .5; stroke-width: 1.9; }
.tk-bc-aire.desde-abajo { stroke-dasharray: 4 3; }
.tk-bc-golpe path { fill: none; stroke: var(--acierto); stroke-width: 2.6; stroke-linecap: round; }
/* La vibración, en la garganta: es TODA la diferencia entre /s/ y /z/. */
.tk-bc-voz path { fill: none; stroke: var(--premium); stroke-width: 2.4; stroke-linecap: round; }
.tk-bc-largo path { fill: none; stroke: var(--xp); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tk-bc-boca { fill: var(--racha-lavado); stroke: var(--racha); stroke-width: 2.2; }
.tk-bc-boca-cerrada { fill: none; stroke: var(--racha); stroke-width: 3.4; stroke-linecap: round; }
/* El grupo de la boca vista de frente: es dibujo y no recibe el ratón. */
.tk-bc-frente { pointer-events: none; }

/* Los dos lados enfrentados y no en lista: la gracia del par mínimo es
   comparar, y uno debajo del otro obliga a desplazarse para ver la
   diferencia que se está explicando. */
.tk-bc-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin-block: var(--e-3); }
.tk-bc-lado {
  display: grid; gap: var(--e-2); justify-items: center; align-content: start;
  text-align: center; padding: var(--e-3);
  background: var(--papel); color: var(--tinta);
  border: 2px solid var(--linea); border-radius: var(--r-md);
}
.tk-bc-lado > b { font-size: var(--t-sm); font-weight: 700; color: var(--seccion-tinta); }
.tk-bc-lado > small { font-size: var(--t-xs); line-height: 1.45; color: var(--tinta-2); }
/* En el repaso, el lado que sonó. */
.tk-bc-lado.era { border-color: var(--acierto); background: var(--acierto-lavado); }
.tk-bc-lado.era > b { color: var(--acierto-tinta); }

.tk-bc-leyenda {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-1) var(--e-4);
  margin-top: var(--e-2); font-size: var(--t-xs); color: var(--tinta-3);
}
.tk-bc-leyenda span { display: inline-flex; align-items: center; gap: .375rem; }
.tk-bc-leyenda i { width: .875rem; height: 3px; border-radius: 2px; flex: none; }
.tk-bc-leyenda i.lengua { background: var(--marca); }
.tk-bc-leyenda i.aire { background: var(--acierto); }
.tk-bc-leyenda i.voz { background: var(--premium); }
.tk-bc-leyenda i.largo { background: var(--xp); }
.tk-bc-leyenda i.labio { background: var(--racha); }

/* ============================================================
   6. La ronda de oído
   ============================================================ */
.hablar-ronda { max-width: 40rem; margin-inline: auto; text-align: center; }
.hablar-ronda .hablar-volver { text-align: left; }
/* La cabecera de ronda de la sesión y de Mirar: barra y, a su derecha, la
   cuenta en letra de texto. */
.hablar-avance-fila { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.hablar-avance { flex: 1; min-width: 0; height: .625rem; }
.hablar-avance > i { box-shadow: none; transition: width .3s ease; }
.hablar-cuenta {
  flex: none; font-size: var(--t-sm); font-weight: 600; color: var(--tinta-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* La pregunta y el altavoz, en su tarjeta, como «¿Cuál has oído?» en Mirar. */
.hablar-oir-ronda { display: grid; justify-items: center; gap: var(--e-2); }
.hablar-pregunta { font-size: var(--t-xl); }
/* El altavoz de volver a oír mide lo que el de Mirar y el de la sesión; el
   micrófono, que es lo que se practica, sigue siendo el más grande. */
.hablar-mic-boton.hablar-escuchar { width: 4.5rem; height: 4.5rem; margin: 0 0 var(--e-2); }
.hablar-escuchar .tk-icono { width: 1.875rem; height: 1.875rem; }
.hablar-opciones {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3); margin-top: var(--e-5);
}
.hablar-opciones .opcion {
  display: grid; justify-items: center; align-content: center; gap: .125rem;
  min-height: 5.5rem; text-align: center;
}
.hablar-opciones .opcion > span {
  font-family: var(--display); font-size: var(--t-xl); font-weight: 600;
  line-height: 1.1; letter-spacing: -.015em; overflow-wrap: anywhere;
}
.hablar-opciones .opcion > small { font-size: var(--t-sm); font-weight: 500; color: var(--tinta-3); }
/* Con la marca de acierto o de fallo dibujada a la derecha, el relleno se
   iguala a los dos lados para que la palabra siga centrada. */
.hablar-opciones .opcion.es-correcta,
.hablar-opciones .opcion.es-fallo { padding-inline: 2.75rem; }
.hablar-opciones .opcion.es-correcta > small,
.hablar-opciones .opcion.es-fallo > small { color: inherit; }
.hablar-respuesta { min-height: 3rem; margin-top: var(--e-4); text-align: left; }
.hablar-veredicto { text-align: center; color: var(--acierto-tinta); font-weight: 600; }
@media (max-width: 26rem) {
  .hablar-opciones .opcion { padding-inline: var(--e-2); }
  .hablar-opciones .opcion.es-correcta,
  .hablar-opciones .opcion.es-fallo { padding-inline: 2.25rem; }
  .hablar-opciones .opcion.es-correcta::after { right: .875rem; }
  .hablar-opciones .opcion.es-fallo::before,
  .hablar-opciones .opcion.es-fallo::after { right: .75rem; }
}

/* El final de una ronda y el de una conversación se montaban aquí, cada uno
   con su tarjeta: `.hablar-final` y compañía vivían en este punto. Ya no
   existen —los pinta `TKFiesta.momento()`, como el resto de la plataforma—, y
   su aspecto vive ahora en `modulos/fiesta.css`. */

/* ============================================================
   7. Conversaciones
   ============================================================ */
.hablar-charlas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
/* El hueco de una tarjeta mientras llegan las lecciones: su alto y su radio. */
.hablar-charla-hueco { display: block; min-width: 0; height: 6.5rem; border-radius: var(--r-xl); }
.hablar-charla {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--e-4); padding: var(--e-4);
}
.hablar-charla-ico {
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--seccion-lavado); color: var(--seccion-tinta);
}
.hablar-charla.hecha .hablar-charla-ico { background: var(--acierto-lavado); color: var(--acierto-tinta); }
.hablar-charla-texto { display: grid; gap: .125rem; min-width: 0; }
.hablar-charla-titulo { font-family: var(--display); font-size: var(--t-lg); font-weight: 600; line-height: 1.2; }
.hablar-charla-es { font-size: var(--t-sm); color: var(--tinta-2); }
.hablar-charla > .tk-icono { color: var(--tinta-3); }
@media (max-width: 26rem) {
  .hablar-charla { gap: var(--e-3); padding: var(--e-3); }
}

.hablar-charla-paso { max-width: 44rem; margin-inline: auto; }
.hablar-charla-cabeza { margin-top: 0; }
/* En el móvil `.acciones` pone cada botón a línea completa, y el turno de la
   otra persona acababa con tres franjas: Escuchar y Más lento son una pareja
   y van lado a lado, como en la ficha de Frases; Continuar, debajo y entero. */
@media (max-width: 30rem) {
  .hablar-charla-paso .hablar-pie:has(> .btn:nth-child(3)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
  .hablar-charla-paso .hablar-pie:has(> .btn:nth-child(3)) > .btn { width: auto; padding-inline: var(--e-3); }
  .hablar-charla-paso .hablar-pie:has(> .btn:nth-child(3)) > .btn-principal { grid-column: 1 / -1; }
}

/* Las burbujas: planas, sin sombra. La otra persona en el papel de segundo
   plano a la izquierda; tú, en el lavado de la sección a la derecha. El
   turno de ahora lleva filo y letra grande; los anteriores, no. */
.hablar-conversacion { display: grid; gap: var(--e-3); margin-bottom: var(--e-4); }
.hablar-burbuja {
  max-width: min(36rem, 88%);
  padding: var(--e-3) var(--e-4);
  border: 2px solid transparent; border-radius: var(--r-lg);
}
.hablar-burbuja.ellos { justify-self: start; background: var(--papel-2); border-bottom-left-radius: var(--r-sm); }
.hablar-burbuja.tu { justify-self: end; background: var(--seccion-lavado); border-bottom-right-radius: var(--r-sm); }
.hablar-burbuja.ellos.actual { border-color: var(--linea); }
.hablar-burbuja.tu.actual { border-color: color-mix(in srgb, var(--seccion) 40%, transparent); }
.hablar-burbuja > p { margin: 0; }
.hablar-burbuja-quien {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-3);
}
.hablar-burbuja.tu .hablar-burbuja-quien { color: var(--seccion-tinta); }
.hablar-burbuja .hablar-burbuja-en { font-weight: 600; margin-top: .125rem; }
.hablar-burbuja .hablar-burbuja-es { font-size: var(--t-sm); color: var(--tinta-2); margin-top: .125rem; }
.hablar-burbuja.actual .hablar-burbuja-en,
.hablar-burbuja .hablar-burbuja-dilo {
  font-family: var(--display); font-size: var(--t-xl); font-weight: 600;
  line-height: 1.2; letter-spacing: -.012em; color: var(--tinta);
}
.hablar-burbuja .hablar-burbuja-dilo { margin-top: var(--e-1); }
.hablar-burbuja .hablar-burbuja-ipa { font-weight: 700; color: var(--seccion-tinta); margin-top: var(--e-2); }
.hablar-burbuja.ellos .hablar-burbuja-ipa { color: var(--tinta-2); }
.hablar-burbuja .hablar-burbuja-pron { font-size: var(--t-sm); color: var(--tinta-2); margin-top: .125rem; }
/* Sobre el papel de segundo plano la tinta coral no llega al contraste de
   texto pequeño: la sílaba fuerte se queda en tinta y el subrayado de color
   sigue diciendo cuál es. */
.hablar-burbuja.ellos .hablar-burbuja-pron .st { color: var(--tinta); }
.hablar-revelado {
  margin-top: var(--e-3); padding-top: var(--e-3);
  border-top: 1px solid color-mix(in srgb, var(--seccion) 34%, transparent);
}
.hablar-charla-paso .hablar-microfono { margin-bottom: 0; }
@media (max-width: 30rem) {
  .hablar-burbuja { max-width: 94%; }
}