/* ============================================================
   Apptonomia — Constructores (estilos)
   Minecraft simplificado. La zona de construcción es "el mundo":
   cielo azul degradado con marco de tierra, y cada bloque lleva
   una textura pixel-art hecha solo con gradientes CSS (sin
   imágenes) + bisel 3D de luz/sombra, el look icónico de bloque
   de Minecraft. El resto de la página (cabecera, instrucciones,
   botones) sigue el tema claro normal de la app.
   El fantasma del modo modelo se atenúa con una capa blanca por
   box-shadow inset (así la textura de debajo sigue siendo la del
   bloque objetivo) + borde de puntos; la casilla pendiente tras
   la 2ª pista se marca en amarillo. Ambas señales usan forma y
   borde, no solo color.
   ============================================================ */

/* --- Pantalla inicio --- */
.modos {
  margin-top: var(--espacio);
}

.botones-modo {
  gap: var(--espacio);
  justify-content: center;
  flex-wrap: wrap;
}

.btn-modo {
  min-width: 200px;
  min-height: var(--boton-min);
  font-size: var(--texto-grande);
  padding: var(--espacio) calc(var(--espacio) * 2);
}

.grid-plantillas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--espacio);
  margin-top: var(--espacio);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.tarjeta-plantilla {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--espacio) / 2);
  padding: var(--espacio);
  background: var(--color-superficie);
  border: 3px solid var(--color-borde);
  border-radius: var(--radio);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  min-height: 120px;
  font-family: inherit;
}

.tarjeta-plantilla:hover,
.tarjeta-plantilla:focus {
  transform: translateY(-2px);
  box-shadow: var(--sombra);
  border-color: var(--color-foco);
}

.tarjeta-plantilla:focus {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
}

.preview-plantilla {
  display: grid;
  gap: 1px;
  background: linear-gradient(#BFE3F5, #E4F3FB);
  padding: 3px;
  border-radius: 6px;
}

.preview-plantilla .celda {
  width: auto;
  height: auto;
  border-radius: 1px;
  cursor: default;
}

.preview-plantilla .celda.sin-bloque {
  background: transparent;
  box-shadow: none;
}

.nombre-plantilla {
  font-weight: bold;
  text-align: center;
  font-size: var(--texto-base);
  color: var(--color-texto);
}

/* --- Pantalla de juego --- */
#pantallaJuego {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio);
}

.construccion-header {
  text-align: center;
  width: 100%;
}

.construccion-titulo {
  font-size: var(--texto-grande);
  font-weight: bold;
  margin: 0;
}

.contador-bloques {
  font-size: var(--texto-pequeno);
  color: var(--color-texto-suave);
}

/* --- El mundo: cielo azul con marco de tierra --- */
#cuadricula {
  display: grid;
  gap: 2px;
  padding: 8px;
  background: linear-gradient(#8ECFF0 0%, #C9E9F8 70%, #DDF1FB 100%);
  border: 8px solid #6B4226;
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.25),
    0 6px 0 #4A2D18,
    0 10px 18px rgba(74, 45, 24, 0.35);
  touch-action: manipulation;
}

.celda {
  width: 56px;
  height: 56px;
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.1s, background-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.celda.sin-bloque {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(27, 108, 168, 0.18);
}

.celda:hover {
  transform: scale(1.05);
}

.celda:focus {
  outline: 3px solid var(--color-foco);
  outline-offset: -3px;
}

/* --- Block textures (CSS gradients only, no images) ---
   They all share the same bevel: light top-left, shadow
   bottom-right — the classic Minecraft-block "relief". */
.bloque-tierra, .bloque-cesped, .bloque-piedra, .bloque-madera,
.bloque-agua, .bloque-techo, .bloque-ladrillo, .bloque-arena {
  box-shadow:
    inset 3px 3px 0 rgba(255, 255, 255, 0.28),
    inset -3px -3px 0 rgba(0, 0, 0, 0.28);
}

.bloque-tierra {
  background-color: #8B5A2B;
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.22) 2px, transparent 2px),
    radial-gradient(rgba(255, 255, 255, 0.14) 2px, transparent 2px);
  background-size: 14px 14px, 18px 18px;
  background-position: 0 0, 7px 9px;
}

/* Grass: green strip on top of dirt — the iconic block */
.bloque-cesped {
  background-color: #8B5A2B;
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.18) 2px, transparent 2px),
    linear-gradient(#43A047 0 34%, rgba(67, 160, 71, 0) 34%);
  background-size: 14px 14px, 100% 100%;
  background-position: 0 8px, 0 0;
}

.bloque-piedra {
  background-color: #8E9196;
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.2) 3px, transparent 3px),
    radial-gradient(rgba(255, 255, 255, 0.18) 3px, transparent 3px);
  background-size: 20px 20px, 24px 24px;
  background-position: 2px 4px, 12px 14px;
}

/* Madera: tablones verticales */
.bloque-madera {
  background-color: #C89557;
  background-image:
    repeating-linear-gradient(90deg, rgba(90, 55, 20, 0.28) 0 2px, transparent 2px 14px);
}

/* Agua: ondas horizontales claras */
.bloque-agua {
  background-color: #3D7BD9;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.22) 0 3px,
      transparent 3px 12px);
}

/* Techo: tejas en diagonal */
.bloque-techo {
  background-color: #B03A2E;
  background-image:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.18) 0 3px, transparent 3px 14px);
}

/* Ladrillo: hiladas con juntas claras */
.bloque-ladrillo {
  background-color: #A8443C;
  background-image:
    repeating-linear-gradient(0deg, rgba(245, 235, 220, 0.5) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(90deg, rgba(245, 235, 220, 0.35) 0 2px, transparent 2px 18px);
}

.bloque-arena {
  background-color: #E8C87A;
  background-image:
    radial-gradient(rgba(160, 120, 40, 0.28) 1.5px, transparent 1.5px),
    radial-gradient(rgba(255, 255, 255, 0.35) 1.5px, transparent 1.5px);
  background-size: 12px 12px, 16px 16px;
  background-position: 0 0, 6px 7px;
}

/* --- Fantasma del modelo: bloque objetivo atenuado + borde de puntos.
   La capa blanca va por box-shadow inset para no tapar el borde. --- */
.celda.fantasma {
  border: 3px dashed rgba(26, 26, 46, 0.55);
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.62);
}

/* Casilla pendiente marcada tras la 2ª pista de ¡Listo! */
.celda.atencion {
  border-color: #8a6d00;
  box-shadow:
    inset 0 0 0 999px rgba(255, 255, 255, 0.55),
    0 0 0 4px #FFD166;
}

/* --- Paleta de bloques --- */
.paleta-bloques {
  width: 100%;
  text-align: center;
}

.etiqueta-paleta {
  font-size: var(--texto-pequeno);
  margin-bottom: calc(var(--espacio) / 2);
}

.bloques {
  justify-content: center;
  gap: calc(var(--espacio) / 2);
  flex-wrap: wrap;
}

.bloque-btn {
  width: 64px;
  height: 64px;
  border: 4px solid var(--color-borde);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s;
  padding: 0;
}

.bloque-btn:hover {
  transform: scale(1.1);
}

.bloque-btn.seleccionado {
  border-color: var(--color-texto);
  box-shadow: 0 0 0 4px var(--color-foco),
    inset 3px 3px 0 rgba(255, 255, 255, 0.28),
    inset -3px -3px 0 rgba(0, 0, 0, 0.28);
  transform: scale(1.1);
}

.bloque-btn:focus {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
}

/* --- Herramientas --- */
.herramientas {
  display: flex;
  gap: var(--espacio);
  flex-wrap: wrap;
  justify-content: center;
}

.btn-herramienta {
  min-height: var(--boton-min);
  padding: calc(var(--espacio) / 2) var(--espacio);
}

.btn-herramienta.modo-borrar-activo {
  background: var(--color-animo);
  border-color: var(--color-animo);
  color: white;
}

/* --- Pantalla final --- */
.vista-miniatura {
  display: grid;
  gap: 1px;
  background: linear-gradient(#BFE3F5, #E4F3FB);
  padding: 3px;
  border: 4px solid #6B4226;
  border-radius: 8px;
  margin: var(--espacio) auto;
}

.vista-miniatura .celda {
  width: auto;
  height: auto;
  border-radius: 1px;
  cursor: default;
}

.vista-miniatura .celda.sin-bloque {
  background: transparent;
  box-shadow: none;
}

/* In small views (preview and thumbnail) the 3px bevel would hide
   the whole texture: no bevel there, just the base color/texture. */
.preview-plantilla .celda,
.vista-miniatura .celda {
  box-shadow: none;
}

/* --- Responsive --- */
@media (max-width: 500px) {
  .celda {
    width: 44px;
    height: 44px;
  }

  .bloque-btn {
    width: 56px;
    height: 56px;
  }

  .btn-modo {
    min-width: 160px;
    font-size: var(--texto-base);
  }
}

/* --- Reducir movimiento --- */
@media (prefers-reduced-motion: reduce) {
  .celda,
  .bloque-btn,
  .tarjeta-plantilla {
    transition: none;
  }

#pantallaFinal .transferencia {
  margin: 8px auto 24px;
  font-size: 1.1rem;
  color: var(--color-texto-secundario, #555);
  max-width: 480px;
}
}