/* Sistema de capas (layers) para el juego educativo Letra M */

/* Este archivo define una jerarquía clara de z-index para todos los elementos del juego */

:root {
  /* Rangos de z-index para cada tipo de elemento */
  --z-background: 1; /* Fondo y elementos decorativos */
  --z-content: 10; /* Contenido principal del juego */
  --z-interactive: 15; /* Elementos interactivos (botones, arrastables) */
  --z-important: 20; /* Elementos importantes (títulos, instrucciones) */
  --z-overlay: 25; /* Mensajes de retroalimentación, alertas */
  --z-modal: 50; /* Ventanas modales, diálogos */
  --z-navigation: 100; /* Botones de navegación (volver, siguiente) */
}

/* Aplicación de z-index a elementos específicos */

/* Fondos y contenedores */
.level-content {
  position: relative;
  z-index: var(--z-background);
}

.learning-stage,
.practice-stage,
.game-area {
  position: absolute;
  z-index: var(--z-content);
  width: 100%;
  height: 100%;
}

/* Elementos interactivos */
.option,
.syllable,
.word-card,
.draggable-element {
  position: relative;
  z-index: var(--z-interactive);
}

/* Elementos importantes */
.level-title,
.instruction,
.sub-instruction {
  position: relative;
  z-index: var(--z-important);
}

/* Mensajes y retroalimentación */
.feedback,
.continue-message {
  position: relative;
  z-index: var(--z-overlay);
}

/* Navegación */
.back-button,
.btn-primary[type="submit"],
.btn-primary.continue-btn {
  position: relative;
  z-index: var(--z-navigation);
}

/* Estilos responsivos */
@media (max-width: 600px) {
  /* Ajustes para dispositivos móviles */
  .option,
  .syllable,
  .word-card {
    margin: 5px !important;
  }

  .option-container,
  .drag-container,
  .drop-container {
    gap: 10px !important;
  }

  .level-content {
    padding: 10px !important;
  }
}

/* Indicadores visuales de interactividad */
.interactive-element {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.interactive-element:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Estilos para espacios de arrastrar y soltar */
.drop-zone {
  border: 2px dashed var(--color-primary);
  background-color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.drop-zone:hover {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 8px rgba(138, 43, 226, 0.3);
}

.drop-zone.filled {
  border: 2px solid var(--color-success);
  background-color: rgba(76, 175, 80, 0.1);
}

/* Animaciones para feedback visual */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes success-glow {
  0% {
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.8);
  }
  100% {
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
  }
}

.success-animation {
  animation: success-glow 1s ease-in-out;
}