/* ═══════════════════════════════════════════════════════════
   minijuegos-widgets.css — Sistema visual compartido de los
   minijuegos reutilizables de Elemental W · Minijuegos/_compartido/

   Espeja la estructura de simuladores/_compartido/simuladores-widgets.css
   (reset de box-sizing, chrome del widget, overlay, responsive),
   adaptada al chrome de un minijuego pregunta→respuesta: NO hay
   lienzo de simulación, barra Pausar/Reiniciar ni lecturas en vivo.

   Requiere, cargados ANTES en el <head>:
     css/design-tokens.css
     css/themes.css          (habilita [data-ew-theme="..."])
     css/ui-components.css   (.ew-button, focus-visible)
     css/motion.css          (animaciones ew-fade-*)

   Es parte del sistema "chispa" raíz (tokens --ew-*). NO usa la
   paleta oscura legacy de Juego 2 (juegos/inorganica/*), ni depende
   de simuladores/simuladores.css. Regla de autonomía de módulo.

   Prefijo de clases: mj- ("MiniJuegos").
   Modificador --<slug> por minijuego (--compuesto-opcion, …) solo
   para ajustes muy puntuales; el grueso del look es compartido aquí.

   Este archivo contiene ÚNICAMENTE el chrome común. Los estilos de
   cada mecánica (opción múltiple, swipe, matching, arrastre,
   balanceo, reactivos) viven en la carpeta de su minijuego y se
   añadirán en fases posteriores.
═══════════════════════════════════════════════════════════ */

/* Reset de box-sizing propio del sistema de widgets. No asumir que
   main.css (reset global) esté cargado en todo contexto donde se
   monte un minijuego. Sin esto, el padding se sumaría al 100% de
   ancho y el widget se desbordaría de su contenedor. */
:where(.mj-widget, .mj-overlay),
:where(.mj-widget, .mj-overlay) *,
:where(.mj-widget, .mj-overlay) *::before,
:where(.mj-widget, .mj-overlay) *::after {
  box-sizing: border-box;
}

:root {
  /* Tokens locales del widget, derivados de --ew-* */
  --mj-radius: var(--ew-radius-lg);
  --mj-borde: 1px solid var(--ew-color-border);
  --mj-sombra: var(--ew-shadow-sm);

  --mj-actividad-min-compacto: clamp(160px, 30vw, 220px);
  /* Mínimo moderado para modo completo: da algo más de aire que
     compacto, pero NO estira la caja hasta llenar el overlay. La
     altura real la marca el contenido (ver reglas de más abajo:
     la actividad no crece con flex en completo). */
  --mj-actividad-min-completo: clamp(220px, 30vh, 320px);

  --mj-espacio: var(--ew-space-4);
}

/* ══════════════════════════════════════════════════════════
   WIDGET — contenedor raíz
══════════════════════════════════════════════════════════ */

.mj-widget {
  display: flex;
  flex-direction: column;
  gap: var(--mj-espacio);

  width: 100%;
  padding: var(--ew-space-4);

  background: var(--ew-color-surface);
  border: var(--mj-borde);
  border-radius: var(--mj-radius);
  box-shadow: var(--mj-sombra);

  font-family: var(--ew-font-body);
  color: var(--ew-color-text);

  /* El layout de "modo completo" reacciona al ANCHO REAL del widget,
     no al viewport: un minijuego puede vivir dentro de una celda
     angosta con max-width propio. container-type habilita las reglas
     @container de más abajo para medir ESTA caja, no la ventana.
     (Mismo criterio que simuladores-widgets.css.) */
  container-type: inline-size;
}

.mj-widget--modo-completo {
  /* height:auto + justify-content:flex-start → el widget crece según
     su contenido y se agrupa arriba del panel del overlay, en vez de
     estirar la columna (header/contenido/acciones) para llenar el
     100% de la altura y dejar vacío entre bloques. */
  height: auto;
  justify-content: flex-start;
  padding: var(--ew-space-5);
  gap: var(--ew-space-5);
}

/* ---------- Encabezado ---------- */

.mj-widget__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ew-space-2) var(--ew-space-3);
}

.mj-widget__badge {
  order: -1;
  flex: 0 0 100%;

  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ew-color-primary);
}

.mj-widget__titulo {
  flex: 1 1 auto;
  min-width: 0;

  margin: 0;

  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-lg);
  line-height: 1.2;
  color: var(--ew-color-text);
}

.mj-widget--modo-completo .mj-widget__titulo {
  font-size: var(--ew-text-2xl);
}

.mj-widget__boton-entrar {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0.55rem 1rem;
  font-size: var(--ew-text-sm);
}

/* ---------- Contenido (actividad + feedback) ---------- */

.mj-widget__contenido {
  display: flex;
  flex-direction: column;
  gap: var(--ew-space-3);
}

.mj-widget--modo-completo .mj-widget__contenido {
  /* No estirar para llenar la altura: crece según su contenido. */
  flex: 0 1 auto;
  min-height: 0;
}

/* Zona donde cada mecánica pinta su UI. El chrome solo define el
   marco; el contenido lo aporta la mecánica en su renderizar(). */
.mj-widget__actividad {
  display: flex;
  flex-direction: column;
  gap: var(--ew-space-3);

  min-height: var(--mj-actividad-min-compacto);

  background: var(--ew-color-surface-soft);
  border: 1px solid var(--ew-color-border);
  border-radius: var(--ew-radius-md);
  padding: var(--ew-space-4);
}

.mj-widget--modo-completo .mj-widget__actividad {
  /* Crece según contenido (no flex-grow); el min-height moderado da
     aire sin generar cientos de píxeles vacíos. */
  flex: 0 0 auto;
  min-height: var(--mj-actividad-min-completo);
}

/* ---------- Feedback (mensajes de la mecánica hacia el usuario) ---------- */

.mj-widget__feedback {
  font-size: var(--ew-text-sm);
  color: var(--ew-color-text-muted);
}

.mj-widget__feedback:empty {
  display: none;
}

/* ---------- Acciones (franja de controles del chrome/mecánica) ---------- */

.mj-widget__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ew-space-2);
}

.mj-widget__acciones:empty {
  display: none;
}

/* ══════════════════════════════════════════════════════════
   OVERLAY DE PANTALLA COMPLETA
   Mismo patrón que .simc-overlay de simuladores-widgets.css.
══════════════════════════════════════════════════════════ */

.mj-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;

  padding: clamp(0.75rem, 2vw, 2rem);
  overflow-y: auto;

  background: color-mix(in srgb, var(--ew-palette-purple-ink) 55%, black 15%);

  animation: ew-fade-in 220ms ease forwards;
}

.mj-overlay__panel {
  position: relative;

  width: min(100%, var(--ew-container-lg));
  height: fit-content;
  min-height: min(100%, 620px);

  padding: clamp(1rem, 3vw, 2.5rem);

  background: var(--ew-color-background);
  border-radius: var(--ew-radius-xl);
  box-shadow: var(--ew-shadow-lg);

  animation: ew-fade-up 260ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.mj-overlay__cerrar {
  position: sticky;
  top: 0;
  float: right;

  margin-bottom: var(--ew-space-3);

  min-height: 40px;
  font-size: var(--ew-text-sm);
}

.mj-overlay__contenido {
  clear: both;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — móvil (basado en el ancho real del widget)
══════════════════════════════════════════════════════════ */

@container (max-width: 480px) {
  .mj-widget__header {
    flex-direction: column;
    align-items: stretch;
  }

  .mj-widget__boton-entrar {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════
   ACCESIBILIDAD — respeto a prefers-reduced-motion
══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .mj-overlay,
  .mj-overlay__panel {
    animation: none;
  }
}