/* ============================================================
   Régua · design tokens
   Paleta: azul-ardósia profundo + teal técnico + âmbar/violeta/verde/vermelho para status
   Tipografia: Inter (interface) + JetBrains Mono (números, códigos, valores)
   ============================================================ */

:root {
  --azul-900: #14243B;
  --azul-800: #1F3A5F;
  --azul-700: #2C5282;
  --teal-500: #2D9596;
  --teal-600: #24807F;

  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --border: #E2E8F0;
  --texto: #1A202C;
  --texto-suave: #64748B;

  --amarelo-bg: #FFF6DC;
  --amarelo-fg: #92670B;
  --violeta-bg: #EFECFF;
  --violeta-fg: #5B4FCF;
  --verde-bg: #E7F6E9;
  --verde-fg: #227A34;
  --vermelho-bg: #FCEBEC;
  --vermelho-fg: #B3261E;
  --laranja-bg: #FFE9D6;
  --laranja-fg: #B75B12;

  --radius: 10px;
  --radius-sm: 6px;
  --sombra: 0 1px 2px rgba(20, 36, 59, 0.06), 0 8px 24px -12px rgba(20, 36, 59, 0.18);

  --fonte: 'Inter', system-ui, sans-serif;
  --fonte-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

/* Sem isso, quando o SO está no modo escuro o navegador renderiza os
   controles nativos (menu do <select>, calendário do <input type=date>)
   escuros/semitransparentes por conta própria — mesmo com o resto da tela
   clara — o que fica ilegível em cima do modal. Força tudo a ficar claro,
   já que o app inteiro (fora a barra lateral) é sempre no tema claro. */
:root { color-scheme: light; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* rede de segurança: nada deve empurrar a página de lado */
}

button, input, select, textarea { font-family: inherit; font-size: 14px; }

.app-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}
/* Sem isso, um item do grid nunca encolhe abaixo do tamanho intrínseco do
   seu conteúdo (ex: uma tabela larga ou a barra de navegação) — em vez de
   rolar por dentro, ele estica a página inteira e quebra o layout. */
.app-shell > * { min-width: 0; }

/* ---------------- SIDEBAR ---------------- */

.sidebar {
  background: linear-gradient(180deg, var(--azul-900), var(--azul-800));
  color: #EAF0F7;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  position: -webkit-sticky; /* Safari mais antigo exige o prefixo */
  position: sticky;
  top: 0;
  height: 100vh;
  /* .sidebar é item do grid .app-shell — sem align-self:start ele fica
     esticado (align-items:stretch é o padrão do grid) até a altura da
     linha inteira, que acompanha o quão longo é o .content ao lado. Isso
     faz o sticky parar de funcionar direito (o navegador não tem "sobra"
     de espaço pra colar no topo, já que o item já ocupa a linha toda). */
  align-self: start;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 24px;
}

.brand-mark { color: var(--teal-500); flex-shrink: 0; }

.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-size: 18px; letter-spacing: 0.2px; }
.brand-text span { font-size: 11.5px; color: #9FB2C8; }

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }

.nav-item {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: #C7D3E0;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }

.nav-item.is-active {
  background: rgba(45, 149, 150, 0.18);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--teal-500);
}

.nav-ico { width: 18px; height: 18px; object-fit: contain; opacity: 0.85; flex-shrink: 0; }

.sidebar-foot {
  margin-top: auto;
  padding: 12px 8px 0;
  color: #7E93AA;
  font-size: 11.5px;
}

.ruler-strip {
  height: 6px;
  margin-bottom: 8px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--teal-500) 0px, var(--teal-500) 1.5px,
    transparent 1.5px, transparent 8px
  );
  opacity: 0.6;
}

/* ---------------- CONTEÚDO ---------------- */

.content { padding: 28px 36px 60px; max-width: 1600px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.topbar h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.2px; }

.secao { display: none; }
.secao.is-active { display: block; animation: aparecer 0.18s ease; }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------- PAINEL ---------------- */

.cards-resumo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.card-resumo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.card-resumo .num {
  font-family: var(--fonte-mono);
  font-size: 26px;
  font-weight: 700;
  display: block;
}

.card-resumo .rotulo {
  font-size: 12.5px;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.painel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.card-head h2 { font-size: 15px; margin: 0 0 12px; }

.lista-simples { display: flex; flex-direction: column; gap: 8px; }

.item-simples {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13.5px;
}
.item-simples:last-child { border-bottom: none; }
.item-simples .num-pedido { font-family: var(--fonte-mono); color: var(--azul-700); font-weight: 600; }

/* ---------------- TOOLBARS / TABELAS ---------------- */

.secao-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ajuda-texto { color: var(--texto-suave); font-size: 13.5px; margin: 0; }

input[type="search"], input[type="text"], input[type="email"], input[type="number"],
input[type="date"], input[type="time"], select, textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  background: var(--surface);
  color: var(--texto);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(45, 149, 150, 0.15);
}

/* Um <select> com opções/placeholder de texto longo não encolhe abaixo do
   próprio conteúdo por padrão — em qualquer linha flex/grid (ex: select +
   botão "Novo BM" lado a lado) isso empurra o vizinho pra fora da tela. */
.modal select, .modal input, .modal textarea { min-width: 0; }

input[type="search"] { width: 280px; max-width: 100%; }

.btn {
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}

.btn-primary { background: var(--teal-600); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }

.btn-texto { background: transparent; color: var(--texto-suave); }
.btn-texto:hover { color: var(--texto); }

.btn-secundario { background: var(--azul-800); color: #fff; }
.btn-secundario:hover { filter: brightness(1.12); }

.btn:disabled { cursor: default; filter: grayscale(0.2); opacity: 0.85; }

/* Indicador de "carregando" nos botões que disparam upload de anexo — evita
   clique duplo enquanto a imagem ainda está subindo pro servidor. Usa
   currentColor pra herdar a cor do texto do botão (branco no primary/
   secundario, cinza no texto), então funciona em qualquer variante sem
   precisar de uma cor fixa. */
.spinner-inline {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 7px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-girar 0.6s linear infinite;
}
@keyframes spinner-girar { to { transform: rotate(360deg); } }

.btn-perigo { background: var(--vermelho-fg); color: #fff; }
.btn-perigo:hover { filter: brightness(1.08); }

.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-icon { background: transparent; color: var(--texto-suave); border: 1px solid var(--border); }
.btn-icon:hover { color: var(--texto); border-color: var(--texto-suave); }

.filtro-status { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--texto-suave);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.chip.is-active { background: var(--azul-800); border-color: var(--azul-800); color: #fff; }

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabela { width: 100%; border-collapse: collapse; }

.tabela thead th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--texto-suave);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #FAFBFC;
}

.tabela tbody td {
  padding: 7px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13.8px;
  vertical-align: middle;
}

.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:nth-child(even) { background: #FAFBFC; }
.tabela tbody tr:hover { background: #F1F5F8; }

.mono { font-family: var(--fonte-mono); }
.icone-anexo { font-size: 12px; vertical-align: middle; }

.table-wrap-sem-scroll { overflow-x: hidden; }

/* Cores no <select> de "Cobrança" (mesma paleta dos badges de status usados
   no resto do sistema) — pinta tanto o campo fechado (pela classe, trocada
   junto com o value no "change") quanto cada opção da lista aberta. */
.cobranca-status { font-weight: 600; border-width: 1px; }
.cobranca-status.status-pendente { background: var(--amarelo-bg); color: var(--amarelo-fg); border-color: var(--amarelo-fg); }
.cobranca-status.status-enviado { background: var(--violeta-bg); color: var(--violeta-fg); border-color: var(--violeta-fg); }
.cobranca-status.status-pago { background: var(--verde-bg); color: var(--verde-fg); border-color: var(--verde-fg); }
.cobranca-status.status-cancelado { background: var(--vermelho-bg); color: var(--vermelho-fg); border-color: var(--vermelho-fg); }
.cobranca-status option { font-weight: 600; }
.cobranca-status option[value="pendente"] { background: var(--amarelo-bg); color: var(--amarelo-fg); }
.cobranca-status option[value="enviado"] { background: var(--violeta-bg); color: var(--violeta-fg); }
.cobranca-status option[value="pago"] { background: var(--verde-bg); color: var(--verde-fg); }
.cobranca-status option[value="cancelado"] { background: var(--vermelho-bg); color: var(--vermelho-fg); }
/* Vencido sem confirmação de pagamento — sobrepõe a cor normal do status
   (pendente/enviado) pra chamar atenção, sem trocar o value real no banco. */
.cobranca-status.is-atrasado { background: var(--laranja-bg); color: var(--laranja-fg); border-color: var(--laranja-fg); }

/* Mesma paleta, em formato de selo somente-leitura — usado no portal do
   cliente, onde não há dropdown pra editar a cobrança. */
.badge-cobranca-pendente { background: var(--amarelo-bg); color: var(--amarelo-fg); }
.badge-cobranca-enviado { background: var(--violeta-bg); color: var(--violeta-fg); }
.badge-cobranca-pago { background: var(--verde-bg); color: var(--verde-fg); }
.badge-cobranca-cancelado { background: var(--vermelho-bg); color: var(--vermelho-fg); }
.badge-cobranca-atrasado { background: var(--laranja-bg); color: var(--laranja-fg); }

/* Toda tabela redimensionável usa a mesma altura de linha (a mesma do
   "Aprovados & Cobrança", onde isso nasceu): fonte e preenchimento
   reduzidos, e texto cortado com reticências em vez de quebrar — em telas
   grandes uma linha nunca fica mais alta que a outra por causa de um texto
   comprido. A célula de ações é a exceção: corte por reticências não faz
   sentido pra um grupo de botões (ia esconder metade sem dar pra clicar),
   então ela só ganha "sem quebrar linha" (nowrap), com os botões cabendo
   lado a lado — o <colgroup> já reserva espaço suficiente pra isso. */
.tabela-redimensionavel { table-layout: fixed; font-size: 12.5px; }
.tabela-redimensionavel th,
.tabela-redimensionavel td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 8px;
}
.tabela-redimensionavel thead th { font-size: 10.5px; padding: 8px; }
.tabela-redimensionavel td input,
.tabela-redimensionavel td select {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 5px;
  font-size: 12px;
}
.tabela-redimensionavel td .btn { padding: 4px 8px; font-size: 11.5px; width: auto; }
.tabela-redimensionavel td.celula-acoes { overflow: visible; text-overflow: clip; }

/* Célula "Referência" quando ela também carrega o Nº do pedido do cliente
   e/ou o DANFE (infoCobrancaBm): só o título do BM pode encolher com
   reticências — o Nº do pedido/DANFE nunca pode ficar escondido, então ele
   fica fora da parte que corta (flex 0 0 auto), sempre inteiro na tela.
   O flex fica num <span> interno, não no <td> — um <td> com display:flex
   deixa de se comportar como célula de tabela (não estica/alinha mais junto
   com as células vizinhas), o que bagunçava a altura/alinhamento da linha
   inteira. */
.tabela-redimensionavel td .celula-com-info { display: flex; align-items: center; gap: 6px; overflow: hidden; width: 100%; }
.tabela-redimensionavel td .celula-com-info .ref-truncavel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tabela-redimensionavel td .celula-com-info .ajuda-texto { flex: 0 0 auto; overflow: visible; }

/* Linha de total no rodapé de cada tabela de pedidos de um BM (soma dos
   valores de todos os pedidos listados ali). */
.tabela-redimensionavel tfoot .linha-total-pedidos td { font-weight: 700; background: #FAFBFC; border-top: 2px solid var(--border); }

/* Colunas redimensionáveis: uma faixa fina e "invisível" na borda direita de
   cada th (menos a última, que não tem vizinha à direita pra compensar o
   arrasto) — arrastar encolhe/estica essa coluna e a vizinha juntas, então a
   tabela nunca ultrapassa 100% da largura (sem precisar de rolagem lateral). */
/* "right: 0" (nunca negativo) é de propósito: as células dessa tabela têm
   overflow:hidden (pro corte com reticências) — uma alça que vazasse pra
   fora da própria th, mesmo que só visualmente, ficaria sem receber clique
   nessa parte (a região recortada não é mais interativa). */
.tabela-redimensionavel th { position: relative; }
.col-resizer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 10px;
  cursor: col-resize;
  z-index: 2;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* A "alcinha" (::after) fica sempre visível, mesmo sem passar o mouse —
   sem isso, nada indicava que dava pra arrastar a borda da coluna. */
.col-resizer::after {
  content: '';
  width: 2px;
  height: 55%;
  min-height: 12px;
  border-radius: 2px;
  background: var(--border-forte, #B9C4D0);
  transition: background 0.15s ease, width 0.15s ease;
}
.col-resizer:hover::after, .col-resizer.is-arrastando::after { background: var(--teal-500); width: 3px; }
.col-resizer:hover, .col-resizer.is-arrastando { background: rgba(45, 149, 150, 0.12); }
@media (max-width: 560px) { .col-resizer { display: none; } }

.vazio { text-align: center; color: var(--texto-suave); padding: 34px 20px; font-size: 13.8px; }

.carregar-mais { display: flex; justify-content: center; padding: 14px 0 4px; }

/* ---------------- RELATÓRIOS ---------------- */

.filtro-relatorio {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.filtro-relatorio .campo { gap: 4px; }
.filtro-relatorio label { font-size: 12px; font-weight: 600; color: var(--texto-suave); }

.campo-cliente-filtro { position: relative; min-width: 220px; }

.sugestoes-lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--sombra);
  max-height: 220px;
  overflow-y: auto;
  z-index: 20;
}

.sugestao-item { padding: 9px 12px; font-size: 13.5px; cursor: pointer; }
.sugestao-item:hover { background: #FAFBFC; }
.sugestao-item.sugestao-vazia { color: var(--texto-suave); cursor: default; }
.sugestao-item.sugestao-vazia:hover { background: transparent; }

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge-pendente { background: var(--amarelo-bg); color: var(--amarelo-fg); }
.badge-contraproposta { background: var(--violeta-bg); color: var(--violeta-fg); }
.badge-aprovado { background: var(--verde-bg); color: var(--verde-fg); }
.badge-recusado { background: var(--vermelho-bg); color: var(--vermelho-fg); }
.badge-aberta { background: var(--azul-700); color: #fff; }
.badge-arquivada { background: #E2E8F0; color: var(--texto-suave); }
.badge-ativo { background: var(--verde-bg); color: var(--verde-fg); }
.badge-inativo { background: var(--vermelho-bg); color: var(--vermelho-fg); }

/* ---------------- MODAIS ---------------- */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 36, 59, 0.45);
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 100;
}
.modal-overlay.is-active { display: flex; }
/* mesmo problema de novo: .modal é um item flex do overlay e por padrão
   nunca encolhe abaixo do conteúdo (ex: a linha de item do pedido), então
   o "width: 100%" abaixo era ignorado e o modal ficava largo demais. */
.modal-overlay > * { min-width: 0; }

/* Substitui confirm()/prompt() nativos do navegador: um "toast" centralizado
   na tela (ao contrário do .modal-overlay acima, que alinha no topo), com
   fundo escurecido pra bloquear a interação até decidir. Fica acima de
   qualquer modal já aberto (ex: excluir cliente de dentro do cadastro dele). */
.toast-confirmacao-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 36, 59, 0.55);
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 300;
}
.toast-confirmacao-overlay.is-active { display: flex; }
.toast-confirmacao {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 22px 24px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  animation: toast-confirmacao-entrar 0.15s ease;
}
.toast-confirmacao p {
  margin: 0 0 18px;
  font-size: 14.5px;
  color: var(--texto);
  white-space: pre-line;
}
.toast-confirmacao input[type="text"] { width: 100%; margin: -6px 0 18px; box-sizing: border-box; }
.toast-confirmacao-acoes { display: flex; justify-content: center; gap: 10px; }
@keyframes toast-confirmacao-entrar { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .toast-confirmacao { animation: none; } }

.modal {
  background: var(--surface);
  border-radius: var(--radius);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--sombra);
}
.modal-lg { max-width: 760px; }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: 17px; margin: 0; }

.btn-fechar {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--texto-suave);
}
.btn-fechar:hover { color: var(--texto); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 20px 22px 22px;
}

/* .campo é sempre item direto do grid .form-grid — sem min-width:0 aqui,
   um <select> com opções de texto longo (produto/cliente) força a coluna
   inteira do formulário a crescer além da largura do modal. */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-full { grid-column: 1 / -1; }
.campo label { font-size: 12.8px; font-weight: 600; color: var(--texto-suave); }
.campo .opcional { font-weight: 400; text-transform: none; }

.erro-campo { color: var(--vermelho-fg); font-size: 12px; min-height: 14px; }

.form-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.segmentado { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; width: fit-content; }
.seg-opt { background: var(--surface); border: none; padding: 8px 14px; cursor: pointer; color: var(--texto-suave); font-weight: 500; font-size: 13px; }
.seg-opt.is-active { background: var(--azul-800); color: #fff; }

/* itens do pedido */

.itens-pedido { display: flex; flex-direction: column; gap: 8px; }
/* mesmo problema do app-shell: um filho flex não encolhe abaixo do
   conteúdo por padrão, então a linha do item (que por dentro é um grid)
   nunca ficava mais estreita que a soma mínima das suas colunas. */
.itens-pedido > * { min-width: 0; }

.item-linha {
  display: grid;
  grid-template-columns: 2.2fr 0.8fr 0.9fr 0.9fr auto;
  gap: 8px;
  align-items: center;
}
/* Sem isso, itens de grid nao encolhem abaixo do conteudo (ex: nome de
   produto comprido no <select>), e a linha estoura a largura do modal. */
.item-linha > * { min-width: 0; }
.item-linha select,
.item-linha input { max-width: 100%; text-overflow: ellipsis; }

.item-linha .subtotal { font-family: var(--fonte-mono); font-size: 13px; color: var(--texto-suave); text-align: right; }

/* item adicionado via "Buscar no catálogo geral": produto fixo (sem
   select), só pra deixar visualmente claro que ele não é o catálogo normal
   do cliente. */
.item-produto-fixo {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #FAFBFC;
  font-size: 13.5px;
  min-width: 0;
}

.total-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FAFBFC;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}
.total-linha strong { font-family: var(--fonte-mono); font-size: 17px; color: var(--azul-800); }

/* ---------------- DETALHE DO PEDIDO ---------------- */

.detalhe-corpo { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 18px; }

.detalhe-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.detalhe-cliente { font-size: 13.5px; color: var(--texto-suave); line-height: 1.6; }
.detalhe-cliente strong { color: var(--texto); }

.detalhe-secao h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--texto-suave); margin: 0 0 10px; }

.timeline { display: flex; flex-direction: column; gap: 10px; }

.timeline-item {
  display: flex;
  gap: 12px;
  font-size: 13.5px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.timeline-item:last-child { border-bottom: none; padding-bottom: 0; }
.timeline-marca { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500); margin-top: 5px; flex-shrink: 0; }
.timeline-texto strong { display: block; }
.timeline-texto span { color: var(--texto-suave); font-size: 12.5px; }

/* Detalhe do que mudou numa contraproposta (nome/quantidade/valor), listado
   dentro do próprio item do histórico. */
.timeline-mudancas { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; color: var(--texto-suave); }
.timeline-mudancas li { margin-bottom: 2px; }

/* Item que acabou de ser alterado na última negociação — fica em vermelho
   na tabela de itens até a próxima ação no pedido (nova contraproposta,
   aprovação, etc.), pra chamar atenção de quem vai responder. */
.item-alterado td { color: var(--vermelho-fg); }
.tag-alterado {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--vermelho-bg);
  color: var(--vermelho-fg);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}

.acoes-negociacao {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: #FAFBFC;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.acoes-negociacao .responder-como { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-suave); }

.mini-form {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}
.mini-form.is-active { display: grid; }

/* Borda piscante no mini-form de "novo BM" (dentro de Nova solicitação),
   pra puxar o foco pra dentro da edição enquanto ele estiver aberto. */
#form-nova-ordem-inline.is-active {
  border: 2px solid var(--teal-500);
  border-radius: 10px;
  padding: 14px;
  animation: piscar-borda-novo-bm 1.2s ease-in-out infinite;
}
@keyframes piscar-borda-novo-bm {
  0%, 100% { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(45, 149, 150, 0.18); }
  50% { border-color: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  #form-nova-ordem-inline.is-active { animation: none; }
}

/* Enquanto o "novo BM" está sendo criado, o resto do formulário de pedido
   fica bloqueado (visual e funcionalmente) e o fundo por trás do modal
   escurece um pouco mais, pra deixar claro que o foco é só a edição do BM. */
#form-pedido.criando-bm > *:not(.campo-bm-selecao) {
  opacity: 0.4;
  pointer-events: none;
}
.modal-overlay.criando-bm { background: rgba(20, 36, 59, 0.7); }

/* ---------------- ABAS (modal de cliente) ---------------- */

.tabs {
  display: flex;
  gap: 4px;
  padding: 0 22px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.tab-btn {
  all: unset;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto-suave);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab-btn.is-active { color: var(--azul-800); border-bottom-color: var(--teal-500); }

.tab-painel { display: none; }
.tab-painel.is-active { display: block; }
.tab-conteudo { padding: 18px 22px 22px; }

.logo-preview {
  width: 64px;
  height: 64px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #FAFBFC;
  flex-shrink: 0;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------------- CHECKLIST DE CLIENTES (produto) ---------------- */

.checklist-clientes {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}
.checklist-item:hover { background: #FAFBFC; }
.checklist-item input { width: auto; }

/* ---------------- AGRUPAMENTO DE PEDIDOS (por cliente / ordem) ---------------- */

.grupo-cliente { margin-bottom: 22px; }

.grupo-cliente-cabecalho {
  font-size: 15px;
  font-weight: 700;
  color: var(--azul-800);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--azul-800);
}

.grupo-ordem { margin-bottom: 14px; }

.grupo-ordem-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #FAFBFC;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 9px 14px;
  font-size: 13px;
}

.grupo-ordem-cabecalho .ref { font-family: var(--fonte-mono); font-weight: 700; color: var(--azul-700); }

.grupo-ordem .table-wrap { border-radius: 0 0 var(--radius) var(--radius); }

/* ---------------- ITENS EDITÁVEIS (contraproposta / medição) ---------------- */

.tabela-itens input[type="number"] {
  width: 90px;
  padding: 6px 8px;
}

.aviso-preco-fixo {
  font-size: 12px;
  color: var(--texto-suave);
  font-style: italic;
}

.toast {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--verde-bg);
  color: var(--verde-fg);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.is-erro { background: var(--vermelho-bg); color: var(--vermelho-fg); }

/* ---------------- NOTIFICAÇÕES (canto inferior direito) ---------------- */

.notificacoes-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
  width: min(340px, calc(100vw - 40px));
}
.notificacao-card {
  background: var(--surface);
  border-left: 4px solid var(--teal-500);
  border-radius: var(--radius-sm);
  box-shadow: var(--sombra);
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--texto);
  cursor: pointer;
  animation: notificacao-entrar 0.2s ease;
}
.notificacao-card strong { display: block; margin-bottom: 3px; }
.notificacao-card.saindo { animation: notificacao-sair 0.2s ease forwards; }
@keyframes notificacao-entrar { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes notificacao-sair { from { opacity: 1; } to { opacity: 0; transform: translateX(24px); } }

/* ---------------- TELA DE LOGIN (glassmorphism) ----------------
   Compartilhada por login.html, portal/login.html, portal/registrar.html
   e as telas de recuperação de senha — antes cada uma tinha esse CSS
   duplicado num <style> inline; centralizado aqui pra mudar num lugar só. */

.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--azul-900), var(--azul-800) 55%, #1b4a4a 140%);
  padding: 24px;
}

/* Dois "blobs" desfocados atrás do cartão, flutuando bem devagar — o
   toque de glassmorphism precisa de algo colorido por trás do blur pra
   aparecer; sem isso o efeito de vidro fica invisível num fundo liso. */
.tela-login::before,
.tela-login::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
  animation: blob-flutuar 18s ease-in-out infinite;
}
.tela-login::before {
  width: 420px; height: 420px;
  background: var(--teal-500);
  top: -140px; left: -110px;
}
.tela-login::after {
  width: 380px; height: 380px;
  background: #5B4FCF;
  bottom: -150px; right: -90px;
  animation-delay: -9s;
  animation-direction: reverse;
}
@keyframes blob-flutuar {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(36px, 26px) scale(1.12); }
}

.cartao-login {
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg, rgba(255,255,255,0.20), rgba(255,255,255,0.06));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.16);
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
  animation: cartao-entrar 0.5s cubic-bezier(.16,1,.3,1) backwards;
  /* a inclinação 3D (rotateX/rotateY) é aplicada via JS (login-tilt.js) a
     cada movimento do mouse — a transition aqui só suaviza o "voltar ao
     normal" quando o cursor sai do cartão. */
  transition: transform 0.25s ease-out;
  transform-style: preserve-3d;
}
.cartao-login.cartao-largo { max-width: 440px; }
@keyframes cartao-entrar {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* Brilho que acompanha o cursor dentro do cartão (posição via --mx/--my,
   atualizadas pelo login-tilt.js) — reforça a sensação de vidro/reflexo.
   z-index:-1 pra ficar atrás do texto/campos, na frente só do fundo. */
.cartao-login::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.30), transparent 55%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.cartao-login:hover::before { opacity: 1; }

.cartao-login .brand { justify-content: center; padding: 0 0 20px; }
.cartao-login .brand-mark {
  color: #fff;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.25));
  animation: logo-entrar 0.6s ease 0.1s backwards;
}
@keyframes logo-entrar { from { opacity: 0; transform: scale(0.7) rotate(-8deg); } to { opacity: 1; transform: none; } }
.cartao-login .brand-text { color: #fff; align-items: center; }
.cartao-login h1 { font-size: 17px; text-align: center; margin: 0 0 8px; color: rgba(255,255,255,0.8); font-weight: 500; }
.cartao-login p.subtitulo { font-size: 12.8px; text-align: center; color: rgba(255,255,255,0.65); margin: 0 0 22px; }
.cartao-login h1:last-of-type { margin-bottom: 22px; }

.campo-login { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo-login label { font-size: 12.8px; font-weight: 600; color: rgba(255,255,255,0.85); }
.campo-login input {
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--texto);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.campo-login input:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(45, 149, 150, 0.4);
}

.erro-login {
  color: #FFE3E1;
  background: rgba(179, 38, 30, 0.35);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  font-size: 13px;
  max-height: 0;
  overflow: hidden;
  padding: 0 10px;
  margin-bottom: 0;
  transition: max-height 0.2s ease, padding 0.2s ease, margin 0.2s ease;
}
.erro-login:not(:empty) { max-height: 60px; padding: 8px 10px; margin-bottom: 10px; }

.btn-entrar { width: 100%; padding: 12px; font-size: 14px; transition: transform 0.12s ease, filter 0.15s ease; }
.btn-entrar:hover { transform: translateY(-1px); }
.btn-entrar:active { transform: translateY(0); }

.cartao-login p { color: rgba(255,255,255,0.75); }
.cartao-login a { color: #fff; font-weight: 600; }

.divisor-login {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
}
.divisor-login::before, .divisor-login::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.25); }

.sucesso-login {
  text-align: center;
  color: #fff;
  background: rgba(34, 122, 52, 0.35);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  font-size: 13.5px;
}

@media (prefers-reduced-motion: reduce) {
  .tela-login::before, .tela-login::after, .cartao-login, .cartao-login .brand-mark {
    animation: none !important;
  }
}

@media (max-width: 480px) {
  .tela-login::before, .tela-login::after { filter: blur(50px); }
  .cartao-login { padding: 28px 22px; }
}

/* ---------------- RESPONSIVO ---------------- */

@media (max-width: 880px) {
  /* Vira uma única coluna (sidebar em cima, conteúdo embaixo). Sem
     align-content:start, o grid distribui o espaço sobrando de
     min-height:100vh entre as duas linhas (sidebar e conteúdo), deixando
     a barra de navegação bem mais alta — e com um vão em branco embaixo —
     do que o necessário. */
  .app-shell { grid-template-columns: 1fr; align-content: start; }
  .sidebar {
    position: -webkit-sticky; position: sticky; top: 0; z-index: 50; height: auto;
    flex-direction: row; align-items: center; padding: 10px 12px; gap: 4px;
  }
  .brand { padding: 0 8px 0 2px; flex-shrink: 0; }
  .brand-text { display: none; } /* em telas menores mostra só a logo, sem nome/subtítulo, pra poupar espaço horizontal no topo */
  .nav {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; gap: 4px; margin-top: 0;
    scrollbar-width: thin;
  }
  .nav-item { padding: 8px 10px; white-space: nowrap; flex-shrink: 0; }
  .nav-item.is-active { box-shadow: inset 0 -3px 0 var(--teal-500); }
  .sidebar-foot { display: none; }
  .content { padding: 16px; }
  .topbar { margin-bottom: 16px; }
  .topbar h1 { font-size: 19px; }
  .cards-resumo { grid-template-columns: repeat(2, 1fr); }
  .painel-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .item-linha { grid-template-columns: 1fr; }
  .mini-form-contraproposta { grid-template-columns: 1fr 1fr; }
  .mini-form { grid-template-columns: 1fr; }

  /* Tabelas encolhem pra caber na tela — sem rolagem horizontal em lugar
     nenhum além do menu. Números/textos longos nas células (CNPJ, e-mail)
     quebram no meio se precisar; os cabeçalhos (palavra única, curta) só
     quebram em espaço, senão ficam ilegíveis partidos ao meio. */
  .tabela th, .tabela td { padding: 7px 8px; font-size: 12.5px; }
  .tabela td { overflow-wrap: anywhere; }
  .tabela thead th { font-size: 10px; overflow-wrap: normal; }
  .tabela .btn-sm { padding: 5px 8px; font-size: 11.5px; white-space: nowrap; }

  .modal-overlay { padding: 0; align-items: stretch; }
  .modal { max-width: none; width: 100%; min-height: 100%; border-radius: 0; }
  .modal-lg { max-width: none; }
}

@media (max-width: 560px) {
  .cards-resumo { grid-template-columns: 1fr; }
  .secao-toolbar { flex-direction: column; align-items: stretch; }
  .secao-toolbar input[type="search"] { width: 100%; }
  .secao-toolbar > .btn { width: 100%; }
  .filtro-status { justify-content: flex-start; }

  .filtro-relatorio { flex-direction: column; align-items: stretch; }
  .filtro-relatorio .campo,
  .campo-cliente-filtro { min-width: 0; width: 100%; }
  .filtro-relatorio > .btn { width: 100%; }

  .grupo-ordem-cabecalho { flex-wrap: wrap; }
  .grupo-ordem-cabecalho > span:last-child { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }

  .detalhe-topo { flex-direction: column; align-items: stretch; }
  .acoes-negociacao { flex-direction: column; align-items: stretch; }
  .acoes-negociacao > .btn { width: 100%; }

  .form-acoes { flex-direction: column-reverse; }
  .form-acoes > .btn { width: 100%; }

  /* itens do pedido: produto, quantidade, valor, subtotal e excluir ficam
     todos na MESMA linha mesmo no celular — compacta tudo (fonte/padding
     menores) em vez de quebrar o produto pra uma linha e o resto pra outra. */
  .item-linha { grid-template-columns: 2fr 0.65fr 0.8fr 0.75fr auto; gap: 4px; }
  .item-linha select,
  .item-linha input { font-size: 12px; padding: 7px 5px; }
  .item-linha .item-produto-fixo { font-size: 12px; padding: 7px 8px; }
  .item-linha .subtotal { font-size: 11px; }
  .item-linha .btn-icon { padding: 7px 8px; font-size: 12px; }

  /* área de toque um pouco maior nos botões pequenos das tabelas */
  .btn-sm { padding: 8px 12px; }

  /* Tabela normal (linhas/colunas) não cabe de jeito nenhum numa tela de
     celular sem rolar de lado — em vez disso, cada linha vira um "cartão"
     empilhado, com um rótulo (o texto do cabeçalho, via data-label no td)
     na frente de cada valor. Nada de rolagem horizontal aqui, só o menu. */
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .table-wrap { overflow-x: hidden; }
  .tabela tbody tr { padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .tabela tbody tr:last-child { border-bottom: none; }
  .tabela tbody tr:nth-child(even) { background: #FAFBFC; }
  .tabela td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 4px 0; border-bottom: none; text-align: right;
  }
  .tabela td[data-label]::before {
    content: attr(data-label);
    font-weight: 600; color: var(--texto-suave); font-size: 10.5px;
    text-transform: uppercase; letter-spacing: 0.3px; text-align: left; flex-shrink: 0;
  }
  .tabela td:empty { display: none; }
  .tabela td.celula-acoes { justify-content: flex-end; flex-wrap: wrap; }

  /* Nessa largura toda tabela redimensionável já virou "cartão" empilhado
     (regras acima) — o corte com reticências de tela grande não faz
     sentido mais aqui, cada campo tem a linha toda pra si. */
  .tabela-redimensionavel td { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* ---------------- Seletor de empresas (portal multi-empresa) ---------------- */
.topbar { gap: 12px; flex-wrap: wrap; }
.seletor-empresa {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
  font-size: 12.5px; color: var(--texto-suave);
}
.seletor-empresa[hidden] { display: none; }
.seletor-empresa select {
  padding: 7px 10px; border: 1px solid var(--borda, #D5DEE9); border-radius: 8px;
  background: #fff; color: var(--texto, #1B2A41); font-weight: 600; max-width: 320px;
}
@media (max-width: 720px) {
  .seletor-empresa { margin-left: 0; width: 100%; }
  .seletor-empresa select { flex: 1; max-width: none; }
}

/* Botão de enviar o pedido pelo WhatsApp */
.btn-whatsapp { background: #25D366; color: #fff; }
.btn-whatsapp:hover { background: #1EBE5A; }