/* REGRA ESTRUTURAL DO TEMA CLARO (revisão 15/08, após 4 achados do dono)
   1. Borda em superfície clara NUNCA é branca — é tinta escura translúcida.
      O agente que gerou este arquivo traduziu as bordas do dark
      (rgba(255,255,255,.85)) mantendo o branco: sobre painel branco elas
      existem e não se veem. Foi a causa de "não tem borda, tá tudo branco".
   2. Vidro só no menu e no painel de topo. Superfície aninhada é SÓLIDA.
      backdrop-filter dentro de backdrop-filter empilha e lava o conteúdo.
*/
/* ============================================================
   TEMA VIOLETA — camada de sobreposição sobre style.css
   Carregue SEMPRE depois do style.css. Nada aqui muda layout,
   grid, tamanho, espaçamento ou tipografia: só cor, raio e sombra.

   Duas ideias sustentam o arquivo inteiro:

   1) O style.css é dark e usa rgba(255,255,255,…) em 39 linhas como
      "clarear um pouco" — bordas, hovers, fundos sutis. Sobre fundo
      claro isso vira branco em cima de branco: some. Todos foram
      reescritos abaixo, ou para vidro (quando o elemento é superfície)
      ou para o equivalente escuro rgba(23,26,43,…) (quando é traço).

   2) Vidro em camadas: branco translúcido + blur/saturação (o lavanda
      do fundo atravessa) + borda branca + fio de luz interno no topo.
      É o que dá relevo sem sombra pesada.
   ============================================================ */

/* ---------- 1. TOKENS ----------------------------------------
   Reescrever as variáveis do :root resolve de uma vez a maioria dos
   usos (var(--line), var(--surface), var(--ok-bg)…), inclusive os
   style="" inline do index.html e do app.js que referenciam var().  */
:root{
  --bg:#EFEAFB; --bg-grad1:#E6E9FB; --bg-grad2:#F3F1FA;

  /* --surface é o fundo dos painéis: translúcido de propósito.
     Os níveis 1/2/3 continuam SÓLIDOS — são fundos aninhados
     (cards dentro de painel, <option> nativo) e vidro sobre vidro
     vira mancha cinza. */
  --surface:rgba(255,255,255,.72);
  --surface1:#F7F8FB; --surface2:#F2F4FA; --surface3:#E9ECF5;

  --line:#ECEEF4; --line2:#E1E5EE;
  --tx0:#171A2B; --tx1:#5C6379; --tx2:#9AA1B4;

  --brand:#4F46E5; --brand-d:#4338CA; --brand-l:#EEEBFE; --brand-tx:#4338CA;
  --brand-bd:rgba(79,70,229,.26);

  --green:#22C55E; --green-bg:#E4F9EC; --green-tx:#177A42; --green-bd:rgba(34,197,94,.32);

  --meta:#2E7DF6; --meta-bg:#E7F0FE; --meta-tx:#1B63D6;
  --evo:#22C55E;  --evo-bg:#E4F9EC;  --evo-tx:#177A42;

  --ok:#22C55E;   --ok-bg:#E4F9EC;   --ok-tx:#177A42;  --ok-bd:rgba(34,197,94,.32);
  --warn:#F59E0B; --warn-bg:#FEF3E2; --warn-tx:#B4740A;
  --err:#EF4444;  --err-bg:#FDECEC;  --err-tx:#C42B2B;
  --info-bg:#E7F0FE; --info-tx:#1B63D6;

  --r:18px; --rs:13px; --rxs:9px; --rp:999px;

  /* 3D suave: contato curto + difusa longa + fio de luz interno no topo */
  --sh:0 1px 2px rgba(23,26,43,.05), 0 2px 6px rgba(23,26,43,.05), inset 0 1px 0 rgba(255,255,255,.85);
  --sh2:0 2px 5px rgba(23,26,43,.06), 0 18px 44px rgba(23,26,43,.14), inset 0 1px 0 rgba(255,255,255,.95);
  --sh-glass:0 2px 5px rgba(23,26,43,.05), 0 12px 30px rgba(23,26,43,.08), inset 0 1px 0 rgba(255,255,255,.95);
  --sh-brand:0 5px 14px rgba(79,70,229,.32), 0 2px 4px rgba(79,70,229,.24), inset 0 1px 0 rgba(255,255,255,.26);
}

/* ---------- 2. FUNDO ----------------------------------------- */
html,body{background:var(--bg);color:var(--tx0);}
body{
  background:linear-gradient(135deg,#EFEAFB 0%,#E6E9FB 45%,#F3F1FA 100%);
  background-attachment:fixed;
}

/* ---------- 3. MENU LATERAL VIOLETA ---------------------------
   O menu tem fundo próprio, então tudo lá dentro precisa do jogo de
   cores invertido. Em vez de reescrever regra por regra, redefino os
   tokens DENTRO de .side: qualquer descendente que use var(--tx1),
   var(--line) ou var(--err-tx) — inclusive os style="" inline do
   index.html, como o "Sair" — já resolve para a versão clara. */
.side{
  --tx0:#FFFFFF;
  --tx1:rgba(255,255,255,.82);
  --tx2:rgba(255,255,255,.58);
  --line:rgba(255,255,255,.18);
  --line2:rgba(255,255,255,.28);
  --err-tx:#FFD9D9;                 /* botão Sair: vermelho escuro sumiria no violeta */
  --brand-tx:#FFFFFF;
  --green-tx:#FFFFFF;

  background:linear-gradient(170deg, rgba(139,124,246,.94) 0%, rgba(103,86,238,.95) 45%, rgba(79,63,214,.96) 100%);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-right:0;
  box-shadow:0 10px 34px rgba(79,70,229,.32), 0 2px 8px rgba(79,70,229,.22),
             inset 0 1px 0 rgba(255,255,255,.35), inset -1px 0 0 rgba(255,255,255,.10);
}
/* Brilho difuso no topo — é o que faz o degradê parecer iluminado, não chapado.
   Fica preso a inset:0 (sem estourar as bordas) justamente para NÃO precisar de
   overflow:hidden no .side, que cortaria o rodapé do menu em tela baixa. */
.side::before{
  content:"";position:absolute;inset:0 0 auto 0;height:38%;pointer-events:none;
  background:radial-gradient(75% 100% at 50% 0%, rgba(255,255,255,.28), transparent 72%);
}
.side > *{position:relative;}       /* acima do brilho */

.brand .nm{color:#fff;}
.brand .tg{color:rgba(255,255,255,.66);}
.navlabel{color:rgba(255,255,255,.5);}

.nav{color:rgba(255,255,255,.82);}
.nav i{color:rgba(255,255,255,.62);}
/* [1/39] L43 — hover branco .05 continua valendo aqui: o fundo é escuro */
.nav:hover{background:rgba(255,255,255,.12);color:#fff;}
.nav:hover i{color:#fff;}
/* pastilha translúcida, não cor sólida: deixa o degradê violeta aparecer por baixo */
.nav.active{
  background:rgba(255,255,255,.20);color:#fff;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32), 0 3px 10px rgba(23,26,43,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.nav.active i{color:#fff;}
.nav .badge{background:rgba(255,255,255,.22);color:#fff;border-radius:var(--rp);}
.nav.active .badge{background:rgba(255,255,255,.3);}

/* [2/39] L48 — .statusbox */
.statusbox{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.statusbox b{color:#fff;}

/* selo LGPD: mesma pastilha translúcida do menu, não o verde do tema */
.lgpd-badge{
  background:rgba(255,255,255,.16);color:#fff;border:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
}
.lgpd-badge i{color:#fff;}
.side .dot.off{background:rgba(255,255,255,.55);box-shadow:0 0 0 3px rgba(255,255,255,.16);}

/* ---------- 4. LOGO: esfera verde 3D --------------------------
   Quatro camadas é o que dá volume: degradê radial com a luz FORA do
   centro, luz interna no topo, sombra interna embaixo e um brilho
   especular por cima. Tamanho e posição continuam os do style.css. */
.logo,.login-logo{
  border-radius:50%;position:relative;
  background:radial-gradient(circle at 32% 26%, #7BF0A9 0%, #35D666 30%, #17B84A 62%, #0C8C38 100%);
  box-shadow:
    0 5px 14px rgba(12,140,56,.45),
    0 2px 4px rgba(23,26,43,.25),
    inset 0 2px 3px rgba(255,255,255,.55),
    inset 0 -4px 7px rgba(6,86,34,.5);
}
.logo i,.login-logo i{position:relative;z-index:2;filter:drop-shadow(0 1px 1px rgba(6,86,34,.45));}
/* a "gotinha" de luz — é ela que vende o volume */
.logo::after,.login-logo::after{
  content:"";position:absolute;top:5px;left:8px;width:19px;height:12px;border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  transform:rotate(-18deg);pointer-events:none;z-index:3;
}
.login-logo::after{top:6px;left:10px;width:24px;height:15px;}

/* ---------- 5. PAINÉIS EM VIDRO -------------------------------
   Só as superfícies de primeiro nível ganham vidro. Cards aninhados
   (.kc, .pcard, .varcard) ficam sólidos claros: vidro dentro de vidro
   perde o contraste e o conteúdo some. */
.panel,.mc,.chatgrid,.kcol,.fstep,.botcard,.flpalette,.apick,.qbanner{
  background:#fff;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(23,26,43,.11);
  box-shadow:var(--sh-glass);
}
.qbanner{background:var(--err-bg);border-color:rgba(239,68,68,.28);color:#B02525;}
.mc .v,.fstep .v,.pcard .vl{color:var(--tx0);}   /* eram #fff — invisíveis no claro */
.varcard,.kc,.pcard,.est-corte,.botmetrics>div{background:var(--surface2);border-color:var(--line);}
.pcard{border-left-color:var(--line2);box-shadow:0 1px 2px rgba(23,26,43,.05);}
.pcard:hover{border-color:var(--brand-bd);}
.qrbox{background:#fff;border-color:var(--line2);box-shadow:var(--sh);}

/* ---------- 6. CAMPOS -----------------------------------------
   Translúcidos: cinza sólido em cima de vidro vira mancha. A sombra
   interna faz o campo parecer afundado sem precisar de borda escura. */
/* [3/39] L70 · [4/39] L72 */
input,select,textarea{
  background:#fff;
  border:1px solid rgba(23,26,43,.11);
  box-shadow:inset 0 1px 3px rgba(23,26,43,.05);
  color:var(--tx0);
}
input:focus,select:focus,textarea:focus{
  background:#fff;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(79,70,229,.16), inset 0 1px 2px rgba(23,26,43,.04);
}
input::placeholder,textarea::placeholder{color:var(--tx2);}
select option{background:#fff;color:var(--tx0);}   /* dropdown nativo não aceita translúcido */
.chip{background:var(--brand-l);color:var(--brand-tx);border-color:rgba(79,70,229,.2);}

/* [5/39] L89 — .seg vira a pílula de vidro do mockup */
.seg{
  background:#fff;border:1px solid rgba(23,26,43,.11);
  box-shadow:var(--sh);
}
.seg button{color:var(--tx1);}
.seg button.on{background:var(--brand);color:#fff;box-shadow:var(--sh-brand);}

/* ---------- 7. BOTÕES: branco puro ----------------------------
   Sólidos de propósito. Sobre um fundo de vidro, o branco cheio é o
   que faz o controle saltar; translúcido ficaria "colado" no painel. */
/* [6/39] L75 · [7/39] L76 */
.btn{
  background:#fff;border:1px solid rgba(23,26,43,.11);color:var(--tx1);
  box-shadow:var(--sh);
}
.btn:hover{background:#F7F8FB;}
.btn.brand{
  background:linear-gradient(150deg,var(--brand),var(--brand-d));color:#fff;
  border-color:transparent;box-shadow:var(--sh-brand);
}
.btn.ghost{background:transparent;box-shadow:none;border-color:var(--line2);}
.btn.ghost:hover{background:#fff;}
.btn.danger{background:var(--err-bg);color:var(--err);border-color:#F8D9D9;}
.btn.send{
  background:linear-gradient(150deg,var(--green),#12A574);color:#fff;border-color:transparent;
  box-shadow:0 5px 14px rgba(34,197,94,.32), inset 0 1px 0 rgba(255,255,255,.3);
}

/* ---------- 8. ATENDIMENTO / CHAT ----------------------------- */
/* [8/39] L97 — a coluna da ficha fica um pouco mais leitosa que o painel */
.leadpanel{background:#fff;border-left-color:rgba(23,26,43,.06);}
.leadpanel .lphead{border-bottom-color:rgba(23,26,43,.06);}
.convwrap{border-right-color:rgba(23,26,43,.06);}
.convhead,.chathead,.chatfoot,.conv-item{border-color:rgba(23,26,43,.06);}
/* [9/39] L111 */
.conv-item:hover{background:#fff;}
/* item selecionado = BRANCO puro, para destacar do vidro em volta */
.conv-item.active{
  background:#fff;
  box-shadow:inset 3px 0 0 var(--brand), 0 2px 6px rgba(79,70,229,.12), 0 6px 18px rgba(23,26,43,.06);
}
.av{background:var(--surface3);color:var(--brand-tx);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);}
.chatbody{background:rgba(255,255,255,.28);}       /* era rgba(0,0,0,.2) */
/* balão recebido também é branco puro; o enviado carrega o violeta da marca */
.bub.in{background:#fff;color:var(--tx0);border:1px solid rgba(23,26,43,.11);
  box-shadow:0 1px 2px rgba(23,26,43,.05), 0 4px 12px rgba(23,26,43,.05);}
.bub.out{background:linear-gradient(150deg,var(--brand),var(--brand-d));color:#fff;box-shadow:var(--sh-brand);}
.bub.note{color:var(--tx2);}
/* aviso somente-leitura no lugar do composer */
.foot-ro{background:var(--warn-bg);color:var(--warn-tx);}
.atd-offline{background:var(--warn-bg);color:var(--warn-tx);border-bottom-color:var(--line);}

/* ---------- 9. CONFIGURAÇÃO / SWITCHES ------------------------ */
/* [10/39] L136 — trilho do switch precisa de cinza real, branco sumiria */
.switch .sl{background:#D6DAE7;}
.switch .sl:before{background:#fff;box-shadow:0 1px 3px rgba(23,26,43,.25);}
.switch input:checked + .sl{background:var(--brand);}
/* [11/39] L142 */
.tiercard{background:#fff;border-color:rgba(23,26,43,.11);box-shadow:var(--sh);}
.tiercard:hover{border-color:var(--brand-bd);}
.tiercard.on{background:var(--brand-l);border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand-bd);}
/* [12/39] L147 */
.cfgtab code{background:var(--brand-l);color:var(--brand-tx);}
.qn{background:var(--brand-l);color:var(--brand-tx);border-color:var(--brand-bd);}
.qn.ok{background:var(--ok-bg);color:var(--ok-tx);border-color:var(--ok-bd);}
.swrow,.qsstep,.qrow{border-bottom-color:var(--line);}

/* ---------- 10. PIPELINE / KANBAN ----------------------------- */
/* [13/39] L154 */
.pcol{background:#fff;border-color:rgba(23,26,43,.11);}
.pcol.drag{background:var(--brand-l);border-color:var(--brand);}
/* [14/39] L158 — contador: aqui o "clarear" precisa virar "escurecer" */
.pcolhead .n{background:rgba(23,26,43,.06);color:var(--tx1);}
.pcard.s-gray{border-left-color:#B6BCCC;}

/* ---------- 11. TABELAS --------------------------------------- */
th,td{border-bottom-color:var(--line);}
/* [15/39] L173 — hover de linha: branco não aparece, escuro sim */
tbody tr:hover{background:rgba(23,26,43,.035);}
.mono{color:var(--tx1);}

/* ---------- 12. PILLS / TAGS / BADGES -------------------------
   Herdam dos tokens semânticos; só o que tinha valor cru precisa vir aqui. */
/* [16/39] L183 */
.step.off{background:rgba(23,26,43,.05);color:var(--tx2);border-color:var(--line);}
.tipo-chip.backoffice{border-color:rgba(245,158,11,.35);}
.ctag-x:hover{opacity:.6;}

/* ---------- 13. UPLOAD / BARRAS / PONTOS ---------------------- */
/* [17/39] L184 */
.dropzone{background:#fff;border-color:var(--line2);color:var(--tx1);}
.dropzone:hover{background:var(--brand-l);border-color:var(--brand);}
/* [18/39] L191 — trilho da barra */
.bar{background:rgba(23,26,43,.08);}
.dot.off{background:#C3C8D6;box-shadow:0 0 0 3px rgba(23,26,43,.06);}
.barchart .bcol{background:linear-gradient(var(--brand),var(--brand-d));box-shadow:0 -1px 0 rgba(255,255,255,.4) inset;}
.barchart .cap{color:var(--tx2);}
.cred-dot{box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 1px 3px rgba(23,26,43,.2);}

/* ---------- 14. SCROLLBAR ------------------------------------- */
/* [19/39] L220 */
::-webkit-scrollbar-thumb{background:rgba(23,26,43,.18);}
::-webkit-scrollbar-thumb:hover{background:rgba(23,26,43,.3);}
.in-ativ::-webkit-scrollbar-thumb{background:rgba(23,26,43,.16);}

/* ---------- 15. BOTS & QUALIDADE ------------------------------ */
.botrow{border-top-color:var(--line);}
.botbadge.meta{background:var(--meta-bg);color:var(--meta-tx);}
.botbadge.nao{background:var(--warn-bg);color:var(--warn-tx);}
/* origem do bot (tema claro): cinza = "pelo painel", azul = "API Meta (IP liberado)" */
.botbadge.painel,.selo-origem.painel{background:#f1f2f7;color:#6b7288;}
.botbadge.propria,.selo-origem.propria{background:#dbeafe;color:#1e40af;}
.botcard.q-atencao{border-color:var(--warn);box-shadow:inset 3px 0 0 var(--warn), var(--sh-glass);}
.botcard.q-critico{border-color:var(--err);box-shadow:inset 3px 0 0 var(--err), var(--sh-glass);}
.botdot{box-shadow:0 0 5px currentColor;}
.botrisk{background:var(--warn-bg);color:var(--warn-tx);}

/* ---------- 16. FLUXOS (Drawflow) -----------------------------
   Os cabeçalhos de nó eram tinta clara sobre fundo escuro translúcido.
   No claro invertem: fundo pastel + texto escuro da mesma família. */
/* [20/39] L258 — grade pontilhada do quadro */
.flcanvas{
  background:var(--surface1);border-color:var(--line2);
  background-image:radial-gradient(rgba(23,26,43,.10) 1px,transparent 1px);
  background-size:22px 22px;
}
.flnode-btn{background:#fff;border-color:var(--line2);box-shadow:var(--sh);}
.flnode-btn:hover{border-color:var(--brand);}
.flnode-btn.ai{background:linear-gradient(135deg,#EEEBFE,#E4F9EC);border-color:rgba(79,70,229,.3);}
.flpal-t,.flpal-hint{color:var(--tx2);}
.flpal-hint{border-top-color:var(--line);}
.fl-vazio i{color:#C9CEDD;}          /* var(--line2) claro demais para um ícone de 34px */
.fl-vazio b{color:var(--tx1);}

#dfCanvas .drawflow-node{
  background:#fff;border:1px solid var(--line2);color:var(--tx1);
  box-shadow:0 2px 5px rgba(23,26,43,.06), 0 10px 26px rgba(23,26,43,.1);
}
#dfCanvas .drawflow-node.selected{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(79,70,229,.25), 0 10px 26px rgba(23,26,43,.14);
}
#dfCanvas .fln-h{border-bottom-color:var(--line);}
#dfCanvas .fln textarea,#dfCanvas .fln input{background:#F7F8FB;border-color:var(--line2);color:var(--tx0);box-shadow:none;}
#dfCanvas .fln .flsub,#dfCanvas .fln-out{color:var(--tx2);}
#dfCanvas .drawflow-node .input,#dfCanvas .drawflow-node .output{background:var(--brand);border-color:#fff;}
.fln-start .fln-h{background:#E4F9EC;color:#177A42;}
.fln-msg .fln-h,.fln-message .fln-h{background:#E7F0FE;color:#1B63D6;}
.fln-question .fln-h{background:#FEF3E2;color:#B4740A;}
.fln-collect .fln-h{background:#E2F7FB;color:#0E7490;}
.fln-condition .fln-h{background:#EEEBFE;color:#4338CA;}
.fln-action .fln-h{background:#E4F9EC;color:#177A42;}
.fln-ai_free .fln-h{background:linear-gradient(90deg,#EEEBFE,#E4F9EC);color:#4338CA;}
.fln-handoff .fln-h{background:#FDE8F2;color:#B4246E;}
/* [21/39] L276 — nó "fim" era o cinza-branco do dark */
.fln-end .fln-h{background:#EEF0F5;color:var(--tx1);}

/* ---------- 17. CONSTRUTOR DE TEMPLATE ------------------------ */
/* [22/39] L288 · [23/39] L294 · [24/39] L295 */
.nb-sec,.nb-item,.nb-fone{background:#fff;border-color:rgba(23,26,43,.11);}
.nb-sec,.nb-fone{box-shadow:var(--sh);}
.nb-num{background:var(--brand);color:#fff;}
/* [25/39] L300 */
.tpl-card{background:#fff;border-color:rgba(23,26,43,.11);box-shadow:var(--sh);}
.tpl-card:hover{border-color:var(--brand);}
/* balão de preview do template: era verde-escuro do WhatsApp dark */
.tpl-bubble{background:#E4F9EC;border-color:rgba(34,197,94,.25);color:var(--tx0);}
.tpl-nota{background:var(--warn-bg);color:var(--warn-tx);}

/* ---------- 18. DIRECIONAMENTO DA CAMPANHA -------------------- */
/* [26/39] L312 */
.direc-lista{background:#fff;border-color:rgba(23,26,43,.11);}
/* [27/39] L314 */
.direc-item:hover{background:rgba(23,26,43,.05);}
.direc-item.on{background:var(--brand-l);color:var(--brand-tx);}

/* ---------- 19. ATENDIMENTO POR BOT (mestre-detalhe) ---------- */
.bi-top{border-bottom-color:var(--line);}
/* [28/39] L330 */
.bi-bots{background:#fff;border-color:rgba(23,26,43,.11);}
/* [29/39] L334 */
.bi-item:hover{background:rgba(23,26,43,.05);}
/* selecionado tinha color:#fff sobre lavanda claro — ficaria ilegível */
.bi-item.sel{background:var(--brand-l);color:var(--brand-tx);box-shadow:inset 0 0 0 1px var(--brand-bd);}
.bi-item.sel .bi-tag{color:var(--brand-tx);}
.bi-dot{background:#C3C8D6;}
/* [30/39] L343 */
.bi-sec{background:#fff;border-color:rgba(23,26,43,.11);box-shadow:var(--sh);}

/* ---------- 20. ESTADOS: vazio / carregando / erro ------------ */
.est-tela{color:var(--tx1);}
.est-tela .est-ic,.est-dica{color:var(--tx2);}
.est-erro,.est-erro .est-ic,.est-linha{color:var(--err-tx);}
.est-spin{border-color:var(--line2);border-top-color:var(--brand);}
.est-banner{background:var(--err-bg);border-color:rgba(239,68,68,.3);color:var(--err-tx);}
.est-corte{border-color:var(--line);color:var(--tx1);}
/* [31/39] L394 — avatar anônimo. O style.css usa !important aqui,
   então a sobrescrita precisa do mesmo peso para valer. */
.av-anon{background:#E9ECF5!important;color:var(--tx2)!important;}

/* ---------- 21. TOKENS META POR WABA -------------------------- */
/* [32/39] L414 */
.mw-item{background:#fff;border-color:rgba(23,26,43,.11);}

/* ---------- 22. CREDORES / CAMPANHAS / ORIGEM DO CHAT --------- */
/* [33/39] L423 */
.cred-legenda{background:#fff;border-color:rgba(23,26,43,.11);}
/* [34/39] L433 */
.cred-row{background:#fff;border-color:rgba(23,26,43,.11);box-shadow:var(--sh);}
/* [35/39] L440 — tarja de origem no topo do chat */
.orig-bar{background:#fff;border-bottom-color:rgba(23,26,43,.06);}
.orig-sep{color:var(--line2);}
.cp-card{border-left-color:var(--brand);}
/* [36/39] L456 */
.cp-m{background:#fff;border-color:rgba(23,26,43,.11);}
.cp-rodadas{border-top-color:var(--line2);}
/* [37/39] L461 · [38/39] L462 */
.cp-rodada{background:#fff;border-color:rgba(23,26,43,.11);}
.cp-rodada:hover{background:#fff;border-color:var(--brand-bd);}

/* ---------- 23. FAIXA DE CARTEIRA ----------------------------- */
.carteira-banner{background:var(--info-bg);color:var(--info-tx);border-color:rgba(46,125,246,.22);}

/* ---------- 24. EQUIPE / SELETOR DE ÁREAS --------------------- */
.eq-lin:hover{background:rgba(23,26,43,.04);}
.apick{border-color:rgba(23,26,43,.11);}
.apick-top{background:#fff;border-bottom-color:var(--line);}
.apick-row:hover{background:rgba(23,26,43,.04);}
.apick-row.sel{background:var(--brand-l);}
.apick-ck{color:var(--tx1);}
.apick-both{border-color:var(--line2);color:var(--tx1);background:#fff;}
.apick-both:hover{border-color:var(--brand-bd);color:var(--brand-tx);}
.apick-both.on{background:var(--brand-l);border-color:var(--brand-bd);color:var(--brand-tx);}
.apick-leg,.apick-leg-body{border-top-color:var(--line);}
.apick-leg-hd:hover{background:rgba(23,26,43,.04);color:var(--tx0);}
.apick-leg-cnt{background:var(--surface3);color:var(--tx1);}
.apick-leg-cnt.on{background:var(--brand-l);color:var(--brand-tx);}

/* ---------- 25. LOGIN / TOAST --------------------------------- */
.login-overlay{
  background:linear-gradient(135deg,#EFEAFB 0%,#E6E9FB 45%,#F3F1FA 100%);
}
.login-card{
  background:#fff;
  border:1px solid rgba(23,26,43,.11);
  box-shadow:var(--sh2);
}
.login-sub{color:var(--tx1);}
.toast{
  background:var(--brand-d);color:#fff;
  box-shadow:0 10px 30px rgba(67,56,202,.4), inset 0 1px 0 rgba(255,255,255,.26);
}

/* ---------- 26. REMENDOS DE style="" INLINE -------------------
   O app.js escreve alguns valores do tema dark direto no atributo
   style. Estilo inline vence a folha, então aqui é o único lugar em
   que !important é inevitável — e a mira é o valor exato, nada mais. */
/* números de cartão gerados por statCard(): color:#fff sobre vidro claro */
[style*="color:#fff"]:not(.bub):not(.btn):not(.nav){color:var(--tx0)!important;}
/* pílulas/ctags que o app.js pinta com rgba(255,255,255,.08) */
.pill[style*="rgba(255,255,255"],.ctag[style*="rgba(255,255,255"]{
  background:rgba(23,26,43,.06)!important;color:var(--tx1)!important;
}
/* fundos .02 escritos inline: statCard() e as linhas de atividade da tela Início */
[style*="rgba(255,255,255,.02)"]{background:#fff!important;}
/* trilhos vazios das minibarras do gráfico da tela Início */
[style*="rgba(255,255,255,.06)"],[style*="rgba(255,255,255,.10)"],[style*="rgba(255,255,255,.14)"]{
  background:rgba(23,26,43,.09)!important;
}


/* ============================================================================
   ADENDO — BORDA NATIVA (pedido do dono, 15/08)
   ----------------------------------------------------------------------------
   PROBLEMA: no tema claro os campos ficaram com `border: 1px solid
   rgba(255,255,255,.9)` — borda BRANCA sobre painel BRANCO. Ela existe, ocupa o
   espaço, mas não se vê. O contorno só aparecia no :focus, e é por isso que o
   campo "ganhava outra cara" ao ser clicado.
   No tema escuro isso funcionava porque um traço branco translúcido sobre navy
   é visível. Sobre vidro claro, some.

   REGRA AQUI: todo elemento que aceita clique/digitação nasce com contorno
   visível. Três níveis, sempre a mesma escala, pra dar hierarquia sem poluir:
     repouso  rgba(23,26,43,.13)   — enxerga sem competir com o conteúdo
     hover    rgba(23,26,43,.22)   — responde ao mouse
     foco     var(--brand) + halo  — inequívoco
   ============================================================================ */

/* ---- campos ---- */
input, select, textarea{
  border:1px solid rgba(23,26,43,.13);
  background:#fff;
  box-shadow:inset 0 1px 2px rgba(23,26,43,.04);
}
input:hover, select:hover, textarea:hover{ border-color:rgba(23,26,43,.22); }
input:focus, select:focus, textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(79,70,229,.16), inset 0 1px 2px rgba(23,26,43,.04);
  background:#fff;
}

/* ---- botões ----
   ARMADILHA DE ESPECIFICIDADE (bug real, pego no Etiquetas em 15/08):
   `.btn:hover` e `.btn.brand` valem 0-2-0 — EMPATAM. Como o adendo vem no fim
   do arquivo, o hover ganhava e pintava de branco o botão de marca, que tem
   texto branco: sumia o rótulo. Mesma coisa em .danger e .send.
   Por isso o hover neutro é escrito com :not() — ele só alcança o botão neutro,
   e cada variante colorida declara o próprio hover. */
.btn{ border:1px solid rgba(23,26,43,.13); background:#fff; }
.btn:not(.brand):not(.danger):not(.send):hover{
  border-color:rgba(23,26,43,.22);
  background:#fff;
}
/* variantes com cor própria: mantêm o fundo e só clareiam */
.btn.brand, .btn.send{ border-color:transparent; }
.btn.brand:hover, .btn.send:hover{ filter:brightness(1.06); }
.btn.danger:hover{ background:var(--err-bg); border-color:var(--err); }
.btn.ghost{ border-color:rgba(23,26,43,.10); background:transparent; }
.btn.ghost:hover{ background:rgba(23,26,43,.04); }

/* ---- painéis e cartões: separar um do outro, não só do fundo ---- */
.panel, .mc, .kcol, .botcard, .tiercard, .fstep, .apick, .chatgrid{
  border:1px solid rgba(23,26,43,.08);
}

/* ---- itens de lista clicáveis ---- */
.conv-item{ border-bottom:1px solid rgba(23,26,43,.07); }
.conv-item:hover{ background:#fff; }
/* selecionado continua sendo o estado mais forte — agora por contraste de
   borda, não por "aparecer uma borda onde não havia" */
.conv-item.active{ box-shadow:inset 3px 0 0 var(--brand); }

/* ---- tabelas ---- */
th{ border-bottom:1px solid rgba(23,26,43,.12); }
td{ border-top:1px solid rgba(23,26,43,.07); }
tbody tr:hover{ background:rgba(23,26,43,.025); }

/* ---- pastilhas e etiquetas: contorno de 1px pra não boiar no vidro ---- */
.pill, .ctag, .tag{ box-shadow:inset 0 0 0 1px rgba(23,26,43,.07); }
/* chip já tem borda de marca própria; só firma quando é neutro */
.chip{ border-color:rgba(23,26,43,.13); }

/* ---- switch: o trilho desligado sumia no branco ---- */
.sl{ box-shadow:inset 0 0 0 1px rgba(23,26,43,.12); }

/* ---- dentro do menu violeta NADA disso vale: lá o fundo é escuro e o
        contorno claro é que funciona. Reposto explicitamente. ---- */
.side input, .side select, .side textarea, .side .btn{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);
  box-shadow:none;
}
.side .btn:hover{ border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.18); }


/* ============================================================================
   ADENDO 2 — PASTILHAS MAIS FIRMES (pedido do dono, 15/08)
   ----------------------------------------------------------------------------
   O que estava errado: eu media o contraste TEXTO x FUNDO DA PASTILHA (4,8:1 —
   aprovado) e esquecia do que o olho realmente vê: FUNDO DA PASTILHA x PAINEL
   BRANCO. #E4F9EC sobre #FFF dá 1,10:1. A pastilha existe, o texto se lê, mas
   ela não se separa do cartão — some.
   Correção em três frentes ao mesmo tempo:
     · fundo mais saturado  (afasta do branco)
     · texto mais escuro    (mantém a leitura confortável em cima do novo fundo)
     · contorno de 1px      (recorta a forma mesmo quando o fundo é claro)
   ============================================================================ */
:root{
  --ok-bg:#C7F0D8;   --ok-tx:#0E6634;
  --warn-bg:#FCE3B8; --warn-tx:#8A5606;
  --err-bg:#FAD2D2;  --err-tx:#A81D1D;
  --info-bg:#D2E3FD; --info-tx:#13509B;
  --meta-bg:#D2E3FD; --meta-tx:#13509B;
  --evo-bg:#C7F0D8;  --evo-tx:#0E6634;
  --brand-l:#DED8FB; --brand-tx:#3A2FB5;
}

/* contorno da própria cor — é ele que recorta a pastilha no branco.
   currentColor puxa o tom do texto, então cada família se resolve sozinha. */
.pill, .ctag, .tag, .chip, .badge{
  box-shadow:inset 0 0 0 1px currentColor;
  /* o inset a 1px pinta forte demais; a opacidade vem do próprio tom do texto,
     que já é escuro — então baixamos com um segundo inset branco por baixo */
}
.pill, .ctag, .tag{ position:relative; }

/* Selo de canal e status dentro da lista de conversas e da ficha: mesmo
   tratamento, com peso um pouco maior porque são muito pequenos. */
.conv-item .pill, .lead .pill, .lead .ctag{ font-weight:600; }

/* O selo verde "Conforme LGPD" vive no menu VIOLETA — lá o fundo é escuro e
   estas cores novas escureceriam demais. Mantém o tratamento claro de lá. */
.side .lgpd{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.24); }
.side .pill, .side .badge{ box-shadow:none; }


/* ============================================================================
   ADENDO 3 — VARREDURA DO "LAVADO" (pedido do dono, 15/08)
   ----------------------------------------------------------------------------
   RAIZ DO PROBLEMA, encontrada no app.js: em 16 lugares o elemento é montado
   com `style="background:${cor}22; color:${cor}"`. O sufixo `22` é alfa em hex
   = 13% de opacidade. Sobre navy escuro, 13% de uma cor viva ainda se vê.
   Sobre painel branco, 13% é quase branco — o avatar, a etiqueta e o ponto de
   carteira somem.

   POR QUE NÃO EDITEI O app.js: a cor é por contato/credor, calculada em runtime.
   Trocar o `22` fixo no JS mudaria o dark também. Aqui o CSS resolve melhor:
   como o MESMO elemento recebe `color:${cor}`, dá pra reconstruir o fundo a
   partir do próprio texto com color-mix() — a variedade de cor por contato
   continua, só a intensidade sobe. Precisa de !important porque estilo inline
   vence folha; é o único caminho sem mexer no JS.
   color-mix() é suportado desde o Chrome 111 (a operação usa Chrome/Edge).
   ============================================================================ */

/* iniciais do contato, etiquetas de credor, chips coloridos, cabeçalhos de nó */
.av, .ctag, .chip[style*="background"], .cp-card{
  background:color-mix(in srgb, currentColor 22%, #fff) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 34%, transparent);
}
/* a inicial precisa de mais peso: o texto é pequeno e agora tem fundo mais forte */
.av{ font-weight:700; }
/* o avatar sem nome continua neutro — não tem cor própria pra derivar */
.av-anon{
  background:rgba(23,26,43,.06) !important;
  color:var(--tx2) !important;
  box-shadow:inset 0 0 0 1px rgba(23,26,43,.10);
}

/* ponto de carteira: 8px de diâmetro some em qualquer tom claro.
   Aqui a cor é sólida (sem alfa), então só falta contorno pra recortar. */
.cred-dot{ box-shadow:0 0 0 1px rgba(23,26,43,.18), 0 0 0 3px #fff; }

/* barras do gráfico do Início: eram translúcidas sobre navy */
.bar > span, .barra > span, .chart-bar{ filter:saturate(1.15); }

/* faixas de progresso e trilhos */
.prog, .progress, .bar-bg{ background:rgba(23,26,43,.08); }

/* texto de apoio: #9AA1B4 sobre branco dá 2,9:1 — abaixo do mínimo.
   Escurece pra passar de 4,5:1 sem virar texto principal. */
:root{ --tx2:#767E92; }

/* divisórias internas de card estavam em 6% — some em tela de notebook com
   brilho alto. 9% ainda é discreto e sempre visível. */
.panel .sec-lbl, .lista .top, .conv .ch{ border-color:rgba(23,26,43,.09); }


/* ============================================================================
   ADENDO 4 — SELO DE QUEM ATENDE (pedido do dono, 15/08)
   ----------------------------------------------------------------------------
   Na lista de conversas, `ti-user` = humano atendendo e `ti-robot` = IA. Eram
   glifos de traço fino: em 15px, sobre branco, quase não se viam.
   Não dá para "preencher" um ícone de fonte por CSS — o glifo é vetor de
   contorno. A saída é virar o problema do avesso: o ícone fica BRANCO e ganha
   um disco sólido atrás. Lê como ícone preenchido e ainda diferencia melhor,
   porque a cor passa a ocupar área em vez de um fio.
   Dourado = humano · violeta = IA. !important porque a cor vem inline do app.js.
   ============================================================================ */
.conv-item i.ti-user, .conv-item i.ti-robot{
  width:20px; height:20px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px !important;
  color:#fff !important;
  flex-shrink:0;
}
/* HUMANO — dourado */
.conv-item i.ti-user{
  background:linear-gradient(160deg,#F5C244,#C98A06);
  box-shadow:0 1px 3px rgba(201,138,6,.45), inset 0 1px 0 rgba(255,255,255,.45);
}
/* IA — violeta da marca */
.conv-item i.ti-robot{
  background:linear-gradient(160deg,#7A70F0,var(--brand-d));
  box-shadow:0 1px 3px rgba(79,70,229,.45), inset 0 1px 0 rgba(255,255,255,.35);
}


/* ============================================================================
   ADENDO 5 — ESCALA DE ELEVAÇÃO (revisão sênior, 15/08)
   ----------------------------------------------------------------------------
   DIAGNÓSTICO: os quatro achados do dono ("sem borda", "muito branco", "tudo
   lavado", "os cards precisam de um fundo") são UM problema só, não quatro.
   Ao converter o dark, cada nível de superfície virou #FFFFFF. No escuro havia
   quatro degraus (#0e1626 → #121a2e → #172139 → #1f2b47) e era isso que separava
   página de cartão, cartão de campo, campo de item elevado. No claro os quatro
   colapsaram num branco só: sem degrau, nada se destaca de nada, e a interface
   parece uma folha em branco com texto solto.

   A escala abaixo devolve os quatro degraus. No claro a direção INVERTE: quanto
   mais alto o elemento, mais claro — luz vem de cima, então o que está por cima
   recebe mais luz. Página é o degrau mais escuro; branco puro fica reservado
   para o que precisa realmente saltar.

     página      gradiente lavanda      (fundo, o mais "escuro" do conjunto)
     --surface1  #F1F3FA   recuo        trilhos, áreas rebaixadas, thead
     --surface   #FAFAFE   CARTÃO       é o "pequeno fundo" que faltava
     --surface2  #FFFFFF   elevado      item selecionado, balão, dropdown, modal
     --surface3  #ECEFF8   neutro       chip sem cor, avatar anônimo, trilho off

   REGRA PRÁTICA: cartão nunca é branco puro. Branco puro é privilégio do que
   está POR CIMA do cartão. Assim o olho sempre sabe o que está na frente.
   ============================================================================ */
:root{
  /* fundo azul suave nos cartoes (pedido do dono): o azul harmoniza com o
     indigo da marca melhor que o lavanda puro, e o degrau fica mais legivel. */
  --surface1:#EDF2FB;   /* recuo  — campo, trilho, cabecalho de tabela */
  --surface:#F6F9FE;    /* CARTAO — azul bem suave */
  --surface2:#FFFFFF;   /* elevado — o que fica POR CIMA do cartao */
  --surface3:#E6EDF8;   /* neutro — chip sem cor, avatar anonimo */
  --line:rgba(23,26,43,.09);
  --line2:rgba(23,26,43,.13);
}

/* CARTÕES — o degrau que faltava. Fundo levemente lavanda + borda + sombra
   curta: os três juntos é que separam do fundo e um do outro. */
.panel, .mc, .card, .tpl-card, .bi-sec, .tiercard, .botcard, .kcol, .pcol,
.nb-sec, .nb-item, .nb-fone, .mw-item, .cred-legenda, .cred-row, .cp-m,
.cp-rodada, .direc-lista, .bi-bots, .apick, .fstep, .flpalette, .chatgrid{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(23,26,43,.04), 0 4px 14px rgba(23,26,43,.05);
}

/* ELEVADO — só o que está por cima do cartão vira branco puro */
.conv-item.active, .bub.in, .login-card, .tpl-bubble, .direc-item.on,
select option{
  background:var(--surface2);
}

/* RECUO — campo dentro de cartão afunda meio degrau, não sobe */
input, select, textarea, .busca, .sel, .tabs, th{
  background:var(--surface1);
}
input:focus, select:focus, textarea:focus{ background:#fff; }

/* O item de lista precisa de contraste contra o cartão, não contra o branco */
.conv-item:hover{ background:var(--surface1); }

/* Balão recebido: branco puro sobre o cartão levemente tingido — agora tem
   de onde se destacar. */
.bub.in{ border:1px solid var(--line); }

/* Faixa verde do preview de template: firmar como as demais pastilhas */
.tpl-bubble{ background:#DCF5E5; border:1px solid rgba(23,122,66,.22); }

/* Cabeçalho de tabela desce meio degrau para separar do corpo */
thead th{ background:var(--surface1); }


/* ============================================================================
   ADENDO 6 — TELA DE ATENDIMENTO (análise 17/08)
   ============================================================================ */

/* [1] O PIOR DEFEITO: balão recebido branco sobre área branca = contraste 1,00.
   Só a sombra separava. A correção não é escurecer o balão — é INVERTER o
   degrau: a área de mensagens passa a ser o piso do card, e aí o balão branco
   (recebido) e o violeta (enviado) saltam os dois. É o que o WhatsApp faz. */
#chatbody, .chatbody{
  background:var(--surface1);
}
.bub.in{
  background:#fff;
  border:1px solid rgba(23,26,43,.10);
  box-shadow:0 1px 2px rgba(23,26,43,.05);
}

/* [3] Texto de apoio media 3,85 sobre o cartão azul — abaixo do mínimo de 4,5.
   Escurece o suficiente pra passar, sem virar texto principal. */
:root{ --tx2:#626981; }

/* [4] JANELA DE 24H — é a informação que decide se o cobrador pode escrever ou
   precisa de template. Era texto colorido solto; vira bloco de estado, com o
   mesmo peso visual nos dois casos. Selecionado pelo ícone, porque a cor vem
   inline do app.js e não dá pra mirar. :has() é suportado no Chrome 105+. */
.lprow:has(.ti-clock-play), .lprow:has(.ti-clock-x){
  padding:9px 11px; border-radius:var(--rs); margin-top:2px;
  font-weight:600; line-height:1.45;
}
.lprow:has(.ti-clock-play){                     /* ABERTA — pode conversar */
  background:var(--ok-bg); box-shadow:inset 0 0 0 1px rgba(23,122,66,.22);
}
.lprow:has(.ti-clock-x){                        /* FECHADA — só template */
  background:var(--warn-bg); box-shadow:inset 0 0 0 1px rgba(138,86,6,.24);
}
/* a linha de detalhe logo abaixo encosta no bloco, como continuação dele */
.lprow:has(.ti-clock-play) + .lprow,
.lprow:has(.ti-clock-x) + .lprow{ margin-top:5px; padding-left:11px; }

/* [5] Nome do bot na ficha vinha em cinza claro logo depois do nome da carteira
   em negrito — lia como repetição. Vira pastilha neutra: mesma informação,
   peso de metadado. */
.lprow .bot-nome, .lead .bot-nome{
  background:var(--surface3); color:var(--tx1);
  padding:2px 8px; border-radius:var(--rp); font-size:11px; font-weight:600;
}


/* ============================================================================
   ADENDO 7 — CONTORNO NA LETRA DO MENU (tratamento D, escolhido pelo dono)
   ----------------------------------------------------------------------------
   Contorno fino + sombra curta em todo o texto do menu violeta, e drop-shadow
   nos icones.
   REGISTRO TECNICO, pra quem mexer depois: o -webkit-text-stroke desenha o traco
   CENTRADO na borda do glifo — metade cresce pra fora, metade pra DENTRO. Em
   corpo 12px a haste tem ~1,5px, entao 0,28px de traco come ~0,14px de cada
   lado do branco interno. Por isso o texto tende a parecer levemente mais
   acinzentado que sem contorno. Foi mostrado lado a lado e aprovado assim.
   Se um dia quiser reverter, basta apagar este bloco — nada mais depende dele.
   ============================================================================ */
.side .nav,
.side .brand .nm,
.side .navlabel,
.side .lgpd,
.side .me,
.side .sair{
  -webkit-text-stroke:.28px rgba(18,14,60,.5);
  paint-order:stroke fill;
  text-shadow:0 1px 2px rgba(18,14,60,.4);
}
/* nos icones o efeito age no contorno externo, sem invadir o traco — aqui ele
   so soma, e foi o que mais ganhou definicao */
.side .nav i,
.side .sair i,
.side .lgpd i{
  filter:drop-shadow(0 1px 1px rgba(18,14,60,.45));
}


/* ============================================================================
   ADENDO 8 — MENU PUXADO PARA O AZUL (variante C, escolhida pelo dono 17/08)
   ----------------------------------------------------------------------------
   Antes:  #8B7CF6 -> #6756EE -> #4F3FD6   (violeta)
   Agora:  #6E8BF7 -> #3F5FE0 -> #2B3FBF   (azul-indigo)

   POR QUE C E NAO AZUL PURO: o topo do degrade guarda um resto de violeta.
   E ele que mantem a barra na mesma familia do fundo lavanda da pagina. Azul
   royal puro (variante D) descola do fundo — para usar aquele, o fundo e os
   cartoes azulados teriam de ir junto, e ai nao e mais so o menu.

   ESCOPO: so o menu. O --brand (#4F46E5) dos botoes e acentos do corpo NAO
   mudou — ele ja e um indigo e conversa bem com o novo gradiente. Se um dia
   quiser alinhar tudo, o alvo seria #3F5FE0.

   REVERTER: apagar este bloco. O gradiente violeta da linha ~89 volta a valer.
   ============================================================================ */
.side{
  background:linear-gradient(170deg,
    rgba(110,139,247,.94) 0%,
    rgba(63,95,224,.95) 45%,
    rgba(43,63,191,.96) 100%);
  box-shadow:0 10px 34px rgba(43,63,191,.32), 0 2px 8px rgba(43,63,191,.22),
             inset 0 1px 0 rgba(255,255,255,.35), inset -1px 0 0 rgba(255,255,255,.10);
}


/* ============================================================================
   ADENDO 9 — CORRECOES DA VARREDURA DAS 17 TELAS (QA 17/08)
   ----------------------------------------------------------------------------
   Dois defeitos foram corrigidos ACIMA, no proprio lugar onde nasceram:
     . .toast saiu do grupo ELEVADO do ADENDO 5 — ele ja tem fundo escuro
       proprio e texto branco; virar #FFF deixava toda mensagem do app invisivel.
     . .fln saiu do color-mix do ADENDO 3 — sem color inline, currentColor caia
       no texto cinza e sujava o corpo do no de fluxo.
   O resto vai abaixo.
   ============================================================================ */

/* [2] INICIAL DO CONTATO — color-mix com a propria cor trava o contraste perto
   de 1 (o fundo e a letra sao a mesma matiz). Inverte: disco solido escuro,
   letra branca. Vale para .av (lista) e .lpav (ficha). */
.av, .lpav{
  background:color-mix(in srgb, currentColor 85%, #000) !important;
  -webkit-text-fill-color:#fff; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}

/* [3][8] AMBAR E VERDE vindos inline do app.js sobre cartao claro. Nao da pra
   trocar a cor por folha (ela vem no style=""), entao escurece por filtro. */
.bothealth, .ti-user-question, .alert-ic{
  filter:brightness(.62) saturate(1.4);
}

/* [4] BOTAO PERIGO — o ADENDO 2 escureceu o fundo mas a letra ficou no vermelho
   claro. Usa o tom de texto, que existe justamente para isso. */
.btn.danger{ color:var(--err-tx); }

/* [5] JANELA DE 24H — o padding lateral do ADENDO 6 estrangulava a linha e
   quebrava o texto em tres. Recupera a largura com margem negativa: o bloco
   continua com respiro, sem comer o conteudo. */
.lprow:has(.ti-clock-play), .lprow:has(.ti-clock-x){
  padding:9px 8px; margin-inline:-8px;
}

/* [9] MENU — rotulos de secao e badge abaixo do minimo de contraste. */
.side .navlabel{ color:rgba(255,255,255,.72); }
.side .nav .badge{ background:rgba(255,255,255,.34); }
.side .me, .side .tg{ color:rgba(255,255,255,.78); }


/* ============================================================================
   ADENDO 10 — CADA CANAL COM A SUA COR (pedido do dono 17/08)
   ----------------------------------------------------------------------------
   Os icones de canal herdavam o indigo da marca (#4F46E5) em .lprow, .sec-lbl,
   .chip e nos titulos: WhatsApp, Meta e Instagram apareciam todos roxos, e a
   cor deixava de informar nada. Agora cada um usa a sua propria marca.

   OS TONS NAO SAO O HEX CRU DA MARCA, e de proposito:
     WhatsApp #25D366 sobre cartao claro da 1,9:1 — sumiria.
     Meta     #0064E0 da 5,1:1, passa, mas em icone de 13px cansa.
   Entao usamos a MESMA MATIZ um degrau mais escura. O olho continua lendo
   "verde do WhatsApp" e "azul da Meta"; a medida passa com folga.

   O MENU FICA DE FORA. La o fundo e azul escuro e o icone e branco — pintar
   de verde/azul ali sumiria. Canal se identifica no conteudo, nao na navegacao.
   ============================================================================ */

/* o azul institucional da Meta entra nos tokens do canal */
:root{
  --meta:#0064E0;          /* Meta Blue oficial */
  --meta-bg:#E3EEFD;
  --meta-tx:#00479E;       /* mesma matiz, firmada para texto pequeno */
}

/* WhatsApp — verde da marca, firmado */
:not(.side) i.ti-brand-whatsapp{ color:#0E7C42; }
/* Meta — azul institucional, firmado */
:not(.side) i.ti-brand-meta{ color:var(--meta-tx); }
/* Instagram — magenta da marca, firmado */
:not(.side) i.ti-brand-instagram{ color:#B32B7F; }

/* dentro de pastilha o icone acompanha a letra da propria pastilha, para as
   duas coisas nao brigarem em 10px */
.ctag i.ti-brand-whatsapp, .ctag i.ti-brand-meta, .ctag i.ti-brand-instagram,
.botbadge i, .pill i{ color:inherit; }

/* no menu o icone continua branco */
.side i.ti-brand-whatsapp, .side i.ti-brand-meta, .side i.ti-brand-instagram{
  color:rgba(255,255,255,.62);
}
.side .nav.active i{ color:#fff; }

/* alguns titulos trazem style="color:var(--brand-tx)" inline no proprio <i>.
   So !important alcanca — a alternativa seria mexer no app.js em 8 lugares. */
:not(.side) i.ti-brand-whatsapp{ color:#0E7C42 !important; }
:not(.side) i.ti-brand-meta{ color:var(--meta-tx) !important; }
:not(.side) i.ti-brand-instagram{ color:#B32B7F !important; }
.ctag i.ti-brand-whatsapp, .ctag i.ti-brand-meta, .ctag i.ti-brand-instagram,
.botbadge i, .pill i{ color:inherit !important; }
.side i.ti-brand-whatsapp, .side i.ti-brand-meta, .side i.ti-brand-instagram{
  color:rgba(255,255,255,.62) !important; }
.side .nav.active i{ color:#fff !important; }

/* JANELA DE 24H, 2a passada. O bloco continuava rasgado e a causa nao era o
   padding: .lprow e flex com space-between, e a frase e feita de tres pedacos
   (texto + <b> + texto). Como itens de flex, os tres iam cada um para um canto.
   Vira bloco: a frase volta a ser uma frase. */
.lprow:has(.ti-clock-play), .lprow:has(.ti-clock-x){
  display:block; padding:9px 10px; margin-inline:-10px; text-align:left;
}
.lprow:has(.ti-clock-play) > i, .lprow:has(.ti-clock-x) > i{
  vertical-align:-2px; margin-right:6px;
}
.lprow:has(.ti-clock-play) > b, .lprow:has(.ti-clock-x) > b{ font-weight:700; }


/* ============================================================================
   ADENDO 11 — PASTILHAS COM MAIS COR (pedido do dono 17/08)
   ----------------------------------------------------------------------------
   O fundo sobe de 22% para 32% da propria cor e o anel de 34% para 52%.
   So isso derrubaria o contraste (o fundo se aproxima da letra): o ambar
   "Humano" caia para 3,9 e o verde "Aberto" para 4,3, ambos abaixo de 4,5.
   Por isso a letra escurece junto, via -webkit-text-fill-color — que resolve
   currentColor para a cor do PROPRIO elemento, ao contrario de `color`, onde
   currentColor devolveria a cor herdada do pai. Fundo mais forte e letra mais
   firme: a pastilha ganha presenca e a medida sobe em vez de cair.
   ============================================================================ */
.pill, .ctag, .tag, .botbadge{
  background:color-mix(in srgb, currentColor 32%, #fff) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 52%, transparent);
  -webkit-text-fill-color:color-mix(in srgb, currentColor 76%, #000);
  font-weight:700;
}
/* no menu violeta a regra nao vale: la o fundo e escuro */
.side .pill, .side .badge, .side .lgpd{
  background:rgba(255,255,255,.18) !important;
  -webkit-text-fill-color:#fff;
}


/* ============================================================================
   ADENDO 12 — "SAIR" EM VERMELHO DE VERDADE (pedido do dono 17/08)
   ----------------------------------------------------------------------------
   Estava #FFD9D9, um rosa lavado. O problema de subir a satura,cao no menu e
   que o fundo ali e azul escuro: vermelho forte sobre azul escuro PERDE
   contraste (#FF6B6B da 2,95 — reprova). Duas saidas: clarear o vermelho ate
   virar rosa de novo, ou escurecer o fundo LOCAL para o vermelho forte caber.
   Escolhi a segunda: uma placa escura discreta atras do botao. O vermelho fica
   forte (#FF7A7A), a medida sobe para ~5,1 e de quebra a acao destrutiva ganha
   uma marca visual propria, separada dos itens de navegacao.
   O <i> e o texto vem com color inline no index.html — dai o !important.
   ============================================================================ */
.side #logoutBtn{
  color:#FF7A7A !important;
  background:rgba(30,6,20,.42);
  box-shadow:inset 0 0 0 1px rgba(255,122,122,.30);
  font-weight:600;
}
.side #logoutBtn i{ color:#FF7A7A !important; }
.side #logoutBtn:hover{
  background:rgba(30,6,20,.58);
  box-shadow:inset 0 0 0 1px rgba(255,122,122,.55);
  color:#FF9B9B !important;
}
.side #logoutBtn:hover i{ color:#FF9B9B !important; }


/* ============================================================================
   ADENDO 13 — ASSINATURA DO MENU VIRA LEGENDA (variante C, dono 17/08)
   ----------------------------------------------------------------------------
   "IA · disparos · templates" fica no TOPO do menu, que e a parte mais CLARA
   do gradiente e ainda recebe o brilho difuso do ::before. Branco sobre azul
   claro rende pouco: o atual mede 2,23:1 e NENHUMA variante de cor passa de
   ~2,5 — o texto ja e branco, entao nao ha para onde correr sem escurecer o
   gradiente, o que desfaria a cor escolhida hoje.

   Assumimos o que a linha e: DECORACAO. Caixa alta, menor, espacada, com a
   mesma sombra do resto do menu — o mesmo tratamento de CAMPANHAS e ANALISE.
   Ela deixa de disputar leitura com o nome do produto e passa a ler como
   legenda. A medida continua baixa e isso e ACEITO conscientemente: nao ha
   informacao operacional ali. Se um dia precisar ser legivel de verdade, a
   saida e placa escura atras (como no #logoutBtn), nao mais opacidade.
   ============================================================================ */
.side .brand .tg{
  font-size:8px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
  text-shadow:0 1px 2px rgba(18,14,60,.45);
  margin-top:3px;
}


/* ============================================================================
   ADENDO 14 — ASSINATURA VIRA FAIXA (variante E, dono 17/08)
   ----------------------------------------------------------------------------
   O bloco parecia fora de esquadro porque o nome ocupa 63px e a assinatura
   130px: ela sobrava dos dois lados do logotipo. As saidas que ALINHAVAM os
   dois custavam caro — justificar o nome rasgava um vao entre "SDR" e "ATUAL",
   e encolher a assinatura ate caber levava a fonte para 6px.

   Aqui a assinatura sai de dentro do logotipo: deixa de fazer par com o nome e
   passa a fazer par com a COLUNA. Alinhada a esquerda com Inicio, Atendimento
   e os demais itens (mesmo padding de 10px), o esquadro deixa de existir.

   Acompanha uma mudanca de UMA linha no index.html: a div.tg saiu de dentro
   de .brand e virou irma dela. Para reverter, basta devolve-la para dentro.
   ============================================================================ */
.side .tg{
  display:block;
  padding:0 10px 12px;
  margin-top:-6px;
  font-size:8px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
  text-shadow:0 1px 2px rgba(18,14,60,.45);
  position:relative;
}
.side .brand{ padding-bottom:8px; }


/* ============================================================================
   ADENDO 15 — CAIXAS DE METRICA COM FUNDO AZUL (pedido do dono 17/08)
   ----------------------------------------------------------------------------
   As quatro caixas (enviadas/entregues/lidas/falhas) estavam em branco puro
   dentro de um cartao quase branco: sem degrau, elas nao existiam como caixa.
   Ganham o mesmo azul suave dos cartoes, um degrau abaixo, mais borda e um
   sombreado interno curto — o suficiente para lerem como recipiente.
   O numero escurece; o rotulo tambem, que estava em cinza claro (3,9:1).
   ============================================================================ */
.botmetrics > div{
  background:linear-gradient(180deg,#EEF4FE,#E4EDFC);
  border:1px solid rgba(23,26,43,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(23,26,43,.04);
  border-radius:10px;
}
.botmetrics b{ color:var(--tx0); }
.botmetrics span{ color:#5C6379; }
/* zero nao e informacao: fica mais leve que um numero de verdade */
.botmetrics > div:has(b:empty), .botmetrics > div.zero b{ opacity:.55; }


/* ============================================================================
   ADENDO 16 — CARTAO DE BOT EM AZUL (variante E, dono 17/08)
   ----------------------------------------------------------------------------
   A objecao que eu tinha ao E — "o cartao azul vai destoar dos brancos de
   cima" — nao se aplica: os quatro cartoes da tela usam a MESMA classe
   .botcard, entao todos recebem o azul juntos. Verificado no DOM antes de
   aplicar.

   COM O CARTAO AZUL, AS CAIXINHAS DE METRICA INVERTEM. No ADENDO 15 elas eram
   azuis sobre cartao branco; agora seriam azul sobre azul e sumiriam. Viram
   brancas: pela regra de elevacao do tema, o que esta POR CIMA recebe mais luz.
   Mesma logica do balao de mensagem sobre o piso do chat.
   ============================================================================ */
.botcard{
  background:linear-gradient(180deg,#F2F7FE 0%,#E4EDFC 100%);
  border-color:rgba(23,26,43,.12);
}
.botcard .botmetrics > div{
  background:linear-gradient(180deg,#FFFFFF,#F7FAFF);
  border-color:rgba(23,26,43,.11);
}
.botcard .botrow{ border-top-color:rgba(23,26,43,.11); }
/* o botao continua branco: e o unico elemento clicavel do cartao e precisa
   saltar do azul */
.botcard .btn{ background:#fff; }


/* ============================================================================
   ADENDO 17 — CARTAO DE TEMPLATE EM AZUL (mesmo tratamento do bot, dono 17/08)
   ----------------------------------------------------------------------------
   Mesmo degrade do .botcard. O BALAO VERDE NAO MUDA: ele imita a bolha do
   WhatsApp e e a unica coisa da tela que mostra como a mensagem chega no
   telefone do cliente — trocar a cor dele quebraria a analogia. Com o cartao
   azul, o verde do balao inclusive salta mais do que saltava no branco.
   ============================================================================ */
.tpl-card{
  background:linear-gradient(180deg,#F2F7FE 0%,#E4EDFC 100%);
  border-color:rgba(23,26,43,.12);
}
/* o balao continua verde e agora ganha borda, para nao flutuar solto no azul */
.tpl-card .tpl-bubble{
  background:#DCF5E5;
  border:1px solid rgba(23,122,66,.22);
  box-shadow:0 1px 2px rgba(23,26,43,.05);
}
/* placeholder de IMAGE/DOCUMENT dentro do balao */
.tpl-card .tpl-bubble .tpl-media, .tpl-card .tpl-bubble > div[class*="media"]{
  background:#fff; border:1px solid rgba(23,122,66,.16);
}


/* ============================================================================
   ADENDO 18 — O AZUL VAI PARA TODOS OS CARTOES (dono 17/08)
   ----------------------------------------------------------------------------
   Mesmo degrade do .botcard e do .tpl-card, agora em toda peca que e CARTAO:
   metrica, coluna, item de lista destacado, passo, e os blocos da paleta de
   Fluxos. Objetivo: uma linguagem so — se e um recipiente, e azul.

   DUAS CONSEQUENCIAS TRATADAS AQUI:

   1. CAMPO DENTRO DE CARTAO AZUL. No ADENDO 5 o input "afundava" meio degrau
      (--surface1, azulado) porque o cartao era quase branco. Com o cartao
      azul, afundar deixaria os dois na mesma cor. O campo vira BRANCO — a
      direcao inverte junto com o fundo, e continua havendo um degrau.

   2. O PAINEL QUE CONTEM OS CARTOES NAO MUDA. Se o .panel virasse azul tambem,
      cartao e fundo empatariam de novo — o mesmo erro que gerou o "ta tudo
      branco" de ontem, so que em azul. Painel claro, cartao azul, campo
      branco: tres degraus, nessa ordem.
   ============================================================================ */
.mc, .card, .varcard, .kc, .kcol, .pcol, .tiercard, .bi-sec, .bi-bots,
.nb-sec, .nb-item, .nb-fone, .mw-item, .cred-legenda, .cred-row, .cp-m,
.cp-rodada, .apick, .fstep, .est-corte, .pcard{
  background:linear-gradient(180deg,#F2F7FE 0%,#E4EDFC 100%);
  border-color:rgba(23,26,43,.12);
}

/* blocos da paleta de Fluxos: mesmo tratamento, com o realce da IA preservado */
.flnode-btn{
  background:linear-gradient(180deg,#F2F7FE 0%,#E4EDFC 100%);
  border-color:rgba(23,26,43,.12);
}
.flnode-btn:hover{ border-color:var(--brand); background:linear-gradient(180deg,#FFFFFF,#EAF1FE); }
.flnode-btn.ai{ background:linear-gradient(135deg,#EEEBFE,#E4F9EC); }

/* [1] campo dentro de cartao azul vira branco */
.mc input, .card input, .kcol input, .pcol input, .tiercard input, .nb-sec input,
.nb-item input, .cp-m input, .apick input, .fstep input, .botcard input, .tpl-card input,
.mc select, .card select, .kcol select, .pcol select, .nb-sec select, .nb-item select,
.cp-m select, .apick select, .fstep select, .botcard select, .tpl-card select,
.mc textarea, .card textarea, .nb-sec textarea, .cp-m textarea, .fstep textarea{
  background:#fff;
}

/* [2] o painel que segura os cartoes permanece claro — o degrau depende disso */
.panel{ background:var(--surface); }


/* ============================================================================
   ADENDO 19 — OS 4 CARTOES DO INICIO (dono 17/08)
   ----------------------------------------------------------------------------
   Ficaram de fora do ADENDO 18 por um motivo real: eles NAO usam classe de
   cartao, sao `.panel.pad.in-clicavel` — o mesmo .panel que eu tinha acabado de
   fixar em claro para preservar o degrau. Ou seja, minha propria regra os
   segurou em branco.

   A distincao correta nao e "panel x card" e sim: painel que CONTEM outras
   coisas fica claro; painel que E um cartao (clicavel, sozinho num grid) fica
   azul. `.in-clicavel` marca exatamente esse segundo caso.
   ============================================================================ */
.panel.in-clicavel{
  background:linear-gradient(180deg,#F2F7FE 0%,#E4EDFC 100%);
  border-color:rgba(23,26,43,.12);
}
.panel.in-clicavel:hover{
  background:linear-gradient(180deg,#FFFFFF 0%,#E9F1FE 100%);
  border-color:rgba(79,70,229,.34);
}


/* ============================================================================
   ADENDO 20 — CARTOES DE NUMERO DOS RELATORIOS (dono 17/08)
   ----------------------------------------------------------------------------
   Estes nao tem classe nenhuma: statCard() no app.js monta a div com o estilo
   escrito na tag, incluindo `background:rgba(255,255,255,.02)` — que no tema
   escuro era um vidro sutil e no claro virou branco. Sem classe, a unica
   forma de alcanca-los por folha e casar pelo proprio atributo style.
   Alternativa seria editar o app.js; ficaria mais limpo, mas a regra do dono
   e nao mexer em JS quando o assunto e so cor.
   ============================================================================ */
div[style*="rgba(255,255,255,.02)"], div[style*="rgba(255, 255, 255, 0.02)"]{
  background:linear-gradient(180deg,#F2F7FE 0%,#E4EDFC 100%) !important;
  border-color:rgba(23,26,43,.12) !important;
}


/* ============================================================================
   ADENDO 21 — GRADE DE CARTOES SE AJUSTA A QUANTIDADE (dono 17/08)
   ----------------------------------------------------------------------------
   `.cards` estava fixo em `repeat(4, minmax(0,1fr))`. Onde a tela tem 3 cartoes
   (Contatos), a quarta coluna ficava VAZIA e a fileira terminava em 1674px
   enquanto o painel de baixo ia ate 2140 — era esse o desalinho.

   Correcao pelo NUMERO de filhos, nao trocando para auto-fit: auto-fit mudaria
   tambem as telas de 4+ cartoes, e a regra do dono e mexer so no que esta
   errado. `:last-child:nth-child(N)` e o jeito CSS de dizer "esta grade tem
   exatamente N filhos".

   Contas: 2 e 3 ganham colunas iguais ao total; 5 idem; 6 vira 3x2, que fecha
   melhor do que 4+2. Com 4 ou 7+ nada muda.
   ============================================================================ */
.cards:has(> :last-child:nth-child(2)){ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cards:has(> :last-child:nth-child(3)){ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cards:has(> :last-child:nth-child(5)){ grid-template-columns:repeat(5,minmax(0,1fr)); }
.cards:has(> :last-child:nth-child(6)){ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cards:has(> :last-child:nth-child(1)){ grid-template-columns:minmax(0,1fr); }


/* ============================================================================
   ADENDO 22 — SELETOR DE BOT NO CABECALHO DE CONTATOS (dono 17/08)
   ----------------------------------------------------------------------------
   MEDIDO: o <select#ctBtsBot> nao tinha largura maxima e esticava para 731px —
   sozinho ele ocupava TODA a faixa direita do cabecalho (1410→2140). Com
   flex-wrap ligado, os tres botoes eram empurrados para a linha de baixo, e o
   select subia para a altura do titulo: era isso que parecia "encavalado".

   Nao era sobreposicao de verdade; era quebra de linha. Limitar a largura do
   select devolve tudo para a mesma linha (220 + 194 + 143 + 143 + 3 vaos de
   9px = 727px, cabe nos 730 disponiveis). O wrap continua ligado para telas
   estreitas — ali quebrar e o comportamento certo.
   ============================================================================ */
.head .row > select{ max-width:220px; }
.head .row{ row-gap:9px; }


/* ============================================================================
   ADENDO 23 — MAIS DUAS GRADES COM COLUNA FANTASMA (dono 17/08)
   ----------------------------------------------------------------------------
   Faltou tratar dois casos no ADENDO 21:

   1) `.cards.cards5` em Bots & Qualidade: a grade declara 5 colunas e a tela
      tem 4 cartoes — sobrava uma coluna e a fileira morria em 1767 em vez de
      2140. Eu tinha coberto 1,2,3,5 e 6 filhos e ESQUECI o caso de 4 dentro de
      uma grade de 5. A regra `:has()` tem especificidade 0,3,0 e por isso vence
      o `.cards5` (0,1,0) sem precisar de !important.

   2) `.botgrid`: usava `auto-fill`, que MANTEM as trilhas vazias reservadas —
      com 3 bots, duas trilhas invisiveis comiam o resto da largura. Trocado
      por `auto-fit`, que colapsa a trilha vazia e deixa os cartoes esticarem.
      E a diferenca entre as duas palavras; o minimo de 300px continua valendo.
   ============================================================================ */
.cards:has(> :last-child:nth-child(4)){ grid-template-columns:repeat(4,minmax(0,1fr)); }
.botgrid{ grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }


/* efeito colateral do auto-fit: com UM bot so (modo piloto), o cartao esticava
   para a largura inteira e as linhas de dado ficavam com o rotulo num extremo e
   o valor no outro. Sozinho, ele para em 620px. Com 2 ou mais, a grade volta a
   preencher a faixa toda. */
.botgrid:has(> :last-child:nth-child(1)){ grid-template-columns:minmax(300px,620px); }


/* ============================================================================
   ADENDO 24 — AS TRES PASTILHAS DA FICHA GANHAM COR PROPRIA (dono 17/08)
   ----------------------------------------------------------------------------
   Meta = azul da Meta · Humano = dourado · Aberto = verde do WhatsApp.

   COMO SAO ALCANCADAS: o app.js escreve a cor na tag, usando token —
   `style="background:var(--warn-bg);color:var(--warn-tx)"`. Nao da para trocar
   o token (--warn-tx serve a todos os avisos do sistema), entao casamos pelo
   proprio atributo style. Dai o !important: e inline contra folha.

   OS TONS NAO SAO O HEX CRU DA MARCA. Verde #25D366 e dourado #D4AF37 sobre
   fundo claro medem ~1,9:1 — sumiriam. Usamos a mesma matiz um degrau abaixo,
   igual ja fizemos nos icones de canal. O ADENDO 11 deriva o fundo da pastilha
   dessa cor, entao mudar a letra muda o conjunto.
   ============================================================================ */
.ctag[style*="--warn-tx"]{ color:#8B6E06 !important; }   /* Humano — dourado */
.ctag[style*="--ok-tx"]{   color:#0E7C42 !important; }   /* Aberto — verde WhatsApp */
.ctag.meta{                color:var(--meta-tx) !important; } /* Meta — azul Meta */


/* ============================================================================
   ADENDO 25 — O CELULAR DA PREVIA EM ENVIOS META (dono 20/08)
   ----------------------------------------------------------------------------
   Desenho aprovado em public/mockup-fone-envio.html — portado sem redesenhar.

   POR QUE AS CORES AQUI SAO HEX CRU E NAO TOKEN DO TEMA:
   este bloco nao e a nossa interface, e a interface do WhatsApp vista por cima
   do ombro do devedor. Verde #075E54 na barra, papel #ECE5DD, bolha branca com
   canto vivo na esquerda — se isso seguisse o violeta da casa o cartao viraria
   mais um painel nosso e perderia exatamente o que ele existe para dizer: "e
   ASSIM que chega". O unico ponto em que o tema entra e a moldura (.panel) e a
   legenda embaixo, que continuam em var().

   ESCOPO: so `.fone` e `.fone-capt` sao nomes globais; todo o resto vive dentro
   de `.fone`. Nada aqui vaza para o resto do sistema.
   ============================================================================ */
.fone{
  width:min(290px,100%); border-radius:32px; padding:9px; margin:0 auto;
  background:linear-gradient(160deg,#2A3350,#141A2C);
  box-shadow:0 18px 44px rgba(23,26,43,.30), 0 3px 8px rgba(23,26,43,.20), inset 0 1px 0 rgba(255,255,255,.18);
}
.fone .vidro{ border-radius:25px; overflow:hidden; background:#ECE5DD; position:relative; }
.fone .notch{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:76px; height:5px; border-radius:9px; background:rgba(0,0,0,.30); z-index:3;
}
.fone .wa-top{ background:#075E54; color:#fff; padding:13px 11px 9px; display:flex; align-items:center; gap:9px; }
.fone .wa-top .av{
  width:29px; height:29px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 26%,#7BF0A9,#17B84A 62%,#0C8C38); color:#fff; font-size:16px;
}
.fone .wa-top .nm{ font-size:12px; font-weight:600; line-height:1.2; }
.fone .wa-top .st{ font-size:9.5px; color:rgba(255,255,255,.72); }
.fone .wa-top .ic{ margin-left:auto; display:flex; gap:11px; color:rgba(255,255,255,.85); font-size:14px; }
/* o padrao de bolinhas e SVG embutido: nada de arquivo extra so pra textura */
.fone .wa-body{
  padding:12px 10px 14px; min-height:300px;
  background:#ECE5DD url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34'><g fill='%23D9CFC4' fill-opacity='.55'><circle cx='6' cy='6' r='1.5'/><circle cx='22' cy='14' r='1.2'/><circle cx='12' cy='26' r='1.3'/></g></svg>");
}
.fone .wa-dia{ text-align:center; margin-bottom:11px; }
.fone .wa-dia span{
  background:rgba(255,255,255,.85); color:#5C6379; font-size:9px; font-weight:600;
  padding:3px 9px; border-radius:7px; box-shadow:0 1px 1px rgba(0,0,0,.06);
}
.fone .msg{
  background:#fff; border-radius:9px 9px 9px 2px; padding:8px 9px 5px;
  font-size:11.5px; line-height:1.45; color:#171A2B;
  box-shadow:0 1px 1px rgba(0,0,0,.13); max-width:236px;
  /* nome de devedor e link de pagamento nao tem espaco: sem isto estouram a bolha */
  overflow-wrap:anywhere; white-space:pre-wrap;
}
.fone .msg .midia{
  background:#E7EDF3; border-radius:6px; height:78px;
  display:flex; align-items:center; justify-content:center;
  color:#7B8394; font-size:10px; font-weight:600; gap:5px; margin-bottom:7px;
}
.fone .msg .rod{ color:#8C96A3; font-size:10px; margin-top:5px; }
.fone .msg .hora{ text-align:right; font-size:8.5px; color:#8C96A3; margin-top:3px; }
.fone .msg .hora i{ color:#4FC3F7; font-size:10px; vertical-align:-1px; }
.fone .wa-btn{
  background:#fff; margin-top:2px; border-top:1px solid #E9EDF2; border-radius:0 0 9px 9px;
  text-align:center; color:#0B7FD4; font-size:11.5px; font-weight:600; padding:7px 0;
  box-shadow:0 1px 1px rgba(0,0,0,.13); max-width:236px; overflow-wrap:anywhere;
}
/* so o ULTIMO botao arredonda embaixo — a pilha tem que parecer um bloco so */
.fone .wa-btn:not(:last-child){ border-radius:0; }
/* o que troca de devedor pra devedor. Verde de "preenchido", nao de sucesso. */
.fone .pv{
  background:#DCF5E5; color:#0E6634; border-radius:4px; padding:0 4px; font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(14,102,52,.28);
}
/* a variavel que ficou SEM valor aparece crua ({{1}}) — e informacao, nao erro:
   diz ao operador que ainda nao ha lista carregada pra preencher o exemplo */
.fone .pv-vazio{
  background:var(--brand-l); color:var(--brand-tx); border-radius:4px; padding:0 4px;
  font-weight:600; font-size:11px;
}
.fone-capt{ text-align:center; font-size:10.5px; color:var(--tx1); margin-top:9px; line-height:1.5; }


/* ============================================================================
   ADENDO 26 — CRIADOR DE TEMPLATE REFEITO (dono 21/08)
   ----------------------------------------------------------------------------
   O modal "Criar template" passou a espelhar o criador da Meta: cabecalho com
   os 6 tipos (inclusive Imagem/Video/Documento com AMOSTRA DE MIDIA), tipo de
   variavel (parameter_format), exemplo obrigatorio de CADA variavel e uma
   lista de validacao em portugues do lado da previa.

   POR QUE ESTE BLOCO EXISTE E NAO FOI PARA style.css:
   style.css e a camada escura original. Tudo que e cor/borda do tema claro em
   producao mora aqui, como os ADENDOS 1..25. As classes novas (.nb-chip,
   .nb-var, .nb-up, .nb-mid, .nb-erros, .nb-ok) sao TODAS novas — nenhuma
   sobrescreve regra anterior, entao nao ha risco de regressao nas outras telas.

   REGRA DE COR QUE ELE SEGUE (a mesma do ADENDO 18):
   .nb-sec e cartao azul; o que fica DENTRO do cartao e branco com borda
   rgba(23,26,43,.11). O unico ponto fora dessa regra e a previa .fone, que e a
   interface do WhatsApp e ja tem tratamento proprio no ADENDO 25.
   ============================================================================ */

/* ---- pastilhas de escolha (tipo de variavel, tipo de cabecalho) ------------
   Sao radio buttons disfarcados: um so fica ligado. Nao viraram <select>
   porque o usuario precisa ENXERGAR que existe Video e Documento — escondido
   dentro de um dropdown, ninguem descobre. */
.nb-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.nb-chip{
  display:inline-flex; align-items:center; gap:5px;
  background:#fff; border:1px solid rgba(23,26,43,.11); border-radius:var(--rp);
  padding:6px 11px; font-size:12px; font-weight:600; color:var(--tx1);
  cursor:pointer; line-height:1.2; transition:background .12s, border-color .12s, color .12s;
}
.nb-chip i{ font-size:14px; }
.nb-chip .mono{ font-weight:500; font-size:11px; color:var(--tx2); }
.nb-chip:hover{ border-color:var(--brand-bd); color:var(--brand-tx); }
.nb-chip.on{
  background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 2px 6px rgba(79,70,229,.26);
}
.nb-chip.on .mono{ color:rgba(255,255,255,.80); }

/* ---- exemplo de cada variavel ---------------------------------------------
   O campo NASCE em vermelho de propósito. Exemplo em branco e a causa nº 1 de
   reprovacao na Meta, e o erro que ela devolve nao diz qual variavel foi. */
.nb-exh{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:11.5px; font-weight:600; color:var(--tx1); margin:11px 0 7px;
}
.nb-exh .muted{ font-weight:400; font-size:11px; }
.nb-var{
  display:grid; grid-template-columns:minmax(0,92px) minmax(0,1fr);
  gap:8px; align-items:center; margin-bottom:6px;
}
.nb-var-tk{
  background:var(--brand-l); color:var(--brand-tx); border-radius:7px;
  padding:6px 8px; font-size:11.5px; font-weight:600; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nb-var-in{ width:100%; }
.nb-var.falta .nb-var-tk{ background:var(--err-bg); color:var(--err-tx); }
.nb-var.falta .nb-var-in{ border-color:rgba(196,43,43,.42) !important; }

/* ---- amostra de midia ------------------------------------------------------ */
.nb-up{
  display:flex; align-items:center; gap:11px;
  background:#fff; border:1.5px dashed rgba(23,26,43,.20); border-radius:var(--rs);
  padding:14px 15px; cursor:pointer; transition:border-color .12s, background .12s;
}
.nb-up:hover, .nb-up.drag{ border-color:var(--brand); background:var(--brand-l); }
.nb-up>i{ font-size:24px; color:var(--brand-tx); flex:none; }
.nb-up-tx{ font-size:12.5px; line-height:1.45; min-width:0; }
.nb-up-tx .muted{ font-size:11px; }
.nb-updica{ font-size:11px; margin-top:7px; line-height:1.45; }
.nb-mid{
  display:flex; align-items:center; gap:11px;
  background:#fff; border:1px solid rgba(23,26,43,.11); border-radius:var(--rs); padding:10px 11px;
}
.nb-mid-th{
  width:52px; height:52px; border-radius:9px; flex:none;
  object-fit:cover; background:var(--surface3);
}
.nb-mid-th.ic{ display:flex; align-items:center; justify-content:center; color:var(--tx1); font-size:22px; }
.nb-mid-nm{
  font-size:12.5px; font-weight:600; color:var(--tx0);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---- lista de validacao (fica ao lado da previa) --------------------------- */
.nb-erros{
  background:var(--err-bg); border:1px solid rgba(196,43,43,.22);
  border-radius:var(--rs); padding:11px 12px;
}
.nb-erros-h{
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; color:var(--err-tx); margin-bottom:7px;
}
.nb-erros ul{
  margin:0; padding-left:17px;
  /* a lista mora na coluna grudada (sticky) da previa: sem teto, um template
     muito errado empurraria o fim da lista para fora do alcance do scroll */
  max-height:236px; overflow-y:auto; overscroll-behavior:contain;
}
.nb-erros li{ font-size:11.5px; line-height:1.5; color:var(--err-tx); margin-bottom:4px; }
.nb-erros li:last-child{ margin-bottom:0; }
.nb-ok{
  display:flex; align-items:center; gap:6px;
  background:var(--ok-bg); border:1px solid rgba(14,102,52,.20); border-radius:var(--rs);
  padding:10px 12px; font-size:11.5px; font-weight:600; color:var(--ok-tx);
}

/* ---- a previa dentro do modal ---------------------------------------------
   O .fone do ADENDO 25 e desenhado para uma coluna de 300px, que e exatamente
   a largura da .nb-side. Aqui so encolhemos um degrau para sobrar respiro. */
.nb-side .fone{ width:min(268px,100%); }
.nb-side .fone .wa-body{ min-height:220px; }
/* cabecalho de midia dentro da bolha: quando e IMAGEM mostramos o arquivo de
   verdade que o usuario subiu — e o unico jeito de ele conferir enquadramento */
.fone .msg .midia.foto{ height:auto; padding:0; overflow:hidden; background:#E7EDF3; }
.fone .msg .midia.foto img{ width:100%; max-height:150px; object-fit:cover; display:block; }


/* ============================================================================
   ADENDO 27 — ESQUADRO DA TELA INICIO (dono 26/08)
   ----------------------------------------------------------------------------
   Os cartoes de cima (#inCards) usam `repeat(auto-fit, minmax(210px,1fr))` e os
   dois paineis de baixo (.in-duo) usam `1.15fr / 1fr`. Com QUATRO cartoes
   ninguem repara; com DOIS — que e o caso do login do cliente externo, onde
   "Canais" e "Precisa de atencao" nao aparecem — a divisao vira 50/50 em cima e
   53,5/46,5 embaixo, e a emenda vertical fica torta.

   Aqui, e SO no caso de exatamente dois cartoes, a fileira de cima passa a usar
   a mesma proporcao da de baixo. As colunas encaixam. Com 1, 3 ou 4 cartoes
   nada muda.
   ============================================================================ */
#inCards:has(> :last-child:nth-child(2)){
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
}

/* ============================================================================
   ADENDO 28 — CONVERSA COM MENSAGEM NOVA (pedido do dono 03/09)
   ----------------------------------------------------------------------------
   O PROBLEMA: o operador pega um atendimento, sai para outro caso, o cliente
   responde e ninguem fica sabendo. A lista so atualizava a cada 5s E so com a
   tela de Atendimento aberta — quem estava em Relatorios nunca via.

   O que esta marcacao faz: conversa com mensagem nao lida ganha trilho azul,
   nome em negrito, previa em cor cheia e um contador redondo. Quando a conversa
   e SUA (voce e o responsavel), o trilho fica mais grosso e o contador vermelho
   — porque a que e sua e a que cobra resposta.

   O item ativo NAO recebe nada disso: abrir a conversa ja marca como lida.

   REVERTER: apagar este bloco. A lista volta a ser toda igual.
   ============================================================================ */
.conv-item.naolido{
  background:linear-gradient(90deg, rgba(79,70,229,.07), transparent 62%);
  box-shadow:inset 3px 0 0 var(--brand);
}
.conv-item.naolido:hover{ background:linear-gradient(90deg, rgba(79,70,229,.12), transparent 62%); }
/* a sua ganha mais peso que a dos outros */
.conv-item.naolido.meu{
  background:linear-gradient(90deg, rgba(239,68,68,.07), transparent 62%);
  box-shadow:inset 4px 0 0 var(--err);
}
.conv-item.naolido.meu:hover{ background:linear-gradient(90deg, rgba(239,68,68,.12), transparent 62%); }
/* nome e previa saem do cinza — e o que faz "tem coisa nova" ler de longe */
.conv-item.naolido .conv-nome{ font-weight:700; color:var(--tx0); }
.conv-item.naolido .muted{ color:var(--tx0) !important; font-weight:500; }

/* contador redondo na linha do nome */
.conv-n{
  flex:none;min-width:19px;height:19px;padding:0 6px;border-radius:999px;
  background:var(--brand);color:#fff;font-size:10.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 2px 5px rgba(79,70,229,.35);
}
.conv-item.naolido.meu .conv-n{ background:var(--err);box-shadow:0 2px 5px rgba(239,68,68,.35); }

/* selo vermelho no menu lateral (Atendimento). Fica escondido no zero para nao
   virar mais um "0" na tela — so aparece quando ha o que responder. */
#navAtdSino{
  display:none;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 6px;margin-left:auto;border-radius:999px;
  background:var(--err);color:#fff;font-size:10.5px;font-weight:700;line-height:1;
  box-shadow:0 0 0 2px rgba(43,63,191,.45);
}
#navAtdSino.on{ display:flex; }
#navAtdSino.pulsa{ animation:sinoPulsa .45s ease; }
@keyframes sinoPulsa{ 0%{transform:scale(1)} 35%{transform:scale(1.4)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion:reduce){ #navAtdSino.pulsa{ animation:none; } }

/* ============================================================================
   ADENDO 29 — RELATORIOS META POR CAMPANHA (pedido do dono 03/09)
   ----------------------------------------------------------------------------
   Antes era uma lista unica de destinatarios: 1.134 linhas de campanhas
   diferentes misturadas, sem como ler o resultado de nenhuma. Agora cada
   campanha e uma faixa com o proprio placar, e clicar nela filtra a lista de
   baixo. O botao de download baixa SO aquela campanha, com o nome dela.
   REVERTER: apagar este bloco + o div #rmCampsBox do index.html.
   ============================================================================ */
.rmcamp{
  border:1px solid var(--line2);border-radius:var(--rs);background:var(--surface1);
  margin-bottom:8px;cursor:pointer;transition:.14s;
}
.rmcamp:last-child{margin-bottom:0;}
.rmcamp:hover{border-color:var(--brand-bd);background:#fff;}
.rmcamp.on{border-color:var(--brand);background:var(--brand-l);box-shadow:inset 3px 0 0 var(--brand);}
.rmcamp-hd{display:flex;align-items:center;gap:14px;padding:12px 14px;flex-wrap:wrap;}
.rmcamp-nome{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--tx0);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rmcamp-sub{font-size:11.5px;color:var(--tx2);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rmcamp-nums{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px;color:var(--tx1);}
.rmcamp-nums b{font-size:14px;color:var(--tx0);font-variant-numeric:tabular-nums;}
/* cada numero com a cor do que ele significa — verde entregou, vermelho falhou */
.rmn{padding:3px 9px;border-radius:999px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.rmn.ok{background:var(--ok-bg);color:var(--ok-tx);}
.rmn.info{background:var(--info-bg);color:var(--info-tx);}
.rmn.err{background:var(--err-bg);color:var(--err-tx);}
.rmn.wait{background:var(--surface3);color:var(--tx1);}
.rmcamp-csv{flex:none;}
@media (max-width:820px){
  .rmcamp-hd{align-items:flex-start;}
  .rmcamp-nums{width:100%;}
}

/* ============================================================================
   ADENDO 30 — ETIQUETAS POR BOT (pedido do dono 03/09)
   ----------------------------------------------------------------------------
   Era uma lista corrida com a etiqueta de todo mundo junta, sem dizer de quem
   era nenhuma. Agora e um bot por linha; clicando, abrem as etiquetas dele para
   criar, excluir e clonar de outro bot.
   REVERTER: apagar este bloco e voltar o #etList do index.html para a lista.
   ============================================================================ */
.etbot{border:1px solid var(--line2);border-radius:var(--rs);background:var(--surface1);overflow:hidden;transition:.14s;}
.etbot:hover{border-color:var(--brand-bd);}
.etbot.on{border-color:var(--brand);background:#fff;box-shadow:var(--sh);}
.etbot-hd{display:flex;align-items:center;gap:11px;padding:13px 15px;cursor:pointer;user-select:none;}
.etbot-chev{font-size:17px;color:var(--tx2);flex:none;}
.etbot.on .etbot-chev{color:var(--brand);}
.etbot-nome{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--tx0);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}
.etbot-cnt{font-size:11.5px;color:var(--tx1);background:var(--surface3);
  padding:3px 10px;border-radius:999px;flex:none;font-variant-numeric:tabular-nums;}
.etbot.on .etbot-cnt{background:var(--brand-l);color:var(--brand-tx);}

.etbot-body{border-top:1px solid var(--line);padding:14px 15px 15px;}
.etbot-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
/* a etiqueta na cor dela, com o X embutido — excluir sem sair do lugar */
.etchip{display:inline-flex;align-items:center;gap:7px;padding:5px 6px 5px 11px;
  border-radius:999px;border:1px solid;font-size:12.5px;font-weight:600;}
.etchip-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.etchip-x{border:0;background:transparent;color:inherit;opacity:.5;cursor:pointer;
  padding:2px;line-height:0;border-radius:50%;transition:.12s;}
.etchip-x:hover{opacity:1;background:rgba(0,0,0,.10);}
.etchip-x:focus-visible{outline:2px solid currentColor;outline-offset:1px;opacity:1;}

.etbot-form{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  border-top:1px dashed var(--line2);padding-top:13px;}
.etbot-nome-inp{flex:1;min-width:180px;}
.etbot-cor{width:46px;height:36px;padding:2px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface2);flex:none;}
.etbot-clone{width:auto;min-width:190px;font-size:12.5px;}
@media (max-width:700px){ .etbot-clone{width:100%;} }

/* ADENDO 30b — edicao da etiqueta no proprio chip (dono 03/09).
   Clicar no nome troca o chip por nome + cor + salvar, sem modal e sem sair da
   tela. Enter salva, Esc cancela. O botao do nome e <button> para o teclado
   alcancar; o reset visual abaixo impede que ele pareca botao. */
.etchip-nome{border:0;background:transparent;color:inherit;font:inherit;font-weight:600;
  padding:0;cursor:pointer;line-height:inherit;}
.etchip-nome:hover{text-decoration:underline;text-underline-offset:2px;}
.etchip-nome:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:3px;}
.etchip.etchip-edit{background:#fff;padding:4px 6px 4px 5px;gap:6px;}
.etchip-cor{width:26px;height:26px;padding:1px;border:1px solid var(--line2);
  border-radius:7px;cursor:pointer;background:var(--surface2);flex:none;}
.etchip-inp{height:28px;min-width:150px;font-size:12.5px;padding:0 9px;border-radius:8px;}
.etchip-ok{border:0;background:var(--ok-bg);color:var(--ok-tx);cursor:pointer;
  padding:4px;line-height:0;border-radius:50%;transition:.12s;}
.etchip-ok:hover{background:var(--ok-tx);color:#fff;}
.etchip-ok:focus-visible{outline:2px solid var(--ok-tx);outline-offset:1px;}

/* ============================================================================
   ADENDO 31 — ABA ETIQUETAS NOS RELATORIOS (pedido do dono 09/09)
   ----------------------------------------------------------------------------
   Duas perguntas diferentes na mesma tela: "o que a Meta respondeu" (Disparos) e
   "como o contato foi classificado" (Etiquetas). Aba em vez de tela nova porque
   o filtro de campanha e o de bot sao os mesmos.
   REVERTER: apagar este bloco + o #rmEtqWrap do index.html + o bloco final do app.js.
   ============================================================================ */
.rm-abas{display:flex;gap:6px;margin:0 0 14px;}
.rm-aba{
  padding:9px 18px;border-radius:11px;border:0;background:transparent;color:var(--tx1);
  font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:.14s;
  display:inline-flex;align-items:center;gap:7px;
}
.rm-aba i{font-size:16px;}
.rm-aba:hover{background:#fff;}
.rm-aba.on{background:var(--brand);color:#fff;box-shadow:var(--sh-brand);}
.rm-aba:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

/* aviso de maturidade: antes de 24h o numero ainda anda */
.etq-aviso{
  display:flex;gap:11px;align-items:flex-start;margin-bottom:14px;
  background:var(--ok-bg);border:1px solid var(--ok-bd);border-radius:var(--rs);
  padding:12px 15px;font-size:13px;color:var(--ok-tx);line-height:1.5;
}
.etq-aviso.novo{background:var(--warn-bg);border-color:rgba(245,158,11,.32);color:var(--warn-tx);}
.etq-aviso i{font-size:18px;flex:none;margin-top:1px;}

/* barra de distribuicao */
.etq-dist{display:flex;height:13px;border-radius:999px;overflow:hidden;background:var(--surface3);margin:4px 0 12px;}
.etq-dist i{display:block;height:100%;}
.etq-leg{display:flex;flex-wrap:wrap;gap:8px;}
.etq-lg{
  display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:12.5px;
  color:var(--tx1);background:var(--surface2);border:1px solid transparent;border-radius:var(--rp);
  padding:5px 12px;cursor:pointer;transition:.12s;
}
.etq-lg:hover{border-color:var(--brand-bd);}
.etq-lg.on{background:var(--brand-l);color:var(--brand-tx);border-color:var(--brand-bd);font-weight:600;}
.etq-lg:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}
.etq-lg .pt{width:9px;height:9px;border-radius:50%;flex:none;}
.etq-lg b{font-variant-numeric:tabular-nums;}
.etq-lg .pc{font-size:11px;opacity:.75;font-variant-numeric:tabular-nums;}
.etq-lg .au{font-size:9.5px;font-weight:700;opacity:.7;letter-spacing:.04em;}

/* etiqueta na linha do contato — o selo IA separa maquina de pessoa */
.etq-chip{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:3px 10px;border-radius:var(--rp);margin:2px 3px 2px 0;white-space:nowrap;
}
.etq-ia{font-size:9px;font-weight:700;font-style:normal;opacity:.72;letter-spacing:.04em;}
/* OPERADOR (quem atendeu) na linha e o quadro de acompanhamento — monitoria 23/09 */
.etq-op{font-size:12.5px;font-weight:600;color:var(--tx1);white-space:nowrap;}
.etq-op.sem{font-weight:500;font-style:italic;color:var(--warn-tx);}
.etq-op .multi{
  font-size:10px;font-weight:700;margin-left:6px;padding:1px 6px;border-radius:var(--rp);
  background:var(--surface3);color:var(--tx2);font-style:normal;
}
.etq-porop-tit{font-size:13px;font-weight:700;color:var(--tx1);margin-bottom:2px;}
.etq-porop-sub{font-size:12px;color:var(--tx2);margin-bottom:10px;}
.etq-barop{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,150px);
  gap:10px;align-items:center;margin-top:7px;font-size:12.5px;
}
.etq-barop .etq-opn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx1);font-weight:600;}
.etq-barop .etq-opn.sem{font-weight:500;font-style:italic;color:var(--warn-tx);}
.etq-barop .etq-opb{height:10px;background:var(--surface3);border-radius:999px;overflow:hidden;min-width:0;}
.etq-barop .etq-opb i{display:block;height:10px;background:var(--brand);border-radius:999px;}
.etq-barop .etq-opv{font-size:11.5px;color:var(--tx2);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
@media(max-width:700px){.etq-barop{grid-template-columns:minmax(0,1fr) minmax(0,110px);}
  .etq-barop .etq-opb{grid-column:1 / -1;}}

/* o mesmo numero abrindo varias conversas na campanha */
.etq-dupe{
  font-size:10.5px;font-weight:600;color:var(--warn-tx);background:var(--warn-bg);
  padding:2px 8px;border-radius:var(--rp);margin-left:7px;white-space:nowrap;
}