/* ============================================================
   Aventura Matemática — APP (pantallas internas)
   Mismo sistema de diseño que la landing (web/index.html +
   css/landing.css): paleta del brief, botones caramelo, header
   blanco sticky, footer tinta. Las pantallas del niño mantienen
   la inmersión del bosque del hero; las de adulto van sobre
   blanco cálido con tarjetas blancas.
   ============================================================ */
:root{
  --cielo:#0AA8E8; --cielo-prof:#006FCA; --mar:#05A8CF; --alt-cabecera:92px;
  --verde:#20CF87; --verde-claro:#22E9A2; --verde-osc:#16a86c;
  --amarillo:#FFC928; --ambar:#F29A00;
  --azul:#1269D8; --azul-osc:#082F91;
  --rojo:#e8705f; --rojo-osc:#c8553f;
  --tinta:#08213A; --tinta2:#041D35;
  --blanco-calido:#FFF8E8;
  --azul-claro:#34b6ff; /* arranque de los degradados azules (antes hex suelto en 6 vistas) */
  --sombra-suave:0 6px 18px rgba(8,33,58,.12);
  --sombra:0 6px 18px rgba(8,33,58,.2); /* sombra marcada (reproductor) */
  --radio:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito',system-ui,Segoe UI,Roboto,sans-serif;
  color:var(--tinta); background:var(--blanco-calido); margin:0;
  font-size:17px; line-height:1.55; min-height:100vh;
  display:flex; flex-direction:column;
}
h1,h2,h3,.display-font{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;color:var(--tinta)}
a{color:var(--azul);text-decoration:none}
.container-am{max-width:1200px;margin:0 auto;padding:0 24px;width:100%}
main{flex:1 1 auto;display:flex;flex-direction:column}

/* ---------- Botones caramelo (idénticos a la landing) ---------- */
.btn-am{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  border:none;cursor:pointer;font-family:'Baloo 2',sans-serif;font-weight:700;
  border-radius:var(--radio);text-decoration:none;line-height:1;
  transition:transform .12s ease, box-shadow .12s ease;color:var(--tinta);
}
.btn-am:active{transform:translateY(2px)}
.btn-jugar{
  background:linear-gradient(180deg,var(--verde-claro),var(--verde));
  color:var(--tinta);font-size:1.6rem;padding:1rem 2rem;
  box-shadow:0 8px 0 var(--verde-osc),0 14px 22px rgba(22,168,108,.45);
  border:2px solid rgba(255,255,255,.5);min-height:60px;
}
.btn-jugar:hover{transform:translateY(-2px);box-shadow:0 10px 0 var(--verde-osc),0 18px 28px rgba(22,168,108,.5)}
.btn-jugar .play{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;color:var(--verde-osc);font-size:1.1rem}
.btn-jugar.pulse{animation:respira 2.6s ease-in-out infinite}
@keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.btn-jugar-mini{
  background:linear-gradient(180deg,var(--verde-claro),var(--verde));color:var(--tinta);
  padding:.55rem 1.1rem;font-size:1rem;box-shadow:0 4px 0 var(--verde-osc);
}
.btn-outline{background:#fff;color:var(--azul);border:2px solid var(--azul);padding:.6rem 1.2rem;font-size:1rem;box-shadow:var(--sombra-suave)}
.btn-azul{background:linear-gradient(180deg,var(--azul-claro),var(--azul));color:#fff;padding:.55rem 1.1rem;font-size:1rem;box-shadow:0 4px 0 var(--azul-osc)}
.btn-ambar{background:linear-gradient(180deg,#ffd98a,var(--amarillo));color:#5b4a00;padding:.55rem 1.1rem;font-size:1rem;box-shadow:0 4px 0 var(--ambar)}
.btn-rojo{background:linear-gradient(180deg,#ff8a7a,var(--rojo));color:#fff;padding:.55rem 1.1rem;font-size:1rem;box-shadow:0 4px 0 var(--rojo-osc)}
.btn-bloqueado{
  background:linear-gradient(180deg,#e9eef3,#d6dee6);color:#4d5b68;
  padding:.55rem 1.1rem;font-size:1rem;box-shadow:0 4px 0 #b7c2cc;cursor:default;
}

/* ---------- Header blanco sticky (como la landing) ---------- */
.am-header{background:#fff;box-shadow:var(--sombra-suave);position:sticky;top:0;z-index:50}
.am-header .container-am{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:1rem;padding-top:.35rem;padding-bottom:.35rem}
.am-logo img{height:58px;display:block}
.am-header-right{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
.am-header-right form{margin:0}
/* HUD del niño en el header (chips) */
.chip-hud{
  display:inline-flex;align-items:center;gap:.35rem;background:var(--blanco-calido);
  border-radius:999px;padding:.35rem .85rem;box-shadow:var(--sombra-suave);
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.95rem;white-space:nowrap;
}
.chip-hud .ava{width:30px;height:30px;border-radius:50%;background:#cfe6d6;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;font-size:1.1rem}
.chip-hud .ava img{width:100%;height:100%;object-fit:cover}
/* «Volver» era texto gris al lado de «Cerrar sesion», que si tiene borde: el
   ojo lo leia como una etiqueta, no como algo pulsable (QA del fundador,
   26-jul). Ahora es una pastilla de la misma familia que su vecina, en
   secundario: mismo alto, borde mas suave. */
.enlace-suave{display:inline-flex;align-items:center;gap:.35rem;color:var(--azul);font-weight:800;
  font-size:.95rem;background:var(--blanco-calido,#fff);border:2px solid #cfe0f2;border-radius:999px;
  padding:.42rem .95rem;margin:0;text-decoration:none;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s}
.enlace-suave:hover{background:#eaf3ff;border-color:var(--azul);color:var(--azul)}

/* ---------- Hero del bosque (pantallas del niño) ---------- */
.escena-bosque{
  position:relative;flex:1 1 auto;overflow:hidden;
  background:linear-gradient(180deg,var(--cielo),var(--cielo-prof));
  display:flex;flex-direction:column;align-items:center;
  padding:1.6rem 16px 3rem;
  /* Cabecera (~92px) + escena ≥ 768px (mínimo tablet); en pantallas más
     altas llena la ventana y el hero reparte (juego arriba, guía abajo). */
  min-height:calc(100vh - 92px); /* fallback sin dvh */
  min-height:max(676px, calc(100dvh - var(--alt-cabecera, 92px))); /* la altura real la fija landing.css */
}
.escena-bosque > .fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;z-index:0}
.escena-bosque > *:not(.fondo){position:relative;z-index:2}
/* Los signos decorativos NO ocupan flujo: la regla de arriba les pisaba el
   absolute y sus huecos creaban una banda vacía bajo la cabecera. */
.escena-bosque > .signo-flota{position:absolute;z-index:1}
.signo-flota{position:absolute;z-index:1;filter:drop-shadow(0 4px 6px rgba(8,33,58,.3));animation:flota 4s ease-in-out infinite;pointer-events:none}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Tarjeta héroe crema (la del diseño) */
.tarjeta-hero{
  background:rgba(255,248,232,.94);border-radius:24px;padding:1.6rem 1.8rem;
  box-shadow:var(--sombra-suave);backdrop-filter:blur(2px);
}

/* ---------- Secciones de utilidades (adulto / menús) ---------- */
.seccion{padding:2.2rem 0}
.seccion h2{text-align:center;font-size:1.7rem;margin-bottom:1.6rem;color:var(--azul-osc)}
.titulo-hoja::before{content:"🍃 "}
.titulo-hoja::after{content:" 🍃"}
.card-am{background:#fff;border-radius:var(--radio);box-shadow:var(--sombra-suave);padding:1.3rem 1.2rem}
.nota-suave{text-align:center;font-size:.85rem;color:#626e79;margin-top:1.4rem}

/* ---------- Formularios (zona adulta) ---------- */
.form-am label{display:block;font-weight:800;margin:.85rem 0 .3rem;font-size:.95rem}
.form-am input[type=text],.form-am input[type=email],.form-am input[type=password],
.form-am input[type=number],.form-am input[type=search],.form-am select{
  width:100%;border:2px solid #d9e4dc;border-radius:14px;padding:.78rem .9rem;
  font-size:1rem;background:#fff;font-family:inherit;color:var(--tinta);
}
.form-am input:focus,.form-am select:focus{border-color:var(--verde)}

/* ---------- Foco visible (docs/35 §3.7) ----------
   No había NINGUNO en toda la app, y encima los inputs hacían `outline:none`,
   que borra el del navegador sin poner nada en su lugar. Quien navega con
   teclado —o con un conmutador, que es como usa una tablet parte de los niños
   con discapacidad motora— no tenía forma de saber dónde estaba.
   Va en `:focus-visible` y no en `:focus` a propósito: así el niño que toca
   con el dedo no ve un cerco alrededor de cada botón que pulsa. */
:focus-visible{
  outline:3px solid var(--azul);
  outline-offset:3px;
  border-radius:4px;
}
/* Sobre el bosque (fondos oscuros o fotográficos) el azul se pierde: allí el
   contorno va en blanco, con una sombra que lo despega del fondo. */
.escena-bosque :focus-visible,.hero :focus-visible,.am-footer :focus-visible{
  outline-color:#fff;
  box-shadow:0 0 0 6px rgba(8,33,58,.45);
}
.form-am .error{background:#fde7e3;color:#a3372a;border-radius:12px;padding:.6rem .8rem;font-size:.9rem;font-weight:700;margin-bottom:.6rem}
.form-am .check{display:flex;gap:.6rem;align-items:flex-start;margin-top:.9rem;font-size:.88rem;line-height:1.4}
.form-am .check input{margin-top:3px;width:18px;height:18px;flex:0 0 auto}

/* ---------- Footer tinta (como la landing) ---------- */
.am-footer{background:var(--tinta);color:var(--blanco-calido);padding:1.4rem 0;margin-top:auto}
.am-footer .container-am{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.6rem;justify-content:space-between}
.am-footer img{height:38px}
.am-footer nav{display:flex;flex-wrap:wrap;gap:1rem}
.am-footer a{color:#cfe6ff;font-size:.88rem}
.am-footer .copy{font-size:.82rem;opacity:.8}
@media (max-width:768px){
  .am-footer .container-am{flex-direction:column;text-align:center}
  .am-logo img{height:46px}
}
@media (prefers-reduced-motion:reduce){
  .btn-jugar.pulse,.signo-flota{animation:none}
}

/* ---------- Ola P2 (docs/23 §4-5): iconos de marca, hoja sobre el bosque,
   cabecera en tablet y explicaciones táctiles ---------- */
/* Icono de economía en línea con el texto (moneda, estrella, trofeo…). */
.ico-am{height:1.05em;width:auto;vertical-align:-.14em}
/* Carta de contenido sobre la escena del bosque (tienda, insignias, examen…). */
.escena-bosque .hoja-bosque{background:rgba(255,248,232,.96);border-radius:24px;
  box-shadow:0 16px 40px rgba(8,33,58,.35);margin:1.2rem auto 2rem;padding:1.5rem 1.6rem 1.7rem;
  width:min(760px,94vw);position:relative;z-index:1}
/* La cabecera de escritorio se controla por CSS (landing.css la oculta ≤991px);
   antes iba con style inline y en tablet salían HUD y hamburguesa a la vez. */
.am-login-desktop{display:flex}
/* Botón "?" táctil junto a los chips (en tablet no hay hover que explique). */
.btn-explica-tactil{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  margin-left:6px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--azul);
  font-weight:900;font-size:.85rem;box-shadow:0 1px 3px rgba(8,33,58,.25);cursor:pointer}
#toastExplica{position:fixed;left:50%;bottom:16px;transform:translate(-50%,12px);opacity:0;
  transition:opacity .25s,transform .25s;background:rgba(255,248,232,.98);color:var(--tinta);
  border:3px solid var(--verde-osc);border-radius:16px;padding:10px 16px;font-weight:800;
  max-width:min(480px,92vw);text-align:center;z-index:40;pointer-events:none}
#toastExplica.on{opacity:1;transform:translate(-50%,0)}