:root {
    --preto: #050505;
    --preto-card: #0d0d0d;
    --preto-campo: #121212;
    --dourado: #d6a62b;
    --dourado-claro: #f0c453;
    --dourado-escuro: #8f6513;
    --branco: #f4f4f4;
    --cinza: #a9a9a9;
    --cinza-escuro: #333333;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at top,
            rgba(214, 166, 43, 0.08),
            transparent 32%
        ),
        radial-gradient(
            circle at bottom,
            rgba(214, 166, 43, 0.06),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #020202,
            #0b0b0b 55%,
            #020202
        );

    color: var(--branco);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

.pagina-login {
    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px 18px;
}

.card-login {
    width: 100%;

    max-width: 620px;

    overflow: hidden;

    border:
        1px solid
        rgba(214, 166, 43, 0.85);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 15, 15, 0.98),
            rgba(5, 5, 5, 0.98)
        );

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, 0.8),

        0 0 30px
        rgba(214, 166, 43, 0.08);
}

.cabecalho-login {
    padding:
        42px
        54px
        10px;

    text-align: center;
}

.logo-principal {
    width: 145px;

    height: 145px;

    display: block;

    margin:
        0
        auto
        20px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 20px
            rgba(214, 166, 43, 0.25)
        );
}

.cabecalho-login h1 {
    color: var(--branco);

    font-size: 43px;

    font-weight: 800;

    letter-spacing: 1px;
}

.cabecalho-login h1 span {
    color: var(--dourado-claro);
}

.linha-dourada {
    width: 100%;

    max-width: 450px;

    height: 1px;

    margin:
        18px
        auto
        22px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--dourado),
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(214, 166, 43, 0.8);
}

.subtitulo {
    color: var(--dourado-claro);

    font-size: 20px;

    letter-spacing: 3px;
}

.empresa-cliente {
    margin-top: 17px;

    color: var(--branco);

    font-size: 19px;

    font-weight: 700;
}

.formulario-login {
    padding:
        30px
        54px
        38px;
}

.grupo-campo {
    margin-bottom: 23px;
}

.grupo-campo label {
    display: block;

    margin-bottom: 9px;

    color: var(--dourado-claro);

    font-size: 15px;

    font-weight: bold;
}

.grupo-campo input {
    width: 100%;

    height: 58px;

    padding:
        0
        18px;

    border:
        1px solid
        rgba(214, 166, 43, 0.75);

    border-radius: 13px;

    outline: none;

    background:
        var(--preto-campo);

    color: var(--branco);

    font-size: 16px;

    transition: 0.2s;
}

.grupo-campo input::placeholder {
    color: #6f6f6f;
}

.grupo-campo input:focus {
    border-color:
        var(--dourado-claro);

    box-shadow:
        0 0 0 3px
        rgba(214, 166, 43, 0.12);
}

.campo-senha {
    position: relative;
}

.campo-senha input {
    padding-right: 62px;
}

.botao-mostrar-senha {
    position: absolute;

    top: 50%;

    right: 15px;

    transform:
        translateY(-50%);

    width: 42px;

    height: 42px;

    border: none;

    background: transparent;

    color: var(--dourado-claro);

    font-size: 20px;

    cursor: pointer;
}

.botao-entrar {
    width: 100%;

    height: 60px;

    margin-top: 7px;

    border: none;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #f4c85c,
            #c68c19
        );

    color: #080808;

    font-size: 18px;

    font-weight: 900;

    letter-spacing: 1px;

    cursor: pointer;

    box-shadow:
        0 10px 25px
        rgba(214, 166, 43, 0.18);

    transition: 0.2s;
}

.botao-entrar:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.08);
}

.separador {
    display: flex;

    align-items: center;

    gap: 14px;

    margin:
        28px
        0
        20px;
}

.separador span {
    flex: 1;

    height: 1px;

    background:
        var(--cinza-escuro);
}

.separador p {
    color: #777777;

    font-size: 14px;
}

.esqueci-senha {
    display: block;

    width: max-content;

    margin: 0 auto;

    color: var(--dourado-claro);

    font-size: 15px;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(214, 166, 43, 0.7);

    padding-bottom: 3px;
}

.esqueci-senha:hover {
    color: #ffe190;
}

.rodape-login {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding:
        28px
        30px;

    border-top:
        1px solid
        rgba(214, 166, 43, 0.5);

    background:
        rgba(0, 0, 0, 0.25);
}

.logo-rodape {
    width: 38px;

    height: 38px;

    object-fit: contain;
}

.rodape-login p {
    color: var(--branco);

    font-size: 14px;
}

.rodape-login strong {
    color: var(--dourado-claro);

    letter-spacing: 1px;
}

@media (max-width: 680px) {
    .pagina-login {
        padding: 12px;
    }

    .card-login {
        border-radius: 18px;
    }

    .cabecalho-login {
        padding:
            30px
            22px
            8px;
    }

    .logo-principal {
        width: 112px;

        height: 112px;
    }

    .cabecalho-login h1 {
        font-size: 31px;
    }

    .subtitulo {
        font-size: 15px;

        letter-spacing: 1px;
    }

    .empresa-cliente {
        font-size: 16px;
    }

    .formulario-login {
        padding:
            25px
            22px
            32px;
    }

    .rodape-login {
        padding:
            22px
            18px;

        flex-direction: column;

        text-align: center;
    }
}

/* V2 — LOGIN COMPACTO E PRIMEIRO ACESSO */

.card-compacto {
    max-width: 560px;
}

.card-compacto .cabecalho-login {
    padding: 20px 42px 4px;
}

.card-compacto .logo-principal {
    width: 165px;
    height: 120px;
    margin-bottom: 5px;
}

.card-compacto .cabecalho-login h1 {
    font-size: 34px;
}

.card-compacto .linha-dourada {
    margin: 8px auto 10px;
}

.card-compacto .subtitulo {
    font-size: 16px;
    letter-spacing: 1.5px;
}

.card-compacto .empresa-cliente {
    margin-top: 8px;
    font-size: 16px;
}

.card-compacto .formulario-login {
    padding: 18px 42px 20px;
}

.card-compacto .grupo-campo {
    margin-bottom: 14px;
}

.card-compacto .grupo-campo input {
    height: 47px;
}

.card-compacto .botao-entrar {
    height: 49px;
    margin-top: 12px;
}

.opcoes-login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: -3px;
}

.lembrar {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--branco);
    font-size: 13px;
    cursor: pointer;
}

.lembrar input {
    width: 18px;
    height: 18px;
    accent-color: var(--dourado);
}

.link-senha {
    color: var(--dourado-claro);
    font-size: 13px;
    text-decoration: none;
}

.botao-primeiro-acesso {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 47px;
    border: 1px solid var(--dourado);
    border-radius: 11px;
    color: var(--dourado-claro);
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.2s;
}

.botao-primeiro-acesso:hover {
    background: rgba(214, 166, 43, 0.1);
}

.aviso-primeiro-acesso {
    margin-top: 12px;
    color: var(--cinza);
    font-size: 12px;
    text-align: center;
}

.card-compacto .separador {
    margin: 16px 0;
}

.card-compacto .rodape-login {
    padding: 16px 20px;
}

.area-mensagens {
    padding: 0 42px;
}

.mensagem {
    margin-top: 10px;
    padding: 11px 14px;
    border-radius: 9px;
    font-size: 13px;
    text-align: center;
}

.mensagem.erro {
    border: 1px solid #c94d4d;
    background: rgba(201, 77, 77, 0.12);
    color: #ff9b9b;
}

.mensagem.sucesso {
    border: 1px solid #4aa468;
    background: rgba(74, 164, 104, 0.12);
    color: #91e5ad;
}

.mensagem.aviso {
    border: 1px solid var(--dourado);
    background: rgba(214, 166, 43, 0.1);
    color: var(--dourado-claro);
}

.card-primeiro-acesso {
    max-width: 720px;
}

.cabecalho-primeiro-acesso {
    padding: 22px 45px 10px;
    text-align: center;
}

.logo-primeiro-acesso {
    width: 125px;
    height: 80px;
    object-fit: contain;
}

.cabecalho-primeiro-acesso h1 {
    margin-top: 4px;
    color: var(--dourado-claro);
    font-size: 27px;
}

.cabecalho-primeiro-acesso p {
    margin-top: 7px;
    color: var(--cinza);
    font-size: 13px;
}

.formulario-primeiro-acesso {
    padding: 16px 45px 24px;
}

.formulario-primeiro-acesso .grupo-campo {
    margin-bottom: 13px;
}

.formulario-primeiro-acesso .grupo-campo input {
    height: 46px;
}

.duas-colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.voltar-login {
    display: block;
    width: max-content;
    margin: 15px auto 0;
    color: var(--dourado-claro);
    font-size: 13px;
    text-decoration: none;
}

@media (max-height: 780px) and (min-width: 681px) {
    .pagina-login {
        padding: 10px;
    }

    .card-compacto .logo-principal {
        width: 150px;
        height: 95px;
    }

    .card-compacto .cabecalho-login {
        padding-top: 12px;
    }

    .card-compacto .formulario-login {
        padding-top: 12px;
        padding-bottom: 14px;
    }
}

@media (max-width: 680px) {
    .duas-colunas {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .card-compacto .cabecalho-login {
        padding: 20px 20px 4px;
    }

    .card-compacto .formulario-login,
    .formulario-primeiro-acesso {
        padding-left: 22px;
        padding-right: 22px;
    }

    .area-mensagens {
        padding-left: 22px;
        padding-right: 22px;
    }

    .opcoes-login {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}