/* Identidade visual Connect+ (referência: app.connectchannels.com.br, capturas 31/07/2026) */
:root{
  --bg:#eef1f6; --card:#fff; --ink:#1f2937; --ink-soft:#6b7280; --ink-faint:#9ca3af;
  --purple:#6759e8; --purple-soft:#efedfd; --green:#22c55e; --green-soft:#e8f9ef;
  --amber:#f59e0b; --amber-soft:#fef4e2; --red:#ef4444; --red-soft:#fdecec;
  --line:#e5e7eb; --radius:12px;
  --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{font-family:"Nunito Sans","Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
button{font:inherit;cursor:pointer}
select,input{font:inherit}

/* ---- gate (validação de acesso) ---- */
.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.gate-box{text-align:center;color:var(--ink-soft)}
.gate .logo{font-weight:800;font-size:28px;color:#8a8f98;margin-bottom:12px}
.gate .logo b{color:var(--purple)} .gate .logo span{color:#3fae2a;font-weight:900}
.gate .error{color:var(--red);font-weight:700}

/* ---- header ---- */
.head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 18px 4px}
.title-wrap{display:flex;align-items:center;gap:10px;margin-right:6px}
h1{font-size:18px;font-weight:800}
.live-pill{display:inline-flex;align-items:center;gap:6px;background:var(--green-soft);color:#15803d;font-weight:700;font-size:11px;padding:4px 10px;border-radius:999px}
.live-pill.off{background:var(--amber-soft);color:#b45309}
.live-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.4)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.search{flex:1;min-width:200px;max-width:340px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--ink-faint)}
.search input{border:0;outline:0;width:100%;color:var(--ink);background:transparent}
.chip,.chip-select{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:600;color:#4b5563;max-width:200px}
.chip.on{background:var(--purple);border-color:var(--purple);color:#fff}

/* ---- KPIs ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;padding:12px 18px}
.kpi{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 14px}
.kpi .v{font-size:21px;font-weight:800}
.kpi .l{color:var(--ink-soft);font-size:11.5px;font-weight:600;margin-top:2px}
.kpi.pp .v{color:var(--purple)} .kpi.warn .v{color:var(--amber)} .kpi.ok .v{color:#15803d} .kpi.bad .v{color:var(--red)}

/* ---- board ---- */
.tabs{display:none;gap:8px;padding:0 18px 10px}
.tabs .chip.on{background:var(--purple);color:#fff}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start;padding:4px 18px 24px}
.col{background:#e6eaf1;border-radius:14px;padding:9px;min-height:120px}
.col-head{display:flex;align-items:center;gap:8px;padding:5px 7px 9px;font-weight:800;font-size:14.5px}
.col-head .cnt{color:var(--ink-faint);font-weight:700}
.col-head .alert-badge{margin-left:auto;background:var(--red);color:#fff;border-radius:999px;font-size:11px;font-weight:800;padding:2px 8px}
.cards{display:flex;flex-direction:column;gap:9px}
.empty{background:#fff;border:1px dashed var(--line);border-radius:10px;color:var(--ink-faint);text-align:center;padding:22px 10px;font-weight:600}

/* ---- card ---- */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:11px 13px;cursor:pointer;transition:transform .12s,box-shadow .12s;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
.card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,24,40,.13)}
.card.warn{background:var(--amber-soft)}
.card.crit{background:#fdf0f2}
.card-top{display:flex;align-items:center;gap:10px}
.cavatar{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:var(--purple);overflow:hidden}
.cavatar img{width:100%;height:100%;object-fit:cover}
.proto{font-size:10.5px;color:var(--ink-faint);font-weight:700}
.cname{font-weight:800;font-size:13.5px;line-height:1.25;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone{color:var(--ink-soft);font-size:11.5px}
.ch{margin-left:auto;flex:none;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;padding:3px}
.ch svg{width:100%;height:100%;display:block}
.ch.wa{background:#25d366}.ch.ig{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}.ch.ms{background:linear-gradient(45deg,#0695ff,#a334fa,#ff6968)}.ch.tg{background:#229ed9}.ch.other{background:#94a3b8}
.meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tag{font-size:10.5px;font-weight:700;border-radius:6px;padding:2.5px 7px}
.tag.bot{background:var(--purple-soft);color:var(--purple)}
.tag.dep{background:#eef2f7;color:#475569}
.tag.grn{background:var(--green-soft);color:#15803d}
.tag.amb{background:var(--amber-soft);color:#b45309}
.tag.red{background:var(--red-soft);color:#b91c1c}
.agent-pill{display:inline-flex;align-items:center;gap:6px;background:#1f2937;color:#fff;border-radius:999px;padding:2.5px 9px 2.5px 3px;font-size:11.5px;font-weight:700;max-width:100%}
.agent-pill .aa{width:19px;height:19px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;font-size:9.5px;overflow:hidden;flex:none}
.agent-pill .aa img{width:100%;height:100%;object-fit:cover}
.card-foot{display:flex;align-items:center;gap:10px;margin-top:9px;color:var(--ink-soft);font-size:11.5px;flex-wrap:wrap}
.timer{font-weight:800;color:var(--ink)}
.card.crit .timer{color:var(--red)}
.card.warn .timer{color:#b45309}
.unread{margin-left:auto;background:var(--purple);color:#fff;font-size:10.5px;font-weight:800;border-radius:999px;min-width:19px;height:19px;display:flex;align-items:center;justify-content:center;padding:0 6px}

/* ---- modal ---- */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal-card{background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.25);width:min(560px,100%);max-height:90vh;overflow:auto;padding:20px}
.modal-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.modal-head .cavatar{width:46px;height:46px}
.modal-close{margin-left:auto;background:none;border:0;font-size:20px;color:var(--ink-faint)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:14px 0;font-size:12.5px}
.detail-grid .k{color:var(--ink-soft);font-weight:600}
.detail-grid .val{font-weight:700}
.modal-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.btn{border-radius:10px;padding:9px 16px;font-weight:700;border:1px solid var(--line);background:#fff;color:#374151;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn.primary{background:var(--purple);border-color:var(--purple);color:#fff}
.hist{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.hist h4{font-size:12.5px;color:var(--ink-soft);margin-bottom:8px}
.hist-item{font-size:12px;padding:6px 0;border-bottom:1px dashed var(--line);color:#374151}
.hist-item .t{color:var(--ink-faint);font-size:11px}

/* ---- status drawer ---- */
.status-list{font-size:12.5px;margin-top:10px}
.status-list div{padding:4px 0;border-bottom:1px dashed var(--line)}

/* ---- responsivo ---- */
@media(max-width:900px){
  .board{grid-template-columns:1fr}
  .tabs{display:flex}
  .board .col{display:none}
  .board .col.active{display:block}
  .search{max-width:none}
}