/* css/styles.css */

/* Importación de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Fredoka:wght@400;500;600;700&family=Press+Start+2P&display=swap');

/* Variables de Diseño (Tokens) */
:root {
  /* 🎨 Paleta Temática */
  --color-selva: #A1D929;
  --color-selva-oscura: #86B61F;
  --color-volcan: #F28705;
  --color-volcan-activo: #F25C05;
  --color-cielo: #4FC3F7;
  --color-sol: #F2E205;
  --color-noche: #012340;
  --color-niebla: #5C768D;
  --color-hueso: #f2f2f2;
  --color-nube: #FFFFFF;
  --color-piedra: #E0E0E0;
  
  /* 🅰️ Tipografía */
  --fuente-titulos: 'Baloo 2', cursive;
  --fuente-cuerpo: 'Fredoka', sans-serif;
  --fuente-codigo: 'Press Start 2P', monospace;

  /* Tamaños Fluidos */
  --text-xs: clamp(10px, 1vw, 12px);
  --text-sm: clamp(12px, 1.2vw, 14px);
  --text-md: clamp(14px, 1.5vw, 18px);
  --text-lg: clamp(18px, 2vw, 24px);
  --text-xl: clamp(24px, 2.5vw, 32px);
  --text-xxl: clamp(32px, 4vw, 48px);

  /* Espaciados y Márgenes Fluidos */
  --space-xs: clamp(6px, 1vw, 10px);
  --space-sm: clamp(10px, 1.5vw, 16px);
  --space-md: clamp(16px, 2.5vw, 28px);
  --space-lg: clamp(28px, 4vw, 48px);
  --space-xl: clamp(48px, 6vw, 80px);

  /* 🔲 Bordes y Sombras */
  --radio-sm: 12px;
  --radio-md: 20px;
  --radio-lg: 30px;
  --radio-xl: 40px;
  
  --sombra-btn-volcan: 0 8px 0 #B56503;
  --sombra-btn-selva: 0 8px 0 #77A31D;
  --sombra-btn-cielo: 0 8px 0 #3a97bf;
  --sombra-suave: 0 10px 25px rgba(1, 35, 64, 0.08);
}

/* Reset General */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--fuente-cuerpo);
  background-color: var(--color-hueso);
  color: var(--color-noche);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  overflow-x: hidden;
}

/* Contenedor Principal del Juego */
.main-wrapper {
  width: 96%;
  max-width: 1600px;
  background: var(--color-nube);
  border: 8px solid var(--color-piedra);
  border-radius: var(--radio-lg);
  padding: var(--space-md);
  box-shadow: var(--sombra-suave);
  position: relative;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Botón de Silencio Global Flotante */
.btn-mute-flotante {
  position: absolute;
  top: max(25px, env(safe-area-inset-top));
  right: max(25px, env(safe-area-inset-right));
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid var(--color-piedra);
  background: var(--color-nube);
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  transition: transform 0.2s, background-color 0.2s;
}

.btn-mute-flotante:hover {
  transform: scale(1.1);
  background-color: var(--color-hueso);
}

.btn-mute-flotante:active {
  transform: scale(0.92);
  background-color: var(--color-hueso);
}

/* Botón flotante de instalación de PWA (creado dinámicamente por main.js).
   Selector compuesto .btn.btn-instalar-pwa-flotante: el botón también lleva
   la clase base .btn (position: relative, definida más abajo en este
   archivo); con igual especificidad ganaría la regla que aparece después
   en el cascade, así que se sube la especificidad para no depender del
   orden de aparición. */
.btn.btn-instalar-pwa-flotante {
  position: fixed;
  top: max(20px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left)); /* Opuesto al botón de mute */
  z-index: 9999;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.btn-instalar-pwa-icono {
  display: none;
}

/* En pantallas angostas el card ocupa casi todo el ancho: el botón de texto
   se superpone al logo y al título centrados. Se reduce a ícono circular,
   simétrico al botón de mute del lado opuesto. */
@media (max-width: 480px) {
  .btn.btn-instalar-pwa-flotante {
    top: max(16px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
    width: 48px;
    height: 48px;
    min-height: 48px; /* .btn fija min-height: 64px; hay que pisarlo explícitamente */
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
  }

  .btn-instalar-pwa-texto {
    display: none;
  }

  .btn-instalar-pwa-icono {
    display: inline;
  }
}

.btn-mute-flotante.muted {
  background-color: var(--color-niebla);
  color: var(--color-nube);
}

/* --- BOTONES ESTILO 3D --- */
.btn {
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: var(--text-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: 28px;
  border: none;
  cursor: pointer;
  transition: all 0.1s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  outline: none;
  min-height: 64px;
}

.btn-vocal, .btn-opcion-num, .btn-mic-voz-accion {
  min-height: 64px;
}

.btn-primario {
  background-color: var(--color-volcan);
  color: var(--color-nube);
  box-shadow: var(--sombra-btn-volcan);
}

.btn-primario:hover {
  background-color: var(--color-volcan-activo);
}

.btn-primario:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 #d46f2a;
}

.btn-secundario {
  background-color: var(--color-cielo);
  color: var(--color-nube);
  box-shadow: var(--sombra-btn-cielo);
}

.btn-secundario:hover {
  filter: brightness(0.95);
}

.btn-secundario:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 #3a97bf;
}

.btn-principal-grande {
  font-size: 28px;
  padding: 20px 48px;
  border-radius: 36px;
  background-color: var(--color-volcan);
  color: var(--color-nube);
  box-shadow: var(--sombra-btn-volcan);
}

.btn-principal-grande:hover {
  background-color: var(--color-volcan-activo);
}

.btn-principal-grande:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 #d46f2a;
}

/* FASE 0: BIENVENIDA */
.pantalla-bienvenida {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.titulo-juego {
  font-family: var(--fuente-titulos);
  font-size: 48px;
  color: var(--color-selva);
  text-shadow: 2px 2px 0px var(--color-piedra);
  margin-bottom: 5px;
}

.subtitulo-juego {
  font-size: 24px;
  color: var(--color-volcan);
  font-weight: 700;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.presentacion-mascota {
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: var(--color-hueso);
  padding: 25px;
  border-radius: 30px;
  margin-bottom: 40px;
  border: 4px dashed var(--color-niebla);
  width: 100%;
}

.bocadillo-dialogo {
  background: var(--color-nube);
  padding: 20px;
  border-radius: 20px;
  position: relative;
  text-align: left;
  flex: 1;
  box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.bocadillo-dialogo::after {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 10px 15px 10px 0;
  border-style: solid;
  border-color: transparent var(--color-nube) transparent transparent;
}

.bocadillo-dialogo p {
  font-size: 18px;
  line-height: 1.5;
}

/* FASE 1: PROGRESO HUELLAS */
.fase1-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.progreso-huellas-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.titulo-progreso-actividades {
  font-family: var(--fuente-titulos);
  font-size: 22px;
  color: var(--color-niebla);
  margin-bottom: 10px;
}

.huellas-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.huella-paso {
  font-size: 28px;
  filter: grayscale(1) opacity(0.2);
  transition: all 0.3s ease;
}

.huella-paso.activa {
  filter: grayscale(0) opacity(1);
  transform: scale(1.2);
}

.huella-paso.completada {
  color: var(--color-selva);
  filter: grayscale(0) opacity(1);
}

.huella-linea {
  width: 40px;
  height: 6px;
  background-color: var(--color-piedra);
  border-radius: 3px;
}

/* ESTRUCTURA CONTENEDORA DE ACTIVIDADES */
.actividad-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.actividad-titulo {
  font-family: var(--fuente-titulos);
  font-size: 32px;
  color: var(--color-noche);
  margin-bottom: 10px;
}

.actividad-instruccion {
  font-size: 18px;
  color: var(--color-niebla);
  margin-bottom: 30px;
  max-width: 650px;
}

/* ACTIVIDAD 1: TRAZO */
.canvas-wrapper {
  background: var(--color-nube);
  border: 6px solid var(--color-piedra);
  border-radius: 24px;
  padding: 10px;
  box-shadow: var(--sombra-suave);
  margin-bottom: 25px;
  touch-action: none; /* Previene scroll táctil al trazar */
}

#trazo-canvas {
  border-radius: 14px;
  display: block;
  cursor: crosshair;
  background-color: #FFFBF2;
}

.controles-actividad {
  display: flex;
  gap: 20px;
}

/* ACTIVIDAD 2: MATEMÁTICA */
.operacion-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  background: var(--color-piedra);
  padding: 25px 40px;
  border-radius: 30px;
}

.elemento-operacion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-nube);
  border-radius: 20px;
  width: 120px;
  height: 120px;
  position: relative;
  box-shadow: 0 6px 12px rgba(0,0,0,0.03);
}

.dinos-grupo-math {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.dino-math-img {
  object-fit: contain;
  animation: pulse 2s infinite;
}

.dinos-cant-1 .dino-math-img {
  width: 64px;
  height: 64px;
}
.dinos-cant-2 .dino-math-img,
.dinos-cant-3 .dino-math-img {
  width: 46px;
  height: 46px;
}
.dinos-cant-4 .dino-math-img,
.dinos-cant-5 .dino-math-img {
  width: 36px;
  height: 36px;
}

.etiqueta-conteo {
  position: absolute;
  bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  background: var(--color-niebla);
  color: var(--color-nube);
  padding: 2px 10px;
  border-radius: 10px;
}

.signo-operacion {
  font-size: 40px;
  font-weight: 800;
  color: var(--color-volcan);
}

.respuesta-incognita {
  border: 4px dashed var(--color-volcan);
  font-size: 48px;
  font-weight: 800;
  color: var(--color-volcan);
  background: transparent;
}

.respuesta-incognita.completada {
  border: none;
  background: var(--color-nube);
}

.opciones-matematicas {
  display: flex;
  gap: 20px;
}

.btn-opcion-num {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  font-family: var(--fuente-titulos);
  font-size: 36px;
  font-weight: 800;
  cursor: pointer;
  background-color: var(--color-nube);
  color: var(--color-noche);
  border: 4px solid var(--color-piedra);
  box-shadow: 0 6px 0 var(--color-piedra);
  transition: transform 0.1s, box-shadow 0.1s;
}

.btn-opcion-num:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--color-piedra);
}

.btn-opcion-num[data-val="1"] {
  border-color: var(--color-cielo);
  box-shadow: 0 6px 0 #3a97bf;
}
.btn-opcion-num[data-val="2"] {
  border-color: var(--color-selva);
  box-shadow: 0 6px 0 #20774a;
}
.btn-opcion-num[data-val="3"] {
  border-color: var(--color-volcan);
  box-shadow: 0 6px 0 #d46f2a;
}

.btn-opcion-num.correcto {
  background-color: var(--color-selva) !important;
  color: var(--color-nube) !important;
  border-color: var(--color-selva) !important;
  box-shadow: 0 6px 0 #20774a !important;
}

/* ACTIVIDAD 3: VOCALES */
.palabra-incompleta {
  font-family: var(--fuente-titulos);
  font-size: 64px;
  font-weight: 800;
  letter-spacing: 8px;
  margin-bottom: 50px;
  color: var(--color-noche);
}

.vocal-faltante {
  display: inline-block;
  min-width: 60px;
  border-bottom: 8px dashed var(--color-volcan);
  text-align: center;
  color: var(--color-volcan);
}

.vocal-faltante.completada {
  border-bottom: none;
  animation: popScale 0.4s ease;
}

.opciones-vocales {
  display: flex;
  gap: 15px;
}

.btn-vocal {
  width: 75px;
  height: 75px;
  border-radius: 20px;
  border: none;
  font-family: var(--fuente-titulos);
  font-size: 32px;
  font-weight: 800;
  cursor: pointer;
  background-color: var(--color-nube);
  color: var(--color-noche);
  border: 4px solid var(--color-piedra);
  box-shadow: 0 6px 0 var(--color-piedra);
  transition: transform 0.1s, box-shadow 0.1s;
}

.btn-vocal:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--color-piedra);
}

.btn-vocal.correcto {
  background-color: var(--color-selva) !important;
  color: var(--color-nube) !important;
  border-color: var(--color-selva) !important;
  box-shadow: 0 6px 0 #20774a !important;
}

/* ACTIVIDAD 4: FIGURAS */
.lienzo-figuras {
  display: flex;
  gap: 50px;
  width: 100%;
  max-width: 750px;
  margin-top: 20px;
}

.columna-figuras {
  flex: 1;
  background: var(--color-piedra);
  border-radius: 24px;
  padding: 20px;
}

.columna-figuras h3 {
  font-family: var(--fuente-titulos);
  font-size: 20px;
  margin-bottom: 20px;
  color: var(--color-niebla);
}

.zona-figuras {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  min-height: 280px;
  justify-content: center;
}

.figura-item-draggable {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.figura-item-draggable:active {
  cursor: grabbing;
}

.figura-dropzone {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background-color 0.2s, transform 0.2s;
  border-radius: 12px;
}

.figura-dropzone.drop-hover {
  background-color: rgba(184, 169, 221, 0.2);
  transform: scale(1.15);
}

.figura-dropzone.drop-completado {
  background-color: transparent;
}

.silueta-wrapper.hidden {
  display: none;
}

.exito-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.exito-wrapper.hidden {
  display: none;
}

/* FASE 2: PANTALLA DE CARGA */
.pantalla-carga {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 0;
}

.contenedor-huevo {
  margin-bottom: 30px;
}

.huevo-animado {
  animation: wobble 1.2s infinite ease-in-out;
  transform-origin: bottom center;
}

.texto-carga-secuencia {
  font-family: var(--fuente-titulos);
  font-size: 28px;
  color: var(--color-volcan);
  margin-bottom: 25px;
  height: 40px; /* Evita saltos de layout */
}

.progreso-carga-container {
  width: 100%;
  max-width: 400px;
  height: 20px;
  background-color: var(--color-piedra);
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid var(--color-piedra);
}

.progreso-carga-barra {
  height: 100%;
  width: 0%;
  background-color: var(--color-selva);
  border-radius: 7px;
  transition: width 0.5s ease;
}

/* Pantalla Carga Completada */
.pantalla-carga-completada {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 0;
}

.titulo-exito-carga {
  font-family: var(--fuente-titulos);
  font-size: 42px;
  color: var(--color-selva);
  margin-bottom: 10px;
}

.instruccion-exito-carga {
  font-size: 22px;
  color: var(--color-noche);
  margin-bottom: 40px;
}

/* FASE 3: MEMORIA Y CÁMARA (LAYOUT PARTIDO) */

/* Por defecto: horizontal (pantallas anchas / landscape) */
.fase-memoria-layout {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
}

.seccion-tablero {
  flex: 1 1 0;
  min-width: 0;
  max-width: 70vw;
  margin: 0 auto; /* Para centrarlo horizontalmente */
  background-color: var(--color-piedra);
  border-radius: 28px;
  padding: clamp(12px, 1.5vw, 24px);
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  overflow: auto; /* Para permitir scroll al hacer zoom */
}

.cabecera-tablero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-shrink: 0;
  flex-wrap: wrap; /* Por si el zoom o pantallas pequeñas */
  gap: 10px;
}

.titulo-memoria {
  font-family: var(--fuente-titulos);
  font-size: clamp(14px, 1.8vw, 22px);
  color: var(--color-noche);
}

.contador-parejas {
  font-size: clamp(11px, 1.2vw, 15px);
  background: var(--color-nube);
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

/* Grid dinámico responsivo con límite de ancho para evitar estiramientos en escritorio */
.grid-memoria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(115px, 10vw, 170px), 1fr));
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  gap: var(--space-sm);
  flex: 1;
  min-height: 0;
  align-content: start; /* Evita que las cartas se estiren y pierdan su aspecto cuadrado */
}

.seccion-guia-camara {
  flex: 0 0 280px; /* Ancho fijo en landscape */
  min-width: 0;
  background-color: var(--color-hueso);
  border-radius: 28px;
  border: 4px dashed var(--color-niebla);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Clase de utilidad global para ocultar elementos */
.hidden {
  display: none !important;
}

.mic-indicador {
  display: block;
  font-size: 14px;
  color: var(--color-volcan);
  margin-top: 5px;
  font-weight: 600;
  animation: pulse 1.5s infinite;
}



/* Estructura de la Carta de Memoria (3D Flip) */
.memoria-carta {
  aspect-ratio: 1;
  perspective: 800px;
  cursor: pointer;
  min-width: 0;
  min-height: 0;
}

.carta-interna {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.memoria-carta.volteada .carta-interna {
  transform: rotateY(180deg);
}

.carta-cara-detras, .carta-cara-delante {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--color-nube);
}

/* Reverso */
.carta-cara-detras {
  background-color: var(--color-nube);
  color: var(--color-cielo);
}

.memoria-carta:hover .carta-cara-detras {
  background-color: var(--color-piedra);
}

/* Delante (Silueta) */
.dino-silueta-img {
  filter: brightness(0) opacity(0.85);
  transition: all 0.3s ease;
}

.carta-cara-delante {
  background-color: var(--color-nube);
  transform: rotateY(180deg);
}

/* Estado Resuelto */
.memoria-carta.resuelta .carta-cara-delante {
  border-color: var(--color-selva);
  animation: bounce 0.5s ease;
}

/* Cámara y Viewfinder */
.camara-feed-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
}

.viewfinder-camara {
  width: 240px;
  height: 240px;
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--color-noche);
  border: 6px solid var(--color-nube);
  box-shadow: var(--sombra-suave);
  position: relative;
}

.overlay-escaneo {
  position: absolute;
  top: 6px;
  width: 228px;
  height: 228px;
  pointer-events: none;
  border-radius: 18px;
  border: 4px solid transparent;
  animation: glowScanner 2s infinite alternate;
}

.reticula {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 4px dashed var(--color-sol);
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(255, 210, 63, 0.4);
  animation: pulseReticula 1.5s infinite ease-in-out;
}

@keyframes pulseReticula {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; border-color: var(--color-volcan); }
}

.indicador-clase-buscada {
  margin-top: 20px;
  padding: 10px 15px;
  background-color: var(--color-nube);
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.02);
}

.guia-bienvenida-camara {
  text-align: center;
  max-width: 280px;
}

.guia-bienvenida-camara h3 {
  font-family: var(--fuente-titulos);
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--color-noche);
}

.guia-bienvenida-camara p {
  font-size: 15px;
  color: var(--color-niebla);
  margin-bottom: 20px;
  line-height: 1.4;
}

/* Botón discreto Modo Papá */
.btn-config-papa {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.15;
  transition: opacity 0.2s, transform 0.2s;
  font-size: 16px;
}

.btn-config-papa:hover, .btn-config-papa.holding {
  opacity: 1;
  transform: rotate(45deg) scale(1.2);
}

.btn-config-papa.holding {
  background-color: var(--color-volcan);
}

#btn-no-encuentro {
  margin-top: 15px;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 16px;
}

/* Botón de control de voz manual en Fase 3 */
.btn-mic-voz-accion {
  background-color: var(--color-cielo);
  color: var(--color-nube);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 22px;
  border-radius: 20px;
  border: none;
  box-shadow: 0 4px 0 #3a97bf;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.1s, box-shadow 0.1s, background-color 0.2s;
  outline: none;
}

.btn-mic-voz-accion:hover {
  filter: brightness(0.95);
}

.btn-mic-voz-accion:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #3a97bf;
}

.btn-mic-voz-accion.listening {
  background-color: var(--color-volcan) !important;
  box-shadow: 0 4px 0 #d46f2a !important;
  animation: pulseMic 1.2s infinite;
}

.btn-mic-voz-accion.listening:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #d46f2a !important;
}

.btn-mic-voz-accion.success {
  background-color: var(--color-selva) !important;
  box-shadow: 0 4px 0 #20774a !important;
}

.btn-mic-voz-accion.success:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #20774a !important;
}

@keyframes pulseMic {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); box-shadow: 0 0 15px rgba(255, 140, 66, 0.6), 0 4px 0 #d46f2a; }
  100% { transform: scale(1); }
}

/* FASE FINAL: CELEBRACIÓN */
.pantalla-celebracion {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 0;
  max-width: 650px;
  margin: 0 auto;
}

.titulo-celebracion {
  font-family: var(--fuente-titulos);
  font-size: 44px;
  color: var(--color-selva);
  margin-bottom: 5px;
  text-shadow: 2px 2px 0 var(--color-piedra);
}

.subtitulo-celebracion {
  font-size: 22px;
  color: var(--color-volcan);
  font-weight: 700;
  margin-bottom: 30px;
}

.carta-sorpresa-papa {
  background-color: #FFFDF5;
  border: 4px solid var(--color-sol);
  padding: 30px;
  border-radius: 28px;
  margin-bottom: 40px;
  width: 100%;
  box-shadow: var(--sombra-suave);
  position: relative;
}

.carta-sorpresa-papa h3 {
  font-family: var(--fuente-titulos);
  font-size: 22px;
  color: var(--color-volcan);
  margin-bottom: 12px;
}

.contenido-sorpresa-papa {
  display: flex;
  align-items: center;
  gap: 24px;
}

.mensaje-papa-contenido {
  font-size: 20px;
  line-height: 1.6;
  font-style: italic;
  color: var(--color-noche);
  flex: 1;
}

.imagen-mosasaurus-container {
  flex: 0 0 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imagen-mosasaurus-papa {
  width: 100%;
  max-width: 160px;
  height: auto;
  aspect-ratio: 1 / 1; /* Reserva el espacio antes de que cargue la imagen (evita CLS) */
  border-radius: 20px;
  filter: drop-shadow(0px 8px 12px rgba(1, 35, 64, 0.15));
  animation: float-dino 4s ease-in-out infinite;
  border: 4px solid var(--color-selva);
  background: var(--color-nube);
  padding: 5px;
  transition: transform 0.3s ease;
}

.imagen-mosasaurus-papa:hover {
  transform: scale(1.08) rotate(2deg);
}

@keyframes float-dino {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(-2deg);
  }
}

/* Responsivo para pantallas pequeñas en la carta de sorpresa */
@media (max-width: 600px) {
  .contenido-sorpresa-papa {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .imagen-mosasaurus-container {
    flex: none;
    width: 100%;
  }
  .imagen-mosasaurus-papa {
    max-width: 130px;
  }
}

.canvas-confetti-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

/* --- ANIMACIONES --- */
.animated-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.animated-pulse {
  animation: pulse 2s infinite;
}

.animated-bounce-in {
  animation: bounceIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

@keyframes bounceIn {
  from { opacity: 0; transform: scale(0.3); }
  50% { opacity: 0.9; transform: scale(1.1); }
  80% { transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Shake para errores */
.incorrecto-shake {
  animation: shake 0.5s ease;
  background-color: var(--color-niebla) !important;
  color: var(--color-nube) !important;
  border-color: var(--color-niebla) !important;
  box-shadow: 0 6px 0 #9b8abf !important;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* Snap de acople figuras */
@keyframes popScale {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.correcto-snap {
  animation: popScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes glowScanner {
  from { border-color: rgba(79, 195, 247, 0.3); box-shadow: 0 0 5px rgba(79, 195, 247, 0.2); }
  to { border-color: rgba(79, 195, 247, 1); box-shadow: 0 0 20px rgba(79, 195, 247, 0.6); }
}

.abrir-huevo {
  animation: crackEgg 1s ease forwards;
}

@keyframes crackEgg {
  0% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(0) rotate(0); opacity: 0; }
}

/* Responsive: portrait / pantallas angostas → vertical */
@media (orientation: portrait), (max-width: 860px) {
  body {
    justify-content: flex-start;
    padding: 12px;
  }
  .main-wrapper {
    padding: var(--space-sm);
    border-radius: 24px;
    min-height: unset;
  }
  .fase-memoria-layout {
    flex-direction: column;
    gap: 12px;
  }
  .seccion-tablero {
    max-width: 100% !important;
    padding: 12px !important;
  }
  .grid-memoria {
    grid-template-columns: repeat(auto-fit, minmax(clamp(75px, 20vw, 110px), 1fr));
    gap: 8px;
  }
  .seccion-guia-camara {
    flex: unset;
    width: 100%;
    min-height: 260px;
  }
}

/* Pantallas muy pequeñas */
@media (max-width: 480px) {
  .titulo-memoria {
    font-size: var(--text-sm);
  }
}

/* Landscape fijo en pantallas medianas */
@media (orientation: landscape) and (max-width: 1000px) {
  .seccion-guia-camara {
    flex: 0 0 220px;
  }
}

@media (max-width: 600px) {
  .main-wrapper {
    padding: 16px;
    border-radius: 20px;
  }
  .palabra-incompleta {
    font-size: 44px;
    letter-spacing: 4px;
  }
  .opciones-vocales {
    flex-wrap: wrap;
    justify-content: center;
  }
  .lienzo-figuras {
    flex-direction: column;
    gap: 20px;
  }
}

/* Animación de flotado suave para el logo oficial */
.logo-juego {
  animation: floatLogo 3.5s ease-in-out infinite;
  aspect-ratio: 1 / 1; /* Reserva el espacio antes de que cargue la imagen (evita CLS en la primera pantalla) */
}

@keyframes floatLogo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Elementos de ambientación de fondo (selva y cielo) */
.ambient-decor {
  position: fixed;
  pointer-events: none;
  user-select: none;
  z-index: -1;
  opacity: 0.18;
  font-size: 40px;
}

.nube-1 {
  top: 10%;
  left: -100px;
  animation: floatCloud 30s linear infinite;
  font-size: 60px;
}

.nube-2 {
  top: 25%;
  left: -100px;
  animation: floatCloud 45s linear infinite;
  animation-delay: 5s;
  font-size: 80px;
  opacity: 0.10;
}

.nube-3 {
  top: 5%;
  left: -100px;
  animation: floatCloud 35s linear infinite;
  animation-delay: 15s;
  font-size: 50px;
}

.hoja-1 {
  bottom: 5%;
  left: 3%;
  font-size: 70px;
  transform: rotate(15deg);
  animation: swayLeaf 6s ease-in-out infinite alternate;
}

.hoja-2 {
  top: 15%;
  right: 4%;
  font-size: 60px;
  transform: rotate(-25deg);
  animation: swayLeaf 8s ease-in-out infinite alternate;
}

.hoja-3 {
  bottom: 8%;
  right: 2%;
  font-size: 50px;
  transform: rotate(45deg);
  animation: swayLeaf 5s ease-in-out infinite alternate;
}

@keyframes floatCloud {
  0% { transform: translateX(-100px); }
  100% { transform: translateX(calc(100vw + 100px)); }
}

@keyframes swayLeaf {
  0% { transform: rotate(-5deg) translateY(0); }
  100% { transform: rotate(10deg) translateY(-8px); }
}

/* Banner de advertencia de simulación */
.banner-aviso-simulacion {
  background-color: var(--color-volcan);
  color: var(--color-nube);
  font-family: var(--fuente-cuerpo);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 12px;
  position: absolute;
  top: 15px;
  z-index: 100;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  border: 2px solid var(--color-nube);
  animation: pulseMic 2s infinite;
}

/* Estilos para el Juego de Recorte */
.papel-corte-contenedor {
  transition: background-color 0.5s ease, border-color 0.5s ease;
}

.scissor-icon {
  font-size: 36px;
  cursor: grab;
  user-select: none;
  transition: transform 0.1s;
}

.scissor-icon:active {
  cursor: grabbing;
  transform: scale(1.2) rotate(-15deg);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

.silueta-recortable.cutout-draggable {
  cursor: grab !important;
}

.silueta-recortable.cutout-draggable:active {
  cursor: grabbing !important;
  filter: drop-shadow(0 6px 12px rgba(45, 42, 74, 0.15));
}



/* ==========================================
   MODAL DE DESCUBRIMIENTO DE DINOSAURIO
   ========================================== */

/* Ajustar layout de Fase 3 para que sea centrado y no a dos columnas */
.fase-memoria-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.seccion-tablero {
  flex: 1 !important;
  max-width: 70vw;
  margin: 0 auto;
}

/* Rediseño del banner de búsqueda a un estilo de barra didáctica abajo del tablero */
.banner-didactico-memoria {
  margin-top: 25px;
  padding: 16px 20px;
  background-color: var(--color-nube);
  border-radius: 20px;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-noche);
  text-align: center;
  width: 100%;
  box-shadow: var(--sombra-suave);
  border: 4px dashed var(--color-niebla);
  transition: all 0.3s ease;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal de Descubrimiento Overlay */
.modal-dino-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(45, 42, 74, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-dino-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-dino-content {
  background-color: var(--color-nube);
  border-radius: 32px;
  width: 90%;
  max-width: 500px;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 35px;
  box-shadow: 0 24px 48px rgba(45, 42, 74, 0.3);
  border: 8px solid var(--color-piedra);
  text-align: center;
  position: relative;
  transform: scale(0.85);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-dino-overlay.active .modal-dino-content {
  transform: scale(1);
}

.modal-dino-titulo {
  font-family: var(--fuente-titulos);
  font-size: 26px;
  color: var(--color-noche);
  margin-bottom: 8px;
  line-height: 1.2;
}

.modal-dino-subtitulo {
  font-size: 16px;
  color: var(--color-niebla);
  margin-bottom: 25px;
  font-weight: 500;
}

/* Opciones de Selección */
.modal-opciones-seleccion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
  width: 100%;
}

.btn-opcion-descubrir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 18px;
  padding: 16px 24px;
  border-radius: 24px;
  width: 100%;
  cursor: pointer;
}

/* Vista de la Cámara en el Modal */
.modal-camara-vista {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  position: relative;
}

.modal-viewfinder {
  width: min(250px, 60vw);
  height: min(250px, 60vw);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--color-noche);
  border: 6px solid var(--color-piedra);
  box-shadow: var(--sombra-suave);
  position: relative;
}

.modal-viewfinder canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 18px;
  transform: scaleX(-1); /* Activar espejo visual */
}

/* Vista del Micrófono (Voz) en el Modal */
.modal-voz-vista {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
  width: 100%;
}

.mic-circulo-contenedor {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: var(--color-cielo);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0 rgba(79, 195, 247, 0.4);
  animation: micPulseBlue 1.6s infinite ease-in-out;
  transition: background-color 0.3s ease;
}

.mic-icono-svg {
  font-size: 52px;
  color: var(--color-nube);
  line-height: 1;
}

.modal-estado-voz {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-noche);
  margin-top: 10px;
}

@keyframes micPulseBlue {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 195, 247, 0.7);
  }
  70% {
    transform: scale(1.08);
    box-shadow: 0 0 0 20px rgba(79, 195, 247, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 195, 247, 0);
  }
}

/* Estilos para el Footer de Créditos */
.game-footer {
  margin-top: 30px;
  font-family: var(--fuente-cuerpo);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-noche);
  text-align: center;
  width: 100%;
  padding: 10px 0;
  opacity: 0.85;
}

.game-footer a {
  color: var(--color-volcan);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s, border-bottom 0.2s;
  border-bottom: 2px solid transparent;
}

.game-footer a:hover {
  color: var(--color-volcan-activo);
  border-bottom: 2px solid var(--color-volcan-activo);
}

/* ==========================================================================
   ADAPTACIONES DE RESPONSIVIDAD DE ALTO IMPACTO (MÓVILES Y TABLETS)
   ========================================================================== */

/* 1. Canvas de Trazo (Fase 1 - Actividad 1) */
#trazo-canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 2. Actividad de Recorte (Fase 1 - Actividad 5) */
.lienzo-figuras {
  width: 100%;
}

@media (max-width: 500px) {
  .papel-corte-contenedor {
    transform: scale(0.8) !important;
    transform-origin: center center;
    margin: -25px 0 !important;
  }
}

@media (max-width: 400px) {
  .papel-corte-contenedor {
    transform: scale(0.68) !important;
    transform-origin: center center;
    margin: -40px 0 !important;
  }
}

/* 3. Mascota Guía y Diálogo (Fase 0 y Pantallas de diálogo) */
@media (max-width: 550px) {
  .presentacion-mascota {
    flex-direction: column;
    text-align: center;
    gap: 15px;
    padding: 15px;
  }
  .bocadillo-dialogo {
    text-align: center;
  }
  .bocadillo-dialogo::after {
    left: 50% !important;
    top: -15px !important;
    transform: translateX(-50%) rotate(90deg) !important;
  }
}

/* 4. Pantalla de Juego Completado (QR y Botones) */
@media (max-width: 480px) {
  .pantalla-menu-final h1 {
    font-size: clamp(28px, 8vw, 36px) !important;
  }
  .pantalla-menu-final p {
    font-size: clamp(15px, 5vw, 18px) !important;
  }
  .pantalla-menu-final button {
    font-size: clamp(16px, 5vw, 20px) !important;
    padding: 14px 20px !important;
  }
  .qr-container-seccion {
    transform: scale(0.9);
    margin-top: 15px !important;
  }
}

/* ==========================================================================
   MEJORAS ADICIONALES DE RESPONSIVIDAD Y CONTORNO DE PANTALLA
   ========================================================================== */

/* Ajuste general del contenedor para pantallas muy angostas */
@media (max-width: 480px) {
  body {
    padding: 8px !important;
  }
  .main-wrapper {
    padding: 15px !important;
    border-width: 4px !important;
    border-radius: 20px !important;
  }
}

/* Ajustes de la Actividad 2: Matemática (Fase 1 - Suma de Dinosaurios) */
@media (max-width: 500px) {
  .operacion-visual {
    padding: 15px 10px !important;
    gap: 10px !important;
    border-radius: 20px !important;
    margin-bottom: 25px !important;
  }
  .elemento-operacion {
    width: 75px !important;
    height: 75px !important;
    border-radius: 12px !important;
  }
  .dinos-grupo-math {
    padding: 4px !important;
    gap: 3px !important;
  }
  .dinos-cant-1 .dino-math-img {
    width: 36px !important;
    height: 36px !important;
  }
  .dinos-cant-2 .dino-math-img {
    width: 24px !important;
    height: 24px !important;
  }
  .dinos-cant-3 .dino-math-img {
    width: 20px !important;
    height: 20px !important;
  }
  .dinos-cant-4 .dino-math-img {
    width: 18px !important;
    height: 18px !important;
  }
  .etiqueta-conteo {
    font-size: 12px !important;
    padding: 1px 6px !important;
    bottom: 4px !important;
    border-radius: 6px !important;
  }
  .signo-operacion {
    font-size: 24px !important;
  }
  .respuesta-incognita {
    font-size: 28px !important;
  }
  
  .opciones-matematicas {
    gap: 12px !important;
    justify-content: center !important;
  }
  .btn-opcion-num {
    width: 65px !important;
    height: 65px !important;
    font-size: 28px !important;
    box-shadow: 0 4px 0 var(--color-piedra) !important;
  }
}

/* Ajustes de la Actividad 3: Vocales (Fase 1 - Completa el Nombre) */
@media (max-width: 450px) {
  .opciones-vocales {
    gap: 8px !important;
    flex-wrap: nowrap !important; /* Forzar que entren en una sola fila en móviles */
    justify-content: center !important;
  }
  .btn-vocal {
    width: 54px !important;
    height: 54px !important;
    font-size: 22px !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 0 var(--color-piedra) !important;
  }
}

/* Ajustes de la Fase 2: Pantalla de Carga (Evitar corte de texto) */
.texto-carga-secuencia {
  font-size: clamp(20px, 6vw, 28px) !important;
  min-height: 80px !important;
  height: auto !important;
  margin-bottom: 20px !important;
}

/* Cabecera del tablero de memoria */
@media (max-width: 500px) {
  .cabecera-tablero {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
}

/* Ajustes de la Actividad 4: Figuras (Fase 1 - Arrastrar Figuras a Siluetas) */
.lienzo-figuras-arrastre {
  display: flex;
  gap: 50px;
  width: 100%;
  max-width: 850px;
  margin-top: 20px;
}

@media (max-width: 600px) {
  .lienzo-figuras-arrastre {
    flex-direction: row !important; /* Mantener lado a lado en lugar de vertical */
    gap: 10px !important;
    margin-top: 10px !important;
  }
  .columna-figuras {
    padding: 12px 8px !important;
    border-radius: 16px !important;
  }
  .columna-figuras h3 {
    font-size: 14px !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }
  .zona-figuras {
    gap: 12px !important;
    min-height: auto !important;
  }
  .figura-item-draggable, .figura-dropzone {
    width: 48px !important;
    height: 48px !important;
  }
  .figura-item-draggable svg, .figura-dropzone svg {
    width: 38px !important;
    height: 38px !important;
  }
}

/* Cabecera de bienvenida (Logo + Subtítulo) */
.cabecera-bienvenida {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* Escalar el logo y colocar el subtítulo a la derecha en dispositivos móviles */
@media (max-width: 480px) {
  .cabecera-bienvenida {
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 20px;
  }
  .logo-juego {
    max-width: 105px !important; /* Logo compacto a la izquierda */
    margin-bottom: 0 !important;
  }
  .subtitulo-juego {
    font-size: 17px !important; /* Texto a la derecha */
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    text-align: left !important;
    line-height: 1.2 !important;
    flex: 1;
    letter-spacing: 1px !important;
  }
  
  /* Ocultar las huellas de progreso en móviles, dejando solo el texto del paso */
  .huellas-container {
    display: none !important;
  }
  
  /* Quitar el margin top del footer en móvil */
  .game-footer {
    margin-top: 0 !important;
  }
  
  /* Reducir tamaño de textos de actividades en móviles */
  .titulo-progreso-actividades {
    font-size: 16px !important;
    margin-bottom: 5px !important;
  }
  .actividad-titulo {
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }
  .actividad-instruccion {
    font-size: 15px !important;
    margin-bottom: 15px !important;
  }
}

/* ==========================================================================
   ESTILOS PARA EL EDITOR DE CÓDIGO (ZOOM DE TRAZO)
   ========================================================================== */
.editor-window {
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 25px;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.editor-titlebar {
  height: 45px;
  background: #181818;
  border-bottom: 1px solid #2d2d2d;
  display: flex;
  align-items: center;
  padding: 0 16px;
  justify-content: space-between;
  user-select: none;
}

.window-controls {
  display: flex;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.dot-close { background-color: #ef4444; }
.dot-minimize { background-color: #f59e0b; }
.dot-maximize { background-color: #22c55e; }

.editor-tabs {
  display: flex;
  position: absolute;
  left: 100px;
  bottom: 0;
  height: 35px;
}

.tab {
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  color: #9cdcfe;
  font-family: 'Fira Code', monospace;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  margin-right: 4px;
}

.editor-mode-indicator {
  font-size: 0.85rem;
  color: #858585;
  font-weight: 600;
  background: rgba(184, 169, 221, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(184, 169, 221, 0.2);
}

.editor-body {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 520;
  background: #1e1e1e;
}

#trazo-canvas, #math-canvas, #vocal-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  background-color: #1e1e1e;
}

/* Animación y efecto visual de captura exitosa en la cámara */
.captura-exitosa {
  border: 6px solid var(--color-selva) !important;
  box-shadow: 0 0 25px rgba(161, 217, 41, 0.8) !important;
  transform: scale(1.02);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.captura-exitosa-contenedor {
  border-color: var(--color-selva) !important;
  box-shadow: 0 0 30px rgba(161, 217, 41, 0.5) !important;
  transform: scale(1.02) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- ESTILOS DE LA ACTIVIDAD DE ORDENAR FIGURAS (CÓDIGO PUZLE) --- */
.figuras-actividad-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  gap: 20px;
}

.figuras-horizontal-container {
  background: var(--color-nube);
  border: 6px solid var(--color-piedra);
  border-radius: 24px;
  padding: 16px 24px;
  box-shadow: var(--sombra-suave);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.figuras-row-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-noche); /* Color morado establecido */
  text-transform: uppercase;
  letter-spacing: 1px;
}

.figuras-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
  flex-wrap: wrap;
}

/* Fichas arrastrables */
.figura-item-draggable {
  position: relative;
  width: 95px;
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: transform 0.2s;
}

.figura-item-draggable:active {
  cursor: grabbing;
}

.figura-text-overlay {
  position: absolute;
  font-family: 'Fira Code', monospace;
  font-size: 0.95rem;
  font-weight: 800;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.txt-dark { color: #1e1e1e; }
.txt-light { color: #ffffff; }

.figura-item-draggable.placed {
  opacity: 0.35;
  pointer-events: none;
  transform: scale(0.9) !important;
}

/* Contenedor del Editor de Figuras */
.editor-body-figuras {
  padding: 24px 30px;
  font-family: 'Fira Code', monospace;
  font-size: 1.45rem;
  line-height: 2.0;
  color: #d4d4d4;
  background: #1e1e1e;
  overflow-x: auto;
  width: 100%;
  box-sizing: border-box;
}

.code-line {
  display: flex;
  align-items: center;
  gap: 16px;
}

.line-number {
  color: #5a5a5a;
  width: 35px;
  text-align: right;
  user-select: none;
  font-size: 1.05rem;
}

.code-text {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  white-space: nowrap;
}

/* Colores de sintaxis */
.keyword { color: #569cd6; font-weight: 600; }
.function-name { color: #dcdcaa; }
.comment { color: #6a9955; font-style: italic; }
.string { color: #ce9178; }
.number { color: #b5cea8; }
.variable { color: #9cdcfe; }

/* Dropzones del Editor (Siluetas sin cajas exteriores) */
.figura-dropzone {
  display: inline-flex;
  width: 58px;
  height: 58px;
  position: relative;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  transition: transform 0.2s;
  margin: 0 4px;
}

.figura-dropzone.drop-hover {
  transform: scale(1.15);
}

.figura-dropzone.drop-hover svg path,
.figura-dropzone.drop-hover svg circle,
.figura-dropzone.drop-hover svg rect,
.figura-dropzone.drop-hover svg polygon {
  stroke: #6366f1 !important; /* Indigo accent color para imán */
}

.figura-dropzone.drop-completado {
  transform: none;
}

/* Dropzone de Silueta de Dinosaurio para Recorte */
.dino-dropzone-src {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.02);
  border: 2px dashed #4a5568;
  border-radius: 12px;
  width: 72px;
  height: 72px;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
}

.dino-dropzone-src.drop-hover {
  border-color: #6366f1 !important;
  background: rgba(99, 102, 241, 0.15) !important;
  transform: scale(1.1);
}

.silueta-inside-code {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  opacity: 0.35;
  user-select: none;
  pointer-events: none;
}

.dino-dropzone-src img.correcto-snap {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
}

/* Panel de Vista Previa del Navegador (para la actividad de Recorte) */
.preview-panel {
  margin-top: 15px;
  border: 1px solid #2d2d2d;
  border-radius: 12px;
  background: #181818;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 180px;
  justify-content: center;
}

.preview-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #858585;
  text-transform: uppercase;
}

.browser-render-box {
  width: 140px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  position: relative;
  overflow: hidden;
  padding: 10px;
  gap: 8px;
}

.browser-dino-title {
  font-size: 0.85rem;
  color: #a0aec0;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s;
}

.browser-dino-title.show {
  opacity: 1;
}

.browser-dino-img {
  max-width: 75%;
  max-height: 75%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.browser-dino-img.show {
  opacity: 1;
  transform: scale(1);
}

.placeholder-dino {
  font-size: 2.5rem;
  opacity: 0.2;
}

/* --- INTEGRACIÓN RECORTE COINCIDENTE CON MOCKUP --- */
.editor-layout-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (min-width: 992px) {
  .editor-layout-content {
    flex-direction: row;
    align-items: stretch;
  }
}

.recorte-panel {
  background: #181818;
  border-bottom: 2px solid #2d2d2d;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 992px) {
  .recorte-panel {
    width: 320px;
    border-bottom: none;
    border-right: 2px solid #2d2d2d;
    justify-content: flex-start;
    padding-top: 30px;
  }
}

.recorte-panel-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  font-family: var(--fuente-titulos);
}

.tablero-corte {
  width: 240px;
  height: 240px;
  background: var(--color-nube);
  border: 6px solid var(--color-piedra);
  border-radius: 24px;
  box-shadow: var(--sombra-suave);
  position: relative;
  overflow: hidden;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.dino-cutout-img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  z-index: 1;
  position: absolute;
  user-select: none;
  pointer-events: none;
  transition: transform 0.2s;
}

.dino-cutout-img.draggable {
  pointer-events: auto;
  cursor: grab;
  z-index: 5;
}

.dino-cutout-img.draggable:active {
  cursor: grabbing;
}

.recorte-feedback {
  font-size: 0.95rem;
  color: #94a3b8;
  text-align: center;
  line-height: 1.4;
  max-width: 260px;
}

.recorte-feedback strong {
  color: var(--color-volcan);
}

.tab-bar-fake {
  display: flex;
  height: 35px;
  border-bottom: 1px solid #2d2d2d;
  margin-bottom: 10px;
  width: 100%;
}

.tab-fake {
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  color: #4FC3F7;
  font-family: 'Fira Code', monospace;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
}

/* Clase para atenuar código secundario */
.dimmed-line {
  opacity: 0.25;
  transition: opacity 0.3s;
}

/* --- DISEÑO DESKTOP RESPONSIBO --- */
@media (min-width: 992px) {
  .figuras-actividad-layout {
    flex-direction: row;
    max-width: 1100px;
    align-items: flex-start;
    justify-content: center;
  }

  .figuras-horizontal-container {
    width: 170px;
    flex-direction: column;
    margin-bottom: 0;
    margin-top: 0;
    padding: 24px 16px;
    align-self: stretch;
    justify-content: flex-start;
  }

  .figuras-list {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .editor-window {
    flex: 1;
    margin-bottom: 0;
    max-width: 850px;
  }
}

/* --- INTEGRACIÓN TOTAL DEL EDITOR EN LA TARJETA PRINCIPAL (MODO PROGRAMANDO) --- */
.main-wrapper.editor-mode-active {
  background: #1e1e1e;
  border: 8px solid #2d2d2d;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  max-width: 950px; /* Recuadro más pequeño, compacto y balanceado */
}

/* Rediseño del título en el modo editor */
.main-wrapper.editor-mode-active .actividad-titulo {
  background: #181818;
  color: var(--color-selva);
  font-family: var(--fuente-titulos);
  font-size: 26px;
  margin: 0;
  padding: 24px 30px 6px 30px;
  text-align: left;
}

/* Rediseño de las instrucciones en el modo editor */
.main-wrapper.editor-mode-active .actividad-instruccion {
  background: #181818;
  color: #8e9cae;
  font-size: 16px;
  margin: 0;
  padding: 0 30px 20px 30px;
  text-align: left;
  max-width: none;
  border-bottom: 2px solid #2d2d2d;
}

/* Contenedor de la actividad */
.main-wrapper.editor-mode-active .actividad-container {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}

/* Integrar la ventana de código expandida al 100% */
.main-wrapper.editor-mode-active .editor-window {
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  background: transparent;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
}

/* Integrar y ajustar el cuerpo del editor para actividades con canvas */
.main-wrapper.editor-mode-active .editor-body {
  border-radius: 0;
  background: #1e1e1e;
  width: 100%;
  /* El max-width se calcula automáticamente para que la altura proporcional encaje en el alto de la pantalla táctil */
  max-width: min(900px, calc((100vh - clamp(140px, 25vh, 200px)) * 1.73));
  aspect-ratio: 900 / 520; /* Mantiene la proporción original para evitar distorsiones o estiramientos del texto */
  margin: 0 auto;
  box-sizing: border-box;
  touch-action: none;
}

/* Ajustes del panel de controles inferior y opciones en modo editor */
.main-wrapper.editor-mode-active .controles-actividad,
.main-wrapper.editor-mode-active .opciones-matematicas,
.main-wrapper.editor-mode-active .opciones-vocales {
  background: #181818;
  border-top: 2px solid #2d2d2d;
  padding: 20px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Adaptación para la actividad de ordenar figuras */
.main-wrapper.editor-mode-active .figuras-actividad-layout {
  padding: 24px 30px;
  gap: 24px;
  box-sizing: border-box;
  flex: 1;
}

@media (min-width: 992px) {
  .main-wrapper.editor-mode-active .figuras-actividad-layout {
    flex-direction: row;
    align-items: stretch;
    height: auto;
  }
  
  .main-wrapper.editor-mode-active .figuras-horizontal-container {
    align-self: flex-start;
  }

  .main-wrapper.editor-mode-active .editor-window {
    max-width: none;
  }
}

/* --- MEJORAS DEL HUEVO INTERACTIVO (FASE 2) --- */
.contenedor-huevo {
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.contenedor-huevo:hover {
  transform: scale(1.08);
}
.contenedor-huevo:active {
  transform: scale(0.92);
}

.contenedor-huevo.huevo-tap-shake {
  animation: wobbleHuevo 0.22s ease-in-out;
}

/* Desactivar decoraciones de fondo en móvil retrato para optimizar recursos */
@media (orientation: portrait) and (max-width: 991px) {
  .ambient-decor {
    display: none !important;
  }
}

@keyframes wobbleHuevo {
  0% { transform: scale(1.08) rotate(0deg); }
  25% { transform: scale(1.08) rotate(-9deg); }
  50% { transform: scale(1.08) rotate(9deg); }
  75% { transform: scale(1.08) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* --- OPTIMIZACIÓN MÓVIL EN ORIENTACIÓN LANDSCAPE (PANTALLAS BAJAS) --- */
@media (orientation: landscape) and (max-height: 520px) {
  body {
    padding: var(--space-xs) !important;
  }

  .main-wrapper {
    padding: var(--space-xs) !important;
    border-width: 4px !important;
    border-radius: var(--radio-md) !important;
    min-height: unset !important;
  }
  
  .actividad-titulo {
    font-size: clamp(16px, 2.5vh, 20px) !important;
    margin: 4px 0 !important;
  }
  
  .actividad-instruccion {
    font-size: clamp(12px, 2vh, 14px) !important;
    margin: 4px 0 !important;
  }

  .main-wrapper.editor-mode-active .editor-window {
    max-width: 520px !important;
    margin: 0 auto !important;
  }

  /* Ajustar botones de opciones inferiores en modo editor */
  .main-wrapper.editor-mode-active .controles-actividad,
  .main-wrapper.editor-mode-active .opciones-matematicas,
  .main-wrapper.editor-mode-active .opciones-vocales {
    padding: 6px 15px !important;
    gap: 8px !important;
  }

  .btn {
    padding: 8px 16px !important;
    font-size: var(--text-sm) !important;
  }
  
  /* Reducir el botón de silencio flotante */
  .btn-mute-flotante {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    top: 10px !important;
    right: 10px !important;
  }
}

/* --- MEJORAS DEL TALLER DE RECORTE EN MÓVILES (Fase 1 - Actividad 5) ---
   El tablero de recorte se dibuja en un <canvas> de resolución lógica fija (400x300px),
   así que en pantallas angostas no queda otra que reducir el modal completo con transform.
   Para minimizar cuánto se encogen los controles táctiles (tijera, botón cerrar), primero
   recortamos el padding del modal — así se necesita menos escala para que quepa. */
@media (max-width: 480px) {
  #modal-taller-recorte > div {
    padding: 16px !important;
    gap: 12px !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    transform: scale(0.85) !important;
    transform-origin: center center;
  }
}
@media (max-width: 380px) {
  #modal-taller-recorte > div {
    padding: 12px !important;
    gap: 10px !important;
    transform: scale(0.7) !important;
    transform-origin: center center;
  }
}

/* Evitar gestos táctiles accidentales del navegador en las superficies de arrastre.
   No se aplica al overlay/backdrop completo para no bloquear el scroll de su contenido
   cuando el modal es más alto que el viewport (ej. pantallas cortas en portrait). */
.tablero-corte {
  touch-action: none;
}