/* Telas de entrada: senha, código de acesso e definição de senha.
   Uma coluna, campo grande, botão largo. Login é a tela onde a pessoa
   desiste — não é lugar para invenção de layout. */

.autenticacao {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100dvh;
    padding-block: var(--e-5);
}

.envolucro--estreito { max-width: 420px; }

.autenticacao__topo { display: flex; flex-direction: column; gap: var(--e-1); }

.autenticacao__marca {
    font-size: var(--txt-sm);
    font-weight: 600;
    color: var(--texto-suave);
}

.autenticacao__ajuda { margin-top: var(--e-4); }

/* Separador "ou" entre os dois caminhos de entrada. */
.autenticacao__ou {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    color: var(--texto-apagado);
    font-size: var(--txt-sm);
}

.autenticacao__ou::before,
.autenticacao__ou::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--borda);
}

/* --- Senha com botão de revelar ----------------------------------------
   O botão fica dentro do campo, e o padding à direita reserva o espaço dele:
   sem isso o texto digitado passa por baixo. */

.campo-senha { position: relative; }

.campo-senha .campo__entrada { padding-right: 4rem; }

.campo-senha__olho {
    position: absolute;
    top: 50%;
    right: var(--e-2);
    transform: translateY(-50%);
    min-height: 32px;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    background: var(--superficie-2);
    color: var(--texto-suave);
    font: inherit;
    font-size: var(--txt-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.campo-senha__olho:hover { background: var(--superficie-3); color: var(--texto); }
.campo-senha__olho[aria-pressed="true"] { color: var(--acento); border-color: var(--acento-borda); }


/* --- Captcha ------------------------------------------------------------
   O widget do Turnstile tem tamanho próprio (300×65 no padrão). Reservamos a
   altura para a página não pular quando ele terminar de carregar. */

.captcha { min-height: 68px; }

/* O widget escreve display no próprio contêiner, então some com o pai:
   o [hidden] global do base.css já resolve o resto. */
.captcha--fora { display: none !important; }

/* --- Força da senha ----------------------------------------------------- */

.forca { margin-top: var(--e-2); }

.forca__trilho {
    height: 4px;
    border-radius: var(--raio-full);
    background: var(--superficie-3);
    overflow: hidden;
}

.forca__nivel {
    display: block;
    height: 100%;
    width: 0;
    border-radius: var(--raio-full);
    background: var(--alerta);
    transition: width 0.2s ease, background-color 0.2s ease;
}

.forca[data-nivel="0"] .forca__nivel { width: 8%;   background: var(--alerta); }
.forca[data-nivel="1"] .forca__nivel { width: 25%;  background: var(--alerta); }
.forca[data-nivel="2"] .forca__nivel { width: 50%;  background: var(--aviso); }
.forca[data-nivel="3"] .forca__nivel { width: 75%;  background: var(--info); }
.forca[data-nivel="4"] .forca__nivel { width: 100%; background: var(--acento); }

.forca__rotulo {
    margin-top: var(--e-1);
    font-size: var(--txt-xs);
    color: var(--texto-suave);
}

/* --- Requisitos da senha ------------------------------------------------
   Marcados enquanto digita, para a pessoa acertar de primeira em vez de
   descobrir a regra por erro depois de enviar. */

.requisitos {
    list-style: none;
    margin-top: var(--e-3);
    display: flex;
    flex-direction: column;
    gap: var(--e-1);
    font-size: var(--txt-xs);
    color: var(--texto-suave);
}

.requisitos li { display: flex; align-items: baseline; gap: var(--e-2); }

.requisitos li::before {
    content: "○";
    color: var(--texto-apagado);
    font-size: var(--txt-xs);
}

.requisitos li.ok { color: var(--acento); }
.requisitos li.ok::before { content: "●"; color: var(--acento); }

.lista-erros {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--e-1);
}

.lista-erros li { display: flex; align-items: baseline; gap: var(--e-2); }
.lista-erros li::before { content: "—"; color: var(--alerta); }

/* Contagem regressiva do reenvio. */
.botao[data-reenviar][disabled] { opacity: 0.55; }