/* ==========================================================================
HUB do módulo (/comercial) — os botões que abrem as telas.
Reusa o design system global (.painel-page/.painel-intro/.painel-grupo-grid/
.painel-item/.painel-item-arrow/.painel-item-lock do style.css); aqui só os
modificadores, escopados por #comercialRoot. Mesmo desenho do hub de Compras.
========================================================================== */
/* Os hubs que usam este desenho: Comercial (a origem), Global Qomex e
Patrimônio. Estavam escopados só em #comercialRoot, e os outros dois hubs
saíam sem ícone e sem descrição alinhada (visto em 07/09/2026). Hub novo com
`cmh-*`: acrescente a raiz aqui. */
#comercialRoot a.painel-item, #globalqomexRoot a.painel-item, #patrimonioRoot a.painel-item{text-decoration:none;color:inherit}
#comercialRoot .cmh-item, #globalqomexRoot .cmh-item, #patrimonioRoot .cmh-item{align-items:flex-start;padding:18px 20px}
#comercialRoot .cmh-icon, #globalqomexRoot .cmh-icon, #patrimonioRoot .cmh-icon{width:36px;height:36px;flex-shrink:0;color:var(--accent-dark,var(--accent))}
#comercialRoot .cmh-icon svg, #globalqomexRoot .cmh-icon svg, #patrimonioRoot .cmh-icon svg{width:100%;height:100%}
#comercialRoot .cmh-content, #globalqomexRoot .cmh-content, #patrimonioRoot .cmh-content{flex:1;min-width:0}
#comercialRoot .cmh-desc, #globalqomexRoot .cmh-desc, #patrimonioRoot .cmh-desc{font-size:12px;color:var(--text-secondary);line-height:1.5;margin-top:4px}
/* ==========================================================================
Intranet Quanthus — COMERCIAL · quadros em kanban
Serve as DUAS telas do módulo — Funil de vendas (#cmRoot) e Desenvolvimento
de produto (#cpRoot) — de propósito: as classes `cm-*` são a família visual
comum, e um arquivo só evita que as duas telas desandem uma da outra. O que é
próprio do produto usa prefixo `cp-` e está no fim do arquivo.
Desenho irmão do kanban do Comex (public/css/comex/controle.css): mesmas
medidas de coluna, card, modal split e a MESMA régua de etapas (chevrons).
O que muda é o prefixo (`cm-` em vez de `cx-`) e as cores das colunas, que
chegam inline do JS em --pc.
PONTE DE TOKENS: as vars da direita vêm de /businessunit/themecss e MUDAM
com a BU ativa — é o que faz o quadro acompanhar a cor da BU.
========================================================================== */
.cm-scope,
/* Meu Escritório usa as mesmas classes fora do .cm-scope (18/09/2026) */
.page-tarefas{
--ink: var(--text-primary);
--text-2: var(--text-secondary);
--surface: var(--card-bg);
--surface-2: var(--column-bg);
--border: var(--card-border);
--shadow-hov: var(--shadow-hover);
--navy: var(--accent-dark);
--cyan: var(--accent);
--ok: #1f9d78;
--warn: #d98a1f;
--danger: #c0392b;
--frio: #2f6fd6;
--quente: #c0392b;
--font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
}
.cm-scope{height:100%}
.cm-app{display:flex;flex-direction:column;height:calc(100vh - 64px - 40px);min-height:520px}
/* ---------- cabeçalho ---------- */
.cm-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
padding:0 2px 12px;border-bottom:1px solid var(--border);margin-bottom:12px;flex-shrink:0}
.cm-sub{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;
color:var(--text-2);padding-top:6px}
.cm-stats{display:flex;align-items:center;gap:18px}
.cm-s{text-align:right;line-height:1.05}
.cm-s b{display:block;font-family:var(--font-title);font-weight:700;font-size:20px;color:var(--navy)}
.cm-s span{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-2)}
.cm-filtros{display:flex;align-items:center;gap:8px}
/* pesquisa universal: um campo so, com lupa e limpar (molde do Pipefy) */
.cm-busca-caixa{position:relative;display:flex;align-items:center}
.cm-busca-ico{position:absolute;left:10px;color:var(--text-2);pointer-events:none}
.cm-busca{width:330px;height:32px;padding:0 30px;font-size:12.5px;color:var(--ink);
background:var(--surface);border:1px solid var(--border);border-radius:8px}
.cm-busca::-webkit-search-cancel-button{display:none}
.cm-busca:focus{outline:none;border-color:var(--cyan);width:400px;
box-shadow:0 0 0 3px rgba(25,227,214,.16)}
.cm-busca-x{position:absolute;right:6px;width:20px;height:20px;border-radius:6px;cursor:pointer;
display:grid;place-items:center;font-size:10px;color:var(--text-2);
background:var(--surface-2);border:1px solid var(--border)}
.cm-busca-x:hover{color:#fff;background:var(--text-2)}
.cm-busca-x[hidden]{display:none}
/* linha de resultado da pesquisa */
.cm-resultado{margin:0 0 10px;padding:7px 11px;flex-shrink:0;
border:1px solid var(--cyan);border-radius:8px;background:rgba(25,227,214,.07);
font-size:11.5px;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cm-resultado[hidden]{display:none}
.cm-resultado b{font-family:var(--font-mono);font-weight:700}
.cm-resultado i{font-style:normal;font-weight:600}
.cm-resultado-nota{margin-left:auto;font-size:10.5px;color:var(--text-2);font-style:italic}
.cm-sel{height:30px;padding:0 8px;font-size:12px;color:var(--ink);
background:var(--surface);border:1px solid var(--border);border-radius:8px}
.cm-aviso{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:7px 11px;
border:1px dashed var(--warn);border-radius:8px;background:rgba(217,138,31,.07);
font-size:11.5px;color:var(--ink);flex-shrink:0}
.cm-aviso b{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--warn)}
/* ---------- quadro ---------- */
.cm-board{display:flex;gap:12px;flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;
padding-bottom:8px;scrollbar-width:thin}
.cm-board::-webkit-scrollbar{height:9px}
.cm-board::-webkit-scrollbar-thumb{background:#c8d0cc;border-radius:6px}
.cm-col{flex:0 0 262px;width:262px;display:flex;flex-direction:column;min-height:0;
background:var(--surface-2);border:1px solid var(--border);border-radius:12px}
.cm-col-head{display:flex;align-items:center;gap:8px;padding:9px 12px;flex-shrink:0;
border-bottom:1px solid var(--border);border-top:3px solid var(--pc,var(--navy));
border-radius:12px 12px 0 0;background:var(--surface)}
.cm-col-dot{width:8px;height:8px;border-radius:50%;background:var(--pc,var(--navy));flex-shrink:0}
.cm-col-name{flex:1;font-family:var(--font-title);font-weight:700;font-size:13px;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-col-count{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-2);
background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:1px 8px}
.cm-col-dono{padding:0 12px 8px;background:var(--surface);border-bottom:1px solid var(--border);
font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;
color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-col-body{flex:1;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:9px;
scrollbar-width:thin}
.cm-col-body::-webkit-scrollbar{width:8px}
.cm-col-body::-webkit-scrollbar-thumb{background:#d3dbd7;border-radius:6px}
.cm-col-vazia{font-size:11px;color:var(--text-2);text-align:center;padding:14px 6px;
border:1px dashed var(--border);border-radius:8px}
/* + Nova oportunidade (só na Prospecção: é a boca do funil) */
.cm-add{padding:8px;font-size:11.5px;font-weight:600;color:var(--pc,var(--navy));cursor:pointer;
background:var(--surface);border:1px dashed var(--pc,var(--navy));border-radius:9px;flex-shrink:0}
.cm-add:hover{background:rgba(108,76,214,.06)}
.cm-col--espera .cm-col-head{background:
repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.035) 6px 12px),var(--surface)}
.cm-col--espera .cm-col-name::after{content:" ⏳";font-size:11px}
.cm-col--fim{opacity:.86}
.cm-col--fim .cm-col-head{filter:grayscale(.35)}
.cm-col--drop{box-shadow:inset 0 0 0 2px var(--cyan)}
.cm-col--drop .cm-col-body{background:rgba(25,227,214,.06)}
/* ---------- card ---------- */
.cm-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:10px;
box-shadow:var(--shadow);cursor:pointer;transition:box-shadow .15s,border-color .15s;
border-left:3px solid var(--pc,var(--navy))}
.cm-card:hover{box-shadow:var(--shadow-hov);border-color:#cfd8d4}
.cm-card:focus-visible{outline:none;border-color:var(--cyan);box-shadow:0 0 0 2px rgba(25,227,214,.25)}
.cm-card--dragging{opacity:.45}
.cm-card--fim{filter:grayscale(.55);opacity:.72}
.cm-card--fim:hover{filter:grayscale(.2);opacity:1}
/* mini-régua no topo do card, só nas colunas de espera: reta + um ponto por
etapa da outra área. Aceso até a etapa atual, cinza depois. O nome da etapa
está no title de cada ponto. */
.cm-tl{position:relative;display:flex;align-items:center;justify-content:space-between;
padding:9px 12px 3px;margin-bottom:-3px}
.cm-tl-linha{position:absolute;left:12px;right:12px;top:13px;height:2px;border-radius:2px;
background:var(--border)}
.cm-tl-linha i{display:block;height:100%;border-radius:2px;background:var(--pc,var(--navy));
transition:width .18s}
.cm-tl-pt{position:relative;z-index:1;width:7px;height:7px;border-radius:50%;flex-shrink:0;
background:var(--surface);border:2px solid var(--border);cursor:help;transition:.15s}
.cm-tl-pt.is-on{background:var(--pc,var(--navy));border-color:var(--pc,var(--navy))}
.cm-tl-pt.is-on:last-of-type,.cm-tl-pt.is-on + .cm-tl-pt:not(.is-on){box-shadow:none}
/* a etapa ATUAL é o último ponto aceso: ganha um anel para se destacar */
.cm-tl-pt.is-on:not(:has(~ .cm-tl-pt.is-on)){width:9px;height:9px;
box-shadow:0 0 0 3px color-mix(in srgb, var(--pc,var(--navy)) 22%, transparent)}
.cm-tl-pt:hover{transform:scale(1.35)}
/* régua de TEMPERATURA (colunas do comercial): mesma linguagem da régua de
espera, com a escala do frio ao quente e pontos clicáveis no próprio card. */
/* a regua inteira e a area de arraste: touch-action:none impede o navegador de
entender o gesto como rolagem/arraste do card no toque */
.cm-tl--temp{padding:11px 12px 7px;margin:-2px 0 -4px;cursor:grab;touch-action:none;
border-radius:8px;transition:background .12s}
.cm-tl--temp:hover{background:rgba(0,0,0,.03)}
.cm-tl--temp.is-arrastando{cursor:grabbing;background:rgba(0,0,0,.05)}
.cm-tl--temp.is-arrastando .cm-tl-pt{transition:none}
/* alvo de toque maior que o ponto desenhado, sem mudar o desenho */
.cm-tl-pt--btn{position:relative}
.cm-tl-pt--btn::after{content:"";position:absolute;inset:-8px -10px}
.cm-tl--temp .cm-tl-pt{border-color:#c9d1ce}
.cm-tl-pt--btn{cursor:pointer;padding:0}
.cm-tl-pt--btn.is-on{background:var(--pt);border-color:var(--pt)}
.cm-tl-pt--btn:hover{transform:scale(1.5)}
.cm-tl-pt--btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* o ponto ATUAL é o último aceso: anel na cor dele */
.cm-tl--temp .cm-tl-pt.is-on:not(:has(~ .cm-tl-pt.is-on)){width:10px;height:10px;
box-shadow:0 0 0 3px color-mix(in srgb, var(--tc) 25%, transparent)}
.cm-tl-nome{position:absolute;right:12px;top:-1px;font-family:var(--font-mono);
font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
background:var(--surface);padding:0 3px}
.cm-card-head{display:flex;align-items:center;gap:6px;padding:8px 10px 4px}
.cm-card-code{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
/* antes de Cotação o card não tem número: fica só o nome da etapa, apagado */
.cm-card-code.is-sem{color:var(--text-2);font-weight:400;font-size:8.5px;letter-spacing:.12em}
.cm-card-bu{margin-left:auto;font-family:var(--font-mono);font-size:9px;font-weight:700;
letter-spacing:.06em;color:var(--navy);background:var(--surface-2);
border:1px solid var(--border);border-radius:5px;padding:1px 5px}
.cm-card-cliente{display:flex;align-items:center;gap:5px;padding:0 10px}
.cm-card-cliente-nome{font-family:var(--font-title);font-weight:700;font-size:12.5px;color:var(--ink);
line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* O assunto para em DUAS linhas, com reticências (23/09/2026). Havia card com
seis linhas de reclamação, e a miniatura existe para caber MUITOS cards na
coluna — quem precisa ler a reclamação inteira abre o card. */
.cm-card-title{padding:2px 10px 0;font-size:11.5px;color:var(--text-2);line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;text-overflow:ellipsis}
.cm-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:7px 10px 9px}
.cm-chip{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--text-2);
background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:2px 6px;white-space:nowrap}
.cm-chip--valor{color:var(--ink)}
.cm-chip--espera{color:#0f6d64;background:rgba(15,155,142,.12);border-color:rgba(15,155,142,.35)}
.cm-chip--parado{color:#8a4a12;background:rgba(217,138,31,.14);border-color:rgba(217,138,31,.4)}
.cm-chip--parado.is-alto{color:#fff;background:var(--danger);border-color:var(--danger)}
/* temperatura: mesma escala de cor da régua do modal */
.cm-chip--temp[data-temp="0"]{color:#fff;background:#2f6fd6;border-color:#2f6fd6}
.cm-chip--temp[data-temp="1"]{color:#fff;background:#3f9bb5;border-color:#3f9bb5}
.cm-chip--temp[data-temp="2"]{color:#fff;background:#d98a1f;border-color:#d98a1f}
.cm-chip--temp[data-temp="3"]{color:#fff;background:#c0392b;border-color:#c0392b}
.cm-resp{margin-left:auto;width:22px;height:22px;border-radius:50%;flex-shrink:0;
display:grid;place-items:center;background:var(--navy);color:var(--cyan);
font-family:var(--font-mono);font-size:9.5px;font-weight:700}
.cm-card-acao{display:flex;align-items:baseline;gap:5px;padding:0 10px 9px;
font-size:10.5px;color:var(--text-2);line-height:1.25}
.cm-card-acao b{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;
text-transform:uppercase;color:var(--pc,var(--navy));flex-shrink:0}
.cm-card-badge{margin-left:2px}
/* selo da pesquisa: diz em que campo invisivel o termo casou */
.cm-achado{margin:0 10px 8px;padding:3px 6px;border-radius:6px;
background:rgba(25,227,214,.14);border:1px solid rgba(25,227,214,.5);
font-family:var(--font-mono);font-size:9px;text-transform:uppercase;
letter-spacing:.06em;color:#0f6d64}
/* corrente partida: cliente fora do cadastro do QMob */
.cm-quebrado{display:inline-grid;place-items:center;color:var(--danger);flex-shrink:0}
.cm-quebrado--campo{position:absolute;right:9px;top:50%;transform:translateY(-50%)}
/* ---------- modal ---------- */
.cm-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px}
.cm-modal[hidden]{display:none}
.cm-modal-overlay{position:absolute;inset:0;background:rgba(6,16,31,.55);opacity:0;transition:opacity .18s}
.cm-modal.open .cm-modal-overlay{opacity:1}
/* ALTURA FIXA: expandir ou retrair uma etapa não muda mais o tamanho do modal —
o que cresce é o scroll interno (.cm-modal-body). */
.cm-modal-dialog{position:relative;width:100%;max-width:1240px;
height:calc(100vh - 48px);max-height:860px;
display:flex;flex-direction:column;overflow:hidden;background:var(--surface);
border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 60px rgba(6,16,31,.35);
transform:translateY(8px);opacity:0;transition:transform .18s,opacity .18s}
.cm-modal.open .cm-modal-dialog{transform:none;opacity:1}
.cm-modal-inner{display:flex;flex:1;min-height:0;overflow:hidden}
.cm-modal-split{display:grid;grid-template-columns:340px 1fr;flex:1;min-height:0;width:100%;overflow:hidden}
.cm-modal-right{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.cm-modal-head{display:flex;align-items:flex-start;gap:12px;padding:14px 16px 10px;flex-shrink:0}
.cm-modal-code{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--text-2)}
.cm-modal-title{font-family:var(--font-title);font-weight:700;font-size:17px;color:var(--ink);line-height:1.2}
.cm-modal-cli{font-size:12px;color:var(--text-2);margin-top:2px}
.cm-modal-acts{margin-left:auto;display:flex;align-items:center;gap:8px}
.cm-modal-close,.cm-nav{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;cursor:pointer;
font-size:13px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border)}
.cm-modal-close:hover,.cm-nav:hover{color:var(--ink);border-color:#cfd8d4}
.cm-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:44px;z-index:2;
background:var(--surface);font-size:16px}
.cm-nav--prev{left:-46px}
.cm-nav--next{right:-46px}
.cm-nav[hidden]{display:none}
/* botão de agenda (contatos do cliente) */
.cm-agenda{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;cursor:pointer;
font-size:11.5px;color:var(--ink);background:var(--surface-2);
border:1px solid var(--border);border-radius:8px;max-width:230px}
.cm-agenda:hover{border-color:var(--cyan)}
.cm-agenda-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-agenda-n{font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:var(--text-2)}
/* sem contato nenhum: vermelho */
.cm-agenda.is-vazia{color:var(--danger);border-color:var(--danger);background:rgba(192,57,43,.06)}
/* ---------- régua de etapas (mesma peça do comex) ---------- */
.cm-modal-meta{display:flex;align-items:stretch;padding:2px 16px 12px;flex-shrink:0}
.cm-ruler{display:flex;flex:1;min-width:0;gap:2px;align-items:stretch}
.cm-ruler-seg{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
justify-content:center;min-height:44px;padding:6px 13px 6px 20px;text-align:center;background:var(--surface-2);
transition:background .15s;
clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%)}
.cm-ruler-seg:first-child{padding-left:12px;
clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%)}
.cm-ruler-seg:last-child{padding-right:12px;
clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 11px 50%)}
.cm-ruler-name{font-family:var(--font-mono);font-size:8.5px;line-height:1.15;text-transform:uppercase;
letter-spacing:.02em;word-break:break-word}
.cm-ruler-seg--pending{background:var(--surface-2)}
.cm-ruler-seg--pending .cm-ruler-name{color:var(--text-2)}
.cm-ruler-seg--done{background:#dcf1e5}
.cm-ruler-seg--done .cm-ruler-name{color:#2f9e6a;font-weight:600}
.cm-ruler-seg--current{background:var(--pc,var(--navy))}
.cm-ruler-seg--current .cm-ruler-name{color:#fff;font-weight:700}
.cm-ruler-mvs{display:flex;gap:6px;margin-top:5px}
.cm-ruler-mv{width:22px;height:17px;display:grid;place-items:center;cursor:pointer;border:none;border-radius:4px;
background:rgba(255,255,255,.26);color:#fff;font-size:11px;font-weight:700;line-height:1;transition:.12s}
.cm-ruler-mv:hover{background:rgba(255,255,255,.5)}
/* ---------- campos do cabeçalho ---------- */
.cm-gfields{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;padding:0 16px 12px;flex-shrink:0}
.cm-gfields--sec{padding:0}
.cm-f{display:flex;flex-direction:column;gap:3px;min-width:0}
.cm-f--wide{grid-column:1 / -1}
.cm-f--cliente{position:relative}
.cm-f label{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;
letter-spacing:.1em;color:var(--text-2)}
.cm-val{min-height:32px;display:flex;align-items:center;padding:6px 9px;font-size:12.5px;
color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:8px;line-height:1.3}
/* campo travado = cinza de verdade, não editável. Não usa --surface-2 porque
no tema claro ela é quase branca e o campo não parecia travado. */
.cm-val.is-travado{background:rgba(120,130,128,.13);border-color:rgba(120,130,128,.28);
color:var(--text-2);cursor:default}
.cm-val.is-travado.is-clicavel{cursor:pointer}
.cm-val.is-travado.is-clicavel:hover{border-color:var(--cyan);color:var(--ink)}
/* input/textarea/select editáveis usam a mesma caixa */
textarea.cm-input,input.cm-input,select.cm-input{width:100%;font-family:inherit;display:block}
textarea.cm-input{resize:vertical;min-height:38px}
.cm-val:focus{outline:none;border-color:var(--cyan)}
.cm-erro{margin-top:8px;padding:7px 10px;border-radius:8px;font-size:11.5px;
color:#fff;background:var(--danger)}
.cm-erro[hidden]{display:none}
.cm-f-nota{font-size:10px;color:var(--text-2);font-style:italic;line-height:1.3}
/* campo que ainda falta preencher para o card avancar */
.cm-val.is-faltando{border-color:var(--warn);background:rgba(217,138,31,.06)}
/* responsavel comercial no cabecalho do modal (so quando preenchido) */
.cm-resp-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 4px;
font-size:11.5px;color:var(--ink);background:var(--surface-2);
border:1px solid var(--border);border-radius:16px;max-width:210px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-resp-av{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
background:var(--navy);color:var(--cyan);font-family:var(--font-mono);font-size:8.5px;font-weight:700}
/* aviso de trava de etapa */
.cm-flash{margin:0 0 10px;padding:8px 12px;flex-shrink:0;
border:1px solid var(--warn);border-left-width:3px;border-radius:8px;
background:rgba(217,138,31,.1);font-size:12px;color:var(--ink)}
.cm-flash[hidden]{display:none}
/* campo editavel dentro da sanfona da etapa */
.cm-glist--form{grid-template-columns:1fr;margin-bottom:8px}
/* checklist do que destrava a etapa */
.cm-check{padding:8px 9px;border:1px dashed var(--border);border-radius:8px;background:var(--surface-2)}
.cm-check-tit{font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;
letter-spacing:.08em;color:var(--text-2);margin-bottom:5px}
.cm-check-item{font-size:11.5px;color:var(--text-2);line-height:1.5}
.cm-check-item.is-ok{color:var(--ok);font-weight:600}
/* textarea grande do "o que o cliente precisa" */
textarea.cm-ta-grande{min-height:110px;line-height:1.45}
/* anexos: área de escolher arquivos + lista do que foi escolhido */
.cm-drop{display:flex;flex-direction:column;gap:2px;padding:12px;cursor:pointer;text-align:center;
border:1px dashed var(--border);border-radius:9px;background:var(--surface-2)}
.cm-drop:hover{border-color:var(--cyan);background:rgba(25,227,214,.05)}
.cm-drop b{font-size:12px;color:var(--ink)}
.cm-drop span{font-size:10.5px;color:var(--text-2)}
.cm-anexos-lista{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.cm-anexos-lista .cm-anexo i{font-style:normal;color:var(--text-2);font-size:9px}
.cm-anexos-lista .cm-f-nota{width:100%}
/* combobox de cliente */
.cm-combo{position:relative}
.cm-combo-inp{width:100%;padding-right:30px}
.cm-combo-inp.is-novo-cli{border-color:var(--danger)}
.cm-combo-pop{position:absolute;z-index:5;top:calc(100% + 3px);left:0;right:0;max-height:230px;overflow-y:auto;
background:var(--surface);border:1px solid var(--border);border-radius:9px;
box-shadow:0 12px 28px rgba(6,16,31,.18);padding:4px}
.cm-combo-pop[hidden]{display:none}
.cm-combo-op{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:6px 8px;cursor:pointer;
font-size:12px;color:var(--ink);background:none;border:0;border-radius:7px}
.cm-combo-op:hover{background:var(--surface-2)}
.cm-combo-op b{font-weight:600}
.cm-combo-op span{margin-left:auto;font-family:var(--font-mono);font-size:9.5px;color:var(--text-2)}
.cm-combo-op--novo{color:var(--danger);border-top:1px solid var(--border);border-radius:0;margin-top:4px;padding-top:8px;
align-items:flex-start;line-height:1.35}
.cm-combo-op--novo svg{flex-shrink:0;margin-top:1px}
.cm-combo-op--novo span{flex:1}
.cm-combo-nada{padding:8px;font-size:11.5px;color:var(--text-2);font-style:italic}
/* temperatura: régua azul (frio) → vermelho (quente) */
.cm-temp{position:relative;padding:4px 0 2px}
.cm-temp input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:6px;
background:linear-gradient(90deg,var(--frio) 0%,#3f9bb5 33%,var(--warn) 66%,var(--quente) 100%);
border:1px solid var(--border);cursor:pointer}
.cm-temp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
background:var(--surface);border:2px solid var(--ink);cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.cm-temp input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
background:var(--surface);border:2px solid var(--ink);cursor:grab}
.cm-temp-nome{margin-top:3px;font-family:var(--font-title);font-weight:700;font-size:12px;color:var(--ink)}
.cm-temp-marcas{position:absolute;top:8px;left:0;right:0;display:flex;justify-content:space-between;
pointer-events:none;padding:0 6px}
.cm-temp-marcas span{width:2px;height:8px;background:rgba(255,255,255,.55);border-radius:2px}
.cm-temp-marcas span.is-ativo{background:rgba(0,0,0,.35)}
/* ---------- corpo: sanfona + lateral ---------- */
.cm-modal-body{flex:1;min-height:0;overflow-y:auto;padding:0 16px 16px}
.cm-modal-cols{display:grid;grid-template-columns:1fr 250px;gap:14px;align-items:start}
.cm-groups{display:flex;flex-direction:column;gap:6px}
.cm-group{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface-2)}
.cm-group--current{border-color:var(--pc,var(--navy));background:var(--surface)}
.cm-group-head{display:flex;align-items:center;gap:7px;width:100%;text-align:left;padding:7px 9px;
background:none;border:0;cursor:pointer}
.cm-group-mark{width:15px;height:15px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
font-size:9px;line-height:1;color:#fff;background:var(--pc,var(--navy))}
.cm-group--done .cm-group-mark{background:var(--ok)}
.cm-group-name{flex:1;font-family:var(--font-title);font-weight:600;font-size:11.5px;color:var(--ink)}
.cm-group-dono{font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;
letter-spacing:.08em;color:var(--text-2)}
.cm-group-body{padding:2px 9px 10px;border-top:1px solid var(--border);background:var(--surface)}
.cm-group-body[hidden]{display:none}
.cm-group-resumo{font-size:11px;color:var(--text-2);padding:8px 0 6px;line-height:1.35}
.cm-glist{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.cm-gitem{display:flex;flex-direction:column;gap:2px}
.cm-gitem span{font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;
letter-spacing:.08em;color:var(--text-2)}
.cm-gitem b{font-size:12px;font-weight:600;color:var(--ink)}
.cm-gnada{font-size:11px;color:var(--text-2);font-style:italic;padding:2px 0 4px}
.cm-side{display:flex;flex-direction:column;gap:10px;position:sticky;top:0}
.cm-panel{border:1px solid var(--border);border-radius:10px;background:var(--surface-2);padding:10px}
.cm-panel-tit{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;
letter-spacing:.1em;color:var(--text-2);margin-bottom:7px}
.cm-dl{display:flex;flex-direction:column;gap:6px}
.cm-dl-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:11.5px}
.cm-dl-row span{color:var(--text-2)}
.cm-dl-row b{color:var(--ink);font-weight:600;font-family:var(--font-mono);font-size:11px}
.cm-acao{border-color:var(--pc,var(--navy))}
.cm-acao-txt{font-size:12px;color:var(--ink);line-height:1.35}
.cm-acao-data{margin-top:6px;font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--pc,var(--navy))}
/* ---------- trilho de e-mails ---------- */
.cm-mail{display:flex;flex-direction:column;min-height:0;
background:var(--surface-2);border-right:1px solid var(--border)}
.cm-mail-head-bar{padding:12px 12px 9px;border-bottom:1px solid var(--border);flex-shrink:0}
.cm-mail-tit{display:flex;align-items:center;gap:7px;font-family:var(--font-title);
font-weight:700;font-size:12.5px;color:var(--ink)}
.cm-mail-escrever{margin-left:auto;height:24px;padding:0 8px;font-size:10.5px;
color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:7px;cursor:pointer}
.cm-mail-escrever:hover{border-color:var(--cyan)}
.cm-mail-sub{margin-top:4px;font-family:var(--font-mono);font-size:9.5px;
text-transform:uppercase;letter-spacing:.08em;color:var(--text-2)}
.cm-mail-lista{flex:1;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:7px;
scrollbar-width:thin}
.cm-mail-lista::-webkit-scrollbar{width:9px}
.cm-mail-lista::-webkit-scrollbar-thumb{background:#d3dbd7;border-radius:6px}
.cm-mail-vazio{font-size:11.5px;color:var(--text-2);text-align:center;padding:18px 8px;
border:1px dashed var(--border);border-radius:8px;line-height:1.4}
.cm-mail-item{background:var(--surface);border:1px solid var(--border);border-radius:9px;overflow:hidden}
.cm-mail-item.is-novo{border-color:var(--danger)}
.cm-mail-head{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;padding:8px 9px;
background:none;border:0;cursor:pointer}
.cm-mail-av{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:#fff;background:var(--navy)}
.cm-mail-av.is-out{background:var(--ok)}
.cm-mail-resumo{flex:1;min-width:0}
.cm-mail-l1{display:flex;align-items:baseline;gap:6px}
.cm-mail-de{flex:1;font-size:11.5px;font-weight:700;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-mail-data{font-family:var(--font-mono);font-size:9.5px;color:var(--text-2);flex-shrink:0}
.cm-mail-assunto{display:block;font-size:11px;color:var(--text-2);line-height:1.3;margin-top:1px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-mail-clipe{flex-shrink:0;font-size:11px;color:var(--text-2)}
.cm-mail-corpo{padding:0 9px 10px;border-top:1px solid var(--border)}
.cm-mail-corpo[hidden]{display:none}
.cm-mail-dest{padding:8px 0;font-size:10.5px;color:var(--text-2);display:flex;flex-direction:column;gap:2px}
.cm-mail-rot{font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;
letter-spacing:.08em;color:var(--text-2);margin-right:4px}
.cm-mail-texto{font-size:12px;color:var(--ink);line-height:1.5;white-space:pre-wrap;
padding-top:6px;border-top:1px dashed var(--border)}
.cm-mail-anexos{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.cm-anexo{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10px;
color:var(--ink);background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:2px 7px}
.cm-mail-foot{padding:8px 12px;border-top:1px solid var(--border);flex-shrink:0;
font-family:var(--font-mono);font-size:9.5px;color:var(--text-2)}
.cm-composer{padding:9px;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0}
.cm-composer[hidden]{display:none}
.cm-composer input,.cm-composer textarea{width:100%;font-size:12px;color:var(--ink);padding:6px 8px;
background:var(--surface-2);border:1px solid var(--border);border-radius:7px;margin-bottom:6px;font-family:inherit}
.cm-composer textarea{min-height:72px;resize:vertical}
.cm-composer-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cm-btn{height:28px;padding:0 11px;font-size:11.5px;font-weight:600;border-radius:8px;cursor:pointer;
color:#fff;background:var(--navy);border:1px solid var(--navy)}
.cm-btn--ghost{color:var(--text-2);background:var(--surface-2);border-color:var(--border)}
.cm-composer-nota{font-size:10px;color:var(--text-2);font-style:italic}
.cm-badge{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;
border-radius:9px;background:var(--danger);color:#fff;
font-family:var(--font-mono);font-size:9.5px;font-weight:700;line-height:1}
.cm-badge[hidden]{display:none}
/* ---------- modal secundário (contatos / nova oportunidade) ---------- */
.cm-modal--sec{z-index:1100}
.cm-sec-dialog{position:relative;width:100%;max-width:560px;max-height:calc(100vh - 64px);
display:flex;flex-direction:column;overflow:hidden;background:var(--surface);
border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 60px rgba(6,16,31,.4);
transform:translateY(8px);opacity:0;transition:transform .18s,opacity .18s}
.cm-modal--sec.open .cm-sec-dialog{transform:none;opacity:1}
.cm-sec-inner{display:flex;min-height:0;flex:1}
.cm-sec{display:flex;flex-direction:column;min-height:0;width:100%}
.cm-sec-head{display:flex;align-items:flex-start;gap:12px;padding:14px 16px 10px;
border-bottom:1px solid var(--border);flex-shrink:0}
.cm-sec-head .cm-modal-close{margin-left:auto}
.cm-sec-rot{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;
letter-spacing:.1em;color:var(--text-2);margin-bottom:6px}
.cm-sec-tit{font-family:var(--font-title);font-weight:700;font-size:16px;color:var(--ink);line-height:1.2}
.cm-sec-body{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 16px;display:flex;flex-direction:column;gap:14px}
.cm-sec-nota{padding:9px 11px;border:1px dashed var(--warn);border-radius:8px;
background:rgba(217,138,31,.07);font-size:11px;color:var(--ink);line-height:1.45}
.cm-sec-nota code{font-family:var(--font-mono);font-size:10.5px}
.cm-ct-lista{display:flex;flex-direction:column;gap:7px}
.cm-ct{display:flex;align-items:flex-start;gap:9px;padding:9px;
background:var(--surface-2);border:1px solid var(--border);border-radius:9px}
.cm-ct-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
font-family:var(--font-mono);font-size:10px;font-weight:700;color:#fff;background:var(--navy)}
.cm-ct-d{flex:1;min-width:0}
.cm-ct-l1{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink)}
.cm-ct-tag{font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;letter-spacing:.08em;
color:#fff;background:var(--ok);border-radius:5px;padding:1px 5px}
.cm-ct-l2{font-size:11px;color:var(--text-2);margin-top:1px}
.cm-ct-l3{font-family:var(--font-mono);font-size:10.5px;color:var(--text-2);margin-top:2px}
.cm-ct-del{width:22px;height:22px;border-radius:6px;flex-shrink:0;cursor:pointer;
color:var(--text-2);background:var(--surface);border:1px solid var(--border);font-size:10px}
.cm-ct-del:hover{color:#fff;background:var(--danger);border-color:var(--danger)}
.cm-ct-form{display:flex;flex-direction:column;gap:8px;padding-top:4px;border-top:1px solid var(--border)}
.cm-ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.cm-ct-grid input{height:32px;padding:0 9px;font-size:12.5px;color:var(--ink);font-family:inherit;
background:var(--surface-2);border:1px solid var(--border);border-radius:8px}
.cm-ct-grid input:focus{outline:none;border-color:var(--cyan)}
.cm-ck{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-2)}
.cm-novo-form{display:flex;flex-direction:column;gap:12px}
/* ---------- responsivo ---------- */
@media (max-width:1180px){
.cm-modal-split{grid-template-columns:1fr;overflow-y:auto}
.cm-mail{border-right:0;border-bottom:1px solid var(--border);max-height:300px}
.cm-modal-cols{grid-template-columns:1fr}
.cm-side{position:static}
.cm-nav{display:none}
.cm-ruler-name{font-size:7.5px}
}
@media (max-width:760px){
.cm-gfields,.cm-glist,.cm-ct-grid{grid-template-columns:1fr}
.cm-header{flex-direction:column}
}
/* ==========================================================================
DESENVOLVIMENTO DE PRODUTO — o que é próprio desta tela (prefixo cp-)
========================================================================== */
/* URGENTE — a marca precisa gritar no quadro, não decorar: borda vermelha
cheia, fundo levemente rosado e a etiqueta no topo do card. */
.cp-card--urgente{border-color:var(--danger);border-left-color:var(--danger);
background:linear-gradient(0deg,rgba(192,57,43,.05),rgba(192,57,43,.05)),var(--surface);
box-shadow:0 0 0 1px rgba(192,57,43,.25),var(--shadow)}
.cp-card--urgente:hover{border-color:var(--danger);box-shadow:0 0 0 1px rgba(192,57,43,.45),var(--shadow-hov)}
.cp-card--urgente .cm-card-cliente-nome{color:#8e2a20}
/* etiqueta clicável no topo do card urgente */
.cp-urg{display:flex;align-items:center;gap:4px;width:100%;padding:4px 10px;cursor:pointer;
border:0;border-radius:9px 9px 0 0;background:var(--danger);color:#fff;
font-family:var(--font-mono);font-size:9px;font-weight:700;
text-transform:uppercase;letter-spacing:.1em;text-align:left}
.cp-urg:hover{background:#a52f22}
/* botão de marcar/desmarcar no cabeçalho do modal */
.cp-urg-btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;cursor:pointer;
font-size:11.5px;color:var(--text-2);background:var(--surface-2);
border:1px solid var(--border);border-radius:8px}
.cp-urg-btn:hover{border-color:var(--danger);color:var(--danger)}
.cp-urg-btn.is-on{color:#fff;background:var(--danger);border-color:var(--danger)}
/* faixa do motivo, dentro do modal */
.cp-urg-faixa{display:flex;align-items:center;gap:8px;margin:0 16px 10px;padding:7px 10px;
border:1px solid var(--danger);border-left-width:3px;border-radius:8px;
background:rgba(192,57,43,.07);font-size:12px;color:#8e2a20;flex-shrink:0}
.cp-urg-faixa b{flex-shrink:0}
.cp-urg-motivo{flex:1;min-width:0;height:26px;padding:0 8px;font-family:inherit;font-size:12px;
color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:6px}
.cp-urg-motivo:focus{outline:none;border-color:var(--danger)}
/* filtro "só urgentes" e o contador do cabeçalho */
.cp-filtro-urg{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;cursor:pointer;
font-size:11.5px;color:var(--text-2);background:var(--surface);
border:1px solid var(--border);border-radius:8px}
.cp-filtro-urg:hover{border-color:var(--danger);color:var(--danger)}
.cp-filtro-urg.is-on{color:#fff;background:var(--danger);border-color:var(--danger)}
.cp-s-urg b{color:var(--danger)}
/* ==========================================================================
PÓS-VENDA / GARANTIA — três visualizações (prefixo cg-)
========================================================================== */
.cg-app{height:calc(100vh - 64px - 40px)}
.cg-s-alerta b{color:var(--danger)}
/* seletor de visualização */
.cg-visoes{display:flex;gap:4px;margin:0 0 12px;padding:3px;flex-shrink:0;align-self:flex-start;
background:var(--surface-2);border:1px solid var(--border);border-radius:10px}
.cg-visao{padding:6px 14px;cursor:pointer;font-size:12px;font-weight:600;border:0;border-radius:7px;
color:var(--text-2);background:none;transition:.12s}
.cg-visao:hover{color:var(--ink)}
.cg-visao.is-on{color:#fff;background:var(--navy)}
.cg-corpo{flex:1;min-height:0;display:flex;flex-direction:column}
.cg-corpo > .cm-board{flex:1;min-height:0}
/* --- cor das colunas: padrão 1.2 do Construtor (21/09/2026) ---
As 7 colunas tinham cada uma um hexadecimal próprio (roxo, azul, teal, âmbar,
laranja...) e o quadro virava arco-íris: a cor da etapa competia com o
conteúdo do card, que é o que se lê. Agora o JS não manda mais --pc nenhum, e
ponto, borda e régua caem no var(--pc,var(--navy)) do tema — ou seja,
acompanham a cor da BU ativa, como no Global Trade Workflow.
Duas exceções, que são as do padrão:
- o CEMITÉRIO (Encerrada, padrão 9) é cinza: ali o cinza é informação,
"não há mais nada a fazer";
- o ESTADO do card (SLA vencido, cobrar) segue vermelho/âmbar, porque cor no
quadro serve para chamar atenção do que está errado. */
#cgRoot .cm-col--fim,
#cgRoot .cm-card--fim{--pc:var(--text-2)}
/* --- modal de abertura: a cascata pedido → produto → fornecedor (21/09/2026) ---
Lista de escolha com uma linha por opção: código em mono à esquerda, nome no
meio e o dado que decide à direita (quantos produtos, quantas unidades, qual
fornecedor). Depois de escolhido, a lista some e vira uma linha só com um
"trocar" — manter 70 pedidos na tela depois de ter escolhido um é ruído. */
.cg-opts{max-height:210px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
margin-top:4px;padding:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px}
.cg-opt{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;cursor:pointer;
padding:6px 8px;border:0;border-radius:7px;background:none;color:var(--ink);font-size:11.5px}
.cg-opt:hover,.cg-opt:focus-visible{background:var(--surface);outline:none;
box-shadow:inset 0 0 0 1px var(--pc,var(--navy))}
.cg-opt-cod{font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--pc,var(--navy));flex-shrink:0}
.cg-opt-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-opt-extra{font-size:10px;color:var(--text-2);flex-shrink:0}
.cg-opts-vazio{padding:10px 8px;font-size:11px;color:var(--text-2);text-align:center}
.cg-escolhido{display:flex;align-items:baseline;gap:8px;padding:7px 9px;
background:var(--surface);border:1px solid var(--pc,var(--navy));border-radius:8px}
.cg-escolhido-cod{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--pc,var(--navy));flex-shrink:0}
.cg-escolhido-nome{flex:1;min-width:0;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-trocar{flex-shrink:0;cursor:pointer;border:0;background:none;padding:0;
font-size:10.5px;font-weight:600;color:var(--text-2);text-decoration:underline}
.cg-trocar:hover{color:var(--ink)}
/* o pedido na miniatura do card */
.cg-ped{font-family:var(--font-mono);font-size:9px;font-weight:700;padding:1px 5px;
border-radius:5px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border)}
/* --- anexos com a "Descrição da falha" (21/09/2026) ---
A descrição é POR ANEXO, não do caso: é assim no formulário em Excel de hoje
(a legenda embaixo de cada foto) e é o que o fornecedor lê para entender a
prova. Por isso cada anexo é um bloco com o nome em cima e o texto embaixo,
e não um chip solto numa fileira. */
.cg-anx-lista{display:flex;flex-direction:column;gap:7px;margin:4px 0 7px}
/* MINIATURA a esquerda, texto a direita (21/09/2026). Quem anexa cinco fotos
nao lembra qual e qual pelo nome do arquivo, e escrevia a descricao no escuro
— ou nao escrevia. Com a imagem ao lado, descrever vira o gesto obvio. */
.cg-anx{display:flex;gap:9px;padding:7px 8px;background:var(--surface-2);
border:1px solid var(--border);border-radius:9px}
.cg-anx-mini{flex:0 0 68px;width:68px;height:68px;display:grid;place-items:center;
overflow:hidden;border-radius:7px;background:var(--surface);border:1px solid var(--border)}
.cg-anx-img{width:100%;height:100%;object-fit:cover;display:block}
.cg-anx-ico-grande{font-size:26px;line-height:1}
.cg-anx-lado{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cg-anx-topo{display:flex;align-items:center;gap:7px}
.cg-anx-ico{font-size:13px;flex-shrink:0}
.cg-anx-nome{flex:1;min-width:0;font-size:11px;font-weight:600;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.cg-anx-x{flex-shrink:0;cursor:pointer;border:0;background:none;color:var(--text-2);
font-size:12px;line-height:1;padding:2px 4px}
.cg-anx-x:hover{color:var(--danger)}
.cg-anx-desc{flex:1;font-size:11px;resize:vertical;min-height:44px}
/* Descricao vazia fica vermelha desde o comeco: o campo e obrigatorio e dizer
isso na hora do envio seria dizer tarde. */
.cg-anx-desc.is-erro{border-color:var(--danger);
box-shadow:inset 0 0 0 1px rgba(192,57,43,.25)}
.cg-anx-vazio{padding:10px 8px;font-size:11px;color:var(--text-2);text-align:center;
background:var(--surface-2);border:1px dashed var(--border);border-radius:9px}
.cg-anx-add{display:inline-block;width:auto;align-self:flex-start;cursor:pointer}
/* --- engrenagem da coluna: responsáveis, aprovadores e SLA (21/09/2026) ---
As peças do chip de voto e do próprio botão de engrenagem vêm prontas de
globalqomex/viabilidade.css (`.gqv-cfg`, `.gqv-votos`, `.gqv-voto`), que o
main.html carrega em toda página — o padrão 1.3 do Construtor manda usar as
mesmas, não desenhar outras. O que é só desta tela é o miolo do modal. */
#cgRoot .cm-col-head .gqv-cfg{margin-left:2px}
.cg-cfg-bloco{margin-bottom:16px}
.cg-cfg-bloco h4{margin:0 0 3px;font-family:var(--font-title);font-size:12.5px;color:var(--ink)}
.cg-cfg-bloco p{margin:0 0 7px;font-size:11px;line-height:1.5;color:var(--text-2)}
.cg-cfg-gente{display:flex;flex-wrap:wrap;gap:5px;padding:7px;
background:var(--surface-2);border:1px solid var(--border);border-radius:9px}
.cg-cfg-p{display:inline-flex;align-items:center;gap:5px;cursor:pointer;
padding:4px 9px;font-size:11.5px;background:var(--surface);
border:1px solid var(--border);border-radius:20px}
.cg-cfg-p:hover{border-color:var(--pc,var(--navy))}
.cg-cfg-p input{margin:0;accent-color:var(--pc,var(--navy))}
.cg-cfg-p:has(input:checked){border-color:var(--pc,var(--navy));
box-shadow:inset 0 0 0 1px var(--pc,var(--navy))}
.cg-cfg-sla{max-width:110px}
/* --- o card em TRÊS colunas (padrão 3.5 do Construtor, 21/09/2026) ---
Esquerda a conversa, meio o cabeçalho, direita o conteúdo. As duas laterais
têm a MESMA largura de propósito: nenhuma é a principal — o meio é. As peças
das abas (`.cx-rep`, `.cx-rep-tabs`, `.cx-rep-tab`, `.cx-rep-body`) vêm de
comex/controle.css, que o main.html carrega em toda página. */
/* O card da garantia tem UMA coluna a mais que o do funil, então a caixa é
mais larga: com 1240px o meio sobrava 560px e a régua de 7 etapas quebrava
o nome de cada uma em três linhas. */
#cgModal .cm-modal-dialog{max-width:1520px}
#cgRoot .cm-modal-split,
#cgModal .cm-modal-split{grid-template-columns:320px minmax(0,1fr) 320px}
#cgModal .cg-esq{border-right:1px solid var(--border)}
#cgModal .cg-dir{border-left:1px solid var(--border)}
#cgModal .cg-esq .cx-rep-body,
#cgModal .cg-dir .cx-rep-body{padding:0}
#cgModal .cg-dir .cx-rep-body{padding:12px}
#cgModal .cg-esq .cm-mail{border-right:0;height:100%}
/* a aba travada: cinza, com cadeado, e o motivo no hover — não some */
#cgModal .cx-rep-tab.is-travada{opacity:.55}
#cgModal .cx-rep-tab.is-travada:hover{background:none}
/* a legenda do anexo dentro do card: é a "Descrição da falha" que foi escrita
na abertura, e é o que o fornecedor lê para entender a prova */
.cg-anx-legenda{font-size:11px;line-height:1.5;color:var(--text-2)}
@media (max-width:1280px){
#cgModal .cm-modal-split{grid-template-columns:300px minmax(0,1fr) 300px}
}
@media (max-width:1000px){
#cgModal .cm-modal-split{grid-template-columns:1fr;overflow-y:auto}
#cgModal .cg-esq,#cgModal .cg-dir{border:0;border-bottom:1px solid var(--border)}
}
/* --- a decisão da Triagem (21/09/2026) ---
Três botões, e cada um é um caminho do fluxo. As cores são as do ESTADO, não
da etapa: verde defere, âmbar devolve, vermelho indefere. É a exceção do
padrão 1.2 — cor que informa, não que enfeita. */
.cg-tri-txt{width:100%;margin:6px 0 9px;font-size:11.5px;resize:vertical}
.cg-tri-acts{display:flex;flex-wrap:wrap;gap:6px}
.cg-tri-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
padding:7px 13px;font-size:11.5px;font-weight:600;border-radius:8px;
background:var(--surface);border:1px solid var(--border);color:var(--text-2)}
.cg-tri-ico{font-size:13px;line-height:1}
.cg-tri-btn--ok:hover,.cg-tri-btn--ok.is-on{border-color:var(--ok);color:#fff;background:var(--ok)}
.cg-tri-btn--meio:hover,.cg-tri-btn--meio.is-on{border-color:var(--warn);color:#fff;background:var(--warn)}
.cg-tri-btn--no:hover,.cg-tri-btn--no.is-on{border-color:var(--danger);color:#fff;background:var(--danger)}
/* a ação única do "Complemento necessário": é o que fecha a etapa, então
ocupa a linha inteira e já vem pintada — não espera o hover para existir */
.cg-tri-btn--unico{width:100%;justify-content:center;padding:11px 14px;font-size:13px;
border-color:var(--warn);background:var(--warn);color:#fff;
box-shadow:0 2px 8px rgba(0,0,0,.14)}
.cg-tri-btn--unico .cg-tri-ico{font-size:15px}
.cg-tri-btn--unico:hover{filter:brightness(1.07);box-shadow:0 3px 12px rgba(0,0,0,.2)}
.cg-tri-feito{margin-top:9px;padding:7px 9px;font-size:11px;line-height:1.5;
color:var(--text-2);background:var(--surface-2);border-radius:8px}
.cg-etapa-vazia{padding:10px 8px;font-size:11px;color:var(--text-2);text-align:center;
background:var(--surface-2);border:1px dashed var(--border);border-radius:8px}
.cm-etapas{display:flex;flex-direction:column;gap:7px}
/* --- a seção de datas ao lado do acordeão (padrão 2.4, 21/09/2026) ---
O painel é o do comex (.cx-modal-dates & cia., de comex/controle.css). Aqui
só o arranjo: acordeão à esquerda, datas à direita, dentro da coluna do
meio. Abaixo de 1100px de modal as duas empilham — num painel de 240px
espremido o não cabe. */
.cg-meio{display:flex;gap:12px;align-items:flex-start}
.cg-meio-etapas{flex:1;min-width:0}
.cg-datas{flex:0 0 232px;width:232px;position:sticky;top:0}
.cg-datas-nota{margin-top:9px;font-size:10px;line-height:1.5;color:var(--text-2)}
#cgModal .cx-date-inp{padding:5px 7px;font-size:11px}
@media (max-width:1280px){
.cg-meio{flex-direction:column}
.cg-datas{flex:1 1 auto;width:100%;position:static}
}
/* --- a conversa da Triagem / Complemento necessario (21/09/2026) ---
Cada fala abaixo da anterior, com quem escreveu, de que ponta e quando. As
duas pontas se distinguem pela borda esquerda: a triagem na cor do tema, o
complemento em ambar, que e a cor de "falta alguma coisa". */
.cg-chat{display:flex;flex-direction:column;gap:7px;margin:6px 0 9px}
.cg-fala{padding:7px 9px;background:var(--surface-2);border:1px solid var(--border);
border-left:3px solid var(--pc,var(--navy));border-radius:0 8px 8px 0}
.cg-fala--complemento{border-left-color:var(--warn)}
/* A assinatura fica ABAIXO da fala e em letra miuda: quem escreveu e quando
importa, mas nao pode competir com o que foi escrito. */
.cg-fala-ass{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-top:5px;
font-size:9px;color:var(--text-2);opacity:.85}
.cg-fala-quem{font-weight:700}
.cg-fala-onde{font-family:var(--font-mono);font-size:8px;text-transform:uppercase;letter-spacing:.05em}
.cg-fala-quando{margin-left:auto;font-family:var(--font-mono);font-size:8.5px}
.cg-fala-txt{font-size:11.5px;line-height:1.55;white-space:pre-wrap}
.cg-fala-dec{margin-top:5px;font-size:10.5px;font-weight:600}
.cg-fala-dec--ok{color:var(--ok)}
.cg-fala-dec--meio{color:var(--warn)}
.cg-fala-dec--no{color:var(--danger)}
.cg-chat-vazio,.cg-chat-fechado{padding:10px 8px;font-size:11px;color:var(--text-2);
text-align:center;background:var(--surface-2);border:1px dashed var(--border);border-radius:8px}
.cg-chat-fechado{margin-top:6px}
/* quantidade acima do teto do pedido */
.cm-input.is-erro{border-color:var(--danger);box-shadow:0 0 0 2px rgba(192,57,43,.14)}
.cm-f-nota.is-erro{color:var(--danger);font-weight:600}
/* --- os três consertos de 21/09/2026 ---------------------------------------
1. AS ABAS DA DIREITA NÃO CABIAM. São cinco (Anexos · Laudo · Cobranças ·
Prazos · Parecer) em 320px, e a última saía pela borda da tela — a pessoa
não via que existia. Passam a QUEBRAR EM DUAS LINHAS, com a fonte e o
respiro do painel de Tarefas, que resolveu o mesmo problema. Quebrar é
melhor do que rolar na horizontal: rolagem dentro de uma fileira de abas
esconde o que não coube, e esconder aba é o que se estava tentando evitar.
2. O MODAL CORTAVA EMBAIXO. O painel de datas era `position:sticky`, e
elemento colado não deixa o pai medir a altura de que precisa: o último
menu do acordeão (Indeferido) encostava na borda da janela, sem respiro.
Sai o sticky e entra um respiro no fim do corpo rolável.
3. A ÁREA DE ANEXOS agora é clicável inteira (ver o JS), então ela precisa
parecer clicável.
-------------------------------------------------------------------------- */
#cgModal .cg-dir .cx-rep-tabs,
#cgModal .cg-esq .cx-rep-tabs{flex-wrap:wrap;gap:1px;padding:7px 7px 0}
#cgModal .cg-dir .cx-rep-tab,
#cgModal .cg-esq .cx-rep-tab{font-size:10.5px;padding:6px 8px;gap:4px}
#cgModal .cg-datas{position:static}
#cgModal .cm-modal-body{padding-bottom:24px}
.cg-anx-lista[data-anx-abrir]{cursor:pointer}
.cg-anx-lista[data-anx-abrir]:hover{border-color:var(--pc,var(--navy))}
.cg-anx-lista[data-anx-abrir]:focus-visible{outline:2px solid var(--pc,var(--navy));outline-offset:2px}
.cg-anx-vazio small{display:block;margin-top:3px;font-size:10px;opacity:.8}
/* --- card: PN e alertas --- */
.cg-pn{padding:1px 10px 0;font-family:var(--font-mono);font-size:9.5px;color:var(--text-2)}
.cg-chip--sla{color:#fff;background:var(--danger);border-color:var(--danger)}
.cg-chip--cobrar{color:#8a4a12;background:rgba(217,138,31,.16);border-color:rgba(217,138,31,.45)}
.cg-chip--laudo{color:#8a4a12;background:rgba(217,138,31,.1);border-color:rgba(217,138,31,.3)}
.cg-card--sla{border-color:var(--danger);box-shadow:0 0 0 1px rgba(192,57,43,.2),var(--shadow)}
.cg-dec{font-weight:700}
.cg-dec--ok{color:#fff;background:var(--ok);border-color:var(--ok)}
.cg-dec--no{color:#fff;background:var(--danger);border-color:var(--danger)}
.cg-dec--meio{color:#fff;background:var(--warn);border-color:var(--warn)}
/* faixa de alerta no modal */
.cg-faixa{display:flex;align-items:center;gap:8px;margin:0 16px 10px;padding:7px 10px;flex-shrink:0;
border-left-width:3px;border-radius:8px;font-size:12px}
.cg-faixa--sla{border:1px solid var(--danger);border-left-width:3px;background:rgba(192,57,43,.08);color:#8e2a20}
.cg-faixa--cobrar{border:1px solid var(--warn);border-left-width:3px;background:rgba(217,138,31,.1);color:#8a4a12}
/* checklist dos 6 dados do laudo */
.cg-laudo{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding-bottom:4px}
.cg-laudo-item{display:flex;flex-direction:column;gap:1px;padding:5px 8px;border-radius:7px;
background:rgba(217,138,31,.07);border:1px solid rgba(217,138,31,.25)}
.cg-laudo-item.is-ok{background:rgba(31,157,120,.07);border-color:rgba(31,157,120,.3)}
.cg-laudo-item span{font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;
letter-spacing:.06em;color:var(--text-2)}
.cg-laudo-item b{font-size:12px;color:var(--ink)}
.cg-laudo-item:not(.is-ok) b{color:#8a4a12;font-style:italic;font-weight:400}
/* histórico de cobranças (FUP) */
.cg-fup{display:flex;flex-direction:column;gap:7px;padding-bottom:8px}
.cg-fup-item{padding:8px 9px;border-left:2px solid var(--pc,var(--navy));border-radius:0 8px 8px 0;
background:var(--surface-2)}
.cg-fup-top{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.cg-fup-top b{font-family:var(--font-mono);font-size:11px;color:var(--ink)}
.cg-fup-quem{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;
letter-spacing:.06em;color:var(--text-2)}
.cg-fup-l{font-size:12px;color:var(--ink);line-height:1.4}
.cg-fup-r,.cg-fup-p{margin-top:3px;font-size:11.5px;color:var(--text-2);line-height:1.4}
.cg-fup-r span,.cg-fup-p span{font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;
letter-spacing:.06em;margin-right:5px;color:var(--text-2)}
.cg-add-fup{margin-top:2px}
.cg-parecer{padding:8px 0 4px;font-size:12.5px;color:var(--ink);line-height:1.5}
/* ---------------- TABELA (a aba FORMULÁRIOS) ---------------- */
.cg-tabela-wrap{flex:1;min-height:0;overflow:auto;border:1px solid var(--border);border-radius:10px;
background:var(--surface);scrollbar-width:thin}
.cg-tabela{border-collapse:separate;border-spacing:0;width:100%;font-size:11.5px}
.cg-tabela th,.cg-tabela td{padding:6px 9px;text-align:left;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;max-width:320px;border-bottom:1px solid var(--border)}
.cg-tabela thead th{position:sticky;top:26px;z-index:2;cursor:pointer;
background:var(--surface-2);color:var(--text-2);
font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.cg-tabela thead th:hover{color:var(--ink)}
.cg-tabela thead th.is-ordem{color:var(--navy)}
.cg-tabela .cg-tr-grupo th{position:sticky;top:0;z-index:3;text-align:center;cursor:default;
background:var(--navy);color:var(--cyan);font-size:8.5px;letter-spacing:.14em;
border-right:1px solid rgba(255,255,255,.15)}
.cg-tabela tbody tr{cursor:pointer}
.cg-tabela tbody tr:hover td{background:var(--surface-2)}
.cg-tabela tbody tr.is-alerta td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
.cg-tabela tbody tr.is-fim{opacity:.6}
.cg-num{font-family:var(--font-mono);text-align:right}
.cg-num.is-sla{color:#fff;background:var(--danger);font-weight:700}
.cg-num.is-cobrar{color:#8a4a12;background:rgba(217,138,31,.16);font-weight:700}
.cg-vazio{color:var(--text-2);font-style:italic}
.cg-vazio-tab{text-align:center;padding:22px;color:var(--text-2);font-style:italic}
.cg-status{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;
padding:2px 6px;border-radius:5px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2)}
.cg-td-laudo{display:flex;align-items:center;gap:6px;white-space:nowrap}
.cg-mini{display:inline-block;width:44px;height:5px;border-radius:3px;background:var(--border);overflow:hidden}
.cg-mini i{display:block;height:100%;background:var(--warn)}
.cg-td-laudo b{font-family:var(--font-mono);font-size:10px}
.cg-td-laudo b.is-ok{color:var(--ok)}
.cg-td-laudo b.is-falta{color:#8a4a12}
.cg-td-trad span{font-family:var(--font-mono);font-size:9px;padding:1px 4px;border-radius:4px;
margin-right:2px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border)}
.cg-td-trad span.is-on{color:#fff;background:var(--ok);border-color:var(--ok)}
.cg-tab-pe{padding:7px 2px 0;font-size:10.5px;color:var(--text-2);font-style:italic;flex-shrink:0}
/* ---------------- PAINEL ---------------- */
.cg-painel{flex:1;min-height:0;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.cg-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.cg-kpi{padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.cg-kpi b{display:block;font-family:var(--font-title);font-weight:700;font-size:26px;color:var(--navy);line-height:1}
.cg-kpi span{display:block;margin-top:4px;font-family:var(--font-mono);font-size:9px;
text-transform:uppercase;letter-spacing:.1em;color:var(--text-2)}
.cg-kpi--ok b{color:var(--ok)}
.cg-kpi--no b{color:var(--danger)}
.cg-alertas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:12px}
.cg-alerta{display:flex;align-items:center;gap:12px;padding:11px 13px;text-align:left;cursor:pointer;
border:1px solid var(--border);border-left-width:3px;border-radius:10px;background:var(--surface)}
.cg-alerta:hover{box-shadow:var(--shadow-hov)}
.cg-alerta b{font-family:var(--font-title);font-weight:700;font-size:24px;line-height:1}
.cg-alerta span{display:flex;flex-direction:column;font-size:12px;color:var(--ink)}
.cg-alerta i{font-style:normal;font-size:10.5px;color:var(--text-2);margin-top:1px}
.cg-alerta--sla{border-left-color:var(--danger)}
.cg-alerta--sla b{color:var(--danger)}
.cg-alerta--cobrar{border-left-color:var(--warn)}
.cg-alerta--cobrar b{color:var(--warn)}
.cg-alerta--laudo{border-left-color:#8a4a12}
.cg-alerta--laudo b{color:#8a4a12}
.cg-alerta--info{border-left-color:var(--text-2);cursor:default}
.cg-alerta--info b{color:var(--text-2)}
.cg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;padding-bottom:16px}
.cg-bloco{padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.cg-bloco-tit{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;
color:var(--text-2);margin-bottom:9px}
.cg-bloco-pe{margin-top:8px;padding-top:6px;border-top:1px solid var(--border);
font-family:var(--font-mono);font-size:9.5px;color:var(--text-2)}
.cg-barra{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.cg-barra-rot{width:132px;flex-shrink:0;font-size:11px;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-barra-tr{flex:1;height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.cg-barra-tr i{display:block;height:100%;border-radius:5px}
.cg-barra b{width:26px;text-align:right;font-family:var(--font-mono);font-size:11px;color:var(--ink)}
.cg-bloco--lista{display:flex;flex-direction:column;gap:5px}
.cg-linha{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;padding:6px 8px;cursor:pointer;
border:1px solid var(--border);border-radius:8px;background:var(--surface-2);font-size:11.5px}
.cg-linha:hover{border-color:var(--cyan)}
.cg-linha b{font-family:var(--font-mono);font-size:10.5px;color:var(--ink);flex-shrink:0}
.cg-linha span{flex:1;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-linha i{font-style:normal;font-family:var(--font-mono);font-size:9.5px;color:var(--danger);flex-shrink:0}
@media (max-width:900px){
.cg-laudo{grid-template-columns:1fr}
}
/* fornecedor no card da garantia (a BU ocupa o slot de cima) */
.cg-forn{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.06em;
color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);
border-radius:5px;padding:1px 5px}
.cm-card-head .cm-card-bu{margin-left:auto}
.cm-card-head .cm-card-bu + .cg-forn{margin-left:4px}
/* ==========================================================================
JURÍDICO · Workflow — cópia do pipe do Pipefy (prefixo jw-)
Reusa o kanban do Comercial (classes cm-*); aqui só o que é próprio.
========================================================================== */
/* A tarja de etiqueta saiu em 01/09/2026: a espera virou COLUNA
("Aguardando jurídico" / "Aguardando time"), então a etiqueta do Pipefy não
existe mais nem no dado nem na tela. */
/* urgente e atraso */
.jw-card--urg{border-color:var(--danger);box-shadow:0 0 0 1px rgba(192,57,43,.22),var(--shadow)}
.jw-chip--urg{display:inline-flex;align-items:center;gap:3px;color:#fff;
background:var(--danger);border-color:var(--danger)}
.jw-chip--atraso{color:#8a4a12;background:rgba(217,138,31,.16);border-color:rgba(217,138,31,.45)}
.jw-atraso{color:var(--danger)}
.jw-urg-btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;cursor:pointer;
font-size:11.5px;color:var(--text-2);background:var(--surface-2);
border:1px solid var(--border);border-radius:8px}
.jw-urg-btn:hover{border-color:var(--danger);color:var(--danger)}
.jw-urg-btn.is-on{color:#fff;background:var(--danger);border-color:var(--danger)}
.jw-filtro-urg{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;cursor:pointer;
font-size:11.5px;color:var(--text-2);background:var(--surface);
border:1px solid var(--border);border-radius:8px}
.jw-filtro-urg:hover{border-color:var(--danger);color:var(--danger)}
.jw-filtro-urg.is-on{color:#fff;background:var(--danger);border-color:var(--danger)}
.jw-s-urg b{color:var(--danger)}
/* ─── [17/09/2026] Valor estimado editável, anexos do card e a linha
"Observações + Anexos" (o mesmo par que o comex usa no card). ─── */
.cm-val-money { display: flex; gap: 6px; align-items: center; }
.cm-val-money .cm-moeda { flex: 0 0 74px; }
.cm-val-money input { flex: 1; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cm-obs-anexos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 38%); gap: 10px; align-items: start; }
.cm-obs { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cm-anexos-box { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cm-anexos-n { font-size: 10px; color: var(--text-secondary); }
.cm-anexos-chips { display: flex; flex-wrap: wrap; gap: 4px; min-height: 26px; align-content: flex-start; }
.cm-anexos-vazio { font-size: 11px; color: var(--text-secondary); }
.cm-anexo-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
padding: 3px 4px 3px 8px; border-radius: 20px; border: 1px solid var(--ok, #3a7d44); background: #f0fbf7; }
.cm-anexo-nome { font-size: 10.5px; font-weight: 600; color: var(--ink, #1d2b2e);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.cm-anexo-x { flex-shrink: 0; width: 14px; height: 14px; border: 0; border-radius: 50%;
display: grid; place-items: center; font-size: 8px; line-height: 1; cursor: pointer;
color: var(--text-secondary); background: transparent; }
.cm-anexo-x:hover { color: #fff; background: var(--danger, #b03a2e); }
.cm-anexo-add { align-self: flex-start; cursor: pointer; padding: 4px 9px; border-radius: 6px;
border: 1px dashed var(--card-border, #d9d9d2); font-size: 11px; color: var(--text-secondary); }
.cm-anexo-add:hover { border-color: var(--accent, #19b3a6); color: var(--ink, #1d2b2e); }
@media (max-width: 900px) { .cm-obs-anexos { grid-template-columns: 1fr; } }
.cg-anx-lista.is-drop{outline:2px dashed var(--pc,var(--navy));outline-offset:3px;border-radius:9px}
/* Selo de RESPOSTA NOVA na miniatura (21/09/2026): quem completou o caso
respondeu e o card voltou para a Triagem. Vermelho porque e o unico jeito de
a resposta nao ficar esperando sem ninguem saber que chegou; some quando
alguem abre o card, que e quando a resposta foi de fato lida. */
.cg-resp-nova{font-family:var(--font-mono);font-size:8px;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:5px;
color:#fff;background:var(--danger);flex-shrink:0}
/* --- a barra unica da tela (21/09/2026) ---
As tres visoes, a busca, os dois filtros e os contadores numa linha so. Duas
barras para a mesma coisa davam a impressao de que cada visao tinha o seu
filtro — e o filtro e UM, vale para as tres. */
#cgRoot .cg-barra{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding-bottom:10px;margin-bottom:0}
#cgRoot .cg-barra .cg-visoes{margin:0;flex-shrink:0}
#cgRoot .cg-barra .cm-stats{flex:1;display:flex;align-items:center;gap:14px;
justify-content:flex-end;flex-wrap:wrap}
#cgRoot .cg-barra .cm-filtros{flex:1;min-width:280px}
#cgRoot .cg-app{height:calc(100vh - 64px - 40px)}
/* --- observacao POR ANEXO, dentro do card (21/09/2026) ---
A mesma conversa do menu Triagem / Complemento necessario, so que presa a uma
foto. "A terceira foto esta fora de foco" e um comentario sobre AQUELA foto,
e escrever isso no campo geral obriga a outra ponta a adivinhar qual e. */
.cg-anx--card{align-items:flex-start}
.cg-anx--card .cg-anx-mini{flex-basis:56px;width:56px;height:56px}
.cg-obs{margin-top:5px;padding:5px 7px;border-left:2px solid var(--pc,var(--navy));
border-radius:0 6px 6px 0;background:var(--surface)}
.cg-obs--complemento{border-left-color:var(--warn)}
.cg-obs-txt{font-size:11px;line-height:1.5;white-space:pre-wrap}
.cg-anx-obs{margin-top:5px;font-size:11px;resize:vertical;min-height:38px}
/* --- o DOSSIE COMPILADO, na etapa do fornecedor (21/09/2026) ---
E o documento que vai para o fornecedor, montado a partir das provas. Mora na
etapa em que e usado, e so aceita PDF: o fornecedor abre o arquivo do outro
lado do mundo, e PDF e o unico formato que abre igual em qualquer maquina. */
.cg-dossie{display:flex;flex-direction:column;gap:6px;align-items:flex-start;
padding:9px;margin-top:6px;cursor:pointer;
background:var(--surface-2);border:1px dashed var(--border);border-radius:9px}
.cg-dossie:hover,.cg-dossie.is-drop{border-color:var(--pc,var(--navy));border-style:solid}
.cg-dossie-rot{font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;
letter-spacing:.06em;color:var(--text-2)}
.cg-dossie-arq{display:flex;align-items:center;gap:7px;width:100%;padding:6px 8px;
background:var(--surface);border:1px solid var(--border);border-radius:7px}
.cg-dossie-vazio{font-size:11px;color:var(--text-2)}
.cg-dossie-erro{margin-top:6px;padding:7px 9px;font-size:11px;line-height:1.5;
color:#fff;background:var(--danger);border-radius:7px}
.cg-dossie-erro[hidden]{display:none}
/* --- a linha de identificacao do card (21/09/2026) ---
Pedido, item, quantidade e fornecedor lado a lado: e o que responde "de que
compra estamos falando" numa olhada. Os quatro dividem a largura inteira do
meio, com o ITEM levando o dobro — e o nome da peca que e longo. */
.cm-f--linha4{grid-column:1 / -1;display:grid;
grid-template-columns:minmax(90px,1fr) minmax(0,2.4fr) 80px minmax(90px,1fr);
gap:8px 10px}
@media (max-width:1100px){
.cm-f--linha4{grid-template-columns:1fr 1fr}
}
/* A decisao do fornecedor, dentro do menu da etapa */
.cg-decisao{margin-top:10px}
.cg-coment{display:flex;flex-direction:column;gap:8px;padding:12px}
.cg-coment-txt{font-size:11.5px;resize:vertical}
#cgModal .cg-esq .cx-rep-body .cg-coment{padding:12px}
/* --- categoria da falha, por PN (22/09/2026) ---
Chips que se marcam e desmarcam no clique. A lista e do PN, nao do
fornecedor: a falha e da peca, e o mesmo sensor comprado de dois lugares
falha do mesmo jeito. */
.cg-falhas{margin-bottom:10px}
.cg-falhas-chips{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 7px}
.cg-falha{cursor:pointer;padding:4px 11px;font-size:11px;border-radius:20px;
color:var(--text-2);background:var(--surface);border:1px solid var(--border)}
.cg-falha:hover:not(:disabled){border-color:var(--pc,var(--navy));color:var(--ink)}
.cg-falha.is-on{color:#fff;background:var(--pc,var(--navy));border-color:var(--pc,var(--navy))}
.cg-falha:disabled{cursor:default;opacity:.7}
.cg-falhas-vazio{font-size:11px;color:var(--text-2)}
.cg-falha-nova{display:flex;gap:6px;align-items:center}
.cg-falha-nova .cm-input{flex:1;font-size:11px}
/* --- o que FALTA preencher (23/09/2026) ---
Campo obrigatorio vazio nao pode esperar alguem abrir o card para ser
descoberto. Vermelho porque e excecao, nao estado normal — a mesma licenca
que o SLA vencido tem no padrao 1.2. */
/* A BOLINHA da pendência. Mesma cor do badge do menu da esquerda (#c0392b),
em 8px e sem número — no card não interessa QUANTAS faltas há, interessa que
há uma. `position:absolute` de propósito: a miniatura com pendência tem
exatamente as mesmas medidas da miniatura sem, e o quadro não dança quando um
campo é preenchido. */
.cg-pend{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;
background:#c0392b;box-shadow:0 0 0 2px var(--surface)}
.cg-f--falta .cm-input,.cg-f--falta .cg-falhas-chips{border-color:var(--danger);
box-shadow:inset 0 0 0 1px rgba(192,57,43,.25)}
.cg-selo-falta{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:5px;
font-family:var(--font-mono);font-size:8px;font-weight:700;text-transform:uppercase;
letter-spacing:.05em;color:#fff;background:var(--danger)}
/* --- o VISOR do anexo (23/09/2026) ---
A miniatura tem 68px: da para saber QUAL foto e, nao para ver o que ela
mostra. Quem julga uma falha precisa da foto grande — e era isso que obrigava
a abrir a pasta do OneDrive em paralelo. */
.cg-anx-mini{position:relative}
/* O olho so aparece no hover: a miniatura ja e pequena, e um icone fixo por
cima dela roubaria o pouco que se ve. */
.cg-anx-ver{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;
opacity:0;transition:opacity .12s;border:0;border-radius:7px;
color:#fff;background:rgba(6,16,31,.45)}
.cg-anx-mini:hover .cg-anx-ver,.cg-anx-ver:focus-visible{opacity:1}
/* Baixar em TODOS os anexos: discreto, do tamanho do texto ao lado. */
.cg-anx-baixar{display:inline-grid;place-items:center;flex-shrink:0;cursor:pointer;
width:20px;height:20px;border:0;border-radius:5px;color:var(--text-2);background:none;
text-decoration:none}
.cg-anx-baixar:hover{color:var(--ink);background:var(--surface-2)}
.cg-visor{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:28px}
.cg-visor[hidden]{display:none}
.cg-visor-fundo{position:absolute;inset:0;background:rgba(6,16,31,.72);opacity:0;transition:opacity .16s}
.cg-visor.open .cg-visor-fundo{opacity:1}
.cg-visor-caixa{position:relative;display:flex;flex-direction:column;max-width:min(1100px,94vw);
min-width:min(420px,90vw);max-height:92vh;background:var(--surface);border:1px solid var(--border);border-radius:12px;
box-shadow:0 24px 60px rgba(6,16,31,.4);overflow:hidden;opacity:0;transform:translateY(8px);
transition:opacity .16s,transform .16s}
.cg-visor.open .cg-visor-caixa{opacity:1;transform:none}
.cg-visor-cab{display:flex;align-items:center;gap:10px;padding:9px 12px;flex-shrink:0;
border-bottom:1px solid var(--border);background:var(--surface-2)}
.cg-visor-nome{flex:1;min-width:0;font-size:12px;font-weight:600;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.cg-visor-baixar{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
font-size:11px;text-decoration:none}
.cg-visor-corpo{flex:1;min-height:0;display:grid;place-items:center;overflow:auto;background:#0c1420}
.cg-visor-img{max-width:100%;min-height:120px;max-height:calc(92vh - 46px);display:block;object-fit:contain}
.cg-visor-pdf{width:min(900px,92vw);height:calc(92vh - 46px);border:0;background:#fff}
.cg-visor-nada{padding:40px 24px;font-size:12px;line-height:1.6;color:#cfd8d4;text-align:center}
/* ---- Garantia: anexo removido, e a coluna que recusa o card (23/09/2026) --- */
/* O anexo que saiu continua na lista, apagado: o nome riscado e a marcação de
quem removeu. É o registro de que o conjunto de provas mudou depois que o
caso foi aberto. */
.cg-anx--fora{opacity:.75}
.cg-anx-mini--fora{display:flex;align-items:center;justify-content:center;
background:var(--surface-2);color:var(--text-3);font-size:20px;
border:1px dashed var(--border)}
.cg-anx-nome.is-fora{text-decoration:line-through;color:var(--text-3)}
.cg-anx-removido{font-size:11px;color:#c0392b;padding:2px 0 1px}
.cg-anx-lista.is-solta{border:1px dashed var(--border);border-radius:8px;padding:8px}
.cg-anx-lista.is-solta.is-drop{border-color:var(--accent);background:var(--surface-2)}
/* No arraste, a coluna que não aceita este card não acende como alvo: fica
marcada como recusa, para a mão saber antes de soltar. */
.cm-col--nao{outline:1px dashed #c0392b;outline-offset:-2px;opacity:.6}
/* ---------------- Garantia: o snapshot (.txt do equipamento, 23/09/2026) --- */
/* Campo estreito, na mesma linha do KM e do VIN: o que se tem é um nome de
arquivo e dois botões — ver e tirar. */
.cg-snap-val{display:flex;align-items:center;gap:4px;min-height:30px;overflow:hidden}
.cg-snap-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-size:11.5px;color:var(--text-2)}
.cg-snap-b{display:inline-flex;align-items:center;justify-content:center;gap:3px;
background:none;border:0;padding:2px 4px;border-radius:5px;cursor:pointer;
color:var(--text-3);line-height:1}
.cg-snap-b:hover{background:var(--surface-2);color:var(--text)}
.cg-snap-x:hover{color:#c0392b}
.cg-snap-add{font-size:11.5px;border:1px dashed var(--border);padding:4px 8px;width:100%}
/* O texto do snapshot no visor: largura fixa, como o equipamento escreveu. */
.cg-visor-txt{margin:0;padding:16px;max-height:72vh;overflow:auto;white-space:pre-wrap;
word-break:break-word;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
color:var(--text);background:var(--surface)}
/* ------ Garantia: o desfecho, em Concluídos (23/09/2026) ------------------ */
/* A coluna "Indeferido" saiu; Concluídos guarda os dois fins e a etiqueta diz
qual foi. Duas cores só, e nenhuma dimensão nova no card: a etiqueta entra na
linha de meta que já existe, junto com "atrasado" e os dias em aberto. */
.cg-desf{font-weight:600;letter-spacing:.2px}
.cg-desf--ok{background:rgba(39,174,96,.12);color:#1e8449;border-color:rgba(39,174,96,.35)}
.cg-desf--no{background:rgba(192,57,43,.12);color:#c0392b;border-color:rgba(192,57,43,.35)}
/* A bolinha de pendência também na TABELA. No card ela é absoluta, presa ao
canto; aqui ela entra na fila dos selos, como um item qualquer. */
.cg-pend--tab{position:static;box-shadow:none;display:inline-block;vertical-align:middle;
width:8px;height:8px;flex:0 0 8px}
.cg-td-sinais{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
/* ---- Garantia: o dossiê sendo montado pelo tradutor (24/09/2026) --------- */
/* Um símbolo girando enquanto o PDF em inglês e chinês é montado. Ele ocupa o
mesmo lugar onde o anexo vai aparecer, para o campo não pular quando chegar. */
.cg-dossie-gerando{display:flex;align-items:center;gap:10px;padding:10px 12px;
border:1px dashed var(--border);border-radius:8px;background:var(--surface-2);
font-size:12px;color:var(--text-2)}
.cg-dossie-gerando i{display:block;font-style:normal;font-size:11px;color:var(--text-3);margin-top:2px}
.cg-girando{flex:0 0 16px;width:16px;height:16px;border-radius:50%;
border:2px solid var(--border);border-top-color:var(--accent);
animation:cg-gira .8s linear infinite}
@keyframes cg-gira{to{transform:rotate(360deg)}}
.cg-dossie-erro-auto{padding:10px 12px;border:1px solid rgba(192,57,43,.35);border-radius:8px;
background:rgba(192,57,43,.06);font-size:12px;color:#c0392b}
.cg-dossie-erro-auto i{display:block;font-style:normal;font-size:11px;color:var(--text-3);
margin:3px 0 7px;word-break:break-word}
/* ---- O ícone do arquivo, colorido pela extensão (24/09/2026) ------------- */
/* A folha desenhada em SVG herda a cor do .cg-fico (currentColor), e a sigla
vai por cima, no mesmo tom. Um elemento só, duas informações: a cor para
quem só passa o olho, a sigla para quem precisa ter certeza — e para quem
não distingue cor. */
.cg-fico{position:relative;display:inline-flex;align-items:center;justify-content:center;
width:22px;height:26px;flex:0 0 22px;color:var(--text-3)}
.cg-fico svg{position:absolute;inset:0}
.cg-fico b{position:relative;font-size:7px;font-weight:700;letter-spacing:.2px;
line-height:1;margin-top:5px}
.cg-fico--g{width:40px;height:48px;flex:0 0 40px}
.cg-fico--g b{font-size:11px;margin-top:8px}
.cg-fico--pdf{color:#c0392b}
.cg-fico--sheet{color:#1e8449}
.cg-fico--doc{color:#2e5aac}
.cg-fico--slide{color:#c0561e}
.cg-fico--img{color:#7d3c98}
.cg-fico--video{color:#2874a6}
.cg-fico--audio{color:#117a65}
.cg-fico--texto{color:#5d6d7e}
.cg-fico--zip{color:#946b00}
.cg-fico--outro{color:var(--text-3)}
/* O ícone grande da miniatura não tem mais emoji: quem manda é o .cg-fico */
.cg-anx-ico-grande{display:flex;align-items:center;justify-content:center;
width:100%;height:100%}
/* ---- Visão E-MAIL da garantia (24/09/2026) ------------------------------- */
/* O desenho é o da tela E-mail do menu (classes ml-*, em public/css/email/),
que já vem carregada em toda página. Aqui só se dá altura ao pano e se
acrescenta o selo do caso — o resto é herdado, de propósito: correção de
CSS que entra lá entra aqui. */
.cg-caixa{height:calc(100vh - 210px);min-height:420px}
.cg-caixa .ml-layout{height:100%}
.cg-mail-abrir{background:none;border:1px solid var(--border);border-radius:6px;
padding:2px 8px;font-size:11.5px;color:var(--text-2);cursor:pointer}
.cg-mail-abrir:hover{border-color:var(--accent);color:var(--accent)}
.cg-caixa .ml-att{display:flex;align-items:center;gap:6px}
/* A caixa que ainda não existe fica no rail, travada e sem ação — o hover diz
por quê. Sumir não ensinaria nada a quem foi procurar por ela. */
.cg-caixa .ml-rail-btn.is-travado{opacity:.32;cursor:not-allowed}
.cg-caixa .ml-rail-btn.is-travado:hover{background:none;color:inherit}
/* ---- A engrenagem da coluna, BU a BU (24/09/2026) ------------------------ */
.cm-sec--larga{max-width:820px}
.cg-cfg-bus{display:grid;gap:8px}
.cg-cfg-bu{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:start;
padding:8px 0;border-top:1px solid var(--border)}
.cg-cfg-bu:first-child{border-top:0}
.cg-cfg-bu-nome{font-size:12.5px;font-weight:600;color:var(--text-2);
display:flex;align-items:center;gap:6px;padding-top:4px}
.cg-cfg-n{background:var(--accent);color:#fff;border-radius:999px;
font-size:10px;padding:1px 6px;font-weight:700}
.cg-cfg-busca{margin-bottom:6px;font-size:12px;padding:4px 8px}
.cg-cfg-vazio{font-size:11.5px;color:var(--text-3);font-style:italic;padding:4px 0}
/* O card que não é da sua vez: aberto para ler, fechado para escrever. */
.cg-faixa.cg-so-leitura{background:var(--surface-2);color:var(--text-2);
border-left:3px solid var(--text-3)}
/* O endereço da caixa, no cabeçalho da lista: a tela diz de onde está falando. */
.cg-caixa-conta{font-size:11px;color:var(--text-3);font-weight:400}
/* Mensagem atrelada por PALPITE (o WAR veio do assunto, ninguém confirmou). */
.ml-item-label.is-palpite{opacity:.7;border-style:dashed}
.ml-item-label.is-sem{color:#c0392b;background:rgba(192,57,43,.08)}
/* A linha do caso no leitor, no mesmo lugar em que o comex põe o processo. */
.cg-mail-proc-linha{padding:6px 0 2px}
.cg-mail-proc{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2)}
.cg-mail-proc--falta{color:#c0392b}
.cg-mail-palpite{font-size:10.5px;padding:1px 6px;border-radius:999px;
background:var(--surface-2);color:var(--text-3);border:1px dashed var(--border)}
/* ---- Automações de e-mail (24/09/2026) ---------------------------------- */
/* O botão mora na barra do título, discreto: é configuração, não trabalho do
dia. Quem está tocando os casos não esbarra nele. */
.cg-auto-slot{position:relative;display:inline-flex}
.cg-auto-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border:1px solid var(--card-border,#e0dcd2);border-radius:7px;
background:var(--card-bg,#fff);color:var(--text-secondary,#6b6b6b);cursor:pointer}
.cg-auto-btn:hover{color:var(--accent,#9a5b2d);border-color:var(--accent,#9a5b2d)}
.cg-auto-n{position:absolute;top:-5px;right:-5px;min-width:15px;height:15px;padding:0 3px;
border-radius:999px;background:var(--accent,#9a5b2d);color:#fff;font-size:9.5px;font-weight:700;
display:flex;align-items:center;justify-content:center}
/* O PAINEL VIVE FORA DA TELA (25/09/2026).
Ele é filho da barra do título, e não do `.cm-scope` — então as variáveis de
cor da tela da garantia NÃO valem aqui. Foi por isso que ele nasceu
transparente, com o kanban aparecendo por trás do texto. Aqui só entram as
variáveis GLOBAIS do tema, e cada uma com uma cor sólida de reserva. */
.cg-auto-painel{position:absolute;top:38px;right:0;z-index:2000;width:330px;
background:var(--card-bg,#fff);border:1px solid var(--card-border,#e0dcd2);
border-radius:10px;box-shadow:var(--shadow-modal,0 12px 32px rgba(0,0,0,.18));
padding:10px;color:var(--text-primary,#1f2933);text-align:left}
.cg-auto-cab{display:flex;flex-direction:column;gap:1px;padding:2px 4px 8px;
border-bottom:1px solid var(--card-border,#e0dcd2);margin-bottom:6px}
.cg-auto-cab b{font-size:13px}
.cg-auto-cab span{font-size:11px;color:var(--text-secondary,#6b6b6b)}
.cg-auto-lista{display:grid;gap:4px;max-height:280px;overflow:auto}
.cg-auto-item{display:grid;gap:2px;text-align:left;background:none;border:0;width:100%;
padding:7px 8px;border-radius:7px;cursor:pointer;color:inherit}
.cg-auto-item:hover{background:var(--bg,#f7f5ef)}
.cg-auto-item-t{font-size:12.5px;font-weight:600}
.cg-auto-item-s{font-size:11px;color:var(--text-secondary,#6b6b6b)}
.cg-auto-off{font-size:10px;color:#c0392b}
.cg-auto-vazio{font-size:12px;color:var(--text-secondary,#6b6b6b);padding:10px 8px}
.cg-auto-add{width:100%;margin-top:8px;font-size:12px}
.cg-auto-gatilho{display:grid;gap:6px;margin-bottom:10px}
.cg-auto-radio{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.cg-auto-dest{display:flex;gap:8px;align-items:center}
.cg-auto-dest input{flex:1}
.cg-auto-forn{white-space:nowrap;font-size:11.5px}
.cg-auto-assunto{display:flex;gap:8px;align-items:center}
.cg-auto-assunto input{flex:1}
.cg-auto-prefixo{font-size:12px;font-weight:700;color:var(--text-3);white-space:nowrap;
border:1px dashed var(--border);border-radius:6px;padding:5px 8px}
.cg-auto-sel{font-size:11.5px;padding:4px 8px;max-width:210px}
.cg-auto-anexo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:5px 0;
border-top:1px solid var(--border)}
.cg-auto-anexo:first-of-type{border-top:0}
.cg-auto-tipos{display:flex;gap:12px;flex-wrap:wrap}
.cg-auto-unico{font-size:11px;color:var(--text-3);font-style:italic}
.cg-auto-ass-img{max-height:70px;border:1px solid var(--border);border-radius:6px}
.cg-auto-assinatura{display:flex;align-items:center;gap:10px}
.cg-auto-ativa{margin-left:auto}
.cg-auto-apagar{color:#c0392b}
/* Cada automação na lista: abrir, ligar/desligar e apagar, sem entrar nela. */
.cg-auto-linha{display:flex;align-items:center;gap:2px}
.cg-auto-linha .cg-auto-item{flex:1;min-width:0}
.cg-auto-liga,.cg-auto-x{flex:0 0 26px;height:26px;border:0;background:none;border-radius:6px;
cursor:pointer;color:var(--text-secondary,#6b6b6b);font-size:12px}
.cg-auto-liga.on{color:#1e8449}
.cg-auto-liga:hover,.cg-auto-x:hover{background:var(--bg,#f7f5ef)}
.cg-auto-x:hover{color:#c0392b}
/* O "+" dos destinatários e o menu que ele abre (25/09/2026). */
.cg-auto-dest{position:relative}
.cg-auto-mais{flex:0 0 32px;height:32px;border:1px solid var(--border);border-radius:7px;
background:none;color:var(--text-2);font-size:16px;line-height:1;cursor:pointer}
.cg-auto-mais:hover{border-color:var(--accent);color:var(--accent)}
.cg-auto-menu{position:absolute;top:36px;right:0;z-index:30;width:300px;padding:6px;
background:var(--card-bg,#fff);border:1px solid var(--card-border,var(--border));
border-radius:9px;box-shadow:var(--shadow-modal,0 10px 26px rgba(0,0,0,.14));
max-height:300px;overflow:auto}
.cg-auto-menu-tit{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;
color:var(--text-3);padding:8px 8px 3px;border-top:1px solid var(--border);margin-top:4px}
.cg-auto-menu-tit:first-child{border-top:0;margin-top:0}
.cg-auto-op{display:block;width:100%;text-align:left;background:none;border:0;
padding:6px 8px;border-radius:6px;font-size:12.5px;cursor:pointer;color:inherit}
.cg-auto-op:hover{background:var(--bg,var(--surface-2))}
.cg-auto-op i{display:block;font-style:normal;font-size:10.5px;color:var(--text-3);margin-top:1px}
/* ---- O editor da mensagem e os anexos aninhados (25/09/2026) ------------- */
/* Sem `pre-wrap`: o conteúdo agora é HTML com , e o pre-wrap fazia as
quebras do fonte contarem de novo — o texto começava um palmo abaixo do topo
da caixa e sobrava vão no fim. */
/* `display:block`, e não o flex herdado de `.cm-val`: o flex CENTRALIZAVA o
texto na vertical, e era isso que fazia o "Dear partner," começar no meio da
caixa, com vão igual em cima e embaixo. Caixa de escrever começa no topo. */
.cg-auto-corpo{display:block;min-height:150px;max-height:340px;overflow:auto;
line-height:1.5;padding:10px 12px;cursor:text}
.cg-auto-corpo:empty::before{content:attr(data-vazio);color:var(--text-3)}
.cg-auto-corpo img.cg-auto-img{display:block;margin:8px 0;max-width:100%;
border-radius:4px;cursor:pointer}
.cg-auto-corpo img.cg-auto-img.sel{outline:2px solid var(--accent);outline-offset:2px}
.cg-auto-regua{display:flex;align-items:center;gap:8px;margin:2px 0 10px;
font-size:11px;color:var(--text-3);user-select:none}
.cg-auto-regua input[type=range]{flex:0 0 160px}
.cg-auto-regua b{font-weight:600;color:var(--text-2);min-width:44px}
.cg-auto-regua button{border:0;background:none;color:var(--text-3);cursor:pointer;font-size:12px}
.cg-auto-regua button:hover{color:#c0392b}
/* Os tipos pertencem ao campo de cima: recuo e uma linha de amarração. */
.cg-auto-anexo{display:block;padding:7px 0;border-top:1px solid var(--border)}
.cg-auto-anexo:first-of-type{border-top:0}
.cg-auto-campo{font-weight:600}
.cg-auto-tipos{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
margin:5px 0 2px 22px;padding-left:12px;border-left:2px solid var(--border)}
.cg-auto-tipos-rot{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.3px}
.cg-auto-unico{font-style:normal;font-size:11px;color:var(--text-3);font-weight:400;margin-left:6px}
/* ---- O filtro por coluna da tabela, como no Excel (25/09/2026) ----------- */
.cg-tabela th{position:relative}
/* o th corta o que passa dele (ellipsis) e o sticky cria contexto proprio:
sem estas duas linhas o painel do filtro fica invisivel atras da tabela */
.cg-tabela thead th.is-funil{z-index:80;overflow:visible}
.cg-th-in{display:flex;align-items:center;gap:4px;justify-content:space-between;width:100%}
.cg-th-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.cg-th-nome:hover{color:var(--accent)}
.cg-th-ord{flex:0 0 11px;background:none;border:0;padding:0;cursor:pointer;
font-size:8.5px;line-height:1;color:var(--text-3);opacity:.5}
.cg-th-ord:hover{color:var(--accent);opacity:1}
.cg-th-ord.on{color:var(--accent);opacity:1}
.cg-tabela th.is-filtrada{background:rgba(154,91,45,.07)}
/* garantias/compradas: o alerta é no número, não um bloco de cor na linha */
.cg-auto-dica{font-size:11px;line-height:1.45;color:var(--text-3);
margin:2px 0 6px 24px;max-width:52ch}
.cg-recorte{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 10px;
border:1px solid var(--accent);border-radius:999px;font-size:11.5px;color:var(--accent);
background:rgba(154,91,45,.07);white-space:nowrap}
.cg-recorte button{background:none;border:0;padding:0;font-size:11px;line-height:1;
color:inherit;cursor:pointer;opacity:.7}
.cg-recorte button:hover{opacity:1}
/* --- a represa semanal (25/09/2026) ---
O círculo se completa na virada de sábado para domingo: é o tempo que falta
para o caso entrar em "Comercial › Garantia". */
.cg-timer{display:inline-block;width:13px;height:13px;border-radius:50%;flex:0 0 13px;
background:conic-gradient(var(--accent) var(--pct,0%),rgba(0,0,0,.09) 0);
box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.cg-timer::after{content:"";display:block;margin:3.5px;width:6px;height:6px;border-radius:50%;
background:var(--card-bg,var(--surface,#fff))}
/* a régua do card da garantia usa a cor de destaque da tela */
#cgRoot .cm-card .cm-tl{--pc:var(--accent)}
.cg-regua{display:flex;align-items:stretch;gap:0;margin:8px 0 4px}
.cg-regua-p{flex:1;display:flex;gap:7px;align-items:flex-start;padding:7px 9px;
border:1px solid var(--border);border-radius:8px;margin-right:6px;background:var(--surface)}
.cg-regua-p:last-child{margin-right:0}
.cg-regua-bola{font-size:11px;line-height:1.3;color:var(--text-3)}
.cg-regua-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.cg-regua-txt b{font-size:11.5px;font-weight:600;color:var(--text-2)}
.cg-regua-txt i{font-style:normal;font-size:10.5px;color:var(--text-3);line-height:1.4}
.cg-regua-p--current{border-color:var(--accent);background:rgba(154,91,45,.06)}
.cg-regua-p--current .cg-regua-bola,.cg-regua-p--current .cg-regua-txt b{color:var(--accent)}
.cg-regua-p--done .cg-regua-bola{color:var(--ok)}
.cg-regua-p--pending{opacity:.7}
.cg-regua-nota{font-size:10.5px;line-height:1.5;color:var(--text-3);margin:0 0 8px}
/* o espelho da decisão: aqui não se digita, só se lê o que veio da Garantia */
.cg-dec-espelho{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cg-dec-espelho b{font-size:12.5px}
.cg-dec-espelho span{font-size:10.5px;color:var(--text-3)}
.cg-dec-espelho--vazio{font-style:italic;color:var(--text-3)}
.cg-razao{font-variant-numeric:tabular-nums}
.cg-razao.is-alta{color:var(--danger,#b3261e);font-weight:700}
/* nas ultimas colunas o painel abre para a esquerda, senao sai da tela */
.cg-tabela tr:not(.cg-tr-grupo) th:nth-last-child(-n+4) .cg-funil{left:auto;right:0}
.cg-funil{position:absolute;top:100%;left:0;z-index:50;width:262px;padding:8px;
background:var(--card-bg,#fff);border:1px solid var(--card-border,var(--border));
border-radius:9px;box-shadow:var(--shadow-modal,0 10px 26px rgba(0,0,0,.16));
font-weight:400;text-transform:none;letter-spacing:0}
.cg-funil-busca{width:100%;padding:5px 8px;font-size:12px;border:1px solid var(--border);
border-radius:6px;background:var(--surface);color:var(--ink)}
.cg-funil-pe{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:7px 3px 1px;margin-top:6px;border-top:1px solid var(--border);
font-size:10.5px;color:var(--text-3)}
.cg-funil-pe button{background:none;border:0;padding:0;font-size:11px;
color:var(--accent);cursor:pointer}
.cg-funil-pe button:hover{text-decoration:underline}
.cg-funil-item.is-tudo{border-bottom:1px solid var(--border);margin-bottom:2px;padding-bottom:5px}
.cg-funil-item.is-tudo span{font-weight:600;color:var(--text-2)}
.cg-funil-acoes{display:flex;gap:10px;padding:6px 2px}
.cg-funil-acoes button{background:none;border:0;padding:0;font-size:11px;
color:var(--accent);cursor:pointer}
.cg-funil-acoes button:hover{text-decoration:underline}
.cg-funil-lista{max-height:220px;overflow:auto;display:grid;gap:1px;padding-right:2px}
.cg-funil-item{display:flex;align-items:center;gap:7px;padding:3px 4px;border-radius:5px;
font-size:12px;cursor:pointer}
.cg-funil-item:hover{background:var(--bg,var(--surface-2))}
.cg-funil-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-funil-item i{font-style:normal;font-size:10.5px;color:var(--text-3)}
.cg-funil-vazio{font-size:11.5px;color:var(--text-3);padding:8px 4px}
.cg-tab-limpar{background:none;border:0;color:var(--accent);cursor:pointer;font-size:inherit;padding:0}
.cg-tab-limpar:hover{text-decoration:underline}
.cg-td-dossie{text-align:center}
.cg-td-dossie .cg-girando{display:inline-block;vertical-align:middle}
/* ---------------------------------- TROCAR O PEDIDO OU A PEÇA (01/10/2026)
O campo travado vira uma linha com o valor à esquerda e o "trocar" à
direita; ao abrir, os dois seletores e os dois botões ocupam a largura
inteira, como qualquer campo largo do card. */
.cg-trocavel{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cg-trocavel .cg-trocar{font-size:11px;text-decoration:underline}
.cg-troca-linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cg-troca-linha select{flex:1 1 180px;min-width:0}
.cg-troca-linha .cm-btn{flex:0 0 auto}
/* ------------------------------- CONSERTAR UM COMENTÁRIO (01/10/2026)
Os dois links ficam na assinatura, pequenos, e só ganham cor no hover:
a nota é que tem de ser lida, não os botões. */
.cg-fala-acoes{display:inline-flex;gap:8px;margin-left:auto}
.cg-fala-link{background:none;border:0;padding:0;cursor:pointer;font:inherit;
font-size:11px;color:var(--muted);text-decoration:underline}
.cg-fala-link:hover{color:var(--ink)}
.cg-fala-link--no:hover{color:var(--danger,#c0392b)}
.cg-fala--edit .cg-fala-acoes{margin:6px 0 0;gap:6px}
.cg-anx-desc{font-size:12px;margin:2px 0 4px}