body {
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(rgba(6, 23, 18, 0.5), rgba(58, 132, 102, 0.07)), url('../../img/Ciudad.jpeg') center center / cover no-repeat;
}

.login-card {
    width: 100%;
    max-width: 400px;
    margin: 0.8rem;
    border-radius: 12px;
    background: rgba(248, 247, 242, 0.95);
    border: 1px solid rgba(108, 117, 125, 0.24);
    backdrop-filter: blur(5px);
    box-shadow: 0 0.75rem 1.75rem rgba(6, 23, 18, 0.2);
}

.login-title {
    color: #2d4f79;
    letter-spacing: 0.4px;
    font-size: clamp(1rem, 1rem + 0.4vw, 1.35rem);
}

.login-card .form-control {
    border-color: #cfd6dc;
    background-color: #fdfdfc;
}

.login-card .form-control:focus {
    border-color: #5a7cab;
    box-shadow: 0 0 0 0.2rem rgba(90, 124, 171, 0.2);
}

.login-card .btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.login-card .btn-primary:hover,
.login-card .btn-primary:focus {
    background-color: #0a58ca;
    border-color: #0a58ca;
}

.login-card a {
    color: #495057;
}

.login-card a:hover {
    color: #212529;
}

.login-card .form-control,
.login-card .btn,
.login-card .form-check-label,
.login-card .small,
.login-card small,
.login-card p,
.login-card a {
    font-size: clamp(0.78rem, 0.75rem + 0.2vw, 0.92rem);
}

@media (max-width: 767.98px) {
    body {
        align-items: flex-start;
        padding: 0.6rem 0;
    }

    .login-card {
        max-width: 96vw;
        margin: 0.5rem;
    }

    .login-card .card-body,
    .login-card .p-4,
    .login-card .p-3 {
        padding: 0.9rem !important;
    }
}