/*
 * porta-admissao.css — porta PÚBLICA do link aberto de admissão (admissao-link-aberto, TASK-004).
 * Folha estática versionada e registrada no layout público, NUNCA regra de estilo escrita na view
 * (CLAUDE.md §7 / docs/css.md). Usa os tokens --crh-* de centralrh-tokens.css.
 *
 * Escopo pequeno de propósito: o CHROME da página (casca .tp-shell, header de vidro, marca, card .tp-card
 * e telas de estado .tp-state) é REUSADO de teste-perfil.css — mesma borda login-less, mesmo desenho.
 * Aqui vive só o formulário de identificação (.pa-*) e o honeypot.
 *
 * ATENÇÃO ao alterar: o layout público (components.layouts.app) carrega ANTES centralrh-auth.css, que traz
 * regras de ELEMENTO — `label { display:block; margin:.75rem 0 .25rem }` e `input,select,textarea
 * { width:100%; padding:.6rem .7rem; border:1.5px ... }`. Elas valem também para os campos daqui, então
 * TODO campo novo precisa zerar o que não quer herdar; foi assim que o consentimento quebrou (2026-08-22):
 * o `width:100%` da regra de elemento esticava a CAIXA do checkbox por toda a largura do card (o Chrome
 * desenha o quadradinho centralizado na caixa) e empurrava o texto do aceite para fora do card, que o
 * `overflow:hidden` do .tp-card recortava — dando o "buraco branco" de ~350px antes do botão.
 */

/* O `.tp-card` do Teste de Perfil não tem respiro próprio: lá o miolo vem em faixas (`.tp-band`), que
 * pagam o padding. Aqui o formulário mora direto no card, então o respiro é DAQUI — sem ele o título e os
 * campos ficavam colados na borda. */
.pa-card { width: 100%; max-width: 560px; margin: 24px auto 0; padding: 28px 32px 30px; }

@media (max-width: 560px) {
    .pa-card { padding: 22px 18px 24px; }
}

.pa-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--crh-text);
}

.pa-lead {
    margin: 0 0 20px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--crh-text-subtle);
}

.pa-alert {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--crh-warning-border, #f3d38a);
    background: var(--crh-warning-bg, #fdf6e3);
    color: var(--crh-warning-text, #7a5b12);
    font-size: 13.5px;
}

.pa-form { display: flex; flex-direction: column; gap: 16px; }

.pa-field { display: flex; flex-direction: column; gap: 6px; }

.pa-label {
    display: block;
    margin: 0;                       /* zera a margem da regra de elemento `label` (centralrh-auth.css) */
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--crh-text-subtle);
}

.pa-input {
    width: 100%;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--crh-border);
    background: var(--crh-surface);
    color: var(--crh-text);
    font-size: 15px;
    line-height: 1.3;
}

.pa-input:focus {
    outline: 2px solid var(--crh-primary);
    outline-offset: 1px;
    border-color: var(--crh-primary);
}

.pa-hint { font-size: 12.5px; color: var(--crh-text-subtle); }

.pa-error { font-size: 12.5px; font-weight: 600; color: var(--crh-danger, #b42318); }

.pa-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;                       /* idem: `label` global traz margem vertical */
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--crh-text);
    cursor: pointer;
}

/* O checkbox é o único campo da porta que NÃO quer a caixa cheia da regra de elemento — daí o reset
 * completo de tamanho/espaçamento/moldura. `accent-color` pinta o marcado no azul da marca sem trocar o
 * controle nativo por um desenho próprio (que custaria estado de foco e leitor de tela). */
.pa-consent input[type="checkbox"] {
    flex: none;
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    background: none;
    accent-color: var(--crh-primary);
    cursor: pointer;
}

.pa-consent > span { flex: 1; min-width: 0; }

.pa-submit {
    margin-top: 4px;
    padding: 12px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--crh-primary);
    color: var(--crh-on-primary, #fff);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.pa-submit:hover { filter: brightness(.96); }

/*
 * Honeypot: fora da tela, fora da ordem de tabulação e sem rótulo. Humano nunca preenche; robô que
 * varre campos, sim. `display: none` seria pior — parte dos robôs ignora campo oculto por display.
 */
.pa-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Campo do código de retomada: dígitos grandes e espaçados, como todo campo de OTP. */
.pa-input--codigo {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 10px;
    text-align: center;
}