/* ============================================================
   FnOS — GUIDED FLOW (fn-guided.css) — camada transversal de orientação visual.
   NÃO redesenha o FnOS: só dá SEMÂNTICA aos campos. Contrato (GLOBAL por padrão — Guided Flow é capacidade do Design System):
     toda página que carrega fn-tokens.css + fn-guided.css + fn-guided.js já tem a camada; NADA precisa declarar "eu uso Guided Flow".
     Exceção EXPLÍCITA e justificada: data-fn-guided-excecao="motivo" no campo OU no contêiner (a camada não vale ali).
     (data-fn-guided-escopo e <meta name="fn-guided-escopo"> são legados: aceitos, sem efeito necessário.)
     data-fn-state="action|automatic|readonly|pending|error|validated|attention"   (explícito, vence a inferência)
   Inferência SOMENTE por CSS (funciona com campos criados depois, em modal, por JS — sem MutationObserver):
     editável  ⇒ ação (creme) · readonly/disabled ⇒ leitura · required vazio ⇒ pendente · aria-invalid ⇒ erro
   ESPECIFICIDADE: o prefixo `:is(#fn-guided-esp, body)` vale como um seletor de ID (:is() assume a maior especificidade da lista; #fn-guided-esp nunca existe,
   o escopo real é o documento inteiro — o <body>). Sem isso, regras do hospedeiro com seletor de ID (fn-decisao.css, telas do Layout de Decisão) vencem a camada e o campo fica branco.
   Interruptor: html[data-fn-guided="on|off"] (fn-guided.js). "off" desliga TUDO sem rollback de regra.
   Tokens: --fep-campo-* (fn-tokens.css). Cor nunca é o único sinal: borda tracejada (leitura/pendente), barra lateral (pendente/erro/atenção),
   mensagem textual (.fn-guided-msg) e aria-* acompanham cada estado.
   ============================================================ */
html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(input:not([type=checkbox],[type=radio],[type=file],[type=button],[type=submit],[type=reset],[type=hidden],[type=range],[type=color],[type=image]),textarea,select):not([data-fn-guided-excecao], [data-fn-guided-excecao] *) {
  /* base neutra: só troca cores de fundo/borda; mantém fonte, tamanho, padding e a seta do select (background-color, nunca o atalho background) */
  transition: background-color var(--fep-dur-micro, 120ms) var(--fep-curva, ease), border-color var(--fep-dur-micro, 120ms) var(--fep-curva, ease);
}
/* A · CAMPO EDITÁVEL = IDENTIDADE VISUAL BASE — "aqui você interage". O creme vale vazio OU preenchido, opcional OU obrigatório, e continua sob os estados
   pendente/validado/atenção (eles SOBREPÕEM borda/barra/mensagem; só o erro troca o fundo). NÃO vale para leitura, desabilitado nem automático. */
html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(input:not([type=checkbox],[type=radio],[type=file],[type=button],[type=submit],[type=reset],[type=hidden],[type=range],[type=color],[type=image]),textarea,select):not([data-fn-guided-excecao], [data-fn-guided-excecao] *):not([readonly], [disabled], [aria-readonly="true"], [data-fn-state="readonly"], [data-fn-state="automatic"]) {
  background-color: var(--fep-campo-acao-bg); border-color: var(--fep-campo-acao-borda);
}
/* B · AUTOMÁTICO / HERDADO / CALCULADO — neutro, não compete com os campos de ação */
html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(input:not([type=checkbox],[type=radio],[type=file],[type=button],[type=submit],[type=reset],[type=hidden],[type=range],[type=color],[type=image]),textarea,select):not([data-fn-guided-excecao], [data-fn-guided-excecao] *)[data-fn-state="automatic"] {
  background-color: var(--fep-campo-auto-bg); border-color: var(--fep-borda);
}
/* C · SOMENTE LEITURA / BLOQUEADO — fundo de leitura + borda tracejada (não parece erro nem campo editável) */
html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(input:not([type=checkbox],[type=radio],[type=file],[type=button],[type=submit],[type=reset],[type=hidden],[type=range],[type=color],[type=image]),textarea,select):not([data-fn-guided-excecao], [data-fn-guided-excecao] *):is([readonly], [disabled], [aria-readonly="true"], [data-fn-state="readonly"]) {
  background-color: var(--fep-campo-leitura-bg); color: var(--fep-campo-leitura-texto); border-color: var(--fep-borda); border-style: dashed; cursor: default;
}
html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(input:not([type=checkbox],[type=radio],[type=file],[type=button],[type=submit],[type=reset],[type=hidden],[type=range],[type=color],[type=image]),textarea,select):not([data-fn-guided-excecao], [data-fn-guided-excecao] *):is([disabled]) { cursor: not-allowed; } /* disabled continua inacessível */
/* D · OBRIGATÓRIO PENDENTE — discreto (tracejado + barra lateral); NÃO é vermelho antes de o usuário tentar avançar */
html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(input:not([type=checkbox],[type=radio],[type=file],[type=button],[type=submit],[type=reset],[type=hidden],[type=range],[type=color],[type=image]),textarea,select):not([data-fn-guided-excecao], [data-fn-guided-excecao] *):is([data-fn-state="pending"], :required:invalid:not([data-fn-state])):not([readonly], [disabled]) {
  border-color: var(--fep-campo-pendente); border-style: dashed; box-shadow: inset 3px 0 0 var(--fep-campo-pendente);
}
/* G · ATENÇÃO / DECISÃO — só quando há decisão relevante ou risco */
html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(input:not([type=checkbox],[type=radio],[type=file],[type=button],[type=submit],[type=reset],[type=hidden],[type=range],[type=color],[type=image]),textarea,select):not([data-fn-guided-excecao], [data-fn-guided-excecao] *)[data-fn-state="attention"] {
  border-color: var(--fep-campo-atencao); box-shadow: inset 3px 0 0 var(--fep-campo-atencao);
}
/* F · VALIDADO / CONCLUÍDO — verde SÓ por estado explícito (nunca por "tem valor") */
html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(input:not([type=checkbox],[type=radio],[type=file],[type=button],[type=submit],[type=reset],[type=hidden],[type=range],[type=color],[type=image]),textarea,select):not([data-fn-guided-excecao], [data-fn-guided-excecao] *)[data-fn-state="validated"] {
  border-color: var(--fep-campo-ok); border-style: solid;
}
/* E · ERRO / INVÁLIDO — prevalece sobre qualquer outro estado (último na cascata; linguagem de erro já existente) */
html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(input:not([type=checkbox],[type=radio],[type=file],[type=button],[type=submit],[type=reset],[type=hidden],[type=range],[type=color],[type=image]),textarea,select):not([data-fn-guided-excecao], [data-fn-guided-excecao] *):is([data-fn-state="error"], [aria-invalid="true"]),
html[data-fn-guided="on"] :is(#fn-guided-esp, body) .fn-campo.fn-campo-invalido :is(input:not([type=checkbox],[type=radio],[type=file],[type=button],[type=submit],[type=reset],[type=hidden],[type=range],[type=color],[type=image]),textarea,select):not([data-fn-guided-excecao], [data-fn-guided-excecao] *) {
  background-color: var(--fep-campo-erro-bg); border-color: var(--fep-campo-erro); border-style: solid; box-shadow: inset 3px 0 0 var(--fep-campo-erro); color: var(--fep-texto);
}
/* foco do teclado SEMPRE visível (vence todos os estados) */
html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(input:not([type=checkbox],[type=radio],[type=file],[type=button],[type=submit],[type=reset],[type=hidden],[type=range],[type=color],[type=image]),textarea,select):not([data-fn-guided-excecao], [data-fn-guided-excecao] *):focus-visible, html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(input:not([type=checkbox],[type=radio],[type=file],[type=button],[type=submit],[type=reset],[type=hidden],[type=range],[type=color],[type=image]),textarea,select):not([data-fn-guided-excecao], [data-fn-guided-excecao] *):focus {
  outline: 0; border-color: var(--fep-primaria); box-shadow: var(--fep-campo-foco);
}

/* mensagens de estado (texto = sinal não-cromático) */
.fn-guided-msg { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: var(--fep-tam-apoio, 12px); line-height: 1.35; color: var(--fep-texto-2); }
.fn-guided-msg::before { content: ""; flex: 0 0 auto; width: 14px; text-align: center; font-weight: 700; }
.fn-guided-msg[data-tipo="pendente"]::before { content: "•"; color: var(--fep-campo-pendente); }
.fn-guided-msg[data-tipo="erro"] { color: var(--fep-campo-erro); } .fn-guided-msg[data-tipo="erro"]::before { content: "!"; }
.fn-guided-msg[data-tipo="validado"] { color: var(--fep-campo-ok); } .fn-guided-msg[data-tipo="validado"]::before { content: "✓"; }
.fn-guided-msg[data-tipo="atencao"] { color: var(--fep-campo-atencao); } .fn-guided-msg[data-tipo="atencao"]::before { content: "▲"; }
.fn-guided-msg[data-tipo="bloqueado"]::before { content: "🔒"; font-size: 11px; }
.fn-guided-msg[data-tipo="info"]::before { content: "ⓘ"; }
/* origem discreta do dado ("Automático", "Herdado", "Calculado pelo FnOS"): só onde o autor pedir (data-fn-origem no rótulo) */
[data-fn-origem]::after { content: " · " attr(data-fn-origem); font-weight: 400; color: var(--fep-texto-3); text-transform: none; letter-spacing: 0; }
/* obrigatório: asterisco só no rótulo que o autor marcou (data-fn-obrig-rotulo) — nunca implícito */
[data-fn-obrig-rotulo]::after { content: " *"; color: var(--fep-campo-pendente); font-weight: 700; }

/* PRÓXIMA AÇÃO — discreta, derivada das regras reais da tela (nunca tutorial) */
.fn-proxima-acao { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 8px 0 12px; padding: 8px 12px; border-left: 3px solid var(--fep-primaria); background: var(--fep-superficie-2); border-radius: 0 var(--fep-raio-1, 6px) var(--fep-raio-1, 6px) 0; font-size: var(--fep-tam-apoio, 12px); color: var(--fep-texto-2); }
.fn-proxima-acao b.fn-pa-rotulo { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fep-texto-3); }
.fn-proxima-acao .fn-pa-texto { color: var(--fep-texto); font-size: var(--fep-tam-corpo, 14px); }
.fn-proxima-acao .fn-pa-quem { color: var(--fep-texto-2); }

/* AÇÃO INDISPONÍVEL com motivo (em vez de botão cinza mudo): foco continua possível, clique é inerte, o motivo fica visível */
.fn-btn[aria-disabled="true"] { opacity: var(--fep-alfa-desabilitado, .45); cursor: not-allowed; }
.fn-guided-motivo { display: block; margin-top: 4px; font-size: var(--fep-tam-apoio, 12px); color: var(--fep-texto-2); }

/* AJUDA CONTEXTUAL — ícone "i" + texto curto (title/aria); sem manual dentro da tela */
.fn-guided-ajuda { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; border: 1px solid var(--fep-texto-3); border-radius: 50%; font-size: 10px; font-weight: 700; line-height: 1; color: var(--fep-texto-2); background: transparent; cursor: help; vertical-align: middle; padding: 0; }
.fn-guided-ajuda:focus-visible { outline: 0; box-shadow: var(--fep-campo-foco); }
.fn-guided-ajuda-texto { display: block; margin-top: 4px; font-size: var(--fep-tam-apoio, 12px); color: var(--fep-texto-2); }

@media (max-width: 640px) { .fn-proxima-acao { padding: 8px 10px; } .fn-guided-msg { font-size: 12px; } } /* não quebra o mobile: nada de largura fixa */
@media (prefers-reduced-motion: reduce) { html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(input:not([type=checkbox],[type=radio],[type=file],[type=button],[type=submit],[type=reset],[type=hidden],[type=range],[type=color],[type=image]),textarea,select):not([data-fn-guided-excecao], [data-fn-guided-excecao] *) { transition: none; } }

/* ===== CAMADA DE AÇÃO (H/I) — ONDA 1: infraestrutura SEM efeito visual nos controles atuais =====
   Contrato: docs/fn-acoes-contrato.md · manifesto: api/src/acoes-catraca.json · testes: fn-acoes-camada.test.js / fn-acoes-cobertura.test.js
   Princípio FAIL-CLOSED: sem data-fn-acao elegível NENHUM efeito. A semântica vem do ATRIBUTO, nunca de classe histórica
   (.fn-btn/.act/.btn/.pv-b/.rm/.sec/.doc-btn…), e ESTADO (disabled/aria-disabled/loading/selecionado) não é semântica.
   Hoje só a ação SECUNDÁRIA tem visual (prata acetinado: claro V2.1, escuro V2, homologados em 13/10/2026). Primária segue o vermelho
   existente; decisão-negativa, destrutiva e navegação NÃO têm visual (pendente de protótipo/homologação) — por isso nenhuma regra aqui.
   O interruptor do Guided Flow (html[data-fn-guided="on|off"], ?guided=off, localStorage.fnGuided) remove também esta camada.
   Elegíveis para o VISUAL: <button> e <input type=button|submit|reset>. (<a> e [role=button] podem receber o atributo no contrato, mas não têm visual nesta onda.)
   O prefixo :is(#fn-guided-esp, body) eleva a especificidade acima de regras de hospedeiro com ID (mesma técnica do creme) — sem !important. */
html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(button, input[type=button], input[type=submit], input[type=reset])[data-fn-acao="secundaria"]:not(:disabled, [disabled], [aria-disabled="true"]) {
  background: var(--fep-botao-sec-bg); border-style: solid; border-color: var(--fep-botao-sec-borda); color: var(--fep-botao-sec-texto); box-shadow: var(--fep-botao-sec-sombra);
}
html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(button, input[type=button], input[type=submit], input[type=reset])[data-fn-acao="secundaria"]:not(:disabled, [disabled], [aria-disabled="true"]):hover {
  background: var(--fep-botao-sec-bg-hover); border-color: var(--fep-botao-sec-borda-hover); box-shadow: var(--fep-botao-sec-sombra-hover);
}
html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(button, input[type=button], input[type=submit], input[type=reset])[data-fn-acao="secundaria"]:not(:disabled, [disabled], [aria-disabled="true"]):active {
  background: var(--fep-botao-sec-bg-active); box-shadow: var(--fep-botao-sec-sombra-active); transform: translateY(1px);
}
html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(button, input[type=button], input[type=submit], input[type=reset])[data-fn-acao="secundaria"]:not(:disabled, [disabled], [aria-disabled="true"]):focus-visible {
  outline: 0; border-color: var(--fep-botao-sec-borda-foco); box-shadow: var(--fep-botao-sec-sombra), var(--fep-botao-sec-foco);
}
/* ESTADO indisponível: a semântica continua "secundaria", mas o visual é plano e inequívoco (nunca o brilho de um botão disponível) — a fonte é o ATRIBUTO, nunca bloqueio de ponteiro via CSS */
html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(button, input[type=button], input[type=submit], input[type=reset])[data-fn-acao="secundaria"]:is(:disabled, [disabled], [aria-disabled="true"]) {
  background: var(--fep-campo-leitura-bg); border-style: dashed; border-color: var(--fep-borda); box-shadow: none; color: var(--fep-campo-leitura-texto); cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  html[data-fn-guided="on"] :is(#fn-guided-esp, body) :is(button, input[type=button], input[type=submit], input[type=reset])[data-fn-acao="secundaria"] { transition: none; transform: none; }
}