/* LA CAJA LA MEDIMOS NOSOTROS. `box-sizing: border-box` lo ponía el reboot de
   Bootstrap, que entra por CDN: en un colegio sin internet —o el día que el CDN
   falle— TODA la maquetación cambia de modelo de caja y los anchos en % se
   desbordan por su propio relleno. No es cosmética, es geometría, y no puede
   depender de la red (deuda declarada en leyes.md §3: «CSS propio, Bootstrap
   fuera»; esto es su primer trozo, el que más barato sale).
   Lo destapó la sonda de márgenes: la tarjeta de #/registro medía 375px dentro
   de un contenedor de 374 porque su relleno de 26px se sumaba al 92% de ancho. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --ww-primary: #6366f1;
  --ww-accent: #ec4899;
  --ww-success: #10b981;
  --ww-warning: #f59e0b;
  --ww-danger: #ef4444;
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* ─── AulaReto — armonía sobre Bootstrap ──────────────────────────────────
   Las páginas que todavía usan Bootstrap (jugar, editor, reportes, admin,
   elegir plantilla) heredan el acento AZUL de AulaReto y un redondeo más
   suave SIN tocar su markup. Solo color de acento, enlaces, radio y foco —
   nada estructural, y sin pisar el juego (pinta con tokens --ww-*/skins).
   Es chrome → EXCLUIDO del ratchet styles.test.mjs. */
:root {
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: #2563eb;
  --bs-link-hover-color: #1d4ed8;
  --bs-border-radius: .6rem;
  --bs-border-radius-sm: .45rem;
  --bs-border-radius-lg: .85rem;
}
.btn-primary {
  --bs-btn-bg: #2563eb;      --bs-btn-border-color: #2563eb;
  --bs-btn-hover-bg: #1d4ed8; --bs-btn-hover-border-color: #1d4ed8;
  --bs-btn-active-bg: #1d4ed8; --bs-btn-active-border-color: #1d4ed8;
  --bs-btn-disabled-bg: #2563eb; --bs-btn-disabled-border-color: #2563eb;
}
.btn-outline-primary {
  --bs-btn-color: #2563eb; --bs-btn-border-color: #2563eb;
  --bs-btn-hover-bg: #2563eb; --bs-btn-hover-border-color: #2563eb;
  --bs-btn-active-bg: #2563eb; --bs-btn-active-border-color: #2563eb;
}
.form-control:focus, .form-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .18);
}

/* Tarjetas de chrome: sin borde duro, sombra suave y esquinas redondeadas.
   El juego usa .ww-*/skins (scoped), así que esto no lo altera. */
.card { border: 0; border-radius: .85rem; box-shadow: 0 1px 3px rgba(20, 28, 46, .06); }