:root{--color-bg:#fff;--color-surface:#f8fafc;--color-surface-2:#f1f5f9;--color-border:#e2e8f0;--color-border-strong:#cbd5e1;--color-text-primary:#0f172a;--color-text-secondary:#475569;--color-text-muted:#94a3b8;--color-accent:#2563eb;--color-accent-hover:#1d4ed8;--color-accent-light:#dbeafe;--color-success:#16a34a;--color-success-light:#dcfce7;--color-warning:#d97706;--color-warning-light:#fef3c7;--color-danger:#dc2626;--color-danger-light:#fee2e2;--color-inbound:#0891b2;--color-inbound-light:#cffafe;--color-outbound:#7c3aed;--color-outbound-light:#ede9fe;--color-whatsapp:#16a34a;--color-whatsapp-light:#dcfce7;--color-email:#2563eb;--color-email-light:#dbeafe;--color-phone:#ea580c;--color-phone-light:#ffedd5;--ink-0:var(--color-bg);--ink-50:var(--color-surface);--ink-100:var(--color-border);--ink-150:var(--color-border);--ink-200:var(--color-border-strong);--ink-300:#94a3b8;--ink-400:var(--color-text-muted);--ink-500:var(--color-text-secondary);--ink-600:var(--color-text-secondary);--ink-700:#1e293b;--ink-800:var(--color-text-primary);--ink-900:var(--color-text-primary);--bw-primary:var(--color-accent);--bw-primary-700:var(--color-accent-hover);--bw-primary-50:var(--color-accent-light);--green:var(--color-success);--green-50:var(--color-success-light);--amber:var(--color-warning);--amber-50:var(--color-warning-light);--red:var(--color-danger);--red-50:var(--color-danger-light);--violet:var(--color-outbound);--violet-50:var(--color-outbound-light);--teal:var(--color-inbound);--teal-50:var(--color-inbound-light);--c-whatsapp:var(--color-whatsapp);--c-phone:var(--color-phone);--c-email:var(--color-email);--nav-w:240px;--header-h:56px;--radius:8px;--radius-lg:12px;--shadow-sm:0 1px 3px #0f172a0f;--shadow-md:0 1px 3px #0f172a0f, 0 4px 12px -4px #0f172a0f;--shadow-lg:0 8px 32px -8px #0f172a2e;--font-ui:"Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;--font-mono:"Inter", ui-monospace, monospace;--font-display:"Inter", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-ui);color:var(--color-text-primary);background:var(--color-surface);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:14px;line-height:1.5}.display,.num-display{font-family:var(--font-display);letter-spacing:-.015em;font-weight:600}.mono{font-family:var(--font-ui);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}button{font-family:inherit;font-size:inherit;cursor:pointer}input,textarea,select{font-family:inherit;font-size:inherit}.app{grid-template-columns:var(--nav-w) 1fr;height:100vh;display:grid;overflow:hidden}.app.collapsed{grid-template-columns:var(--nav-w-collapsed) 1fr}.sidebar{background:var(--color-bg);border-right:1px solid var(--color-border);flex-direction:column;display:flex;overflow:hidden}.sidebar-brand{height:var(--header-h);border-bottom:1px solid var(--ink-100);align-items:center;gap:8px;padding:14px 16px;display:flex}.brand-logo{object-fit:contain;flex:0 0 30px;width:30px;height:30px}.brand-mark{background:var(--color-accent);border-radius:8px;flex:0 0 28px;place-items:center;width:28px;height:28px;display:grid;position:relative;overflow:hidden}.brand-mark:before,.brand-mark:after{content:"";background:#ffffffd9;border-radius:999px;position:absolute}.brand-mark:before{background:0 0;border:2px solid #fffc;width:22px;height:22px;top:-8px;left:-8px}.brand-mark:after{background:0 0;border:2px solid #fff;width:14px;height:14px;bottom:-4px;right:-4px}.brand-name{font-family:var(--font-ui);letter-spacing:-.01em;color:var(--color-text-primary);letter-spacing:-.005em;font-size:18px;font-weight:600;line-height:1}.brand-name .dot{color:var(--color-accent)}.sidebar-search{padding:10px 12px;position:relative}.sidebar-search input{border:1px solid var(--ink-150);width:100%;height:30px;color:var(--ink-800);background:#fff;border-radius:6px;outline:none;padding:0 10px 0 28px;font-size:12.5px;transition:border .15s,box-shadow .15s}.sidebar-search input:focus{border-color:var(--bw-primary);box-shadow:0 0 0 3px var(--bw-primary-50)}.sidebar-search svg{color:var(--ink-400);position:absolute;top:50%;left:21px;transform:translateY(-50%)}.sidebar-search kbd{font-family:var(--font-mono);color:var(--ink-400);background:var(--ink-50);border:1px solid var(--ink-150);border-radius:4px;padding:1px 4px;font-size:10px;position:absolute;top:50%;right:18px;transform:translateY(-50%)}.nav-section{padding:6px 8px}.nav-section+.nav-section{border-top:1px solid var(--ink-100);margin-top:4px;padding-top:10px}.nav-label{letter-spacing:.01em;color:var(--ink-400);padding:4px 10px 6px;font-size:11px;font-weight:600}.nav-item{color:var(--color-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:8px;align-items:center;gap:12px;padding:8px 12px;font-size:14px;font-weight:500;transition:background .12s,color .12s;display:flex}.nav-item:hover{background:var(--color-surface);color:var(--color-text-primary)}.nav-item.active{background:var(--color-accent-light);color:var(--color-accent)}.nav-item.active .nav-icon{color:var(--color-accent)}.nav-icon{width:16px;height:16px;color:var(--ink-500);flex:0 0 16px}.nav-item .badge{color:var(--ink-500);background:var(--ink-100);font-variant-numeric:tabular-nums;border-radius:10px;margin-left:auto;padding:1px 6px;font-size:10.5px;font-weight:500}.nav-item.active .badge{background:var(--bw-primary-50);color:var(--bw-primary-700)}.sidebar-footer{border-top:1px solid var(--ink-100);align-items:center;gap:10px;margin-top:auto;padding:10px 12px;display:flex}.avatar{color:#fff;background:linear-gradient(135deg,#6e8af0,#1554f0);border-radius:50%;flex:0 0 26px;place-items:center;width:26px;height:26px;font-size:11px;font-weight:600;display:grid}.footer-meta{flex:1;min-width:0}.footer-meta .name{color:var(--ink-900);white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;font-weight:600;overflow:hidden}.footer-meta .tenant{color:var(--ink-500);white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.main{background:var(--ink-0);flex-direction:column;min-width:0;display:flex;overflow:hidden}.topbar{height:var(--header-h);border-bottom:1px solid var(--color-border);background:var(--color-bg);flex:0 0 var(--header-h);align-items:center;gap:16px;padding:0 24px;display:flex}.topbar-title{font-family:var(--font-ui);color:var(--color-text-primary);letter-spacing:-.01em;font-size:20px;font-weight:600}.crumb{color:var(--ink-500);align-items:center;gap:6px;font-size:12.5px;display:flex}.crumb .sep{color:var(--ink-300)}.crumb .current{color:var(--ink-900);font-weight:500}.topbar-actions{align-items:center;gap:8px;margin-left:auto;display:flex}.icon-btn{width:30px;height:30px;color:var(--ink-500);background:0 0;border:1px solid #0000;border-radius:6px;place-items:center;transition:background .12s,color .12s,border-color .12s;display:grid}.icon-btn:hover{background:var(--ink-100);color:var(--ink-800)}.btn{border:1px solid var(--color-border);height:36px;color:var(--color-text-primary);background:#fff;border-radius:8px;align-items:center;gap:6px;padding:0 14px;font-size:13.5px;font-weight:500;transition:background .12s,border-color .12s,transform 40ms;display:inline-flex}.btn:hover{background:var(--color-surface);border-color:var(--color-border-strong)}.btn:active{transform:translateY(.5px)}.btn-primary{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.btn-primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}.btn-ghost{color:var(--color-text-secondary);background:0 0;border-color:#0000}.btn-ghost:hover{background:var(--color-surface);color:var(--color-text-primary);border-color:#0000}.btn-danger{color:var(--color-danger);border-color:var(--color-border);background:#fff}.btn-danger:hover{background:var(--color-danger-light);border-color:#f5c2c2}.btn-warn{background:var(--color-phone-light);color:var(--color-phone);border-color:#0000}.btn-warn:hover{background:#fed7aa}.btn-md{height:40px;padding:0 18px;font-size:14px}.btn-lg{height:48px;padding:0 22px;font-size:15px}.btn-sm{height:32px;padding:0 10px;font-size:13px}.input{border:1px solid var(--color-border-strong);height:40px;font-family:var(--font-ui);color:var(--color-text-primary);background:#fff;border-radius:8px;outline:none;width:100%;padding:0 14px;font-size:14px;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-light)}.input.error{border-color:var(--color-danger)}.input-sm{height:36px;font-size:13px}.label-text{color:var(--color-text-primary);margin-bottom:6px;font-size:13px;font-weight:500;display:block}.content{flex:1;min-height:0;overflow:auto}.page-head{border-bottom:1px solid var(--ink-100);justify-content:space-between;align-items:flex-end;gap:16px;padding:18px 24px 14px;display:flex}.page-head h1{font-family:var(--font-display);letter-spacing:-.018em;color:var(--color-text-primary);margin:0 0 4px;font-size:26px;font-weight:600}.page-head .sub{color:var(--ink-500);font-size:12.5px}.page-head .actions{align-items:center;gap:8px;display:flex}.badge{background:var(--color-surface-2);color:var(--color-text-secondary);border-radius:6px;align-items:center;gap:5px;padding:3px 10px;font-size:12px;font-weight:500;line-height:1.4;display:inline-flex}.badge.dot:before{content:"";opacity:.9;background:currentColor;border-radius:50%;width:6px;height:6px}.badge.green{background:var(--color-success-light);color:var(--color-success)}.badge.amber{background:var(--color-warning-light);color:var(--color-warning)}.badge.red{background:var(--color-danger-light);color:var(--color-danger)}.badge.violet{background:var(--color-outbound-light);color:var(--color-outbound)}.badge.teal{background:var(--color-inbound-light);color:var(--color-inbound)}.badge.blue{background:var(--color-accent-light);color:var(--color-accent)}.badge.orange{background:var(--color-phone-light);color:var(--color-phone)}.badge.dark{background:var(--color-border);color:#475569}.badge.slate{color:#475569;background:#f1f5f9}.pulse{background:var(--green);border-radius:50%;width:6px;height:6px;animation:1.6s infinite pulse;box-shadow:0 0 #16a34a80}@keyframes pulse{0%{box-shadow:0 0 #16a34a73}70%{box-shadow:0 0 0 6px #16a34a00}to{box-shadow:0 0 #16a34a00}}.card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.card-head{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;gap:8px;padding:16px 24px;display:flex}.card-title{color:var(--color-text-primary);font-size:15px;font-weight:600}.card-sub{color:var(--color-text-secondary);font-size:13px}.card-body{padding:24px}.tbl{border-collapse:collapse;width:100%;font-size:13.5px}.tbl thead th{text-align:left;color:var(--color-text-secondary);letter-spacing:0;border-bottom:1px solid var(--color-border);background:var(--color-surface);z-index:1;padding:10px 16px;font-size:12.5px;font-weight:600;position:sticky;top:0}.tbl tbody td{border-bottom:1px solid var(--color-border);color:var(--color-text-primary);vertical-align:middle;height:48px;padding:12px 16px}.tbl tbody tr:hover{background:var(--color-surface);cursor:pointer}.tbl tbody tr:last-child td{border-bottom:0}.tbl .num{font-variant-numeric:tabular-nums;font-family:var(--font-mono);color:var(--color-text-secondary);font-size:13px}.tbl .muted{color:var(--color-text-muted)}.ch{border-radius:6px;align-items:center;gap:6px;padding:3px 10px;font-size:12px;font-weight:500;line-height:1.4;display:inline-flex}.ch.wa{background:var(--color-whatsapp-light);color:var(--color-whatsapp)}.ch.ph{background:var(--color-phone-light);color:var(--color-phone)}.ch.em{background:var(--color-email-light);color:var(--color-email)}.ch-icon{flex:0 0 14px;width:14px;height:14px}.kpis{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.kpi{border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:#fff;padding:20px 24px;position:relative;overflow:hidden}.kpi .label{color:var(--color-text-secondary);align-items:center;gap:8px;font-size:13px;display:flex}.kpi .label .ico{background:var(--color-accent-light);width:28px;height:28px;color:var(--color-accent);border-radius:8px;place-items:center;display:grid}.kpi .value{font-family:var(--font-display);letter-spacing:-.025em;color:var(--color-text-primary);font-variant-numeric:tabular-nums;margin-top:12px;font-size:38px;font-weight:600;line-height:1}.kpi .delta{color:var(--color-text-secondary);align-items:center;gap:4px;margin-top:10px;font-size:13px;display:flex}.kpi .delta.up{color:var(--color-success)}.kpi .delta.down{color:var(--color-danger)}.kpi .spark{pointer-events:none;opacity:.6;height:28px;position:absolute;inset:auto 0 0}.seg{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:8px;padding:3px;display:inline-flex}.seg button{color:var(--color-text-secondary);background:0 0;border:0;border-radius:6px;padding:6px 12px;font-size:13px;font-weight:500}.seg button.active{color:var(--color-text-primary);box-shadow:var(--shadow-sm);background:#fff}.chip{border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;border-radius:8px;align-items:center;gap:6px;height:32px;padding:6px 12px;font-size:13px;display:inline-flex}.chip:hover{background:var(--color-surface);border-color:var(--color-border-strong)}.chip.active{background:var(--color-accent-light);color:var(--color-accent);border-color:#0000}.chip .x{color:var(--color-text-muted);margin-left:2px}.divider-v{background:var(--ink-100);align-self:stretch;width:1px}body.is-login{background:var(--ink-50);overflow:auto}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--ink-200);background-clip:padding-box;border:2px solid #0000;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--ink-300);background-clip:padding-box;border:2px solid #0000}::-webkit-scrollbar-track{background:0 0}body.dense .tbl tbody td{height:40px;padding:8px 12px}body.dense .card-body{padding:18px}body.dense .nav-item{padding:6px 12px}.row{align-items:center;gap:8px;display:flex}.col{flex-direction:column;gap:8px;display:flex}.grow{flex:1;min-width:0}.muted{color:var(--ink-500)}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.nowrap{white-space:nowrap}.page-enter{animation:.25s ease-out fadeUp}@keyframes fadeUp{0%{transform:translateY(4px)}to{transform:translateY(0)}}@keyframes fadeDown{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}[data-tip]{position:relative}svg.spark-svg{display:block}.kpi-label{color:var(--color-text-secondary);font-size:12.5px;font-weight:500}.kpi-value{font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-text-primary);font-variant-numeric:tabular-nums;margin-top:8px;font-size:30px;font-weight:700;line-height:1.05}.brand-eyebrow{color:var(--color-accent);letter-spacing:.01em;margin-bottom:2px;font-size:12px;font-weight:600}.rgrid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start;gap:16px;display:grid}.kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.menu-btn{border:1px solid var(--color-border);background:var(--color-bg);width:36px;height:36px;color:var(--color-text-secondary);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;display:none}.menu-btn:hover{background:var(--color-surface)}.nav-overlay{display:none}@media (width<=860px){.app{grid-template-columns:1fr}.sidebar{z-index:60;width:264px;box-shadow:var(--shadow-lg);transition:transform .22s;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.nav-overlay{z-index:55;background:#0f172a6b;display:block;position:fixed;inset:0}.menu-btn{display:inline-flex}.page-enter{padding-left:16px!important;padding-right:16px!important}.page-head{padding:14px 16px 12px}.topbar{padding:0 14px}.topbar-title{font-size:17px}.crumb{display:none}.rgrid{grid-template-columns:1fr}}@media (width<=560px){.kpis{grid-template-columns:repeat(2,1fr);gap:12px}.kpi{padding:14px 16px}.kpi-value{font-size:26px}}
