/* Automação de mensagens — usa os tokens de styles.css, não sobrescreve nada antigo. */

/* ------------------------------------------------------------ faixa de conexão */
.conexao-faixa{
  display:flex; align-items:center; gap:10px;
  background:var(--paper); border:0.5px solid var(--line);
  border-radius:var(--radius); padding:11px 16px; margin-bottom:14px;
  font-size:13px; color:var(--ink-soft);
}
.conexao-faixa .dm-btn{margin-left:auto}
.conexao-bolha{
  width:9px; height:9px; border-radius:50%; background:var(--ink-mute); flex-shrink:0;
}
.conexao-bolha.ok{background:#2F7D57}
.conexao-bolha.erro{background:#A8432F}
.conexao-bolha.off{background:var(--line-strong)}

/* ------------------------------------------------------------------- abas */
.abas{
  display:flex; gap:2px; margin-bottom:16px;
  border-bottom:0.5px solid var(--line); flex-wrap:wrap;
}
.aba{
  all:unset; cursor:pointer; padding:9px 16px;
  font-size:13px; color:var(--ink-mute); border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.aba:hover{color:var(--ink-soft)}
.aba.ativa{color:var(--teal); font-weight:600; border-bottom-color:var(--teal)}
.aba:focus-visible{outline:2px solid var(--teal); outline-offset:-2px}

.aba-painel{display:none}
.aba-painel.ativa{display:block}

/* ---------------------------------------------------------------- esteira */
.cd-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px}
@media (max-width:900px){ .cd-kpis{grid-template-columns:repeat(2,1fr)} }

.cd-kpi{
  background:var(--paper); border:0.5px solid var(--line);
  border-radius:var(--radius); padding:16px 18px;
}
.cd-lbl{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute)}
.cd-num{font-size:28px; line-height:1.15; margin-top:6px}
.cd-sub{font-size:12px; color:var(--ink-mute); margin-top:2px}

.cd-aviso{
  background:var(--warn-soft); border-left:3px solid var(--warn);
  padding:12px 16px; border-radius:var(--radius); margin-bottom:16px;
  font-size:13px; color:var(--ink-soft);
}
.cd-acoes{display:flex; gap:8px; flex-wrap:wrap}
.cd-nota{font-size:12px; color:var(--ink-mute); margin-top:10px; line-height:1.5}
.cd-nota code,.rodape-nota code{font-size:11.5px; color:var(--ink-soft)}
.cd-vazio{padding:22px 0; text-align:center; color:var(--ink-mute); font-size:13px}

.cd-duplo{display:grid; grid-template-columns:1.15fr .85fr; gap:12px}
@media (max-width:900px){ .cd-duplo{grid-template-columns:1fr} }

.cd-cat{display:inline-block; padding:2px 10px; border-radius:999px; font-size:11.5px; font-weight:500}
.cd-cat.utilidade{background:var(--teal-soft); color:var(--teal)}
.cd-cat.marketing{background:var(--bronze-soft); color:var(--bronze)}

.cd-funil{display:flex; flex-direction:column; gap:8px}
.cd-funil-item{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:9px 12px; border:0.5px solid var(--line); border-radius:var(--radius);
  font-size:13px; color:var(--ink-soft);
}
.cd-funil-item strong{font-variant-numeric:tabular-nums; font-size:15px; color:var(--ink)}

/* -------------------------------------------------------------- campanhas */
.camp-intro{margin:6px 0 0; font-size:12.5px; color:var(--ink-mute); max-width:62ch}
.camp-filtros{display:flex; gap:6px; flex-wrap:wrap}
.camp-filtro{
  background:var(--paper); border:1px solid var(--line); color:var(--ink-mute);
  font:inherit; font-size:12px; padding:5px 12px; border-radius:999px; cursor:pointer;
}
.camp-filtro:hover{color:var(--ink)}
.camp-filtro[aria-pressed="true"]{background:var(--teal); border-color:var(--teal); color:#fff}
.camp-filtro:focus-visible{outline:2px solid var(--teal); outline-offset:2px}

.camp-galeria{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr));
  gap:14px; margin-top:16px;
}
.camp-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; text-align:left; font:inherit; color:inherit;
  padding:0; display:flex; flex-direction:column; transition:border-color .14s, box-shadow .14s;
}
.camp-card:hover{border-color:var(--line-strong); box-shadow:0 6px 18px -12px rgba(30,45,84,.4)}
.camp-card.selecionada{border-color:var(--teal); box-shadow:0 0 0 1px var(--teal)}
.camp-card:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.camp-card.inativa{opacity:.62}
.camp-card-topo{
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
  padding:11px 13px 9px; border-bottom:1px solid var(--line);
}
.camp-card-nome{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3}
.camp-card-id{display:block; font-size:10.5px; color:var(--ink-mute); margin-top:2px}
.camp-card-tags{display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none}
.camp-off{font-size:10px; color:var(--ink-mute); border:1px solid var(--line); border-radius:999px; padding:1px 8px}
.camp-nova{font-size:10px; background:var(--teal); color:#fff; border-radius:999px; padding:2px 8px}

/* ---- bolha do WhatsApp, usada na galeria, no editor e no envio manual ---- */
.camp-previa{background:#0B141A; border-radius:12px; padding:14px 12px 16px; margin-top:12px}
.camp-card .camp-previa{border-radius:0; margin:0; padding:12px 11px 13px; flex:1}
.prev-topo{
  display:flex; align-items:center; gap:8px; color:#E9EDEF;
  font-size:12px; margin-bottom:10px;
}
.prev-avatar{
  width:24px; height:24px; border-radius:50%; background:var(--k3-dourado);
  color:var(--k3-azul); display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; flex:none;
}
.prev-bolha{background:#202C33; color:#E9EDEF; border-radius:9px; overflow:hidden}
.prev-img{background:#0C0C0C}
/* O criativo inteiro, sem corte. Estava com max-height + object-fit:cover:
   com a arte deitada dava quase no mesmo, mas com a arte quadrada a previa
   passaria a mostrar so a faixa do meio — escondendo justamente a chamada e
   o desenho. Previa que corta e previa que mente: o WhatsApp mostra a peca
   inteira, e e isso que precisa aparecer aqui. */
.prev-img img{display:block; width:100%; height:auto}
.prev-titulo{padding:9px 11px 0; font-size:13px; font-weight:700; line-height:1.35}
.prev-corpo{padding:8px 11px 3px; font-size:13px; line-height:1.45; word-break:break-word}
.prev-corpo .v{color:#53BDEB}
.prev-rodape{padding:5px 11px 0; color:#8696A0; font-size:11px; line-height:1.35}
.prev-hora{text-align:right; padding:2px 11px 8px; color:#8696A0; font-size:10.5px}
.prev-acoes{margin-top:2px; display:flex; flex-direction:column; gap:2px}
.prev-acao{
  background:#202C33; color:#53BDEB; border-radius:7px; text-align:center;
  padding:9px 8px; font-size:12.5px; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.prev-acao svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2}
.prev-acao .ac{font-size:9.5px; color:#8696A0; font-weight:400}
.prev-nota{margin-top:9px; padding:0 4px; color:#8696A0; font-size:11px}
.prev-vazia{color:#8696A0; font-size:12px; padding:8px 11px}

/* ---- editor ---- */
.camp-editor{margin-top:14px}
.camp-grid{display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start}
@media (max-width:1200px){ .camp-grid{grid-template-columns:1fr} }
.camp-form-linha{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
@media (max-width:700px){ .camp-form-linha{grid-template-columns:1fr} }
.camp-vars{margin-top:10px; font-size:11.5px; color:var(--ink-mute)}
.camp-ativa{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft); cursor:pointer}

.camp-botoes-edit{margin-top:16px}
.camp-hint{font-weight:400; color:var(--ink-mute); font-size:11px; text-transform:none; letter-spacing:0}
.camp-btn-linha{display:grid; grid-template-columns:1fr 112px 156px 32px; gap:8px; margin-top:8px; align-items:center}
@media (max-width:800px){ .camp-btn-linha{grid-template-columns:1fr 1fr} }
.camp-btn-linha select.dm-input, .camp-btn-linha input.dm-input{margin:0}
.camp-btn-x{
  background:none; border:1px solid var(--line); border-radius:6px; color:var(--ink-mute);
  cursor:pointer; height:32px; font-size:15px; line-height:1;
}
.camp-btn-x:hover{border-color:var(--line-strong); color:var(--ink)}
.camp-aviso{margin-top:8px; font-size:11.5px; color:var(--warn)}
.camp-aviso:empty{display:none}
.dm-previa{max-width:320px}

/* --------------------------------------------------------------- conexão */
#aba-conexao .dm-input{max-width:100%}

/* ======================================================== acompanhamento */
#view-acompanhamento table{
  display:table;
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}
#view-acompanhamento table thead{display:table-header-group}
#view-acompanhamento table tbody{display:table-row-group}
#view-acompanhamento table tr{display:table-row!important;width:auto}
#view-acompanhamento table th,
#view-acompanhamento table td{
  display:table-cell!important;
  text-align:left;
  vertical-align:middle;
}
#view-acompanhamento table th:nth-child(1),#view-acompanhamento table td:nth-child(1){width:14%}
#view-acompanhamento table th:nth-child(2),#view-acompanhamento table td:nth-child(2){width:13%}
#view-acompanhamento table th:nth-child(3),#view-acompanhamento table td:nth-child(3){width:13%}
#view-acompanhamento table th:nth-child(4),#view-acompanhamento table td:nth-child(4){width:16%}
#view-acompanhamento table th:nth-child(5),#view-acompanhamento table td:nth-child(5){width:12%}
#view-acompanhamento table th:nth-child(6),#view-acompanhamento table td:nth-child(6){width:14%}
#view-acompanhamento table th:nth-child(7),#view-acompanhamento table td:nth-child(7){width:16%}
#view-acompanhamento table th:nth-child(8),#view-acompanhamento table td:nth-child(8){width:6%}
#view-acompanhamento table tbody tr::before,
#view-acompanhamento table tbody td:first-child::before{display:none}
.ac-acoes{text-align:center!important}
.ac-lixeira{border:0;background:transparent;color:var(--ink-mute);font-size:18px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:5px}
.ac-lixeira:hover{background:var(--warn-soft);color:var(--warn)}
.ac-lixeira:disabled{opacity:.45;cursor:wait}
.ac-confirmacao{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(10,20,36,.42)}
.ac-confirmacao[hidden]{display:none}
.ac-confirmacao-card{width:min(440px,100%);padding:26px;background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:0 24px 60px rgba(12,26,53,.24)}
.ac-confirmacao-icone{width:34px;height:34px;display:grid;place-items:center;margin-bottom:14px;border-radius:50%;background:var(--warn-soft);color:var(--warn);font-weight:800}
.ac-confirmacao-card h2{margin:0;color:var(--ink);font:700 22px 'Newsreader',serif}
.ac-confirmacao-card p{margin:10px 0 22px;color:var(--ink-soft);font-size:13px;line-height:1.55}
.ac-confirmacao-acoes{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.ac-confirmacao-apagar{background:#A8432F;border-color:#A8432F;color:#fff}
.ac-confirmacao-apagar:hover{background:#8E3525;border-color:#8E3525}
.funil{display:flex; flex-direction:column; gap:7px}
.funil-linha{display:grid; grid-template-columns:150px 1fr 42px; align-items:center; gap:10px}
.funil-rot{font-size:12.5px; color:var(--ink-soft)}
.funil-barra{height:16px; background:var(--bg); border-radius:3px; overflow:hidden}
.funil-barra > span{display:block; height:100%; background:var(--teal); border-radius:3px}
.funil-valor{font-variant-numeric:tabular-nums; font-size:13px; text-align:right}
@media (max-width:640px){ .funil-linha{grid-template-columns:110px 1fr 36px} }

.estado{display:inline-block; padding:2px 10px; border-radius:999px; font-size:11.5px; font-weight:500}
.estado.enviado{background:var(--bg); color:var(--ink-mute)}
.estado.clicou{background:var(--teal-soft); color:var(--teal)}
.estado.preenchendo{background:color-mix(in srgb,#2F7D57 12%,white); color:#2F7D57}
.estado.andamento{background:color-mix(in srgb,#2F7D57 12%,white); color:#2F7D57}
.estado.parado,.estado.abandonado{background:var(--warn-soft); color:var(--warn)}
.estado.concluido{background:var(--bronze-soft); color:var(--bronze)}
.estado\.concluído,.estado[class~="concluído"]{background:var(--bronze-soft); color:var(--bronze)}

/* ---- aba 7: seletor de formulário, avisos e tabela de acompanhamento ---- */
.ac-formularios{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.ac-form-btn{
  padding:9px 18px; border:1px solid var(--line); border-radius:999px;
  background:var(--paper); color:var(--ink-soft); cursor:pointer;
  font:500 13px var(--k3-fonte-ui); transition:border-color .14s, color .14s;
}
.ac-form-btn:hover{border-color:var(--line-strong); color:var(--ink)}
/* Selecionado em AZUL da marca, e nao no quase-preto do texto: era o
   unico botao do painel que se pintava com --ink, e destoava de todo o
   resto (aba ativa, navbtn ativo, botao primario — todos navy). */
.ac-form-btn[aria-selected="true"]{
  background:var(--k3-azul); border-color:var(--k3-azul); color:#fff; font-weight:600;
}
.ac-form-btn .ac-form-conta{opacity:.62; margin-left:7px; font-variant-numeric:tabular-nums}

/* O endereço público virou LEITURA: no lugar de dois campos editáveis (que
   gravavam as chaves de quando o formulário morava fora), a tela mostra o
   endereço que o painel monta. Quebra em qualquer ponto porque é uma URL
   longa dentro de uma coluna estreita. */
.ac-endereco{
  margin:6px 0 8px; padding:10px 12px;
  border:1px solid var(--line); border-radius:6px; background:var(--paper);
  color:var(--ink); font:500 13px var(--k3-fonte-mono, ui-monospace, monospace);
  overflow-wrap:anywhere; word-break:break-word; line-height:1.5;
}

.ac-avisos{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.ac-avisos:empty{display:none}
.ac-aviso{
  padding:11px 13px; border:1px solid var(--line); border-left:3px solid var(--warn);
  border-radius:6px; background:var(--warn-soft); color:var(--ink-soft);
  font-size:12.5px; line-height:1.55;
}

.ac-ferramentas{display:flex; gap:8px; align-items:center; flex:none}
.ac-ferramentas .dm-input{max-width:190px}
/* A tabela tem nove colunas e nenhuma delas é dispensável para acompanhar
   alguém. Em vez de espremer a fonte, ela mantém a largura legível e rola
   na horizontal dentro do próprio card — a página nunca rola de lado. */
.ac-tabela-rolagem{overflow-x:auto}
.ac-tabela-rolagem table{min-width:1020px}
.ac-tabela-rolagem th{white-space:nowrap}
#view-acompanhamento th[data-ordenar]{cursor:pointer; user-select:none; white-space:nowrap}
#view-acompanhamento th[data-ordenar]:hover{color:var(--ink)}
.ac-linha-atencao td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.ac-sem-dado{color:var(--ink-mute)}
.ac-onde{font-size:12px; color:var(--ink-soft)}
@media (max-width:640px){ .ac-ferramentas{width:100%} .ac-ferramentas .dm-input{max-width:none; flex:1} }

.prog{display:inline-block; width:70px; height:6px; background:var(--bg); border-radius:3px; overflow:hidden; vertical-align:middle}
.prog > span{display:block; height:100%; background:var(--bronze); border-radius:3px}
.prog-num{font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--ink-mute); margin-left:7px}

.rastro{border:0.5px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-top:10px}
.rastro-topo{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.rastro-url{font-size:11.5px; color:var(--ink-mute); word-break:break-all}
.rastro-linhas{display:grid; grid-template-columns:repeat(3,1fr); gap:8px 18px}
@media (max-width:900px){ .rastro-linhas{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .rastro-linhas{grid-template-columns:1fr} }
.rastro-linha{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--ink-mute); border-bottom:0.5px solid var(--line); padding-bottom:5px}
.rastro-linha strong{color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; font-size:12px}

/* ------------------------------------------------ envio manual por modelo */
.modelo-info{
  margin-top:8px; font-size:12px; color:var(--ink-mute);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

/* ---- caixas de aviso e confirmação (dialogo.js) ---- */
.k3-dialogo{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(10,20,36,.42);animation:k3d-entra .14s ease-out}
.k3-dialogo.k3d-saindo{opacity:0;transition:opacity .12s ease-in}
@keyframes k3d-entra{from{opacity:0}to{opacity:1}}
.k3-dialogo-card{width:min(440px,100%);padding:26px;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 24px 60px rgba(12,26,53,.24);
  animation:k3d-sobe .16s ease-out}
@keyframes k3d-sobe{from{transform:translateY(8px)}to{transform:none}}
.k3-dialogo-icone{width:34px;height:34px;display:grid;place-items:center;margin-bottom:14px;
  border-radius:50%;background:var(--warn-soft);color:var(--warn);font-weight:800}
.k3d-erro .k3-dialogo-icone{background:#F7E3DF;color:#A8432F}
.k3d-ok .k3-dialogo-icone{background:var(--teal-soft);color:var(--teal)}
.k3d-pergunta .k3-dialogo-icone{background:var(--teal-soft);color:var(--teal)}
.k3-dialogo-titulo{margin:0;color:var(--ink);font:700 22px 'Newsreader',serif;line-height:1.25}
.k3-dialogo-texto{margin:10px 0 0;color:var(--ink-soft);font-size:13px;line-height:1.55}
.k3-dialogo-detalhe{margin:12px 0 0;padding:9px 11px;background:var(--bg);border:1px solid var(--line);
  border-radius:6px;font:11.5px/1.5 'IBM Plex Mono',monospace;color:var(--ink-mute);
  white-space:pre-wrap;word-break:break-word;max-height:150px;overflow:auto}
.k3-dialogo-acoes{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:22px}
.k3-dialogo .dm-btn.k3-dialogo-perigo{background:#A8432F;border-color:#A8432F;color:#fff}
.k3-dialogo .dm-btn.k3-dialogo-perigo:hover{background:#8E3525;border-color:#8E3525}
.k3-dialogo .dm-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ---- sincronizacao das conversas (tela 05) ---- */
.conversation-sync{background:none;border:1px solid var(--line);border-radius:7px;
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer;color:var(--ink-mute);
  flex:none;margin-left:auto}
.conversation-sync svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.conversation-sync:hover{border-color:var(--teal);color:var(--teal)}
.conversation-sync:disabled{opacity:.55;cursor:default}
.conversation-sync.girando svg{animation:k3-gira .9s linear infinite}
@keyframes k3-gira{to{transform:rotate(360deg)}}
.conversation-delete{margin-left:6px}
@media (prefers-reduced-motion:reduce){.conversation-sync.girando svg{animation:none}}
.connection-state.ok{background:var(--teal-soft);color:var(--teal);border-color:var(--teal-soft)}

/* ---- qual planilha está valendo (barra lateral) ---- */
.estado-planilha{margin:8px 12px 0;display:flex;flex-direction:column;gap:2px;
  font-size:10.5px;line-height:1.4;color:var(--ink-mute);word-break:break-word}
.estado-planilha:empty{display:none}
.estado-planilha span:first-child{color:var(--ink-soft);font-weight:500}
.estado-planilha .ep-erro{color:#A8432F;font-weight:600}

/* ---- teste de envio (aba Conexao) ---- */
.teste-envio{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.teste-nota{margin:6px 0 12px;font-size:12.5px;color:var(--ink-mute);max-width:70ch;line-height:1.55}
.teste-linha{display:grid;grid-template-columns:1fr 200px auto;gap:8px;align-items:center}
@media (max-width:820px){.teste-linha{grid-template-columns:1fr}}
.teste-linha .dm-input{margin:0}
.teste-resultado{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.teste-resultado:empty{display:none}
.teste-etapa{display:grid;grid-template-columns:104px 20px 1fr;gap:10px;align-items:baseline;
  padding:8px 11px;background:var(--bg);border:1px solid var(--line);border-radius:6px;font-size:12.5px}
.teste-etapa .rot{font-weight:600;color:var(--ink);text-transform:capitalize}
.teste-etapa .ic{font-weight:700}
.teste-etapa.ok .ic{color:#2F7D57}
.teste-etapa.falhou .ic{color:#A8432F}
.teste-etapa .det{color:var(--ink-soft);word-break:break-word}

/* rotulo discreto do campo de cliente que virou opcional no calendario */
.opcional{color:var(--ink-mute);font-weight:400;font-size:.85em}

/* Teste real na aba Envio manual: manda para o SEU numero exatamente a
   mensagem que iria para o cliente, e mostra o que a Z-API respondeu. */
.dm-teste-real{display:flex;gap:8px;align-items:center;margin-right:auto}
.dm-teste-real .dm-input{width:190px}

/* A segmentacao por faixa etaria saiu do Envio manual em 15/09/2026 — eram
   onze controles antes de a lista aparecer. Com ela sairam ~85 linhas de CSS
   que este comentario substitui: .seg-faixa, .refinar, .seg-contador e
   companhia nao existem mais em lugar nenhum do HTML.

   O unico sobrevivente do bloco e o estado "ligado" do .dm-lista-toggle, que
   o acompanhamento.js ainda usa no botao de copiar link. */
.dm-lista-toggle[data-categoria].ativo,
.dm-lista-toggle[data-segmento].ativo{
  background:var(--teal); border-color:var(--teal); color:#fff;
}

/* =================================================== ENVIO MANUAL (tabela)
   A tabela reaproveita .client-table da aba Clientes inteira — fonte, altura
   de linha, hover, linha de baixo, tipografia do nome. O unico ajuste e o
   numero de colunas: sao sete aqui, seis la. Sem isso, cada tela teria a
   "sua" tabela e a diferenca apareceria logo na primeira comparacao.
   ======================================================================== */
/* O .shell e um grid "220px 1fr", e uma coluna 1fr nasce com min-width:auto:
   ela ESTICA para caber o conteudo mais largo, em vez de deixar o conteudo
   rolar dentro de si. Era por isso que, em tela estreita, a pagina inteira
   rolava de lado e o botao "Testar conexao" ficava fora do campo de visao.
   Com min-width:0 a coluna volta a respeitar a largura da tela e quem rola
   e o quadro da tabela, que e o unico que precisa. */
main{min-width:0}

.env-sec{padding-top:18px}

.env-passo-topo{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin-bottom:16px;
}
.env-passo{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px 6px 7px; border-radius:20px;
  background:var(--bg); color:var(--ink-mute);
  font:600 11.5px var(--k3-fonte-ui); white-space:nowrap;
}
.env-passo i{
  width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
  /* Era branco sobre var(--line): 1.19:1, o numero do passo simplesmente nao
     aparecia. Passo inativo tem que ser discreto, nao invisivel. */
  background:var(--bg); color:var(--ink-mute); font-style:normal;
  font:700 10.5px var(--k3-fonte-ui);
}
.env-passo.ativo{background:var(--teal-soft); color:var(--teal)}
.env-passo.ativo i{background:var(--teal)}

.env-cabeca h3{margin:0}
.env-sub{
  margin:5px 0 0; max-width:62ch;
  font:500 12.5px var(--k3-fonte-ui); line-height:1.5; color:var(--ink-mute);
}

.env-controles{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px;
  margin:18px 0 14px;
}
.env-campo{display:flex; flex-direction:column; gap:6px; min-width:180px}
.env-campo-busca{flex:1 1 300px}
.env-campo > span{
  font:600 10px var(--k3-fonte-ui); letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-mute);
}
.env-campo .dm-input{min-height:44px}
.env-limpar-busca{
  all:unset; cursor:pointer; padding:0 4px; height:44px; display:inline-flex;
  align-items:center; color:var(--ink-mute);
  font:600 12px var(--k3-fonte-ui); border-bottom:1px solid transparent;
}
.env-limpar-busca:hover{color:var(--teal); border-bottom-color:var(--teal)}

/* A contagem e a selecao ficam GRUDADAS na tabela, e nao no topo da tela:
   e o numero que voce confere no segundo antes de disparar. */
.env-resumo{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:center; gap:12px;
  padding:11px 14px; border:1px solid var(--line); border-bottom:0;
  border-radius:8px 8px 0 0; background:var(--paper);
}
.env-resumo-esq{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px}
.env-resumo-dir{display:flex; flex-wrap:wrap; gap:8px}
.env-contagem,.env-selecionados{
  font:500 12.5px var(--k3-fonte-ui); color:var(--ink-soft);
}
.env-contagem b,.env-selecionados b{font-weight:700; color:var(--ink)}
.env-selecionados.env-tem{color:var(--teal)}
.env-selecionados.env-tem b{color:var(--teal)}
.env-nota{color:var(--ink-mute); font-weight:500}
.env-resumo .dm-btn-sec{padding:7px 14px; font-size:12px}

.env-rolagem{
  max-height:56vh; min-height:200px; overflow:auto;
  border:1px solid var(--line); border-radius:0 0 8px 8px;
  background:var(--paper);
}
.env-tabela{table-layout:auto}
.env-tabela thead{position:sticky; top:0; z-index:3; background:var(--paper)}
.env-tabela thead tr,
.env-tabela tbody tr{
  /* a 6a coluna guarda o selo "Sem WhatsApp", que tem 108px: com 130 e a
     margem de 14 ele vazava por cima do numero da conta. 150 e o minimo que
     cabe selo + folga sem encostar. */
  grid-template-columns:52px 82px minmax(200px,2fr) minmax(120px,1.1fr) 78px minmax(150px,1.1fr) minmax(112px,.9fr) !important;
  column-gap:14px;
}
.env-tabela tbody tr{min-height:62px; cursor:pointer}
.env-tabela tbody td{padding:11px 14px}
@media (max-width:1180px){.env-tabela tbody td,.env-tabela thead th{padding-left:10px;padding-right:10px}}
.env-tabela .env-check{display:grid !important; place-items:center; padding:0}
.env-tabela .env-check input{width:16px; height:16px; cursor:pointer; accent-color:var(--teal)}
.env-tabela .env-num{font:600 13px 'IBM Plex Mono',monospace; color:var(--ink)}
.env-tabela .env-tel{white-space:nowrap}
.env-tabela .env-conta{font:500 12px 'IBM Plex Mono',monospace; color:var(--ink-mute)}
.env-tabela .env-zero{color:var(--line-strong)}
.env-tabela .cliname{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.env-tabela .env-sem-zap{
  display:inline-block; padding:4px 9px; border-radius:16px;
  background:var(--warn-soft); color:var(--warn);
  font:600 10.5px var(--k3-fonte-ui); white-space:nowrap;
  /* Sem esta margem o holder laranja encosta no que vem em seguida na
     mesma linha — na tabela do Envio manual, o numero da conta da coluna
     ao lado. */
  margin-right:10px;
}
.env-tabela tbody tr.env-marcada{background:var(--teal-soft)}
.env-tabela tbody tr.env-marcada:hover{background:#D8E3F2}
.env-tabela tbody tr.env-bloqueada{cursor:default; opacity:.62}
.env-tabela tbody tr.env-bloqueada:hover{background:transparent}
.env-tabela tbody tr.env-vazia{
  display:block !important; min-height:0; cursor:default; background:none;
}
.env-tabela tbody tr.env-vazia td{
  display:block !important; padding:34px 18px; text-align:center;
  color:var(--ink-mute); font:500 13px var(--k3-fonte-ui);
}
.env-tabela tbody tr.env-vazia:hover{background:none}

.env-tabela thead th[data-ordenar]{cursor:pointer; user-select:none}
.env-tabela thead th[data-ordenar]:hover{color:var(--teal)}
.env-tabela thead th.env-ordenada{color:var(--teal)}
.env-seta{
  /* Seta de ordenacao e affordance: se ninguem ve, ninguem sabe que a coluna
     ordena. Era var(--line-strong), 1.36:1 — cor de borda, nao de texto. */
  display:inline-block; margin-left:3px; color:var(--ink-mute);
  font-size:11px; vertical-align:baseline;
}
.env-tabela thead th.env-ordenada .env-seta{color:var(--teal)}

.env-mais{
  all:unset; cursor:pointer; display:block; width:100%; margin-top:10px;
  padding:11px; border:1px dashed var(--line-strong); border-radius:8px;
  text-align:center; color:var(--ink-mute);
  font:600 12px var(--k3-fonte-ui);
}
.env-mais:hover{border-color:var(--teal); color:var(--teal)}

.env-etapa-msg{
  display:flex; align-items:center; gap:10px;
  margin:28px 0 6px; padding-top:22px; border-top:1px solid var(--line);
}
.env-etapa-msg h3{display:flex; align-items:center; gap:10px; margin:0}
.env-etapa-msg i{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--teal); color:var(--paper); font-style:normal;
  font:700 11px var(--k3-fonte-ui);
}

/* Sete colunas nao cabem em tela estreita. A saida NAO e diminuir a fonte
   (nome de cliente em 10px nao se le de relance, que e justamente o uso
   desta tela): a rolagem horizontal fica PRESA dentro do quadro da tabela,
   e a pagina continua sem rolar de lado. */
@media (max-width:1180px){
  .env-rolagem{overflow-x:auto; overscroll-behavior-x:contain}
  .env-tabela{min-width:800px}
  .env-tabela thead tr,
  .env-tabela tbody tr{
    grid-template-columns:44px 58px minmax(150px,1.6fr) 110px 56px 146px 90px !important;
  }
}
@media (max-width:760px){
  .env-controles{gap:10px}
  .env-campo,.env-campo-busca{flex:1 1 100%; min-width:0}
  .env-limpar-busca{height:auto; padding:2px 0}
  .env-resumo{flex-direction:column; align-items:flex-start}
  .env-resumo-dir{width:100%}
  .env-resumo-dir .dm-btn-sec{flex:1}
}

/* ===================== ABA 02 · ELEGIVEIS DAS CAMPANHAS DE CAMBIO
   Mesma tabela da Mesa Digital, com nove colunas em vez de seis. As duas
   abas precisam parecer a mesma ferramenta — se a segunda tivesse a "sua"
   tabela, a diferenca apareceria na primeira comparacao.

   Nove colunas nao cabem em 1000 px sem espremer, e coluna espremida quebra
   o cabecalho em duas linhas — foi o que aconteceu na primeira versao. A
   tabela tem largura minima propria e a caixa rola de lado, como a da aba
   07. Rolar e melhor que adivinhar.
   ============================================================== */
/* A rolagem horizontal vale SEMPRE, e nao so abaixo de 1180px de janela.
   O que decide se a tabela cabe nao e o tamanho da janela e sim o da
   coluna de conteudo, que e menor: numa tela de 1500px a ultima coluna
   ("Sem WhatsApp") era cortada na borda do cartao, sem barra para
   arrastar. Com o overflow no cartao, ela sempre pode ser alcancada. */
.int-rolagem{overflow-x:auto}
.card:has(.int-tabela){overflow-x:auto}
/* Largura pedida pelos CABEÇALHOS, não pelo conteúdo.
   "Custódia Brasil", "Teto de premiação" e "Ativado funding" em maiúsculas
   de 11px precisam de ~150px cada. Com as colunas antigas (132/118/96) eles
   cabiam deitados mas saíam cortados — "CUSTÓDIA BR…", "TETO DE…" — o que
   resolve a quebra e estraga a leitura, que era o ponto.
   Com a soma em 1.176px a tabela às vezes não cabe na tela; aí ela ROLA de
   lado, que é o comportamento certo para tabela densa. */
.int-tabela{min-width:1328px}
.int-tabela thead tr,
.int-tabela tbody tr{
  /* A GRADE DESTA TABELA MORA EM painel-fundo.css, que carrega depois e
     também usa !important — o que estiver aqui é ignorado. Deixo o seletor
     para as outras propriedades (gap, altura) e NÃO repito as colunas:
     duas fontes para a mesma largura foi o que já custou uma rodada de
     ajuste no arquivo errado. */
  column-gap:14px;
}
.int-tabela tbody tr{min-height:66px}
.int-tabela tbody td{padding:12px 14px}
.int-tabela .env-num{font:600 13px 'IBM Plex Mono',monospace;color:var(--ink)}
.int-tabela .env-conta{font:500 12px 'IBM Plex Mono',monospace;color:var(--ink-mute)}
.int-tabela .env-zero{color:var(--line-strong)}
.int-tabela .cliname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.int-tabela .env-sem-zap{
  display:inline-block;padding:4px 9px;border-radius:16px;
  background:var(--warn-soft);color:var(--warn);
  font:600 10.5px var(--k3-fonte-ui);white-space:nowrap;
  /* mesmo ajuste do Envio manual: espaco entre o holder e o que vem depois */
  margin-right:10px;
}

/* A marca de quem esta nas DUAS bases. Discreta de proposito: e um alerta
   util na hora de disparar, nao um carimbo de erro. */
.int-marca{
  display:inline-block;margin-left:6px;padding:2px 8px;border-radius:12px;
  background:var(--teal-soft);color:var(--teal);
  font:600 10px var(--k3-fonte-ui);letter-spacing:.02em;white-space:nowrap;
}

.int-tabela .badge-ok{background:#E4F1EB;color:#2F7D57}
.int-tabela .badge-wait{background:var(--bronze-soft);color:var(--bronze)}

.int-aviso{
  margin:14px 0;padding:12px 16px;border-radius:var(--radius);
  background:var(--warn-soft);border-left:3px solid var(--warn);
  font:500 12.5px var(--k3-fonte-ui);line-height:1.6;color:var(--ink-soft);
}

#view-ficha-internacional .grid{gap:16px 24px}
#view-ficha-internacional .field .v{font-size:14px;font-weight:600}

/* O veredito: a situacao do cliente em uma frase, antes de qualquer tabela.
   E o que voce diria em voz alta se alguem perguntasse quem e a pessoa. */
.fi-veredito{
  margin:18px 0 14px; padding:16px 20px; border-radius:var(--radius);
  background:var(--teal-soft); border-left:3px solid var(--teal);
  font:500 14px/1.65 var(--k3-fonte-ui); color:var(--ink);
  max-width:78ch;
}

.fi-numeros{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px}
.fi-num{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px; min-width:0;
}
.fi-rot{
  display:block; font:600 10px var(--k3-fonte-ui); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute);
}
.fi-num strong{
  display:block; margin-top:8px; font:700 21px var(--k3-fonte-ui);
  color:var(--ink); line-height:1.15; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis;
}
.fi-sub{
  display:block; margin-top:5px; font:500 11.5px var(--k3-fonte-ui);
  color:var(--ink-mute); line-height:1.4;
}

.fi-nota{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  font:500 12.5px/1.6 var(--k3-fonte-ui); color:var(--ink-mute);
  max-width:80ch;
}

/* O bloco da outra base tem borda dourada: sinaliza, sem precisar de texto,
   que aquela informacao veio de outro lugar. */
.fi-cruzada{border-left:3px solid var(--bronze)}

@media (max-width:900px){
  .fi-numeros{grid-template-columns:1fr}
  .fi-veredito{font-size:13.5px; padding:14px 16px}
}

@media (max-width:1180px){
  .int-tabela{min-width:1328px}
}

/* ------------------------------------------------ criar campanha nova */
.camp-cabeca-acoes{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  justify-content:flex-end}
#camp-nova{display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.camp-mais-icone{width:15px; height:15px; stroke:currentColor; fill:none;
  stroke-width:2.2; stroke-linecap:round}
.camp-editor-acoes{display:flex; align-items:center; gap:10px}
/* [hidden] perde para qualquer regra que defina display — e .dm-btn define.
   Sem isto, "Excluir" e o seletor de categoria aparecem os dois ao mesmo
   tempo na criacao, que e exatamente o que eles nao podem fazer. */
.camp-editor-acoes [hidden],
.camp-salvar-linha [hidden]{display:none !important}
.camp-cat-sel{width:auto; min-width:128px; padding:5px 10px; font-size:12.5px}
.camp-excluir{color:#B4402F; border-color:#EBC9C2}
.camp-excluir:hover{background:#FBEDEA; border-color:#D9A99F}
.camp-salvar-linha{display:flex; align-items:center; gap:10px}

/* --------------------------- criativo que nao existe
   A previa escondia a imagem quando o arquivo faltava. Falhar calado num
   campo de texto livre e o jeito mais rapido de disparar campanha sem
   criativo e so descobrir depois. */
.prev-img-faltando{
  display:flex; align-items:center; justify-content:center;
  min-height:96px; padding:16px; text-align:center;
  border:1px dashed rgba(255,255,255,.28); border-radius:10px;
  background:rgba(255,255,255,.04);
}
.prev-img-erro{display:none; color:#E9B9AE; font-size:11.5px; text-align:center;
  line-height:1.4; word-break:break-all}
.prev-img-erro b{display:block; margin-top:2px; color:#F4D4CC; font-weight:600;
  font-family:'IBM Plex Mono',monospace; font-size:11px}
.prev-img-faltando .prev-img-erro{display:block}
.dm-input-erro{border-color:#D9A99F !important; background:#FDF6F4}
#camp-imagem-aviso:not(:empty){
  margin-top:6px; color:#B4402F; font-size:11.5px; line-height:1.45;
}

/* --------------------------------------------- teste do link publico
   Endereco de tunel caido tem cara perfeita. O botao ao lado do campo e o
   unico jeito de saber, sem esperar um cliente reclamar. */
.base-teste{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.base-teste-status{font-size:12px;line-height:1.45;color:var(--ink-mute)}
.base-teste-status.ok{color:#1F7A3D;font-weight:600}
.base-teste-status.erro{color:#B0483B;font-weight:600}
.base-teste-status .base-teste-detalhe{display:block;font-weight:400;color:var(--ink-mute)}

/* ------------------------------------------------- esteira programada
   "Eu defino QUANDO comecar, QUANDO terminar e QUANTOS clientes devem
   receber" — a secao fica dentro do Envio manual, logo apos o botao
   "Enviar mensagem", porque usa a MESMA selecao e a MESMA mensagem: nao e
   uma tela nova, e uma segunda forma de mandar o que ja esta escolhido. */
.env-prog-sec{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
}
.env-prog-sec h3{margin:0; display:flex; align-items:center; gap:8px}
.env-prog-sec h3 i{
  display:inline-grid; place-items:center; width:20px; height:20px;
  border-radius:50%; background:var(--teal-soft); color:var(--teal);
  font:700 11px var(--k3-fonte-ui); font-style:normal;
}
.env-prog-campos{
  display:flex; flex-wrap:wrap; gap:12px; margin:16px 0 4px;
}
.env-prog-campos .env-campo{min-width:200px}

/* `display:grid` vence o atributo `hidden` — e esta e a caixa que o
   JavaScript esconde enquanto faltam dados. Sem esta linha ela ficava
   sempre na tela, com quatro tracos, parecendo uma conta que nao fecha.
   O mesmo tropeco ja tinha acontecido em `.camp-editor-acoes`, algumas
   dezenas de linhas acima. */
.env-prog-previa[hidden]{display:none !important}
.env-prog-previa{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; margin:14px 0; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--radius-campo);
  background:var(--papel-fundo);
}
.env-prog-previa div{display:flex; flex-direction:column; gap:4px}
.env-prog-previa span{
  font:600 10px var(--k3-fonte-ui); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mute);
}
.env-prog-previa b{font:700 15px var(--k3-fonte-ui); color:var(--ink)}

.env-prog-acoes{display:flex; justify-content:flex-end; margin-top:14px}

.env-prog-monitor{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
}
.env-prog-lista{
  display:flex; flex-direction:column; gap:12px; margin-top:14px;
}
.env-prog-card{
  border:1px solid var(--line); border-radius:var(--radius-campo);
  background:var(--paper); padding:14px 16px;
}
.env-prog-card.env-prog-concluido{opacity:.78}
.env-prog-card.env-prog-cancelado{opacity:.6}
.env-prog-card-topo{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.env-prog-card-topo b{font:700 13.5px var(--k3-fonte-ui); color:var(--ink)}
.env-prog-status{
  font:600 10.5px var(--k3-fonte-ui); letter-spacing:.04em;
  color:var(--teal); background:var(--teal-soft);
  border-radius:var(--radius-pill); padding:3px 10px; white-space:nowrap;
}
.env-prog-cancelado .env-prog-status{color:var(--warn); background:var(--warn-soft)}
.env-prog-concluido .env-prog-status{color:var(--ok); background:var(--ok-soft)}

.env-prog-barra{
  height:6px; border-radius:999px; background:var(--line); overflow:hidden;
  margin:10px 0;
}
.env-prog-barra span{
  display:block; height:100%; background:var(--teal); border-radius:999px;
  transition:width .4s ease;
}

.env-prog-kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  gap:10px 14px; margin-bottom:10px;
}
.env-prog-kpis div{display:flex; flex-direction:column; gap:2px}
.env-prog-kpis span{
  font:600 9.5px var(--k3-fonte-ui); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-mute);
}
.env-prog-kpis b{font:700 15px var(--k3-fonte-ui); color:var(--ink)}

.env-prog-detalhe{
  display:flex; flex-wrap:wrap; gap:4px 16px;
  font:500 11.5px var(--k3-fonte-ui); color:var(--ink-mute);
}

.env-prog-acoes-card{
  display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;
}
.env-prog-acoes-card .dm-btn-sec{padding:6px 12px; font-size:11.5px}


/* ===================================== cabeçalho de tabela em UMA linha ===
   O problema: "Custódia Brasil", "Teto de premiação" e "Ativado funding"
   quebravam em duas linhas e o cabeçalho ficava com o dobro da altura,
   desalinhado do resto. Encolher a fonte até caber deixaria ilegível.

   A saída é a que uma tabela densa pede: o cabeçalho NÃO quebra, e quando
   a soma das colunas não cabe, a tabela rola de lado — em vez de espremer
   texto. A rolagem já existe (.int-rolagem, .env-rolagem); o que faltava
   era proibir a quebra e dar o `title` para o texto que for cortado.        */
.client-table thead th{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
}
/* A coluna de posição é estreita de propósito, e "Posição" não cabe nela
   deitado. Aqui, e só aqui, a quebra é bem-vinda — mas centrada e miúda,
   para continuar lendo como um rótulo de coluna e não como conteúdo. */
.client-table thead th.row-number{
  white-space:normal;
  text-align:center;
  font-size:10px;
  letter-spacing:.04em;
}
.client-table tbody td.row-number{text-align:center}

/* ============================ o selo "Sem WhatsApp" e o número da conta ===
   São duas CÉLULAS vizinhas — `.env-tel` e `.env-conta`. O selo é um
   retângulo colorido que encosta na borda da sua célula, e o número da
   conta começava logo ali: os dois liam como uma coisa só,
   "Sem WhatsApp17665998".

   A folga vai no selo E na célula da conta. Só no selo não bastaria: a
   coluna pode encolher e o número voltaria a encostar.                      */
.env-tabela .env-sem-zap,
.int-tabela .env-sem-zap{margin-right:14px}
.env-tabela td.env-conta,
.int-tabela td.env-conta{padding-left:16px}
#fi-telefone .env-sem-zap{margin-right:0}

/* ------------------------------------------------- ordem da campanha ===
   Fica junto do "ativa no giro" porque as duas decidem a mesma coisa: se e
   quando a campanha é usada. */
.camp-ordem{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:10px; font:500 12.5px var(--k3-fonte-ui); color:var(--ink-soft)}
.camp-ordem input{width:88px; flex:0 0 auto}
.camp-ordem-nota{flex:1 1 260px; min-width:0; font-size:11.5px;
  line-height:1.45; color:var(--ink-mute)}

/* =============================== ACOMPANHAMENTO DAS MENSAGENS (aba) =======
   Tela das MENSAGENS. Nada aqui é compartilhado com a tela 07 do menu, que é
   a dos FORMULÁRIOS: prefixo `acm-` próprio justamente para que uma mudança
   de estilo numa nunca escorregue para a outra.

   As larguras desta tabela ficam AQUI e só aqui porque `.acm-tabela` é uma
   <table> comum, não uma `.client-table`. As `.client-table` têm quatro
   arquivos declarando `grid-template-columns` com !important, e quem vence é
   o último carregado (painel-fundo.css) — essa briga não vale a pena entrar
   de novo para uma tabela nova. */
.acm-topo{display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:14px}
.acm-intro{margin:4px 0 0; font-size:12.5px; color:var(--ink-mute);
  max-width:52ch; line-height:1.5}
.acm-periodo{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.acm-per{border:0.5px solid var(--line-strong); background:var(--paper);
  color:var(--ink-mute); border-radius:var(--radius-chip); cursor:pointer;
  padding:7px 13px; font:500 12.5px var(--k3-fonte-ui)}
.acm-per:hover{color:var(--ink-soft)}
.acm-per.ativo{background:var(--teal); border-color:var(--teal);
  color:#fff; font-weight:600}
.acm-per:focus-visible{outline:2px solid var(--teal); outline-offset:2px}

.acm-estado{border-radius:var(--radius); padding:11px 16px; font-size:13px;
  margin-bottom:14px; border-left:3px solid transparent}
.acm-estado-ok{background:var(--ok-soft); border-left-color:var(--ok);
  color:var(--ok)}
.acm-estado-parado{background:var(--erro-soft); border-left-color:var(--erro);
  color:var(--erro)}

/* Sao seis desde que o Retorno foi absorvido, e eles tem que caber numa
   linha so.

   O seletor usa o ID do painel de proposito. `.acm-kpis` sozinho PERDE:
   `painel-ds.css` declara `.cd-kpis{grid-template-columns:auto-fit...}` e
   carrega depois deste arquivo — mesma especificidade, ganha o ultimo. Com
   o ID na frente a regra vence em qualquer ordem de carregamento, que e a
   unica forma de isto nao voltar a quebrar quando alguem mexer nos CSS. */
#aba-acompanhamento .acm-kpis{grid-template-columns:repeat(6,1fr)}
@media (max-width:1400px){
  #aba-acompanhamento .acm-kpis{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  #aba-acompanhamento .acm-kpis{grid-template-columns:repeat(2,1fr)}
}
#aba-acompanhamento .acm-kpis .cd-num{font-size:30px}
.acm-nota{margin:0 0 12px; font-size:12px; color:var(--ink-mute);
  line-height:1.5; max-width:70ch}

/* ------------------------------------------------------- ritmo por dia
   Barras de altura proporcional ao dia de maior volume. O número fica em
   cima da barra: sem ele, a barra só diz "mais" ou "menos", e o que importa
   aqui é o número absoluto — foi ele que restringiu a conta. */
.acm-barras{display:flex; align-items:flex-end; gap:10px; min-height:132px;
  overflow-x:auto; padding-bottom:4px}
.acm-barra{flex:0 0 46px; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; height:132px; gap:4px}
.acm-barra-n{font:600 12px var(--k3-fonte-num); color:var(--ink-soft)}
.acm-barra-haste{width:100%; min-height:3px; border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,var(--k3-azul-600),var(--k3-azul))}
.acm-barra-dia{font-size:11px; color:var(--ink-mute); white-space:nowrap}

/* ---------------------------------------------------------- esteiras */
.acm-planos{display:flex; flex-direction:column; gap:12px}
.acm-plano{border:0.5px solid var(--line); border-radius:var(--radius-campo);
  padding:12px 14px; background:var(--papel-fundo)}
.acm-plano-topo{display:flex; align-items:center; justify-content:space-between;
  gap:10px; font-size:13px; color:var(--ink-soft); font-weight:600}
.acm-prog{height:6px; border-radius:999px; background:var(--line);
  margin:9px 0 7px; overflow:hidden}
.acm-prog span{display:block; height:100%; border-radius:999px;
  background:var(--teal)}
.acm-plano-nums{font-size:11.5px; color:var(--ink-mute)}

/* ------------------------------------------------------------- selos */
.acm-selo{display:inline-block; padding:3px 9px; border-radius:var(--radius-pill);
  font:600 11px var(--k3-fonte-ui); white-space:nowrap}
.acm-ok{background:var(--ok-soft); color:var(--ok)}
.acm-erro{background:var(--erro-soft); color:var(--erro)}
.acm-barrado{background:var(--warn-soft); color:var(--warn)}
.acm-selo-ativo{background:var(--ok-soft); color:var(--ok)}
.acm-selo-pausado{background:var(--warn-soft); color:var(--warn)}
.acm-selo-cancelado{background:var(--papel-morto); color:var(--ink-mute)}
.acm-selo-concluido{background:var(--info-soft); color:var(--info)}

/* ------------------------------------------------------------ lista */
.acm-cabeca{gap:14px; flex-wrap:wrap; align-items:flex-end}
.acm-filtros{display:flex; gap:8px; flex-wrap:wrap}
.acm-busca{width:230px}
.acm-sel{width:auto; min-width:168px}

/* A tabela é larga de propósito: tirar coluna aqui é tirar a resposta de
   "para quem foi". Quando não couber, ela rola de lado DENTRO da caixa —
   a página não rola junto. */
.acm-rolagem{overflow-x:auto; margin-top:12px}
.acm-tabela{min-width:1040px}
.acm-tabela th{white-space:nowrap}
.acm-tabela td{vertical-align:top}
.acm-detalhe{font-size:12px; color:var(--ink-mute); line-height:1.45;
  max-width:340px}
.acm-sem-nome{color:var(--ink-mute); font-style:italic}
.acm-rolagem-camp{margin-top:0}
.acm-camp-tabela{min-width:520px}
/* `styles.css` põe table-layout:fixed em TODA table, e com isso as colunas
   são repartidas em partes iguais e o texto longo é cortado dentro da
   célula — foi o que comeu "Último envio". Estas duas tabelas medem as
   próprias colunas pelo conteúdo e rolam de lado quando não couber. */
.acm-camp-tabela,.acm-tabela{table-layout:auto}
.acm-camp-tabela th{white-space:nowrap}

/* --------------------------------------------------- ritmo e limites */
.acm-controles{padding:0}
.acm-controles-cabeca{cursor:pointer; list-style:none; display:flex;
  align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px; font-size:13px; color:var(--ink-soft)}
.acm-controles-cabeca::-webkit-details-marker{display:none}
.acm-controles-cabeca::after{content:"▾"; color:var(--ink-mute); font-size:12px}
.acm-controles[open] .acm-controles-cabeca::after{content:"▴"}
.acm-controles-resumo{font:600 12px var(--k3-fonte-num); color:var(--ink-mute);
  white-space:nowrap}
.acm-controles > *:not(summary){margin-left:18px; margin-right:18px}
.acm-controles > *:last-child{margin-bottom:16px}
.acm-campos{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:12px; margin-bottom:14px}
.acm-campo{display:flex; flex-direction:column; gap:5px;
  font:500 11.5px var(--k3-fonte-ui); color:var(--ink-mute)}
.acm-controles-acoes{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.acm-parar{color:var(--erro); border-color:var(--erro)}
.acm-acao{width:44px; text-align:right}

/* Aviso do teto na esteira programada. Cor de atencao, nao de erro: o
   plano PODE ser criado assim — ele so nao vai terminar na hora prometida,
   porque a governanca segura o excedente. */
.env-prog-aviso{margin:0 0 14px; padding:11px 14px; font-size:12.5px;
  line-height:1.5; border-radius:var(--radius-campo);
  background:var(--warn-soft); color:var(--warn);
  border-left:3px solid var(--warn)}
.env-prog-aviso[hidden]{display:none !important}
.env-prog-aponta{margin-top:18px}
.env-ir-esteira{border:0; background:none; padding:0; cursor:pointer;
  font:600 inherit; color:var(--teal); text-decoration:underline}

/* ==================================================================== */
/* Variações de redação (editor de campanhas)                           */
/*                                                                      */
/* O semáforo tem TRÊS cores, e a do meio é a que mais importa: âmbar   */
/* quer dizer "a máquina não achou defeito, e ainda falta você".        */
/* Pintar de verde o que a máquina não conferiu seria conforto falso —  */
/* "mesmo objetivo?" e "mesmo significado?" não têm resposta mecânica.  */
/* ==================================================================== */
#aba-campanhas .var-sec{
  grid-column:1/-1; margin-top:22px; padding-top:20px;
  border-top:1px solid var(--line);
}
#aba-campanhas .var-sec[hidden]{display:none !important}

.var-protegidos{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px}
.var-protegidos:empty{display:none}
.var-tag{
  padding:4px 9px; border-radius:999px; font:600 12px var(--k3-fonte-ui);
  background:var(--k3-azul-suave, #E8F0FE); color:var(--k3-azul);
  border:1px solid transparent; white-space:nowrap;
}
.var-tag-dinheiro,.var-tag-percentual{background:#FDECF3; color:#B3235A}
.var-tag-data,.var-tag-prazo{background:#FFF4E0; color:#8A5A00}
.var-tag-termo{background:var(--paper); border-color:var(--line-strong); color:var(--ink)}

.var-sug{
  border:1px dashed var(--line-strong); background:transparent;
  color:var(--ink-soft); border-radius:999px; padding:2px 9px;
  font:500 12px var(--k3-fonte-ui); cursor:pointer;
}
.var-sug:hover{border-style:solid; color:var(--ink)}

.var-lista{display:flex; flex-direction:column; gap:14px; margin-top:16px}
.var-item{
  border:1px solid var(--line); border-radius:8px; padding:12px;
  background:var(--paper);
}
.var-topo{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.var-num{font:600 13px var(--k3-fonte-ui); color:var(--ink)}
.var-dist{
  margin-left:auto; font:500 11.5px var(--k3-fonte-ui);
  color:var(--ink-soft); font-variant-numeric:tabular-nums; cursor:help;
}

.var-selo{
  padding:3px 10px; border-radius:999px;
  font:600 11.5px var(--k3-fonte-ui); white-space:nowrap;
}
.var-selo-boa{background:#E4F4EA; color:#1B6B3A}
.var-selo-meia{background:#FFF4E0; color:#8A5A00}
.var-selo-ruim{background:#FDECF3; color:#B3235A}
.var-selo-nova{background:var(--paper); color:var(--ink-soft); border:1px solid var(--line)}

.var-texto{width:100%; resize:vertical; font-size:13.5px; line-height:1.55}

.var-lista-prob,.var-lista-pend{margin:9px 0 0; padding-left:18px}
.var-prob{color:#B3235A; font-size:12.5px; line-height:1.55; margin-bottom:3px}
.var-pend{color:#8A5A00; font-size:12.5px; line-height:1.5}
.var-humano{
  margin-top:10px; padding:10px 12px; border-radius:6px;
  background:var(--warn-soft, #FFF8EC); border-left:3px solid var(--warn, #E0A33E);
}
.var-humano > span{font:600 12.5px var(--k3-fonte-ui); color:var(--ink)}
.var-check{
  display:flex; gap:8px; align-items:flex-start; margin-top:8px;
  font-size:12.5px; line-height:1.5; color:var(--ink); cursor:pointer;
}
.var-check input{margin-top:2px; flex:none}

.var-remover{
  margin-top:9px; border:0; background:transparent; padding:0;
  color:var(--ink-soft); font:500 12px var(--k3-fonte-ui);
  text-decoration:underline; cursor:pointer;
}
.var-remover:hover{color:#B3235A}

.var-pares{display:flex; flex-direction:column; gap:7px; margin-top:12px}
.var-pares:empty{display:none}
.var-aviso{
  padding:9px 12px; border-radius:6px; font-size:12.5px; line-height:1.5;
  background:var(--warn-soft, #FFF8EC); color:var(--ink-soft);
  border-left:3px solid var(--warn, #E0A33E);
}

.var-acoes{display:flex; gap:9px; flex-wrap:wrap}

@media (max-width:760px){
  .var-dist{margin-left:0; width:100%}
  .var-acoes{width:100%}
  .var-acoes .dm-btn{flex:1}
}

/* ---- visão geral das variações, no topo da aba Campanhas ------------ */
/* Cada linha é um botão: a lista existe para levar você à campanha que
   precisa de atenção, então clicar em qualquer ponto dela abre a campanha. */
#aba-campanhas .vg-sec[hidden]{display:none !important}
.vg-lista{display:flex; flex-direction:column; gap:7px; margin-top:14px}

.vg-item{
  display:grid; align-items:center; gap:10px;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) auto auto auto;
  width:100%; text-align:left; cursor:pointer;
  padding:10px 12px; border:1px solid var(--line); border-radius:7px;
  background:var(--paper); font:inherit; color:var(--ink);
  transition:border-color .14s, background .14s;
}
.vg-item:hover{border-color:var(--k3-azul); background:var(--k3-azul-suave,#F3F7FF)}
.vg-item:focus-visible{outline:2px solid var(--k3-azul); outline-offset:2px}

.vg-nome{font:600 13px var(--k3-fonte-ui); overflow:hidden;
         text-overflow:ellipsis; white-space:nowrap}
.vg-meta{font:500 12px var(--k3-fonte-ui); color:var(--ink-soft);
         overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vg-prot{font:500 11.5px var(--k3-fonte-ui); color:var(--ink-soft);
         font-variant-numeric:tabular-nums; white-space:nowrap; cursor:help}
.vg-inativa{
  font:600 11px var(--k3-fonte-ui); color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:2px 8px;
}

@media (max-width:860px){
  .vg-item{grid-template-columns:1fr auto; row-gap:6px}
  .vg-meta{grid-column:1; font-size:11.5px}
  .vg-prot{grid-column:2; justify-self:end}
  .vg-item .var-selo{grid-column:1/-1; justify-self:start}
}