/* =====================================================================
 * Estilos del estudiante: calmados, alto contraste, sin destellos,
 * una consigna por pantalla y botones grandes en posición fija.
 * ===================================================================== */
:root {
  --fondo: #FBF7F0;
  --superficie: #FFFFFF;
  --texto: #2F3A45;
  --texto-suave: #5B6772;
  --primario: #2F6C9F;
  --primario-claro: #E7F1FB;
  --bien: #2E7D4F;
  --bien-fondo: #E5F4E4;
  --mirar: #8A6100;
  --mirar-fondo: #F9EEDA;
  --resaltado: #C2410C;       /* letra M de la regla */
  --siguiente: #2F6C9F;       /* letra P o B que le sigue */
  --borde: #D9D2C5;
  --radio: 18px;
  --escala: 1;
  --tam-boton: 64px;
  --fuente: "Andika", "Atkinson Hyperlegible", Verdana, "Trebuchet MS", sans-serif;
}

body.letra-grande     { --escala: 1; }
body.letra-muy_grande { --escala: 1.25; }
body.letra-extra      { --escala: 1.5; }
body.minusculas .texto-ova, body.minusculas .texto-ova * { text-transform: lowercase; }

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-padding-bottom: 7.5rem; scroll-padding-top: 1rem; }
body {
  font-family: var(--fuente);
  background: var(--fondo);
  color: var(--texto);
  font-size: calc(20px * var(--escala));
  line-height: 1.4;
}
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Sin movimiento: se respeta la preferencia del niño y la del sistema */
body.sin-movimiento *, body.sin-movimiento *::before, body.sin-movimiento *::after {
  animation: none !important; transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

:focus-visible { outline: 4px solid #F0B429; outline-offset: 3px; }

/* ------------------------------------------------------------ botones */
.boton-grande, .boton-secundario, .boton-principal, .boton-control {
  font-family: inherit; font-size: 1em; cursor: pointer; text-decoration: none;
  min-height: var(--tam-boton); min-width: var(--tam-boton);
  border-radius: var(--radio); padding: 0.5em 1.1em;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  border: 3px solid transparent;
}
.boton-grande, .boton-principal { background: var(--primario); color: #fff; font-weight: 700; }
.boton-secundario, .boton-control { background: var(--superficie); color: var(--primario); border-color: var(--primario); }
button:disabled { opacity: 0.45; cursor: default; }

.fila-botones { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 1.2rem 0; }

/* ------------------------------------------------------------ portada / formularios */
.contenedor-centro { max-width: 860px; margin: 0 auto; padding: 2rem 1rem; text-align: center; }
.titulo-ova { font-size: 2.2em; margin: 1rem 0 0.2rem; color: var(--primario); }
.subtitulo, .objetivo { font-size: 1.2em; color: var(--texto-suave); margin-top: 0; }
.icono-boton { font-size: 1.3em; }
.aviso-suave { background: var(--mirar-fondo); color: var(--mirar); border-radius: var(--radio); padding: 0.6em 1em; display: inline-block; }

.codigo-elegido { display: flex; gap: 0.8rem; justify-content: center; margin: 1.5rem 0; }
.codigo-elegido .hueco, .simbolo {
  width: 72px; height: 72px; border: 3px dashed var(--borde); border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 44px; background: var(--superficie);
}
.simbolo { width: auto; height: auto; border: 0; font-size: 1.4em; background: none; }
.teclado-simbolos { display: grid; grid-template-columns: repeat(3, 110px); gap: 1rem; justify-content: center; }
.tecla-simbolo { height: 110px; font-size: 60px; border-radius: var(--radio); border: 3px solid var(--borde); background: var(--superficie); cursor: pointer; }

.form-pref { text-align: left; }
.grupo-pref { border: 0; margin: 0 0 1rem; padding: 0; }
.grupo-pref legend { font-weight: 700; margin-bottom: 0.4rem; }
.opciones-pref { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.opciones-pref input { position: absolute; opacity: 0; pointer-events: none; }
.opciones-pref label {
  min-height: var(--tam-boton); min-width: 110px; padding: 0.4em 1em; border-radius: var(--radio);
  border: 3px solid var(--borde); background: var(--superficie); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.opciones-pref input:checked + label { border-color: var(--primario); background: var(--primario-claro); font-weight: 700; }
.opciones-pref input:focus-visible + label { outline: 4px solid #F0B429; outline-offset: 3px; }

/* ------------------------------------------------------------ estructura de la OVA */
body.ova { display: flex; flex-direction: column; min-height: 100vh; }
.agenda { background: var(--superficie); border-bottom: 2px solid var(--borde); padding: 0.5rem; }
.agenda ol { list-style: none; display: flex; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; flex-wrap: wrap; }
.agenda li { display: flex; align-items: center; gap: 0.4rem; padding: 0.3em 0.8em; border-radius: 999px; color: var(--texto-suave); font-size: 0.85em; }
.agenda li + li::before { content: "→"; margin-right: 0.5rem; color: var(--borde); }
.icono-paso { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--borde); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; background: var(--fondo); }
.icono-paso img { width: 100%; height: 100%; object-fit: cover; }
.agenda li.actual { color: var(--primario); font-weight: 700; }
.agenda li.actual .icono-paso { border-color: var(--primario); background: var(--primario); color: #fff; }
.agenda li.actual .nombre-paso { border-bottom: 3px solid var(--primario); }
.agenda li.hecho .icono-paso { background: var(--bien-fondo); border-color: var(--bien); }

.escenario { flex: 1; max-width: 960px; width: 100%; margin: 0 auto; padding: 1rem 1rem 7.5rem; text-align: center; }
.consigna { font-size: 1.5em; margin: 0.6rem 0 1rem; font-weight: 700; }
.momento-grande { font-size: 3em; color: var(--primario); margin: 0.2rem 0 1rem; font-weight: 700; }
.progreso { color: var(--texto-suave); font-size: 0.8em; margin-top: 1.5rem; }

.botonera {
  position: fixed; bottom: 0; left: 0; right: 0; background: var(--superficie); border-top: 2px solid var(--borde);
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem;
}
.centro-botonera { display: flex; gap: 0.6rem; }
.boton-principal { min-width: 170px; }

/* ------------------------------------------------------------ piezas de contenido */
.imagen-palabra { margin: 0 auto 1rem; width: min(220px, 55vw); aspect-ratio: 1; border-radius: var(--radio); background: var(--superficie); border: 2px solid var(--borde); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.imagen-palabra img { width: 100%; height: 100%; object-fit: contain; }
.imagen-palabra.pendiente { flex-direction: column; border-style: dashed; color: var(--texto-suave); }
.marco-pendiente { font-size: 3em; opacity: 0.5; }
.imagen-palabra figcaption { font-size: 0.6em; font-family: monospace; }

.palabra { display: flex; justify-content: center; gap: 0.12em; font-size: calc(3.2em); font-weight: 700; letter-spacing: 0.04em; margin: 0.4rem 0; flex-wrap: wrap; }
.palabra.pequena { font-size: 1.8em; }
.letra { min-width: 0.7em; display: inline-block; }
.letra.resaltada { color: var(--resaltado); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.12em; }
.letra.siguiente { color: var(--siguiente); }
.letra.hueco { min-width: 1em; border-bottom: 0.08em solid var(--texto); color: var(--primario); }

.tarjeta-explicacion { background: var(--superficie); border: 3px solid var(--primario); border-radius: var(--radio); padding: 1.2rem; margin: 0 auto 1rem; max-width: 680px; }
.regla-grande { font-size: 1.7em; font-weight: 700; margin: 0; }
.tarjetas-regla { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 0.8rem 0; }
.tarjeta-regla { background: var(--primario-claro); border-radius: 14px; padding: 0.4em 0.9em; font-size: 1.5em; font-weight: 700; color: var(--primario); }
.guion { color: var(--texto-suave); font-size: 1.1em; }

.silabas { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin: 0.8rem 0; font-size: 1.6em; font-weight: 700; flex-wrap: wrap; }
.silaba { font-family: inherit; font-size: 1em; font-weight: 700; min-height: var(--tam-boton); padding: 0.1em 0.6em; border-radius: 14px; border: 3px solid var(--borde); background: var(--superficie); color: var(--texto); }
button.silaba { cursor: pointer; }
.silaba.tocada { border-color: var(--bien); background: var(--bien-fondo); }
.guion-silaba { color: var(--texto-suave); }

.opciones { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; margin: 1rem 0; }
.opcion { font-family: inherit; font-size: 2.4em; font-weight: 700; min-width: 120px; min-height: 120px; border-radius: var(--radio); border: 4px solid var(--borde); background: var(--superficie); color: var(--texto); cursor: pointer; }
.opcion.opcion-palabra { font-size: 1.8em; min-height: 96px; padding: 0 0.8em; }
.opcion[aria-pressed="true"] { border-color: var(--primario); background: var(--primario-claro); color: var(--primario); }

.linea-respuesta { display: flex; justify-content: center; gap: 0.6rem; margin: 1rem 0 0.3rem; }
.espacio-silaba { min-width: 120px; min-height: 96px; border: 3px dashed var(--borde); border-radius: var(--radio); display: flex; align-items: center; justify-content: center; }
.banco { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; min-height: 90px; margin: 0.5rem 0; }
.tarjeta-silaba { font-family: inherit; font-size: 1.8em; font-weight: 700; min-width: 110px; min-height: 86px; border-radius: 14px; border: 3px solid var(--primario); background: var(--superficie); color: var(--texto); cursor: pointer; }
.nota { color: var(--texto-suave); font-size: 0.8em; margin: 0; }

.cajas-escritura { display: flex; justify-content: center; gap: 0.4rem; margin: 1rem 0; flex-wrap: wrap; }
.caja { width: 1.6em; height: 1.9em; border-bottom: 4px solid var(--borde); font-size: 2em; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.caja.llena { border-color: var(--primario); }
.teclado { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; max-width: 760px; margin: 0 auto; }
.tecla { font-family: inherit; font-size: 1.6em; font-weight: 700; min-width: 76px; min-height: 76px; border-radius: 14px; border: 3px solid var(--borde); background: var(--superficie); color: var(--texto); cursor: pointer; }
.tecla-borrar { font-size: 1em; color: var(--texto-suave); }

.modelo { display: inline-flex; flex-direction: column; align-items: center; background: var(--superficie); border: 2px dashed var(--primario); border-radius: var(--radio); padding: 0.3rem 1.2rem; margin: 0.5rem auto; }
.etiqueta-modelo { font-size: 0.7em; color: var(--texto-suave); }

.zona-ayuda { margin-top: 0.6rem; }
.pista-texto { background: var(--primario-claro); color: var(--primario); border-radius: var(--radio); padding: 0.5em 1em; display: inline-block; font-weight: 700; }

.zona-retro { margin: 1rem auto 0; max-width: 680px; border-radius: var(--radio); }
.zona-retro.bien, .zona-retro.mirar { padding: 0.8rem 1rem; }
.zona-retro.bien { background: var(--bien-fondo); color: var(--bien); }
.zona-retro.mirar { background: var(--mirar-fondo); color: var(--mirar); }
.retro-titulo { font-size: 1.3em; font-weight: 700; margin: 0.2rem 0; }
.retro-explicacion { margin: 0.2rem 0 0.4rem; color: var(--texto); }
.zona-retro.animar { animation: aparecer 0.5s ease-out; }
@keyframes aparecer { from { transform: scale(0.96); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }

/* ------------------------------------------------------------ cierre */
.palabras-cierre { display: flex; flex-direction: column; gap: 0.2rem; }
.medallas { list-style: none; padding: 0; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.medallas li { background: var(--superficie); border: 2px solid var(--borde); border-radius: var(--radio); padding: 0.8rem; width: 200px; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font-size: 0.85em; }
.medallas img { width: 96px; height: 96px; object-fit: contain; }
.insignia-provisional { width: 80px; height: 80px; border-radius: 50%; background: var(--mirar-fondo); color: #C08A00; font-size: 48px; display: flex; align-items: center; justify-content: center; }
.rompecabezas { display: grid; grid-template-columns: repeat(5, 60px); gap: 6px; justify-content: center; margin: 1rem 0; }
.pieza { height: 60px; border-radius: 10px; border: 3px dashed var(--borde); }
.pieza.puesta { border-style: solid; border-color: var(--primario); background: var(--primario-claro); }

/* ------------------------------------------------------------ pausa */
.capa-pausa { position: fixed; inset: 0; background: rgba(47, 58, 69, 0.55); display: flex; align-items: center; justify-content: center; z-index: 10; }
.tarjeta-pausa { background: var(--superficie); border-radius: var(--radio); padding: 1.5rem 2rem; text-align: center; max-width: 90vw; }

@media (max-width: 640px) {
  .agenda li + li::before { display: none; }
  .agenda li:not(.actual) .nombre-paso { display: none; }
  .agenda ol { flex-wrap: nowrap; justify-content: space-around; }
  .boton-control { padding: 0.4em 0.6em; font-size: 0.85em; }
  .boton-principal { min-width: 120px; }
  .palabra { font-size: 2.4em; }
  .opcion { min-width: 96px; min-height: 96px; }
  .teclado-simbolos { grid-template-columns: repeat(3, 90px); }
  .tecla-simbolo { height: 90px; }
}