/* ----- Telas de acesso (Acesso/Default, Acesso/esqueceu-senha, Acesso/verificacao-dois-fatores e nova-senha): prefixo al- -----
   Tela dividida: à esquerda o painel da marca; à direita o formulário, centralizado na sua metade. */

.al-tela {
    --al-cor-texto: #1d2b3a;
    --al-cor-texto-suave: #5f6f7f;
    --al-cor-borda: #d7e0e6;
    --al-cor-campo: #f3f6fb;
    --al-cor-destaque: #2fd3b0;
    --al-cor-link: #1a73e8;
    --al-cor-marca-clara: #22c99c;
    --al-cor-marca: #0f8f7a;
    --al-cor-marca-escura: #0a5452;
    /* ocupa a janela inteira, fora do container do master (Empty.Master) */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-y: auto;
    color: var(--al-cor-texto);
    background-color: #f6f9fb;
}

/* ---------- painel da marca (esquerda) ---------- */
.al-marca {
    position: relative;
    flex: 0 0 46%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(140deg, var(--al-cor-marca-clara) 0%, var(--al-cor-marca) 45%, var(--al-cor-marca-escura) 100%);
}

/* traço de luz diagonal */
.al-marca::before {
    content: "";
    position: absolute;
    top: -10%;
    left: 20%;
    width: 2px;
    height: 70%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(120, 255, 220, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(45deg);
    transform-origin: top;
}

/* anel decorativo no canto inferior */
.al-marca::after {
    content: "";
    position: absolute;
    left: -8rem;
    bottom: -8rem;
    width: 26rem;
    height: 26rem;
    border: 3.5rem solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
}

/* moldura arredondada no alto do painel */
.al-marca__moldura {
    position: absolute;
    top: -14rem;
    left: -6rem;
    width: 30rem;
    height: 30rem;
    border: 2px solid rgba(120, 255, 220, 0.35);
    border-radius: 6rem;
    transform: rotate(45deg);
}

/* ícone de verificação grande e translúcido */
.al-marca__icone {
    position: absolute;
    left: 4%;
    bottom: 6%;
    font-size: 13rem;
    color: rgba(255, 255, 255, 0.08);
}

/* logo branco (a imagem colorida com filtro) */
.al-marca__logo {
    position: relative;
    z-index: 1;
    width: 22rem;
    max-width: 70%;
    filter: brightness(0) invert(1);
}

/* ---------- área do formulário (direita): formulário centralizado na vertical e na horizontal ---------- */
.al-conteudo {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    overflow: hidden;
}

/* círculos suaves nos cantos */
.al-conteudo::before,
.al-conteudo::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background-color: rgba(34, 201, 156, 0.07);
    pointer-events: none;
}

.al-conteudo::before {
    top: -9rem;
    right: -9rem;
    width: 20rem;
    height: 20rem;
}

.al-conteudo::after {
    bottom: -10rem;
    right: -6rem;
    width: 18rem;
    height: 18rem;
}

.al-cartao {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 28.5rem;
    padding: 2.25rem 2.5rem 2rem;
    background-color: #fff;
    border: 1px solid #e6efee;
    border-radius: 1rem;
    box-shadow: 0 20px 50px rgba(15, 143, 122, 0.12);
}

.al-cartao__titulo {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--al-cor-texto);
}

/* título centralizado (verificação em dois fatores) */
.al-cartao__titulo--centro {
    text-align: center;
}

.al-cartao__texto {
    font-size: 0.95rem;
    color: var(--al-cor-texto-suave);
    margin-bottom: 1.25rem;
}

.al-cartao .form-group {
    margin-bottom: 1.25rem;
}

.al-cartao .form-group label {
    width: 100%;
    font-size: 0.95rem;
    color: #4a5568;
    margin-bottom: 0.4rem;
}

.al-cartao .form-control {
    height: 3rem;
    border: 1px solid var(--al-cor-borda);
    border-radius: 0.5rem;
    background-color: var(--al-cor-campo);
    color: var(--al-cor-texto);
}

.al-cartao .form-control:focus {
    border-color: var(--al-cor-destaque);
    background-color: #effcf9;
    box-shadow: 0 0 0 0.2rem rgba(47, 211, 176, 0.2);
}

/* campo com ícone à esquerda. O ícone fica na metade da altura do campo (3rem) e não da caixa: a validação de
   senha (js/validacao-senha.js) insere a lista de requisitos logo abaixo do campo, dentro desta caixa */
.al-campo {
    position: relative;
}

.al-campo__icone {
    position: absolute;
    top: 1.5rem;
    left: 1rem;
    transform: translateY(-50%);
    color: #8a97a6;
    pointer-events: none;
}

.al-cartao .al-campo .form-control {
    padding-left: 2.6rem;
}

/* campo de senha com o botão de mostrar/ocultar à direita (js/acesso-login.js) */
.al-cartao .al-campo .al-campo__entrada--senha {
    padding-right: 2.8rem;
}

.al-campo__olho {
    position: absolute;
    top: 1.5rem;
    right: 0.4rem;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 0;
    border-radius: 0.4rem;
    background: none;
    color: #8a97a6;
    cursor: pointer;
}

.al-campo__olho:hover,
.al-campo__olho:focus {
    color: var(--al-cor-marca);
    background-color: rgba(47, 211, 176, 0.12);
    outline: none;
}

/* verificação do Cloudflare Turnstile */
.al-verificacao {
    display: flex;
    justify-content: center;
}

.al-botao.btn {
    padding: 0.8rem 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    border: 0;
    border-radius: 0.5rem;
    background: linear-gradient(180deg, #2fd3a6 0%, #149a87 100%);
    box-shadow: 0 8px 18px rgba(20, 154, 135, 0.28);
}

.al-botao.btn:hover,
.al-botao.btn:focus {
    color: #fff;
    background: linear-gradient(180deg, #27c299 0%, #10877a 100%);
}

.al-botao.btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(47, 211, 176, 0.4);
}

.al-cartao__rodape {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.95rem;
}

.al-cartao__rodape a {
    color: var(--al-cor-link);
}

.al-rodape {
    position: relative;
    z-index: 1;
    margin-top: 2rem;
    font-size: 0.85rem;
    color: var(--al-cor-texto-suave);
    text-align: center;
}

/* alerta que o script da tela exibe (style.display = "block") */
.al-oculto {
    display: none;
}

/* ---------- código da verificação em dois fatores: seis dígitos ---------- */
.al-codigo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.al-cartao .al-codigo__digito {
    width: 3rem;
    height: 3.25rem;
    margin: 0 0.25rem;
    padding: 0;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
}

/* ---------- telas menores: a marca vira uma faixa no topo ---------- */
@media (max-width: 991.98px) {
    .al-tela {
        flex-direction: column;
    }

    .al-marca {
        flex: 0 0 auto;
        min-height: 9rem;
        padding: 2rem 1rem;
    }

    .al-marca__icone {
        display: none;
    }

    .al-marca__logo {
        width: 14rem;
    }

    .al-conteudo {
        justify-content: flex-start;
        padding-top: 2.5rem;
    }
}

@media (max-width: 400px) {
    .al-cartao {
        padding: 1.75rem 1.25rem 1.5rem;
    }

    .al-cartao .al-codigo__digito {
        width: 2.4rem;
        margin: 0 0.15rem;
    }
}