@import url("./global/variables.css");
@import url("./global/botones.css");
@import url("./global/fonts.css");
html {
    font-size: 16px;
}
body.login-page {
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: "Poppins", "Segoe UI", sans-serif;
    color: var(--color-text-primary);
    background-image: linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.68)), /* Fondo oscuro semitransparente*/ url("../images/fondo-login.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .login-shell {
        position: relative;
        z-index: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        .login-card {
            width: min(100%, 33rem);
            padding: 3.5rem 2.8rem 3rem;
            margin: 1rem;
            border-radius: 1rem;
            background: var(--color-bg);
            box-shadow: 0 24px 70px var(--color-shadow-ambient);
            .login-brand {
                display: flex;
                flex-direction: column;
                gap: 2rem;
                margin-bottom: 32px;
                .login-brand__logo {
                    width: min(100%, 16.875rem);
                    height: auto;
                    display: block;
                }
                .login-brand__title {
                    margin: 0;
                    font-size: clamp(1.85rem, 2.1vw, 2.2rem);
                    font-weight: 600;
                    line-height: 1.2;
                }
            }
            .login-feedback {
                min-height: 3.25rem;
                margin: 1rem 0;
            }
            .auth-copy {
                margin: 1rem 0;
                .auth-copy__title {
                    margin: 0;
                    font-size: 1.4rem;
                    font-weight: 600;
                    line-height: 1.3;
                }
                .auth-copy__description {
                    margin: 0.75rem 0 0;
                    font-size: 0.98rem;
                    line-height: 1.5;
                    color: rgba(30, 30, 30, 0.7);
                }
            }
            .login-alert {
                margin: 0;
                padding: 0.9rem 1rem;
                border-radius: 0.75rem;
                font-size: 0.95rem;
                line-height: 1.4;
                &.login-alert--error {
                    background: var(--color-alert-error-bg);
                    color: var(--color-alert-error-text);
                }
                &.login-alert--success {
                    background: var(--color-alert-success-bg);
                    color: var(--color-alert-success-text);
                }
            }
            .login-form {
                display: flex;
                flex-direction: column;
                gap: 2rem;
                .form-field {
                    display: flex;
                    flex-direction: column;
                    gap: 0.75rem;
                    label {
                        font-size: 1.25rem;
                        font-weight: 500;
                        line-height: 1.5;
                    }
                    input {
                        width: 100%;
                        min-height: 2.625rem;
                        padding: 0 0 0 10px;
                        border: 0;
                        border-bottom: 1px solid var(--color-border-soft);
                        background: transparent;
                        color: var(--color-text-primary);
                        font: inherit;
                        outline: none;
                        transition: border-color 0.2s ease, box-shadow 0.2s ease;
                        &::placeholder {
                            color: var(--color-input-placeholder);
                        }
                        &:focus {
                            border-bottom-color: var(--color-text-primary);
                            box-shadow: inset 0 -1px 0 var(--color-text-primary);
                        }
                    }
                    .form-field__error {
                        margin: -0.2rem 0 0;
                        font-size: 0.88rem;
                        line-height: 1.4;
                        color: var(--color-error);
                    }
                }
            }
            .logout-form {
                margin-top: 1rem;
                .logout-form__button {
                    width: 100%;
                    min-height: 2.625rem;
                    border: 1px solid var(--color-border-soft);
                    border-radius: 0.5rem;
                    background: transparent;
                    color: var(--color-text-primary);
                    font: inherit;
                    font-size: 1rem;
                    font-weight: 500;
                    cursor: pointer;
                    transition: border-color 0.2s ease, background-color 0.2s ease;
                    &:hover {
                        background: rgba(30, 30, 30, 0.04);
                        border-color: var(--color-text-primary);
                    }
                    &:focus-visible {
                        outline: 3px solid var(--color-focus-ring);
                        outline-offset: 2px;
                    }
                }
            }
        }
    }
}
@media (max-width: 768px) {
    body.login-page {
        padding: 0 1.25rem;
        .login-shell {
            .login-card {
                padding: 2.5rem 1.5rem 2rem;
                .login-brand {
                    gap: 1.5rem;
                    .login-brand__title {
                        font-size: 1.9rem;
                    }
                }
                .login-form {
                    .form-field {
                        label {
                            font-size: 1.05rem;
                        }
                    }
                }
            }
        }
    }
}