/* ═══════════════════════════════════════════════════════════
   construir.css — Estilos propios de la mecánica de CONSTRUCCIÓN
   (piezas → slots ordenados) · Minijuegos/construir/

   Solo estilos específicos de esta mecánica. El chrome común
   (widget, header, actividad, feedback, acciones, overlay) lo
   aporta Minijuegos/_compartido/minijuegos-widgets.css.

   Depende del sistema "chispa" (tokens --ew-*). NO depende de
   css/juegos.css, css/fichas.css ni css/juego2/*.

   Prefijo: mj-construir-  /  mj-construir__
   Sin scroll horizontal; piezas y slots hacen wrap. El ghost es
   absoluto dentro de la actividad y no altera el layout.
═══════════════════════════════════════════════════════════ */

/* ── Contención de ancho ───────────────────────────────────── */

.mj-widget--construir {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* La actividad es el marco de referencia del ghost (position). */
.mj-widget--construir .mj-widget__actividad {
  position: relative;
}

/* ── Enunciado / objetivo ──────────────────────────────────── */

.mj-construir__enunciado {
  margin: 0;

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

.mj-construir__objetivo {
  display: block;
  margin-top: var(--ew-space-1);

  font-family: var(--ew-font-heading);
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  font-weight: 700;
  color: var(--ew-color-primary);
  overflow-wrap: anywhere;
}

/* ── Intentos ──────────────────────────────────────────────── */

.mj-construir__intentos {
  font-family: var(--ew-font-body);
  font-size: var(--ew-text-sm);
  font-weight: 700;
  color: var(--ew-color-text-muted);
}

/* ── Slots ordenados ───────────────────────────────────────── */

.mj-construir__slots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ew-space-2);

  width: 100%;
  max-width: 100%;
  min-width: 0;

  padding: var(--ew-space-3);
  border: 1px dashed var(--ew-color-border);
  border-radius: var(--ew-radius-md);
}

.mj-construir__slot {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 60px;
  min-height: 66px;
  max-width: 100%;
  /* padding-top reserva una franja superior para el número, así el
     contenido (la pieza) queda centrado por debajo sin superponerse. */
  padding: 1.25rem 0.7rem 0.55rem;

  background: var(--ew-color-surface-soft);
  border: 2px dashed var(--ew-color-border-strong, var(--ew-color-border));
  border-radius: var(--ew-radius-sm);

  cursor: pointer;
  transition:
    border-color var(--ew-transition-fast),
    background-color var(--ew-transition-fast);

  -webkit-tap-highlight-color: transparent;
}

/* Número de posición: visible SIEMPRE, también con el slot vacío,
   en su propia franja superior (no invade el área útil ni el borde).
   Se atenúa cuando el slot ya tiene pieza para no competir con ella.
   No es solo color: es un dígito legible que indica el orden. */
.mj-construir__slot::before {
  content: attr(data-posicion);
  position: absolute;
  top: 0.3rem;
  left: 0;
  right: 0;

  font-family: var(--ew-font-body);
  font-size: var(--ew-text-xs);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--ew-color-text-muted);

  pointer-events: none;
}

.mj-construir__slot--ocupado::before {
  opacity: 0.4;
}

.mj-construir__slot:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ew-color-focus) 30%, transparent);
  outline-offset: 2px;
}

.mj-construir__slot--ocupado {
  border-style: solid;
  border-color: var(--ew-color-primary);
  background: var(--ew-color-surface);
}

.mj-construir__slot--hover {
  border-color: var(--ew-color-primary);
  background: var(--ew-color-primary-soft);
}

.mj-construir__slot:disabled {
  cursor: default;
}

/* ── Pool de piezas ────────────────────────────────────────── */

.mj-construir__piezas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ew-space-2);

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ── Pieza (botón real) ────────────────────────────────────── */

.mj-construir__pieza {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.8rem;

  background: var(--ew-color-surface);
  border: 1px solid var(--ew-color-border);
  border-radius: var(--ew-radius-sm);
  color: var(--ew-color-text);

  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-base);
  font-weight: 700;
  line-height: 1;
  overflow-wrap: anywhere;

  cursor: grab;
  /* Permite scroll vertical de la página; el gesto horizontal sobre
     la pieza lo maneja el minijuego. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    border-color var(--ew-transition-fast),
    background-color var(--ew-transition-fast),
    transform var(--ew-transition-fast);
}

.mj-construir__pieza:hover:not(:disabled) {
  border-color: var(--ew-color-primary);
  background: var(--ew-color-primary-soft);
}

.mj-construir__pieza:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ew-color-focus) 30%, transparent);
  outline-offset: 2px;
}

.mj-construir__pieza--sel {
  border-color: var(--ew-color-primary);
  background: var(--ew-color-primary-soft);
  transform: translateY(-1px);
}

.mj-construir__pieza--arrastrando {
  opacity: 0.35;
}

.mj-construir__pieza:disabled {
  cursor: default;
}

/* ── Ghost (clon que sigue al puntero) — local a la actividad ── */

.mj-construir__ghost {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
  opacity: 0.9;

  box-shadow: var(--ew-shadow-md);

  /* La posición se maneja íntegramente con transform: translate3d en
     JS (sin tocar left/top por frame → sin relayout). will-change
     avisa al navegador para compositarlo aparte y evitar jank.
     transition/animation: none impide que el ghost herede la
     transición de .mj-construir__pieza (que animaría el transform y
     provocaría el "viaje" desde la esquina en el primer frame). */
  transition: none;
  animation: none;
  will-change: transform;
}

/* ── Botón Validar (en acciones) ───────────────────────────── */

.mj-construir__validar {
  width: 100%;
  max-width: 100%;
}

.mj-construir__validar--ok {
  filter: saturate(1.1);
}

.mj-construir__validar--error {
  animation: mj-construir-shake 0.3s ease;
}

/* ── Movimiento reducido ───────────────────────────────────── */

@keyframes mj-construir-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

/* ── Responsive: contenedores estrechos (375/430px) ────────── */
/* Los slots se mantienen táctiles y visibles; si no caben en una
   fila, hacen wrap (nunca overflow horizontal). */

@container (max-width: 430px) {
  .mj-construir__slots {
    gap: var(--ew-space-1);
    padding: var(--ew-space-2);
  }

  .mj-construir__slot {
    min-width: 52px;
    min-height: 60px;
    padding: 1.15rem 0.5rem 0.5rem;
  }

  .mj-construir__pieza {
    min-height: 46px;
    padding: 0.5rem 0.65rem;
  }
}

/* ── Vista completa (overlay): compactar de verdad ─────────── */
/* El chrome compartido fuerza en modo completo:
     .mj-widget--modo-completo .mj-widget__actividad { min-height: var(--mj-actividad-min-completo) }
   Esa caja alta + el centrado vertical dejaban mucho vacío alrededor
   del contenido. Sin tocar el widget base, aquí (mayor especificidad)
   se anula ese min-height, se agrupa el contenido ARRIBA (no centrado)
   y se acortan las separaciones. El panel no se agranda; solo deja de
   estirarse. */
.mj-widget--construir.mj-widget--modo-completo .mj-widget__actividad {
  flex: 0 0 auto; /* no estirar para llenar el contenido alto */
  min-height: 0; /* anula --mj-actividad-min-completo */
  justify-content: flex-start; /* contenido arriba, no centrado como póster */
  gap: var(--ew-space-4); /* separación vertical más contenida */
  padding-block: var(--ew-space-4);
}

/* El contenedor "contenido" del chrome también deja de estirarse en
   completo, para que la franja de acciones (Verificar) quede cerca de
   la actividad en vez de empujada al fondo del panel. */
.mj-widget--construir.mj-widget--modo-completo .mj-widget__contenido {
  flex: 0 0 auto;
}

/* El root del widget en completo fuerza height:100% y un gap grande
   (chrome compartido), lo que estira la columna y deja vacío antes/
   después de "Verificar". Al no forzar la altura completa y reducir
   el gap, la columna (header + contenido + acciones) se agrupa arriba
   y "Verificar" queda pegado al contenido. No se toca el widget base. */
.mj-widget--construir.mj-widget--modo-completo {
  height: auto;
  justify-content: flex-start;
  gap: var(--ew-space-4);
}

/* La franja de acciones (Verificar) no se estira ni se separa. */
.mj-widget--construir.mj-widget--modo-completo .mj-widget__acciones {
  flex: 0 0 auto;
  margin-top: 0;
}

/* Ancho útil acotado y centrado horizontalmente (no verticalmente). */
.mj-widget--construir.mj-widget--modo-completo .mj-construir__enunciado,
.mj-widget--construir.mj-widget--modo-completo .mj-construir__intentos,
.mj-widget--construir.mj-widget--modo-completo .mj-construir__slots,
.mj-widget--construir.mj-widget--modo-completo .mj-construir__piezas {
  width: min(100%, 640px);
  margin-inline: auto;
}

/* ── Movimiento reducido ───────────────────────────────────── */
/* Nota: NO se resetea el transform del ghost aquí — ese transform
   es POSICIONAL (lo coloca bajo el puntero), no decorativo. */

@media (prefers-reduced-motion: reduce) {
  .mj-construir__pieza,
  .mj-construir__slot {
    transition: none;
  }
  .mj-construir__validar--error {
    animation: none;
  }
}