/* NF047 (ARCH-047 §19) — seção "Dados adicionais da NF-e".
   Arquivo próprio: components.css já está em 727 linhas e o CI reprova em 800.

   TOKENS: este app é tema CLARO e define em base.css apenas
   --bg #f5f6f7 · --panel #fff · --line #d9dde1 · --ink #222 · --muted #777
   --ok #2e7d32 · --warn #b26a00 · --block #c62828 · --accent #2e7d32.
   Não existem --border nem --sidebar-hover (a 1ª versão deste arquivo usou
   esses dois e as regras inteiras eram descartadas pelo browser — blocos sem
   borda e sem fundo).

   CONTRASTE: --muted (#777) sobre #f5f6f7 fica em ~4,3:1, abaixo do mínimo de
   4,5:1 da WCAG AA — e esta seção usa muito texto pequeno (11–12px) de apoio.
   Por isso o cinza local é mais escuro; nada aqui herda --muted direto. */
.nf-card {
  --nf-ink: var(--ink, #222);
  --nf-muted: var(--u-texto-2, #55606c);   /* ~7:1 sobre #fff e ~6,6:1 sobre #f5f6f7 */
  --nf-linha: var(--line, #d9dde1);
  --nf-surf: var(--u-hover, #eef1f4);    /* fundo dos blocos de texto fiscal */
}

.nf-card h2 { margin-bottom: 2px; }
.nf-hint { font-size: 12.5px; color: var(--nf-muted); margin: 4px 0 10px; line-height: 1.45; }
.nf-vazio { font-size: 12.5px; color: var(--nf-muted); padding: 8px 0; line-height: 1.45; }
.nf-cinza { color: var(--nf-muted); font-weight: 400; }

/* --- faixa de estado (§20) --- */
.nf-estado {
  padding: 9px 11px; border-radius: 6px; font-size: 13px; margin: 8px 0 12px;
  border: 1px solid; line-height: 1.45;
}
.nf-estado.nf-ok      { background: var(--u-verde-fundo,#eaf4ea); border-color: var(--u-verde-marca,#a8cfa9); color: var(--ok); }
.nf-estado.nf-bloq    { background: var(--u-erro-fundo,#fbeaea); border-color: var(--block); color: var(--block); }
.nf-estado.nf-alerta  { background: var(--u-ambar-fundo,#fdf3e3); border-color: var(--warn); color: var(--warn); }
.nf-estado.nf-neutro  { background: var(--u-hover,#eef1f4); border-color: var(--nf-linha); color: var(--ink); }
.nf-estado.nf-emitido { background: var(--u-hover,#eef1f4); border-color: var(--nf-linha); color: var(--ink); }

/* --- subseções --- */
.nf-sub { border-top: 1px solid var(--nf-linha); padding-top: 12px; margin-top: 12px; }
.nf-sub:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
/* HANDOFF-051 — `:first-of-type` casa o primeiro elemento DE CADA TAG, nao o
   primeiro `.nf-sub`. O bloco "Adicionar informacao complementar" e o unico
   <details> da lista, entao caia na regra do "primeiro" e perdia separador e
   respiro: o alvo de clique (18px) ficava a 4px do campo de cima, parecendo
   sobreposto. Reafirma o espacamento para o <details> e da area de clique
   confortavel ao summary. */
/* `details.nf-sub` sozinho NAO vence: (0,1,1) perde para `.nf-sub:first-of-type`
   (0,2,0). Precisa repetir o :first-of-type para chegar a (0,2,1). */
details.nf-sub,
details.nf-sub:first-of-type { border-top: 1px solid var(--nf-linha); padding-top: 12px; margin-top: 12px; }
details.nf-sub > summary { cursor: pointer; padding: 6px 0; margin: 0; user-select: none; }
details.nf-sub > summary:hover { color: var(--nf-ink); }
.nf-sub h4 { margin: 0 0 2px; font-size: 13px; color: var(--nf-ink); }

/* --- opções selecionáveis --- */
.nf-opt { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 13px; cursor: pointer; color: var(--nf-ink); }
.nf-opt input { margin-top: 3px; flex: 0 0 auto; }
.nf-opt.off { opacity: .7; }
.nf-opt em.nf-previa-txt {
  display: block; font-style: normal; font-size: 12px; color: var(--nf-muted);
  margin-top: 2px; overflow-wrap: anywhere;
}
.nf-grupo { margin-top: 6px; }
.nf-grupo-t { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--nf-muted); font-weight: 600; }

/* --- etiquetas --- */
.nf-tag {
  display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 10px;
  background: var(--u-hover,#e7ebef); color: var(--ink); border: 1px solid var(--nf-linha); white-space: nowrap;
}
.nf-tag.nf-obr { background: var(--u-erro-fundo,#fbeaea); border-color: var(--block); color: var(--block); }
.nf-tag.nf-off { background: transparent; color: var(--nf-muted); }

/* --- bloco automático e prévia (texto que vai à DANFE) --- */
.nf-auto-txt, .nf-previa {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.55; color: var(--nf-ink);
  background: var(--nf-surf); border: 1px solid var(--nf-linha); border-radius: 6px;
  padding: 10px; margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere;
}
.nf-previa.excedeu { border-color: var(--block); }
.nf-contador { font-size: 12.5px; color: var(--nf-muted); }
.nf-contador.excedeu { color: var(--block); font-weight: 600; }

/* --- ocorrências --- */
.nf-ocor { font-size: 12.5px; padding: 8px 10px; border-radius: 6px; margin-top: 6px; border: 1px solid var(--nf-linha); line-height: 1.45; }
.nf-ocor div { color: var(--ink); margin-top: 2px; }
.nf-ocor.nf-bloq   { background: var(--u-erro-fundo,#fbeaea); border-color: var(--block); color: var(--block); }
.nf-ocor.nf-alerta { background: var(--u-ambar-fundo,#fdf3e3); border-color: var(--warn); color: var(--warn); }
.nf-ocor.nf-bloq div, .nf-ocor.nf-alerta div { color: inherit; opacity: .92; }

/* --- controles --- */
.nf-inp {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--nf-linha); border-radius: 6px; background: var(--panel, #fff);
  color: var(--nf-ink); margin: 6px 0;
}
.nf-inp::placeholder { color: var(--muted); }
.nf-inp:focus { outline: 2px solid var(--accent, #2e7d32); outline-offset: -1px; }
.nf-link { background: none; border: 0; padding: 0; color: var(--accent, #2e7d32); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.nf-acoes { margin-top: 14px; display: flex; gap: 8px; }

/* NF047 hotfix (28/07) — resultado de verificação OBSOLETO na seção de revisão.
   Um operador leu "Motorista não informado" de uma verificação de 49 s antes e
   concluiu que o dado não tinha sido salvo (estava). A lista antiga não pode ter
   a mesma aparência da atual: vem apagada, sem cor de severidade competindo com
   o aviso, e sem convidar à ação. Fica legível — o histórico ainda importa. */
.rev-obsoleto-aviso {
  background: var(--u-ambar-fundo,#fdf3e3); border: 1px solid var(--warn); color: var(--warn);
  border-radius: 6px; padding: 9px 11px; font-size: 13px; line-height: 1.45; margin-bottom: 10px;
}
.rev-obsoleto { opacity: .55; filter: grayscale(.85); pointer-events: none; }
.rev-obsoleto h4 { color: var(--muted); }

/* Retorno do "Salvar dados adicionais", AO LADO do botão. O #nf-msg do topo do
   card fica ~900px acima daqui; numa janela de 720px o operador clicava e a
   confirmação nascia fora da tela — parecia que o botão não funcionava. */
.nf-msg-acao { font-size: 13px; align-self: center; line-height: 1.35; }
.nf-msg-acao.ok   { color: var(--ok); font-weight: 600; }
.nf-msg-acao.erro { color: var(--block); font-weight: 600; }