/* ════════════════════════════════════════════════════════════════════════════
   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);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)}

.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);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)}

/* ── 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)}

/* ── Table ─────────────────────────────────────────────────────────────────── */
.dt-scroll{overflow-x:auto;overflow-y:hidden}
.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)}
.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);background:var(--accent-lo)}

/* ── Responsive: stacked cards on mobile ───────────────────────────────────── */
@media(max-width:720px){
  .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}
  .dt-table tbody td::before{content:attr(data-label);font-size:10px;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}
}