/* =====================================================================
   COMERCIAL › GARANTIA — o treemap dos fornecedores (25/09/2026)

   O bloco é o card: o tamanho dele É a informação. Por isso o quadro não
   tem cor de categoria — só um degradê do mais pesado (mais escuro) para o
   mais leve, e o número grande no meio.
   ===================================================================== */
/* =====================================================================
   COMERCIAL › GARANTIA — os cartões dos fornecedores (25/09/2026)

   Sem coluna: o fornecedor não anda por um fluxo, ele acumula casos. Então os
   cartões enchem a tela como uma prateleira, todos do MESMO tamanho — o que
   diferencia um do outro é o que está escrito, não a área.
   ===================================================================== */
.cf-cartoes{display:grid;gap:14px;align-items:stretch;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
/* O cartão respira: o número grande é o que a pessoa procura, então ele tem
   uma faixa só dele, entre duas linhas, e não encosta em nada. */
.cf-cartao{cursor:pointer;text-align:left;display:flex;flex-direction:column;
  padding:14px 16px 13px;min-height:186px}
.cf-cartao:hover{border-color:var(--accent)}
.cf-cartao-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.cf-cartao-tag{padding:2px 7px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--border);font-size:9.5px;color:var(--text-2);white-space:nowrap}
.cf-cartao-nome{margin:0;font-size:17px;line-height:1.15;font-weight:700;color:var(--ink)}
.cf-cartao-mail{margin:3px 0 0;font-size:10.5px;line-height:1.4;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-cartao-mail.is-falta{font-style:italic}
.cf-cartao-n{display:flex;align-items:center;gap:10px;margin:12px 0;padding:9px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cf-cartao-num{font-size:30px;line-height:1;font-weight:800;color:var(--accent);
  font-variant-numeric:tabular-nums}
.cf-cartao-leg{font-size:10.5px;line-height:1.3;color:var(--text-3)}
.cf-cartao-idx{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.cf-cartao-idx b{font-size:15px;line-height:1;font-weight:700;color:var(--text-1);
  font-variant-numeric:tabular-nums}
.cf-cartao-idx i{font-style:normal;font-size:9px;color:var(--text-3);white-space:nowrap}
.cf-cartao-idx.is-alta b{color:#c0392b}
.cf-cartao-pecas{margin:0 0 10px;font-size:11.5px;line-height:1.45;color:var(--text-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cf-cartao-pe{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}
.cf-concl{margin-left:10px;padding:6px 12px;font-size:11.5px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2)}
.cf-concl:hover{border-color:var(--accent);color:var(--accent)}
.cf-concl.is-on{border-color:var(--accent);background:rgba(154,91,45,.1);color:var(--accent);font-weight:600}
.cf-vazio{padding:18px 14px;font-size:12px;color:var(--text-3);text-align:center;
  border:1px dashed var(--border);border-radius:10px;background:var(--surface)}
.cf-rodape{margin-top:8px;font-size:11px;color:var(--text-3)}

/* --- o modal do fornecedor: o mesmo desenho do card do pós-venda --- */
.cf-cab{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:0 0 12px;border-bottom:1px solid var(--border);margin-bottom:10px}
.cf-cab-nome{display:flex;align-items:center;gap:10px;justify-content:flex-start}
.cf-cab-ava{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em}
.cf-cab-nome h2{margin:0;font-size:17px;line-height:1.2}
.cf-cab-nome p{margin:1px 0 0;font-size:11px;color:var(--text-3)}
.cf-cab-n{display:flex;gap:18px}
.cf-cab-n div{display:flex;flex-direction:column;align-items:flex-end}
.cf-cab-n b{font-size:17px;line-height:1}
.cf-cab-n span{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.cf-lado{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.cf-lado-cab{display:flex;flex-direction:column;gap:2px;font-size:11.5px;font-weight:600;color:var(--text-2)}
.cf-lado-cab i{font-style:normal;font-size:10.5px;font-weight:400;color:var(--text-3)}
.cf-anexo{display:flex;flex-direction:column;gap:1px;padding:7px 9px;border:1px solid var(--border);
  border-radius:8px;background:var(--surface)}
.cf-anexo a{font-size:11.5px;color:var(--accent);text-decoration:none;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cf-anexo a:hover{text-decoration:underline}
.cf-anexo i{font-style:normal;font-size:10px;color:var(--text-3)}
.cf-bloco-lista{margin-bottom:14px}
.cf-bloco-lista h3{display:flex;align-items:center;gap:7px;margin:0 0 6px;
  font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3)}
.cf-bloco-lista h3 span{padding:1px 7px;border-radius:999px;background:var(--surface-2);
  font-size:10px;letter-spacing:0}
/* a tabela não pode empurrar o painel de datas: ela rola dentro da própria
   caixa, e cada coluna cabe numa linha só */
.cf-tab-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:9px;background:var(--surface)}
.cf-casos{width:100%;border-collapse:collapse;font-size:11px;white-space:nowrap}
/* cabeçalho com fundo próprio: a linha de título não se confunde com a
   primeira linha de dado, e ele gruda no topo quando a lista rola */
.cf-casos thead th{position:sticky;top:0;z-index:1;
  padding:6px 7px;text-align:left;white-space:nowrap;font-size:9.5px;
  text-transform:uppercase;letter-spacing:.06em;color:#fff;
  background:var(--navy,#24404d);border-bottom:0}
.cf-casos tbody tr{transition:background .1s}
.cf-casos tbody tr:hover{background:rgba(154,91,45,.08)}
.cf-vazia{color:var(--text-3)}
/* o dossiê é um selo pequeno, do tamanho de um ícone */
.cf-dossie a{text-decoration:none}
.cf-pdf{display:inline-grid;place-items:center;width:26px;height:16px;border-radius:4px;
  background:#c0392b;color:#fff;font-size:7.5px;font-weight:800;letter-spacing:.04em}
.cf-dossie a:hover .cf-pdf{filter:brightness(1.12)}
.cf-casos td{padding:6px 7px;border-bottom:1px solid var(--border);vertical-align:top}
.cf-casos tr:last-child td{border-bottom:0}
.cf-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cf-rec{max-width:220px;overflow:hidden;text-overflow:ellipsis;color:var(--text-2)}
.cf-casos td:nth-child(3){max-width:160px;overflow:hidden;text-overflow:ellipsis}

/* --- o modal: as peças são as do card do pós-venda (funil.css), aqui só o
       arranjo das três colunas e o scroll de cada uma --- */
/* duas colunas: a conversa e o corpo. A coluna de anexos saiu — o que
   interessa aqui é UM arquivo, o compilado, e ele vive no cabeçalho. */
#cfModal .cm-modal-split{grid-template-columns:320px minmax(0,1fr)}
#cfModal .cg-esq,#cfModal .cg-dir{display:flex;flex-direction:column;min-height:0;overflow:hidden;
  background:var(--surface-2)}
#cfModal .cg-esq{border-right:1px solid var(--border)}
#cfModal .cg-dir{border-left:1px solid var(--border)}
#cfModal .cg-esq .cf-lado,#cfModal .cg-dir .cf-lado{overflow-y:auto}
#cfModal .cg-meio-wrap{display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding:16px 18px}
#cfModal .cm-abas{display:flex;gap:2px;padding:8px 8px 0;flex-shrink:0}
#cfModal .cm-aba{padding:6px 10px;font-size:11px;border:0;border-radius:7px 7px 0 0;cursor:pointer;
  background:transparent;color:var(--text-3)}
#cfModal .cm-aba.is-on{background:var(--surface);color:var(--text-1);font-weight:600}
#cfModal .cm-aba[disabled]{opacity:.5;cursor:default}
#cfModal .cf-x{position:absolute;top:10px;right:12px;z-index:3}
#cfModal .cg-meio{display:flex;gap:14px;align-items:flex-start}
#cfModal .cg-meio-etapas{flex:1;min-width:0}
#cfModal .cg-datas{flex:0 0 220px;width:220px}
@media (max-width:1100px){
  #cfModal .cm-modal-split{grid-template-columns:1fr;overflow-y:auto}
  #cfModal .cg-meio{flex-direction:column}
  #cfModal .cg-datas{width:100%;flex:1 1 auto}
}

/* a caixa com leitor ao lado, como a do comex: lista à esquerda, mensagem à
   direita — e uma coluna só quando a tela é estreita */


/* o compilado, logo abaixo do cabeçalho do fornecedor */
.cf-comp{display:flex;align-items:center;gap:9px;padding:7px 11px;margin:0;
  border:1px solid var(--border);border-radius:10px;background:var(--surface);
  text-decoration:none;color:inherit;max-width:290px}
.cf-comp:hover{border-color:var(--accent)}
.cf-comp-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;
  background:#c0392b;color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.04em}
.cf-comp-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.cf-comp-txt b{font-size:12px}
.cf-comp-txt i{font-style:normal;font-size:10.5px;color:var(--text-3)}
.cf-comp--vazio{display:block;font-size:10.5px;line-height:1.45;color:var(--text-3);
  border-style:dashed;background:transparent;max-width:260px}
.cf-cab-nome{flex:1;min-width:180px}
/* a tabela agrupada por pedido */
.cf-grupo{margin-bottom:12px}
.cf-grupo-cab{display:flex;align-items:baseline;gap:8px;padding:0 2px 4px}
.cf-grupo-cab b{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--text-1)}
.cf-grupo-cab span{font-size:10.5px;color:var(--text-3)}


/* --- a caixa: o molde é o da tela "E-mail" do menu esquerdo (classes ml-*,
       de public/css/email/email.css). Aqui só a barra de cima e o selo de
       "sem fornecedor", que é desta tela. --- */
.cf-caixa-barra{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cf-caixa-conta{font-family:var(--font-mono);font-size:12px;color:var(--text-1)}
.cf-caixa-nota{font-size:10.5px;color:var(--text-3)}
#cfCorpo .ml-layout{height:min(70vh,640px)}
.cf-lbl-falta{color:#a04040 !important;background:#f7e6e6 !important;border-color:#e6c9c9 !important}

/* --- a decisão dentro da tabela --- */
.cf-chk{width:26px;text-align:center}
.cf-casos tbody tr.is-marcada{background:rgba(154,91,45,.09)}
/* O seletor ocupa a célula inteira: com 65px o valor escolhido aparecia
   cortado e a lista nativa abria muito mais larga do que o campo. */
.cf-casos th:last-child,.cf-casos td.cf-dec{min-width:158px}
.cf-dec .cf-sel{width:100%;max-width:none}
.cf-sel{width:100%;max-width:200px;padding:4px 6px;font-size:11px;border-radius:6px;
  border:1px solid var(--border);background:var(--surface);color:var(--text-1);cursor:pointer}
.cf-sel:hover{border-color:var(--accent)}
/* a barra da ação em massa: a decisão inteira numa linha só, sem modal */
.cf-bulk-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 11px;margin:0 0 9px;border:1px solid var(--accent);border-radius:10px;
  background:rgba(154,91,45,.07)}
.cf-bulk-n{font-size:11px;color:var(--text-2);text-transform:none;letter-spacing:0}
.cf-bulk-n b{font-size:13px;color:var(--accent)}
.cf-bulk-barra .cf-sel{max-width:190px;text-transform:none;letter-spacing:0}
.cf-bulk-mail{max-width:260px !important}
.cf-bulk{padding:5px 14px;border-radius:8px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:#fff;
  font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none}
.cf-bulk:hover:not([disabled]){filter:brightness(1.08)}
.cf-bulk[disabled]{opacity:.45;cursor:default}
.cf-bulk-x{background:none;border:0;padding:0 4px;cursor:pointer;font-size:10.5px;
  color:var(--text-3);text-transform:none;letter-spacing:0}
.cf-bulk-x:hover{color:var(--accent);text-decoration:underline}
.cf-bulk-erro{font-size:11px;color:#c0392b}
/* com seleção, a decisão da linha sai de cena */
.cf-bloco-lista.is-bulk .cf-sel[data-decidir]{opacity:.4}
/* o modal que pergunta qual e-mail trouxe a decisão */
.cf-dec-dialog{max-width:620px;padding:18px 20px 16px}
.cf-dec-modal h3{margin:0 0 3px;font-size:16px}
.cf-dec-modal p{margin:0 0 12px;font-size:11.5px;color:var(--text-3)}
.cf-dec-mails{list-style:none;margin:0 0 14px;padding:0;max-height:300px;overflow-y:auto;
  border:1px solid var(--border);border-radius:9px}
.cf-dec-mails li+li{border-top:1px solid var(--border)}
.cf-dec-mails label{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:3px 9px;
  padding:9px 11px;cursor:pointer;align-items:center}
.cf-dec-mails label:hover{background:var(--surface-2)}
.cf-dec-de{font-size:11.5px;font-weight:600}
.cf-dec-as{grid-column:2;font-size:11px;color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-dec-dt{grid-column:3;grid-row:1;font-size:10px;color:var(--text-3);white-space:nowrap}
.cf-dec-acts{display:flex;gap:8px}
.cf-dec-erro{margin-top:9px;font-size:11px;color:#c0392b}

/* como ver a lista: por pedido (os casos) ou por produto (as peças dele) */
.cf-modos{display:inline-flex;gap:2px;padding:3px;border-radius:9px;
  background:var(--surface-2);border:1px solid var(--border);margin:0 0 12px}
.cf-modo{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:0;border-radius:7px;
  background:none;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--text-3)}
.cf-modo i{font-style:normal;font-size:10px;padding:1px 6px;border-radius:999px;
  background:var(--border);color:var(--text-2)}
.cf-modo.is-on i{background:var(--accent);color:#fff}
.cf-modo:hover{color:var(--text-1)}
.cf-modo.is-on{background:var(--surface);color:var(--text-1);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.cf-cli{margin-left:auto;max-width:200px;text-transform:none;letter-spacing:0}
.cf-razao{font-variant-numeric:tabular-nums}
.cf-razao.is-alta{color:#c0392b;font-weight:700}

/* a tela do Pós-venda montada aqui só para o modal dela existir: some tudo,
   menos os modais, e ela não intercepta clique nenhum quando está fechada */
/* A tela do Pós-venda mora aqui dentro, inteira, só para emprestar o card.
   Do que ela desenha, aparece SÓ o modal: o quadro, a barra de visões e o
   painel dela ficariam por cima desta tela. A árvore é
   .cf-cg-oculto > .page-comercial > #cgRoot > .cm-app > .cm-modal, por isso
   a regra desce por dentro em vez de olhar só os filhos diretos. */
.cf-cg-oculto{position:fixed;inset:0;z-index:1200;pointer-events:none}
.cf-cg-oculto .page-comercial > *:not(#cgRoot){display:none !important}
.cf-cg-oculto #cgRoot > *:not(.cm-app){display:none !important}
.cf-cg-oculto .cm-app > *:not(.cm-modal){display:none !important}
.cf-cg-oculto .cm-modal{pointer-events:auto}
.cf-caso{background:none;border:0;padding:0;font:inherit;color:var(--accent);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.cf-caso:hover{color:var(--ink)}

/* o painel da automação desta tela: só explica, não configura */
.cf-auto-painel{width:380px}
.cf-auto-passos{margin:0;padding:0 0 0 18px;display:grid;gap:7px}
.cf-auto-passos li{font-size:11.5px;line-height:1.5;color:var(--text-secondary,#5b6570)}
.cf-auto-passos b{color:var(--text-primary,#1f2933)}
.cf-auto-passos i{font-style:normal;font-family:var(--font-mono);font-size:10.5px}
.cf-auto-pe{display:flex;gap:18px;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--card-border,#e0dcd2)}
.cf-auto-pe div{display:flex;flex-direction:column}
.cf-auto-pe b{font-size:12.5px;text-transform:capitalize}
.cf-auto-pe span{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-secondary,#6b6b6b)}
.cf-auto-aviso{margin-top:9px;padding:7px 9px;border-radius:8px;font-size:10.5px;line-height:1.45;
  background:#f7e6e6;color:#a04040}

/* a decisão já tomada, com o e-mail que a trouxe ao lado */
.cf-dec-feita{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cf-dec-mail{display:grid;place-items:center;width:22px;height:18px;border-radius:5px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);color:var(--accent)}
.cf-dec-mail:hover{border-color:var(--accent);background:rgba(154,91,45,.1)}

/* o configurador do e-mail da virada: peças do Pós-venda, arranjo daqui */
.cf-auto-cab{flex-direction:row !important;align-items:center;justify-content:space-between;gap:10px}
.cf-auto-cab > div{display:flex;flex-direction:column;gap:1px}
/* o botão vive dentro do painel, que tem fundo claro próprio: sem cor
   explícita ele saía quase invisível */
.cf-auto-editar{flex-shrink:0;padding:6px 13px;font-size:11.5px;white-space:nowrap;
  border:1px solid var(--accent,#9a5b2d) !important;border-radius:8px;cursor:pointer;
  background:var(--accent,#9a5b2d) !important;color:#fff !important;font-weight:600}
.cf-auto-editar:hover{filter:brightness(1.08)}
.cf-gatilho{line-height:1.5;font-size:11.5px}
#cfAuto .cm-sec-dialog{width:min(760px,94vw);max-height:88vh;overflow:auto;
  background:var(--card-bg,#fff);border-radius:12px}
#cfAuto .cm-sec-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;padding:16px 18px 10px;border-bottom:1px solid var(--border)}
#cfAuto .cm-sec-rot{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3)}
#cfAuto .cm-sec-tit{margin:2px 0 0;font-size:17px}
#cfAuto .cm-sec-body{padding:14px 18px 18px}