/* ============ TOKENS ============ */
  :root{
    --ground:#F5F7F4;
    --surface:#FFFFFF;
    --surface-2:#EDF1EB;
    --surface-3:#E4EAE2;
    --ink:#17211C;
    --ink-2:#54635B;
    --ink-3:#88958D;
    --line:#E1E7DF;
    --accent:#0D7A5C;
    --accent-soft:#DDF0E7;
    --on-accent:#FFFFFF;
    --latec:#3A6FD8;   --latec-soft:#E4ECFA;
    --network:#C97C10; --network-soft:#F8ECD9;
    --phone:#7C5CD6;   --phone-soft:#EDE7FA;
    --good:#1F8A4C; --good-soft:#DFF1E5;
    --warn:#B77207; --warn-soft:#F7EDD8;
    --crit:#C6453D; --crit-soft:#F9E5E3;
    --bubble-in:#FFFFFF;
    --bubble-out:#D9EEE4;
    --chat-bg:#EFF2ED;
    --shadow:0 1px 2px rgba(23,33,28,.06),0 4px 16px rgba(23,33,28,.05);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#0F1512;
      --surface:#161E1A;
      --surface-2:#1C2620;
      --surface-3:#243029;
      --ink:#E7EDE8;
      --ink-2:#A3B0A8;
      --ink-3:#6D7A72;
      --line:#26312A;
      --accent:#38B08C;
      --accent-soft:#193A2F;
      --on-accent:#0B1410;
      --latec:#4F7CDE;   --latec-soft:#1B2740;
      --network:#BD7A16; --network-soft:#332612;
      --phone:#8A66DE;   --phone-soft:#291F42;
      --good:#3AA968; --good-soft:#16301F;
      --warn:#C98A1C; --warn-soft:#332812;
      --crit:#D4635B; --crit-soft:#3A1D1A;
      --bubble-in:#1E2822;
      --bubble-out:#1F3A2F;
      --chat-bg:#121A15;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3);
    }
  }
  :root[data-theme="dark"]{
    --ground:#0F1512;
    --surface:#161E1A;
    --surface-2:#1C2620;
    --surface-3:#243029;
    --ink:#E7EDE8;
    --ink-2:#A3B0A8;
    --ink-3:#6D7A72;
    --line:#26312A;
    --accent:#38B08C;
    --accent-soft:#193A2F;
    --on-accent:#0B1410;
    --latec:#4F7CDE;   --latec-soft:#1B2740;
    --network:#BD7A16; --network-soft:#332612;
    --phone:#8A66DE;   --phone-soft:#291F42;
    --good:#3AA968; --good-soft:#16301F;
    --warn:#C98A1C; --warn-soft:#332812;
    --crit:#D4635B; --crit-soft:#3A1D1A;
    --bubble-in:#1E2822;
    --bubble-out:#1F3A2F;
    --chat-bg:#121A15;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    background:var(--ground);
    color:var(--ink);
    font-size:14px;
    overflow:hidden;
  }
  button{font-family:inherit;font-size:inherit;border:none;background:none;color:inherit;cursor:pointer}
  input,textarea{font-family:inherit;font-size:inherit;color:var(--ink)}
  input::placeholder{color:var(--ink-3)}
  button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
  ::-webkit-scrollbar{width:9px;height:9px}
  ::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:6px;border:2px solid transparent;background-clip:content-box}

  .app{display:flex;height:100vh}

  /* ============ RAIL ============ */
  .rail{
    width:66px;flex:none;display:flex;flex-direction:column;align-items:center;
    padding:14px 0;gap:6px;background:var(--surface);border-right:1px solid var(--line);
  }
  .logo{
    width:38px;height:38px;border-radius:12px;background:var(--accent);color:var(--on-accent);
    display:grid;place-items:center;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:15px;
    margin-bottom:14px;letter-spacing:-.5px;
  }
  .rail nav{display:flex;flex-direction:column;gap:4px;flex:1;width:100%;align-items:center}
  .rail-btn{
    width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--ink-3);
    position:relative;transition:background .15s,color .15s;
  }
  .rail-btn:hover{background:var(--surface-2);color:var(--ink-2)}
  .rail-btn.active{background:var(--accent-soft);color:var(--accent)}
  .rail-btn svg{width:21px;height:21px}
  .rail-btn .dot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--crit);border:2px solid var(--surface)}
  .rail-foot{display:flex;flex-direction:column;gap:10px;align-items:center}
  .avatar-me{width:34px;height:34px;border-radius:50%;background:var(--phone-soft);color:var(--phone);display:grid;place-items:center;font-weight:600;font-size:12px}

  /* ============ VIEWS ============ */
  .view{display:none;flex:1;min-width:0}
  .view.active{display:flex}

  /* ============ LIST PANE ============ */
  .pane-list{
    width:330px;flex:none;display:flex;flex-direction:column;background:var(--surface);
    border-right:1px solid var(--line);
  }
  .list-head{padding:18px 16px 10px}
  .list-head h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:19px;letter-spacing:-.3px}
  .list-head .sub{color:var(--ink-3);font-size:12.5px;margin-top:2px}
  .search{
    margin:10px 16px 4px;display:flex;align-items:center;gap:8px;background:var(--surface-2);
    border-radius:10px;padding:8px 12px;color:var(--ink-3);
  }
  .search input{flex:1;border:none;background:none;outline:none;font-size:13.5px}
  .chips{display:flex;gap:6px;padding:10px 16px;overflow-x:auto;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{
    flex:none;display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
    border:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--ink-2);
    transition:all .15s;
  }
  .chip .cdot{width:8px;height:8px;border-radius:50%}
  .chip:hover{border-color:var(--ink-3)}
  .chip.on{background:var(--ink);border-color:var(--ink);color:var(--ground)}
  .convs{flex:1;overflow-y:auto;padding:4px 8px 16px}
  .conv{
    display:flex;gap:11px;width:100%;text-align:left;padding:11px 10px;border-radius:12px;
    transition:background .12s;align-items:flex-start;
  }
  .conv:hover{background:var(--surface-2)}
  .conv.sel{background:var(--accent-soft)}
  .c-avatar{
    width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
    font-weight:600;font-size:14px;position:relative;
  }
  .c-avatar .wa{
    position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;
    background:var(--good);border:2px solid var(--surface);display:grid;place-items:center;
  }
  .c-avatar .wa svg{width:9px;height:9px;fill:#fff}
  .c-main{flex:1;min-width:0}
  .c-top{display:flex;align-items:baseline;gap:8px}
  .c-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
  .c-time{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none}
  .conv.unread .c-time{color:var(--accent);font-weight:600}
  .c-snip{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .conv.unread .c-snip{color:var(--ink);font-weight:500}
  .c-tags{display:flex;gap:5px;margin-top:6px;align-items:center;flex-wrap:wrap}
  .tag{font-size:10.5px;font-weight:600;padding:2.5px 7px;border-radius:6px;letter-spacing:.2px}
  .tag.camp{background:var(--warn-soft);color:var(--warn)}
  .unread-n{
    margin-left:auto;background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:700;
    min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px;
  }

  /* ============ CHAT PANE ============ */
  .pane-chat{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--chat-bg)}
  .chat-head{
    display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--surface);
    border-bottom:1px solid var(--line);
  }
  .back-btn{display:none;color:var(--ink-2);padding:6px;border-radius:8px}
  .chat-head .c-avatar{width:38px;height:38px;font-size:13px}
  .ch-name{font-weight:600;font-size:14.5px}
  .ch-sub{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:6px;margin-top:1px}
  .line-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px}
  .head-actions{margin-left:auto;display:flex;gap:4px}
  .icon-btn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--ink-3)}
  .icon-btn:hover{background:var(--surface-2);color:var(--ink-2)}
  .icon-btn svg{width:18px;height:18px}
  .msgs{flex:1;overflow-y:auto;padding:22px 24px;display:flex;flex-direction:column;gap:4px}
  .day-sep{align-self:center;font-size:11px;font-weight:600;color:var(--ink-3);background:var(--surface);padding:4px 12px;border-radius:999px;margin:10px 0;box-shadow:var(--shadow)}
  .msg{max-width:min(64%,460px);padding:8px 12px 6px;border-radius:14px;box-shadow:var(--shadow);font-size:13.5px;line-height:1.45}
  .msg.in{align-self:flex-start;background:var(--bubble-in);border-bottom-left-radius:4px}
  .msg.out{align-self:flex-end;background:var(--bubble-out);border-bottom-right-radius:4px}
  .msg + .msg{margin-top:2px}
  .msg .meta{display:flex;justify-content:flex-end;align-items:center;gap:4px;font-size:10.5px;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums}
  .msg .meta .agent{color:var(--accent);font-weight:600}
  .msg.note{align-self:center;background:var(--warn-soft);color:var(--warn);font-size:12px;font-weight:500;border-radius:10px;box-shadow:none}
  .quick{display:flex;gap:8px;padding:0 18px 10px;overflow-x:auto;scrollbar-width:none}
  .quick::-webkit-scrollbar{display:none}
  .q-btn{flex:none;font-size:12.5px;font-weight:500;color:var(--accent);background:var(--surface);border:1px solid var(--line);padding:7px 13px;border-radius:999px;box-shadow:var(--shadow)}
  .q-btn:hover{background:var(--accent-soft)}
  .composer{display:flex;align-items:flex-end;gap:10px;padding:12px 18px 16px;background:var(--surface);border-top:1px solid var(--line)}
  .composer .box{flex:1;display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:14px;padding:4px 8px 4px 14px}
  .composer input{flex:1;border:none;background:none;outline:none;padding:9px 0;font-size:13.5px}
  .send{width:42px;height:42px;flex:none;border-radius:12px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;transition:transform .1s}
  .send:active{transform:scale(.93)}
  .send svg{width:18px;height:18px}
  .empty-chat{flex:1;display:grid;place-items:center;color:var(--ink-3);text-align:center}
  .empty-chat .big{font-family:"Bricolage Grotesque",sans-serif;font-size:17px;color:var(--ink-2);margin-bottom:4px}

  /* ============ INFO PANE ============ */
  .pane-info{width:290px;flex:none;background:var(--surface);border-left:1px solid var(--line);overflow-y:auto;padding:20px 18px;display:none}
  .pane-info.open{display:block}
  .info-contact{text-align:center;padding-bottom:16px;border-bottom:1px solid var(--line)}
  .info-contact .c-avatar{width:64px;height:64px;font-size:20px;margin:0 auto 10px}
  .info-contact h3{font-family:"Bricolage Grotesque",sans-serif;font-size:16px;font-weight:600}
  .info-contact .ph{color:var(--ink-3);font-size:12.5px;margin-top:3px;font-variant-numeric:tabular-nums}
  .info-sec{padding:14px 0;border-bottom:1px solid var(--line)}
  .info-sec h4{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
  .info-row{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;color:var(--ink-2)}
  .info-row b{color:var(--ink);font-weight:500}
  .stage-select{display:flex;flex-direction:column;gap:6px}
  .stage-opt{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:7px 10px;border-radius:9px;border:1px solid var(--line);text-align:left}
  .stage-opt.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}

  /* ============ PAGES (campaigns / reports) ============ */
  .page{flex:1;overflow-y:auto;padding:26px 30px}
  .page-inner{max-width:1080px;margin:0 auto}
  .page h1{font-family:"Bricolage Grotesque",sans-serif;font-size:23px;font-weight:600;letter-spacing:-.3px}
  .page .lead{color:var(--ink-2);font-size:13.5px;margin-top:4px;max-width:60ch}
  .toolbar{display:flex;gap:10px;align-items:center;margin:20px 0 18px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px;padding:9px 16px;border-radius:10px;transition:filter .15s}
  .btn.primary{background:var(--accent);color:var(--on-accent)}
  .btn.primary:hover{filter:brightness(1.08)}
  .btn.ghost{border:1px solid var(--line);color:var(--ink-2);background:var(--surface)}
  .btn svg{width:15px;height:15px}

  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
  .stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
  .stat .lbl{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-3)}
  .stat .val{font-family:"Bricolage Grotesque",sans-serif;font-size:29px;font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
  .stat .delta{font-size:12px;margin-top:4px;font-weight:600}
  .stat .delta.up{color:var(--good)} .stat .delta.dn{color:var(--crit)}
  .stat .delta span{color:var(--ink-3);font-weight:400}

  .panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;margin-top:14px}
  .panel h3{font-size:14.5px;font-weight:600}
  .panel .hint{font-size:12px;color:var(--ink-3);margin-top:2px}
  .legend{display:flex;gap:16px;margin:14px 0 8px;flex-wrap:wrap}
  .lg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)}
  .lg i{width:10px;height:10px;border-radius:3px;display:inline-block}
  .chart-wrap{overflow-x:auto}
  .grid-2{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;align-items:start}
  @media(max-width:900px){.grid-2{grid-template-columns:1fr}}

  .hbar-row{display:grid;grid-template-columns:110px 1fr 52px;align-items:center;gap:10px;padding:7px 0;font-size:12.5px}
  .hbar-track{height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}
  .hbar-fill{height:100%;border-radius:5px}
  .hbar-row b{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}

  table.camps{width:100%;border-collapse:collapse;font-size:13px}
  table.camps th{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--ink-3);text-align:left;padding:8px 12px;border-bottom:1px solid var(--line)}
  table.camps td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
  table.camps tr:last-child td{border-bottom:none}
  .st{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px}
  .st i{width:6px;height:6px;border-radius:50%;display:inline-block}
  .st.sent{background:var(--good-soft);color:var(--good)} .st.sent i{background:var(--good)}
  .st.draft{background:var(--surface-2);color:var(--ink-2)} .st.draft i{background:var(--ink-3)}
  .st.sending{background:var(--warn-soft);color:var(--warn)} .st.sending i{background:var(--warn)}
  .mini-meter{display:flex;align-items:center;gap:8px}
  .mini-meter .hbar-track{width:90px}

  .tooltip{
    position:fixed;pointer-events:none;background:var(--ink);color:var(--ground);
    font-size:12px;padding:7px 10px;border-radius:8px;box-shadow:var(--shadow);z-index:99;
    opacity:0;transition:opacity .1s;font-variant-numeric:tabular-nums;line-height:1.5;
  }
  .tooltip b{font-weight:600}

  .toast{
    position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--ink);color:var(--ground);
    padding:10px 18px;border-radius:10px;font-size:13px;font-weight:500;opacity:0;transition:all .25s;z-index:100;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  /* ============ SIDEBAR (filtros y canales) ============ */
  .sidebar{
    width:216px;flex:none;background:var(--surface);border-right:1px solid var(--line);
    overflow-y:auto;padding:16px 10px;display:flex;flex-direction:column;gap:20px;
  }
  .sb-sec h5{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3);padding:0 10px;margin-bottom:7px}
  .sb-item{
    display:flex;align-items:center;gap:9px;width:100%;padding:7.5px 10px;border-radius:9px;
    font-size:13px;color:var(--ink-2);text-align:left;transition:background .12s;
  }
  .sb-item:hover{background:var(--surface-2)}
  .sb-item.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
  .sb-item svg{width:16px;height:16px;flex:none}
  .sb-item .n{
    margin-left:auto;font-size:10.5px;font-weight:700;color:var(--ink-3);background:var(--surface-2);
    min-width:20px;text-align:center;padding:2px 6px;border-radius:999px;font-variant-numeric:tabular-nums;
  }
  .sb-item.on .n{background:var(--accent);color:var(--on-accent)}
  .sb-item .chb-s{width:18px;height:18px;border-radius:6px;flex:none;display:grid;place-items:center}
  .sb-item .chb-s svg{width:11px;height:11px}
  .sb-soon{font-size:9.5px;font-weight:700;letter-spacing:.4px;color:var(--ink-3);background:var(--surface-2);padding:2px 6px;border-radius:5px;margin-left:6px}

  /* Pestañas de estado */
  .tabs{display:flex;padding:0 14px;border-bottom:1px solid var(--line)}
  .tab{flex:1;text-align:center;padding:10px 2px;font-size:12.5px;font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;display:flex;justify-content:center;gap:6px;align-items:center}
  .tab.on{color:var(--accent);border-color:var(--accent)}
  .tab .n{font-size:10px;font-weight:700;background:var(--surface-2);color:var(--ink-3);padding:1.5px 6px;border-radius:999px;font-variant-numeric:tabular-nums}
  .tab.on .n{background:var(--accent);color:var(--on-accent)}

  /* Insignia de canal sobre el avatar */
  .chb{
    position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%;
    border:2px solid var(--surface);display:grid;place-items:center;
  }
  .chb svg{width:9.5px;height:9.5px}

  /* ============ IA / KB / LLAMADAS ============ */
  .tag.ia{background:var(--accent-soft);color:var(--accent)}
  .sw{position:relative;width:36px;height:20px;border-radius:999px;background:var(--surface-3);transition:background .15s;flex:none}
  .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow);transition:left .15s}
  .sw.on{background:var(--accent)}
  .sw.on::after{left:18px}
  .kb-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .kb-row:last-child{border-bottom:none}
  .kb-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex:none}
  .kb-meta{flex:1;min-width:0}
  .kb-meta b{font-size:13.5px;font-weight:600;display:block}
  .kb-meta span{font-size:12px;color:var(--ink-3)}
  .msg.call{display:flex;align-items:center;gap:10px;padding:10px 14px}
  .msg.call .call-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
  .msg.call .call-ic svg{width:15px;height:15px}
  .msg.call.missed .call-ic{background:var(--crit-soft);color:var(--crit)}
  .call-modal{
    position:fixed;inset:0;background:rgba(10,16,13,.55);display:none;place-items:center;z-index:200;
  }
  .call-modal.open{display:grid}
  .call-card{
    background:var(--surface);border-radius:20px;padding:30px 34px;text-align:center;width:300px;box-shadow:var(--shadow);
  }
  .call-card .c-avatar{width:70px;height:70px;font-size:22px;margin:0 auto 12px}
  .call-card h3{font-family:"Bricolage Grotesque",sans-serif;font-size:17px}
  .call-card .cc-sub{color:var(--ink-3);font-size:12.5px;margin:4px 0 22px}
  .call-card .cc-btns{display:flex;justify-content:center;gap:18px}
  .cc-btn{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;transition:transform .1s}
  .cc-btn:active{transform:scale(.92)}
  .cc-btn.ans{background:var(--good)} .cc-btn.dec{background:var(--crit)}
  .cc-btn svg{width:22px;height:22px}
  .pulse{animation:pulse 1.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,138,76,.4)}70%{box-shadow:0 0 0 16px rgba(31,138,76,0)}100%{box-shadow:0 0 0 0 rgba(31,138,76,0)}}

  /* Modal de confirmación */
  .cf-card{background:var(--surface);border-radius:18px;padding:26px 28px;width:340px;max-width:92vw;box-shadow:var(--shadow)}
  .cf-card h3{font-family:"Bricolage Grotesque",sans-serif;font-size:16.5px;margin-bottom:8px}
  .cf-card p{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-bottom:20px}
  .cf-card p b{color:var(--ink)}
  .cf-btns{display:flex;justify-content:flex-end;gap:10px}
  .tag[data-f]{cursor:pointer}
  .tag[data-f]:hover{filter:brightness(.93)}

  /* Adjuntos, emojis y stickers */
  .composer{position:relative}
  .box-btn{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--ink-3)}
  .box-btn:hover{color:var(--accent);background:var(--surface-3)}
  .box-btn svg{width:19px;height:19px}
  .pop{
    position:absolute;bottom:64px;background:var(--surface);border:1px solid var(--line);
    border-radius:14px;box-shadow:var(--shadow);padding:8px;display:none;z-index:60;
  }
  .pop.open{display:block}
  .attach-pop{left:52px;width:210px}
  .attach-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;font-size:13px;color:var(--ink);text-align:left}
  .attach-opt:hover{background:var(--surface-2)}
  .attach-opt .kb-ic{width:32px;height:32px;font-size:15px}
  .emoji-pop{right:70px;width:252px}
  .emoji-tabs{display:flex;gap:4px;margin-bottom:6px}
  .emoji-tabs button{flex:1;font-size:11.5px;font-weight:600;color:var(--ink-3);padding:6px;border-radius:8px}
  .emoji-tabs button.on{background:var(--accent-soft);color:var(--accent)}
  .emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
  .emoji-grid button{font-size:19px;padding:5px;border-radius:8px;line-height:1}
  .emoji-grid button:hover{background:var(--surface-2)}
  .emoji-grid.stickers{grid-template-columns:repeat(4,1fr)}
  .emoji-grid.stickers button{font-size:34px;padding:8px}
  .msg.sticker{background:none;box-shadow:none;font-size:56px;padding:2px 6px;line-height:1.15}
  .msg .img-ph{
    width:210px;height:140px;border-radius:10px;display:grid;place-items:center;font-size:34px;
    background:linear-gradient(135deg,var(--surface-3),var(--surface-2));margin-bottom:4px;
  }
  .msg .file-chip{display:flex;align-items:center;gap:9px;background:var(--surface-2);border-radius:10px;padding:9px 11px;min-width:190px}
  .msg .file-chip .kb-ic{width:32px;height:32px;font-size:15px;background:var(--crit-soft)}
  .msg .file-chip b{font-size:12.5px;display:block}
  .msg .file-chip span{font-size:11px;color:var(--ink-3)}

  /* Notas de voz */
  .voice{display:flex;align-items:center;gap:10px;min-width:210px}
  .voice .play{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:none}
  .voice .play svg{width:14px;height:14px}
  .wave{display:flex;align-items:center;gap:2px;height:26px;flex:1}
  .wave i{width:3px;border-radius:2px;background:var(--ink-3);opacity:.65}
  .voice .dur{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
  .transcript{
    margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--accent-soft);
    font-size:12px;color:var(--ink-2);line-height:1.5;border-left:3px solid var(--accent);
  }
  .transcript b{display:block;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
  #micBtn.rec{color:#fff;background:var(--crit);animation:pulse 1.2s infinite}

  /* ============ RESPONSIVE ============ */
  @media(max-width:1150px){
    .sidebar{display:none}
  }
  @media(max-width:860px){
    .app{flex-direction:column-reverse}
    .rail{width:100%;flex-direction:row;justify-content:space-around;padding:6px 10px;border-right:none;border-top:1px solid var(--line)}
    .rail nav{flex-direction:row;flex:none;gap:2px}
    .logo{margin:0;width:32px;height:32px;font-size:12px}
    .rail-foot{flex-direction:row}
    .pane-list{width:100%;flex:1}
    .pane-chat{position:fixed;inset:0;z-index:50;transform:translateX(102%);transition:transform .22s ease}
    body.chat-open .pane-chat{transform:none}
    .back-btn{display:grid}
    .pane-info{display:none !important}
    .page{padding:18px 16px}
    .msg{max-width:82%}
  }
  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;animation:none !important}
  }

/* ============ LOGIN / INVITACION ============ */
.auth-wrap{min-height:100vh;display:grid;place-items:center;background:var(--ground);padding:20px}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:34px 32px;width:100%;max-width:380px;box-shadow:var(--shadow)}
.auth-card .logo{margin:0 auto 14px}
.auth-card h1{font-family:"Bricolage Grotesque",sans-serif;font-size:21px;text-align:center;letter-spacing:-.3px}
.auth-card .sub{text-align:center;color:var(--ink-3);font-size:13px;margin:4px 0 22px}
.auth-card label{display:block;font-size:12.5px;font-weight:600;margin:14px 0 5px}
.auth-card input{width:100%;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:11px 13px;font-size:14px}
.auth-card .btn{width:100%;justify-content:center;margin-top:20px;padding:12px}
.auth-err{margin-top:12px;font-size:12.5px;color:var(--crit);background:var(--crit-soft);border-radius:8px;padding:9px 11px;display:none}
.auth-err.show{display:block}

/* ============ EXTRAS APP REAL ============ */
.hidden{display:none !important}
.msg img.msg-img{max-width:240px;border-radius:10px;display:block;margin-bottom:4px}
.spinner{width:26px;height:26px;border:3px solid var(--surface-3);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:30px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.push-banner{position:fixed;bottom:76px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px 16px;display:none;gap:12px;align-items:center;z-index:90;font-size:13px}
.push-banner.show{display:flex}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;font-weight:600;margin-bottom:4px;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:var(--surface-2);border-radius:9px;padding:9px 11px;font-size:13px;color:var(--ink)}
.field textarea{min-height:90px;resize:vertical}
.modal-card{background:var(--surface);border-radius:18px;padding:24px 26px;width:420px;max-width:94vw;box-shadow:var(--shadow);max-height:88vh;overflow-y:auto}
.modal-card h3{font-family:"Bricolage Grotesque",sans-serif;font-size:16.5px;margin-bottom:14px}
.copy-box{display:flex;gap:8px;align-items:center;background:var(--surface-2);border-radius:9px;padding:9px 11px;font-size:12px;word-break:break-all}