/* Fondo de la página de recuperación de contraseña */
.bg-reset {
    background-image: url('../img/olvide_contraseña.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
  }
  
  /* Estilo para la imagen lateral */
  .bg-reset-image {
    background-image: url('../img/undraw/undraw_forgot-password_nttj.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  
  /* Estilo para la tarjeta flotante */
  .card {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border: none;
    overflow: hidden;
  }
  
  /* Animación de entrada para la tarjeta */
  .card-md {
    animation: fadeIn 0.8s ease-in-out;
  }
  
  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Mejoras visuales para el formulario */
  .form-control:focus {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.1);
  }
  
  .btn-primary {
    transition: all 0.3s ease;
  }
  
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(32, 107, 196, 0.2);
  }
  
  /* Soporte para pantallas pequeñas */
  @media (max-width: 768px) {
    .card-md {
      margin: 0 15px;
    }
  }