/*
 * ==========================================================================
 * ZerbAdmin - Autenticação
 * ==========================================================================
 *
 * Identidade:
 *
 * - Zerbmaster como marca institucional;
 * - azul como cor predominante;
 * - amarelo utilizado apenas como destaque;
 * - branco/cinza para clareza e legibilidade;
 * - aparência corporativa e limpa.
 * ==========================================================================
 */

:root {

    /*
     * ----------------------------------------------------------------------
     * Institucional
     * ----------------------------------------------------------------------
     */

    --za-azul-950: #071c2d;
    --za-azul-900: #0b2942;
    --za-azul-850: #0e3452;
    --za-azul-800: #123e61;
    --za-azul-700: #17547e;
    --za-azul-600: #2170a3;

    --za-amarelo: #f2c230;
    --za-amarelo-claro: #fff4c7;

    /*
     * ----------------------------------------------------------------------
     * Neutros
     * ----------------------------------------------------------------------
     */

    --za-branco: #ffffff;

    --za-cinza-25: #fbfcfd;
    --za-cinza-50: #f6f8fa;
    --za-cinza-100: #eef2f5;
    --za-cinza-200: #dde4e9;
    --za-cinza-300: #c8d1d8;
    --za-cinza-400: #98a4ae;
    --za-cinza-500: #74808b;
    --za-cinza-600: #596570;
    --za-cinza-700: #404b55;
    --za-cinza-800: #28333c;
    --za-cinza-900: #17212a;

    /*
     * ----------------------------------------------------------------------
     * Estados
     * ----------------------------------------------------------------------
     */

    --za-vermelho-fundo: #fff3f3;
    --za-vermelho-borda: #f2c7c7;
    --za-vermelho-texto: #9c3030;

    --za-aviso-fundo: #fff9e5;
    --za-aviso-borda: #ead88a;
    --za-aviso-texto: #715d13;

    --za-verde-fundo: #eef8f1;
    --za-verde-borda: #b9ddc3;
    --za-verde-texto: #27623a;

    --za-sombra:
            0 24px 70px rgba(10, 37, 59, 0.10);
}


/*
 * ==========================================================================
 * Base
 * ==========================================================================
 */

* {
    box-sizing: border-box;
}

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

body.za-auth {

    min-height: 100vh;

    font-family:
            Inter,
            "Segoe UI",
            Arial,
            sans-serif;

    color: var(--za-cinza-900);

    background:
            var(--za-cinza-50);

    -webkit-font-smoothing: antialiased;
}

button,
input {
    font: inherit;
}


/*
 * ==========================================================================
 * Estrutura
 * ==========================================================================
 */

.za-auth__estrutura {

    display: grid;

    grid-template-columns:
        minmax(430px, 44%)
        minmax(520px, 56%);

    min-height: 100vh;
}


/*
 * ==========================================================================
 * Painel institucional
 * ==========================================================================
 */

.za-auth__institucional {

    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 100vh;

    padding:
            48px
            clamp(40px, 5vw, 76px);

    overflow: hidden;

    color: var(--za-branco);

    background:
            linear-gradient(
                    145deg,
                    var(--za-azul-950) 0%,
                    var(--za-azul-900) 48%,
                    var(--za-azul-800) 100%
            );
}


/*
 * Marca
 */

.za-auth__marca {

    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 18px;
}

.za-auth__logo-box {

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

    width: 184px;

    padding:
            13px
            17px;

    border-radius: 12px;

    background:
            rgba(255, 255, 255, 0.97);

    box-shadow:
            0 8px 28px
            rgba(0, 0, 0, 0.12);
}

.za-auth__logo {

    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}

.za-auth__produto {

    padding-left: 17px;

    border-left:
            1px solid
            rgba(255, 255, 255, 0.22);
}

.za-auth__produto span,
.za-auth__produto small {

    display: block;
}

.za-auth__produto span {

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

    letter-spacing: -0.02em;
}

.za-auth__produto small {

    margin-top: 4px;

    color:
            rgba(255, 255, 255, 0.58);

    font-size: 11px;
}


/*
 * Conteúdo institucional
 */

.za-auth__institucional-conteudo {

    position: relative;
    z-index: 2;

    width: min(100%, 590px);

    margin: auto 0;
}

.za-auth__etiqueta {

    display: inline-flex;

    align-items: center;

    min-height: 29px;

    padding:
            0
            12px;

    margin-bottom: 22px;

    border:
            1px solid
            rgba(242, 194, 48, 0.38);

    border-radius: 999px;

    color: var(--za-amarelo);

    background:
            rgba(242, 194, 48, 0.08);

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

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.za-auth__institucional-conteudo h1 {

    margin:
            0
            0
            22px;

    max-width: 580px;

    font-size:
            clamp(35px, 3.6vw, 53px);

    font-weight: 600;

    line-height: 1.07;

    letter-spacing: -0.045em;
}

.za-auth__institucional-conteudo p {

    margin: 0;

    max-width: 510px;

    color:
            rgba(255, 255, 255, 0.66);

    font-size: 16px;

    line-height: 1.72;
}


/*
 * Rodapé institucional
 */

.za-auth__institucional-rodape {

    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    color:
            rgba(255, 255, 255, 0.48);

    font-size: 11px;
}

.za-auth__seguranca {

    display: flex;
    align-items: center;
    gap: 8px;

    color:
            rgba(255, 255, 255, 0.62);
}

.za-auth__seguranca-icone {

    display: grid;
    place-items: center;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    color: var(--za-azul-950);

    background: var(--za-amarelo);

    font-size: 11px;
    font-weight: 800;
}


/*
 * Decoração discreta
 */

.za-auth__decoracao {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.za-auth__decoracao--1 {

    width: 450px;
    height: 450px;

    right: -230px;
    bottom: -170px;

    border:
            1px solid
            rgba(255, 255, 255, 0.06);
}

.za-auth__decoracao--2 {

    width: 270px;
    height: 270px;

    right: -130px;
    bottom: -80px;

    border:
            1px solid
            rgba(242, 194, 48, 0.09);
}


/*
 * ==========================================================================
 * Área do formulário
 * ==========================================================================
 */

.za-auth__area-login {

    position: relative;

    display: flex;
    flex-direction: column;

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

    min-height: 100vh;

    padding:
            50px
            32px;

    background:
            var(--za-cinza-25);
}

.za-auth__card {

    width:
            min(
                    100%,
                    440px
            );

    padding:
            42px
            42px
            38px;

    border:
            1px solid
            var(--za-cinza-100);

    border-radius: 18px;

    background:
            var(--za-branco);

    box-shadow:
            var(--za-sombra);
}


/*
 * Cabeçalho do formulário
 */

.za-auth__cabecalho-formulario {

    margin-bottom: 30px;
}

.za-auth__sobre-titulo {

    display: block;

    margin-bottom: 11px;

    color:
            var(--za-azul-700);

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

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.za-auth__cabecalho-formulario h2 {

    margin: 0;

    color:
            var(--za-azul-950);

    font-size: 29px;
    font-weight: 650;

    line-height: 1.18;

    letter-spacing: -0.035em;
}

.za-auth__cabecalho-formulario p {

    margin:
            10px
            0
            0;

    color:
            var(--za-cinza-600);

    font-size: 14px;

    line-height: 1.6;
}


/*
 * ==========================================================================
 * Formulário
 * ==========================================================================
 */

.za-formulario {

    display: grid;

    gap: 19px;
}

.za-campo {

    display: grid;

    gap: 8px;
}

.za-campo label {

    color:
            var(--za-cinza-800);

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

.za-campo input {

    width: 100%;

    min-height: 50px;

    padding:
            0
            14px;

    border:
            1px solid
            var(--za-cinza-200);

    border-radius: 9px;

    outline: 0;

    color:
            var(--za-cinza-900);

    background:
            var(--za-branco);

    transition:
            border-color 140ms ease,
            box-shadow 140ms ease,
            background-color 140ms ease;
}

.za-campo input:hover {

    border-color:
            var(--za-cinza-300);
}

.za-campo input:focus {

    border-color:
            var(--za-azul-600);

    box-shadow:
            0 0 0 3px
            rgba(33, 112, 163, 0.11);
}

.za-campo input::placeholder {

    color:
            var(--za-cinza-400);
}


/*
 * ==========================================================================
 * Botões
 * ==========================================================================
 */

.za-botao {

    min-height: 51px;

    border: 0;

    border-radius: 9px;

    cursor: pointer;

    font-weight: 650;

    transition:
            background-color 140ms ease,
            box-shadow 140ms ease,
            transform 100ms ease;
}

.za-botao--principal {

    margin-top: 3px;

    color: var(--za-branco);

    background:
            var(--za-azul-800);

    box-shadow:
            0 7px 18px
            rgba(18, 62, 97, 0.17);
}

.za-botao--principal:hover {

    background:
            var(--za-azul-700);

    box-shadow:
            0 8px 22px
            rgba(18, 62, 97, 0.22);
}

.za-botao--principal:active {

    transform:
            translateY(1px);
}


/*
 * ==========================================================================
 * Alertas
 * ==========================================================================
 */

.za-alerta {

    margin-bottom: 20px;

    padding:
            12px
            14px;

    border:
            1px solid;

    border-radius: 8px;

    font-size: 13px;

    line-height: 1.5;
}

.za-alerta--erro {

    border-color:
            var(--za-vermelho-borda);

    color:
            var(--za-vermelho-texto);

    background:
            var(--za-vermelho-fundo);
}

.za-alerta--aviso {

    border-color:
            var(--za-aviso-borda);

    color:
            var(--za-aviso-texto);

    background:
            var(--za-aviso-fundo);
}

.za-alerta--sucesso {

    border-color:
            var(--za-verde-borda);

    color:
            var(--za-verde-texto);

    background:
            var(--za-verde-fundo);
}


/*
 * ==========================================================================
 * Auxiliares
 * ==========================================================================
 */

.za-auth__ajuda {

    margin:
            23px
            0
            0;

    color:
            var(--za-cinza-500);

    font-size: 12px;

    text-align: center;
}


/*
 * Logotipo para telas menores.
 */

.za-auth__mobile-marca {

    display: none;
}

.za-auth__rodape-mobile {

    display: none;
}


/*
 * ==========================================================================
 * Empresas
 * ==========================================================================
 */

.za-empresas {

    display: grid;

    gap: 11px;
}

.za-empresa {

    margin: 0;
}

.za-empresa__botao {

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 13px;

    border:
            1px solid
            var(--za-cinza-200);

    border-radius: 10px;

    cursor: pointer;

    color:
            var(--za-cinza-900);

    background:
            var(--za-branco);

    text-align: left;

    transition:
            border-color 130ms ease,
            box-shadow 130ms ease,
            transform 130ms ease;
}

.za-empresa__botao:hover {

    border-color:
            var(--za-azul-600);

    box-shadow:
            0 5px 18px
            rgba(7, 28, 45, 0.07);

    transform:
            translateY(-1px);
}

.za-empresa__icone {

    display: grid;
    place-items: center;

    flex:
            0
            0
            auto;

    width: 42px;
    height: 42px;

    border-radius: 9px;

    color:
            var(--za-azul-800);

    background:
            var(--za-cinza-100);

    font-weight: 700;
}

.za-empresa__dados {

    display: grid;

    gap: 3px;

    min-width: 0;

    flex: 1;
}

.za-empresa__dados strong {

    overflow: hidden;

    font-size: 14px;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.za-empresa__dados small {

    overflow: hidden;

    color:
            var(--za-cinza-500);

    font-size: 11px;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.za-empresa__seta {

    color:
            var(--za-azul-600);

    font-size: 19px;
}


/*
 * ==========================================================================
 * Responsividade
 * ==========================================================================
 */

@media (max-width: 960px) {

    .za-auth__estrutura {

        display: block;
    }

    .za-auth__institucional {

        display: none;
    }

    .za-auth__area-login {

        min-height: 100vh;

        justify-content: center;

        padding:
                36px
                22px;
    }

    .za-auth__mobile-marca {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 14px;

        width:
                min(
                        100%,
                        440px
                );

        margin-bottom: 25px;
    }

    .za-auth__mobile-marca img {

        display: block;

        width: 145px;

        height: auto;
    }

    .za-auth__mobile-marca span {

        padding-left: 14px;

        border-left:
                1px solid
                var(--za-cinza-200);

        color:
                var(--za-azul-900);

        font-size: 15px;
        font-weight: 700;
    }

    .za-auth__rodape-mobile {

        display: block;

        margin-top: 25px;

        color:
                var(--za-cinza-400);

        font-size: 10px;

        text-align: center;
    }
}


@media (max-width: 520px) {

    .za-auth__area-login {

        justify-content: flex-start;

        padding:
                27px
                17px;
    }

    .za-auth__mobile-marca {

        margin-bottom: 23px;
    }

    .za-auth__mobile-marca img {

        width: 125px;
    }

    .za-auth__card {

        padding:
                31px
                24px
                28px;

        border-radius: 14px;
    }

    .za-auth__cabecalho-formulario h2 {

        font-size: 26px;
    }
}

/*
 * Navegação auxiliar das telas de autenticação.
 */

.za-auth__acoes-formulario {
    margin-top: -7px;

    text-align: right;
}

.za-auth__acoes-formulario a,
.za-auth__navegacao a {
    color: var(--za-azul-700);

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}

.za-auth__acoes-formulario a:hover,
.za-auth__navegacao a:hover {
    text-decoration: underline;
}

.za-auth__navegacao {
    margin-top: 24px;

    text-align: center;
}

/*
 * ==========================================================================
 * MFA
 * ==========================================================================
 */

.za-campo-codigo-mfa {
    text-align: center;

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

    letter-spacing: 0.28em;
}

.za-mfa-reenviar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    margin-top: 22px;

    color: #7a858e;

    font-size: 11px;
}

.za-mfa-reenviar button {
    padding: 0;

    border: 0;

    cursor: pointer;

    background: transparent;
    color: #3f5e83;

    font: inherit;
    font-weight: 650;
}

.za-mfa-reenviar button:hover {
    text-decoration: underline;
}