/* ============================================================
   tumaestra · hoja de estilos central
   Tokens extraídos de los juegos (fabrica_pkg/deploy/juegos) y
   del sitio estático (deploy/6grado). Mobile-first.
   ============================================================ */
:root {
  /* Paleta */
  --azul:#00AEEF; --violeta:#7B3FE4; --verde:#43C83C; --amarillo:#FFC400;
  --rosa:#F73B8B; --naranja:#FF7A00; --rojo:#FF4F5E; --noche:#102A5C;
  --bg:#F4F8FF;

  /* Superficies / neutros */
  --card:#ffffff; --surface:#F7FAFF; --border:#E3EDFB;
  --muted:#6b78a0; --muted-2:#9aa6bd; --track:#E7EEFA;
  --chip-bg:#EEF2FB; --chip-violet-bg:#EEE7FE;

  /* Estados de respuesta */
  --ok-bg:#E4F9E8; --ok-border:var(--verde); --ok-text:#177a31;
  --no-bg:#FCEBEF; --no-border:var(--rojo);  --no-text:#c0314b;

  /* Tipografía */
  --display:'Baloo 2', system-ui, sans-serif;
  --body:'Nunito', system-ui, sans-serif;

  /* Radios */
  --r-ctrl:14px; --r-card:22px; --r-hero:24px; --r-pill:999px;

  /* Sombras */
  --sh-card:0 6px 18px rgba(16,42,92,.08);
  --sh-hero:0 14px 30px rgba(123,63,228,.22);
  --sh-btn:0 6px 16px rgba(123,63,228,.25);

  /* Layout */
  --wrap:720px;
}

/* ---------- Base ---------- */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--body); color:var(--noche);
  background:var(--bg); line-height:1.5; font-size:16px;
  min-height:100vh; display:flex; flex-direction:column;
}
a { color:var(--violeta); }
h1,h2,h3 { font-family:var(--display); font-weight:800; line-height:1.15; }
h1 { font-size:clamp(22px,6vw,28px); margin:0 0 12px; }
h2 { font-size:clamp(19px,5vw,22px); margin:0 0 8px; }
h3 { font-size:18px; margin:0; }
code { background:var(--chip-bg); border-radius:6px; padding:1px 6px; font-size:.9em; }

/* ---------- Contenedor ---------- */
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 16px; }

/* ---------- Header / nav ---------- */
.site-header { background:var(--card); border-bottom:2px solid var(--border); }
.site-header__inner { display:flex; align-items:center; gap:12px; padding:12px 16px; }
.brand {
  font-family:var(--display); font-weight:800; font-size:22px;
  color:var(--azul); text-decoration:none; white-space:nowrap;
}
.brand span { color:var(--violeta); }
.site-nav { margin-left:auto; display:flex; align-items:center; gap:14px; font-weight:700; }
.site-nav a { text-decoration:none; }
.site-nav form { margin:0; }
.linkbtn { border:none; background:none; color:var(--violeta); cursor:pointer; font:inherit; font-weight:700; padding:0; }

.site-main { flex:1 0 auto; padding:20px 0 48px; }

/* ---------- Botones ---------- */
.btn {
  display:inline-block; font-family:var(--body); font-weight:800; font-size:16px;
  border:none; border-radius:var(--r-ctrl); padding:12px 20px; cursor:pointer;
  background:var(--violeta); color:#fff; box-shadow:var(--sh-btn);
  text-decoration:none; text-align:center; line-height:1.2;
}
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.5; cursor:default; }
.btn--sec { background:#fff; color:var(--violeta); border:2px solid var(--border); box-shadow:none; }
.btn--ghost { background:transparent; color:var(--muted); box-shadow:none; }
.btn--block { display:block; width:100%; }

/* ---------- Tarjetas ---------- */
.card { background:var(--card); border-radius:var(--r-card); padding:20px; box-shadow:var(--sh-card); }

/* ---------- Hero ---------- */
.hero {
  background:linear-gradient(135deg,var(--azul),var(--violeta)); color:#fff;
  border-radius:var(--r-hero); padding:22px; box-shadow:var(--sh-hero);
  display:flex; flex-direction:column; gap:12px; overflow:hidden;
}
.hero__text { flex:1; min-width:0; }
.hero h1 { color:#fff; font-size:clamp(26px,7vw,34px); margin:0 0 8px; }
.hero p { opacity:.94; font-weight:600; margin:0; }
/* Mobile: la ilustración va debajo y chica, sin empujar el texto. */
.hero__img { height:76px; width:auto; flex:none; align-self:flex-end; margin-bottom:-22px; }
.badge {
  display:inline-block; background:rgba(255,255,255,.22); color:#fff;
  font-weight:800; font-size:12.5px; padding:4px 11px; border-radius:var(--r-pill); margin-bottom:6px;
}

/* ---------- Formularios ---------- */
.field { display:grid; gap:6px; margin-bottom:14px; }
.field label { font-weight:700; font-size:14px; }
.input {
  font-family:var(--body); font-size:16px; /* 16px evita el zoom de iOS al enfocar */
  width:100%; padding:12px 14px; border:2px solid var(--border);
  border-radius:var(--r-ctrl); background:var(--surface); color:var(--noche);
}
.input:focus { outline:none; border-color:var(--azul); }

/* ---------- Pills / chips ---------- */
.pill { display:inline-block; background:var(--chip-bg); color:var(--violeta);
  font-weight:800; font-size:12.5px; padding:4px 11px; border-radius:var(--r-pill); }

/* ---------- Avisos ---------- */
.alert { border-radius:12px; padding:12px 16px; margin:12px 0; }
.alert--info { background:#F4F8FF; }
.alert--warn { background:#FFF4F4; }

/* ---------- Opciones / corrección (Practicar) ---------- */
.opt {
  display:block; width:100%; text-align:left; font:inherit; font-weight:700;
  background:var(--surface); border:2.5px solid var(--border);
  border-radius:var(--r-ctrl); padding:12px 16px;
}
.opt--ok { background:var(--ok-bg); border-color:var(--ok-border); color:var(--ok-text); }
.opt--no { background:var(--no-bg); border-color:var(--no-border); color:var(--no-text); }

/* ---------- Barra de progreso ---------- */
.bar { height:12px; background:var(--track); border-radius:var(--r-pill); overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--verde); border-radius:var(--r-pill); }

/* ---------- Utilidades ---------- */
.muted { color:var(--muted); }
.stack { display:grid; gap:12px; }
.stack--lg { display:grid; gap:16px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.mt { margin-top:20px; }
.mt-lg { margin-top:28px; }

/* ---------- Página de juego (full-bleed, continuo, sin doble scroll) ---------- */
.site-main--flush { padding:0; display:flex; flex-direction:column; }
.jugar { flex:1; display:flex; flex-direction:column; min-height:0; }
.jugar__bar {
  display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:var(--card); border-bottom:2px solid var(--border);
}
.jugar__bar .backlink { margin:0; font-size:20px; line-height:1; }
.jugar__title {
  font-family:var(--display); font-weight:800; font-size:16px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* El iframe llena el alto restante; su fondo es --bg, igual que el juego,
   así se ve continuo. El scroll queda solo dentro del iframe. */
.jugar__frame { flex:1; width:100%; border:none; background:var(--bg); min-height:0; }

/* ---------- Componentes de página ---------- */
.backlink { display:inline-block; margin-bottom:14px; font-weight:700; text-decoration:none; }
.form-errors { color:var(--rojo); font-weight:700; }
.form-errors ul { margin:0; padding-left:18px; }
.form-errors:empty { display:none; }

/* Listas de tarjetas (hijos, alumnos, actividad, áreas) */
.rows { display:grid; gap:10px; list-style:none; padding:0; margin:0; }
.rows .card { padding:14px 16px; }
.item-title { font-weight:800; }

select.input { appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }

/* Barra de progreso por área (Progreso) */
.bar > i.is-warn { background:var(--naranja); }
.meta-line { display:flex; justify-content:space-between; gap:8px; font-weight:700; margin-bottom:4px; }

/* Corrección por pregunta (Practicar) */
.correccion { display:grid; gap:12px; }
.qcard { background:var(--card); border-radius:var(--r-card); padding:14px 16px;
  box-shadow:var(--sh-card); border-left:5px solid var(--border); }
.qcard--ok { border-left-color:var(--verde); }
.qcard--no { border-left-color:var(--rojo); }
.qcard__q { font-weight:800; margin-bottom:8px; }
.qcard__q .pill { margin-right:6px; }
.qopt { padding:3px 0; font-weight:700; color:var(--muted); }
.qopt--ok { color:var(--ok-text); }
.qopt--no { color:var(--no-text); }
.qcard__note { margin-top:8px; font-weight:700; }
.qcard__hint { margin-top:4px; color:var(--muted); font-size:14px; }

/* Grilla de áreas (Mi grado) */
.tiles { display:grid; gap:12px; }

/* Ejercicios (Practicar - formulario) */
.pregunta { background:var(--card); border-radius:var(--r-card); padding:16px; box-shadow:var(--sh-card); }
.pregunta legend { padding:0; font-weight:800; margin-bottom:8px; }
.choice { display:flex; align-items:center; gap:10px; padding:8px 0; font-weight:700; cursor:pointer; }
.choice input { width:20px; height:20px; accent-color:var(--violeta); flex:none; }
.hint { color:var(--naranja); font-weight:700; font-size:14px; margin-top:6px; }
.hint summary { cursor:pointer; }

/* ---------- Desktop / tablet ---------- */
@media (min-width:640px) {
  .wrap { padding:0 20px; }
  .site-header__inner { padding:14px 20px; }
  .hero { flex-direction:row; align-items:center; padding:28px 32px; gap:20px; }
  .hero__img { height:132px; margin-bottom:-28px; }
  .btn--auto-sm { display:inline-block; width:auto; } /* botón deja de ser full-width */
  .tiles { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
}