/* Portal do cliente: só o que é dele, por cima do jacredita.css (tokens e blocos comuns aos portais). Mobile-first: pensado para
   360px de largura, uma coluna, fonte maior que a dos portais internos, botões grandes de dedo; no computador, a mesma coluna
   centralizada. Cores só pelas variáveis (a marca do parceiro as recalcula). */

html, body { font-size: 16px; line-height: 1.55; background: var(--alt); }

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

.jornada-topo {
    display: flex; align-items: center; justify-content: center;
    padding: 14px 16px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.jornada-topo .logo { font-size: 1.15rem; }
.logo-imagem { display: block; max-height: 40px; max-width: 200px; width: auto; height: auto; object-fit: contain; }
.logo-inicial {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px;
    background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: 1rem; flex-shrink: 0;
}

.jornada-corpo { flex: 1; width: 100%; max-width: 520px; margin: 0 auto; padding: 20px 16px; }
.jornada-corpo h1 { font-size: 1.4rem; line-height: 1.25; }
.jornada-corpo p { margin: 0 0 .9rem; }
.jornada-corpo .painel { padding: 20px 18px; }

/* Botões de dedo: largura toda, 48px de altura no mínimo, texto grande. */
.jornada .botao {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px;
    padding: 12px 16px; font-size: 1rem; font-weight: 600; border-radius: var(--r-controle);
}
.jornada .botao + .botao { margin-top: 10px; }
.jornada input, .jornada select { font-size: 1rem; min-height: 48px; }

/* ---------- Jornada: passos ---------- */

/* Trilha "Passo X de 7": texto e uma barra fina (a cor da marca; o dourado fica para destaque). */
.trilha { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; color: var(--muted); font-size: .85rem; font-weight: 600; }
.trilha-barra { display: block; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.trilha-barra > span { display: block; height: 100%; background: var(--brand); }

.jornada-corpo h2 { font-size: 1.1rem; }
.jornada .formulario { gap: .5rem; margin-top: .75rem; }
.jornada .formulario label { font-weight: 600; }
.jornada .formulario input[type=date], .jornada .formulario input[type=text] { width: 100%; }
.jornada .formulario .botao { margin-top: .4rem; }
.jornada a.botao { margin-top: 10px; }
.jornada .botao-espaco { margin-top: 10px; }
.jornada .erro-campo { font-size: .95rem; margin: 0; }
.jornada .alerta { font-size: .95rem; }
.jornada .alerta:focus { outline: none; }
.campo-codigo { font-family: var(--fonte-mono); font-size: 1.4rem !important; letter-spacing: .35em; text-align: center; }

/* Caixa de confirmação grande, fácil de tocar. */
.jornada label.caixa-grande {
    display: flex; flex-direction: row; align-items: center; gap: .75rem; min-height: 48px; padding: .5rem .75rem;
    border: 1px solid var(--line); border-radius: var(--r-controle); background: var(--bg); font-weight: 600; cursor: pointer;
}
.jornada label.caixa-grande input[type=checkbox] { width: 1.4rem; height: 1.4rem; min-height: 0; flex-shrink: 0; }
.jornada label.caixa-grande[hidden] { display: none; }

/* Conferência: cartões de dados, rótulo em cima e valor embaixo (cabe em 360px). */
.cartao-dados h2 { margin-bottom: .5rem; }
dl.itens { display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; margin: 0; }
dl.itens dt { color: var(--muted); }
dl.itens dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.destaque-valor { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin: 0 0 .5rem !important; }

/* Termos: o texto inteiro, legível. */
.texto-termo h2, .texto-termo h3 { font-size: 1.05rem; margin: .25rem 0 .6rem; }
.texto-termo ol, .texto-termo ul { padding-left: 1.25rem; margin: 0 0 .9rem; }
.texto-termo li { margin-bottom: .45rem; }

/* Leitura da CCB: o PDF num quadro alto; o marcador do fim logo depois. */
.quadro-ccb { display: block; width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.fim-ccb { margin: .5rem 0 0; text-align: center; color: var(--muted); font-size: .85rem; }
.fim-ccb::before, .fim-ccb::after { content: ""; display: inline-block; width: 2.5rem; border-top: 1px solid var(--line); vertical-align: middle; margin: 0 .5rem; }

.lista-passos { padding-left: 1.25rem; margin: 0 0 .9rem; }
.lista-passos li { margin-bottom: .35rem; }
.titulo-secao { margin-top: 1.25rem; }

.reenvio { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .75rem; }
.reenvio summary { cursor: pointer; color: var(--link); font-weight: 600; min-height: 48px; display: flex; align-items: center; }

.operado-por { margin: 8px auto 20px; text-align: center; font-size: 12px; color: var(--muted); opacity: .85; }

@media (min-width: 640px) {
    .jornada-corpo { padding-top: 40px; }
    .jornada-corpo .painel { padding: 28px 28px; }
}