/******************************************************************************************
*
* DOHH UI 3.0
*
* SISTEMA.............CONTROLE DE PRODUTIVIDADE FISCAL V3
* COMPONENTE..........TELA OFICIAL DE LOGIN
* ARQUIVO.............login.css
* STATUS..............EM HOMOLOGAÇÃO VISUAL
*
* OBJETIVO:
*
* Utilizar a arte institucional login_background.webp como plano de fundo
* oficial da tela de acesso, mantendo o formulário funcional em HTML.
*
******************************************************************************************/

/* ==========================================================
   VARIÁVEIS OFICIAIS
========================================================== */

:root{

    --login-azul-profundo:#052448;

    --login-azul-principal:#0F4C81;

    --login-azul-secundario:#1264B5;

    --login-azul-hover:#1B6CA8;

    --login-branco:#FFFFFF;

    --login-cinza-texto:#61748A;

    --login-cinza-borda:#D5DEE9;

    --login-cinza-claro:#EEF3F8;

    --login-vermelho:#B42318;

    --login-fonte:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    --login-raio-card:22px;

    --login-raio-campo:9px;

    --login-sombra-card:
        0 30px 80px rgba(2, 30, 65, .24),
        0 10px 30px rgba(2, 30, 65, .14);

}

/* ==========================================================
   RESET EXCLUSIVO DA TELA DE LOGIN
========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    width:100%;

    min-height:100%;

}

body{

    width:100%;

    min-height:100vh;

    overflow-x:hidden;

    font-family:var(--login-fonte);

    color:#17324D;

    background:#061E3D;

}

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

.login-pagina{

    width:100%;

    min-height:100vh;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    padding:
        clamp(20px, 4vh, 48px)
        clamp(28px, 7vw, 145px);

    overflow:hidden;

    background-image:

        url(
            "../branding/login_background.webp"
        );

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

}

/* CAMADA DE PROTEÇÃO VISUAL */

.login-pagina::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(
            90deg,
            rgba(1, 23, 51, .04) 0%,
            rgba(1, 23, 51, .01) 47%,
            rgba(255, 255, 255, .03) 100%
        );

}

/* ==========================================================
   ÁREA DE ACESSO
========================================================== */

.login-acesso{

    width:100%;

    max-width:600px;

    min-height:auto;

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    background:transparent;

}

/* ==========================================================
   CARD DO LOGIN
========================================================== */

.login-card{

    width:100%;

    max-width:560px;

    position:relative;

    padding:
        clamp(32px, 4.6vh, 50px)
        clamp(32px, 3.8vw, 54px)
        clamp(28px, 4vh, 42px);

    background:

        linear-gradient(
            145deg,
            rgba(255, 255, 255, .985),
            rgba(250, 253, 255, .955)
        );

    border:

        1px solid

        rgba(255, 255, 255, .72);

    border-radius:var(--login-raio-card);

    box-shadow:var(--login-sombra-card);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

}

/* REALCE SUPERIOR DISCRETO */

.login-card::before{

    content:"";

    position:absolute;

    top:0;

    left:28px;

    right:28px;

    height:2px;

    border-radius:2px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(21, 151, 229, .65),
            transparent
        );

}

/* ==========================================================
   CABEÇALHO DO CARD
========================================================== */

.login-cabecalho{

    margin-bottom:34px;

}

.login-cabecalho h1{

    margin-bottom:10px;

    color:#0A315F;

    font-size:32px;

    line-height:1.2;

    font-weight:750;

    letter-spacing:-.4px;

}

.login-cabecalho p{

    color:var(--login-cinza-texto);

    font-size:16px;

    line-height:1.5;

}

/* ==========================================================
   MENSAGEM DE ERRO
========================================================== */

.login-erro{

    margin-bottom:24px;

    padding:14px 16px;

    color:var(--login-vermelho);

    background:#FFF1EF;

    border:

        1px solid

        #F2C1BB;

    border-left:

        5px solid

        var(--login-vermelho);

    border-radius:9px;

    font-size:14px;

    font-weight:650;

    line-height:1.45;

}

/* ==========================================================
   GRUPOS DE CAMPOS
========================================================== */

.campo-grupo{

    margin-bottom:22px;

}

.campo-grupo label{

    display:block;

    margin-bottom:9px;

    color:#123B65;

    font-size:15px;

    font-weight:700;

}

.campo-controle{

    position:relative;

    width:100%;

}

/* ==========================================================
   ÍCONES DOS CAMPOS
========================================================== */

.campo-icone{

    position:absolute;

    z-index:2;

    left:17px;

    top:50%;

    width:22px;

    height:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#526C89;

    transform:translateY(-50%);

    pointer-events:none;

}

.campo-icone svg{

    width:100%;

    height:100%;

}

/* ==========================================================
   INPUTS
========================================================== */

.campo-grupo input[type="text"],
.campo-grupo input[type="password"]{

    width:100%;

    height:58px;

    padding:

        0

        54px

        0

        52px;

    color:#193550;

    background:rgba(255, 255, 255, .98);

    border:

        1px solid

        var(--login-cinza-borda);

    border-radius:var(--login-raio-campo);

    outline:none;

    font-family:var(--login-fonte);

    font-size:16px;

    transition:

        border-color .2s ease,

        box-shadow .2s ease,

        background-color .2s ease;

}

.campo-grupo input::placeholder{

    color:#8998AA;

}

.campo-grupo input:hover{

    border-color:#AEBFD1;

}

.campo-grupo input:focus{

    border-color:var(--login-azul-secundario);

    background:#FFFFFF;

    box-shadow:

        0 0 0 4px

        rgba(18, 100, 181, .12);

}

/* ==========================================================
   BOTÃO MOSTRAR SENHA
========================================================== */

.botao-senha{

    position:absolute;

    z-index:3;

    right:9px;

    top:50%;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    color:#526C89;

    background:transparent;

    border:none;

    border-radius:8px;

    transform:translateY(-50%);

    cursor:pointer;

    transition:

        color .2s ease,

        background .2s ease;

}

.botao-senha:hover{

    color:var(--login-azul-principal);

    background:#EAF2FA;

}

.botao-senha:focus-visible{

    outline:

        3px solid

        rgba(18, 100, 181, .20);

}

.botao-senha svg{

    width:21px;

    height:21px;

}

/* ==========================================================
   OPÇÕES DO LOGIN
========================================================== */

.login-opcoes{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin:

        5px

        0

        28px;

    font-size:14px;

}

.lembrar-acesso{

    display:inline-flex;

    align-items:center;

    gap:9px;

    color:#2B4E70;

    cursor:pointer;

    user-select:none;

}

.lembrar-acesso input{

    width:19px;

    height:19px;

    accent-color:var(--login-azul-secundario);

    cursor:pointer;

}

.esqueci-senha{

    color:#075FC4;

    font-weight:650;

    text-decoration:none;

    transition:color .2s ease;

}

.esqueci-senha:hover{

    color:#034A9B;

    text-decoration:underline;

}

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

.botao-entrar{

    width:100%;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:0 25px;

    color:var(--login-branco);

    background:

        linear-gradient(
            135deg,
            #1369BC,
            #0752A2
        );

    border:none;

    border-radius:9px;

    box-shadow:

        0 13px 28px

        rgba(7, 82, 162, .25);

    font-family:var(--login-fonte);

    font-size:18px;

    font-weight:750;

    letter-spacing:.1px;

    cursor:pointer;

    transition:

        transform .2s ease,

        box-shadow .2s ease,

        filter .2s ease;

}

.botao-entrar:hover{

    transform:translateY(-2px);

    filter:brightness(1.055);

    box-shadow:

        0 18px 35px

        rgba(7, 82, 162, .31);

}

.botao-entrar:active{

    transform:translateY(0);

}

.botao-entrar:focus-visible{

    outline:

        4px solid

        rgba(21, 151, 229, .25);

    outline-offset:3px;

}

.botao-entrar svg{

    width:23px;

    height:23px;

    flex-shrink:0;

}

/* ==========================================================
   RODAPÉ DO CARD
========================================================== */

.login-rodape{

    margin-top:40px;

    padding-top:24px;

    color:#6C7F93;

    text-align:center;

    border-top:

        1px solid

        #DEE6EF;

    font-size:13px;

    line-height:1.75;

}

/* ==========================================================
   RESOLUÇÕES GRANDES
========================================================== */

@media(min-width:1900px){

    .login-pagina{

        padding-right:9vw;

    }

    .login-acesso{

        max-width:650px;

    }

    .login-card{

        max-width:580px;

        padding:

            54px

            58px

            46px;

    }

}

/* ==========================================================
   NOTEBOOKS E TELAS INTERMEDIÁRIAS
========================================================== */

@media(max-width:1400px){

    .login-pagina{

        padding-right:5vw;

        background-position:center center;

    }

    .login-acesso{

        max-width:550px;

    }

    .login-card{

        max-width:520px;

        padding:

            44px

            46px

            38px;

    }

}

@media(max-width:920px){

    .login-pagina{

        justify-content:center;

        padding:32px 24px;

        background-position:35% center;

    }

    .login-acesso{

        max-width:560px;

    }

    .login-card{

        background:

            rgba(255, 255, 255, .97);

    }

}

/* ==========================================================
   DESKTOP COM ESCALA DO SISTEMA / VIEWPORT INTERMEDIÁRIA
========================================================== */

@media(min-width:921px) and (max-width:1150px){

    .login-pagina{

        justify-content:flex-end;

        padding-left:24px;

        padding-right:clamp(28px, 4vw, 52px);

        background-position:center center;

    }

    .login-acesso{

        max-width:500px;

    }

    .login-card{

        max-width:480px;

        padding-left:36px;

        padding-right:36px;

    }

}


/* ==========================================================
   TABLETS
========================================================== */

@media(max-width:760px){

    .login-pagina{

        min-height:100vh;

        align-items:center;

        justify-content:center;

        padding:

            28px

            18px;

        background-position:32% center;

    }

    .login-card{

        max-width:540px;

        padding:

            38px

            28px

            32px;

        border-radius:19px;

    }

    .login-cabecalho h1{

        font-size:28px;

    }

}

/* ==========================================================
   CELULARES
========================================================== */

@media(max-width:520px){

    .login-pagina{

        padding:

            18px

            10px;

        background-position:28% center;

    }

    .login-card{

        padding:

            31px

            20px

            28px;

        border-radius:17px;

    }

    .login-cabecalho{

        margin-bottom:27px;

    }

    .login-cabecalho h1{

        font-size:25px;

    }

    .login-cabecalho p{

        font-size:14px;

    }

    .campo-grupo input[type="text"],
    .campo-grupo input[type="password"]{

        height:55px;

        font-size:15px;

    }

    .login-opcoes{

        align-items:flex-start;

        flex-direction:column;

        gap:14px;

    }

    .botao-entrar{

        height:58px;

        font-size:16px;

    }

    .login-rodape{

        margin-top:31px;

        font-size:12px;

    }

}

/* ==========================================================
   TELAS COM ALTURA REDUZIDA
========================================================== */

@media(max-height:900px) and (min-width:761px){

    .login-pagina{

        padding-top:20px;

        padding-bottom:20px;

    }

    .login-card{

        padding-top:30px;

        padding-bottom:26px;

    }

    .login-cabecalho{

        margin-bottom:18px;

    }

    .campo-grupo{

        margin-bottom:14px;

    }

    .campo-grupo input[type="text"],
    .campo-grupo input[type="password"]{

        height:50px;

    }

    .login-opcoes{

        margin-bottom:20px;

    }

    .botao-entrar{

        height:52px;

    }

    .login-rodape{

        margin-top:20px;

        padding-top:15px;

        line-height:1.55;

    }

}

/* ==========================================================
   ACESSIBILIDADE — REDUÇÃO DE MOVIMENTO
========================================================== */

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

    *{

        scroll-behavior:auto !important;

    }

    .campo-grupo input,
    .botao-senha,
    .botao-entrar,
    .esqueci-senha{

        transition:none;

    }

    .botao-entrar:hover{

        transform:none;

    }

}