/* ============================================================================
   EventSystem.DataGrid — hoja de estilos del grid reutilizable.

   AUTOCONTENIDA y PORTABLE: no depende del tokens.css de ningun proyecto. Todas
   las reglas usan variables CSS con un fallback por defecto (tema claro), de modo
   que el grid se ve bien "de fabrica" y ademas respeta el tema del host si este
   define los tokens.

   VARIABLES CSS que el host puede definir para tematizar (opcional). Entre
   parentesis, el valor por defecto que usa la lib si el host no las define:
     --surface (#FFFFFF)         superficie alta (popover)
     --bg-elev (#FFFFFF)         fondo elevado (tabla, inputs)
     --bg-sunken (#F1F5F9)       fondo hundido (cabeceras, hovers)
     --border (#E2E8F0)          borde estandar
     --border-strong (#CBD5E1)   borde marcado
     --text (#0F172A)            texto principal
     --text-muted (#64748B)      texto secundario
     --text-subtle (#94A3B8)     texto terciario
     --brand-50/100/500/700      color de marca (#F3F6FC / #E8EDFA / #2E5AC6 / #1E3A8A)
     --ok-100/600, --warn-100/600, --bad-100/600, --alert-500/600   estados
     --font-mono                 fuente monoespaciada
     --r-md (10px), --r-lg (12px), --shadow-lg   radios y sombra

   El grid tambien respeta [data-theme="dark"] en un ancestro para sus matices de
   tema oscuro (mismos que en el proyecto original).
   ============================================================================ */

/* Icono SVG inline de la lib (GridIcon). */
.dg-icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* ───────────── Badges ───────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  line-height: 1.4;
  letter-spacing: .005em;
}
.badge .b-dot {
  width: 6px; height: 6px; border-radius: 999px; background: currentColor;
}
.badge.ok { background: var(--ok-100, #DCFCE7); color: var(--ok-600, #16A34A); }
.badge.warn { background: var(--warn-100, #FEF3C7); color: var(--warn-600, #CA8A04); }
.badge.bad { background: var(--bad-100, #FEE2E2); color: var(--bad-600, #DC2626); }
.badge.neutral { background: var(--bg-sunken, #F1F5F9); color: var(--text-muted, #64748B); }
.badge.brand { background: var(--brand-100, #E8EDFA); color: var(--brand-700, #1E3A8A); }

/* ───────────── Contenedor de tabla ───────────── */
.table-wrap {
  background: var(--bg-elev, #FFFFFF);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: var(--r-lg, 12px);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.chip-filter {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--border, #E2E8F0);
  background: var(--bg-elev, #FFFFFF);
  border-radius: 999px;
  font-size: 12px; color: var(--text, #0F172A);
  cursor: pointer;
}
.chip-filter:hover { background: var(--bg-sunken, #F1F5F9); }
.chip-filter.active { border-color: var(--brand-500, #2E5AC6); background: var(--brand-50, #F3F6FC); color: var(--brand-700, #1E3A8A); }

/* ───────────── Tabla de datos ───────────── */
table.data {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
table.data thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted, #64748B);
  border-bottom: 1px solid var(--border, #E2E8F0);
  background: var(--bg-sunken, #F1F5F9);
  white-space: nowrap;
  position: relative; /* ancla para el .col-resize-handle del JS interop */
}
/* Tablas .resizable habilitan layout fijo para que el ancho manual del operador
   (style="width:Xpx") respete sus px sin que el contenido empuje la columna. */
table.data.resizable { table-layout: fixed; }
table.data.resizable thead th,
table.data.resizable tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
}
table.data tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border, #E2E8F0);
  vertical-align: middle;
}
table.data tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-sunken, #F1F5F9) 55%, transparent); }
[data-theme="dark"] table.data tbody tr:nth-child(even) td { background: rgba(255,255,255,0.015); }
table.data tbody tr:hover td { background: var(--bg-sunken, #F1F5F9); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; }
table.data .actions { text-align: right; white-space: nowrap; }
table.data .mini-avatar {
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--brand-100, #E8EDFA); color: var(--brand-700, #1E3A8A);
  display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 700;
  margin-right: 10px; vertical-align: middle;
}

table.data tr.row-disabled td {
  opacity: 0.55;
  font-style: italic;
}
table.data tr.row-disabled .mini-avatar {
  background: var(--bg-sunken, #F1F5F9);
  color: var(--text-muted, #64748B);
}

/* Variantes de color para mini-avatar (p.ej. fila usuarios). */
table.data .mini-avatar.avatar-c0 { background: color-mix(in srgb, var(--brand-700, #1E3A8A) 18%, transparent); color: var(--brand-700, #1E3A8A); }
table.data .mini-avatar.avatar-c1 { background: color-mix(in srgb, var(--ok-600, #16A34A) 18%, transparent);    color: var(--ok-600, #16A34A); }
table.data .mini-avatar.avatar-c2 { background: color-mix(in srgb, var(--warn-600, #CA8A04) 18%, transparent);  color: var(--warn-600, #CA8A04); }
table.data .mini-avatar.avatar-c3 { background: color-mix(in srgb, var(--alert-500, #F97316) 18%, transparent); color: var(--alert-600, #EA580C); }
table.data .mini-avatar.avatar-c4 { background: color-mix(in srgb, var(--brand-700, #1E3A8A) 14%, transparent); color: var(--brand-700, #1E3A8A); }
table.data .mini-avatar.avatar-c5 { background: var(--bg-sunken, #F1F5F9); color: var(--text-muted, #64748B); }

/* ───────── Cabeceras ordenables + filas clicables ───────── */
table.data thead th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 26px;
}
table.data thead th.sortable:hover { color: var(--text, #0F172A); background: color-mix(in srgb, var(--bg-sunken, #F1F5F9) 70%, var(--brand-100, #E8EDFA)); }
table.data thead th.sortable.actions { padding-right: 14px; }
table.data thead th .sort-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
  color: var(--text-muted, #64748B);
  opacity: 0;
  transition: opacity .12s, color .12s;
}
table.data thead th.sortable:hover .sort-arrow { opacity: 0.5; }
table.data thead th.sortable.sorted { color: var(--brand-700, #1E3A8A); }
table.data thead th.sortable.sorted .sort-arrow { opacity: 1; color: var(--brand-700, #1E3A8A); }

table.data tbody tr.clickable { cursor: pointer; }
table.data tbody tr.clickable:hover td { background: var(--brand-50, #F3F6FC); }
[data-theme="dark"] table.data tbody tr.clickable:hover td {
  background: color-mix(in srgb, var(--brand-700, #1E3A8A) 18%, transparent);
}
/* Acciones de fila: no deben heredar el cursor pointer del tr clickable. */
table.data tbody tr.clickable td.actions,
table.data tbody tr.clickable td button {
  cursor: pointer;
}

/* ───────── Redimensionado de columnas (handle del JS interop) ─────────
   Handle invisible al borde derecho de cada <th>. Marca en hover; cursor
   col-resize invita al drag. Durante el arrastre el body recibe .col-resizing
   y todos los cursores se ponen col-resize (evita el salto al salir del handle). */
.col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
  user-select: none;
  touch-action: none;
}
.col-resize-handle::after {
  content: "";
  position: absolute;
  top: 25%;
  bottom: 25%;
  right: 2px;
  width: 2px;
  background: transparent;
  border-radius: 1px;
  transition: background 0.12s ease;
}
.col-resize-handle:hover::after {
  background: var(--brand-500, #2E5AC6);
}
body.col-resizing,
body.col-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* ───────── Columna del checkbox de seleccion ───────── */
.data th.check-col,
.data td.check-col {
  width: 36px;
  padding: 0 4px;
  text-align: center;
  vertical-align: middle;
}
.data th.check-col input,
.data td.check-col input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
/* Punto indicador de seleccion parcial en la cabecera (el atributo HTML
   'indeterminate' solo se setea por JS y no nos vale para estilar). */
.data th.check-col.parcial { position: relative; }
.data th.check-col.parcial::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn-500, #f59e0b);
}

/* ───────── Estados vacio / skeleton ───────── */
.empty {
  padding: 40px 24px; text-align: center;
}
.empty .illus {
  width: 120px; height: 90px; margin: 0 auto 16px;
  background: var(--bg-sunken, #F1F5F9); border-radius: 14px;
  display: grid; place-items: center;
  font-size: 40px;
  color: var(--text-subtle, #94A3B8);
  border: 1px dashed var(--border-strong, #CBD5E1);
}
.empty h4 { margin: 0 0 6px; font-size: 15px; color: var(--text, #0F172A); }
.empty p { color: var(--text-muted, #64748B); font-size: 13px; max-width: 360px; margin: 0 auto 16px; }

@keyframes dg-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes dg-skeleton-fade-in { from { opacity: 0.35; } to { opacity: 1; } }
.skeleton {
  background: linear-gradient(90deg, var(--bg-sunken, #F1F5F9) 0%, var(--ink-150, #EBEEF3) 50%, var(--bg-sunken, #F1F5F9) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  opacity: 0.35;
  animation: dg-shimmer 1.4s linear infinite, dg-skeleton-fade-in 0.08s ease-out 0s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; opacity: 1; background: var(--bg-sunken, #F1F5F9); }
}

/* Utilidades tipograficas usadas en las celdas. */
.strong { font-weight: 600; }
.mono { font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace); }

/* ============================================================================
   Toolbar + popover "Vista" + fila de filtrado
   ============================================================================ */

.dl-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #E2E8F0);
  flex-wrap: wrap;
  min-width: min-content;
}

.dl-tb-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.dl-tb-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.dl-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 280px;
  max-width: 100%;
}
.dl-search .s-icon {
  position: absolute;
  left: 10px;
  color: var(--text-muted, #64748B);
  pointer-events: none;
}
.dl-search input {
  width: 100%;
  height: 34px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--border, #E2E8F0);
  background: var(--bg-sunken, #F1F5F9);
  color: var(--text, #0F172A);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
}
.dl-search input::placeholder { color: var(--text-muted, #64748B); }
.dl-search input:focus {
  border-color: var(--brand-500, #2E5AC6);
  background: var(--bg-elev, #FFFFFF);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500, #2E5AC6) 20%, transparent);
}

.dl-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dl-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dl-count {
  color: var(--text-muted, #64748B);
  font-size: 12.5px;
  white-space: nowrap;
}

.dl-vista-anchor {
  position: relative;
  display: inline-flex;
}

.dl-vista-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border, #E2E8F0);
  background: var(--bg-elev, #FFFFFF);
  color: var(--text, #0F172A);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.dl-vista-btn:hover { background: var(--bg-sunken, #F1F5F9); border-color: var(--border-strong, #CBD5E1); }
.dl-vista-btn.open {
  background: var(--brand-50, #F3F6FC);
  color: var(--brand-700, #1E3A8A);
  border-color: var(--brand-500, #2E5AC6);
}
[data-theme="dark"] .dl-vista-btn.open {
  background: color-mix(in srgb, var(--brand-700, #1E3A8A) 22%, transparent);
  color: #DDE7FF;
}

/* Scrim invisible que cubre el viewport para detectar click-outside. Queda
   DETRAS del popover (z-index menor) para no bloquearlo. */
.dl-vista-scrim {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 80;
}

.dl-vista-popover {
  /* position:fixed con coordenadas calculadas en JS (measureElement) para
     sobresalir de contenedores con overflow restringido (table-wrap). */
  position: fixed;
  z-index: 81;
  width: 340px;
  max-height: 70vh;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: var(--r-md, 10px);
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(16,22,45,0.10), 0 2px 6px rgba(16,22,45,0.06));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: dl-pop-in 120ms ease-out;
  font-size: 13px;
}

@keyframes dl-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dl-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #E2E8F0);
  background: var(--bg-sunken, #F1F5F9);
  flex: 0 0 auto;
}
.dl-pop-close {
  width: 26px; height: 26px;
  display: inline-grid; place-items: center;
  border: 0;
  background: transparent;
  color: var(--text-muted, #64748B);
  border-radius: 6px;
  cursor: pointer;
}
.dl-pop-close:hover { background: var(--bg-elev, #FFFFFF); color: var(--text, #0F172A); }

.dl-pop-section {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.dl-pop-section + .dl-pop-section { padding-top: 0; }
.dl-pop-section:last-child { padding-bottom: 12px; }

.dl-pop-section-title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #64748B);
  margin: 2px 0 4px;
}

.dl-pop-hint {
  font-size: 12.5px;
  color: var(--text-muted, #64748B);
  margin: 4px 0 0;
  line-height: 1.45;
}

.dl-pop-divider {
  height: 1px;
  background: var(--border, #E2E8F0);
  margin: 0 14px;
  flex: 0 0 auto;
}

/* ── Selector de columnas con drag&drop ───────────────────────────────── */
.dl-col-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border, #E2E8F0);
  background: var(--bg-elev, #FFFFFF);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 4px;
}

.dl-col-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: grab;
  user-select: none;
  transition: background 100ms ease;
}
.dl-col-row:hover { background: var(--bg-sunken, #F1F5F9); }
.dl-col-row.locked { cursor: default; opacity: 0.85; }
.dl-col-row.dragging { opacity: 0.4; cursor: grabbing; }
.dl-col-row.drop-target {
  background: color-mix(in srgb, var(--brand-500, #2E5AC6) 16%, transparent);
  outline: 1px dashed var(--brand-500, #2E5AC6);
}

.dl-drag-handle {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  color: var(--text-subtle, #94A3B8);
  letter-spacing: -2px;
  flex: 0 0 18px;
}
.dl-col-row.locked .dl-drag-handle { color: var(--border-strong, #CBD5E1); }

.dl-col-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  cursor: inherit;
}
.dl-col-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-700, #1E3A8A);
  cursor: pointer;
  flex: 0 0 16px;
}
.dl-col-toggle input[type="checkbox"]:disabled { cursor: not-allowed; }
.dl-col-toggle span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-locked-tag {
  font-size: 10.5px;
  color: var(--text-muted, #64748B);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-sunken, #F1F5F9);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 4px;
  padding: 1px 6px;
}

.dl-pop-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  cursor: pointer;
}
.dl-pop-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-700, #1E3A8A);
  cursor: pointer;
}

/* ── Vistas guardadas ─────────────────────────────────────────────────── */
.dl-views {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dl-view-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border, #E2E8F0);
  background: var(--bg-elev, #FFFFFF);
  border-radius: 8px;
  transition: background 100ms ease, border-color 100ms ease;
}
.dl-view-chip:hover { background: var(--bg-sunken, #F1F5F9); }
.dl-view-chip.confirming {
  border-color: var(--bad-600, #DC2626);
  background: color-mix(in srgb, var(--bad-600, #DC2626) 8%, var(--bg-elev, #FFFFFF));
}

.dl-view-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--text, #0F172A);
  font-size: 13px;
  cursor: pointer;
}
.dl-view-name:hover { background: var(--brand-50, #F3F6FC); color: var(--brand-700, #1E3A8A); }
.dl-view-name span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-view-action {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: var(--text-muted, #64748B);
  cursor: pointer;
}
.dl-view-action:hover { background: var(--bg-sunken, #F1F5F9); color: var(--text, #0F172A); }
.dl-view-action.primary {
  color: #fff;
  background: var(--brand-700, #1E3A8A);
}
.dl-view-action.primary:disabled { opacity: 0.45; cursor: not-allowed; }
.dl-view-action.primary:hover:not(:disabled) { background: var(--brand-500, #2E5AC6); }
.dl-view-action.danger {
  color: var(--bad-600, #DC2626);
  font-size: 12px;
  font-weight: 600;
  width: auto;
  padding: 0 8px;
}
.dl-view-action.danger:hover { background: color-mix(in srgb, var(--bad-600, #DC2626) 15%, transparent); }

.dl-view-confirm {
  flex: 1;
  font-size: 12.5px;
  color: var(--bad-600, #DC2626);
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-save-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.dl-save-input {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--brand-500, #2E5AC6);
  background: var(--bg-elev, #FFFFFF);
  color: var(--text, #0F172A);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
}
.dl-save-input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500, #2E5AC6) 20%, transparent);
}

.dl-pop-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px dashed var(--border-strong, #CBD5E1);
  background: transparent;
  border-radius: 8px;
  color: var(--brand-700, #1E3A8A);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 4px;
  transition: background 100ms ease, border-color 100ms ease;
}
.dl-pop-add:hover {
  background: var(--brand-50, #F3F6FC);
  border-color: var(--brand-500, #2E5AC6);
}
[data-theme="dark"] .dl-pop-add {
  color: #B7C8FF;
}
[data-theme="dark"] .dl-pop-add:hover {
  background: color-mix(in srgb, var(--brand-700, #1E3A8A) 18%, transparent);
}

.dl-pop-reset {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--text-muted, #64748B);
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
  flex: 0 0 auto;
}
.dl-pop-reset:hover { background: var(--bg-sunken, #F1F5F9); color: var(--text, #0F172A); }

/* ── Fila de filtrado ─────────────────────────────────────────────────── */
table.data tr.dl-filter-row td.dl-filter-cell {
  background: var(--bg-sunken, #F1F5F9);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border, #E2E8F0);
  vertical-align: middle;
}
table.data tr.dl-filter-row:hover td.dl-filter-cell {
  background: var(--bg-sunken, #F1F5F9); /* No oscurecer en hover. */
}
[data-theme="dark"] table.data tr.dl-filter-row td.dl-filter-cell {
  background: color-mix(in srgb, var(--bg-sunken, #F1F5F9) 80%, transparent);
}

.dl-filter-cell.first { padding-left: 14px; }

.dl-filter-input,
.dl-filter-select {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  background: var(--bg-elev, #FFFFFF);
  color: var(--text, #0F172A);
  border-radius: 6px;
  font-size: 12px;
  outline: none;
  transition: border-color 100ms ease, background 100ms ease;
}
.dl-filter-input::placeholder { color: var(--text-subtle, #94A3B8); }
.dl-filter-input:hover,
.dl-filter-select:hover { border-color: var(--border, #E2E8F0); }
.dl-filter-input:focus,
.dl-filter-select:focus {
  border-color: var(--brand-500, #2E5AC6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500, #2E5AC6) 18%, transparent);
}

.dl-filter-range {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dl-filter-mini {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  background: var(--bg-elev, #FFFFFF);
  color: var(--text, #0F172A);
  border-radius: 6px;
  font-size: 12px;
  outline: none;
  font-family: inherit;
}
.dl-filter-mini:hover { border-color: var(--border, #E2E8F0); }
.dl-filter-mini:focus {
  border-color: var(--brand-500, #2E5AC6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500, #2E5AC6) 18%, transparent);
}
.dl-filter-sep {
  color: var(--text-subtle, #94A3B8);
  font-size: 11px;
  flex: 0 0 auto;
}

.dl-filter-clear {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text-muted, #64748B);
  border-radius: 6px;
  cursor: pointer;
}
.dl-filter-clear:hover { background: var(--bg-elev, #FFFFFF); color: var(--bad-600, #DC2626); }

/* ── Densidad compacta ────────────────────────────────────────────────── */
table.data.compact thead th {
  padding: 6px 10px;
  font-size: 11px;
}
table.data.compact tbody td {
  padding: 7px 10px;
  font-size: 12.5px;
}
table.data.compact .mini-avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
  margin-right: 8px;
}

/* ── Mobile: toolbar/popover ──────────────────────────────────────────── */
@media (max-width: 760px) {
  .dl-toolbar { gap: 8px; padding: 10px 12px; }
  .dl-tb-left { width: 100%; }
  .dl-search { width: 100%; }
  .dl-tb-right { width: 100%; justify-content: flex-end; }
  .dl-vista-popover {
    /* En movil ignoramos las coords inline y anclamos tipo bottom-sheet. */
    width: calc(100vw - 24px);
    max-width: 360px;
    top: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    max-height: 80vh;
  }
}

/* ── Mobile: filas de table.data como cards ──────────────────────────────
   A partir de 600px las filas se apilan como cards (pure CSS, sin tocar el
   markup) — en pantallas estrechas el formato tabular rompe nombres/fechas. */
@media (max-width: 600px) {
  table.data {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }
  table.data thead { display: none; }
  table.data tbody { display: block; }

  table.data tbody tr {
    display: block;
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--border, #E2E8F0);
    position: relative;
    background: transparent !important;
  }
  table.data tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--bg-sunken, #F1F5F9) 35%, transparent) !important;
  }
  [data-theme="dark"] table.data tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.015) !important;
  }
  table.data tbody tr.selected {
    background: color-mix(in srgb, var(--brand-100, #E8EDFA) 55%, transparent) !important;
  }
  table.data tbody tr:last-child { border-bottom: 0; }

  table.data tbody td {
    display: block;
    padding: 2px 0;
    border: none !important;
    font-size: 12.5px;
    background: transparent !important;
    white-space: normal;
  }
  table.data tbody td:first-of-type,
  table.data tbody td:nth-of-type(2) {
    font-size: 14px;
  }
  table.data tbody td.check-col {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 0;
    width: auto;
  }
  table.data tbody td.actions {
    text-align: left;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border, #E2E8F0) !important;
    white-space: normal;
  }
  table.data tbody td.num { text-align: left; }
}