body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #3949ab 100%);
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--border-radius-xl, 20px);
    box-shadow: var(--shadow-xl, 0 16px 40px rgba(0,0,0,.16));
    padding: 2.5rem;
}

.login-logo img {
    display: block;
    margin: 0 auto 0.25rem; /* Reduce el margen inferior */
}

.btn-login {
    background: var(--color-primary, #1a237e);
    border: none;
    color: #fff;
    width: 100%;
    padding: 0.75rem;
    font-size: var(--font-size-base, 0.9375rem);
    font-weight: 600;
    border-radius: var(--border-radius-sm, 6px);
    transition: all var(--transition-fast, 0.15s ease);
}

.btn-login:hover {
    background: var(--color-primary-light, #283593);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 2px 12px rgba(0,0,0,.08));
}

.alert-login {
    background: var(--color-danger-bg, #fce4ec);
    color: var(--color-danger, #c62828);
    border: none;
    border-radius: var(--border-radius-sm, 6px);
    font-size: var(--font-size-sm, 0.875rem);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 480px) {
    .login-card {
        margin: 1rem;
        padding: 1.75rem;
    }
}