/* ===========================================================================
   Sistema de botões (5 tipos) - uma regra por papel, em vez de uma por tela.
   Primário  : button.principal            (1 por bloco)
   Secundário: button.secundario
   Fantasma  : .btn-fantasma / .btn-linha-acao   (ações de linha de tabela)
   Destrutivo: qualquer excluir/remover/cancelar-nota/.acao-alerta (contorno vermelho; .btn-perigo = cheio, só em confirmação)
   Link      : .btn-link
   Sem mudar nenhum HTML: as classes antigas entram nos grupos abaixo.
   =========================================================================== */
button.secundario[class*='btn-excluir-'],
button.secundario[class*='btn-remover-'],
button.secundario.btn-cancelar-nota,
.btn-linha-acao.acao-alerta {
  color: var(--cor-erro-texto);
  border-color: var(--cor-erro-borda);
}
button.secundario[class*='btn-excluir-']:hover,
button.secundario[class*='btn-remover-']:hover,
button.secundario.btn-cancelar-nota:hover,
.btn-linha-acao.acao-alerta:hover {
  background: var(--cor-erro-fundo);
}

/* "Remover" de linha de formulário: mesmo raio e espaçamento dos outros botões compactos */
.btn-remover-linha {
  border-radius: var(--raio-campo);
  padding: var(--sp-1) var(--sp-2);
}

/* Fantasma: ação leve, sem fundo até passar o mouse */
.btn-fantasma {
  background: transparent;
  border: 1px solid transparent;
  color: var(--cor-destaque);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--raio-campo);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.btn-fantasma:hover {
  background: var(--cor-secundario-fundo-hover);
}

/* Link: parece texto, é botão */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--cor-destaque);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}


/* ===========================================================================
   Refino dos botões (13/10/2026): altura única, primário na cor de ação da marca
   (esmeralda), secundário com contorno neutro. Sem mudar a estrutura: as mesmas
   classes (principal / secundario) de sempre, só o acabamento.
   =========================================================================== */
:root {
  --alt-botao: 38px;
  --alt-botao-sm: 30px;
}
button.principal,
button.secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--alt-botao);
  padding: 0 18px;
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  border-radius: var(--raio-controle);
}
button.principal {
  background: var(--cor-acento-forte);
  color: #fff;
}
button.principal:hover {
  background: var(--cor-acento-hover, #0a6b50);
}
button.secundario {
  background: var(--cor-fundo-cartao);
  color: var(--cor-texto);
  border: 1px solid var(--cor-input-borda);
}
button.secundario:hover {
  background: var(--cor-secundario-fundo);
  border-color: var(--cor-texto-secundario);
}
/* Botão dentro de tabela / linha de lista: compacto */
td button.principal,
td button.secundario {
  min-height: var(--alt-botao-sm);
  padding: 0 12px;
  font-size: var(--fs-sm);
  margin: 2px 6px 2px 0;
}
/* Destrutivo: contorno vermelho, só enche no hover (vale também fora de tabela) */
button.secundario[class*='btn-excluir-'],
button.secundario[class*='btn-remover-'],
button.secundario.btn-cancelar-nota {
  color: var(--cor-erro-texto);
  border-color: var(--cor-erro-borda);
}
button.secundario[class*='btn-excluir-']:hover,
button.secundario[class*='btn-remover-']:hover,
button.secundario.btn-cancelar-nota:hover {
  background: var(--cor-erro-fundo);
  border-color: var(--cor-erro-texto);
}
/* "+ Nova empresa" do topo: contorno, para não competir com o botão principal da tela */
#btn-nova-empresa-topo {
  background: var(--cor-fundo-cartao);
  color: var(--cor-acento-forte);
  border: 1px solid var(--cor-acento-forte);
  box-shadow: none;
}
#btn-nova-empresa-topo:hover {
  background: var(--cor-acento-fundo);
  box-shadow: none;
}
/* Barra de ações do formulário de cadastro: separada dos campos */
.barra-acoes button { margin-top: 0; }
.barra-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--cor-borda);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) button.principal { background: var(--cor-acento); color: #06251b; box-shadow: none; }
  :root:not([data-theme="light"]) button.principal:hover { background: var(--cor-acento-forte); }
  :root:not([data-theme="light"]) #btn-nova-empresa-topo { background: transparent; color: var(--cor-acento-forte); border-color: var(--cor-acento-forte); }
}
:root[data-theme="dark"] button.principal { background: var(--cor-acento); color: #06251b; box-shadow: none; }
:root[data-theme="dark"] button.principal:hover { background: var(--cor-acento-forte); }
:root[data-theme="dark"] #btn-nova-empresa-topo { background: transparent; color: var(--cor-acento-forte); border-color: var(--cor-acento-forte); }

/* ---- GAPs: barra de comandos por módulo e painel lateral (navegação contextual) ---- */
.gaps-modulo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 -24px;
  padding: 10px 24px;
  /* Fica visível ao rolar a página: logo abaixo do cabeçalho fixo (.topo, 56px). */
  position: sticky;
  top: var(--altura-topo, 56px);
  z-index: var(--z-sticky-alto);
  background: var(--cor-fundo-cartao);
  border-bottom: 1px solid var(--cor-borda);
}
.gap-botao {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--raio-controle);
  border: 1px solid var(--cor-secundario-borda);
  background: var(--cor-secundario-fundo);
  color: var(--cor-destaque);
  cursor: pointer;
}
.gap-botao:hover { background: var(--cor-secundario-fundo-hover); }
.gap-botao.ativo {
  background: var(--cor-primaria);
  color: #fff;
  border-color: var(--cor-primaria);
}
.gap-botao:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 2px; }
.gaps-status { margin-bottom: 6px; }
.gaps-status:empty { display: none; }
tr.linha-cliente.selecionada td { background: var(--cor-secundario-fundo); }
.painel-lateral {
  position: fixed;
  top: var(--altura-topo, 56px);
  right: 0;
  bottom: 0;
  width: min(460px, 100%);
  z-index: var(--z-painel);
  display: flex;
  flex-direction: column;
  background: var(--cor-fundo-cartao);
  border-left: 1px solid var(--cor-borda);
  box-shadow: var(--sombra-flutuante);
  overflow: hidden;
}
.painel-lateral[hidden] { display: none; }
.painel-lateral-cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cor-borda);
}
.painel-lateral-cab h3 { margin: 0; font-size: var(--fs-md); }
#painel-clientes-corpo { padding: 14px 16px; overflow: auto; flex: 1; }
.painel-detalhes { display: grid; gap: 10px; margin: 0; }
.painel-campo dt { font-size: var(--fs-micro); color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.painel-campo dd { margin: 2px 0 0; }
.linha-chave-historico td { border-top: 0; padding-top: 0; }
@media (max-width: 720px) {
  .painel-lateral { width: 100%; }
}

/* Seta de clientes cadastrados ao lado do campo de destinatário, e a lista com rolagem. */
.btn-seta-clientes, .btn-seta-municipio, .btn-seta-condutor { min-width: 40px; padding-left: 0; padding-right: 0; font-size: var(--fs-md); }
#sugestoes-cliente-flutuante { max-height: 320px; overflow-y: auto; }
.btn-seta-produto { min-width: 40px; padding-left: 0; padding-right: 0; font-size: var(--fs-md); }

/* ---- Clientes importados de arquivo: selo "Incompleto" e bloco de importação ---- */
.selo-incompleto {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-secundario-fundo);
  color: var(--cor-texto-suave);
  white-space: nowrap;
}
.importar-clientes {
  margin: 8px 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
}
.importar-clientes summary { cursor: pointer; font-weight: 600; }

/* MDF-e: campos de várias chaves de 44 dígitos (uma por linha) */
textarea.campo-chaves {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
}
.contador-chaves { display: block; min-height: 1.2em; margin-bottom: 8px; }

/* MDF-e: lista flutuante de municípios (código IBGE automático) */
.sugestoes-municipio {
  position: fixed;
  z-index: var(--z-modal);
  max-height: 320px;
  overflow: auto;
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  box-shadow: var(--sombra-flutuante);
}
.sugestoes-municipio[hidden] { display: none; }
.sugestoes-municipio > div { padding: 8px 12px; cursor: pointer; }
.sugestoes-municipio > div.ativo, .sugestoes-municipio > div:hover { background: var(--cor-secundario-fundo); }
.sugestoes-municipio > .vazio { cursor: default; color: var(--cor-texto-suave); }
.campo-hint.erro-hint { color: var(--cor-erro-texto, #b42318); }

/* MDF-e: estados de percurso (chips) e reboques */
.rotulo-grupo { display: block; font-weight: 600; margin: 12px 0 6px; }
.chips-uf { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-uf {
  position: relative;
  font: inherit;
  font-size: var(--fs-sm);
  min-width: 44px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--raio-controle);
  border: 1px solid var(--cor-secundario-borda);
  background: var(--cor-fundo-cartao);
  color: var(--cor-destaque);
  cursor: pointer;
}
.chip-uf:hover:not(:disabled) { background: var(--cor-secundario-fundo-hover); }
.chip-uf:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 2px; }
.chip-uf.marcado { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; font-weight: 600; }
.chip-uf.marcado .ordem {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  font-size: var(--fs-micro);
}
.chip-uf.extremo { background: var(--cor-secundario-fundo); color: var(--cor-texto-suave); border-style: dashed; cursor: not-allowed; }
.percurso-ufs .campo-hint { display: block; margin-top: 6px; }
.percurso-obrigatorio, .percurso-proibido { color: var(--cor-erro-texto); font-weight: 600; }
.percurso-ok { color: var(--cor-texto); }

.reboques { margin-top: 16px; padding-top: 4px; border-top: 1px dashed var(--cor-borda); }
.reboque-card {
  margin: 8px 0;
  padding: 10px 14px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
}
.reboque-card legend { padding: 0 6px; font-weight: 600; font-size: var(--fs-sm); }
.reboque-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.reboque-card .reboque-remover { margin-top: 10px; }
@media (max-width: 720px) { .reboque-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .reboque-grid { grid-template-columns: minmax(0, 1fr); } }
#mdfe-reboque-add:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- Pedidos de venda salvos (fila + editor) ---- */
/* Janela no meio da tela: fundo escurecido, rolagem só dentro dela e a página de trás travada. */
.modal-pedidos {
  position: fixed;
  inset: 0;
  z-index: var(--z-camada);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
}
.modal-pedidos[hidden] { display: none; }
.modal-pedidos-caixa {
  display: flex;
  flex-direction: column;
  width: min(940px, 100%);
  max-height: min(88vh, 820px);
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  box-shadow: var(--sombra-flutuante);
  overflow: hidden;
}
.modal-pedidos-cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--cor-borda);
}
.modal-pedidos-cab h3 { margin: 0; font-size: var(--fs-md); }
.modal-pedidos-acoes { display: flex; gap: 8px; }
/* Expandido: ocupa quase a tela toda (a escolha fica lembrada neste navegador). */
.modal-pedidos.expandido { padding: 10px; }
.modal-pedidos.expandido .modal-pedidos-caixa { width: 100%; height: 100%; max-height: none; }
.painel-pedidos-corpo { padding: 14px 18px 18px; overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
html.modal-aberto, html.modal-aberto body { overflow: hidden; }
@media (max-width: 720px) {
  .modal-pedidos { padding: 0; align-items: stretch; }
  .modal-pedidos-caixa { width: 100%; max-height: none; border-radius: 0; border: 0; }
}
.ped-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ped-resumo { margin: 8px 0 4px; font-weight: 600; }
.ped-tabela td, .ped-tabela th { vertical-align: middle; }
.ped-tabela .ped-dia th {
  text-align: left;
  background: var(--cor-secundario-fundo);
  color: var(--cor-texto);
  font-size: var(--fs-sm);
}
.ped-tabela .ped-itens { max-width: 260px; font-size: var(--fs-sm); color: var(--cor-texto-secundario); }
.ped-tabela .celula-num { white-space: nowrap; font-weight: 600; }
.ped-alterado { display: block; font-size: var(--fs-micro); color: var(--cor-texto-suave); }
.ped-sem-cliente { color: var(--cor-texto-suave); }
/* Editor: colunas de largura fixa para a tabela caber no painel; em tela estreita rola para o lado. */
.ped-edicao { table-layout: fixed; width: 100%; min-width: 620px; }
.ped-edicao .c-desc { width: 34%; }
.ped-edicao .c-un { width: 9%; }
.ped-edicao .c-qtd { width: 12%; }
.ped-edicao .c-val { width: 15%; }
.ped-edicao .c-tot { width: 14%; }
.ped-edicao .c-acao { width: 16%; }
.ped-edicao td input { width: 100%; min-width: 0; box-sizing: border-box; }
.ped-ed-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0; flex-wrap: wrap; }
#sugestoes-cliente-flutuante { z-index: var(--z-sugestoes); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Ajuda contextual (blocos por módulo, dica de campo e Central de ajuda) ---- */
.ajuda-ctx {
  margin: 8px 0 16px;
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
}
.ajuda-cab { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; }
.ajuda-alternar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--cor-texto);
  text-align: left;
  cursor: pointer;
}
.ajuda-alternar:focus-visible, .ajuda-fechar:focus-visible, .ajuda-chip:focus-visible, .ajuda-campo-btn:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
  border-radius: 6px;
}
.ajuda-icone {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cor-acao-fundo);
  color: var(--cor-acao-texto);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.ajuda-titulo { font-weight: 600; white-space: nowrap; }
.ajuda-resumo-curto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cor-texto-suave); font-size: var(--fs-sm); }
.ajuda-alternar[aria-expanded="true"] .ajuda-resumo-curto { visibility: hidden; }
.ajuda-seta { flex: none; color: var(--cor-texto-suave); transition: transform 0.15s; }
.ajuda-alternar[aria-expanded="true"] .ajuda-seta { transform: rotate(180deg); }
.ajuda-fechar {
  flex: none;
  border: 0;
  background: none;
  color: var(--cor-texto-suave);
  font: inherit;
  font-size: var(--fs-sm);
  padding: 6px 8px;
  cursor: pointer;
}
.ajuda-fechar:hover { color: var(--cor-texto); text-decoration: underline; }
.ajuda-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 12px 28px;
  padding: 2px 18px 16px 44px;
  align-items: start;
}
.ajuda-corpo[hidden] { display: none; }
.ajuda-resumo { margin: 0 0 8px; color: var(--cor-texto-secundario); }
.ajuda-passos { margin: 0 0 10px; padding-left: 20px; }
.ajuda-passos li { margin: 4px 0; line-height: 1.45; }
.ajuda-atencao { list-style: none; margin: 8px 0 10px; padding: 0; }
.ajuda-atencao li {
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  background: var(--cor-secundario-fundo);
  border: 1px solid var(--cor-secundario-borda);
  color: var(--cor-texto-secundario);
}
.ajuda-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ajuda-figura { margin: 0; }
.ajuda-figura img { display: block; width: 100%; height: auto; max-height: 130px; object-fit: contain; }
.ajuda-figura-vazia {
  display: grid;
  place-items: center;
  gap: 6px;
  aspect-ratio: 4 / 3;
  padding: 12px;
  border: 1.5px dashed var(--cor-borda);
  border-radius: 10px;
  color: var(--cor-texto-suave);
  font-size: var(--fs-micro);
  text-align: center;
}
.ajuda-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 10px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--cor-secundario-borda);
  border-radius: 999px;
  background: var(--cor-secundario-fundo);
  color: var(--cor-destaque);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.ajuda-chip .ajuda-icone { width: 18px; height: 18px; font-size: var(--fs-micro); }
/* "?" ao lado do rótulo de um campo complexo */
.ajuda-campo-btn {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--cor-secundario-borda);
  border-radius: 50%;
  background: var(--cor-secundario-fundo);
  color: var(--cor-destaque);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}
.ajuda-pop {
  position: fixed;
  z-index: var(--z-ajuda-pop);
  padding: 12px 14px;
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  box-shadow: var(--sombra-flutuante);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.ajuda-pop p { margin: 4px 0 0; color: var(--cor-texto-secundario); }

/* Central de ajuda: janela no meio da tela, mesma linguagem da janela de pedidos */
.central-ajuda { position: fixed; inset: 0; z-index: var(--z-ajuda); display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, 0.55); }
.central-ajuda[hidden] { display: none; }
.central-ajuda-caixa {
  display: flex;
  flex-direction: column;
  width: min(1000px, 100%);
  height: min(86vh, 760px);
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  box-shadow: var(--sombra-flutuante);
  overflow: hidden;
}
.central-ajuda-cab { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--cor-borda); }
.central-ajuda-cab h3 { margin: 0; font-size: var(--fs-md); }
.central-ajuda-busca { display: flex; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--cor-borda); }
.central-ajuda-busca input { flex: 1; }
.central-ajuda-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.central-ajuda-lista { overflow-y: auto; padding: 10px; border-right: 1px solid var(--cor-borda); background: var(--cor-secundario-fundo); }
.central-ajuda-item {
  display: block;
  width: 100%;
  margin-bottom: 4px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--cor-texto);
  cursor: pointer;
}
.central-ajuda-item:hover { background: var(--cor-fundo-cartao); }
.central-ajuda-item.ativo { background: var(--cor-fundo-cartao); border-color: var(--cor-borda); font-weight: 600; }
.central-ajuda-modulo { display: block; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--cor-destaque); font-weight: 600; }
.central-ajuda-detalhe { overflow-y: auto; overscroll-behavior: contain; padding: 16px 22px 22px; }
.central-ajuda-detalhe h4 { margin: 2px 0 10px; font-size: var(--fs-md); }
.central-ajuda-detalhe .ajuda-corpo.central { padding: 0; }
.central-ajuda-vazio { color: var(--cor-texto-suave); font-size: var(--fs-sm); padding: 8px; }

@media (max-width: 720px) {
  .ajuda-corpo { grid-template-columns: 1fr; padding-left: 14px; }
  .ajuda-figura { order: -1; max-width: 160px; }
  .ajuda-resumo-curto { display: none; }
  .ajuda-titulo { white-space: normal; }
  .central-ajuda { padding: 0; }
  .central-ajuda-caixa { height: 100%; border-radius: 0; border: 0; }
  .central-ajuda-corpo { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .central-ajuda-lista { max-height: 30vh; border-right: 0; border-bottom: 1px solid var(--cor-borda); }
  .central-ajuda-busca { flex-wrap: wrap; }
  .central-ajuda-busca input { flex: 1 1 100%; }
  .central-ajuda-rodape { justify-content: stretch; }
  .central-ajuda-rodape button { flex: 1 1 auto; }
}

/* "O que fazer" de uma rejeição (Notas Rejeitadas) */
.ajuda-rej {
  margin: 8px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-fundo-cartao);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.ajuda-rej p { margin: 4px 0; }
.ajuda-rej-titulo { font-size: var(--fs-base); }
.ajuda-rej-nota { color: var(--cor-texto-suave); font-style: italic; margin-top: 8px !important; }

.linha-ajuda-rejeicao td { background: var(--cor-secundario-fundo); }
.central-ajuda-rodape { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 10px 18px; border-top: 1px solid var(--cor-borda); }

/* ---- Pedido de Venda (abas, faixa "Incluir item", grade de itens) ---- */
.pv { display: flex; flex-direction: column; gap: 12px; }
.pv-cab { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.pv-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pv-titulo h2 { margin: 0; font-size: var(--fs-xl); }
.pv-numero { color: var(--cor-texto-suave); font-weight: 600; }
.pv-cab-acoes { display: flex; gap: 8px; }
.pv-aviso { margin: 0; font-size: var(--fs-sm); color: var(--cor-texto-suave); }
.pv-situacao { font-size: var(--fs-xs); font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--cor-borda); }
.pv-situacao.pendente { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); border-color: var(--cor-aviso-borda); }
.pv-situacao.salvo { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); border-color: var(--cor-sucesso-borda); }

/* abas: sublinhado na aba ativa, como na referência */
.pv-abas { display: flex; overflow-x: auto; border-bottom: 1px solid var(--cor-borda); scrollbar-width: thin; }
.pv-abas [role="tab"] {
  flex: 1 0 auto;
  padding: 10px 18px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--cor-texto-secundario);
  cursor: pointer;
  white-space: nowrap;
}
.pv-abas [role="tab"]:hover { color: var(--cor-texto); }
.pv-abas [role="tab"][aria-selected="true"] { color: var(--cor-primaria); border-bottom-color: var(--cor-acento); }
.pv-abas [role="tab"]:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: -2px; }
.pv-contador { color: var(--cor-texto-suave); font-weight: 500; }
.pv-painel { padding-top: 6px; }

.pv-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pv-campo label { font-size: var(--fs-sm); font-weight: 600; color: var(--cor-texto-secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-campo input, .pv-campo select, .pv-campo textarea { width: 100%; box-sizing: border-box; }
.pv-campo input:disabled { background: var(--cor-secundario-fundo); color: var(--cor-texto); }
.pv-obrig { color: var(--cor-erro-texto); }
.pv-dica { font-size: var(--fs-xs); color: var(--cor-texto-suave); }
.pv-grade-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.pv-largo { grid-column: 1 / -1; }

/* faixa "Incluir item" */
.pv-incluir {
  margin: 0;
  padding: 12px 14px 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-fundo-cartao);
}
.pv-incluir legend { padding: 0 6px; font-weight: 700; color: var(--cor-destaque); }
.pv-incluir.editando { border-color: var(--cor-acento); box-shadow: 0 0 0 3px var(--cor-acento-fundo); }
.pv-linha-item {
  display: grid;
  grid-template-columns: 150px minmax(160px, 2.2fr) 64px repeat(2, minmax(90px, 1fr)) minmax(120px, 1fr) minmax(90px, 1fr) minmax(90px, 1fr);
  gap: 10px;
  align-items: end;
}
.pv-num input { text-align: right; font-variant-numeric: tabular-nums; }
.pv-com-botao { display: flex; gap: 6px; }
.pv-com-botao input { flex: 1; min-width: 0; }
.pv-lupa {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  border: 0;
  border-radius: var(--raio-campo);
  background: var(--cor-primaria);
  color: var(--cor-primaria-texto);
  cursor: pointer;
}
.pv-lupa:hover { background: var(--cor-primaria-hover); }
.pv-lupa:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 2px; }
.pv-linha-apoio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.pv-espaco { flex: 1; }
.pv-brinde { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; }
.pv-erro { margin: 6px 0 0; color: var(--cor-erro-texto); font-size: var(--fs-sm); }
.pv-erro:empty { display: none; }

/* grade de itens */
.pv-tabela-rolagem { overflow-x: auto; border: 1px solid var(--cor-borda); border-radius: var(--raio-controle); }
.pv-tabela { width: 100%; min-width: 860px; border-collapse: collapse; font-size: var(--fs-sm); }
.pv-tabela th {
  position: sticky;
  top: 0;
  padding: 8px 10px;
  background: var(--cor-secundario-fundo);
  color: var(--cor-texto-secundario);
  text-align: left;
  font-weight: 700;
  border-bottom: 1px solid var(--cor-borda);
  white-space: nowrap;
}
.pv-tabela td { padding: 8px 10px; border-bottom: 1px solid var(--cor-borda-suave); white-space: nowrap; }
.pv-tabela .n { text-align: right; font-variant-numeric: tabular-nums; }
.pv-tabela tbody tr[data-indice] { cursor: pointer; }
.pv-tabela tbody tr[data-indice]:hover td { background: var(--cor-secundario-fundo); }
.pv-tabela tr.editando td { background: var(--cor-acento-fundo); }
.pv-tabela tr.brinde td { color: var(--cor-texto-suave); }
.pv-desc-cel { white-space: normal !important; min-width: 220px; }
.pv-acoes-cel { text-align: right; }
.pv-icone {
  width: 28px;
  height: 28px;
  border: 1px solid var(--cor-secundario-borda);
  border-radius: 6px;
  background: var(--cor-fundo-cartao);
  color: var(--cor-texto-secundario);
  cursor: pointer;
}
.pv-icone:hover { color: var(--cor-texto); }
.pv-icone.perigo:hover { color: var(--cor-erro-texto); border-color: var(--cor-erro-borda); }
.pv-vazio { text-align: center; padding: 18px; color: var(--cor-texto-suave); white-space: normal !important; }
.pv-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* subtotal */
.pv-resumo { display: grid; grid-template-columns: minmax(0, 420px); gap: 0; margin: 0; }
.pv-resumo div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--cor-borda-suave); }
.pv-resumo dt { color: var(--cor-texto-secundario); }
.pv-resumo dd { margin: 0; font-variant-numeric: tabular-nums; }
.pv-resumo .pv-resumo-total { border-bottom: 0; font-size: var(--fs-lg); font-weight: 700; }

.pv-opcoes { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 12px; padding: 0; border: 0; }
.pv-opcoes legend { font-size: var(--fs-sm); font-weight: 600; color: var(--cor-texto-secundario); margin-bottom: 6px; }

/* rodapé com os totais, sempre à vista */
.pv-rodape {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 22px;
  padding: 10px 14px;
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  box-shadow: var(--sombra-cartao);
  font-size: var(--fs-sm);
  color: var(--cor-texto-secundario);
  font-variant-numeric: tabular-nums;
}
.pv-total-geral { font-size: var(--fs-lg); font-weight: 700; color: var(--cor-texto); }
.pv-mensagem { margin: 0; font-size: var(--fs-sm); }
.pv-mensagem.ok { color: var(--cor-sucesso-texto); }
.pv-mensagem.erro { color: var(--cor-erro-texto); }

/* busca de produto (F2) */
.pv-busca { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; background: rgba(15, 23, 42, 0.5); }
.pv-busca[hidden] { display: none; }
.pv-busca-caixa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(640px, 100%);
  max-height: 76vh;
  padding: 14px 16px 16px;
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  box-shadow: var(--sombra-flutuante);
}
.pv-busca-cab { display: flex; justify-content: space-between; align-items: center; }
.pv-busca-cab h3 { margin: 0; font-size: var(--fs-md); }
.pv-busca-lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; border: 1px solid var(--cor-borda); border-radius: var(--raio-controle); }
.pv-busca-lista li[role="option"] {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 44px 92px;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--cor-borda-suave);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.pv-busca-lista li[aria-selected="true"], .pv-busca-lista li[role="option"]:hover { background: var(--cor-acento-fundo); }
.pv-op-cod { font-weight: 700; }
.pv-op-preco { text-align: right; font-variant-numeric: tabular-nums; }

/* A faixa se ajusta à largura do ESPAÇO onde está (não da tela): na NF-e o "Resumo da nota" ocupa a direita
   e sobra menos largura que na tela de Pedido de venda. */
.pv-incluir { container-type: inline-size; }
/* fieldset não fica mais estreito que o conteúdo por padrão: com a tabela de itens (largura mínima) dentro,
   o bloco "Itens" da NF-e passava por baixo do "Resumo da nota". A tabela rola dentro do próprio quadro. */
fieldset.pv-incluir, fieldset:has(.pv-incluir), fieldset:has(.pv-tabela-rolagem) { min-inline-size: 0; min-width: 0; }
@container (max-width: 1000px) {
  .pv-linha-item { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pv-cod, .pv-desc { grid-column: span 2; }
}
@container (max-width: 480px) {
  .pv-linha-item { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-cod, .pv-desc { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .pv-grade-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .pv-grade-campos { grid-template-columns: minmax(0, 1fr); }
  .pv-cab-acoes { width: 100%; }
  .pv-cab-acoes button { flex: 1; }
  .pv-busca-lista li[role="option"] { grid-template-columns: 56px minmax(0, 1fr) 80px; }
  .pv-op-un { display: none; }
}

.pv-barra { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--cor-borda-suave); }
#ped-novo-pedido { margin: 4px 0 8px; }
.pv-carregando { padding: 24px 4px; color: var(--cor-texto-suave); }
.pv-falha { padding: 16px; border: 1px solid var(--cor-erro-borda); border-radius: var(--raio-controle); background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
.pv-falha p { margin: 0 0 10px; }