/* ════════════════════════════════════════════════════════════════════════════
   DataTable — componente de tabla unificado (Executive Dark + Glass)
   Búsqueda multi-columna · filtros · orden · paginación variable · selección.
   Usa los design tokens globales (--surface, --border, --accent, etc.).
   ════════════════════════════════════════════════════════════════════════════ */

.dt{
  --dt-radius:14px;
  --dt-row-h:52px;
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--dt-radius);
  box-shadow:var(--shadow-md);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* ── Toolbar (glass) ───────────────────────────────────────────────────────── */
.dt-toolbar{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.85rem 1rem;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 80%,transparent),transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px);
  /* El backdrop-filter crea un stacking context que atrapaba los popovers
     (column toggle / paginación) DEBAJO de las filas de la tabla. Lo elevamos. */
  position:relative;
  z-index:30;
}
.dt-search{position:relative;flex:1;min-width:200px;max-width:380px}
.dt-search svg,.dt-search i{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted);pointer-events:none}
.dt-search input{
  width:100%;padding:.55rem .8rem .55rem 2.1rem;font-size:.85rem;
  background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;
  color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s,background .2s;
}
.dt-search input::placeholder{color:var(--muted2)}
.dt-search input:focus{border-color:var(--accent);background:var(--surface3);box-shadow:0 0 0 3px var(--accent-lo)}
.dt-search-clear{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;padding:.2rem;border-radius:6px;display:none}
.dt-search-clear.show{display:inline-flex}
.dt-search-clear:hover{color:var(--text);background:var(--surface3)}

.dt-filters{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.dt-select,.dt-filter{
  position:relative;padding:.5rem 2rem .5rem .8rem;font-size:.82rem;font-weight:500;
  background-color:var(--surface2);border:1.5px solid var(--border);border-radius:10px;
  color:var(--text2);cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238080a0' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right .65rem center;
  transition:border-color .2s,color .2s,background-color .2s;
}
.dt-select:hover,.dt-filter:hover{border-color:var(--border2);color:var(--text)}
.dt-select.active,.dt-filter.active{border-color:var(--accent);color:var(--accent-ink,var(--accent));background-color:var(--accent-lo)}
.dt-select:focus,.dt-filter:focus{box-shadow:0 0 0 3px var(--accent-lo)}
.dt-filter option,.dt-select option{background:var(--surface);color:var(--text)}

/* Lookup buscable: sustituye al <select> cuando la lista es larga (ver COMBO_MIN). */
.dt-combo{position:relative;display:inline-flex;align-items:center;gap:.35rem;min-width:190px;max-width:260px;
  padding:0 .5rem;border:1px solid var(--border);border-radius:9px;background:var(--surface);
  color:var(--muted);transition:border-color .15s,color .15s,background-color .15s}
.dt-combo:hover{border-color:var(--border2);color:var(--text)}
.dt-combo:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-lo)}
.dt-combo.active{border-color:var(--accent);background-color:var(--accent-lo)}
.dt-combo .dt-i{flex:none;display:inline-flex;opacity:.65}
.dt-combo-in{flex:1 1 auto;min-width:0;border:none;outline:none;background:none;color:var(--text);
  font:inherit;font-size:.82rem;padding:.42rem 0}
.dt-combo-in::placeholder{color:var(--muted)}
.dt-combo.active .dt-combo-in{color:var(--accent-ink,var(--accent));font-weight:600}
.dt-combo-clr{flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  padding:0;border:none;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.dt-combo-clr:hover{background:var(--border);color:var(--text)}
.dt-combo-clr[hidden]{display:none}

.dt-combo-list{position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;max-height:19rem;overflow:auto;
  padding:.28rem;border:1px solid var(--border);border-radius:11px;background:var(--surface);
  box-shadow:0 14px 34px rgba(0,0,0,.22);scrollbar-width:thin}
.dt-combo-list[hidden]{display:none}
.dt-combo-op{display:flex;align-items:center;gap:.5rem;width:100%;padding:.42rem .55rem;border:none;border-radius:7px;
  background:none;color:var(--text2);font:inherit;font-size:.82rem;text-align:left;cursor:pointer}
.dt-combo-op:hover,.dt-combo-op.on{background:var(--accent-lo);color:var(--text)}
.dt-combo-op.sel{color:var(--accent-ink,var(--accent));font-weight:700}
.dt-combo-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* El conteo dice de una vez si esa persona tiene 265 filas o 1. */
.dt-combo-n{flex:none;font-size:.72rem;font-variant-numeric:tabular-nums;color:var(--muted);
  padding:.05rem .4rem;border-radius:999px;background:var(--surface2)}
.dt-combo-op.on .dt-combo-n,.dt-combo-op:hover .dt-combo-n{background:var(--surface)}
.dt-combo-empty{padding:.7rem .6rem;font-size:.8rem;color:var(--muted);text-align:center}
@media(max-width:560px){.dt-combo{min-width:0;flex:1 1 100%;max-width:none}}

.dt-tool-spacer{flex:1}
.dt-tool-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  height:36px;min-width:36px;padding:0 .6rem;font-size:.78rem;font-weight:600;
  background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;
  color:var(--text2);cursor:pointer;transition:all .18s;white-space:nowrap;
}
.dt-tool-btn:hover{border-color:var(--border2);color:var(--text);background:var(--surface3)}
.dt-tool-btn.active{border-color:var(--accent);color:var(--accent-ink,var(--accent));background:var(--accent-lo)}
.dt-tool-btn svg,.dt-tool-btn i{width:15px;height:15px}

/* tiny popover (column toggle / pagination mode) */
.dt-pop{position:relative}
.dt-pop-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:100;min-width:180px;
  background:var(--surface);border:1px solid var(--border2);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:.4rem;display:none;
  animation:dt-pop-in .16s cubic-bezier(.2,.8,.2,1);
}
.dt-pop-menu.open{display:block}
@keyframes dt-pop-in{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.dt-pop-item{
  display:flex;align-items:center;gap:.55rem;padding:.5rem .65rem;border-radius:8px;
  font-size:.82rem;color:var(--text2);cursor:pointer;user-select:none;
}
.dt-pop-item:hover{background:var(--surface2);color:var(--text)}
.dt-pop-item input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.dt-pop-item.sel{color:var(--accent-ink,var(--accent))}

/* ── Selection bar ─────────────────────────────────────────────────────────── */
.dt-selbar{
  display:none;align-items:center;gap:.75rem;padding:.6rem 1rem;
  background:var(--accent-lo);border-bottom:1px solid var(--accent-mid);
  animation:dt-slide-down .2s ease;
}
.dt-selbar.show{display:flex}
@keyframes dt-slide-down{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.dt-selbar-count{font-size:.82rem;font-weight:700;color:var(--accent-ink,var(--accent))}

/* ── Table ─────────────────────────────────────────────────────────────────── */
.dt-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
/* Una tabla ancha y larga dejaba su barra horizontal al pie de la última fila: había que bajar hasta el final para
   moverla (Financials, Registros). Con alto tope la tabla corre por dentro, la barra queda a la vista y el encabezado
   (sticky) se queda arriba. En teléfono la tabla es de tarjetas y sigue al alto de la página. */
@media(min-width:721px){.dt-scroll{overflow-y:auto;max-height:max(20rem,calc(100dvh - 12rem))}}
.dt-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.85rem}
.dt-table thead th{
  position:sticky;top:0;z-index:5;
  background:var(--surface2);
  text-align:left;padding:.7rem 1rem;
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--border);white-space:nowrap;user-select:none;
}
.dt-table thead th.sortable{cursor:pointer;transition:color .15s}
.dt-table thead th.sortable:hover{color:var(--text)}
.dt-th-inner{display:inline-flex;align-items:center;gap:.35rem}
.dt-sort-ico{display:inline-flex;flex-direction:column;line-height:0;opacity:.35;transition:opacity .15s}
.dt-table th.sorted .dt-sort-ico{opacity:1;color:var(--accent-ink,var(--accent))}
.dt-sort-ico svg{width:11px;height:11px;display:block}

.dt-table tbody td{
  padding:.7rem 1rem;border-bottom:1px solid var(--border);color:var(--text2);
  vertical-align:middle;
}
.dt-table tbody tr{transition:background .14s;animation:dt-row-in .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes dt-row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dt-table tbody tr:hover{background:var(--surface2)}
.dt-table tbody tr.sel{background:var(--accent-lo)}
.dt-table tbody tr:last-child td{border-bottom:none}
.dt-table tbody tr td:first-child{position:relative}
.dt-table tbody tr:hover td:first-child::before,.dt-table tbody tr.sel td:first-child::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
}
.dt-chk{width:16px;height:16px;cursor:pointer;accent-color:var(--accent);vertical-align:middle}
.dt-num{font-variant-numeric:tabular-nums}

/* compact density */
.dt.compact .dt-table thead th{padding:.45rem 1rem}
.dt.compact .dt-table tbody td{padding:.4rem 1rem}
.dt.compact{--dt-row-h:38px}

/* ── Empty / loading ───────────────────────────────────────────────────────── */
.dt-empty{padding:3.5rem 1rem;text-align:center;color:var(--muted);font-size:.88rem}
.dt-empty-ico{width:46px;height:46px;margin:0 auto .8rem;color:var(--muted2);opacity:.6}
.dt-empty-ico svg{width:46px;height:46px}
.dt-skel-row td{padding:.7rem 1rem}
.dt-skel{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 37%,var(--surface2) 63%);background-size:400% 100%;animation:dt-shimmer 1.3s ease infinite}
@keyframes dt-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ── Footer / pagination ───────────────────────────────────────────────────── */
.dt-footer{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.7rem 1rem;border-top:1px solid var(--border);
  background:linear-gradient(0deg,color-mix(in srgb,var(--surface2) 70%,transparent),transparent);
}
.dt-foot-info{font-size:.8rem;color:var(--muted);white-space:nowrap}
.dt-foot-info b{color:var(--text);font-variant-numeric:tabular-nums}
.dt-foot-spacer{flex:1}
.dt-pagesize{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted)}
.dt-pages{display:flex;align-items:center;gap:.25rem}
.dt-pg{
  min-width:32px;height:32px;padding:0 .55rem;border-radius:9px;
  border:1.5px solid var(--border);background:var(--surface2);color:var(--text2);
  font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;
}
.dt-pg:hover:not(:disabled){border-color:var(--border2);color:var(--text);background:var(--surface3)}
.dt-pg.active{background:var(--accent);border-color:var(--accent);color:#03110a;box-shadow:0 2px 10px var(--accent-mid)}
.dt-pg:disabled{opacity:.4;cursor:not-allowed}
.dt-pg.ellipsis{border:none;background:none;cursor:default;color:var(--muted2)}
.dt-loadmore{
  margin:0 auto;display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.4rem;
  border-radius:11px;border:1.5px solid var(--border2);background:var(--surface2);
  color:var(--text);font-size:.84rem;font-weight:600;cursor:pointer;transition:all .18s;
}
.dt-loadmore:hover{border-color:var(--accent);color:var(--accent-ink,var(--accent));background:var(--accent-lo)}

/* ── Menú de columna (orden + operadores; oculto hasta el clic en el th) ───── */
.dt-colmenu{
  position:absolute;z-index:70;min-width:236px;max-width:280px;
  background:var(--surface);border:1px solid var(--border2);border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.30);padding:.55rem;
  display:flex;flex-direction:column;gap:.4rem;
  text-transform:none;letter-spacing:0;cursor:default;
}
.dt-cm-title{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:.1rem .2rem}
.dt-cm-btn{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:600;
  padding:.42rem .55rem;border-radius:8px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);cursor:pointer;text-align:left;
  transition:border-color .15s,color .15s,background .15s;
}
.dt-cm-btn svg{width:12px;height:12px}
.dt-cm-btn:hover{border-color:var(--accent);color:var(--accent-ink,var(--accent))}
.dt-cm-btn.on{border-color:var(--accent);color:var(--accent-ink,var(--accent));background:var(--accent-lo)}
.dt-cm-btn.pri{background:var(--accent);border-color:var(--accent);color:#03110a;justify-content:center}
.dt-cm-btn.pri:hover{color:#03110a;filter:brightness(1.06)}
.dt-cm-sep{height:1px;background:var(--border);margin:.15rem 0}
.dt-cm-op,.dt-cm-val{
  font:inherit;font-size:.82rem;padding:.42rem .55rem;border-radius:8px;
  border:1px solid var(--border);background:var(--surface2);color:var(--text);outline:none;
}
.dt-cm-op:focus,.dt-cm-val:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-lo)}
.dt-cm-val:disabled{opacity:.45}
.dt-cm-row{display:flex;gap:.4rem}
.dt-cm-row .dt-cm-btn{flex:1;justify-content:center}
.dt-filt-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:.35rem;vertical-align:middle;box-shadow:0 0 6px var(--accent)}

/* ── Controles del pie: filas por página + salto a página ──────────────────── */
.dt-foot-ctl{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--muted);white-space:nowrap}
.dt-foot-size{padding:.32rem 1.6rem .32rem .55rem;font-size:.78rem}
.dt-pagegoto{
  width:60px;font:inherit;font-size:.8rem;padding:.32rem .45rem;border-radius:8px;
  border:1.5px solid var(--border);background:var(--surface2);color:var(--text);
  outline:none;font-variant-numeric:tabular-nums;text-align:center;
}
.dt-pagegoto:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-lo)}
@media(max-width:720px){.dt-foot-ctl{flex-wrap:wrap}}

/* ── Responsive: stacked cards on mobile ───────────────────────────────────── */
@media(max-width:720px){
  /* En tarjeta la tabla mide lo que la pantalla: un correo o un nombre de deal largo se
     parte en líneas en vez de ensanchar la tarjeta y cortar la columna de valores. */
  .dt-table,.dt-table tbody{display:block;width:100%}
  .dt-table thead{display:none}
  .dt-table tbody tr{display:block;padding:.5rem .25rem;border-bottom:1px solid var(--border)}
  .dt-table tbody td{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.4rem 1rem;border:none;text-align:right;min-width:0;white-space:normal!important;overflow-wrap:anywhere}
  .dt-table tbody td > *{min-width:0;max-width:100%}
  /* Chips y badges (Rápido, Draft, Active…) nunca se parten a media palabra. */
  .dt-table tbody td [class*="chip"],.dt-table tbody td [class*="badge"],.dt-table tbody td [class*="pill"]{white-space:nowrap;overflow-wrap:normal;flex-shrink:0}
  .dt-table tbody td::before{content:attr(data-label);flex:0 0 auto;max-width:42%;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left}
  .dt-table tbody tr:hover td:first-child::before,.dt-table tbody tr.sel td:first-child::before{display:none}
  .dt-search{max-width:none}
}