/* TramorAI — estilos de la consola de la empresa */
  :root {
    --ground:#ECEAF4; --card:#FFFFFF; --ink:#17142B; --muted:#5E5878; --line:#DAD6EA; --soft:#F3F1F9;
    --violet:#5B3FD9; --violet-ink:#3B23A8; --violet-soft:#EDE8FF; --violet-line:#D5CBFF;
    --lime:#C8F25C; --lime-ink:#3D5203; --lime-soft:#F7FCE6;
    --night:#17142B; --night2:#24203D; --night-line:#3A3459; --night-muted:#A9A3C4; --night-text:#F2F0FA;
    --amber-soft:#FFE7D6; --amber-ink:#8A3A06; --danger:#B42318;
    --r-lg:24px; --r-md:16px; --r-sm:12px;
  }
  * { box-sizing:border-box; }
  html, body { height:100%; }
  body { margin:0; background:var(--ground); color:var(--ink); font:14px/1.45 Inter, system-ui, sans-serif; }
  h1, h2, .display { font-family:Sora, Inter, sans-serif; letter-spacing:-.02em; }
  button, input, textarea, select { font:inherit; color:inherit; }
  button { cursor:pointer; }
  button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }
  .hidden { display:none !important; }
  .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .btn { min-height:40px; padding:0 14px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--card); font-weight:500; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
  .btn:hover { border-color:var(--violet-line); }
  a.btn { text-decoration:none; color:inherit; }
  .btn.primary { background:var(--violet); border-color:var(--violet); color:#fff; font-weight:600; }
  .btn.dark { background:var(--night); border-color:var(--night); color:#fff; }
  .btn.lime { background:var(--lime); border-color:var(--lime); color:var(--ink); font-weight:600; }
  .btn:disabled { opacity:.55; cursor:default; }
  .chip { min-height:34px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:#4A4566; font-size:13px; }
  .chip[aria-pressed="true"] { background:var(--night); border-color:var(--night); color:#fff; }
  .field { width:100%; height:44px; padding:0 14px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--card); }
  textarea.field { height:auto; padding:10px 14px; resize:vertical; }
  .label { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
  .dot { width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block; flex:0 0 auto; }

  /* ---------- Login ---------- */
  #login { min-height:100%; display:grid; place-items:center; padding:24px; }
  #login form { width:100%; max-width:380px; background:var(--card); border-radius:var(--r-lg); padding:28px; display:grid; gap:12px; }
  #login form.hidden { display:none; }
  #login .brand { justify-content:center; }
  .linkbtn { border:0; background:none; color:var(--violet); font:inherit; font-size:14px; justify-self:center; padding:6px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
  .okmsg { color:var(--lime-ink); } .errmsg { color:var(--danger); }
  .brand { display:flex; align-items:center; gap:10px; }
  .brand .mark { width:38px; height:38px; border-radius:12px; background:var(--night); display:grid; place-items:center; flex:0 0 auto; }
  .brand span { font-family:Sora, sans-serif; font-weight:700; font-size:18px; letter-spacing:-.02em; white-space:nowrap; }
  .brand img { display:block; height:auto; }
  .brand img.mk { display:none; border-radius:12px; }

  /* ---------- App ---------- */
  #app { min-height:100%; padding:16px; display:flex; flex-direction:column; gap:16px; min-width:0; max-width:100vw; }
  header.top { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
  nav.tabs { display:flex; gap:4px; padding:4px; border-radius:14px; background:var(--card); max-width:100%; overflow-x:auto; scrollbar-width:none; }
  nav.tabs button { flex:0 0 auto; }
  nav.tabs button { min-height:38px; padding:0 14px; border-radius:10px; border:0; background:transparent; color:#4A4566; }
  nav.tabs button[aria-current="page"] { background:var(--night); color:#fff; font-weight:600; }
  @media (min-width:1100px) { header.top { flex-wrap:nowrap; } .search .kbd { display:none; } }
  .search { flex:1 1 140px; min-width:120px; display:flex; align-items:center; gap:10px; height:46px; padding:0 16px; border-radius:14px; background:var(--card); border:1px solid var(--line); color:var(--muted); }
  .search input { flex:1; min-width:0; border:0; background:transparent; outline:none; color:var(--ink); }
  .kbd { font-size:12px; padding:2px 6px; border-radius:6px; background:var(--ground); color:#4A4566; }
  #statusBtn { min-height:46px; padding:0 16px; border-radius:14px; border:0; font-weight:600; display:flex; align-items:center; gap:8px; }
  #statusBtn.on { background:var(--lime); color:var(--ink); }
  #statusBtn.off { background:var(--card); color:var(--muted); border:1px solid var(--line); }
  #statusBtn.away { background:var(--amber-soft); color:var(--amber-ink); }
  .stwrap { position:relative; }
  @media (max-width:600px) { .hpill { padding:0 10px; } }
  .hpill { height:46px; display:inline-flex; align-items:center; padding:0 14px; border-radius:14px; background:var(--amber-soft); color:var(--amber-ink); font-weight:600; font-size:13px; white-space:nowrap; }
  .stmenu { position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:230px; background:var(--card); border:1px solid var(--line);
    border-radius:var(--r-md, 16px); box-shadow:0 12px 32px rgba(23,20,43,.16); padding:6px; display:flex; flex-direction:column; }
  @media (max-width:640px) { .stmenu { left:0; right:auto; max-width:calc(100vw - 24px); } #meMenu, #bellMenu { left:auto; right:0; } }
  .stmenu button { text-align:left; border:0; background:none; padding:10px 12px; border-radius:10px; font:inherit; color:var(--ink); display:flex; gap:10px; align-items:center; min-height:40px; }
  .stmenu button:hover, .stmenu button:focus-visible { background:var(--soft); }
  .stmenu button[aria-checked="true"] { font-weight:700; }
  .stmenu .sep { font-size:12px; color:var(--muted); padding:8px 12px 2px; }
  #popStack { position:fixed; right:20px; bottom:20px; z-index:60; display:flex; flex-direction:column-reverse; gap:10px; width:min(370px, calc(100vw - 32px)); pointer-events:none; }
  .cpop { pointer-events:auto; background:var(--card); border-radius:18px; box-shadow:0 18px 40px rgba(23,20,43,.22), 0 2px 6px rgba(23,20,43,.08);
    border-left:5px solid var(--g, var(--violet)); padding:14px 14px 12px 14px; display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px;
    animation:cpopIn .28s cubic-bezier(.2,.9,.3,1.2); position:relative; overflow:hidden; }
  .cpop.out { animation:cpopOut .22s ease forwards; }
  @keyframes cpopIn { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:none; } }
  @keyframes cpopOut { to { opacity:0; transform:translateX(30px); } }
  .cpop .av { grid-row:span 3; width:42px; height:42px; border-radius:14px; display:grid; place-items:center; font-weight:700; font-size:15px; color:#fff; background:var(--g, var(--violet)); }
  .cpop .kind { font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--g, var(--violet)); display:flex; gap:6px; align-items:center; }
  .cpop .kind .dotp { width:7px; height:7px; border-radius:50%; background:currentColor; animation:dotp 1.2s infinite; }
  @keyframes dotp { 50% { opacity:.3; } }
  .cpop .who { font-weight:700; font-size:15.5px; grid-column:2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cpop .x { grid-row:1; grid-column:3; border:0; background:none; color:var(--muted); font-size:16px; width:28px; height:28px; border-radius:8px; cursor:pointer; }
  .cpop .x:hover { background:var(--soft); }
  .cpop .meta { grid-column:2 / 4; font-size:12.5px; color:var(--muted); }
  .cpop .prev { grid-column:1 / 4; margin-top:6px; background:var(--soft); border-radius:12px; padding:8px 10px; font-size:13.5px; color:var(--ink);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .cpop .prev:empty { display:none; }
  .cpop .acts { grid-column:1 / 4; display:flex; gap:8px; margin-top:8px; }
  .cpop .acts .btn { min-height:36px; flex:1; font-size:13.5px; }
  .cpop .bar { position:absolute; left:0; bottom:0; height:3px; background:var(--g, var(--violet)); opacity:.5; animation:cpopBar linear forwards; }
  .cpop:hover .bar { animation-play-state:paused; }
  @keyframes cpopBar { from { width:100%; } to { width:0; } }
  .cpop.more { grid-template-columns:1fr; text-align:center; padding:10px; font-size:13px; color:var(--muted); cursor:pointer; border-left-color:var(--line); }
  @media (max-width:640px) { #popStack { right:12px; left:12px; bottom:auto; top:10px; width:auto; flex-direction:column; gap:6px; } .cpop { padding:12px; } .cpop .prev { display:block; white-space:nowrap; text-overflow:ellipsis; } }
  .notif-banner { display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; background:linear-gradient(90deg, #EEE9FF, #F6F3FF); border:1px solid #D9D0FF;
    border-radius:16px; padding:10px 12px 10px 16px; font-size:14px; color:var(--ink); }
  .notif-banner.warn { background:#FFF4E5; border-color:#FFD9A8; }
  .notif-banner .ico { font-size:20px; animation:ring 2.4s ease-in-out 1s 2; transform-origin:50% 0; }
  @keyframes ring { 0%,40%,100% { transform:rotate(0); } 8% { transform:rotate(14deg); } 16% { transform:rotate(-12deg); } 24% { transform:rotate(8deg); } 32% { transform:rotate(-5deg); } }
  .notif-banner .tx { flex:1 1 260px; line-height:1.4; }
  .notif-banner .btn { min-height:38px; }
  .bellmenu { width:min(340px, calc(100vw - 32px)); padding:10px; display:grid; gap:4px; z-index:70; }
  .bellmenu h3 { margin:2px 6px 4px; font-size:15px; }
  .bellmenu label.opt { display:flex; gap:10px; align-items:flex-start; padding:9px 8px; border-radius:10px; cursor:pointer; font-size:14px; line-height:1.35; }
  .bellmenu label.opt:hover { background:var(--soft); }
  .bellmenu label.opt input { width:18px; height:18px; margin-top:1px; flex:none; accent-color:var(--violet); }
  .bellmenu label.opt small { display:block; color:var(--muted); font-size:12px; }
  .bellmenu .bstate { margin:2px 6px 6px; padding:8px 10px; border-radius:10px; font-size:12.5px; line-height:1.4; background:var(--soft); }
  .bellmenu .bstate.ok { background:#E8F7EE; color:#14532D; }
  .bellmenu .bstate.warn { background:#FFF4E5; color:#7A3E00; }
  .bellmenu .bacts { display:flex; gap:8px; flex-wrap:wrap; margin:6px 6px 2px; }
  .bellmenu .bacts .btn { min-height:36px; font-size:13px; border:1px solid var(--line); background:var(--card); padding:0 14px; justify-content:center; }
  .bellmenu .bacts .btn.primary { background:var(--violet); border-color:var(--violet); color:#fff; }
  .sdot { width:10px; height:10px; border-radius:50%; flex:none; display:inline-block; }
  .sdot.online { background:#7FB51F; } .sdot.away { background:#E3A21A; } .sdot.offline { background:#C9C4DD; }
  .tbadge { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; margin-left:6px; border-radius:999px; background:#E5484D; color:#fff; font-size:11.5px; font-weight:800; line-height:1; vertical-align:middle; }
  .tbadge.pulse { animation:pulse 1s ease-out 2; }
  @keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(229,72,77,.55); } 100% { box-shadow:0 0 0 10px rgba(229,72,77,0); } }
  @media (prefers-reduced-motion: reduce) { .tbadge.pulse { animation:none; } }
  #bellBtn { width:46px; height:46px; border-radius:14px; background:var(--card); border:1px solid var(--line); color:var(--muted); display:grid; place-items:center; flex:none; }
  #bellBtn[aria-pressed="true"] { color:var(--violet); }
  .avatar { width:46px; height:46px; border-radius:14px; background:var(--card); border:0; display:grid; place-items:center; font-family:Sora, sans-serif; font-weight:700; }

  #inbox { flex:1; display:flex; flex-wrap:wrap; gap:16px; min-height:0; }
  /* Barra de filtros (computador): una fila a todo el ancho, encima de la lista y la conversación */
  .inbox-bar { flex:1 1 100%; display:flex; align-items:center; gap:10px; min-width:0; }
  .inbox-bar:empty { display:none; }
  #inbox:has(.inbox-bar:not(:empty)) { --inbox-top:160px; } /* 110 + la barra (≈34) + su espacio (16) */
  .inbox-bar .filters { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; flex:0 1 auto; min-width:0; }
  .inbox-bar .filters::-webkit-scrollbar { display:none; }
  .inbox-bar .filters .chip { flex:none; white-space:nowrap; }
  .inbox-bar .gtabs { flex:1 1 auto; min-width:0; padding-left:10px; border-left:1px solid var(--line); }
  .inbox-bar #campFilter { width:auto; max-width:240px; flex:0 0 auto; margin-left:auto; }
  .inbox-rail { flex:0 0 76px; display:flex; flex-direction:column; gap:6px; padding:6px; background:#E2DFF0; border-radius:18px; align-self:flex-start; }
  .inbox-rail button { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 0; border:0; border-radius:14px; background:transparent; color:#5E5A73; font-size:11px; font-weight:600; min-height:56px; }
  .inbox-rail button[aria-current="page"] { background:var(--card); color:var(--violet-ink); box-shadow:0 1px 2px rgba(23,21,43,.08); }
  .inbox-rail .rn { position:absolute; top:4px; right:8px; min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; border-radius:999px; background:var(--violet); color:#fff; font-size:11px; line-height:18px; text-align:center; }
  .inbox-rail .rn:empty { display:none; }
  .sec-off { display:none !important; }
  #intMsgs { flex:1; overflow:auto; padding:18px; display:flex; flex-direction:column; gap:10px; background:#FBFAFE; }
  .intref { display:grid; gap:4px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); margin-top:6px; text-align:left; }
  .col-list { flex:1 1 300px; max-width:360px; min-width:0; display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - var(--inbox-top, 110px)); }
  .col-chat { flex:999 1 440px; min-width:0; background:var(--card); border-radius:var(--r-lg); display:flex; flex-direction:column; overflow:hidden; height:calc(100vh - var(--inbox-top, 110px)); min-height:520px; }
  .col-pilot { flex:1 1 290px; max-width:340px; min-width:0; background:var(--night); color:var(--night-text); border-radius:var(--r-lg); padding:20px; display:flex; flex-direction:column; gap:18px; overflow:auto; height:calc(100vh - var(--inbox-top, 110px)); min-height:520px; }

  .list-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 4px 0; }
  .list-head #count, #newConvBtn { white-space:nowrap; }
  #newConvBtn { width:38px; min-height:38px; padding:0; flex:none; border-radius:50%; font-size:22px; line-height:1; display:grid; place-items:center; }
  .list-head h1 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .list-head h1 { margin:0; font-size:22px; }
  .filters { display:flex; gap:6px; flex-wrap:wrap; }
  #list { flex:1; overflow:auto; display:flex; flex-direction:column; gap:8px; padding-bottom:8px; }
  .conv { text-align:left; width:100%; padding:14px; border-radius:18px; border:0; background:var(--card); display:flex; flex-direction:column; gap:7px; }
  .conv:hover { box-shadow:0 0 0 1px var(--violet-line) inset; }
  .conv.has-g { border-left:6px solid var(--g); padding-left:12px; }
  .tag.gtag { font-weight:700; color:var(--ink); border-color:var(--g); }
  .tag.gtag::before { content:'●'; color:var(--g); margin-right:4px; }
  .conv.sel .tag.gtag { color:#fff; }
  .gdot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--g); flex:0 0 auto; }
  .gtabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin; }
  .gtabs .chip { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
  .gtabs .chip .n { font-size:11px; font-weight:700; background:var(--soft); border-radius:999px; padding:1px 7px; }
  .gtabs .chip .n.hot { background:var(--violet); color:#fff; }
  .conv.sel { background:var(--night); color:#fff; }
  .conv .row1 { display:flex; justify-content:space-between; gap:8px; align-items:center; }
  .conv .name { font-family:Sora, sans-serif; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .conv .time { font-size:12px; opacity:.75; flex:0 0 auto; }
  .conv .last { font-size:13px; opacity:.82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tags { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
  .tag { font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; border:1px solid var(--line); }
  .conv.sel .tag { border-color:#4A4566; }
  .tag.compra { background:#E8F7C0; color:var(--lime-ink); border-color:transparent; }
  .tag.consulta { background:#E4DEFF; color:var(--violet-ink); border-color:transparent; }
  .tag.soporte { background:var(--amber-soft); color:var(--amber-ink); border-color:transparent; }
  .tag.otro { background:var(--soft); color:var(--muted); border-color:transparent; }
  .conv.sel .tag.compra { background:var(--lime); color:var(--ink); }
  .tag.wait { background:var(--amber-soft); color:var(--amber-ink); border-color:transparent; }
  .tag.ig { color:#A3195B; background:#FCE7F3; border-color:transparent; }
  .tag.ai { color:var(--violet-ink); background:var(--violet-soft); border-color:transparent; }
  .badge { margin-left:auto; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--violet); color:#fff; font-size:12px; font-weight:600; display:grid; place-items:center; }
  .empty { margin:auto; text-align:center; color:var(--muted); padding:24px; display:grid; gap:6px; justify-items:center; }

  .chat-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--ground); }
  .ava { width:44px; height:44px; border-radius:14px; background:#E4DEFF; color:var(--violet-ink); font-weight:700; font-family:Sora, sans-serif; display:grid; place-items:center; flex:0 0 auto; }
  .who { flex:1 1 180px; min-width:0; display:flex; flex-direction:column; }
  .who b { font-family:Sora, sans-serif; font-weight:600; font-size:16px; }
  .who span { font-size:12px; color:var(--muted); }
  #aiBtn.on { background:var(--violet-soft); color:var(--violet-ink); border-color:var(--violet-line); font-weight:600; }
  #transferSel { height:40px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--card); padding:0 8px; width:130px; }
  .chat-head .btn { padding:0 12px; }
  .chat-head .who { flex-basis:120px; }
  #msgs, #wagMsgs { flex:1; overflow:auto; padding:22px; display:flex; flex-direction:column; gap:10px; }
  .conv .gico { width:28px; height:28px; border-radius:9px; background:var(--violet-soft); display:inline-grid; place-items:center; flex:0 0 auto; }
  .msg { max-width:72%; padding:11px 15px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
  .msg .meta { font-size:11px; margin-top:4px; color:var(--muted); }
  .msg.in { align-self:flex-start; background:#fff; border:1px solid var(--line); border-radius:20px 20px 20px 6px; }
  .msg .from { font-size:12px; font-weight:700; margin-bottom:2px; }
  .msg.in .from { color:var(--muted); }
  /* Otros agentes: color propio por persona (--c fondo, --ci texto) */
  .msg.agent.peer { align-self:flex-end; background:var(--c); color:var(--ink); border-left:4px solid var(--ci); border-radius:20px 20px 6px 20px; }
  .msg.agent.peer .from, .msg.agent.peer .meta { color:var(--ci); }
  .msg.phone { background:#FFF4E5 !important; color:#7A4A00 !important; border:1px solid #F3D19C; }
  .msg.phone .meta { color:#9A5B00 !important; }
  .msg.ai { align-self:flex-end; background:var(--violet-soft); border:1px solid var(--violet-line); border-radius:20px 20px 6px 20px; }
  .msg.ai .meta { color:var(--violet-ink); font-weight:600; }
  .msg.agent, .msg.phone { align-self:flex-end; background:var(--night); color:#fff; border-radius:20px 20px 6px 20px; }
  .msg.agent .meta, .msg.phone .meta { color:#C9C4DE; }
  .msg.note { align-self:center; max-width:86%; background:var(--lime-soft); border:1px dashed #BFD873; border-radius:14px; color:var(--lime-ink); }
  .msg.note .meta { color:var(--lime-ink); }
  .msg.event { align-self:center; max-width:90%; background:transparent; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:12.5px; padding:6px 14px; text-align:center; box-shadow:none; }
  .msg.event .meta { display:inline; margin-left:6px; color:var(--muted); }
  .lockbar { margin:0 18px 16px; padding:12px 14px; border-radius:14px; background:var(--violet-soft); color:var(--violet-ink); display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-weight:500; }
  .lockbar span { flex:1 1 220px; }
  .day { align-self:center; font-size:12px; color:var(--muted); font-weight:600; padding:4px 0; }
  .composer { padding:12px 18px 16px; display:flex; flex-direction:column; gap:8px; }
  .msg a.lnk { color:inherit; text-decoration:underline; text-underline-offset:2px; word-break:break-all; }
  .msg .att { display:block; margin:2px 0 6px; }
  .msg .att img, .msg .att video { display:block; max-width:min(320px, 100%); max-height:320px; border-radius:12px; background:var(--soft); cursor:zoom-in; }
  .msg .att.sticker img { max-width:140px; background:transparent; cursor:default; }
  .msg .att audio { width:min(280px, 100%); }
  .msg .tr { margin:2px 0 6px; padding:6px 9px; border-radius:10px; background:rgba(127,127,127,.12); font-size:13px; line-height:1.4; max-width:320px; }
  .msg .tr small { display:block; font-size:11px; opacity:.75; font-weight:700; margin-bottom:2px; }
  .msg .tr button { border:0; background:none; color:inherit; text-decoration:underline; cursor:pointer; padding:0; font:inherit; font-size:12px; }
  #recBar { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:var(--violet-soft); color:var(--violet-ink); }
  #recBar .dot { width:10px; height:10px; border-radius:50%; background:#D92D20; animation:recblink 1s infinite; }
  @keyframes recblink { 50% { opacity:.25; } }
  @media (prefers-reduced-motion: reduce) { #recBar .dot { animation:none; } }
  .msg .file { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(127,127,160,.12); color:inherit; text-decoration:none; min-width:200px; border:0; font:inherit; text-align:left; cursor:pointer; width:100%; }
  .msg .file .ic { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--card); color:var(--violet); font-size:11px; font-weight:800; flex:none; }
  .msg .file b { display:block; font-weight:600; overflow-wrap:anywhere; }
  .msg .file small { opacity:.75; }
  .msg .att .ph { width:220px; height:140px; border-radius:12px; background:var(--soft); display:grid; place-items:center; color:var(--muted); font-size:12px; }
  #schedBar { border:1px solid var(--line); border-radius:12px; background:var(--card); font-size:13px; }
  #schedBar summary { padding:8px 12px; cursor:pointer; font-weight:600; color:var(--violet-ink); }
  #schedBar .srow { display:flex; gap:8px; align-items:center; padding:6px 12px; border-top:1px solid var(--line); }
  #schedBar .srow span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #attachPrev { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:12px; background:var(--card); border:1px solid var(--line); font-size:13px; }
  #attachPrev img { width:40px; height:40px; object-fit:cover; border-radius:8px; }
  #attachPrev b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
  #composeBox.drop { outline:2px dashed var(--violet); }
  .hgrid { display:grid; gap:6px; }
  .hrow { display:grid; grid-template-columns:120px 1fr; gap:8px; align-items:center; }
  .hrow .slots { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .hrow input[type=time] { height:36px; width:108px; padding:0 6px; border-radius:10px; border:1px solid var(--line); background:var(--card); font-size:13px; }
  .hrow .s2.hidden + .addslot { display:inline-flex; }
  .hrow .addslot { display:none; min-height:30px; padding:0 10px; font-size:12px; }
  .hrow.off .slots { opacity:.45; }
  @media (max-width:520px) { .hrow { grid-template-columns:1fr; } }
  .ftypes { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
  .ftypes label { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:12px; }
  .ftypes input { width:18px; height:18px; margin-top:2px; flex:none; }
  .ftypes small { display:block; color:var(--muted); }
  .compose-box { display:flex; align-items:flex-end; gap:8px; padding:8px; border-radius:18px; background:var(--soft); border:1px solid transparent; }
  .compose-box.note { background:var(--lime-soft); border-color:#BFD873; }
  .compose-box textarea { flex:1; min-width:0; resize:none; border:0; background:transparent; padding:8px; outline:none; max-height:160px; }
  .icon-btn { width:44px; height:44px; border-radius:12px; border:0; background:var(--card); color:var(--violet); display:grid; place-items:center; flex:0 0 auto; }
  .icon-btn[aria-pressed="true"] { background:var(--lime); color:var(--ink); }
  .hint { font-size:12px; color:var(--muted); }

  .pilot-head { display:flex; align-items:center; gap:8px; }
  .pilot-head b { font-family:Sora, sans-serif; font-weight:600; font-size:16px; flex:1; }
  .pilot-head button { min-height:36px; padding:0 10px; border-radius:10px; border:1px solid var(--night-line); background:transparent; color:var(--night-text); font-size:12px; }
  .pilot .label { color:var(--night-muted); }
  .intent { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .intent .display { font-size:20px; font-weight:600; text-transform:capitalize; }
  .signal { font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; }
  .signal.alta { background:var(--lime); color:var(--ink); }
  .signal.media { background:#E4DEFF; color:var(--violet-ink); }
  .signal.baja { background:var(--night-line); color:var(--night-text); }
  .pilot p { margin:0; color:#CFCAE3; }
  .nba { padding:14px; border-radius:var(--r-md); background:var(--night2); display:flex; flex-direction:column; gap:10px; }
  .sugg { text-align:left; min-height:44px; padding:10px 12px; border-radius:var(--r-sm); border:1px solid var(--night-line); background:transparent; color:var(--night-text); line-height:1.4; }
  .sugg:hover { border-color:var(--lime); }
  .funnel { display:grid; gap:6px; }
  .funnel .bars { display:grid; gap:4px; }
  .funnel .bars button { height:30px; border:0; border-radius:8px; background:var(--night-line); color:var(--night-muted); font-size:11px; padding:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .funnel .bars button.done { background:#5E7A1A; color:#fff; }
  .funnel .bars button.cur { background:var(--lime); color:var(--ink); font-weight:600; }
  .skel { height:12px; border-radius:6px; background:linear-gradient(90deg, var(--night2), var(--night-line), var(--night2)); background-size:200% 100%; animation:sk 1.2s infinite linear; }
  @keyframes sk { to { background-position:-200% 0; } }
  @media (prefers-reduced-motion: reduce) { .skel { animation:none; } }

  /* ---------- Ajustes ---------- */
  #admin { display:grid; grid-template-columns:250px minmax(0, 1fr); gap:20px; align-items:start; }
  .setnav { position:sticky; top:8px; background:var(--card); border-radius:var(--r-lg); padding:12px; display:grid; gap:2px; }
  .setnav button { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:42px; padding:0 14px; border:0; border-radius:12px; background:none; text-align:left; font-weight:500; }
  .setnav button:hover { background:var(--soft); }
  .setnav button[aria-current="page"] { background:var(--night); color:#fff; }
  .setnav .n { color:var(--muted); font-size:12px; }
  .setnav button[aria-current] .n { color:var(--night-muted); }
  .nbadge { background:#FEE4E2; color:var(--danger); font-weight:700; font-size:12px; border-radius:999px; padding:1px 8px; }
  .setnav .navsec { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:14px 14px 4px; border-top:1px solid var(--line); margin-top:6px; }
  .setmain, .panel { display:grid; gap:16px; min-width:0; align-content:start; }
  .phead { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
  .phead h1 { margin:0 0 2px; font-size:24px; } .phead .grow { flex:1 1 320px; min-width:0; }
  .pending { border:2px solid #FBD3B8; background:#FFF8F3; }
  .pend-row { display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid #F3E2D6; flex-wrap:wrap; }
  .pend-row:last-child { border-bottom:0; } .pend-row .grow { flex:1 1 240px; min-width:0; }
  .pend-ico { width:38px; height:38px; border-radius:12px; background:var(--amber-soft); display:grid; place-items:center; flex:none; font-size:18px; }
  .tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap:16px; }
  .tile { gap:8px; }
  .tile .big { font-family:Sora, sans-serif; font-size:32px; font-weight:700; line-height:1.1; }
  .tile .big small { font-size:15px; color:var(--muted); font-weight:600; }
  .tile-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
  .tile-head h2 { font-size:17px; } .tile-head .btn { min-height:30px; font-size:12px; border-radius:999px; padding:0 12px; }
  .gstack { display:grid; gap:14px; min-width:0; }
  .gcard { background:var(--card); border-radius:var(--r-lg); border:2px solid transparent; min-width:0; }
  .gcard.co { background:var(--violet-soft); border-color:var(--violet-line); }
  .gcard.open { border-color:var(--violet); }
  .gcard.paused .gc-title b { opacity:.6; }
  .gc-head { display:grid; grid-template-columns:auto minmax(150px, 1.1fr) minmax(130px, 1fr) minmax(0, 1.6fr) auto auto; gap:14px; align-items:center; padding:16px 20px; cursor:pointer; border-radius:var(--r-lg); }
  .gc-head:focus-visible { outline:2px solid var(--violet); outline-offset:-2px; }
  .gdot { width:14px; height:14px; border-radius:50%; background:var(--g, var(--violet)); flex:none; }
  .gc-title { min-width:0; } .gc-title b { font-family:Sora, sans-serif; font-size:17px; display:block; overflow-wrap:anywhere; }
  .gc-chips { display:flex; flex-wrap:wrap; gap:6px; }
  .gc-acts { display:flex; gap:6px; }
  .pill { font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card); white-space:nowrap; }
  .pill.v { background:#E4DEFF; color:var(--violet-ink); border-color:transparent; }
  .pill.ok { background:var(--lime-soft); color:var(--lime-ink); border-color:#D9EFA0; }
  .pill.warn { background:var(--amber-soft); color:var(--amber-ink); border-color:transparent; }
  .pill.bad { background:#FEE4E2; color:var(--danger); border-color:transparent; }
  .pill.meta { background:#E7F0FF; color:#0B4FB3; border-color:transparent; }
  .chev { color:var(--muted); transition:transform .15s; font-size:12px; } .gcard.open .chev { transform:rotate(90deg); }
  .gc-body { border-top:1px solid var(--line); padding:0 20px 20px; }
  .gc-body:empty { display:none; }
  .ctabs { display:flex; gap:2px; overflow-x:auto; border-bottom:1px solid var(--line); margin-bottom:16px; scrollbar-width:thin; }
  .ctabs button { border:0; background:none; padding:14px 12px 11px; border-bottom:3px solid transparent; font-weight:500; color:var(--muted); white-space:nowrap; display:flex; gap:6px; align-items:center; }
  .ctabs button[aria-selected="true"] { color:var(--violet-ink); border-bottom-color:var(--violet); font-weight:600; }
  .ctabs .own:empty { display:none; }
  .ctabs .own { font-size:11px; font-weight:600; background:#E4DEFF; color:var(--violet-ink); border-radius:999px; padding:1px 7px; }
  .cpanels > div { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap:16px; align-items:start; }
  .cpanels .card, .gc-body .card { border:1px solid var(--line); }
  .mchips { display:flex; flex-wrap:wrap; gap:8px; }
  .mchip { display:inline-flex; align-items:center; gap:8px; padding:4px 6px 4px 4px; border:1px solid var(--line); border-radius:999px; background:var(--card); }
  .mchip .av { width:26px; height:26px; border-radius:50%; background:var(--violet-soft); color:var(--violet-ink); display:grid; place-items:center; font-weight:700; font-size:12px; flex:none; }
  .mchip .role { font-size:10.5px; font-weight:700; color:var(--violet-ink); text-transform:uppercase; letter-spacing:.04em; }
  .mchip .st { font-size:12px; color:var(--muted); }
  .avbtn { white-space:nowrap; border:1px solid transparent; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600; cursor:pointer; }
  .avbtn.on { color:var(--lime-ink); background:var(--lime-soft); border-color:#D9EFA0; }
  .avbtn.off { color:var(--amber-ink); background:var(--amber-soft); }
  .avbtn:disabled { cursor:default; }
  .arow { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:10px 14px; border:1px solid var(--line); border-radius:12px; }
  .note { padding:10px 12px; border-radius:12px; border:1px dashed #E5C55A; background:#FFF9DB; font-size:13px; color:#5C4A00; }
  .kv { display:grid; grid-template-columns:110px minmax(0, 1fr); gap:10px; align-items:center; }
  .urow { display:grid; grid-template-columns:auto minmax(160px, 1fr) minmax(130px, auto) minmax(0, 2fr) auto auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--ground); }
  .urow:last-child { border-bottom:0; }
  .lineform .dform { margin-top:14px; }
  .addline { padding:14px 16px; }
  @media (max-width: 900px) {
    #admin { grid-template-columns:minmax(0, 1fr); }
    .setnav { position:static; display:flex; overflow-x:auto; padding:6px; }
    .setnav .navsec { display:none; } .setnav button { white-space:nowrap; flex:none; }
    .gc-head { grid-template-columns:auto minmax(0, 1fr) auto; padding:14px; }
    .gc-head > .gc-arr, .gc-head > .gc-chips { grid-column:2 / -1; }
    .gc-head > .gc-acts { grid-column:2 / -1; grid-row:auto; }
    .gc-head > .chev { grid-column:3; grid-row:1; }
    .gc-body { padding:0 12px 14px; }
    .urow { grid-template-columns:auto minmax(0, 1fr); } .urow > :nth-child(n+3) { grid-column:2; }
  }
  .card { background:var(--card); border-radius:var(--r-lg); padding:20px; display:grid; gap:14px; align-content:start; }
  /* ---------- Flujos ---------- */
  .fl-wrap { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; }
  @media (max-width:1100px) { .fl-wrap { grid-template-columns:minmax(0,1fr); } }
  .fl-step { border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; display:grid; gap:10px; background:var(--card); }
  .fl-step.start { border-color:var(--violet-line); box-shadow:0 0 0 3px var(--violet-soft); }
  .fl-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .fl-num { width:28px; height:28px; border-radius:50%; background:var(--night); color:#fff; display:grid; place-items:center; font-weight:600; font-size:12px; flex:0 0 auto; }
  .fl-grid { display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
  .fl-row { display:flex; gap:6px; align-items:center; }
  .fl-row .field { height:38px; }
  .fl-step select.field, .fl-step input.field { height:38px; }
  .fl-ic { min-height:34px; width:34px; padding:0; }
  .fl-vars { display:flex; flex-wrap:wrap; gap:6px; }
  .fl-vars button { border:1px dashed var(--violet-line); background:var(--violet-soft); color:var(--violet-ink); border-radius:999px; padding:2px 10px; font-size:12px; }
  .fl-sim { position:sticky; top:12px; background:var(--night); color:var(--night-text); border-radius:var(--r-lg); padding:14px; display:grid; gap:10px; }
  .fl-chat { background:var(--night2); border-radius:var(--r-md); padding:10px; height:420px; overflow:auto; display:flex; flex-direction:column; gap:8px; }
  .fl-b { max-width:88%; padding:8px 10px; border-radius:12px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }
  .fl-b.bot { background:#2E2950; align-self:flex-start; }
  .fl-b.me { background:var(--violet); align-self:flex-end; }
  .fl-b.sys { background:transparent; border:1px dashed var(--night-line); color:var(--night-muted); align-self:center; font-size:12px; }
  .fl-opts { display:flex; flex-wrap:wrap; gap:6px; }
  .fl-opts button { background:#3A3459; border:0; color:var(--night-text); border-radius:999px; padding:4px 12px; font-size:12px; }
  .fl-err { color:var(--danger); }
  .att-ctl { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
  .att-ctl label { display:grid; gap:4px; }
  .att-ctl .field { height:40px; }
  #attCard td { vertical-align:top; }
  .fl-sim .btn:not(.lime) { background:var(--night2); border-color:var(--night-line); color:var(--night-text); }
  .card h2 { margin:0; font-size:18px; }
  .rowline { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--ground); }
  .rowline:last-child { border-bottom:0; }
  #clients { display:grid; gap:16px; }
  .cltbl td, .cltbl th { vertical-align:top; }
  .cltbl tr[data-cl] { cursor:pointer; }
  .cltbl tr[data-cl]:hover td { background:var(--soft); }
  .ccard-cl { background:var(--night2); border:1px solid var(--night-line); border-radius:16px; padding:14px; display:grid; gap:8px; font-size:13px; }
  .ccard-cl .t { font-family:Sora, sans-serif; font-weight:600; font-size:15px; color:#fff; }
  .ccard-cl .m { color:var(--night-muted); }
  .ccard-cl .svc { display:flex; flex-wrap:wrap; gap:5px; }
  .ccard-cl .svc span { background:var(--night); border:1px solid var(--night-line); border-radius:999px; padding:2px 9px; font-size:12px; }
  .ccard-cl .ok { color:var(--lime); font-weight:700; }
  .ccard-cl .no { color:#FFB4A8; font-weight:700; }
  .ccard-cl button { background:transparent; color:#fff; border:1px solid var(--night-line); border-radius:10px; padding:6px 10px; cursor:pointer; font:inherit; }
  .ccard-cl button:hover { border-color:var(--lime); }
  .sublist { display:grid; gap:6px; }
  .sublist .it { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 10px; border:1px solid var(--line); border-radius:12px; }
  .sublist .it .grow { flex:1 1 180px; min-width:0; }
  .qcrit { display:grid; gap:6px; padding:10px 0; border-bottom:1px solid var(--line); }
  .qcrit:last-child { border-bottom:0; }
  .qcrit .scale { display:flex; gap:6px; flex-wrap:wrap; }
  .qcrit .scale button { min-width:40px; min-height:36px; border-radius:10px; border:1px solid var(--line); background:var(--card); font-weight:700; cursor:pointer; }
  .qcrit .scale button[aria-pressed="true"] { background:var(--violet); color:#fff; border-color:var(--violet); }
  .qcrit .scale button.na[aria-pressed="true"] { background:var(--muted); border-color:var(--muted); }
  .qcrit .why { font-size:12px; color:var(--violet-ink); background:var(--violet-soft); border-radius:8px; padding:6px 8px; }
  .qtotal { font-family:Sora, sans-serif; font-size:28px; font-weight:700; color:var(--violet-ink); }
  .qbadge { font-weight:700; }
  .scopebar { grid-column:1/-1; position:sticky; top:8px; z-index:5; border:2px solid var(--violet-line); background:var(--violet-soft); }
  .inh { display:flex; gap:10px; align-items:center; padding:8px 10px; border-radius:10px; background:var(--ground); }
  .inh input { width:20px; height:20px; flex:0 0 auto; }
  .inh.flash { animation:inhflash 1.2s ease 2; }
  @keyframes inhflash { 50% { background:var(--amber-soft); box-shadow:0 0 0 3px var(--amber-soft); } }
  .card.inherited .inh { border:1px dashed var(--violet-line); }
  /* los campos bloqueados dejan pasar el clic a la tarjeta para explicar cómo cambiarlos */
  .card.inherited :is(input, select, textarea, button):disabled { pointer-events:none; }
  .card.inherited > :not(h2):not(.inh):not(button) { opacity:.55; }
  .lrename { display:flex; gap:6px; align-items:center; } .lrename .field { max-width:220px; }
  .linkbtn { background:none; border:0; cursor:pointer; padding:2px 4px; border-radius:6px; font-size:13px; opacity:.6; } .linkbtn:hover, .linkbtn:focus-visible { opacity:1; background:var(--ground); }
  .rowline .grow { flex:1 1 140px; min-width:0; }
  .form-row { display:flex; flex-wrap:wrap; gap:8px; }
  .form-row > * { flex:1 1 140px; }
  .qr { display:grid; justify-items:center; gap:8px; padding:16px; border-radius:var(--r-md); background:var(--soft); text-align:center; }
  .qr img { width:240px; height:240px; background:#fff; border-radius:12px; }
  .paircode { font:700 34px/1 'Sora', monospace; letter-spacing:.12em; background:#fff; padding:14px 18px; border-radius:12px; border:1px dashed var(--violet-line); color:var(--ink); }
  .meter { height:8px; border-radius:4px; background:var(--soft); overflow:hidden; }
  .meter span { display:block; height:100%; background:var(--violet); }

  #toast { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:var(--night); color:#fff; padding:12px 18px; border-radius:14px; max-width:calc(100% - 32px); z-index:10; }
  #toast.err { background:var(--danger); }

  /* ---------- Móvil ---------- */
  .back { display:none; }
  @media (max-width: 600px) {
    .kpi .v { font-size:22px; }
  }
  /* Piezas solo para celular (en escritorio no existen) */
  .m-only, nav.tabs .ti, .conv .cava, .conv .mmeta, .conv .mbadge { display:none; }
  .chat-acts, .ctools { display:contents; }
  @media (max-width: 900px) {
    /* Barra superior compacta y navegación abajo, como una app */
    #app { padding:10px 10px calc(74px + env(safe-area-inset-bottom)); gap:10px; }
    /* Nada puede ensanchar la página (la barra de abajo se saldría de la pantalla) */
    #app { position:relative; overflow-x:clip; }
    header.top { flex-wrap:nowrap; gap:8px; }
    header.top .brand span { display:none; }
    header.top .brand .mark { width:40px; height:40px; }
    header.top .brand img.logo { display:none; }
    header.top .brand img.mk { display:block; }
    header.top .search { height:40px; min-width:0; flex:1 1 auto; padding:0 12px; }
    header.top .search .kbd { display:none; }
    #statusBtn { min-height:40px; padding:0 12px; }
    #statusBtn #statusTxt { display:none; }
    #bellBtn, .avatar { width:40px; height:40px; border-radius:12px; }
    #installBtn { min-height:40px; padding:0 10px; font-size:0; } #installBtn::before { content:'📲'; font-size:18px; }
    #hoursPill { display:none; }
    header.top nav.tabs { position:fixed; left:0; right:0; bottom:0; z-index:25; order:0; flex:none; border-radius:0; padding:6px 6px calc(6px + env(safe-area-inset-bottom));
      background:var(--card); border-top:1px solid var(--line); box-shadow:0 -4px 18px rgba(20,16,40,.06); gap:2px; }
    nav.tabs button { flex:1 1 0; min-width:0; min-height:52px; padding:4px 2px 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
      font-size:10.5px; line-height:1.1; border-radius:12px; position:relative; color:var(--muted); }
    nav.tabs .tl { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
    nav.tabs .tl[data-s] { font-size:0; } nav.tabs .tl[data-s]::after { content:attr(data-s); font-size:10.5px; }
    nav.tabs button[aria-current="page"] { background:var(--violet-soft); color:var(--violet-ink); }
    nav.tabs .ti { display:block; }
    nav.tabs .tbadge { position:absolute; top:2px; left:calc(50% + 6px); margin:0; min-width:18px; height:18px; font-size:10.5px; padding:0 5px; }
    #toast { bottom:calc(84px + env(safe-area-inset-bottom)); z-index:70; }

    .col-list, .col-chat, .col-pilot { max-width:none; flex-basis:100%; height:auto; max-height:none; }
    #inbox { gap:0; }
    #inbox:not(.open) .col-chat { display:none; }
    /* En el celular la barra de la app ya va abajo: las secciones de la bandeja van arriba de la lista, como pestañas */
    .inbox-rail { flex:1 1 100%; flex-direction:row; align-self:flex-start; height:auto; border-radius:14px; padding:4px; margin-bottom:8px; }
    #inbox { align-content:flex-start; }
    .inbox-rail button { flex:1; flex-direction:row; justify-content:center; min-height:44px; padding:0 6px; font-size:13px; }
    .inbox-rail button svg { width:18px; height:18px; }
    .inbox-rail .rn { position:static; margin-left:2px; }
    #inbox.open .inbox-rail { display:none; }
    .back { display:grid; }

    /* Lista: una fila de filtros que se desliza y chats compactos estilo WhatsApp */
    .col-list { gap:8px; }
    .list-head h1 { font-size:20px; }
    .filters, .gtabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -10px; padding:0 10px 2px; }
    .filters::-webkit-scrollbar, .gtabs::-webkit-scrollbar { display:none; }
    .filters .chip, .gtabs .chip { flex:none; white-space:nowrap; min-height:32px; }
    #list { display:flex; flex-direction:column; background:var(--card); border-radius:18px; overflow:hidden; }
    .conv, .conv.has-g { border-radius:0; border:0; border-left:0; padding:11px 12px; gap:2px 12px; background:transparent; }
    .conv + .conv { box-shadow:inset 0 1px 0 var(--ground); }
    .conv:has(.cava) { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; }
    .conv .cava { display:grid; grid-row:1 / span 3; place-items:center; width:48px; height:48px; border-radius:50%; background:#E4DEFF; color:var(--violet-ink);
      font:700 15px Sora, sans-serif; }
    .conv.has-g .cava { box-shadow:0 0 0 2.5px var(--card), 0 0 0 4.5px var(--g); }
    .conv .row1 { grid-column:2 / 4; }
    .conv .name { font-size:15.5px; }
    .conv .last { grid-column:2; font-size:14px; opacity:.72; }
    .conv .tags { display:none; }
    .conv .mbadge { display:grid; grid-column:3; grid-row:2; place-items:center; min-width:22px; height:22px; padding:0 7px; border-radius:999px;
      background:#E5484D; color:#fff; font-size:12px; font-weight:800; }
    .conv:has(.mbadge) .time { color:#E5484D; font-weight:700; opacity:1; }
    .conv .mmeta { display:block; grid-column:2 / 4; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .conv .mmeta:empty { display:none; }
    .mmeta .mg::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--g); margin-right:5px; vertical-align:0; }
    .mmeta .mm-sep { font-style:normal; margin:0 5px; opacity:.6; }
    .mmeta .mm-buy { color:#3F6212; } .mmeta .mm-wait { color:#B42318; } .mmeta .mm-ai { color:var(--violet); }
    .conv.sel { background:var(--violet-soft); color:var(--ink); }
    .conv.sel .mmeta { color:var(--muted); }

    /* Chat abierto: pantalla completa, sin desplazar la página */
    #inbox.open .col-list { display:none; }
    #inbox.open .col-chat { position:fixed; inset:0; z-index:40; height:100vh; height:100dvh; min-height:0; border-radius:0; }
    .chat-head { flex-wrap:nowrap; gap:6px; padding:8px 8px 8px 4px; padding-top:calc(8px + env(safe-area-inset-top)); position:relative; background:var(--card); }
    .chat-head .ava { width:38px; height:38px; border-radius:50%; font-size:14px; }
    .chat-head .who { flex:1 1 auto; }
    .chat-head .who b { font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .chat-head .who span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .chat-head .icon-btn { width:40px; height:40px; background:transparent; }
    .m-only { display:grid; }
    .chat-acts { display:none; }
    .chat-head.acts-open .chat-acts { display:flex; flex-direction:column; align-items:stretch; gap:4px; position:absolute; right:8px; top:calc(100% - 4px); z-index:5;
      min-width:220px; padding:8px; border-radius:16px; background:var(--card); border:1px solid var(--line); box-shadow:0 12px 32px rgba(20,16,40,.18); }
    .chat-acts .btn { justify-content:flex-start; min-height:44px; width:100%; border:0; background:transparent; text-align:left; }
    .chat-acts .btn:hover, .chat-acts .btn:focus-visible { background:var(--soft); }
    .chat-acts .btn.hidden { display:none; }
    .chat-acts select, .chat-acts #transferSel { min-height:44px; width:100%; max-width:none; }
    #msgs, #wagMsgs { padding:12px 10px; gap:6px; background:var(--ground); }
    .msg { max-width:84%; padding:7px 11px; font-size:15px; line-height:1.4; border-radius:16px; }
    .msg.in { border-radius:16px 16px 16px 4px; }
    .msg.agent, .msg.phone, .msg.ai, .msg.agent.peer { border-radius:16px 16px 4px 16px; }
    .lockbar { margin:0 8px 8px; padding:8px 10px; font-size:13px; gap:8px; }
    .composer { padding:6px 8px calc(8px + env(safe-area-inset-bottom)); gap:4px; background:var(--card); }
    .compose-box { position:relative; align-items:flex-end; gap:4px; padding:4px; border-radius:24px; }
    .compose-box textarea { padding:9px 4px; font-size:16px; max-height:120px; }
    .compose-box .icon-btn { width:40px; height:40px; border-radius:50%; background:transparent; }
    #toolsBtn[aria-expanded="true"] { background:var(--violet); color:#fff; }
    .ctools { display:none; }
    .compose-box.tools-open .ctools { display:flex; flex-wrap:wrap; gap:6px; position:absolute; left:0; bottom:calc(100% + 8px); z-index:5; padding:8px;
      border-radius:18px; background:var(--card); border:1px solid var(--line); box-shadow:0 12px 32px rgba(20,16,40,.18); max-width:calc(100vw - 16px); }
    .compose-box.tools-open .ctools .icon-btn { width:48px; height:48px; border-radius:14px; background:var(--soft); }
    .compose-box.tools-open .ctools .icon-btn.hidden { display:none; }
    #sendBtn { min-height:40px !important; border-radius:20px; padding:0 14px; }
    #composeHint.def { display:none; }
    #composeHint { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 8px; }

    /* Copiloto: hoja que sube desde abajo con el botón ✦ */
    .col-pilot { position:fixed; left:0; right:0; bottom:0; z-index:45; height:auto; max-height:78vh; max-height:78dvh; min-height:0; border-radius:22px 22px 0 0;
      padding:16px 16px calc(16px + env(safe-area-inset-bottom)); transform:translateY(105%); transition:transform .22s ease; box-shadow:0 -12px 40px rgba(0,0,0,.25); }
    #inbox.pilot-open .col-pilot { transform:none; }
    #inbox.pilot-open::before { content:''; position:fixed; inset:0; z-index:44; background:rgba(15,12,30,.45); }
    #inbox:not(.open) .col-pilot { display:none; }
    #pilotClose { margin-left:auto; width:36px; height:36px; border-radius:50%; border:0; background:rgba(255,255,255,.1); color:inherit; place-items:center; }
  }
  @media (max-width: 900px) and (prefers-reduced-motion: reduce) { .col-pilot { transition:none; } }
  /* ---------- Embudo ---------- */
  #pipe { display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; min-width:0; }
  #pipe > * { min-width:0; }
  .pipe-head { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
  .board { position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 1fr); gap:12px; overflow-x:auto; padding-bottom:8px; align-items:start; min-height:60vh; }
  .bcol { background:var(--card); border-radius:var(--r-md); padding:10px; display:grid; gap:8px; align-content:start; min-height:200px; border:2px solid transparent; }
  .bcol.over { border-color:var(--violet); background:var(--violet-soft); }
  .bcol.won .bhead b { color:var(--lime-ink); } .bcol.lost { background:#FFF6F5; } .bcol.lost .bhead b { color:var(--danger); }
  .bhead { display:flex; justify-content:space-between; gap:8px; align-items:baseline; padding:4px 4px 6px; border-bottom:1px solid var(--line); }
  .bhead b { font-family:Sora, sans-serif; font-size:15px; } .bhead small { color:var(--muted); font-size:12px; text-align:right; }
  .bcard { border:1px solid var(--line); border-left:4px solid var(--g, var(--line)); border-radius:12px; padding:10px; display:grid; gap:4px; background:var(--card); cursor:grab; font-size:13px; }
  .bcard:hover { box-shadow:0 2px 8px rgba(23,20,43,.08); } .bcard.dragging { opacity:.5; }
  .bcard .t { font-weight:600; font-size:14px; overflow-wrap:anywhere; } .bcard .m { color:var(--muted); font-size:12px; }
  .bcard .row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .bcard .val { flex:0 0 auto; text-align:left; font-family:Sora, sans-serif; font-weight:700; color:var(--ink); border:0; background:none; padding:0; cursor:pointer; font-size:14px; }
  .bcard .val.empty { color:var(--muted); font-weight:500; font-family:inherit; font-size:12px; }
  .bcard select { height:28px; border-radius:8px; border:1px solid var(--line); background:var(--soft); font-size:12px; padding:0 4px; max-width:100%; }
  .testlog { display:grid; gap:8px; max-height:360px; overflow:auto; padding:10px; border-radius:14px; background:var(--soft); }
  .testlog .tm { max-width:85%; padding:8px 12px; border-radius:14px; white-space:pre-wrap; font-size:13.5px; }
  .testlog .tm.u { justify-self:end; background:var(--violet); color:#fff; border-bottom-right-radius:4px; }
  .testlog .tm.a { justify-self:start; background:var(--card); border:1px solid var(--line); border-bottom-left-radius:4px; }
  .testlog .tm.h { justify-self:center; background:var(--amber-soft); color:var(--amber-ink); font-size:12px; }
  .ctfilters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .tagchip { font-size:12px; padding:3px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card); cursor:pointer; }
  .tagchip[aria-pressed="true"] { background:var(--violet); color:#fff; border-color:var(--violet); }
  .tagchip .n { opacity:.7; margin-left:4px; }
  .ptag { font-size:11.5px; padding:2px 8px; border-radius:999px; background:var(--violet-soft); color:var(--violet-ink); font-weight:600; }
  @media (max-width: 900px) { .board { grid-auto-columns:minmax(240px, 85vw); scroll-snap-type:x mandatory; overscroll-behavior-x:contain; } .board > * { scroll-snap-align:start; } }

  /* ---------- Campañas ---------- */
  #camps { display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; align-content:start; }
  #camps .card { min-width:0; grid-template-columns:minmax(0, 1fr); }
  .camp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap:12px; }
  .ccard { border:1px solid var(--line); border-radius:var(--r-md); padding:16px; display:grid; gap:10px; align-content:start; }
  .ccard.off { opacity:.55; }
  .ccard .code { font-family:Sora, sans-serif; font-weight:700; font-size:12px; letter-spacing:.06em; padding:3px 8px; border-radius:8px; background:var(--night); color:var(--lime); }
  .ccard .meta { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
  .ccard .stats { display:flex; gap:14px; font-size:13px; }
  .ccard .stats b { font-family:Sora, sans-serif; font-size:18px; display:block; }
  .ccard .acts { display:flex; flex-wrap:wrap; gap:6px; }
  .ccard .acts .btn { min-height:36px; font-size:13px; padding:0 10px; }
  .share-qr { display:grid; justify-items:center; gap:8px; }
  .share-qr img { width:220px; height:220px; border-radius:12px; border:1px solid var(--line); }
  .copyrow { display:flex; gap:8px; align-items:center; }
  .copyrow input { flex:1; min-width:0; }
  .menu-preview { white-space:pre-wrap; background:var(--soft); border-radius:var(--r-sm); padding:12px; font-size:13px; }
  .tag.camp { background:var(--night); color:var(--lime); border-color:transparent; }
  .conv.sel .tag.camp { background:var(--lime); color:var(--ink); }
  .grp { display:grid; gap:8px; padding:12px 0; border-bottom:1px solid var(--ground); }
  .grp:last-child { border-bottom:0; }
  .grp .members { display:flex; flex-wrap:wrap; gap:6px 14px; }
  .grp .members label { display:flex; gap:6px; align-items:center; font-size:13px; }

  /* ---------- Respuestas rápidas ---------- */
  .composer { position:relative; }
  #qrPop { position:absolute; left:18px; right:18px; bottom:100%; margin-bottom:6px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:0 12px 32px rgba(23,20,43,.16); max-height:280px; overflow:auto; z-index:5; padding:6px; }
  #qrPop button { width:100%; text-align:left; border:0; background:transparent; border-radius:10px; padding:8px 10px; display:grid; gap:2px; }
  #qrPop button[aria-selected="true"], #qrPop button:hover { background:var(--violet-soft); }
  #qrPop .sc { font-weight:600; color:var(--violet-ink); }
  #qrPop .pv { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .msg.auto { align-self:flex-end; background:var(--soft); border:1px dashed var(--line); border-radius:20px 20px 6px 20px; }

  /* ---------- Supervisión ---------- */
  #superv { display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; align-content:start; }
  #superv .card, .grid2 > * { min-width:0; }
  #superv .card { grid-template-columns:minmax(0, 1fr); }
  .sv-head { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
  .sv-head h2 { margin:0; font-size:22px; flex:1 1 200px; }
  .sv-pane { display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; align-content:start; }
  .sv-pane.hidden { display:none; }
  .sv-tabs { max-width:100%; overflow-x:auto; scrollbar-width:none; }
  .sv-tabs button { font-size:15px; min-height:42px; padding:0 18px; white-space:nowrap; flex:0 0 auto; }
  @media (max-width:600px) { .sv-tabs button { padding:0 12px; font-size:14px; } }
  .sv-tabs button[aria-selected="true"] { background:var(--ink); color:#fff; font-weight:600; }
  .kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
  .kpi { background:var(--card); border-radius:var(--r-md); padding:14px 16px; display:grid; gap:2px; }
  .kpi .v { font-family:Sora, sans-serif; font-size:26px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
  .kpi .l { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
  .kpi .s { font-size:12px; color:var(--muted); }
  [data-svl] { cursor:pointer; transition:box-shadow .15s, transform .15s; }
  .kpi[data-svl] { position:relative; }
  .kpi[data-svl]::after { content:'Ver ›'; position:absolute; top:12px; right:14px; font-size:11px; font-weight:600; color:var(--muted); opacity:0; transition:opacity .15s; }
  .kpi[data-svl]:hover, .kpi[data-svl]:focus-visible { box-shadow:0 0 0 2px var(--accent, #5B3FD9); transform:translateY(-1px); outline:none; }
  .kpi[data-svl]:hover::after, .kpi[data-svl]:focus-visible::after { opacity:1; }
  .hbar[data-svl]:hover, .hbar[data-svl]:focus-visible { background:var(--soft); border-radius:8px; outline:none; }
  tr[data-svl]:hover td, tr[data-svl]:focus-visible td { background:var(--soft); }
  .kpi a[data-svl] { color:inherit; text-decoration:underline dotted; text-underline-offset:3px; }
  .kpi a[data-svl]:hover { text-decoration-style:solid; }
  .sv-flash { animation:svflash 1.4s ease; }
  @keyframes svflash { 0%,60% { box-shadow:0 0 0 3px var(--accent, #5B3FD9); } 100% { box-shadow:none; } }
  .kpi.alert { background:#FFF4EC; } .kpi.alert .v { color:var(--amber-ink); }
  .kpi.dark { background:var(--night); color:var(--night-text); } .kpi.dark .l, .kpi.dark .s { color:var(--night-muted); } .kpi.dark .v { color:var(--lime); }
  .grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap:16px; }
  .rows { display:grid; }
  .rw { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--ground); }
  .rw:last-child { border-bottom:0; }
  .rw .grow { flex:1 1 150px; min-width:0; }
  .rw .sub { font-size:12px; color:var(--muted); }
  .load { width:110px; height:8px; border-radius:4px; background:var(--soft); overflow:hidden; }
  .load span { display:block; height:100%; background:var(--violet); border-radius:4px; }
  .load.full span { background:#E07A2E; }
  .pill { font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; }
  .pill.warn { background:var(--amber-soft); color:var(--amber-ink); }
  .pill.ok { background:#E8F7C0; color:var(--lime-ink); }
  .pill.mut { background:var(--soft); color:var(--muted); }
  .hbars { display:grid; gap:8px; }
  .hbar { display:grid; grid-template-columns:minmax(90px, 140px) 1fr 52px; gap:10px; align-items:center; font-size:13px; }
  .hbar .track { height:14px; background:var(--soft); border-radius:4px; overflow:hidden; }
  .hbar .track span { display:block; height:100%; background:var(--violet); border-radius:0 4px 4px 0; min-width:2px; }
  .hbar .n { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
  .vbars { display:flex; align-items:flex-end; gap:4px; height:160px; padding-top:8px; border-bottom:1px solid var(--line); }
  .vbars .col { flex:1 1 0; min-width:6px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; position:relative; }
  .vbars .col span { display:block; width:100%; max-width:36px; background:var(--violet); border-radius:4px 4px 0 0; min-height:2px; }
  .vbars .col:hover span, .vbars .col:focus span { background:var(--violet-ink); }
  .vlabels { display:flex; gap:4px; font-size:11px; color:var(--muted); }
  .vlabels span { flex:1 1 0; min-width:6px; text-align:center; overflow:hidden; white-space:nowrap; }
  .tbl { overflow-x:auto; }
  .tbl table { width:100%; border-collapse:collapse; min-width:560px; }
  .tbl th { text-align:left; font-size:12px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); padding:8px; border-bottom:1px solid var(--line); }
  .tbl td { padding:10px 8px; border-bottom:1px solid var(--ground); font-variant-numeric:tabular-nums; }
  .msg.call { align-self:center; max-width:86%; background:#FFF4EC; border:1px solid #F6C9A4; border-radius:14px; color:var(--amber-ink); font-weight:600; }
  .msg.call .meta { color:var(--amber-ink); font-weight:400; }
  .callbtns { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:8px; }
  .callbtns .btn { min-height:32px; font-size:13px; padding:0 10px; }

  /* ---------- Integraciones ---------- */
  #integ { display:grid; gap:16px; align-content:start; }
  .integ-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:12px; }
  .grid4 { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
  @media (max-width: 1280px) { .grid4 { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 1000px) { .grid4 { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 620px) { .grid4 { grid-template-columns:1fr; } }
  .xcard { border:1px solid var(--line); border-radius:var(--r-md); padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--card); min-width:0; }
  .xcard .xhead { display:flex; gap:10px; align-items:center; min-width:0; }
  .xcard .xhead b { flex:1; font-family:Sora, sans-serif; font-size:16px; min-width:0; }
  .xcard .xlogo { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; font-weight:700; font-size:13px; }
  .xcard .xbody { flex:1; display:grid; gap:8px; align-content:start; min-width:0; overflow-wrap:anywhere; }
  .xcard .xacts { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; margin-top:auto; }
  .xcard .xacts .btn { min-height:38px; font-size:13px; padding:0 12px; }
  .icard { border:1px solid var(--line); border-radius:var(--r-md); padding:16px; display:grid; gap:10px; align-content:start; background:var(--card); }
  .icard.off { opacity:.6; }
  .icard .top { display:flex; gap:10px; align-items:flex-start; }
  .icard .logo { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto; font-family:Sora, sans-serif; font-weight:700; }
  .icard .logo.llm { background:var(--violet-soft); color:var(--violet-ink); }
  .icard .logo.webhook { background:var(--night); color:var(--lime); }
  .icard .meta { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
  .icard .acts { display:flex; flex-wrap:wrap; gap:6px; }
  .icard .acts .btn { min-height:36px; font-size:13px; padding:0 10px; }
  .msg .forwho { display:inline-block; font-size:12px; font-weight:600; color:var(--violet); background:var(--soft, #F3F1F9); border-radius:999px; padding:2px 8px; margin-bottom:4px; }
  .st-ok { color:var(--lime-ink); } .st-err { color:var(--danger); } .st-none { color:var(--muted); }
  #lineSets, #menuLines { display:grid; gap:14px; }
  .lineset { display:grid; gap:12px; padding:16px; border:1px solid var(--line); border-left:4px solid var(--violet); border-radius:var(--r-md); background:#FCFBFF; }
  .lineset .head { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--ground); }
  .lineset .head .grow { flex:1 1 160px; min-width:0; }
  .lineset .lico { width:40px; height:40px; border-radius:12px; background:var(--violet-soft); color:var(--violet-ink); display:grid; place-items:center; flex:0 0 auto; }
  .lineset .head b { font-family:Sora, sans-serif; font-size:16px; }
  .lineset .st { font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--soft); color:var(--muted); white-space:nowrap; }
  .lineset .st.on { background:#E8F7C0; color:var(--lime-ink); }
  .lineset select { max-width:340px; }
  .seg { display:inline-flex; flex-wrap:wrap; max-width:100%; padding:4px; gap:4px; border-radius:14px; background:var(--soft); }
  .seg button { min-height:38px; padding:0 14px; border-radius:10px; border:0; background:transparent; color:#4A4566; white-space:nowrap; }
  #admin code { overflow-wrap:anywhere; }
  #audList .row { grid-template-columns:minmax(0,1fr); overflow-wrap:anywhere; }
  .form-row > * { min-width:0; }
  .seg button[aria-pressed="true"] { background:var(--card); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(23,20,43,.12); }
  dialog { border:0; border-radius:var(--r-lg); padding:24px; width:min(560px, calc(100% - 32px)); background:var(--card); color:var(--ink); }
  dialog::backdrop { background:rgba(23,20,43,.45); }
  .dform { display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .dform .full { grid-column:1 / -1; }
  .dform label { display:grid; gap:6px; }
  @media (max-width:560px) { .dform { grid-template-columns:1fr; } }
  pre.code { margin:0; padding:12px; border-radius:var(--r-sm); background:var(--night); color:#E9E6F7; font-size:12px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }