:root{--bg:#0a1116;--surface:#0f1920;--surface-2:#152029;--surface-3:#1c2934;--text:#e9eff3;--muted:#8a9aa8;--border:#1e2b35;--border-strong:#2b3b47;--accent:#2dd4bf;--accent-hover:#5eead4;--on-accent:#052421;--accent-soft:#2dd4bf24;--brand:#f8cd15;--brand-text:#f8cd15;--bubble-in:#172630;--bubble-out:#104640;--danger:#f97066;--danger-soft:#f9706626;--ok:#4ade80;--warn:#fbbf24;--off:#8b9aa6;--blue:#60a5fa;--violet:#c084fc;--radius-sm:8px;--radius:12px;--radius-lg:16px;--shadow:0 1px 0 #ffffff08 inset,0 6px 24px #00000047;--shadow-pop:0 14px 48px #0000008c;--font:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;color-scheme:dark}
:root[data-theme=light]{--bg:#f3f5f8;--surface:#fff;--surface-2:#f2f5f8;--surface-3:#e8edf2;--text:#0f1b26;--muted:#5b6b79;--border:#e2e8ee;--border-strong:#cfd8e0;--accent:#0f766e;--accent-hover:#0b5f58;--on-accent:#fff;--accent-soft:#0f766e1f;--brand-text:#a87900;--bubble-in:#fff;--bubble-out:#d3efe9;--danger:#b42318;--danger-soft:#b4231818;--ok:#15803d;--warn:#b45309;--off:#62707d;--blue:#1d4ed8;--violet:#7e22ce;--shadow:0 1px 2px #0f1b260f,0 4px 16px #0f1b260d;--shadow-pop:0 10px 40px #0f1b262e;color-scheme:light}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}button,input,select,textarea{font:inherit;color:inherit}code,.mono,.paircode,.num{font-family:var(--mono)}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}h1{font-size:20px}h2{font-size:16px}h3{font-size:14px}p{margin:0 0 8px}.muted{color:var(--muted)}.small{font-size:12px}.bold{font-weight:600}.right{text-align:right}.nowrap{white-space:nowrap}.hidden{display:none!important}
/* layout */
#app{height:100%}.shell{display:grid;grid-template-columns:232px 1fr;height:100%;overflow:hidden}.shell.collapsed{grid-template-columns:64px 1fr}
.sidenav{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.brand{display:flex;align-items:center;gap:10px;padding:16px 14px;border-bottom:1px solid var(--border)}.brand .logo{width:32px;height:32px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:var(--on-accent);font-weight:700;flex:none}.brand .name{font-weight:700;letter-spacing:.04em;color:var(--brand-text);white-space:nowrap;overflow:hidden}
.nav{padding:8px;display:flex;flex-direction:column;gap:2px;overflow:auto;flex:1}.nav .group{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:12px 10px 4px}.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);color:var(--text);text-decoration:none;position:relative}.nav a:hover{background:var(--surface-2)}.nav a.active{background:var(--accent-soft);color:var(--accent)}.nav a svg{width:18px;height:18px;flex:none}.nav .badge{margin-left:auto}
.collapsed .nav a span,.collapsed .brand .name,.collapsed .nav .group,.collapsed .sidefoot .who{display:none}.collapsed .nav .badge{position:absolute;top:4px;right:4px;margin:0}
.sidefoot{border-top:1px solid var(--border);padding:10px;display:flex;align-items:center;gap:8px}.sidefoot .who{flex:1;min-width:0}.sidefoot .who div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--surface)}.topbar h1{flex:1}.content{padding:20px;overflow:auto;flex:1;min-height:0}.content.flush{padding:0;overflow:hidden}
.badge{background:var(--danger);color:#fff;font-size:11px;font-weight:600;min-width:18px;height:18px;border-radius:9px;display:inline-grid;place-items:center;padding:0 5px}.badge.accent{background:var(--accent);color:var(--on-accent)}
/* botones */
button{cursor:pointer;border:1px solid var(--border-strong);background:var(--surface-2);border-radius:var(--radius-sm);padding:8px 12px;font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}button:hover{background:var(--surface-3)}button:disabled{opacity:.55;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}button.primary:hover{background:var(--accent-hover)}button.ghost{background:transparent;border-color:transparent}button.ghost:hover{background:var(--surface-2)}button.danger{color:var(--danger);border-color:var(--danger)}button.danger-solid{background:var(--danger);border-color:var(--danger);color:#fff}button.sm{padding:4px 8px;font-size:12px}button.icon{padding:6px;border-radius:50%}button svg{width:16px;height:16px}
/* forms */
label.field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}input,select,textarea{background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:9px 11px;width:100%;outline:none;color:var(--text)}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}textarea{min-height:90px;resize:vertical}label.check{display:flex;gap:8px;align-items:flex-start;cursor:pointer}label.check input{width:auto;margin-top:3px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row-end{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}.form-error{color:var(--danger);font-size:13px}.ok-text{color:var(--ok)}
fieldset.choice{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;display:flex;flex-direction:column;gap:8px}fieldset.choice legend{padding:0 4px;color:var(--muted);font-size:12px}fieldset.choice label{display:flex;gap:8px;align-items:center}fieldset.choice input{width:auto}
/* cards / tables */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.card+.card{margin-top:12px}.card h2{margin-bottom:8px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}th{font-size:12px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.04em}tr:hover td{background:var(--surface-2)}
.status{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;background:var(--surface-3);color:var(--muted)}.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}.status[data-tone=ok]{color:var(--ok);background:#4ade8020}.status[data-tone=warn]{color:var(--warn);background:#fbbf2420}.status[data-tone=bad]{color:var(--danger);background:var(--danger-soft)}.status[data-tone=off]{color:var(--off)}.status[data-tone=accent]{color:var(--accent);background:var(--accent-soft)}
.health-dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--off)}.health-dot[data-state=ok]{background:var(--ok)}.health-dot[data-state=bad]{background:var(--danger)}.health-dot[data-state=warn]{background:var(--warn)}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}.empty strong{display:block;color:var(--text);margin-bottom:4px}
/* modal, toasts */
.modal-bg{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:50;padding:16px;animation:fade .12s}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);width:min(560px,100%);max-height:92vh;display:flex;flex-direction:column}.modal.wide{width:min(900px,100%)}.modal header{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border)}.modal header h2{flex:1}.modal .body{padding:18px;overflow:auto}@keyframes fade{from{opacity:0}}
#toasts{position:fixed;bottom:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:60}.toast{background:var(--surface-3);border:1px solid var(--border-strong);padding:10px 14px;border-radius:var(--radius);box-shadow:var(--shadow-pop);max-width:360px;animation:fade .15s;cursor:pointer}.toast.bad{border-color:var(--danger)}.toast.ok{border-color:var(--ok)}
/* login */
.login{min-height:100%;display:grid;place-items:center;padding:20px}.login .card{width:min(380px,100%)}.login .brand{border:0;padding:0 0 16px;justify-content:center}
/* dashboard */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:12px}.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}.kpi .label{color:var(--muted);font-size:12px}.kpi .value{font-size:26px;font-weight:700;font-family:var(--mono);margin:4px 0 2px}.kpi .trend{font-size:12px}.kpi .trend.up{color:var(--ok)}.kpi .trend.down{color:var(--danger)}.kpi[data-tone=blue] .value{color:var(--blue)}.kpi[data-tone=green] .value{color:var(--ok)}.kpi[data-tone=violet] .value{color:var(--violet)}.kpi[data-tone=amber] .value{color:var(--warn)}
.chart{width:100%;height:240px}.mx-bar{fill:var(--accent);opacity:.9}.mx-bar:hover{fill:var(--accent-hover)}.mx-axis{fill:var(--muted);font-size:11px}.mx-grid{stroke:var(--border);stroke-dasharray:3 3}
.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-sm);overflow:hidden}.seg button{border:0;border-radius:0;background:transparent}.seg button.active{background:var(--accent-soft);color:var(--accent)}
/* chats */
.chats{display:grid;grid-template-columns:340px 1fr;height:100%;min-height:0}.chat-list{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;background:var(--surface)}.chat-list .search{padding:10px;border-bottom:1px solid var(--border);display:flex;gap:6px}.chat-list ul{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
.chat-item{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;align-items:flex-start}.chat-item:hover{background:var(--surface-2)}.chat-item.active{background:var(--accent-soft)}.avatar{width:38px;height:38px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;font-weight:600;flex:none;color:var(--muted)}.chat-item .mid{flex:1;min-width:0}.chat-item .top{display:flex;justify-content:space-between;gap:6px}.chat-item .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-item .time{font-size:11px;color:var(--muted);flex:none}.chat-item .preview{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-item .tags{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap}.chip{font-size:10px;padding:1px 6px;border-radius:999px;background:var(--surface-3);color:var(--muted)}.chip.stage{color:#fff}
.chat-view{display:flex;flex-direction:column;min-height:0;min-width:0}.chat-head{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface)}.chat-head .info{flex:1;min-width:0}.chat-head .name{font-weight:600;display:flex;gap:6px;align-items:center}.chat-phone{color:var(--muted);font-size:12px;font-family:var(--mono)}.chat-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;align-items:center}.chat-actions{display:flex;gap:4px}
.msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:6px;background:var(--bg)}.msg{max-width:min(70%,560px);padding:8px 12px;border-radius:14px;background:var(--bubble-in);align-self:flex-start;position:relative;white-space:pre-wrap;word-wrap:break-word;box-shadow:var(--shadow)}.msg.out{align-self:flex-end;background:var(--bubble-out)}.msg .meta{font-size:10px;color:var(--muted);text-align:right;margin-top:3px;display:flex;gap:4px;justify-content:flex-end;align-items:center}.msg .sender{font-size:11px;color:var(--accent);font-weight:600}.msg img,.msg video{max-width:100%;border-radius:8px;display:block;margin-bottom:4px;cursor:pointer}.msg audio{max-width:260px;display:block}.msg .doc{display:flex;gap:8px;align-items:center;padding:6px;background:#0002;border-radius:8px}.msg.note{align-self:center;background:#fbbf2426;border:1px dashed var(--warn);font-size:12px;max-width:80%}.day{align-self:center;font-size:11px;color:var(--muted);background:var(--surface-2);padding:2px 10px;border-radius:999px;margin:6px 0}.tick{color:var(--muted)}.tick.read{color:var(--blue)}
.composer{border-top:1px solid var(--border);background:var(--surface);padding:10px 12px;display:flex;gap:8px;align-items:flex-end}.composer textarea{min-height:42px;max-height:160px;flex:1}.composer .tools{display:flex;gap:2px}
.flow-banner{display:flex;gap:10px;align-items:center;padding:8px 16px;background:var(--accent-soft);border-bottom:1px solid var(--border);font-size:13px}.flow-banner-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.2s infinite}@keyframes pulse{50%{opacity:.3}}
.qr-pop{position:absolute;bottom:100%;left:0;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-pop);width:360px;max-height:280px;overflow:auto;z-index:5}.qr-pop div{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border)}.qr-pop div:hover,.qr-pop div.sel{background:var(--surface-2)}.qr-pop b{font-family:var(--mono);color:var(--accent)}
.side-panel{width:300px;border-left:1px solid var(--border);background:var(--surface);overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px}.chats.with-panel{grid-template-columns:340px 1fr 300px}.note{background:var(--surface-2);border-radius:var(--radius-sm);padding:8px 10px;font-size:13px}.note .by{font-size:11px;color:var(--muted);margin-top:4px;display:flex;justify-content:space-between}
/* board */
.board{display:flex;gap:12px;height:100%;overflow:auto;padding:16px;align-items:flex-start}.col{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:280px;flex:none;display:flex;flex-direction:column;max-height:100%}.col header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:3px solid var(--col)}.col header .count{margin-left:auto;color:var(--muted);font-size:12px}.col .cards-col{padding:8px;overflow:auto;display:flex;flex-direction:column;gap:6px;min-height:60px;flex:1}.col.over .cards-col{background:var(--accent-soft)}
.kcard{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;cursor:grab}.kcard:active{cursor:grabbing}.kcard .name{font-weight:600;font-size:13px}.kcard .preview{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kcard .foot{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}.kcard.dragging{opacity:.4}
/* connections */
.connection-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.connection{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.connection[data-health=down]{border-color:var(--danger)}.connection-main{flex:1;min-width:200px}.connection-name{font-weight:600;font-size:15px}.connection-alert{color:var(--danger);font-size:13px;margin-top:4px}.connection-actions{display:flex;gap:6px;flex-wrap:wrap}.connection-history{width:100%;border-top:1px solid var(--border);padding-top:10px;font-size:13px}.connection-history div{display:flex;gap:10px;padding:3px 0}.connection-history .t{color:var(--muted);font-family:var(--mono);font-size:12px;flex:none}
.paircode{font-size:34px;letter-spacing:.12em;text-align:center;padding:16px;background:var(--surface-2);border-radius:var(--radius);font-weight:600;color:var(--accent)}.qr{display:block;margin:0 auto;width:280px;height:280px;border-radius:var(--radius);background:#fff;padding:8px}.link-result ol,.steps{padding-left:20px;margin:8px 0}.link-result li,.steps li{margin:4px 0}
.recovery-codes{columns:2;list-style:none;padding:0;margin:8px 0}.recovery-codes code{display:block;padding:4px 8px;background:var(--surface-2);border-radius:6px;margin-bottom:4px}
/* flows */
.flow{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}.flow-main{flex:1;min-width:240px}.flow-title-row{display:flex;gap:8px;align-items:center}.flow-title{font-weight:600;font-size:15px}.flow-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.switch{position:relative;width:38px;height:22px;background:var(--surface-3);border-radius:11px;cursor:pointer;flex:none;border:1px solid var(--border-strong)}.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:.15s}.switch.on{background:var(--accent)}.switch.on::after{left:18px;background:var(--on-accent)}
.step{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:10px 12px;background:var(--surface-2);display:flex;flex-direction:column;gap:8px}.step[data-type=delay]{border-left-color:var(--warn)}.step[data-type=wait_reply]{border-left-color:var(--violet)}.step .head{display:flex;align-items:center;gap:8px}.step .head .t{font-weight:600;flex:1}.branch{margin-left:16px;border-left:2px dashed var(--border-strong);padding-left:12px;display:flex;flex-direction:column;gap:8px}.branch-head{display:flex;gap:8px;align-items:center}.steps-list{display:flex;flex-direction:column;gap:8px}.add-step{display:flex;gap:6px;flex-wrap:wrap}
.run-list{list-style:none;padding:0;margin:0}.run-list li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}.run-state{display:flex;gap:8px;align-items:center;margin-left:auto}
/* sites */
.site{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}.site-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.site-head h3{flex:1}.snippet{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;font-family:var(--mono);font-size:12px;overflow:auto;white-space:nowrap}
/* accounts admin */
.account-name{display:flex;gap:8px;align-items:center;font-weight:600}
/* responsive */
.bottomnav{display:none}
@media (max-width:860px){.shell,.shell.collapsed{grid-template-columns:1fr;grid-template-rows:1fr auto}.sidenav{display:none}.bottomnav{display:flex;border-top:1px solid var(--border);background:var(--surface);justify-content:space-around;padding:6px 4px env(safe-area-inset-bottom)}.bottomnav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--muted);text-decoration:none;padding:4px 8px;position:relative}.bottomnav a.active{color:var(--accent)}.bottomnav a svg{width:20px;height:20px}.bottomnav .badge{position:absolute;top:0;right:0}.content{padding:12px}.chats,.chats.with-panel{grid-template-columns:1fr}.chat-list.hide-m,.chat-view.hide-m,.side-panel.hide-m{display:none}.form-grid{grid-template-columns:1fr}.msg{max-width:88%}.topbar{padding:10px 12px}.side-panel{width:auto;border-left:0}}