/* ═══════════════════════════════════════════════════════════
   minijuegos-widgets.css — Sistema visual compartido de los
   minijuegos de práctica (arrastrar-numero, elegir-formula,
   leer-grafica)
   Elemental W · Fisica/minijuegos/_compartido/

   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
     Fisica/css/fisica-base.css (variables --ewf-*, --ewf-acento-*,
       --ewf-texto-*, usadas por los estilos de ejercicio de abajo)

   Prefijo de clases del chrome: minij- ("MINIjuego"). Los
   estilos de cada ejercicio (arrastrar/hueco/chip/...) conservan
   el prefijo fis-practica__* con el que ya nacieron dentro de
   Fisica — solo se movieron de archivo, no de nombre, para no
   romper nada que ya dependa de ellos.

   Qué vive en ESTE archivo (compartido por los 3 minijuegos) y
   qué vive en el .css propio de cada carpeta:
     - Aquí: el chrome (insignia/título/botón Entrar/overlay) y
       los estilos de ejercicio usados por 2 o más minijuegos
       (flecha, hueco-zona, chip base, pulso, shake...).
     - elegir-formula/elegir-formula.css: solo lo exclusivo de
       esa mecánica (bandeja de fórmulas completas).
     - leer-grafica/leer-grafica.css: solo lo exclusivo de esa
       mecánica (pregunta de lectura, chip--correcto). El propio
       dibujo de la gráfica (.fis-exp-grafica*) sigue en
       Fisica/css/fisica-cinematica.css porque también lo usa el
       modo Aprendizaje (elementos "grafica-xt"/"grafica-vt"),
       no solo este minijuego — no se duplica CSS.
═══════════════════════════════════════════════════════════ */

/* Mismo reset de box-sizing que simuladores-widgets.css: sin él,
   el widget queda en box-sizing:content-box (default del
   navegador) y su padding se SUMA al 100% de ancho en vez de
   restarse — se desborda del contenedor. Causa real de los
   "cortes" en Android que motivaron separar este CSS. */
:where(.minij-widget, .minij-overlay),
:where(.minij-widget, .minij-overlay) *,
:where(.minij-widget, .minij-overlay) *::before,
:where(.minij-widget, .minij-overlay) *::after {
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════
   CHROME — contenedor raíz, insignia, título, botón Entrar
══════════════════════════════════════════════════════════ */

.minij-widget {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 100%;
}

.minij-widget__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.minij-widget__badge {
  order: -1;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ewf-acento-simulador, var(--ew-color-primary)) 16%, transparent);
  color: var(--ewf-acento-simulador, var(--ew-color-primary));
  font-family: var(--ewf-font-titulo, inherit);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.minij-widget__titulo {
  margin: 0;
  font-family: var(--ewf-font-titulo, inherit);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ewf-texto-2, inherit);
}

.minij-widget__boton-entrar {
  margin-left: auto;
  font-size: var(--ew-text-sm, 0.85rem);
  min-height: 36px;
  white-space: nowrap;
}

.minij-widget__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

/* Causa REAL del corte en móvil (el "x₀ = ..." que se sale de
   pantalla en arrastrar-numero/leer-grafica/cadena-identificar/
   elegir-formula, con o sin overlay a pantalla completa, en
   Aprendizaje y ahora también dentro del Test Final).
   `.minij-widget__cuerpo` ya tenía min-width:0, pero eso solo evita
   que ESTE contenedor se desborde respecto a SU padre — no evita
   que sus hijos directos (.fis-practica__arriba, que envuelve la
   fórmula KaTeX o el SVG de la gráfica) se desborden a ellos. Como
   .minij-widget__cuerpo es flex, cada hijo directo es un flex-item
   y por defecto tiene min-width:auto — es decir, el navegador se
   niega a encogerlo por debajo del ancho intrínseco de su contenido
   (el ancho natural, sin cortar, del KaTeX o el SVG). Con un
   enunciado largo ("v0 = 0 m/s, v = 12 m/s, t = □"), ese ancho
   intrínseco es mayor que el viewport, así que el hijo crece más
   allá de la pantalla — Y SE LA LLEVA CONSIGO: el max-width:100% y
   el overflow-x:auto que .fis-exp-formula ya tenía (fisica-base.css)
   nunca llegan a activarse, porque ese 100% se calcula contra un
   padre que también se desbordó, no contra el viewport real.
   Poner min-width:0 aquí, en TODOS los hijos directos, es lo que
   permite que se encojan al ancho disponible de verdad — recién ahí
   el overflow-x:auto interno hace scroll horizontal DENTRO de la
   caja en vez de desbordar la página entera. Universal a propósito
   (selector de hijo directo, no una clase puntual): cubre
   .fis-practica__arriba en los 4 minijuegos (fórmula o gráfica),
   .fis-practica__hueco-zona, y cualquier hijo nuevo que se agregue
   después, sin tener que acordarse de repetir la regla cada vez. */
.minij-widget__cuerpo > * {
  min-width: 0;
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════════
   OVERLAY DE PANTALLA COMPLETA — mismo patrón que .simc-overlay
   de simuladores/_compartido/simuladores-widgets.css. `inset: 0`
   sobre `position: fixed` sigue el viewport visual real, la
   causa habitual de que el contenido quede "cortado" bajo la
   barra de direcciones de Android con 100vh.
══════════════════════════════════════════════════════════ */

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

  display: flex;
  justify-content: center;

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

  /* --ew-theme-ink (NO --ew-palette-purple-ink): el morado/azulado
     fijo era un copy-paste literal de .simc-overlay (simuladores,
     simuladores-widgets.css) — les venía bien porque esa página no
     usa el sistema de temas por módulo. Fisica/fisica.html sí lo
     usa (<html data-ew-theme="orange">), así que --ew-theme-ink ya
     resuelve al tono cálido de Física (--ew-palette-orange-ink) sin
     tener que declarar nada nuevo aquí — solo dejar de pisarlo con
     un valor fijo ajeno al tema. Si este chrome se reutiliza algún
     día en un módulo con otro data-ew-theme, el overlay seguirá el
     tema de ESE módulo automáticamente. */
  background: color-mix(in srgb, var(--ew-theme-ink) 55%, black 15%);

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

.minij-overlay__panel {
  position: relative;

  width: min(100%, var(--ew-container-md, 640px));
  height: fit-content;
  min-height: min(100%, 480px);

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

  background: var(--ew-color-background, #fff);
  border-radius: var(--ew-radius-xl, 20px);
  box-shadow: var(--ew-shadow-lg, 0 20px 40px rgba(0, 0, 0, 0.25));

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

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

  margin-bottom: 12px;

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

.minij-overlay__contenido {
  clear: both;
  display: flex;
  justify-content: center;
}

.minij-overlay__contenido .minij-widget {
  max-width: 480px;
}

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

/* ══════════════════════════════════════════════════════════
   EJERCICIO — estilos compartidos por 2 o más minijuegos
   (movidos desde Fisica/css/fisica-base.css sin cambios)
══════════════════════════════════════════════════════════ */

/* Usado por arrastrar-numero y elegir-formula */
.fis-practica__arriba .fis-exp-formula { font-size: 2.2rem; }

/* NUEVO — envoltorio de "varios datos" (arrastrar-numero, cuando
   ejercicio.enunciadoLatex es un arreglo: x0, v, t... son datos
   independientes, no una fórmula). Cada dato es su propio bloque
   .fis-exp-formula (KaTeX), así que flex-wrap puede pasarlo a una
   línea nueva si no caben todos lado a lado — esto es lo que
   reemplaza al scroll horizontal: el enunciado se apila, no se
   corta ni se recorre. La coma de separación NO se agrega aquí en
   CSS (ver fisica-practica.js): va dentro de la cadena LaTeX de
   cada dato, para que KaTeX la dibuje en su línea base correcta.
   Un ::after externo quedaba "fuera" de .katex-display (que es
   display:block) y el navegador lo empujaba a una línea aparte,
   lejos del texto — bug real, visto y corregido. */
.fis-practica__datos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 16px;
  max-width: 100%;
}

/* Bug corregido (móvil): KaTeX centra .katex-display (text-align:center)
   por defecto. Combinado con el overflow-x:auto de .fis-exp-formula, un
   enunciado más ancho que la caja queda centrado respecto a un ancho
   que no existe — la mitad izquierda del contenido cae fuera del rango
   de scroll alcanzable (no se puede hacer scroll a la izquierda del
   origen) y se corta sin forma de verla. Es el corte visto en
   "x₀ = 1 m, v = 2 m/s, t =" (con la "x₀" invisible) en
   arrastrar-numero. Alineado a la izquierda, el inicio del enunciado
   siempre es visible y el resto queda accesible con scroll a la
   derecha. Sin efecto en enunciados que ya caben enteros (la caja se
   ajusta a su contenido, así que no hay espacio sobrante que alinear).
   Ámbito reducido a .fis-practica__arriba a propósito: no se toca la
   fórmula del modo Aprendizaje (.fis-exp-formula fuera de los
   minijuegos), que no reportó este problema. */
.fis-practica__arriba .fis-exp-formula .katex-display {
  text-align: left;
}

/* Usado por elegir-formula (enunciadoEsTexto) */
.fis-practica__enunciado-texto {
  font-family: var(--ewf-font-lectura);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ewf-texto-1);
  text-align: center;
  max-width: 34ch;
  padding: 2px 4px;
}

/* Usado por arrastrar-numero y elegir-formula */
.fis-practica__flecha-abajo {
  font-size: 1.2rem;
  color: var(--ewf-texto-3);
}

/* Usado por arrastrar-numero y elegir-formula */
.fis-practica__hueco-zona {
  min-width: min(140px, 100%);
  min-height: 72px;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px clamp(14px, 5vw, 22px);
  border: 2.5px dashed var(--ewf-linea);
  border-radius: 16px;
  background: var(--ewf-fondo-panel);
  transition: border-color 0.15s, background 0.15s;
}
.fis-practica__hueco-zona--sobre {
  border-color: var(--ewf-acento-teoria);
  background: var(--ewf-fondo-stat);
}
.fis-practica__hueco-zona--correcto {
  border-style: solid;
  border-color: var(--ewf-acento-grafica);
  background: color-mix(in srgb, var(--ewf-acento-grafica) 10%, transparent);
}
.fis-practica__hueco-zona--incorrecto {
  border-style: solid;
  border-color: var(--ew-color-danger);
  background: var(--ew-color-danger-soft);
  animation: fis-practica-shake 0.3s;
}

@keyframes fis-practica-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Refuerzo positivo en acierto — usado por los 3 minijuegos */
.fis-practica__pulso {
  animation: fis-practica-pulso 0.4s ease;
}

@keyframes fis-practica-pulso {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

.fis-practica__hueco .fis-exp-formula { font-size: 2rem; color: var(--ewf-texto-2); }

/* Bandeja de opciones base — usada por los 3 minijuegos
   (arrastrar-numero y leer-grafica tal cual; elegir-formula la
   extiende en su propio CSS con --formula) */
.fis-practica__opciones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.fis-practica__chip {
  width: 52px;
  height: 52px;
  border-radius: var(--ew-radius-md);
  border: 1.5px solid var(--ewf-linea);
  background: var(--ewf-papel);
  color: var(--ewf-texto-1);
  font-family: var(--ewf-font-titulo);
  font-size: 1.3rem;
  cursor: grab;
  box-shadow: var(--ewf-sombra-s);
}
.fis-practica__chip:hover:not(:disabled) {
  border-color: var(--ewf-acento-teoria);
  background: var(--ewf-fondo-stat);
}
.fis-practica__chip:active:not(:disabled) { cursor: grabbing; }
.fis-practica__chip:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Estado de error del chip — usado por elegir-formula y leer-grafica */
.fis-practica__chip--incorrecto {
  border-color: var(--ew-color-danger);
  background: var(--ew-color-danger-soft);
  animation: fis-practica-shake 0.3s;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — refuerzo explícito para móvil / Android, para
   que ningún elemento del chrome ni del ejercicio se corte.
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .minij-widget__boton-entrar {
    margin-left: 0;
  }
}

@media (max-width: 400px) {
  .fis-practica__chip {
    width: 46px;
    height: 46px;
    font-size: 1.1rem;
  }
}