body.bg-auth {
    background: linear-gradient(135deg, #093c94 0%, #093c94 100%) !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 50px 15px;
    overflow-y: auto;
}

.card-auth {
    background: linear-gradient(135deg, #e5fffd 20%, #82c6ff 110%) !important;
    backdrop-filter: blur(10px);
    width: 100%;
    max-width: 500px; /* Un poco más ancho para que los apellidos quepan en PC */
    margin-top: auto; /* Magia: empuja desde arriba */
    margin-bottom: auto; /* Magia: empuja desde abajo */
    border-radius: 1.25rem;
}

@media (max-width: 576px) {
    body.bg-auth {
        padding: 80px 15px; /* Más espacio arriba en móviles */
    }
    .card-auth {
        margin-top: 0; /* Quitamos el auto para que el padding del body mande */
    }
}

.btn-auth {
    background-color: #005dff;
    border-color: #005dff;
    color: white;
}
.btn-auth:hover,
.btn-auth:focus {
    background-color: #093c94;
    border-color: #093c94;
    color: white;
}
.btn-eye-auth {
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-left: none;
    color: #005dff;
    transition: all 0.3s ease;
}

.btn-eye-auth:hover,
.btn-eye-auth:focus {
    background-color: #f8f9fa;
    color: #093c94;
    border-color: #ced4da;
    box-shadow: none;
}

.input-password-auth {
    border-right: none;
}

.input-password-auth:focus {
    border-color: #ced4da;
    box-shadow: none;
}