/* ==========================================================================
   Telas de entrada (login, cadastro, senha, completar perfil, erros)
   No computador: lado escuro com a marca + formulário.
   No celular: a marca vira uma faixa no topo.
   ========================================================================== */

.auth-tela {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.auth-lado {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 16px;
    background: var(--cor-escura);
    color: #cbd5e1;
}

.auth-slogan {
    margin: 0;
    font-size: 0.85rem;
}

.auth-conteudo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
}

.auth-topo {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 720px;
    margin-bottom: 16px;
    color: var(--cor-texto);
}

.auth-caixa {
    width: 100%;
    max-width: 420px;
    padding: 24px 20px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-branco);
}

.auth-caixa-larga {
    max-width: 720px;
}

.auth-titulo {
    margin: 0 0 4px;
    font-size: 1.25rem;
    color: var(--cor-escura);
}

.auth-subtitulo {
    margin: 0 0 22px;
    color: var(--cor-texto-suave);
}

.auth-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
    font-size: 0.88rem;
    text-align: center;
}

.auth-divisor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    font-size: 0.8rem;
    color: var(--cor-texto-suave);
}

.auth-divisor::before,
.auth-divisor::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cor-borda);
}

.auth-rodape {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 22px 0 0;
    font-size: 0.9rem;
    text-align: center;
    color: var(--cor-texto-suave);
}

.pilha-botoes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 960px) {
    .auth-tela {
        flex-direction: row;
    }

    .auth-lado {
        justify-content: center;
        width: 38%;
        max-width: 480px;
        padding: 48px;
    }

    .auth-lado .marca-texto {
        font-size: 2.2rem;
    }

    .auth-slogan {
        font-size: 1rem;
    }

    .auth-conteudo {
        justify-content: center;
        padding: 32px;
    }

    .auth-caixa {
        padding: 36px 34px;
    }
}