:root{
  --bg:#F6F7FB;
  --surface:#FFFFFF;
  --surface-2:#F0F1F7;
  --surface-3:#E9EAF3;
  --border:#E4E6F0;
  --ink:#1A1D29;
  --ink-2:#5B6178;
  --ink-3:#9297AB;
  --navy:#16345C;
  --navy-ink:#FFFFFF;
  --purple:#6C5CE7;
  --purple-bg:#EFECFD;
  --gold:#B8892F;
  --blue:#0073EA;
  --blue-bg:#E6F1FD;
  --amber:#C77E1E;
  --amber-bg:#FCEFDA;
  --good:#00854D;
  --good-bg:#E1F5EA;
  --bad:#D8342B;
  --bad-bg:#FCE7E5;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(23,35,59,.05), 0 6px 18px -10px rgba(23,35,59,.16);
  --shadow-lg:0 10px 30px -8px rgba(23,35,59,.22);
  --avatar-colors: #0073EA,#6C5CE7,#C77E1E,#00854D,#D8342B,#B8892F,#0086C0,#8C4FE0;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  font-size:15px; line-height:1.5;
}
a{color:var(--navy); text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- topbar / nav ---------- */
.topbar{
  background:var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
}
.topbar-inner{
  max-width:1320px; margin:0 auto; padding:12px 20px; display:flex;
  align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; color:var(--navy);}
.brand-mark{
  width:30px; height:30px; border-radius:9px; flex:none; object-fit:contain;
}
.brand-sep{color:var(--ink-3); font-weight:400; margin:0 2px;}
.brand-conta{color:var(--ink); font-weight:700;}
.nav{display:flex; gap:4px; align-items:center; flex-wrap:wrap;}
.nav a{
  color:var(--ink-2); font-weight:600; font-size:.88rem; padding:8px 14px;
  border-radius:99px; transition:background .12s, color .12s;
}
.nav a:hover{background:var(--surface-2); text-decoration:none;}
.nav a.active{color:var(--navy); background:var(--purple-bg);}
.nav a.sair{color:var(--ink-3);}

main{max-width:1320px; margin:0 auto; padding:26px 20px 60px;}
.main-wide{max-width:1320px;}
.main-flush{max-width:none; padding:0; margin:0;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
.card-pad{padding:22px 24px;}

.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:22px;}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);}
.kpi-label{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3);}
.kpi-value{font-size:1.6rem; font-weight:700; margin-top:6px; font-variant-numeric:tabular-nums;}
.kpi-sub{font-size:.78rem; color:var(--ink-3); margin-top:2px;}

h1{font-size:1.4rem; margin:0 0 18px; font-weight:700;}
h2{font-size:1.05rem; margin:0 0 14px; font-weight:700;}

table{width:100%; border-collapse:collapse; font-size:.9rem;}
th{text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); padding:0 12px 10px; border-bottom:1px solid var(--border);}
td{padding:12px; border-bottom:1px solid var(--border); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums;}
td.acoes, th.acoes{text-align:right; width:1%;}

.pill{display:inline-block; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:99px; background:var(--surface-3); color:var(--ink-2); text-transform:uppercase;}
.pill.meta{background:var(--blue-bg); color:var(--blue);}
.pill.google{background:var(--amber-bg); color:var(--amber);}
.pill.pill-sync{background:var(--good-bg); color:var(--good);}

.campanha-row{padding:14px 0; border-bottom:1px solid var(--border);}
.campanha-row:last-child{border-bottom:none;}
.campanha-row-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.campanha-nome{font-weight:700; margin-right:8px;}
.campanha-row-acoes{display:flex; align-items:center; gap:10px;}
.campanha-valor{font-weight:700; font-variant-numeric:tabular-nums;}
.campanha-desempenho{font-size:.8rem; color:var(--ink-2); margin-top:4px;}
.campanha-toggle-anuncios{
  background:none; border:none; color:var(--blue); font-size:.8rem; font-weight:700; cursor:pointer;
  padding:6px 0 0; text-decoration:underline;
}
.campanha-anuncios{margin-top:10px; overflow-x:auto;}
.campanha-anuncios table{font-size:.82rem;}

.anuncio-texto-edit{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.anuncio-texto-edit input[type="text"]{flex:1; min-width:160px; font-size:.82rem; padding:5px 8px;}
.anuncio-texto-salvar{
  background:none; border:1px solid var(--border); color:var(--blue); font-size:.75rem; font-weight:700;
  cursor:pointer; padding:5px 10px; border-radius:7px; white-space:nowrap;
}
.anuncio-texto-salvar:hover{background:var(--blue-bg);}
.anuncio-texto-ok{color:var(--good); font-size:.75rem; font-weight:700;}

.campanhas-pausadas-bloco{margin-top:18px; padding-top:14px; border-top:1px dashed var(--border);}
.campanha-toggle-secao{
  background:none; border:none; color:var(--ink-2); font-size:.85rem; font-weight:700; cursor:pointer;
  padding:0; text-decoration:underline;
}

.icon-btn{
  background:none; border:none; color:var(--ink-3); font-size:1rem; line-height:1; cursor:pointer;
  padding:4px 6px; border-radius:7px; transition:background .12s, color .12s;
}
.icon-btn:hover{background:var(--bad-bg); color:var(--bad);}

form.inline{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;}
.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:.75rem; font-weight:700; color:var(--ink-2);}
.field input, .field select{
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 11px; font-size:.9rem;
  background:var(--surface); color:var(--ink); min-width:160px;
}
.field input:focus, .field select:focus{outline:2px solid var(--purple); outline-offset:1px;}

button, .btn{
  background:var(--navy); color:#fff; border:none; border-radius:var(--radius-sm); padding:10px 18px;
  font-size:.9rem; font-weight:700; cursor:pointer; transition:opacity .12s, transform .05s;
}
button:hover, .btn:hover{opacity:.9;}
button:active, .btn:active{transform:scale(.98);}
.btn-outline{background:transparent; color:var(--navy); border:1px solid var(--border);}
.btn-outline:hover{background:var(--surface-2); opacity:1;}

.alert{padding:11px 14px; border-radius:var(--radius-sm); font-size:.85rem; margin-bottom:16px;}
.alert-erro{background:var(--bad-bg); color:var(--bad);}
.alert-ok{background:var(--good-bg); color:var(--good);}

.login-wrap{max-width:380px; margin:80px auto; padding:0 20px;}
.login-wrap .card-pad{padding:32px 28px;}
.login-wrap h1{text-align:center;}
.login-wrap form{display:flex; flex-direction:column; gap:14px; margin-top:18px;}
.login-wrap button{width:100%; padding:11px;}

.login-bg{
  min-height:100vh; width:100%; position:relative;
  background-image:url('/static/login-hero.png');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-bg::before{content:""; position:absolute; inset:0; background:rgba(10,14,30,.35);}
.login-overlay-card{
  position:relative; z-index:1; width:100%; max-width:380px;
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:36px 32px;
}
.login-logo{display:block; width:72px; height:72px; margin:0 auto 16px; object-fit:contain;}
.login-overlay-card h1{text-align:center; margin-bottom:0;}
.login-overlay-card form{display:flex; flex-direction:column; gap:14px; margin-top:18px;}
.login-overlay-card button{width:100%; padding:11px;}

.muted{color:var(--ink-3); font-size:.85rem;}
.token-box{
  background:var(--surface-2); border:1px dashed var(--border); border-radius:var(--radius-sm);
  padding:12px 14px; font-family:ui-monospace,'SFMono-Regular',Consolas,monospace; font-size:.82rem;
  word-break:break-all; margin:8px 0 16px;
}
.section{margin-bottom:28px;}

.period-bar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:22px;}
.period-chip{
  background:var(--surface); border:1px solid var(--border); border-radius:99px;
  padding:7px 16px; font-size:.85rem; font-weight:600; color:var(--ink-2);
}
.period-chip:hover{text-decoration:none; border-color:var(--purple);}
.period-chip.active{background:var(--navy); border-color:var(--navy); color:#fff;}
.period-custom{display:flex; gap:8px; align-items:center; margin-left:4px;}
.period-custom input[type=date]{
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:7px 10px; font-size:.85rem;
  background:var(--surface); color:var(--ink);
}
.period-custom .ate{color:var(--ink-3); font-size:.85rem;}
.period-custom .btn-outline{padding:7px 14px; font-size:.85rem;}
@media (max-width:640px){
  .period-bar{flex-direction:column; align-items:stretch;}
  .period-custom{flex-wrap:wrap;}
}

/* ---------- avatar ---------- */
.avatar{
  width:30px; height:30px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.75rem; text-transform:uppercase;
}
.avatar-lg{width:44px; height:44px; font-size:.95rem;}
.avatar-c0{background:#0073EA;}
.avatar-c1{background:#6C5CE7;}
.avatar-c2{background:#C77E1E;}
.avatar-c3{background:#00854D;}
.avatar-c4{background:#D8342B;}
.avatar-c5{background:#B8892F;}
.avatar-c6{background:#0086C0;}
.avatar-c7{background:#8C4FE0;}

/* ---------- kanban ---------- */
.kanban-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.kanban{display:flex; gap:14px; overflow-x:auto; padding-bottom:8px;}
.kcol{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
  min-width:250px; flex:1 1 250px; display:flex; flex-direction:column; max-height:calc(100vh - 340px); min-height:220px;
  overflow:hidden;
}
.kcol-head{
  display:flex; justify-content:space-between; align-items:center; padding:12px 14px;
  font-weight:700; font-size:.85rem; color:var(--ink-2); border-bottom:2px solid var(--border);
  border-top:3px solid var(--kcol-color, var(--ink-3));
}
.kcol[data-stage="novo"] .kcol-head{border-top-color:var(--blue);}
.kcol[data-stage="negociacao"] .kcol-head{border-top-color:var(--amber);}
.kcol[data-stage="proposta"] .kcol-head{border-top-color:var(--purple);}
.kcol[data-stage="venda"] .kcol-head{border-top-color:var(--good);}
.kcol[data-stage="perdido"] .kcol-head{border-top-color:var(--bad);}
.kcol-count{background:var(--surface); border:1px solid var(--border); border-radius:99px; padding:1px 8px; font-size:.75rem; color:var(--ink-3);}
.kcol-body{padding:10px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; min-height:80px; flex:1;}
.kcol-body.dragover{background:var(--purple-bg);}

.kcard{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px;
  box-shadow:var(--shadow); cursor:pointer; font-size:.85rem; transition:box-shadow .12s, border-color .12s;
}
.kcard:hover{box-shadow:var(--shadow-lg); border-color:var(--purple);}
.kcard.dragging{opacity:.4;}
.kcard-top{display:flex; justify-content:space-between; align-items:flex-start; gap:6px;}
.kcard-quem{display:flex; align-items:center; gap:8px; min-width:0;}
.kcard-nome{font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.kcard-del{
  background:none; border:none; color:var(--ink-3); font-size:1rem; line-height:1; cursor:pointer;
  padding:0 2px; font-weight:400; flex:none;
}
.kcard-del:hover{color:var(--bad);}
.kcard-fone{color:var(--ink-3); font-size:.78rem; margin-top:2px; margin-left:38px;}
.kcard-campanha{
  display:inline-block; margin-top:6px; margin-left:38px; font-size:.7rem; font-weight:700; color:var(--blue);
  background:var(--blue-bg); border-radius:99px; padding:2px 8px;
}
.kcard-anuncio{color:var(--ink-3); font-size:.72rem; margin-top:4px; margin-left:38px; font-style:italic;}
.kcard-msg{color:var(--ink-2); font-size:.78rem; margin-top:6px; margin-left:38px; line-height:1.4;}
.kcard-valor{color:var(--good); font-weight:700; margin-top:6px; margin-left:38px; font-size:.85rem;}

/* ---------- conversas (tela cheia, estilo WhatsApp) ---------- */
.conversas-wrap{
  display:flex; height:calc(100vh - 61px); background:var(--surface);
}
.conversas-lista{
  width:340px; flex:none; border-right:1px solid var(--border); display:flex; flex-direction:column;
  background:var(--surface);
}
.conversas-lista-head{padding:16px 16px 12px; border-bottom:1px solid var(--border);}
.conversas-busca{
  width:100%; border:1px solid var(--border); border-radius:99px; padding:8px 14px; font-size:.85rem;
  background:var(--surface-2); color:var(--ink);
}
.conversas-itens{flex:1; overflow-y:auto;}
.conversas-item{
  display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; border-bottom:1px solid var(--border);
  transition:background .1s;
}
.conversas-item:hover{background:var(--surface-2);}
.conversas-item.ativo{background:var(--purple-bg);}
.conversas-item-info{min-width:0; flex:1;}
.conversas-item-topo{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.conversas-item-nome{font-weight:700; font-size:.9rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.conversas-item-hora{font-size:.7rem; color:var(--ink-3); flex:none;}
.conversas-item-msg{font-size:.8rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px;}
.conversas-vazio-lista{padding:30px 16px; text-align:center; color:var(--ink-3); font-size:.85rem;}

.conversas-chat{flex:1; display:flex; flex-direction:column; min-width:0; background:var(--bg);}
.conversas-chat-head{
  display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--border);
  background:var(--surface); flex:none;
}
.conversas-chat-nome{font-weight:700; font-size:.95rem; color:var(--ink); display:flex; align-items:center; gap:6px;}
.conversas-chat-fone{color:var(--ink-3); font-size:.78rem; margin-top:1px;}
.conversas-editar-nome{
  background:none; border:none; color:var(--ink-3); cursor:pointer; font-size:.75rem; padding:2px 4px;
}
.conversas-editar-nome:hover{color:var(--navy);}
.conversas-chat-body{flex:1; overflow-y:auto; padding:20px 24px; display:flex; flex-direction:column; gap:8px;}
.conversas-chat-form{
  display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--border); background:var(--surface); flex:none;
}
.conversas-chat-form input{
  flex:1; border:1px solid var(--border); border-radius:99px; padding:10px 16px; font-size:.9rem;
  background:var(--surface-2); color:var(--ink);
}
.conversas-chat-form input:focus{outline:2px solid var(--purple); outline-offset:1px;}
.conversas-chat-form button{border-radius:99px; padding:10px 20px;}
.conversas-vazio-chat{
  flex:1; display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:.9rem; text-align:center; padding:20px;
}

.msg-bubble{
  max-width:65%; padding:8px 12px; border-radius:12px; font-size:.87rem; line-height:1.4;
  word-wrap:break-word; white-space:pre-wrap;
}
.msg-bubble.in{
  align-self:flex-start; background:var(--surface); border:1px solid var(--border); color:var(--ink);
  border-bottom-left-radius:3px;
}
.msg-bubble.out{
  align-self:flex-end; background:var(--navy); color:#fff;
  border-bottom-right-radius:3px;
}

@media (max-width:900px){
  .conversas-wrap{height:calc(100vh - 61px); position:relative;}
  .conversas-lista{width:100%; position:absolute; inset:0; z-index:2; transition:transform .15s;}
  .conversas-lista.recuada{transform:translateX(-100%);}
  .conversas-chat{width:100%; position:absolute; inset:0; z-index:1;}
}

@media (max-width:640px){
  .kanban{flex-direction:column; overflow-x:visible;}
  .kcol{max-height:none;}
}

@media (max-width:640px){
  .kpi-value{font-size:1.3rem;}
  form.inline{flex-direction:column; align-items:stretch;}
  .field input, .field select{min-width:0; width:100%;}
  .nav{gap:2px;}
  .nav a{padding:7px 10px; font-size:.82rem;}
}