/* ═══════════════════════════════════════════════════════════════════════════
   Van Soldat Client — "carta patrimonial contínua"

   Mundo visual HERDADO, não identidade nova. Os treze tokens abaixo são os de
   `site/styles.css`, valor a valor: o cliente não deve perceber transição entre
   o site que o trouxe, o PDF que recebe e esta tela.

   Escala de LEITURA (base 16px, rem), não de ferramenta. O `empresa/
   DESIGN.md` autoriza explicitamente: "a escala de 13-14px segue valendo
   para APP e PDF (densidade de ferramenta)" — o Client não é ferramenta.

   Tema claro único. O tema escuro do OS é modo de trabalho interno e, segundo o
   documento-mãe, NÃO faz parte da identidade pública.

   Proibições que este arquivo respeita, todas do §5 do documento-mãe: sem
   emoji, sem text-shadow, sem gradiente, sem sombra como elevação, sem bronze
   como texto pequeno (o bronze-texto é #7E6130), sem verde/vermelho por padrão
   para número bom/ruim, sem caixa para destacar total, no máximo um botão
   primário por tela. Card não é estrutura de página: a hierarquia vem de peso,
   espaço em branco e filete de 1px.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/cormorant-garamond-latin.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/cormorant-garamond-italic-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/ibm-plex-sans-latin.woff2') format('woff2')}

:root{
  /* Papel CANÔNICO do sistema (DESIGN.md §2.1). Era #F7EFE6, herdado do
     site — cor amostrada do fundo_hero.webp, que o site ainda não pode largar
     sem retrabalhar a foto. Decisão de 28/08/2026: o portal tem precedência
     sobre o site, então ele migra primeiro e o site converge quando a foto for
     refeita. Enquanto isso as duas superfícies públicas divergem em 7 unidades
     de verde e 13 de azul — perceptível lado a lado, não em sequência. */
  --bg:#F7F6F3;
  --surface:#FCFBF9;
  --line:#D3CFC6;
  --line-strong:#B8B4AA;
  --text:#2A2A2A;
  --muted:#5A5751;
  --slate:#4A4A4A;
  --accent:#B08D4F;
  --accent-hover:#9A7A40;  /* hover de BLOCO bronze — NUNCA texto: 3,53:1 */
  --accent-text:#7E6130;
  --on-accent:#26251F;
  --danger:#8A3B2E;
  --cover-title:#F2F2F2;
  --cover-sub:#DCDCDC;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  /* Duas larguras. A COLUNA acomoda a página no desktop sem virar uma tira
     estreita no meio da tela; a PROSA fica em ~62ch porque linha longa demais
     custa a volta do olho. Tabela e medida usam a coluna; texto usa a prosa.
     A coluna passou de 940 para 1160 em 14/09: é o valor dos DOIS mockups
     (`portal_home`, `vault`) e o que a banda usa. Com 940 o título da área
     começava recuado em relação à marca, e trocar para o Cofre movia o
     conteúdo inteiro — o desalinhamento que se via ao navegar. A prosa
     continua em 62ch, então o texto não fica mais largo por causa disto:
     quem ganha a largura é a estrutura (colunas, tabelas), não a leitura. */
  --col:1160px;
  --prosa:62ch;
}

*,*::before,*::after{box-sizing:border-box}

/* A barra de rolagem RESERVA o lugar dela sempre. Sem isto, a pagina que
   rola perde ~15px de viewport e todo o conteudo centrado escorrega ~7px
   para a esquerda -- entao Inicio e Cofre (que rolam) nasciam num eixo e a
   pagina de area (que nao rola) noutro. Nao era o CSS das paginas: era a
   largura util mudando debaixo delas. */
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}

body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  /* Todo número em Plex Sans com tabular-nums: coluna de valores alinha, e
     1.111 não fica mais estreito que 8.888. `lining-nums` junto porque os
     mockups o pedem: sem ele o Plex pode servir algarismo de texto, e ano
     ("2025") ao lado de contagem ficaria com alturas diferentes. */
  font-variant-numeric:tabular-nums lining-nums;
}

/* O `.num` dos mockups. Hoje redundante com o global acima, e de propósito:
   marca no HTML o que É número, para a regra sobreviver se o global mudar. */
.num{font-variant-numeric:tabular-nums lining-nums}

p,li{text-wrap:pretty;overflow-wrap:anywhere}
h1,h2,h3{text-wrap:balance}

a{color:var(--accent-text);text-decoration-thickness:1px;text-underline-offset:3px}
/* TODO link do portal passava por aqui: --accent-hover (#9A7A40) dá 3,53:1
   sobre o papel e reprova AA, contra 5,07:1 do repouso — o hover PIORAVA a
   legibilidade, na única superfície que o cliente opera. --accent-hover é
   hover de bloco (clarear preenchimento); em texto sobre papel claro o gesto
   certo é escurecer. O sublinhado carrega a afordância. 28/08/2026. */
a:hover{color:var(--text)}

/* Anel de foco em --accent-text, não em --accent: bronze preenchido é --accent,
   bronze que é traço sobre o fundo é --accent-text. Medido em 28/08/2026 —
   #B08D4F dá 2,87:1 sobre este papel e reprova o piso de 3:1 da WCAG
   2.4.11/1.4.11; #7E6130 dá 5,34:1. É a superfície do cliente: aqui o
   indicador de teclado não é detalhe. */
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:2px}

/* ── Estrutura ─────────────────────────────────────────────────────────── */

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

.cli-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--surface);color:var(--text);
  padding:12px 18px;border:1px solid var(--line-strong);border-radius:4px;
}
.cli-skip:focus{left:16px;top:16px}

/* Visualmente oculto, audivelmente presente. Marca o destino corrente para o
   leitor de tela — o `dcc.Link` do Dash 4 nao aceita `aria-current`, e a cor
   sozinha nunca pode ser o unico sinal de estado. */
.cli-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Faixa institucional: slate com título claro — a MESMA linguagem da capa dos
   PDFs (documento-mãe §2.1). É a troca de fundo que estabelece a hierarquia de
   primeira ordem, e é ela que faz a página abrir como documento em vez de
   abrir como painel. */
/* A BANDA É UMA SÓ, nas duas famílias de página (14/09). A da área vinha
   com a marca colada na borda da janela e a identidade empilhada embaixo
   dela; a das páginas de fluxo, com a marca recuada e o nome à direita. Ao
   navegar de uma para a outra a marca pulava de lugar e de tamanho — e
   nenhum dos dois mockups (`portal_home`, `vault`) desenhava a primeira
   forma. Agora as duas seguem o mockup: 1160px centrados, 13px de padding
   vertical, marca à esquerda, quem está logado + Sair à direita.
   Nota: `--col` (940px) continua sendo a largura do CONTEÚDO da área, e
   diverge do 1160 dos mockups — é decisão de layout à parte, e é por isso
   que a banda fixa o próprio 1160 em vez de herdar `--col`: o que o olho
   compara ao trocar de página é a POSIÇÃO DA MARCA. */
.cli-band{background:var(--slate)}
/* O fundo é full-bleed e só o CONTEÚDO centra — mesma estrutura de
   `.banda` + `.banda-in` do mockup. Centrar o elemento pintado deixaria
   duas tiras de papel nas bordas da faixa institucional. */
.cli-band-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  max-width:1160px;margin:0 auto;width:100%;
  padding:13px 28px;
}
.cli-band-dir{display:flex;align-items:center;gap:20px;min-width:0}

.cli-topo{border-bottom:1px solid var(--line);background:var(--surface)}
/* A nav divide o eixo com a banda: mesmo 1160 e mesmo recuo. Sem
   isto a marca fica num alinhamento e o menu logo abaixo em outro
   -- visivel no Cofre antes de 14/09. */
.cli-nav-faixa{max-width:1160px;margin:0 auto;width:100%;padding:0 28px}

/* Cormorant vive AQUI e no título de página. Em nenhum outro lugar — nem em
   cabeçalho de seção, nem em nome técnico. */
.cli-marca{
  font-family:var(--serif);font-weight:600;font-size:1.45rem;
  letter-spacing:.5px;line-height:1.25;color:var(--cover-title);
}
/* A marca GRÁFICA (rodada visual 08/09): servida por /marca/dark.svg — os
   assets do Client só aceitam css/woff2/ico de propósito. No shell substitui
   o wordmark; nas páginas puras coroa o cartão. */
.cli-logo{width:min(300px,100%);height:auto;display:block}
.cli-topo .cli-logo{width:236px}
.cli-login .cli-logo{margin:0 auto 28px}   /* respiro do login do OS */
.cli-pagina-logo{margin:0 0 18px}
/* Tamanho PADRONIZADO com o login do OS (auth.py, .logo img: 300px) na
   calibragem ao vivo de 09/09 — por LARGURA, altura derivada preserva a
   proporção. A faixa do shell segue o mockup da home (236px; 210 mobile):
   contexto de banda, não de cartão. min(300px,100%) evita overflow em
   viewport estreito. */
.cli-familia{font-size:.84rem;font-weight:500;color:var(--cover-sub)}

.cli-nav{display:flex;gap:clamp(14px,2.4vw,28px);flex-wrap:wrap}
.cli-nav-item{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.74rem;font-weight:500;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
  border-bottom:2px solid transparent;
}
.cli-nav-item:hover{color:var(--text);border-bottom-color:var(--line-strong)}
/* Ativo por PESO + cor + filete bronze — nunca só por cor. */
.cli-nav-ativo{color:var(--text);font-weight:600;border-bottom-color:var(--accent)}

/* O Sair é o MESMO das duas famílias: caixa de filete, como o mockup
   desenha (`.sair` de `portal_home`/`vault`). Antes a área o tinha como
   texto sublinhado e as páginas de fluxo como caixa — duas formas para o
   mesmo ato, no mesmo lugar da tela. */
.cli-sair{
  display:inline-flex;align-items:center;
  font-size:.72rem;font-weight:500;letter-spacing:1px;text-transform:uppercase;
  color:var(--cover-sub);text-decoration:none;
  border:1px solid rgba(220,220,220,.4);border-radius:4px;padding:6px 13px;
}
.cli-sair:hover{border-color:var(--cover-sub);color:var(--cover-title)}
.cli-band .cli-sair:focus-visible{outline-color:var(--cover-title)}

/* O recuo HORIZONTAL e o mesmo da banda, da nav e do rodape (28px): e o
   que faz o titulo da pagina nascer no mesmo eixo vertical da marca. O
   vertical continua fluido -- ali o respiro pode respirar. */
.cli-main,
.cli-cofre-body .pagina{
  width:100%;max-width:var(--col);
  margin:0 auto;padding:clamp(32px,6vw,64px) 28px;
}
.cli-main{flex:1 0 auto}
.cli-main:focus{outline:none}

/* Mesma decisao da banda (14/09): o rodape da AREA passa a ter a forma do
   rodape das paginas de fluxo, que e a do mockup -- entidade a esquerda,
   contato a direita, um eixo de 1160. Empilhado e centralizado de um lado,
   lado a lado do outro, era a mesma informacao em duas formas. */
.cli-rodape{
  border-top:1px solid var(--line);
  padding:20px 28px 28px;
  max-width:1160px;margin:0 auto;width:100%;
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.cli-rodape-legal{margin:0;font-size:.74rem;line-height:1.75;color:var(--muted)}
@media (max-width:680px){
  .cli-rodape{flex-direction:column;gap:5px}
}

/* ── Tipografia de página ──────────────────────────────────────────────── */

/* O RESPIRO entre blocos e um so: 40px, o do mockup `vault`. A area usava
   um clamp que chegava a 52 e o Cofre 40 fixo -- trocar de pagina mudava o
   ritmo vertical junto com o conteudo. */
.cli-pagina,
.cli-cofre-body .pagina{display:flex;flex-direction:column;gap:40px}

/* ── CABECALHO DE PAGINA — UM SO, para as duas familias (14/09) ─────────
   Havia tres: o do Inicio, o das areas (Patrimonio/Fluxo/Investimentos) e
   o do Cofre. Divergiam em PESO (600 x 500), TAMANHO (fluido 30-42px x 40
   fixo), ENTRELINHA (1,15 x 1), ESPACEJAMENTO (.5px x .2px) e no subtitulo
   (16,8px x 14px) -- e trocar de pagina mostrava tudo isso de uma vez.

   O canonico vem dos mockups, que CONCORDAM no que importa: Cormorant 500,
   line-height 1, letter-spacing .2px (`vault` .cabeca-tit e `portal_home`
   .ola-nome). O tamanho de TITULO DE PAGINA e o do `vault` (40px); a home
   usa 30px no mockup porque la o h1 e uma saudacao ao lado de "Bom dia,",
   que e outro componente.

   Uma regra, dois nomes de classe -- os renderizadores e que sao dois
   (Dash e string HTML), como ja acontece com a nav e com o Sair. */
.cli-cabecalho,
.cli-cofre-body .cabeca{display:flex;flex-direction:column;gap:10px}

.cli-h1,
.cli-cofre-body .cabeca-tit{
  font-family:var(--serif);font-weight:500;
  font-size:40px;letter-spacing:.2px;line-height:1;
  margin:0;color:var(--text);
}
.cli-lede,
.cli-cofre-body .cabeca-sub{
  margin:0;font-size:14px;color:var(--muted);max-width:72ch;
}

/* Estado em linguagem humana, não contador. Abre a seção dizendo o que a
   pessoa vai encontrar — é a frase que faz a página conduzir em vez de exibir. */
/* Sem margem propria: o pai e flex com `gap`, e margem somada ao gap faz
   o mesmo espaco contar duas vezes -- era o que dava tres ritmos verticais
   diferentes para o mesmo lugar da pagina. */
.cli-sumario{
  margin:0;font-size:1.02rem;line-height:1.65;color:var(--text);
  max-width:var(--prosa);
}
/* Prosa de ligação entre seções: uma linha, discreta, para a leitura não cair
   de um assunto no outro sem transição. */
.cli-conector{
  margin:0 0 16px;font-size:.92rem;line-height:1.7;color:var(--muted);
  max-width:var(--prosa);
}

/* Único elemento com traço bronze — o acento pontual da tela. */
.cli-sec{
  margin:0 0 18px;font-size:.69rem;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;
}
.cli-sec::after{content:"";display:block;width:16px;height:1px;background:var(--accent)}

.cli-bloco{margin:0}
.cli-nota{margin:0;font-size:.86rem;line-height:1.7;color:var(--muted);max-width:62ch}
.cli-nota:last-child{margin-bottom:0}

/* O filete saiu (14/09). Ele empurrava a frase 13px para dentro e criava
   um eixo so dela -- com o titulo num alinhamento, esta linha noutro e o
   paragrafo seguinte de volta ao primeiro. A frase e a RESPOSTA da pagina,
   nao uma citacao; quem a destaca e a escala, nao um marcador. */
.cli-vazio-linha{
  margin:0;font-size:1rem;color:var(--text);
}

/* ── Leituras: conclusão → impacto → evidências ────────────────────────── */

.cli-leituras{display:flex;flex-direction:column;gap:26px}
.cli-leitura{padding-bottom:22px;border-bottom:1px solid var(--line)}
.cli-leitura:last-child{border-bottom:none;padding-bottom:0}
.cli-leitura-titulo{
  margin:0 0 12px;font-size:1.08rem;font-weight:600;line-height:1.45;color:var(--text);
}
.cli-leitura-impacto{margin-bottom:6px}

/* ── Medidas: rótulo · valor · detalhe ─────────────────────────────────── */

.cli-med{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:2px 18px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.cli-med:last-child{border-bottom:none}
.cli-med-rot{font-size:.94rem;color:var(--text);min-width:0}
.cli-med-valor{font-size:1rem;font-weight:600;color:var(--text);white-space:nowrap}
/* Ausência tem PESO menor e palavra própria — nunca zero, nunca traço mudo. */
.cli-med-ausente{font-size:.86rem;font-weight:400;color:var(--muted);white-space:nowrap}
.cli-med-det{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap}
.cli-med-ideal,.cli-med-nota{font-size:.76rem;color:var(--muted)}

/* ── Nossa situação ────────────────────────────────────────────────────── */

.cli-situacao{display:flex;flex-direction:column;gap:30px}
.cli-dim-titulo{
  margin:0 0 8px;font-size:.95rem;font-weight:600;letter-spacing:.2px;color:var(--text);
}
.cli-dim-linhas{border-top:1px solid var(--line-strong)}

/* ── Detalhes (evidência inline, sem modal e sem hover) ────────────────── */

.cli-details{margin-top:10px}
.cli-summary{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:.74rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:var(--accent-text);cursor:pointer;list-style:none;
}
.cli-summary::-webkit-details-marker{display:none}
.cli-summary::before{content:"\25B8";font-size:.8rem;line-height:1}
.cli-details[open] > .cli-summary::before{content:"\25BE"}
.cli-summary:hover{color:var(--text)}
.cli-evidencias,.cli-proveniencia{
  padding:6px 0 4px 14px;border-left:1px solid var(--line);
}
.cli-details-discreto{border-top:1px solid var(--line);padding-top:6px}

/* ── Registros ─────────────────────────────────────────────────────────── */

.cli-reg-lista{display:flex;flex-direction:column}
.cli-reg{padding:24px 0;border-bottom:1px solid var(--line)}
.cli-reg:first-child{padding-top:4px}
.cli-reg:last-child{border-bottom:none}
.cli-reg-titulo{margin:0 0 12px;font-size:1.12rem;font-weight:600;color:var(--text)}
/* Atributos do documento em duas colunas de leitura — registro editorial, não
   card: sem fundo, sem borda em volta, sem sombra. */
.cli-reg-attrs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:2px 28px;margin:0 0 18px;
}
.cli-reg-attr{display:flex;gap:8px;align-items:baseline;padding:3px 0}
.cli-reg-attr-rot{
  font-size:.68rem;font-weight:500;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.cli-reg-attr-val{font-size:.9rem;color:var(--text)}
.cli-reg-acoes{display:flex;gap:12px;flex-wrap:wrap}

/* ── Botões e links de ação ────────────────────────────────────────────── */

.cli-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 20px;border-radius:4px;
  font-family:var(--sans);font-size:.76rem;font-weight:500;letter-spacing:.5px;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  border:1px solid transparent;background-image:none;
}
/* Bronze SÓLIDO com #26251F por cima — a única forma aprovada de usar #B08D4F
   como preenchimento. Um por tela. */
.cli-btn-pri{background:var(--accent);color:var(--on-accent);border-color:var(--accent);text-transform:uppercase}
.cli-btn-pri:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.cli-btn-sec{background:transparent;color:var(--text);border-color:var(--line-strong)}
.cli-btn-sec:hover{border-color:var(--text);color:var(--text)}

.cli-link-acao{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.74rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:var(--accent-text);text-decoration:none;
}
.cli-link-acao:hover{text-decoration:underline}

.cli-plano-linha{margin:0 0 4px;font-size:1rem}
.cli-plano-nome{font-weight:600}
.cli-plano-data{color:var(--muted)}

/* ── Fecho: a página termina como documento, não como tela ─────────────── */

.cli-fecho{
  margin-top:8px;padding-top:26px;border-top:1px solid var(--line-strong);
}
.cli-fecho-titulo{
  font-family:var(--serif);font-weight:600;font-size:1.15rem;letter-spacing:.3px;
  margin:0 0 8px;color:var(--text);
}
.cli-fecho-texto{
  margin:0 0 6px;font-size:.92rem;line-height:1.75;color:var(--muted);
  max-width:var(--prosa);
}
.cli-fecho-assinatura{
  margin:16px 0 0;font-size:.74rem;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);
}

/* ── Login ─────────────────────────────────────────────────────────────── */

.cli-login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.cli-login{width:100%;max-width:380px}
/* Login COM a fotografia: o cartão sai do centro e encosta à esquerda, e a
   composição vira a do hero do site — texto de um lado, imagem do outro
   (decisão do Gabriel, 12/09: "alinhado à esquerda, deixa as colunas
   aparecerem"). O recuo acompanha o do site (`clamp(24px,6vw,64px)` a
   partir de uma coluna de 1180px) para as duas portas terem a mesma
   entrada. Mesmo ponto de corte do véu (700px): abaixo dele a foto sai de
   cena e o cartão volta a centralizar, que é o comportamento de sempre. */
@media (min-width:701px){
  .cli-login-body{
    justify-content:flex-start;
    padding-left:max(calc((100vw - 1180px) / 2), clamp(24px,6vw,64px));
  }
  /* REVOGADO em 14/09 (decisão do Gabriel): marca e legenda voltam a
     centralizar DENTRO do cartão. O raciocínio de 12/09 era que, com o
     bloco encostado à esquerda, centrar criaria um segundo eixo — mas o
     cartão tem 380px e a marca 300px, então o que a regra produzia era uma
     marca visivelmente mais curta que os campos, encostada num canto, com
     a legenda repetindo o desencontro embaixo. O eixo que vale aqui é o
     dos CAMPOS, e é nele que os dois passam a centrar. */
}
/* ── Fluxo do onboarding: port LITERAL do mockup onboarding_fixo ─────────
   Decisão do Gabriel (09/09): "faz igual o mockup". Este bloco é o CSS do
   mockup, escopado em .cli-fluxo-body, com os tokens renomeados 1:1 para os
   da casa (--papel→--bg, --filete→--line, --bronze-letra→--accent-text…).
   Nada de tradução criativa: alterar aparência aqui é divergir do mockup.
   O wizard usa também .cli-fluxo-fixo (palco de altura fixa, título sempre
   no mesmo Y, só o miolo rola); as irmãs (acordos, documentos, status)
   rolam normal. Tudo CSS puro — o Client não serve .js (T-C01-73). */
.cli-fluxo-body{padding:0;font-size:16px;line-height:1.45}
.cli-fluxo-fixo{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.cli-fluxo-body .banda{background:var(--slate);flex:none}
.cli-fluxo-body .banda-in{max-width:820px;margin:0 auto;padding:13px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.cli-fluxo-body .marca-img{width:247px;flex:none;display:block}
.cli-fluxo-body .banda-cliente{font-size:13px;color:var(--cover-sub)}
.cli-fluxo-body .palco{flex:1;min-height:0;display:flex;flex-direction:column;
  max-width:820px;width:100%;margin:0 auto;padding:0 24px}
/* o form abraça card+rodapé sem quebrar o flex do palco (mockup não tem
   form — o avanço lá é JS; aqui é POST) */
.cli-fluxo-body .palco-form{flex:1;min-height:0;display:flex;flex-direction:column;margin:0}
.cli-fluxo-body .topo{flex:none;padding:26px 0 0;display:flex;flex-direction:column;gap:12px}
.cli-fluxo-body .eyebrow{font-size:12px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);min-height:15px}
.cli-fluxo-body .pontos{display:flex;gap:5px}
.cli-fluxo-body .pontos span{height:3px;flex:1;background:var(--line);border-radius:2px}
.cli-fluxo-body .pontos span.feito{background:var(--text)}
.cli-fluxo-body .card{flex:1;min-height:0;padding:28px 2px 14px;
  display:flex;flex-direction:column;justify-content:flex-start;gap:20px;overflow-y:auto}
.cli-fluxo-body .card-secao{font-size:12px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--accent-text)}
.cli-fluxo-body .card-titulo{margin:0;font-family:var(--serif);font-weight:500;
  font-size:27px;line-height:1.15;letter-spacing:.2px;text-wrap:balance}
.cli-fluxo-body .card-perg{margin:0;font-family:var(--serif);font-weight:500;
  font-size:30px;line-height:1.16;letter-spacing:.2px;text-wrap:balance}
.cli-fluxo-body .card-nota{margin:0;font-size:15px;color:var(--text);max-width:62ch}
/* ── Fotografia do site na porta do portal (pedido do Gabriel, 12/09) ─────
   A MESMA `fundo_hero.webp` do site: quem vem da página reconhece o lugar.
   Fica no LOGIN, e só nele. Chegou a entrar na primeira tela do wizard e
   saiu no mesmo dia: lá ela revelava o vazio da tela (dois campos e um
   branco grande) em vez de preenchê-lo. O login é a porta de quem VOLTA —
   quem é novo nem passa por ela, porque o convite abre a sessão e leva
   direto ao wizard.

   Vem por `/marca/fundo_hero.webp`, não por `assets_client/`: a T-C01-73
   deixa ali só css, woff2 e ico. A trava existe contra JS e DADO, e foto de
   marca não é nem um nem outro — mas a trava é boa, e quem se adapta é a
   foto. Mesmo caminho que a marca gráfica já faz.

   Foto e véu são pseudo-elementos FIXOS no viewport, não `background` do
   body: o body do login é flex com `min-height:100vh`, e imagem ali é
   pintada contra a caixa dele — sobra faixa clara onde o canvas não recebe
   a foto. `::before` é a foto e `::after` é o véu porque, na mesma camada,
   `::after` pinta por cima: a ordem de pintura É a mecânica aqui. */
.cli-login-body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:var(--bg) url('/marca/fundo_hero.webp') no-repeat center center;
  background-size:cover;
}
/* Véu de legibilidade — o gradiente ESTRUTURAL que o DESIGN.md §14.2 admite
   sobre fotografia, com a medida obrigatória no comentário.

   Com o cartão à ESQUERDA, o véu é lateral, como o do site: chapado onde
   vive a tinta e abrindo depois dela, para as colunas aparecerem inteiras
   em vez de espiar por trás de um esmaecido. Um véu radial chegou a ser
   usado enquanto o cartão era centrado; virou lateral com o alinhamento à
   esquerda, em 12/09.

   O limite opaco é MEDIDO, e a primeira tentativa estava errada — vale
   registrar, porque o erro é instrutivo. No arranjo centrado, com o opaco
   em 34% do raio, o pior canto do cartão caía a 0,47: havia fotografia
   atrás dos cantos, invisível a olho nu. Só a medição pegou.

   Aqui o limite é a borda direita do cartão mais uma folga, tudo em
   unidades do próprio layout: recuo da esquerda + 380px de cartão + 48px
   de respiro. Depois disso a foto é foto. Sobre #F7F6F3 chapado, o
   contraste é o de qualquer outra tela do portal: `--text` 13,28:1 ·
   `--muted` 6,66:1 · `--accent-text` 5,34:1 — AA e AAA. Mais conservador
   que o hero do site, onde a copy repousa sobre véu parcial (5,09:1 no
   pior caso), porque aqui não há um pixel de foto atrás de letra. */
.cli-login-body::after{
  --recuo:max(calc((100vw - 1180px) / 2), clamp(24px,6vw,64px));
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,
    var(--bg) 0,
    var(--bg) calc(var(--recuo) + 380px + 48px),
    color-mix(in srgb, var(--bg) 78%, transparent)
      calc(var(--recuo) + 380px + 150px),
    color-mix(in srgb, var(--bg) 38%, transparent)
      calc(var(--recuo) + 380px + 280px),
    transparent calc(var(--recuo) + 380px + 420px));
}
/* O cartão sobe acima do véu; sem isto o gradiente cobriria os campos. */
.cli-login-body>.cli-login{position:relative;z-index:1}
/* Em viewport pequeno a foto encosta no cartão por todos os lados e vira
   ruído atrás de campo de senha. Volta a ser papel limpo, que é o
   comportamento honesto. */
@media (max-width:700px){
  .cli-login-body::before,.cli-login-body::after{display:none}
}

/* Saudação acima do título da tela (pedido 11/09) — irmã da .hero-oi da
   boas-vindas, dimensionada para o título de 27/30px do card. */
.cli-fluxo-body .card-oi{display:block;font-size:17px;font-style:italic;
  font-weight:400;color:var(--muted);letter-spacing:.3px;margin-bottom:4px}
/* boas-vindas: nome em destaque, mesma âncora de topo (mockup .hero-*) */
.cli-fluxo-body .hero-titulo{margin:0;font-family:var(--serif);font-weight:500;
  font-size:44px;line-height:1.02;letter-spacing:.2px}
.cli-fluxo-body .hero-oi{display:block;font-size:20px;font-style:italic;
  font-weight:400;color:var(--muted);letter-spacing:.3px;margin-bottom:2px}
.cli-fluxo-body .hero-intro{margin:0;font-size:15px;color:var(--text);max-width:62ch}
.cli-fluxo-body .card-lista{margin:0;padding-left:20px;display:flex;
  flex-direction:column;gap:5px;font-size:15px;max-width:62ch}
.cli-fluxo-body .card ol{margin:0;padding-left:20px;display:flex;
  flex-direction:column;gap:5px;font-size:15px}
.cli-fluxo-body .est.ok{color:var(--muted)}
.cli-fluxo-body .est.an{color:var(--muted);font-style:italic}
.cli-fluxo-body .est.pd{color:var(--accent-text);font-weight:500}
/* escolha única em card com dot: radio real escondido mas focável; estado
   desenhado por :has() — o mockup faz por JS, aqui é CSS puro */
.cli-fluxo-body .opcoes{display:flex;flex-direction:column;gap:8px;max-width:460px}
.cli-fluxo-body .opcao{display:flex;align-items:center;gap:14px;text-align:left;
  cursor:pointer;font-family:var(--sans);font-size:16px;color:var(--text);
  background:#FFFFFF;border:1px solid var(--line);border-radius:4px;padding:11px 16px}
.cli-fluxo-body .opcao:hover{border-color:var(--line-strong)}
.cli-fluxo-body .opcao input{position:absolute;width:1px;height:1px;opacity:0}
.cli-fluxo-body .opcao:has(input:checked){border-color:var(--accent-text);
  box-shadow:inset 0 0 0 1px var(--accent-text)}
.cli-fluxo-body .opcao:has(input:focus-visible){outline:2px solid var(--accent-text);outline-offset:2px}
/* Opção com título + descrição (gate de origem dos dados): os dois em
   BLOCO. Eram inline, e o texto grande saía colado no pequeno — achado do
   teste ao vivo de 11/09. O alinhamento sobe para o topo quando há duas
   linhas, senão o dot fica no meio do parágrafo. */
.cli-fluxo-body .opcao-rot{display:flex;flex-direction:column;min-width:0}
.cli-fluxo-body .opcao-t{display:block;font-weight:600}
.cli-fluxo-body .opcao-d{display:block;margin-top:3px;font-size:13px;
  line-height:1.45;color:var(--muted)}
.cli-fluxo-body .opcao:has(.opcao-d){align-items:flex-start}
.cli-fluxo-body .opcao:has(.opcao-d) .dot{margin-top:2px}
.cli-fluxo-body .dot{width:16px;height:16px;border-radius:50%;
  border:1px solid var(--line-strong);flex:none;position:relative}
.cli-fluxo-body .opcao:has(input:checked) .dot{border-color:var(--accent-text)}
.cli-fluxo-body .opcao:has(input:checked) .dot::after{content:"";position:absolute;
  inset:3px;border-radius:50%;background:var(--accent-text)}
/* sim/não e matriz de conhecimento: pergunta à esquerda, segmento à direita */
.cli-fluxo-body .simno{display:flex;flex-direction:column}
.cli-fluxo-body .simno-linha{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
/* Matriz de conhecimento: altura de duas linhas RESERVADA em cada pergunta.
   Os rótulos literais da Ficha v1.2 têm comprimentos muito diferentes
   ("Ações" contra "Renda fixa (Tesouro Direto, emissão bancária)"), e as
   telas 1 e 2 saíam com alturas distintas — a segunda "pulava" ao avançar
   (teste ao vivo 11/09). Reservar iguala as duas sem tocar nos rótulos, que
   são o contrato de equivalência com a ficha. Só aqui: nas telas de sim/não
   a reserva engordaria quem já disputa o palco fixo. */
.cli-fluxo-body .simno-alto .simno-linha{min-height:75px}
.cli-fluxo-body .simno-linha:last-child{border-bottom:none}
.cli-fluxo-body .simno-perg{font-size:16px;max-width:52ch}
.cli-fluxo-body .seg{display:flex;gap:8px;flex:none}
.cli-fluxo-body .seg label{font-family:var(--sans);font-size:14px;color:var(--muted);
  background:none;border:1px solid var(--line);border-radius:4px;padding:9px 16px;
  cursor:pointer;white-space:nowrap;min-width:92px;display:inline-flex;
  align-items:center;justify-content:center;text-align:center}
.cli-fluxo-body .seg input{position:absolute;width:1px;height:1px;opacity:0}
/* selecionado SEM engordar a fonte: peso mudaria a largura e desalinharia
   as colunas entre linhas (visto ao vivo 09/09) — borda + fundo sinalizam */
.cli-fluxo-body .seg label:has(input:checked){background:#FFFFFF;
  border-color:var(--accent-text);color:var(--text);
  box-shadow:inset 0 0 0 1px var(--accent-text)}
.cli-fluxo-body .seg label:has(input:focus-visible){outline:2px solid var(--accent-text);outline-offset:2px}
.cli-fluxo-body .checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;max-width:640px}
.cli-fluxo-body .check{display:flex;gap:12px;align-items:flex-start;font-size:16px;
  cursor:pointer;color:var(--text);text-transform:none;font-weight:400;letter-spacing:normal}
.cli-fluxo-body .check input{accent-color:var(--accent-text);width:17px;height:17px;
  margin-top:2px;flex:none}
/* formulários de dados — inputs/select/textarea IGUAIS ao mockup, no escopo
   inteiro do fluxo (não só .campo: as células de linha também). O foco é
   anel por box-shadow, como lá — outline recortava a borda esquerda. */
.cli-fluxo-body .grade{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}
.cli-fluxo-body .grade-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px 26px}
.cli-fluxo-body .cheio{grid-column:1 / -1}
.cli-fluxo-body .campo{display:flex;flex-direction:column;gap:6px}
.cli-fluxo-body .campo label,.cli-fluxo-body .rotulo{font-size:12px;font-weight:500;
  letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0}
/* tel e email entram na MESMA regra que text: sem isso o campo cai no
   desenho padrão do navegador e sai fino ao lado dos irmãos (visto ao vivo
   quando telefone/e-mail ganharam tipo próprio, 11/09). */
.cli-fluxo-body input[type=text],.cli-fluxo-body input[type=date],
.cli-fluxo-body input[type=tel],.cli-fluxo-body input[type=email],
.cli-fluxo-body select,.cli-fluxo-body textarea{
  font-family:var(--sans);font-size:16px;color:var(--text);
  background:#FFFFFF;border:1px solid var(--line);border-radius:4px;
  padding:10px 12px;width:100%;margin:0;min-height:0}
.cli-fluxo-body textarea{resize:vertical;min-height:70px;line-height:1.5}
.cli-fluxo-body input::placeholder,.cli-fluxo-body textarea::placeholder{
  color:rgba(90,87,81,.5)}
.cli-fluxo-body input[type=text]:focus-visible,.cli-fluxo-body input[type=date]:focus-visible,
.cli-fluxo-body input[type=tel]:focus-visible,.cli-fluxo-body input[type=email]:focus-visible,
.cli-fluxo-body select:focus-visible,
.cli-fluxo-body textarea:focus-visible{
  outline:none;border-color:var(--line-strong);
  box-shadow:0 0 0 2px rgba(126,97,48,.30)}
.cli-fluxo-body select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235A5751' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.cli-fluxo-body input[type=date]{font-variant-numeric:tabular-nums}
.cli-fluxo-body input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.cli-fluxo-body .ajuda{margin:0;font-size:12px;color:var(--muted)}
.cli-fluxo-body .linhas{display:flex;flex-direction:column;gap:8px}
/* Linhas repetiveis com a MESMA altura dos demais campos (decisao do
   Gabriel, 11/09, no terceiro teste ao vivo: "sai do padrao dos outros
   campos, fica mais estreita verticalmente"). Isto REVOGA a compactacao de
   09/09 — ganhar uma linha a vista nao compensava o campo parecer de outra
   familia. O `line-height` fixo iguala texto e data: o input[type=date] do
   Chrome carrega caixa intrinseca mais alta, residuo que sobrava depois de
   igualar so o padding (medido em 11/09: 36px contra 38px). */
.cli-fluxo-body .linhas input[type=text],
.cli-fluxo-body .linhas input[type=date]{padding:10px 12px;line-height:20px}
.cli-fluxo-body .lcab,.cli-fluxo-body .lrep{display:grid;gap:12px;align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.cli-fluxo-body .lcab span{font-size:11px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted)}
.cli-fluxo-body .lrep input[readonly]{background:var(--surface);color:var(--text)}
.cli-fluxo-body .rem{font-family:var(--sans);font-size:16px;
  color:var(--muted);background:none;border:none;cursor:pointer;height:30px}
.cli-fluxo-body .rem:hover{color:var(--danger)}
.cli-fluxo-body .fixo-tag{font-size:10px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);text-align:center}
/* Família: regime/cônjuge SOMEM até o estado civil pedir — CSS puro,
   :has() sobre o value do select (o so-uniao do mockup, sem .js). A
   obrigatoriedade condicional do servidor continua sendo a verdade. */
.cli-fluxo-body .grade .campo.so-uniao{display:none}
.cli-fluxo-body .grade:has(select[name="estado_civil"] option[value="Casado(a)"]:checked) .campo.so-uniao,
.cli-fluxo-body .grade:has(select[name="estado_civil"] option[value="União estável"]:checked) .campo.so-uniao{
  display:flex}
/* Ocupação: o detalhe da passagem pelo mercado só aparece com "Sim"
   marcado — mesmo desenho condicional da Família, gatilho em radio. */
.cli-fluxo-body .grade:has(.campo.so-mercado){display:none}
.cli-fluxo-body .card:has(input[name="trabalhou_mercado"][value="Sim"]:checked) .grade:has(.campo.so-mercado){display:grid}
/* Aviso de Privacidade embutido (feedback 10/09): o PDF rola dentro da
   moldura, filete de 1px — a página não cresce. */
.cli-fluxo-body .doc-embed{width:100%;max-width:660px;height:320px;
  border:1px solid var(--line);border-radius:4px;background:#FFFFFF}
/* ícone de info no título com dica no hover/focus (PEP, feedback 10/09):
   sem JS — :hover/:focus mostram a caixa; filete 1px, sem sombra. */
.cli-fluxo-body .info{position:relative;display:inline-flex;width:22px;
  height:22px;border:1px solid var(--line-strong);border-radius:50%;
  color:var(--muted);font-family:var(--serif);font-size:14px;
  font-style:italic;align-items:center;justify-content:center;
  vertical-align:middle;cursor:help;margin-left:6px}
.cli-fluxo-body .info .info-caixa{display:none;position:absolute;left:0;
  top:28px;z-index:10;width:min(52ch,72vw);background:#FFFFFF;
  border:1px solid var(--line);border-radius:4px;padding:12px 14px;
  font-family:var(--sans);font-size:13px;font-style:normal;
  color:var(--text);line-height:1.5;white-space:pre-line;text-align:left}
.cli-fluxo-body .info:hover .info-caixa,
.cli-fluxo-body .info:focus .info-caixa,
.cli-fluxo-body .info:focus-within .info-caixa{display:block}
/* Outras situações: o detalhe só aparece com algum Sim de fator de risco
   (Ficha v1.2 §4) — previdência/seguros pedem documento, não detalhe. */
.cli-fluxo-body .campo.so-situacao{display:none}
.cli-fluxo-body .card:has(input[name="veiculo_exterior"][value="Sim"]:checked) .campo.so-situacao,
.cli-fluxo-body .card:has(input[name="recursos_especie"][value="Sim"]:checked) .campo.so-situacao,
.cli-fluxo-body .card:has(input[name="ativos_digitais"][value="Sim"]:checked) .campo.so-situacao,
.cli-fluxo-body .card:has(input[name="sancao_processo"][value="Sim"]:checked) .campo.so-situacao{
  display:flex}
/* aparte (bloco de leitura destacado) e botão .add do mockup */
.cli-fluxo-body .aparte{background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:14px 16px;display:flex;flex-direction:column;
  gap:8px;max-width:660px}
.cli-fluxo-body .aparte-t{font-size:12px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase}
.cli-fluxo-body .aparte p,.cli-fluxo-body .aparte li{font-size:14px;color:var(--muted)}
.cli-fluxo-body .aparte ol{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.cli-fluxo-body .add{align-self:flex-start;font-family:var(--sans);font-size:13px;
  color:var(--muted);background:none;border:1px solid var(--line);
  border-radius:4px;padding:8px 18px;cursor:pointer}
.cli-fluxo-body .add:hover{border-color:var(--line-strong);color:var(--text)}
/* upload embutido na linha de documento (o mockup simula por JS; aqui é um
   form real por linha, multipart + CSRF). O input nativo fica ESCONDIDO
   dentro do label .add — clicar no botão abre o seletor; escolhido o
   arquivo (input required fica :valid), o Confirmar aparece ao lado. */
.cli-fluxo-body .docl-dir form{display:flex;gap:8px;align-items:center;margin:0}
.cli-fluxo-body .docl-dir input[type=file]{display:none}
.cli-fluxo-body .docl-dir .add{align-self:auto;white-space:nowrap}
.cli-fluxo-body .docl-dir button[type=submit]{display:none}
.cli-fluxo-body .docl-dir form:has(input[type=file]:valid) button[type=submit]{display:inline-block}
.cli-fluxo-body .docl-dir form:has(input[type=file]:valid) label.add{
  border-color:var(--accent-text);color:var(--text)}
/* estados de doc/assinatura (acordos e documentos) */
.cli-fluxo-body .doclist{max-width:660px}
.cli-fluxo-body .docl{display:flex;align-items:center;gap:20px;padding:14px 0;
  border-bottom:1px solid var(--line)}
.cli-fluxo-body .docl>div:first-child{flex:1;min-width:0}
.cli-fluxo-body .docl-dir{display:flex;align-items:center;gap:16px;flex:none}
.cli-fluxo-body .docl:last-of-type{border-bottom:none}
.cli-fluxo-body .docn{font-size:16px;font-weight:500}
.cli-fluxo-body .docm{font-size:12px;color:var(--muted);margin-top:2px}
.cli-fluxo-body .est{font-size:12px;white-space:nowrap}
.cli-fluxo-body .rodape{flex:none;display:flex;align-items:center;
  justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:16px 0}
.cli-fluxo-body .rascunho{font-size:12px;color:var(--muted)}
.cli-fluxo-body .navbtns{display:flex;gap:12px;margin-left:auto}
.cli-fluxo-body .btn-sec{display:inline-flex;align-items:center;font-family:var(--sans);
  font-size:13px;color:var(--muted);background:none;border:1px solid var(--line);
  border-radius:4px;padding:11px 22px;cursor:pointer;text-decoration:none}
.cli-fluxo-body .btn-sec:hover{border-color:var(--line-strong);color:var(--text)}
.cli-fluxo-body .btn-pri{font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.5px;text-transform:uppercase;color:var(--on-accent);
  background:var(--accent);border:1px solid var(--accent);border-radius:4px;
  padding:13px 26px;cursor:pointer}
.cli-fluxo-body .btn-pri:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.cli-fluxo-body .legal{flex:none;text-align:center;font-size:11px;
  color:var(--muted);padding:0 0 10px}
@media (max-width:640px){
  .cli-fluxo-body .grade,.cli-fluxo-body .checks{grid-template-columns:1fr}
  .cli-fluxo-body .card-perg{font-size:24px}
  .cli-fluxo-body .card-titulo{font-size:23px}
  .cli-fluxo-body .simno-linha{flex-direction:column;align-items:flex-start;gap:10px}
  /* Matriz de conhecimento no celular: os três rótulos literais da Ficha
     somam ~410px em uma linha e "Já investi" saía da tela a 390px (teste de
     navegador, 06/10). O mockup não define o estreito; aqui as três opções
     dividem a largura em partes iguais e o rótulo quebra dentro do botão. */
  .cli-fluxo-body .simno-alto .seg{width:100%}
  .cli-fluxo-body .simno-alto .seg label{flex:1 1 0;min-width:0;
    white-space:normal;padding:9px 8px}
  .cli-fluxo-body .banda-in,.cli-fluxo-body .palco{padding-left:18px;padding-right:18px}
  .cli-fluxo-body .marca-img{width:220px}
}
/* A cor da marca é do CONTEXTO, não da classe: `.cli-marca` nasce em
   `--cover-title` (#F2F2F2) porque o lugar dela é a faixa slate do topo. No
   login o fundo é papel, e ali o mesmo token dava 1,02:1 — a marca da firma
   sumia na primeira tela que o cliente vê. Descoberto por captura em
   28/08/2026, não por leitura: os dois valores são claros, e no fonte a regra
   parece razoável. */
.cli-login .cli-marca{display:block;margin-bottom:6px;font-size:1.6rem;
  color:var(--text)}
.cli-login-sub{margin:0 0 28px;font-size:.95rem;color:var(--muted)}
.cli-form{display:flex;flex-direction:column}
.cli-label{
  font-size:.68rem;font-weight:500;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.cli-input{
  font-family:var(--sans);font-size:1rem;color:var(--text);
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:12px 14px;margin-bottom:20px;min-height:44px;width:100%;
}
.cli-input:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-color:var(--accent-text)}
.cli-form .cli-btn{margin-top:4px}
/* SELETOR DE ARQUIVO (14/09). O input[type=file] cru aparecia com o botao
   do sistema operacional -- fonte, cinza e cantos que nao sao desta casa --
   ao lado de "Nenhum arquivo escolhido". `::file-selector-button` veste o
   botao NATIVO e preserva o nome do arquivo que o navegador escreve ao
   lado: a alternativa comum (input escondido + <label> estilizado) fica
   mais bonita e MENTE, porque perde o retorno de qual arquivo foi
   escolhido -- e sem .js (T-C01-73) nao ha como reconstruir esse texto.
   O input em si perde a moldura: quem tem forma de campo aqui e o botao. */
.cli-input[type=file]{
  border:1px dashed var(--line);background:transparent;
  padding:10px 12px;line-height:1.4;font-size:.88rem;color:var(--muted);
  cursor:pointer;
}
.cli-input[type=file]::file-selector-button{
  font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;color:var(--text);
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:4px;padding:9px 16px;margin-right:14px;min-height:36px;
  cursor:pointer;
}
.cli-input[type=file]:hover::file-selector-button{
  border-color:var(--accent-text);color:var(--accent-text);
}
.cli-input[type=file]:focus-visible{border-style:solid}
/* ERRO DE CAMPO (14/09) — sinalizado SEM mudar a altura da tela.
   A caixa `.cli-erro` por campo custava ~56px cada, e três campos em falta
   faziam o palco fixo do wizard passar a rolar: a validação virava a causa
   do defeito que a régua da casa proíbe. Agora o erro vive no rótulo que já
   existe (asterisco + mensagem, mesma linha) e no contorno do controle.
   O asterisco vem ANTES da mensagem porque cor não pode ser o único sinal
   (DESIGN.md): quem não distingue vermelho ainda vê o `*`. */
.cli-fluxo-body .campo-erro{
  color:var(--danger);font-weight:600;font-size:12px;
  margin-left:8px;letter-spacing:0;text-transform:none;
}
/* A regra dos campos do wizard e `.cli-fluxo-body input[type=text]` --
   classe + atributo + elemento. Marcar so por `[aria-invalid]` perdia no
   desempate de especificidade e o contorno nunca aparecia (visto ao vivo).
   O `inset` reforca a espessura sem mexer no box e, portanto, sem mover
   um pixel do layout. */
.cli-fluxo-body input[aria-invalid="true"],
.cli-fluxo-body select[aria-invalid="true"],
.cli-fluxo-body textarea[aria-invalid="true"]{
  border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger);
}
/* Grupo de segmentos (sim/não): o controle é um punhado de radios, então
   quem carrega o contorno é o filete da própria linha. */
.cli-fluxo-body .simno-erro{box-shadow:inset 2px 0 0 var(--danger)}
.cli-fluxo-body .simno-erro .simno-perg{padding-left:10px}

/* Erro GERAL da tela, com filete e palavra — o vermelho nunca é o único
   sinal, e nunca vira preenchimento. */
.cli-erro{
  margin:0 0 20px;padding:10px 12px;font-size:.88rem;color:var(--danger);
  border:1px solid var(--danger);border-radius:4px;background:transparent;
}
.cli-login-nota{margin:28px 0 0;font-size:.72rem;line-height:1.7;color:var(--muted)}
/* A LEGENDA institucional centraliza (mockup .legal); as outras notas de
   página — progresso, voltar — continuam à esquerda, por isso a classe é
   um modificador e não um estilo novo de .cli-login-nota. */
.cli-legenda{text-align:center}

/* ── Larguras ──────────────────────────────────────────────────────────── */

@media (max-width:900px){
  .cli-band{align-items:flex-start;gap:10px}
  .cli-nav{gap:16px}
}
@media (max-width:560px){
  body{font-size:15px}
  .cli-topo .cli-logo{width:210px}
  .cli-nav{gap:14px}
  .cli-nav-item{font-size:.68rem;letter-spacing:.6px}
  /* O valor desce para a própria linha: em 320px, rótulo e número na mesma
     faixa produzem overflow horizontal, que é o defeito que mais estraga
     leitura no celular. */
  .cli-med{grid-template-columns:1fr}
  .cli-med-valor,.cli-med-ausente{white-space:normal}
  .cli-reg-acoes{flex-direction:column;align-items:stretch}
  .cli-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}

@media print{
  .cli-topo,.cli-rodape,.cli-skip{display:none}
  body{background:#fff}
}

/* O CORPO DE TEXTO do Cofre e o do portal (1,7), nao o do wizard (1,45).
   Ele carrega `cli-fluxo-body` pela base e pela banda, e herdava junto a
   entrelinha APERTADA -- que existe porque o wizard tem palco fixo e conta
   cada pixel. O Cofre rola (a propria docstring dele diz isso), entao nao
   paga esse preco: aqui a entrelinha apertada so fazia o mesmo paragrafo
   parecer outro tipo de texto ao trocar de pagina. */
.cli-cofre-body{line-height:1.7}

/* ── Cofre de documentos ─────────────────────────────────────────
   Port do mockup `vault.html`. O corpo leva `cli-fluxo-body` (base e banda)
   MAS NUNCA `cli-fluxo-fixo`: o cofre é página que rola, não palco fixo — o
   mockup dele não tem 100vh nem overflow:hidden, e forçar o palco aqui
   cortaria a lista de documentos, que cresce com o tempo.

   A BANDA aqui é a da família `vault`/`portal_home`, não a do wizard, e a
   diferença está escrita nos mockups: 1160px contra 820px, marca de 236px
   contra 247px, e o Sair que só existe deste lado. Por isso os overrides
   abaixo — sem eles a marca fica centrada em 820px enquanto o conteúdo
   corre até 1160px, e o eixo vertical da página quebra em dois. */
.cli-cofre-body .banda{position:sticky;top:0;z-index:5}
.cli-cofre-body .banda-in{max-width:1160px;padding:13px 28px}
.cli-cofre-body .marca-img{width:236px}
.cli-cofre-body .banda-dir{display:flex;align-items:center;gap:20px}
/* `.sair` das paginas de fluxo herda a MESMA regra da area (`.cli-sair`)
   -- duas classes porque os renderizadores sao dois, um estilo so. */
.cli-cofre-body .sair{font-size:.72rem;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;color:var(--cover-sub);text-decoration:none;
  display:inline-flex;align-items:center;
  border:1px solid rgba(220,220,220,.4);border-radius:4px;padding:6px 13px}
.cli-cofre-body .sair:hover{border-color:var(--cover-sub);
  color:var(--cover-title)}
/* Largura e recuo vem da regra compartilhada com `.cli-main` (o titulo
   do Cofre nascia 20px acima do das outras paginas: 44px fixos contra o
   clamp de ate 64). Aqui fica so o que e proprio: o flex da coluna e o pe
   mais folgado, porque o Arquivo termina a pagina. */
.cli-cofre-body .pagina{padding-bottom:72px}
.cli-cofre-body .volta{font-size:13px;color:var(--muted);
  text-decoration:none}
.cli-cofre-body .volta:hover{color:var(--text)}
/* O mockup zera margens com `*{margin:0}`; o client.css não tem esse reset
   global (e não deve ganhar um agora — alcançaria as outras páginas). Sem
   isto, a margem padrão de <p> soma ao gap dos containers e o respiro sai
   pelo dobro. Escopado no cofre, que é quem porta este mockup. */
.cli-cofre-body .cabeca p,.cli-cofre-body .docm,
.cli-cofre-body .rail-nota{margin:0}
.cli-cofre-body .cli-form+.docm{margin-top:12px}
/* pendência de envio — o único acento sólido da tela (mockup) */
/* A faixa de acao mora na COLUNA DA DIREITA, logo acima da area de envio
   (decisao do Gabriel, 14/09). Em faixa cheia ela atravessava a pagina para
   dizer uma frase curta, e o botao que trazia era uma ancora para um
   formulario que agora esta dois centimetros abaixo dela. Continua sendo o
   unico acento solido da tela -- so que ao lado da acao que ela pede. */
.cli-cofre-body .acao{display:block;
  background:var(--surface);border:1px solid var(--accent-text);
  border-radius:8px;padding:22px 26px}
.cli-cofre-body .acao-tit{font-family:var(--serif);font-size:20px;
  font-weight:500;line-height:1.3}
.cli-cofre-body .acao-tit strong{font-weight:600}
/* Os nomes do que falta. Sem marcador de lista: a faixa inteira ja e o
   acento, e bolinha dentro de caixa acentuada e ornamento sobre ornamento
   (DESIGN.md). O filete de 1px separa sem pesar. */
.cli-cofre-body .acao-lista{list-style:none;margin:14px 0 0;padding:0;
  display:flex;flex-direction:column}
.cli-cofre-body .acao-lista li{font-size:14px;color:var(--text);
  padding:8px 0;border-top:1px solid var(--line)}
.cli-cofre-body .acao-mais{color:var(--muted)}
/* O cabecalho mora DENTRO da coluna principal, e a faixa no topo da outra:
   uma grade so, colunas fluindo independentes. O respiro entre o cabecalho
   e a primeira secao e o mesmo `gap` da coluna. */
.cli-cofre-body .grade{display:grid;
  grid-template-columns:minmax(0,1fr) 352px;gap:40px 64px;align-items:start}
.cli-cofre-body .col-main,.cli-cofre-body .col-rail{display:flex;
  flex-direction:column;gap:40px;min-width:0}
.cli-cofre-body .sec{display:flex;flex-direction:column;gap:14px}
.cli-cofre-body .sec-head{display:flex;align-items:baseline;
  justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--line);padding-bottom:10px}
.cli-cofre-body .sec-tit{font-size:12px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase}
.cli-cofre-body .sec-n{font-size:12px;color:var(--muted)}
.cli-cofre-body .docs{display:flex;flex-direction:column}
/* a linha inteira é o link; navegação não ganha botão (padrão da home) */
.cli-cofre-body .docrow{display:block;text-decoration:none;color:inherit;
  padding:14px 0;border-bottom:1px solid var(--line)}
.cli-cofre-body .docrow:last-child{border-bottom:none;padding-bottom:0}
.cli-cofre-body .docrow:first-child{padding-top:0}
.cli-cofre-body .docn{display:block;font-size:14px;font-weight:500}
.cli-cofre-body a.docrow:hover .docn{color:var(--accent-text);
  text-decoration:underline;text-underline-offset:2px}
.cli-cofre-body .docm{display:block;font-size:12px;color:var(--muted);
  margin-top:2px}
/* item do trilho: não é navegação — carrega estado */
.cli-cofre-body .subrow{display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--line)}
.cli-cofre-body .subrow:last-child{border-bottom:none;padding-bottom:0}
.cli-cofre-body .subrow:first-child{padding-top:0}
/* estado — glifo + palavra, NUNCA só cor (DESIGN.md: cor não carrega
   informação sozinha) */
.cli-cofre-body .est{font-size:12px;margin-top:4px;display:inline-flex;
  align-items:center;gap:6px}
.cli-cofre-body .est-ok{color:var(--muted)}
.cli-cofre-body .est-and{color:var(--muted);font-style:italic}
.cli-cofre-body .est-falta{color:var(--accent-text);font-weight:500}
/* legenda do trilho: explicação separada da ação por filete, passos
   numerados em coluna (uso de sumário, DESIGN.md §14.12) */
.cli-cofre-body .rail-como{border-top:1px solid var(--line);padding-top:14px;
  display:flex;flex-direction:column;gap:10px}
.cli-cofre-body .rail-como-tit{font-size:11px;font-weight:500;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.cli-cofre-body .rail-nota{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:8px;font-size:12px;color:var(--muted);
  max-width:42ch}
.cli-cofre-body .rail-nota li{display:flex;gap:10px;line-height:1.5}
.cli-cofre-body .rail-nota .n{flex:none;width:12px;font-weight:500}
/* grupo dobrado do Arquivo (ano · edições anteriores): `<details>` NATIVO,
   linha da mesma coluna. Chevron explícito (§10) — nunca deduzir que algo
   expande. Não é .js e por isso não esbarra na T-C01-73: é elemento de HTML,
   como um <ul>. O `display:block` no summary é DESVIO consciente do mockup:
   ele mata o marcador só com `list-style:none` + `::-webkit-details-marker`,
   e há navegador em que isso não basta e aparecem DOIS chevrons (o nativo e
   o ::before). O mockup foi calibrado num browser; o portal roda em todos. */
.cli-cofre-body details.grupo{border-bottom:1px solid var(--line)}
.cli-cofre-body details.grupo:last-child{border-bottom:none}
.cli-cofre-body details.grupo>summary{display:block;list-style:none;
  cursor:pointer;padding:14px 0}
.cli-cofre-body details.grupo>summary::-webkit-details-marker{display:none}
.cli-cofre-body details.grupo>summary:hover .grupo-tit{color:var(--accent-text)}
.cli-cofre-body .grupo-tit{display:block;font-size:15px;font-weight:500}
.cli-cofre-body .grupo-tit::before{content:"\25B8";display:inline-block;
  width:18px;color:var(--muted)}
.cli-cofre-body details[open]>summary .grupo-tit::before{content:"\25BE"}
.cli-cofre-body .grupo-m{display:block;font-size:12px;color:var(--muted);
  margin-top:2px;padding-left:18px}
.cli-cofre-body details.grupo .docrow,
.cli-cofre-body details.grupo .subrow{padding-left:18px}
.cli-cofre-body details.grupo .docrow:first-of-type,
.cli-cofre-body details.grupo .subrow:first-of-type{padding-top:0}
.cli-cofre-body details.grupo .docrow:last-child,
.cli-cofre-body details.grupo .subrow:last-child{padding-bottom:14px}
/* rodapé de DOIS blocos (entidade · contato), como o mockup — a linha única
   centralizada continua valendo para as outras páginas de fluxo */
.cli-cofre-body .legal{max-width:1160px;margin:0 auto;padding:0 28px 28px;
  text-align:left;display:flex;align-items:baseline;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:12px;font-size:12px}
/* 1080px é o breakpoint do mockup, não 900: abaixo dele o trilho de 352px
   espremeria a coluna principal antes de a grade colapsar. */
@media (max-width:1080px){
  .cli-cofre-body .grade{grid-template-columns:1fr}
}
@media (max-width:680px){
  .cli-cofre-body .acao{flex-direction:column;align-items:flex-start}
  .cli-cofre-body .banda-cliente{display:none}
  .cli-cofre-body .marca-img{width:210px}
  .cli-h1,.cli-cofre-body .cabeca-tit{font-size:32px}
  .cli-cofre-body .docrow{flex-wrap:wrap}
  .cli-cofre-body .legal{flex-direction:column;gap:5px}
}