/* VALORIUM_LOGIN_LOGO_OFFICIAL_START */

/* =========================================================
   VALORIUM SISTEMAS
   LOGIN - LOGO OFICIAL
   ========================================================= */


/* =========================================================
   CONTAINER DA LOGO
   ========================================================= */

.login-page
.login-header
.login-logo {

    width:
        100% !important;

    height:
        auto !important;

    max-width:
        260px;

    margin:
        0 auto 20px !important;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    color:
        inherit;

    box-shadow:
        none !important;

    overflow:
        visible;

}


/* =========================================================
   IMAGEM
   ========================================================= */

.login-page
.login-logo-image {

    display:
        block;

    width:
        100%;

    max-width:
        250px;

    height:
        auto;

    margin:
        0 auto;

    object-fit:
        contain;

    object-position:
        center;

    user-select:
        none;

    -webkit-user-drag:
        none;

    filter:
        drop-shadow(
            0 12px 20px
            rgba(7,17,31,.14)
        );

}


/* =========================================================
   AJUSTE DO HEADER
   ========================================================= */

.login-page
.login-header {

    margin-bottom:
        27px;

}


/* =========================================================
   TÍTULO ABAIXO DA LOGO
   ========================================================= */

.login-page
.login-header
h1 {

    margin:
        0;

    color:
        #07111f;

    font-weight:
        800;

}


/* =========================================================
   TEXTO
   ========================================================= */

.login-page
.login-header
p {

    margin:
        7px 0 0;

    color:
        #64748b;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .login-page
    .login-header
    .login-logo {

        max-width:
            215px;

        margin-bottom:
            17px !important;

    }


    .login-page
    .login-logo-image {

        max-width:
            205px;

    }

}


@media (max-width: 360px) {

    .login-page
    .login-logo-image {

        max-width:
            185px;

    }

}

/* VALORIUM_LOGIN_LOGO_OFFICIAL_END */

/* VALORIUM_LOGIN_LUXE_FINAL_START */

/* =========================================================
   VALORIUM SISTEMAS
   LOGIN LUXE FINAL

   Identidade:
   VALORIUM DESIGN CORE V3
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.login-page {

    position:
        relative;

    min-height:
        100vh;

    box-sizing:
        border-box;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        42px 20px;

    overflow-x:
        hidden;

    background:
        radial-gradient(
            circle at 16% 10%,
            rgba(59,130,246,.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 8%,
            rgba(200,155,67,.15),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 110%,
            rgba(59,130,246,.10),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #050c16 0%,
            var(--vl-core-midnight, #07111f) 35%,
            var(--vl-core-midnight-soft, #0a1728) 68%,
            var(--vl-core-navy, #10243c) 100%
        ) !important;

    font-family:
        'Plus Jakarta Sans',
        Inter,
        Arial,
        sans-serif;

}


/* =========================================================
   DETALHE DE FUNDO
   ========================================================= */

.login-page::before {

    content: "";

    position:
        fixed;

    z-index:
        0;

    width:
        520px;

    height:
        520px;

    top:
        -310px;

    left:
        50%;

    transform:
        translateX(-50%);

    border:
        1px solid
        rgba(223,186,112,.07);

    border-radius:
        50%;

    pointer-events:
        none;

}


/* =========================================================
   SEGUNDO DETALHE
   ========================================================= */

.login-page::after {

    content: "";

    position:
        fixed;

    z-index:
        0;

    width:
        760px;

    height:
        1px;

    left:
        50%;

    bottom:
        12%;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(223,186,112,.17),
            transparent
        );

    pointer-events:
        none;

}


/* =========================================================
   CARD
   ========================================================= */

.login-page
.login-card {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            100%,
            440px
        );

    max-width:
        440px;

    box-sizing:
        border-box;

    overflow:
        hidden;

    padding:
        38px 39px 32px;

    border:
        1px solid
        rgba(223,186,112,.19) !important;

    border-radius:
        23px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.995),
            rgba(252,253,254,.985)
        ) !important;

    box-shadow:
        0 36px 90px
        rgba(0,0,0,.30),
        0 8px 24px
        rgba(7,17,31,.13),
        inset 0 1px 0
        rgba(255,255,255,.95) !important;

    animation:
        loginCardEntrada
        .42s ease;

}


/* =========================================================
   LINHA DOURADA SUPERIOR
   ========================================================= */

.login-page
.login-card::before {

    content: "";

    position:
        absolute;

    top:
        0;

    left:
        26px;

    right:
        26px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(200,155,67,.76),
            transparent
        );

}


/* =========================================================
   GLOW INTERNO
   ========================================================= */

.login-page
.login-card::after {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    width:
        230px;

    height:
        230px;

    top:
        -155px;

    right:
        -95px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.08),
            transparent 70%
        );

    pointer-events:
        none;

}


/* =========================================================
   HEADER
   ========================================================= */

.login-page
.login-header {

    position:
        relative;

    margin:
        0 0 28px;

    text-align:
        center;

}


/* =========================================================
   LOGO
   ========================================================= */

.login-page
.login-header
.login-logo {

    width:
        100% !important;

    max-width:
        260px !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 auto 20px !important;

    padding:
        0 !important;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    color:
        inherit !important;

    box-shadow:
        none !important;

}


/* =========================================================
   IMAGEM DA LOGO
   ========================================================= */

.login-page
.login-logo-image {

    display:
        block;

    width:
        100%;

    max-width:
        250px;

    height:
        auto;

    margin:
        0 auto;

    object-fit:
        contain;

    object-position:
        center;

    filter:
        drop-shadow(
            0 9px 15px
            rgba(7,17,31,.13)
        );

}


/* =========================================================
   CASO O ÍCONE ANTIGO AINDA EXISTA
   ========================================================= */

.login-page
.login-logo
.fa-utensils {

    display:
        none !important;

}


/* =========================================================
   NÃO UTILIZAMOS MAIS O H1
   MAS MANTÉM SEGURANÇA VISUAL SE EXISTIR
   ========================================================= */

.login-page
.login-header
h1 {

    margin:
        0 0 7px;

    color:
        var(--vl-core-midnight, #07111f) !important;

    font-size:
        22px;

    font-weight:
        850;

    letter-spacing:
        -.45px;

}


/* =========================================================
   SUBTÍTULO
   ========================================================= */

.login-page
.login-header
p {

    max-width:
        300px;

    margin:
        3px auto 0 !important;

    color:
        var(--vl-core-text-secondary, #667386) !important;

    font-size:
        12px !important;

    font-weight:
        550;

    line-height:
        1.6;

}


/* =========================================================
   ALERTA DE ERRO
   ========================================================= */

.login-page
.alerta-erro {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin:
        0 0 21px;

    padding:
        13px 14px;

    border:
        1px solid
        #f0cdd2 !important;

    border-radius:
        10px !important;

    background:
        #fff5f6 !important;

    color:
        #b92f3c !important;

    font-size:
        10px !important;

    font-weight:
        700;

    line-height:
        1.5;

    box-shadow:
        none !important;

}


/* =========================================================
   ÍCONE ALERTA
   ========================================================= */

.login-page
.alerta-erro
i {

    margin-top:
        1px;

    color:
        #c53443;

    font-size:
        13px;

}


/* =========================================================
   FORM
   ========================================================= */

.login-page
.login-form {

    width:
        100%;

}


/* =========================================================
   FORM GROUP
   ========================================================= */

.login-page
.login-form
.form-group {

    margin-bottom:
        18px;

}


/* =========================================================
   LABEL
   ========================================================= */

.login-page
.login-form
label {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin:
        0 0 7px;

    color:
        var(--vl-core-text-secondary, #526174) !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .01em;

}


/* =========================================================
   LABEL ICON
   ========================================================= */

.login-page
.login-form
label
i {

    width:
        14px;

    color:
        var(--vl-core-gold, #c89b43) !important;

    font-size:
        11px;

    text-align:
        center;

}


/* =========================================================
   WRAPPER
   ========================================================= */

.login-page
.login-form
.input-wrapper {

    position:
        relative;

    width:
        100%;

}


/* =========================================================
   INPUT
   ========================================================= */

.login-page
.login-form
.form-control {

    width:
        100%;

    min-height:
        47px !important;

    box-sizing:
        border-box;

    padding:
        0 13px !important;

    border:
        1px solid
        var(--vl-core-border, #dfe4ea) !important;

    border-radius:
        10px !important;

    background:
        #ffffff !important;

    color:
        var(--vl-core-text, #172033) !important;

    font-family:
        inherit;

    font-size:
        11px !important;

    font-weight:
        550;

    outline:
        none;

    box-shadow:
        0 1px 2px
        rgba(7,17,31,.018) !important;

    transition:
        border-color
        var(--vl-core-transition, .2s ease),
        box-shadow
        var(--vl-core-transition, .2s ease),
        background
        var(--vl-core-transition, .2s ease);

}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.login-page
.login-form
.form-control::placeholder {

    color:
        #9aa5b4 !important;

    opacity:
        1;

}


/* =========================================================
   HOVER INPUT
   ========================================================= */

.login-page
.login-form
.form-control:hover {

    border-color:
        #c6ced8 !important;

}


/* =========================================================
   FOCUS INPUT
   ========================================================= */

.login-page
.login-form
.form-control:focus {

    border-color:
        var(--vl-core-gold, #c89b43) !important;

    background:
        #ffffff !important;

    box-shadow:
        0 0 0 3px
        rgba(200,155,67,.11) !important;

}


/* =========================================================
   AUTOFILL CHROME
   ========================================================= */

.login-page
.login-form
.form-control:-webkit-autofill,

.login-page
.login-form
.form-control:-webkit-autofill:hover,

.login-page
.login-form
.form-control:-webkit-autofill:focus {

    -webkit-text-fill-color:
        #172033;

    -webkit-box-shadow:
        0 0 0 1000px
        #ffffff inset;

    transition:
        background-color 9999s ease-in-out 0s;

}


/* =========================================================
   BOTÃO ENTRAR
   ========================================================= */

.login-page
.btn-entrar {

    position:
        relative;

    width:
        100%;

    min-height:
        48px !important;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        4px;

    padding:
        0 18px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(223,186,112,.25) !important;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            135deg,
            var(--vl-core-midnight, #07111f),
            var(--vl-core-navy, #10243c)
        ) !important;

    color:
        #ffffff !important;

    font-family:
        inherit;

    font-size:
        11px !important;

    font-weight:
        850 !important;

    letter-spacing:
        .015em;

    cursor:
        pointer;

    box-shadow:
        0 9px 22px
        rgba(7,17,31,.17) !important;

    transition:
        transform
        var(--vl-core-transition, .2s ease),
        border-color
        var(--vl-core-transition, .2s ease),
        box-shadow
        var(--vl-core-transition, .2s ease);

}


/* =========================================================
   GOLD GLOW DO BOTÃO
   ========================================================= */

.login-page
.btn-entrar::before {

    content: "";

    position:
        absolute;

    top:
        -80px;

    left:
        -60px;

    width:
        115px;

    height:
        115px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(223,186,112,.13),
            transparent 70%
        );

    pointer-events:
        none;

}


/* =========================================================
   ÍCONE BOTÃO
   ========================================================= */

.login-page
.btn-entrar
i {

    color:
        var(--vl-core-gold-light, #dfba70);

    font-size:
        11px;

}


/* =========================================================
   HOVER BOTÃO
   ========================================================= */

.login-page
.btn-entrar:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(223,186,112,.48) !important;

    background:
        linear-gradient(
            135deg,
            #0a1728,
            #19385d
        ) !important;

    box-shadow:
        0 13px 29px
        rgba(7,17,31,.23) !important;

}


/* =========================================================
   ACTIVE BOTÃO
   ========================================================= */

.login-page
.btn-entrar:active {

    transform:
        translateY(0);

}


/* =========================================================
   FOCUS BOTÃO
   ========================================================= */

.login-page
.btn-entrar:focus-visible {

    outline:
        3px solid
        rgba(200,155,67,.24) !important;

    outline-offset:
        3px;

}


/* =========================================================
   FOOTER
   ========================================================= */

.login-page
.login-footer {

    margin-top:
        25px;

    padding-top:
        19px;

    border-top:
        1px solid
        var(--vl-core-border, #e3e7ec) !important;

    color:
        var(--vl-core-text-muted, #8792a2) !important;

    font-size:
        9px !important;

    font-weight:
        650;

    text-align:
        center;

}


/* =========================================================
   FOOTER CONTENT
   ========================================================= */

.login-page
.login-footer
span {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

}


/* =========================================================
   FOOTER ICON
   ========================================================= */

.login-page
.login-footer
i {

    color:
        var(--vl-core-gold, #c89b43);

    font-size:
        10px;

}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 520px) {

    .login-page {

        padding:
            24px 14px;

    }


    .login-page
    .login-card {

        max-width:
            410px;

        padding:
            31px 25px 27px;

        border-radius:
            19px !important;

    }


    .login-page
    .login-header
    .login-logo {

        max-width:
            225px !important;

        margin-bottom:
            17px !important;

    }


    .login-page
    .login-logo-image {

        max-width:
            215px;

    }


    .login-page
    .login-header {

        margin-bottom:
            25px;

    }

}


@media (max-width: 390px) {

    .login-page {

        padding:
            18px 11px;

    }


    .login-page
    .login-card {

        padding:
            27px 20px 24px;

        border-radius:
            17px !important;

    }


    .login-page
    .login-logo-image {

        max-width:
            190px;

    }


    .login-page
    .login-form
    .form-control {

        min-height:
            45px !important;

    }


    .login-page
    .btn-entrar {

        min-height:
            46px !important;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .login-page,
    .login-page *,
    .login-page *::before,
    .login-page *::after {

        animation:
            none !important;

        transition-duration:
            .01ms !important;

    }

}

/* VALORIUM_LOGIN_LUXE_FINAL_END */