/* Telas de conta antes da aprovação (acompanhamento, documentos, interesse): só o que o acesso.css não tem. Toda classe
   leva o prefixo ol-conta-, e os tokens são os do olhar.css. */

/* O kit dá display a aviso, barra e formulário; o atributo hidden (que os scripts usam) precisa vencer. */
.ol-acesso [hidden] { display: none !important; }

.ol-acesso-coluna.ol-conta-larga { max-width: 520px; }

/* Linha da análise: feito, atual e por vir. */
.ol-conta-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; counter-reset: etapa; }
.ol-conta-etapas li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--fg-3); text-align: center; }
.ol-conta-etapas li::before { content: ""; position: absolute; top: 11px; right: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.ol-conta-etapas li:first-child::before { display: none; }
.ol-conta-etapas li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-control); background: var(--surface); }
.ol-conta-etapas li > span svg { width: 14px; height: 14px; }
.ol-conta-etapas li.ol-feito { color: var(--fg-2); }
.ol-conta-etapas li.ol-feito::before, .ol-conta-etapas li.ol-atual::before { background: var(--accent); }
.ol-conta-etapas li.ol-feito > span { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
.ol-conta-etapas li.ol-atual { color: var(--accent); }
.ol-conta-etapas li.ol-atual > span { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ol-conta-etapas li.ol-atual > span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.ol-conta-bloco { display: grid; gap: 4px; }
.ol-conta-bloco .ol-titulo-secao { margin: 0; }

/* Documentos: ícone, nome e situação, e o botão de enviar. */
.ol-conta-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ol-conta-doc { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-item); background: var(--surface-2); transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.ol-conta-doc-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface); color: var(--fg-2); }
.ol-conta-doc-icone svg { width: 20px; height: 20px; }
.ol-conta-doc-texto { display: grid; gap: 3px; min-width: 0; }
.ol-conta-doc-texto strong { font-size: 14px; color: var(--fg); }
.ol-conta-doc-texto .ol-progresso { margin-top: 4px; }
.ol-conta-doc[data-estado='ok'] .ol-conta-doc-icone { background: var(--ok-soft); color: var(--ok); }
.ol-conta-doc[data-estado='ok'] [data-status] { color: var(--ok); }
.ol-conta-doc[data-estado='vazio'] [data-status] { color: var(--warn); }
.ol-conta-doc[data-estado='erro'] { border-color: var(--bad-soft); }
.ol-conta-doc[data-estado='erro'] [data-status] { color: var(--bad); }
.ol-conta-doc.ol-acabou { border-color: var(--ok); }
.ol-conta-arquivo { cursor: pointer; }
.ol-conta-arquivo:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ol-conta-doc[data-estado='enviando'] .ol-conta-arquivo { pointer-events: none; opacity: 0.6; }

/* Interesse: aceite com link e os três passos depois do envio. */
.ol-conta-aceite { align-items: flex-start; line-height: 1.45; font-weight: 400; }
.ol-conta-aceite input { margin-top: 2px; flex: none; }
.ol-conta-aceite a { font-weight: 600; }
.ol-conta-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ol-conta-passos li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.ol-conta-passos b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 13px; }
.ol-conta-passos strong { display: block; color: var(--fg); font-weight: 650; }
.ol-acesso select.ol-input { min-height: 44px; }

@media (max-width: 480px) {
    .ol-conta-doc { grid-template-columns: 36px minmax(0, 1fr); }
    .ol-conta-doc-icone { width: 36px; height: 36px; }
    .ol-conta-arquivo { grid-column: 1 / -1; justify-content: center; min-height: 44px; }
    .ol-conta-etapas li { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .ol-conta-doc { transition: none; }
}