/* ════════════════════════════════════════════════════════════════
   PROOSPERE MONO — design system monocromático (CRM v9)
   Preto profundo · hairlines · acento branco/preto · dot grid sutil.
   Tokens compartilhados por todos os HTMLs do CRM — mesmas classes,
   visual novo. Temas: mono (padrão) · light · vscode
   ════════════════════════════════════════════════════════════════ */
/* Tokens dos 3 temas: assets/tokens.css — fonte única, não redeclarar aqui */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;}
body{
  min-height:100%;font-family:var(--font-ui);font-weight:400;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body::before{ /* dot grid sutil */
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(var(--dot-major) 1.3px,transparent 1.3px),
    radial-gradient(var(--dot) 1px,transparent 1px);
  background-size:104px 104px,26px 26px;
}
#app{position:relative;z-index:1;}
::selection{background:var(--gold);color:var(--bg);}
button{font-family:inherit;}
input,textarea,select{font-family:inherit;font-size:14px;}
/* iOS dá auto-zoom em inputs <16px — piso 16px no touch */
@media (max-width:768px){ input,textarea,select{font-size:16px;} }
:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* ── Ícones SVG inline (herdam currentColor) ────────────── */
.btn-icon svg{width:14px;height:14px;display:block;}
.badge svg{width:10px;height:10px;display:inline-block;vertical-align:-1px;margin-right:2px;}
.btn-test-capi svg{width:10px;height:10px;display:inline-block;vertical-align:-1px;margin-right:1px;}
.col-empty-icon svg{width:26px;height:26px;display:block;}
.palette-ic svg{width:15px;height:15px;display:block;}
.cfg-banner svg{width:13px;height:13px;display:inline-block;vertical-align:-2px;margin-right:4px;}

/* ── Scrollbars ─────────────────────────────────────────── */
*{scrollbar-width:thin;scrollbar-color:var(--s4) transparent;}
*::-webkit-scrollbar{width:8px;height:8px;}
*::-webkit-scrollbar-thumb{background:var(--s4);border-radius:4px;}
*::-webkit-scrollbar-thumb:hover{background:var(--gold-deep);}

/* ════════════════════════════════════════════════════════
   LOGIN
   ════════════════════════════════════════════════════════ */
#loginScreen{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg);z-index:100;padding:24px;
}
.login-box{
  position:relative;width:100%;max-width:400px;background:var(--s1);
  border:1px solid var(--line);border-radius:var(--r-l);
  padding:48px 40px 40px;box-shadow:var(--shadow-2);
  animation:rise .6s cubic-bezier(.2,.8,.2,1) both;
}
.login-box::before{ /* fio de ouro no topo do cartão */
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:var(--fio);
}
.selo{
  width:76px;height:76px;margin:0 auto 20px;border-radius:50%;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:var(--s2);
}
.selo::before{ /* anel flat (era conic-gradient girando) */
  content:'';position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--gold-deep);
}
.login-logo{margin:0 auto 28px;text-align:center;}
.login-logo img{width:100%;max-width:340px;height:auto;display:block;margin:0 auto;}
.login-clinic{font-family:var(--font-display);font-weight:600;font-size:28px;text-align:center;color:var(--text);line-height:1.15;}
.login-tag{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);text-align:center;margin:6px 0 30px;font-weight:500;}
.login-lbl{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);font-weight:500;margin-bottom:6px;}
.login-inp{
  width:100%;background:var(--s2);border:1px solid var(--line);border-radius:var(--r-s);
  padding:12px 14px;color:var(--text);margin-bottom:16px;transition:border-color .2s, background .2s;
}
.login-inp::placeholder{color:var(--text-3);}
.login-inp:focus{outline:none;border-color:var(--gold);background:var(--s3);}
.btn-entrar{
  width:100%;padding:13px;border:none;border-radius:var(--r-s);cursor:pointer;
  background:var(--gold);
  color:var(--ink);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .15s, box-shadow .2s, filter .2s;box-shadow:var(--shadow-1);
}
.btn-entrar:hover{transform:translateY(-1px);box-shadow:0 6px 18px var(--gold-glow);filter:brightness(1.06);}
.btn-entrar:active{transform:translateY(0);}
.btn-entrar:disabled{opacity:.6;cursor:wait;transform:none;}
.login-err{color:var(--danger);font-size:12.5px;text-align:center;min-height:18px;margin-top:12px;}
/* .login-foot saiu em 27/07 junto com o "CRM v9": versão é assunto interno e
   não tem por que aparecer pra cliente. O respiro embaixo continua vindo do
   padding do .login-box (40px). */

/* ════════════════════════════════════════════════════════
   TOPNAV
   ════════════════════════════════════════════════════════ */
.topnav{
  position:sticky;top:0;z-index:40;height:58px;
  display:flex;align-items:center;gap:18px;padding:0 20px;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topnav::after{ /* o fio de ouro da casa */
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--fio);
  opacity:.85;pointer-events:none;
}
.nav-selo{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;position:relative;
  display:flex;align-items:center;justify-content:center;background:var(--s2);
  border:1px solid var(--line-2);
}
.nav-selo span{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--gold-2);}
.logo-mark{display:block;flex-shrink:0;}
.selo .logo-mark{width:58px;height:50.75px;}
.nav-selo .logo-mark{width:24px;height:21px;}
.nav-brand{display:flex;flex-direction:column;line-height:1.05;min-width:0;}
.nav-brand b{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--text);white-space:nowrap;}
.nav-brand small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3);font-weight:500;}
.nav-spacer{flex:1;}
.sync-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:background .3s;}
.sync-dot.online{background:var(--ok);box-shadow:0 0 8px var(--ok);}
.sync-dot.connecting{background:var(--warn);animation:pulse 1.2s infinite;}
.sync-dot.offline{background:var(--danger);}
.nav-user{font-size:12px;color:var(--text-2);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-sep{width:1px;height:22px;background:var(--line);}
/* Dropdown de Relatórios */
.nav-drop{position:relative;}
.nav-drop-menu{
  display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  flex-direction:column;min-width:230px;padding:6px;
  background:var(--s1);border:1px solid var(--line-2);border-radius:var(--r-s);
  box-shadow:var(--shadow-2);
}
.nav-drop-menu.open{display:flex;}
.nav-drop-menu button{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  background:none;border:none;border-radius:7px;padding:9px 12px;cursor:pointer;
  color:var(--text);font-size:13px;font-weight:500;text-align:left;font-family:var(--font-ui);
  transition:background .15s;
}
.nav-drop-menu button:hover{background:var(--s3);}
.nav-drop-menu button small{font-size:11px;color:var(--text-3);font-weight:400;}
.btn-nav{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-s);
  background:transparent;border:1px solid transparent;color:var(--text-2);
  font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:color .15s, background .15s, border-color .15s;
}
.btn-nav:hover{color:var(--text);background:var(--gold-dim);border-color:var(--line);}
.btn-nav.primary{
  background:var(--gold);color:var(--ink);font-weight:600;
  border:none;box-shadow:var(--shadow-1);
}
.btn-nav.primary:hover{filter:brightness(1.08);box-shadow:0 4px 14px var(--gold-glow);}
/* ── Balão Conversas + Modelos ────────────────────────────────
   Um recipiente, dois destinos. O primário mantém o peso que já tinha; o
   secundário empresta a superfície do grupo, então lê como parte da mesma
   coisa sem competir. O fio no meio é 1px — separa sem virar decoração. */
.nav-grupo{display:inline-flex;align-items:stretch;border-radius:var(--r-s);
  background:var(--gold);box-shadow:var(--shadow-1);overflow:hidden;}
.nav-grupo .btn-nav.primary{border-radius:0;box-shadow:none;}
.nav-grupo .btn-nav.grupo-sec{
  border-radius:0;border:none;background:transparent;color:var(--ink);
  font-weight:500;opacity:.72;
  box-shadow:inset 1px 0 0 color-mix(in srgb,var(--ink) 22%,transparent);
}
.nav-grupo .btn-nav.grupo-sec:hover{opacity:1;background:color-mix(in srgb,var(--ink) 8%,transparent);}
.nav-grupo:hover{box-shadow:0 4px 14px var(--gold-glow);}
@media (max-width:900px){ .nav-grupo .btn-nav.grupo-sec .t{display:none;} }

.btn-nav .ic{width:15px;height:15px;fill:currentColor;flex-shrink:0;}
/* Ícone omnichannel do "Conversas": wpp + IG LADO A LADO. */
.ic-omni{display:inline-flex;align-items:center;gap:3px;flex-shrink:0;}
.ic-omni img{width:15px;height:15px;border-radius:5px;object-fit:cover;}
.btn-nav.fu-on{color:var(--ok);border-color:var(--ok-dim);background:var(--ok-dim);}
.tema-group{display:flex;gap:6px;align-items:center;padding:4px;border:1px solid var(--line);border-radius:99px;}
.btn-tema{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:transform .15s, border-color .15s;}
.btn-tema:hover{transform:scale(1.15);}
.btn-tema.active{border-color:var(--gold-2);}
.btn-tema[data-t="mono"]{background:#0a0a0a;box-shadow:inset 0 0 0 2px #28282c;}
.btn-tema[data-t="light"]{background:#fafafa;}
/* Azul SÓLIDO — o gradiente (diagonal e depois split) sempre parecia bugado no
   círculo pequeno. Sólido não tem como quebrar; representa "o tema azul". */
.btn-tema[data-t="vscode"]{background:#0a84ff;box-shadow:inset 0 0 0 2px #0768d1;}
.kbd{
  font-size:11px;color:var(--text-3);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;padding:1px 6px;background:var(--s1);font-weight:500;
}

/* ════════════════════════════════════════════════════════
   BARRA DE FERRAMENTAS DO KANBAN
   ════════════════════════════════════════════════════════ */
.toolbar{
  display:flex;align-items:center;gap:14px;padding:14px 20px 4px;position:relative;z-index:1;
}
.search-wrap{position:relative;flex:0 1 340px;}
.search-box{
  width:100%;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-s);
  padding:9px 12px 9px 36px;color:var(--text);transition:border-color .2s, box-shadow .2s;
}
.search-box::placeholder{color:var(--text-3);}
.search-box:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim);}
.search-wrap .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;fill:var(--text-3);pointer-events:none;}
.mes-select{
  background:var(--s1);border:1px solid var(--line);border-radius:var(--r-s);
  padding:9px 10px;color:var(--text-2);font-size:12px;cursor:pointer;
  transition:border-color .2s, box-shadow .2s, color .2s;
}
.mes-select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim);}
/* Filtrado = destaque dourado. Filtro escondendo lead não pode passar por tela vazia. */
.mes-select.ativo{border-color:var(--gold-deep);color:var(--gold-2);background:var(--gold-dim);}
.stat-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);
  padding:7px 12px;border:1px solid var(--line);border-radius:99px;background:var(--s1);
}
/* Aviso de leads ocultos: some sozinho quando não há nada escondido. */
.stat-pill.oculto{border-color:var(--gold-deep);color:var(--gold-2);background:var(--gold-dim);}
.stat-pill strong{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--gold-2);}
.toolbar-right{margin-left:auto;display:flex;gap:8px;align-items:center;}
.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--s1);color:var(--text-2);font-size:12px;font-weight:500;
  cursor:pointer;transition:color .15s, border-color .15s, background .15s;
}
.btn-ghost:hover{color:var(--text);border-color:var(--line-2);background:var(--s2);}
.btn-ghost .ic{width:14px;height:14px;fill:currentColor;}
/* Som ligado ACENDE (verde). Era var(--gold) = branco no tema escuro, contra o
   cinza do estado normal: diferença sutil demais pra ler de relance. A cor
   reforça; quem carrega o estado é o ícone (ondas vs cortado). Mesmo sinal do
   whatsapp.html — é o mesmo conceito nas duas telas. */
.btn-ghost.snd-on{color:var(--ok);border-color:var(--ok-dim);background:var(--ok-dim);}

/* ════════════════════════════════════════════════════════
   VITRINE DE MÉTRICAS
   ════════════════════════════════════════════════════════ */
.metricas-bar{
  margin:10px 20px 6px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--s1);box-shadow:var(--shadow-card);overflow:hidden;
  transition:max-height .35s cubic-bezier(.2,.8,.2,1), opacity .3s, margin .3s;
  max-height:160px;position:relative;z-index:1;
}
.metricas-bar.collapsed{max-height:0;opacity:0;margin-top:0;margin-bottom:0;border-width:0;}
.metricas-inner{display:flex;align-items:stretch;padding:16px 8px;}
.met-bloco{flex:1;padding:2px 22px;display:flex;flex-direction:column;justify-content:center;gap:1px;position:relative;}
.met-bloco + .met-bloco::before{content:'';position:absolute;left:0;top:12%;bottom:12%;width:1px;background:var(--line);}
.met-lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);font-weight:500;}
/* Selo do período na faixa: aparece SÓ com o filtro ligado. Número filtrado sem
   dizer que está filtrado vira leitura errada uma semana depois. */
.met-periodo{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;
  background:var(--gold-dim);color:var(--gold-2);font-size:9.5px;
  letter-spacing:.06em;vertical-align:1px;
}
.met-num{font-family:var(--font-display);font-weight:600;font-size:36px;line-height:1.05;color:var(--text);font-variant-numeric:tabular-nums;}
.met-num.gold{color:var(--gold-2);}
.met-taxa-row{display:flex;align-items:baseline;gap:8px;}
.met-taxa-pct{font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--text);font-variant-numeric:tabular-nums;}
.met-taxa-sub{font-size:11px;color:var(--text-3);letter-spacing:.06em;}
.met-bar-bg{height:3px;background:var(--s3);border-radius:2px;margin-top:8px;overflow:hidden;}
.met-bar-fill{height:100%;border-radius:2px;background:var(--gold-2);width:0%;transition:width .8s cubic-bezier(.2,.8,.2,1);}
.metricas-toggle{
  position:absolute;top:-1px;right:18px;transform:translateY(-100%);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
  background:none;border:none;cursor:pointer;padding:4px 8px;font-weight:500;
}
.metricas-toggle:hover{color:var(--gold);}

/* ════════════════════════════════════════════════════════
   KANBAN
   ════════════════════════════════════════════════════════ */
.kanban-wrap{padding:8px 20px 26px;position:relative;z-index:1;}
.kanban-board{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:10px;min-height:calc(100vh - 320px);}
.kanban-col{
  flex:1 1 0;min-width:200px;display:flex;flex-direction:column;max-height:calc(100vh - 250px);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-m);
}
.col-header{
  display:flex;align-items:center;gap:9px;padding:13px 14px 11px;
  border-bottom:1px solid var(--line);flex-shrink:0;position:relative;
}
.col-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 7px currentColor;}
.col-name{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.col-count{
  font-size:11px;font-weight:600;color:var(--text-2);background:var(--s2);
  border:1px solid var(--line);border-radius:99px;min-width:24px;height:21px;
  display:flex;align-items:center;justify-content:center;padding:0 7px;font-variant-numeric:tabular-nums;
}
.col-sum{font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--gold-2);white-space:nowrap;}
.btn-test-capi{
  font-size:10.5px;letter-spacing:.06em;background:var(--violet-dim);color:var(--violet);
  border:1px solid transparent;border-radius:6px;padding:3px 7px;cursor:pointer;font-weight:600;
}
.btn-test-capi:hover{border-color:var(--violet);}
.col-body{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:9px;transition:background .2s;}
.col-body.drag-over{background:var(--gold-dim);}
.col-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 0 22px;color:var(--text-3);}
.col-empty-icon{font-family:var(--font-display);font-size:22px;color:var(--line-2);}
.col-empty-text{font-size:11px;letter-spacing:.12em;text-transform:uppercase;}
.btn-add-card{
  margin-top:2px;padding:9px;border:1px dashed var(--line);border-radius:var(--r-s);
  background:transparent;color:var(--text-3);font-size:12px;font-weight:500;cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
.btn-add-card:hover{color:var(--gold);border-color:var(--gold-deep);background:var(--gold-dim);}

/* ── Card de lead ── */
.card{
  position:relative;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-s);
  padding:12px 13px 10px;cursor:pointer;box-shadow:var(--shadow-card);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s;
}
/* entrada anima só no primeiro paint — re-renders do realtime não fazem o board inteiro piscar */
.kanban-board.anim .card{animation:rise .35s cubic-bezier(.2,.8,.2,1) both;}
.card::before{ /* fio que acende no hover */
  content:'';position:absolute;top:-1px;left:10%;right:10%;height:1px;
  background:var(--fio);opacity:0;transition:opacity .25s;
}
.card:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:var(--shadow-2);}
.card:hover::before{opacity:1;}
.card.dragging{opacity:.45;transform:rotate(2deg) scale(1.02);}
.card.esfriando{border-color:color-mix(in srgb, var(--warn) 45%, var(--line));}
.card-top{display:flex;align-items:center;gap:10px;}
.card-avatar-img,.card-avatar-ph{width:38px;height:38px;border-radius:50%;flex-shrink:0;}
.card-avatar-img{object-fit:cover;border:1px solid var(--line-2);}
.card-avatar-ph{
  display:flex;align-items:center;justify-content:center;background:var(--s3);
  border:1px solid var(--line);font-family:var(--font-display);font-weight:600;
  font-size:17px;color:var(--gold-2);
}
.card-info{flex:1;min-width:0;}
.card-name{font-weight:500;font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-tel{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums;}
.unread-badge{
  min-width:20px;height:20px;border-radius:99px;padding:0 6px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold);color:var(--ink);
  font-size:11px;font-weight:700;
}
.card-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.badge{
  font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 7px;border-radius:6px;border:1px solid transparent;line-height:1.3;
}
.badge-qualif{background:var(--gold-dim);color:var(--gold-2);border-color:var(--gold-deep);}
/* Safra: a data do rodapé JÁ diz o mês, então ela mesma é o selo — sem badge
   separado repetindo "JUL/26" ao lado de um "21/07". Destaca só quando é de mês
   anterior: lead de junho ainda aberto em agosto é o que precisa saltar. */
.card-data.antigo{color:var(--warn);font-weight:600;}
/* Origem é METADADO, não status. Cinco chips saturados brigando em cada card
   faziam o board parecer semáforo e roubavam a atenção do que pede ação
   (qualificado, sugestão da IA, não lida). Viraram ponto colorido + texto
   neutro: a cor ainda separa a origem de relance, mas para de gritar. */
/* Carimbo de demonstração. Vem primeiro nos badges e usa a cor de alerta:
   quem bate o olho tem que saber que aquilo não é paciente de verdade antes
   de ler qualquer outra coisa do card. */
.badge.demo{background:rgba(180,140,20,.14);color:#b8860b;border:1px solid rgba(180,140,20,.35);
  font-weight:800;letter-spacing:.06em;}

.badge.pub{
  background:none;border-color:transparent;padding:3px 0;
  color:var(--text-2);font-weight:500;font-size:11px;
  text-transform:none;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:6px;
}
.badge.pub::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--pub-dot,var(--text-3));}
.badge-form{--pub-dot:var(--info);}
.badge-linkbio{--pub-dot:var(--ok);}
.badge-direto{--pub-dot:var(--warn);}
.badge-anuncio-ig{--pub-dot:var(--violet);}   /* Anúncio Direct (IG) */
.badge-anuncio-wpp{--pub-dot:var(--wpp);}     /* Anúncio WhatsApp (CTWA) */
/* Selo de PROGRAMA/LP (por lp_id, não origem) — ex.: Mulher Inabalável (Val). */
.badge-programa{--pub-dot:#b06b7e;}
/* Vigia do Kanban — sugestão da IA aguardando ✓/✗ da secretária */
.ia-sug{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;
  padding:6px 9px;background:var(--violet-dim);border:1px solid transparent;
  border-radius:8px;font-size:11.5px;color:var(--violet);
}
.ia-sug-txt{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ia-sug-txt b{font-weight:700;}
.ia-sug-txt svg{width:1em;height:1em;fill:currentColor;flex-shrink:0;}
.ia-sug-btns{display:flex;gap:4px;flex-shrink:0;}
.ia-sug-btn{
  width:24px;height:24px;border-radius:6px;border:1px solid var(--line-2);
  background:var(--s2);color:var(--text-2);cursor:pointer;font-size:12px;line-height:1;
  transition:all .12s;
}
.ia-sug-btn.ok:hover{color:var(--ok);border-color:var(--ok);}
.ia-sug-btn.no:hover{color:var(--danger);border-color:var(--danger);}
.ia-sug.pix{background:var(--ok-dim,rgba(34,197,94,.12));color:var(--ok);}
/* flex-wrap: em zoom alto (ou coluna estreita) as ações quebram pra linha
   de baixo em vez de vazar pra fora do card */
.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:9px;gap:4px 8px;flex-wrap:wrap;min-width:0;}
.card-footer .card-actions{margin-left:auto;flex-shrink:0;}
/* Régua de follow-up 24h · 3d · 7d · nutrição. Eram 4 selos com borda repetidos
   em TODO card (4 × nº de leads = ~112 caixinhas num board de 28) para comunicar
   um dado que é ordinal — "até onde o follow-up chegou". Virou barra de 4
   segmentos + o rótulo da etapa atual: mesma informação, um terço do peso. */
.fu-track{display:flex;gap:7px;align-items:center;min-width:0;}
.fu-segs{display:flex;gap:3px;width:56px;flex-shrink:0;}
.fu-seg{height:3px;flex:1;border-radius:2px;background:var(--line-2);transition:background .2s;}
.fu-seg.on{background:var(--ok);}
.fu-seg.n.on{background:var(--violet);}
.fu-lbl{font-size:10.5px;font-weight:500;color:var(--text-3);letter-spacing:.03em;white-space:nowrap;}
.fu-track.fu-off .fu-seg{background:var(--line);}
.fu-track.fu-off .fu-lbl{text-decoration:line-through;}
/* .btn-quest saiu em 28/07: era a pílula com borda das ações do card, e o
   último a usá-la (anamnese) passou pra família .act-inline. Estava definida
   DUAS vezes no arquivo — esta e outra ~350 linhas abaixo, que vencia. CSS
   morto que ainda parece vivo é o que faz a gente editar o bloco errado. */
/* Rodapé discreto: clínica · data */
.card-rodape{
  margin-top:8px;padding-top:7px;border-top:1px solid var(--line);
  font-size:10.5px;color:var(--text-3);letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Questionário no modal */
.quest-row{display:flex;flex-direction:column;gap:2px;padding:9px 0;border-bottom:1px solid var(--line);}
.quest-row:last-child{border-bottom:none;}
.quest-lbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:600;}
.quest-val{font-size:13.5px;color:var(--text);line-height:1.45;}
.card-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s;}
.card:hover .card-actions,.card:focus-within .card-actions{opacity:1;}
.btn-icon{
  width:26px;height:26px;border:none;border-radius:7px;background:transparent;
  color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:13px;transition:background .15s, color .15s;
}
.btn-icon:hover{background:var(--s3);color:var(--text);}
.btn-icon.del:hover{background:var(--danger-dim);color:var(--danger);}
.btn-icon.mover:hover{background:var(--info-dim);color:var(--info);}
.btn-icon.qualif-on{color:var(--gold);}
/* Touch: sem hover, ações sempre visíveis e com alvo maior */
@media (hover:none){
  .card-actions{opacity:1;}
  .btn-icon{width:34px;height:34px;font-size:15px;}
}

/* skeleton — pulso flat (era shimmer com gradiente) */
.sk{position:relative;overflow:hidden;background:var(--s2);border-radius:var(--r-s);animation:pulse 1.6s ease-in-out infinite;}
.sk-card{height:96px;margin-bottom:9px;}

/* ════════════════════════════════════════════════════════
   CHAT LATERAL (iframe whatsapp.html)
   ════════════════════════════════════════════════════════ */
.chat-pane{
  position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);z-index:60;
  background:var(--bg);border-left:1px solid var(--line-2);
  transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;box-shadow:-18px 0 50px rgba(0,0,0,.45);
}
.chat-pane.open{transform:translateX(0);}
.chat-pane-toolbar{
  height:50px;display:flex;align-items:center;gap:10px;padding:0 14px;
  border-bottom:1px solid var(--line);flex-shrink:0;position:relative;
}
.chat-pane-toolbar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--fio);opacity:.7;}
.chat-pane-lead{font-family:var(--font-display);font-weight:600;font-size:17px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.btn-pane{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:var(--s1);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;text-decoration:none;transition:color .15s,border-color .15s;}
.btn-pane:hover{color:var(--gold);border-color:var(--line-2);}
#chatFrame{flex:1;width:100%;border:none;background:var(--bg);}

/* ════════════════════════════════════════════════════════
   MODAIS
   ════════════════════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(8,6,4,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .22s;padding:20px;
}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal{
  width:100%;max-width:440px;background:var(--s1);border:1px solid var(--line-2);
  border-radius:var(--r-l);padding:28px;box-shadow:var(--shadow-2);position:relative;
  transform:translateY(14px) scale(.98);transition:transform .25s cubic-bezier(.2,.8,.2,1);
  max-height:90vh;overflow-y:auto;
}
.modal-overlay.open .modal{transform:translateY(0) scale(1);}
.modal::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:var(--fio);}
.modal-eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:4px;}
.modal-title{font-family:var(--font-display);font-weight:600;font-size:24px;margin-bottom:18px;line-height:1.15;}
.modal-lbl{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);font-weight:500;margin-bottom:5px;}
.modal-inp{
  width:100%;background:var(--s2);border:1px solid var(--line);border-radius:var(--r-s);
  padding:10px 12px;color:var(--text);margin-bottom:14px;transition:border-color .2s;
}
.modal-inp:focus{outline:none;border-color:var(--gold);}
textarea.modal-inp{resize:vertical;min-height:70px;}
.modal-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.modal-actions{display:flex;gap:10px;margin-top:8px;}
.btn-m{
  flex:1;padding:11px;border-radius:var(--r-s);cursor:pointer;font-weight:600;font-size:13px;
  letter-spacing:.04em;transition:filter .15s, transform .12s;
}
.btn-m:active{transform:scale(.985);}
.btn-m.primary{border:none;background:var(--gold);color:var(--ink);}
.btn-m.primary:hover{filter:brightness(1.08);}
.btn-m.ghost{background:transparent;border:1px solid var(--line);color:var(--text-2);}
.btn-m.ghost:hover{color:var(--text);border-color:var(--line-2);}
.btn-m.danger{border:none;background:var(--danger);color:#fff;}
.btn-m:disabled{opacity:.55;cursor:wait;}
.modal-lead-ctx{
  display:flex;align-items:center;gap:10px;background:var(--s2);border:1px solid var(--line);
  border-radius:var(--r-s);padding:10px 12px;margin-bottom:16px;font-size:13px;
}
.modal-lead-ctx b{font-weight:600;}
.modal-lead-ctx span{color:var(--text-3);font-size:12px;}
.modal-warn-sub{color:var(--text-2);font-size:13.5px;margin-bottom:18px;line-height:1.5;}

/* modais de iframe (FU/Analytics/Anúncios/Análise) */
.modal-frame-overlay{
  position:fixed;inset:0;z-index:75;background:rgba(8,6,4,.66);backdrop-filter:blur(6px);
  display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .22s;
}
.modal-frame-overlay.open{opacity:1;pointer-events:auto;}
.modal-frame-bar{
  height:50px;display:flex;align-items:center;gap:12px;padding:0 18px;flex-shrink:0;
  background:var(--s1);border-bottom:1px solid var(--line);position:relative;
}
.modal-frame-bar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--fio);opacity:.7;}
.modal-frame-title{font-family:var(--font-display);font-weight:600;font-size:18px;flex:1;}
.modal-frame-iframe{flex:1;width:100%;border:none;background:var(--bg);}

/* ════════════════════════════════════════════════════════
   COMMAND PALETTE (Ctrl+K)
   ════════════════════════════════════════════════════════ */
.palette-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(8,6,4,.55);backdrop-filter:blur(5px);
  display:none;align-items:flex-start;justify-content:center;padding-top:14vh;
}
.palette-overlay.open{display:flex;}
.palette{
  width:min(560px,92vw);background:var(--s1);border:1px solid var(--line-2);
  border-radius:var(--r-m);box-shadow:var(--shadow-2);overflow:hidden;position:relative;
  animation:rise .25s cubic-bezier(.2,.8,.2,1) both;
}
.palette::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:var(--fio);}
.palette-inp{
  width:100%;padding:17px 20px;background:transparent;border:none;color:var(--text);
  font-size:16px;border-bottom:1px solid var(--line);
}
.palette-inp:focus{outline:none;}
.palette-list{max-height:340px;overflow-y:auto;padding:7px;}
.palette-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-s);
  cursor:pointer;transition:background .12s;
}
.palette-item.sel,.palette-item:hover{background:var(--gold-dim);}
.palette-ic{width:30px;height:30px;border-radius:8px;background:var(--s3);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;font-family:var(--font-display);font-weight:600;color:var(--gold-2);}
.palette-txt{flex:1;min-width:0;}
.palette-name{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.palette-sub{font-size:11px;color:var(--text-3);}
.palette-hint{font-size:11px;color:var(--text-3);letter-spacing:.08em;}
.palette-empty{padding:26px;text-align:center;color:var(--text-3);font-size:13px;}

/* ════════════════════════════════════════════════════════
   TOAST · BANNER · ANIMAÇÕES
   ════════════════════════════════════════════════════════ */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(70px);
  background:var(--s2);border:1px solid var(--line-2);color:var(--text);
  padding:11px 22px;border-radius:99px;font-size:13px;z-index:120;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none;box-shadow:var(--shadow-2);
}
.toast.show{transform:translateX(-50%) translateY(0);}
/* Sem isto o botão Desfazer herda pointer-events:none e vira decoração */
.toast button{pointer-events:auto;}
/* Toast dispensado sai de verdade — sem botão fantasma na ordem de Tab */
.toast:not(.show){visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s;}
/* Venda fechada — o pico do dia da dona ganha peso (sem virar carnaval) */
.toast.venda{
  border-color:var(--gold-deep);background:var(--s3);padding:14px 26px;
  font-size:14.5px;display:flex;align-items:center;gap:10px;
}
.toast.venda svg{width:18px;height:18px;color:var(--gold-2);flex-shrink:0;}
.toast.venda .venda-txt b{font-size:16px;letter-spacing:.01em;}
.col-sum.celebrar{animation:venda-pulse .9s cubic-bezier(.2,.8,.2,1) both;}
@keyframes venda-pulse{
  0%{transform:scale(1);}
  30%{transform:scale(1.35);}
  100%{transform:scale(1);}
}
.cfg-banner{
  margin:10px 20px 0;padding:10px 16px;border:1px solid var(--warn);border-radius:var(--r-s);
  background:var(--warn-dim);color:var(--warn);font-size:12.5px;display:none;position:relative;z-index:1;
}
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ════════════════════════════════════════════════════════
   RESPONSIVO
   ════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .nav-brand small{display:none;}
  .btn-nav span.t{display:none;}
  .btn-nav{padding:7px 9px;}
  .metricas-inner{flex-wrap:wrap;}
  .met-bloco{flex:1 1 40%;padding:8px 16px;}
  .met-bloco + .met-bloco::before{display:none;}
  .toolbar{flex-wrap:wrap;}
  .search-wrap{flex:1 1 100%;}
  .kanban-col{flex:0 0 84vw;}
  .kbd{display:none;}
}

/* ════════════════════════════════════════════════════════
   SELETOR DE CLÍNICA (admin)
   ════════════════════════════════════════════════════════ */
#clinicSelectorScreen{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:var(--bg);z-index:100;padding:24px;flex-direction:column;overflow:auto;
}
#clinicSelectorScreen::before{ /* mesmo dot grid sutil do #app — a tela opaca tapava o do body */
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(var(--dot-major) 1.3px,transparent 1.3px),
    radial-gradient(var(--dot) 1px,transparent 1px);
  background-size:104px 104px,26px 26px;
}
.clinic-sel-box{position:relative;z-index:1;width:100%;max-width:640px;}
.clinic-sel-title{
  font-family:var(--font-display);font-weight:600;font-size:26px;
  text-align:center;margin-bottom:4px;color:var(--text);
}
.clinic-sel-sub{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);
  text-align:center;margin-bottom:28px;font-weight:500;
}
.clinic-sel-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;
}
.clinic-card{
  display:flex;flex-direction:column;gap:5px;padding:18px 20px;
  background:var(--s1);border:1px solid var(--line);border-radius:var(--r-m);
  cursor:pointer;text-align:left;transition:border-color .2s,background .2s,transform .18s,box-shadow .2s;
  position:relative;
}
/* Atalho pro Kanban beta, no canto de cada clínica. É <span> e não <button>
   porque o card já é um botão — botão dentro de botão é HTML inválido e o
   navegador desmonta a estrutura. Discreto de propósito: quem trabalha aqui
   vai pro CRM de sempre; o beta é passagem, não destino. */
.clinic-beta{
  position:absolute;top:10px;right:10px;z-index:2;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:11px;
  background:var(--gold-dim);color:var(--text-3);border:1px solid var(--line-2);
  opacity:.55;transition:opacity .18s,color .18s,border-color .18s;
}
.clinic-card:hover .clinic-beta{opacity:1;}
.clinic-beta:hover,.clinic-beta:focus-visible{
  opacity:1;color:var(--gold-2);border-color:var(--gold-2);background:var(--gold-glow);
}
.clinic-beta:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;}
.clinic-card::before{
  content:'';position:absolute;top:-1px;left:10%;right:10%;height:1px;
  background:var(--fio);opacity:0;transition:opacity .25s;
}
.clinic-card:hover{border-color:var(--line-2);background:var(--s2);transform:translateY(-2px);box-shadow:var(--shadow-2);}
.clinic-card:hover::before{opacity:1;}
.clinic-card-name{font-weight:600;font-size:15px;color:var(--text);}
.clinic-card-tag{font-size:11px;color:var(--text-3);letter-spacing:.04em;}
.clinic-card-badge{
  display:inline-block;margin-top:8px;padding:2px 8px;border-radius:20px;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.clinic-card-badge.expired{background:var(--danger-dim);color:var(--danger);border:1px solid var(--danger);}
.clinic-card-badge.expiring{background:var(--warn-dim);color:var(--warn);border:1px solid var(--warn);}
/* Ferramentas de admin: mesmo cartão, borda tracejada — distinção sem carnaval */
.clinic-card-admin{border-style:dashed;background:var(--bg-soft);}
.clinic-card-admin .clinic-card-name{color:var(--text-2);}
.clinic-card-admin:hover .clinic-card-name{color:var(--text);}
/* Separador de seção dentro do grid (ocupa a linha inteira) */
.selector-divider{
  grid-column:1/-1;margin:14px 0 2px;padding-top:16px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);font-weight:600;
}
/* Projetos que não são clínicas: cartão sólido com traço violeta discreto */
.clinic-card-projeto{background:var(--s1);}
.clinic-card-projeto .clinic-card-name{color:var(--text);}
.clinic-card-projeto:hover{border-color:var(--violet);}
.btn-back-sel{
  display:block;margin:20px auto 0;background:none;border:none;cursor:pointer;
  font-size:12px;color:var(--text-3);letter-spacing:.08em;text-transform:uppercase;font-weight:500;
}
.btn-back-sel:hover{color:var(--text);}