@font-face { font-family: "Nunito"; font-weight: 400; font-display: block; src: url("../assets/fuentes/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: block; src: url("../assets/fuentes/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: block; src: url("../assets/fuentes/nunito-latin-800-normal.woff2") format("woff2"); }

:root {
  --morado: #4B3A7A;
  --rosa: #E8799B;
  --lila: #C9B6E4;
  --menta: #A8D8C0;
  --azul: #9DBBE3;
  --rosa-claro: #F4B6C8;
  --crema: #FFF8EE;
  --texto: #2E2350;
  --boton-min: 64px;
  --texto-min: 22px;
  --radio: 24px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Nunito", "Trebuchet MS", sans-serif;
  font-size: var(--texto-min);
  color: var(--texto);
  background: var(--crema);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.barra {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: var(--morado); color: #fff;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 30px; letter-spacing: 2px; min-height: var(--boton-min); }
.logo img { width: 52px; height: 52px; pointer-events: none; }
.barra-info { font-size: var(--texto-min); font-weight: 700; }

.vista { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }

h1, h2 { margin: 0; color: var(--morado); font-weight: 800; }
h1 { font-size: 34px; }
h2 { font-size: 28px; }
.fila-titulo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

button {
  font: inherit; font-weight: 800; color: var(--texto);
  min-height: var(--boton-min); min-width: var(--boton-min);
  border: none; border-radius: var(--radio); padding: 12px 24px;
  background: #fff; box-shadow: 0 4px 0 rgba(75, 58, 122, .25);
  cursor: pointer;
}
button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(75, 58, 122, .25); }
button:disabled { opacity: .45; }
.btn-principal { background: var(--rosa); color: #fff; font-size: 30px; padding: 16px 40px; }
.btn-secundario { background: var(--lila); }
.btn-audio { background: var(--azul); font-size: 30px; padding: 0; width: var(--boton-min); }

/* Entrada: niños por tanda */
.tandas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.tanda { border-radius: var(--radio); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.tanda-1 { background: var(--lila); }
.tanda-2 { background: var(--menta); }
.tanda-3 { background: var(--azul); }
.tanda.apagada { opacity: .45; }
.tanda h2 { font-size: 26px; }
.nino {
  display: flex; align-items: center; gap: 14px; text-align: left;
  font-size: 30px; padding: 10px 16px; border: 5px solid transparent;
}
.nino img { width: 80px; height: 80px; flex-shrink: 0; }
.nino .sin-avatar { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; background: var(--crema); display: grid; place-items: center; font-size: 40px; color: var(--morado); }
.nino.elegido { border-color: var(--rosa); background: #FFEFF4; }
.nino .marca { margin-left: auto; font-size: 36px; color: var(--rosa); visibility: hidden; }
.nino.elegido .marca { visibility: visible; }
.pie-acciones { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; padding-bottom: 10px; }

/* Avatar */
.avatares { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.avatar-opcion { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 26px; padding: 16px; border: 5px solid transparent; }
.avatar-opcion img { width: 160px; height: 160px; }
.avatar-opcion.elegido { border-color: var(--rosa); }
.confirmar { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.confirmar img { width: 220px; height: 220px; }

/* Mapa (placeholder hasta el paso 3) */
.mapa { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.jugador { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 28px; font-weight: 800; }
.jugador img { width: 160px; height: 160px; }
.aviso { background: #fff; border-radius: var(--radio); padding: 16px 20px; }

/* Configuración inicial de la tableta */
.numeros { display: grid; grid-template-columns: repeat(5, minmax(64px, 1fr)); gap: 16px; max-width: 640px; }
.numeros button { font-size: 36px; }

@media (max-width: 700px) {
  h1 { font-size: 28px; }
  .nino { font-size: 26px; }
}

/* PIN */
.pin { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.pin-puntos { display: flex; gap: 20px; }
.pin-puntos span { width: 28px; height: 28px; border-radius: 50%; border: 4px solid var(--morado); }
.pin-puntos span.lleno { background: var(--morado); }
.pin-teclas { display: grid; grid-template-columns: repeat(3, 96px); gap: 16px; }
.pin-teclas button { font-size: 36px; min-height: 80px; }

/* Panel de la maestra */
.panel-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.panel-bloque { background: #fff; border-radius: var(--radio); padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.panel-bloque p { margin: 0; }
.pie-acciones.izq { justify-content: flex-start; }
.alerta { color: #B3261E; font-weight: 800; }
.tabla-scroll { overflow-x: auto; }
.tabla { border-collapse: collapse; width: 100%; }
.tabla th { text-align: left; font-size: var(--texto-min); color: var(--morado); padding: 8px; white-space: nowrap; }
.tabla td { padding: 8px; border-top: 2px solid var(--crema); vertical-align: middle; }
.tabla td.num { font-weight: 800; font-size: 28px; text-align: center; }
.celda-nino { display: flex; align-items: center; gap: 10px; font-weight: 800; white-space: nowrap; }
.celda-nino img, .celda-nino .sin-avatar { width: 56px; height: 56px; flex-shrink: 0; }
.celda-nino .sin-avatar { border-radius: 50%; background: var(--crema); display: grid; place-items: center; color: var(--morado); }
.celda-nino small { display: block; font-weight: 400; font-size: var(--texto-min); color: #6B5F8C; }
select, input {
  font: inherit; min-height: var(--boton-min); border-radius: 16px;
  border: 3px solid var(--lila); background: #fff; padding: 0 12px; color: var(--texto);
}
.nivel { display: flex; align-items: center; gap: 8px; }
.nivel strong { font-size: 32px; min-width: 28px; text-align: center; }
.nivel button { padding: 0; font-size: 32px; }
.formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.formulario label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.nino:disabled { opacity: 1; }

/* Mapa de mundos */
.mapa-pareja { display: flex; gap: 24px; justify-content: center; }
.mapa-pareja .jugador img { width: 96px; height: 96px; }
.mapa-materia { background: #fff; border-radius: var(--radio); padding: 16px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mapa-mundos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; }
.mapa-mundo { background: var(--color); border-radius: var(--radio); padding: 12px; min-height: 140px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mapa-mundo-nombre { font-weight: 800; text-align: center; }
.mapa-avatares { display: flex; gap: 4px; }
.mapa-avatares img { width: 64px; height: 64px; }

/* Barra de progreso: el avatar camina de la entrada a la salida */
.barras { display: flex; flex-direction: column; gap: 10px; }
.barra-nino { display: grid; grid-template-columns: 150px 1fr 110px; align-items: center; gap: 12px; opacity: .6; }
.barra-nino.activo { opacity: 1; }
.barra-nombre { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-cuenta { font-weight: 800; text-align: right; }
.pista { position: relative; height: 48px; background: var(--color); border-radius: 28px; margin-right: 28px; }
.caminante { position: absolute; top: -4px; width: 56px; height: 56px; transform: translateX(-8px); transition: left .8s ease; }
.barra-nino.activo .caminante { animation: caminar .6s ease-in-out infinite alternate; }
@keyframes caminar { from { margin-top: 0; } to { margin-top: -6px; } }
.marca-estrella { position: absolute; top: 6px; font-size: 26px; filter: grayscale(1); opacity: .45; transform: translateX(-50%); }
.marca-estrella.ganada { filter: none; opacity: 1; }
.meta { position: absolute; right: -28px; top: 6px; font-size: 36px; }

/* Reto */
.turno { display: flex; align-items: center; gap: 12px; font-size: 30px; font-weight: 800; color: var(--morado); }
.turno img { width: 72px; height: 72px; }
.etiqueta-practica { background: var(--menta); border-radius: 16px; padding: 4px 14px; font-size: var(--texto-min); }
.tarjeta-reto { position: relative; background: #fff; border-radius: var(--radio); padding: 24px; display: flex; align-items: center; gap: 20px; }
.pregunta { font-size: 44px; font-weight: 800; flex: 1; text-align: center; }
.aviso-piensa { position: absolute; inset: 0; background: rgba(255, 248, 238, .95); border-radius: var(--radio); display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 36px; font-weight: 800; color: var(--morado); }
.aviso-piensa[hidden] { display: none; }
.aviso-piensa img { width: 96px; height: 96px; }
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.opcion { font-size: 40px; min-height: 96px; }
.verificar, .resultado { background: #fff; border-radius: var(--radio); padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.verificar p { margin: 0; font-size: 28px; }
.elegida { font-size: 44px; color: var(--rosa); }
.resultado.bien { font-size: 44px; font-weight: 800; color: #2E7D5B; background: var(--menta); }
.resultado.mal { background: #FFEFF4; }

/* Explicación con texto resaltado */
.explicacion { display: flex; gap: 20px; align-items: flex-start; background: #fff; border-radius: var(--radio); padding: 20px; }
.guia { width: 140px; height: 140px; flex-shrink: 0; }
.texto-explicacion { font-size: 30px; line-height: 1.5; margin: 12px 0 0; }
.texto-explicacion span { color: #A99FC2; transition: color .2s; }
.texto-explicacion span.leida { color: var(--texto); }
.cuenta { font-size: 96px; font-weight: 800; color: var(--morado); text-align: center; }

/* Salida del mundo */
.feliz img { animation: brinco .7s ease-in-out infinite alternate; }
@keyframes brinco { from { transform: translateY(0); } to { transform: translateY(-14px); } }
.cansado img { filter: grayscale(.5); transform: rotate(-8deg); }
.estrellas-dia { font-size: 36px; font-weight: 800; }

/* Panel: nivel */
.celda-nivel div, .celda-mundo div { white-space: nowrap; }
.celda-nivel .nivel { margin: 4px 0; }
.nivel-etiqueta { min-width: 64px; font-weight: 700; }
.cambios { display: flex; flex-direction: column; gap: 8px; }
.cambio { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

@media (max-width: 700px) {
  .mapa-mundos { grid-template-columns: repeat(2, 1fr); }
  .barra-nino { grid-template-columns: 100px 1fr 80px; }
  .explicacion { flex-direction: column; align-items: center; }
}

/* Puente de números */
.puente { position: relative; height: 88px; display: flex; align-items: flex-end; }
.orilla { width: 40px; height: 44px; background: #8FBF7F; border-radius: 12px 0 0 12px; flex-shrink: 0; }
.orilla.otra { border-radius: 0 12px 12px 0; }
.tablas { flex: 1; display: flex; gap: 4px; height: 24px; margin-bottom: 20px; }
.tabla-puente { flex: 1; border-radius: 6px; border: 2px dashed rgba(75, 58, 122, .3); transition: background .4s ease, transform .4s ease; }
.tabla-puente.puesta { background: #C99A6B; border: 2px solid #9C7146; animation: tabla .4s ease; }
@keyframes tabla { from { transform: translateY(-16px); } to { transform: none; } }
.cruzando { position: absolute; bottom: 40px; width: 48px; height: 48px; transform: translateX(-50%); transition: left .8s ease; }

/* Teclado en pantalla (niveles 4–6) */
.teclado { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.teclado-arriba { display: flex; gap: 12px; width: 100%; }
.teclado-pantalla { flex: 1; min-width: 160px; min-height: 72px; background: #fff; border: 4px solid var(--lila); border-radius: var(--radio); font-size: 44px; font-weight: 800; text-align: center; padding: 4px 20px; }
.teclas { display: grid; grid-template-columns: repeat(3, 96px); gap: 12px; }
.tecla { font-size: 36px; min-height: 72px; padding: 0; }
.tecla-listo { padding: 0 20px; }

/* Con teclado: pregunta y teclado lado a lado para que todo quepa sin desplazar */
.cuerpo-reto { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 900px) {
  .cuerpo-reto.con-teclado { display: grid; grid-template-columns: 1fr auto; align-items: start; }
  .cuerpo-reto.con-teclado .tarjeta-reto { min-height: 200px; }
}
.pregunta { overflow-wrap: anywhere; }

/* Opciones largas (Lectura): texto en vez de número grande */
.opcion.opcion-texto { font-size: 26px; min-height: 80px; text-align: left; padding: 12px 20px; }
.opciones:has(.opcion-texto) { grid-template-columns: 1fr; }

/* Cofre de sílabas */
.tarjeta-reto[data-reto^="cofre"] .pregunta { font-size: 80px; line-height: 1; }
.tarjeta-reto[data-reto^="cofre"] { padding: 12px 24px; }
.cofre { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.casillas, .fichas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.casillas { min-height: 96px; padding: 8px 12px; border-radius: var(--radio); background: #fff; }
.casilla { min-width: 110px; min-height: 80px; font-size: 40px; border: 4px dashed var(--lila); box-shadow: none; background: var(--crema); text-transform: none; }
.casilla.llena { border-style: solid; border-color: var(--rosa); background: #FFEFF4; }
.ficha { min-width: 110px; min-height: 80px; font-size: 40px; background: var(--menta); touch-action: none; }
.ficha.usada { visibility: hidden; }
.ficha.arrastrando { position: relative; z-index: 10; box-shadow: 0 10px 20px rgba(75, 58, 122, .3); }

/* Lectura con el guía */
.texto-lectura { font-size: 30px; line-height: 1.6; margin: 12px 0 0; }
.texto-lectura span { color: #A99FC2; transition: color .2s; }
.texto-lectura span.leida { color: var(--texto); }
.texto-a-la-vista { background: #fff; border-radius: var(--radio); padding: 10px 16px; }
.texto-a-la-vista summary { font-weight: 800; color: var(--morado); min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.texto-a-la-vista p { margin: 0; max-height: 150px; overflow-y: auto; line-height: 1.5; }