/* ============================================================
   PANEL LATERAL — Detalle · Chat · Actividad (y el riel cuando está cerrado)
   ============================================================ */
:root{--panel-w:440px}

.panel-lateral{position:fixed;top:var(--app-header-h);right:0;bottom:0;width:var(--panel-w);max-width:100vw;z-index:45;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(var(--panel-rgb),.97),rgba(var(--panel-rgb),.97));border-left:1px solid rgba(var(--accent-rgb),.32);
  box-shadow:-24px 0 60px rgba(0,0,0,.45);backdrop-filter:blur(16px);
  transform:translateX(102%);visibility:hidden;
  transition:transform .42s cubic-bezier(.2,.9,.25,1),visibility 0s linear .42s,width .32s cubic-bezier(.2,.9,.25,1)}
.panel-lateral.abierto{transform:none;visibility:visible;
  transition:transform .42s cubic-bezier(.2,.9,.25,1),visibility 0s,width .32s cubic-bezier(.2,.9,.25,1)}
.panel-lateral::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(var(--warn-rgb),.55),transparent)}

/* en pantalla ancha empuja el contenido: nada queda tapado */
#app{transition:width .42s cubic-bezier(.2,.9,.25,1)}
body.panel-abierto[data-panel-modo="empuja"] #app{width:calc(100vw - var(--panel-w))}
body.panel-arrastrando,body.panel-arrastrando *{cursor:col-resize!important;user-select:none!important}
body.panel-arrastrando #app,body.panel-arrastrando .panel-lateral{transition:none!important}

/* borde para cambiar el ancho */
.pl-borde{position:absolute;left:-5px;top:0;bottom:0;width:10px;cursor:col-resize;z-index:3;outline:none}
.pl-borde::after{content:"";position:absolute;left:4px;top:50%;width:2px;height:46px;transform:translateY(-50%);border-radius:2px;
  background:transparent;transition:background .2s,height .2s}
.pl-borde:hover::after,.pl-borde:focus-visible::after,body.panel-arrastrando .pl-borde::after{background:rgba(var(--accent-rgb),.85);height:72px}
body[data-panel-modo="hoja"] .pl-borde{display:none}

/* cabecera: pestañas con indicador que se desliza, ampliar y cerrar */
.pl-cabecera{display:flex;align-items:center;gap:6px;padding:10px 10px 10px 12px;border-bottom:1px solid rgba(var(--accent-rgb),.18);flex-shrink:0}
.pl-tabs{position:relative;flex:1;min-width:0;display:flex;gap:2px;padding:3px;border-radius:12px;background:rgba(var(--panel-rgb),.6);border:1px solid rgba(var(--accent-rgb),.18)}
.pl-tab{position:relative;z-index:1;flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 6px;border:0;border-radius:9px;
  background:none;font-family:inherit;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;transition:color .25s;white-space:nowrap}
.pl-tab span{overflow:hidden;text-overflow:ellipsis}
.pl-tab svg,.pl-tab .lucide{width:15px;height:15px;flex-shrink:0}
.pl-tab:hover,.pl-tab[aria-selected="true"]{color:var(--text-strong)}
.pl-tab:focus-visible{outline:2px solid rgba(var(--warn-rgb),.6);outline-offset:1px}
.pl-ins{font-style:normal;min-width:17px;height:17px;padding:0 5px;border-radius:999px;display:inline-grid;place-items:center;flex-shrink:0;
  font-size:9.5px;font-weight:800;background:var(--warn);color:var(--text-strong);animation:pl-pop .45s cubic-bezier(.2,1.6,.4,1)}
.pl-ins[hidden]{display:none}
.pl-ins.punto{min-width:7px;width:7px;height:7px;padding:0;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.pl-tinta{position:absolute;top:3px;bottom:3px;left:var(--x,3px);width:var(--w,0);border-radius:9px;pointer-events:none;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.6),rgba(var(--warn-rgb),.22));border:1px solid rgba(var(--accent-rgb),.5);
  box-shadow:0 0 16px rgba(var(--accent-rgb),.3);transition:left .42s cubic-bezier(.2,.9,.25,1),width .42s cubic-bezier(.2,.9,.25,1)}
.pl-accion{width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;font-family:inherit;
  border:1px solid rgba(var(--fg-rgb),.08);background:rgba(var(--fg-rgb),.04);color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.pl-accion:hover,.pl-accion:focus-visible{color:var(--text-strong);background:rgba(var(--accent-rgb),.28);outline:none}
#panelCerrar:hover,#panelCerrar:focus-visible{background:rgba(var(--danger-rgb),.32)}
.pl-accion svg,.pl-accion .lucide{width:15px;height:15px}
body[data-panel-modo="hoja"] #panelAmpliar{display:none}

/* cuerpo: una pestaña a la vez, entra desde el lado de la pestaña elegida */
.pl-cuerpo{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.pl-panel{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.pl-panel[hidden]{display:none}
.pl-panel.entrando[data-entra="derecha"]{animation:pl-derecha .4s cubic-bezier(.2,.9,.25,1)}
.pl-panel.entrando[data-entra="izquierda"]{animation:pl-izquierda .4s cubic-bezier(.2,.9,.25,1)}
.pl-panel.entrando[data-entra="abajo"]{animation:pl-abajo .45s cubic-bezier(.2,.9,.25,1)}
@keyframes pl-derecha{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes pl-izquierda{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes pl-abajo{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pl-pop{0%{transform:scale(.4)}60%{transform:scale(1.22)}100%{transform:scale(1)}}

/* ---------- Detalle: la ficha jerárquica y la de una nota, sin su marco flotante ---------- */
.panel-lateral .hier-panel{position:relative;inset:auto;flex:1;min-height:0;width:auto;max-width:none;max-height:none;margin:0;
  padding:18px 18px 16px;border:0;border-radius:0;box-shadow:none;background:none;backdrop-filter:none;
  opacity:1;transform:none;visibility:visible;pointer-events:auto;display:none;overflow-y:auto;transition:none}
.panel-lateral .hier-panel.open{display:block}
.panel-lateral .hier-panel::before,.panel-lateral .hp-close{display:none}
.panel-lateral .hp-head{padding-right:0}
.panel-lateral .nodepanel{position:relative;inset:auto;flex:1;min-height:0;width:auto;max-width:none;max-height:none;margin:0;
  padding:18px;border:0;border-radius:0;box-shadow:none;background:none;backdrop-filter:none;overflow-y:auto}
.panel-lateral .nodepanel.open{animation:pl-abajo .35s cubic-bezier(.2,.9,.25,1)}
#plPanel-detalle:has(.nodepanel.open) .hier-panel{display:none}
#plPanel-detalle:has(.nodepanel.open) #detalleVacio,#plPanel-detalle:has(.hier-panel.open) #detalleVacio{display:none}
.pl-vacio{flex:1;min-height:0;overflow-y:auto;padding:24px 20px}
.dv-intro{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px;border-radius:16px;
  background:radial-gradient(circle at 15% 0%,rgba(var(--accent-rgb),.22),rgba(var(--fg-rgb),.02) 60%);border:1px solid rgba(var(--accent-rgb),.22)}
.dv-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--yellow);
  background:rgba(var(--warn-rgb),.1);border:1px solid rgba(var(--warn-rgb),.35);animation:dv-flota 4s ease-in-out infinite}
.dv-ico svg{width:20px;height:20px}
@keyframes dv-flota{50%{transform:translateY(-3px)}}
.dv-intro h3{margin:4px 0 0;font-size:16px;color:var(--text-strong)}
.dv-intro p{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.dv-sec{margin-top:18px}
.dv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dv-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:999px;font-family:inherit;font-size:11.5px;font-weight:600;
  color:var(--text);background:rgba(var(--fg-rgb),.035);border:1px solid rgba(var(--fg-rgb),.08);cursor:pointer;
  animation:pl-abajo .4s cubic-bezier(.2,.9,.25,1) both;transition:transform .18s,border-color .18s,background .18s}
.dv-chip .hp-av{width:22px;height:22px;border-radius:50%;font-size:8.5px}
.dv-chip .dv-punto{width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.dv-chip .dv-punto i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.dv-chip small{color:var(--muted-2);font-size:10px}
.dv-chip:hover,.dv-chip:focus-visible{transform:translateY(-1px);border-color:color-mix(in srgb,var(--c) 60%,transparent);
  background:color-mix(in srgb,var(--c) 14%,transparent);outline:none}
.dv-nada{font-size:11.5px;color:var(--muted-2);margin-top:6px}

/* ---------- Chat: la consola entera, sin su marco; en angosto la lista de chats va encima ---------- */
.panel-lateral .drawer{position:relative;inset:auto;transform:none;visibility:visible;pointer-events:auto;width:auto;max-width:none;height:auto;
  flex:1;min-height:0;border:0;box-shadow:none;background:transparent;transition:none}
.panel-lateral .drawer-head{padding:8px 12px;gap:8px;background:none;border-bottom:1px solid rgba(var(--accent-rgb),.12)}
.panel-lateral .drawer-head .ctabs{flex:1;min-width:0;padding:0}
.panel-lateral .ctab{padding:7px 6px;border-radius:9px;font-size:11.5px;white-space:nowrap}
.panel-lateral .chat-mode-badge{flex-shrink:0}
.panel-lateral.angosto .chat-mode-badge span{display:none}
.panel-lateral .cbody{padding:12px}
/* en angosto la lista de chats no aprieta la conversación: aparece encima solo cuando se pide */
.panel-lateral.angosto .chat-sidebar{display:none}
.panel-lateral.angosto #expandSidebarBtn{display:inline-flex!important}
.panel-lateral.angosto.lista-chats .chat-sidebar,.panel-lateral.angosto.lista-chats .chat-sidebar.collapsed{display:flex;position:absolute;top:0;left:0;bottom:0;z-index:6;
  width:260px;min-width:260px;max-width:260px;padding:10px;opacity:1;pointer-events:auto;border:1px solid rgba(var(--accent-rgb),.35);
  background:rgba(var(--panel-rgb),.98);box-shadow:18px 0 40px rgba(0,0,0,.55);animation:pl-izquierda .3s cubic-bezier(.2,.9,.25,1)}
.panel-lateral.angosto .pl-tab svg,.panel-lateral.angosto .pl-tab .lucide{display:none}
.vivo-ver{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 11px;border-radius:999px;font-family:inherit;font-size:11px;font-weight:700;
  color:var(--text-strong);background:rgba(var(--ok-rgb),.1);border:1px solid rgba(var(--ok-rgb),.4);cursor:pointer;transition:.2s}
.vivo-ver:hover,.vivo-ver:focus-visible{background:rgba(var(--ok-rgb),.22);color:var(--text-strong);outline:none}
.vivo-ver svg{width:13px;height:13px}

/* ---------- Actividad: el historial con filtro por agente; clic abre al agente en vivo ---------- */
.pl-act-cab{padding:12px 14px 4px;flex-shrink:0}
.pl-act-titulo{margin:0 0 8px;display:flex;align-items:baseline;gap:8px;font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue)}
.pl-act-titulo span{font-weight:600;letter-spacing:.2px;text-transform:none;color:var(--muted);font-size:11px}
.pl-act-filtros{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
.pl-act-filtros::-webkit-scrollbar{display:none}
.af-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;font-family:inherit;font-size:11px;font-weight:600;
  color:var(--text);background:rgba(var(--fg-rgb),.035);border:1px solid rgba(var(--fg-rgb),.08);cursor:pointer;transition:.18s}
.af-chip i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--accent-2));box-shadow:0 0 6px var(--c,var(--accent-2))}
.af-chip em{font-style:normal;font-size:10px;color:var(--muted)}
.af-chip:hover,.af-chip:focus-visible{border-color:color-mix(in srgb,var(--c,var(--accent)) 60%,transparent);outline:none}
.af-chip[aria-pressed="true"]{color:var(--on-accent);border-color:color-mix(in srgb,var(--c,var(--accent)) 70%,transparent);background:color-mix(in srgb,var(--c,var(--accent)) 20%,transparent)}
#plPanel-actividad .ad-list{flex:1;min-height:0;overflow-y:auto;padding:6px 12px 14px}
/* cada paso en fila (la clase .ev del editor de video lo apilaba en columna) con el color de su agente */
#actList .ev{position:relative;flex:none;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:start;gap:10px;min-height:0;
  padding:9px 10px;border-radius:12px;color:var(--text);background:rgba(var(--fg-rgb),.03);border:1px solid rgba(var(--fg-rgb),.06);
  border-left:3px solid var(--c,var(--purple));cursor:pointer;transition:transform .18s,background .18s,border-color .18s}
#actList .ev .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:inherit;
  color:var(--c,var(--accent-2));background:color-mix(in srgb,var(--c,var(--accent)) 14%,transparent)}
#actList .ev .ico svg{width:15px;height:15px}
#actList .ev .t{padding-top:3px;font-variant-numeric:tabular-nums}
#actList .ev.sub{border-left-color:var(--yellow)}
#plPanel-actividad .ev:hover,#plPanel-actividad .ev:focus-visible{transform:translateX(-2px);border-color:rgba(var(--accent-rgb),.45);outline:none}
#plPanel-actividad .ev.fuera{display:none}
.pl-act-vacio{margin:18px 14px;padding:14px;border-radius:12px;border:1px dashed rgba(var(--fg-rgb),.12);font-size:12px;color:var(--muted);line-height:1.5}

/* ---------- riel: el panel cerrado, en el borde derecho ---------- */
.panel-riel{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:44;display:flex;flex-direction:column;gap:4px;padding:6px 4px;
  border-radius:14px 0 0 14px;background:rgba(var(--panel-rgb),.92);border:1px solid rgba(var(--accent-rgb),.35);border-right:0;backdrop-filter:blur(10px);
  box-shadow:-10px 0 30px rgba(0,0,0,.35);transition:transform .38s cubic-bezier(.2,.9,.25,1),opacity .25s}
.panel-riel.oculto{transform:translate(115%,-50%);opacity:0;pointer-events:none}
.pr-btn{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:11px;border:0;background:transparent;
  color:var(--muted);cursor:pointer;font-family:inherit;transition:background .2s,color .2s}
.pr-btn svg,.pr-btn .lucide{width:18px;height:18px}
.pr-btn:hover,.pr-btn:focus-visible{color:var(--text-strong);background:rgba(var(--accent-rgb),.32);outline:none}
.pr-btn.ultima{color:var(--text)}
.pr-label{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(6px,-50%);opacity:0;pointer-events:none;white-space:nowrap;
  padding:5px 10px;border-radius:8px;background:rgba(var(--panel-rgb),.96);border:1px solid rgba(var(--accent-rgb),.35);font-size:11.5px;font-weight:700;color:var(--text-strong);
  box-shadow:0 8px 20px rgba(0,0,0,.4);transition:opacity .2s,transform .2s}
.pr-btn:hover .pr-label,.pr-btn:focus-visible .pr-label{opacity:1;transform:translate(0,-50%)}
.pr-ind{position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;font-size:9px;font-weight:800;
  display:grid;place-items:center;background:var(--warn);color:var(--text-strong);animation:pl-pop .45s cubic-bezier(.2,1.6,.4,1)}
.pr-ind[hidden]{display:none}
.pr-ind.punto{min-width:8px;width:8px;height:8px;padding:0;top:7px;right:7px;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.pr-btn.latiendo::after{content:"";position:absolute;inset:3px;border-radius:10px;border:1.5px solid rgba(var(--ok-rgb),.65);animation:pl-latido 1.8s infinite;pointer-events:none}
@keyframes pl-latido{0%{opacity:.9;transform:scale(.88)}70%{opacity:0;transform:scale(1.22)}100%{opacity:0}}

/* ---------- teléfono: hoja a pantalla completa ---------- */
@media (max-width:760px){
  .panel-lateral{width:100vw;border-left:0;box-shadow:none}
  .panel-riel{top:auto;bottom:84px;transform:none;border-radius:14px 0 0 14px}
  .panel-riel.oculto{transform:translateX(115%)}
  .pr-label{display:none}
  .pl-tab{font-size:11.5px;gap:5px}
  /* la hoja cubre la pantalla: el widget de estado taparía el cuadro para escribir; vuelve al cerrarla */
  body.panel-abierto[data-panel-modo="hoja"] .status-floating-widget{display:none}
}
@media (prefers-reduced-motion:reduce){
  .panel-lateral,.panel-lateral.abierto,#app,.panel-riel,.pl-tinta{transition:none!important}
  .pl-panel.entrando,.pl-ins,.pr-ind,.dv-chip,.dv-ico,.panel-lateral .nodepanel.open,.pr-btn.latiendo::after{animation:none!important}
}