/* Módulo de Compras. Identidade própria (azul-petróleo + âmbar), no espírito do App RR Inox mas
   distinta dele — quem abre precisa saber na hora em que módulo está. Segue as vars do tema
   para funcionar no claro e no escuro. */
/* O modal do produto é irmão da página no DOM (fica no fim do body), então PRECISA repetir as
   variáveis — sem isso o gráfico fica invisível e os campos perdem a borda. */
#page-compras, #compras-modal, #almox-ficha-modal {
  --cp-bg: #F7F8FA;
  --cp-card: #FFFFFF;
  --cp-linha: #E3E7EC;
  --cp-texto: #1B2733;
  --cp-fraco: #6B7785;
  --cp-azul: #15293a;
  --cp-ambar: #D97706;
  --cp-kpi-bd: var(--cp-azul);
  /* Situação do item e origem da entrada: a cor de cada estado vive aqui, nos DOIS temas.
     Antes o hex vinha do `style=` do index.js (e o fundo era o mesmo hex + "1A"), então no tema
     escuro a pílula virava vermelho-escuro sobre carta escura — ilegível. */
  --cp-r-rompido: #B91C1C; --cp-r-critico: #DC2626; --cp-r-atencao: #D97706;
  --cp-r-ok: #15803D;      --cp-r-excesso: #0369A1; --cp-r-parado: #6B7280;
  --cp-r-semgiro: #9CA3AF; --cp-r-devolucao: #B45309;
  background: var(--cp-bg);
}
[data-theme="dark"] #page-compras, [data-theme="dark"] #compras-modal, [data-theme="dark"] #almox-ficha-modal {
  --cp-bg: #12161B;
  --cp-card: #1B222A;
  --cp-linha: #2C353F;
  --cp-texto: #E7ECF1;
  --cp-fraco: #94A2B0;
  /* Azul-petróleo da identidade some sobre carta escura: a tarja do KPI clareia (o BOTÃO segue
     azul cheio com texto branco, que funciona nos dois temas). */
  --cp-kpi-bd: #7FA9CE;
  --cp-ambar: #E9AC5C;
  --cp-r-rompido: #F58A80; --cp-r-critico: #F87171; --cp-r-atencao: #E9AC5C;
  --cp-r-ok: #63C58C;      --cp-r-excesso: #6FB6E8; --cp-r-parado: #9AA6B2;
  --cp-r-semgiro: #7C8896; --cp-r-devolucao: #E9AC5C;
}

#compras-content { color: var(--cp-texto); }
.cp-load { padding: 40px 20px; text-align: center; color: var(--cp-fraco); font-size: 14px; }
.cp-wrap { max-width: 1500px; margin: 0 auto; padding: 16px 18px 40px; }

/* Abas */
.cp-abas { display: flex; gap: 4px; padding: 0 18px; background: var(--cp-card); border-bottom: 1px solid var(--cp-linha); position: sticky; top: 0; z-index: 5; }
.cp-abas button {
  background: none; border: 0; border-bottom: 3px solid transparent; padding: 13px 18px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--cp-fraco); cursor: pointer;
}
.cp-abas button.on { color: var(--cp-azul); border-bottom-color: var(--cp-ambar); }
[data-theme="dark"] .cp-abas button.on { color: var(--cp-texto); }

/* Cartões de indicador */
.cp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.cp-kpi {
  background: var(--cp-card); border: 1px solid var(--cp-linha); border-left: 4px solid var(--cp-kpi-bd);
  border-radius: 10px; padding: 12px 14px;
}
.cp-kpi .r { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--cp-fraco); font-weight: 700; }
.cp-kpi .v { font-size: 22px; font-weight: 800; margin-top: 3px; letter-spacing: -.5px;
             font-variant-numeric: tabular-nums; }
/* Valor por extenso (o do estoque passa de R$ 6 milhões) encolhe para caber no cartão
   de 215 px em vez de vazar. 08/09/2026: o KPI deixou de abreviar para "R$ 6,22 mi". */
.cp-kpi .v.longa { font-size: 19px; letter-spacing: -.3px; }
.cp-kpi .s { font-size: 11.5px; color: var(--cp-fraco); margin-top: 2px; }

/* Seções */
.cp-sec { background: var(--cp-card); border: 1px solid var(--cp-linha); border-radius: 10px; padding: 14px 16px; margin-top: 14px; }
.cp-sec h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--cp-fraco); margin: 0 0 10px; }
.cp-nota { font-size: 11.5px; color: var(--cp-fraco); margin-top: 8px; line-height: 1.45; }

/* Barras de distribuição */
.cp-barras { display: flex; flex-direction: column; gap: 6px; }
.cp-barra { display: grid; grid-template-columns: 130px 1fr 60px; align-items: center; gap: 10px; font-size: 12.5px; }
.cp-barra .b { background: var(--cp-linha); border-radius: 4px; height: 14px; overflow: hidden; }
.cp-barra .b i { display: block; height: 100%; border-radius: 4px; }
.cp-barra .n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Tabelas */
.cp-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cp-tab th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
  color: var(--cp-fraco); padding: 7px 8px; border-bottom: 2px solid var(--cp-linha); white-space: nowrap;
}
.cp-tab td { padding: 7px 8px; border-bottom: 1px solid var(--cp-linha); vertical-align: middle; }
.cp-tab tbody tr { cursor: pointer; }
.cp-tab tbody tr:hover { background: rgba(217, 119, 6, .07); }
.cp-tab .r { text-align: right; font-variant-numeric: tabular-nums; }
.cp-tab .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; }
.cp-lista { background: var(--cp-card); border: 1px solid var(--cp-linha); border-radius: 10px; overflow: hidden; margin-top: 12px; }
.cp-lista th { padding-top: 12px; }

/* Etiquetas */
/* Pílula de estado: contorno na cor do estado (em vez do antigo fundo hex+alpha vindo do JS).
   Um desenho só que se lê nos dois temas — a cor vem da classe t-*. */
.cp-tag { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700;
  white-space: nowrap; border: 1px solid currentColor; color: var(--cp-fraco); }
.cp-tag.t-rompido  { color: var(--cp-r-rompido); }
.cp-tag.t-critico  { color: var(--cp-r-critico); }
.cp-tag.t-atencao  { color: var(--cp-r-atencao); }
.cp-tag.t-ok       { color: var(--cp-r-ok); }
.cp-tag.t-excesso  { color: var(--cp-r-excesso); }
.cp-tag.t-parado   { color: var(--cp-r-parado); }
.cp-tag.t-sem_giro { color: var(--cp-r-semgiro); }
.cp-tag.t-devolucao{ color: var(--cp-r-devolucao); }
.cp-barra .b i.t-rompido  { background: var(--cp-r-rompido); }
.cp-barra .b i.t-critico  { background: var(--cp-r-critico); }
.cp-barra .b i.t-atencao  { background: var(--cp-r-atencao); }
.cp-barra .b i.t-ok       { background: var(--cp-r-ok); }
.cp-barra .b i.t-excesso  { background: var(--cp-r-excesso); }
.cp-barra .b i.t-parado   { background: var(--cp-r-parado); }
.cp-barra .b i.t-sem_giro { background: var(--cp-r-semgiro); }
.cp-cls { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 600;
  background: var(--cp-linha); color: var(--cp-fraco); margin-right: 3px; white-space: nowrap; }
.cp-cls.vazio { background: none; }
/* "abriu X → soma em Y": aviso âmbar do módulo, contornado para funcionar nos dois temas. */
.cp-cls.alerta { background: none; border: 1px solid var(--cp-ambar); color: var(--cp-ambar); }
.cp-cons { font-size: 10px; color: var(--cp-ambar); font-weight: 700; }
.cp-off { font-size: 10px; color: #B91C1C; font-weight: 700; }

/* Filtros */
.cp-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--cp-card);
  border: 1px solid var(--cp-linha); border-radius: 10px; padding: 10px 12px; }
.cp-filtros input[type="text"], .cp-filtros select, .cp-linha input, .cp-form textarea, .cp-add input {
  font-family: inherit; font-size: 12.5px; padding: 7px 9px; border: 1.5px solid var(--cp-linha);
  border-radius: 7px; background: var(--cp-card); color: var(--cp-texto);
}
.cp-filtros input[type="text"] { flex: 1; min-width: 220px; }
.cp-cont { margin-left: auto; font-size: 12px; color: var(--cp-fraco); font-weight: 700; }
.cp-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--cp-texto); cursor: pointer; }
/* Baixar a lista em Excel (08/09/2026). Fica depois do contador, que tem margin-left:auto —
   por isso os dois ficam colados à direita da barra de filtros. */
.cp-xls {
  font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 12px;
  border: 1.5px solid var(--cp-linha); border-radius: 7px;
  background: var(--cp-card); color: var(--cp-texto); cursor: pointer; white-space: nowrap;
}
.cp-xls:hover:not(:disabled) { border-color: var(--cp-kpi-bd); color: var(--cp-azul); }
.cp-xls:disabled { opacity: .55; cursor: default; }

/* ── Modal do produto ──
   Cabeçalho e rodapé fixos, corpo em 2 colunas: à esquerda o que se lê, à direita o que se
   edita. Antes era uma coluna só e o botão de salvar ficava fora da tela. */
.cp-modal { display: flex; flex-direction: column; padding: 0 !important; }
.cp-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 12px;
  border-bottom: 1px solid var(--cp-linha); position: sticky; top: 0; z-index: 3;
  background: inherit;
}
.cp-head-txt { min-width: 0; }
.cp-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; overflow: hidden; }
.cp-col { padding: 4px 20px 16px; min-width: 0; overflow-y: auto; }
.cp-col-edit { border-left: 1px solid var(--cp-linha); background: rgba(0,0,0,.02); }
[data-theme="dark"] .cp-col-edit { background: rgba(255,255,255,.03); }
.cp-rolagem { max-height: 210px; overflow-y: auto; }
.cp-rodape {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  padding: 12px 20px; border-top: 1px solid var(--cp-linha); position: sticky; bottom: 0;
  background: inherit; z-index: 3;
}
.cp-sujo { margin-right: auto; font-size: 12px; color: var(--cp-ambar); font-weight: 700; }
.cp-btn-fraco { background: transparent; color: var(--cp-fraco); border: 1.5px solid var(--cp-linha); }
.cp-forn-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--cp-linha); font-size: 12.5px;
}
.cp-forn-item div { flex: 1; min-width: 0; }
.cp-forn-item span { display: block; font-size: 11px; color: var(--cp-fraco); }
.cp-add { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.cp-add-linha { display: flex; gap: 7px; align-items: center; }
.cp-add input { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .cp-cols { grid-template-columns: 1fr; }
  .cp-col-edit { border-left: 0; border-top: 1px solid var(--cp-linha); }
}

/* Modal do produto */
/* .modal-box do app já dá fundo/raio; aqui só ampliamos e garantimos o fundo no tema escuro
   (o padrão é #fff fixo, que no escuro deixaria o texto claro sobre branco). */
.cp-modal { max-width: 980px; width: 96vw; max-height: 92vh; overflow-y: auto; text-align: left; }
[data-theme="dark"] .cp-modal { background: var(--bg-card, #1B222A); color: var(--cp-texto, #E7ECF1); }
.cp-modal .cp-sec { background: transparent; border: 0; border-top: 1px solid var(--gray-200); border-radius: 0; padding: 12px 0 0; margin-top: 14px; }
.cp-modal .cp-tab td, .cp-modal .cp-tab th { border-color: var(--gray-200); }
.cp-modal .cp-tab tbody tr { cursor: default; }
.cp-modal-head { display: flex; align-items: flex-start; gap: 12px; }
.cp-modal-head h2 { font-size: 17px; margin: 2px 0 6px; line-height: 1.25; }
.cp-modal-cod { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--gray-500); font-weight: 700; }
.cp-modal-sub { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.cp-x { margin-left: auto; background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--gray-500); }
.cp-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 14px; }
.cp-mini div { background: var(--gray-100, #F3F4F6); border-radius: 8px; padding: 7px 9px; }
.cp-mini span { display: block; font-size: 10.5px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .3px; }
.cp-mini b { font-size: 14px; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .cp-mini div { background: rgba(255,255,255,.05); }

/* Gráfico de venda mensal */
.cp-grafico { display: flex; align-items: flex-end; gap: 4px; height: 84px; }
.cp-mes { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.cp-mes i { display: block; width: 100%; background: var(--cp-ambar); border-radius: 3px 3px 0 0; }
.cp-mes span { font-size: 9.5px; color: var(--gray-500); }

/* Formulário de características */
.cp-form { display: flex; flex-direction: column; gap: 10px; }
.cp-chks { display: flex; gap: 14px; flex-wrap: wrap; }
.cp-linha { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.cp-linha input[type="number"] { width: 90px; }
.cp-full { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--gray-500); }
.cp-full textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.cp-btn { background: var(--cp-azul); color: #fff; border: 0; border-radius: 8px; padding: 8px 16px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; align-self: flex-start; }
.cp-mini-btn { background: none; border: 0; color: #B91C1C; cursor: pointer; font-size: 13px; }

@media (max-width: 820px) {
  .cp-tab { font-size: 11.5px; }
  .cp-barra { grid-template-columns: 96px 1fr 46px; }
}

/* Cabeçalho ordenável da lista de produtos */
.cp-th { cursor: pointer; user-select: none; }
.cp-th:hover { color: var(--cp-ambar); }
.cp-th.on { color: var(--cp-ambar); }

/* Rótulo de dados no gráfico mensal */
.cp-grafico { height: 96px; }
.cp-mes b { font-size: 9.5px; font-weight: 700; color: var(--cp-fraco); line-height: 1; }
.cp-mes span { white-space: nowrap; }

/* Sugestão de fornecedor (catálogo da OMIE) */
.cp-sug {
  border: 1px solid var(--cp-linha); border-radius: 8px; max-height: 190px; overflow-y: auto;
  background: var(--cp-card);
}
.cp-sug > div { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--cp-linha); font-size: 12.5px; }
.cp-sug > div:hover { background: rgba(217,119,6,.09); }
.cp-sug b { display: block; }
.cp-sug span { font-size: 11px; color: var(--cp-fraco); }
.cp-sug-vazio { padding: 8px 10px; font-size: 11.5px; color: var(--cp-fraco); }
.cp-ok { font-size: 10px; color: #15803D; font-weight: 700; }

/* Grupos de itens full / SKUs */
.cp-membro {
  display: inline-block; padding: 1px 7px; margin: 1px 3px 1px 0; border-radius: 5px;
  font-size: 11px; font-weight: 700; background: var(--cp-linha); color: var(--cp-fraco);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.cp-membro.manual { background: #FFEDD5; color: #9A3412; }
[data-theme="dark"] .cp-membro.manual { background: #7C2D12; color: #FED7AA; }
.cp-membro.fora { opacity: .5; text-decoration: line-through; }
.cp-membro b { cursor: pointer; margin-left: 3px; }
.hidden { display: none; }

/* Combobox de fornecedor: lista alfabética ao clicar, digitação livre */
.cp-combo { position: relative; }
.cp-combo input[type="text"] { width: 100%; box-sizing: border-box; padding-right: 26px; }
.cp-combo-seta {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--cp-fraco); font-size: 11px; cursor: pointer; user-select: none;
}
.cp-combo .cp-sug {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 20;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
/* Mês sem venda: coluna vazia (só o rótulo), para o buraco ficar visível */
.cp-mes.vazio i { background: none; }
.cp-mes.vazio span { color: var(--cp-fraco); opacity: .55; }
.cp-grafico { border-bottom: 1px solid var(--cp-linha); }

/* Barra empilhada: base = código principal, topo = demais códigos do grupo */
.cp-mes { justify-content: flex-end; }
.cp-mes i { border-radius: 0; }
.cp-mes i.principal { border-radius: 0; }
.cp-mes i.principal:first-of-type { border-radius: 3px; }        /* sem relacionados: barra inteira */
.cp-mes i.outros { background: #7C3AED; border-radius: 3px 3px 0 0; }
.cp-legenda { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--cp-fraco); }
.cp-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.cp-legenda i.p { background: var(--cp-ambar); }
.cp-legenda i.o { background: #7C3AED; }

/* ── Aba Parados e aba Fornecedores (16/09/2026) ── */
/* Chips de faixa: contorno, ficam âmbar quando escolhidos; faixa vazia fica apagada. */
.cp-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.cp-chips-rot { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--cp-fraco); font-weight: 700; min-width: 130px; }
.cp-chip {
  font-family: inherit; font-size: 12px; padding: 5px 10px; border-radius: 20px; cursor: pointer;
  border: 1.5px solid var(--cp-linha); background: var(--cp-card); color: var(--cp-texto); white-space: nowrap;
}
.cp-chip b { margin-left: 4px; font-variant-numeric: tabular-nums; }
.cp-chip span { color: var(--cp-fraco); font-size: 11px; margin-left: 3px; }
.cp-chip:hover { border-color: var(--cp-ambar); }
.cp-chip.on { border-color: var(--cp-ambar); color: var(--cp-ambar); background: rgba(217, 119, 6, .08); }
.cp-chip.vazio { opacity: .45; }
.cp-sentinela { text-align: center; padding: 14px; font-size: 12px; color: var(--cp-fraco); }
.cp-sub { font-size: 11px; color: var(--cp-fraco); }
.cp-sub-inline { font-size: 10.5px; color: var(--cp-fraco); }
/* Participação do fornecedor no total: barrinha antes do percentual. */
.cp-pct { display: inline-block; width: 46px; height: 7px; background: var(--cp-linha); border-radius: 4px; margin-right: 6px; vertical-align: 1px; overflow: hidden; }
.cp-pct i { display: block; height: 100%; background: var(--cp-ambar); border-radius: 4px; }
.cp-tab tbody tr.on { background: rgba(217, 119, 6, .12); }
.cp-forn-det { margin-top: 12px; }
.cp-forn-det .cp-sec { border: 0; border-top: 1px solid var(--cp-linha); border-radius: 0; padding: 12px 0 0; }
.cp-forn-det .cp-mini { margin-top: 10px; }
/* Números não quebram linha nas listas novas (Custo/valores ficavam em duas linhas). */
.cp-lista td.r, .cp-forn-det td.r { white-space: nowrap; }

/* SKU desligado do grupo pela equipe: riscado, tracejado âmbar, com o ↺ para religar. */
.cp-membro.desligado { text-decoration: line-through; opacity: .7; border: 1px dashed var(--cp-ambar); background: none; }
.cp-membro.desligado b { text-decoration: none; }
/* Linha de "mostrar todos" na lista de fornecedores. */
.cp-tab tbody tr.cp-expande { cursor: default; }
.cp-tab tbody tr.cp-expande:hover { background: none; }
.cp-tab tbody tr.cp-expande td { text-align: center; padding: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   VISUAL DO PCP (22/09/2026, pedido do Guilherme: "refaça o layout inteiro como o do PCP usando a
   mesma ideia"). O MESMO sistema do public/css/pcp.css — skill apple-design:
   - MATERIAL: cabeçalho + abas numa camada fixa e translúcida (.cpx-chrome), o conteúdo rola por
     baixo; a sombra sob as abas nasce com a rolagem.
   - TIPOGRAFIA: fonte do sistema, números tabulares, hierarquia por peso + tamanho.
   - RESPOSTA: botões, abas e cartas reagem no aperto (scale .97).
   - CONTENÇÃO: seções no cabeçalho (controle segmentado), abas da seção embaixo, só texto; o
     título diz onde se está ("Compras › Produtos").
   - ACESSIBILIDADE: reduced-motion, reduced-transparency e contraste alto.
   As variáveis --cp-* continuam existindo (todo o módulo e a Importação usam), agora com a paleta
   do PCP; os nomes das classes .cp-* não mudaram — só o desenho delas.
   ⚠️ O modal do produto e o da Importação nascem fora da página: entram na lista das variáveis.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
#page-compras, #compras-modal, #imp-modal, #almox-ficha-modal {
  --cp-bg: #f5f5f7;
  --cp-card: #ffffff;
  --cp-card-2: #fafafc;
  --cp-linha: rgba(0, 0, 0, 0.07);
  --cp-sep: rgba(0, 0, 0, 0.13);
  --cp-texto: #1d1d1f;
  --cp-texto-2: #3a3a3c;
  --cp-fraco: #636366;
  --cp-fill: rgba(118, 118, 128, 0.14);
  --cp-fill-2: rgba(118, 118, 128, 0.08);
  --cp-hover: rgba(0, 0, 0, 0.028);
  --cp-azul: #15293a;
  --cp-primaria-ink: #ffffff;
  --cp-tint: #b4500f;
  --cp-focus: rgba(236, 106, 28, 0.32);
  --cp-kpi-bd: var(--cp-azul);
  --cp-chrome: rgba(245, 245, 247, 0.74);
  --cp-header: rgba(21, 41, 58, 0.9);
  --cp-header-solid: #15293a;
  --cp-radius: 14px;
  --cp-radius-sm: 9px;
  --cp-sombra: 0 0 0 0.5px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 28px -18px rgba(0, 0, 0, 0.2);
  --cp-sombra-pop: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 24px 60px -18px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] #page-compras, [data-theme="dark"] #compras-modal, [data-theme="dark"] #imp-modal, [data-theme="dark"] #almox-ficha-modal {
  --cp-bg: #0e1013;
  --cp-card: #1b1d22;
  --cp-card-2: #212329;
  --cp-linha: rgba(255, 255, 255, 0.07);
  --cp-sep: rgba(255, 255, 255, 0.14);
  --cp-texto: #f5f5f7;
  --cp-texto-2: #d1d1d6;
  --cp-fraco: #a1a1a6;
  --cp-fill: rgba(118, 118, 128, 0.28);
  --cp-fill-2: rgba(118, 118, 128, 0.18);
  --cp-hover: rgba(255, 255, 255, 0.035);
  --cp-azul: #f3934f;              /* no escuro o destaque é o laranja, como no PCP */
  --cp-primaria-ink: #1b1206;
  --cp-tint: #f3934f;
  --cp-focus: rgba(243, 147, 79, 0.38);
  --cp-kpi-bd: #f3934f;
  --cp-chrome: rgba(14, 16, 19, 0.72);
  --cp-header: rgba(18, 35, 52, 0.88);
  --cp-header-solid: #122334;
  --cp-sombra: 0 0 0 0.5px rgba(255, 255, 255, 0.07), 0 12px 28px -18px rgba(0, 0, 0, 0.7);
  --cp-sombra-pop: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 24px 60px -18px rgba(0, 0, 0, 0.8);
}

#page-compras {
  background: var(--cp-bg);
  color: var(--cp-texto);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 250ms ease, color 250ms ease;
}

/* ── Camada fixa: cabeçalho + abas ─────────────────────────────────────────────────────────── */
#page-compras .cpx-chrome { position: sticky; top: 0; z-index: 100; }
#page-compras .cpx-chrome .header {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  background-color: var(--cp-header);
  background-image: none;
  border-bottom: 2px solid var(--orange);
  box-shadow: none;
  padding: 10px 16px;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
#page-compras .cpx-marca { grid-column: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
#page-compras .cpx-logo { height: 24px; width: auto; flex: none; }
#page-compras .cpx-voltar {
  background: none; border: 0; color: #fff; cursor: pointer; font-size: 1.55rem; line-height: 1;
  padding: 2px 9px 5px; border-radius: 8px; transition: background-color 150ms ease, transform 100ms ease;
}
#page-compras .cpx-voltar:hover { background: rgba(255, 255, 255, 0.12); }
#page-compras .cpx-voltar:active { transform: scale(0.94); }
#page-compras .cpx-titulo {
  display: flex; align-items: baseline; gap: 8px; margin: 0;
  font-size: 1.22rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.15; color: #fff;
  padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.22);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#page-compras .cpx-secao { font-size: 0.98rem; font-weight: 500; letter-spacing: -0.012em; color: rgba(255, 255, 255, 0.76); }
#page-compras .cpx-secao:not(:empty)::before { content: '›'; margin-right: 8px; font-weight: 400; color: rgba(255, 255, 255, 0.45); }

/* Seções: controle segmentado no cabeçalho, a ativa vira pílula branca. */
#page-compras .cpx-secoes {
  grid-column: 2; display: flex; gap: 2px; padding: 3px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
  overflow-x: auto; scrollbar-width: none;
}
#page-compras .cpx-secoes::-webkit-scrollbar { display: none; }
#page-compras .cpx-secao-btn {
  flex: none; border: 0; background: transparent; cursor: pointer; color: rgba(255, 255, 255, 0.84);
  font: inherit; font-size: 0.86rem; font-weight: 500; letter-spacing: -0.006em;
  padding: 5px 13px; border-radius: 8px; white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
#page-compras .cpx-secao-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
#page-compras .cpx-secao-btn:active { transform: scale(0.97); }
#page-compras .cpx-secao-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75); }
#page-compras .cpx-secao-btn.active { background: #ffffff; color: #15293a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }

#page-compras .cpx-acoes { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
#page-compras .cpx-atalho {
  border: 0; cursor: pointer; font: inherit; font-size: 0.84rem; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, 0.14); padding: 6px 12px; border-radius: 8px;
  transition: background-color 150ms ease, transform 100ms ease;
}
#page-compras .cpx-atalho:hover { background: rgba(255, 255, 255, 0.22); }
#page-compras .cpx-atalho:active { transform: scale(0.97); }

/* Abas da seção: só texto, a ativa vira pílula (o peso não muda, a fileira não "anda"). */
#page-compras .cpx-abas {
  display: flex; align-items: center; gap: 2px; padding: 6px 12px;
  background: var(--cp-chrome);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 var(--cp-linha); overflow-x: auto; scrollbar-width: none;
}
#page-compras .cpx-abas::-webkit-scrollbar { display: none; }
#page-compras .cpx-aba {
  flex: none; margin: 0; padding: 6px 11px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font: inherit; font-size: 0.84rem; font-weight: 500; letter-spacing: -0.006em; color: var(--cp-texto-2);
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
#page-compras .cpx-aba:hover { background: var(--cp-fill-2); color: var(--cp-texto); }
#page-compras .cpx-aba:active { transform: scale(0.97); background: var(--cp-fill); }
#page-compras .cpx-aba:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cp-focus); }
#page-compras .cpx-aba.active { background: var(--cp-card); color: var(--cp-texto); box-shadow: 0 0 0 0.5px var(--cp-sep), 0 1px 3px rgba(0, 0, 0, 0.1); }
/* Aqui quem rola é o #compras-content, não a página: a sombra "que nasce com a rolagem" do PCP
   (scroll(root)) nunca apareceria — fica o fio de meio pixel fixo. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #page-compras .cpx-abas { background: var(--cp-bg); }
  #page-compras .cpx-chrome .header { background-color: var(--cp-header-solid); }
}

/* ── Conteúdo ───────────────────────────────────────────────────────────────────────────────── */
#page-compras #compras-content { flex: 1; overflow-y: auto; color: var(--cp-texto); }
#page-compras #compras-content.cpx-entra { animation: cpx-entra 200ms ease-out backwards; }
@keyframes cpx-entra { from { opacity: 0; } }
#page-compras .cp-wrap { padding: 18px 20px 40px; }
#page-compras .cp-load { color: var(--cp-fraco); }

/* Indicadores: carta sem borda desenhada; o número é o protagonista, sem a tarja lateral. */
#page-compras .cp-kpis { gap: 12px; }
#page-compras .cp-kpi {
  background: var(--cp-card); border: 0; border-radius: var(--cp-radius); box-shadow: var(--cp-sombra);
  padding: 14px 16px;
}
#page-compras .cp-kpi .r { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--cp-fraco); }
#page-compras .cp-kpi .v { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.022em; margin-top: 4px; color: var(--cp-texto); }
#page-compras .cp-kpi .v.longa { font-size: 1.3rem; }
#page-compras .cp-kpi .s { font-size: 0.78rem; color: var(--cp-fraco); margin-top: 3px; }

/* Seções e listas: cartas. */
#page-compras .cp-sec, #page-compras .cp-lista, #page-compras .cp-filtros {
  background: var(--cp-card); border: 0; border-radius: var(--cp-radius); box-shadow: var(--cp-sombra);
}
#page-compras .cp-sec { padding: 16px 18px; margin-top: 16px; }
#page-compras .cp-sec h3 {
  font-size: 1rem; font-weight: 600; letter-spacing: -0.012em; text-transform: none; color: var(--cp-texto); margin: 0 0 12px;
}
#page-compras .cp-nota { color: var(--cp-fraco); }
#page-compras .cp-barra .b { background: var(--cp-fill-2); border-radius: 5px; }
#page-compras .cp-barra .b i { border-radius: 5px; }

/* Tabelas: cabeçalho discreto e fixo, linhas de meio pixel, números tabulares. */
#page-compras .cp-lista { overflow: auto; margin-top: 14px; }
#page-compras .cp-tab { font-size: 0.84rem; font-variant-numeric: tabular-nums; border-collapse: separate; border-spacing: 0; }
#page-compras .cp-tab th {
  position: sticky; top: 0; z-index: 1; background: var(--cp-card-2); color: var(--cp-fraco);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; padding: 9px 10px; border-bottom: 0.5px solid var(--cp-sep);
}
#page-compras .cp-tab td { padding: 9px 10px; border-bottom: 0.5px solid var(--cp-linha); color: var(--cp-texto); }
#page-compras .cp-tab tbody tr:last-child td { border-bottom: 0; }
#page-compras .cp-tab tbody tr:hover { background: var(--cp-hover); }
#page-compras .cp-th:hover { color: var(--cp-texto); }
#page-compras .cp-th.on { color: var(--cp-tint); }

/* Estado do item: pílula preenchida de leve na cor do estado (mesma cor nos dois temas via --cp-r-*). */
#page-compras .cp-tag, #compras-modal .cp-tag, #almox-ficha-modal .cp-tag {
  border: 0; padding: 3px 9px; font-weight: 600; letter-spacing: 0.01em;
  background: color-mix(in srgb, currentColor 13%, transparent);
}
#page-compras .cp-cls { background: var(--cp-fill-2); color: var(--cp-texto-2); border-radius: 6px; }
#page-compras .cp-cls.vazio { background: none; }
#page-compras .cp-cls.alerta { background: none; box-shadow: inset 0 0 0 1px var(--cp-ambar); border: 0; }

/* Filtros: a barra é uma carta; campos no preenchimento cinza do sistema, anel de foco laranja. */
#page-compras .cp-filtros { padding: 10px 12px; gap: 8px; }
#page-compras .cp-filtros input[type="text"], #page-compras .cp-filtros select,
#page-compras .cp-linha input, #page-compras .cp-form textarea, #page-compras .cp-add input,
#compras-modal .cp-linha input, #compras-modal .cp-form textarea, #compras-modal .cp-add input, #almox-ficha-modal .cp-linha input, #almox-ficha-modal .cp-form textarea, #almox-ficha-modal .cp-add input {
  font-size: 0.875rem; padding: 8px 11px; border: 0; border-radius: var(--cp-radius-sm);
  background-color: var(--cp-fill-2); color: var(--cp-texto); transition: background-color 120ms ease, box-shadow 120ms ease;
}
#page-compras input:focus, #page-compras select:focus, #page-compras textarea:focus,
#compras-modal input:focus, #compras-modal select:focus, #compras-modal textarea:focus, #almox-ficha-modal input:focus, #almox-ficha-modal select:focus, #almox-ficha-modal textarea:focus {
  outline: none; background-color: var(--cp-card); box-shadow: 0 0 0 3px var(--cp-focus);
}
#page-compras input::placeholder, #compras-modal input::placeholder, #almox-ficha-modal input::placeholder { color: var(--cp-fraco); opacity: 0.85; }
#page-compras input[type=checkbox], #compras-modal input[type=checkbox], #almox-ficha-modal input[type=checkbox] { accent-color: var(--cp-tint); }
#page-compras .cp-cont { color: var(--cp-fraco); font-weight: 600; }
#page-compras .cp-chk { color: var(--cp-texto); }
#page-compras .cp-chip { transition: transform 100ms ease, background-color 150ms ease; }
#page-compras .cp-chip:active { transform: scale(0.97); }

/* Botões: resposta no aperto. */
#page-compras .cp-btn, #compras-modal .cp-btn, #page-compras .cp-xls, #almox-ficha-modal .cp-btn {
  border-radius: var(--cp-radius-sm); font-weight: 600; letter-spacing: -0.005em;
  transition: transform 100ms ease, background-color 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
#page-compras .cp-btn, #compras-modal .cp-btn, #almox-ficha-modal .cp-btn { background: var(--cp-azul); color: var(--cp-primaria-ink); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
#page-compras .cp-btn:hover, #compras-modal .cp-btn:hover, #almox-ficha-modal .cp-btn:hover { filter: brightness(1.08); }
#page-compras .cp-xls { border: 0; background: var(--cp-fill); color: var(--cp-texto); }
#page-compras .cp-xls:hover:not(:disabled) { background: var(--cp-fill-2); color: var(--cp-texto); }
#page-compras .cp-btn:active, #compras-modal .cp-btn:active, #page-compras .cp-xls:active:not(:disabled), #almox-ficha-modal .cp-btn:active { transform: scale(0.97); filter: none; }
#page-compras .cp-btn:focus-visible, #compras-modal .cp-btn:focus-visible, #page-compras .cp-xls:focus-visible, #almox-ficha-modal .cp-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cp-focus); }

/* As telas do almoxarifado que moram aqui (Mínimo e máximo, Comprar) usam .card/.btn/.data-table
   do app — no Compras elas entram no mesmo sistema, como no PCP. */
#page-compras .card { background: var(--cp-card); border: 0; border-radius: var(--cp-radius); box-shadow: var(--cp-sombra); }
#page-compras .card-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.012em; text-transform: none; color: var(--cp-texto); }
#page-compras .btn { border-radius: var(--cp-radius-sm); font-weight: 600; transition: transform 100ms ease, filter 150ms ease; }
#page-compras .btn:active { transform: scale(0.97); }
#page-compras .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cp-focus); }
#page-compras .btn-primary { background: var(--cp-azul); color: var(--cp-primaria-ink); }
#page-compras .btn-gray { background: var(--cp-fill); color: var(--cp-texto); }
#page-compras table.data-table { font-size: 0.84rem; font-variant-numeric: tabular-nums; }
#page-compras table.data-table th {
  background: var(--cp-card-2); color: var(--cp-fraco); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase; padding: 9px 10px; border-bottom: 1px solid var(--cp-sep);
}
#page-compras table.data-table td { padding: 8px 10px; border-bottom: 1px solid var(--cp-linha); color: var(--cp-texto); }
#page-compras table.data-table tr:hover td { background: var(--cp-hover); }
#page-compras .text-muted { color: var(--cp-fraco); }

/* Modais do Compras: carta que surge do centro, fundo escurecido. */
#compras-modal .cp-modal, #imp-modal .cp-modal, #almox-ficha-modal .cp-modal {
  background: var(--cp-card); color: var(--cp-texto); border-radius: 18px; box-shadow: var(--cp-sombra-pop);
}
#compras-modal .cp-modal .cp-sec, #almox-ficha-modal .cp-modal .cp-sec { border-top: 0.5px solid var(--cp-sep); }
#compras-modal .cp-mini div, #almox-ficha-modal .cp-mini div { background: var(--cp-fill-2); border-radius: 10px; }
#compras-modal .cp-mini span, #compras-modal .cp-modal-cod, #compras-modal .cp-mes span, #almox-ficha-modal .cp-mini span, #almox-ficha-modal .cp-modal-cod, #almox-ficha-modal .cp-mes span { color: var(--cp-fraco); }
#compras-modal .cp-x, #almox-ficha-modal .cp-x { color: var(--cp-fraco); border-radius: 8px; padding: 2px 8px; }
#compras-modal .cp-x:hover, #almox-ficha-modal .cp-x:hover { background: var(--cp-fill-2); }
#compras-modal.modal-overlay:not(.hidden) .cp-modal, #almox-ficha-modal.modal-overlay:not(.hidden) .cp-modal { animation: cpx-surge 180ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cpx-surge { from { opacity: 0; transform: scale(0.97); } }

/* ── Celular ────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #page-compras .cpx-chrome .header { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  #page-compras .cpx-acoes { grid-column: 2; grid-row: 1; }
  #page-compras .cpx-secoes { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
}
@media (max-width: 640px) {
  #page-compras .cp-wrap { padding: 12px 12px 28px; }
  #page-compras .cpx-secao { display: none; }
  #page-compras .cpx-titulo { padding-left: 10px; }
}

/* ── Acessibilidade ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #page-compras *, #compras-modal, #compras-modal *, #almox-ficha-modal, #almox-ficha-modal * { animation: none !important; transition-duration: 0.01ms !important; }
  #page-compras .cpx-abas { box-shadow: 0 1px 0 var(--cp-linha) !important; }
  #page-compras .cpx-aba:active, #page-compras .cpx-secao-btn:active, #page-compras .cpx-voltar:active,
  #page-compras .cp-btn:active, #page-compras .btn:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  #page-compras .cpx-chrome .header { background-color: var(--cp-header-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  #page-compras .cpx-abas { background: var(--cp-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  #page-compras, #compras-modal, #almox-ficha-modal { --cp-linha: rgba(0, 0, 0, 0.22); --cp-sep: rgba(0, 0, 0, 0.4); --cp-fraco: #48484a; --cp-texto-2: #1d1d1f; }
  [data-theme="dark"] #page-compras, [data-theme="dark"] #compras-modal, [data-theme="dark"] #almox-ficha-modal { --cp-linha: rgba(255, 255, 255, 0.24); --cp-sep: rgba(255, 255, 255, 0.45); --cp-fraco: #d1d1d6; --cp-texto-2: #f5f5f7; }
  #page-compras .cp-kpi, #page-compras .cp-sec, #page-compras .cp-lista, #page-compras .cp-filtros, #page-compras .card { box-shadow: 0 0 0 1px var(--cp-sep); }
}

/* ── Faixa de aviso (22/09/2026) ─────────────────────────────────────────────────────────────
   "Tem ajustes pendentes para você verificar", no mesmo papel da faixa de bloqueio de senha do
   PCP: interrompe uma vez, não fica gritando. Vive logo abaixo da camada fixa, por isso não é
   ela que rola. */
#page-compras { --cp-aviso-fundo: #fdf4e7; --cp-aviso-borda: #e7c79a; --cp-aviso-cheio: #b45309; }
[data-theme="dark"] #page-compras { --cp-aviso-fundo: #2a2113; --cp-aviso-borda: #5a4526; --cp-aviso-cheio: #b45309; }
#page-compras .cpx-faixa {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 20px 0;
  padding: 10px 14px;
  border-radius: var(--cp-radius-sm, 9px);
  background: var(--cp-aviso-fundo);
  box-shadow: inset 0 0 0 1px var(--cp-aviso-borda);
  color: var(--cp-texto);
  font-size: 0.88rem;
  line-height: 1.45;
}
#page-compras .cpx-faixa > span { flex: 1; min-width: 200px; }
#page-compras .cpx-faixa-btn {
  flex: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 8px;
  background: var(--cp-aviso-cheio);
  color: #fff;
  transition: filter 150ms ease, transform 100ms ease;
}
#page-compras .cpx-faixa-btn:hover { filter: brightness(1.08); }
#page-compras .cpx-faixa-btn:active { transform: scale(0.97); }
@media (max-width: 640px) { #page-compras .cpx-faixa { margin: 10px 12px 0; } }
@media (prefers-reduced-motion: reduce) { #page-compras .cpx-faixa-btn:active { transform: none; } }

/* Aba OCs da OMIE (23/09/2026) */
.cp-oc-botoes { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 6px; }
.cp-tab tbody tr.cp-oc-atrasada td.cp-oc-vencida { color: var(--cp-r-atencao); font-weight: 700; }

/* ── Recebimentos (24/09/2026) ─────────────────────────────────────────────── */
.cp-rec-tab tbody tr.cp-rec-row { cursor: pointer; }
.cp-rec-acoes { white-space: nowrap; display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.cp-rec-btn { border: 1px solid var(--cp-linha); background: var(--cp-card); color: var(--cp-texto); border-radius: 7px; padding: 4px 9px; font-size: 12px; font-weight: 600; cursor: pointer; }
.cp-rec-btn:hover { border-color: var(--cp-azul); color: var(--cp-azul); }
.cp-rec-btn.ok { border-color: var(--cp-r-ok); color: var(--cp-r-ok); }
.cp-rec-btn.ok:hover { background: var(--cp-r-ok); color: #fff; }
.cp-rec-btn.nao { border-color: var(--cp-r-rompido); color: var(--cp-r-rompido); }
.cp-rec-btn.nao:hover { background: var(--cp-r-rompido); color: #fff; }
.cp-rec-tab tbody tr.cp-rec-det > td { padding: 0; background: var(--gray-50, #F9FAFB); }
[data-theme="dark"] .cp-rec-tab tbody tr.cp-rec-det > td { background: rgba(255,255,255,.03); }
.cp-rec-det-in { padding: 12px 14px 14px; border-left: 3px solid var(--cp-azul); }
.cp-rec-det-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.cp-rec-det-in .cp-tab { background: var(--cp-card); border-radius: 8px; }
.cp-rec-det-in .cp-tab tbody tr { cursor: default; }
.cp-rec-lanc { white-space: nowrap; }
.cp-rec-lanc input { width: 84px; padding: 4px 6px; border: 1px solid var(--cp-linha); border-radius: 6px; font-size: 13px; text-align: right; margin-right: 4px; }
.cp-rec-lanc input.falta { border-color: var(--cp-r-atencao); font-weight: 700; }
.cp-rec-falta { color: var(--cp-r-atencao); font-weight: 700; }
.cp-rec-movs { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12px; color: var(--cp-fraco); }
.cp-rec-movs li { padding: 3px 0; border-top: 1px dashed var(--cp-linha); }
.cp-rec-movs .cp-mini-btn { font-size: 11px; margin-left: 6px; }

/* ── Produtos como planilha (24/09/2026) ───────────────────────────────────── */
/* Larguras fixas por coluna (colgroup) + table-layout fixed: a tabela não se reacomoda a cada tecla
   da busca — era o "resizing esquisito" ao digitar 2 dígitos. Só o nome estica. */
.cp-prod-tab { table-layout: fixed; min-width: 1080px; }   /* abaixo disso o cartão rola na horizontal; o nome fica legível */
.cp-prod-tab td, .cp-prod-tab th { overflow: hidden; text-overflow: ellipsis; }
/* Respiro lateral menor (02/10/2026): com Custo e Revenda são 15 colunas, e R$ 1.234,56 cabe inteiro em 90 px. */
#page-compras .cp-prod-tab td, #page-compras .cp-prod-tab th { padding-left: 6px; padding-right: 6px; }
.cp-prod-tab td.cp-prod-nome { white-space: normal; overflow-wrap: anywhere; }
.cp-prod-tab td.cp-prod-jan { font-weight: 700; color: var(--cp-ambar); }
.cp-chips-janela { border-top: 1px dashed var(--cp-linha); padding-top: 8px; margin-top: 4px; }
.cp-periodo { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; }
.cp-periodo input[type=month] { padding: 3px 6px; border: 1px solid var(--cp-linha); border-radius: 6px; font-size: 12.5px; background: var(--cp-bg, #fff); color: inherit; }
.cp-chip-limpar { border-style: dashed; color: var(--cp-fraco); }
.cp-prod-cols { position: relative; }
.cp-prod-cols-menu { position: absolute; right: 0; top: 34px; z-index: 20; background: var(--cp-card); border: 1px solid var(--cp-linha);
  border-radius: 10px; padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 260px; }
.cp-prod-cols-menu.hidden { display: none; }

/* ── Pedidos: ponto de pedido, mín/máx e kanban (24/09/2026) ───────────────── */
.cp-mm-params { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.cp-mm-params label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--cp-fraco); }
.cp-mm-params input, .cp-mm-params select { padding: 5px 8px; border: 1px solid var(--cp-linha); border-radius: 6px; font-size: 13px; width: 110px; }
.cp-kb { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 10px; align-items: start; overflow-x: auto; }
/* Pedidos v2 (14/10/2026): cards grandes no padrão da OMIE, 4 colunas (Rascunho · Pronto para enviar · Em trânsito · Chegou) */
.cp-kb-v2 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.cp-kb-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cp-kb-barra .cp-kb-classes { margin-bottom: 0; flex: 1; }
.cp-kb-card.cp-kb-big { padding: 12px 14px; font-size: 13px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.cp-kb-forn { font-size: 15px; font-weight: 700; margin: 6px 0 2px; color: var(--cp-texto); line-height: 1.25; }
.cp-kb-forn i { color: var(--cp-fraco); font-weight: 500; }
.cp-kb-valor { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-bottom: 4px; }
.cp-kb-meta { font-size: 12px; color: var(--cp-fraco); margin-top: 3px; line-height: 1.35; }
.cp-kb-rodape { font-size: 11px; color: var(--cp-fraco); margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--cp-linha); }
.cp-ped-novo-form { margin-bottom: 12px; }
/* tipo do pedido novo (19/10/2026): quatro botões grandes, nenhum marcado de saída */
.cp-novo-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 10px 0 12px; }
.cp-novo-tipos .cp-pp-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px 14px; font-size: 15px; }
.cp-novo-tipos .cp-pp-tab .cp-sub { font-weight: 400; font-size: 12px; }
.cp-serv-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.cp-serv-linha input[type=text]:first-child { flex: 1; min-width: 260px; }

.cp-ped-modal-box { max-width: 1280px; width: 97vw; max-height: 95vh; overflow-y: auto; padding: 0 !important; }
.cp-ped-modal-box > .cp-sec { margin-top: 0 !important; border: 0; border-radius: 0; }
.cp-ped-modal-box .cp-modal-head { position: sticky; top: 0; z-index: 3; background: var(--cp-card); padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--cp-linha); }
.cp-kb-card.cp-kb-big:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.08); }

.cp-v2-bloco { border: 1px solid var(--cp-linha); border-radius: 10px; padding: 12px 14px; margin: 10px 0; background: var(--cp-card); }
.cp-v2-tit { font-weight: 700; font-size: 13.5px; margin-bottom: 10px; color: var(--cp-texto); }
details.cp-v2-bloco > summary.cp-v2-tit { cursor: pointer; margin-bottom: 0; }
details.cp-v2-bloco[open] > summary.cp-v2-tit { margin-bottom: 10px; }
.cp-v2-cab { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; align-items: end; }
.cp-v2-cab label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--cp-fraco); min-width: 0; }
.cp-v2-cab label input[type=text], .cp-v2-cab label select { width: 100%; box-sizing: border-box; font-size: 13px; }
.cp-v2-cab .cp-v2-forn { grid-column: span 2; }
.cp-v2-cab .cp-v2-obs { grid-column: 1 / -1; }
.cp-v2-cab .cp-v2-chk { flex-direction: row; align-items: center; gap: 6px; color: var(--cp-texto); }
.cp-v2-forn-busca { position: relative; display: flex; flex-direction: column; gap: 3px; }
.cp-v2-forn-fixo { font-size: 15px; padding: 4px 0; }
.cp-v2-tabwrap { overflow-x: auto; }
.cp-v2-itens { font-size: 13px; }
.cp-v2-itens tbody tr { cursor: default; }
.cp-v2-itens tbody tr:hover { background: transparent; }
.cp-v2-itens tr.cp-v2-it:hover { background: rgba(217, 119, 6, .05); }
.cp-v2-desc { min-width: 220px; }
input.cp-v2-num[type], input.cp-v2-preco[type], input.cp-v2-pct[type] { width: 84px; text-align: right; font-variant-numeric: tabular-nums; padding: 4px 6px; box-sizing: border-box; }
input.cp-v2-preco[type] { width: 104px; }
input.cp-v2-pct[type] { width: 64px; }
.cp-v2-acoes { white-space: nowrap; }
.cp-v2-qtd { white-space: nowrap; }
select.cp-v2-un { height: 34px; border: 1px solid var(--cp-linha); border-radius: 8px; padding: 0 6px; background: var(--cp-card); color: var(--cp-texto); font-size: 12.5px; margin-left: 4px; }
input.cp-v2-fator[type] { width: 64px; text-align: right; padding: 2px 6px; height: 26px; border: 1px solid var(--cp-linha); border-radius: 6px; font-size: 12px; margin: 0 4px; }

.cp-v2-acoes .cp-mini-btn { color: var(--cp-azul); }
.cp-v2-acoes .cp-mini-btn + .cp-mini-btn { color: #B91C1C; margin-left: 6px; }
tr.cp-v2-imp td { background: rgba(0,0,0,.025); border-bottom: 1px solid var(--cp-linha); }
[data-theme="dark"] tr.cp-v2-imp td { background: rgba(255,255,255,.03); }
.cp-v2-imp-campos { display: grid; grid-template-columns: repeat(5, 96px) minmax(220px, 1fr) minmax(220px, 1.4fr); gap: 8px 12px; align-items: end; font-size: 12.5px; padding: 4px 0; }
.cp-v2-imp-campos label { display: flex; flex-direction: column; gap: 4px; color: var(--cp-fraco); min-width: 0; }
.cp-v2-imp-campos label .cp-sub-inline { display: none; }
.cp-v2-imp-campos label .cp-v2-imp-calc { font-style: normal; font-size: 11px; color: var(--cp-texto); white-space: nowrap; }
.cp-v2-imp-campos input[type=text], .cp-v2-imp-campos select { height: 34px; width: 100%; box-sizing: border-box; border: 1px solid var(--cp-linha); border-radius: 8px; padding: 0 10px; background: var(--cp-card); color: var(--cp-texto); font-size: 13px; text-align: right; }
.cp-v2-imp-campos select, .cp-v2-imp-campos .cp-v2-imp-obs input { text-align: left; }
.cp-v2-imp-campos select { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 11px center; }
@media (max-width: 1100px) { .cp-v2-imp-campos { grid-template-columns: repeat(5, 1fr); } .cp-v2-imp-campos .cp-v2-imp-cat, .cp-v2-imp-campos .cp-v2-imp-obs { grid-column: span 5; } }
.cp-v2-tot { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; padding: 10px 14px; border-radius: 8px; background: #fdf6dc; font-size: 12.5px; color: #6b5a1e; }
[data-theme="dark"] .cp-v2-tot { background: rgba(250, 204, 21, .10); color: #e5d9a8; }
.cp-v2-tot b { display: block; font-size: 14px; color: var(--cp-texto); }
.cp-v2-tot .cp-v2-tot-g b { font-size: 16px; }
.cp-v2-hist { margin-top: 10px; }
.cp-rec-datas { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 12px; color: var(--cp-fraco); }
.cp-rec-datas input[type=date] { height: 28px; border: 1px solid var(--cp-linha); border-radius: 8px; padding: 0 8px; background: var(--cp-card); color: var(--cp-texto); font-size: 12px; }
.cp-rec-fbar { margin-top: 6px; }

.cp-v2-omie { position: relative; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-width: 420px; }
.cp-v2-omie input { height: 32px; border: 1px solid #fca5a5; border-radius: 8px; padding: 0 10px; font-size: 12.5px; background: var(--cp-card); color: var(--cp-texto); }
.cp-v2-omie .cp-forn-sug { top: 100%; }

.cp-v2-pag { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cp-v2-pag .cp-v2-parc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; }
.cp-v2-pag .cp-v2-rot { color: var(--cp-fraco); font-size: 12.5px; min-width: 60px; }
.cp-v2-pag .cp-pg-vl { display: inline-flex; gap: 6px; align-items: center; }
.cp-v2-pag .cp-pg-vl b { color: var(--cp-fraco); font-weight: 600; }
.cp-v2-pag .cp-pg-vl input { height: 32px; border: 1px solid var(--cp-linha); border-radius: 8px; padding: 0 8px; background: var(--cp-card); color: var(--cp-texto); font-size: 13px; }
.cp-v2-pag .cp-pg-vv { width: 130px; }
.cp-v2-pag .cp-v2-obs textarea { border: 1px solid var(--cp-linha); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; width: 100%; box-sizing: border-box; }
.cp-v2 .cp-fo { max-width: none; }
.cp-v2-envio { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cp-linha); font-size: 14px; }
.cp-v2-envio .cp-rec-btn.ok { font-size: 14px; padding: 8px 18px; }
.cp-v2-enviada { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 12px; }

/* campos da v2: mesma altura, cantos arredondados, select com seta própria; a lista de fornecedores cai logo abaixo do campo */
.cp-v2-cab label { position: relative; }
.cp-v2-cab select, .cp-v2-cab input[type=text], .cp-v2-cab input[type=date] { height: 36px; border: 1px solid var(--cp-linha); border-radius: 8px; padding: 0 10px; background: var(--cp-card); color: var(--cp-texto); font-size: 13.5px; box-sizing: border-box; }
.cp-v2-cab select { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 11px center; }
.cp-v2-cab select:focus, .cp-v2-cab input:focus { outline: 2px solid var(--cp-focus, #f59e0b); outline-offset: 1px; border-color: transparent; }
.cp-v2-cab .cp-forn-sug { top: 100%; margin-top: 2px; max-height: 280px; overflow: auto; }
.cp-v2-cab .cp-v2-forn-busca { position: relative; }
.cp-ped-novo-form .cp-v2-cab { grid-template-columns: 180px minmax(320px, 2fr) minmax(180px, 1fr); align-items: start; }
.cp-ped-novo-form .cp-cot-botoes { margin-top: 12px; }
.cp-fr { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--cp-linha); border-radius: 8px; overflow: hidden; }
.cp-fr-l { display: grid; grid-template-columns: 160px 1fr; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--cp-linha); font-size: 13px; }
.cp-fr-l:last-child { border-bottom: 0; }
.cp-fr-r { color: var(--cp-fraco); }
.cp-fr-v { word-break: break-word; }
.cp-fr-l.cp-fo-mudou { background: rgba(217,119,6,.08); }
.cp-fr-tudo { margin-top: 8px; }
.cp-v2 .cp-fo-cols { grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.3fr); }
.cp-v2 .cp-fo-form select, .cp-v2 .cp-fo-form input[type=date], .cp-v2 .cp-fo-form input[type=number], .cp-v2 .cp-pg-vl input { height: 34px; border: 1px solid var(--cp-linha); border-radius: 8px; padding: 0 10px; background: var(--cp-card); color: var(--cp-texto); font-size: 13px; box-sizing: border-box; }
.cp-v2 .cp-fo-form select { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 11px center; max-width: 100%; }
.cp-v2 .cp-fo-form label > span { color: var(--cp-fraco); font-size: 12.5px; }
.cp-v2 .cp-pg-v2 .cp-pg-vl { display: flex; gap: 6px; align-items: center; margin: 3px 0; }
.cp-v2 .cp-pg-v2 .cp-pg-vl b { width: 24px; color: var(--cp-fraco); font-weight: 600; }
.cp-v2 .cp-pg-v2 .cp-pg-vv { width: 150px; }
.cp-v2 .cp-pg-obs { margin-top: 10px; }
.cp-v2 .cp-pg-obs textarea { border: 1px solid var(--cp-linha); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; }

input.cp-pg-vt[type] { width: 74px; }

.cp-kb-col { background: var(--gray-50, #F9FAFB); border: 1px solid var(--cp-linha); border-radius: 10px; padding: 8px; min-height: 120px; }
[data-theme="dark"] .cp-kb-col { background: rgba(255,255,255,.03); }
.cp-kb-head { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; color: var(--cp-fraco); padding: 2px 4px 8px; }
.cp-kb-head b { color: var(--cp-texto); margin-left: 4px; }
.cp-kb-card { background: var(--cp-card); border: 1px solid var(--cp-linha); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; font-size: 12.5px; }
.cp-kb-card:hover { border-color: var(--cp-ambar); }
.cp-kb-card.on { border-color: var(--cp-ambar); box-shadow: 0 0 0 2px rgba(217,119,6,.15); }
.cp-kb-top { display: flex; justify-content: space-between; align-items: baseline; }
.cp-kb-sub { font-size: 11.5px; color: var(--cp-fraco); margin-top: 2px; }
.cp-kb-vazio { color: var(--cp-fraco); text-align: center; padding: 20px 0; }
.cp-ped-campos { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 10px 0; }
.cp-ped-campos label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--cp-fraco); }
.cp-ped-campos input { padding: 5px 8px; border: 1px solid var(--cp-linha); border-radius: 6px; font-size: 13px; min-width: 160px; }
.cp-tab tbody tr.cp-ped-cot { cursor: default; }
.cp-tab tbody tr.cp-ped-cot:hover { background: none; }
.cp-tab tbody tr.cp-ped-cot > td { padding: 4px 10px 8px 40px; background: var(--gray-50, #F9FAFB); font-size: 12px; }
[data-theme="dark"] .cp-tab tbody tr.cp-ped-cot > td { background: rgba(255,255,255,.03); }
.cp-ped-cot-item { display: inline-block; margin: 2px 10px 2px 0; padding: 2px 8px; border: 1px solid var(--cp-linha); border-radius: 14px; }
.cp-ped-cot-item.on { border-color: var(--cp-r-ok); color: var(--cp-r-ok); font-weight: 700; }
.cp-ped-cot-add { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; }
.cp-ped-cot-add input { padding: 4px 6px; border: 1px solid var(--cp-linha); border-radius: 6px; font-size: 12px; width: 110px; }
.cp-ped-cot-add input[type=text] { width: 180px; }

.cp-cot-forn { text-transform: uppercase; }
.cp-kb-link { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; margin-left: 6px; color: var(--cp-azul); text-decoration: none; }

/* ── Origem venda: cards do Fluxo Principal (24/09/2026) ───────────────────── */
.cp-vd-grupo { border: 1px solid var(--cp-linha); border-radius: 10px; padding: 8px 10px; margin-top: 10px; }
.cp-vd-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.cp-vd-grupo .cp-tab tbody tr { cursor: default; }
.cp-vd-cards { margin: 6px 0 10px; font-size: 12.5px; }
.cp-vd-ensaio { margin-top: 8px; font-size: 12px; }
.cp-vd-ensaio summary { cursor: pointer; font-weight: 600; }

/* ── Famílias (24/09/2026) ─────────────────────────────────────────────────── */
.cp-prod-sel { font-size: 12.5px; display: flex; flex-direction: column; gap: 7px; padding: 10px 16px 12px;
  border: 1.5px solid var(--cp-azul); border-radius: 12px; background: var(--cp-card); color: var(--cp-texto);
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; width: max-content; max-width: calc(100vw - 32px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18); }
.cp-prod-sel:not(:empty) ~ .cp-sentinela { padding-bottom: 170px; }   /* a barra não cobre as últimas linhas */
.cp-prod-sel:empty { display: none; }
/* Alteração em massa com desfazer (01/10/2026) */
.cp-lote-n b { font-size: 14px; }
/* Barra limpa (22/10/2026): cabeçalho + três linhas em grade (rótulo · controles · Aplicar na mesma coluna) */
.cp-lote-topo { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--cp-linha); }
.cp-lote-topo .cp-lote-ult { margin-left: auto; padding-left: 16px; }
.cp-lote-linha { display: grid; grid-template-columns: 92px minmax(420px, 1fr) 160px; gap: 12px; align-items: center; }
.cp-lote-rot { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cp-fraco); text-align: right; }
.cp-lote-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.cp-lote-aplicar { width: 100%; white-space: nowrap; }
.cp-lote-forn { display: inline-block; width: 280px; }
.cp-lote-forn input[type=text] { height: 30px; border: 1px solid var(--cp-linha); border-radius: 6px; padding: 0 26px 0 8px; font-size: 12.5px; background: var(--cp-card); color: var(--cp-texto); }
.cp-lote-forn .cp-sug { left: 0; right: 0; }
/* chip que alterna: neutro → + (verde) → − (vermelho) → neutro */
.cp-lote-cls { height: 26px; padding: 0 10px; border: 1px solid var(--cp-linha); border-radius: 13px; background: var(--cp-card); color: var(--cp-texto); font-size: 12px; cursor: pointer; white-space: nowrap; }
.cp-lote-cls:hover { border-color: var(--cp-azul); }
.cp-lote-cls.mais { background: var(--cp-r-ok); border-color: var(--cp-r-ok); color: #fff; font-weight: 600; }
.cp-lote-cls.menos { background: var(--cp-r-critico); border-color: var(--cp-r-critico); color: #fff; font-weight: 600; }
.cp-lote-ult { display: inline-flex; gap: 8px; align-items: center; color: var(--cp-r-ok); }
.cp-rec-btn:disabled { opacity: .45; cursor: default; }
.cp-lotes td { vertical-align: top; }
.cp-prod-sel select { height: 30px; padding: 0 6px; border: 1px solid var(--cp-linha); border-radius: 6px; font-size: 12.5px; width: 280px; background: var(--cp-card); color: var(--cp-texto); }
.cp-fam-nome { width: 100%; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; font-size: 13px; background: transparent; }
.cp-fam-nome:hover, .cp-fam-nome:focus { border-color: var(--cp-linha); background: var(--cp-card); }
.cp-tab tbody tr.cp-off td { opacity: .5; }

/* ── Filtros por lista (Produtos, 24/09/2026) ──────────────────────────────── */
.cp-fbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.cp-pp-fbar { margin-bottom: 10px; }
.cp-pp-link { cursor: pointer; }
.cp-pp-link:hover { color: var(--cp-azul); text-decoration: underline; }
.cp-pp-pedir { white-space: nowrap; }
.cp-pp-base { font-family: inherit; font-size: 11px; font-weight: 600; padding: 2px 4px; border: 1px solid var(--cp-linha); border-radius: 6px; background: var(--cp-card); color: var(--cp-texto); margin-left: 4px; }
.cp-pp-origem { font-size: 11px; color: var(--cp-fraco); margin-left: 2px; }
.cp-pp-origem.manual { color: var(--cp-ambar); font-weight: 600; }
.cp-pp-voltar { color: var(--cp-ambar); font-size: 14px; padding: 0 2px; }
.cp-dd { position: relative; }
.cp-dd-btn { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 8px;
  border: 1.5px solid var(--cp-linha); background: var(--cp-card); color: var(--cp-texto); cursor: pointer; max-width: 260px; }
.cp-dd-btn:hover, .cp-dd.open .cp-dd-btn { border-color: var(--cp-ambar); }
.cp-dd.on .cp-dd-btn { border-color: var(--cp-ambar); background: rgba(217, 119, 6, .08); }
.cp-dd-rot { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--cp-fraco); font-weight: 700; }
.cp-dd-val { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.cp-dd.on .cp-dd-val { color: var(--cp-ambar); }
.cp-dd-seta { color: var(--cp-fraco); font-size: 11px; }
.cp-dd-menu { position: absolute; z-index: 30; top: 36px; left: 0; min-width: 260px; max-width: 340px; background: var(--cp-card); border: 1px solid var(--cp-linha);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; }
.cp-dd-busca { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--cp-linha); border-radius: 6px; font-size: 12.5px; margin-bottom: 4px; }
.cp-dd-lista { max-height: 320px; overflow-y: auto; }
.cp-dd-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.cp-dd-item:hover { background: rgba(217, 119, 6, .07); }
.cp-dd-item span { flex: 1; }
.cp-dd-item b { font-variant-numeric: tabular-nums; color: var(--cp-fraco); font-weight: 600; }
.cp-dd-item.vazio { opacity: .45; }
.cp-dd-rodape { border-top: 1px dashed var(--cp-linha); padding-top: 4px; margin-top: 4px; display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.cp-dd-acao { color: var(--cp-texto); font-weight: 600; font-size: 12px; }
.cp-dd-acao:hover { color: var(--cp-ambar); }
.cp-fbar-chk { margin-left: 4px; }

/* ── Depósito de revenda (MVP demo, 25/09/2026) ────────────────────────────── */
.cp-est-demo { border: 1.5px dashed var(--cp-ambar); background: rgba(217,119,6,.07); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 12px; }
.cp-est-demo code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.cp-est-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.cp-est-form input, .cp-est-form select { padding: 6px 8px; border: 1px solid var(--cp-linha); border-radius: 6px; font-size: 13px; }
.cp-est-sh td { color: #6b7280; }
.cp-est-sh td.mono { color: #4b5563; }

/* ── Classes de pedido e cotação vertical (30/09/2026) ─────────────────────────────── */
.cl-insumo { --cl: #0d9488; } .cl-revenda { --cl: #2563eb; } .cl-encomenda { --cl: #7c3aed; } .cl-servico { --cl: #c2410c; } .cl-misto { --cl: #6b7280; }
.cp-classe { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; color: var(--cl); background: color-mix(in srgb, var(--cl) 13%, transparent); white-space: nowrap; vertical-align: middle; }
.cp-kb-card[class*="cl-"] { border-left: 4px solid var(--cl); }
.cp-kb-top { display: flex; gap: 6px; align-items: center; }
.cp-kb-top .cp-sub-inline { margin-left: auto; }
.cp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cl, #9ca3af); margin-right: 5px; vertical-align: middle; }
.cp-chip[class*="cl-"].on { border-color: var(--cl); color: var(--cl); background: color-mix(in srgb, var(--cl) 10%, transparent); }
.cp-kb-classes { margin-bottom: 10px; }
.cp-pp-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-pp-tab { border: 1px solid var(--cp-linha); border-top: 4px solid var(--cl); background: var(--cp-card); border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; color: inherit; }
.cp-pp-tab.on { background: color-mix(in srgb, var(--cl) 10%, var(--cp-card)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cl) 35%, transparent); }
.cp-novo-tipos .cp-pp-tab.principal::after { content: 'principal'; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cl); }
.cp-ped-inc-origens { display: flex; gap: 6px; margin-bottom: 6px; }
.cp-pp-tabela[class*="cl-"] thead th:first-child { box-shadow: inset 4px 0 0 var(--cl); }
.cp-serv-caixa { border-left: 4px solid var(--cl); }
.cp-ped-item { border: 1px solid var(--cp-linha); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.cp-ped-item-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cp-ped-item-nome { flex: 1; min-width: 200px; }
.cp-ped-item-qtd input { width: 90px; padding: 4px 6px; border: 1px solid var(--cp-linha); border-radius: 6px; }
.cp-ped-item-escolha { margin: 6px 0; font-size: 12.5px; }
.cp-cot-lista { display: grid; gap: 4px; margin: 6px 0; }
.cp-cot-linha { display: grid; grid-template-columns: minmax(180px, 2fr) 100px minmax(120px, 1fr) auto minmax(80px, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--gray-50, #F9FAFB); font-size: 12.5px; }
[data-theme="dark"] .cp-cot-linha { background: rgba(255,255,255,.04); }
.cp-cot-linha.on { box-shadow: inset 3px 0 0 #16a34a; }
.cp-cc { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.cp-cc.cc-100 { color: #15803d; background: rgba(21,128,61,.12); }
.cp-cc.cc-0 { color: #b45309; background: rgba(180,83,9,.12); }
.cp-cot-form { display: grid; gap: 10px; max-width: 560px; margin: 8px 0; padding: 12px; border: 1px dashed var(--cp-linha); border-radius: 10px; }
.cp-serv-caixa .cp-cot-form { border: 0; margin: 0; }
.cp-cot-form label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; position: relative; }
.cp-cot-form input, .cp-cot-form select { padding: 8px 10px; border: 1px solid var(--cp-linha); border-radius: 8px; font-size: 13.5px; font-weight: 400; background: var(--cp-card); color: inherit; }
.cp-cot-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp-cot-cc { display: flex; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 600; flex-wrap: wrap; }
.cp-cot-botoes { display: flex; gap: 8px; }
.cp-forn-sug { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--cp-card); border: 1px solid var(--cp-linha); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); max-height: 260px; overflow: auto; }
.cp-forn-sug:empty { display: none; }
.cp-forn-sug-item { display: grid; padding: 7px 10px; cursor: pointer; font-weight: 400; }
.cp-forn-sug-item:hover { background: var(--gray-50, #F3F4F6); }
[data-theme="dark"] .cp-forn-sug-item:hover { background: rgba(255,255,255,.06); }
.cp-forn-sug-item span { font-size: 11.5px; color: var(--cp-fraco, #6b7280); }
.cp-forn-sug-vazio { padding: 8px 10px; font-size: 12px; font-weight: 400; color: var(--cp-fraco, #6b7280); }
.cp-oc-bloco { border: 1px solid var(--cp-linha); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.cp-oc-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
@media (max-width: 700px) { .cp-cot-linha { grid-template-columns: 1fr 1fr; } .cp-cot-2col { grid-template-columns: 1fr; } }
.cl-outros { --cl: #6b7280; }
.cp-rec-tab td.mono .cp-classe, .cp-rec-tab td.mono .cp-cc { margin-top: 3px; }

/* ── Logística › Compras em trânsito (30/09/2026, logistics/compras-transito.js) ── */
.lct-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.lct-chips, .lct-barra-dir { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lct-chip { border: 1px solid var(--border); background: var(--bg-card); color: var(--text); border-radius: 999px; padding: 4px 11px; font-size: 13px; cursor: pointer; }
.lct-chip span { font-weight: 700; margin-left: 3px; color: var(--cl, var(--text-muted)); }
.lct-chip.ativo { border-color: var(--cl, var(--blue)); background: color-mix(in srgb, var(--cl, var(--blue)) 12%, transparent); font-weight: 600; }
.lct-secao { margin-top: 16px; }
.lct-secao-tit { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 8px; }
.lct-secao-tit span { font-weight: 400; margin-left: 4px; }
.lct-secao-atrasado .lct-secao-tit { color: var(--danger); }
.lct-card { border: 1px solid var(--border); border-left: 4px solid var(--cl, #9ca3af); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: var(--bg-card); }
.lct-topo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lct-num { font-size: 15px; }
.lct-topo-dir { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lct-forn { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.lct-forn-cab { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.lct-forn-prazo { margin-left: auto; }
.lct-itens { list-style: none; margin: 6px 0 0; padding: 0; }
.lct-itens li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 3px 0; font-size: 13.5px; }
.lct-cod { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-muted); min-width: 56px; }
.lct-nome { flex: 1 1 220px; }
.lct-qtd { white-space: nowrap; }
.lct-dest { font-size: 12px; color: var(--text-muted); }
.lct-obs { margin-top: 8px; color: var(--text-muted); }
.lct-prazo { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--gray-100); color: var(--gray-700); }
.lct-prazo.lct-atrasado { background: rgba(185,28,28,.12); color: var(--danger); }
.lct-prazo.lct-hoje { background: rgba(180,83,9,.14); color: var(--warn); }
.lct-prazo.lct-semana { background: rgba(19,65,168,.10); color: var(--info); }
.lct-prazo.lct-recebido { background: rgba(21,128,61,.12); color: #15803d; }
.lct-prazo.lct-sem_prazo { font-weight: 600; color: var(--text-muted); }
.lct-rec { font-size: 12px; color: #15803d; font-weight: 600; }
.lct-rec.lct-rec-alerta { color: var(--danger); }

/* Botões da cotação (30/09/2026, nitpick do Eduardo: "escolher" pequeno e colado no remover) */
/* a linha vira flex com quebra: no grid antigo, os botões maiores estouravam a caixa do item abaixo de ~900 px */
.cp-cot-linha { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cp-cot-linha > span:first-child { flex: 1 1 160px; min-width: 0; }
.cp-cot-acoes { display: flex; align-items: center; gap: 14px; justify-content: flex-end; margin-left: auto; }
.cp-cot-escolher { border: 1.5px solid #16a34a; color: #15803d; background: rgba(22,163,74,.08); border-radius: 7px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cp-cot-escolher:hover { background: #16a34a; color: #fff; }
.cp-cot-escolhida { display: inline-block; border: 1.5px solid #16a34a; background: #16a34a; color: #fff; border-radius: 7px; padding: 4px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cp-cot-rm { border: 1px solid transparent; background: none; color: var(--gray-500, #6b7280); border-radius: 6px; padding: 3px 6px; font-size: 13px; cursor: pointer; opacity: .75; }
.cp-cot-rm:hover { border-color: #fca5a5; color: #b91c1c; background: rgba(185,28,28,.06); opacity: 1; }
.cp-baixa { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--gray-700, #374151); background: var(--gray-100, #f3f4f6); white-space: nowrap; }
/* Logística › Compras em trânsito › Entrada por OC */
.lct-vistas { display: flex; gap: 6px; margin: 2px 0 12px; }
.lct-vista { border: 1px solid var(--border); background: var(--bg-card); color: var(--text); border-radius: 8px; padding: 6px 14px; font-size: 13.5px; cursor: pointer; }
.lct-vista.ativo { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); font-weight: 700; }
.lct-btn-entrada { border: 1.5px solid #2563eb; color: #1d4ed8; background: rgba(37,99,235,.08); border-radius: 7px; padding: 3px 10px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; margin-left: 6px; }
.lct-btn-entrada:hover { background: #2563eb; color: #fff; }
.lct-baixa { font-size: 11.5px; color: var(--text-muted); margin-left: 6px; white-space: nowrap; }
.lct-ent-busca { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.lct-ent-busca input, .lct-ent-acoes input { border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 14px; background: var(--bg-card); color: var(--text); min-width: 0; }
.lct-ent-busca input { width: 220px; max-width: 100%; }
.lct-ent-det { border: 1px solid var(--border); border-left: 4px solid var(--cl, #9ca3af); border-radius: 8px; padding: 10px 12px; margin: 6px 0 4px; background: var(--bg-card); }
.lct-ent-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.lct-aviso { margin: 8px 0; padding: 7px 10px; border-radius: 7px; background: rgba(180,83,9,.10); color: var(--warn); font-size: 13px; }
.lct-tab-wrap { overflow-x: auto; margin-top: 8px; }
.lct-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.lct-tab th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.lct-tab td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.lct-tab .lct-r { text-align: right; white-space: nowrap; }
.lct-ent-row { cursor: pointer; }
.lct-ent-row:hover, .lct-ent-row.ativo { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.lct-qtd-in { width: 90px; border: 1.5px solid #2563eb; border-radius: 7px; padding: 5px 8px; font-size: 14px; background: var(--bg-card); color: var(--text); }
.lct-dep { font-size: 11.5px; color: var(--text-muted); }
.lct-dep.ok { font-family: ui-monospace, Menlo, Consolas, monospace; color: #15803d; font-weight: 600; }
.lct-sh-linha { font-size: 12.5px; color: var(--text-muted); margin: -8px 0 12px; }
.lct-almox { font-size: 11.5px; font-weight: 600; color: #0d9488; white-space: nowrap; }

/* Kanban de pedidos: o card anda sozinho (30/09/2026) */
.cp-kb-falta { color: #b45309; font-weight: 600; }
.cp-kb-card.cp-kb-andou { animation: cpKbAndou 2.4s ease-out; }
@keyframes cpKbAndou {
  0% { transform: translateX(-14px); opacity: .35; box-shadow: 0 0 0 3px rgba(37,99,235,.55); }
  25% { transform: none; opacity: 1; }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}
/* Logística › ✍️ Entrada manual (exceção, 30/09/2026) — no formato da entrada do almoxarifado */
.lct-man-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--bg-card); max-width: 860px; }
.lct-man-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.lct-man-titulo { font-size: 16px; font-weight: 700; }
.lct-seg { display: inline-flex; background: var(--gray-100); border-radius: 10px; padding: 3px; }
.lct-seg button { border: 0; background: transparent; color: var(--gray-500); padding: 6px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.lct-seg button.ativo { background: var(--bg-card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.lct-man-aviso { margin-bottom: 10px; }
.lct-man-busca { position: relative; margin-bottom: 10px; }
.lct-man-busca input, .lct-man-linha input { width: 100%; padding: 10px; border: 2px solid var(--gray-200); border-radius: var(--radius, 8px); font-size: 15px; background: var(--bg-card); color: var(--text); min-width: 0; }
.lct-man-linha { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; align-items: flex-end; }
.lct-man-linha label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; font-size: 13px; font-weight: 600; color: var(--text); }
.lct-man-linha label.lct-man-larga { flex: 2; min-width: 220px; }
.lct-man-foto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.lct-man-foto label { cursor: pointer; }
.lct-man-foto-prev { max-height: 70px; border-radius: 6px; border: 1px solid var(--gray-300); }
.lct-man-registrar { width: 100%; padding: 12px; font-size: 16px; font-weight: 700; }
.lct-man-res { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 240px; overflow: auto; }
.lct-man-res:empty { display: none; }
.lct-man-res button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; font-size: 13px; color: var(--text); cursor: pointer; }
.lct-man-res button:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); }
.lct-man-res div { padding: 7px 10px; }
.lct-man-desfazer { border: 1px solid transparent; background: none; color: var(--text-muted); font-size: 12px; cursor: pointer; border-radius: 6px; padding: 2px 6px; }
.lct-man-desfazer:hover { border-color: #fca5a5; color: #b91c1c; }
.lct-man-desfeita td { opacity: .5; text-decoration: line-through; }
.lct-man-desfeita td:last-child, .lct-man-desfeita td:nth-last-child(2) { text-decoration: none; }

/* Imobilizado em estoque (01/10/2026) — compras/imobilizado.js */
.cp-imob-f { display: inline-flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--cp-fraco); }
.cp-imob-ck { flex-direction: row; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cp-texto); align-self: flex-end; padding-bottom: 7px; }
.cp-imob-filtros .cp-imob-q { align-self: flex-end; }
.cp-imob-filtros .cp-xls { align-self: flex-end; }
.cp-imob-total { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; margin: 12px 2px; }
.cp-imob-total span { display: block; font-size: 11px; font-weight: 700; color: var(--cp-fraco); text-transform: uppercase; letter-spacing: .03em; }
.cp-imob-total b { font-size: 22px; font-variant-numeric: tabular-nums; }
.cp-imob-carimbo { margin-left: auto; font-size: 12px; color: var(--cp-fraco); }
.cp-scroll { overflow-x: auto; }
.cp-tab tr.cp-imob-grupo td { background: var(--cp-fill); font-weight: 800; cursor: default; }
.cp-tab tr.cp-imob-neg td { color: var(--cp-r-critico); }
.cp-imob-sem { font-size: 11px; color: var(--cp-fraco); font-style: italic; }
@media (max-width: 640px) { .cp-imob-carimbo { margin-left: 0; } .cp-imob-total b { font-size: 18px; } }

/* Listagem de vendas (01/10/2026) — compras/vendas-lista.js. Reaproveita a barra do Imobilizado. */
.cp-imob-f input[type="date"] { font-family: inherit; font-size: 12.5px; padding: 6px 8px; border: 1.5px solid var(--cp-linha);
  border-radius: 7px; background: var(--cp-card); color: var(--cp-texto); }
.cp-vl-atalhos { display: inline-flex; gap: 4px; align-self: flex-end; flex-wrap: wrap; }
.cp-vl-atalhos button { font-family: inherit; font-size: 12px; font-weight: 700; padding: 6px 9px; border-radius: 7px; cursor: pointer;
  border: 1.5px solid var(--cp-linha); background: var(--cp-card); color: var(--cp-texto); }
.cp-vl-atalhos button:hover { background: var(--cp-hover); }
.cp-vl-vends { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 2px 12px; }
.cp-vl-vend { background: var(--cp-card); border: 1px solid var(--cp-linha); border-radius: 8px; padding: 6px 10px; font-size: 12px; }
.cp-vl-vend span { display: block; color: var(--cp-fraco); font-weight: 700; }
.cp-vl-vend b { font-variant-numeric: tabular-nums; }
.cp-vl-hora, .cp-vl-doc { font-size: 11px; color: var(--cp-fraco); }
.cp-tab tr.cp-vl-canc td { color: var(--cp-fraco); }
.cp-tab tr.cp-vl-canc td b { text-decoration: line-through; }
.cp-vl-exp { font-size: .78rem; font-weight: 600; white-space: nowrap; color: var(--cp-fraco); }
.cp-vl-exp.ok { color: #15803D; }
.cp-tab tr.cp-vl-linha { cursor: pointer; }
.cp-tab tr.cp-vl-linha:hover td, .cp-tab tr.cp-vl-linha.aberta td { background: var(--cp-fill, rgba(120,120,128,.08)); }
.cp-tab tr.cp-vl-det > td { padding: 6px 12px 12px 28px; background: var(--cp-fill, rgba(120,120,128,.06)); }
.cp-vl-itens { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cp-vl-itens th { text-align: left; font-weight: 600; color: var(--cp-fraco); padding: 4px 8px; border-bottom: 1px solid rgba(120,120,128,.25); }
.cp-vl-itens td { padding: 4px 8px; border-bottom: 1px solid rgba(120,120,128,.12); }
.cp-vl-itens .r { text-align: right; }
.cp-vl-tag { font-size: 11px; font-weight: 700; color: var(--cp-r-critico); }

/* ── Pagamento e entrega por OC; OC desatualizada na OMIE (07/10/2026) ───── */
.cp-pg { border: 1px solid var(--cp-linha); border-radius: 10px; padding: 10px 12px; margin: 10px 0; background: var(--cp-card); }
.cp-pg-top { font-size: 13px; margin-bottom: 8px; }
.cp-pg-campos { display: flex; flex-wrap: wrap; gap: 10px; }
.cp-pg-campos label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--cp-fraco); }
.cp-pg-campos select, .cp-pg-campos input { padding: 5px 6px; border: 1px solid var(--cp-linha); border-radius: 6px; font-size: 13px; background: var(--cp-card); color: var(--cp-texto); max-width: 320px; }
.cp-pg-venc { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cp-pg-vl { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; margin-right: 6px; }
.cp-pg-vl input { padding: 4px 6px; border: 1px solid var(--cp-linha); border-radius: 6px; font-size: 12.5px; width: 150px; background: var(--cp-card); color: var(--cp-texto); }
.cp-pg-pend { border: 1.5px solid var(--cp-ambar); border-radius: 10px; padding: 8px 12px; margin: 10px 0; font-size: 13px; }
.cp-pg-pend ul { margin: 4px 0 6px 18px; padding: 0; }
.cp-ped-preco { width: 90px; padding: 2px 6px; border: 1px solid var(--cp-linha); border-radius: 6px; font-size: 12.5px; text-align: right; background: var(--cp-card); color: var(--cp-texto); }
/* Larguras contidas no card do pedido (07/10/2026): bloco de pagamento e painel da OC não ocupam a tela inteira. */
.cp-pg, .cp-pg-pend { max-width: 880px; }
[id^="cp-ped-oc-"] > .cp-sec { max-width: 920px; }
[id^="cp-ped-oc-"] .cp-oc-bloco .cp-tab { width: auto; min-width: 560px; max-width: 100%; }
.cp-ped-num { width: 72px; padding: 2px 6px; border: 1px solid var(--cp-linha); border-radius: 6px; font-size: 12.5px; text-align: right; background: var(--cp-card); color: var(--cp-texto); }
.cp-ped-preco { width: 80px; }
.cp-ped-ocnum { align-self: flex-end; padding: 6px 0; font-size: 13px; }
.cp-ped-ocnum b { font-size: 14px; margin: 0 4px; }
/* OBS da OMIE por OC e item novo no pedido (07/10/2026) */
.cp-pg-obs { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 13px; }
.cp-pg-obs textarea { width: 100%; min-height: 72px; box-sizing: border-box; font: inherit; padding: 6px 8px; resize: vertical; border: 1px solid var(--cp-linha); border-radius: 6px; background: var(--cp-card); color: var(--cp-texto); }
.cp-ped-inc { margin: 8px 0; }
.cp-ped-inc-form { max-width: 720px; border: 1px solid var(--cp-linha); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--cp-card); }
.cp-ped-inc-top { display: flex; justify-content: space-between; align-items: center; }
.cp-ped-inc-res { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; }
.cp-ped-inc-op { text-align: left; background: none; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; cursor: pointer; font: inherit; color: inherit; }
.cp-ped-inc-op:hover:not([disabled]) { border-color: var(--cp-linha); }
.cp-ped-inc-op[disabled] { opacity: .5; cursor: default; }
.cp-ped-inc-esc { display: flex; flex-direction: column; gap: 6px; }
.cp-ped-inc-campos { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.cp-ped-inc-campos label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cp-ped-inc-campos label[hidden] { display: none; }   /* o fator só aparece com unidade de compra diferente da do estoque (20/10/2026) */
.cp-ped-inc-campos label[id^=cp-ped-inc-fator-l-] { flex-direction: row; align-items: center; gap: 4px; white-space: nowrap; }
.cp-ped-inc-campos label[id^=cp-ped-inc-fator-l-] input { width: 70px; }
.cp-oc-motivo { width: 100%; max-width: 560px; box-sizing: border-box; margin: 6px 0 2px; padding: 5px 8px; font: inherit; font-size: 13px; border: 1px solid var(--cp-linha); border-radius: 6px; background: var(--cp-card); color: var(--cp-texto); }
.cp-oc-hist { margin-top: 8px; font-size: 13px; }
/* Ficha da OC: 1. você escolhe → 2. como fica na OMIE → 3. enviar/levar (07/10/2026) */
.cp-fo-legenda { font-size: 12px; color: var(--cp-fraco); margin: 10px 0 4px; }
.cp-fo { max-width: 1060px; border: 1px solid var(--cp-linha); border-radius: 10px; padding: 12px 14px; margin: 8px 0 12px; background: var(--cp-card); }
.cp-fo-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; }
.cp-fo-sujo { font-size: 12px; color: var(--cp-ambar); font-weight: 600; }
.cp-fo-cols { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .cp-fo-cols { grid-template-columns: 1fr; } }
.cp-fo-tit { font-weight: 700; font-size: 13px; margin-bottom: 8px; color: var(--cp-texto); }
.cp-fo-form { display: flex; flex-direction: column; gap: 8px; }
.cp-fo-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--cp-texto); }
.cp-fo-form select, .cp-fo-form input[type=date], .cp-fo-form input[type=number] { max-width: 320px; }
.cp-fo-form .cp-pg-venc { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.cp-fo-dest { font-style: normal; font-size: 10.5px; padding: 0 6px; border-radius: 8px; margin-left: 4px; white-space: nowrap; vertical-align: 1px; }
.cp-fo-dest.omie { color: var(--cp-azul); border: 1px solid var(--cp-azul); }
.cp-fo-dest.app { color: var(--cp-fraco); border: 1px dashed var(--cp-linha); }
.cp-fo-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cp-fo-tab td { border-top: 1px solid var(--cp-linha); padding: 5px 6px; vertical-align: top; }
.cp-fo-tab td.cp-fo-rot { font-weight: 600; white-space: nowrap; width: 1%; cursor: help; }
.cp-fo-tab td.cp-fo-sit { text-align: right; white-space: nowrap; width: 1%; }
.cp-fo-tab tr.cp-fo-mudou td { background: rgba(217, 119, 6, 0.08); }
.cp-fo-val { white-space: normal; word-break: break-word; }
.cp-fo-antes { font-size: 11.5px; color: var(--cp-fraco); text-decoration: line-through; margin-top: 2px; }
.cp-fo-nota { font-size: 11px; color: var(--cp-fraco); margin-top: 2px; }
.cp-fo-det { margin: 3px 0 0 16px; padding: 0; font-size: 11.5px; }
.cp-fo-acao { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--cp-linha); display: flex; flex-direction: column; gap: 6px; }
.cp-fo-acao .cp-rec-btn { align-self: flex-start; }
.cp-fo-form .cp-pg-venc { align-items: flex-start; text-align: left; justify-content: flex-start; }
.cp-fo-form .cp-pg-venc > span[id] { display: flex; flex-direction: column; gap: 4px; }
.cp-fo-form .cp-pg-venc > span:not([id]) { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
/* app.css estiliza input[type=text] com width 100% e padding 12px (especificidade 0,1,1): os campos curtos do pedido
   perdiam para ela e viravam uma faixa da largura da tela (07/10/2026). */
input.cp-ped-preco[type], input.cp-ped-num[type] { width: 84px; min-width: 0; padding: 3px 6px; font-size: 13px; border: 1px solid var(--cp-linha); border-radius: 6px; text-align: right; background: var(--cp-card); color: var(--cp-texto); }
input.cp-ped-num[type] { width: 72px; }
input.cp-oc-motivo[type] { padding: 6px 8px; font-size: 13px; border-width: 1px; }

/* A caminho (09/10/2026): selo no modal do produto */
.cp-cls.cp-caminho { background: rgba(3, 105, 161, .12); color: var(--cp-r-excesso); }

.cp-atrasado { color: var(--cp-r-critico); }

/* Situação (09/10/2026): código do grupo acabando com o total saudável */
.cp-alerta-cod { color: var(--cp-r-atencao); font-weight: 700; font-size: 11px; white-space: nowrap; }
.cp-tab tbody tr.cp-membro-alerta { background: rgba(217, 119, 6, .10); }

/* Faixa pelo prazo e projeção com as chegadas (09/10/2026) */
.cp-faixa { font-size: 10.5px; color: var(--cp-fraco); margin-left: 4px; white-space: nowrap; }
.cp-proj { font-size: 12.5px; margin: 0 0 8px; padding: 8px 10px; border-radius: 6px; background: rgba(3, 105, 161, .07); line-height: 1.5; }
.cp-proj.cp-proj-falta { background: rgba(185, 28, 28, .08); border-left: 3px solid var(--cp-r-critico); }

/* Revisão agendada por item (09/10/2026): selo, aba Revisões, seção da ficha e a janela da compra */
.cp-rev-tag { display: inline-block; font-size: 10.5px; font-weight: 600; white-space: nowrap; margin-left: 6px; padding: 0 7px; line-height: 17px;
  border-radius: 99px; background: var(--cp-fill-2, rgba(0, 0, 0, .06)); color: var(--cp-texto-2, var(--cp-fraco)); vertical-align: 1px; }
.cp-rev-tag.q-hoje { background: rgba(217, 119, 6, .16); color: var(--cp-r-atencao); }
.cp-rev-tag.q-vencida { background: rgba(220, 38, 38, .14); color: var(--cp-r-critico); }
.cp-kpi-click { cursor: pointer; }
.cp-kpi-click:hover { box-shadow: 0 0 0 2px var(--cp-ambar); }
.cp-rev-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 6px; }
.cp-rev-atalhos { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.cp-rev-at { padding: 3px 8px; font-size: 11px; }
#page-compras .cp-rev-form input, #compras-modal .cp-rev-form input, #page-compras .cp-rev-acao input, #compras-modal .cp-rev-acao input, #almox-ficha-modal .cp-rev-form input, #almox-ficha-modal .cp-rev-acao input,
#page-compras .cp-rev-corpo input, #page-compras .cp-rev-todos input {
  font-size: 0.875rem; padding: 7px 10px; border: 0; border-radius: var(--cp-radius-sm, 6px);
  background-color: var(--cp-fill-2); color: var(--cp-texto); font-family: inherit;
}
#page-compras .cp-rev-form .cp-rev-num { width: 150px; flex: none; }   /* vence o input[type=text] { width: 100% } do app.css */
.cp-rev-bloco .cp-rev-tab td:nth-child(3) { min-width: 150px; }
.cp-rev-bloco .cp-rev-tab td:nth-child(8) { min-width: 120px; }
.cp-rev-corpo .cp-rev-tab td:nth-child(2) { min-width: 180px; }
.cp-rev-btns button { white-space: nowrap; }
.cp-rev-btns .cp-rec-btn { padding: 4px 8px; font-size: 12px; }
.cp-rev-form .cp-rev-mot, .cp-rev-acao .cp-rev-mot { flex: 1; min-width: 220px; }
.cp-rev-corpo .cp-rev-mot { width: 100%; min-width: 180px; box-sizing: border-box; }
.cp-rev-bloco.q-vencida h3 { color: var(--cp-r-critico); }
.cp-rev-bloco.q-hoje h3 { color: var(--cp-r-atencao); }
.cp-rev-tabwrap { overflow-x: auto; }
.cp-rev-tab td { vertical-align: top; }
.cp-rev-dia b { white-space: nowrap; }
.cp-rev-btns { display: inline-flex; gap: 4px; flex-wrap: nowrap; }
tr.cp-rev-acao-tr > td { padding: 0 !important; border: 0 !important; }
.cp-rev-acao:empty { display: none; }
.cp-rev-acao { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 8px; padding: 8px 10px; border-radius: 8px;
  background: rgba(217, 119, 6, .07); border-left: 3px solid var(--cp-ambar); }
.cp-rev-acao label { display: inline-flex; gap: 6px; align-items: center; }
.cp-rev-decisao { font-size: 11.5px; color: var(--cp-r-ok); margin-top: 2px; }
.cp-rev-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--cp-linha); }
.cp-rev-linha .cp-rev-txt { flex: 1; min-width: 180px; }
.cp-rev-linha.q-vencida .cp-rev-quando b { color: var(--cp-r-critico); }
.cp-rev-linha.q-hoje .cp-rev-quando b { color: var(--cp-r-atencao); }
.cp-rev-feitas { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--cp-fraco); }
.cp-rev-box { max-width: 1020px !important; width: 96vw; }
.cp-rev-corpo { padding: 10px 20px; max-height: 62vh; overflow: auto; }
.cp-rev-todos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.cp-rev-rodape { display: flex; justify-content: flex-end; gap: 8px; align-items: center; padding: 12px 20px 18px; border-top: 1px solid var(--cp-linha); }
.cp-rev-rodape > span { margin-right: auto; }
@media (max-width: 640px) { .cp-rev-corpo { padding: 10px 12px; } #page-compras .cp-rev-form .cp-rev-num { width: 120px; } }
/* Fluxo do pedido sem trava (09/10/2026): pendências da OC, nº de OC à mão */
.cp-fo-pend { border: 1px solid var(--cp-r-critico); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 12.5px; }
.cp-fo-pend ul { margin: 4px 0 0 16px; padding: 0; }
.cp-ped-ocman { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; align-self: flex-end; }
input.cp-ocman-n[type] { width: 130px; min-width: 0; padding: 3px 6px; font-size: 13px; border: 1px solid var(--cp-linha); border-radius: 6px; background: var(--cp-card); color: var(--cp-texto); }
input.cp-ocman-m[type] { width: 260px; min-width: 0; padding: 3px 6px; font-size: 13px; border: 1px solid var(--cp-linha); border-radius: 6px; background: var(--cp-card); color: var(--cp-texto); }


/* Ficha do item do ALMOXARIFADO no formato da ficha de Produtos (16/10/2026, Guilherme): mesmo modal
   de duas colunas, com o cadastro editável numa grade à direita. */
#almox-ficha-modal .af-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
#almox-ficha-modal .af-grid label, #almox-ficha-modal .af-full { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--cp-fraco); }
#almox-ficha-modal .af-full { grid-column: 1 / -1; }
#almox-ficha-modal .af-grid input, #almox-ficha-modal .af-grid select, #almox-ficha-modal .af-grid textarea {
  font-family: inherit; font-size: 0.875rem; padding: 8px 11px; border: 0; border-radius: var(--cp-radius-sm, 8px);
  background-color: var(--cp-fill-2, #EEF1F4); color: var(--cp-texto); width: 100%; box-sizing: border-box; }
#almox-ficha-modal .af-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
#almox-ficha-modal .cp-mini b small { font-size: 11px; font-weight: 600; color: var(--cp-fraco); }
#almox-ficha-modal .af-abas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
#almox-ficha-modal .af-aba { border: 0; border-radius: 999px; padding: 5px 12px; font-family: inherit; font-size: 12px; font-weight: 600;
  background: var(--cp-fill-2, #EEF1F4); color: var(--cp-texto); cursor: pointer; }
#almox-ficha-modal .af-aba b { font-weight: 700; color: var(--cp-fraco); margin-left: 2px; }
#almox-ficha-modal .af-aba.on { background: var(--cp-azul); color: #fff; }
#almox-ficha-modal .af-aba.on b { color: rgba(255,255,255,.8); }

/* Entrada por OC: conversão para a unidade do SH (21/10/2026) */
.lct-conv { font-size: 12px; margin-top: 3px; white-space: nowrap; }
.lct-conv .lct-fator-in { width: 56px; }
.lct-conv .lct-falta { color: var(--cp-r-critico, #b42318); }

/* Kanban de Pedidos na altura da tela (21/10/2026): 50–76 OCs por semana; cada coluna rola por si */
.cp-kb-v2 { height: calc(100vh - 215px); min-height: 420px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); grid-auto-rows: minmax(0, 1fr); align-items: stretch; overflow-x: auto; overflow-y: hidden; }   /* sempre uma linha: colunas lado a lado, rolagem horizontal se a tela for estreita */
.cp-kb-v2 .cp-kb-col { overflow-y: auto; min-height: 0; }
.cp-kb-v2 .cp-kb-head { position: sticky; top: -8px; background: var(--gray-50, #F9FAFB); z-index: 1; padding-top: 6px; margin-top: -8px; }
.cp-kb-v2 .cp-kb-card.cp-kb-big { padding: 10px 12px; margin-bottom: 8px; }
.cp-kb-busca { flex: 1; min-width: 220px; max-width: 420px; height: 34px; border: 1px solid var(--cp-linha); border-radius: 8px; padding: 0 10px; background: var(--cp-card); color: var(--cp-texto); font-size: 13px; box-sizing: border-box; }
.cp-hist mark { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 2px; }
.cp-hist-itens { max-width: 360px; font-size: 12.5px; line-height: 1.35; }

/* NF-e do fornecedor (21/10/2026) */
.cp-nfe-linha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; margin: 2px 0; }
.cp-hist-nfe { min-width: 180px; }

.cp-nfe-buscar, .cp-nfe-pdf { font-size: 12px; padding: 3px 9px; border: 1px solid var(--cp-linha); border-radius: 7px; background: var(--cp-card); white-space: nowrap; }
.cp-nfe-buscar { border-style: dashed; color: var(--cp-fraco); }
.cp-nfe-pdf { font-weight: 700; }
.cp-nfe-provavel { color: var(--cp-fraco); }
.cp-nfe-provavel b { color: var(--cp-fraco); }
.cp-nfe-prov { font-size: 11px; padding: 1px 7px; border: 1px dashed var(--cp-linha); border-radius: 9px; color: var(--cp-fraco); white-space: nowrap; }

.cp-trazer { font-size: 12px; padding: 3px 9px; border: 1px dashed var(--cp-linha); border-radius: 7px; background: var(--cp-card); white-space: nowrap; }

/* CMV na listagem de vendas (21/10/2026) */
.cp-vl-est { display: block; font-style: normal; font-size: 11px; color: var(--cp-fraco); font-weight: 400; }
.cp-vl-mg { display: block; font-style: normal; font-size: 11px; color: var(--cp-fraco); }
.cp-vl-cmv { white-space: nowrap; }
/* Filtro por coluna (public/js/tab-filtro.js, 22/10/2026). O popup vai no <body>: cores fixas, não as variáveis do módulo. */
.tf-btn { border: 1px solid transparent; background: none; color: #94A3B8; font-size: 11px; padding: 0 4px; margin-left: 2px; border-radius: 4px; cursor: pointer; line-height: 16px; }
.tf-btn:hover { border-color: #CBD5E1; color: #15293A; }
.tf-btn.on { background: #D97706; color: #fff; }
.tf-pop { position: absolute; z-index: 3000; width: 280px; background: #fff; color: #15293A; border: 1px solid #CBD5E1; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 10px; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; text-align: left; }
.tf-ord { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.tf-ord button, .tf-acoes button { border: 1px solid #CBD5E1; background: #F8FAFC; border-radius: 7px; padding: 6px 8px; text-align: left; cursor: pointer; font: inherit; }
.tf-busca { width: 100%; box-sizing: border-box; border: 1px solid #CBD5E1; border-radius: 7px; padding: 6px 8px; font: inherit; margin-bottom: 6px; }
.tf-todos { display: block; padding: 4px 2px; font-weight: 600; border-bottom: 1px solid #E2E8F0; }
.tf-lista { max-height: 240px; overflow-y: auto; padding: 4px 0; }
.tf-lista label { display: block; padding: 3px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.tf-mais { color: #64748B; font-size: 12px; padding: 4px 2px; }
.tf-acoes { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.tf-acoes .tf-ok { background: #15293A; color: #fff; border-color: #15293A; text-align: center; }
.tf-aviso { font-size: 12px; color: #92400E; background: #FEF3C7; border-radius: 8px; padding: 6px 10px; margin: 6px 0; }
.tf-aviso button { border: none; background: none; color: #B45309; font-weight: 700; cursor: pointer; text-decoration: underline; }
/* Relatório de custos (22/10/2026): seções que abrem e fecham e o cartão clicável. */
.cp-cust-sec > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.cp-cust-sec > summary::-webkit-details-marker { display: none; }
.cp-cust-sec > summary::before { content: '▸'; color: var(--cp-fraco); transition: transform .15s; }
.cp-cust-sec[open] > summary::before { transform: rotate(90deg); }
.cp-cust-sec > summary h3 { margin: 0; }
.cp-cust-sec[open] > summary { margin-bottom: 10px; }
.cp-kpi-clic { cursor: pointer; }
.cp-kpi-clic:hover { outline: 2px solid #D97706; }
.cp-xls-sec { margin-left: auto; font-size: 11px; padding: 3px 8px; }