/* ===========================================================================
   MÓDULO FATURAMENTO — Faturamento e notas fiscais
   ---------------------------------------------------------------------------
   Este arquivo veio do `public/styles.css` na CS2 do `CSS_POR_MODULO_LOOP.md`
   (item 35): são as regras que só esta tela usa. O que é de TODOS (a casca, os
   primitivos, o BI) continua em `styles.css`/sdk-ui, e o mapa de donos é
   `scripts/lib/modulos-do-front.js`. Carregado no `index.html` logo DEPOIS de
   `styles.css` — a ordem é o que preserva a cascata de antes da mudança.
   Regra nova de tela daqui nasce AQUI, não no `styles.css`.
   =========================================================================== */

.nf-acoes-linha { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }

/* FX4/D-P5: a mensagem gravada do teste validado, dentro da faixa amarela (o texto da prefeitura). */
.nf-teste-validado-mensagem { margin-top: 0.35rem; font-size: 0.8rem; }

.fat-check { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.75rem; font-size: 0.85rem; }

.fat-check input { margin-top: 0.2rem; }

/* Adicionar parcela (mockup aprovado em 13/10/2026): o botão fica sob a tabela, a linha nova é destacada até o primeiro toque,
   e a região viva do anúncio colapsa por margem zero — NUNCA display:none, que arriscaria o anúncio. */
.fat-pc-adicionar { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.75rem; }

.fat-pc-vivo { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--muted-foreground); }

.fat-pc-vivo:empty { margin: 0; }

.fat-pc-nova td { background: var(--info-bg-soft); }

.fat-soma { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.6rem 0.8rem; margin-top: 0.75rem; background: var(--muted); border-radius: var(--radius-md); font-variant-numeric: tabular-nums; font-size: 0.85rem; }

.fat-soma { align-items: center; justify-content: flex-start; }

.fat-soma--ok { background: var(--success-bg-soft); color: var(--success-strong); }

/* O banner tem display próprio: sem isto o atributo hidden não o esconde (a armadilha do [hidden] do CLAUDE.md). */
.fat-soma[hidden] { display: none; }

.fat-barra-selecao { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }

/* PF1 (D1–D3 do mockup `pacote-faturamento-mockup.html`, seção 1; `DESIGN.md`, "Ações por linha"):
   a coluna "Mais Ações" da lista de Faturas. O botão e os itens são os do padrão do projeto
   (`.bi-acoes-*` do styles.css); aqui mora só o que a TABELA pede: o menu é `position: fixed`
   porque o `.os-rolagem` recorta o `absolute` — as coordenadas vêm do botão, ao abrir (o painel
   as escreve). */
.fat-col-acoes { white-space: nowrap; }

.fat-acoes-menu { position: fixed; z-index: 40; max-width: min(24rem, calc(100vw - 1rem)); max-height: min(70vh, 24rem); overflow-y: auto; }

/* PF6 - o passo 1 do pacote do faturamento (mockup secoes 2 e 3). Duas colunas no computador,
   uma no celular: os documentos e os contatos nunca disputam a mesma largura. */
.fat-pacote-sub { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--muted-foreground); }
.fat-pacote-passos { display: flex; gap: 0.4rem; margin-top: 0.3rem; font-size: 0.8rem; color: var(--muted-foreground); }
.fat-pacote-passos b { color: var(--foreground); }
.fat-pacote-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.fat-pacote-grupo { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.6rem 0.75rem; }
.fat-pacote-grupo + .fat-pacote-grupo { margin-top: 0.75rem; }
.fat-pacote-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding-bottom: 0.4rem; margin-bottom: 0.35rem; border-bottom: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; }
.fat-pacote-dica { font-size: 0.74rem; font-weight: 400; color: var(--muted-foreground); text-align: right; }
.fat-pacote-item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.32rem 0; cursor: pointer; }
.fat-pacote-item input { margin-top: 0.18rem; flex: none; }
.fat-pacote-nome { flex: 1; display: flex; flex-direction: column; font-size: 0.88rem; }
.fat-pacote-nome small { font-size: 0.76rem; color: var(--muted-foreground); }
.fat-pacote-tam { font-size: 0.78rem; color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fat-pacote-item--travada { opacity: 0.65; cursor: not-allowed; }
.fat-pacote-total { display: flex; justify-content: space-between; padding: 0.5rem 0.25rem 0.25rem; font-size: 0.85rem; font-weight: 600; }
.fat-pacote-num { font-variant-numeric: tabular-nums; }
.fat-pacote-legenda { margin: 0.55rem 0 0.1rem; font-size: 0.76rem; font-weight: 600; color: var(--muted-foreground); }
.fat-pacote-lista { margin: 0.4rem 0 0; padding-left: 1.2rem; }
@media (max-width: 720px) { .fat-pacote-duas { grid-template-columns: 1fr; } }

/* Item 67 (mockup `pacote-carregando-mockup.html`, aprovado em 23/10/2026; D1–D8): o que o modal
   mostra ENQUANTO os PDFs são gerados. O primitivo `.zr-skeleton` NÃO muda — aqui só a cor dele
   dentro desta modal (D8), a forma das linhas (D1), a frase de estado (D2) e a barra fina. */
.fat-pacote-sk { display: block; }

.fat-pacote-item--sk { align-items: center; }

.fat-pacote-nome--sk { gap: 0.4rem; }

/* D8: o cinza do sistema (`--accent`, 97%) quase some pulsando sobre o branco do cartão; aqui,
   dentro DESTA modal, o bloco usa `--border` (92%). Os outros usos do primitivo não mudam. */
#fat-pacote-overlay .zr-skeleton { background: var(--border); }

/* D2: a frase de estado em destaque — o `role="status"` (D6) vem do HTML que o painel pinta. */
.fat-pacote-status { margin: 0 0 0.8rem; padding: 0.55rem 0.75rem; border: 1px solid var(--border); background: var(--muted); border-radius: var(--radius-md); font-size: 0.85rem; }

.fat-pacote-status b { font-weight: 600; }

/* D4: passou dos 8 s — azul-claro de INFORMAÇÃO, nunca vermelho de erro: nada deu errado. */
.fat-pacote-status--demora { background: var(--info-bg-soft); border-color: color-mix(in oklch, var(--info) 30%, var(--background)); color: var(--info-strong); }

/* D2: a barra fina e indeterminada, colada na borda de baixo do cabeçalho (que ganha `position`
   só nesta modal). Sem percentual: o servidor responde de uma vez, "2 de 4" seria invenção. */
#fat-pacote-overlay .os-modal-cab { position: relative; }

.fat-pacote-barra { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; overflow: hidden; }

.fat-pacote-barra[hidden] { display: none; }

.fat-pacote-barra::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--primary); border-radius: 3px; animation: fat-pacote-correr 1.4s ease-in-out infinite; }

@keyframes fat-pacote-correr { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* D5: a nota à esquerda do rodapé enquanto o pacote carrega. */
.fat-pacote-rodape-nota { margin-right: auto; font-size: 0.78rem; color: var(--muted-foreground); }

/* 🔴 D6 (movimento reduzido) NÃO tem bloco `@media` aqui, de propósito: um bloco parcial nesta
   folha reprova no `piso-qualidade.test.js` (todo bloco de folha precisa neutralizar animação E
   transição), e repetir o neutralizador global reprova no `css-por-modulo.test.js` (nenhuma regra
   em dois arquivos). O pulso dos blocos já para pelo bloco global do `styles.css`; a BARRA some por
   decisão do painel (`movimentoReduzido`, `matchMedia`) — portão no teste de tela do item 67. */

/* PF9 — o passo 2 (prévia, teste e envio; mockup seção 4) e o histórico (seção 5). */
/* O cartão do e-mail: cabeçalho em duas colunas (rótulo cinza · valor), corpo e a faixa dos anexos. */
.fat-pacote-email { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.fat-pacote-email-cab { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.2rem 0.5rem; align-items: baseline; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); background: var(--sidebar); font-size: 0.8rem; }
.fat-pacote-email-cab > :nth-child(odd) { color: var(--muted-foreground); }
.fat-pacote-email-cab > :nth-child(even) { min-width: 0; overflow-wrap: anywhere; }
.fat-pacote-assunto { height: 1.9rem; }
.fat-pacote-email-corpo { padding: 0.8rem; font-size: 0.85rem; }
/* O texto inteiro, SEM barra de rolagem: a altura acompanha o conteúdo (o JS mede; `field-sizing`
   faz o mesmo onde o navegador suporta). Quem rola é o corpo do modal. */
.fat-pacote-email-corpo .zr-textarea { font-size: 0.85rem; overflow: hidden; resize: none; field-sizing: content; }
/* A assinatura é o `html_final` do cadastro (o mesmo da prévia da tela do colaborador), com os
   estilos dele: aqui só a linha que a separa do texto. */
.fat-pacote-assinatura { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border); overflow-x: auto; }
.fat-pacote-assinatura .zr-alert { margin: 0; }
.fat-pacote-anexos-previa { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.6rem 0.8rem; border-top: 1px solid var(--border); }
.fat-pacote-anexo { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; padding: 0.15rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.75rem; overflow-wrap: anywhere; }
.fat-pacote-ajuda { margin: 0.3rem 0 0.6rem; }
/* O rodapé do passo 2: "Voltar" à esquerda, os envios à direita; a lista do teste abre ACIMA do botão. */
.fat-pacote-rodape .fat-pacote-voltar { margin-right: auto; }
.fat-pacote-combo { position: relative; display: inline-flex; }
.fat-pacote-combo[hidden] { display: none; }
.fat-pacote-teste-menu { position: absolute; bottom: calc(100% + 0.3rem); right: 0; z-index: 41; min-width: 17rem; padding: 0.25rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgb(0 0 0 / 12%); }
.fat-pacote-teste-menu[hidden] { display: none; }
.fat-pacote-teste-rot { padding: 0.3rem 0.5rem; font-size: 0.72rem; color: var(--muted-foreground); }
.fat-pacote-historico { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.fat-pacote-historico th, .fat-pacote-historico td { text-align: left; padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--border); }
@media (max-width: 520px) {
  #fat-pacote-voltar, #fat-pacote-conectar, #fat-pacote-combo-teste, #fat-pacote-enviar-cliente { flex: 1 0 100%; justify-content: center; }
  #fat-pacote-enviar-teste { flex: 1; justify-content: center; }
  .fat-pacote-rodape .fat-pacote-voltar { margin-right: 0; }
  .fat-pacote-teste-menu { left: 0; right: 0; min-width: 0; }
}

.fat-cad-barra { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; }

.nfd-copia { overflow-wrap: anywhere; }

/* A grade rola dentro do `.os-rolagem`; o min-width é o do mockup menos a coluna das Instruções (R15). */
.fo-grade { min-width: 1080px; }

.fo-col-chk { width: 2.25rem; }

.fo-grade tr[data-marcada="true"] td { background: color-mix(in srgb, var(--info-bg-soft) 70%, var(--background)); }

.fo-tipos-linha { display: inline-flex; gap: 0.2rem; flex-wrap: nowrap; }

.fo-pronta { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 500; border-radius: var(--radius-md); padding: 0.1rem 0.5rem; white-space: nowrap; background: var(--success-bg-soft); color: var(--success-strong); }

.fo-chk { width: 1.05rem; height: 1.05rem; accent-color: var(--primary); cursor: pointer; }

.fo-chk:disabled { cursor: not-allowed; }

.fo-chk:focus-visible { outline: 3px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: 2px; }

/* ═══ FO10 — a tela "Nova fatura" (as 5 seções e o resumo) ═══════════════════
   Classes `fn-*`, do mockup aprovado `faturamento-criar-fatura-completa-mockup.html`. Só tokens do
   `tokens.css`; os textos de estado e a ordem das seções são os do mockup. A barra de abas fica
   escondida pelo ENVOLTÓRIO (`#fat-abas-barra`, FO5) — esta vista é de tela cheia. */
.fn-cab { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }

.fn-cab h3 { margin: 0; font-size: 1.05rem; flex: 1 1 auto; min-width: 0; }

.fn-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1rem; align-items: start; }

.fn-secoes { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.fn-secao { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }

.fn-secao-cab { display: flex; gap: 0.5rem; align-items: center; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); }

.fn-secao-cab h4 { margin: 0; font-size: 0.95rem; }

.fn-passo { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); font-size: 0.8rem; font-weight: 600; }

.fn-direita { margin-left: auto; }

.fn-secao-corpo { padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; }

.fn-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.6rem 1rem; }

.fn-dado-rotulo { font-size: 0.75rem; color: var(--muted-foreground); }

.fn-dado-valor { font-size: 0.9rem; }

.fn-falta { color: var(--warning-strong); display: inline-flex; gap: 0.25rem; align-items: center; }

.fn-obrig { color: var(--destructive); }

/* PT8 — o bloco "Cobrança destes títulos" (mockup 3/3b): a MESMA caixa na Nova fatura e na ficha
   da fatura. O `.zr-card` dá a borda/fundo; aqui só o respiro e o cabeçalho com o botão à direita. */
.fn-cobranca { padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; }

.fn-cobranca-cab { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.fn-cobranca-cab h4 { margin: 0; font-size: 0.95rem; }

.fn-check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.875rem; }

.fn-check input { margin-top: 0.2rem; accent-color: var(--primary); }

.fn-tabela { width: 100%; }

.fn-soma { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; border-radius: var(--radius-md); padding: 0.5rem 0.75rem; font-size: 0.875rem; }

.fn-soma span { display: inline-flex; align-items: center; gap: 0.3rem; }

.fn-regras { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.5rem; }

.fn-previa { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.35rem; background: var(--muted); }

.fn-previa-lin { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.5rem; font-size: 0.85rem; }

.fn-badge-erro { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 500; border-radius: var(--radius-md); padding: 0.1rem 0.5rem; background: var(--warning-bg-soft); color: var(--warning-strong); }

.fn-resumo { position: sticky; top: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }

.fn-resumo-topo { display: flex; flex-direction: column; gap: 0.15rem; }

.fn-total { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.fn-resumo-linhas { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.875rem; }

.fn-resumo-linhas > div { display: flex; justify-content: space-between; gap: 0.75rem; }

.fn-conferencia-bloco h5 { margin: 0 0 0.35rem; font-size: 0.85rem; }

.fn-conferencia { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; }

.fn-conferencia li { display: flex; gap: 0.4rem; align-items: flex-start; }

.fn-pend-ico { display: inline-flex; flex: none; }

.fn-pend-ok .fn-pend-ico { color: var(--success-strong); }

.fn-pend-erro .fn-pend-ico { color: var(--warning-strong); }

.fn-link { margin-left: 0.25rem; }

.fn-acoes { display: flex; flex-direction: column; gap: 0.5rem; }

.fn-largo { width: 100%; }

.fn-centro { text-align: center; margin: 0; }

.fn-ambiente { display: flex; gap: 0.5rem; align-items: flex-start; border-radius: var(--radius-md); padding: 0.5rem 0.75rem; background: var(--warning-bg-soft); color: var(--warning-strong); font-size: 0.8rem; }

/* FN7 (D5): a lista do "Acrescentar ordem deste cliente" — as ordens prontas da fila, sem dropdown. */
.fn-add-ordens { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }

.fn-disponiveis { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.35rem; background: var(--card); }

.fn-disponivel { padding: 0.45rem 0.6rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--foreground); font: inherit; font-size: 0.85rem; text-align: left; cursor: pointer; }

.fn-disponivel:hover { background: var(--muted); }

.fn-disponivel:focus-visible { outline: 3px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: 1px; }

@media (max-width: 900px) {
  .fn-layout { grid-template-columns: minmax(0, 1fr); }
  .fn-resumo { position: static; }
  .fn-previa-lin { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}

/* FO11 — a confirmação (FC-M6), o resultado (FC-M10) e a falha da nota (FC-M4). O diálogo é um
   overlay de autor sobre a própria tela; em "emitindo" os controles ficam `disabled` (JS). */
.fn-resultado { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; }

.fn-resultado:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.fn-resultado h4 { margin: 0; display: flex; gap: 0.5rem; align-items: center; }

.fn-resultado--falha { border-color: var(--destructive); }

.fn-botoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.fn-titulo-tabela { margin: 1rem 0 0.5rem; }

.fn-dialogo-fundo { position: fixed; inset: 0; background: oklch(0 0 0 / 0.45); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 1rem; }

.fn-dialogo { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); max-width: 34rem; width: 100%; max-height: 90vh; overflow: auto; }

.fn-dialogo-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }

.fn-dialogo-cab h3 { margin: 0; }

.fn-dialogo-corpo { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }

.fn-dialogo-rodape { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--border); }

.fn-lista { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; }

.fo-sucesso { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; background: var(--success-bg-soft); color: var(--success-strong); border-radius: var(--radius-md); padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; font-size: 0.85rem; }

.fo-sucesso-texto { display: flex; gap: 0.4rem; align-items: center; }

/* FN1: o Consultor da lista de notas pode ter muitos nomes — a caixa dos filtros limita a largura
   e quebra em linhas (o mockup aprovado: `max-width: 34rem`), como no filtro de Contas a receber. */
.cr-multi-caixas--consultor { max-width: 34rem; }

/* ST4d (item 78): o motivo da alteração das parcelas, acima do "Salvar parcelas" (a auditoria da fatura). */
.fat-pc-motivo { margin-top: 0.9rem; max-width: 46rem; }

/* ─── ST4e (item 88): a Auditoria da fatura — a linha do tempo do mockup ─────────────────────── */
.fat-tempo { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.fat-tempo > li { position: relative; padding: 0 0 1.2rem 2.5rem; }
.fat-tempo > li::before { content: ""; position: absolute; left: 0.8rem; top: 1.8rem; bottom: 0.1rem; width: 2px; background: var(--border); }
.fat-tempo > li:last-child { padding-bottom: 0; }
.fat-tempo > li:last-child::before { display: none; }
.fat-tempo-marca { position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--muted); display: grid; place-items: center; color: var(--muted-foreground); }
.fat-tempo p { margin: 0.2rem 0; }
.fat-tempo-cab { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; min-height: 1.7rem; }
.fat-tempo-meta { color: var(--muted-foreground); font-size: 0.78rem; }
.fat-tempo-ajuda { color: var(--muted-foreground); font-size: 0.78rem; }
.fat-tempo-selo { margin-top: 0.4rem; }
.fat-mudou { color: var(--success); font-weight: 600; }