/* Morado oscuro SIEMPRE (Rubén, 25/09: «el fondo blanco le daña los ojos y tiene la pantalla frente a ella»),
   haya puesto el aparato tema claro u oscuro. */
:root{color-scheme:dark;--fondo:#21172f;--tinta:#f3ecfc;--suave:#b9abd2;--tarjeta:#2d2142;--borde:#46355f;--acento:#e8618c;--acento2:#f4a261;--ok:#3cc9b6;--mal:#ff8a8a;--sombra:none}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--fondo);color:var(--tinta);font:18px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:760px;margin:0 auto;padding:24px 16px 40px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
h1{font-size:clamp(26px,6vw,40px);margin:8px 0 0}
p{margin:0}
a{color:#d9c8ff}
.suave{color:var(--suave);font-size:15px}
.caja{background:var(--tarjeta);border:1px solid var(--borde);border-radius:18px;padding:18px;box-shadow:var(--sombra);width:100%;max-width:520px}
button{font:inherit;cursor:pointer;border:0;border-radius:999px;padding:14px 26px;background:var(--acento);color:#fff;font-weight:700;touch-action:manipulation}
button.seg{background:transparent;color:var(--tinta);border:2px solid var(--borde)}
button:disabled{opacity:.5;cursor:default}
input,select,textarea{font:inherit;width:100%;padding:12px 14px;border-radius:12px;border:2px solid var(--borde);background:var(--fondo);color:var(--tinta);margin:6px 0 12px}
label{display:block;text-align:left;font-size:15px;color:var(--suave)}
.error{color:var(--mal);min-height:1.4em;font-size:16px}
.oculto{display:none!important}
/* teclado de la clave */
.puntos{font-size:34px;letter-spacing:10px;min-height:44px}
.teclado{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:320px}
.teclado button{font-size:28px;padding:18px 0;border-radius:18px;background:var(--tarjeta);color:var(--tinta);border:2px solid var(--borde);box-shadow:var(--sombra)}
.teclado button.accion{font-size:18px}
/* la profe */
.profe{width:min(280px,66vw);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#6b5a95,#4a3b6c 72%);box-shadow:0 10px 36px rgba(0,0,0,.35);transition:box-shadow .2s ease}
.profe svg{width:92%;height:auto;overflow:visible}
/* Panda lo mueve panda.js con el atributo transform: aquí NO va ningún transform ni animación para sus
   piezas, que una regla de CSS con transform le gana al atributo y lo dejaría quieto */
.profe[data-estado="escucha"]{box-shadow:0 0 0 8px rgba(60,201,182,.30),0 10px 36px rgba(0,0,0,.35)}
.estado{font-size:22px;font-weight:700;min-height:1.5em}
.subtitulo{font-size:clamp(20px,4.5vw,26px);min-height:3em;max-width:640px}
.oido{font-size:15px;color:var(--suave);min-height:1.4em}
.nivel{width:200px;height:8px;border-radius:8px;background:var(--borde);overflow:hidden}
.nivel>div{height:100%;width:0;background:var(--ok);transition:width .08s linear}
.botones{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* padres */
table{width:100%;border-collapse:collapse;font-size:15px;text-align:left}
td,th{padding:6px 4px;border-bottom:1px solid var(--borde)}
.codigo{font:700 28px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:2px}
/* pantalla completa: Panda crece con la pantalla (dos reglas: un selector que el navegador no conoce tira la regla entera) */
:root:fullscreen .profe{width:min(56vh,80vw)}
:root:-webkit-full-screen .profe{width:min(56vh,80vw)}
/* los ojos: la cámara en directo, pequeña, y la última foto que ha mirado */
.ojos{display:flex;flex-direction:column;align-items:center;gap:4px}
.ojos video{width:min(240px,60vw);aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:2px solid var(--borde);background:#000}
.visto{max-width:min(240px,60vw);border-radius:10px;border:2px solid var(--acento2)}
button.mira{background:var(--acento2);color:#2a1a0a}
/* el cuaderno en «Padres» */
.hoja{border-top:1px solid var(--borde);padding:10px 0;text-align:left;display:flex;flex-direction:column;gap:4px}
.hoja-dia{font-weight:700}
.hoja button{align-self:flex-start;padding:6px 14px;font-size:15px}
.examen{color:var(--acento2);font-weight:700}
label.casilla{display:flex;gap:10px;align-items:center;color:var(--tinta);margin:8px 0}
label.casilla input{width:auto;margin:0}
/* la barrita de límites */
.limites{display:flex;flex-direction:column;gap:6px;width:min(420px,90vw);font-size:14px;color:var(--suave)}
.lim{display:flex;flex-direction:column;gap:3px;text-align:left}
.barra{height:8px;border-radius:8px;background:var(--borde);overflow:hidden}
.barra>div{height:100%;width:0;background:var(--ok);transition:width .4s ease}
.barra>div.poco,.barra>div.repuesto,.barra>div.local{background:var(--acento2)}
.barra>div.agotada{background:var(--mal);width:100%!important}
/* en pantalla ancha, la cámara y la última foto van a las esquinas de arriba: así los botones caben sin desplazarse */
@media (min-width:900px){
  .ojos{position:fixed;top:16px;right:16px;z-index:2}
  .ojos video{width:220px}
  .visto{position:fixed;top:16px;left:16px;z-index:2;max-width:200px}
}
/* estrellas y fiesta (Rubén, 25/09): las estrellas de hoy junto a Panda, y la lluvia de cosas cuando acierta.
   Las piezas las crea profe.js; su posición y su tiempo van por CSSOM (la CSP no deja estilos en línea en el HTML) */
.profe{position:relative}
.estrellas{position:absolute;right:-4px;top:4%;background:#ffd166;color:#2a1a0a;font-weight:800;font-size:20px;
  border-radius:999px;padding:4px 12px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.estrellas.pum{animation:pum .6s ease}
@keyframes pum{0%{transform:scale(1)}40%{transform:scale(1.55) rotate(-8deg)}100%{transform:scale(1)}}
.fiesta{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.chispa{position:absolute;line-height:1;animation-fill-mode:both;animation-timing-function:ease-out;opacity:0}
.chispa.sube{bottom:-50px;animation-name:sube}
.chispa.cae{top:-30px;animation-name:cae;animation-timing-function:linear}
.chispa.crece{top:28%;animation-name:crece}
.chispa.grande{font-size:170px!important;margin-left:-85px;top:18%}
.chispa.papel{width:10px;height:16px;border-radius:2px}
.chispa.mancha{width:26px;height:26px;border-radius:50% 40% 55% 45%}
@keyframes sube{0%{transform:translate(0,0) rotate(0);opacity:0}12%{opacity:1}100%{transform:translate(var(--dx),-85vh) rotate(var(--gira));opacity:0}}
@keyframes cae{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),105vh) rotate(var(--gira));opacity:.3}}
@keyframes crece{0%{transform:scale(.2);opacity:0}30%{opacity:1}100%{transform:translate(var(--dx),-18vh) scale(1.15);opacity:0}}
@media (prefers-reduced-motion:reduce){.estrellas.pum{animation:none}}
/* la voz de Panda, en «Padres» */
.voces{display:flex;flex-direction:column;gap:8px;margin:6px 0 10px}
label.voz-op{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--fondo);
  border:2px solid var(--borde);border-radius:12px;padding:10px 12px;margin:0;font-size:15px;text-align:left}
label.voz-op:has(input:checked){border-color:var(--acento)}
label.voz-op .escucha{padding:6px 14px;font-size:14px}
@media (max-width:520px){label.voz-op{grid-template-columns:auto minmax(0,1fr)} label.voz-op .escucha{grid-column:2;justify-self:start}}
/* la pizarra de Panda (Rubén, 25/09): verde de tiza con marco de madera, dibujos grandes y lo escrito en blanco */
.pizarra{width:min(520px,92vw);background:#1e3b33;border:7px solid #8a5a3b;border-radius:14px;
  box-shadow:inset 0 0 28px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.35);padding:12px 18px 16px;
  display:flex;flex-direction:column;align-items:center;gap:4px}
.piz-dibujo{font-size:clamp(64px,16vw,112px);line-height:1.1;letter-spacing:6px}
.piz-texto{font:800 clamp(24px,6vw,34px)/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#f6f3e8;
  letter-spacing:.5px;text-shadow:0 0 1px rgba(255,255,255,.6);overflow-wrap:anywhere}
.piz-texto.solo{font-size:clamp(34px,9vw,54px)}
.pizarra.pum{animation:pizarra-entra .45s ease-out}
@keyframes pizarra-entra{0%{transform:scale(.85);opacity:.2}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1)}}
.piz-antes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:min(560px,94vw)}
.piz-antes:empty{display:none}
.piz-chip{padding:6px 12px;font-size:17px;font-weight:600;background:var(--tarjeta);color:var(--tinta);
  border:2px solid var(--borde);border-radius:999px}
:root:fullscreen .pizarra{width:min(640px,80vw)}
:root:-webkit-full-screen .pizarra{width:min(640px,80vw)}
@media (prefers-reduced-motion:reduce){.pizarra.pum{animation:none}}
/* el único toque que puede hacer falta (si el navegador no deja sonar sin tocar): la pantalla entera es el botón */
.toca{position:fixed;inset:0;z-index:5;border-radius:0;background:rgba(33,23,47,.92);color:var(--tinta);
  font-size:clamp(26px,6vw,44px);font-weight:800;padding:24px}
/* la hoja entera y los exámenes que vienen (Rubén, 25/09) */
.hoja-prog{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;font-size:18px;font-weight:700}
.hoja-puntos{display:flex;flex-wrap:wrap;gap:5px}
.hp{min-width:30px;padding:3px 7px;border-radius:999px;border:2px solid var(--borde);font-size:14px;color:var(--suave)}
.hp.hecho{background:var(--ok);border-color:var(--ok);color:#10302b}
.examenes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.examen-chip{padding:5px 12px;border-radius:999px;background:var(--tarjeta);border:2px solid var(--borde);font-size:16px;font-weight:700}
.examen-chip.cerca{border-color:var(--acento2);color:#ffd9b8}
/* la prueba del oído en «Padres» */
.oido-frase{font-size:clamp(24px,5vw,32px);font-weight:800;text-align:center;margin:10px 0}
#oidoCaja .nivel{margin:6px auto}