/* ==========================
LOGIN - MINIMALISTA
========================== */

*{
    box-sizing:border-box;
}

html,
body{
    min-height:100%;
}

body{
    min-height:100%;

    margin:0;

    background:#111111;
    color:#FFFFFF;

    font-size:14px;

    overflow-x:hidden;
}


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

.login-page{
    width:100%;

    min-height:100vh;
    min-height:100svh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;
}

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

.login-card{
    width:100%;
    max-width:420px;

    padding:34px 32px 32px;

    background:#111111;

    border:1px solid #202020;
    border-radius:18px;

    box-shadow:none;
}


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

.login-logo{
    height:54px;

    display:flex;
    justify-content:center;
    align-items:center;

    margin-bottom:24px;
}

.login-logo img{
    width:154px;
    max-height:54px;

    display:block;

    object-fit:contain;
}

/* ==========================
TÍTULO
========================== */

.login-header{
    margin-bottom:26px;

    text-align:center;
}

.login-header h1{
    margin:0 0 6px;

    color:#F2F2F2;

    font-size:22px;
    font-weight:500;
    line-height:1.2;
}

.login-header p{
    margin:0;

    color:#A7A7A7;

    font-size:13px;
    font-weight:500;
}


/* ==========================
MENSAGENS
========================== */

.login-mensagens{
    margin-bottom:18px;
}

.login-card .alert{
    border-radius:10px;

    font-size:13px;
}


/* ==========================
FORMULÁRIO
========================== */

.login-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.campo-login{
    width:100%;
}

.login-card .form-label{
    margin-bottom:7px;

    color:#BDBDBD;

    font-size:13px;
    font-weight:500;
}


/* ==========================
CAMPOS
========================== */

.login-card .form-control{
    height:48px;

    background:#101010;
    color:#FFFFFF;

    border:1px solid #262626;
    border-radius:10px;

    font-size:14px;
    font-weight:500;

    box-shadow:none !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.login-card .form-control::placeholder{
    color:#777777;
}

.login-card .form-control:focus{
    background:#171717;

    border-color:#444444;

    box-shadow:none !important;
    outline:0;
}



/* ==========================
CAMPO SENHA COM OLHO
========================== */

.campo-senha-login{
    position:relative;
}

.campo-senha-login .form-control{
    padding-right:48px;
}

.btn-mostrar-senha{
    position:absolute;
    top:50%;
    right:10px;

    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    background:transparent;
    color:#BDBDBD;

    border:0;
    border-radius:8px;

    transform:translateY(-50%);

    transition:
        background-color .2s ease,
        color .2s ease;
}

.btn-mostrar-senha:hover,
.btn-mostrar-senha:focus{
    background:#1F1F1F;
    color:#FFFFFF;

    outline:0;
}

.btn-mostrar-senha i{
    font-size:17px;
    line-height:1;
}


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

.btn-login{
    width:100%;
    height:48px;

    margin-top:4px;

    background:#151515;
    color:#FFFFFF;

    border:1px solid #2A2A2A;
    border-radius:10px;

    font-size:14px;
    font-weight:700;

    box-shadow:none !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .15s ease;
}

.btn-login:hover,
.btn-login:focus{
    background:#222222;
    color:#FFFFFF;

    border-color:#3A3A3A;
}

.btn-login:active{
    background:#282828 !important;
    color:#FFFFFF !important;

    border-color:#444444 !important;

    transform:translateY(1px);
}


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

@media (max-width:576px){

    .login-page{
        min-height:100svh;

        align-items:flex-start;
        justify-content:center;

        padding:42px 18px 24px;
    }

    .login-card{
        width:100%;
        max-width:420px;

        padding:34px 32px 32px;
        border-radius:18px;
    }

    .login-logo{
        height:54px;
        margin-bottom:24px;
    }

    .login-logo img{
        width:154px;
        max-height:54px;
    }

    .login-header h1{
        font-size:22px;
    }

}