/*
 * Layout do CRM. Os tokens e os componentes de marca vêm de
 * marca/tokens.css (que é design/tokens.css) — aqui fica só o que é
 * estrutura de tela.
 *
 * Identidade Pinheiros: cinza quente de fundo, painéis brancos
 * flutuando, rail verde escuro, verde vivo só no que é ação ou
 * estado. Canto redondo em tudo. Separação é sombra e espaço, não
 * borda — borda vira grade e mata o ar.
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.carregando {
  min-height: 60vh; display: grid; place-items: center;
  font-weight: 700; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}

/* ═══ Símbolo ═══════════════════════════════════════════════════
   Entra por mask: assim a flecha herda a cor do contexto — branca no
   rail, verde na tela clara — sem precisar de um arquivo por cor. */
.marca-simbolo {
  --altura: 30px;
  height: var(--altura);
  width: calc(var(--altura) * 399 / 764);   /* proporção real, 399:764 */
  background: currentColor;
  -webkit-mask: url('/marca/logo-mark.png') center / contain no-repeat;
  mask: url('/marca/logo-mark.png') center / contain no-repeat;
  flex: none;
}

/* wordmark: "PINHEIROS" claro + "COMPANY" verde, uma linha só */
.marca-nome {
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
}
.marca-nome em { font-style: normal; color: var(--verde); }

/* ═══ Login ═════════════════════════════════════════════════════
   Uma das três telas onde a superfície de marca é permitida (login,
   splash, capa de relatório). Gradiente verde + malha de pontos +
   a flecha gigante sangrando pelo canto. */

.login {
  min-height: 100dvh;
  display: grid; place-items: center; padding: 24px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(22, 192, 96, 0.28) 0%, transparent 60%),
    linear-gradient(160deg, #0d5a30 0%, #073f20 58%, #052d17 100%);
}
.login::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
}
/* a flecha gigante, quase invisível, sangrando pela direita */
.login::after {
  content: ''; position: absolute;
  right: -8%; bottom: -22%; height: 130%; width: calc(130vh * 399 / 764);
  background: rgba(255, 255, 255, 0.055);
  -webkit-mask: url('/marca/logo-mark.png') center / contain no-repeat;
  mask: url('/marca/logo-mark.png') center / contain no-repeat;
  pointer-events: none;
}

.login-caixa {
  position: relative; z-index: 1;
  width: 100%; max-width: 380px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 38px 34px 34px;
}
.login-topo {
  display: flex; align-items: center; gap: 11px; margin-bottom: 26px;
  color: var(--verde-deep);
}
.login-topo .marca-nome { color: var(--text); }
.login-titulo {
  font-family: var(--font-display); font-weight: 800; font-size: 25px;
  text-transform: uppercase; letter-spacing: -0.01em; color: var(--navy);
}
.login-sub { color: var(--text-soft); font-size: 13px; margin: 6px 0 26px; }

.campo { margin-bottom: 16px; }
.campo > label {
  display: block; font-weight: 700; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px;
}

input:not([type]), input[type=text], input[type=email], input[type=password],
input[type=number], input[type=search], input[type=date], select, textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--text);
  font-family: var(--font); font-weight: 500;
  /* 16px: abaixo disso o Safari do iPhone dá zoom sozinho ao focar */
  font-size: 16px;
  padding: 11px 16px;
  transition: background 120ms ease, border-color 120ms ease;
}
textarea { border-radius: var(--radius-card); min-height: 92px; resize: vertical; padding: 12px 16px; }
input:focus, select:focus, textarea:focus {
  background: var(--surface); border-color: var(--verde); outline: none;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }

.btn-full { width: 100%; display: block; }

.aviso {
  border-radius: var(--radius-card);
  background: var(--danger-bg); color: var(--danger);
  padding: 11px 16px; margin-bottom: 16px;
  font-size: 13px; font-weight: 600;
}
.aviso-ok { background: var(--ok-bg); color: var(--ok); }

/* ═══ Casca ═════════════════════════════════════════════════════ */

.app { display: flex; gap: var(--gap); padding: var(--gap); min-height: 100dvh; }

.rail {
  width: var(--sidebar-w); flex: none;
  background: var(--sidebar); color: var(--text-on-dark);
  border-radius: var(--radius-card);
  padding: 30px 0 16px;
  display: flex; flex-direction: column;
  position: sticky; top: var(--gap);
  height: calc(100dvh - var(--gap) * 2);
  overflow: hidden;
}
/* malha de pontos do deck, bem discreta */
.rail::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(#000, transparent 42%);
  mask-image: linear-gradient(#000, transparent 42%);
  pointer-events: none;
}
/*
 * Marca d'água: a flecha grande sangrando pelo canto de baixo.
 *
 * Fica atrás de tudo e bem de leve — se der pra "ler" o símbolo, está
 * forte demais e vira ruído atrás do nome dos menus. Sangrar pela
 * borda é de propósito: símbolo inteiro e centrado pareceria um logo
 * perdido no meio da coluna, não textura.
 */
.rail::after {
  content: ''; position: absolute;
  left: -14%; bottom: -8%;
  width: 150%; height: 62%;
  background: rgba(255, 255, 255, 0.055);
  -webkit-mask: url('/marca/logo-mark.png') left bottom / contain no-repeat;
  mask: url('/marca/logo-mark.png') left bottom / contain no-repeat;
  pointer-events: none;
}
.rail > * { position: relative; z-index: 1; }

/* bloco da marca: empilhado e com ar, não um lockup espremido */
.rail-marca {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px; padding: 0 22px 26px;
}
.rail-marca .marca-simbolo { color: #fff; opacity: .96; }
.rail-marca .marca-nome {
  color: #fff; font-size: 15px; letter-spacing: .16em; line-height: 1.35;
}
/* "COMPANY" desce pra segunda linha: é assim no material impresso */
.rail-marca .marca-nome em { display: block; color: var(--verde); font-size: 12.5px; }

.marca-linha {
  width: 30px; height: 2px; border-radius: 2px;
  background: var(--verde); opacity: .9;
}
.marca-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(242, 246, 241, 0.42);
}

.menu { flex: 1; overflow-y: auto; padding: 0 12px; }
.menu-grupo { margin-bottom: 18px; }
.menu-rotulo {
  font-size: 9px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(242, 246, 241, 0.3);
  padding: 0 16px 7px;
}
.menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 16px; margin-bottom: 2px;
  border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 600;
  color: rgba(242, 246, 241, 0.72);
  transition: background 120ms ease, color 120ms ease;
}
.menu a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
/* item ativo é pílula verde vivo — é a marca aparecendo na navegação */
.menu a.ativo { background: var(--verde); color: #fff; box-shadow: 0 2px 10px rgba(22, 192, 96, 0.3); }

/* contador do menu: só aparece quando tem número */
.conta {
  font-style: normal; font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(242, 246, 241, 0.55);
}
.conta:empty { display: none; }
/* vencido/esperando em vermelho: é o único lugar do menu onde a cor
   quer dizer "vá aqui agora" */
.conta.urgente {
  background: #e0503f; color: #fff;
  min-width: 19px; text-align: center;
  padding: 1px 6px; border-radius: 999px;
}
.menu a.ativo .conta { color: rgba(255, 255, 255, 0.85); }

.rail-rodape {
  padding: 14px 16px 0; margin: 12px 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* status do canal: bolinha + texto, o mesmo sinal do WhatsApp Web */
.rail-canal {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600;
  color: rgba(242, 246, 241, 0.55);
  padding: 7px 6px; margin-bottom: 8px;
  border-radius: var(--radius-pill);
}
.rail-canal:hover { background: rgba(255, 255, 255, 0.06); }
.rail-canal .ponto {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, 0.3);
}
.rail-canal.conectado .ponto { background: var(--verde); box-shadow: 0 0 0 3px rgba(22, 192, 96, .2); }
.rail-canal.conectado { color: rgba(242, 246, 241, 0.72); }
.rail-canal.conectando .ponto { background: #e0a83a; animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .35; } }

.rail-eu { display: flex; align-items: center; gap: 10px; }
.rail-eu-texto { flex: 1; min-width: 0; }
.avatar {
  width: 32px; height: 32px; flex: none;
  border-radius: 50%; background: rgba(255, 255, 255, 0.12);
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px; color: #fff;
}
.quem {
  font-weight: 700; font-size: 13.5px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.papel {
  font-weight: 700; font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(242, 246, 241, 0.5);
}
.btn-sair {
  background: rgba(255, 255, 255, 0.1); color: #fff; border: none;
  border-radius: var(--radius-pill); padding: 7px 13px;
  font-weight: 700; font-size: 11.5px; cursor: pointer; flex: none;
}
.btn-sair:hover { background: rgba(255, 255, 255, 0.18); }

.conteudo { flex: 1; min-width: 0; padding: 12px 10px 60px; max-width: 1280px; }
.topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.topo p { color: var(--text-soft); font-size: 13.5px; margin-top: 7px; }
.topo-acoes { display: flex; gap: 8px; align-items: center; }

/* ═══ Cards ═════════════════════════════════════════════════════ */

.grade { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.card { padding: 18px 20px; }

.secao { margin-top: 26px; }
.secao > h3 {
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--navy); margin-bottom: 11px; padding-left: 2px;
}

.nota { font-size: 12.5px; color: var(--text-soft); margin-top: 7px; }

/* ═══ Tabela ════════════════════════════════════════════════════
   Mora dentro de um card branco; a divisória é clarinha e some na
   última linha, pra lista não virar grade. */

.tabela-card { padding: 6px 8px; overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th {
  text-align: left; font-weight: 700; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
  padding: 12px 14px 10px; white-space: nowrap;
}
.tabela td {
  padding: 12px 14px; border-top: 1px solid var(--border);
  vertical-align: middle; font-weight: 500;
}
.tabela tbody tr:hover td { background: var(--surface-2); }
.tabela tbody tr:hover td:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.tabela tbody tr:hover td:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.clicavel { cursor: pointer; }

.vazio {
  padding: 40px 24px; text-align: center;
  color: var(--text-muted); font-size: 13.5px; font-weight: 500;
}

/* ═══ Logo do cliente ═══════════════════════════════════════════ */

.logo-caixa {
  width: 92px; height: 92px; flex: none;
  border-radius: var(--radius-card); background: var(--surface-2);
  display: grid; place-items: center; overflow: hidden;
}
.logo-caixa img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.inicial {
  font-family: var(--font-display); font-weight: 800; color: var(--text-faint);
  font-size: 30px; line-height: 1;
}
.logo-mini {
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  background: var(--surface-2); display: grid; place-items: center;
  overflow: hidden; flex: none;
}
.logo-mini img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.logo-mini .inicial { font-size: 14px; }

/* ═══ Assistente ════════════════════════════════════════════════ */

/* A tela inteira vira o chat: altura da janela, conversa rolando por
   dentro, campo preso embaixo. Um painel branco só — nada de caixas
   soltas no cinza. */
.conteudo-chat {
  display: flex; flex-direction: column;
  height: calc(100dvh - var(--gap) * 2); padding-bottom: 0;
  max-width: none;
}
.conteudo-chat .topo { margin-bottom: 14px; }
.conteudo-chat #corpo { flex: 1; min-height: 0; display: flex; }

.chat {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-2); overflow: hidden;
}

.chat-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--border);
}
.chat-contexto { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; }
.chat-contexto span {
  font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
}
.chat-contexto select { width: auto; max-width: 320px; font-size: 14px; padding: 8px 36px 8px 14px; }

.chat-rolagem { flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.chat-fio {
  max-width: 820px; margin: 0 auto; padding: 28px 24px 12px;
  display: flex; flex-direction: column; gap: 22px; min-height: 100%;
}

/* ── vazio: boas-vindas + sugestões ── */
.chat-vazio {
  margin: auto 0; padding: 24px 0 8px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.chat-vazio-marca {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  background: var(--verde-wash); color: var(--verde); margin-bottom: 18px;
}
.chat-vazio h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 24px;
  letter-spacing: -0.01em; color: var(--navy);
}
.chat-vazio p { color: var(--text-soft); font-size: 14px; margin-top: 8px; }
.chat-sugestoes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  width: 100%; margin-top: 28px;
}
.chat-sugestao {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 14px 16px; border-radius: 14px; cursor: pointer;
  background: var(--surface-2); border: 1px solid transparent;
  font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--text);
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.chat-sugestao:hover { background: var(--surface); border-color: var(--verde); transform: translateY(-1px); }
.chat-sugestao-tag {
  font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--verde-dark, var(--verde));
}

/* ── mensagens ── */
.ia-msg { display: flex; gap: 12px; animation: ia-entra 180ms ease-out; }
.ia-msg-eu { justify-content: flex-end; }
.ia-balao {
  max-width: 75%; padding: 11px 16px; border-radius: 18px; border-bottom-right-radius: 6px;
  background: var(--verde); color: #fff; font-size: 14.5px; font-weight: 500;
  line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.ia-avatar {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: grid; place-items: center; background: var(--verde-wash); color: var(--verde);
}
.ia-corpo { flex: 1; min-width: 0; padding-top: 5px; }
.ia-texto { font-size: 14.5px; line-height: 1.65; color: var(--text); overflow-wrap: anywhere; }
.ia-texto p + p, .ia-texto p + ul, .ia-texto p + ol, .ia-texto ul + p, .ia-texto ol + p { margin-top: 10px; }
.ia-texto ul, .ia-texto ol { padding-left: 20px; margin-top: 6px; }
.ia-texto li + li { margin-top: 4px; }
.ia-texto h4 { font-size: 15px; font-weight: 800; color: var(--navy); margin: 14px 0 4px; }
.ia-texto h4:first-child { margin-top: 0; }
.ia-texto strong { font-weight: 700; }
.ia-texto code {
  font-size: 13px; background: var(--surface-2); padding: 1px 6px; border-radius: 6px;
}
.ia-rodape {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
  font-weight: 700; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}
.ia-copiar {
  background: none; border: 0; cursor: pointer; padding: 3px 8px; border-radius: 6px;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--text-soft);
}
.ia-copiar:hover { background: var(--surface-2); color: var(--text); }
.ia-erro {
  font-size: 14px; color: var(--danger); background: var(--danger-bg);
  padding: 10px 14px; border-radius: 12px; display: inline-block;
}

.digitando { display: inline-flex; gap: 5px; padding: 8px 0; }
.digitando i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted);
  animation: ia-pulo 1.1s infinite ease-in-out;
}
.digitando i:nth-child(2) { animation-delay: 0.15s; }
.digitando i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ia-pulo { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
@keyframes ia-entra { from { opacity: 0; transform: translateY(4px); } }

/* ── campo ── */
.chat-rodape { padding: 10px 24px 14px; }
.chat-campo {
  max-width: 820px; margin: 0 auto; position: relative;
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--surface-2); border: 1px solid transparent; border-radius: 22px;
  padding: 6px 6px 6px 18px; transition: border-color 120ms ease, background 120ms ease;
}
.chat-campo:focus-within { background: var(--surface); border-color: var(--verde); }
.chat-campo textarea {
  flex: 1; min-height: 0; max-height: 200px; resize: none; overflow-y: auto;
  background: transparent; border: 0; border-radius: 0; padding: 9px 0; line-height: 1.45;
}
.chat-campo textarea:focus { background: transparent; border: 0; }
.chat-enviar {
  width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--verde); color: #fff;
  transition: background 120ms ease, opacity 120ms ease;
}
.chat-enviar:hover:not(:disabled) { background: var(--verde-hi); }
.chat-enviar:disabled { opacity: 0.35; cursor: default; }
.chat-aviso {
  max-width: 820px; margin: 8px auto 0; text-align: center;
  font-size: 11.5px; color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .ia-msg, .digitando i { animation: none; }
  .chat-sugestao:hover { transform: none; }
}

/* no celular o rail vira barra no topo com altura variável: o chat
   pega a janela menos um respiro em vez de calcular a partir da .app */
@media (max-width: 860px) {
  .conteudo-chat { height: auto; }
  /* desconta rail no topo, título e a barra de abas fixa embaixo */
  .chat { height: calc(100dvh - 330px); min-height: 380px; }
  .chat-fio { padding: 20px 14px 8px; }
  .chat-rodape { padding: 8px 10px 10px; }
  .chat-sugestoes { grid-template-columns: 1fr; }
  .chat-contexto select { max-width: 200px; }
  .ia-balao { max-width: 88%; }
  .ia-avatar { display: none; }
  .chat-aviso { display: none; }
}

.linha-campos { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ═══ Celular ═══════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .app { flex-direction: column; padding: 8px 8px 0; gap: 8px; }
  .rail {
    width: auto; height: auto; position: static;
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-radius: var(--radius-card);
  }
  .rail-marca { padding: 0; }
  .rail-rodape {
    border-top: 0; padding: 0; margin: 0;
    display: flex; align-items: center; gap: 10px;
  }
  .papel { display: none; }
  .quem { font-size: 12.5px; }

  /* menu vira barra de abas embaixo, onde o polegar alcança */
  .menu {
    position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 40;
    display: flex; gap: 4px; overflow-x: auto; padding: 7px;
    background: var(--sidebar); border-radius: var(--radius-pill);
    box-shadow: var(--shadow-3);
    padding-bottom: max(7px, env(safe-area-inset-bottom));
    scrollbar-width: none;
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { white-space: nowrap; margin: 0; padding: 8px 15px; font-size: 13px; }

  .conteudo { padding: 4px 4px 86px; }
  .topo { margin-bottom: 16px; }
  .grade { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
  .metric { font-size: 27px; }
  .balao { max-width: 88%; }
}

/* ------------------------------------------------------------------ */
/* funil                                                               */
/* ------------------------------------------------------------------ */

/*
 * O board rola na horizontal e as colunas não encolhem. A alternativa
 * era espremer sete etapas na largura da tela, e card de negócio com
 * 90px de largura não é lido por ninguém.
 */
.board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 14px;
  scroll-snap-type: x proximate;
}

.coluna {
  flex: 0 0 272px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.coluna-topo { padding: 0 4px 10px; }
.coluna-nome {
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
  text-transform: uppercase; color: var(--text);
}
.coluna-soma { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.coluna-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
  padding: 8px;
  border-radius: var(--radius-lg, 18px);
  background: rgba(0, 0, 0, .035);
  transition: background .15s;
}
/* o alvo do drop precisa se anunciar, senão soltar vira chute */
.coluna-corpo.sobre { background: rgba(22, 192, 96, .14); }

.coluna-vazia {
  font-size: 12px; color: var(--text-muted);
  text-align: center; padding: 18px 0;
}

.negocio {
  background: var(--surface, #fff);
  border-radius: 12px;
  padding: 12px 13px;
  box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,.08));
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.negocio:hover { box-shadow: var(--shadow-2, 0 6px 18px rgba(0,0,0,.12)); }
.negocio.arrastando { opacity: .45; transform: rotate(1.5deg); }

.negocio-titulo { font-weight: 700; font-size: 14px; line-height: 1.3; }
.negocio-empresa { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.negocio-rodape {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; gap: 8px;
}
.negocio-valor {
  font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums; color: var(--verde-deep, #0b6b35);
}
.negocio-valor small { font-weight: 500; color: var(--text-muted); }

/* ------------------------------------------------------------------ */
/* tarefas                                                             */
/* ------------------------------------------------------------------ */

.filtros {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: space-between; margin-bottom: 18px;
}
.abas {
  display: inline-flex; gap: 2px; padding: 3px;
  background: rgba(0, 0, 0, .05); border-radius: 999px;
}
.abas button {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-soft, #5b5b57);
  padding: 7px 15px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.abas button:hover { color: var(--text); }
.abas button.ativo {
  background: var(--surface, #fff); color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

.tarefa {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px;
  border-top: 1px solid var(--border, rgba(0,0,0,.06));
}
.tarefa:first-child { border-top: 0; }
.tarefa-texto { flex: 1; min-width: 0; }
.tarefa-titulo { font-weight: 600; font-size: 14px; }
.tarefa-nota { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.tarefa-prazo {
  font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--text-muted); white-space: nowrap;
}
.tarefa-prazo.vencida { color: var(--danger); font-weight: 700; }
/* concluída fica visível de propósito: sumir some com a prova de que
   foi feita, e a primeira pergunta do dia seguinte é "isso foi feito?" */
.tarefa.feita .tarefa-titulo { text-decoration: line-through; color: var(--text-muted); }

.check {
  flex: 0 0 auto; width: 21px; height: 21px; padding: 0;
  border: 2px solid var(--border-hover, #cfcac2); border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.check:hover:not(:disabled) { border-color: var(--verde); }
.check:disabled { cursor: default; opacity: .5; }
.check.marcado {
  background: var(--verde) no-repeat center/11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.4l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: var(--verde);
}

@media (max-width: 720px) {
  .coluna { flex-basis: 84vw; }
  .filtros { gap: 8px; }
  .abas { width: 100%; justify-content: space-between; }
}

/* ═══ Gráficos ══════════════════════════════════════════════════
   Mesmo vocabulário do deck de relatório: colunas pareadas verde
   escuro / verde vivo, medidor de meia-lua com agulha navy, barra
   horizontal em pílula. Quem lê o relatório reconhece o CRM. */

.graficos {
  display: grid; gap: var(--gap); margin-top: var(--gap);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}
.graficos-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

.dcard { padding: 22px 22px 20px; }
.dcard > h4 {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 800;
  letter-spacing: -.01em; display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}

.g-leg { display: flex; gap: 18px; justify-content: center; font-size: 11px;
         font-weight: 600; color: var(--text-soft); margin-bottom: 12px; }
.g-leg b { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.g-leg b.a, .g-mo i.a { background: var(--verde-deep); }
.g-leg b.b, .g-mo i.b { background: var(--verde); }
.g-leg b.c, .g-mo i.c { background: var(--navy); }

.g-wrap { position: relative; height: 210px; }
.g-lines { position: absolute; inset: 0 0 24px 46px; }
.g-lines i { position: absolute; left: 0; right: 0; height: 1px; background: var(--chart-grid); }
.g-lines i span { position: absolute; left: -46px; top: -6px; width: 38px; text-align: right;
                  font-size: 9.5px; color: var(--text-muted); font-weight: 600;
                  font-variant-numeric: tabular-nums; }
.g-bars { position: absolute; inset: 0 0 24px 46px; display: flex;
          align-items: flex-end; justify-content: space-around; }
.g-mo { height: 100%; display: flex; align-items: flex-end; gap: 3px; position: relative; }
.g-mo i { width: 13px; display: block; border-radius: 3px 3px 0 0; min-height: 2px; }
.g-mo em { position: absolute; bottom: -21px; left: -10px; right: -10px; text-align: center;
           font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--text-muted); }

.med { text-align: center; display: grid; place-items: center; padding-top: 6px; }
.med svg { width: 100%; max-width: 168px; }
.pont { text-align: center; margin-top: 6px; }
.pont .n { font-family: var(--font-display); font-weight: 800; font-size: 40px;
           letter-spacing: -.03em; color: var(--navy); line-height: 1; }
.pont .s { font-size: 12.5px; color: var(--text-soft); margin-top: 8px; }

.barras-h { display: grid; gap: 14px; }
.bh-t { display: flex; justify-content: space-between; gap: 10px;
        font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.bh-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-t b { font-variant-numeric: tabular-nums; }
.bh-trilho { height: 10px; border-radius: var(--radius-pill); background: var(--verde-wash); overflow: hidden; }
.bh-trilho i { display: block; height: 100%; border-radius: inherit; background: var(--grad-verde); }

/* card de destaque: o número que responde "quanto a gente fatura" */
.card.destaque {
  color: #fff;
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(43, 217, 124, .35), transparent 70%),
    linear-gradient(150deg, #0d5a30, #073f20);
}
.card.destaque .label, .card.destaque .nota { color: rgba(255, 255, 255, .72); }

/* ═══ Mensalidades ══════════════════════════════════════════════ */

.mensalidades {
  display: grid; gap: var(--gap); align-items: start;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
}
.mensalidades .tabela tfoot td {
  padding: 14px; border-top: 2px solid var(--border-hover);
  font-weight: 800; font-family: var(--font-display);
}
.input-valor, .input-dia {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 700;
  padding: 7px 10px; height: auto;
}
.input-valor { width: 128px; }
.input-dia { width: 58px; }
.input.invalido { border-color: var(--danger); background: var(--danger-bg); }

/* ── notas fiscais ── */
.notas-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.notas-mes { display: flex; align-items: center; gap: 2px; }
.notas-mes strong {
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  text-transform: capitalize; min-width: 138px; text-align: center;
}
.notas-mes .btn { padding: 6px 12px; font-size: 16px; line-height: 1; }
.notas-conta { margin: 0; }
.notas-acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.notas .tabela-card { padding: 0; box-shadow: none; overflow-x: auto; }
.notas .tabela { min-width: 720px; }
.notas-desc {
  max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-soft);
}
.notas-erro {
  margin-top: 6px; max-width: 320px; font-size: 12px; line-height: 1.4;
  color: var(--danger); font-weight: 600; white-space: normal;
}
.notas-botoes { white-space: nowrap; text-align: right; }
.notas-botoes .btn { padding: 7px 12px; font-size: 13px; }
.notas-botoes .btn + .btn { margin-left: 4px; }
.modal-estreito { width: min(520px, 100%); }

.nf-cert { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.nf-cert-info {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 8px; padding: 12px 16px; border-radius: var(--radius-card); background: var(--surface-2);
}
.nf-cert-info > div { flex: 1; min-width: 200px; }
.nf-cert-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.nf-cert-form input[type=file] { flex: 1 1 220px; font-size: 13px; }
.nf-cert-form input[type=password] { flex: 1 1 200px; width: auto; }

@media (max-width: 760px) {
  .notas-acoes { margin-left: 0; width: 100%; }
  .notas-acoes .btn { flex: 1; }
  .notas-desc { max-width: 160px; }
}
tr.salvando { opacity: .5; pointer-events: none; }

/* ═══ Modal (importação) ════════════════════════════════════════ */

.modal-fundo {
  position: fixed; inset: 0; z-index: 50; padding: 24px;
  background: rgba(10, 20, 14, .45); backdrop-filter: blur(3px);
  display: grid; place-items: center;
}
.modal {
  width: min(880px, 100%); max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column; box-shadow: var(--shadow-3); padding: 0;
}
.modal-topo {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 22px 24px 14px; border-bottom: 1px solid var(--border);
}
.modal-titulo { font-family: var(--font-display); font-weight: 800; font-size: 19px;
                margin-top: 4px; word-break: break-word; }
.modal-corpo { padding: 18px 24px 22px; overflow-y: auto; }
.modal-sub {
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--navy);
  margin: 22px 0 6px;
}
.modal-corpo .tabela-card { padding: 0; }
.modal-rodape {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  position: sticky; bottom: -22px; background: var(--surface);
  margin: 18px -24px -22px; padding: 16px 24px; border-top: 1px solid var(--border);
}
.marcar { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.marcar input, .modal .tabela input[type="checkbox"] { accent-color: var(--verde); width: 16px; height: 16px; }
.card-leve { background: var(--surface-2); box-shadow: none; padding: 14px 16px; }
.import-resumo { font-size: 14px; line-height: 1.55; }
.import-aviso {
  margin-top: 10px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--warn-bg); color: var(--warn); font-size: 13px; font-weight: 600;
}

/* ═══ Conversas (inbox) ═════════════════════════════════════════
   Três colunas: lista, conversa, ficha. Altura presa na janela —
   quem rola é cada coluna, não a página, senão o campo de digitar
   some lá embaixo numa conversa longa. */

.inbox {
  display: grid; gap: var(--gap);
  grid-template-columns: 320px minmax(0, 1fr) 270px;
  height: calc(100dvh - 150px); min-height: 480px;
}
.inbox > section, .inbox > aside {
  background: var(--surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-1); min-height: 0; display: flex; flex-direction: column;
}

.inbox-busca { padding: 14px 14px 8px; }
.abas-inbox { margin: 0 14px 8px; display: flex; }
.abas-inbox button { flex: 1; padding: 6px 8px; font-size: 12px; }
.abas-inbox em { font-style: normal; font-weight: 800; margin-left: 4px; color: var(--verde-deep); }
.abas-inbox em:empty { display: none; }

.conversas { flex: 1; overflow-y: auto; padding: 4px 8px 10px; }
.conversa {
  width: 100%; display: flex; gap: 11px; align-items: center; text-align: left;
  border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer;
  padding: 10px; border-radius: 14px; transition: background .12s;
}
.conversa:hover { background: var(--surface-2); }
.conversa.ativa { background: var(--verde-wash); }
.conversa .inicial, .ficha-topo .inicial {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; text-transform: uppercase;
  background: var(--verde-wash); color: var(--verde-deep);
}
.conversa.ativa .inicial { background: var(--verde); color: #fff; }
.conversa-texto { flex: 1; min-width: 0; display: grid; gap: 3px; }
.conversa-topo { display: flex; justify-content: space-between; gap: 8px; }
.conversa-topo b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-topo i { font-style: normal; font-size: 11px; color: var(--text-muted); flex: none; }
.conversa-previa { font-size: 12.5px; color: var(--text-soft); overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.conversa-sinais { display: grid; gap: 4px; justify-items: end; flex: none; }
.nao-lidas {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--verde); color: #fff; font-size: 11px; font-weight: 800;
  display: grid; place-items: center;
}
.espera { font-size: 10.5px; font-weight: 700; color: var(--warn); }

.inbox-conversa > .vazio, .inbox-conversa > .carregando { margin: auto; }
.conversa-cabeca {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.conversa-nome { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.conversa-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.conversa-acoes { display: flex; gap: 8px; }

.thread {
  flex: 1; overflow-y: auto; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
  background:
    radial-gradient(circle at 1px 1px, rgba(16, 18, 17, .045) 1px, transparent 0) 0 0 / 18px 18px,
    var(--surface-2);
}
.msg {
  max-width: min(72%, 560px); padding: 9px 13px 6px; border-radius: 16px;
  font-size: 14px; line-height: 1.45; box-shadow: var(--shadow-1);
  overflow-wrap: anywhere;
}
/* pre-wrap só no texto: no balão inteiro, a indentação do template
   vira espaço em branco e o balão incha */
.msg-corpo, .msg-nota { white-space: pre-wrap; }
.msg-in { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 5px; }
.msg-out { align-self: flex-end; background: #d9f7e5; border-bottom-right-radius: 5px; }
.msg-midia { margin: 2px 0 4px; }
.msg-midia audio { display: block; width: 280px; max-width: 100%; height: 40px; }
.msg-midia img, .msg-midia video { display: block; max-width: 280px; max-height: 320px; border-radius: 8px; background: rgba(0,0,0,.06); }
.msg-midia img { cursor: zoom-in; }
.msg-doc { font-weight: 600; text-decoration: none; }
.msg-midia-off { font-size: 12.5px; font-style: italic; color: var(--text-muted); }
.msg-meta { font-size: 10.5px; color: var(--text-muted); text-align: right; margin-top: 3px; }
.msg-meta .lido { color: var(--info); }
.msg-erro { background: var(--danger-bg); }
.msg-falha { font-size: 11.5px; font-weight: 700; color: var(--danger); margin-top: 4px; }
.msg-nota {
  align-self: center; max-width: 80%; padding: 8px 14px; border-radius: 12px;
  background: var(--warn-bg); color: #6b4c0e; font-size: 12.5px; font-weight: 500;
}
.msg-nota span { margin-left: 8px; font-size: 10.5px; opacity: .7; }

.redigir {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 12px 14px 6px; border-top: 1px solid var(--border);
}
.redigir textarea {
  flex: 1; resize: none; max-height: 160px; min-height: 42px;
  font: inherit; font-size: 14px; padding: 10px 14px;
  border: 1px solid transparent; border-radius: 21px; background: var(--surface-2);
}
.redigir textarea:focus { outline: none; border-color: var(--verde); background: var(--surface); }
.nota-interna {
  display: flex; align-items: center; gap: 7px; padding: 4px 18px 12px;
  font-size: 12px; color: var(--text-soft); cursor: pointer;
}
.nota-interna input { accent-color: var(--warn); }

.inbox-ficha { overflow-y: auto; padding: 22px 18px; gap: 18px; }
.ficha-topo { display: grid; justify-items: center; text-align: center; gap: 4px; }
.ficha-topo .inicial.grande { width: 68px; height: 68px; font-size: 26px; margin-bottom: 6px; }
.ficha-nome { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.ficha-tel { font-size: 12.5px; color: var(--text-muted); }
.ficha-bloco {
  display: grid; gap: 6px; justify-items: start;
  padding-top: 16px; border-top: 1px solid var(--border);
}

/* ═══ WhatsApp (configurações) ══════════════════════════════════ */

.whats { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; }
/* o PNG do Evolution vem em 348px: mostrar no tamanho nativo. Encolher
   com pixelated deixa os quadradinhos desiguais e o celular não lê. */
.whats-qr {
  width: 372px; height: 372px; max-width: 100%; border-radius: var(--radius-card); background: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-2); padding: 12px;
}
.whats-qr img { width: 348px; height: 348px; max-width: 100%; height: auto; }
.whats-codigo {
  margin-top: 16px; font-family: var(--font-display); font-weight: 800; font-size: 40px;
  letter-spacing: .12em; color: var(--navy);
}
.whats-passos { margin: 12px 0 0 18px; font-size: 13.5px; line-height: 1.8; color: var(--text-soft); }
.canal-linha {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--border);
}
.canal-linha:first-child { border-top: 0; }
.canal-linha .ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); flex: none; }
.canal-linha .ponto.conectado { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); }
.canal-linha .ponto.conectando { background: var(--warn); animation: pulsa 1.4s infinite; }

@media (max-width: 1100px) {
  .graficos { grid-template-columns: 1fr 1fr; }
  .graficos > :first-child { grid-column: 1 / -1; }
  .mensalidades { grid-template-columns: 1fr; }
  .inbox { grid-template-columns: 290px minmax(0, 1fr); }
  .inbox-ficha { display: none !important; }
}
@media (max-width: 720px) {
  .graficos, .graficos-2 { grid-template-columns: 1fr; }
  .inbox { grid-template-columns: 1fr; height: auto; }
  .inbox-conversa { min-height: 70dvh; }
  .whats { grid-template-columns: 1fr; justify-items: center; }
  .modal-fundo { padding: 0; place-items: end stretch; }
  .modal { max-height: 92dvh; border-radius: var(--radius-card) var(--radius-card) 0 0; }
}

/* foto do contato por cima da inicial: se a imagem não carregar, o
   onerror remove o <img> e a inicial aparece sozinha */
.inicial.com-foto { position: relative; overflow: hidden; }
.inicial.com-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}

/* ---- atendimento com IA ---- */
.selo-ia {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--verde);
  background: var(--ok-bg); border-radius: var(--radius-pill); padding: 6px 11px;
}
.selo-ia::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.msg-ia {
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--verde); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px;
}
.ia-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ia-chave { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.ia-chave input { width: 18px; height: 18px; accent-color: var(--verde); }
.ia-base { min-height: 260px; font-size: 14px; line-height: 1.5; }
.ia-teste { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.ia-teste-thread {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 360px; min-height: 90px; overflow-y: auto;
  background: var(--surface-2); border-radius: var(--radius-card); padding: 14px; margin-bottom: 10px;
}
.ia-teste-redigir { display: flex; gap: 8px; align-items: flex-end; }
.ia-teste-redigir textarea { flex: 1; min-height: 42px; resize: none; font-size: 14px; border-radius: 21px; padding: 10px 14px; }

/* ---- anexo e gravação de áudio ---- */
.btn-icone {
  flex: none; width: 42px; height: 42px; display: inline-grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-soft); cursor: pointer;
}
.btn-icone:hover { background: var(--surface-2); color: var(--text); }
.anexo-previa {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 14px 0; padding: 10px 12px; border-radius: var(--radius-card); background: var(--surface-2);
}
.anexo-previa[hidden], .gravando[hidden], .redigir[hidden] { display: none; }
.anexo-previa img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.anexo-ico { font-size: 26px; width: 56px; text-align: center; }
.anexo-nome { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.anexo-nome span { display: block; font-weight: 500; font-size: 12px; color: var(--text-muted); }
.gravando {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 6px; border-top: 1px solid var(--border);
}
.grav-ponto { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; animation: piscar 1s infinite; }
.grav-tempo { font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes piscar { 50% { opacity: .25; } }

/* ═══ Prospecção ════════════════════════════════════════════════ */

.pp-status { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px;
  background: var(--surface); box-shadow: var(--shadow-1); color: var(--text-soft);
}
.pp-chip b { color: var(--text); font-weight: 700; }
.pp-chip a { color: var(--verde-deep); }
.pp-chip .ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--warn); }
.pp-chip.ok .ponto { background: var(--ok); }
.pp-lote {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 14px; margin-bottom: 12px; border-radius: var(--radius-card);
  background: var(--verde-wash); position: sticky; top: 8px; z-index: 5;
}
.pp-lote b { margin-right: 6px; font-size: 13px; }
.pp-lote select { width: auto; }
.pp-passos { margin-top: 12px; display: grid; gap: 6px; }
.pp-passo-mini { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text-soft); }
.pp-passo-mini .badge { flex: none; min-width: 118px; justify-content: center; }
.pp-passo { margin-bottom: 10px; }
.pp-passo select { width: auto; }
.pp-colunas { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); align-items: start; }
.pp-linha {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-top: 1px solid var(--border); font-size: 13.5px;
}
.pp-linha:first-child { border-top: 0; }
.pp-linha > span { color: var(--text-muted); }
.pp-linha > b { font-weight: 600; text-align: right; word-break: break-word; }
.pp-problemas { margin: 10px 0 0 18px; font-size: 13.5px; line-height: 1.6; }
.pp-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pp-toque { padding: 12px 0; border-top: 1px solid var(--border); }
.pp-toque:first-of-type { border-top: 0; }
.pp-toque-corpo {
  margin-top: 6px; white-space: pre-wrap; font-size: 13px; line-height: 1.5;
  color: var(--text-soft); max-height: 220px; overflow-y: auto;
}

/* ═══ Etiquetas ═════════════════════════════════════════════════ */

.etqs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.etq {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700; line-height: 1.4;
}
.etq-verde    { background: var(--ok-bg);     color: var(--ok); }
.etq-azul     { background: var(--info-bg);   color: var(--info); }
.etq-amarelo  { background: var(--warn-bg);   color: var(--warn); }
.etq-vermelho { background: var(--danger-bg); color: var(--danger); }
.etq-roxo     { background: #efe8fb;          color: #7446c9; }
.etq-cinza    { background: var(--surface-3); color: var(--text-soft); }
.etq-mais {
  border: 1px dashed var(--border); background: none; border-radius: var(--radius-pill);
  padding: 3px 10px; font-size: 11.5px; font-weight: 600; color: var(--text-soft); cursor: pointer;
}
.etq-mais:hover { border-color: var(--verde); color: var(--verde); }
.etq-escolha { display: grid; gap: 8px; }
.etq-escolha label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* ═══ Respostas rápidas (composer) ══════════════════════════════ */

.atalhos {
  margin: 0 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-2);
  max-height: 280px; overflow-y: auto; padding: 6px;
}
.atalho {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 13px;
}
.atalho b { color: var(--verde-deep); }
.atalho span { color: var(--text-soft); }
.atalho.ativo, .atalho:hover { background: var(--surface-2); }
.atalho-corpo {
  font-size: 12px; color: var(--text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ═══ Campanhas A/B, automações, relatórios ═════════════════════ */

.ab-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ab-var { position: relative; }
.ab-var.vencedora { box-shadow: 0 0 0 2px var(--verde); }
.ab-texto { white-space: pre-wrap; font-size: 13px; color: var(--text-soft); margin-top: 8px; max-height: 120px; overflow: auto; }
.linha-acao { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surface-2); margin-bottom: 10px; }
.linha-acao .filtros { margin: 0; }
.rel-frame { width: 100%; height: 72vh; border: 0; border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-2); }
.rel-lados { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .rel-lados { grid-template-columns: 1fr; } }
.linha-acao input, .linha-acao select, .linha-acao textarea { background: var(--surface); }

/* ═══ Extras: sino, busca, visões, campos, captura ═══════════════ */

/* topo: busca e sino */
.topo-acoes { flex-wrap: wrap; }
.topo-busca { width: auto; padding: 0 12px; gap: 8px; display: inline-flex; align-items: center; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-1); }
.topo-busca-dica { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: .04em; }
#sino { position: relative; background: var(--surface); box-shadow: var(--shadow-1); }
#sino em {
  position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font: 700 10px/17px var(--font); font-style: normal; text-align: center;
}
#sino em[hidden] { display: none; }

/* popover do sino e das macros */
.sino-painel {
  position: absolute; z-index: 60; padding: 0; overflow: hidden;
  box-shadow: var(--shadow-3); max-height: min(520px, 75vh); display: flex; flex-direction: column;
}
.sino-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.sino-topo .btn { padding: 5px 10px; font-size: 12px; }
.sino-permissao { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--verde-wash); font-size: 12.5px; }
.sino-permissao .btn { flex: none; padding: 6px 12px; font-size: 12px; }
.sino-lista { overflow-y: auto; }
.sino-item, .busca-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--text);
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.sino-item:hover, .busca-item:hover, .busca-item.foco { background: var(--surface-2); }
.sino-item b, .busca-item b { font-size: 13.5px; }
.sino-item span, .busca-item span { font-size: 12.5px; color: var(--text-soft); overflow-wrap: anywhere; }
.sino-item i { font-size: 11px; color: var(--text-muted); font-style: normal; }
.sino-item.nova { box-shadow: inset 3px 0 0 var(--verde); }
.sino-item.nova b::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--verde); vertical-align: middle; }

/* toasts */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: grid; gap: 8px; width: min(340px, calc(100vw - 32px)); }
.toast {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-card);
  background: var(--navy-deep, #1d2a55); color: #fff; box-shadow: var(--shadow-3); text-decoration: none;
  border-left: 4px solid var(--verde); animation: toast-entra .2s ease-out; transition: opacity .4s, transform .4s;
}
.toast span { font-size: 12.5px; opacity: .85; }
.toast.saindo { opacity: 0; transform: translateY(8px); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(8px); } }

/* busca global */
.busca-fundo { place-items: start center; padding-top: 12vh; }
.busca-caixa { width: min(620px, 100%); padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.busca-caixa > input { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 18px 20px; font-size: 16px; box-shadow: none; }
.busca-caixa > input:focus { outline: none; box-shadow: none; }
.busca-resultados { overflow-y: auto; }
.busca-dica { padding: 14px 20px; margin: 0; }
.busca-grupo { padding: 10px 20px 4px; font: 800 10.5px var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.busca-resultados .busca-item { padding: 10px 20px; }
.busca-rodape { padding: 10px 20px; margin: 0; border-top: 1px solid var(--border); background: var(--surface-2); }

/* visões salvas */
.visoes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.visao {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-pill); padding: 6px 12px; font: 600 12.5px var(--font); color: var(--text-soft); cursor: pointer;
}
.visao:hover { color: var(--text); border-color: var(--border-hover); }
.visao.ativa { background: var(--verde-dark, #0b4a28); border-color: transparent; color: #fff; }
.visao small { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.visao i { font-style: normal; font-size: 15px; line-height: 1; opacity: .55; padding-left: 2px; }
.visao i:hover { opacity: 1; }
.visao-nova { border-style: dashed; background: transparent; }

.filtros-lista { justify-content: flex-start; align-items: center; }
.filtros-lista > input, .filtros-lista > select { width: auto; flex: 1 1 160px; max-width: 240px; }
.filtros-lista > input[type="search"] { flex-basis: 220px; max-width: 320px; }
.tabela-clicavel tbody tr { cursor: pointer; }
.tabela-clicavel tbody tr:hover td { background: var(--surface-2); }
.tabela-rolagem { overflow-x: auto; }

/* campos personalizados */
.campos-grade { display: grid; gap: 14px 20px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.campos-grade > div { min-width: 0; overflow-wrap: anywhere; }

/* duplicados */
.dup-grupo { margin-bottom: 12px; }
.dup-linha { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.dup-linha:last-of-type { border-bottom: 0; }
.dup-linha input { margin-top: 3px; accent-color: var(--verde); width: 16px; height: 16px; flex: none; }
.dup-linha span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dup-linha small { color: var(--text-soft); font-size: 12px; overflow-wrap: anywhere; }

/* captura de leads */
.cap-bloco { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.copiar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copiar code {
  flex: 1 1 260px; min-width: 0; padding: 9px 12px; border-radius: 10px; background: var(--surface-2);
  font-size: 12.5px; overflow-wrap: anywhere;
}
.cap-codigo {
  margin: 8px 0; padding: 12px 14px; border-radius: 10px; background: var(--navy-deep, #1d2a55); color: #e8ecf5;
  font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre;
}

/* distribuição */
.d-pessoas { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.d-horario { display: grid; gap: 8px; }
.d-dia { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.d-dia .marcar { width: 70px; }
.d-dia input[type="time"] { width: 120px; }
.d-dia input:disabled { opacity: .45; }

/* macros */
.macro-acao { padding: 10px 12px; }

@media (max-width: 860px) {
  .topo-busca-dica { display: none; }
  .topo-busca { width: 42px; padding: 0; justify-content: center; }
  .filtros-lista > input, .filtros-lista > select, .filtros-lista > input[type="search"] { flex: 1 1 calc(50% - 8px); max-width: none; }
  .busca-fundo { padding: 12px; }
  .busca-caixa { max-height: calc(100vh - 24px); }
  .busca-rodape { display: none; }
  .visoes { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .visao { flex: none; }
  .sino-permissao { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .filtros-lista > input, .filtros-lista > select, .filtros-lista > input[type="search"] { flex-basis: 100%; }
  .d-dia input[type="time"] { width: calc(50% - 30px); }
}