/*
 * Tema «Arcade suave» — enérgico pero calmo: tablero de juego en tonos pastel.
 * Se carga después de app.css (ver AULA_TEMA en settings). Contraste de texto ≥ 4.5:1.
 * Fuente: Nunito (SIL Open Font License, static/fonts/nunito/OFL.txt), servida localmente.
 */
@font-face { font-family: "Nunito"; font-weight: 600; font-style: normal; font-display: swap; src: url("../../fonts/nunito/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap; src: url("../../fonts/nunito/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-style: normal; font-display: swap; src: url("../../fonts/nunito/nunito-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 900; font-style: normal; font-display: swap; src: url("../../fonts/nunito/nunito-latin-900-normal.woff2") format("woff2"); }

:root {
  /* Base */
  --fondo: #f7f5fc; --superficie: #ffffff; --tinta: #2b2a4a; --tinta-suave: #66648a; --borde: #e6e2f6;
  /* Violeta = acción principal */
  --acento: #6b5fc7; --acento-hover: #5a4fb3; --acento-suave: #eeebfb;
  /* Pastel de apoyo */
  --coral: #f3a58f; --coral-suave: #ffe0d5; --coral-tinta: #9a3a22;
  --sol: #ffe39a; --sol-borde: #f2cd6a; --sol-tinta: #5c4300;
  --cielo: #dbeefd; --cielo-borde: #a9d3f5; --cielo-tinta: #0f5288;
  --menta: #8fdcbf; --ok: #1d6e52; --ok-suave: #dcf3ea; --no: #a33a1f; --no-suave: #fde4dc;
  --oro: #8a6500; --oro-suave: #fff3d1; --peligro: #a33a1f; --aviso: #7a5600;
  --radio: 20px;
  --relieve: 0 4px 0 #e6e2f6;
  --sombra: 0 10px 24px -16px rgba(90, 79, 179, .35);
  --fuente: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-titulo: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { font-weight: 600; }
h1, h2 { font-weight: 900; letter-spacing: -.01em; }
a { color: var(--acento); }
:focus-visible { outline: 3px solid #a99ff0; outline-offset: 2px; }

/* Barra superior */
.barra { background: #fff; border-bottom: 0; box-shadow: 0 3px 0 var(--borde); }
.marca { font-weight: 900; }
.marca__punto { background: var(--acento); box-shadow: 10px 0 0 var(--sol-borde), 20px 0 0 var(--coral); margin-right: 22px; }
.nav a { font-weight: 700; }
.chip-xp { background: var(--sol); color: var(--sol-tinta) !important; box-shadow: 0 3px 0 var(--sol-borde); }
.burbuja { background: #c94f33; }

/* Botones con relieve */
.btn { border-radius: 14px; font-weight: 800; border-width: 2px; box-shadow: var(--relieve); transition: transform .08s, box-shadow .08s; }
.btn:hover { border-color: #cfc8f2; }
.btn--primario { background: var(--acento); border-color: var(--acento); box-shadow: 0 4px 0 #4a409b; }
.btn--primario:hover { background: var(--acento-hover); border-color: var(--acento-hover); }
.btn--peligro { box-shadow: 0 4px 0 #7a2a16; }
.btn:active { transform: translateY(3px); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .btn, .tarjeta--curso { transition: none; } .btn:active { transform: none; } }

/* Tarjetas y superficies */
.tarjeta, .modulo, .preg, .lectura, .tabla-envoltura, .pregunta-admin, .inicio-act { border: 0; box-shadow: var(--sombra), var(--relieve); }
.tarjeta { border-radius: 22px; }
.tarjeta--curso { box-shadow: var(--sombra), 0 5px 0 var(--borde); }
.tarjeta--curso:hover { border: 0; transform: translateY(-2px); box-shadow: var(--sombra), 0 7px 0 #d9d3f5; }
.tabla-envoltura { border-radius: 20px; }
.tabla th { background: #faf9fe; }
.tabla td, .tabla th { border-bottom-color: #f0edfa; }
.vacio { border-color: #ddd8f4; border-radius: 22px; }
.mensaje { border-radius: 14px; }
.aviso-mensajes { background: var(--oro-suave); border: 0; border-radius: 16px; box-shadow: 0 3px 0 #f2e3b5; }

/* Hero del alumno */
.hero-alumno { background: radial-gradient(120% 140% at 100% 0%, #8a7fe0 0%, #6b5fc7 55%, #5a4fb3 100%); border-radius: 28px; box-shadow: 0 6px 0 #4a409b; }
.hero-alumno .barra-prog { height: 14px; background: rgba(255,255,255,.22); }
.hero-alumno .barra-prog span { background: repeating-linear-gradient(45deg, var(--sol) 0 10px, #fff0c4 10px 20px); }
.stat { background: #fff; color: var(--tinta); border-radius: 18px; box-shadow: 0 4px 0 rgba(43,42,74,.18); }
.stat__lbl { color: var(--tinta-suave); opacity: 1; }

/* Progreso */
.barra-prog { height: 12px; background: #eeebf8; }
.barra-prog span { background: linear-gradient(90deg, #6cc9a4, var(--menta)); }

/* Unidades y actividades */
.modulo { border-radius: 24px; }
.modulo__cab { border-bottom: 2px dashed var(--borde); }
.modulo__num { background: var(--sol); color: var(--sol-tinta); width: 34px; height: 34px; box-shadow: 0 3px 0 var(--sol-borde); }
.recurso__icono { background-color: var(--acento-suave); border-radius: 12px; }
.recurso + .recurso { border-top-color: #f0edfa; }
.texto { border-left-color: #b8b0ee; background: #faf9fe; }
.act { border: 2px solid var(--borde); border-radius: 16px; background: #fff; box-shadow: 0 3px 0 var(--borde); }
.act:hover { border-color: #cfc8f2; }
.act--ok { border-color: #a9e2cb; background: #f4fbf8; box-shadow: 0 3px 0 #a9e2cb; }
.etiqueta { border-radius: 99px; font-weight: 800; }
.etiqueta--nivel { background: var(--cielo); color: var(--cielo-tinta); }
.etiqueta--practica { background: var(--acento-suave); color: #4a409b; }
.etiqueta--lectura { background: var(--cielo); color: var(--cielo-tinta); }
.etiqueta--escucha { background: var(--coral-suave); color: var(--coral-tinta); }
.etiqueta--puzzle { background: #efe9ff; color: #5a3fb0; }
.etiqueta--evaluacion { background: var(--oro-suave); color: var(--oro); }
.etiqueta--ok { background: var(--ok-suave); color: var(--ok); }
.ficha { border: 0; border-radius: 16px; box-shadow: 0 3px 0 var(--borde); }

/* Jugar */
.preg { border-radius: 24px; }
.preg legend { color: var(--tinta-suave); font-weight: 800; }
.preg__num { background: var(--coral-suave); color: var(--coral-tinta); width: 30px; height: 30px; box-shadow: 0 3px 0 #f3c2b2; }
.opcion, .emparejar__fila, .clasificar__fila { border-width: 2px; border-color: var(--borde); border-radius: 16px; box-shadow: 0 3px 0 var(--borde); }
.opcion:hover { border-color: #cfc8f2; }
.opcion:has(input:checked) { border-color: var(--cielo-borde); background: #f0f8ff; box-shadow: 0 3px 0 var(--cielo-borde); }
.vf__op span { border-radius: 16px; border-color: var(--borde); box-shadow: 0 3px 0 var(--borde); }
.vf__op input:checked + span { border-color: var(--cielo-borde); background: #f0f8ff; color: var(--cielo-tinta); }
.lectura { background: #fff; border-radius: 24px; }
.btn-audio { border-width: 2px; border-color: var(--cielo-borde); color: var(--cielo-tinta); background: #fff; font-weight: 800; box-shadow: 0 3px 0 var(--cielo); }
.btn-audio:hover { background: #f0f8ff; }
.btn-audio--grande { background: var(--cielo); }
.hueco { border-radius: 10px; border: 2px solid #d6d0f3; background: #fbfaff; }
.dialogo { background: #faf9fe; border-radius: 16px; }
.letras span { background: var(--sol); color: var(--sol-tinta); box-shadow: 0 3px 0 var(--sol-borde); border-radius: 10px; }
.ficha-palabra { border-radius: 12px; border: 2px solid var(--borde); box-shadow: 0 3px 0 var(--borde); font-weight: 800; }
.ordenar__destino { border-color: #d6d0f3; border-radius: 16px; background: #fbfaff; }
.ordenar__destino .ficha-palabra { background: var(--acento-suave); border-color: #cfc8f2; box-shadow: 0 3px 0 #cfc8f2; }
.chip-op span { border-color: var(--borde); }
.chip-op input:checked + span { border-color: #b8a9f0; background: #efe9ff; color: #4a3a9b; }

/* Resultados y progreso */
.resultado { border-radius: 24px; }
.resultado--ok { background: var(--ok-suave); }
.resultado--no { background: var(--oro-suave); }
.rev { border-radius: 16px; border-color: var(--borde); }
.logro { border: 0; border-radius: 20px; box-shadow: 0 4px 0 var(--borde); }
.ranking li { border: 0; border-radius: 16px; box-shadow: 0 3px 0 var(--borde); }
.ranking--yo { background: var(--acento-suave) !important; box-shadow: 0 3px 0 #cfc8f2 !important; }
.ranking__xp { color: var(--oro); }

/* Mensajes */
.bandeja li { border: 0; border-radius: 16px; box-shadow: 0 3px 0 var(--borde); }
.burbuja-chat { border-radius: 16px 16px 16px 4px; border-color: var(--borde); }
.burbuja-chat--mia { background: var(--acento-suave); border-color: #d6d0f3; border-radius: 16px 16px 4px 16px; }

/* Formularios */
.campo input[type=text], .campo input[type=email], .campo input[type=password], .campo input[type=url],
.campo input[type=number], .campo input[type=file], .campo select, .campo textarea, .buscador input, .buscador select {
  border: 2px solid var(--borde); border-radius: 12px; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .buscador input:focus { outline: 3px solid #cfc8f2; outline-offset: 0; border-color: var(--acento); }
.video { border-radius: 18px; }