/* O widget `documento_fiscal` (FeitoWeb.Widgets.DocumentoFiscal, docs/telas.md §2.3; o ERP, docs/erp.md §6.6 e §7). A
   nota na gaveta: o título com o selo da situação, o resumo (a ficha, com a chave em grupos e o copiar), os botões do
   DANFE e do XML e o XML legível — a busca com a contagem e o «Só as linhas», e a caixa que rola SÓ ela, com o número
   da linha, o recuo pelo nível, as cores de tag (azul), atributo (marca), valor (vermelho), texto, comentário e
   declaração (apagados), as marcas da busca em amarelo; as linhas longas (a assinatura, o certificado) quebram dentro
   da caixa, e no celular a página não rola de lado. Novo (E0b, 27/10/2026), com o prefixo .df-. Regra (docs/telas.md
   §4, o teste test/feito_web/widgets_regra_test.exs): cor só por token (var(--…), com a cor de hoje como reserva); cor
   nova é token novo, no style.css (claro) e no temas.css (escuro e acrílico). Ligado no layout raiz logo depois do
   style.css (FeitoWeb.Widgets.folhas/0): as camadas da casca vestem por cima, como vestem tudo. Mudou este arquivo:
   `mix casca.escala` (o ./servidor faz sozinho). */

.docf { position: relative; display: grid; gap: var(--v-esp-3, 12px); min-width: 0; max-width: 100%; }
.df-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-esp-2, 8px); }
.df-titulo { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.df-acoes { display: flex; flex-wrap: wrap; gap: var(--v-esp-2, 8px); }

/* a chave de acesso: quebra só entre os grupos de 4 (nunca no meio de um), os algarismos da mesma largura */
.docf .link-box code { font-variant-numeric: tabular-nums; letter-spacing: .02em; word-spacing: .15em;
  white-space: normal; word-break: normal; overflow-wrap: normal; }

/* o XML: o título, os avisos, a busca */
.df-xml-parte { display: grid; gap: var(--v-esp-2, 8px); min-width: 0; }
.df-xml-titulo { margin: 0; font-size: .95rem; }
.df-busca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-esp-2, 8px) var(--v-esp-3, 12px);
  margin: 0; min-width: 0; }
.df-busca > .campo { margin: 0; }
.df-busca > .campo:first-child { flex: 1 1 16rem; min-width: 0; }
.df-busca > .campo:first-child input { width: 100%; box-sizing: border-box; }
.df-conta { color: var(--suave); font-size: .85rem; }

/* a caixa do XML: rola só ela; a fonte de código; o número da linha à esquerda */
.df-xml { max-height: 32rem; overflow: auto; overscroll-behavior: contain; padding: 6px 0;
  border: 1px solid var(--linha); border-radius: var(--v-raio-ctrl, 8px); background: var(--verde-fundo);
  font: .82rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.df-xml:focus-visible { outline: 2px solid var(--v-foco, var(--verde)); outline-offset: 1px; }
.df-l { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); align-items: start; }
.df-num { padding: 0 8px 0 4px; color: var(--suave); text-align: right; user-select: none; opacity: .75;
  font-variant-numeric: tabular-nums; }
.df-cod { display: block; min-width: 0; padding: 0 10px 0 calc(var(--df-nivel, 0) * 1.5em); background: none;
  color: var(--tinta); font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.df-cru .df-cod { padding-left: 4px; }

/* as cores de cada pedaço (só pela classe: o tema decide) */
.df-pont { color: var(--suave); }
.df-tag { color: var(--azul); }
.df-attr { color: var(--verde-esc); }
.df-valor { color: var(--vermelho); }
.df-texto, .df-cdata { color: var(--tinta); }
.df-comentario { color: var(--suave); font-style: italic; }
.df-decl { color: var(--suave); }

/* a busca: as marcas; com «Só as linhas», as de cima apagadas e o traço onde pula linhas */
.df-xml mark { padding: 0 1px; border-radius: 2px; background: var(--amarelo-f); color: var(--tinta);
  box-shadow: inset 0 -2px 0 var(--amarelo); }
.df-l.df-ctx .df-cod { opacity: .6; }
.df-l.df-salto { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--linha); }
.df-nada { margin: 0; padding: 8px 12px; color: var(--suave); font-family: inherit; }

@media (max-width: 760px) {
  .df-xml { max-height: 60vh; font-size: .78rem; }
  .df-l { grid-template-columns: 2.8em minmax(0, 1fr); }
  .df-cod { padding-left: calc(var(--df-nivel, 0) * .9em); }
}