/* =====================================================
   Estilos para el Flujo de Sign-In
   Esto complementa a Tailwind CSS y Alpine.js
   ===================================================== */

/* Animación de fondo con puntos */
.dot-grid {
  background-image: 
    radial-gradient(circle, rgba(255,255,255,0.3) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: slide 20s linear infinite;
}

@keyframes slide {
  0% { 
    transform: translate(0, 0); 
  }
  100% { 
    transform: translate(50px, 50px); 
  }
}

/* Animación de pulse para el icono de éxito */
@keyframes pulse-slow {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.05); 
  }
}

.animate-pulse-slow {
  animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Ajustes para inputs numéricos */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Animación de hover para botones */
@keyframes button-hover-glow {
  0% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  }
}

/* Estilos para transiciones suaves */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Input focus styles */
input:focus {
  transition: all 0.2s ease;
}

/* Efecto de fade para transiciones de Alpine */
[x-cloak] {
  display: none !important;
}

/* Soporte para tema oscuro personalizado */
@media (prefers-color-scheme: dark) {
  .dot-grid {
    background-image: 
      radial-gradient(circle, rgba(255,255,255,0.25) 1px, transparent 1px);
  }
}

/* Animaciones para entrada de código */
.code-input {
  transition: all 0.2s ease;
}

.code-input:focus {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.1);
}

/* Estilos para el navbar móvil */
@media (max-width: 640px) {
  header {
    animation: header-slide-down 0.3s ease-out;
  }
}

@keyframes header-slide-down {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Efecto parallax para el fondo */
@supports (background-attachment: fixed) {
  .parallax-bg {
    background-attachment: fixed;
  }
}

/* Soporte para reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .animate-pulse-slow {
    animation: none;
  }
}

/* Estilos para accesibilidad */
:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Gradiente personalizado para botones */
.btn-gradient {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(200, 200, 200, 1) 100%);
  transition: all 0.3s ease;
}

.btn-gradient:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(220, 220, 220, 1) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Estilos para backdrop blur */
.backdrop-blur-custom {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Animación de entrada para el modal */
@keyframes modal-enter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Overlay semitransparente */
.modal-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}