/*
 * Telas de acesso (criar conta, login, código, criar/redefinir senha) — card #1935.
 *
 * O body destas páginas era `flex items-center justify-center min-h-screen`: com o cartão mais
 * alto que a tela, a centralização por flexbox empurrava metade do excesso para CIMA, onde não
 * há rolagem (o "Voltar" e o logo sumiam), e `min-h-screen` (100vh) não desconta as barras do
 * navegador interno do celular. Aqui o body alinha em cima e o cartão centraliza com
 * `margin: auto`, que só centraliza quando sobra espaço — nunca corta.
 *
 * Abaixo de 480 px de largura, ou com menos de 760 px de altura, o cartão fica compacto (letras,
 * espaços e ajudas menores) para o botão caber sem rolar num celular comum (390x844). O
 * computador (1366x768) não cai em nenhuma das duas regras e fica igual.
 *
 * Uso: `<body class="auth-tela ...">` e `class="auth-cartao ..."` no cartão.
 */
body.auth-tela {
    align-items: flex-start;
    min-height: 100vh;
    min-height: 100dvh;
}
.auth-cartao {
    margin-top: auto;
    margin-bottom: auto;
}

@media (max-width: 480px), (max-height: 760px) {
    body.auth-tela { padding: 0.75rem; }
    .auth-cartao { padding: 1.25rem 1.25rem 1rem; }
    .auth-cartao .auth-cabecalho { margin-bottom: 0.75rem; }
    .auth-cartao .auth-slogan { margin-bottom: 0.625rem; }
    .auth-cartao .auth-slogan p { font-size: 0.9375rem; line-height: 1.3; }
    .auth-cartao .auth-titulo { font-size: 1.125rem; line-height: 1.4; margin-bottom: 0.25rem; }
    .auth-cartao .auth-subtitulo {
        font-size: 0.8125rem;
        line-height: 1.35;
        margin-bottom: 0.75rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .auth-cartao .auth-separador { margin-top: 0.75rem; margin-bottom: 0.75rem; }
    .auth-cartao .auth-campos.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.625rem; }
    .auth-cartao .auth-campos label { margin-bottom: 0.125rem; }
    .auth-cartao .auth-ajuda-rotulo { font-size: 0.75rem; }
    .auth-cartao .auth-ajuda { font-size: 0.6875rem; line-height: 1.3; margin-top: 0.125rem; }
    .auth-cartao .auth-termos { margin-top: 0.25rem; }
    .auth-cartao .auth-termos-links {
        flex-wrap: wrap; /* tailwind-acesso.css não gera .flex-wrap */
        white-space: nowrap;
        column-gap: 16px !important;
        row-gap: 0 !important;
        margin-top: 0 !important;
        font-size: 0.8125rem;
    }
    .auth-cartao .auth-mensagem { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.35; }
    .auth-cartao .auth-acao { margin-top: 0.75rem; }
    .auth-cartao .auth-rodape { margin-top: 0.75rem; }
}