/* Estilos só da área "vendas" (pedidos de venda, nota/romaneio e expedição).
   O padrão geral está em app.css — aqui só o que falta, sempre com prefixo pv-. */

/* ------------------------------------------------------------ lista de pedidos */
/* (app.css: .cartao > .tabela-caixa tem margem negativa pensada para cartão COM espaço,
   e .barra input tira o recuo da lupa — aqui só corrige nas telas desta área) */
.cartao.sem-espaco.pv-tabela-cheia > .tabela-caixa { margin: 0; }
.barra .busca.pv-busca input { padding-left: 44px; }
.pv-filtro-data input { min-width: 180px; }
.pv-limpar { align-self: center; }
.pv-mais { padding: 12px 20px; text-align: center; color: var(--texto-3); font-size: 14px; border-top: 1px solid var(--borda); }
.pv-doc { font-weight: 700; white-space: nowrap; }

/* ------------------------------------------------------------ formulário do pedido */
.formulario .pv-span-2 { grid-column: span 2; }
.cartao > .tabela-caixa.pv-itens-caixa { margin-bottom: 0; }
.pv-centro { justify-content: center; }
.pv-p-modal { margin: 0 0 14px; font-size: 16px; }
.pv-cliente-linha { display: flex; gap: 10px; }
.pv-cliente-linha select { flex: 1; min-width: 0; }
.pv-cliente-linha .btn { flex: 0 0 auto; }

.pv-itens td { vertical-align: top; }
.pv-itens select, .pv-itens input {
  width: 100%; min-height: 46px; padding: 8px 12px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--branco); font-size: 16px;
}
.pv-itens input { text-align: right; }
.pv-itens select:focus, .pv-itens input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0, 90, 170, .15); }
.pv-itens .pv-col-qtd { width: 140px; }
.pv-itens .pv-col-preco { width: 160px; }
.pv-itens .pv-col-desc { width: 130px; }
.pv-itens .pv-col-desc .pv-dica-preco { white-space: nowrap; }
.pv-itens .pv-col-total { width: 150px; }
.pv-itens .pv-col-x { width: 56px; }
.pv-itens td.pv-col-x { padding-top: 20px; }
.pv-itens td.pv-total-linha { font-size: 17px; font-weight: 700; padding-top: 24px; }
.pv-itens .pv-falta { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--texto-2); }
.pv-itens .pv-dica-preco { margin-top: 6px; font-size: 13px; color: var(--texto-3); text-align: right; }
.pv-adicionar { margin-top: 16px; }
/* tabela de preços do pedido (1º campo) e marca discreta do preço que não é o da tabela */
.pv-dica-tabela { display: block; margin-top: 4px; }
.pv-dica-tabela .btn-link { font-size: 13px; padding: 0; min-height: 0; }
.pv-itens input.pv-preco-diferente { border-color: #d9a520; }
.pv-itens .pv-preco-alterado { color: var(--amarelo-texto); }
.pv-aviso-manual { padding: 8px 12px; border-radius: var(--raio); background: var(--amarelo-claro); color: var(--amarelo-texto); border: 1px solid #f0d98a; }
/* janela "Trocar a tabela de preços": os dois botões (textos compridos) quebram linha em vez de sair da janela no celular */
.modal.pv-modal-troca .modal-rodape { flex-wrap: wrap; }
@media (max-width: 480px) { .modal.pv-modal-troca .modal-rodape > .btn { flex: 1 1 100%; } }

.pv-resumo-form { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.pv-resumo-form > .cartao { margin-bottom: 0; }
.pv-conta { width: 100%; border-collapse: collapse; }
.pv-conta td { padding: 8px 0; font-size: 16px; vertical-align: middle; }
.pv-conta td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-conta input { width: 150px; min-height: 42px; padding: 6px 12px; text-align: right; border: 1px solid var(--borda-forte); border-radius: var(--raio); font-size: 16px; }
.pv-conta input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0, 90, 170, .15); }
.pv-conta tr.total td { border-top: 2px solid var(--borda); padding-top: 14px; font-size: 24px; font-weight: 800; color: var(--azul-escuro); }
.pv-rodape-form { margin-top: 20px; }
.pv-rodape-form .pv-total-rodape { font-size: 20px; }
.pv-rodape-form .pv-total-rodape b { font-size: 26px; color: var(--azul-escuro); }

/* ------------------------------------------------------------ pedido aberto na tela */
.pv-cabecalho { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; }
.pv-cabecalho .pv-rotulo { font-size: 14px; color: var(--texto-2); }
.pv-cabecalho .pv-numero { font-size: 34px; font-weight: 800; color: var(--azul-escuro); line-height: 1.1; letter-spacing: .5px; }
.pv-cabecalho .etiqueta { font-size: 16px; padding: 6px 18px; }
.pv-cabecalho .botoes { margin-left: auto; }
.pv-faixa {
  margin-top: 16px; padding: 12px 16px; border-radius: var(--raio);
  font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 10px;
}
.pv-faixa svg { width: 22px; height: 22px; flex: 0 0 22px; }
.pv-faixa.ok { background: var(--verde-claro); color: #145c31; border: 1px solid #b9e2c8; }
.pv-faixa.neutra { background: var(--cinza-etiqueta); color: var(--texto-2); border: 1px solid var(--borda); }
.pv-faixa.alerta { background: var(--amarelo-claro); color: var(--amarelo-texto); border: 1px solid #f0d98a; }
.pv-grade { margin-bottom: 20px; }
.pv-obs { white-space: pre-line; font-weight: 400 !important; }
.pv-totais { display: flex; justify-content: flex-end; margin: 0 -20px -20px; padding: 14px 20px 18px; border-top: 1px solid var(--borda); }
.pv-totais table { border-collapse: collapse; min-width: 320px; }
.pv-totais td { padding: 4px 0; font-size: 16px; }
.pv-totais td.num { text-align: right; padding-left: 28px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-totais tr.total td { font-size: 22px; font-weight: 800; color: var(--azul-escuro); padding-top: 8px; }
.pv-tabela-com-totais > .tabela-caixa { margin-bottom: 0; }
.pv-check { color: var(--verde); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.pv-check svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------ nota de pedido / romaneio (A4) */
.pv-barra-impressao { align-items: center; flex-wrap: wrap; }
.pv-opcao-romaneio {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px;
  background: var(--branco); border: 1px solid var(--borda-forte); border-radius: var(--raio);
  font-size: 16px; cursor: pointer;
}
.pv-opcao-romaneio input { width: 20px; height: 20px; }
.pv-folha .doc-empresa .nome { font-size: 28px; }
.pv-folha .doc-barras svg { max-width: 64mm; }
.folha.sem-precos .so-preco { display: none !important; }
.folha .so-romaneio { display: none; }
.folha.sem-precos .so-romaneio { display: table; }
.pv-doc-caixa td.pv-val-esq { width: 50%; }
.doc-itens tr.pv-vazia td { height: 32px; }
.doc-itens .pv-col-codigo { width: 13%; }
.pv-doc-cancelado {
  text-align: center; font-size: 20px; font-weight: 800; text-transform: uppercase; color: var(--vermelho);
  border: 2px solid var(--vermelho); padding: 6px; margin: -2mm 0 6mm;
}

/* ------------------------------------------------------------ expedição */
.pv-leitor { padding: 18px 20px; }
.pv-leitor .leitor input { min-width: 0; }
.pv-pedido-expedicao .pv-rotulo { font-size: 15px; color: var(--texto-2); }
.pv-pedido-titulo { display: flex; align-items: flex-start; gap: 16px; }
.pv-pedido-titulo h2 { font-size: 30px; font-weight: 800; line-height: 1.2; }
.pv-pedido-titulo .pv-dir { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.pv-pedido-titulo .etiqueta { font-size: 18px; padding: 8px 20px; }
.pv-pedido-expedicao .info-linha { margin-top: 14px; gap: 14px 56px; }

.pv-carga > .tabela-caixa { margin: 0 -20px; }
.pv-pendentes tbody tr { cursor: pointer; }
.pv-carga .tabela tbody tr { cursor: pointer; }
.pv-carga .tabela tr.pv-lido td { background: var(--azul-linha) !important; }
.pv-carga .cartao-titulo .acoes { align-items: center; }
.pv-carga-rodape {
  display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap;
  margin: 0 -20px -20px; padding: 18px 20px; border-top: 1px solid var(--borda);
}
.pv-carga-progresso { flex: 1 1 340px; display: flex; flex-direction: column; gap: 10px; }
.pv-carga-progresso .pv-contagem { font-size: 20px; font-weight: 700; }
.pv-carga-progresso .pv-barra { display: flex; align-items: center; gap: 16px; }
.pv-carga-progresso .pv-pct { font-size: 20px; min-width: 60px; text-align: right; }
.pv-carga-acoes { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.pv-carga-acoes .botoes { justify-content: flex-end; }

.pv-alerta-grande {
  display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--raio);
  font-size: 22px; font-weight: 700; margin-bottom: 20px;
}
.pv-alerta-grande svg { width: 44px; height: 44px; flex: 0 0 44px; }
.pv-alerta-grande.ok { background: var(--verde-claro); color: #145c31; border: 1px solid #b9e2c8; }
.pv-alerta-grande.alerta { background: var(--amarelo-claro); color: var(--amarelo-texto); border: 1px solid #f0d98a; }
.pv-alerta-grande.critico { background: var(--vermelho-claro); color: #8a1c1c; border: 1px solid #f3b9b9; }
.pv-alerta-grande .botoes { margin-left: auto; }

@media screen and (max-width: 860px) {
  .pv-resumo-form { grid-template-columns: 1fr; }
  .pv-cabecalho .botoes { margin-left: 0; }
  .pv-pedido-titulo { flex-direction: column; }
  .pv-pedido-titulo .pv-dir { margin-left: 0; }
  .pv-pedido-titulo h2 { font-size: 24px; }
  .pv-cliente-linha { flex-direction: column; }
  .formulario .pv-span-2 { grid-column: auto; }
  .pv-alerta-grande { flex-wrap: wrap; font-size: 18px; }
  .pv-leitor .leitor { gap: 12px; }
  .pv-leitor .leitor svg.icone-barras { width: 44px; height: 40px; flex: 0 0 44px; }
  .pv-leitor .leitor input { min-height: 60px; font-size: 18px; padding: 0 12px; }
  .pv-carga-acoes { flex: 1 1 100%; }
  .pv-carga-acoes .btn.grande { font-size: 18px; padding: 0 14px; white-space: normal; }

  /* itens do pedido no celular: cada linha vira um cartão (produto na linha inteira;
     quantidade, preço e lixeira embaixo; total da linha por último) */
  .cartao > .tabela-caixa.pv-itens-caixa { margin: 0; overflow: visible; }
  .pv-itens, .pv-itens tbody { display: block; width: 100%; }
  .pv-itens thead { display: none; }
  .pv-itens tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 10px; padding: 14px 0; border-bottom: 1px solid var(--borda); }
  .pv-itens tbody tr:last-child { border-bottom: 0; }
  .pv-itens-caixa .tabela.pv-itens td,
  .pv-itens-caixa .tabela.pv-itens td:first-child,
  .pv-itens-caixa .tabela.pv-itens td:last-child { display: block; width: auto; padding: 0; border: 0; }
  .pv-itens tbody tr:hover td { background: transparent; }
  .pv-itens td:first-child { grid-column: 1 / -1; }
  .pv-itens td.pv-col-qtd::before, .pv-itens td.pv-col-preco::before, .pv-itens td.pv-col-desc::before {
    display: block; margin-bottom: 4px; font-size: 14px; color: var(--texto-2); text-align: left;
  }
  .pv-itens td.pv-col-qtd::before { content: 'Quantidade'; }
  .pv-itens td.pv-col-desc::before { content: 'Desc. %'; }
  .pv-itens td.pv-col-preco::before { content: 'Preço unitário (R$)'; }
  .pv-itens-caixa .tabela.pv-itens td.pv-col-x { align-self: start; padding-top: 24px; }
  .pv-itens-caixa .tabela.pv-itens td.pv-col-desc { grid-column: 1 / 2; grid-row: 3; }
  .pv-itens-caixa .tabela.pv-itens td.pv-col-desc .pv-dica-preco { text-align: left; }
  .pv-itens-caixa .tabela.pv-itens td.pv-total-linha { grid-column: 2 / -1; grid-row: 3; text-align: right; padding: 0; align-self: center; }
}

/* ===================== Nota de pedido no modelo do orçamento da fábrica (.nf-) ===================== */
/* Fonte sem serifa como a do modelo, bordas finas pretas/cinza, faixa "Produtos" no azul da marca. */
.nf-folha { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #111; padding: 9mm 10mm 9mm; }
.nf-caixa { border: 1px solid #222; margin-bottom: 1mm; }
.nf-caixa.nf-empresa { margin-bottom: 3mm; }
.nf-maius { text-transform: uppercase; }
.nf-rot { color: #111; text-align: right; white-space: nowrap; padding-right: 6px; }

/* tabela que envolve a folha: o <thead> (caixa da empresa com o código de barras) repete em toda página */
.nf-pagina { width: 100%; border-collapse: collapse; }
.nf-pagina > thead > tr > td, .nf-pagina > tbody > tr > td, .nf-pagina > tfoot > tr > td { padding: 0; vertical-align: top; }
.nf-pagina > thead { display: table-header-group; }

/* topo: logo | dados da empresa (centro) | código de barras */
.nf-empresa { display: grid; grid-template-columns: 36mm 1fr 57mm; align-items: center; gap: 1.5mm; padding: 2mm 2mm 2mm 3mm; min-height: 30mm; }
.nf-logo { width: 34mm; height: auto; display: block; }
.nf-empresa-texto { text-align: center; line-height: 1.6; font-size: 11px; }
.nf-empresa-nome { font-size: 18px; font-weight: 400; letter-spacing: .2px; line-height: 1.3; margin-bottom: 1mm; }
.nf-sep { display: inline-block; min-width: 9mm; text-align: center; }
.nf-barras { text-align: center; }
.nf-barras svg { display: block; width: 56mm; height: auto; margin: 0 auto; }   /* barra fina de ~0,46 mm */
.nf-barras-numero { font-size: 14px; font-weight: 700; letter-spacing: 1px; margin-top: .5mm; }

/* dados do pedido e do cliente */
.nf-dados { padding: .5mm 0; }
.nf-linha-topo { display: flex; justify-content: space-between; padding: .6mm 3mm .6mm 0; font-size: 13px; }
.nf-linha-topo .nf-rot { padding-right: 3mm; }
.nf-linha-topo .nf-data { min-width: 64mm; }
.nf-grade { width: 100%; border-collapse: collapse; }
.nf-grade-cliente { table-layout: fixed; }
/* texto longo quebra linha (nada some: o motorista precisa do endereço inteiro); os rótulos (.nf-rot) não quebram */
.nf-grade-cliente td { overflow-wrap: anywhere; }
.nf-grade-cliente .nf-fone { white-space: nowrap; }
.nf-grade td { padding: .45mm 1.5mm; vertical-align: top; font-size: 12px; }
.nf-grade td.nf-rot { font-size: 12.5px; padding-left: 2mm; padding-right: 2mm; }
.nf-pagto { padding: .5mm 0; }
.nf-pagto .nf-grade td.nf-rot { width: 30mm; text-align: right; }

/* faixa "Produtos" (azul da marca, sem gradiente) */
.nf-faixa {
  margin: 3.5mm 0 1.5mm; padding: .6mm 5mm; font-weight: 700; font-variant: small-caps; font-size: 14px; letter-spacing: .3px;
  color: #fff; background: #005aaa; border-radius: 0 0 5px 5px;
}

/* tabela de produtos (linhas alternadas cinza/branco, bordas finas) */
.nf-itens { width: 100%; border-collapse: collapse; }
.nf-itens th { text-align: left; font-size: 13px; font-weight: 700; padding: 1mm 1.5mm .6mm; }
.nf-itens td { padding: .8mm 1.5mm; font-size: 11px; border-top: 1px solid #555; border-bottom: 1px solid #555; vertical-align: top; }
.nf-itens tbody tr:nth-child(odd) td { background: #ececec; }
.nf-itens tbody tr td:first-child { border-left: 1px solid #555; }
.nf-itens tbody tr td:last-child { border-right: 1px solid #555; }
.nf-itens .nf-col-qtde { width: 12mm; }
.nf-itens .nf-col-codigo { width: 20mm; }
.nf-itens .nf-col-valor { width: 20mm; }
.nf-itens .nf-col-desc { width: 15mm; }
.nf-itens .nf-col-total { width: 24mm; }
.nf-itens .num, .nf-parcelas .num, .nf-total .num { text-align: right; white-space: nowrap; }
.nf-itens .centro { text-align: center; }
.nf-itens tr { page-break-inside: avoid; break-inside: avoid; }
.nf-itens thead { display: table-header-group; }

/* totais em caixa à direita (Sub Total colado na tabela; Total Final mais abaixo, em negrito).
   break-before: avoid leva a última linha de produto junto quando os totais pulam de página: a caixa do Sub Total
   (sem borda em cima) nunca fica sozinha no topo da página seguinte. O mesmo vale para "Total de volumes". */
.nf-itens { break-after: avoid; page-break-after: avoid; }
.nf-totais { break-inside: avoid; page-break-inside: avoid; break-before: avoid; page-break-before: avoid; }
.nf-total { margin-left: auto; width: 62mm; border-collapse: collapse; border: 1px solid #222; margin-top: 1.5mm; }
.nf-total-sub { margin-top: 0; border-top: 0; }
.nf-total td { padding: .8mm 2.5mm; font-size: 13px; }
.nf-total-rot { font-weight: 700; text-align: center; }
.nf-total-final { margin-top: 8mm; }
.nf-total-final td { font-weight: 700; font-size: 14px; }

/* forma de pagamento e parcelas */
.nf-forma { border-top: 1px solid #222; border-bottom: 1px solid #222; margin-top: 4mm; padding: 1.5mm 1mm 2mm; break-inside: avoid; page-break-inside: avoid; }
.nf-forma-rot { font-size: 14px; margin-right: 4mm; }
.nf-parcelas { width: 75%; border-collapse: collapse; margin-top: 1.5mm; }
.nf-parcelas th { text-align: left; font-size: 13px; padding: .6mm 1.5mm; }
.nf-parcelas th.num { text-align: right; }
.nf-parcelas td { font-size: 12px; padding: .6mm 1.5mm; }
.nf-parcelas .nf-col-data { width: 30mm; }
.nf-parcelas .nf-col-valor { width: 24mm; }
.nf-parcelas .nf-col-tipo { width: 40mm; padding-left: 6mm; }
.nf-parcelas td:nth-child(3) { padding-left: 6mm; }
.nf-obs { margin-top: 2mm; font-size: 13px; min-height: 8mm; display: flex; gap: 1.5mm; }
.nf-obs-rot { flex: 0 0 auto; }
.nf-obs-texto { white-space: pre-line; }
.nf-rodape { text-align: center; font-size: 10px; color: #333; margin-top: 8mm; }

/* romaneio sem preços: mostra os volumes e as assinaturas; com preços, esconde */
.folha .so-romaneio-bloco { display: none; }
.folha.sem-precos .so-romaneio-bloco { display: flex; }
.folha.sem-precos .so-preco { display: none !important; }
.folha .nf-total.so-romaneio { display: none; }
.folha.sem-precos .nf-total.so-romaneio { display: table; margin-top: 0; border-top: 0; break-before: avoid; page-break-before: avoid; }

/* impressão: a página continua com margem 0 (app.css) — com margem no @page o Edge/Chrome libera e já deixa marcada
   a opção "Cabeçalhos e rodapés", e sairiam data, título e o endereço http://localhost... na nota do cliente.
   A margem de papel de 9 mm em cima e embaixo de TODA página vem da própria tabela .nf-pagina: o <thead> (repete em
   toda página) ganha 9 mm em cima e o <tfoot> vazio (também repete) ocupa 9 mm embaixo. */
@media print {
  .nf-folha { padding: 0 10mm; page-break-after: auto; break-after: auto; }
  .nf-empresa { break-inside: avoid; }
  .nf-pagina > thead > tr > td { padding-top: 9mm; }
  .nf-pagina > tfoot { display: table-footer-group; }
  .nf-pagina > tfoot > tr > td { height: 9mm; padding: 0; }
}

/* celular: a folha da nota (feita para A4) rola para o lado dentro dela mesma, e não a página inteira */
@media screen and (max-width: 860px) {
  .nf-folha { overflow-x: auto; padding: 12px; }
  .nf-pagina { min-width: 190mm; }
}