/* ============================================================================
   COMPRAS — o tronco visual das telas do módulo
   ============================================================================

   As cinco telas nasceram cada uma com a sua cópia do mesmo CSS: 745 linhas
   somadas, com 293 usos dos mesmos seletores. Isso cobrava a cada mudança —
   tirar um campo do formulário virava cinco arquivos para editar, e o padrão
   começava a divergir sozinho (a cotação já tinha um `.cmp-busca-limpar` sem a
   transição que as outras tinham).

   POR QUE AQUI, E NÃO NO MÓDULO: o `loadModule` do app.js copia para o `<head>`
   apenas as tags `<style>` de dentro do módulo — um `<link rel="stylesheet">`
   ali é DESCARTADO em silêncio. Folha compartilhada só funciona ligada no
   `<head>` do index.html, que é onde esta está.

   O que fica no módulo é o que só ele tem: o mapa comparativo da cotação, a
   trilha do painel, as linhas de item de cada formulário.
   ============================================================================ */

/* ---- Formulário -----------------------------------------------------------
   `.form-group` e `.form-control` NÃO são globais no sistema: cada módulo
   define os seus. Sem este bloco, todo campo cai no padrão cru do navegador —
   inclusive sem `width: 100%`, que é o que espremia a busca. */
.module-container .form-group { display: flex; flex-direction: column; margin-bottom: 14px; }
.module-container .form-group label { font-size: .8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.module-container .form-control {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main);
    border-radius: 8px; padding: 10px 12px; font-size: .9rem; font-family: inherit;
    outline: none; transition: border-color .15s;
}
.module-container .form-control:focus { border-color: #dc2626; }
.module-container .form-control::placeholder { color: var(--text-secondary); }
.module-container select.form-control option { background: var(--bg-card); color: var(--text-main); }
.module-container textarea.form-control { min-height: 70px; resize: vertical; }
.module-container .form-group small { margin-top: 5px; color: var(--text-secondary); font-size: .75rem; line-height: 1.35; }

/* ---- Cabeçalho da tela ---------------------------------------------------- */
.cmp-cabecalho { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.cmp-cab-intro { margin: 6px 0 0; font-size: .85rem; color: var(--text-secondary); line-height: 1.5; max-width: 70ch; }
.cmp-cab-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Cartões de resumo ---------------------------------------------------- */
.cmp-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cmp-stat { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 16px; transition: border-color .15s, transform .15s; }
.cmp-stat b { display: block; font-size: 1.55rem; font-weight: 700; color: var(--text-main); line-height: 1.1; }
.cmp-stat span { display: block; margin-top: 3px; font-size: .8rem; font-weight: 500; color: var(--text-secondary); }
.cmp-stat.clicavel { cursor: pointer; }
.cmp-stat.clicavel:hover { border-color: #dc2626; transform: translateY(-2px); }
.cmp-stat.marcado { border-color: #dc2626; background: rgba(220, 38, 38, .05); }
.cmp-stat.marcado b, .cmp-stat.marcado span { color: #dc2626; }
/* O total NAO e vermelho: nao e alerta nem acao, e so a soma dos outros. */
.cmp-stat.total b { color: var(--text-main); }
.cmp-stat.dinheiro b { font-size: 1.2rem; }
.cmp-stat.alerta { border-color: #b45309; }
.cmp-stat.alerta b, .cmp-stat.alerta span { color: #b45309; }

/* ---- Barra de filtros ----------------------------------------------------- */
.cmp-filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }

.cmp-busca { flex: 1 1 260px; min-width: 220px; }
.cmp-busca-campo { position: relative; }
.cmp-busca .lupa {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--text-secondary); font-size: .95rem; pointer-events: none; transition: color .15s;
}
.cmp-busca:focus-within .lupa { color: #dc2626; }
/* Padding nos DOIS lados (42px), e não o abreviado: o abreviado apaga o recuo
   da lupa e o texto começa em cima dela. */
.cmp-busca .form-control {
    height: 44px; padding: 0 42px; font-size: .92rem; border-radius: 10px;
    background: var(--bg-card); text-overflow: ellipsis;
}
.cmp-busca .form-control:focus { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.cmp-busca-limpar {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border: none; background: none; border-radius: 8px;
    color: var(--text-secondary); cursor: pointer; display: none;
    align-items: center; justify-content: center; font-size: .95rem;
}
.cmp-busca.tem-texto .cmp-busca-limpar { display: flex; }
.cmp-busca-limpar:hover { background: var(--bg-body); color: #dc2626; }

/* Filtro multi-seleção: padrão obrigatório do sistema (PADROES §6). Nunca
   escolha única — é preciso combinar valores. */
.cmp-ms { position: relative; flex: 0 1 175px; min-width: 155px; }
/* O rótulo do filtro também saiu da caixa alta (03/09/2026): eram nove por tela
   somando os dos cartões, e o módulo inteiro gritava rótulo. */
.cmp-ms-rot { display: block; font-size: .78rem; font-weight: 500; letter-spacing: 0; color: var(--text-secondary); margin-bottom: 6px; }
.cmp-ms-gatilho {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    height: 44px; box-sizing: border-box;
    border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-main);
    border-radius: 10px; padding: 0 14px; cursor: pointer; font-size: .88rem; font-weight: 600;
}
.cmp-ms-gatilho span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-ms-gatilho:hover { border-color: #dc2626; }
.cmp-ms.aberto .cmp-ms-gatilho { border-color: #dc2626; }
.cmp-ms-lista {
    position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14); display: none;
}
.cmp-ms.aberto .cmp-ms-lista { display: block; }
.cmp-ms-itens { max-height: 240px; overflow-y: auto; padding: 6px; }
.cmp-ms-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: .85rem; cursor: pointer; color: var(--text-main); }
.cmp-ms-item:hover { background: var(--bg-body); }
.cmp-ms-item input { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.cmp-ms-item .qtd { margin-left: auto; color: var(--text-secondary); font-size: .78rem; }
.cmp-ms-vazio { padding: 14px 12px; font-size: .82rem; color: var(--text-secondary); font-style: italic; text-align: center; }
.cmp-ms-rodape { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border-color); }
.cmp-ms-rodape button { flex: 1; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main); border-radius: 8px; padding: 7px; font-size: .78rem; font-weight: 600; cursor: pointer; }
.cmp-ms-rodape button:hover { border-color: #dc2626; color: #dc2626; }

/* ---- Tabela --------------------------------------------------------------- */
.cmp-painel { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 12px; overflow-x: auto; }
/* ---- Cabeçalho de bloco ----------------------------------------------------
   A tela de Pedidos passou a empilhar três coisas (08/09/2026): a fila de
   requisições, as cotações e os pedidos. Bloco sem nome, empilhado com outros,
   vira uma tabela de origem desconhecida — o título é o que diz de quem é cada
   um. É `h3` e não `h2`: o `h2` é o da tela. */
.cmp-faixa-topo {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 12px 0;
}
.cmp-faixa-topo h3 {
    margin: 0; font-size: .95rem; font-weight: 700; color: var(--text-main);
    display: flex; align-items: center; gap: 9px;
}
.cmp-faixa-topo h3 i { color: var(--text-secondary); font-size: .88rem; }
.cmp-faixa-topo .diz { font-size: .8rem; color: var(--text-secondary); }
.cmp-faixa-topo .acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Dentro do painel o título precisa do respiro que a borda do painel tira. */
.cmp-painel > .cmp-faixa-topo { padding: 14px 16px 0 16px; }
.cmp-painel > .cmp-kb { padding: 0 16px 14px 16px; }


.cmp-tabela { width: 100%; border-collapse: collapse; font-size: .86rem; }
/* Cabeçalho e célula no MESMO eixo: em coluna larga com conteúdo curto, os dois
   ficariam pendurados em cantos diferentes do mesmo espaço vazio e a coluna
   deixaria de se ler como coluna. */
.cmp-tabela th, .cmp-tabela td { text-align: center; }
.cmp-tabela th {
    /* SEM CAIXA ALTA (03/09/2026), como as colunas do quadro. Caixa alta em
       corpo pequeno é mais difícil de ler justamente onde o texto já é pequeno,
       e o cabeçalho já se distingue pela borda e pelo fundo. */
    /* `text-transform: none` EXPLÍCITO: o styles.css tem um
       `th { text-transform: uppercase }` que vale para o sistema inteiro. Só
       tirar a linha daqui não resolvia — sem declarar a propriedade, a regra
       global voltava a valer e o cabeçalho continuava gritando. */
    padding: 11px 13px; font-size: .8rem; font-weight: 600;
    text-transform: none; letter-spacing: 0; color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color); white-space: nowrap; background: var(--bg-card);
}
.cmp-tabela td { padding: 11px 13px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.cmp-tabela tbody tr:last-child td { border-bottom: none; }
.cmp-tabela tbody tr:hover { background: var(--bg-body); }
.cmp-tabela th.ord { cursor: pointer; user-select: none; }
.cmp-tabela th.ord:hover { color: var(--text-main); }
.cmp-tabela th.ord .seta { margin-left: 5px; font-size: .68rem; opacity: .35; }
/* A coluna ordenada NAO e vermelha: ordenar e navegar, nao agir — e a seta ao
   lado ja diz qual coluna manda. */
.cmp-tabela th.ord.ordenando { color: var(--text-main); font-weight: 700; }
.cmp-tabela th.ord.ordenando .seta { opacity: 1; }

/* O NUMERO DO DOCUMENTO deixou de ser vermelho (03/09/2026). Ele aparece
   dezenas de vezes por tela, e vermelho repetido dezenas de vezes nao chama
   atencao para nada — no modulo inteiro o vermelho passou a ser do botao de
   agir e das etiquetas que dizem "urgente" e "reprovado". A fonte monoespacada
   ja distingue o numero do texto ao redor, que e o trabalho dele. */
.cmp-num { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: var(--text-main); white-space: nowrap; }
.cmp-forte { font-weight: 600; color: var(--text-main); }
.cmp-sub { display: block; margin-top: 2px; font-size: .78rem; color: var(--text-secondary); }
.cmp-dinheiro { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.cmp-vazio { padding: 52px 20px; text-align: center; color: var(--text-secondary); font-style: italic; }
.cmp-acao { background: none; border: none; cursor: pointer; padding: 5px 7px; border-radius: 7px; color: var(--text-secondary); font-size: .88rem; }
.cmp-acao:hover { background: var(--bg-body); color: var(--text-main); }
.cmp-acao.perigo:hover { color: #dc2626; }
/* O botão de recorte LIGADO. A regra `.cmp-stat.marcado` já existia e NÃO vale
   aqui — é outro seletor, e o conferidor de CSS não pega a diferença porque ele
   confere a classe, não o par. Sem esta linha o filtro do histórico ficava aceso
   por dentro e igual por fora: a pessoa clica e nada muda na tela. */
.cmp-acao.marcado { background: rgba(220, 38, 38, .10); color: #dc2626; font-weight: 700; }
.cmp-acao b { font-weight: 700; opacity: .7; margin-left: 3px; }

/* ---- Etiquetas de situação -------------------------------------------------
   Uma tabela só para as cinco telas: o mesmo status tem que ter a mesma cor em
   todas elas, senão "aberta" âmbar na cotação e azul na requisição fazem a
   pessoa reaprender a cor a cada tela. */
.cmp-tag { border-radius: 999px; padding: 3px 10px; font-size: .72rem; font-weight: 700; white-space: nowrap; display: inline-block; }
.cmp-tag.aberta { background: rgba(37, 99, 235, .12); color: #2563eb; }
.cmp-tag.em_compra { background: rgba(217, 119, 6, .14); color: #b45309; }
.cmp-tag.atendida { background: rgba(16, 185, 129, .14); color: #059669; }
.cmp-tag.recusada { background: rgba(220, 38, 38, .12); color: #dc2626; }
.cmp-tag.cancelada, .cmp-tag.cancelado { background: rgba(100, 116, 139, .16); color: #64748b; }
.cmp-tag.urgente { background: rgba(220, 38, 38, .12); color: #dc2626; }
.cmp-tag.rascunho { background: rgba(100, 116, 139, .16); color: #64748b; }
.cmp-tag.aguardando_aprovacao { background: rgba(217, 119, 6, .16); color: #b45309; }
.cmp-tag.aprovado { background: rgba(37, 99, 235, .12); color: #2563eb; }
.cmp-tag.enviado { background: rgba(16, 185, 129, .14); color: #059669; }
.cmp-tag.reprovado { background: rgba(220, 38, 38, .12); color: #dc2626; }
.cmp-tag.recebido_parcial { background: rgba(217, 119, 6, .16); color: #b45309; }
.cmp-tag.recebido { background: rgba(16, 185, 129, .16); color: #047857; }
.cmp-tag.faturado { background: rgba(124, 58, 237, .14); color: #6d28d9; }
.cmp-tag.premiada { background: rgba(16, 185, 129, .16); color: #047857; }
/* Do ORÇAMENTO (01/10/2026). `comprado` é o fim bom e `recusado` o fim ruim —
   as mesmas cores de `atendida` e `recusada`, porque é a mesma leitura. */
.cmp-tag.comprado { background: rgba(16, 185, 129, .16); color: #047857; }
.cmp-tag.recusado { background: rgba(220, 38, 38, .12); color: #dc2626; }
.cmp-tag.aberto { background: rgba(37, 99, 235, .12); color: #2563eb; }
/* JÁ PEDI PREÇO (06/10/2026): o selo do cartão da requisição. Roxo porque não
   é situação dela — ela continua aberta —, é trabalho que já foi feito. */
.cmp-tag.orcado { background: rgba(124, 58, 237, .12); color: #6d28d9; }
body.dark-mode .cmp-tag.orcado { background: rgba(167, 139, 250, .18); color: #c4b5fd; }
.cmp-tag.vigente { background: rgba(16, 185, 129, .16); color: #047857; }
.cmp-tag.vencendo { background: rgba(217, 119, 6, .16); color: #b45309; }
.cmp-tag.vencido { background: rgba(220, 38, 38, .12); color: #dc2626; }
.cmp-tag.futuro { background: rgba(37, 99, 235, .12); color: #2563eb; }
.cmp-tag.inativo { background: rgba(100, 116, 139, .16); color: #64748b; }
body.dark-mode .cmp-tag.cancelada,
body.dark-mode .cmp-tag.cancelado,
body.dark-mode .cmp-tag.rascunho,
body.dark-mode .cmp-tag.inativo { background: rgba(148, 163, 184, .18); color: #cbd5e1; }
body.dark-mode .cmp-tag.faturado { background: rgba(167, 139, 250, .18); color: #c4b5fd; }

/* ---- Trilha de etapas ------------------------------------------------------
   Onde a requisição está no caminho, e não que etiqueta alguém colou nela. As
   três etapas aparecem SEMPRE — inclusive as que ainda não chegaram, apagadas:
   mostrar só a atual esconderia que ainda falta caminho, e quem pediu não
   saberia se "Em compra" é o fim ou o meio. */
.cmp-etapas { display: inline-flex; align-items: center; gap: 0; flex-wrap: wrap; }
.cmp-etapa {
    font-size: .74rem; font-weight: 600; color: var(--text-secondary);
    opacity: .45; white-space: nowrap;
}
/* O SEPARADOR É UM ELEMENTO PRÓPRIO, e não um `::before` da etapa seguinte.
   Como `::before` ele era desenhado DENTRO da caixa da etapa — e a etapa atual
   tem fundo e cantos arredondados, então a pílula âmbar engolia o "›" junto com
   o rótulo. Fora da etapa, ele fica onde deve: no espaço entre as duas. */
.cmp-etapa-sep {
    margin: 0 7px; opacity: .45; font-size: .74rem; font-weight: 400;
    color: var(--text-secondary);
}
/* Vencida: já passou, então continua legível mas não disputa atenção. */
.cmp-etapa.feita { opacity: .85; }
/* A ATUAL é a única com peso e cor — é a resposta da pergunta que traz a
   pessoa até esta coluna. */
.cmp-etapa.agora {
    opacity: 1; color: #b45309; font-weight: 700;
    background: rgba(217, 119, 6, .12); border-radius: 999px; padding: 3px 10px;
}
body.dark-mode .cmp-etapa.agora { color: #fbbf24; background: rgba(251, 191, 36, .14); }

/* ---- Linha do tempo (09/09/2026) -------------------------------------------
   Por onde o documento passou. A data fica numa coluna própria, à esquerda:
   é por ela que se lê a linha do tempo — "quando" antes de "o quê" —, e
   alinhada em coluna ela deixa de ser lida palavra por palavra. */
.cmp-lt { list-style: none; margin: 0; padding: 0; }
.cmp-lt-item {
    display: grid; grid-template-columns: 118px 1fr; gap: 12px;
    padding: 11px 0 11px 0; border-top: 1px solid var(--border-color);
    position: relative;
}
.cmp-lt-item:first-child { border-top: none; }
.cmp-lt-quando {
    font-size: .76rem; color: var(--text-secondary);
    font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 1px;
}
.cmp-lt-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-lt-corpo b { font-size: .87rem; font-weight: 600; color: var(--text-main); }
.cmp-lt-quem { font-size: .78rem; color: var(--text-secondary); }
.cmp-lt-quem i { opacity: .7; }
/* O MOTIVO ESCRITO tem recuo e barra: ele é a voz de outra pessoa dentro da
   linha do tempo — quem recusou, quem cancelou —, e citação sem marca visual
   se lê como se fosse o sistema falando. */
.cmp-lt-motivo {
    margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--border-color);
    font-size: .82rem; color: var(--text-secondary); line-height: 1.5;
}
/* As três saídas ganham cor à esquerda: são o que a pessoa procura quando abre
   a linha do tempo de algo que não chegou. */
.cmp-lt-item.para-recusada, .cmp-lt-item.para-cancelada,
.cmp-lt-item.para-cancelado, .cmp-lt-item.para-reprovado { border-left: 3px solid #dc2626; padding-left: 11px; }
.cmp-lt-item.para-atendida, .cmp-lt-item.para-recebido,
.cmp-lt-item.para-premiada { border-left: 3px solid #059669; padding-left: 11px; }
/* Um delete não deveria existir — as quatro coleções o recusam. Se aparecer,
   tem que saltar da lista, e não virar mais uma linha cinza. */
.cmp-lt-item.apagado { background: rgba(220, 38, 38, .07); border-left: 3px solid #dc2626; padding-left: 11px; }
.cmp-lt-item.apagado b { color: #dc2626; }
.cmp-lt-carregando, .cmp-lt-vazio {
    padding: 18px 4px; font-size: .84rem; color: var(--text-secondary); font-style: italic;
}
@media (max-width: 560px) {
    .cmp-lt-item { grid-template-columns: 1fr; gap: 2px; }
}


/* ---- Foto do item (01/10/2026) ---------------------------------------------
   A miniatura que o cadastro do item guarda. O comprador reconhece a peça pelo
   que ela é, e não pelo código — "HAM-0283" não diz nada a quem vai ligar para
   o fornecedor perguntando preço.

   `object-fit: contain` e não `cover`: a foto é de peça sobre fundo claro, e
   recortar corta justamente a ponta que distingue uma correia da outra. */
.cmp-foto {
    flex-shrink: 0; border: 1px solid var(--border-color); border-radius: 6px;
    background: var(--bg-body); object-fit: contain;
    display: inline-flex; align-items: center; justify-content: center;
}
.cmp-foto.pequena { width: 34px; height: 34px; }
.cmp-foto.media { width: 48px; height: 48px; }
/* Sem foto no cadastro: um quadrado neutro, do mesmo tamanho. Sem ele a lista
   desalinha e quem lê procura o que não existe. */
.cmp-foto.vazia { color: var(--text-secondary); opacity: .45; }
.cmp-foto.pequena.vazia { font-size: .8rem; }
.cmp-foto.media.vazia { font-size: 1.05rem; }

/* O item na ficha: foto, nome e código de um lado; a quantidade do outro. */
.cmp-item-ficha { display: flex; align-items: center; gap: 11px; }
.cmp-item-ficha .corpo { flex: 1; min-width: 0; }
.cmp-item-ficha .corpo b { font-weight: 600; color: var(--text-main); }
.cmp-item-ficha .corpo .cmp-sub { margin-top: 1px; font-family: ui-monospace, Consolas, monospace; }


/* ---- Modal ---------------------------------------------------------------- */
.cmp-modal { display: none; position: fixed; inset: 0; z-index: 10040; background: rgba(15, 23, 42, .6); align-items: center; justify-content: center; padding: 18px; }
.cmp-modal.aberto { display: flex; }
.cmp-caixa { background: var(--bg-card); border-radius: 14px; width: 100%; max-width: 760px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.cmp-caixa.larga { max-width: 1100px; }
.cmp-caixa.estreita { max-width: 460px; }
.cmp-topo { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--border-color); }
.cmp-corpo { padding: 20px; overflow: auto; }
.cmp-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--border-color); flex-wrap: wrap; }
.cmp-x { background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--text-secondary); cursor: pointer; }
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.cmp-secao { border-top: 1px solid var(--border-color); margin-top: 18px; padding-top: 18px; }
.cmp-secao:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.cmp-secao h4 { margin: 0 0 14px 0; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }

/* ---- Ficha de leitura ----------------------------------------------------- */
.cmp-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 18px; }
.cmp-ficha div { font-size: .86rem; color: var(--text-main); }
.cmp-ficha .rot { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); margin-bottom: 3px; }
.cmp-lista-itens { list-style: none; padding: 0; margin: 0; }
.cmp-lista-itens li { padding: 9px 0; border-bottom: 1px solid var(--border-color); font-size: .87rem; color: var(--text-main); display: flex; justify-content: space-between; gap: 14px; }
.cmp-lista-itens li:last-child { border-bottom: none; }
.cmp-lista-itens .q { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Linhas de item editáveis --------------------------------------------- */
.cmp-linhas { border: 1px solid var(--border-color); border-radius: 12px; }
.cmp-ln { display: grid; gap: 10px; align-items: start; padding: 10px 12px; border-bottom: 1px solid var(--border-color); }
.cmp-ln:last-child { border-bottom: none; }
.cmp-ln.cab { padding: 9px 12px; background: var(--bg-body); font-size: .67rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.cmp-ln .form-control { height: 38px; padding: 0 10px; font-size: .86rem; }
.cmp-ln-x { border: none; background: none; color: var(--text-secondary); cursor: pointer; height: 38px; border-radius: 8px; }
.cmp-ln-x:hover { background: var(--bg-body); color: #dc2626; }
.cmp-add { width: 100%; border: 1px dashed var(--border-color); background: var(--bg-body); color: var(--text-main); border-radius: 10px; padding: 10px; margin-top: 10px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.cmp-add:hover { border-color: #dc2626; color: #dc2626; }

/* Busca e escolha no MESMO controle: digitar já filtra e a lista abaixo já é a
   seleção. Campo de procurar separado do de escolher faz a pessoa achar num
   lugar e ter de selecionar em outro. */
.cmp-item-box { position: relative; }
.cmp-item-sug { position: absolute; z-index: 70; top: calc(100% + 3px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .16); max-height: 210px; overflow-y: auto; display: none; }
.cmp-item-sug.aberto { display: block; }
.cmp-item-op { padding: 8px 11px; font-size: .84rem; cursor: pointer; color: var(--text-main); }
.cmp-item-op:hover { background: var(--bg-body); }
.cmp-item-op .cod { font-family: ui-monospace, Consolas, monospace; font-size: .75rem; color: #dc2626; margin-right: 6px; }
.cmp-item-op .det { display: block; font-size: .74rem; color: var(--text-secondary); }
.cmp-item-livre { font-size: .74rem; color: var(--text-secondary); margin-top: 4px; }

/* ---- Totais --------------------------------------------------------------- */
.cmp-totais { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; margin-top: 14px; font-size: .88rem; }
.cmp-totais .ln { display: flex; gap: 18px; align-items: center; color: var(--text-secondary); }
.cmp-totais .ln b { min-width: 120px; text-align: right; color: var(--text-main); font-variant-numeric: tabular-nums; }
.cmp-totais .geral { font-size: 1.08rem; }
.cmp-totais .geral b { color: #dc2626; }

/* ---- Aviso ---------------------------------------------------------------- */
.cmp-aviso {
    border: 1px solid var(--border-color); border-left: 3px solid #b45309;
    background: var(--bg-body); border-radius: 8px; padding: 11px 13px;
    font-size: .82rem; color: var(--text-secondary); line-height: 1.55; margin-top: 14px;
}
.cmp-aviso b { color: var(--text-main); }
.cmp-aviso.recusa { border-left-color: #dc2626; }

/* ---- Lista de escolha (requisições a puxar, sugestões) --------------------- */
.cmp-req-lista { border: 1px solid var(--border-color); border-radius: 12px; max-height: 340px; overflow-y: auto; }
.cmp-req-ln { display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px; border-bottom: 1px solid var(--border-color); cursor: pointer; }
.cmp-req-ln:last-child { border-bottom: none; }
.cmp-req-ln:hover { background: var(--bg-body); }
.cmp-req-ln input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.cmp-req-ln .txt { font-size: .86rem; color: var(--text-main); }
.cmp-req-ln .txt .cmp-sub { margin-top: 3px; }

/* ---- O QUADRO (kanban) das requisições ------------------------------------
   03/09/2026. A lista virou quadro porque a pergunta que o comprador faz não é
   "quais existem" e sim "onde cada uma está agora" — e isso uma tabela responde
   linha a linha, enquanto o quadro responde de relance.

   NÃO TEM ARRASTAR, e é de propósito. É o mesmo do kanban do almoxarifado: o
   cartão abre e a ação acontece no painel. Arrastar mentiria — "Em compra" não
   é uma opinião de quem arrasta, é consequência de existir um pedido de compra
   apontando para a requisição. Cartão que anda sozinho de coluna sem o pedido
   nascer transformaria o quadro numa lista de intenções. */
.cmp-kb { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.cmp-kb-col {
    flex: 1 0 262px; min-width: 262px; max-width: 380px;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
}
.cmp-kb-topo {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px; border-bottom: 1px solid var(--border-color);
    /* SEM CAIXA ALTA (03/09/2026). São os rótulos mais visíveis da tela, e caixa
       alta em corpo pequeno é mais difícil de ler justamente onde o texto já é
       pequeno. O peso e a barra de cor em cima já dizem que é cabeçalho. */
    font-size: .84rem; font-weight: 600; letter-spacing: 0;
    color: var(--text-main);
}
.cmp-kb-topo i { opacity: .55; }
.cmp-kb-conta {
    margin-left: auto; background: var(--bg-body); color: var(--text-secondary);
    border-radius: 999px; padding: 1px 9px; font-size: .74rem;
    font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
/* A cor da coluna é a MESMA da etiqueta de situação do cartão. Duas paletas
   para o mesmo estado fariam o quadro e a ficha discordarem. */
.cmp-kb-topo.aberta     { box-shadow: inset 0 3px 0 #b45309; }
.cmp-kb-topo.em_compra  { box-shadow: inset 0 3px 0 #2563eb; }
.cmp-kb-topo.atendida   { box-shadow: inset 0 3px 0 #059669; }
.cmp-kb-topo.encerradas { box-shadow: inset 0 3px 0 #94a3b8; }

.cmp-kb-corpo {
    padding: 12px; display: flex; flex-direction: column; gap: 10px;
    max-height: 62vh; overflow-y: auto;
}
.cmp-kb-corpo::-webkit-scrollbar { width: 5px; }
.cmp-kb-corpo::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
.cmp-kb-vazia {
    padding: 22px 10px; text-align: center; font-size: .8rem;
    color: var(--text-secondary); font-style: italic;
}

/* ---- O cartão ------------------------------------------------------------
   Anatomia do cartão do almoxarifado: número + itens em cima, quem pediu no
   meio, filial e idade embaixo. O resto (justificativa, motivo da recusa) fica
   na ficha — encher o cartão faz a coluna virar parede de texto e o quadro
   perde a serventia, que é ver tudo de uma vez. */
.cmp-kc {
    border: 1px solid var(--border-color); border-radius: 10px;
    background: var(--bg-body); padding: 11px 12px; cursor: pointer;
    display: flex; flex-direction: column; gap: 7px;
    transition: border-color .12s, transform .12s;
}
.cmp-kc:hover { border-color: #dc2626; transform: translateY(-1px); }
.cmp-kc.urgente { border-left: 3px solid #dc2626; }
.cmp-kc-topo { display: flex; align-items: baseline; gap: 8px; }
/* O número do cartão NÃO é vermelho aqui (03/09/2026). No quadro há dezenas
   deles, e vermelho repetido dezenas de vezes deixa de chamar atenção para
   qualquer coisa — nesta tela ele é do botão de agir e das etiquetas que dizem
   "urgente" e "recusada". O número já se distingue pela fonte monoespaçada.
   Vale só no cartão: na tabela das outras telas ele continua vermelho. */
.cmp-kc-topo .cmp-num { font-size: .82rem; color: var(--text-secondary); }
.cmp-kc-topo .quando { margin-left: auto; font-size: .72rem; color: var(--text-secondary); white-space: nowrap; }
/* A foto entrou ao lado do nome (01/10/2026), então a linha virou flex. */
.cmp-kc-itens {
    display: flex; align-items: center; gap: 9px;
    font-size: .87rem; color: var(--text-main); font-weight: 600; line-height: 1.35;
}
.cmp-kc-itens .txt { min-width: 0; }
.cmp-kc-itens .mais { display: block; font-weight: 400; color: var(--text-secondary); font-size: .8rem; }
.cmp-kc-pe {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: .76rem; color: var(--text-secondary);
}
.cmp-kc-pe .sep { opacity: .45; }
.cmp-kc-pe .quem { color: var(--text-main); }
.cmp-kc-selos { display: flex; gap: 5px; flex-wrap: wrap; }

/* ===========================================================================
   O CABEÇALHO ENXUTO das Requisições (03/09/2026)
   ===========================================================================
   A tela tinha, acima do quadro: cinco linhas de texto explicativo, seis
   cartões de número e uma barra de filtros — e só então o trabalho. O comprador
   abre essa tela dezenas de vezes por dia; ele já leu a explicação.

   O CORTE QUE VALEU: cinco dos seis cartões (Total, Abertas, Em compra,
   Atendidas, Recusadas) mostravam exatamente as contagens que as colunas do
   quadro já mostram, um palmo abaixo, em cima dos cartões que elas contam. Era
   o mesmo dado duas vezes. Saíram.

   Sobrou o "abaixo do mínimo", que não é situação e sim chamado para agir — e
   por isso virou a ÚNICA coisa vermelha da página junto com o botão. Antes ele
   dividia o vermelho com o ícone do título, com o número do total e com as
   etiquetas de urgente.

   Estas classes são só desta tela. As outras quatro seguem com `.cmp-resumo`. */

.cmp-cab2 {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 16px;
}
.cmp-cab2 h2 {
    margin: 0 0 3px; font-size: 1.32rem; font-weight: 700;
    letter-spacing: -.02em; color: var(--text-main);
}
/* Uma linha, não cinco. O resto está no manual, que se lê uma vez. */
.cmp-cab2 .diz { margin: 0; font-size: .85rem; color: var(--text-secondary); max-width: 68ch; }
.cmp-cab2 .lado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* O chamado do estoque — e ele é um BOTÃO, não um mostrador.

   A primeira versão parecia "um campo informando que tem 9 abaixo do mínimo": o
   número grande em cima de um fundo quase transparente é a anatomia de um
   cartão de indicador, e ninguém clica num indicador. Três coisas mudaram:

   1. a GEOMETRIA é a do `.btn` da casa (raio 8, padding 10/18, peso 600) — ele
      precisa parecer irmão do "Nova requisição" ao lado, só com menos peso;
   2. o NÚMERO deixou de ser grande. Número grande é o que faz o olho ler
      "estatística"; aqui ele é parte da frase do botão;
   3. HOVER, PRESSIONADO e FOCO existem. Sem os três, nada na tela responde ao
      mouse e a coisa continua parecendo estática — e sem o foco não dá para
      chegar nele pelo teclado.

   Âmbar, e não vermelho: vermelho é o botão primário. Dois vermelhos lado a
   lado seriam duas ações concorrendo pela mesma atenção. */
.cmp-alerta-min {
    display: inline-flex; align-items: center; gap: 8px;
    /* 8px, e não os 10px do `.btn`: este tem borda de 1px e o outro não, então
       10px o deixaria 2px mais alto que o vizinho. Irmão torto salta à vista
       mais do que irmão diferente. */
    padding: 8px 18px; border-radius: 8px; cursor: pointer;
    border: 1px solid #d9a441; background: #fdf3e0;
    color: #92400e; font-size: .875rem; font-weight: 600; line-height: 1.2;
    font-family: inherit; transition: all .2s;
}
.cmp-alerta-min:hover {
    background: #fae9cd; transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(180, 83, 9, .22);
}
.cmp-alerta-min:active { transform: translateY(0); box-shadow: none; }
.cmp-alerta-min:focus-visible { outline: 2px solid #b45309; outline-offset: 2px; }
.cmp-alerta-min b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp-alerta-min i { opacity: .75; }
body.dark-mode .cmp-alerta-min { border-color: #8a5f1c; background: rgba(251, 191, 36, .13); color: #fbbf24; }
body.dark-mode .cmp-alerta-min:hover { background: rgba(251, 191, 36, .2); }
@media (prefers-reduced-motion: reduce) {
    .cmp-alerta-min, .cmp-alerta-min:hover { transition: none; transform: none; }
}

/* ---- A barra de trabalho: buscar + filtros + o total, numa linha só ------- */
.cmp-barra {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.cmp-barra .cmp-busca { flex: 1 1 300px; }
.cmp-barra .cmp-ms { flex: 0 1 178px; min-width: 150px; }
/* SEM CAIXA ALTA nos rótulos. Eram nove nesta tela — buscar, situação, filial,
   setor e os cinco dos cartões —, e caixa alta em rótulo pequeno é mais difícil
   de ler justamente onde o texto já é pequeno. */
.cmp-barra .cmp-ms-rot {
    text-transform: none; letter-spacing: 0;
    font-size: .78rem; font-weight: 500; color: var(--text-secondary);
}
.cmp-barra .conta {
    margin-left: auto; padding-bottom: 9px;
    font-size: .82rem; color: var(--text-secondary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cmp-barra .conta b { color: var(--text-main); font-weight: 600; }

/* ---- O convite da coluna vazia -------------------------------------------
   Tela vazia é convite para agir, não recado de que não há nada. A caixa em
   branco que havia aqui ("Nenhuma requisição ainda.") não dizia o que fazer, e
   ainda escondia o quadro inteiro — quem abria a tela pela primeira vez não
   descobria que ela tinha colunas. */
.cmp-kb-convite {
    padding: 20px 14px; text-align: center;
    color: var(--text-secondary); font-size: .84rem; line-height: 1.55;
}
.cmp-kb-convite b { display: block; color: var(--text-main); font-size: .88rem; margin-bottom: 4px; }
.cmp-kb-convite .diz { display: block; }
.cmp-kb-convite .acao {
    display: inline-block; margin-top: 10px; color: #dc2626;
    font-weight: 600; cursor: pointer; font-size: .84rem;
}
.cmp-kb-convite .acao:hover { text-decoration: underline; }

/* ---- A cifra do cabeçalho (03/09/2026) -------------------------------------
   O dinheiro em aberto era o sexto cartão de uma fileira de contagens, com a
   mesma moldura e o mesmo corpo. Mas ele não conta documentos — conta
   compromisso assumido, e é o número que a direção pergunta primeiro. Igualado
   aos contadores, era lido como mais um deles.

   Sem moldura de propósito: cartão dentro do cabeçalho brigaria com os botões
   ao lado. O que o distingue é o corpo do número e o alinhamento à direita. */
.cmp-cifra { text-align: right; line-height: 1.15; padding-right: 4px; }
.cmp-cifra b {
    display: block; font-size: 1.3rem; font-weight: 700;
    color: var(--text-main); font-variant-numeric: tabular-nums;
}
.cmp-cifra span { font-size: .78rem; color: var(--text-secondary); }

/* ---- A linha de estado (03/09/2026) ----------------------------------------
   Substitui, na Cotações, a fileira de contadores que repetia a tabela. Diz o
   que está esperando quem — que é a pergunta da tela — em vez de contar
   documentos por situação, coisa que a coluna "Situação" da tabela já faz linha
   a linha. */
.cmp-linha-estado {
    display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 16px;
    font-size: .88rem; color: var(--text-secondary);
}
.cmp-linha-estado b { color: var(--text-main); font-weight: 700; font-variant-numeric: tabular-nums; }
/* O que espera VOCÊ tem cor; o que espera o fornecedor não — só um dos dois é
   trabalho seu, e a cor é o que diz qual. */
.cmp-linha-estado .agir { color: #92400e; }
.cmp-linha-estado .agir b { color: #92400e; }
body.dark-mode .cmp-linha-estado .agir,
body.dark-mode .cmp-linha-estado .agir b { color: #fbbf24; }

/* O botão de alerta quando ele também FILTRA (Acordos): marcado = filtro ligado. */
.cmp-alerta-min.marcado { background: #b45309; border-color: #b45309; color: #fff; }
.cmp-alerta-min.marcado:hover { background: #92400e; }

/* ==== ORÇAMENTOS (01/10/2026) ================================================
   Cada orçamento é um cartão: fornecedor, quando chegou, o que custa cada item
   e o arquivo que veio junto. A LISTA É VERTICAL de propósito — não é um
   quadro de etapas (o orçamento não anda por colunas, ele chega e é decidido),
   e é o item dentro do cartão que convida a comparar.
   ============================================================================ */
.cmo-lista { display: flex; flex-direction: column; gap: 12px; }
.cmo-card {
    border: 1px solid var(--border-color); border-radius: 12px;
    background: var(--bg-card); padding: 12px 14px;
}
/* O VENCIDO continua à vista, apagado: saber que o preço existiu e expirou é
   diferente de não saber que ele existiu. */
.cmo-card.vencido { opacity: .72; border-style: dashed; }
.cmo-card-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.cmo-card-topo .forn { font-size: .95rem; color: var(--text-main); }
.cmo-card-topo .quando { font-size: .8rem; color: var(--text-secondary); }
.cmo-card-topo .cmp-acao { margin-left: auto; }
.cmo-sem-arquivo { margin-left: auto; font-size: .75rem; color: var(--text-secondary); font-style: italic; }

.cmo-itens { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
/* GRID, e não flex: as colunas de preço têm de se alinhar de uma linha para a
   outra — é o alinhamento que deixa comparar dois itens de relance. Todos os
   filhos declaram linha E coluna; sem isso o navegador acomoda sozinho e
   embaralha a lista. */
.cmo-itens li {
    display: grid; grid-template-columns: 1fr 86px 100px auto; align-items: center;
    gap: 10px; padding: 7px 0; border-top: 1px solid var(--border-color); font-size: .86rem;
}
.cmo-itens li .nome { grid-row: 1; grid-column: 1; color: var(--text-main); }
.cmo-itens li .qtd { grid-row: 1; grid-column: 2; color: var(--text-secondary); text-align: right; }
.cmo-itens li .preco { grid-row: 1; grid-column: 3; text-align: right; font-weight: 600; }
.cmo-itens li .cmp-acao { grid-row: 1; grid-column: 4; }

.cmo-card-pe {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px;
    margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border-color);
    font-size: .8rem; color: var(--text-secondary);
}
.cmo-card-pe .total { margin-left: auto; font-size: 1rem; color: #dc2626; }
.cmo-card-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.cmo-card-acoes .cmp-sub { margin-right: auto; }

@media (max-width: 720px) {
    .cmo-itens li { grid-template-columns: 1fr auto; }
    .cmo-itens li .nome { grid-column: 1 / -1; }
    .cmo-itens li .qtd { grid-row: 2; grid-column: 1; text-align: left; }
    .cmo-itens li .preco { grid-row: 2; grid-column: 2; }
    .cmo-itens li .cmp-acao { grid-row: 3; grid-column: 1 / -1; justify-self: start; }
    .cmo-card-pe .total { margin-left: 0; width: 100%; text-align: right; }
}

/* ==== OS ORÇAMENTOS DA REQUISIÇÃO, LADO A LADO (08/10/2026) ==================
   Uma coluna por fornecedor, uma linha por item; a célula é o preço que ele
   deu, e em branco é "não tem". A COLUNA DO ITEM FICA PRESA à esquerda: com
   quatro fornecedores a tabela rola de lado, e o preço sem o nome do item ao
   lado não diz nada.
   ============================================================================ */
/* Duas classes, e DEPOIS da `.cmp-caixa.larga`: com uma só, a regra genérica
   (duas classes) vencia e a tabela ficava nos 1100px de qualquer modal largo. */
.cmp-caixa.cmo-mapa-caixa { max-width: 1240px; }
.cmo-mapa-intro { margin: 0 0 14px; font-size: .86rem; line-height: 1.55; color: var(--text-secondary); }
.cmo-mapa-intro b { color: var(--text-main); }
.cmo-mapa-barra { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 14px; }
.cmo-mapa-rolo { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 10px; }
.cmo-mapa { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.cmo-mapa th, .cmo-mapa td { padding: 8px 10px; border-bottom: 1px solid var(--border-color); vertical-align: top; text-align: left; }
.cmo-mapa thead th {
    background: var(--bg-body); color: var(--text-secondary);
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.cmo-mapa th.item, .cmo-mapa td.item { position: sticky; left: 0; z-index: 1; min-width: 200px; max-width: 280px; background: var(--bg-card); }
.cmo-mapa thead th.item { background: var(--bg-body); z-index: 2; }
.cmo-mapa td.item b { display: block; color: var(--text-main); font-weight: 600; line-height: 1.3; }
.cmo-mapa td.item .cod { display: block; margin-top: 2px; font-size: .72rem; color: var(--text-secondary); }
.cmo-mapa td.item .estado { display: block; margin-top: 5px; }
.cmo-mapa td.item .estado:empty { display: none; }
.cmo-mapa td.qtd { white-space: nowrap; color: var(--text-main); }
.cmo-mapa td.qtd input { display: inline-block; width: 70px; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.cmo-mapa td.qtd .un { margin-left: 6px; font-size: .75rem; color: var(--text-secondary); }

.cmo-mapa th.forn {
    position: relative; min-width: 160px; padding-right: 30px;
    text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--text-main);
}
.cmo-mapa th.forn .nome {
    font-weight: 700; line-height: 1.25; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cmo-mapa th.forn .sub { margin-top: 3px; font-size: .72rem; font-weight: 500; color: var(--text-secondary); }
.cmo-mapa th.forn.vencida .nome { text-decoration: line-through; opacity: .7; }
.cmo-mapa th.forn.vazio { font-weight: 500; font-style: italic; color: var(--text-secondary); }
.cmo-mapa-tira {
    position: absolute; top: 6px; right: 4px; padding: 4px 7px; border: none; border-radius: 6px;
    background: none; color: var(--text-secondary); cursor: pointer;
}
.cmo-mapa-tira:hover { color: #dc2626; background: rgba(220, 38, 38, .08); }
.cmo-mapa-tira:focus-visible { outline: 2px solid #dc2626; outline-offset: 1px; }

.cmo-mapa td.preco { min-width: 160px; }
.cmo-mapa td.preco input { padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.cmo-mapa td.preco input::placeholder { font-style: italic; }
.cmo-mapa td.preco.vazio { font-size: .84rem; font-style: italic; color: var(--text-secondary); vertical-align: middle; text-align: center; }
/* QUEM FICOU COM A LINHA se vê pela célula inteira, e não só pelo botão: é o
   que deixa ler "de quem compro o quê" de relance, de cima a baixo. */
.cmo-mapa td.preco.escolhida { background: rgba(5, 150, 105, .08); }
.cmo-escolha {
    display: block; width: 100%; margin-top: 5px; padding: 3px 8px;
    border: 1px solid var(--border-color); border-radius: 999px;
    background: var(--bg-card); color: var(--text-secondary);
    font-size: .72rem; font-weight: 600; cursor: pointer;
}
.cmo-escolha:hover { color: var(--text-main); border-color: var(--text-secondary); }
.cmo-escolha.escolhida { background: #059669; border-color: #059669; color: #fff; }
/* O `hidden` DO HTML PERDE para o `display: block` acima — sem esta linha, a
   célula em branco e a do orçamento vencido ofereciam "escolher este". */
.cmo-escolha[hidden] { display: none; }
.cmo-escolha:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }
.cmo-escolha[disabled] { cursor: default; }
.cmo-mapa tr.comprada td.qtd, .cmo-mapa tr.comprada td.preco { opacity: .55; }
.cmo-mapa tr.pendente td.item { box-shadow: inset 3px 0 0 #ea580c; }

.cmo-mapa tfoot th { font-size: .74rem; font-weight: 600; color: var(--text-secondary); position: sticky; left: 0; z-index: 1; background: var(--bg-card); }
.cmo-mapa tfoot td input { padding: 6px 8px; }
.cmo-mapa tfoot tr.total th, .cmo-mapa tfoot tr.total td { background: var(--bg-body); border-bottom: none; }
.cmo-mapa tfoot tr.total td b { font-size: .95rem; color: #059669; }
.cmo-mapa tfoot tr.total td .cmp-sub { display: block; }
.cmo-mapa-arq { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: .76rem; color: var(--text-main); }
.cmo-mapa-anexar { cursor: pointer; font-weight: 600; color: #2563eb; }
.cmo-mapa-anexar input[type="file"] { display: none; }
.cmo-mapa-anexar:focus-within { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }

.cmo-mapa-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.cmo-mapa-resumo .bloco { padding: 11px 14px; border: 1px solid var(--border-color); border-radius: 10px; font-size: .84rem; color: var(--text-main); }
.cmo-mapa-resumo h5 { margin: 0 0 8px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.cmo-mapa-resumo .ln, .cmo-mapa-feito .ln { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.cmo-mapa-resumo .ln .q { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
/* O QUE NINGUÉM TEM salta da tela: é a parte que ainda pede trabalho. */
.cmo-mapa-resumo .bloco.falta { border-color: rgba(234, 88, 12, .45); background: rgba(234, 88, 12, .06); }

.cmo-mapa-feito { padding: 14px 16px; border: 1px solid rgba(5, 150, 105, .4); border-radius: 12px; background: rgba(5, 150, 105, .06); }
.cmo-mapa-feito h4 { margin: 0 0 10px; font-size: .95rem; color: #047857; }
.cmo-mapa-feito .ln { flex-wrap: wrap; font-size: .87rem; color: var(--text-main); border-top: 1px solid var(--border-color); padding: 7px 0; }
.cmo-mapa-feito .ln .cmp-dinheiro { margin-left: auto; }
#cmoMapaBtnFechar.perigo { color: #dc2626 !important; border-color: #dc2626 !important; }

.cmp-tag.pendente { background: rgba(234, 88, 12, .12); color: #c2410c; }
body.dark-mode .cmp-tag.pendente { background: rgba(251, 146, 60, .18); color: #fdba74; }
body.dark-mode .cmo-mapa td.preco.escolhida { background: rgba(52, 211, 153, .10); }
body.dark-mode .cmo-mapa tfoot tr.total td b,
body.dark-mode .cmo-mapa-feito h4 { color: #34d399; }
body.dark-mode .cmo-escolha.escolhida { background: #047857; border-color: #047857; }
body.dark-mode .cmo-mapa-anexar { color: #60a5fa; }

@media (max-width: 820px) {
    .cmo-mapa-barra { grid-template-columns: 1fr; }
    .cmo-mapa th.item, .cmo-mapa td.item { min-width: 150px; }
}

/* A UNIDADE DO CATÁLOGO, travada na linha do pedido e do orçamento (09/10/2026).
   Item escolhido do catálogo conta na unidade do estoque — foi a unidade livre
   que deixou o PC-0010 sair "10 UN" de um óleo contado em litros. */
.cmp-un-fixa {
    height: 38px; display: flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 600; color: var(--text-main);
    background: var(--bg-body); border: 1px dashed var(--border-color); border-radius: 8px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 4px;
}