/* ============================================================
   Agente WhatsApp — Design System & Premium UI (Slate / Indigo)
   ============================================================ */
:root {
  /* Escala de cores premium multinacional */
  --bg1: #0a0d16;
  --bg2: #0e1322;
  --bg: #0a0d16;
  --surface: #151c2e;
  --surface-2: #1e2942;
  --surface-3: #283756;
  
  --border: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.04);
  --input: #070a12;
  
  --text: #f1f5f9;
  --muted: #94a3b8;
  --muted-2: #64748b;
  
  /* Acentos corporativos e modernos */
  --primary: #6366f1; /* Indigo */
  --primary-2: #4f46e5;
  --accent: #10b981; /* Emerald/Mint */
  --accent-light: #34d399;
  
  /* Estados */
  --ok: #10b981;
  --ok-bg: rgba(16, 185, 129, 0.1);
  --warn: #f59e0b;
  --warn-bg: rgba(245, 158, 11, 0.1);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.1);
  
  --ring: rgba(99, 102, 241, 0.35);
  --radius: 16px;
  --radius-sm: 10px;
  
  /* Sombras — elevação discreta, sem glow */
  --shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.02) inset;
  --grad: linear-gradient(135deg, var(--primary), var(--primary-2));
  --grad-hover: linear-gradient(135deg, var(--primary-2), #4338ca);
  --grad-active: rgba(99, 102, 241, 0.12);

  /* Escala de espaçamento */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.25rem;
  --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem; --s12: 3rem;
  
  /* Larguras do app-shell */
  --w-sidebar: 270px; --w-lista: 350px; --w-painel: 300px;
  --h-topbar: 75px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0; color:var(--text); background:var(--bg1);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.6;
  font-feature-settings:"cv02","cv03","cv04","cv11"; -webkit-font-smoothing:antialiased; letter-spacing:-.011em;
}

a{color:var(--accent-light); text-decoration:none; transition:color .15s}
a:hover{color:var(--primary); text-decoration:none}
h1,h2,h3{margin:0; letter-spacing:-.02em; color:#fff}

::selection{background:rgba(99, 102, 241, .3)}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#1e293b; border-radius:8px; border:2px solid transparent; background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#334155; background-clip:padding-box}

/* ---------- App-shell (sidebar + conteúdo) ---------- */
.layout{display:flex; min-height:100vh}

.sidebar{
  width:var(--w-sidebar); flex:0 0 var(--w-sidebar); 
  background: linear-gradient(180deg, #070910 0%, #0d1222 100%);
  border-right:1px solid var(--border); display:flex; flex-direction:column; padding:1.75rem 1.25rem;
  position:sticky; top:0; height:100vh;
}

.brand{display:flex; align-items:center; gap:.75rem; padding:.5rem .75rem 1.75rem; border-bottom:1px solid var(--border); margin-bottom:1.25rem}
.brand .logo{width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:var(--primary); color:#fff;
}
.brand .logo svg{width:20px; height:20px}
.brand b{font-size:1.05rem; font-weight:700; color:#fff; letter-spacing:-0.02em}

.nav{display:flex; flex-direction:column; gap:.35rem}
.nav a{display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; border-radius:var(--radius-sm);
  color:var(--muted); font-weight:600; font-size:.92rem; 
  border-left: 3px solid transparent;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* Interação premium individual - elastic translate e scale */
.nav a:hover{
  text-decoration: none; 
  transform: translateX(6px) scale(1.015);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.nav a.ativo, .nav a.active {
  font-weight: 700;
  transform: translateX(4px);
  box-shadow: var(--shadow-card);
}

.nav-details summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.nav-details summary::-webkit-details-marker {
  display: none;
}
.nav-details summary .caret {
  font-size: 0.7rem;
  transition: transform 0.2s;
  float: right;
  margin-top: 4px;
}
.nav-details[open] summary .caret {
  transform: rotate(-180deg);
}

/* Rastreamento e estilização de cores permanentes e glows específicos para cada botão da esquerda */
/* 1. Dashboard - Indigo */
.nav a[href="/inicio"] .ico {
  color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
}
.nav a[href="/inicio"]:hover, .nav a.ativo[href="/inicio"] {
  border-left-color: #6366f1;
  background: rgba(99, 102, 241, 0.12);
  color: #c7d2fe;
}
.nav a[href="/inicio"]:hover .ico, .nav a.ativo[href="/inicio"] .ico {
  color: #ffffff;
  background: #6366f1;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
}

/* 2. Conversas - Emerald */
.nav a[href^="/dashboard"] .ico {
  color: #10b981;
  background: rgba(16, 185, 129, 0.08);
}
.nav a[href^="/dashboard"]:hover, .nav a.ativo[href^="/dashboard"] {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  color: #a7f3d0;
}
.nav a[href^="/dashboard"]:hover .ico, .nav a.ativo[href^="/dashboard"] .ico {
  color: #ffffff;
  background: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

/* 3. Contatos & Campanhas - Amber */
.nav a[href="/contatos-lista"] .ico {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}
.nav a[href="/contatos-lista"]:hover, .nav a.ativo[href="/contatos-lista"] {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
}
.nav a[href="/contatos-lista"]:hover .ico, .nav a.ativo[href="/contatos-lista"] .ico {
  color: #ffffff;
  background: #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

/* 4. Relatórios - Blue */
.nav a[href="/relatorios"] .ico {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}
.nav a[href="/relatorios"]:hover, .nav a.ativo[href="/relatorios"] {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.12);
  color: #bfdbfe;
}
.nav a[href="/relatorios"]:hover .ico, .nav a.ativo[href="/relatorios"] .ico {
  color: #ffffff;
  background: #3b82f6;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

/* 5. Agente - Pink */
.nav a[href="/admin"] .ico {
  color: #ec4899;
  background: rgba(236, 72, 153, 0.08);
}
.nav a[href="/admin"]:hover, .nav a.ativo[href="/admin"] {
  border-left-color: #ec4899;
  background: rgba(236, 72, 153, 0.12);
  color: #fbcfe8;
}
.nav a[href="/admin"]:hover .ico, .nav a.ativo[href="/admin"] .ico {
  color: #ffffff;
  background: #ec4899;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.4);
}

/* 6. Simulador - Purple */
.nav a[href="/simulador"] .ico {
  color: #a855f7;
  background: rgba(168, 85, 247, 0.08);
}
.nav a[href="/simulador"]:hover, .nav a.ativo[href="/simulador"] {
  border-left-color: #a855f7;
  background: rgba(168, 85, 247, 0.12);
  color: #e9d5ff;
}
.nav a[href="/simulador"]:hover .ico, .nav a.ativo[href="/simulador"] .ico {
  color: #ffffff;
  background: #a855f7;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

/* 7. Integrações - Cyan */
.nav a[href="/integracoes"] .ico {
  color: #06b6d4;
  background: rgba(6, 182, 212, 0.08);
}
.nav a[href="/integracoes"]:hover, .nav a.ativo[href="/integracoes"] {
  border-left-color: #06b6d4;
  background: rgba(6, 182, 212, 0.12);
  color: #c5f2f7;
}
.nav a[href="/integracoes"]:hover .ico, .nav a.ativo[href="/integracoes"] .ico {
  color: #ffffff;
  background: #06b6d4;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
}

/* 8. Equipe - Teal */
.nav a[href="/contas"] .ico {
  color: #14b8a6;
  background: rgba(20, 184, 166, 0.08);
}
.nav a[href="/contas"]:hover, .nav a.ativo[href="/contas"] {
  border-left-color: #14b8a6;
  background: rgba(20, 184, 166, 0.12);
  color: #99f6e4;
}
.nav a[href="/contas"]:hover .ico, .nav a.ativo[href="/contas"] .ico {
  color: #ffffff;
  background: #14b8a6;
  box-shadow: 0 0 10px rgba(20, 184, 166, 0.4);
}

/* 9. Minha conta - Lime */
.nav a[href="/conta"] .ico {
  color: #84cc16;
  background: rgba(132, 204, 22, 0.08);
}
.nav a[href="/conta"]:hover, .nav a.ativo[href="/conta"] {
  border-left-color: #84cc16;
  background: rgba(132, 204, 22, 0.12);
  color: #e2f8c5;
}
.nav a[href="/conta"]:hover .ico, .nav a.ativo[href="/conta"] .ico {
  color: #ffffff;
  background: #84cc16;
  box-shadow: 0 0 10px rgba(132, 204, 22, 0.4);
}

/* Sair - Red */
.nav a[href="/logout"] .ico {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}
.nav a[href="/logout"]:hover {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}
.nav a[href="/logout"]:hover .ico {
  color: #ffffff;
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

/* Ícones dos menus laterais */
.nav .ico{width:28px; height:28px; display:grid; place-items:center; flex:0 0 28px;
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  border-radius: 6px;
}
.nav .ico svg{width:18px; height:18px; stroke-width: 2px;}

.nav-badge{margin-left:auto; background:var(--danger); color:#fff; font-size:.66rem; font-weight:700;
  min-width:18px; height:18px; padding:0 .3rem; border-radius:999px; display:grid; place-items:center;
  box-shadow: 0 0 8px var(--danger);
}
.nav-badge[hidden]{display:none}
.nav-group{font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-2); padding:1.5rem .85rem .45rem}
.nav-group:first-child{padding-top:.2rem}

.side-foot{margin-top:auto; border-top:1px solid var(--border); padding-top:1.25rem}
.side-user{display:flex; align-items:center; gap:.75rem; padding:.5rem .75rem .75rem}
.side-user .su-av{width:36px; height:36px; flex:0 0 36px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:.9rem; color:#fff; background:var(--grad)}
.side-user .su-info{min-width:0}
.side-user .su-email{font-size:.85rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600}
.side-user .papel{display:inline-block; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  background:rgba(99, 102, 241, 0.15); color:var(--accent-light); padding:.1rem .5rem; border-radius:999px; margin-top:.25rem}

.main{flex:1; min-width:0; display:flex; flex-direction:column; background:var(--bg2)}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:1rem; position:sticky; top:0; z-index:5;
  padding:1.25rem 2.5rem; border-bottom:1px solid var(--border); background:rgba(14, 19, 34, 0.8); backdrop-filter:blur(16px)}
.topbar h1{font-size:1.5rem; font-weight:800; color:#fff; letter-spacing:-0.02em}
.topbar .sub{color:var(--muted); font-size:.88rem; margin-top:.25rem}
.content{padding:2.5rem; width:100%; animation:fade .25s cubic-bezier(0.16, 1, 0.3, 1); max-width: 1300px; margin: 0 auto}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}

/* ---------- Cartões (SaaS Style) ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.75rem; margin-bottom:1.5rem; box-shadow:var(--shadow-card);
  transition: border-color 0.2s ease}
.card:hover{border-color:rgba(255,255,255,0.15)}
/* Cards clicáveis/interativos que merecem elevação */
.card-interativo{transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease}
.card-interativo:hover{border-color:rgba(255,255,255,0.16)}
.card h2{font-size:1.15rem; font-weight:700; display:flex; align-items:center; gap:.65rem; color:#fff}
.card .hint{color:var(--muted); font-size:.88rem; margin:.4rem 0 1rem; line-height:1.6}
.section-title{font-size:1rem; font-weight:700; margin:1.75rem 0 .5rem; color:#fff}
.mt{margin-top:1.5rem}
.mt-sm{margin-top:.75rem}
.btn-row{display:flex; gap:.75rem; flex-wrap:wrap; align-items:center}

/* ---------- Formulários ---------- */
.field{margin-top:1.25rem}
.field:first-child{margin-top:0}
label{display:block; font-size:.75rem; font-weight:600; letter-spacing:.05em;
  color:var(--muted); margin-bottom:.5rem; text-transform:uppercase}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=date],textarea,select{
  width:100%; padding:.75rem 1rem; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--input); color:#fff; font-size:.95rem; font-family:inherit;
  transition:border .15s, box-shadow .15s; outline: none}
textarea{min-height:100px; resize:vertical; line-height:1.6}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:hover,textarea:hover,select:hover{border-color:rgba(255,255,255,0.15)}
input:focus,textarea:focus,select:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--ring)}

.row{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
.row.align-end{align-items:flex-end}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem 1.5rem}
.form-grid .field{margin-top:0}
.form-grid .full{grid-column:1 / -1}
.switch{display:flex; align-items:center; gap:.75rem; margin-top:1.25rem; padding:.85rem 1rem;
  background:rgba(255,255,255,0.02); border:1px solid var(--border-soft); border-radius:var(--radius-sm)}
.switch input{width:18px; height:18px; accent-color:var(--primary); cursor:pointer}
.switch label{margin:0; text-transform:none; font-size:.92rem; font-weight:550; color:#fff; letter-spacing:0}

/* ---------- Botões (SaaS Style) ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:1px solid transparent;
  cursor:pointer; color:#fff; font-weight:600; font-size:.92rem; padding:.65rem 1.25rem; border-radius:var(--radius-sm);
  background:var(--primary); text-decoration:none;
  transition:background .15s, border-color .15s, opacity .15s, box-shadow .15s, transform .15s}
.btn:hover{background:var(--primary-2); text-decoration:none; box-shadow: 0 1px 2px rgba(0,0,0,0.3)}
.btn:active{opacity:.9; transform: translateY(0)}
.btn-ghost{background:transparent; color:#fff; border-color:var(--border)}
.btn-ghost:hover{background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.15); box-shadow: none; transform: none}
.btn-block{width:100%; font-size:.95rem; padding:.85rem}
.btn-sm{padding:.45rem .9rem; font-size:.82rem}
.btn:disabled,.btn[disabled],.btn.is-disabled{opacity:.5; cursor:not-allowed; box-shadow: none !important; transform: none !important}
.fab {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  width: 56px;
  height: 56px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition: background .15s, transform .15s;
  z-index: 100;
}
.fab:hover {
  background: var(--primary-2);
  transform: translateY(-2px);
}
.fab svg {
  width: 24px;
  height: 24px;
}

/* ---------- Badges (Pill style) ---------- */
.badge{display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:.25rem .75rem; border-radius:999px}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge-ok{background:var(--ok-bg); color:var(--ok)}
.badge-warn{background:var(--warn-bg); color:var(--warn)}
.badge-muted{background:rgba(255,255,255,0.06); color:var(--muted)}
.badge-muted::before{display:none}

/* ---------- Lista de empresas ---------- */
.item{
  display:flex; justify-content:space-between; align-items:center; gap:1.25rem; flex-wrap:wrap;
  border: 1px solid var(--border); padding:1.25rem 1.5rem; border-radius: var(--radius);
  background: var(--surface-2); margin-bottom: 0.75rem;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.item:hover {
  border-color: rgba(255,255,255,0.12);
  background: var(--surface-3);
  box-shadow: var(--shadow-card);
}
.item .nome{font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; color:#fff}
.item .meta{color:var(--muted); font-size:.85rem; margin-top:.4rem}
.metrics{display:flex; gap:1.25rem; color:var(--muted); font-size:.86rem; margin-top:.6rem; flex-wrap:wrap}
.metrics b{color:#fff}
.actions{display:flex; gap:.6rem; flex-wrap:wrap}

/* ---------- Alertas / mensagens (semânticos) ---------- */
.flash{display:flex; align-items:center; gap:.65rem; padding:.85rem 1.25rem; border-radius:var(--radius-sm);
  font-size:.92rem; margin-bottom:1.25rem; background:var(--surface); border:1px solid var(--border)}
.flash::before{content:"i"; font-weight:700; color:var(--muted)}
.flash.ok{background:var(--ok-bg); border-color:rgba(63, 185, 80, 0.25); color:#a7f3d0}
.flash.ok::before{content:"✓"; color:inherit}
.flash.err{background:var(--danger-bg); border-color:rgba(229, 72, 77, 0.25); color:#fca5a5}
.flash.err::before{content:"!"; color:inherit}
.flash.warn{background:var(--warn-bg); border-color:rgba(227, 179, 65, 0.25); color:#fde68a}
.flash.warn::before{content:"!"; color:inherit}

/* ---------- Conversas ---------- */
.toolbar{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem}
.toolbar select{width:auto; min-width:200px}
.toolbar input{width:auto; min-width:260px; flex:1}
.chats{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1.25rem}
.chat{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.35rem; display:flex; flex-direction:column; box-shadow:var(--shadow-card);
  transition:border-color .15s, transform .15s}
.chat:hover{border-color:rgba(255,255,255,0.15); transform: translateY(-1px)}
.chat.aguardando{border-color:var(--warn); box-shadow:inset 4px 0 0 var(--warn), var(--shadow-card)}
.chat-top{display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem}
.chat-id{display:flex; gap:.85rem; align-items:center; min-width:0}
.avatar{width:44px; height:44px; flex:0 0 44px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; color:#fff; background:var(--grad); box-shadow: 0 1px 2px rgba(0,0,0,0.3)}
.chat-name{font-weight:700; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff}
.chat-phone{color:var(--muted); font-size:.82rem}
.chat-empresa{color:var(--accent); font-size:.76rem; margin-top:.2rem; font-weight:600}
.chat-msg{color:var(--muted); font-size:.92rem; line-height:1.6; margin:1rem 0 1.25rem; flex-grow:1;
  background:var(--input); border:1px solid var(--border-soft); border-radius:8px; padding:.8rem 1rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.empty{grid-column:1/-1; text-align:center; color:var(--muted); padding:4.5rem 1rem}
.empty svg{width:44px; height:44px; opacity:.4; margin-bottom:.75rem; color:var(--primary)}
.card-acoes{display:flex; flex-direction:column; gap:.6rem}

/* ---------- Conversa (atendimento humano) ---------- */
.conversa-head{display:flex; justify-content:space-between; align-items:center; gap:1.25rem; flex-wrap:wrap; margin-bottom:.5rem}
.conversa-head .quem{display:flex; align-items:center; gap:.85rem}
.thread{display:flex; flex-direction:column; gap:.65rem; max-height:60vh; overflow-y:auto; padding:.5rem .25rem}
.msg{max-width:75%; padding:.75rem 1.1rem; border-radius:14px; font-size:.94rem; line-height:1.55; word-wrap:break-word; box-shadow:var(--shadow-card)}
.msg.in{align-self:flex-start; background:var(--surface); border-bottom-left-radius:4px; color:#fff}
.msg.out{align-self:flex-end; background:var(--primary); color:#fff; border-bottom-right-radius:4px}
.msg .t{display:block; font-size:.68rem; opacity:.7; margin-top:.4rem; text-align:right}
.composer{display:flex; gap:.75rem; margin-top:1.25rem; align-items:flex-end}
.composer textarea{flex:1; min-height:50px; max-height:160px; padding:.75rem 1rem}
.bot-aviso{background:var(--warn-bg); border:1px solid rgba(245, 158, 11, 0.3); color:#f59e0b;
  padding:.75rem 1.1rem; border-radius:var(--radius-sm); font-size:.88rem; margin-bottom:1rem}
.quick{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem}

/* ---------- Relatórios (KPIs + gráfico) ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.25rem; margin-bottom:1.5rem}
.kpi{background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--muted-2);
  border-radius:var(--radius-sm); padding:1.25rem 1.5rem; transition: transform .15s; box-shadow: var(--shadow-card)}
.kpi:hover{transform: translateY(-2px)}
.kpi .n{font-size:2rem; font-weight:800; line-height:1; color:#fff}
.kpi .l{color:var(--muted); font-size:.85rem; margin-top:.45rem; font-weight:550}
.kpi-roxo{border-left-color:var(--primary)}
.kpi-verde{border-left-color:var(--ok)}
.kpi-azul{border-left-color:#388bfd}
.kpi-vermelho{border-left-color:var(--danger)}
.kpi-ambar{border-left-color:var(--warn)}

.card-head{display:flex; justify-content:space-between; align-items:center; gap:1.25rem; margin-bottom:1rem}
.card-head h2{margin:0}
.chart{display:flex; align-items:flex-end; gap:8px; height:220px; padding:1.5rem .25rem 0; border-bottom:1px solid var(--border);
  background:repeating-linear-gradient(to top, transparent 0, transparent 39px, var(--border-soft) 39px, var(--border-soft) 40px)}
.chart .bar{flex:1; min-width:8px; position:relative; background:var(--grad); border-radius:5px 5px 0 0; transition:opacity .15s}
.chart .bar:hover{opacity:.85}
.chart .bar.vazio{background:var(--border-soft); border-radius:4px}
.chart .bar-v{position:absolute; top:-1.35rem; left:0; right:0; text-align:center; font-size:.72rem; color:var(--muted); font-weight:600}
.chart-x{display:flex; justify-content:space-between; color:var(--muted); font-size:.76rem; margin-top:.6rem}

.filtros{display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:1.5rem}
.filtros .field{margin:0}
.filtros input,.filtros select{width:auto}
.live{display:inline-flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.85rem; font-weight:600}
.live .dot{width:8px; height:8px; border-radius:50%; background:var(--ok); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16, 185, 129,.5)}70%{box-shadow:0 0 0 8px rgba(16, 185, 129, 0)}100%{box-shadow:0 0 0 0 rgba(16, 185, 129, 0)}}

/* Bloco de código (Ver prompt) */
.codebox{background:var(--input); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1.25rem;
  white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88rem; line-height:1.65; color:#c9d1d9; max-height:64vh; overflow:auto}

/* ---------- Toasts ---------- */
.toast-wrap{position:fixed; bottom:1.5rem; right:1.5rem; display:flex; flex-direction:column; gap:.75rem; z-index:100}
.toast{background:var(--surface); border:1px solid var(--border); color:#fff; padding:.8rem 1.25rem;
  border-radius:var(--radius-sm); box-shadow:var(--shadow); font-size:.92rem; max-width:340px; animation:toastin .25s ease-out}
.toast.ok{border-color:rgba(16, 185, 129, 0.45)}
.toast.err{border-color:rgba(239, 68, 68, 0.45)}
.toast.out{opacity:0; transform:translateY(6px); transition:.3s}
@keyframes toastin{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ---------- Skeleton ---------- */
.skeleton{background:linear-gradient(90deg,var(--surface-2),rgba(255,255,255,0.06),var(--surface-2));
  background-size:200% 100%; animation:shimmer 1.3s infinite; border-radius:8px; min-height:14px}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- Tabelas ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface)}
.table{width:100%; border-collapse:collapse; font-size:.92rem; min-width:560px}
.table th,.table td{text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--border-soft)}
.table th{color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  background:rgba(255,255,255,0.02)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:rgba(255,255,255,0.02)}
.table td .actions{justify-content:flex-end}
.reset-inline{display:flex; gap:.5rem; align-items:center}
.inp-sm{width:150px; padding:.45rem .75rem}

/* ---------- Modal ---------- */
.modal-backdrop{position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:1.5rem;
  background:rgba(1,4,9,.8); backdrop-filter:blur(4px); animation:fade .2s ease}
.modal{width:100%; max-width:540px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.75rem; box-shadow:var(--shadow)}
.modal h2{margin-bottom:.5rem; color:#fff}
.modal .modal-acoes{display:flex; gap:.75rem; justify-content:flex-end; margin-top:1.5rem}

/* ---------- Autenticação (split-screen) ---------- */
.auth{display:grid; grid-template-columns:1.05fr .95fr; min-height:100vh}
.auth-aside{position:relative; overflow:hidden; padding:4rem; display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(160deg,#0b0f19,#0f172a); border-right:1px solid var(--border)}
.auth-aside::after{content:""; position:absolute; inset:auto -140px -180px auto; width:440px; height:440px;
  border-radius:50%; background:radial-gradient(circle,rgba(43, 168, 142, .15),transparent 65%); filter:blur(30px)}
.auth-aside .mark{display:flex; align-items:center; gap:.85rem; margin-bottom:2.5rem; position:relative; z-index:1; font-weight:700}
.auth-aside .mark .logo{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--grad); box-shadow: 0 1px 2px rgba(0,0,0,0.3)}
.auth-aside .mark .logo svg{width:24px; height:24px}
.auth-aside h2{font-size:2.2rem; line-height:1.25; position:relative; z-index:1; max-width:480px; letter-spacing:-.03em; color:#fff; font-weight:800}
.auth-aside p{color:var(--muted); font-size:1.05rem; margin:1rem 0 2rem; max-width:440px; position:relative; z-index:1; line-height:1.65}
.auth-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1rem; position:relative; z-index:1}
.auth-list li{display:flex; align-items:center; gap:.85rem; color:#fff; font-size:.98rem}
.auth-list .tick{width:26px; height:26px; flex:0 0 26px; border-radius:8px; display:grid; place-items:center;
  background:var(--ok-bg); color:var(--ok)}
.auth-list .tick svg{width:16px; height:16px}
.auth-main{display:flex; align-items:center; justify-content:center; padding:2rem; background:var(--bg1)}
.auth-card{width:100%; max-width:390px}
.auth-card .brand{padding:0; margin-bottom:.25rem; border:none}
.auth-card h1{font-size:1.65rem; font-weight:800; color:#fff}
.auth-card .sub{color:var(--muted); margin:.6rem 0 1.75rem; font-size:.95rem}
.auth-card .mobile-logo{display:none}
.auth-alt{margin-top:1.75rem; text-align:center; font-size:.92rem; color:var(--muted)}
.auth-solo{min-height:100vh; display:grid; place-items:center; padding:1.5rem;
  background:linear-gradient(160deg,#0b0f19,#0f172a)}
.auth-solo .auth-card .mobile-logo{display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem; font-weight:700}
.auth-solo .auth-card .mobile-logo .logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--grad)}
.auth-solo .auth-card .mobile-logo .logo svg{width:24px;height:24px}
.remember{display:flex; align-items:center; gap:.65rem; margin-top:1.1rem}
.remember input{width:18px; height:18px; accent-color:var(--primary); cursor:pointer}
.remember label{margin:0; text-transform:none; font-weight:550; letter-spacing:0; color:var(--muted); font-size:.9rem}
.remember .hint-inline{margin-left:auto; font-size:.82rem}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-aside{display:none}
  .auth-card .mobile-logo{display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem; font-weight:700}
  .auth-card .mobile-logo .logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--grad)}
  .auth-card .mobile-logo .logo svg{width:24px;height:24px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
}
@media (max-width:820px){
  .layout{flex-direction:column}
  .sidebar{position:static; height:auto; width:auto; flex:none; flex-direction:row; align-items:center; gap:.5rem;
    overflow-x:auto; padding:.75rem 1rem}
  .brand{padding:0 .75rem 0 .25rem; border:none; margin:0}
  .brand b{display:none}
  .nav{flex-direction:row; gap:.35rem}
  .nav a span:not(.ico){display:none}
  .nav-group{display:none}
  .side-foot{margin:0 0 0 auto; border:0; padding:0}
  .side-user{display:none}
  .row,.form-grid{grid-template-columns:1fr}
  .content{padding:1.5rem}
  .topbar{padding:1.25rem 1.5rem}
}

/* Contatos / campanhas */
.check{display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; font-size:.95rem; color:#fff}
.check input[type=checkbox]{width:auto; margin:0; cursor:pointer}
.stat-row{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center}

/* ============================================================
   COMPONENTES PADRÃO — refatoração premium
   ============================================================ */

/* ---------- Tabs ---------- */
.tabs{display:flex; gap:.25rem; border-bottom:1px solid var(--border); margin-bottom:var(--s6);
  overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:.75rem 1.1rem; color:var(--muted); font-size:.92rem; font-weight:600; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s, border-color .15s}
.tabs a:hover{color:#fff; text-decoration:none}
.tabs a.ativo{color:#fff; border-bottom-color:var(--primary); font-weight:700}

/* ---------- Barra de filtros ---------- */
.filterbar{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s5)}
.filterbar input[type=search],.filterbar select{width:auto; min-width:200px; padding:.55rem .85rem; font-size:.9rem}
.filterbar input[type=search]{flex:1; min-width:240px; max-width:400px}
.filterbar .spacer{margin-left:auto}
.filterbar .count{color:var(--muted); font-size:.88rem; white-space:nowrap; font-weight:550}

/* ---------- Empty state padrão ---------- */
.empty-state{text-align:center; padding:var(--s12) var(--s4); color:var(--muted)}
.empty-state .ico-lg{width:48px; height:48px; margin:0 auto var(--s4); border-radius:12px; display:grid;
  place-items:center; background:rgba(255,255,255,0.03); color:var(--primary); border: 1px solid var(--border)}
.empty-state .ico-lg svg{width:24px; height:24px}
.empty-state h3{font-size:1.05rem; font-weight:700; color:#fff; margin-bottom:.4rem}
.empty-state p{font-size:.9rem; margin:0 auto; max-width:400px; line-height:1.6}
.empty-state .btn{margin-top:var(--s5)}

/* ---------- Conversas: lista + thread (2 colunas) ---------- */
.inbox{display:grid; grid-template-columns:var(--w-lista) 1fr; gap:0;
  height:calc(100vh - var(--h-topbar)); border-top:1px solid var(--border)}
.inbox-lista{border-right:1px solid var(--border); display:flex; flex-direction:column; min-width:0;
  background:var(--bg1)}
.inbox-lista-head{padding:var(--s4); border-bottom:1px solid var(--border-soft); display:flex;
  flex-direction:column; gap:var(--s3)}
.inbox-lista-head input[type=search]{padding:.6rem .85rem; font-size:.9rem}
.inbox-lista-head select{padding:.55rem .75rem; font-size:.88rem}
.inbox-itens{overflow-y:auto; flex:1; min-height:0; list-style:none; margin:0; padding:0}

/* Item de conversa */
.cv-item{display:flex; gap:var(--s3); padding:.85rem var(--s4); border-bottom:1px solid var(--border-soft);
  cursor:pointer; border-left:3px solid transparent; transition:background .15s}
.cv-item:hover{background:rgba(255,255,255,0.02)}
.cv-item.ativo{background:rgba(43, 168, 142, 0.08); border-left-color:var(--primary)}
.cv-item.aguardando{border-left-color:var(--warn)}
.cv-av{width:38px; height:38px; flex:0 0 38px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:.85rem; color:#fff; background:var(--grad); box-shadow: 0 1px 2px rgba(0,0,0,0.3)}
.cv-body{min-width:0; flex:1}
.cv-linha{display:flex; align-items:baseline; gap:var(--s2)}
.cv-nome{font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; color:#fff}
.cv-hora{font-size:.72rem; color:var(--muted-2); white-space:nowrap}
.cv-prev{font-size:.85rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-top:.15rem}
.cv-tags{display:flex; gap:.4rem; margin-top:.35rem; align-items:center}
.dot-status{width:8px; height:8px; border-radius:50%; flex:0 0 8px}
.dot-bot{background:var(--ok)} .dot-humano{background:var(--warn)} .dot-espera{background:var(--danger)}
.cv-mini{font-size:.7rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.05em; font-weight:700}

/* Painel da conversa ativa */
.inbox-thread{display:flex; flex-direction:column; min-width:0; background:var(--bg2)}
.thread-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) var(--s6); border-bottom:1px solid var(--border); background:rgba(11, 15, 25, 0.4); flex-wrap:wrap}
.thread-head .quem{display:flex; align-items:center; gap:var(--s3); min-width:0}
.thread-corpo{flex:1; overflow-y:auto; padding:var(--s6); display:flex; flex-direction:column; gap:.65rem}
.thread-foot{border-top:1px solid var(--border); padding:var(--s4) var(--s6); background:var(--bg1)}

/* Utilitários do inbox */
.inbox-lista-head .filterbar{margin:0; gap:.5rem}
.inbox-lista-head .filterbar select{min-width:0; flex:1}
.inbox-vazio{margin:auto}
.inbox-conversa{display:flex; flex-direction:column; height:100%}
.inbox-conversa[hidden]{display:none}
.thread-head .quem > div{min-width:0}
.t-nome{font-weight:700; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff}
.t-tel{color:var(--muted); font-size:.82rem}
.thread-foot .quick{margin:0 0 .75rem}
.thread-foot .composer{margin:0}
.inbox-aviso{padding:0 var(--s6)}
.inbox-pag{padding:.6rem .85rem; border-top:1px solid var(--border-soft)}
.inbox-pag .filterbar{margin:0; justify-content:space-between}
.sk-av{width:38px; height:38px; border-radius:50%; flex:0 0 38px}
.sk-l1{width:60%; height:12px; margin-bottom:8px}
.sk-l2{width:80%; height:10px}
.empty-inline{padding:3.5rem 1.5rem}
.cv-empresa{margin-left:auto}
.voltar-mobile{display:none}
@media (max-width:820px){ .voltar-mobile{display:inline-flex} }

/* ---------- Barra de progresso (uso do plano) ---------- */
.meter{-webkit-appearance:none; appearance:none; width:100%; height:8px; border:0;
  border-radius:999px; background:var(--surface-2); overflow:hidden; display:block}
.meter::-webkit-progress-bar{background:var(--surface-2); border-radius:999px}
.meter::-webkit-progress-value{background:var(--grad); border-radius:999px; transition:width .3s}
.meter::-moz-progress-bar{background:var(--primary); border-radius:999px}
.meter-alto::-webkit-progress-value{background:linear-gradient(180deg,var(--warn),#b8860b)}
.meter-alto::-moz-progress-bar{background:var(--warn)}
.meter-atencao::-webkit-progress-value,.meter-alerta::-webkit-progress-value{background:var(--warn)}
.meter-atencao::-moz-progress-bar,.meter-alerta::-moz-progress-bar{background:var(--warn)}
.meter-bloqueado::-webkit-progress-value{background:var(--danger)}
.meter-bloqueado::-moz-progress-bar{background:var(--danger)}
.uso-plano.n-bloqueado{border-color:rgba(239, 68, 68, 0.4)}
.uso-plano.n-alerta,.uso-plano.n-atencao{border-color:rgba(245, 158, 11, 0.4)}

/* ---------- Grupos de campos (formulário do agente) ---------- */
.grupo{padding-top:var(--s6); margin-top:var(--s6); border-top:1px solid var(--border-soft)}
.grupo:first-of-type{padding-top:0; margin-top:var(--s5); border-top:0}
.grupo .section-title{margin:0 0 .25rem}
.grupo .hint{margin:0 0 var(--s4)}
.campo-pendente{border-color:rgba(245, 158, 11, 0.5); background:rgba(245, 158, 11, 0.05)}
.campo-pendente:focus{border-color:var(--warn); box-shadow:0 0 0 3px rgba(245, 158, 11, 0.25)}

/* ---------- Onboarding (checklist guiado) ---------- */
.onboarding{border-color:rgba(99, 102, 241, 0.35)}
.ob-head{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s4); flex-wrap:wrap}
.ob-head h2{margin:0}
.ob-progresso{min-width:180px; text-align:right}
.ob-pct{font-size:1.45rem; font-weight:800; color:var(--primary); display:block; line-height:1}
.ob-progresso .meter{margin-top:.5rem}
.ob-passos{list-style:none; margin:var(--s5) 0 0; padding:0; display:flex; flex-direction:column}
.ob-passo{display:flex; align-items:center; gap:var(--s3); padding:1rem 0;
  border-top:1px solid var(--border-soft)}
.ob-passo:first-child{border-top:0}
.ob-icone{width:30px; height:30px; flex:0 0 30px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); color:var(--muted)}
.ob-passo.feito .ob-icone{background:var(--ok-bg); color:var(--ok)}
.ob-icone svg{width:16px; height:16px}
.ob-num{font-size:.85rem; font-weight:700}
.ob-texto{flex:1; min-width:0}
.ob-titulo{font-weight:600; font-size:.98rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; color:#fff}
.ob-passo.feito .ob-titulo{color:var(--muted)}
.ob-status{font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:.15rem .5rem; border-radius:999px; background:var(--surface-2); color:var(--muted-2)}
.ob-passo.feito .ob-status{background:var(--ok-bg); color:var(--ok)}
.ob-desc{color:var(--muted); font-size:.85rem; margin-top:.2rem}
.ob-proximo{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--border-soft)}

/* ---------- Wizard de onboarding ---------- */
.wz-trilha{display:flex; list-style:none; margin:0 0 var(--s6); padding:0; gap:var(--s2)}
.wz-etapa{flex:1; display:flex; align-items:center; gap:.5rem; padding:.65rem .85rem;
  border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border-soft);
  color:var(--muted); font-size:.88rem; font-weight:600; min-width:0}
.wz-etapa.atual{border-color:var(--primary); background:rgba(99, 102, 241, 0.1); color:#fff}
.wz-etapa.feito{color:#fff}
.wz-num{width:22px; height:22px; flex:0 0 22px; border-radius:50%; display:grid; place-items:center;
  font-size:.74rem; font-weight:700; background:var(--surface-2); color:var(--muted)}
.wz-etapa.atual .wz-num{background:var(--primary); color:#fff}
.wz-etapa.feito .wz-num{background:var(--ok-bg); color:var(--ok)}
.wz-tit{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wz-acoes{display:flex; justify-content:space-between; align-items:center; gap:var(--s3);
  margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--border-soft)}
.wz-segmentos{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.wz-seg{position:relative}
.wz-seg input{position:absolute; opacity:0; pointer-events:none}
.wz-seg:has(input:checked){border-color:var(--primary); background:rgba(99, 102, 241, 0.1)}
.wz-seg:has(input:focus-visible){outline:2px solid var(--primary); outline-offset:2px}
.wz-item{display:flex; justify-content:space-between; align-items:center; gap:var(--s4);
  padding:var(--s4) 0; border-top:1px solid var(--border-soft); margin-top:var(--s4)}
@media (max-width:640px){
  .wz-trilha{flex-wrap:wrap}
  .wz-etapa{flex:1 1 45%}
  .wz-tit{display:none}
  .wz-etapa.atual .wz-tit{display:inline}
}

/* ---------- Assistente de configuração ---------- */
.assistente{border-color:rgba(43, 168, 142, 0.35)}
.modo-avancado{font-weight:550; text-transform:none; letter-spacing:0}
.tpl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:var(--s3);
  margin-top:var(--s3)}
.tpl-grid form{margin:0}
.tpl-btn{width:100%; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:var(--s4) var(--s3); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); cursor:pointer; color:#fff; transition:border-color .15s, background .15s}
.tpl-btn:hover{border-color:var(--primary); background:var(--surface-2)}
.tpl-emoji{font-size:1.8rem; line-height:1}
.tpl-nome{font-size:.88rem; font-weight:600; text-align:center}

/* Cartões de opção */
.opt-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--s3)}
.opt-card{display:block; padding:.85rem 1rem; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); cursor:pointer; transition:border-color .15s, background .15s; position:relative}
.opt-card:hover{border-color:rgba(255,255,255,0.15)}
.opt-card input{position:absolute; top:.85rem; right:1rem; accent-color:var(--primary)}
.opt-card:has(input:checked){border-color:var(--primary); background:rgba(43, 168, 142, 0.08)}
.opt-card:has(input:focus-visible){outline:2px solid var(--primary); outline-offset:2px}
.opt-nome{display:block; font-weight:600; font-size:.92rem; padding-right:1.5rem; color:#fff}
.opt-desc{display:block; color:var(--muted); font-size:.8rem; margin-top:.25rem; line-height:1.5}

/* ---------- Testar o atendente ---------- */
.teste-nota{display:flex; align-items:center; gap:var(--s4); padding:var(--s4); border-radius:var(--radius-sm);
  margin:var(--s4) 0; border:1px solid var(--border)}
.teste-nota-num{font-size:2.5rem; font-weight:800; line-height:1}
.teste-nota-num span{font-size:1.1rem; font-weight:600; color:var(--muted)}
.nota-alta{background:var(--ok-bg); border-color:rgba(16, 185, 129, 0.4)} .nota-alta .teste-nota-num{color:var(--ok)}
.nota-media{background:var(--warn-bg); border-color:rgba(245, 158, 11, 0.4)} .nota-media .teste-nota-num{color:var(--warn)}
.nota-baixa{background:var(--danger-bg); border-color:rgba(239, 68, 68, 0.4)} .nota-baixa .teste-nota-num{color:var(--danger)}
.teste-lista{display:flex; flex-direction:column; gap:var(--s2)}
.teste-item{display:flex; gap:var(--s3); padding:.85rem 1rem; border-radius:var(--radius-sm);
  border:1px solid var(--border-soft); background:var(--surface)}
.teste-ico{width:22px; height:22px; flex:0 0 22px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:.8rem; color:#fff}
.n-ok .teste-ico{background:var(--ok)} .n-atencao .teste-ico{background:var(--warn)}
.n-falha .teste-ico{background:var(--danger)}
.teste-body{min-width:0; flex:1}
.teste-cat{font-weight:650; font-size:.95rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; color:#fff}
.teste-nivel{font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); margin-left:auto}
.teste-perg{color:var(--muted); font-size:.85rem; margin-top:.2rem; font-style:italic}
.teste-resp{font-size:.88rem; margin-top:.45rem; background:var(--input); border:1px solid var(--border-soft);
  border-radius:6px; padding:.6rem .8rem; line-height:1.55; color:#fff}
.teste-sug{font-size:.85rem; margin-top:.45rem; color:var(--warn)}

/* ---------- Contexto do cliente na conversa ---------- */
.ctx-bar{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; padding:.75rem var(--s5);
  border-bottom:1px solid var(--border-soft); background:rgba(11, 15, 25, 0.2)}
.ctx-tags{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; flex:1; min-width:0}
.ctx-tag{display:inline-flex; align-items:center; gap:.35rem; font-size:.76rem; font-weight:600;
  background:var(--surface); color:#fff; padding:.25rem .65rem; border-radius:999px; border: 1px solid var(--border)}
.ctx-tag button{background:none; border:0; color:var(--muted); cursor:pointer; font-size:1rem;
  line-height:1; padding:0}
.ctx-tag button:hover{color:var(--danger)}
.ctx-tag-add{background:none; border:1px dashed var(--border); color:var(--muted); cursor:pointer;
  font-size:.74rem; font-weight:600; padding:.25rem .65rem; border-radius:999px; transition: border-color .15s, color .15s}
.ctx-tag-add:hover{border-color:var(--primary); color:#fff}
.ctx-notas{position:relative}
.ctx-notas summary{list-style:none} .ctx-notas summary::-webkit-details-marker{display:none}
.ctx-notas-pop{position:absolute; right:0; top:calc(100% + 8px); z-index:20; width:320px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); padding:var(--s3)}
.ctx-notas-lista{max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:.5rem;
  margin-bottom:var(--s3)}
.ctx-nota{background:rgba(255,255,255,0.02); border:1px solid var(--border-soft); border-radius:6px; padding:.6rem .75rem}
.ctx-nota-txt{font-size:.88rem; line-height:1.5; color:#fff}
.ctx-nota-meta{font-size:.72rem; color:var(--muted-2); margin-top:.35rem}
.ctx-nota-nova{display:flex; gap:.5rem}
.ctx-nota-nova input{flex:1; padding:.5rem .75rem; font-size:.88rem}

/* ---------- Menu LGPD ---------- */
.menu-lgpd{position:relative}
.menu-lgpd summary{list-style:none; cursor:pointer}
.menu-lgpd summary::-webkit-details-marker{display:none}
.menu-lgpd-pop{position:absolute; right:0; top:calc(100% + 8px); z-index:20; min-width:220px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); padding:.5rem}
.menu-lgpd-tit{display:block; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted-2); padding:.45rem .65rem .35rem}
.menu-lgpd-item{display:block; padding:.6rem .65rem; border-radius:6px; font-size:.88rem;
  color:#fff; transition: background .15s}
.menu-lgpd-item:hover{background:rgba(255,255,255,0.05); text-decoration:none}
.menu-lgpd-item.danger{color:var(--danger)}
.menu-lgpd-item.danger:hover{background:var(--danger-bg)}

/* ---------- Navegação SPA (barra de progresso + transição de conteúdo) ---------- */
.spa-progress{
  position:fixed; top:0; left:0; height:2px; background:var(--primary);
  z-index:99999; width:0; opacity:0; transition:width .3s ease, opacity .2s ease;
}
.spa-progress.loading{ opacity:1; width:70% }
.spa-progress.done{ opacity:1; width:100%; transition:width .15s ease, opacity .2s ease .2s }
.main{ transition:opacity .12s ease }
.main-transition-out{ opacity:0 }
.main-transition-in{ animation:spaFadeIn .15s ease forwards }
@keyframes spaFadeIn{ from{opacity:0} to{opacity:1} }

/* ---------- Utilitários de layout (substituem estilos inline) ---------- */
.toolbar.align-end{align-items:flex-end}
.field-tight{margin:0}
.form-inline{margin:0}
.form-inline-block{margin:0; display:inline-block}
.input-file{padding:.4rem}
.label-block{font-weight:600; display:block; margin-bottom:.5rem; color:#fff;
  text-transform:none; letter-spacing:0; font-size:.9rem}
.cell-empty{text-align:center; padding:2rem 1rem}
.hint-ok{color:var(--ok); display:block; margin-top:.4rem}
.resultado-teste{padding:.65rem .85rem; border-radius:var(--radius-sm); display:none}

/* Grade de modelos rápidos (contatos) */
.modelo-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s3); margin-bottom:var(--s4)}

/* Card de campanha em fila (injetado via JS) */
.camp-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.35rem}
.camp-meta{color:var(--muted-2); font-size:.8rem}
.camp-msg{margin:.5rem 0; font-size:.92rem; font-style:italic; color:var(--text)}
.camp-progress{display:flex; align-items:center; gap:.6rem; margin-top:.5rem}
.camp-progress .progress-bg{flex:1; height:8px; border-radius:4px; overflow:hidden}
.progress-fill{height:100%; transition:width .3s ease}
.camp-count{font-weight:700; min-width:45px; text-align:right; font-size:.85rem}

/* ---------- Utilitários ---------- */
.ml-auto{margin-left:auto}
.mb-0{margin-bottom:0}
.kpis.mb-0{margin-bottom:0}
.table td{vertical-align:middle}
.table .col-acoes{width:1%; white-space:nowrap}

/* ---------- Responsivo Adicional ---------- */
@media (max-width:820px){
  .inbox{grid-template-columns:1fr; height:auto; min-height:calc(100vh - var(--h-topbar))}
  .inbox-lista{border-right:0}
  .inbox.ver-thread .inbox-lista{display:none}
  .inbox:not(.ver-thread) .inbox-thread{display:none}
  .filterbar input[type=search]{max-width:none; width:100%}
  .btn{min-height:42px}
}

/* ---------- Números de métrica (tabular, mesma família tipográfica) ---------- */
.metric-number {
  font-family: 'Inter', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: #fff;
}

/* Polimento de Tabelas */
.table tbody tr:nth-child(even) {
  background: var(--surface-2);
}
.table tbody tr:hover {
  background: var(--surface-3);
}
.table td.col-tel, .table td.col-num, .table td.tabular {
  font-variant-numeric: tabular-nums;
}
.table th.align-right, .table td.align-right {
  text-align: right;
}

/* Modelos Rápidos */
.modelo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 0.75rem;
}
.modelo-card {
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--surface-2);
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-card);
}
.modelo-card:hover {
  border-color: var(--primary);
  background: var(--surface-3);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.modelo-card strong {
  color: #fff;
  font-size: 1.02em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.modelo-card:hover strong {
  color: var(--accent-light);
}
.modelo-card small {
  display: block;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.45;
}

/* Badges de status de campanha */
.badge-pendente { background: rgba(101, 112, 134, 0.15); color: var(--muted-2); }
.badge-enviando { background: rgba(99, 102, 241, 0.15); color: var(--primary); animation: pulse 1.5s infinite; }
.badge-erro { background: var(--danger-bg); color: var(--danger); }

/* Cores da barra de progresso */
.cor-muted { background-color: var(--muted-2); }
.cor-primary { background-color: var(--primary); }
.cor-ok { background-color: var(--ok); }
.cor-danger { background-color: var(--danger); }

/* Teste de conexão */
.teste-ok { background-color: var(--ok-bg); color: var(--ok); border: 1px solid rgba(16, 185, 129, 0.25); }
.teste-erro { background-color: var(--danger-bg); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.25); }
.teste-carregando { background-color: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

/* Fila de campanhas */
.campanha-card { border: 1px solid var(--border); padding: 12px; border-radius: 8px; margin-bottom: 10px; background: var(--surface); }
.campanha-card p { color: var(--text); }
.campanha-card .progress-bg { background: var(--surface-3); }

.ico-sm {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  stroke-width: 2px;
  display: inline-block;
  margin-top: -3px;
}
.ico-sm.ico-flush { margin-top: 0; }
.ico-title {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  stroke-width: 2px;
  display: inline-block;
  margin-top: -4px;
  margin-right: 4px;
}

/* Botões de ícones com cores semânticas interativas */
.btn-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  color: var(--muted);
  background: transparent;
  transition: background .15s, color .15s, transform .15s;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
}
.btn-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2px;
  display: block;
}
.btn-icon:hover, .btn-icon:focus-visible {
  background: var(--surface-3);
  text-decoration: none;
}
.btn-icon.acao-primaria:hover { color: var(--primary) }
.btn-icon.acao-atencao:hover { color: var(--warn) }
.btn-icon.acao-perigo:hover { color: var(--danger) }

/* ============================================================
   UX 100% — Dropzone & Componentes de Disparo / Importação
   ============================================================ */
.dropzone-container {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 2.25rem 1.5rem;
  text-align: center;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
  cursor: pointer;
  position: relative;
}
.dropzone-container:hover, .dropzone-container.dragover {
  border-color: var(--primary);
  background: var(--surface-3);
  transform: translateY(-2px);
}
.dropzone-container input[type="file"] {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 12px;
}
.dropzone-icon svg { width: 28px; height: 28px; }
.dropzone-title { font-weight: 600; font-size: 1.05rem; color: #fff; margin-bottom: 0.25rem; }
.dropzone-subtitle { font-size: 0.88rem; color: var(--muted); }
.file-selected-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-light);
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 500;
  margin-top: 0.75rem;
}

.tags-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.tag-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tag-btn:hover {
  background: var(--surface-3);
  color: var(--primary);
  border-color: var(--primary);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.stat-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary);
}
.stat-card-icon svg { width: 22px; height: 22px; }
.stat-card-val { font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 1.1; }
.stat-card-lbl { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }

.char-counter {
  font-size: 0.82rem;
  color: var(--muted-2);
  float: right;
  margin-top: 4px;
}

/* Abas de navegação rápida */
.tabs-header {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  flex-wrap: wrap;
}
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.tab-btn:hover, .tab-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
.tab-btn svg {
  width: 18px;
  height: 18px;
}

/* Personalizador de Menu Lateral */
.btn-customizer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  margin-top: 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-customizer:hover {
  background: var(--surface-3);
  color: #fff;
  border-color: var(--primary);
}

.nav-modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10, 13, 22, 0.82);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-modal-backdrop[hidden] {
  display: none !important;
}
.nav-modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 90%;
  max-width: 440px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.nav-modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-modal-desc {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.nav-options-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 1.25rem;
  padding-right: 0.5rem;
}
.nav-opt-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: var(--surface-2);
  cursor: pointer;
  user-select: none;
  font-size: 0.92rem;
  color: var(--text);
  transition: background 0.15s;
}
.nav-opt-item:hover {
  background: var(--surface-3);
}
.nav-opt-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}




/* Cache buster */