/* ==========================================================================
   Intranet Quanthus — COMEX · Controle Interno (kanban)
   PORTADO da Área Interna da Global Qomex (controle-comex.css, 20/08/2026).

   A PONTE DE TOKENS abaixo é a única adaptação: o CSS da origem fala os
   tokens de lá (--ink, --navy, --surface...), e aqui eles são traduzidos
   para os tokens da intranet — que MUDAM com a BU ativa. É o que faz o
   quadro acompanhar a cor da BU sem reescrever 700 linhas de estilo.
   (--pc e --opc chegam inline do JS: são as cores fixas de fase e de tipo
   de operação — identidade do quadro, iguais na origem.)
   ========================================================================== */
/* Os sub-modais que o JS cria com `document.body.appendChild` ficam FORA do
   #cxRoot.cx-scope, então precisam da ponte também: sem ela `var(--surface)`
   não resolve, o `background` inteiro é descartado e a janela abre
   TRANSPARENTE por cima do card (18/09/2026 — Alertas, Excluir e o botão de
   contêineres apareciam como texto solto sobre os campos da fase).
   Os tokens da direita vivem no `:root`, por isso funcionam no <body>.
   Modal novo criado no <body> entra nesta lista — igual à régua de z-index
   mais abaixo. */
.cx-scope,
.cx-alrt, .cx-cont, .cx-erro, .cx-confirm, .cx-toast{
  /* origem → intranet (as vars da direita vêm de /businessunit/themecss) */
  --navy:       var(--accent-dark);
  --cyan:       var(--accent);
  --ink:        var(--text-primary);
  --text:       var(--text-primary);
  --text-2:     var(--text-secondary);
  --muted:      var(--text-secondary);
  --surface:    var(--card-bg);
  --surface-2:  var(--column-bg);
  --border:     var(--card-border);
  --shadow-hov: var(--shadow-hover);
  /* semânticos (verde/laranja/vermelho não trocam com a BU, de propósito) */
  --ok:     #1f9d78;
  --warn:   #d98a1f;
  --danger: #c0392b;
  /* a intranet não tem fonte mono própria — stack do sistema */
  --font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
}

.cx-scope{height:100%}
.cx-app{display:flex;flex-direction:column;height:calc(100vh - 64px - 40px);min-height:520px}

/* ---------- cabeçalho ---------- */
.cx-header{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 2px 14px;border-bottom:1px solid var(--border);margin-bottom:14px;flex-shrink:0}
.cx-brand h1{font-family:var(--font-title);font-weight:700;font-size:22px;color:var(--ink);line-height:1.1}
.cx-sub{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--text-2);margin-top:4px}
.cx-stats{display:flex;gap:22px}
.cx-s{text-align:right;line-height:1.05}
.cx-s b{display:block;font-family:var(--font-title);font-weight:700;font-size:22px;color:var(--navy)}
.cx-s span{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-2)}
.cx-s--demo b{color:var(--warn);font-size:15px}

/* ---------- quadro (colunas com scroll horizontal) ---------- */
.cx-board{display:flex;gap:12px;flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;
  padding-bottom:8px;scrollbar-width:thin}
.cx-board::-webkit-scrollbar{height:9px}
.cx-board::-webkit-scrollbar-thumb{background:#c8d0cc;border-radius:6px}

.cx-col{flex:0 0 264px;width:264px;display:flex;flex-direction:column;min-height:0;
  background:var(--surface-2);border:1px solid var(--border);border-radius:12px}
.cx-col-head{display:flex;align-items:center;gap:8px;padding:10px 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)}
.cx-col-dot{width:8px;height:8px;border-radius:50%;background:var(--pc,var(--navy));flex-shrink:0}
.cx-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}
.cx-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}
.cx-col-body{flex:1;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin}
.cx-col-body::-webkit-scrollbar{width:8px}
.cx-col-body::-webkit-scrollbar-thumb{background:#d3dbd7;border-radius:6px}

/* ---------- card (neutro: a cor fica na coluna) ---------- */
.cx-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}
.cx-card:hover{box-shadow:var(--shadow-hov);border-color:#cfd8d4}
.cx-card:focus-visible{outline:none;border-color:var(--cyan);box-shadow:0 0 0 2px rgba(25,227,214,.25)}
.cx-card:active{cursor:grabbing}
.cx-card--dragging{opacity:.45}
/* coluna-alvo destacada durante o arraste */
.cx-col--drop{box-shadow:inset 0 0 0 2px var(--cyan)}
.cx-col--drop .cx-col-body{background:rgba(25,227,214,.06)}
.cx-card-head{padding:9px 24px 6px 10px}
.cx-card-code{display:block;font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.06em;color:var(--text-2)}
.cx-card-title{display:block;padding:0 10px;font-family:var(--font-body);font-weight:400;font-size:12px;
  color:var(--text-2);line-height:1.25;margin-top:1px}
/* ✕ para excluir (aparece ao passar o mouse / focar o card) */
.cx-card-del{position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:5px;
  display:grid;place-items:center;font-size:11px;line-height:1;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--border);opacity:0;transition:.12s}
.cx-card:hover .cx-card-del,.cx-card:focus-within .cx-card-del{opacity:1}
.cx-card-del:hover{color:#fff;background:var(--danger);border-color:var(--danger)}

/* ETD / ETA no resumo do card (só aparecem quando a data está preenchida). */
.cx-card-datas{display:flex;flex-wrap:wrap;gap:10px;padding:5px 10px 0}
.cx-dt{display:inline-flex;align-items:baseline;gap:4px;
  font-family:var(--font-mono);font-size:10px;color:var(--ink)}
.cx-dt b{font-size:8.5px;font-weight:700;letter-spacing:.1em;color:var(--text-2)}

.cx-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:0 10px 9px}
.cx-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}
.cx-chip--phase{color:#fff;border:none;background:var(--pc,var(--navy))}
.cx-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}

/* trilha de progresso das fases (usada no modal) */
.cx-progress{display:flex;gap:2px;margin:2px 0 12px}
.cx-prog-seg{flex:1;height:4px;border-radius:3px;background:var(--border)}
.cx-prog-seg.done{background:var(--pc,var(--ok));opacity:.55}
.cx-prog-seg.cur{background:var(--pc,var(--navy))}

/* ---------- acordeão de fases (grupos) dentro do card ---------- */
.cx-groups{display:flex;flex-direction:column;gap:6px}
/* SEM `overflow:hidden` aqui, de propósito (18/09/2026). Ele existia para
   cortar o canto quadrado do <button> do cabeçalho dentro do raio de 8px, mas
   também cortava a GAVETA dos combos (`.gqc-pop`, absoluta) na borda de baixo
   do grupo: abrir "Tipo de carga" mostrava FCL e LCL e escondia o resto da
   lista. Quem arredonda o canto agora é o próprio cabeçalho, logo abaixo.
   A gaveta ainda é contida pelo scroll de `.cx-modal-body` — isso é
   esperado: ali ela rola para dentro da vista. */
.cx-group{border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}
.cx-group--current{border-color:#6c4cd6;background:var(--surface)}
.cx-group-head{display:flex;align-items:center;gap:7px;width:100%;text-align:left;padding:6px 8px;
  border-radius:7px 7px 0 0}
/* Grupo fechado: o cabeçalho é o único filho visível, então arredonda embaixo
   também (7px = os 8px do grupo menos a borda de 1px). */
.cx-group:not([data-open]) .cx-group-head{border-radius:7px}
.cx-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:#6c4cd6}
.cx-group--done .cx-group-mark{background:#2f9e6a}
.cx-group--current .cx-group-mark{background:#6c4cd6}
.cx-group--pending .cx-group-mark{background:transparent;color:var(--text-2);border:1px solid var(--border)}
.cx-group-name{flex:1;font-family:var(--font-title);font-weight:600;font-size:11.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-group--pending .cx-group-name{color:var(--text-2)}
.cx-group-count{font-family:var(--font-mono);font-size:9px;color:var(--text-2);
  background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:0 6px}
.cx-group-chev{color:var(--text-2);font-size:10px;transition:transform .18s}
.cx-group[data-open] .cx-group-chev{transform:rotate(180deg)}
.cx-group-body{display:none;padding:2px 8px 9px}
.cx-group[data-open] .cx-group-body{display:block}

/* ---------- campos (densos: 2 colunas) ---------- */
.cx-fields{display:grid;grid-template-columns:1fr 1fr;gap:6px 7px}
.cx-field{display:flex;flex-direction:column;gap:2px;min-width:0}
.cx-field--wide{grid-column:1 / -1}
/* Anexos recolhidos (27/08/2026): com 2+ arquivos a lista fica dentro de um
   <details> e o campo mostra só "📎 N arquivos", para a fase não crescer na
   vertical. O marcador nativo do <summary> sai porque o 📎 já cumpre o papel. */
/* Datas do processo: divisor passado/futuro (27/08/2026). Tudo abaixo da linha
   pontilhada é estimativa — o vermelho existe para não confundir previsão com
   fato. A cor vai no INPUT (o texto da data), não no rótulo, que continua
   legível em cinza. */
.cx-date-corte{height:0;margin:5px 2px;border-top:1.5px dashed #d64545}
.cx-date-row.is-futura .cx-date-inp{color:#c0392b}
.cx-date-row.is-futura .cx-date-step{background:rgba(214,69,69,.12);color:#c0392b}
.cx-docs-fold{min-width:0}
.cx-docs-fold>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;color:var(--text-2);
  border:1px dashed var(--border);border-radius:6px;padding:2px 6px;user-select:none}
.cx-docs-fold>summary::-webkit-details-marker{display:none}
.cx-docs-fold>summary:hover{color:var(--text);border-color:var(--cyan)}
.cx-docs-fold[open]>summary{margin-bottom:4px;border-style:solid}
.cx-docs-fold .cx-docs-chips{display:flex;flex-direction:column;gap:3px}
.cx-flabel{font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-input{width:100%;font-family:var(--font-body);font-size:11.5px;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:4px 6px;line-height:1.3}
.cx-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 2px rgba(25,227,214,.18)}
.cx-textarea{resize:vertical;min-height:34px}
.cx-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235f6f70' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;padding-right:20px;cursor:pointer}
.cx-currency{display:flex;align-items:center;gap:4px}
.cx-currency span{font-family:var(--font-mono);font-size:11px;color:var(--text-2)}
/* O <label> é a ÁREA CLICÁVEL do toggle, então ele não pode ser maior que o
   desenho. `inline-flex` não bastava: dentro de `.cx-field`, que é
   `flex-direction:column`, o label é um item flex — o `display` vira `flex` e
   o `align-items:stretch` do pai o esticava até a borda da célula. Resultado:
   clicar no vazio à direita do botão ligava/desligava o campo (18/09/2026,
   "Carga IMO"). `fit-content` prende a largura ao conteúdo em qualquer pai
   (flex, grid ou bloco). */
.cx-check{display:inline-flex;align-items:center;height:24px;cursor:pointer;
  width:fit-content;align-self:flex-start;position:relative}
/* `position:relative` acima: o input abaixo é absoluto e sem ancestral
   posicionado ele se soltava do label. */
.cx-check input{position:absolute;opacity:0;width:0;height:0}
.cx-check span{width:34px;height:18px;border-radius:20px;background:var(--border);position:relative;transition:.15s}
.cx-check span::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow);transition:.15s}
.cx-check input:checked + span{background:var(--ok)}
.cx-check input:checked + span::after{transform:translateX(16px)}

/* ---------- botão "+ Novo" ---------- */
.cx-add{width:100%;padding:7px;border:1px dashed var(--border);border-radius:8px;background:transparent;
  font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.08em;transition:.15s}
.cx-add:hover{border-color:var(--cyan);color:var(--ink);background:var(--surface)}

/* ==========================================================================
   MODAL do card — abre por cima do quadro com o acordeão de fases dentro.
   ========================================================================== */
/* --cx-modal-w é a largura do modal do CARD, e é lida em dois lugares: o
   max-width do diálogo e a posição das setas « / », que precisam ficar FORA
   dele. Já foram para dentro uma vez (10/09/2026), quando o modal cresceu de
   1280 para 1520px e o cálculo das setas ficou com o número velho — daí a
   variável. Mexeu na largura? As setas acompanham sozinhas. */
.cx-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;
  --cx-modal-w:1520px}
.cx-modal-overlay{position:absolute;inset:0;background:rgba(6,16,31,.55);
  opacity:0;transition:opacity .18s}
.cx-modal.open .cx-modal-overlay{opacity:1}
.cx-modal-dialog{position:relative;width:100%;max-width:880px;max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;box-shadow:0 24px 60px rgba(6,16,31,.35);overflow:hidden;
  transform:translateY(8px) scale(.98);opacity:0;transition:transform .18s,opacity .18s}
.cx-modal.open .cx-modal-dialog{transform:none;opacity:1}
.cx-modal-inner{display:flex;flex-direction:column;min-height:0;overflow:hidden}

.cx-modal-head{display:flex;align-items:flex-start;gap:12px;padding:16px 16px 12px;flex-shrink:0}
.cx-modal-h{flex:1;min-width:0}
.cx-modal-code{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-2)}
.cx-modal-title{font-family:var(--font-title);font-weight:700;font-size:18px;color:var(--ink);
  line-height:1.2;margin-top:3px}
.cx-modal-acts{display:flex;align-items:center;gap:8px;flex-shrink:0}
.cx-modal-del{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--danger);background:var(--surface);border:1px solid var(--border);
  border-radius:7px;padding:5px 9px;transition:.12s}
.cx-modal-del:hover{color:#fff;background:var(--danger);border-color:var(--danger)}
.cx-modal-close{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:14px;
  color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);transition:.12s}
.cx-modal-close:hover{color:var(--ink);background:var(--border)}

.cx-modal-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:0 16px 10px;flex-shrink:0}
.cx-modal-gerais{display:flex;flex-wrap:wrap;gap:5px 16px;padding:0 16px 12px;flex-shrink:0;
  font-family:var(--font-body);font-size:12px;color:var(--ink)}
.cx-modal-gerais b{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-2);margin-right:5px;font-weight:700}
.cx-modal .cx-progress{padding:0 16px;flex-shrink:0}
.cx-modal-body{padding:2px 16px 16px;overflow-y:auto;min-height:0;scrollbar-width:thin}
.cx-modal-body::-webkit-scrollbar{width:9px}
.cx-modal-body::-webkit-scrollbar-thumb{background:#d3dbd7;border-radius:6px}
.cx-modal-body .cx-group{background:var(--surface)}
.cx-modal-body .cx-group--current{background:var(--surface-2)}

/* corpo em 2 colunas: acordeão de fases (esq.) + datas fixas (dir.) */
.cx-modal-cols{display:grid;grid-template-columns:minmax(0,1fr) 206px;gap:12px;align-items:start}
.cx-modal-main{min-width:0}

/* painel único de DATAS (não retrátil, à direita) */
.cx-modal-dates{border:1px solid var(--border);border-radius:10px;background:var(--surface-2);
  padding:11px 11px 12px;position:sticky;top:0}
.cx-dates-title{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--text-2);font-weight:700;margin-bottom:9px}
.cx-dates-list{display:flex;flex-direction:column;gap:5px}
.cx-date-row{display:flex;gap:8px;align-items:flex-start}
.cx-date-step{flex:0 0 auto;width:16px;height:16px;margin-top:1px;border-radius:50%;background:var(--navy);
  color:var(--cyan);font-family:var(--font-mono);font-size:8px;font-weight:700;display:grid;place-items:center}
.cx-date-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cx-date-lbl{font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2)}

/* campo CALCULADO (só leitura — o número vem pronto do backend) */
.cx-calc{display:block;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:4px 8px;line-height:1.3}
.cx-calc.is-erro{color:var(--danger);border-color:var(--danger);background:#fdf1f0}

/* anexo de VÁRIOS documentos (tipo "docs"): cada arquivo vira uma etiquetinha
   com um ✕ para tirar, e embaixo fica o botão de anexar mais. */
.cx-docs{display:flex;flex-direction:column;gap:5px}
.cx-docs-chips{display:flex;flex-wrap:wrap;gap:4px}
.cx-docs-chips:empty{display:none}
.cx-docs-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);background:#f0fbf7}
.cx-docs-chip-nome{font-family:var(--font-body);font-size:10.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-docs-x{flex-shrink:0;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;
  font-size:8px;line-height:1;color:var(--text-2);background:transparent;border:0;cursor:pointer;transition:.12s}
.cx-docs-x:hover{color:#fff;background:var(--danger)}
.cx-docs-add{display:flex;align-items:center;gap:6px;cursor:pointer;padding:5px 8px;border-radius:6px;
  border:1px dashed var(--border);background:var(--surface);transition:.12s;
  font-family:var(--font-body);font-size:11px;color:var(--text-2)}
.cx-docs-add:hover{border-color:var(--cyan);color:var(--ink)}
.cx-docs.has .cx-docs-add{align-self:flex-start}

/* O nome do documento é um LINK de download (o arquivo existe de verdade no
   servidor desde 08/2026 — antes era só um nome escrito na tela). */
a.cx-docs-chip-nome{text-decoration:none;cursor:pointer}
a.cx-docs-chip-nome:hover{text-decoration:underline}
/* ✉ = o documento veio de um anexo de e-mail deste processo (arrastado) */
.cx-docs-chip-org{flex-shrink:0;font-size:9px;color:var(--ok);opacity:.9}
.cx-docs-chip.is-email{border-color:var(--cyan);background:#f0f9fb}

/* ARRASTAR E SOLTAR — a faixa "solte aqui" só aparece quando há algo sendo
   arrastado por cima do campo; fora disso ela não ocupa espaço. */
.cx-docs-solta{display:none;padding:8px;border-radius:6px;text-align:center;
  border:1px dashed var(--cyan);background:#f0f9fb;
  font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--navy)}
.cx-docs.is-solta{outline:2px dashed var(--cyan);outline-offset:3px;border-radius:8px}
.cx-docs.is-solta .cx-docs-solta{display:block}
/* enquanto um anexo de e-mail está sendo arrastado, os campos que podem
   recebê-lo ficam visíveis (senão a pessoa não sabe onde soltar) */
body.gq-arrastando-anexo .cx-docs{outline:1px dashed var(--border);outline-offset:3px;border-radius:8px}
/* subindo o arquivo: a caixinha fica meio apagada e sem clique */
.cx-docs.is-subindo{opacity:.55;pointer-events:none}

/* o chip de anexo do e-mail é arrastável: mostra o "punho" e o cursor certo */
.cx-anexo[draggable="true"]{cursor:grab}
.cx-anexo[draggable="true"]:active{cursor:grabbing}
.cx-anexo-arrasta{flex-shrink:0;margin-left:auto;font-size:11px;color:var(--text-2);opacity:.5}
.cx-anexo:hover .cx-anexo-arrasta{opacity:1;color:var(--cyan)}

@media (max-width:760px){
  .cx-modal-cols{grid-template-columns:1fr}
  .cx-modal-split,.cx-modal-split.sem-report{grid-template-columns:1fr}
  .cx-modal-dates{position:static}
}
@media (max-width:600px){
  .cx-modal-body .cx-fields{grid-template-columns:1fr}
  .cx-gfields{grid-template-columns:1fr !important}
}

/* ═══════════  Cliente, número e vínculo com estimativa (novos)  ═══════════ */

/* Cliente em destaque no card do kanban. */
/* Nome do cliente + ícone do modal (avião/navio/caminhão) na MESMA linha:
   o nome ocupa o espaço que sobra e empurra o ícone para a direita. */
.cx-card-cliente{display:flex;align-items:flex-start;gap:6px;padding:0 10px;
  font-family:var(--font-body);font-weight:700;
  font-size:13px;color:var(--ink);line-height:1.25}
.cx-card-cliente-nome{flex:1;min-width:0}
.cx-card-head{display:flex;align-items:center;gap:5px}
.cx-card-link{font-size:11px;opacity:.8}
.cx-chip--tipo{color:#0f7c73;background:#eafcfa;border-color:#a7e5df}

/* Dados gerais editáveis do processo (no modal). */
.cx-gfields{display:grid;grid-template-columns:1fr 1fr;gap:6px 9px;padding:0 13px 9px;flex-shrink:0}
.cx-gfield{display:flex;flex-direction:column;gap:3px;min-width:0}
.cx-gfield .cx-flabel{display:flex;align-items:center;gap:4px}
.cx-gfield .req{color:var(--danger)}
.cx-gfield--trava .cx-input{background:var(--surface-2);border-style:dashed;color:var(--text-2);cursor:not-allowed}
.cx-lock{font-size:9px;opacity:.7}

/* Seletor "mover de fase" e link para a estimativa (na barra meta do modal). */
.cx-fase-move{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);font-weight:700}
.cx-fase-move .cx-input{width:auto;font-family:var(--font-body);font-size:12px;font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--ink);border-left:3px solid var(--pc,var(--navy))}
/* .cx-estlink definido mais abaixo (agora é um ícone no topo do modal) */

/* Form de novo processo. */
.cx-form-lead{padding:0 16px 10px;font-size:12.5px;color:var(--text-2);line-height:1.45}
.cx-form-acts{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:6px 16px 16px}
.cx-form-msg{font-size:12.5px;font-weight:600;color:var(--text-2)}
.cx-form-msg.is-erro{color:var(--danger)}
.cx-form-btn{font-family:var(--font-body);font-size:13.5px;font-weight:700;color:#fff;background:var(--navy);
  border:1px solid var(--navy);border-radius:9px;padding:9px 18px;cursor:pointer;transition:.15s}
.cx-form-btn:hover{background:var(--cyan);color:var(--navy);border-color:var(--cyan)}

/* ==========================================================================
   Refino do modal (2026-07): régua de fases, combobox país/UF, split de moeda,
   campo largo, confirmação de exclusão.
   ========================================================================== */

/* ---------- régua de fases: CHEVRONS lineares (esquerda → direita) ----------
   Cada estágio é uma "seta" que aponta para o próximo. Concluído = verde fraco;
   atual = azul/roxo; futuro = cinza. As bordas em ponta (clip-path) deixam claro
   o sentido do fluxo. */
.cx-modal-meta{display:flex;align-items:stretch;padding:2px 16px 12px}
.cx-ruler{display:flex;flex:1;min-width:0;gap:2px;align-items:stretch}
.cx-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%)}
.cx-ruler-seg:first-child{padding-left:12px;
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%)}
.cx-ruler-seg:last-child{padding-right:12px;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 11px 50%)}
.cx-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}
.cx-ruler-seg--pending{background:var(--surface-2)}
.cx-ruler-seg--pending .cx-ruler-name{color:var(--text-2)}
.cx-ruler-seg--done{background:#dcf1e5}
.cx-ruler-seg--done .cx-ruler-name{color:#2f9e6a;font-weight:600}
.cx-ruler-seg--current{background:#6c4cd6}
.cx-ruler-seg--current .cx-ruler-name{color:#fff;font-weight:700}
.cx-ruler-mvs{display:flex;gap:6px;margin-top:5px}
.cx-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}
.cx-ruler-mv:hover{background:rgba(255,255,255,.5)}
/* ícone "ver estimativa" no topo do modal (antes do Excluir) */
.cx-estlink{margin:0;width:30px;height:30px;display:inline-grid;place-items:center;font-size:14px;
  border:1px solid var(--border);border-radius:8px;background:var(--surface);color:#0f7c73;cursor:pointer;transition:.15s}
.cx-estlink:hover{background:#d6f7f3;border-color:#19E3D6}

/* ---------- combobox pesquisável (país / UF, com bandeira) ---------- */
.gqc{position:relative;width:100%}
.gqc-btn{width:100%;display:flex;align-items:center;gap:7px;font-family:var(--font-body);font-size:11.5px;
  color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:6px;
  padding:4px 8px;line-height:1.3;cursor:pointer;text-align:left}
.gqc-btn:hover{border-color:#cfd8d4}
.gqc-btn[aria-expanded="true"]{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(25,227,214,.18)}
.gqc-btn.is-empty .gqc-label{color:var(--text-2)}
.gqc-flag{flex-shrink:0;width:20px;height:14px;display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;overflow:hidden;border-radius:2px}
.gqc-flag svg{width:20px;height:14px;display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.gqc-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gqc-caret{flex-shrink:0;color:var(--text-2);font-size:10px}
.gqc-pop{position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;display:none;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);overflow:hidden}
.gqc-pop.open{display:flex}
.gqc-search{margin:6px;padding:6px 8px;font-family:var(--font-body);font-size:11.5px;border:1px solid var(--border);
  border-radius:6px;color:var(--text);background:var(--surface-2)}
.gqc-search:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 2px rgba(25,227,214,.18)}
.gqc-list{max-height:216px;overflow-y:auto;padding:0 4px 4px}
.gqc-opt{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:6px;cursor:pointer;
  font-size:11.5px;color:var(--text)}
.gqc-opt:hover{background:var(--surface-2)}
.gqc-opt.sel{background:rgba(25,227,214,.14);font-weight:600}
.gqc-empty{padding:10px;text-align:center;color:var(--text-2);font-size:11px}

/* ---------- split Moeda + Valor (campo FOB) ---------- */
.gqm-split{display:flex;gap:6px}
.gqm-cur{flex:0 0 66px;width:66px;padding-right:18px}
.gqm-val{flex:1;min-width:0;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- campo que ocupa a linha inteira (ex.: Observações) ---------- */
.cx-gfield--wide{grid-column:1/-1}

/* ---------- chip de exportação no card ---------- */
.cx-chip--exp{background:var(--navy);color:var(--cyan);border-color:var(--navy)}

/* ---------- janela de confirmação (exclusão) ---------- */
.cx-confirm{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:20px;
  background:rgba(15,23,25,.5);opacity:0;transition:opacity .18s}
.cx-confirm.open{opacity:1}
.cx-confirm-box{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:22px 22px 18px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.28);
  transform:scale(.96);transition:transform .18s}
.cx-confirm.open .cx-confirm-box{transform:none}
.cx-confirm-ico{font-size:26px;margin-bottom:6px}
.cx-confirm-title{font-family:var(--font-title);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:6px}
.cx-confirm-msg{font-size:12.5px;color:var(--text-2);line-height:1.45;margin-bottom:16px}
.cx-confirm-acts{display:flex;gap:10px;justify-content:center}
.cx-confirm-btn{font-family:var(--font-body);font-size:13px;font-weight:600;padding:8px 18px;border-radius:8px;
  cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:.12s}
.cx-confirm-btn:hover{background:var(--surface-2)}
.cx-confirm-btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.cx-confirm-btn.danger:hover{filter:brightness(.94)}

/* ==========================================================================
   Incoterm / Tipo de carga (fase A Pedir) + contêineres FCL + toast de aviso
   ========================================================================== */

/* combo desabilitado (até o modal ser escolhido) */
.gqc-btn.is-disabled{cursor:not-allowed;opacity:.6;background:var(--surface-2);border-style:dashed}
.gqc-btn.is-disabled .gqc-ph{font-style:italic}

/* Tipo de carga + botão de contêineres (FCL) */
.carga-wrap{display:flex;gap:6px;align-items:stretch}
.carga-wrap .gqc{flex:1;min-width:0}
.carga-fcl{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;border:1px solid var(--border);border-radius:6px;background:var(--surface);cursor:pointer;
  font-size:15px;transition:.12s}
.carga-fcl:hover{border-color:var(--cyan);background:var(--surface-2)}
.carga-fcl.has{border-color:var(--navy)}
.carga-fcl-badge:empty{display:none}
.carga-fcl-badge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--navy);color:var(--cyan);font-family:var(--font-mono);font-size:9px;font-weight:700;
  display:grid;place-items:center;line-height:1}

/* toast de aviso (incompatibilidade de modal) */
.cx-toast{position:fixed;left:50%;top:24px;transform:translate(-50%,-14px);z-index:2100;
  display:flex;align-items:center;gap:9px;max-width:min(520px,92vw);padding:11px 16px;border-radius:10px;
  background:#3a2e12;color:#ffe6a6;border:1px solid #7a5f1f;box-shadow:0 12px 34px rgba(0,0,0,.32);
  font-size:12.5px;line-height:1.4;opacity:0;transition:opacity .22s,transform .22s}
.cx-toast.open{opacity:1;transform:translate(-50%,0)}
.cx-toast.is-ok{border-color:var(--ok)}
.cx-toast-ico{font-size:15px;flex-shrink:0}

/* sub-modal de contêineres (FCL) */
.cx-cont{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:20px;
  background:rgba(15,23,25,.55);opacity:0;transition:opacity .18s}
.cx-cont.open{opacity:1}
.cx-cont-box{width:100%;max-width:760px;max-height:calc(100vh - 56px);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;
  box-shadow:0 20px 56px rgba(0,0,0,.3);transform:scale(.97);transition:transform .18s}
.cx-cont.open .cx-cont-box{transform:none}
.cx-cont-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--border)}
.cx-cont-title{font-family:var(--font-title);font-weight:700;font-size:16px;color:var(--ink)}
.cx-cont-sub{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-2);margin-top:3px}
.cx-cont-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;
  padding:16px 18px;overflow-y:auto}
.cx-cont-card{display:flex;flex-direction:column;align-items:center;gap:7px;padding:11px 9px;
  border:1px solid var(--border);border-radius:10px;background:var(--surface-2);transition:.14s}
.cx-cont-card.has{border-color:var(--navy);background:var(--surface);box-shadow:0 0 0 1px var(--navy) inset}
.cx-cont-ill{width:100%;height:52px;display:grid;place-items:center}
.cx-cont-ill svg{width:76px;height:48px}
.cx-cont-nome{font-size:11px;font-weight:600;color:var(--ink);text-align:center;line-height:1.2;min-height:26px;
  display:flex;align-items:center}
.cx-cont-qtd{display:flex;align-items:center;gap:6px}
.cx-cont-step{width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--border);
  border-radius:6px;background:var(--surface);cursor:pointer;font-size:15px;font-weight:700;color:var(--navy);line-height:1}
.cx-cont-step:hover{border-color:var(--cyan);background:var(--surface-2)}
.cx-cont-inp{width:40px;text-align:center;font-family:var(--font-mono);font-size:12.5px;font-weight:700;
  color:var(--text);border:1px solid var(--border);border-radius:6px;padding:3px 2px}
.cx-cont-inp:focus{outline:none;border-color:var(--cyan)}
.cx-cont-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;border-top:1px solid var(--border)}
.cx-cont-total{font-size:12.5px;font-weight:600;color:var(--text-2)}

/* ==========================================================================
   Miniatura do card (cor por operação, ícone de modal, chips carga/IMO),
   fase vazia e rework de tamanho dos contêineres (20'/40')
   ========================================================================== */

/* cor por tipo de operação (accent à esquerda + chip do tipo preenchido) */
.cx-card{border-left:3px solid var(--opc,var(--border))}
.cx-chip--tipo{color:#fff;border:none;background:var(--opc,var(--navy))}
/* ícone do modal (avião/navio/caminhão) */
.cx-modal-ico{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  color:var(--text-2);flex-shrink:0}
.cx-modal-ico svg{width:16px;height:16px;display:block}
/* chip de tipo de carga + IMO */
.cx-chip--carga{background:var(--surface);border-color:#cfd8d4;color:var(--ink)}
/* Carga IMO: pictograma de mercadoria perigosa + rótulo. Fundo claro para o
   losango vermelho aparecer (chip vermelho sólido escondia o desenho). */
.cx-chip--imo{display:inline-flex;align-items:center;gap:4px;padding:1px 6px 1px 3px;
  background:#fff3f2;border-color:#f0b7b2;color:#b3261e;letter-spacing:.06em}
.cx-chip--imo svg{width:15px;height:15px;display:block;flex-shrink:0}

/* fase sem campos (ex.: Liberação) */

/* contêineres: seleção por tamanho (20'/40') */
.cx-cont-sizes{display:flex;flex-direction:column;gap:5px;width:100%;margin-top:2px}
.cx-cont-size{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cx-cont-sztag{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--navy);
  background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:2px 7px;min-width:34px;text-align:center}
.cx-cont-stepper{display:flex;align-items:center;gap:5px}
.cx-cont-only{font-family:var(--font-mono);font-size:9px;font-weight:700;color:var(--text-2)}

/* ═══════════════════════════════════════════════════════════════════════════
   PAINEL DE E-MAILS DO PROCESSO  +  navegação entre cards  +  engrenagem
   (ver web/static/js/importacoes-emails.js)
   ═══════════════════════════════════════════════════════════════════════════ */

/* O modal fica MAIS LARGO quando tem a coluna de e-mails à esquerda.
   O form de "novo processo" não recebe .is-wide e continua estreito. */
.cx-modal-dialog.is-wide{max-width:var(--cx-modal-w)}
/* Três panos (10/09/2026): e-mails · processo · report. Os dois das pontas
   têm a MESMA largura, a pedido; o do meio afinou (campos com menos respiro e
   painel de datas mais estreito) para o terceiro caber sem esticar o modal
   além do que uma tela de notebook aguenta. */
.cx-modal-split{display:grid;grid-template-columns:320px minmax(0,1fr) 340px;
  min-height:0;overflow:hidden}
/* Sem o pano do report (form de criação, por exemplo), volta a dois. */
.cx-modal-split.sem-report{grid-template-columns:320px minmax(0,1fr)}
.cx-modal-right{display:flex;flex-direction:column;min-height:0;overflow:hidden}

/* ---------- coluna da esquerda ---------- */
.cx-mail{display:flex;flex-direction:column;min-height:0;
  border-right:1px solid var(--border);background:var(--surface-2)}
.cx-mail-head-bar{padding:14px 14px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.cx-mail-tit{display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--text-2);font-weight:700}
.cx-mail-sub{font-size:11.5px;color:var(--text-2);margin-top:5px}
.cx-mail-lista{flex:1;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;
  scrollbar-width:thin}
.cx-mail-lista::-webkit-scrollbar{width:9px}
.cx-mail-lista::-webkit-scrollbar-thumb{background:#d3dbd7;border-radius:6px}
.cx-mail-foot{flex-shrink:0;padding:8px 14px 11px;border-top:1px solid var(--border)}
.cx-mail-simulado{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--warn)}
/* Estado da lista sem e-mails (carregando, vazia ou serviço fora do ar) */
.cx-mail-vazio{padding:26px 14px;text-align:center;color:var(--muted);font-size:12.5px}
/* card recém-criado: o e-mail de abertura está a caminho — pulsa de leve
   para a pessoa entender que algo está carregando ali */
.cx-mail-esperando{animation:gq-esperando 1.4s ease-in-out infinite}
.cx-mail-esperando small{display:block;margin-top:4px;font-size:11px;opacity:.8}
@keyframes gq-esperando{0%,100%{opacity:1}50%{opacity:.45}}
/* Botão "✉ Escrever" do topo do painel (novo e-mail, sem partir de nenhum) */
.cx-mail-escrever{margin-left:auto}

/* ---------- conversas (threads) do processo ----------
   A lista tem UMA LINHA por conversa (assunto, quem, nº de mensagens, não
   lidos); o clique expande as mensagens dela logo abaixo (sanfona). */
/* fileira de chips para FILTRAR por conversa ("Todas · 1 · 2 …"); o chip
   mostra o apelido no lugar do número quando a conversa ganhou um */
.cx-conv-filtro{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.cx-conv-chip{cursor:pointer;border:1px solid var(--border);border-radius:999px;
  background:var(--surface);color:var(--text-2);padding:2px 9px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;line-height:1.6;
  max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color .15s,background .15s,color .15s}
.cx-conv-chip:hover{border-color:#c3d4ce}
.cx-conv-chip.is-ativo{background:var(--navy);color:var(--cyan);border-color:var(--navy)}

.cx-conv-bloco{display:flex;flex-direction:column;gap:6px}
.cx-conv{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 10px;
  transition:border-color .15s,box-shadow .15s}
.cx-conv:hover{border-color:#c3d4ce;box-shadow:0 2px 10px rgba(6,16,31,.06)}
.cx-conv.is-novo{border-left:3px solid #e5484d}
.cx-conv.is-aberta{background:var(--surface-2);border-color:#c3d4ce}
/* a bolinha numerada da conversa (vira ▾ quando expandida) */
.cx-conv-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);
  font-family:var(--font-mono);font-size:10.5px;font-weight:700}
.cx-conv.is-aberta .cx-conv-num{background:var(--navy);color:var(--cyan);border-color:var(--navy)}
.cx-conv-sub{display:block;font-size:11.5px;color:var(--text-2);line-height:1.3;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* o lápis do apelido: discreto até passar o mouse na linha */
.cx-conv-lapis{flex-shrink:0;align-self:center;font-size:12px;color:var(--text-2);
  opacity:.25;padding:2px 4px;border-radius:6px;transition:opacity .15s,background .15s}
.cx-conv:hover .cx-conv-lapis{opacity:.9}
.cx-conv-lapis:hover{background:var(--surface-2)}
/* marca de "outra conversa tem o mesmo assunto" (Encaminhar cria corrente nova) */
.cx-conv-rel{display:block;margin-top:3px;font-size:10px;font-style:italic;color:var(--warn)}
/* as mensagens da conversa expandida, com um recuo leve para mostrar o nível */
.cx-conv-mails{display:flex;flex-direction:column;gap:6px;margin-left:12px;
  padding-left:9px;border-left:2px solid var(--border)}

/* ---------- um e-mail (linha retraída + corpo) ---------- */
.cx-mail-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;
  transition:border-color .15s,box-shadow .15s}
.cx-mail-item.is-aberto{border-color:#c3d4ce;box-shadow:0 2px 10px rgba(6,16,31,.06)}
/* não lido: barrinha vermelha na lateral, para achar de longe */
.cx-mail-item.is-novo{border-left:3px solid #e5484d}

.cx-mail-head{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;
  padding:9px 10px;cursor:pointer;background:none;border:none}
.cx-mail-head:hover{background:var(--surface-2)}
.cx-mail-av{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:var(--cyan);font-family:var(--font-mono);font-size:9.5px;font-weight:700}
.cx-mail-av.is-out{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.cx-mail-resumo{flex:1;min-width:0}
.cx-mail-l1{display:flex;align-items:baseline;gap:6px}
.cx-mail-de{flex:1;min-width:0;font-weight:700;font-size:12.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-mail-data{flex-shrink:0;font-family:var(--font-mono);font-size:9.5px;color:var(--text-2)}
.cx-mail-assunto{display:block;font-size:12px;color:var(--text-2);line-height:1.3;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-mail-item.is-novo .cx-mail-assunto{color:var(--ink);font-weight:600}
.cx-mail-clipe{flex-shrink:0;font-size:11px;opacity:.6;margin-top:2px}
.cx-mail-badge{flex-shrink:0;margin-left:2px;margin-top:1px}

.cx-mail-corpo{padding:2px 11px 11px;border-top:1px solid var(--border)}
.cx-mail-dest{display:flex;flex-direction:column;gap:3px;padding:9px 0;font-size:11.5px;color:var(--text-2)}
.cx-mail-rot{display:inline-block;min-width:34px;font-family:var(--font-mono);font-size:9px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--text-2);opacity:.8}
.cx-mail-pessoa{color:var(--ink)}
.cx-mail-texto{font-size:12.5px;line-height:1.5;color:var(--ink);
  padding:9px 0;border-top:1px dashed var(--border);
  /* e-mail traz palavra gigante sem espaço (link, código) — quebra em vez de estourar */
  overflow-wrap:break-word;word-break:break-word}
/* CORPO EM HTML — é o que preserva a ASSINATURA do remetente (rodapé com logo,
   cores, links). O HTML vem de fora, já limpo pelo JS (ver corpoHTMLSeguro em
   importacoes-emails.js); aqui só o contemos para não estourar o painel:
   o e-mail foi desenhado para 600px de largura e a coluna do card é estreita. */
.cx-mail-html{font-size:12.5px;line-height:1.5;color:var(--ink);
  padding:9px 0;border-top:1px dashed var(--border);
  overflow-x:auto;overflow-wrap:break-word;word-break:break-word}
.cx-mail-html img{max-width:100%;height:auto}
/* tabela é o esqueleto de toda assinatura de e-mail: não pode empurrar o painel */
.cx-mail-html table{max-width:100%;border-collapse:collapse}
.cx-mail-html a{color:var(--cyan)}
/* imagem hospedada FORA, bloqueada: fica um quadro discreto no lugar, para a
   pessoa perceber que havia uma imagem ali (e não achar que o e-mail veio torto) */
.cx-mail-html img[data-bloqueada]{display:inline-block;min-width:22px;min-height:22px;
  border:1px dashed var(--border);border-radius:4px;background:var(--surface-2)}

/* histórico citado (as mensagens anteriores repetidas no corpo da resposta):
   escondido atrás do botão "⋯", como no Gmail */
.cx-mail-cit-btn{display:inline-block;cursor:pointer;background:var(--surface-2);
  border:1px solid var(--border);border-radius:10px;padding:2px 10px;margin:2px 0 6px;
  font-family:var(--font-mono);font-size:10px;color:var(--text-2);letter-spacing:.04em}
.cx-mail-cit-btn:hover{border-color:var(--cyan);color:var(--ink)}
.cx-mail-cit-btn.is-aberto{background:var(--navy);color:var(--cyan);border-color:var(--navy)}
.cx-mail-citacao{margin:0 0 8px;padding:8px 10px;border-left:3px solid var(--border);
  background:var(--surface-2);border-radius:0 8px 8px 0;font-size:11.5px;line-height:1.45;
  color:var(--text-2);word-break:break-word}

/* anexos */
.cx-mail-anexos{display:flex;flex-direction:column;gap:5px;padding-top:8px;border-top:1px dashed var(--border)}
.cx-mail-anexos-tit{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-2);font-weight:700}
.cx-anexo{display:flex;align-items:center;gap:7px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:6px 8px;transition:.12s}
.cx-anexo:hover{border-color:var(--cyan);background:var(--surface)}
.cx-anexo-ico{flex-shrink:0;width:16px;height:16px;border-radius:3px;background:var(--text-2);opacity:.55}
.cx-anexo-ico--pdf{background:#d64545;opacity:1}
.cx-anexo-ico--xlsx{background:#1d8a5c;opacity:1}
.cx-anexo-ico--png,.cx-anexo-ico--jpg,.cx-anexo-ico--jpeg{background:#6b7fd7;opacity:1}
.cx-anexo-nome{flex:1;min-width:0;font-size:11.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-anexo-tam{flex-shrink:0;font-family:var(--font-mono);font-size:9.5px;color:var(--text-2)}
/* aviso de que a logo/assinatura do remetente NÃO virou anexo */
.cx-mail-inline-nota{font-size:10.5px;color:var(--text-2);font-style:italic;opacity:.85;padding-top:4px}

/* recibo de leitura — quem abriu e quando */
.cx-mail-recibo{margin-top:9px;padding:6px 9px;border-radius:7px;font-size:11px;
  background:#eafcf5;border:1px solid #a7e5cf;color:#0c6b52}
.cx-mail-recibo.is-out{background:var(--surface-2);border-color:var(--border);color:var(--text-2)}

.cx-mail-acts{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.cx-mail-act{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:7px;
  padding:5px 8px;cursor:pointer;transition:.12s}
.cx-mail-act:hover{color:var(--navy);border-color:var(--cyan);background:var(--surface)}

/* ---------- caixa de resposta / encaminhamento ---------- */
.cx-mail-composer{flex-shrink:0;max-height:52%;overflow-y:auto;padding:11px;
  border-top:1px solid var(--border);background:var(--surface);scrollbar-width:thin}
.cx-comp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cx-comp-tit{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--navy);font-weight:700}
.cx-comp-x{width:20px;height:20px;border-radius:5px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-2);font-size:11px;line-height:1;cursor:pointer}
.cx-comp-x:hover{color:#fff;background:var(--danger);border-color:var(--danger)}
.cx-comp-de{font-size:11px;color:var(--text-2);margin-bottom:7px}
.cx-comp-l{display:flex;flex-direction:column;gap:3px;margin-bottom:7px;
  font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-2)}
.cx-comp-corpo{width:100%;font-family:var(--font-body);font-size:12px;line-height:1.5;resize:vertical}
/* Prévia da assinatura institucional no rodapé do composer (o cartão .gq-sig
   vem do styles.css — mesmo desenho da ferramenta Templates). */
.cx-comp-assinatura{margin-top:8px;padding:6px;border:1px dashed var(--border);border-radius:8px}
.cx-comp-ass-nota{font-size:10px;color:var(--text-2);font-style:italic;margin-top:4px}
.cx-comp-anexos{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.cx-comp-anexo{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:7px;padding:4px 6px}
.cx-comp-anexo-x{width:16px;height:16px;border-radius:4px;border:none;background:none;
  color:var(--text-2);font-size:10px;line-height:1;cursor:pointer}
.cx-comp-anexo-x:hover{color:#fff;background:var(--danger)}
.cx-comp-acts{display:flex;align-items:center;gap:8px;margin-top:10px}
.cx-comp-espaco{flex:1}
.cx-comp-anexar{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:7px;
  padding:6px 9px;cursor:pointer;transition:.12s}
.cx-comp-anexar:hover:not(:disabled){color:var(--navy);border-color:var(--cyan);background:var(--surface)}
.cx-comp-anexar:disabled{opacity:.45;cursor:not-allowed}

/* Os anexos e os botões de anexar ficam no TOPO do rascunho, antes do texto:
   é a primeira coisa a conferir antes de escrever, e o que mais se esquece. */
.cx-comp-anexar-linha{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cx-comp-anexos:empty{display:none}
.cx-comp-anexos{margin:6px 0 2px}

/* painel "📄 Do processo": os documentos já anexados nos campos do card */
.cx-comp-docs{display:flex;flex-direction:column;gap:4px;margin-top:6px;padding:6px;
  border:1px dashed var(--cyan);border-radius:8px;background:var(--surface-2);
  max-height:190px;overflow-y:auto}
.cx-comp-docs-vazio{font-size:11px;line-height:1.45;color:var(--text-2);font-style:italic}
.cx-comp-doc{display:flex;align-items:center;gap:7px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:5px 7px;transition:.12s}
.cx-comp-doc:hover:not(:disabled){border-color:var(--cyan)}
.cx-comp-doc:disabled{cursor:default;opacity:.6}
/* o CAMPO de onde o documento veio (Proforma Invoice, Purchase Order...) —
   é o que diferencia dois arquivos de mesmo nome em campos diferentes */
.cx-comp-doc-campo{flex-shrink:0;max-width:38%;font-family:var(--font-mono);font-size:8.5px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-comp-doc-nome{flex:1;min-width:0;font-size:11px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-comp-doc-ok{flex-shrink:0;color:var(--ok);font-size:11px}

/* ---------- badge de e-mail não lido na MINIATURA do card ---------- */
.cx-card-badge{flex-shrink:0}

/* ---------- setas « » nas laterais do modal (troca de CARD, não de fase) --- */
.cx-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:96px;border-radius:12px;cursor:pointer;
  display:grid;place-items:center;font-size:20px;line-height:1;
  color:#fff;background:rgba(10,26,47,.55);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(2px);transition:background .15s,transform .15s}
.cx-nav:hover{background:rgba(10,26,47,.85)}
.cx-nav--prev{left:max(10px,calc(50% - var(--cx-modal-w)/2 - 56px))}
.cx-nav--next{right:max(10px,calc(50% - var(--cx-modal-w)/2 - 56px))}
.cx-nav[hidden]{display:none}

/* ---------- engrenagem no topo do quadro ---------- */
.cx-gear{align-self:center;width:34px;height:34px;border-radius:9px;cursor:pointer;
  display:grid;place-items:center;color:var(--text-2);
  background:var(--surface);border:1px solid var(--border);transition:.15s}
.cx-gear:hover{color:var(--navy);border-color:var(--cyan);background:var(--surface-2)}
.cx-gear svg{width:18px;height:18px}
.cx-stats{align-items:center}

/* ---------- janela de configurações de e-mail ---------- */
.cx-cfg-box{max-width:520px}
.cx-cfg-body{padding:14px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.cx-cfg-body textarea.cx-input{font-family:var(--font-body);font-size:12.5px;line-height:1.5;resize:vertical}
.cx-cfg-img{margin:8px 0 4px}
.cx-cfg-prev{min-height:64px;display:grid;place-items:center;margin-top:6px;
  border:1px dashed var(--border);border-radius:9px;background:var(--surface-2);padding:6px}
.cx-cfg-vazio{font-size:11px;color:var(--text-2);font-style:italic}
.cx-cfg-dica{font-size:11px;color:var(--text-2);margin-top:6px}
.cx-cfg-check{display:flex;gap:9px;align-items:flex-start;margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--border);font-size:12.5px;color:var(--ink);cursor:pointer}
.cx-cfg-check input{margin-top:2px;flex-shrink:0}
.cx-cfg-check small{display:block;font-size:11px;color:var(--text-2);margin-top:3px;line-height:1.4}
.cx-cfg-msg{flex:1;font-size:12px;color:var(--danger)}

/* ---------- telas estreitas: e-mails viram uma faixa em cima ---------- */
/* Entre 1100px e 1400px os três panos ficariam apertados: o report desce
   para baixo do processo e passa a ocupar a largura toda. Abaixo de 1100px
   tudo empilha (regra logo abaixo). */
@media (max-width:1400px) and (min-width:1101px){
  /* Sem isto, as setas cairiam para o 10px do canto da tela e voltariam a
     ficar por cima do modal: aqui ele abre mão de 220px para elas caberem. */
  .cx-modal{--cx-modal-w:calc(100% - 220px)}
  .cx-modal-split{grid-template-columns:320px minmax(0,1fr);overflow-y:auto}
  .cx-rep{grid-column:1 / -1;border-left:0;border-top:1px solid var(--border);max-height:58vh}
}
@media (max-width:1100px){
  .cx-modal-dialog.is-wide{max-width:880px}
  .cx-rep{border-left:0;border-top:1px solid var(--border);max-height:58vh}
  .cx-modal-split{grid-template-columns:1fr;overflow-y:auto}
  .cx-mail{border-right:none;border-bottom:1px solid var(--border);max-height:44vh}
  .cx-nav{width:34px;height:70px;font-size:16px}
  .cx-nav--prev{left:6px}
  .cx-nav--next{right:6px}
}

/* ---------- ícone do menu lateral (navio de contêiner) ----------
   Fica aqui (e não em style.css) para o módulo viajar autocontido no
   pacote de volta para a máquina de desenvolvimento. */
.ni-comex {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h18l-2.5 5H5z'/%3E%3Crect x='6' y='9.5' width='12' height='4.5' rx='.6'/%3E%3Crect x='9.5' y='5.5' width='5' height='4' rx='.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h18l-2.5 5H5z'/%3E%3Crect x='6' y='9.5' width='12' height='4.5' rx='.6'/%3E%3Crect x='9.5' y='5.5' width='5' height='4' rx='.6'/%3E%3C/svg%3E");
}

/* A origem tinha [hidden]{display:none!important} GLOBAL (styles.css de lá);
   sem isso o modal (display:grid) ignora o atributo hidden e fica aberto,
   vazio, no meio da tela. Escopado ao módulo para não afetar o resto. */
.cx-scope [hidden]{display:none!important}

/* O título da PÁGINA já é o padrão visual da intranet (.painel-title, com o
   traço da BU). O título interno do quadro viraria eco — some; os contadores
   ("N processos / 7 fases") ficam, que são informação. */
.page-comex .cx-brand{display:none}

/* ---------- prévia da assinatura no compositor (.gq-sig) ----------
   Na origem estas regras moravam no styles.css GLOBAL de lá; aqui vêm junto
   do módulo. É só a PRÉVIA — quem carimba a assinatura de verdade no envio é
   o servidor (model/comex/email.go). */
.gq-sig{width:336px;max-width:100%;background:#fff;padding:12.6px 14.7px;display:flex;align-items:center;gap:11.55px;
  font-family:var(--font-body),system-ui,sans-serif;border-radius:3.15px}
.gq-sig-lg{height:28.35px;width:auto;display:block;flex:none}
.gq-sig-bar{width:1.05px;align-self:stretch;background:linear-gradient(180deg,var(--cyan),#bfe9e6);flex:none}
.gq-sig-nm{font-family:var(--font-title),sans-serif;font-weight:700;font-size:10.5px;color:var(--navy);line-height:1.12}
.gq-sig-ro{font-family:var(--font-mono);font-size:6.3px;letter-spacing:.05em;color:#0c8b86;text-transform:uppercase;margin-top:2.1px}
.gq-sig-ct{margin-top:6.3px;display:flex;flex-direction:column;gap:3.15px}
.gq-sig-i{display:flex;align-items:center;gap:4.73px;font-size:7.09px;color:#3a4753;white-space:nowrap}
.gq-sig-i svg{width:7.88px;height:7.88px;color:#0c8b86;flex:none}

/* ícone do menu do Painel de Importações (globo com rota) */
.ni-comex-painel {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.5 9h17M3.5 15h17M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.5 9h17M3.5 15h17M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18'/%3E%3C/svg%3E");
}

/* ---------- Monitor de e-mails (/comex/mail-status) ----------
   Tela nova da intranet (não existia na origem): a saúde do agente IMAP.
   Usa os tokens globais — acompanha a BU como as outras telas. */
.cxmm-veredito{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:6px;
  border:1px solid var(--card-border);background:var(--card-bg);box-shadow:var(--shadow);margin-bottom:18px}
.cxmm-veredito b{font-family:var(--font-title);font-size:16px}
.cxmm-veredito p{margin:4px 0 0;color:var(--text-secondary);font-size:13.5px}
.cxmm-dot{width:14px;height:14px;border-radius:50%;margin-top:4px;flex-shrink:0}
.cxmm--ok .cxmm-dot{background:#1f9d78;box-shadow:0 0 0 4px rgba(31,157,120,.18);animation:cxmmPulse 2.2s ease-in-out infinite}
.cxmm--ok b{color:#1f9d78}
.cxmm--atencao .cxmm-dot{background:#d98a1f;box-shadow:0 0 0 4px rgba(217,138,31,.18)}
.cxmm--atencao b{color:#d98a1f}
.cxmm--parado .cxmm-dot,.cxmm--nunca .cxmm-dot{background:#c0392b;box-shadow:0 0 0 4px rgba(192,57,43,.18)}
.cxmm--parado b,.cxmm--nunca b{color:#c0392b}
@keyframes cxmmPulse{0%,100%{opacity:1}50%{opacity:.45}}
.cxmm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:18px}
.cxmm-box{padding:14px 16px;border:1px solid var(--card-border);border-radius:6px;background:var(--card-bg)}
.cxmm-k{display:block;font-family:var(--font-body);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:4px}
.cxmm-box b{font-family:var(--font-title);font-size:17px;color:var(--text-primary)}
.cxmm-box small{display:block;margin-top:4px;color:var(--text-secondary);font-size:12px}
.cxmm-bad{color:#c0392b;font-weight:600}
.cxmm-erro{padding:14px 16px;border:1px solid #c0392b55;border-left:4px solid #c0392b;border-radius:6px;
  background:var(--card-bg);margin-bottom:18px;font-size:13px}
.cxmm-erro code{display:block;margin-top:8px;padding:8px 10px;background:var(--column-bg);
  border-radius:4px;font-size:12px;white-space:pre-wrap;word-break:break-word}
.cxmm-h2{font-family:var(--font-title);font-size:17px;margin:6px 0 10px}
.cxmm-h2 small{font-weight:400;color:var(--text-secondary);font-size:12.5px}
.cxmm-tab{width:100%;border-collapse:collapse;background:var(--card-bg);border:1px solid var(--card-border);border-radius:6px}
.cxmm-tab th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--card-border);background:var(--column-bg)}
.cxmm-tab td{padding:8px 12px;border-bottom:1px solid var(--card-border);font-size:13px;color:var(--text-primary)}
.cxmm-tab tr:last-child td{border-bottom:0}
.cxmm-mono{font-family:ui-monospace,Consolas,monospace;font-size:12px}

/* ==========================================================================
   SUGESTÃO DA IA (02/09/2026) — o bloco que o agente `triagem_comex` escreve
   na coluna de e-mails do card.

   O desenho é DELIBERADAMENTE diferente de um e-mail da lista: borda
   tracejada, fundo levemente tingido e o selo "não enviada". Em volta ficam
   e-mails reais de cliente, e um bloco parecido com e-mail seria lido como se
   já tivesse saído.

   ONDE ELE MORA (refeito em 02/09/2026): DENTRO da conversa (`.cx-conv-mails`),
   acima da mensagem mais nova. A primeira versão era uma faixa entre o
   cabeçalho e a lista — e ela ENCOLHIA a lista de e-mails para caber, que foi
   exatamente a reclamação: "aparece a sugestão mas dai esconde o email".
   Aqui dentro ele rola junto com a conversa e não tira espaço de ninguém.
   ========================================================================== */
.cx-conv-mails .cx-sug{margin:0 0 8px}
.cx-sug{border:1px dashed var(--cyan);border-radius:10px;background:color-mix(in srgb, var(--cyan) 7%, var(--surface));
  padding:11px 12px}
/* o 🤖 na linha da conversa: o aviso de que há sugestão ali. Só existe quando a
   IA tem ALGO A RESPONDER — "não precisa de resposta" não desenha nada na tela
   (decisão do Kaique, 02/09/2026), nem bloco, nem nota, nem chip. */
.cx-conv-sug-chip{flex-shrink:0;font-size:13px;line-height:1;align-self:center}
.cx-sug-tit{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink)}
.cx-sug-selo{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--warn);border:1px solid var(--warn);border-radius:999px;padding:1px 7px;font-weight:700}
.cx-sug-linha{margin-top:6px;font-size:12px;color:var(--text-2);line-height:1.45}
.cx-sug-linha b{color:var(--ink)}
.cx-sug-texto{margin-top:9px;padding:9px 11px;border-radius:8px;background:var(--surface);
  border:1px solid var(--border);font-size:13px;color:var(--text);line-height:1.5;
  max-height:260px;overflow:auto}
.cx-sug-det{margin-top:8px;font-size:12px;color:var(--text-2);line-height:1.45}
.cx-sug-det summary{cursor:pointer;font-weight:600;color:var(--ink)}
.cx-sug-acts{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:11px}
.cx-sug-nota{margin-top:5px;font-size:11.5px;color:var(--text-2);line-height:1.4}

/* Botão secundário do bloco (e de qualquer .cx-form-btn que precise ser
   discreto ao lado de um principal). */
.cx-form-btn.is-fantasma{background:transparent;color:var(--ink);border-color:var(--border);font-weight:600;
  padding:8px 13px;font-size:12.5px}
.cx-form-btn.is-fantasma:hover{background:var(--surface-2);border-color:var(--cyan);color:var(--ink)}

/* ==========================================================================
   [09/09/2026] MODOS DE VISUALIZAÇÃO, FILTRO, TRADING E FAMÍLIA MASTER/HOUSE

   Os contadores "101 processos / 7 fases" saíram do cabeçalho e deram lugar a
   dois botões de modo (Kanban × E-mail). A contagem não desapareceu: virou o
   número discreto no fim da barra de filtro, onde ela passou a significar
   "quantos cards o filtro está deixando ver".
   ========================================================================== */

/* ---------- modos: Kanban × E-mail ---------- */
.cx-modes{display:flex;gap:2px;padding:3px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface-2)}
.cx-mode{padding:7px 16px;border:0;border-radius:7px;cursor:pointer;background:transparent;
  font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-2);transition:background .14s,color .14s}
.cx-mode:hover{color:var(--ink)}
.cx-mode.is-on{background:var(--surface);color:var(--navy);font-weight:700;
  box-shadow:0 1px 2px rgba(0,0,0,.07)}

/* ---------- barra de filtro ---------- */
/* Sem borda de baixo (16/09/2026): a barra mora DENTRO do `.cx-header`, que já
   tem a sua — a régua dupla desenhava um traço solto à direita da tela. */
.cx-filtros{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}

/* busca livre do quadro */
.cx-busca{display:inline-flex;align-items:center;gap:7px;padding:0 10px;height:34px;
  border:1px solid var(--border);border-radius:9px;background:var(--surface)}
.cx-busca:focus-within{border-color:var(--cyan)}
.cx-busca-ico{display:flex;width:14px;height:14px;color:var(--text-2);flex:none}
.cx-busca-ico svg{width:14px;height:14px}
.cx-busca-inp{border:0;outline:0;background:transparent;font-size:12.5px;color:var(--text);width:210px;
  font-family:inherit}
.cx-busca-inp::placeholder{color:var(--text-2)}
.cx-busca-inp::-webkit-search-cancel-button{cursor:pointer}

/* modal (navio / avião / caminhão) — três botões de um estado só */
.cx-fmodais{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border);
  border-radius:9px;background:var(--surface-2)}
.cx-fmodal{display:inline-flex;align-items:center;justify-content:center;width:30px;height:26px;
  border:0;border-radius:7px;background:transparent;cursor:pointer;color:var(--text-2);
  transition:background .14s,color .14s}
.cx-fmodal svg{width:16px;height:16px;display:block}
.cx-fmodal:hover{color:var(--ink)}
.cx-fmodal.is-on{background:var(--surface);color:var(--navy);
  box-shadow:0 1px 2px rgba(0,0,0,.07)}
.cx-filtro-conta{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-2);margin-left:auto}
.cx-filtro-limpar{border:0;background:transparent;cursor:pointer;padding:4px 6px;
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--danger);text-decoration:underline}

/* campo de marcação múltipla (botão + gaveta) */
.cx-ms{position:relative}
.cx-ms-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:7px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface);
  font-size:12.5px;color:var(--text);max-width:320px}
.cx-ms-btn:hover{border-color:var(--cyan)}
.cx-ms.is-on .cx-ms-btn{border-color:var(--cyan);color:var(--navy);font-weight:600;
  background:color-mix(in srgb, var(--cyan) 8%, var(--surface))}
.cx-ms-seta{font-size:9px;color:var(--text-2)}
.cx-ms-pop{position:absolute;z-index:60;top:calc(100% + 5px);left:0;min-width:280px;max-width:380px;
  max-height:320px;overflow-y:auto;padding:6px;border:1px solid var(--border);border-radius:11px;
  background:var(--surface);box-shadow:var(--shadow-hov),0 8px 26px rgba(0,0,0,.13)}
.cx-ms-opt{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 9px;
  padding:7px 9px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--text)}
.cx-ms-opt:hover{background:var(--surface-2)}
.cx-ms-opt input{cursor:pointer;grid-row:span 2;align-self:center}
.cx-ms-t{font-weight:500}
.cx-ms-sub{grid-column:2;font-family:var(--font-mono);font-size:10.5px;color:var(--text-2)}
.cx-ms-vazio{padding:12px 10px;font-size:12px;color:var(--text-2);text-align:center}

/* a caixa de e-mail do modo "E-mail" ocupa o lugar do quadro */
.cx-caixa{flex:1;min-height:0;display:flex;flex-direction:column}

/* ---------- badge vermelho: falta a trading ---------- */
.cx-falta{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:15px;height:15px;margin-left:5px;border-radius:50%;background:var(--danger);
  color:#fff;font-family:var(--font-mono);font-size:10px;font-weight:700;line-height:1}
.cx-gfield--falta .cx-input{border-color:var(--danger)}
.cx-fhint{display:block;margin-top:4px;font-size:11px;color:var(--text-2);line-height:1.35}

/* ---------- a trading no cabeçalho do modal ---------- */
.cx-modal-linha1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cx-trading{display:inline-flex;align-items:center;max-width:260px;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis;padding:3px 10px;border-radius:20px;
  border:1px solid var(--border);background:var(--surface-2);cursor:pointer;
  font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--navy)}
button.cx-trading:hover{border-color:var(--cyan);background:var(--surface)}
.cx-trading.is-falta{border-style:dashed;border-color:var(--danger);color:var(--danger)}
.cx-trading-sel{padding:4px 8px;border:1px solid var(--cyan);border-radius:8px;
  background:var(--surface);font-size:12.5px;color:var(--text);max-width:280px}

/* ---------- coroa (master) e casa (house) ---------- */
.cx-fam{display:inline-flex;align-items:center;margin-left:5px;color:var(--text-2)}
.cx-fam svg{width:12px;height:12px}
.cx-fam--master{color:var(--warn)}
.cx-fam--house{color:var(--cyan)}

.cx-fam-wrap{position:relative;display:inline-flex}
.cx-fambtn{position:relative;display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  padding:6px 9px;border:1px solid var(--border);border-radius:9px;background:var(--surface)}
.cx-fambtn:hover{border-color:var(--cyan)}
.cx-fambtn svg{width:15px;height:15px}
.cx-fambtn.is-master{color:var(--warn)}
.cx-fambtn.is-house{color:var(--cyan)}
.cx-fam-n{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--text-2)}

.cx-fam-pop{position:absolute;z-index:70;top:calc(100% + 6px);right:0;min-width:330px;
  max-height:340px;overflow-y:auto;padding:6px;border:1px solid var(--border);border-radius:11px;
  background:var(--surface);box-shadow:0 10px 30px rgba(0,0,0,.18);text-align:left}
.cx-fam-cab{padding:6px 10px 8px;font-family:var(--font-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--text-2);border-bottom:1px solid var(--border)}
.cx-fam-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;
  border-radius:7px;background:transparent;cursor:pointer;text-align:left;font-size:13px;color:var(--text)}
.cx-fam-item:hover{background:var(--surface-2)}
.cx-fam-item.is-master{font-weight:700;color:var(--navy)}
/* the master sits apart from the houses below it */
.cx-fam-item.is-master:not(:last-child){margin-bottom:5px;box-shadow:0 1px 0 var(--border)}
.cx-fam-item.is-atual{background:color-mix(in srgb, var(--cyan) 10%, var(--surface))}
.cx-fam-ico{display:inline-flex;flex-shrink:0}
.cx-fam-ico svg{width:13px;height:13px}
.cx-fam-item.is-master .cx-fam-ico{color:var(--warn)}
.cx-fam-item:not(.is-master) .cx-fam-ico{color:var(--cyan)}
.cx-fam-num{font-family:var(--font-mono);font-size:11.5px;flex-shrink:0}
.cx-fam-tit{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text-2)}
.cx-fam-item.is-master .cx-fam-tit{color:var(--text)}
.cx-fam-aqui{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--cyan);flex-shrink:0}

/* ---------- botões novos do modal ---------- */
.cx-modal-house,.cx-modal-dup{padding:6px 12px;border:1px solid var(--border);border-radius:9px;
  background:var(--surface);cursor:pointer;font-size:12px;color:var(--text)}
.cx-modal-house:hover{border-color:var(--cyan);color:var(--navy)}
.cx-modal-dup:hover{border-color:var(--cyan);color:var(--navy)}

/* o campo de número do "+ Novo House" */
.cx-confirm-input{width:100%;margin:12px 0 4px;padding:9px 11px;border:1px solid var(--border);
  border-radius:9px;background:var(--surface);font-family:var(--font-mono);font-size:13px;
  text-transform:uppercase;color:var(--text)}
.cx-confirm-input:focus{outline:0;border-color:var(--cyan)}
.cx-confirm-msg.is-erro{color:var(--danger);font-weight:600}

/* ==========================================================================
   [10/09/2026] O PANO DO REPORT (terceira coluna do modal do card)

   Duas abas: "Report" (o acompanhamento que vai para o cliente) e
   "Financeiro" (desligada — a ideia ainda vai ser desenhada). O report é uma
   linha do tempo de frases datadas, montada a partir de uma biblioteca de
   frases com placeholders que puxam campos do card.
   Ver public/js/comex-report.js.
   ========================================================================== */
.cx-rep{display:flex;flex-direction:column;min-height:0;overflow:hidden;
  border-left:1px solid var(--border);background:var(--surface-2)}

/* abas */
.cx-rep-tabs{display:flex;gap:2px;flex-shrink:0;padding:8px 8px 0;border-bottom:1px solid var(--border)}
.cx-rep-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;cursor:pointer;
  border:1px solid transparent;border-bottom:0;border-radius:9px 9px 0 0;background:transparent;
  font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--text-2)}
.cx-rep-tab svg{width:13px;height:13px}
.cx-rep-tab:hover:not(:disabled){color:var(--ink)}
.cx-rep-tab.is-on{background:var(--surface);border-color:var(--border);color:var(--navy);
  font-weight:700;margin-bottom:-1px;padding-bottom:9px}
.cx-rep-tab:disabled{cursor:not-allowed;color:#a8b2b0;opacity:.75}

.cx-rep-body{flex:1;min-height:0;overflow-y:auto;padding:12px;background:var(--surface)}

/* barra de ações */
.cx-rep-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.cx-rep-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;cursor:pointer;
  border:1px solid var(--border);border-radius:8px;background:var(--surface);
  font-size:11.5px;color:var(--text)}
.cx-rep-btn:hover{border-color:var(--cyan);color:var(--navy)}
.cx-rep-btn--add{border-color:var(--cyan);color:var(--navy);font-weight:600}
.cx-rep-btn:disabled{cursor:not-allowed;opacity:.5}

/* o cabeçalho "ACOMPANHAMENTO", como no modelo em Word */
.cx-rep-tl-cab{font-family:var(--font-mono);font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:#c0392b;padding-bottom:5px;border-bottom:1px solid var(--border);
  margin-bottom:2px}

/* linha do tempo */
.cx-rep-linha{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:start;
  padding:9px 0;border-bottom:1px solid var(--border)}
.cx-rep-linha:first-of-type .cx-rep-txt{font-weight:700;color:var(--ink)}
.cx-rep-linha:first-of-type .cx-rep-data{color:#c0392b}
.cx-rep-data{font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--text);
  border:1px solid transparent;border-radius:6px;padding:2px 3px;background:transparent;
  width:82px;flex-shrink:0}
.cx-rep-data:hover,.cx-rep-data:focus{border-color:var(--border);background:var(--surface-2);outline:0}
.cx-rep-txt{font-size:12px;line-height:1.45;color:var(--text);border:1px solid transparent;
  border-radius:6px;padding:2px 4px;min-width:0;white-space:pre-wrap;word-break:break-word}
.cx-rep-txt:hover{border-color:var(--border)}
.cx-rep-txt:focus{border-color:var(--cyan);background:var(--surface);outline:0}
.cx-rep-x{width:19px;height:19px;flex-shrink:0;display:grid;place-items:center;cursor:pointer;
  border:0;border-radius:50%;background:transparent;color:var(--text-2);font-size:11px;line-height:1}
.cx-rep-x:hover{background:rgba(192,57,43,.12);color:var(--danger)}
.cx-rep-vazio{padding:22px 6px;text-align:center;font-size:12px;color:var(--text-2);line-height:1.5}

/* o seletor de frases */
.cx-rep-busca{position:relative;margin-bottom:10px;padding:9px;border:1px solid var(--cyan);
  border-radius:10px;background:color-mix(in srgb, var(--cyan) 5%, var(--surface))}
.cx-rep-busca-topo{display:flex;align-items:center;gap:6px}
.cx-rep-busca-inp{flex:1;min-width:0;font-family:var(--font-body);font-size:12px;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:6px 8px;
  line-height:1.4;resize:vertical;min-height:32px}
.cx-rep-busca-inp:focus{outline:0;border-color:var(--cyan)}
.cx-rep-ok{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--ok);border-radius:7px;background:var(--surface);color:var(--ok);font-size:13px}
.cx-rep-ok:hover{background:rgba(31,157,120,.12)}
.cx-rep-ok:disabled{cursor:not-allowed;opacity:.4;border-color:var(--border);color:var(--text-2)}
.cx-rep-dica{margin-top:5px;font-size:10.5px;color:var(--text-2)}

.cx-rep-ops{margin-top:7px;max-height:270px;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
.cx-rep-op{text-align:left;cursor:pointer;padding:7px 9px;border:1px solid var(--border);
  border-radius:8px;background:var(--surface);font-size:11.5px;line-height:1.45;color:var(--text)}
.cx-rep-op:hover{border-color:var(--cyan);background:color-mix(in srgb, var(--cyan) 7%, var(--surface))}
.cx-rep-op-modal{display:block;font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-2);margin-bottom:3px}
/* placeholder resolvido × placeholder sem preenchimento no card */
.cx-ph{font-weight:700;color:var(--navy)}
.cx-ph--falta{font-weight:700;color:var(--danger);text-decoration:underline dotted}
.cx-rep-op-vazio{padding:14px 8px;text-align:center;font-size:11.5px;color:var(--text-2)}

/* aviso do "copiado para o WhatsApp" */
.cx-rep-copiado{margin-left:auto;font-size:10.5px;color:var(--ok);font-weight:600}

/* o botão + Novo agora fica no topo da primeira coluna */
.cx-add--topo{margin-bottom:8px}
/* botão da família sem família: cinza e sem clique */
.cx-fambtn.is-vazio{color:#b3bcba;border-color:var(--border);background:var(--surface-2);cursor:not-allowed}
.cx-fambtn.is-vazio:hover{border-color:var(--border)}


/* ==========================================================================
   [10/09/2026] A CAIXA DE E-MAIL (modo "E-mail" da tela)

   O desenho é o MESMO da tela "E-mail" do menu esquerdo: as classes `ml-*`
   vêm de public/css/email/email.css, que já é carregado em toda página. Aqui
   ficam SÓ as peças que a caixa tem e aquela tela não: o topo com a conta e a
   engrenagem, o selo de processo de cada linha e o bloco de "abrir o card".

   A versão anterior desta caixa empilhava os e-mails no formato do painel do
   card. Ficou longe do desenho já aprovado, e foi substituída — não tente
   voltar a ela sem falar com o Felipe.
   ========================================================================== */
.cxc-wrap{display:flex;flex-direction:column;flex:1;min-height:0}
.cxc-top{display:flex;align-items:center;gap:12px;flex-shrink:0;margin-bottom:12px}
.cxc-top .ml-search{flex:1;min-width:0}
.cxc-conta{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-2);white-space:nowrap}
.cxc-wrap .ml-layout{min-height:0}

/* selo de processo na linha da lista */
.ml-item-label.cxc-lbl-falta{color:#fff;background:var(--danger)}

/* a faixa do processo no leitor */
.cxc-proc-linha{margin-top:10px}
.cxc-proc{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:20px;
  border:1px solid var(--border);background:var(--surface-2);
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-2)}
.cxc-proc b{color:var(--navy)}
.cxc-proc--falta{border-color:var(--danger);border-style:dashed;color:var(--danger);font-weight:700}
.cxc-proc--falta .nav-badge{background:var(--danger);color:#fff}
.cxc-abrir{border:0;background:transparent;cursor:pointer;padding:0;
  font-family:inherit;font-size:inherit;text-transform:inherit;letter-spacing:inherit;
  color:var(--cyan);font-weight:700;text-decoration:underline}
.cxc-abrir:hover{color:var(--navy)}

.cxc-remotas{margin-top:12px;font-size:11px;color:var(--text-2);font-style:italic}
.cxc-mais{display:block;width:calc(100% - 16px);margin:8px;padding:9px;cursor:pointer;
  border:1px dashed var(--border);border-radius:9px;background:transparent;
  font-size:11.5px;color:var(--text-2)}
.cxc-mais:hover{border-color:var(--cyan);color:var(--navy)}

/* o compositor (reaproveitado do painel do card) no pé da caixa */
.cxc-wrap .cx-mail-composer{margin-top:10px;max-height:46vh;border:1px solid var(--border);
  border-radius:10px;background:var(--surface)}

/* ==========================================================================
   [16/09/2026] ABA "ANEXOS" do pano da direita — invoices + todos os anexos
   do card numa coluna só. O rótulo fica à ESQUERDA do campo de anexo (e não
   por cima): são ~15 campos numa coluna estreita, e rótulo em cima dobraria a
   altura de cada linha.
   ========================================================================== */
.cx-anx{display:flex;flex-direction:column;gap:12px}
.cx-anx-tit{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--text-2)}
.cx-anx-vazio{font-size:12px;color:var(--text-2);padding:6px 2px}
.cx-anx-lista{display:flex;flex-direction:column;gap:6px}
.cx-anx-linha{display:grid;grid-template-columns:minmax(96px,38%) 1fr;align-items:start;gap:8px;
  padding:5px 0;border-bottom:1px dashed var(--border)}
.cx-anx-linha:last-child{border-bottom:0}
.cx-anx-lbl{font-size:11.5px;color:var(--text);line-height:1.3;padding-top:5px;
  overflow-wrap:anywhere}
.cx-anx-doc{min-width:0}

/* ---------- invoices (topo da aba) ---------- */
.cx-anx-inv{display:flex;flex-direction:column;gap:7px;padding:10px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface-2)}
.cx-inv-lista{display:flex;flex-direction:column;gap:7px}
/* A linha da invoice é UMA linha (16/09/2026): número · anexo · valor · remover.
   Empilhada, cada invoice comia três alturas de campo e a lista empurrava os
   anexos do processo para fora da tela. O botão de anexo perdeu o texto e ficou
   só o clipe — o nome do arquivo já aparece no chip ao lado quando existe. */
.cx-inv-linha{display:grid;grid-template-columns:minmax(0,1fr) auto 92px auto;gap:6px;
  align-items:center;padding:6px 7px;border:1px solid var(--border);border-radius:9px;
  background:var(--surface)}
.cx-inv-num{min-width:0;font-size:12px;padding:6px 8px}
.cx-inv-x{width:24px;height:24px;border:1px solid var(--border);
  border-radius:7px;background:var(--surface);cursor:pointer;color:var(--text-2);
  font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center}
.cx-inv-x:hover{border-color:var(--danger);color:var(--danger)}
.cx-inv-val{font-size:12px;padding:6px 8px;text-align:right;font-variant-numeric:tabular-nums}

/* o anexo da invoice em modo compacto: só o clipe (e o chip, quando tem arquivo) */
.cx-inv-doc{min-width:0}
.cx-inv-doc .cx-docs{flex-direction:row;align-items:center;gap:4px;min-width:0}
.cx-inv-doc .cx-docs-add{flex:none;width:28px;height:28px;padding:0;justify-content:center;gap:0}
.cx-inv-doc .cx-docs-add span + span{display:none}
.cx-inv-doc .cx-docs-chips{flex-wrap:nowrap;min-width:0}
.cx-inv-doc .cx-docs-chip{max-width:96px}
.cx-inv-doc .cx-docs-fold>summary{white-space:nowrap}
.cx-inv-doc .cx-docs-solta{display:none}
.cx-inv-val.is-ruim{border-color:var(--danger);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent)}
.cx-inv-add{align-self:flex-start;border:1px dashed var(--border);border-radius:8px;
  background:transparent;cursor:pointer;padding:5px 11px;font-family:var(--font-mono);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-2)}
.cx-inv-add:hover{border-color:var(--cyan);color:var(--navy)}
.cx-inv-total{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;
  color:var(--text-2);padding-top:3px;border-top:1px solid var(--border)}
.cx-inv-total b{color:var(--ink);font-variant-numeric:tabular-nums}
.cx-inv-total.is-ruim b{color:var(--danger)}
.cx-inv-total-sep{color:var(--border)}
.cx-inv-aviso{font-size:11.5px;line-height:1.4;color:var(--danger);
  background:color-mix(in srgb, var(--danger) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius:8px;padding:6px 8px}

/* o FOB do cabeçalho quando não bate com a soma das invoices */
.cx-gfield--ruim .cx-input{border-color:var(--danger)}
.cx-gfield--ruim .gqm-split{box-shadow:0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent);
  border-radius:9px}
.cx-fob-alerta{display:none;align-items:center;justify-content:center;width:14px;height:14px;
  border-radius:50%;background:var(--danger);color:#fff;font-family:var(--font-mono);
  font-size:9.5px;font-weight:700;line-height:1}
.cx-gfield--ruim .cx-fob-alerta{display:inline-flex}

/* origem e destino dividindo a célula que era só da origem (16/09/2026,
   quando o "Nº da Invoice" saiu do cabeçalho) */
.cx-gpair{display:grid;grid-template-columns:1fr 1fr;gap:6px 9px;min-width:0}

/* ---------- modal de ERRO (o que não pode passar despercebido) ---------- */
/* AS CAMADAS DESTA TELA, de baixo para cima (17/09/2026 — os dois modais
   abaixo nasceram em 120 e abriam ATRÁS do card, que é 1000):
     1000  .cx-modal   — o card aberto
     1600  .cx-cont / .cx-alrt — sub-modais QUE SAEM DE DENTRO do card
     2000  .cx-confirm / .cx-erro — o que tranca a tela e exige resposta
     2100  .cx-toast   — o aviso passageiro, sempre por cima de tudo
   Modal novo entra nessa régua; número solto volta a esconder janela. */
.cx-erro{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:rgba(12,22,26,.45);padding:20px}
.cx-erro-box{width:min(420px,100%);background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:20px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.cx-erro-ico{font-size:26px;line-height:1;margin-bottom:8px}
.cx-erro-tit{font-family:var(--font-title);font-weight:700;font-size:16px;color:var(--ink);
  margin-bottom:6px}
.cx-erro-msg{font-size:13px;line-height:1.5;color:var(--text)}
.cx-erro-dica{font-size:11.5px;line-height:1.45;color:var(--text-2);margin-top:7px}
.cx-erro-ok{margin-top:14px;border:0;border-radius:9px;cursor:pointer;padding:8px 20px;
  background:var(--navy);color:#fff;font-family:var(--font-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.1em}
.cx-erro-ok:hover{filter:brightness(1.1)}

/* ---------- campo "Órgão Anuente": marcação múltipla COM busca ----------
   Mesma gaveta do filtro do quadro (.cx-ms), dentro de um campo do acordeão:
   ocupa a largura do campo e a gaveta abre alinhada a ele. */
.cx-ms--campo{width:100%}
.cx-ms--campo .cx-ms-btn{width:100%;justify-content:space-between;max-width:none;
  padding:7px 10px;font-size:12.5px}
.cx-ms--campo .cx-ms-resumo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-ms--campo .cx-ms-pop{min-width:100%;max-width:none;left:0;right:0}
.cx-ms-busca{width:100%;margin-bottom:5px;font-size:12px;padding:6px 8px}

/* ==========================================================================
   [16/09/2026] ALERTAS — o sino do quadro e o modal de pendências do card
   ========================================================================== */
.cx-alertas{position:relative;flex-shrink:0}
.cx-alertas-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:34px;border:1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  border-radius:9px;background:color-mix(in srgb, var(--danger) 8%, var(--surface));
  color:var(--danger);cursor:pointer}
.cx-alertas-btn svg{width:17px;height:17px;display:block}
.cx-alertas-btn:hover{background:color-mix(in srgb, var(--danger) 16%, var(--surface))}
/* o badge pulsa devagar: é o aviso de que alguém precisa fazer alguma coisa */
.cx-alertas-badge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;border-radius:9px;background:var(--danger);
  color:#fff;font-family:var(--font-mono);font-size:10px;font-weight:700;line-height:1;
  box-shadow:0 0 0 2px var(--surface);animation:cxAlertaPulso 1.8s ease-in-out infinite}
@keyframes cxAlertaPulso{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){.cx-alertas-badge{animation:none}}

.cx-alertas-pop{position:absolute;z-index:70;top:calc(100% + 6px);left:0;width:340px;max-height:380px;
  overflow-y:auto;padding:8px;border:1px solid var(--border);border-radius:11px;background:var(--surface);
  box-shadow:var(--shadow-hov),0 8px 26px rgba(0,0,0,.13)}
.cx-alertas-pop-tit{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--danger);padding:2px 4px 7px}
.cx-alertas-item{display:flex;align-items:flex-start;gap:8px;padding:7px 4px;
  border-top:1px solid var(--border)}
.cx-alertas-item-txt{flex:1;min-width:0}
.cx-alertas-proc{font-family:var(--font-mono);font-size:10.5px;color:var(--text-2)}
.cx-alertas-cli{font-size:11px;color:var(--text-2);margin-left:6px}
.cx-alertas-msg{font-size:12.5px;color:var(--text);line-height:1.35;margin-top:2px;
  overflow-wrap:anywhere}
.cx-alertas-ir{flex:none;border:1px solid var(--border);border-radius:7px;background:var(--surface);
  cursor:pointer;padding:4px 9px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-2)}
.cx-alertas-ir:hover{border-color:var(--cyan);color:var(--navy)}

/* botão "Alertas" no cabeçalho do modal */
.cx-modal-alerta{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
  border-radius:8px;background:var(--surface);cursor:pointer;padding:6px 11px;
  font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-2)}
.cx-modal-alerta:hover{border-color:var(--danger);color:var(--danger)}
.cx-modal-alerta.has{border-color:color-mix(in srgb, var(--danger) 45%, var(--border));
  color:var(--danger);background:color-mix(in srgb, var(--danger) 8%, var(--surface))}
.cx-modal-alerta-n{display:inline-flex;align-items:center;justify-content:center;min-width:16px;
  height:16px;padding:0 4px;border-radius:8px;background:var(--danger);color:#fff;font-size:9.5px}

/* modal de alertas do card */
.cx-alrt{position:fixed;inset:0;z-index:1600;display:flex;align-items:center;justify-content:center;
  background:rgba(12,22,26,.45);padding:20px}
.cx-alrt-box{width:min(520px,100%);max-height:80vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.25)}
.cx-alrt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 16px 10px;border-bottom:1px solid var(--border)}
.cx-alrt-tit{font-family:var(--font-title);font-weight:700;font-size:16px;color:var(--ink)}
.cx-alrt-sub{font-family:var(--font-mono);font-size:10.5px;color:var(--text-2);margin-top:3px}
.cx-alrt-lista{flex:1;min-height:0;overflow-y:auto;padding:8px 16px}
.cx-alrt-vazio{font-size:12.5px;color:var(--text-2);padding:10px 2px}
.cx-alrt-linha{display:flex;align-items:flex-start;gap:9px;padding:8px 0;
  border-bottom:1px dashed var(--border)}
.cx-alrt-linha:last-child{border-bottom:0}
.cx-alrt-txt{flex:1;min-width:0;font-size:13px;line-height:1.4;color:var(--text);
  padding:2px 4px;border-radius:6px;overflow-wrap:anywhere}
.cx-alrt-txt:focus{outline:0;background:var(--surface-2)}
.cx-alrt-linha.is-feito .cx-alrt-txt{text-decoration:line-through;color:var(--text-2)}
.cx-alrt-x{flex:none;border:0;background:transparent;cursor:pointer;color:var(--text-2);
  font-size:12px;padding:2px 4px}
.cx-alrt-x:hover{color:var(--danger)}
.cx-alrt-novo{display:flex;align-items:flex-end;gap:8px;padding:12px 16px 16px;
  border-top:1px solid var(--border)}
.cx-alrt-inp{flex:1;resize:vertical;font-size:13px}
.cx-alrt-add{flex:none;border:0;border-radius:9px;cursor:pointer;padding:9px 16px;
  background:var(--navy);color:#fff;font-family:var(--font-mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.1em}
.cx-alrt-add:hover{filter:brightness(1.1)}

/* ---------- as caixas de triagem no modo E-mail (16/09/2026) ----------
   Estrela na linha da lista, ações no leitor e a linha do rascunho. */
.cxc-estrela{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border:0;background:transparent;cursor:pointer;color:var(--text-2);opacity:0;transition:opacity .12s,color .12s}
.cxc-estrela svg{width:15px;height:15px;display:block}
.ml-item:hover .cxc-estrela,.cxc-estrela.on{opacity:1}
.cxc-estrela:hover{color:var(--warn,#d98a1f)}
.cxc-estrela.on{color:var(--warn,#d98a1f)}
.cxc-estrela.on svg{fill:currentColor}
.cxc-acts-sep{display:inline-block;width:1px;height:16px;background:var(--border);margin:0 4px}
.ml-reader-actions .ml-act svg{width:14px;height:14px;vertical-align:-2px}
.ml-reader-actions .ml-act.on{color:var(--warn,#d98a1f);border-color:currentColor}
.cxc-rasc .ml-item-from{font-style:italic}
.cxc-rasc-x{border:0;background:transparent;cursor:pointer;color:var(--text-2);font-size:11px;
  padding:2px 4px;opacity:0;transition:opacity .12s}
.cxc-rasc:hover .cxc-rasc-x{opacity:1}
.cxc-rasc-x:hover{color:var(--danger)}
.ml-reader-empty svg{width:34px;height:34px;opacity:.5}

/* ==========================================================================
   [24/09/2026] UNIFICAR PROCESSOS — the header button, the two windows and
   the notices. See "UNIFICAR PROCESSOS" in public/js/comex-controle.js.
   ========================================================================== */
.cx-unif-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  padding:0;border:1px solid var(--border);border-radius:9px;background:var(--surface);
  color:var(--text-2);cursor:pointer}
.cx-unif-btn svg{width:18px;height:18px;display:block}
.cx-unif-btn:hover{border-color:var(--cyan);color:var(--navy)}

.cx-unif-box{max-width:640px;text-align:left;display:flex;flex-direction:column;max-height:calc(100vh - 40px)}
.cx-unif-box--dif{max-width:720px}
.cx-unif-cab{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.cx-unif-ico{display:inline-flex;color:var(--navy)}
.cx-unif-ico svg{width:26px;height:26px}
.cx-unif-cab .cx-confirm-title{margin-bottom:2px}
.cx-unif-sub{font-size:12px;color:var(--text-2)}
.cx-unif-busca{margin-bottom:8px}

.cx-unif-lista{flex:1;min-height:180px;max-height:52vh;overflow-y:auto;border:1px solid var(--border);
  border-radius:9px;padding:4px}
.cx-unif-item{display:grid;grid-template-columns:18px 130px 1fr 1.2fr auto;gap:8px;align-items:center;
  padding:7px 8px;border-radius:7px;cursor:pointer;font-size:12.5px;color:var(--text)}
.cx-unif-item:hover{background:var(--surface-2)}
.cx-unif-item.is-on{background:color-mix(in srgb, var(--cyan) 10%, var(--surface))}
.cx-unif-item.is-trava{opacity:.5;cursor:not-allowed}
.cx-unif-num{font-family:var(--font-mono);font-size:11.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-unif-cli,.cx-unif-tit{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-unif-tit{color:var(--text-2)}
.cx-unif-tipo{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2)}
.cx-unif-vazio{padding:22px;text-align:center;color:var(--text-2);font-size:12.5px}

.cx-unif-acts{justify-content:flex-end;align-items:center;margin-top:12px}
.cx-unif-conta{margin-right:auto;font-size:11.5px;color:var(--text-2)}
.cx-unif-ok{background:var(--navy);border-color:var(--navy);color:#fff}
.cx-unif-ok:hover{filter:brightness(1.08);background:var(--navy)}
.cx-unif-ok:disabled{opacity:.45;cursor:not-allowed;filter:none}

.cx-unif-campos{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;overflow-y:auto;padding:2px 2px 4px}
.cx-unif-campo{min-width:0}
.cx-unif-campo--num .cx-confirm-input{margin:0}
.cx-unif-campo .is-falta{border-color:var(--danger)}
.cx-unif-fob{display:block;padding:8px 0;font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--ink)}
.cx-unif-quens{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.cx-unif-quem{padding:2px 7px;border:1px solid var(--border);border-radius:999px;background:var(--surface);
  font-size:10.5px;color:var(--text-2);cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-unif-quem b{color:var(--text);font-weight:600}
.cx-unif-quem:hover,.cx-unif-quem.is-on{border-color:var(--cyan);color:var(--navy)}
@media (max-width:640px){.cx-unif-campos{grid-template-columns:1fr}.cx-unif-item{grid-template-columns:18px 1fr auto}.cx-unif-cli,.cx-unif-tit{display:none}}

/* the miniature, when the search matched an old number */
.cx-card-unif{margin:4px 0 2px;padding:4px 7px;border-left:2px solid var(--warn);border-radius:4px;
  background:color-mix(in srgb, var(--warn) 9%, var(--surface));font-size:10px;line-height:1.35;color:var(--text)}
/* the card window: where this card came from */
.cx-modal-unif{display:inline-flex;align-items:center;gap:5px;margin-top:3px;font-family:var(--font-mono);
  font-size:10px;color:var(--text-2)}
.cx-modal-unif svg{width:12px;height:12px}

/* [24/09/2026] the ↓ of each column: most recently modified first */
.cx-col-ord{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text-2);cursor:pointer;flex-shrink:0}
.cx-col-ord svg{width:13px;height:13px;display:block}
.cx-col-ord:hover{border-color:var(--border);color:var(--navy)}
.cx-col-ord.is-on{border-color:var(--navy);background:color-mix(in srgb, var(--navy) 12%, var(--surface));color:var(--navy)}

/* [24/09/2026] The filter row never changes width. Picking a filter used to
   resize its button (the chosen name, in bold, replaces "Tipo de operação")
   and add "limpar" + "3 de 107" at the end — the row grew and everything to
   its left slid. Now each picker has a fixed width (long names end in "…",
   full text on hover) and the end of the row is a fixed slot. */
[data-filtros] .cx-ms-btn{width:142px;justify-content:space-between}
[data-filtros] .cx-ms-resumo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cx-filtro-fim{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;width:124px;flex-shrink:0}
/* Kanban / E-mail never squeeze into two lines when the row is tight */
.cx-modes{flex-shrink:0}
.cx-mode{white-space:nowrap}
[data-filtros] .cx-ms-resumo{flex:1;text-align:left}
.cx-ms-n{flex-shrink:0;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--navy);
  color:#fff;font-family:var(--font-mono);font-size:9.5px;font-weight:700;line-height:16px;text-align:center}