/* F1 C7a (ADR-0007): estilo mínimo, descartável junto com a tela.
   F1 C7b-1b: paleta da Gente RH, medida no próprio logo pelo PO. Contraste WCAG, medido: branco
   sobre --azul-escuro dá 9,44:1 (bom para qualquer texto); branco sobre --azul dá 4,72:1 (só texto
   grande ou faixa decorativa). Por isso texto branco e botões cheios só vão sobre o AZUL ESCURO; o
   azul claro fica em faixas, bordas e destaques. Nenhum text-transform: a caixa é decidida no valor
   (este comentário é a sentinela do W12, que mede a DECLARAÇÃO, não a palavra — emenda C7b-1b).
   F1 C7b-1c: layout. Cabeçalho que cabe em 72px sem empilhar de 900 a 1920px; "Dados pessoais" em
   sub-grupos; campo sensível SEM fundo colorido — um cadeado discreto junto ao rótulo, com title;
   célula sensível e célula comum com a MESMA altura; celular (< 400px) em uma coluna e sem rolagem
   horizontal. Sem @media: paddings encolhem por clamp() e a grade já é auto-fill.
   F1 OP-2 (aparência e usabilidade, pedidos do PO depois de usar a tela): P4 o rótulo cola no campo — a célula
   alinha pelo TOPO (rótulo, controle, ajuda embaixo) e o `margin-top: auto` do controle SAIU: era ele que, com a
   altura da célula ditada pela ajuda mais longa da linha, empurrava o campo para o pé e deixava o rótulo lá em cima
   (medido pela sonda de alinhamento: 34 campos com mais de 8px de distância a 1200px, ANTES). P6 o cadeado saiu;
   entrou `.restrito`, um rótulo discreto de seção no mesmo marcador. P9 a porta do OUTRO (`.porta`) e P3 os
   identificadores com "copiar" (`.identificador`). P1 tipografia e espaçamento de sistema em operação.
   F1 OP-4 (R3, Q62): o PO derrubou o limite de 72px do cabeçalho — o limite passa a 96px (W23). Logos maiores
   (44 e 54px), padding vertical .75rem, sombra leve e a linha de sessão SEM corte (o nowrap + ellipsis saiu: um e-mail
   longo quebra linha em vez de sumir). Seções com raio e sombra um pouco maiores e título com mais respiro. Nenhuma cor
   nova com texto branco; o contraste de cabeçalho e seções passa a ser medido (W67). R1: o bloco `.campo-com-botao`
   saiu com o botão do CEP — o CEP é um <label> comum da grade.
   F1 OP-5 (ADR-0014, a CASCA e a PALETA GENTE): a tela deixa de ser um rolo único. D1: menu à esquerda (232px, fixo)
   + barra superior (56px: trilha e sessão) + conteúdo com UMA seção por vez; abaixo de 900px o menu recolhe para o
   botão da barra (o ÚNICO @media da tela — os seletores dentro dele são DIFERENTES dos de fora, de propósito: a suíte
   achata os blocos e mede cada um pelo seletor exato). A entrada fica FORA da casca: cartão centralizado sobre o
   degradê azul, faixa laranja fina. D7: TODA cor vive em :root; nenhum bloco escreve cor solta (o teste V10 cobra); o
   laranja #F18F00 é destaque, faixa e progresso — NUNCA fundo de texto branco (2,42:1; o teste V2 cobra); texto branco
   só sobre o azul-escuro (W17 continua). D5: tabelas no padrão de linhas de ~56px, número e CPF em monoespaçada, situação
   em pílula, linha inteira clicável, rodapé com a contagem. D6: os dez fieldsets viram dez passos (só ESCONDEM; o
   #form-ficha e o molde da correção não mudam) com barra de ações fixa no rodapé. D8: nenhum recurso externo — a Geist
   (SIL OFL) vem de apps/web/fontes/, e a pilha de sistema é o fallback. Nenhum `margin-top: auto` (W22 continua).
   F1 OP-6 (ADR-0015, o logo oficial — substitui a D10 do ADR-0014 — e os acabamentos do OP-5): D1 o dourado #FFC000 entra em
   :root como --dourado-sgrs e é cor do LOGOTIPO, e só dele (1,64:1 sobre branco; 5,75:1 sobre o azul-escuro), em texto
   grande e negrito; D2 a entrada ganha o logotipo acima do cartão numa faixa de azul-escuro SÓLIDO (é sobre ela que o
   dourado e o branco são medidos) e o palco do cartão leva o degradê VERTICAL, começando no mesmo azul-escuro (a ponta clara
   daria 2,88:1 ao dourado); o emblema num disco branco (a moldura verde some sobre o azul: 1,28:1); D3 o emblema no topo do
   menu com o título em azul-escuro e o logo da Gente pequeno nos dois rodapés. A1 o rodapé discreto da leitura; A3 botão
   desabilitado com cara de desabilitado; A4 o item ativo do menu com fundo suave e marcador laranja (o laranja é marca,
   nunca fundo de texto). Nenhuma Eras: "SGRS" é texto na fonte da tela.
   F1 OP-7 (a marca GENTE v1.2 no SGRS — ADR-0016, que supera o ADR-0015; REGULARIZAÇÃO por docs/execution/
   BLOCO_F1_OP7_AUTORIZACAO.md: o logo do kit foi aplicado por uma sessão de fora SEM autorização, e a autorização mediu o que
   existia e fechou o que faltou). D1: o logotipo montado do OP-6 (disco + sigla em dourado + subtítulo) vira UM <img> do SVG
   horizontal do kit — o NEGATIVO sobre a mesma faixa de azul-escuro da entrada (é para fundo escuro que ele existe), o A CORES
   sobre o branco do menu, ocupando a linha, com o <h1> abaixo. Saem --dourado-sgrs, .disco, .dizeres-do-logotipo, .sigla e
   .subtitulo. O SGRS escala pela LARGURA (height: auto). D2 (R2): o logo da Gente é o SVG horizontal a cores nos dois rodapés,
   pela altura (30px = ~127px de largura, acima dos 120px mínimos da marca); no rodapé do menu "uma solução" fica ACIMA dele —
   ao lado, nos 200px úteis, ele só cabia com 24px (102px, abaixo do mínimo). Nenhuma cor de interface muda: a paleta é do
   OP-8 (D6).
   F1 OP-8 (ADR-0017 — a PALETA e o ACABAMENTO da marca GENTE v1.2; substitui a D7 do ADR-0014 e cumpre a D6 do ADR-0016;
   docs/execution/BLOCO_F1_OP8_AUTORIZACAO.md). D1: os tokens de :root passam a ser os da marca — azul-profundo #072A5D,
   azul-energia #0E6CE2, tinta #1E2A3B, texto-secundário #6B778C, linha #D5DDEA, fundo-suave #EEF3FA, sgrs-arco #12A37B,
   sgrs-texto #0B7A5B; saem --azul, --azul-escuro, --laranja (os três), os três --degrade-* e, com eles, os dois restos da
   paleta do C7b-1b que só existiam para servi-los (--branco e --cinza-borda: a borda é a LINHA da marca); --destaque é o
   azul-profundo; --fundo, --superficie-cinza e --borda apontam para fundo-suave e linha; as sombras trocam o azul antigo pelo
   azul-profundo com o mesmo alfa; as cores funcionais (erro, ok, alerta, sensível, cadeado, véu, placeholder) NÃO mudam.
   D2 (contraste medido pelo Cowork e conferido pelo W70): texto branco SÓ sobre o azul-profundo (14,02:1; o azul-energia dá
   4,93 e a regra T12 pede 7); azul-energia é ACENTO (anel de foco, a porta "não encontrei meu curso" — link sobre branco);
   texto-secundário só sobre BRANCO (4,52; sobre o fundo-suave dá 4,06 e reprova) — por isso o item de lista (.item) fica
   branco (a superfície-suave dava 4,40), e sobre o fundo sensível (4,15) e o cadeado (3,92) o texto é a TINTA; o verde SGRS
   de texto é --sgrs-texto (5,32) e --sgrs-arco (3,21) é só elemento gráfico (o ícone do módulo, a barra de progresso);
   controle desabilitado (input:disabled, button:disabled) fica FORA da exigência (WCAG 1.4.3, componente inativo — D2.5,
   declarado no W70). D3: nenhum laranja — a faixa do cartão saiu, a barra de progresso é --sgrs-arco sólida. D4: sem
   filete à esquerda dos h2, sem marcador lateral no item ativo (fundo-suave, azul-profundo, 600), sem degradê em lugar
   nenhum. D5: a SAIRA (SIL OFL, do kit da marca: saira-latin-600, convertida a woff2 sem subconjunto — 14 KB) nos h2, h3, no
   título do cartão de entrada e na trilha; o corpo continua na Geist. D6: a entrada é UM bloco — azul-profundo sólido na
   tela inteira, o negativo (até 320px) e o cartão numa coluna centralizada nos dois eixos, ~2rem entre eles; o .palco e a
   emenda faixa/palco sumiram. D7: o <h1> do menu fica só para o leitor de tela (.so-leitor: absoluto, 1px, clip — nunca
   display: none). D8: o rodapé do menu cabe inteiro a 1280x720 e 1600x850 (medido pela sonda ANTES de editar: cabia; o corte
   era do print). D9: o .selo com degradê sai; o ícone do módulo é um SVG inline de 20px com traço --sgrs-texto. D10: nenhum
   hex da marca foi alterado. */
@font-face {
  font-family: "Geist";
  src: url("fontes/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* OP-8 (ADR-0017 D5): a Saira dos títulos — SIL OFL, vendorizada como a Geist (licença em fontes/Saira-OFL.txt), só o peso
   600 que a tela usa; a pilha cai na Geist e no sistema. */
@font-face {
  font-family: "Saira";
  src: url("fontes/Saira-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* OP-8 (ADR-0017 D1): os tokens da marca GENTE v1.2 (Design System v1.2). Nenhum deles é alterado (D10). */
  --azul-profundo: #072A5D;
  --azul-energia: #0E6CE2;
  --tinta: #1E2A3B;
  --texto-secundario: #6B778C;
  --linha: #D5DDEA;
  --fundo-suave: #EEF3FA;
  --sgrs-arco: #12A37B;
  --sgrs-texto: #0B7A5B;
  /* cores funcionais (OP-5/OP-6): não mudam no OP-8 */
  --alerta-texto: #8A4F00;
  --alerta-fundo: #FFF3E0;
  --superficie: #FFFFFF;
  --superficie-suave: #FBFCFD;
  --superficie-cinza: var(--fundo-suave);
  --placeholder: #8A94A0;
  --fundo: var(--fundo-suave);
  --borda: var(--linha);
  --destaque: var(--azul-profundo);
  --erro: #9B1C1C;
  --erro-fundo: #FFF5F5;
  --ok: #1F6F3F;
  --ok-fundo: #F1FAF4;
  --sensivel: #FFF4E0;
  --cadeado: #ECEFF3;
  --sombra: rgba(7, 42, 93, 0.08);
  --sombra-secao: rgba(7, 42, 93, 0.07);
  --sombra-cartao: rgba(16, 24, 40, 0.18);
  --veu: rgba(16, 24, 40, 0.45);
}

* { box-sizing: border-box; }
/* OP5-A6 (achado da sonda de alinhamento): um bloco com `display` (.entrada é grid, .casca é flex) VENCE a regra do
   navegador para o atributo hidden — a casca aparecia sem login. `hidden` tem de valer sempre. */
[hidden] { display: none !important; }
/* OP-8 (ADR-0017 D7): o texto que é só do leitor de tela — fora da vista, dentro do documento. Nunca display: none. */
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

body {
  margin: 0;
  font: 15px/1.45 "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fundo);
}

/* --- Entrada (C1): fora da casca. OP-8 (ADR-0017 D6): UM bloco — o azul-profundo sólido na tela inteira, o logotipo
   (o SVG NEGATIVO do kit, até 320px, altura auto) e o cartão de ~400px numa coluna centralizada nos dois eixos, ~2rem entre
   eles. A faixa, o palco e o degradê do OP-6 sumiram. O logo da Gente pequeno no rodapé do cartão (OP-7). --- */
.entrada { min-height: 100vh; display: flex; flex-direction: column; background: var(--azul-profundo); }
.palco-de-entrada { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; margin: 0; padding: 2rem clamp(.6rem, 3vw, 1.5rem); border: 0; border-radius: 0; background: none; box-shadow: none; }
.logotipo { display: flex; justify-content: center; align-items: center; width: 100%; }
.logotipo > .logo-sgrs { width: 320px; max-width: 100%; height: auto; }
.cartao-de-entrada { width: min(100%, 400px); margin: 0; padding: 0 0 1.2rem; overflow: hidden; border: 0; border-radius: 14px; background: var(--superficie); box-shadow: 0 16px 48px var(--sombra-cartao); }
/* Os logos escalam por UM eixo — nunca distorcer, nunca recolorir (W16). O SGRS horizontal escala pela largura (height: auto),
   em cada lugar. OP-7 (ADR-0016 D2): o da Gente escala pela altura nos dois rodapés — 30px dá ~127px de largura (o viewBox é
   1474x348), acima dos 120px mínimos da marca; W16 mede a largura resultante em cada rodapé. */
.logo { display: block; width: auto; max-width: 100%; }
.logo-gente { height: 30px; }
.cartao-de-entrada h2 { margin: 1.4rem 1.6rem 1rem; border: 0; padding: 0; font-family: "Saira", "Geist", system-ui, sans-serif; font-weight: 600; font-size: 1.25rem; text-align: center; }
.cartao-de-entrada .aviso { margin: 0 1.6rem .8rem; }
#form-login { display: grid; gap: .8rem; padding: 0 1.6rem; }
#form-login button { width: 100%; margin-top: .4rem; padding: .6rem 1rem; }
.rodape-da-entrada { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 1.4rem 1.6rem 0; padding-top: 1rem; border-top: 1px solid var(--borda); font-size: .78rem; color: var(--texto-secundario); }

/* --- Casca (C2, D1): menu fixo à esquerda, barra superior e o conteúdo. --- */
.casca { display: flex; min-height: 100vh; }
.menu { width: 232px; flex: 0 0 232px; align-self: flex-start; position: sticky; top: 0; z-index: 20; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; background: var(--superficie); border-right: 1px solid var(--borda); }
/* OP-6 (ADR-0015 D3): a marca do menu é o logo do SGRS com o título; o logo da Gente vai para o rodapé do menu. A nav cresce
   (flex: 1) para o rodapé ficar no pé — nenhum `margin-top: auto` (W22). OP-7: o SVG horizontal A CORES ocupa a linha (200px
   úteis). OP-8 (ADR-0017 D7): o <h1> continua no código, com a classe .so-leitor — o SVG já diz "SGRS"; a cor fica declarada
   para o W67 medir o texto que o leitor de tela lê. */
.marca { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: .9rem 1rem; border-bottom: 1px solid var(--borda); }
.marca > .logo-sgrs { width: 100%; height: auto; }
.menu h1 { margin: 0; font-size: 1rem; line-height: 1.25; letter-spacing: .01em; color: var(--azul-profundo); }
.menu nav { flex: 1 1 auto; padding-top: .6rem; }
/* OP-7 R2 (ADR-0016 D2): o GENTE horizontal do kit é mais largo que o PNG antigo (4,2:1 contra 2,8:1) e a marca exige >= 120px
   de largura; a 30px (127px) ele não cabe ao lado de "uma solução" nos 200px úteis do menu, e a 24px cabia com 102px — abaixo
   do mínimo. Por isso o rodapé do menu EMPILHA: "uma solução" acima, o logo abaixo, no mesmo 30px do rodapé da entrada. */
.rodape-do-menu { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: .8rem 1rem; border-top: 1px solid var(--borda); font-size: .74rem; color: var(--texto-secundario); }
.modulos { list-style: none; margin: 0; padding: 0 .6rem; }
.modulo { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border-radius: 8px; font-weight: 600; color: var(--azul-profundo); }
/* OP-8 (ADR-0017 D9): o ícone do módulo é um SVG inline no index.html (traço em currentColor); aqui só o tamanho e a cor —
   o verde SGRS de TEXTO, que é o que a marca dá ao traço (o arco é só para superfície gráfica maior). */
.icone-do-modulo { flex: 0 0 auto; width: 20px; height: 20px; color: var(--sgrs-texto); }
.secoes { list-style: none; margin: .15rem 0 0; padding: 0 0 0 .35rem; }
.item-do-menu { display: block; margin: .1rem 0; padding: .5rem .8rem; border-radius: 8px; font-weight: 500; color: var(--tinta); text-decoration: none; }
.item-do-menu:hover { background: var(--superficie-cinza); }
.item-do-menu:focus-visible { outline: 3px solid var(--azul-energia); outline-offset: 2px; }
/* OP-8 (ADR-0017 D4): o item ativo com fundo suave, texto azul-profundo (12,57:1) e peso 600 — sem marcador lateral (a marca
   proíbe filete); a pílula azul-escura cheia do OP-5 já tinha saído no OP-6. */
.item-do-menu[aria-current="page"] { background: var(--superficie-cinza); color: var(--azul-profundo); font-weight: 600; }
.item-do-menu[aria-disabled="true"] { color: var(--placeholder); cursor: not-allowed; }
.item-do-menu[aria-disabled="true"]:hover { background: none; }
.conteudo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* Barra superior: a trilha (módulo / seção) à esquerda, a linha de sessão à direita — que QUEBRA linha em vez de ser
   cortada (OP-4 R3 continua valendo). O botão de menu só aparece abaixo de 900px (o @media no fim). */
header { position: sticky; top: 0; z-index: 10; min-height: 56px; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.25rem; padding: .5rem clamp(.6rem, 3vw, 1.5rem); background: var(--superficie); border-bottom: 1px solid var(--borda); box-shadow: 0 1px 4px var(--sombra); }
.alternar-menu { display: none; margin: 0; padding: .3rem .6rem; font-size: 1.1rem; line-height: 1; }
.trilha { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; min-width: 0; font-family: "Saira", "Geist", system-ui, sans-serif; font-weight: 600; color: var(--azul-profundo); }
.trilha .separador { font-weight: 400; color: var(--texto-secundario); }
header p { margin: 0 0 0 auto; font-size: .8rem; line-height: 1.35; color: var(--texto-secundario); text-align: right; overflow-wrap: anywhere; }

/* Paddings horizontais por clamp(): no desktop valem o de antes; num celular de 320–400px encolhem
   para 3vw, e a coluna mínima de 230px da grade cabe até dentro de um .item aninhado (L6). */
main { flex: 1 1 auto; width: 100%; max-width: 1100px; min-width: 0; margin: 0 auto; padding: 1rem clamp(.6rem, 3vw, 1.5rem) 4rem; }

section { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 1.2rem clamp(.6rem, 3vw, 1.4rem) 1.3rem; margin-top: 1.25rem; box-shadow: 0 2px 6px var(--sombra-secao); }
/* OP-8 (ADR-0017 D4/D5): o título da seção na Saira, sem o filete à esquerda. */
section h2 { margin: 0 0 1rem; font-family: "Saira", "Geist", system-ui, sans-serif; font-weight: 600; font-size: 1.1rem; letter-spacing: .01em; color: var(--azul-profundo); }

/* min-inline-size: 0 — o fieldset nasce com min-content, e é isso que faria a tela rolar na horizontal. */
fieldset { border: 1px solid var(--borda); border-radius: 6px; margin: .75rem 0; padding: .75rem clamp(.5rem, 2.5vw, 1rem); min-width: 0; min-inline-size: 0; }
legend { font-weight: 600; padding: 0 .4rem; color: var(--azul-profundo); }
legend small { font-weight: 400; color: var(--texto-secundario); }

/* Sub-grupos de "Dados pessoais" (L2): bloco próprio com subtítulo; separados por uma linha tracejada. */
.subgrupo { margin-top: .75rem; padding-top: .6rem; border-top: 1px dashed var(--linha); }
.subgrupo:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.subgrupo h3 { margin: 0 0 .45rem; font-family: "Saira", "Geist", system-ui, sans-serif; font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--azul-profundo); }

/* Grade (L4/L6): células da mesma linha têm a mesma altura (grid estica). OP-2 (P4): a célula alinha pelo TOPO —
   rótulo, controle logo abaixo (gap), ajuda embaixo do controle; o `margin-top: auto` que colava o controle no pé
   SAIU (era a causa do "título muito acima do campo": a célula cresce pela vizinha mais alta e o controle descia com
   ela). A distância rótulo → controle passa a ser o gap em todo campo, medida pela sonda de alinhamento. Coluna
   mínima 230px: duas nunca cabem abaixo de 400px — o celular vai a uma coluna sem @media. */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem .9rem; }
label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; font-weight: 500; min-width: 0; }
input, select, textarea { font: inherit; font-weight: 400; padding: .4rem .55rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); max-width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul-energia); outline-offset: 1px; }
textarea { width: 100%; }
input:disabled, select:disabled { background: var(--cadeado); color: var(--texto-secundario); }
input::placeholder { color: var(--placeholder); }
label small, .rotulo small { font-weight: 400; color: var(--texto-secundario); }
button { font: inherit; font-weight: 500; padding: .45rem 1rem; border: 1px solid var(--destaque); border-radius: 6px; background: var(--superficie); color: var(--destaque); cursor: pointer; margin-top: .5rem; }
button.principal { background: var(--destaque); color: var(--superficie); }
button:focus-visible { outline: 3px solid var(--azul-energia); outline-offset: 2px; }
/* OP-6 (A3, ADR-0014 D6): botão desabilitado com cara de desabilitado — o "Voltar" do passo 1 tinha a mesma cara do
   habilitado. Os chips e a porta mantêm o desenho próprio (os blocos deles, mais específicos, redeclaram o fundo). */
button:disabled { cursor: not-allowed; opacity: .55; border-color: var(--borda); color: var(--texto-secundario); background: var(--superficie-cinza); }

/* CNH em botões que acendem (T11). Alvo de dedo: 44px nos dois eixos. Aceso = azul-profundo com
   texto branco (14,02:1); apagado = branco com a linha da marca e texto na tinta. aria-pressed é o estado. */
.campo-cnh { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { min-height: 44px; min-width: 44px; padding: 0 .9rem; margin: 0; font-weight: 600; background: var(--superficie); color: var(--tinta); border: 1px solid var(--linha); border-radius: 22px; }
.chip[aria-pressed="true"] { background: var(--azul-profundo); color: var(--superficie); border-color: var(--azul-profundo); }

/* OP-8 (ADR-0017 D2.3): o item de lista fica BRANCO — o texto-secundário das ajudas e do .restrito só lê sobre branco
   (sobre a superfície-suave dava 4,40:1). A superfície-suave continua no hover das tabelas (texto na tinta). */
.item { background: var(--superficie); }
.item button[data-remover] { border-color: var(--erro); color: var(--erro); }

/* C7c-1: orientação de ordem no topo do grupo; dias com aula em chips (como a CNH), ocupando a linha
   inteira da grade; a caixa "É o cargo atual" é um label em linha (a grade continua alinhada). */
.orientacao { margin: 0 0 .5rem; font-size: .9rem; color: var(--texto-secundario); }
.campo-dias { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; min-width: 0; }
.chip.dia { min-width: 52px; padding: 0 .6rem; }
.chip:disabled { opacity: .45; cursor: not-allowed; background: var(--superficie); color: var(--tinta); border-color: var(--linha); }
label.marcacao { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; align-self: end; padding: .45rem 0; }
label.marcacao > input { margin: 0; width: 1.15rem; height: 1.15rem; }
label.marcacao > .ajuda { flex-basis: 100%; }

/* C7c-2b (pontos 1 e 4): a orientação sai de dentro do campo e vira .ajuda — inteira, sempre visível. OP-2 (P4/P8):
   a ajuda vem DEPOIS do controle, curta (<= 45 caracteres). O erro ao sair do campo é um .erro criado pelo app.js
   logo abaixo do controle (antes da ajuda), e o campo inválido ganha a borda vermelha. */
.ajuda { font-size: .78rem; line-height: 1.3; font-weight: 400; color: var(--texto-secundario); }
.erro { font-size: .8rem; line-height: 1.3; font-weight: 600; color: var(--erro); }
.invalido { border-color: var(--erro); }

/* Compartimento sensível (L3/L4): a marcação é o data-sensivel (contrato); a pintura, desde o OP-2 (P6, Q54), é um
   rótulo discreto de seção — `.restrito`, "dados restritos" — junto ao rótulo do campo ou na legenda do grupo; o
   cadeado saiu ("fica muito feio", PO). Nenhum fundo colorido. Dentro da grade o marcador é flex e o label o
   preenche: célula sensível com a MESMA altura da célula comum ao lado. */
.grade > .compartimento { display: flex; min-width: 0; }
.grade > .compartimento > label { flex: 1; }
.restrito { display: inline-block; margin-left: .4rem; padding: 0 .35rem; font-size: .66rem; font-weight: 600; letter-spacing: .04em; line-height: 1.5; color: var(--texto-secundario); border: 1px solid var(--linha); border-radius: 3px; vertical-align: middle; white-space: nowrap; }

/* OP-2 (P9, Q53): a porta do OUTRO embaixo do campo de curso — um botão com cara de link, na mesma célula da grade.
   OP-8 (ADR-0017 D2.2): link é azul-energia, sobre o branco do item (4,93:1). */
.campo-com-porta { display: flex; flex-direction: column; min-width: 0; }
.campo-com-porta > label { flex: 1; }
.porta { align-self: flex-start; margin: .2rem 0 0; padding: 0; border: 0; background: none; font-size: .8rem; font-weight: 500; color: var(--azul-energia); text-decoration: underline; }
.porta:disabled { color: var(--placeholder); cursor: not-allowed; background: none; }

/* OP-2 (P3, Q55): os identificadores (id da ficha, código de confidencialidade) com o botão "copiar" ao lado. */
.identificadores { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .4rem; }
.identificador { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 400; }
.identificador .rotulo { font-size: .8rem; font-weight: 600; color: var(--texto-secundario); }
button.copiar { margin: 0; padding: .15rem .6rem; font-size: .8rem; }

.aviso { padding: .6rem .9rem; border-radius: 4px; border: 1px solid var(--erro); color: var(--erro); background: var(--erro-fundo); }
.aviso.ok { border-color: var(--ok); color: var(--ok); background: var(--ok-fundo); }
.resultado { font-weight: 600; }
.resultado code { font-size: 1.1rem; background: var(--superficie-cinza); padding: .1rem .4rem; border-radius: 3px; overflow-wrap: anywhere; }

/* Abrir ficha por id (L6): o input sem size= cresce com a linha e quebra abaixo dos botões no celular. */
#form-abrir { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: flex-end; }
#form-abrir label { flex: 1 1 22rem; }
#form-abrir button { margin-top: 0; }

/* F1 C5 (ADR-0010): a busca por nome é um formulário próprio na seção 2 (o campo NÃO entra em #form-pessoa: o contrato
   W13 não muda), no mesmo desenho do "abrir ficha por id"; a lista de pessoas encontradas tem "abrir" e, quando dois
   resultados se parecem demais, o aviso de possível duplicata em vermelho — aviso, nunca fusão (D7). */
#form-busca-nome { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: flex-end; margin-top: 1rem; }
#form-busca-nome label { flex: 1 1 22rem; }
#form-busca-nome button { margin-top: 0; }
.duplicata { color: var(--erro); font-weight: 600; }

/* --- Tabelas (C4, D5 — padrão "Stripe"): linhas de ~56px, cabeçalho discreto, número/CPF/id em monoespaçada, situação
   em pílula, linha inteira clicável, rodapé com a contagem. Rola dentro do próprio invólucro em tela estreita. --- */
.rolagem { overflow-x: auto; margin-top: .6rem; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th { padding: .5rem .75rem; border-bottom: 1px solid var(--borda); text-align: left; font-size: .74rem; font-weight: 600; letter-spacing: .05em; color: var(--texto-secundario); white-space: nowrap; }
.tabela td { padding: 1rem .75rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela td code { white-space: nowrap; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover { background: var(--superficie-suave); }
.tabela td.acoes { white-space: nowrap; text-align: right; }
.tabela td.acoes button { margin: 0 0 0 .3rem; padding: .25rem .7rem; font-size: .85rem; }
.mono, .tabela code { font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-size: .85rem; }
.pilula { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.pilula.ok { background: var(--ok-fundo); color: var(--ok); }
.pilula.atencao { background: var(--alerta-fundo); color: var(--alerta-texto); }
.pilula.duplicata { background: var(--erro-fundo); color: var(--erro); white-space: normal; border-radius: 8px; }
.tabela-rodape { margin: .5rem 0 0; font-size: .8rem; color: var(--texto-secundario); }

/* --- Nova ficha em passos (C5, D6): a lista dos dez passos, a barra de progresso (OP-8, ADR-0017 D3: o verde SGRS de
   superfície, --sgrs-arco, sólido — elemento gráfico, nunca texto) e a barra de ações fixa no rodapé com Voltar / Próximo /
   Gravar (o mesmo botão de sempre, só no último passo). --- */
.passos { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; padding: 0; }
.passos button { margin: 0; padding: .3rem .75rem; border: 1px solid var(--borda); border-radius: 999px; font-size: .82rem; font-weight: 500; background: var(--superficie); color: var(--texto-secundario); }
.passos button[aria-current="step"] { background: var(--azul-profundo); color: var(--superficie); border-color: var(--azul-profundo); }
.progresso { height: 4px; margin: 0 0 1rem; border-radius: 2px; overflow: hidden; background: var(--superficie-cinza); }
.progresso > span { display: block; height: 100%; background: var(--sgrs-arco); }
.acoes-da-ficha { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; padding: .7rem 0; background: var(--superficie); border-top: 1px solid var(--borda); }
.acoes-da-ficha .espaco { flex: 1 1 auto; }
.acoes-da-ficha button { margin-top: 0; }
.acoes-da-ficha .onde { font-size: .8rem; color: var(--texto-secundario); }

/* --- Ler ficha em cartões (C6, D5): dados, contato, listas em tabela, e os dados restritos em cartão próprio. --- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; margin-top: .6rem; }
.cartao { min-width: 0; padding: .9rem 1rem; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); }
.cartao.largo { grid-column: 1 / -1; }
.cartao h4 { margin: 0 0 .5rem; font-size: .76rem; font-weight: 600; letter-spacing: .05em; color: var(--texto-secundario); }
#leitura .grupo { border: 1px solid var(--borda); border-radius: 6px; padding: .6rem 1rem; margin: .6rem 0; }
#leitura .grupo.aberto { background: var(--sensivel); }
/* OP-8 (ADR-0017 D2.3): sobre o fundo sensível (4,15:1) e o cadeado (3,92:1) o texto-secundário reprova; é a tinta. */
#leitura .grupo.aberto dt { color: var(--tinta); }
#leitura .grupo.cadeado { background: var(--cadeado); color: var(--tinta); }
#leitura h3 { margin: 1rem 0 .4rem; font-family: "Saira", "Geist", system-ui, sans-serif; font-weight: 600; font-size: 1rem; color: var(--azul-profundo); }
#leitura h4 { margin: 0 0 .4rem; font-size: .95rem; }
/* OP-6 (A1, achado OP6-A5 visto na captura): com os rotulos do formulario (mais longos que as chaves) a coluna do rotulo em
   max-content espremia o valor, que quebrava letra a letra. O rotulo fica com no maximo 45% e quebra por palavra. */
#leitura dl { display: grid; grid-template-columns: minmax(7rem, 45%) minmax(0, 1fr); gap: .15rem 1rem; margin: 0; }
#leitura dt { color: var(--texto-secundario); overflow-wrap: normal; }
#leitura dd { margin: 0; overflow-wrap: anywhere; }
#leitura .linha { border-top: 1px dashed var(--borda); padding-top: .4rem; margin-top: .4rem; }
/* OP-6 (A1, ADR-0014 D5): a linha discreta de rodapé da leitura — registrada/atualizada e os ids, fora da lista de dados. */
.rodape-da-leitura { margin: .8rem 0 0; font-size: .78rem; color: var(--texto-secundario); overflow-wrap: anywhere; }

#lista-fichas ul { padding-left: 1.2rem; }
#lista-fichas li { overflow-wrap: anywhere; }
#lista-fichas li button { margin: 0 0 0 .3rem; }

/* C7c-6: correção. A nota da seção e a nota de cadeado (grupo que o papel não lê: os controles NÃO existem no
   formulário, a nota é o que sobra). Item marcado para remover fica riscado e cinza até o envio, ou até "desfazer
   remoção" (o botão vira verde). O histórico é uma tabela: rola dentro do próprio invólucro em tela estreita, nunca a
   página; a célula de grupo sensível leva a cor do compartimento aberto da leitura. */
.nota { margin: 0 0 .75rem; font-size: .9rem; color: var(--texto-secundario); }
.nota-de-cadeado { margin: .4rem 0; padding: .4rem .6rem; border-radius: 4px; background: var(--cadeado); color: var(--tinta); font-size: .9rem; }
#form-correcao > button { margin-right: .5rem; }
.item.removido { opacity: .6; background: var(--cadeado); }
.item.removido .grade, .item.removido > label { text-decoration: line-through; }
.item.removido button[data-remover] { border-color: var(--ok); color: var(--ok); }
#historico { overflow-x: auto; }
#historico h3 { margin: 1rem 0 .4rem; font-family: "Saira", "Geist", system-ui, sans-serif; font-weight: 600; font-size: 1rem; color: var(--azul-profundo); }
#historico table { border-collapse: collapse; width: 100%; font-size: .85rem; }
#historico th, #historico td { border: 1px solid var(--borda); padding: .3rem .5rem; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
#historico th { background: var(--superficie-cinza); color: var(--azul-profundo); }
#historico td.grupo { background: var(--sensivel); font-weight: 600; }

/* --- O ÚNICO @media da tela (D1): abaixo de 900px o menu sai da tela e volta pelo botão da barra; o véu fecha ao
   toque. Os seletores aqui são DIFERENTES dos de fora (`.casca > .menu`, `header .alternar-menu`) de propósito: a suíte
   achata os blocos do CSS e mede `.menu` e `.alternar-menu` pelo seletor exato — W23 lê este bloco separadamente. --- */
@media (max-width: 899px) {
  .casca > .menu { position: fixed; top: 0; bottom: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform .2s ease; }
  .casca.menu-aberto > .menu { transform: none; box-shadow: 0 0 24px var(--sombra-cartao); }
  .casca.menu-aberto::before { content: ""; position: fixed; inset: 0; z-index: 15; background: var(--veu); }
  header .alternar-menu { display: inline-flex; }
}