/* =============================================
   GRAFMETAL — css/telas.css
   Regras de TELAS ESPECÍFICAS (escopadas por id/classe da tela), agrupadas por setor.
   Origem: extraído do <style> do index.html na s679 (linhas 143–288 e 490–501 do original) —
   Fase 2 da preparação para equipe (resíduo "index.html"). Carrega DEPOIS do css/app.css:
   as regras daqui têm especificidade maior (id/classe) e vencem o global de qualquer jeito.
   Regra da casa: estilo de UMA tela entra aqui, na seção do setor dono; estilo do
   sistema inteiro (login, header, menu, dashboard, campos) entra no app.css.
   Cache: referenciado com ?v=sXX no index.html (o publicar.ps1 faz o bump junto com os .js).
   ============================================= */

/* ═══════════ 🛒 COMPRAS — cadastro de fornecedor (#comp-form-div) ═══════════ */
/* s280 → s476b — formulário de Fornecedor no MESMO padrão compacto do form de
   Cliente (s474b): blocos .forn-box + labels 9px + inputs 5px/12px.
   Escopado em #comp-form-div p/ não afetar nenhuma outra tela. */
#comp-form-div .campo-label { font-size: 9px; letter-spacing: 1px; margin-bottom: 2px; font-weight: 600; }
#comp-form-div .campo-input { padding: 5px 8px; font-size: 12px; background: white; color: #1e293b; border: 1px solid #e2e8f0; }
#comp-form-div textarea.campo-input { padding: 5px 8px; }
#comp-form-div .forn-box { border: 1px solid #e2e8f0; border-radius: 4px; padding: 12px; background: #f8fafc; }
#comp-form-div .forn-box-tit { font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 1px; color: var(--azul); margin-bottom: 8px; }


/* ═══════════ 📈 VENDAS — cadastro de cliente (#form-cliente) ═══════════ */
/* s474b — cadastro de Clientes no visual dos blocos da Receita Federal (denso).
   Escopado em #form-cliente p/ não afetar nenhuma outra tela. */
#form-cliente .campo-label { font-size: 9px; letter-spacing: 1px; margin-bottom: 2px; font-weight: 600; }
#form-cliente .campo-input { padding: 5px 8px; font-size: 12px; background: white; color: #1e293b; border: 1px solid #e2e8f0; }
#form-cliente textarea.campo-input { padding: 5px 8px; }
#form-cliente .cli-box { border: 1px solid #e2e8f0; border-radius: 4px; padding: 12px; background: #f8fafc; }
#form-cliente .cli-box-tit { font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 1px; color: var(--azul); margin-bottom: 8px; }
/* s577 — Completude ao vivo no formulário: campo faltante fica amarelo e
   perde a marcação conforme é preenchido (mesma regra do relatório 📋). */
#form-cliente .cpl-falta { background: #fef9c3 !important; border-color: #f59e0b !important; }


/* ═══════════ 🛒 COMPRAS — filtros da lista de fornecedores (#forn-filtros) ═══════════ */
/* s281 — opções dos filtros de Fornecedores legíveis (texto escuro no dropdown
   aberto; o select fechado mostra texto branco sobre o fundo azul da barra). */
#forn-filtros select option { color:#1e293b; }
/* s284 — caixas dos filtros mais baixas (~metade): a classe global .campo-input
   tem padding 14px; aqui no #forn-filtros encolhe só nesta barra. */
#forn-filtros .campo-input { padding:5px 8px; }


/* ═══════════ 📈 VENDAS — filtros de status das Propostas (#filtros-status-proposta) ═══════════ */
/* s435h — filtros de status das Propostas como ABAS (padrão do menu principal):
   texto apagado → acende no hover → selecionado laranja com risco embaixo.
   (s522/s522b tentaram abas maiores e depois pílulas; o usuário preferiu o
   original — revertido em s522c.) */
/* s849f — os painéis 📋 Solicitações de Cotação (#scot-pills) e 💡 Oportunidades
   (#opn-pills) abrem dentro das Propostas e usam o mesmo visual de abas. */
#filtros-status-proposta .btn-filtro-status,
#scot-pills .btn-filtro-status,
#opn-pills .btn-filtro-status {
  padding:4px 6px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,0.55);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.5px;
  text-transform:uppercase;
  cursor:pointer;
  border-bottom:2px solid transparent;
  border-radius:0;
  transition:all 0.2s;
}
#filtros-status-proposta .btn-filtro-status:hover,
#scot-pills .btn-filtro-status:hover,
#opn-pills .btn-filtro-status:hover { color:rgba(255,255,255,0.9); }
#filtros-status-proposta .btn-filtro-status.ativo,
#scot-pills .btn-filtro-status.ativo,
#opn-pills .btn-filtro-status.ativo { color:var(--laranja); border-bottom-color:var(--laranja); }
/* s849f — "← PROPOSTAS": volta ao menu anterior; branco e separado das abas por uma linha */
#scot-pills .btn-painel-voltar,
#opn-pills .btn-painel-voltar { color:#fff; font-weight:700; margin-left:8px; padding-left:12px; border-left:1px solid rgba(255,255,255,0.3); }
#scot-pills .btn-painel-voltar:hover,
#opn-pills .btn-painel-voltar:hover { color:var(--laranja); }


/* ═══════════ 🔀 VÁRIOS — painéis de filtro e barras de busca (Propostas · Pedidos · OCs · Cotações · Fornecedores · Clientes · Pipeline · Agenda · Produção) ═══════════ */
/* s435j — o padrão global "input,select { font-size:15px !important }" atropelava
   os tamanhos inline dos campos dos filtros; força o compacto nos painéis de
   filtro (s435k: estendido a Pedidos, OCs, Cotações e Fornecedores). */
#painel-filtros-prop input, #painel-filtros-prop select,
#painel-filtros-ped input,  #painel-filtros-ped select,
#painel-filtros-oc input,   #painel-filtros-oc select,
#painel-filtros-cot input,  #painel-filtros-cot select,
#forn-filtros input,        #forn-filtros select { font-size: 10px !important; }
#painel-filtros-prop label, #painel-filtros-ped label, #painel-filtros-oc label,
#painel-filtros-cot label { font-size: 8px !important; }
/* s522 — a busca fixa das Propostas ganha corpo (vence o compacto acima) */
#filtro-prop-busca { font-size: 12px !important; padding: 8px 10px !important; }

/* s435n — mesmos 15px forçados escondidos em outras barras de busca/filtro:
   Clientes (pesquisa), Pipeline, Agenda (dropdown responsável), Calendário de
   Vendas (data) e Produção (busca). Fonte compacta de verdade nesses campos. */
#pesq-termo, #pesq-resp, #pesq-status, #pesq-filtro-especial,
#pip-busca, #pip-resp, #agd-filtro-resp, #vc-data, #prod-busca { font-size: 10px !important; }
#pesq-termo { padding: 8px 12px !important; }
#pesq-resp, #pesq-status, #pesq-filtro-especial { padding: 8px 10px !important; }
/* s435u — selects inline da lista de Clientes (Status e Responsável): 12px reais */
.cli-sel-inline { font-size: 12px !important; }

/* ═══════════ 🛒 COMPRAS — Custo de Importação (Finimp, numerários, prestadores) ═══════════ */
/* s448c/s448d — selects do Finimp (Custo de Importação, Sim/Não + banco): 10px reais (o global de 15px atropelava o inline) */
#imp-fin-ativo, #imp-fin-banco { font-size: 10px !important; }
/* s451b — campos de dólar e de data do Bloco 5 (Finimp): 10px reais */
#imp-hedge, #imp-fin-juros-dolar, #imp-fin-ir-dolar, #imp-fin-comissao-dolar,
#imp-fin-datapag, #imp-fin-juros-data, #imp-fin-ir-data, #imp-fin-comissao-data { font-size: 10px !important; }
/* s452d — linha Data do Contrato / Processo Finimp/AGE / Emissão Swift / Prazo: sem caixa alta + tudo 12px */
#imp-fin-strip label { text-transform: none !important; font-size: 12px !important; letter-spacing: 0 !important; }
#imp-fin-strip input { font-size: 12px !important; }
/* s453b — Prazo derivado: negrito em 12px */
#out-fin-dias { font-size: 12px !important; font-weight: 700 !important; }
/* s451c — Bloco 5: % e US$ dos 3 componentes em 10px; linhas do "+ adicionar taxas" (descrição e valor) em 12px */
#imp-fin-juros-pct, #imp-fin-ir-pct, #imp-fin-comissao-pct,
#imp-fin-juros-usd, #imp-fin-ir-usd, #imp-fin-comissao-usd { font-size: 10px !important; }
#imp-fin-extras-body input { font-size: 12px !important; }
#imp-fin-extras-body input[type=date] { font-size: 10px !important; } /* s453f — data da taxa extra igual às demais datas */
/* s460j — Numerários antecipados: campos dos pagtos no mesmo tamanho do Bloco 5 */
/* s547c — pagtos dos prestadores do Bloco 3 (despachante + frete nacional) e
   os dropdowns de prestador: fonte 10px (o padrão global de 15px atropelava
   o estilo inline por causa do !important) */
#imp-ax-pagtos input, #imp-fx-pagtos input { font-size: 10px !important; }
#imp-desp-forn, #imp-fret-transp, #imp-desp-forma, #imp-fret-forma { font-size: 10px !important; }


/* ═══════════ 📈 VENDAS — filtros de status dos Pedidos (#filtros-status-pedido) ═══════════ */
/* s435k — filtros de status dos Pedidos como abas (espelho do s435h de Propostas) */
#filtros-status-pedido .btn-filtro-status-ped {
  padding:4px 6px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,0.55);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.5px;
  text-transform:uppercase;
  cursor:pointer;
  border-bottom:2px solid transparent;
  border-radius:0;
  transition:all 0.2s;
}
/* barra dos Pedidos é VERDE → o selecionado fica BRANCO (laranja briga com o verde) */
#filtros-status-pedido .btn-filtro-status-ped:hover { color:rgba(255,255,255,0.95); }
#filtros-status-pedido .btn-filtro-status-ped.ativo { color:#fff; border-bottom-color:#fff; font-weight:700; }


/* ═══════════ 🛒 COMPRAS — abas de status de OCs e Solicitações de Cotação (.pill-tab · #oc-status-bar · #ccv-status-bar) ═══════════ */
/* s435m — filtros de status de OCs e Cotações como abas em FUNDO BRANCO (s737b: #cot-status-bar saiu com a tela antiga):
   cinza apagado → escurece no hover → laranja selecionado com risco embaixo. */
.pill-tab {
  padding:4px 6px;
  border:none;
  background:transparent;
  color:#64748b;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.5px;
  text-transform:uppercase;
  cursor:pointer;
  border-bottom:2px solid transparent;
  border-radius:0;
  transition:all 0.2s;
}
.pill-tab:hover { color:#1e293b; }
.pill-tab.ativo { color:var(--laranja); border-bottom-color:var(--laranja); font-weight:700; }

/* s435p — linha de STATUS de OCs/Cotações em BARRA AZUL (padrão Proposta/Pedido):
   título à esquerda + abas de status translúcidas, laranja quando selecionada. */
#oc-status-bar, #ccv-status-bar { /* s735d — + Solicitações de Cotação (Compras) */
  background:linear-gradient(135deg,var(--azul),var(--azul-medio));
  border-radius:4px;
  padding:12px 18px;
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:16px;
}
#oc-status-bar .pill-tab, #ccv-status-bar .pill-tab { color:rgba(255,255,255,0.55); }
#oc-status-bar .pill-tab:hover, #ccv-status-bar .pill-tab:hover { color:rgba(255,255,255,0.9); }
#oc-status-bar .pill-tab.ativo, #ccv-status-bar .pill-tab.ativo { color:var(--laranja); border-bottom-color:var(--laranja); }


/* ═══════════ 🏭 ESTOQUE — Mapa do Estoque: menu volta a rolar (body.nav-livre) ═══════════ */
/* s371 — exceção (opção B): no Mapa do Estoque o card s319b já gruda sob o
   header ocupando a tela toda; lá o menu volta a rolar como antes. A classe
   nav-livre é ligada/desligada em abaProducao (global.js). */
body.nav-livre .nav-tabs { position: static; }


/* ═══════════ 📈 VENDAS — proposta aberta na lista (tr.prop-aberta*) ═══════════ */
/* s374d — proposta ABERTA na lista: destaca o bloco inteiro (linha + painel)
   com um leve sombreamento por cima do fundo de status e uma moldura azul
   em cima/embaixo, pra separar do resto da lista. Classes ligadas/desligadas
   em _propRowToggle (propostas.js). */
tr.prop-aberta td { box-shadow: inset 0 0 0 999px rgba(30,58,95,0.06); }
tr.prop-aberta-main td { border-top: 2px solid var(--azul) !important; }
tr.prop-aberta-det td { border-bottom: 2px solid var(--azul); }

/* ═══════════ 📋 SOLICITAÇÕES DE COTAÇÃO — Vendas (#scot-painel) e Compras (#comp-scot-div) · s731 ═══════════ */
/* Classes `scot-*` compartilhadas pelas duas telas (propostas_cotacoes.js e
   compras_cotacoes_vendas.js). Layout aprovado em 14/09 (artefatos v2/v1). */
.scot-badge-menu { display:none; margin-left:6px; background:#dc2626; color:#fff; font-size:10px; font-weight:700; min-width:17px; height:17px; line-height:17px; text-align:center; border-radius:9px; padding:0 5px; vertical-align:middle; }
.scot-badge { display:inline-block; margin-left:5px; background:#dc2626; color:#fff; font-size:10px; font-weight:700; min-width:17px; height:17px; line-height:17px; text-align:center; border-radius:9px; padding:0 5px; vertical-align:middle; }
.scot-tag { display:inline-block; padding:1px 7px; border-radius:2px; font-size:9px; font-weight:600; letter-spacing:1px; color:#fff; margin-left:5px; vertical-align:middle; }
.scot-chips { display:flex; flex-wrap:wrap; gap:4px; }
.scot-chip { display:inline-block; padding:1px 9px; border-radius:10px; font-size:11px; font-weight:600; white-space:nowrap; }
.scot-tempo { font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600; font-size:12px; }
.scot-tempo.ok { color:#d97706; } .scot-tempo.tarde { color:#dc2626; } .scot-tempo.fim { color:#94a3b8; font-weight:500; }
.scot-ico { padding:6px 9px; background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; border-radius:3px; cursor:pointer; font-size:14px; line-height:1; font-family:inherit; }
.scot-btn { border:0; border-radius:3px; padding:9px 16px; font:700 11px/1 'Barlow',sans-serif; letter-spacing:1px; text-transform:uppercase; cursor:pointer; }
.scot-btn.scot-mini { padding:7px 11px; font-size:10px; }
.scot-btn-cta { background:linear-gradient(135deg,var(--laranja),var(--laranja-claro)); color:#fff; }
.scot-btn-2 { background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }
.scot-btn-ok { background:#16a34a; color:#fff; }
.scot-btn:disabled { opacity:.5; cursor:not-allowed; }
.scot-nota { font-size:12px; color:#475569; margin-top:10px; }
.scot-th { padding:9px 12px; text-align:left; font-size:10px; color:#475569; letter-spacing:1px; text-transform:uppercase; font-weight:700; white-space:nowrap; }
.scot-det-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; align-items:start; }
.scot-det-tit { font-size:11px; color:#475569; letter-spacing:1px; text-transform:uppercase; font-weight:700; margin-bottom:6px; }   /* s733 — título de bloco no detalhe (💡 oportunidades) */
@media (max-width: 900px) { .scot-det-grid { grid-template-columns:1fr; } }
.scot-caixa { background:#fff; border:1px solid #e2e8f0; border-radius:4px; overflow:hidden; }
.scot-caixa h4 { margin:0; padding:8px 12px; background:#e2e8f0; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#475569; }
.scot-hist { list-style:none; margin:0; padding:10px 12px; display:grid; gap:7px; font-size:12px; }
.scot-hist li { display:grid; grid-template-columns:96px 1fr; gap:8px; align-items:start; }
.scot-hist time { color:#94a3b8; font-variant-numeric:tabular-nums; white-space:nowrap; font-size:11px; }
.scot-ev-ciencia { color:#7c3aed; } .scot-ev-alerta { color:#dc2626; }
.scot-resp-ok { color:#16a34a; font-weight:700; } .scot-resp-nao { color:#dc2626; font-weight:700; } .scot-resp-esp { color:#d97706; font-weight:600; }
.scot-resp-ok small, .scot-resp-nao small, .scot-resp-esp small { display:block; color:#475569; font-weight:500; font-size:11px; }
.scot-etapas { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; font-size:12px; }
.scot-etapa { padding:4px 10px; border-radius:3px; background:#fff; border:1px solid #e2e8f0; color:#475569; }
.scot-etapa.feita { border-color:#bbf7d0; background:#f0fdf4; color:#16a34a; font-weight:600; }
.scot-item { padding:12px; border-top:1px solid #f1f5f9; display:grid; grid-template-columns:250px minmax(0,1fr); gap:12px; align-items:start; }
@media (max-width: 760px) { .scot-item { grid-template-columns:1fr; } }
.scot-mat { font-weight:700; color:#1e293b; }
.scot-mat small { display:block; font-weight:500; color:#475569; font-size:12px; margin-top:2px; }
.scot-custo { margin-top:10px; padding:10px; border:1px dashed #c4b5fd; background:#f5f3ff; border-radius:4px; }
.scot-custo-lbl { font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#7c3aed; font-weight:700; margin-bottom:8px; }
/* o padrão global "input,select { font-size:15px !important }" atropela os campos compactos das duas telas (mesmo motivo do s435j) */
#scot-painel input, #scot-painel select, #scot-painel textarea,
#comp-scot-div input, #comp-scot-div select, #comp-scot-div textarea { font-size: 13px !important; }
/* s731b — Bloco 2: faixas no form da proposta, painel da lista, modais e os cards 🤝 do Compras */
.scot-faixa { padding:10px 14px; border-radius:4px; font-size:13px; margin-bottom:14px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; line-height:1.5; }
#prop-conf-faixa { background:#f0fdfa; border:1px solid #99f6e4; color:#0f766e; }
#prop-cot-faixa { background:#f5f3ff; border:1px solid #ddd6fe; color:#5b21b6; }
.scot-prop-painel { font-size:12px; color:#475569; margin:0 0 8px; display:grid; gap:3px; line-height:1.5; }
.scot-modal-overlay { position:fixed; inset:0; z-index:10015; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.scot-modal { background:#fff; border-radius:8px; max-width:680px; width:100%; max-height:92vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.4); font-family:'Barlow',sans-serif; }
.scot-modal-h { color:#fff; padding:14px 20px; font-family:'Bebas Neue',sans-serif; font-size:17px; letter-spacing:3px; }
.scot-modal-b { padding:16px 20px; font-size:13px; color:#1e293b; }
.scot-modal-f { padding:0 20px 16px; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.scot-card { border:1px solid #e2e8f0; border-radius:6px; margin-bottom:14px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.scot-card-h { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; padding:10px 12px; background:#f0fdfa; border-bottom:1px solid #ccfbf1; font-size:13px; color:#134e4a; }
.scot-card-f { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px; background:#f8fafc; border-top:1px solid #e2e8f0; }
.scot-fin { display:inline-block; padding:4px 10px; border-radius:3px; font-size:11px; font-weight:700; letter-spacing:.5px; white-space:nowrap; }
.scot-fin.ok { background:#dcfce7; color:#15803d; } .scot-fin.esp { background:#fffbeb; color:#b45309; } .scot-fin.nao { background:#fef2f2; color:#dc2626; }
.scot-cancel { background:#fef2f2; border:1px solid #fecaca; border-radius:4px; padding:8px 10px; color:#991b1b; }

/* ═══════════ 🏭 PRODUÇÃO — Registrar Tarefas: lista de funcionários (s831) ═══════════ */
/* A linha de quem tem TAREFA NOVA pisca em amarelo até ele entrar com o PIN e
   iniciar; em execução fica verde fixo; pausado, laranja fixo. Classes ligadas
   em _cfRenderSelecaoFuncionario (chao_fabrica.js). */
@keyframes cfPiscaNova { 0%, 100% { background:#fde047; } 50% { background:#fef9c3; } }
.cf-linha { width:100%; text-align:left; border:1px solid #e2e8f0; border-radius:6px; padding:14px 16px; background:#fff;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; cursor:pointer; font-family:inherit; }
.cf-linha:hover { border-color:#94a3b8; }
.cf-linha .cf-nome { font-size:16px; font-weight:700; color:#1e293b; }
.cf-linha .cf-oque { font-size:13px; color:#334155; font-weight:600; }
.cf-linha.nova { animation: cfPiscaNova 1.1s ease-in-out infinite; border-color:#eab308; }
.cf-linha.nova .cf-nome { color:#713f12; font-weight:800; }
.cf-linha.executando { background:#bbf7d0; border-color:#22c55e; }
.cf-linha.pausado { background:#fed7aa; border-color:#f97316; }