@innertia-solutions/nuxt-theme-spark 0.1.141 → 0.1.143

package/components/Table/Standard.vue

@@ -1,29 +1,45 @@
 <script setup>
-import { IconSearch, IconLayoutColumns, IconGripVertical, IconMinus, IconMaximize, IconX, IconPlus, IconChevronLeft, IconCheck, IconChevronDown } from '@tabler/icons-vue'
+import { IconSearch, IconLayoutColumns, IconGripVertical, IconMinus, IconMaximize, IconX, IconPlus, IconChevronLeft, IconCheck, IconChevronDown, IconExternalLink, IconTrash } from '@tabler/icons-vue'
+import Table from './index.vue'
 
 const props = defineProps({
-  table:             { type: Object,  default: null },
-  endpoint:          { type: String,  default: '' },
-  columns:           { type: Array,   required: true },
-  name:              { type: String,  default: '' },
-  params:            { type: Object,  default: () => ({}) },
-  checkable:         { type: Boolean, default: false },
-  cached:            { type: Boolean, default: false },
-  showReloadButton:  { type: Boolean, default: true },
-  clickRowToOpen:    { type: Boolean, default: false },
-  searchPlaceholder: { type: String,  default: 'Buscar...' },
-  showSearch:        { type: Boolean, default: true },
-  showFilters:       { type: Boolean, default: true },
-  showExport:        { type: Boolean, default: true },
-  filters:           { type: Array,   default: () => [] },
-  splitRatio:        { type: Number,  default: 60 },
-  autoClosePreview:  { type: Boolean, default: true },
+  table:                   { type: Object,  default: null },
+  endpoint:                { type: String,  default: '' },
+  columns:                 { type: Array,   required: true },
+  name:                    { type: String,  default: '' },
+  params:                  { type: Object,  default: () => ({}) },
+  checkable:               { type: Boolean, default: false },
+  cached:                  { type: Boolean, default: false },
+  showReloadButton:        { type: Boolean, default: true },
+  clickRowToOpen:          { type: Boolean, default: false },
+  searchPlaceholder:       { type: String,  default: 'Buscar...' },
+  showSearch:              { type: Boolean, default: true },
+  showFilters:             { type: Boolean, default: true },
+  showExport:              { type: Boolean, default: true },
+  filters:                 { type: Array,   default: () => [] },
+  splitRatio:              { type: Number,           default: 60 },
+  autoClosePreview:        { type: Boolean,          default: true },
+  previewHref:             { type: [String, Function], default: null },   // url fija o (row) => url
+  previewDeletable:        { type: Boolean,          default: false },
+  defaultPinnedColumns:    { type: Object,  default: null }, // { left?: string[], right?: string[] }
+  persistPreferences:      { type: Boolean, default: true }, // persist column prefs in backend
 })
 
 const resolvedEndpoint = computed(() => props.table?.endpoint ?? props.endpoint)
 const resolvedName     = computed(() => props.table?.name     ?? props.name)
 
-const emit = defineEmits(['row-click', 'loaded'])
+// ─── Table preferences (column pinning, visibility, order) ───────────────────
+const tablePrefName = computed(() => resolvedName.value || 'default')
+const { preferences: tablePrefs, load: loadPrefs, save: savePrefs } = useTablePreferences(tablePrefName.value)
+
+// Resolved initial pinned columns: merge defaultPinnedColumns with saved preferences
+const resolvedPinnedColumns = computed(() => {
+  const saved = tablePrefs.value.pinning
+  if (saved) return saved
+  return props.defaultPinnedColumns ?? null
+})
+
+const emit = defineEmits(['row-click', 'loaded', 'preview-delete'])
 const slots = useSlots()
 const forwardedSlots = computed(() => {
   const excluded = new Set(['toolbar', 'preview'])
@@ -33,6 +49,7 @@ const forwardedSlots = computed(() => {
 const search        = ref('')
 const activeFilters = ref({})
 const tableRef      = ref(null)
+const prefsLoaded   = ref(false)
 
 // ─── Filter config ─────────────────────────────────────────────────────────────
 const filtersConfig = computed(() =>
@@ -51,6 +68,20 @@ const filterMenuRef    = ref(null)
 const filterAddBtnRef  = ref(null)
 const filterMenuStyle  = ref({})
 
+const pendingOperator = ref('contains')
+const pendingValueInputRef = ref(null)
+
+const textOps = [
+  { value: 'contains',    label: 'contiene' },
+  { value: 'starts_with', label: 'empieza con' },
+  { value: 'equals',      label: 'es igual a' },
+]
+
+const selectOps = [
+  { value: 'is',     label: 'es' },
+  { value: 'is_not', label: 'no es' },
+]
+
 const dateOps = [
   { value: 'before',  label: 'antes de' },
   { value: 'after',   label: 'después de' },
@@ -61,8 +92,9 @@ const activeFilterList = computed(() =>
   filtersConfig.value
     .filter(col => {
       const v = activeFilters.value[col.key]
+      if (!v) return false
       if (col.filterType === 'daterange') return v?.from || v?.to
-      return v !== null && v !== undefined && v !== ''
+      return v?.value !== null && v?.value !== undefined && v?.value !== ''
     })
     .map(col => {
       const v = activeFilters.value[col.key]
@@ -72,10 +104,13 @@ const activeFilterList = computed(() =>
         else if (v.from) { displayOp = 'después de'; displayVal = v.from }
         else { displayOp = 'antes de'; displayVal = v.to }
       } else if (col.filterType === 'select') {
-        displayOp = 'es'
-        displayVal = col.filterOptions?.find(o => o.value === v)?.label ?? v
+        const op = selectOps.find(o => o.value === v.operator) ?? selectOps[0]
+        displayOp = op.label
+        displayVal = col.filterOptions?.find(o => o.value === v.value)?.label ?? v.value
       } else {
-        displayOp = 'contiene'; displayVal = v
+        const op = textOps.find(o => o.value === v.operator) ?? textOps[0]
+        displayOp = op.label
+        displayVal = v.value
       }
       return { key: col.key, label: col.label, displayOp, displayVal, col }
     })
@@ -87,8 +122,9 @@ const activeFilterCount = computed(() => activeFilterList.value.length)
 const availableFilterColumns = computed(() =>
   filtersConfig.value.filter(col => {
     const v = activeFilters.value[col.key]
-    if (col.filterType === 'daterange') return !v?.from && !v?.to
-    return v === null || v === undefined || v === ''
+    if (!v) return true
+    if (col.filterType === 'daterange') return !v.from && !v.to
+    return !v.value
   })
 )
 
@@ -97,15 +133,14 @@ const enrichedFilters = computed(() => {
   const result = []
   for (const col of filtersConfig.value) {
     const v = activeFilters.value[col.key]
-    if (v === null || v === undefined || v === '') continue
+    if (!v) continue
     if (col.filterType === 'daterange') {
-      if (!v?.from && !v?.to) continue
+      if (!v.from && !v.to) continue
       if (v.from) result.push({ field: col.key, operator: 'after',  value: v.from })
       if (v.to)   result.push({ field: col.key, operator: 'before', value: v.to })
-    } else if (col.filterType === 'select') {
-      result.push({ field: col.key, operator: 'is', value: v })
     } else {
-      result.push({ field: col.key, operator: 'contains', value: v })
+      if (!v.value) continue
+      result.push({ field: col.key, operator: v.operator ?? 'contains', value: v.value })
     }
   }
   return result
@@ -120,13 +155,17 @@ const removeFilter = (key) => {
   const u = { ...activeFilters.value }; delete u[key]; activeFilters.value = u
 }
 
+const updateFilterMenuPosition = () => {
+  const rect = filterAddBtnRef.value?.getBoundingClientRect()
+  if (rect) filterMenuStyle.value = { top: rect.bottom + 4 + 'px', left: rect.left + 'px' }
+}
+
 const openFilterMenu = async () => {
   filterMenuStep.value = 'columns'
   pendingCol.value = null
   showFilterPanel.value = true
   await nextTick()
-  const rect = filterAddBtnRef.value?.getBoundingClientRect()
-  if (rect) filterMenuStyle.value = { top: rect.bottom + 4 + 'px', left: rect.left + 'px' }
+  updateFilterMenuPosition()
 }
 
 const toggleFilterMenu = async () => {
@@ -149,7 +188,8 @@ const selectFilterColumn = (col) => {
     else if (existing?.to) { pendingDateOp.value = 'before'; pendingValue.value = { singleDate: existing.to, from: '', to: '' } }
     else { pendingDateOp.value = 'before'; pendingValue.value = { singleDate: '', from: '', to: '' } }
   } else {
-    pendingValue.value = existing ?? ''
+    pendingOperator.value = existing?.operator ?? (col.filterType === 'select' ? 'is' : 'contains')
+    pendingValue.value = existing?.value ?? ''
   }
   filterMenuStep.value = 'value'
 }
@@ -163,9 +203,9 @@ const applyPendingFilter = () => {
     else if (pendingDateOp.value === 'after') v = { from: pendingValue.value.singleDate }
     else v = { to: pendingValue.value.singleDate }
   } else {
-    v = pendingValue.value
+    v = { value: pendingValue.value, operator: pendingOperator.value }
   }
-  activeFilters.value = { ...activeFilters.value, [col.key]: v || null }
+  activeFilters.value = { ...activeFilters.value, [col.key]: v }
   closeFilterMenu()
 }
 
@@ -184,8 +224,30 @@ const onFilterMenuOutsideClick = (e) => {
   }
 }
 watch(showFilterPanel, v => {
-  if (v) document.addEventListener('mousedown', onFilterMenuOutsideClick)
-  else document.removeEventListener('mousedown', onFilterMenuOutsideClick)
+  if (v) {
+    document.addEventListener('mousedown', onFilterMenuOutsideClick)
+    window.addEventListener('scroll', updateFilterMenuPosition, true)
+    window.addEventListener('resize', updateFilterMenuPosition)
+  } else {
+    document.removeEventListener('mousedown', onFilterMenuOutsideClick)
+    window.removeEventListener('scroll', updateFilterMenuPosition, true)
+    window.removeEventListener('resize', updateFilterMenuPosition)
+  }
+})
+
+watch(filterMenuStep, async (step) => {
+  if (step === 'value' && pendingCol.value?.filterType === 'text') {
+    await nextTick()
+    pendingValueInputRef.value?.focus()
+  }
+})
+
+// ─── Preview href helper ───────────────────────────────────────────────────────
+const resolvedPreviewHref = computed(() => {
+  if (!props.previewHref || !previewRow.value) return null
+  return typeof props.previewHref === 'function'
+    ? props.previewHref(previewRow.value)
+    : props.previewHref
 })
 
 // ─── Preview panel ─────────────────────────────────────────────────────────────
@@ -210,12 +272,19 @@ const resolvedHistoryEndpoint = computed(() => {
   return `history/${tableMeta.value.entity_type}/${previewRow.value.id}`
 })
 
-watch(previewRow, () => { previewTab.value = 'datos' })
+watch(previewRow, async (row) => {
+  previewTab.value = 'datos'
+  if (row) {
+    await nextTick()
+    if (typeof window !== 'undefined') window.HSStaticMethods?.autoInit?.(['Tooltip'])
+  }
+})
 
 const handleRowClick = (row) => {
   if (previewEnabled.value) {
+    if (previewRow.value?.id === row.id) return  // ya está abierto, no pestañear
     collapseDock()
-    previewRow.value = previewRow.value?.id === row.id ? null : row
+    previewRow.value = row
   } else {
     emit('row-click', row)
   }
@@ -348,6 +417,24 @@ onMounted(async () => {
       }
     } catch {}
   }
+
+  // Load column preferences from backend
+  if (props.persistPreferences && resolvedName.value) {
+    await loadPrefs()
+    // Apply saved visibility
+    if (tablePrefs.value.visibility && tableRef.value?.table) {
+      tableRef.value.table.setColumnVisibility(tablePrefs.value.visibility)
+    }
+    // Apply saved column order
+    if (tablePrefs.value.order?.length && tableRef.value?.setColumnOrder) {
+      tableRef.value.setColumnOrder(tablePrefs.value.order)
+    }
+    // Apply saved pinning
+    if (tablePrefs.value.pinning && tableRef.value?.table) {
+      tableRef.value.table.setColumnPinning(tablePrefs.value.pinning)
+    }
+  }
+  prefsLoaded.value = true
 })
 onBeforeUnmount(() => {
   window.removeEventListener('keydown', onEsc)
@@ -368,24 +455,105 @@ const orderedColumns = computed(() => {
 })
 
 let draggedKey = null
-const dragOverKey = ref(null)
+let draggedFromSection = null // 'left' | 'center' | 'right'
+const dragOverKey     = ref(null)
+const dragOverSection = ref(null)
+
+// ─── Columns grouped by pinning section ───────────────────────────────────────
+const columnsBySection = computed(() => {
+  // reactive dependency on pinning state
+  const _pin = tableRef.value?.columnPinning?.value
+  const cols = orderedColumns.value
+  if (!tableRef.value?.table) return { left: [], center: cols, right: [] }
+
+  const left = [], center = [], right = []
+  for (const col of cols) {
+    const pinned = tableRef.value.table.getColumn(col.key)?.getIsPinned()
+    if (pinned === 'left')       left.push(col)
+    else if (pinned === 'right') right.push(col)
+    else                         center.push(col)
+  }
+  return { left, center, right }
+})
 
-const onDragStart = (key) => { draggedKey = key }
-const onDragOver  = (e, key) => { e.preventDefault(); dragOverKey.value = key }
-const onDragLeave = () => { dragOverKey.value = null }
-const onDrop = (key) => {
-  if (!draggedKey || draggedKey === key) return
-  const ids = tableRef.value?.table.getAllLeafColumns().map(c => c.id) ?? []
-  const from = ids.indexOf(draggedKey)
-  const to   = ids.indexOf(key)
-  if (from < 0 || to < 0) return
-  ids.splice(from, 1)
-  ids.splice(to, 0, draggedKey)
-  const selIdx = ids.indexOf('select')
-  if (selIdx > 0) { ids.splice(selIdx, 1); ids.unshift('select') }
-  tableRef.value?.setColumnOrder(ids)
+const resetColDrag = () => {
   draggedKey = null
+  draggedFromSection = null
   dragOverKey.value = null
+  dragOverSection.value = null
+}
+
+const onDragStart = (key, section) => { draggedKey = key; draggedFromSection = section }
+const onDragLeave = () => { dragOverKey.value = null }
+
+// Auto-pin anchor columns when any column enters/leaves a pinned section:
+//   Left section  → checkbox (select) is always pinned left
+//   Right section → actions column is always pinned right
+// Called AFTER pinColumn(draggedKey) so columnsBySection reflects the new state.
+const enforceAnchorPins = (targetSection) => {
+  const t = tableRef.value
+  if (!t) return
+  const from = draggedFromSection // still valid before resetColDrag()
+
+  // ─── Left anchor: select checkbox ────────────────────────────────────────────
+  // Order (select always first) is enforced by a watch in Table/index.vue
+  if (props.checkable && t.table?.getColumn('select')) {
+    if (targetSection === 'left') {
+      t.pinColumn('select', 'left')
+    } else if (from === 'left' && columnsBySection.value.left.length === 0) {
+      t.pinColumn('select', false)
+    }
+  }
+
+  // ─── Right anchor: actions ────────────────────────────────────────────────────
+  // 'actions' has label:'' so it's excluded from orderedColumns/columnsBySection.
+  // We only auto-pin it if it exists in the columns definition.
+  const hasActions = props.columns.some(c => c.key === 'actions')
+  if (hasActions) {
+    if (targetSection === 'right') {
+      // Something was pinned right → force-pin actions too
+      t.pinColumn('actions', 'right')
+    } else if (from === 'right') {
+      // Something left the right section → unpin actions if no more right columns
+      if (columnsBySection.value.right.length === 0) t.pinColumn('actions', false)
+    }
+  }
+}
+
+// Drop on a specific column row (handles both reorder + section change)
+const onDrop = (targetKey, targetSection) => {
+  if (!draggedKey) { resetColDrag(); return }
+
+  if (draggedFromSection !== targetSection) {
+    // Change pinning
+    const pinVal = targetSection === 'left' ? 'left' : targetSection === 'right' ? 'right' : false
+    tableRef.value?.pinColumn(draggedKey, pinVal)
+    enforceAnchorPins(targetSection)
+    persistCurrentPrefs()
+  } else if (draggedKey !== targetKey) {
+    // Reorder within section
+    const ids = tableRef.value?.table.getAllLeafColumns().map(c => c.id) ?? []
+    const from = ids.indexOf(draggedKey)
+    const to   = ids.indexOf(targetKey)
+    if (from >= 0 && to >= 0) {
+      ids.splice(from, 1)
+      ids.splice(to, 0, draggedKey)
+      const selIdx = ids.indexOf('select')
+      if (selIdx > 0) { ids.splice(selIdx, 1); ids.unshift('select') }
+      tableRef.value?.setColumnOrder(ids)
+    }
+  }
+  resetColDrag()
+}
+
+// Drop on the section zone itself (empty area) — only changes pinning
+const onDropSection = (targetSection) => {
+  if (!draggedKey || draggedFromSection === targetSection) { resetColDrag(); return }
+  const pinVal = targetSection === 'left' ? 'left' : targetSection === 'right' ? 'right' : false
+  tableRef.value?.pinColumn(draggedKey, pinVal)
+  enforceAnchorPins(targetSection)
+  persistCurrentPrefs()
+  resetColDrag()
 }
 
 const onColumnPanelOutsideClick = (e) => {
@@ -397,29 +565,74 @@ const onColumnPanelOutsideClick = (e) => {
   }
 }
 
+const updateColumnPanelPosition = () => {
+  const rect = columnButtonRef.value?.getBoundingClientRect()
+  if (rect) columnPanelStyle.value = { top: rect.bottom + 6 + 'px', right: window.innerWidth - rect.right + 'px' }
+}
+
 watch(showColumnPanel, async (v) => {
   if (v) {
     await nextTick()
-    const rect = columnButtonRef.value?.getBoundingClientRect()
-    if (rect) {
-      columnPanelStyle.value = {
-        top:   rect.bottom + 6 + 'px',
-        right: window.innerWidth - rect.right + 'px',
-      }
-    }
+    updateColumnPanelPosition()
     document.addEventListener('mousedown', onColumnPanelOutsideClick)
+    window.addEventListener('scroll', updateColumnPanelPosition, true)
+    window.addEventListener('resize', updateColumnPanelPosition)
   } else {
     document.removeEventListener('mousedown', onColumnPanelOutsideClick)
+    window.removeEventListener('scroll', updateColumnPanelPosition, true)
+    window.removeEventListener('resize', updateColumnPanelPosition)
   }
 })
 
+// ─── Persist column preferences when they change ─────────────────────────────
+const persistCurrentPrefs = () => {
+  if (!props.persistPreferences || !resolvedName.value || !prefsLoaded.value || !tableRef.value) return
+  const tanTable = tableRef.value.table
+  if (!tanTable) return
+
+  const visibility = Object.fromEntries(
+    tanTable.getAllLeafColumns()
+      .filter(c => c.id !== 'select')
+      .map(c => [c.id, c.getIsVisible()])
+  )
+  const order = tanTable.getAllLeafColumns().map(c => c.id).filter(id => id !== 'select')
+  const rawPinning = tableRef.value.columnPinning?.value ?? tanTable.getState().columnPinning
+  const pinning = rawPinning
+    ? { left: rawPinning.left ?? [], right: rawPinning.right ?? [] }
+    : { left: [], right: [] }
+
+  savePrefs({ visibility, order, pinning })
+}
+
+// Watch column pinning changes via tableRef
+watch(
+  () => tableRef.value?.columnPinning?.value,
+  () => { if (prefsLoaded.value) persistCurrentPrefs() },
+  { deep: true }
+)
+
+// Watch column visibility changes
+watch(
+  () => tableRef.value?.table?.getState()?.columnVisibility,
+  () => { if (prefsLoaded.value) persistCurrentPrefs() },
+  { deep: true }
+)
+
+// Watch column order changes
+watch(
+  () => tableRef.value?.table?.getState()?.columnOrder,
+  () => { if (prefsLoaded.value) persistCurrentPrefs() },
+  { deep: true }
+)
+
 // ─── Expose ───────────────────────────────────────────────────────────────────
 const getSelectedRows = () => tableRef.value?.getSelectedRows()
 const reload          = () => tableRef.value?.reload()
 const clearCache      = () => tableRef.value?.clearCache()
 const exportTable     = (format, allPages, filteredRows) => tableRef.value?.exportTable(format, allPages, filteredRows)
+const pinColumn       = (key, position) => tableRef.value?.pinColumn(key, position)
 
-defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, closePreview })
+defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, closePreview, pinColumn })
 </script>
 
 <template>
@@ -441,7 +654,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
           :class="[
             'inline-flex items-center gap-1.5 py-1.5 px-3 text-sm font-medium rounded-lg border transition-colors',
             activeFilterList.length
-              ? 'border-indigo-300 bg-indigo-50 text-indigo-700 dark:bg-indigo-900/20 dark:border-indigo-700 dark:text-indigo-300'
+              ? 'border-primary/40 bg-primary/10 text-primary'
               : 'border-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover'
           ]"
         >
@@ -463,7 +676,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
           :class="[
             'p-1.5 inline-flex items-center justify-center rounded-lg border transition-colors',
             showColumnPanel
-              ? 'border-indigo-300 bg-indigo-50 text-indigo-600 dark:bg-indigo-900/20 dark:border-indigo-700 dark:text-indigo-300'
+              ? 'border-primary/40 bg-primary/10 text-primary'
               : 'border-transparent text-muted-foreground hover:border-card-line hover:bg-muted-hover hover:text-foreground'
           ]"
         >
@@ -486,7 +699,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
         <button
           type="button"
           @click.stop="openEditFilter(chip.col)"
-          class="inline-flex items-center gap-1 px-2 py-1 text-indigo-600 dark:text-indigo-400 font-medium hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-colors border-x border-card-line"
+          class="inline-flex items-center gap-1 px-2 py-1 text-primary font-medium hover:bg-primary/10 transition-colors border-x border-card-line"
         >
           {{ chip.displayVal }}
           <IconChevronDown class="size-3 opacity-60" />
@@ -501,10 +714,8 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
       </div>
     </div>
 
-    <!-- Table + preview overlay inside a minimal border box -->
-    <div class="relative overflow-hidden rounded-xl border border-card-line">
-
-      <!-- Tabla -->
+    <!-- Tabla -->
+    <div class="overflow-hidden border-t border-b border-card-line">
       <Table
         ref="tableRef"
         :endpoint="resolvedEndpoint"
@@ -518,6 +729,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
         :click-row-to-open="clickRowToOpen"
         :preview-row-id="previewRow?.id ?? null"
         :preview-mode="!!previewEnabled"
+        :pinned-columns="resolvedPinnedColumns"
         @row-click="handleRowClick"
         @loaded="handleLoaded"
         @page-change="closePreview"
@@ -527,100 +739,134 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
           <slot :name="name" v-bind="slotProps ?? {}" />
         </template>
       </Table>
+    </div>
 
-      <!-- Preview panel overlay — slides in from right, tapa la tabla -->
-      <Transition
-        :enter-active-class="previewFromCache ? '' : 'transition ease-out duration-200'"
-        :enter-from-class="previewFromCache ? '' : 'opacity-0 translate-x-6'"
-        :enter-to-class="previewFromCache ? '' : 'opacity-100 translate-x-0'"
-        leave-active-class="transition ease-in duration-150"
-        leave-from-class="opacity-100 translate-x-0"
-        leave-to-class="opacity-0 translate-x-6"
+    <!-- Preview panel — overlay deslizante desde la derecha (cubre todo el componente) -->
+    <Transition
+      :enter-active-class="previewFromCache ? '' : 'transition ease-out duration-200'"
+      :enter-from-class="previewFromCache ? '' : 'opacity-0 translate-x-6'"
+      :enter-to-class="previewFromCache ? '' : 'opacity-100 translate-x-0'"
+      leave-active-class="transition ease-in duration-150"
+      leave-from-class="opacity-100 translate-x-0"
+      leave-to-class="opacity-0 translate-x-6"
+    >
+      <div
+        v-if="previewRow && previewEnabled"
+        ref="previewPanelRef"
+        class="absolute top-0 right-0 bottom-0 z-30 flex flex-col bg-card border border-card-line rounded-2xl shadow-xl overflow-hidden"
+        :style="{ width: (100 - currentRatio) + '%' }"
       >
+        <!-- Resize handle — thin pill on left edge -->
         <div
-          v-if="previewRow && previewEnabled"
-          ref="previewPanelRef"
-          class="absolute top-0 right-0 z-30 flex bg-card border-l border-card-line shadow-[-4px_0_16px_rgba(0,0,0,0.06)]"
-          :style="{ width: (100 - currentRatio) + '%', bottom: paginationHeight + 'px' }"
-        >
-          <!-- Resize handle -->
-          <div
-            class="w-1 shrink-0 cursor-col-resize bg-surface hover:bg-indigo-300 dark:hover:bg-indigo-600 transition-colors"
-            @mousedown="startResize"
-          />
-          <!-- Preview -->
-          <div class="flex flex-col flex-1 overflow-hidden">
+          class="absolute left-1 top-1/2 -translate-y-1/2 h-12 w-1 cursor-col-resize rounded-full bg-border hover:bg-primary/50 transition-colors z-10"
+          @mousedown="startResize"
+        />
+
+        <!-- Barra de acciones del preview -->
+        <div class="shrink-0 flex items-center gap-3 px-5 py-4 border-b border-card-line">
+          <!-- Título (reemplazable via slot) -->
+          <div class="flex-1 min-w-0">
+            <slot name="preview-header" :row="previewRow" :close="closePreview" />
+          </div>
 
-            <!-- Barra de acciones del preview -->
-            <div class="shrink-0 flex items-center justify-between gap-2 px-3 py-2 border-b border-card-line">
-              <div class="flex-1 min-w-0">
-                <slot name="preview-header" :row="previewRow" :close="closePreview" />
-              </div>
-              <div class="flex items-center gap-1 shrink-0">
-                <button
-                  type="button"
-                  class="inline-flex items-center justify-center size-6 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
-                  title="Minimizar"
-                  @click.stop="minimizePreview"
-                >
-                  <IconMinus class="size-3.5" />
-                </button>
-                <button
-                  type="button"
-                  class="inline-flex items-center justify-center size-6 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
-                  title="Cerrar"
-                  @click.stop="closePreview"
-                >
-                  <IconX class="size-3.5" />
-                </button>
-              </div>
+          <!-- Botones de acción — todos icon-only, mismo tamaño y estilo -->
+          <div class="flex items-center gap-0.5 shrink-0">
+
+            <!-- Acciones extra configurables desde el padre -->
+            <slot name="preview-actions" :row="previewRow" :close="closePreview" />
+
+            <!-- Abrir (configurable vía :preview-href) -->
+            <div v-if="resolvedPreviewHref" class="hs-tooltip [--placement:top] inline-block">
+              <NuxtLink
+                :to="resolvedPreviewHref"
+                class="hs-tooltip-toggle inline-flex items-center justify-center size-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+              >
+                <IconExternalLink class="size-3.5" />
+              </NuxtLink>
+              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">Abrir</span>
             </div>
 
-            <!-- Scrollable content -->
-            <div class="flex-1 overflow-y-auto min-h-0">
-              <slot v-if="previewTab === 'datos'" name="preview" :row="previewRow" :close="closePreview" />
-              <Table.PreviewTimeline
-                v-else-if="previewTab === 'bitacora' && resolvedHistoryEndpoint"
-                :endpoint="resolvedHistoryEndpoint"
-              />
+            <!-- Eliminar (configurable vía :preview-deletable) -->
+            <div v-if="previewDeletable" class="hs-tooltip [--placement:top] inline-block">
+              <button
+                type="button"
+                class="hs-tooltip-toggle inline-flex items-center justify-center size-7 rounded-md text-muted-foreground hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                @click.stop="emit('preview-delete', previewRow)"
+              >
+                <IconTrash class="size-3.5" />
+              </button>
+              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">Eliminar</span>
             </div>
 
-            <!-- Tabs — bottom -->
-            <div v-if="hasHistory" class="shrink-0 flex border-t border-card-line">
+            <!-- Minimizar (siempre) -->
+            <div class="hs-tooltip [--placement:top] inline-block">
               <button
                 type="button"
-                @click="previewTab = 'datos'"
-                :class="[
-                  'flex-1 py-2.5 text-xs font-semibold transition-colors border-r border-card-line border-t-2 -mt-px',
-                  previewTab === 'datos'
-                    ? 'border-t-card text-foreground'
-                    : 'border-t-transparent text-muted-foreground hover:text-foreground hover:bg-muted-hover'
-                ]"
+                class="hs-tooltip-toggle inline-flex items-center justify-center size-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+                @click.stop="minimizePreview"
               >
-                Datos
+                <IconMinus class="size-3.5" />
               </button>
+              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">Minimizar</span>
+            </div>
+
+            <!-- Cerrar (siempre) -->
+            <div class="hs-tooltip [--placement:top] inline-block">
               <button
                 type="button"
-                @click="resolvedHistoryEndpoint && (previewTab = 'bitacora')"
-                :disabled="!resolvedHistoryEndpoint"
-                :class="[
-                  'flex-1 py-2.5 text-xs font-semibold transition-colors border-t-2 -mt-px',
-                  !resolvedHistoryEndpoint
-                    ? 'border-t-transparent text-muted-foreground/40 cursor-not-allowed'
-                    : previewTab === 'bitacora'
-                      ? 'border-t-card text-foreground'
-                      : 'border-t-transparent text-muted-foreground hover:text-foreground hover:bg-muted-hover'
-                ]"
+                class="hs-tooltip-toggle inline-flex items-center justify-center size-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+                @click.stop="closePreview"
               >
-                Bitácora
+                <IconX class="size-3.5" />
               </button>
+              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">Cerrar</span>
             </div>
 
           </div>
         </div>
-      </Transition>
 
-    </div>
+        <!-- Scrollable content -->
+        <div class="flex-1 overflow-y-auto min-h-0">
+          <slot v-if="previewTab === 'datos'" name="preview" :row="previewRow" :close="closePreview" />
+          <Table.PreviewTimeline
+            v-else-if="previewTab === 'bitacora' && resolvedHistoryEndpoint"
+            :endpoint="resolvedHistoryEndpoint"
+          />
+        </div>
+
+        <!-- Tabs — bottom -->
+        <div v-if="hasHistory" class="shrink-0 flex border-t border-card-line">
+          <button
+            type="button"
+            @click="previewTab = 'datos'"
+            :class="[
+              'flex-1 py-2.5 text-xs font-semibold transition-colors border-r border-card-line border-t-2 -mt-px',
+              previewTab === 'datos'
+                ? 'border-t-card text-foreground'
+                : 'border-t-transparent text-muted-foreground hover:text-foreground hover:bg-muted-hover'
+            ]"
+          >
+            Datos
+          </button>
+          <button
+            type="button"
+            @click="resolvedHistoryEndpoint && (previewTab = 'bitacora')"
+            :disabled="!resolvedHistoryEndpoint"
+            :class="[
+              'flex-1 py-2.5 text-xs font-semibold transition-colors border-t-2 -mt-px',
+              !resolvedHistoryEndpoint
+                ? 'border-t-transparent text-muted-foreground/40 cursor-not-allowed'
+                : previewTab === 'bitacora'
+                  ? 'border-t-card text-foreground'
+                  : 'border-t-transparent text-muted-foreground hover:text-foreground hover:bg-muted-hover'
+            ]"
+          >
+            Bitácora
+          </button>
+        </div>
+
+      </div>
+    </Transition>
 
     <!-- ── Floating mini-preview (dock expand, estilo Gmail) ── -->
     <Teleport to="body">
@@ -675,23 +921,28 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
         <div
           v-if="showFilterPanel"
           ref="filterMenuRef"
-          class="fixed z-[60] bg-dropdown border border-dropdown-line rounded-xl shadow-2xl min-w-52 overflow-hidden"
+          class="fixed z-[60] bg-dropdown border border-dropdown-line rounded-xl shadow-2xl overflow-hidden"
           :style="filterMenuStyle"
         >
 
-          <!-- Step 1: column picker (only non-filtered columns shown) -->
+          <!-- Step 1: column picker -->
           <template v-if="filterMenuStep === 'columns'">
-            <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest px-3 pt-2.5 pb-1">Filtrar por</p>
-            <div class="pb-1.5">
+            <p class="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest px-3 pt-3 pb-1.5">
+              Filtrar por
+            </p>
+            <div class="pb-2 min-w-48">
               <template v-if="availableFilterColumns.length">
                 <button
                   v-for="col in availableFilterColumns"
                   :key="col.key"
                   type="button"
                   @click.stop="selectFilterColumn(col)"
-                  class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted-hover transition-colors text-left text-foreground"
+                  class="w-full flex items-center justify-between gap-3 px-3 py-2 text-sm text-foreground hover:bg-muted-hover transition-colors text-left group"
                 >
-                  {{ col.label }}
+                  <span>{{ col.label }}</span>
+                  <span class="text-[11px] text-muted-foreground-2 group-hover:text-muted-foreground transition-colors capitalize">
+                    {{ col.filterType === 'daterange' ? 'fecha' : col.filterType === 'select' ? 'opción' : 'texto' }}
+                  </span>
                 </button>
               </template>
               <p v-else class="px-3 py-3 text-xs text-muted-foreground italic">
@@ -700,84 +951,109 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
             </div>
           </template>
 
-          <!-- Step 2: value input -->
+          <!-- Step 2: value config -->
           <template v-else-if="filterMenuStep === 'value' && pendingCol">
-            <div class="flex items-center gap-2 px-3 py-2 border-b border-card-line bg-surface">
+
+            <!-- Header: back + field name + operator selector -->
+            <div class="flex items-center gap-1.5 px-2 py-2 border-b border-dropdown-line">
               <button
                 type="button"
                 @click.stop="filterMenuStep = 'columns'"
-                class="text-muted-foreground hover:text-foreground transition-colors"
+                class="inline-flex items-center justify-center size-6 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors shrink-0"
               >
                 <IconChevronLeft class="size-4" />
               </button>
               <span class="text-sm font-medium text-foreground">{{ pendingCol.label }}</span>
+
+              <!-- Operator: native select for text (3 options) -->
+              <select
+                v-if="pendingCol.filterType === 'text'"
+                v-model="pendingOperator"
+                class="ml-auto text-xs bg-dropdown border border-dropdown-line rounded-md px-2 py-1 text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/50 cursor-pointer"
+              >
+                <option v-for="op in textOps" :key="op.value" :value="op.value">{{ op.label }}</option>
+              </select>
+
+              <!-- Operator: segmented toggle for select (es / no es) -->
+              <div v-else-if="pendingCol.filterType === 'select'" class="ml-auto flex rounded-md border border-dropdown-line overflow-hidden text-xs">
+                <button
+                  v-for="op in selectOps"
+                  :key="op.value"
+                  type="button"
+                  @click.stop="pendingOperator = op.value"
+                  :class="[
+                    'px-2.5 py-1 transition-colors',
+                    pendingOperator === op.value
+                      ? 'bg-primary/10 text-primary'
+                      : 'text-muted-foreground hover:bg-muted-hover'
+                  ]"
+                >
+                  {{ op.label }}
+                </button>
+              </div>
+
+              <!-- Operator: inline select for daterange -->
+              <select
+                v-else-if="pendingCol.filterType === 'daterange'"
+                v-model="pendingDateOp"
+                class="ml-auto text-xs bg-dropdown border border-dropdown-line rounded-md px-2 py-1 text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/50 cursor-pointer"
+              >
+                <option v-for="op in dateOps" :key="op.value" :value="op.value">{{ op.label }}</option>
+              </select>
             </div>
-            <div class="p-3 space-y-2.5">
 
-              <!-- text -->
+            <div class="p-3 min-w-56 space-y-2">
+
+              <!-- ── TEXT ── -->
               <input
                 v-if="pendingCol.filterType === 'text'"
+                ref="pendingValueInputRef"
                 v-model="pendingValue"
                 type="text"
-                autofocus
                 @keydown.enter.stop="applyPendingFilter"
                 @keydown.escape.stop="closeFilterMenu"
-                placeholder="Buscar..."
-                class="w-full rounded-lg border border-card-line bg-card text-foreground py-1.5 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
+                placeholder="Valor..."
+                class="w-full rounded-lg border border-dropdown-line bg-card text-foreground py-1.5 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary/60 focus:border-primary"
               />
 
-              <!-- select -->
-              <div v-else-if="pendingCol.filterType === 'select'" class="space-y-0.5">
+              <!-- ── SELECT ── -->
+              <div v-else-if="pendingCol.filterType === 'select'" class="space-y-0.5 max-h-52 overflow-y-auto -mx-1">
                 <button
                   v-for="opt in pendingCol.filterOptions"
                   :key="opt.value"
                   type="button"
                   @click.stop="pendingValue = opt.value; applyPendingFilter()"
                   :class="[
-                    'w-full flex items-center gap-2 px-2.5 py-1.5 text-sm rounded-lg transition-colors text-left',
+                    'w-full flex items-center gap-2 px-2.5 py-2 text-sm rounded-lg transition-colors text-left',
                     pendingValue === opt.value
-                      ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/20 dark:text-indigo-300'
+                      ? 'bg-primary/10 text-primary'
                       : 'hover:bg-muted-hover text-foreground'
                   ]"
                 >
                   <span class="flex-1">{{ opt.label }}</span>
-                  <IconCheck v-if="pendingValue === opt.value" class="size-3.5 shrink-0 text-indigo-500" />
+                  <IconCheck v-if="pendingValue === opt.value" class="size-3.5 shrink-0 text-primary/70" />
                 </button>
               </div>
 
-              <!-- daterange -->
-              <div v-else-if="pendingCol.filterType === 'daterange'" class="space-y-2">
-                <div class="flex gap-1">
-                  <button
-                    v-for="op in dateOps"
-                    :key="op.value"
-                    type="button"
-                    @click.stop="pendingDateOp = op.value"
-                    :class="[
-                      'flex-1 py-1 text-xs rounded-lg border transition-colors',
-                      pendingDateOp === op.value
-                        ? 'border-indigo-400 bg-indigo-50 text-indigo-700 dark:bg-indigo-900/20 dark:text-indigo-300'
-                        : 'border-card-line text-muted-foreground hover:bg-muted-hover'
-                    ]"
-                  >
-                    {{ op.label }}
-                  </button>
-                </div>
+              <!-- ── DATERANGE ── -->
+              <template v-else-if="pendingCol.filterType === 'daterange'">
                 <template v-if="pendingDateOp === 'between'">
-                  <input type="date" v-model="pendingValue.from" class="w-full rounded-lg border border-card-line bg-card text-foreground py-1.5 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500" />
-                  <input type="date" v-model="pendingValue.to" class="w-full rounded-lg border border-card-line bg-card text-foreground py-1.5 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500" />
+                  <input type="date" v-model="pendingValue.from" class="w-full rounded-lg border border-dropdown-line bg-card text-foreground py-1.5 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary/60" />
+                  <input type="date" v-model="pendingValue.to"   class="w-full rounded-lg border border-dropdown-line bg-card text-foreground py-1.5 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary/60" />
                 </template>
-                <input v-else type="date" v-model="pendingValue.singleDate" class="w-full rounded-lg border border-card-line bg-card text-foreground py-1.5 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500" />
-              </div>
+                <input v-else type="date" v-model="pendingValue.singleDate" class="w-full rounded-lg border border-dropdown-line bg-card text-foreground py-1.5 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary/60" />
+              </template>
 
+              <!-- Apply (not for select — auto-applies on click) -->
               <button
                 v-if="pendingCol.filterType !== 'select'"
                 type="button"
                 @click.stop="applyPendingFilter"
-                class="w-full py-1.5 text-sm font-medium text-center rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors"
+                class="w-full py-1.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary/90 active:bg-primary/80 transition-colors"
               >
                 Aplicar
               </button>
+
             </div>
           </template>
 
@@ -798,35 +1074,142 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
         <div
           v-if="showColumnPanel"
           ref="columnPanelRef"
-          class="fixed z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-2xl p-3 min-w-56 max-h-80 overflow-y-auto"
+          class="fixed z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-2xl min-w-64 max-h-[480px] overflow-y-auto"
           :style="columnPanelStyle"
         >
-          <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest mb-2 px-1">
-            Columnas visibles
-          </p>
-          <div
-            v-for="col in orderedColumns"
-            :key="col.key"
-            draggable="true"
-            @dragstart="onDragStart(col.key)"
-            @dragover="(e) => onDragOver(e, col.key)"
-            @dragleave="onDragLeave"
-            @drop="onDrop(col.key)"
-            class="flex items-center gap-2 py-1.5 px-2 rounded-lg select-none transition-colors"
-            :class="dragOverKey === col.key
-              ? 'bg-blue-50 dark:bg-blue-900/20 ring-1 ring-blue-300 dark:ring-blue-700'
-              : 'hover:bg-muted-hover cursor-grab'"
-          >
-            <IconGripVertical class="size-4 text-muted-foreground-2 shrink-0" />
-            <input
-              type="checkbox"
-              :checked="tableRef?.table.getColumn(col.key)?.getIsVisible() ?? true"
-              @change="tableRef?.table.getColumn(col.key)?.toggleVisibility()"
-              @click.stop
-              class="rounded border-card-line bg-surface shrink-0 cursor-pointer"
-            />
-            <span class="text-sm text-foreground truncate">{{ col.label }}</span>
+
+          <!-- ── Sección: Fija a la izquierda ── -->
+          <div class="p-2 pb-1">
+            <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest px-1 pb-1.5 flex items-center gap-1.5">
+              <span class="size-1.5 rounded-full bg-indigo-400 inline-block"></span>
+              Fija a la izquierda
+            </p>
+            <div
+              class="rounded-lg min-h-[34px] transition-colors"
+              :class="dragOverSection === 'left' && draggedKey && !columnsBySection.left.find(c => c.key === draggedKey)
+                ? 'bg-indigo-50 dark:bg-indigo-900/20 ring-1 ring-indigo-300 dark:ring-indigo-700'
+                : columnsBySection.left.length === 0 ? 'border border-dashed border-card-line' : ''"
+              @dragover.prevent="dragOverSection = 'left'"
+              @dragleave="dragOverSection = null"
+              @drop.stop="onDropSection('left')"
+            >
+              <p v-if="columnsBySection.left.length === 0" class="flex items-center justify-center h-[34px] text-xs text-muted-foreground-2 italic select-none">
+                Arrastra columnas aquí
+              </p>
+              <div
+                v-for="col in columnsBySection.left"
+                :key="col.key"
+                draggable="true"
+                @dragstart="onDragStart(col.key, 'left')"
+                @dragover.prevent="dragOverSection = 'left'; dragOverKey = col.key"
+                @dragleave="dragOverKey = null"
+                @drop.stop="onDrop(col.key, 'left')"
+                class="flex items-center gap-2 py-1.5 px-2 rounded-lg select-none cursor-grab transition-colors"
+                :class="dragOverKey === col.key ? 'bg-indigo-50 dark:bg-indigo-900/20' : 'hover:bg-muted-hover'"
+              >
+                <IconGripVertical class="size-4 text-muted-foreground-2 shrink-0" />
+                <input
+                  type="checkbox"
+                  :checked="tableRef?.table.getColumn(col.key)?.getIsVisible() ?? true"
+                  @change="tableRef?.table.getColumn(col.key)?.toggleVisibility(); persistCurrentPrefs()"
+                  @click.stop
+                  class="rounded border-card-line bg-surface shrink-0 cursor-pointer"
+                />
+                <span class="text-sm text-foreground truncate flex-1">{{ col.label }}</span>
+                <span class="size-1.5 rounded-full bg-indigo-400 shrink-0 opacity-60" />
+              </div>
+            </div>
           </div>
+
+          <div class="mx-3 border-t border-dropdown-line" />
+
+          <!-- ── Sección: Columnas libres ── -->
+          <div class="p-2 py-1">
+            <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest px-1 pb-1.5 flex items-center gap-1.5">
+              <span class="size-1.5 rounded-full bg-muted-foreground-2 inline-block"></span>
+              Columnas
+            </p>
+            <div
+              class="rounded-lg min-h-[34px] transition-colors"
+              :class="dragOverSection === 'center' && draggedKey && !columnsBySection.center.find(c => c.key === draggedKey)
+                ? 'bg-muted/60 ring-1 ring-border'
+                : ''"
+              @dragover.prevent="dragOverSection = 'center'"
+              @dragleave="dragOverSection = null"
+              @drop.stop="onDropSection('center')"
+            >
+              <p v-if="columnsBySection.center.length === 0" class="flex items-center justify-center h-[34px] text-xs text-muted-foreground-2 italic select-none">
+                Sin columnas libres
+              </p>
+              <div
+                v-for="col in columnsBySection.center"
+                :key="col.key"
+                draggable="true"
+                @dragstart="onDragStart(col.key, 'center')"
+                @dragover.prevent="dragOverSection = 'center'; dragOverKey = col.key"
+                @dragleave="dragOverKey = null"
+                @drop.stop="onDrop(col.key, 'center')"
+                class="flex items-center gap-2 py-1.5 px-2 rounded-lg select-none cursor-grab transition-colors"
+                :class="dragOverKey === col.key ? 'bg-blue-50 dark:bg-blue-900/20 ring-1 ring-blue-200 dark:ring-blue-700' : 'hover:bg-muted-hover'"
+              >
+                <IconGripVertical class="size-4 text-muted-foreground-2 shrink-0" />
+                <input
+                  type="checkbox"
+                  :checked="tableRef?.table.getColumn(col.key)?.getIsVisible() ?? true"
+                  @change="tableRef?.table.getColumn(col.key)?.toggleVisibility(); persistCurrentPrefs()"
+                  @click.stop
+                  class="rounded border-card-line bg-surface shrink-0 cursor-pointer"
+                />
+                <span class="text-sm text-foreground truncate flex-1">{{ col.label }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="mx-3 border-t border-dropdown-line" />
+
+          <!-- ── Sección: Fija a la derecha ── -->
+          <div class="p-2 pt-1">
+            <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest px-1 pb-1.5 flex items-center gap-1.5">
+              <span class="size-1.5 rounded-full bg-amber-400 inline-block"></span>
+              Fija a la derecha
+            </p>
+            <div
+              class="rounded-lg min-h-[34px] transition-colors"
+              :class="dragOverSection === 'right' && draggedKey && !columnsBySection.right.find(c => c.key === draggedKey)
+                ? 'bg-amber-50 dark:bg-amber-900/20 ring-1 ring-amber-300 dark:ring-amber-700'
+                : columnsBySection.right.length === 0 ? 'border border-dashed border-card-line' : ''"
+              @dragover.prevent="dragOverSection = 'right'"
+              @dragleave="dragOverSection = null"
+              @drop.stop="onDropSection('right')"
+            >
+              <p v-if="columnsBySection.right.length === 0" class="flex items-center justify-center h-[34px] text-xs text-muted-foreground-2 italic select-none">
+                Arrastra columnas aquí
+              </p>
+              <div
+                v-for="col in columnsBySection.right"
+                :key="col.key"
+                draggable="true"
+                @dragstart="onDragStart(col.key, 'right')"
+                @dragover.prevent="dragOverSection = 'right'; dragOverKey = col.key"
+                @dragleave="dragOverKey = null"
+                @drop.stop="onDrop(col.key, 'right')"
+                class="flex items-center gap-2 py-1.5 px-2 rounded-lg select-none cursor-grab transition-colors"
+                :class="dragOverKey === col.key ? 'bg-amber-50 dark:bg-amber-900/20' : 'hover:bg-muted-hover'"
+              >
+                <IconGripVertical class="size-4 text-muted-foreground-2 shrink-0" />
+                <input
+                  type="checkbox"
+                  :checked="tableRef?.table.getColumn(col.key)?.getIsVisible() ?? true"
+                  @change="tableRef?.table.getColumn(col.key)?.toggleVisibility(); persistCurrentPrefs()"
+                  @click.stop
+                  class="rounded border-card-line bg-surface shrink-0 cursor-pointer"
+                />
+                <span class="text-sm text-foreground truncate flex-1">{{ col.label }}</span>
+                <span class="size-1.5 rounded-full bg-amber-400 shrink-0 opacity-60" />
+              </div>
+            </div>
+          </div>
+
         </div>
       </Transition>
     </Teleport>