/* ============================================
   ESTILOS MEJORADOS PARA LOGIN
   ============================================ */

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Login Container */
.login-container {
  animation: fadeIn 0.6s ease-out;
}

.login-form-section {
  animation: slideInLeft 0.8s ease-out;
}

.login-image-section {
  animation: slideInRight 0.8s ease-out;
}

/* Mejorar estilos del formulario */
.login-form-wrapper input[type="text"],
.login-form-wrapper input[type="password"] {
  background-color: #f9f9f9;
  transition: all 0.3s ease;
}

.login-form-wrapper input[type="text"]:hover,
.login-form-wrapper input[type="password"]:hover {
  background-color: #ffffff;
  border-color: #bbb;
}

.login-form-wrapper input[type="text"]:focus,
.login-form-wrapper input[type="password"]:focus {
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(0, 115, 170, 0.15);
  transform: translateY(-1px);
}

/* Botón mejorado */
.login-form-wrapper button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 115, 170, 0.2);
}

.login-form-wrapper button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 115, 170, 0.3);
}

.login-form-wrapper button:active {
  transform: translateY(0);
}

/* Mensaje de error mejorado */
.login-form-wrapper .login-error {
  animation: slideInLeft 0.3s ease-out;
  border-left: 4px solid #d32f2f;
}

/* Mensaje de éxito */
.login-form-wrapper .login-success {
  animation: slideInLeft 0.3s ease-out;
  border-left: 4px solid #2e7d32;
  background: #e6f4ea;
  color: #1b5e20;
}

/* Enlace de recuperación */
.login-links {
  margin-top: 16px;
}

.login-links a {
  color: #0073aa;
}

/* Responsive mejorado */
@media (max-width: 768px) {
  .login-form-section {
    height: 70%;
  }

  .login-image-section {
    height: 30%;
  }

  .login-form-wrapper {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .login-form-wrapper h1 {
    font-size: 22px;
  }

  .login-form-wrapper input[type="text"],
  .login-form-wrapper input[type="password"] {
    font-size: 16px; /* Previene zoom en iOS */
  }
}