/* PLATAFORMA JUEGO - estilos de la app */
:root{
  --bg1:#6ec6ff; --bg2:#a5f3d0; --card:#ffffff; --ink:#243b53; --soft:#486581;
  --accent:#3d5afe; --accent2:#7c4dff; --good:#2fbf71; --bad:#ff5c7a;
  --warn:#ff9a3c; --shadow:rgba(36,59,83,.18);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
  background:linear-gradient(160deg,var(--bg1),var(--bg2));min-height:100dvh;
}
#app{max-width:640px;margin:0 auto;padding:16px;min-height:100dvh;display:flex;flex-direction:column}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}

/* Barra superior */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 2px 14px}
.topbar h1{font-size:1.15rem;margin:0}
.linklike{background:none;border:0;color:var(--soft);font-weight:700;font-size:.9rem;padding:6px}

/* Tarjetas */
.card{background:var(--card);border-radius:22px;padding:24px;box-shadow:0 10px 30px var(--shadow);margin-bottom:16px}
.card h2{margin:.1em 0 .5em;font-size:1.3rem}
.muted{color:var(--soft);font-size:.95rem;line-height:1.5}

/* Formularios */
.field{margin:12px 0}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px;color:var(--soft)}
.field input,.field select{
  width:100%;padding:14px;border:2px solid #e2e8f0;border-radius:14px;font-size:1rem;outline:none;
}
.field input:focus,.field select:focus{border-color:var(--accent)}

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  border:0;border-radius:999px;padding:16px 24px;font-size:1.05rem;font-weight:800;color:#fff;
  background:var(--accent);box-shadow:0 6px 14px var(--shadow);
}
.btn:active{transform:translateY(2px)}
.btn.big{padding:22px;font-size:1.25rem}
.btn.accent2{background:var(--accent2)}
.btn.good{background:var(--good)}
.btn.ghost{background:#eef2ff;color:var(--accent)}
.btn.small{width:auto;padding:10px 18px;font-size:.9rem}
.btn:disabled{opacity:.5}

/* Mensajes */
.msg{padding:12px 14px;border-radius:12px;font-weight:600;margin:8px 0}
.msg.err{background:#ffe3e9;color:#b3123a}
.msg.ok{background:#e2f7ec;color:#127a45}

/* Selector de avatares (perfiles niños) */
.avatares{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px}
.avatar-card{
  background:var(--card);border:0;border-radius:20px;padding:16px 8px;text-align:center;
  box-shadow:0 6px 14px var(--shadow);
}
.avatar-emoji{font-size:2.6rem;line-height:1}
.avatar-nombre{margin-top:6px;font-weight:800;font-size:.95rem}
.avatar-edad{font-size:.8rem;color:var(--soft)}

/* Home niño: saldo */
.saldo-box{text-align:center;padding:28px 20px}
.saldo-num{font-size:3.4rem;font-weight:900;line-height:1;color:var(--accent)}
.saldo-lbl{color:var(--soft);font-weight:700;margin-top:4px}
.acciones{display:grid;gap:14px;margin-top:8px}

/* PIN pad */
.pin-display{display:flex;justify-content:center;gap:12px;margin:16px 0}
.pin-dot{width:18px;height:18px;border-radius:50%;background:#cbd5e0}
.pin-dot.on{background:var(--accent)}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:280px;margin:0 auto}
.pinpad button{
  font-size:1.5rem;font-weight:800;padding:18px;border:0;border-radius:16px;background:var(--card);
  box-shadow:0 4px 10px var(--shadow);color:var(--ink);
}

/* Ejercicio */
.ejercicio-enunciado{font-size:1.6rem;font-weight:800;text-align:center;margin:10px 0 20px}
.opciones{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opcion{
  padding:22px;border:3px solid #e2e8f0;border-radius:18px;background:var(--card);
  font-size:1.4rem;font-weight:800;color:var(--ink);
}
.opcion.correcta{border-color:var(--good);background:#e2f7ec}
.opcion.incorrecta{border-color:var(--bad);background:#ffe3e9}
.opcion:disabled{opacity:1}
.reward{text-align:center;font-weight:800;color:var(--good);font-size:1.1rem;margin-top:14px;min-height:1.4em}
.progreso-linea{display:flex;justify-content:center;gap:6px;margin-bottom:8px}
.progreso-linea .dot{width:10px;height:10px;border-radius:50%;background:#cbd5e0}
.progreso-linea .dot.hit{background:var(--good)}

/* Galería de juegos */
.juegos-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.juego-card{
  background:var(--card);border:0;border-radius:20px;padding:20px 12px;text-align:center;
  box-shadow:0 6px 14px var(--shadow);position:relative;
}
.juego-emoji{font-size:2.6rem}
.juego-nombre{font-weight:800;margin-top:8px}
.juego-lock{position:absolute;inset:0;background:rgba(255,255,255,.75);border-radius:20px;
  display:flex;align-items:center;justify-content:center;font-size:2rem}

/* Reproductor de juego */
.player-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tiempo-pill{background:var(--card);border-radius:999px;padding:8px 16px;font-weight:900;
  box-shadow:0 4px 10px var(--shadow);font-variant-numeric:tabular-nums}
.tiempo-pill.poco{color:var(--bad)}
.player-frame{width:100%;border:0;border-radius:18px;background:#fff;height:70dvh;box-shadow:0 10px 30px var(--shadow)}
.overlay-fin{
  position:fixed;inset:0;background:rgba(36,59,83,.6);display:flex;align-items:center;justify-content:center;
  padding:20px;z-index:20;
}
.overlay-fin .box{background:#fff;border-radius:24px;padding:28px;text-align:center;max-width:340px}

/* Lista niños (panel tutor) */
.nino-row{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:#f7fafc;margin-bottom:10px}
.nino-row .emoji{font-size:2rem}
.nino-row .info{flex:1}
.nino-row .info b{display:block}
.nino-row .info span{font-size:.85rem;color:var(--soft)}

.center{text-align:center}
.mt{margin-top:14px}
.spinner{width:40px;height:40px;border:4px solid #e2e8f0;border-top-color:var(--accent);border-radius:50%;
  animation:spin .8s linear infinite;margin:30px auto}
@keyframes spin{to{transform:rotate(360deg)}}