/* Asegúrate de que todo el contenido de la página use toda la altura disponible */
html, body {
    height: 100%;
  }
  
  /* Centra verticalmente el contenido en todos los tamaños de pantalla */
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px; /* Añade algo de espacio alrededor para no tocar los bordes */
    background-color: #f5f5f5; /* Un fondo suave */
  }
  
  .card {
    width: 100%;
    max-width: 700px; /* Aumenta el ancho máximo aquí */
    min-width: 400px;
  }
  
  
  /* Asegúrate de que el formulario se ajuste bien dentro de la tarjeta */
  .form-control {
    margin-bottom: 1rem; /* Espaciado entre los campos */
  }
  
  .btn {
    margin-top: 0.5rem; /* Espaciado encima del botón */
  }