/* Robito: la pantalla de la tablet. Una sola cosa cada vez, todo grande. */

:root {
  --fondo: #fff7e8;
  --fondo-2: #ffe9c2;
  --tinta: #1b2a4a;
  --azul: #3a9be8;
  --verde: #2fbf71;
  --naranja: #ff8a3d;
  --rosa: #ff5c8a;
  --amarillo: #ffc93c;
  --gris: #8a94a8;
  --tarjeta: #ffffff;
  --sombra: 0 8px 0 rgba(27, 42, 74, 0.12);
  --boca: 0;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: radial-gradient(circle at 50% 30%, var(--fondo) 0%, var(--fondo-2) 100%);
  color: var(--tinta);
  font-family: 'Baloo 2', system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
[hidden] { display: none !important; }

.pantalla { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* --- Botones ----------------------------------------------------------------- */

.boton {
  font-family: inherit; font-weight: 800; color: #fff; border: 0; cursor: pointer;
  border-radius: 28px; background: var(--azul); box-shadow: 0 8px 0 #2569a8;
  transition: transform .1s, box-shadow .1s;
}
.boton:active { transform: translateY(6px); box-shadow: 0 2px 0 #2569a8; }
.boton.grande { font-size: 1.6rem; padding: .6em 1.4em; }
.boton.enorme { font-size: clamp(1.8rem, 4.5vw, 2.6rem); padding: .6em 1.2em; animation: latido 1.6s ease-in-out infinite; }
.boton.foto { background: var(--naranja); box-shadow: 0 8px 0 #c75f1c; display: flex; align-items: center; gap: .4em; }
.boton.foto:active { box-shadow: 0 2px 0 #c75f1c; }
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.boton-icono {
  font-size: 1.8rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .7); box-shadow: var(--sombra); cursor: pointer;
}

/* --- Barra de arriba ------------------------------------------------------------ */

.barra { display: flex; align-items: center; gap: .8rem; padding: max(.8rem, env(safe-area-inset-top)) 1rem .2rem; }
.hueco { flex: 1; }
.estrellas {
  display: flex; align-items: center; gap: .3rem; font-size: 2rem; font-weight: 800;
  background: #fff; border-radius: 99px; padding: .1rem 1rem; box-shadow: var(--sombra);
}
.estrellas.gana .estrella-icono { animation: gana 1s ease; display: inline-block; }
@keyframes gana { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(2.2) rotate(30deg); } 100% { transform: scale(1) rotate(360deg); } }

/* --- Escena: Robito + lo de abajo ---------------------------------------------- */

.escena { flex: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding: 0 1rem 1rem; }
.escenario { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 46vh; }
@media (orientation: landscape) {
  .escena { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; }
  .escenario { min-height: 0; height: 100%; }
}

.panel { display: flex; gap: 1.5rem; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; }

/* Menú */
.opcion { display: flex; flex-direction: column; align-items: center; font-size: clamp(1.6rem, 3.5vw, 2.3rem); padding: .5em 1.2em; min-width: 11rem; }
.opcion-icono { font-size: 1.6em; line-height: 1.1; }
.opcion.leer { background: var(--verde); box-shadow: 0 8px 0 #1f8a51; }
.opcion.leer:active { box-shadow: 0 2px 0 #1f8a51; }
.opcion.deberes { background: var(--rosa); box-shadow: 0 8px 0 #c43a64; }
.opcion.deberes:active { box-shadow: 0 2px 0 #c43a64; }

/* Leer */
#panel-leer { flex-direction: column; gap: 1rem; }
.texto-leer {
  font-family: 'Andika', sans-serif; font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.45; margin: 0;
  background: var(--tarjeta); border-radius: 28px; padding: .6em .9em; box-shadow: var(--sombra); max-width: 100%;
  text-align: center;
}
.texto-leer .p { border-radius: 10px; padding: 0 .08em; transition: background .3s; }
.texto-leer .p.mal { background: #ffe08a; box-shadow: inset 0 -.18em 0 var(--naranja); }
.texto-leer .p.bien { color: var(--verde); }
.palabra-leer {
  font-family: 'Andika', sans-serif; font-size: clamp(3rem, 8vw, 5.5rem); margin: 0; font-weight: 700;
  background: #fff4c7; border: 6px dashed var(--amarillo); border-radius: 28px; padding: .1em .6em; animation: aparece .4s ease;
}
.palabra-leer .silaba { display: inline-block; }
.palabra-leer .silaba + .silaba::before { content: '·'; color: var(--naranja); margin: 0 .1em; }
@keyframes aparece { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.progreso { display: flex; gap: .4rem; }
.progreso span { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: rgba(27, 42, 74, .15); }
.progreso span.hecho { background: var(--verde); }
.progreso span.ahora { background: var(--amarillo); transform: scale(1.3); }

/* Pausa */
#panel-pausa { flex-direction: column; }
.texto-pausa { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; text-align: center; margin: 0; }
.reloj { position: relative; width: 9rem; height: 9rem; }
.reloj svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.reloj-fondo { fill: none; stroke: rgba(27, 42, 74, .1); stroke-width: 10; }
.reloj-arco { fill: none; stroke: var(--verde); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 276.5; transition: stroke-dashoffset 1s linear; }
#reloj-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; font-weight: 800; }

/* Micrófono */
.microfono { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.boton-mic { position: relative; width: 6.5rem; height: 6.5rem; border-radius: 50%; border: 0; background: var(--verde); cursor: pointer; box-shadow: 0 6px 0 #1f8a51; }
.mic-icono { position: relative; font-size: 3rem; }
.nivel { position: absolute; inset: -10px; border-radius: 50%; border: 6px solid var(--verde); opacity: .5; transform: scale(calc(1 + var(--nivel, 0) * .6)); transition: transform .08s; }
.texto-mic { font-size: 1.4rem; font-weight: 800; color: var(--verde); }

.subtitulo { margin: 0; min-height: 1.5em; font-size: clamp(1.1rem, 2.2vw, 1.4rem); color: var(--gris); text-align: center; max-width: 40rem; }

/* --- Robito ---------------------------------------------------------------------- */

.robito { position: relative; display: grid; place-items: center; min-height: 0; height: 100%; }
.cuerpo { width: 100%; height: 100%; max-height: 44vh; overflow: visible; animation: flota 4s ease-in-out infinite; }
@media (orientation: landscape) { .cuerpo { max-height: 78vh; } }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.ojo-forma, .pupila, .parpado, .boca > *, .mejilla, .bombilla, .oreja { transition: all .25s ease; transform-box: fill-box; transform-origin: center; }
.pupila { transform: translate(var(--mx, 0px), var(--my, 0px)); }
.parpado { transition: height .08s; }
.parpadea .parpado { height: 92px; }
.ojo-cerrado { opacity: 0; transition: opacity .2s; }
.boca-abierta { transform: scaleY(calc(.15 + var(--boca) * 1.1)) scaleX(calc(.7 + var(--boca) * .4)); opacity: 0; }
.boca-triste { opacity: 0; }
.mejilla { opacity: .45; }
.bombilla { filter: drop-shadow(0 0 0 #ffd400); }

/* Hablando: la boca se abre con el volumen de la voz */
.hablando .boca-sonrisa { opacity: 0; }
.hablando .boca-abierta { opacity: 1; transition: none; }

/* Escuchando: antena encendida y orejas que vibran */
.escuchando .bombilla { filter: drop-shadow(0 0 14px #ffd400); animation: brilla 1s ease-in-out infinite; }
.escuchando .oreja { fill: var(--verde); }
.escuchando .pupila { transform: translate(0, 4px) scale(1.08); }
@keyframes brilla { 50% { filter: drop-shadow(0 0 26px #ffd400); } }

/* Caras */
.feliz .mejilla { opacity: .8; }
.animando .cuerpo { animation: bota .6s ease-in-out 3; }
.animando .mejilla { opacity: 1; }
@keyframes bota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-26px) rotate(-3deg); } }
.sorprendido .ojo-forma { transform: scale(1.18); }
.sorprendido .boca-sonrisa { opacity: 0; }
.sorprendido .boca-abierta { opacity: 1; transform: scale(.7, 1.1); }
.pensando .pupila { transform: translate(12px, -14px); }
.pensando .boca-sonrisa { transform: scale(.5, .3); }
.guino .ojo-der .ojo-forma { opacity: 0; }
.guino .ojo-cerrado-der { opacity: 1; }
.triste .boca-sonrisa { opacity: 0; }
.triste .boca-triste { opacity: 1; }
.triste .ojo-forma { transform: scaleY(.8) translateY(6px); }
.dormido .ojo-forma { opacity: 0; }
.dormido .ojo-cerrado { opacity: 1; }
.dormido .boca-sonrisa { transform: scale(.4, .2); }
.dormido .cuerpo { animation: respira 3.5s ease-in-out infinite; }
@keyframes respira { 50% { transform: scale(1.02) translateY(4px); } }

.zzz { position: absolute; top: 8%; right: 12%; font-size: 2.6rem; font-weight: 800; color: var(--azul); opacity: 0; }
.dormido .zzz { opacity: 1; }
.zzz span { display: inline-block; animation: zeta 2.4s ease-in-out infinite; }
.zzz span:nth-child(2) { animation-delay: .4s; font-size: 1.3em; }
.zzz span:nth-child(3) { animation-delay: .8s; font-size: 1.7em; }
@keyframes zeta { 0% { transform: translate(0, 10px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(14px, -26px); opacity: 0; } }

.pensando-puntos { position: absolute; bottom: 18%; display: none; gap: .5rem; }
.esperando .pensando-puntos { display: flex; }
.pensando-puntos span { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--azul); animation: punto 1s ease-in-out infinite; }
.pensando-puntos span:nth-child(2) { animation-delay: .15s; }
.pensando-puntos span:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 50% { transform: translateY(-14px); } }

/* --- Emparejar -------------------------------------------------------------------- */

#emparejar { align-items: center; justify-content: center; padding: 1rem; }
.tarjeta-emparejar { background: #fff; border-radius: 32px; padding: 2rem; max-width: 30rem; width: 100%; text-align: center; box-shadow: var(--sombra); }
.tarjeta-emparejar h1 { margin: 0 0 .4rem; font-size: 2.2rem; }
.tarjeta-emparejar p { font-family: system-ui, sans-serif; font-size: 1.1rem; }
#codigo { font: 800 2.6rem 'Baloo 2', monospace; letter-spacing: .3em; text-align: center; width: 100%; padding: .2em; margin: .6rem 0 1.2rem; border-radius: 18px; border: 3px solid #d6dbe6; }
.error { color: #c43a3a; min-height: 1.4em; }

@media (prefers-reduced-motion: reduce) {
  .cuerpo, .boton.enorme { animation: none !important; }
}