/* Estilos específicos para la página de login */

/* Reset básico para asegurar que todo se vea bien */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Estilos adicionales para el toggle de contraseña */
#togglePassword {
  transition: all 0.2s ease;
}

#togglePassword:hover {
  transform: scale(1.1);
}

#togglePassword:active {
  transform: scale(0.95);
}

#eyeIcon {
  transition: opacity 0.15s ease;
}

/* Añadir un efecto suave al cambiar el icono */
.icon-changing {
  opacity: 0.5;
}

/* Animación de entrada suave - ASEGURAR QUE SE VEA */
.login-container {
  animation: fadeInUp 0.6s ease-out forwards;
}

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

/* Mejoras adicionales para el formulario */
.form-input {
  transition: all 0.3s ease;
}

.form-input:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
}

.submit-button {
  transition: all 0.3s ease;
}

.submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.25);
}

.submit-button:active {
  transform: translateY(0);
}

/* Loading spinner personalizado */
.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive design para móviles */
@media (max-width: 640px) {
  .login-container {
    margin: 1rem;
    padding: 1.5rem;
  }
  
  .login-title {
    font-size: 1.75rem;
  }
  
  .logo-image {
    width: 4rem;
    height: 4rem;
  }
  
  /* Mejoras adicionales para móviles */
  .form-input {
    font-size: 16px; /* Previene zoom en iOS */
    -webkit-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0.5rem;
  }
  
  .submit-button {
    font-size: 16px; /* Previene zoom en iOS */
    -webkit-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0.5rem;
  }
  
  /* Prevenir zoom en inputs */
  input[type="text"],
  input[type="password"] {
    font-size: 16px !important;
  }
}

/* Mejoras adicionales para mejor compatibilidad */
.form-input {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.form-input:focus {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Estilos para prevenir problemas de viewport en móviles */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}