/*
 * teste-perfil.css — página PÚBLICA do Teste de Perfil (teste-perfil). Folha estática versionada
 * (registrada no layout público), NUNCA CSS inline em view (CLAUDE.md §7 / docs/css.md). Usa os tokens
 * --crh-* de centralrh-tokens.css. Estrutura: header de vidro (.tp-topbar), indicador de passos
 * (.tp-steps), card em faixas da ABERTURA (.tp-card/.tp-band) e, após "Começar o teste", as 25 questões
 * (.tp-questions, herdando .crh-question/.crh-option do fluxo antigo, paginadas por teste-perfil.js).
 */
[x-cloak] { display: none !important; }

.tp-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--crh-bg, #f4f6fb);
    color: var(--crh-text-strong, #12203a);
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}

/* O layout compartilhado (components.layouts.app) centraliza o body num grid `place-items:center` (herança
 * da tela de login). Além do grid, o `justify-items:center` herdado dá `justify-self:center` ao .tp-shell —
 * e `justify-self` ENCOLHE um bloco à largura do conteúdo. Efeito colateral: (1) a topbar não ia de ponta a
 * ponta; (2) o card "tremia"/mudava de largura a cada pergunta (largura seguia a maior opção da questão).
 * Voltando o body para bloco normal E zerando o `justify-items`, o .tp-shell ocupa a largura TOTAL e o
 * conteúdo passa a ter largura ESTÁVEL (centralizado pelo .tp-main). */
body:has(.tp-shell) {
    display: block;
    justify-items: stretch;
}

/* ===== Header público ===== */
/* Barra de VIDRO full-bleed (fundo/borda de ponta a ponta); o CONTEÚDO vive no miolo centralizado
 * `.tp-topbar__inner` com largura máxima — mesmo padrão do portal, para a marca e o selo não colarem
 * nas bordas extremas num telão. */
.tp-topbar {
    background: var(--crh-glass);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--crh-hair);
    position: sticky;
    top: 0;
    z-index: 20;
}
.tp-topbar__inner {
    max-width: 1200px;
    min-height: 64px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
/* Sem backdrop-filter: cai para superfície sólida (senão o header fica transparente demais). */
@supports not (backdrop-filter: blur(1px)) {
    .tp-topbar { background: var(--crh-surface); }
}
/* Este header já é a barra de topo → some o toggle flutuante do layout (sem duplicar). */
body:has(.tp-topbar) > .crh-theme-toggle--fixed { display: none; }

.tp-brand { display: flex; align-items: center; gap: 12px; }
.tp-brand__mark { width: 28px; height: 28px; flex: none; }
.tp-brand__logo { height: 32px; width: auto; max-width: 160px; object-fit: contain; flex: none; }
.tp-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.tp-brand__name { font-family: 'Archivo', 'Manrope', sans-serif; font-weight: 800; font-size: 16px; color: var(--crh-text-strong); }
.tp-brand__sub { font-size: 12px; color: var(--crh-text-muted); }

.tp-trust { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--crh-text-muted); }
.tp-trust__icon { width: 15px; height: 15px; flex: none; color: var(--crh-success); }
@media (max-width: 560px) {
    .tp-topbar__inner { padding: 0 16px; min-height: 56px; }
    .tp-trust span { display: none; }
}

/* ===== Conteúdo ===== */
.tp-main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 24px 64px;
}
.tp-flow {
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===== Indicador de passos ===== */
.tp-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 4px;
    list-style: none;
    font-size: 12px;
    font-weight: 700;
}
.tp-step { display: flex; align-items: center; gap: 7px; color: var(--crh-text-subtle); }
.tp-step__num {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex: none;
    border-radius: 999px;
    background: var(--crh-hair);
    color: var(--crh-text-subtle);
    font-size: 11px;
}
.tp-step--active { color: var(--crh-primary); }
.tp-step--active .tp-step__num { background: var(--crh-primary); color: #fff; }
.tp-step--done { color: var(--crh-text-muted); }
.tp-step--done .tp-step__num { background: var(--crh-primary-soft); color: var(--crh-primary); }
.tp-step__conn { flex: 1; height: 2px; border-radius: 2px; background: var(--crh-hair); }
@media (max-width: 440px) {
    .tp-step__label { display: none; }
}

/* ===== Card (abertura + questões) ===== */
.tp-card {
    background: var(--crh-surface);
    border: 1px solid var(--crh-hair);
    border-radius: 14px;
    box-shadow: var(--crh-shadow-card);
    overflow: hidden;
}
.tp-band { padding: 24px 32px; }
.tp-band + .tp-band { border-top: 1px solid var(--crh-hair); }

/* Faixa A — Abertura */
.tp-band--intro { padding: 30px 32px 26px; }
.tp-eyebrow {
    margin: 0 0 10px;
    font-size: 12px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--crh-primary);
}
.tp-title {
    margin: 0;
    font-family: 'Archivo', 'Manrope', sans-serif;
    font-weight: 800; font-size: 28px; line-height: 1.15;
    color: var(--crh-text-strong);
    text-wrap: pretty;
}
.tp-subtitle {
    margin: 12px 0 0;
    font-size: 15px; line-height: 1.6;
    color: var(--crh-text-muted);
    text-wrap: pretty;
}
.tp-metrics { display: flex; gap: 10px; margin-top: 22px; }
.tp-metric {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    background: var(--crh-glass-2);
    border: 1px solid var(--crh-hair);
    border-radius: 11px;
    padding: 13px 8px;
    text-align: center;
}
.tp-metric__value { font-family: 'Archivo', 'Manrope', sans-serif; font-weight: 800; font-size: 21px; line-height: 1; color: var(--crh-text-strong); }
.tp-metric__label { margin-top: 5px; font-size: 11.5px; color: var(--crh-text-subtle); }

/* Faixa B — O que esperar */
.tp-band--expect { display: flex; flex-direction: column; gap: 16px; }
.tp-expect { display: flex; align-items: flex-start; gap: 13px; }
.tp-expect__icon {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: none;
    border-radius: 9px;
    background: var(--crh-primary-soft);
    color: var(--crh-primary);
}
.tp-expect__icon svg { width: 15px; height: 15px; }
.tp-expect__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--crh-text-strong); }
.tp-expect__desc { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--crh-text-muted); text-wrap: pretty; }

/* Faixa C — Consentimento + ação */
.tp-band--consent { display: flex; flex-direction: column; gap: 16px; padding: 24px 32px 28px; }
.tp-consent {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1.5px solid var(--crh-hair);
    background: var(--crh-glass-2);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.tp-consent--on { background: var(--crh-primary-soft); border-color: var(--crh-primary-border); }
/* Checkbox real fica invisível mas funcional (foco/teclado/leitor de tela seguem no <label>). */
.tp-consent__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tp-consent__box {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex: none;
    border-radius: 6px;
    background: var(--crh-surface);
    border: 2px solid var(--crh-text-subtle);
    transition: background .15s ease, border-color .15s ease;
}
.tp-consent--on .tp-consent__box { background: var(--crh-primary); border-color: var(--crh-primary); }
.tp-consent__check { width: 13px; height: 13px; color: #fff; opacity: 0; }
.tp-consent--on .tp-consent__check { opacity: 1; }
.tp-consent__input:focus-visible + .tp-consent__box { outline: none; box-shadow: var(--crh-focus-ring); }
.tp-consent__text { display: flex; flex-direction: column; }
.tp-consent__title { font-size: 14px; font-weight: 700; color: var(--crh-text-strong); }
.tp-consent__desc { margin-top: 3px; font-size: 13px; line-height: 1.55; color: var(--crh-text-muted); text-wrap: pretty; }

.tp-cta {
    appearance: none;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%;
    margin: 0; /* mata o `margin-top:1.1rem` do `button` global (centralrh-auth.css) */
    padding: 16px 22px;
    border: none;
    border-radius: 12px;
    font-family: 'Archivo', 'Manrope', sans-serif;
    font-size: 15px; font-weight: 800;
    background: var(--crh-hair);
    color: var(--crh-text-subtle);
    cursor: not-allowed;
    transition: background .15s ease, color .15s ease;
}
.tp-cta--on { background: var(--crh-primary); color: #fff; cursor: pointer; }
.tp-cta--on:hover { background: var(--crh-primary-hover); }
.tp-cta:focus-visible { outline: none; box-shadow: var(--crh-focus-ring); }
.tp-cta__icon { width: 17px; height: 17px; flex: none; }

.tp-hint, .tp-privacy {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 0;
    color: var(--crh-text-subtle);
    text-align: center;
}
.tp-hint { font-size: 13px; }
.tp-hint__icon, .tp-privacy__icon { width: 14px; height: 14px; flex: none; }
.tp-privacy { font-size: 12.5px; padding: 0 8px; }

.tp-error { margin: 0; font-size: 13px; color: var(--crh-danger); }

/* ===== Estados terminais (respondido/expirado/etc.) ===== */
.tp-state {
    width: 100%; max-width: 480px;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
    background: var(--crh-surface);
    border: 1px solid var(--crh-hair);
    border-radius: 14px;
    box-shadow: var(--crh-shadow-card);
    padding: 40px 32px;
}
.tp-state__badge {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; margin-bottom: 4px;
    border-radius: 999px;
    background: var(--crh-primary-soft); color: var(--crh-primary);
}
.tp-state__badge--ok { background: var(--crh-success-soft); color: var(--crh-success); }
.tp-state__badge-icon { width: 28px; height: 28px; }
.tp-state__title { margin: 0; font-family: 'Archivo', 'Manrope', sans-serif; font-weight: 800; font-size: 22px; color: var(--crh-text-strong); }
.tp-state__lead { margin: 0; font-size: 15px; line-height: 1.55; color: var(--crh-text-muted); text-wrap: pretty; }
.tp-state__winner { margin: 2px 0; font-family: 'Archivo', 'Manrope', sans-serif; font-weight: 800; font-size: 28px; color: var(--crh-primary); }
.tp-state__muted { margin: 0; font-size: 13px; color: var(--crh-text-subtle); }

/* Perfil COMPLETO na devolutiva: os 4 perfis com barra proporcional (<progress> nativo, value/max — sem
 * CSS inline) e %; o vencedor fica destacado. Alinhado à ESQUERDA dentro do card centralizado. */
.tp-profile {
    width: 100%;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--crh-hair);
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.tp-profile__caption {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--crh-text-subtle);
    text-align: center;
}
.tp-profile__row { display: flex; align-items: center; gap: 12px; }
.tp-profile__name { flex: none; width: 74px; font-size: 14px; color: var(--crh-text-muted); }
.tp-profile__pct { flex: none; width: 44px; text-align: right; font-size: 14px; font-weight: 700; color: var(--crh-text-muted); }

/* Barra: <progress> nativo. Pseudo-elementos por engine — nunca agrupar (um seletor inválido derruba tudo). */
.tp-profile__bar {
    appearance: none; -webkit-appearance: none;
    flex: 1; min-width: 0; height: 10px;
    border: none; border-radius: 999px; overflow: hidden;
    background: var(--crh-neutral-soft, #eef1f5);
}
.tp-profile__bar::-webkit-progress-bar { background: var(--crh-neutral-soft, #eef1f5); border-radius: 999px; }
.tp-profile__bar::-webkit-progress-value { background: var(--crh-text-subtle); border-radius: 999px; }
.tp-profile__bar::-moz-progress-bar { background: var(--crh-text-subtle); border-radius: 999px; }

/* Vencedor destacado (nome/valor fortes; barra na cor primária). */
.tp-profile__row--win .tp-profile__name { color: var(--crh-text-strong); font-weight: 700; }
.tp-profile__row--win .tp-profile__pct { color: var(--crh-primary); }
.tp-profile__row--win .tp-profile__bar::-webkit-progress-value { background: var(--crh-primary); }
.tp-profile__row--win .tp-profile__bar::-moz-progress-bar { background: var(--crh-primary); }

/* ===== Passo 2 — questões (herda hooks/classes do fluxo antigo, paginadas por teste-perfil.js) ===== */
.tp-questions { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 8px; }

.crh-question {
    border: 1px solid var(--crh-hair);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0;
}
.crh-question__title { font-family: 'Archivo', 'Manrope', sans-serif; font-weight: 700; font-size: 16px; color: var(--crh-text-strong); padding: 0; margin-bottom: 12px; line-height: 1.3; text-wrap: pretty; }
.crh-option {
    display: flex; gap: 10px; align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--crh-hair);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 14px; color: var(--crh-text-strong);
    transition: background .12s ease, border-color .12s ease;
}
.crh-option:last-child { margin-bottom: 0; }
.crh-option:hover { background: var(--crh-glass-2); border-color: var(--crh-primary-border); }
.crh-option input { accent-color: var(--crh-primary); width: 17px; height: 17px; flex: none; }
.crh-option:has(input:checked) { background: var(--crh-primary-soft); border-color: var(--crh-primary-border); }

.crh-error { margin: 4px 0 0; font-size: 13px; color: var(--crh-danger); }

/* Navegação prev/next injetada pelo teste-perfil.js. GRID de 3 colunas [1fr | auto | 1fr]: o contador
 * fica SEMPRE fixo na coluna central e NÃO se desloca quando "Anterior"/"Próxima" somem (ex.: na última
 * questão, sem "Próxima", o contador continua no mesmo lugar). Botões ancorados às pontas. */
.crh-stepper__nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 4px; }
.crh-stepper__nav .crh-btn--ghost { grid-column: 1; justify-self: start; }
.crh-stepper__nav .crh-btn:not(.crh-btn--ghost) { grid-column: 3; justify-self: end; }
.crh-stepper__counter { grid-column: 2; text-align: center; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--crh-text-muted); }
.crh-btn {
    appearance: none;
    /* width/margin explícitos VENCEM o `button { width:100%; margin-top:1.1rem }` global de centralrh-auth.css
     * (senão os botões esticam e empurram o contador para duas linhas). */
    width: auto;
    margin: 0;
    flex: none;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px;
    border: 1px solid var(--crh-primary);
    border-radius: 10px;
    background: var(--crh-primary); color: #fff;
    font-weight: 700; font-size: 14px;
    cursor: pointer;
    transition: background .12s ease;
}
.crh-btn:hover { background: var(--crh-primary-hover); border-color: var(--crh-primary-hover); }
/* "Próxima" desabilitado (questão atual em branco): apagado e sem hover, sinalizando que falta responder. */
.crh-btn:disabled { opacity: .45; cursor: not-allowed; }
.crh-btn:disabled:hover { background: var(--crh-primary); border-color: var(--crh-primary); }
.crh-btn--ghost { background: transparent; color: var(--crh-primary); }
.crh-btn--ghost:hover { background: var(--crh-primary-soft); }

/* O `display` das classes de botão (inline-flex/flex) VENCE o `[hidden]{display:none}` da folha do agente
 * de usuário — sem isto, o teste-perfil.js esconde os botões pelo atributo `hidden` mas eles continuam
 * aparecendo (ex.: "Próxima" e "Concluir" juntos na última questão). Reafirma o none quando ocultos. */
.crh-btn[hidden], .tp-cta[hidden] { display: none !important; }

/* ===== Modal de confirmação do envio ===== */
.tp-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tp-modal__backdrop { position: absolute; inset: 0; background: rgba(18, 32, 58, 0.45); }
.tp-modal__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: var(--crh-surface);
    border: 1px solid var(--crh-hair);
    border-radius: 16px;
    box-shadow: var(--crh-shadow-panel);
    padding: 28px 28px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.tp-modal__icon {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    border-radius: 999px;
    background: var(--crh-primary-soft);
    color: var(--crh-primary);
}
.tp-modal__icon svg { width: 26px; height: 26px; }
.tp-modal__title { margin: 0; font-family: 'Archivo', 'Manrope', sans-serif; font-weight: 800; font-size: 20px; color: var(--crh-text-strong); }
.tp-modal__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--crh-text-muted); text-wrap: pretty; }
.tp-modal__actions { display: flex; gap: 10px; width: 100%; margin-top: 8px; }
.tp-btn {
    flex: 1; width: auto; margin: 0;
    appearance: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 18px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-weight: 700; font-size: 14px;
    cursor: pointer;
    transition: background .12s ease;
}
.tp-btn--ghost { background: transparent; border-color: var(--crh-hair); color: var(--crh-text-strong); }
.tp-btn--ghost:hover { background: var(--crh-glass-2); }
.tp-btn--primary { background: var(--crh-primary); color: #fff; }
.tp-btn--primary:hover { background: var(--crh-primary-hover); }

/* ===== Tema escuro (o layout alterna .dark no <html>) ===== */
.dark .tp-shell { color: var(--crh-text-strong); }