/* Clase de hoy y El consejo (aula.js). Usa los colores de estilos.css. */
.clase-hoy { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--acento); color: var(--acento-tinta); padding: 14px 16px; margin: 0 0 10px; }
.clase-hoy .t { font-weight: 700; font-size: 1.15rem; }
.clase-hoy .d { font-size: .95rem; }
.clase-hoy .m { font-size: .8rem; opacity: .85; }
.consejo-entrar { display: block; width: 100%; margin: 0 0 10px; }
.recuerdo-manana { background: var(--resalte); border-radius: 14px; padding: 12px 14px; margin: 0 0 10px; }
.recuerdo-manana p { margin: 0 0 4px; }
.recuerdo-resp { font-size: 1.15rem; margin-top: 8px; }
.recuerdo-resp b { font-family: var(--hanzi); font-size: 1.5rem; }
.boton.grande { display: block; width: 100%; min-height: 56px; font-size: 1.05rem; margin-top: 14px; }
.enlace { border: 0; background: none; color: var(--acento); text-decoration: underline; padding: 8px 0; cursor: pointer; }
.rotulo { font-size: .8rem; color: var(--tinta-suave); margin: 10px 0 6px; text-transform: uppercase; letter-spacing: .04em; }

.aula { padding: 16px 0 24px; }
.aula h1 { font-size: 1.5rem; margin: 6px 0 2px; }
.aula .sub { color: var(--tinta-suave); margin: 4px 0 12px; }
.aula-sem { color: var(--tinta-suave); font-size: .9rem; margin: 14px 0 0; }
.aviso-suave { background: var(--resalte); border-radius: 10px; padding: 8px 12px; font-size: .9rem; }
.aula-pasos { padding-left: 20px; margin: 8px 0 12px; }
.aula-pasos li { margin: 6px 0; }
.aula-pasos span { color: var(--tinta-suave); font-size: .85rem; }
.aula-hoy { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha-hoy { border: 1px solid var(--linea); background: var(--papel); border-radius: 10px; padding: 4px 10px; display: flex; flex-direction: column; align-items: center; }
.ficha-hoy .h { font-family: var(--hanzi); font-size: 1.3rem; }
.ficha-hoy .s { font-size: .72rem; color: var(--tinta-suave); }
.otros-dias { margin-top: 18px; }
.otros-dias summary { cursor: pointer; color: var(--tinta-suave); padding: 8px 0; }
.otros-dias .dias { display: flex; flex-wrap: wrap; gap: 6px; }
.aula-arriba { display: flex; align-items: center; gap: 10px; }
.aula-arriba .paso { flex: 1; font-weight: 600; font-size: .95rem; }
.aula-arriba .avance { color: var(--tinta-suave); font-size: .85rem; }

.palabra-hoy { text-align: center; margin-top: 12px; }
.h-grande { font-family: var(--hanzi); font-size: 4.2rem; line-height: 1.15; border: 0; background: none; color: var(--tinta); cursor: pointer; padding: 0; }
.py-grande { font-size: 1.6rem; letter-spacing: .02em; }
.py-grande span { margin: 0 1px; }
.c1 { color: var(--t1); } .c2 { color: var(--t2); } .c3 { color: var(--t3); } .c4 { color: var(--t4); } .c5 { color: var(--t5); }
.es-hoy { font-size: 1.2rem; margin-top: 4px; }
.hsk { font-size: .72rem; color: var(--tinta-suave); border: 1px solid var(--linea); border-radius: 6px; padding: 1px 6px; vertical-align: middle; }
.fila-oir { display: flex; gap: 8px; justify-content: center; }
.fila-oir .boton { flex: 1; max-width: 180px; }
.consejo-voz { color: var(--tinta-suave); font-size: .85rem; margin: 8px 0 0; }
.tarjeta-hoy, .pieza-tarjeta { display: flex; flex-direction: column; align-items: center; margin-top: 14px; }
.tarjeta-svg { border: 0; padding: 0; background: none; cursor: pointer; width: min(240px, 70vw); border-radius: 22px; box-shadow: 0 2px 10px #0002; }
.tarjeta-svg svg { display: block; width: 100%; height: auto; }
.tarjeta-hoy .pie { font-size: .8rem; color: var(--tinta-suave); margin: 6px 0 0; }
.trazar .trazos path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazo .55s ease-in-out forwards; animation-delay: calc(var(--i) * .6s); }
@keyframes trazo { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .trazar .trazos path { animation: none; stroke-dashoffset: 0; } }
.piezas, .piezas-consejo { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pieza { border: 1px solid var(--linea); background: var(--papel); color: var(--tinta); border-radius: 12px; padding: 6px 14px; min-width: 64px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; }
.pieza .h { font-family: var(--hanzi); font-size: 1.8rem; }
.pieza .p, .pieza .s { font-size: .8rem; color: var(--tinta-suave); }
.pieza.con-tarjeta { border-color: var(--acento); }
.piezas-hoy .rotulo { text-align: center; }
.ejemplo { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 4px 14px 10px; margin-top: 16px; }
.zh-ej { font-family: var(--hanzi); font-size: 1.6rem; line-height: 2.2; border: 0; background: none; color: var(--tinta); padding: 0; text-align: left; cursor: pointer; }
.zh-ej rt { font-size: .75rem; }
.es-ej { color: var(--tinta-suave); margin: 0; }
.en-cuento { font-size: .9rem; color: var(--tinta-suave); }
.en-cuento a { color: var(--acento); }
.pasos-nueva { display: flex; gap: 8px; margin-top: 16px; position: sticky; bottom: 8px; }
.pasos-nueva .boton { margin: 0; min-height: 56px; }
.pasos-nueva .boton:last-child { flex: 1; }

.ejercicio { min-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
.abajo-pulgar { margin-top: auto; display: flex; flex-direction: column; padding-bottom: 12px; }
.abajo-pulgar .pregunta { font-size: 1.05rem; margin: 16px 0 8px; }
.es-grande { font-size: 2rem; text-align: center; margin: 8px 0 16px; }
.revelado { text-align: center; cursor: pointer; }
.tres { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.tres .boton { margin: 0; min-height: 56px; }
.oir-grande { align-self: center; margin-bottom: 12px; }
.opciones.por-tono button { font-family: var(--texto); font-size: 1.5rem; }
.armada { min-height: 64px; border-bottom: 2px solid var(--linea); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; margin-bottom: 12px; }
.armada .vacia { color: var(--tinta-suave); font-size: .9rem; }
.teselas { display: flex; flex-wrap: wrap; gap: 8px; }
.tesela { border: 1px solid var(--linea); background: var(--papel); color: var(--tinta); border-radius: 10px; padding: 6px 12px; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; }
.tesela .h, .tesela.puesta { font-family: var(--hanzi); font-size: 1.5rem; }
.tesela .p { font-size: .75rem; color: var(--tinta-suave); }
.resultado .bien { color: var(--t2); font-weight: 600; margin-bottom: 0; }
.resultado .mal { color: var(--t1); font-weight: 600; margin-bottom: 0; }
.marcador { font-size: 1.05rem; line-height: 1.8; }
.ninos { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 4px 14px 14px; margin-top: 12px; }
.ninos h2 { font-size: 1rem; }
.fichas-ninos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ficha-nino { border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta); border-radius: 12px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ficha-nino .h { font-family: var(--hanzi); font-size: 1.8rem; }
.ficha-nino .p, .ficha-nino .s { font-size: .8rem; }
.ficha-nino .j { font-size: .75rem; color: var(--tinta-suave); margin-top: 4px; }

.consejo { padding: 16px 0 24px; }
.consejo h1 { font-size: 1.6rem; margin: 18px 0 2px; }
.consejo .sub { color: var(--tinta-suave); margin: 4px 0 14px; }
.opciones-consejo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.op-consejo { border: 2px solid var(--linea); background: var(--papel); color: var(--tinta); border-radius: 18px; padding: 12px 4px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; }
.op-consejo .emoji { font-size: 3.2rem; line-height: 1.1; }
.op-consejo .h { font-family: var(--hanzi); font-size: 1.6rem; }
.op-consejo .p { font-size: .85rem; }
.op-consejo .s { font-size: .8rem; color: var(--tinta-suave); }
.op-consejo[aria-pressed="true"] { border-color: var(--acento); background: var(--resalte); transform: scale(1.03); }
.nombre-armado { text-align: center; font-family: var(--hanzi); font-size: 3.4rem; min-height: 80px; cursor: pointer; }
.nombre-armado .vacia { color: var(--linea); font-size: 2rem; }
.py-nombre { text-align: center; font-size: 1.2rem; margin: 0 0 12px; min-height: 1.4em; }
.apodo { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font-size: .9rem; color: var(--tinta-suave); }
.apodo input { font: inherit; font-size: 1.05rem; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linea); background: var(--papel); color: var(--tinta); }
.boton.foto { text-align: center; line-height: 32px; }
.foto-vista img, .decidido img { display: block; max-width: 100%; max-height: 50vh; margin: 12px auto; border-radius: 12px; }
.decidido { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 8px 14px 14px; }
.frase-consejo { font-size: 1.1rem; line-height: 1.7; }
.frase-consejo b { font-family: var(--hanzi); font-size: 1.3rem; }
.frase-consejo .emoji { font-size: 1.4rem; }
.para-claude { margin-top: 12px; }
.para-claude summary { cursor: pointer; color: var(--tinta-suave); padding: 8px 0; }
.para-claude textarea { width: 100%; font: inherit; font-size: .85rem; border-radius: 10px; border: 1px solid var(--linea); background: var(--papel); color: var(--tinta); padding: 8px; }
.consejo-fin { margin-bottom: 4px; }
.zh-ej ruby { display: inline-flex; flex-direction: column-reverse; align-items: center; margin: 0 3px; line-height: 1.25; vertical-align: bottom; }
.zh-ej rt { display: block; line-height: 1.2; }

/* pieza del día y repaso de la tarde (fase 2) */
.pieza-entrar { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 12px; width: 100%; text-align: left;
  border: 1px solid var(--linea); background: var(--papel); color: var(--tinta); border-radius: 14px; padding: 10px 14px; margin: 0 0 10px; cursor: pointer; }
.pieza-entrar .g { grid-row: 1 / 3; font-family: var(--hanzi); font-size: 2.4rem; line-height: 56px; text-align: center; background: var(--resalte); border-radius: 12px; }
.pieza-entrar .t { font-weight: 700; align-self: end; }
.pieza-entrar .m { font-size: .85rem; color: var(--tinta-suave); }
.tarde-entrar { display: block; width: 100%; margin: 0 0 10px; }
.pieza-centro { display: flex; justify-content: center; margin: 12px 0 8px; }
.tarjeta-texto { width: min(240px, 70vw); aspect-ratio: 3 / 4; border-radius: 22px; background: var(--resalte); box-shadow: 0 2px 10px #0002;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.tarjeta-texto .g { font-family: var(--hanzi); font-size: 6rem; line-height: 1; }
.tarjeta-texto .n { font-size: 1.1rem; color: var(--tinta-suave); }
.pieza-nombre { text-align: center; font-size: 1.15rem; margin-bottom: 6px; }
.oir-pieza { margin: 0 0 0 8px; padding: 6px 12px; }
.nota-tema, .nota-madre { font-size: .88rem; color: var(--tinta-suave); background: var(--papel); border: 1px dashed var(--linea); border-radius: 10px; padding: 6px 10px; }
.h-mini { font-family: var(--hanzi); font-size: 1.25em; }
.pasos-pieza { padding-left: 20px; line-height: 1.5; }
.pasos-pieza li { margin: 6px 0; }
.por-edad { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.por-edad li { background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; }
.pista-caracter { font-size: 1.05rem; text-align: center; }
.en-lista { text-align: center; color: var(--tinta-suave); }
.combos { display: grid; gap: 10px; }
.combo { border: 1px solid var(--linea); background: var(--papel); color: var(--tinta); border-radius: 14px; padding: 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; }
.combo .suma { font-size: 1.4rem; }
.combo .h-combo { font-family: var(--hanzi); font-size: 2.6rem; vertical-align: middle; }
.combo .cuento-combo { font-size: .9rem; color: var(--tinta-suave); }
.familia { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; }
.nav-piezas { display: flex; gap: 8px; margin-top: 10px; }
.nav-piezas .boton { flex: 1; margin: 0; }

/* estantes y créditos (fase 2) */
.estante { font-size: 1.05rem; margin: 22px 0 8px; }
.estante-vacio { background: var(--papel); border: 1px dashed var(--linea); border-radius: 14px; padding: 12px 14px; color: var(--tinta-suave); margin-bottom: 8px; }
.pie-biblio { text-align: center; margin: 24px 0 8px; font-size: .9rem; }
.pie-biblio a, .creditos a { color: var(--acento); }
.creditos { padding: 16px 0 32px; line-height: 1.5; }
.creditos h1 { font-size: 1.5rem; }
.creditos h2 { font-size: 1.05rem; margin: 18px 0 4px; }
.creditos ul { padding-left: 20px; }

/* «Para ellos» (fase 2): grande, sin leer, todo con el dedo */
.para-ellos { border-top: 1px dashed var(--linea); }
.ellos { padding: 10px 0 20px; display: flex; flex-direction: column; min-height: calc(100dvh - 24px); }
.ellos-arriba { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.ellos-arriba .paso { font-weight: 700; }
.puntos { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.puntos i { width: 8px; height: 8px; border-radius: 50%; background: var(--linea); }
.puntos i.ya { background: var(--tinta-suave); } .puntos i.si { background: var(--acento); }
.ellos-lamina { border: 0; padding: 0; background: none; margin: 10px 0 6px; cursor: pointer; }
.ellos-lamina img { width: 100%; border-radius: 18px; display: block; max-height: 62dvh; object-fit: cover; }
.ellos-titulo { font-family: var(--hanzi); font-size: 2.2rem; text-align: center; margin: 6px 0 0; }
.ellos-es { text-align: center; color: var(--tinta-suave); }
.ellos-zh { font-family: var(--hanzi); font-size: 1.3rem; text-align: center; color: var(--tinta-suave); margin: 4px 0; }
.ellos-abajo { margin-top: auto; display: flex; gap: 10px; align-items: center; justify-content: space-between; padding-top: 10px; }
.ellos-abajo .flecha { min-width: 64px; min-height: 64px; font-size: 2rem; margin: 0; }
.ellos-abajo .empezar { flex: 1; margin: 0; }
.que-dice { flex: 1; min-height: 64px; font-size: 1.2rem; margin: 0; }
.que-dice.chico { flex: 0 1 auto; min-height: 44px; font-size: .9rem; background: var(--papel); color: var(--tinta); border: 1px solid var(--linea); }
.oir-juego { align-self: center; margin: 14px 0; }
.opciones-ellos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.opciones-ellos.dibujo { grid-template-columns: 1fr 1fr 1fr; }
.opciones-ellos button { border: 3px solid transparent; border-radius: 16px; padding: 0; background: var(--papel); cursor: pointer; overflow: hidden; }
.opciones-ellos img { width: 100%; display: block; aspect-ratio: 3 / 4; object-fit: cover; }
.opciones-ellos.quien img { aspect-ratio: 1; }
.opciones-ellos button.bien { border-color: var(--t2); transform: scale(1.04); }
.opciones-ellos button.otra { opacity: .5; }
.respuesta { text-align: center; font-size: 1.4rem; min-height: 1.6em; }
.lienzo-pieza { position: relative; width: min(300px, 80vw); margin: 14px auto; }
.lienzo-pieza .tarjeta-svg { width: 100%; }
.lienzo-pieza canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.fin-ellos { align-items: center; text-align: center; }
.estampa-nueva { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 4px solid var(--acento); }
.coleccion { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0; }
.coleccion img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--linea); }

/* versión para imprimir (fase 2) */
.imprimir-enlace { text-align: center; font-size: .9rem; }
.imprimir-enlace a { color: var(--acento); }
.imprimible main { max-width: 800px; }
.imp-barra { display: flex; gap: 8px; justify-content: space-between; margin: 12px 0; }
.imp-barra button { font: inherit; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--linea); background: var(--papel); }
.imp-portada, .imp-pagina { break-after: page; page-break-after: always; text-align: center; padding: 12px 0; }
.imp-portada img, .imp-pagina img { max-width: 100%; max-height: 36vh; border-radius: 12px; }
@media print { .imp-portada img, .imp-pagina img { max-height: 15cm; } .imp-zh { font-size: 26pt; } .imp-py { font-size: 14pt; } .imp-es { font-size: 12pt; } }
.imp-portada h1 { font-family: var(--hanzi); font-size: 2.4rem; margin: 10px 0 0; }
.imp-zh { font-family: var(--hanzi); font-size: 1.9rem; margin: 10px 0 2px; }
.imp-py { font-size: 1.1rem; color: #555; margin: 0; }
.imp-es { font-size: 1.05rem; color: #444; margin: 6px 0; }
.imp-num { font-size: .8rem; color: #888; }
.imp-titulo { font-size: 1.3rem; }
.imp-tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.imp-tarjetas figure { margin: 0; break-inside: avoid; }
.imp-tarjetas svg { width: 100%; height: auto; }
.imp-tarjetas figcaption { font-size: .8rem; color: #555; }
@media print {
  .imp-barra { display: none; }
  body.imprimible { background: #fff; color: #000; }
  .imp-tarjetas .trazos path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
}

/* «Para ellos» · ciclo de jurado ellos-r0 → r1 */
.dos-entradas { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linea); border-top: 0; border-radius: 0 0 14px 14px; overflow: hidden; }
.dos-entradas:has(+ .pendiente) { border-radius: 0; }
.dos-entradas .al-libro { border: 0; border-radius: 0; text-align: center; font-weight: 600; min-height: 52px; padding: 10px 8px; }
.dos-entradas .al-libro + .al-libro { border-left: 1px solid var(--linea); }
.dos-entradas .al-libro:only-child { grid-column: 1 / -1; }
.dos-entradas .para-ellos { background: #fbeee0; color: var(--acento); border-top: 0; }
.puntos i { width: 11px; height: 11px; }
.puntos.grandes i { width: 16px; height: 16px; }
.ellos-lamina { position: relative; }
.bocina-lamina { position: absolute; right: 12px; bottom: 12px; width: 60px; height: 60px; border-radius: 50%; background: var(--acento);
  border: 3px solid #fff; display: grid; place-items: center; font-size: 1.7rem; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.bocina-grande { align-self: center; width: 116px; height: 116px; border-radius: 50%; border: 0; background: var(--acento); color: #fff; margin-block: auto !important;
  font-size: 3rem; margin: 18px 0 4px; cursor: pointer; box-shadow: 0 4px 12px rgba(181,69,43,.35); }
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.sonando .bocina-grande, .sonando .bocina-lamina { animation: latido .8s ease-in-out infinite; }
.juego .respuesta { margin: 4px 0; }
.opciones-ellos, .opciones-ellos.dibujo { margin-top: 0; grid-template-columns: 1fr 1fr; gap: 12px; }
.opciones-ellos button:nth-child(3):last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
.opciones-ellos.dibujo img { aspect-ratio: 4 / 5; }
.opciones-ellos button { border-width: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.lienzo-pieza { width: min(340px, 88vw); margin: auto; aspect-ratio: 1; background: #fffaf2; border-radius: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.guia-trazo { width: 100%; height: 100%; display: block; }
.guia-trazo .demo path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazo .7s ease-in-out forwards, desvanece .6s 3.2s forwards; animation-delay: calc(var(--i) * .8s + .4s), 3.2s; }
@keyframes desvanece { to { opacity: 0; } }
.guia-trazo .arranque { animation: latido 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .guia-trazo .demo { display: none; } .sonando .bocina-grande, .sonando .bocina-lamina, .guia-trazo .arranque { animation: none; } }