/* ============================================================================
   Estilos BASE de los módulos COMPARTIDOS (patrón ZookMod): leads-module.js,
   clientes-module.js, mail-module.js… Un solo archivo para todos (clases zl-*).
   Usa los tokens del host: --surface, --card, --border, --t1/--t2/--t3,
   --violet, --emerald, --red, --amber. Tema oscuro por defecto; un host claro
   (p. ej. FG Connect) redefine las variables en su contenedor.
   ========================================================================== */
/* Aplica a TODO root de módulo (id zk-*-root): no enumerar ids uno a uno. */
[id^="zk-"][id$="-root"]{
  --zl-border: var(--border, rgba(255,255,255,.09));
  --zl-card: var(--card, #12141c); --zl-surface: var(--surface, #0d0f16);
  --zl-t1: var(--t1, #e5e7eb); --zl-t2: var(--t2, #b6bcc9); --zl-t3: var(--t3, #8b93a5);
  --zl-p: var(--violet, #8b5cf6);
  color: var(--zl-t1); font-size: 14px; }

[id^="zk-"][id$="-root"] .zk-ic{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-2px; }

/* ── Encabezado / toolbar ── */
.zl-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.zl-title{ margin:0; font-size:1.15rem; font-weight:800; color:var(--zl-t1); }
.zl-sub{ margin:2px 0 0; font-size:12px; color:var(--zl-t3); }
.zl-toolbar{ display:flex; align-items:center; gap:8px; margin:0 0 14px; flex-wrap:wrap; }
.zl-search{ width:min(320px, 100%); }
.zl-in{ width:100%; background:var(--zl-surface); border:1px solid var(--zl-border);
  border-radius:9px; color:var(--zl-t1); padding:7px 10px; font-size:13px; outline:none; }
.zl-in:focus{ border-color:var(--zl-p); }
select.zl-in{ appearance:auto; }
.zl-btn{ display:inline-flex; align-items:center; gap:6px; background:var(--zl-surface);
  border:1px solid var(--zl-border); color:var(--zl-t2); border-radius:9px;
  padding:7px 13px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; }
.zl-btn:hover{ border-color:var(--zl-p); color:var(--zl-t1); }
.zl-btn-p{ background:var(--zl-p); border-color:var(--zl-p); color:#fff; }
.zl-btn-p:hover{ filter:brightness(1.08); color:#fff; }
.zl-btn-wa{ color:#34d399; }
.zl-btn-link{ background:none; border:none; color:var(--zl-p); padding:7px 4px; }
.zl-empty{ padding:34px 10px; text-align:center; color:var(--zl-t3); font-size:13.5px; }

/* ── KPIs botón-filtro ── */
/* Métricas (buckets) agrupadas en UN dropdown para elegir cada una por separado. */
.zl-kpis{ position:relative; margin:0 0 14px; }
.zl-kpibtn{ display:inline-flex; align-items:center; gap:9px; min-width:230px; max-width:100%;
  padding:10px 14px; border-radius:12px; border:1px solid var(--zl-border); background:var(--zl-card);
  color:var(--zl-t1); cursor:pointer; font-size:13px; font-weight:600; }
.zl-kpibtn:hover{ border-color:var(--zl-t3); }
.zl-kpibtn.on{ border-color:var(--zl-p); }
.zl-kpibtn .zl-kbv{ margin-left:auto; font-size:1.15rem; font-weight:800; line-height:1; }
.zl-kcar{ display:inline-flex; color:var(--zl-t3); }
.zl-kcar .zk-ic{ width:15px; height:15px; }
.zl-kmenu{ position:absolute; z-index:70; top:calc(100% + 6px); left:0; width:260px;
  max-width:calc(100vw - 32px); background:var(--zl-card); border:1px solid var(--zl-border);
  border-radius:14px; padding:6px; box-shadow:0 16px 42px rgba(0,0,0,.4); display:none;
  max-height:360px; overflow-y:auto; }
.zl-kmenu.open{ display:block; }
.zl-kitem{ display:flex; align-items:center; gap:9px; width:100%; padding:9px 10px; border:0;
  border-radius:9px; background:none; color:var(--zl-t2); cursor:pointer; font-size:13px;
  font-weight:600; text-align:left; }
.zl-kitem:hover{ background:var(--zl-surface); color:var(--zl-t1); }
.zl-kitem.sel{ background:var(--zl-surface); color:var(--zl-t1); }
.zl-kitem .zl-kbv{ margin-left:auto; font-weight:800; }
.zl-kbl{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zl-kdot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--zl-t3); }
.zl-kdot.zl-tone-slate{ background:var(--zl-t2); }
.zl-kdot.zl-tone-blue{ background:#60a5fa; }
.zl-kdot.zl-tone-sky{ background:#38bdf8; }
.zl-kdot.zl-tone-amber{ background:#fbbf24; }
.zl-kdot.zl-tone-emerald{ background:#34d399; }
.zl-kdot.zl-tone-rose{ background:#fb7185; }
.zl-kdot.zl-tone-violet{ background:#a78bfa; }
.zl-kbv.zl-tone-slate{ color:var(--zl-t1); }
.zl-kbv.zl-tone-blue{ color:#60a5fa; }
.zl-kbv.zl-tone-sky{ color:#38bdf8; }
.zl-kbv.zl-tone-amber{ color:#fbbf24; }
.zl-kbv.zl-tone-emerald{ color:#34d399; }
.zl-kbv.zl-tone-rose{ color:#fb7185; }
.zl-kbv.zl-tone-violet{ color:#a78bfa; }
.zl-kpis-legacy-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:9px; margin-bottom:14px; }
.zl-kpi{ background:var(--zl-card); border:1px solid var(--zl-border); border-radius:14px;
  padding:10px 13px; text-align:left; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.zl-kpi:hover{ border-color:var(--zl-t3); }
.zl-kpi-l{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--zl-t3); }
.zl-kpi-v{ display:block; margin-top:3px; font-size:1.45rem; font-weight:800; line-height:1; }
.zl-tone-slate .zl-kpi-v{ color:var(--zl-t1); }
.zl-tone-blue .zl-kpi-v{ color:#60a5fa; }
.zl-tone-sky .zl-kpi-v{ color:#38bdf8; }
.zl-tone-amber .zl-kpi-v{ color:#fbbf24; }
.zl-tone-emerald .zl-kpi-v{ color:#34d399; }
.zl-tone-rose .zl-kpi-v{ color:#fb7185; }
.zl-tone-violet .zl-kpi-v{ color:#a78bfa; }
.zl-kpi.active{ border-width:1px; }
.zl-kpi.active.zl-tone-slate{ border-color:var(--zl-t3); box-shadow:0 0 0 2px rgba(148,163,184,.25); }
.zl-kpi.active.zl-tone-blue{ border-color:#60a5fa; box-shadow:0 0 0 2px rgba(96,165,250,.22); }
.zl-kpi.active.zl-tone-sky{ border-color:#38bdf8; box-shadow:0 0 0 2px rgba(56,189,248,.22); }
.zl-kpi.active.zl-tone-amber{ border-color:#fbbf24; box-shadow:0 0 0 2px rgba(251,191,36,.22); }
.zl-kpi.active.zl-tone-emerald{ border-color:#34d399; box-shadow:0 0 0 2px rgba(52,211,153,.22); }
.zl-kpi.active.zl-tone-rose{ border-color:#fb7185; box-shadow:0 0 0 2px rgba(251,113,133,.22); }
.zl-kpi.active.zl-tone-violet{ border-color:#a78bfa; box-shadow:0 0 0 2px rgba(167,139,250,.22); }

/* ── Tabla (desktop) ── */
.zl-tablewrap{ background:var(--zl-card); border:1px solid var(--zl-border); border-radius:14px; overflow:auto; }
.zl-table{ width:100%; border-collapse:collapse; font-size:13px; }
.zl-table th{ text-align:left; padding:10px 13px; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--zl-t3); border-bottom:1px solid var(--zl-border); white-space:nowrap; }
.zl-table td{ padding:10px 13px; border-bottom:1px solid var(--zl-border); vertical-align:top; }
.zl-table tbody tr:last-child td{ border-bottom:none; }
.zl-row{ cursor:pointer; }
.zl-row:hover td{ background:rgba(139,92,246,.05); }
.zl-editing td{ background:rgba(251,191,36,.06); }
.zl-name{ font-weight:700; color:var(--zl-t1); }
.zl-dim{ color:var(--zl-t2); }
.zl-dim2{ color:var(--zl-t3); }
.zl-chips{ display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.zl-chip{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:10.5px; font-weight:700; white-space:nowrap; }
.zl-chip-emerald{ background:rgba(52,211,153,.15); color:#34d399; }
.zl-chip-rose{ background:rgba(251,113,133,.15); color:#fb7185; }
.zl-chip-amber{ background:rgba(251,191,36,.15); color:#fbbf24; }
.zl-chip-blue{ background:rgba(96,165,250,.15); color:#60a5fa; }
.zl-chip-violet{ background:rgba(167,139,250,.15); color:#a78bfa; }

/* Select de estado con tono del embudo */
.zl-status{ background:var(--zl-surface); border:1px solid var(--zl-border); color:var(--zl-t1);
  border-radius:9px; padding:4px 7px; font-size:12px; font-weight:600; max-width:170px; cursor:pointer; }
.zl-status:disabled{ opacity:.55; }
.zl-st-emerald{ border-color:rgba(52,211,153,.5); color:#34d399; }
.zl-st-rose{ border-color:rgba(251,113,133,.5); color:#fb7185; }
.zl-st-amber{ border-color:rgba(251,191,36,.5); color:#fbbf24; }
.zl-st-blue{ border-color:rgba(96,165,250,.5); color:#60a5fa; }
.zl-st-violet{ border-color:rgba(167,139,250,.5); color:#a78bfa; }

/* Switch server-driven (p. ej. boletín) */
.zl-sw{ display:inline-block; margin-top:5px; padding:3px 10px; border-radius:999px; border:1px solid var(--zl-border);
  background:var(--zl-surface); color:var(--zl-t3); font-size:10.5px; font-weight:700; cursor:pointer; }
.zl-sw-on{ background:rgba(52,211,153,.14); border-color:rgba(52,211,153,.4); color:#34d399; }
.zl-sw-off{ background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.35); color:#fbbf24; }

/* Acciones por fila */
.zl-acts{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.zl-act{ display:inline-flex; align-items:center; justify-content:center; width:29px; height:29px;
  border:1px solid var(--zl-border); border-radius:8px; background:var(--zl-surface);
  color:var(--zl-t2); cursor:pointer; text-decoration:none; font-size:12px; }
.zl-act:hover{ border-color:var(--zl-p); color:var(--zl-t1); }
.zl-act-wa{ color:#34d399; }
.zl-act-del{ color:#fb7185; }
.zl-act-del:hover{ border-color:#fb7185; }
.zl-act-ok{ color:#34d399; border-color:rgba(52,211,153,.4); }
.zl-act:disabled{ opacity:.5; cursor:default; }

/* ── Tarjetas (móvil) ── */
.zl-cards{ display:none; }
.zl-card{ background:var(--zl-card); border:1px solid var(--zl-border); border-radius:13px;
  padding:12px 14px; margin-bottom:9px; cursor:pointer; }
.zl-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.zl-card .zl-sub{ margin-top:3px; }
.zl-card-foot{ display:flex; align-items:center; gap:7px; margin-top:9px; flex-wrap:wrap; }
@media (max-width: 899px){
  .zl-tablewrap{ display:none; }
  .zl-cards{ display:block; }
  .zl-kpibtn{ width:100%; }
}

/* ── Ficha lateral (drawer) ── */
.zl-drawerbg{ position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.45); display:flex; justify-content:flex-end; }
/* Fondo SÓLIDO: --card puede ser glass translúcido (p. ej. /admin) y el drawer
   flota sobre toda la página; --surface es sólido en todos los hosts. */
.zl-drawer{ height:100%; width:100%; max-width:430px; overflow-y:auto;
  background:var(--zl-drawer-bg, var(--zl-surface));
  border-left:1px solid var(--zl-border); box-shadow:-18px 0 50px rgba(0,0,0,.35);
  animation:zlSlideIn .18s ease; }
/* Algunos módulos pintan el drawer como HERMANO del bg (no anidado): sin esta
   regla queda position:static al fondo de la página. */
.zl-drawerbg + .zl-drawer{ position:fixed; top:0; right:0; bottom:0; height:auto; z-index:71; }
@keyframes zlSlideIn{ from{ transform:translateX(30px); opacity:.4; } to{ transform:none; opacity:1; } }
.zl-fhead{ position:sticky; top:0; z-index:2; display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; padding:15px 18px 12px; background:var(--zl-drawer-bg, var(--zl-surface)); border-bottom:1px solid var(--zl-border); }
.zl-fhead h3{ margin:0; font-size:1.02rem; font-weight:800; color:var(--zl-t1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zl-fhead-acts{ display:flex; gap:6px; flex-shrink:0; }
.zl-fbody{ padding:14px 18px 22px; }
.zl-facts{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:13px; }
.zl-frow{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:5px 0; font-size:13px; }
.zl-frow-l{ color:var(--zl-t3); }
.zl-frow-v{ color:var(--zl-t1); font-weight:600; text-align:right; overflow-wrap:anywhere; }
.zl-fq{ background:var(--zl-surface); border-radius:10px; padding:9px 12px; font-size:12.5px;
  font-style:italic; color:var(--zl-t2); margin:9px 0 0; }
.zl-fsec{ margin-top:15px; }
.zl-fsec h4{ margin:0 0 6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--zl-t3); }
.zl-fappt{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--zl-border); border-radius:10px; padding:9px 12px; font-size:13px; color:var(--zl-t2); }
.zl-fl{ display:block; margin-bottom:10px; font-size:11.5px; font-weight:600; color:var(--zl-t3); }
.zl-fl .zl-in, .zl-fl select, .zl-fl textarea{ margin-top:4px; }
.zl-f3{ display:grid; grid-template-columns:1.4fr 1fr .9fr; gap:8px; }
.zl-fbtns{ display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
@media (max-width: 540px){ .zl-drawer{ max-width:none; } }

/* ── Oportunidades (kanban zo-*) ── */
.zo-board{ display:flex; gap:10px; overflow-x:auto; padding-bottom:14px; }
.zo-col{ flex:0 0 264px; background:var(--zl-surface); border:1px solid var(--zl-border);
  border-radius:14px; padding:8px; }
.zo-col-head{ display:flex; align-items:center; justify-content:space-between;
  padding:4px 6px; font-size:13px; font-weight:700; color:var(--zl-t1); }
.zo-count{ background:var(--zl-card); border:1px solid var(--zl-border); border-radius:99px;
  padding:1px 8px; font-size:11px; font-weight:600; color:var(--zl-t3); }
.zo-col-val{ padding:0 6px 6px; font-size:11px; color:var(--zl-t3); }
.zo-cards{ display:flex; flex-direction:column; gap:8px; min-height:40px; }
.zo-empty{ padding:14px 6px; text-align:center; font-size:12px; color:var(--zl-t3); margin:0; }
.zo-card{ background:var(--zl-card); border:1px solid var(--zl-border); border-radius:11px;
  padding:10px 11px; }
.zo-card.zo-busy{ opacity:.55; pointer-events:none; }
.zo-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.zo-val{ flex-shrink:0; font-size:13px; font-weight:700; color:var(--zl-p); }
.zo-facts{ display:flex; flex-wrap:wrap; gap:4px 8px; margin-top:7px; font-size:10.5px;
  color:var(--zl-t3); align-items:center; }
.zo-facts .zk-ic{ width:11px; height:11px; vertical-align:-1px; }
.zo-stale{ color:var(--amber,#f59e0b); }
.zo-move{ margin-top:8px; font-size:11.5px; padding:5px 8px; width:100%; }
.zo-head-r{ display:flex; align-items:center; gap:8px; }
.zo-chev{ display:none; width:9px; height:9px; border-right:2px solid var(--zl-t3);
  border-bottom:2px solid var(--zl-t3); transform:rotate(45deg); transition:transform .2s; opacity:.7; }

/* En móvil el kanban horizontal aprieta las tarjetas y obliga a barrer de lado.
   Se apila en vertical: cada etapa ocupa todo el ancho y se colapsa/expande.
   Las etapas vacías se muestran cerradas por defecto (zo-collapsed en el JS). */
@media(max-width:700px){
  .zo-board{ flex-direction:column; gap:12px; overflow-x:visible; padding-bottom:8px; }
  .zo-col{ flex:1 1 auto; width:100%; padding:6px 8px 8px; }
  .zo-col-head{ cursor:pointer; padding:8px 4px; font-size:14.5px; }
  .zo-col-name{ letter-spacing:-.01em; }
  .zo-chev{ display:inline-block; }
  .zo-col.zo-collapsed .zo-chev{ transform:rotate(-45deg); }
  .zo-col.zo-collapsed .zo-cards,
  .zo-col.zo-collapsed .zo-col-val{ display:none; }
  .zo-card{ padding:12px 13px; }
  .zo-move{ margin-top:10px; font-size:13px; padding:9px 10px; }
}

/* ── Tareas (zt-*) ── */
.zt-add{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.zt-add .zl-in:first-child{ flex:1 1 260px; }
.zt-item{ display:flex; align-items:flex-start; gap:10px; background:var(--zl-card);
  border:1px solid var(--zl-border); border-radius:12px; padding:11px 12px; margin-bottom:8px; }
.zt-item.zt-done{ opacity:.55; }
.zt-item.zt-done .zt-title{ text-decoration:line-through; }
.zt-check{ padding-top:2px; cursor:pointer; }
.zt-check input{ width:16px; height:16px; accent-color:var(--zl-p); cursor:pointer; }
.zt-body{ flex:1; min-width:0; cursor:pointer; }
.zt-title{ font-weight:600; color:var(--zl-t1); font-size:13.5px; }
.zt-del{ padding:6px 9px; color:var(--red,#ef4444); border:none; background:none; }

/* ── Reportes (zr-*) ── */
.zr-card{ background:var(--zl-card); border:1px solid var(--zl-border); border-radius:14px;
  padding:14px 16px; margin-bottom:12px; }
.zr-card-t{ font-size:13px; font-weight:700; color:var(--zl-t1); margin-bottom:10px; }
.zr-chart{ display:flex; align-items:flex-end; gap:2px; height:120px; }
.zr-bar{ flex:1; display:flex; align-items:flex-end; height:100%; min-width:2px; }
.zr-bar-fill{ width:100%; background:var(--zl-p); border-radius:3px 3px 0 0; opacity:.85; }
.zr-bar:hover .zr-bar-fill{ opacity:1; }
.zr-chart-x{ display:flex; justify-content:space-between; margin-top:6px;
  font-size:10.5px; color:var(--zl-t3); }
.zr-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; }
.zr-grid .zr-card{ margin-bottom:0; }
.zr-brow{ display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.zr-brow-l{ flex:0 0 132px; font-size:12px; color:var(--zl-t2); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.zr-brow-bar{ flex:1; height:8px; background:var(--zl-surface); border-radius:99px; overflow:hidden; }
.zr-brow-fill{ height:100%; border-radius:99px; }
.zr-fill-violet{ background:var(--zl-p); }
.zr-fill-blue{ background:#3b82f6; }
.zr-fill-sky{ background:#0ea5e9; }
.zr-fill-amber{ background:var(--amber,#f59e0b); }
.zr-fill-emerald{ background:var(--emerald,#10b981); }
.zr-fill-rose{ background:var(--red,#ef4444); }
.zr-fill-slate{ background:var(--zl-t3); }
.zr-brow-v{ flex:0 0 auto; font-size:12px; font-weight:700; color:var(--zl-t1); min-width:26px; text-align:right; }

/* ── Leads: filtros, filtros inteligentes y acciones bloqueadas ── */
.zl-act-msg{ color:#34d399; }
.zl-act-off{ opacity:.38; cursor:not-allowed; position:relative; pointer-events:auto; }
.zl-act-off:hover{ border-color:var(--zl-border); color:inherit; }
.zl-locktag{ position:absolute; right:-4px; bottom:-4px; width:13px; height:13px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--zl-card); border:1px solid var(--zl-border); }
.zl-locktag .zk-ic{ width:8px; height:8px; }
.zl-btn.zl-act-off{ opacity:.45; }
.zl-btn.zl-act-off .zl-locktag{ position:static; margin-left:2px; width:15px; height:15px; }
.zl-btn-on{ border-color:var(--zl-p); color:var(--zl-p); }
.zl-fbadge{ display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px;
  padding:0 4px; border-radius:999px; background:var(--zl-p); color:#fff; font-size:10.5px; font-weight:700; }
.zl-sortsel{ width:auto; flex:0 0 auto; font-size:12.5px; }
.zl-smart{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:0 0 10px; color:var(--zl-t3); }
.zl-smart>.zk-ic{ width:14px; height:14px; flex:0 0 auto; }
.zl-chipbtn{ border:1px solid var(--zl-border); background:var(--zl-surface); color:var(--zl-t2);
  border-radius:999px; padding:4px 11px; font-size:12px; font-weight:600; cursor:pointer; }
.zl-chipbtn:hover{ border-color:var(--zl-p); color:var(--zl-t1); }
.zl-chipbtn.on{ background:var(--zl-p); border-color:var(--zl-p); color:#fff; }
.zl-chip-x{ color:var(--zl-t3); border-style:dashed; }
.zl-fgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;
  padding:12px; border:1px solid var(--zl-border); border-radius:12px; background:var(--zl-card); margin:0 0 12px; }
.zl-fcell{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--zl-t3); font-weight:600; }
.zl-count{ font-size:12px; color:var(--zl-t3); margin:0 0 8px; }
.zl-count.zl-count-f{ color:var(--zl-p); font-weight:600; }
/* Dropdown único de filtros (vistas rápidas + filtros + orden) */
.zl-fwrap{ position:relative; display:inline-block; }
.zl-fdrop{ position:absolute; z-index:70; top:calc(100% + 6px); left:0; width:300px;
  max-width:calc(100vw - 32px); background:var(--zl-card); border:1px solid var(--zl-border);
  border-radius:14px; padding:12px 13px; box-shadow:0 16px 42px rgba(0,0,0,.4); display:none; }
.zl-fdrop.open{ display:block; }
.zl-fdrop-h{ display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--zl-t3); margin:0 0 8px; }
.zl-fdrop-h .zk-ic{ width:13px; height:13px; }
.zl-fdrop-h:not(:first-child){ margin-top:14px; }
.zl-fdrop .zl-smart{ margin:0; }
.zl-fdrop .zl-fgrid{ grid-template-columns:1fr; padding:0; border:0; background:none; margin:0; gap:9px; }
.zl-fdrop-foot{ display:flex; justify-content:space-between; align-items:center; gap:8px;
  margin-top:14px; padding-top:11px; border-top:1px solid var(--zl-border); }

/* ══ US-001 (PRD panel UX): sistema único de estados + skeleton ══
   Regla de color del panel: violeta=acción/marca, verde=bien, ámbar=atención,
   rojo=problema, gris=inactivo. Siempre dot + texto (nunca solo color). */
.zk-badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
  border-radius:999px; font-size:11.5px; font-weight:700; line-height:1.4; }
.zk-badge::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.zk-badge--ok{ color:#22c55e; background:rgba(34,197,94,.13); }
.zk-badge--warn{ color:#f59e0b; background:rgba(245,158,11,.13); }
.zk-badge--err{ color:#ef4444; background:rgba(239,68,68,.13); }
.zk-badge--active{ color:#a78bfa; background:rgba(124,58,237,.16); }
.zk-badge--off{ color:#94a3b8; background:rgba(100,116,139,.14); }
.zk-badge--pulse::before{ animation:zkPulse 1.6s ease-in-out infinite; }
@keyframes zkPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.zk-skeleton{ position:relative; overflow:hidden; border-radius:10px;
  background:rgba(148,163,184,.09); min-height:14px; }
.zk-skeleton::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(148,163,184,.12), transparent);
  animation:zkShimmer 1.4s linear infinite; }
@keyframes zkShimmer{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce){ .zk-skeleton::after, .zk-badge--pulse::before{ animation:none; } }

/* ══ US-002: timeline vertical compartido (Pagos, Facturas, Documentos, Conexiones) ══
   Uso: <ol class="zk-timeline"><li class="zk-tl--done"><b>Link creado</b><span>hace 2 h</span></li>… */
.zk-timeline{ list-style:none; margin:0; padding:0 0 0 4px; }
.zk-timeline li{ position:relative; padding:0 0 16px 22px; font-size:13px; color:var(--zl-t2,#cbd5e1); }
.zk-timeline li::before{ content:''; position:absolute; left:0; top:3px; width:11px; height:11px;
  border-radius:50%; background:var(--zl-surface,#1e293b); border:2px solid rgba(148,163,184,.45); }
.zk-timeline li::after{ content:''; position:absolute; left:5px; top:17px; bottom:2px;
  width:1px; background:rgba(148,163,184,.22); }
.zk-timeline li:last-child{ padding-bottom:0; }
.zk-timeline li:last-child::after{ display:none; }
.zk-timeline li b{ display:block; font-weight:700; color:var(--zl-t1,#f1f5f9); }
.zk-timeline li span{ font-size:11.5px; color:var(--zl-t3,#94a3b8); }
.zk-timeline .zk-tl--done::before{ background:#22c55e; border-color:#22c55e; }
.zk-timeline .zk-tl--active::before{ background:#7c3aed; border-color:#7c3aed; box-shadow:0 0 0 4px rgba(124,58,237,.18); }
.zk-timeline .zk-tl--warn::before{ background:#f59e0b; border-color:#f59e0b; }
.zk-timeline .zk-tl--err::before{ background:#ef4444; border-color:#ef4444; }

/* ══ US-302 (PRD panel UX): prospecto enfriándose (rotting) ══ */
.zl-row.zl-rot-warm td:first-child{ box-shadow:inset 3px 0 0 #f59e0b; }
.zl-row.zl-rot-hot td:first-child{ box-shadow:inset 3px 0 0 #ef4444; }
.zl-card.zl-rot-warm{ border-left:3px solid #f59e0b; }
.zl-card.zl-rot-hot{ border-left:3px solid #ef4444; }
.zl-rotchip{ display:inline-flex; align-items:center; gap:4px; margin:4px 0 2px; padding:2px 8px;
  border-radius:999px; font-size:10.5px; font-weight:700; color:#fbbf24; background:rgba(245,158,11,.13); }
.zl-rotchip.hot{ color:#f87171; background:rgba(239,68,68,.13); }

/* ── US-303/305/308 (PRD panel UX): chips rápidos, score, nota rápida, kanban ── */
.zl-qchips{ display:flex; gap:6px; overflow-x:auto; padding:2px 0 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.zl-qchips::-webkit-scrollbar{ display:none; }
.zl-qchip{ flex:0 0 auto; border:1px solid var(--zl-border); background:var(--zl-card); color:var(--zl-t2);
  border-radius:99px; padding:7px 14px; font-size:12px; font-weight:600; cursor:pointer; min-height:32px; }
.zl-qchip:hover{ border-color:var(--zl-p); color:var(--zl-t1); }
.zl-qchip.on{ background:var(--zl-p); border-color:var(--zl-p); color:#fff; }
.zl-btn-on{ border-color:var(--zl-p); color:var(--zl-t1); }
.zl-score{ display:inline-flex; align-items:center; margin-left:7px; padding:1px 7px; border-radius:99px;
  font-size:10px; font-weight:700; vertical-align:1px; white-space:nowrap; }
.zl-score-hot{ color:#f87171; background:rgba(239,68,68,.14); }
.zl-score-warm{ color:var(--amber,#f59e0b); background:rgba(245,158,11,.13); }
.zl-score-cold{ color:var(--zl-t3); background:var(--zl-surface); border:1px solid var(--zl-border); }
.zl-qnote{ position:absolute; z-index:1200; width:280px; background:var(--zl-card); border:1px solid var(--zl-border);
  border-radius:12px; padding:12px; box-shadow:0 14px 44px rgba(0,0,0,.45); }
.zl-qnote-t{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--zl-t3); margin-bottom:6px; }
.zl-qnote textarea{ width:100%; resize:vertical; }
.zl-addform{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.zl-addform .zl-in{ flex:1 1 160px; }

/* Kanban: dot de actividad, rotting y action-sheet (US-308) */
.zo-dot{ display:inline-block; width:8px; height:8px; border-radius:99px; margin-right:6px; flex:none; vertical-align:1px; }
.zo-dot-ok{ background:var(--emerald,#10b981); }
.zo-dot-warm{ background:var(--amber,#f59e0b); }
.zo-dot-hot{ background:#ef4444; }
.zo-card.zo-rot-warm{ border-color:rgba(245,158,11,.45); }
.zo-card.zo-rot-hot{ border-color:rgba(239,68,68,.55); }
.zo-movebtn{ text-align:left; cursor:pointer; color:var(--zl-t2); }
.zo-movebtn:hover{ border-color:var(--zl-p); color:var(--zl-t1); }
.zo-vtoggle{ display:inline-flex; gap:4px; }
.zo-vtoggle .zl-btn{ padding:7px 11px; font-size:14px; line-height:1; }
.zo-sheetbg{ position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.55); display:flex;
  align-items:flex-end; justify-content:center; }
.zo-sheet{ width:100%; max-width:440px; background:var(--zl-card); border:1px solid var(--zl-border);
  border-radius:16px 16px 0 0; padding:14px 14px 18px; max-height:70vh; overflow-y:auto; }
.zo-sheet-t{ font-size:13px; color:var(--zl-t2); padding:2px 4px 10px; }
.zo-sheet-opt{ display:block; width:100%; min-height:44px; text-align:left; background:var(--zl-surface);
  border:1px solid var(--zl-border); border-radius:11px; color:var(--zl-t1); font-size:14px;
  padding:11px 14px; margin-bottom:7px; cursor:pointer; }
.zo-sheet-opt:hover:not([disabled]){ border-color:var(--zl-p); }
.zo-sheet-opt.cur{ opacity:.55; cursor:default; }
.zo-sheet-cancel{ text-align:center; color:var(--zl-t3); margin-top:3px; }
@media(min-width:700px){
  .zo-sheetbg{ align-items:center; }
  .zo-sheet{ border-radius:16px; }
}

/* Kanban: vista lista (toggle ▦/☰) */
.zo-list{ display:flex; flex-direction:column; gap:7px; }
.zo-lrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:var(--zl-card); border:1px solid var(--zl-border); border-radius:11px; padding:10px 13px; }
.zo-lrow.zo-rot-warm{ border-color:rgba(245,158,11,.45); }
.zo-lrow.zo-rot-hot{ border-color:rgba(239,68,68,.55); }
.zo-lmain{ display:flex; align-items:center; gap:4px; min-width:0; flex:1 1 200px; overflow:hidden; }
.zo-lmain .zl-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zo-lright{ display:flex; align-items:center; gap:10px; flex:none; }
.zo-lstage{ font-size:11px; font-weight:700; color:var(--zl-t2); background:var(--zl-surface);
  border:1px solid var(--zl-border); border-radius:99px; padding:3px 10px; white-space:nowrap; }
.zo-lright .zo-move{ width:auto; margin-top:0; }

/* ── US-306: Ficha 360 (zk-ficha360.js) ─────────────────────────────────────
   Drawer con header sticky + timeline unificado. Reusa .zl-drawerbg/.zl-drawer. */
.zf-bg{ z-index:1200; }
.zf-drawer{ max-width:470px; display:flex; flex-direction:column; padding:0; }
.zf-head{ position:sticky; top:0; z-index:2; background:var(--zl-drawer-bg, var(--zl-surface));
  border-bottom:1px solid var(--zl-border); padding:14px 18px 12px; }
.zf-head-r1{ display:flex; align-items:center; gap:11px; }
.zf-head-r1 h3{ margin:0; font-size:16.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zf-hmain{ min-width:0; flex:1; }
.zf-ava{ flex:none; width:40px; height:40px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-weight:800; font-size:14.5px;
  background:hsla(262,70%,60%,.2); color:hsl(262,80%,74%); border:1px solid hsla(262,70%,60%,.35); }
.zf-opp{ margin-top:9px; font-size:12.5px; color:var(--zl-t2); background:hsla(145,60%,45%,.1);
  border:1px solid hsla(145,60%,45%,.25); border-radius:9px; padding:6px 10px; }
.zf-opp b{ color:#34d399; }
.zf-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:9px; }
.zf-tag{ display:inline-flex; align-items:center; gap:2px; }
.zf-tagdel{ background:none; border:0; color:var(--zl-t3); font-size:10px; cursor:pointer; padding:1px 2px; }
.zf-tagdel:hover{ color:#fb7185; }
.zf-tagadd{ background:none; border:1px dashed var(--zl-border); color:var(--zl-t3);
  border-radius:999px; font-size:11.5px; padding:2px 9px; cursor:pointer; }
.zf-tagadd:hover{ color:var(--zl-t1); border-color:var(--zl-t3); }
.zf-tagform{ margin-top:8px; border:1px solid var(--zl-border); border-radius:10px; padding:9px; }
.zf-dots{ display:flex; gap:7px; margin:8px 0; }
.zf-dot{ width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; }
.zf-dot.on{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.zf-fu-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:9px; min-height:26px; }
.zf-fubtn{ font-size:11.5px; padding:3px 10px; min-height:26px; }
.zf-fu{ font-size:12.5px; color:#fbbf24; }
.zf-fu-over{ color:#fb7185; font-weight:700; }
.zf-body{ padding:13px 18px 22px; overflow-y:auto; }
.zf-sec-t{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--zl-t3);
  margin:14px 0 8px; }
.zf-sec-t:first-child{ margin-top:0; }
.zf-ev{ display:flex; gap:10px; padding:7px 0; border-bottom:1px dashed var(--zl-border); }
.zf-ev:last-child{ border-bottom:0; }
.zf-ev-ic{ flex:none; width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font-size:13px; background:var(--zl-card); border:1px solid var(--zl-border); }
.zf-ev-b{ min-width:0; flex:1; }
.zf-ev-t{ display:flex; align-items:baseline; gap:7px; font-size:12.5px; }
.zf-ev-t b{ color:var(--zl-t1); }
.zf-ev-x{ font-size:12.5px; color:var(--zl-t2); margin-top:2px; white-space:pre-wrap; word-break:break-word; }
.zf-ev-pin{ background:hsla(45,80%,55%,.07); border:1px solid hsla(45,80%,55%,.22);
  border-radius:10px; padding:8px 10px; margin-bottom:6px; }
.zf-pinbtn{ margin-left:auto; background:none; border:0; cursor:pointer; font-size:12px; opacity:.4; }
.zf-pinbtn.on, .zf-pinbtn:hover{ opacity:1; }
.zf-composer textarea{ width:100%; }
.zf-composer-f{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.zf-pinlbl{ font-size:12px; color:var(--zl-t3); display:inline-flex; align-items:center; gap:5px; }

/* ── US-309: drag táctil del kanban + cierre con motivo ───────────────────── */
.zo-card{ touch-action:manipulation; }
.zo-card.zo-lift{ opacity:.35; }
.zo-ghost{ position:fixed; z-index:1400; pointer-events:none; transform:translate(-50%,-55%) rotate(2.5deg);
  box-shadow:0 18px 50px rgba(0,0,0,.55); opacity:.95; }
.zo-col.zo-over{ outline:2px dashed hsla(262,70%,60%,.6); outline-offset:-2px; border-radius:12px;
  background:hsla(262,70%,60%,.06); }
.zo-dropbar{ position:fixed; left:0; right:0; bottom:0; z-index:1390; display:flex; gap:10px;
  padding:12px 14px calc(14px + env(safe-area-inset-bottom)); justify-content:center;
  background:linear-gradient(to top, rgba(3,7,18,.92), rgba(3,7,18,0)); }
.zo-drop{ flex:1; max-width:220px; min-height:58px; display:flex; align-items:center; justify-content:center;
  gap:7px; font-weight:800; font-size:14px; border-radius:14px; border:2px dashed; }
.zo-drop-won{ color:#34d399; border-color:rgba(52,211,153,.55); background:rgba(52,211,153,.08); }
.zo-drop-lost{ color:#fb7185; border-color:rgba(251,113,133,.55); background:rgba(251,113,133,.08); }
.zo-drop.zo-over{ outline:none; transform:scale(1.04); border-style:solid;
  box-shadow:0 0 0 4px rgba(255,255,255,.08); }
/* Micro-celebración al ganar (CSS puro, respeta reduced-motion) */
.zo-party{ position:fixed; inset:0; z-index:1450; pointer-events:none; overflow:hidden; }
.zo-party span{ position:absolute; top:38%; left:50%; width:9px; height:14px; border-radius:2px;
  animation:zo-conf .95s ease-out forwards; }
@keyframes zo-conf{
  0%{ transform:translate(0,0) rotate(0); opacity:1; }
  100%{ transform:translate(var(--dx,0), var(--dy,220px)) rotate(var(--rot,340deg)); opacity:0; }
}
.zo-won-toast{ position:fixed; left:50%; top:42%; transform:translate(-50%,-50%); z-index:1451;
  background:rgba(3,7,18,.92); border:1px solid rgba(52,211,153,.5); color:#34d399;
  font-weight:800; font-size:17px; border-radius:16px; padding:14px 26px; pointer-events:none;
  animation:zo-wonpop .9s ease-out forwards; }
@keyframes zo-wonpop{
  0%{ transform:translate(-50%,-50%) scale(.6); opacity:0; }
  25%{ transform:translate(-50%,-50%) scale(1.05); opacity:1; }
  75%{ opacity:1; } 100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .zo-party{ display:none; }
  .zo-won-toast{ animation:none; opacity:1; }
  .zo-drop.zo-over{ transform:none; }
}

/* ── Tanda 7 (F2 Reportes): deltas, Vega, dona y meta mensual ─────────────── */
.zr-delta{ display:inline-block; margin-left:7px; font-size:11px; font-weight:800;
  padding:1px 7px; border-radius:999px; vertical-align:2px; }
.zr-delta.up{ color:#34d399; background:rgba(52,211,153,.12); }
.zr-delta.down{ color:#fb7185; background:rgba(251,113,133,.12); }
.zr-vega{ display:flex; gap:13px; align-items:flex-start; }
.zr-vega-ava{ flex:none; width:46px; height:46px; border-radius:50%; object-fit:cover;
  border:2px solid hsla(262,70%,60%,.45); background:hsla(262,70%,60%,.15); }
.zr-vega-txt{ font-size:13.5px; line-height:1.55; color:var(--zl-t2); }
.zr-more{ margin-top:6px; font-size:12px; }
.zr-donutwrap{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.zr-donut{ flex:none; width:118px; height:118px; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center; }
.zr-donut::before{ content:''; position:absolute; inset:20px; border-radius:50%;
  background:var(--zl-card, var(--zl-surface)); }
.zr-donut-c{ position:relative; font-weight:800; font-size:19px; color:var(--zl-t1); }
.zr-legend{ min-width:0; flex:1; display:flex; flex-direction:column; gap:6px; }
.zr-leg{ display:flex; align-items:center; gap:8px; font-size:12.5px; }
.zr-leg-dot{ flex:none; width:10px; height:10px; border-radius:50%; }
.zr-leg-l{ color:var(--zl-t2); min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; flex:1; }
.zr-leg-v{ color:var(--zl-t3); font-size:12px; white-space:nowrap; }
.zr-goal-form{ display:flex; gap:8px; align-items:flex-end; }
.zr-goal-nums{ font-size:13.5px; color:var(--zl-t2); margin-bottom:8px; }
.zr-goal-nums b{ color:#34d399; font-size:15px; }
.zr-goal-bar{ position:relative; height:14px; border-radius:999px; background:var(--zl-surface);
  border:1px solid var(--zl-border); overflow:visible; }
.zr-goal-fill{ height:100%; border-radius:999px;
  background:linear-gradient(90deg,#7c3aed,#34d399); transition:width .5s ease; }
.zr-goal-pace{ position:absolute; top:-4px; bottom:-4px; width:2px; background:#fbbf24;
  border-radius:2px; }
.zr-goal-pace::after{ content:'hoy'; position:absolute; top:-15px; left:50%;
  transform:translateX(-50%); font-size:9.5px; color:#fbbf24; font-weight:700; }
.zr-goal-sub{ margin-top:9px; font-size:12.5px; color:var(--zl-t3); }
.zr-goalcard{ overflow:visible; }

/* ── Tanda 8 (F2 restante): en vivo, cubetas, funnel, semanal ─────────────── */
.za-live{ display:inline-flex; align-items:center; gap:6px; margin-left:12px;
  font-size:12px; color:var(--zl-t3); }
.za-live b{ color:#34d399; }
.za-live-dot{ width:8px; height:8px; border-radius:50%; background:var(--zl-t3); }
.za-live.on .za-live-dot{ background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.2);
  animation:za-pulse 1.6s ease-in-out infinite; }
@keyframes za-pulse{ 50%{ box-shadow:0 0 0 6px rgba(52,211,153,.05); } }
@media (prefers-reduced-motion: reduce){ .za-live.on .za-live-dot{ animation:none; } }
.za-kpi-on{ outline:2px solid hsla(262,70%,60%,.55); outline-offset:-2px; }
.za-src-ic{ display:inline-block; width:20px; text-align:center; }
.za-fun{ display:flex; align-items:center; gap:10px; padding:6px 0; }
.za-fun-l{ flex:0 0 46%; min-width:0; font-size:12.5px; color:var(--zl-t2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.za-fun-bar{ flex:1; height:16px; background:var(--zl-surface);
  border:1px solid var(--zl-border); border-radius:7px; overflow:hidden; }
.zr-weekly-on{ font-size:13px; color:var(--zl-t2); }