/* General Styles */
html, body {
    height: 100%; /* Full height for proper alignment */
    margin: 0;
    color: #ffffff; /* Text color for contrast */
    background: url("/static/auth_app/img/fondo.jpg") no-repeat center center fixed;
    background-size: cover; /* Ensures the image covers the whole screen */
    background-blend-mode: overlay; /* Combines gradient and image */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Form Styles */
  .form-signin {
    max-width: 400px; /* Form width */
    padding: 2rem; /* Padding for a spacious feel */
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
    border-radius: 12px; /* Smooth edges */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Soft shadow for depth */
    text-align: center; /* Center text and logo */
  }
  
  /* Input Fields */
  .form-floating {
    margin-bottom: 1rem; /* Space between fields */
  }
  
  .form-floating label {
    color: #6c757d; /* Subtle text for field labels */
  }
  
  /* Logo */
  .logo {
    width: 75%; /* Responsiveness */
    max-width: 300px; /* Limit size */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto 1.5rem; /* Center and add spacing below */
  }
  
  /* Button */
  .btn {
    background: #BD0C1E; /* Blue for action button */
    color: #ffffff; /* White text */
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    transition: background 0.3s ease;
  }
  
  .btn:hover {
    background: #d13c49; /* Slightly lighter blue on hover */
  }
  
  /* Links */
  a {
    font-size: 0.9rem;
    color: #1e40af; /* Match button color */
  }
  
  a:hover {
    color: #1d4ed8; /* Hover effect for links */
  }
  
  /* Footer */
  footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 1rem 0;
    background: rgba(0, 0, 0, 0.7); /* Fondo oscuro semi-transparente */
    font-size: 0.9rem;
    color: #ffffff; /* Texto en blanco */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil para separar del contenido */
  }