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

package/components/Table/Standard.vue

@@ -1,5 +1,5 @@
 <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'
 
 const props = defineProps({
   table:             { type: Object,  default: null },
@@ -16,14 +16,16 @@ const props = defineProps({
   showFilters:       { type: Boolean, default: true },
   showExport:        { type: Boolean, default: true },
   filters:           { type: Array,   default: () => [] },
-  splitRatio:        { type: Number,  default: 60 },
-  autoClosePreview:  { type: Boolean, default: true },
+  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 },
 })
 
 const resolvedEndpoint = computed(() => props.table?.endpoint ?? props.endpoint)
 const resolvedName     = computed(() => props.table?.name     ?? props.name)
 
-const emit = defineEmits(['row-click', 'loaded'])
+const emit = defineEmits(['row-click', 'loaded', 'preview-delete'])
 const slots = useSlots()
 const forwardedSlots = computed(() => {
   const excluded = new Set(['toolbar', 'preview'])
@@ -51,6 +53,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 +77,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 +89,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 +107,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 +118,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 +140,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 +173,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 +188,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 +209,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 +257,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)
   }
@@ -397,19 +451,22 @@ 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)
   }
 })
 
@@ -441,7 +498,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 +520,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 +543,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 +558,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"
@@ -527,100 +582,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 +764,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 +794,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>
 

package/components/Table.vue

@@ -10,28 +10,27 @@ import {
 
 const props = defineProps({
   endpoint: { type: String, required: true },
-  columns: { type: Array, required: true }, // [{ key, label, sortable?, filterable?, class? }]
+  columns: { type: Array, required: true },
   params: { type: Object, default: () => ({}) },
   checkable: { type: Boolean, default: false },
   search: { type: String, default: '' },
   name: { type: String, required: true },
   cached: { type: Boolean, default: false },
   showReloadButton: { type: Boolean, default: true },
-  viewMode: { type: String, default: 'table' }, // 'table' | 'grid'
+  viewMode: { type: String, default: 'table' },
   gridClass: { type: String, default: 'grid grid-cols-2 lg:grid-cols-3 gap-4' },
   clickRowToOpen:  { type: Boolean, default: false },
   previewRowId:    { type: [String, Number], default: null },
   previewMode:     { type: Boolean, default: false },
+  showPerPage:     { type: Boolean, default: false },
 })
 
 const emit = defineEmits(['update:search', 'row-click', 'loaded', 'page-change', 'per-page-change'])
 const instance = getCurrentInstance()
 
-// ─── API / toast ─────────────────────────────────────────────────────────────
 const api = useApi()
 const toast = useToast()
 
-// ─── Local data ───────────────────────────────────────────────────────────────
 const tableData = ref([])
 const rowCount = ref(0)
 const loading = ref(false)
@@ -46,7 +45,6 @@ const skeletonRows = computed(() => {
 })
 const isGridView = computed(() => props.viewMode === 'grid')
 
-// ─── TanStack state ───────────────────────────────────────────────────────────
 const pagination = ref({ pageIndex: 0, pageSize: 10 })
 const sorting = ref([])
 const columnFilters = ref([])
@@ -61,7 +59,6 @@ const makeUpdater = (stateRef) => (updater) => {
   stateRef.value = typeof updater === 'function' ? updater(stateRef.value) : updater
 }
 
-// ─── Column definitions ───────────────────────────────────────────────────────
 const buildColumnDefs = () => {
   const defs = []
   if (props.checkable) {
@@ -97,7 +94,6 @@ const columnDefs = buildColumnDefs()
 
 const hasFilterableColumns = computed(() => props.columns.some(c => c.filterable))
 
-// ─── TanStack table instance ──────────────────────────────────────────────────
 const table = useVueTable({
   get data() { return tableData.value },
   get rowCount() { return rowCount.value },
@@ -131,7 +127,6 @@ const table = useVueTable({
   enableRowSelection: true,
 })
 
-// ─── Fetch ────────────────────────────────────────────────────────────────────
 const buildRequestParams = () => {
   const { sort, ...otherParams } = props.params
   return {
@@ -170,14 +165,12 @@ const fetchData = async () => {
   }
 }
 
-// ─── Scheduled fetch (deduplicates concurrent state changes) ─────────────────
 let fetchTimeout = null
 const scheduleFetch = (delay = 0) => {
   if (fetchTimeout) clearTimeout(fetchTimeout)
   fetchTimeout = setTimeout(() => fetchData(), delay)
 }
 
-// ─── Cache ────────────────────────────────────────────────────────────────────
 const cacheKey = computed(() => {
   if (!props.cached || !props.name) return null
   const base = `full_table_${props.name}`
@@ -223,7 +216,6 @@ const clearCache = () => {
   if (cacheKey.value) sessionStorage.removeItem(cacheKey.value)
 }
 
-// ─── Restore guard (prevents watchers from triggering fetch during restore) ───
 const isRestoring = ref(false)
 
 const loadFromCacheOnMount = async () => {
@@ -252,7 +244,6 @@ const loadFromCacheOnMount = async () => {
   return true
 }
 
-// ─── Watchers ─────────────────────────────────────────────────────────────────
 watch(tableData, (newData) => {
   if (newData.length > 0 && tableBodyRef.value) {
     const firstDataRow = Array.from(tableBodyRef.value.children).find(el => el.dataset.rowType === 'data')
@@ -287,7 +278,6 @@ watch(() => props.params, () => {
   scheduleFetch(0)
 }, { deep: true })
 
-// ─── Lifecycle ────────────────────────────────────────────────────────────────
 const initColumnOrder = () => {
   const ids = props.checkable ? ['select'] : []
   for (const col of props.columns) ids.push(col.key)
@@ -309,15 +299,12 @@ onBeforeUnmount(() => {
   if (props.cached && tableData.value.length > 0) saveToCache()
 })
 
-// ─── Column settings panel ────────────────────────────────────────────────────
 const setColumnOrder = (order) => { columnOrder.value = order }
 
-// ─── Header drag reorder ──────────────────────────────────────────────────────
 let draggedHeaderId = null
 const dragOverHeaderId = ref(null)
 const resizeHoverId = ref(null)
 
-// ─── Column auto-size on double click ─────────────────────────────────────────
 const _canvas = typeof document !== 'undefined' ? document.createElement('canvas') : null
 const _ctx = _canvas?.getContext('2d')
 
@@ -356,7 +343,6 @@ const onHeaderDrop = (colId) => {
   if (from < 0 || to < 0) return
   order.splice(from, 1)
   order.splice(to, 0, draggedHeaderId)
-  // keep 'select' pinned first
   const selIdx = order.indexOf('select')
   if (selIdx > 0) { order.splice(selIdx, 1); order.unshift('select') }
   columnOrder.value = order
@@ -364,7 +350,6 @@ const onHeaderDrop = (colId) => {
   dragOverHeaderId.value = null
 }
 
-// ─── Row selection ────────────────────────────────────────────────────────────
 const getSelectedRows = () => {
   const selected = table.getSelectedRowModel().rows.map(r => r.original)
   return table.getIsAllRowsSelected()
@@ -372,7 +357,6 @@ const getSelectedRows = () => {
     : { meta: { all: false }, rows: selected }
 }
 
-// ─── Export ───────────────────────────────────────────────────────────────────
 const exportTable = async (format, exportAllPages, exportFilteredRows, selectedIds = null) => {
   const { download } = useDownload()
   const id = crypto.randomUUID()
@@ -417,7 +401,6 @@ const exportTable = async (format, exportAllPages, exportFilteredRows, selectedI
   }
 }
 
-// ─── Per-page ─────────────────────────────────────────────────────────────────
 const handlePerPageChange = (val) => {
   if (val === 'custom') { isCustomPerPage.value = true; return }
   table.setPageSize(parseInt(val))
@@ -428,7 +411,6 @@ const resetPerPage = () => {
   if (![10, 25, 50, 100].includes(pagination.value.pageSize)) table.setPageSize(10)
 }
 
-// ─── Row click ────────────────────────────────────────────────────────────────
 const hasRowClickListener = computed(() => !!instance?.vnode?.props?.onRowClick)
 const isRowClickEnabled = computed(() => props.clickRowToOpen || props.previewMode || hasRowClickListener.value)
 
@@ -457,7 +439,6 @@ const handleRowKeydown = (row, e) => {
   emit('row-click', row.original, e)
 }
 
-// ─── Expose ───────────────────────────────────────────────────────────────────
 const reloadTable = () => {
   clearCache()
   isDataFromCache.value = false
@@ -494,12 +475,9 @@ defineExpose({
             :style="{ width: col.getSize() + 'px' }"
           >
         </colgroup>
-        <thead class="relative z-20 bg-card">
+        <thead class="relative z-20 bg-background">
           <template v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-            <!-- Main header row -->
-            <tr
-              class="divide-x divide-card-line"
-            >
+            <tr>
               <th
                 v-for="header in headerGroup.headers"
                 :key="header.id"
@@ -512,22 +490,20 @@ defineExpose({
                 class="relative overflow-hidden"
                 :class="[
                   header.id === 'select' ? 'text-center' : '',
-                  dragOverHeaderId === header.id ? 'bg-indigo-50 dark:bg-indigo-900/20' : '',
+                  dragOverHeaderId === header.id ? 'bg-primary/5 dark:bg-primary/10' : '',
                   header.column.getCanSort() ? 'cursor-pointer select-none' : '',
                 ]"
                 @click="header.column.getCanSort() && header.column.toggleSorting()"
               >
-                <!-- Select all checkbox -->
                 <template v-if="header.id === 'select'">
                   <input
                     type="checkbox"
                     :checked="table.getIsAllRowsSelected()"
                     :indeterminate="table.getIsSomeRowsSelected()"
                     @change="table.getToggleAllRowsSelectedHandler()($event)"
-                    class="mx-2 shrink-0 border-card-line rounded-sm text-blue-900 focus:ring-0 focus:ring-offset-0 dark:bg-card"
+                    class="mx-2 shrink-0 border-card-line rounded-sm text-primary focus:ring-0 focus:ring-offset-0 dark:bg-card"
                   />
                 </template>
-                <!-- Regular column header -->
                 <template v-else>
                   <div class="px-4 py-3 flex items-center gap-x-1 text-xs font-medium text-muted-foreground w-full">
                     {{ header.column.columnDef.meta?.label ?? header.id }}
@@ -537,7 +513,6 @@ defineExpose({
                       <IconChevronUp v-else class="size-4" />
                     </span>
                   </div>
-                  <!-- Resize handle -->
                   <div
                     v-if="header.column.getCanResize()"
                     class="absolute right-0 top-0 h-full w-3 cursor-col-resize group/rz flex items-center justify-center select-none touch-none"
@@ -552,18 +527,17 @@ defineExpose({
                     <div
                       class="h-4 w-px transition-all"
                       :class="header.column.getIsResizing()
-                        ? 'bg-indigo-400 dark:bg-indigo-500 !w-0.5'
-                        : 'bg-surface-1 group-hover/rz:bg-indigo-300 dark:group-hover/rz:bg-indigo-600 group-hover/rz:w-0.5'"
+                        ? 'bg-primary/60 !w-0.5'
+                        : 'bg-surface-1 group-hover/rz:bg-primary/40 dark:group-hover/rz:bg-primary group-hover/rz:w-0.5'"
                     />
                   </div>
                 </template>
               </th>
             </tr>
 
-            <!-- Column filter row -->
             <tr
               v-if="hasFilterableColumns"
-              class="divide-x divide-card-line border-b border-card-line bg-muted/50"
+              class="border-b border-card-line bg-muted/50"
             >
               <th
                 v-for="header in headerGroup.headers"
@@ -575,7 +549,7 @@ defineExpose({
                   :value="header.column.getFilterValue() ?? ''"
                   @input="(e) => header.column.setFilterValue(e.target.value || undefined)"
                   :placeholder="`Filtrar ${header.column.columnDef.meta?.label ?? ''}...`"
-                  class="w-full bg-card border border-card-line rounded-lg text-xs text-muted-foreground-1 px-2.5 py-1 focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-400 dark:focus:border-indigo-500 outline-none transition-all"
+                  class="w-full bg-card border border-card-line rounded-lg text-xs text-muted-foreground-1 px-2.5 py-1 focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all"
                 />
               </th>
             </tr>
@@ -588,7 +562,7 @@ defineExpose({
             v-if="loading"
             v-for="(_, i) in skeletonRows"
             :key="'sk-' + i"
-            class="animate-pulse divide-x divide-card-line bg-card"
+            class="animate-pulse bg-background"
           >
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
@@ -601,12 +575,12 @@ defineExpose({
             </td>
           </tr>
 
-          <!-- Loading filler rows: pad to pageSize so table height doesn't change -->
+          <!-- Loading filler rows -->
           <tr
             v-if="loading && skeletonRows.length < pagination.pageSize"
             v-for="i in (pagination.pageSize - skeletonRows.length)"
             :key="'lf-' + i"
-            class="divide-x divide-card-line bg-card"
+            class="bg-background"
           >
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
@@ -615,12 +589,12 @@ defineExpose({
             />
           </tr>
 
-          <!-- Empty filler rows: maintain table height when no results -->
+          <!-- Empty filler rows -->
           <tr
             v-if="!loading && tableData.length === 0"
             v-for="i in pagination.pageSize"
             :key="'esk-' + i"
-            class="divide-x divide-card-line bg-card"
+            class="bg-background"
           >
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
@@ -638,11 +612,11 @@ defineExpose({
             @click="(e) => handleRowClick(row, e)"
             @keydown="(e) => handleRowKeydown(row, e)"
             :tabindex="isRowClickEnabled ? 0 : undefined"
-            class="divide-x divide-card-line bg-card hover:bg-layer-hover transition-colors"
+            class="bg-background hover:bg-layer-hover transition-colors"
             :class="{
               'cursor-pointer': isRowClickEnabled,
-              'bg-indigo-50/40 dark:bg-indigo-900/10 hover:bg-indigo-50/60': row.getIsSelected(),
-              '!bg-indigo-50 dark:!bg-indigo-900/20 ring-1 ring-inset ring-indigo-200 dark:ring-indigo-700': previewRowId && row.original.id === previewRowId,
+              'bg-primary/5 dark:bg-primary/10 hover:bg-primary/10': row.getIsSelected(),
+              '!bg-primary/10 dark:!bg-primary/15 ring-1 ring-inset ring-primary/30 dark:ring-primary/40': previewRowId && row.original.id === previewRowId,
             }"
           >
             <td
@@ -656,7 +630,6 @@ defineExpose({
                 cell.column.id !== 'select' ? cell.column.columnDef.meta?.class ?? '' : '',
               ]"
             >
-              <!-- Select checkbox -->
               <template v-if="cell.column.id === 'select'">
                 <div @click.stop>
                   <input
@@ -668,7 +641,6 @@ defineExpose({
                   />
                 </div>
               </template>
-              <!-- Data cell with slot -->
               <template v-else>
                 <slot :name="cell.column.id" :row="row.original" :value="cell.getValue()">
                   {{ cell.getValue() }}
@@ -677,12 +649,12 @@ defineExpose({
             </td>
           </tr>
 
-          <!-- Filler rows: pad table to full page height when data < perPage -->
+          <!-- Filler rows -->
           <tr
             v-if="!loading && tableData.length > 0 && tableData.length < pagination.pageSize"
             v-for="i in (pagination.pageSize - tableData.length)"
             :key="'fill-' + i"
-            class="divide-x divide-card-line bg-card"
+            class="bg-background"
           >
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
@@ -693,10 +665,9 @@ defineExpose({
         </tbody>
       </table>
 
-      <!-- Empty state overlays -->
       <div
         v-if="!loading && tableData.length === 0 && !search && !columnFilters.length"
-        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 rounded-xl"
+        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-background/60 rounded-xl"
       >
         <slot name="empty">
           <p class="text-muted-foreground text-lg font-medium italic">No hay registros</p>
@@ -705,7 +676,7 @@ defineExpose({
 
       <div
         v-if="!loading && tableData.length === 0 && (search || columnFilters.length)"
-        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 rounded-xl"
+        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-background/60 rounded-xl"
       >
         <slot name="empty-search">
           <p class="text-muted-foreground text-lg font-medium italic">No hay registros en la búsqueda</p>
@@ -741,7 +712,7 @@ defineExpose({
           :toggle-row="() => row.toggleSelected()"
         >
           <div class="bg-card rounded-lg border border-card-line p-4 hover:shadow-md transition-shadow relative"
-            :class="{ 'ring-2 ring-indigo-400 dark:ring-indigo-600': row.getIsSelected() }">
+            :class="{ 'ring-2 ring-primary/60': row.getIsSelected() }">
             <div v-if="checkable" class="absolute top-2 left-2 z-10">
               <input type="checkbox" :checked="row.getIsSelected()" @change="row.toggleSelected()"
                 class="rounded border-card-line dark:bg-card" />
@@ -768,11 +739,9 @@ defineExpose({
       </div>
     </div>
 
-    <!-- Pagination & controls bar -->
+    <!-- Pagination bar -->
     <div ref="paginationBarRef" class="flex flex-col sm:flex-row items-center justify-between gap-y-4 sm:gap-y-0 px-4 py-3 border-t border-card-line">
-      <!-- Left: reload, total, cache, columns button -->
       <div class="flex items-center gap-x-4 flex-wrap gap-y-2">
-        <!-- Reload button -->
         <div v-if="showReloadButton" class="flex items-center gap-x-2">
           <IconReload
             v-if="!loading"
@@ -787,10 +756,8 @@ defineExpose({
           </div>
         </div>
 
-        <!-- Total records -->
         <p class="text-sm text-foreground font-medium">{{ rowCount }} registros</p>
 
-        <!-- Cache badge -->
         <div v-if="isDataFromCache && cached" class="group relative flex items-center">
           <div class="flex items-center gap-x-1.5 py-1 px-2.5 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-lg cursor-help hover:bg-emerald-500/20 transition-colors">
             <IconBolt class="size-3.5 fill-current" />
@@ -804,13 +771,10 @@ defineExpose({
             <div class="absolute top-full left-4 -mt-1 border-4 border-transparent border-t-slate-900"></div>
           </div>
         </div>
-
       </div>
 
-      <!-- Right: per-page + pagination -->
       <div class="flex items-center gap-x-8">
-        <!-- Per page selector -->
-        <div class="flex items-center gap-x-2">
+        <div v-if="showPerPage" class="flex items-center gap-x-2">
           <label class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">Filas:</label>
           <select
             v-if="!isCustomPerPage"
@@ -830,13 +794,12 @@ defineExpose({
               :value="pagination.pageSize"
               @change="(e) => table.setPageSize(parseInt(e.target.value) || 10)"
               min="1" max="500"
-              class="w-14 bg-surface border-none text-[11px] font-bold text-muted-foreground-1 rounded-lg focus:ring-2 focus:ring-indigo-500/20 py-1 px-2"
+              class="w-14 bg-surface border-none text-[11px] font-bold text-muted-foreground-1 rounded-lg focus:ring-2 focus:ring-primary/20 py-1 px-2"
             />
-            <button @click="resetPerPage" class="text-[10px] text-indigo-500 font-bold hover:underline">Volver</button>
+            <button @click="resetPerPage" class="text-[10px] text-primary font-bold hover:underline">Volver</button>
           </div>
         </div>
 
-        <!-- Pagination nav -->
         <nav class="flex justify-end items-center gap-x-1" aria-label="Pagination">
           <button
             type="button"

package/components/TableExportable.vue

@@ -26,8 +26,8 @@ const toggleColumn = (key) => {
   if (idx >= 0) selectedColumns.value.splice(idx, 1)
   else selectedColumns.value.push(key)
 }
-const allSelected   = computed(() => selectedColumns.value.length === props.columns.length)
-const toggleAll     = () => {
+const allSelected = computed(() => selectedColumns.value.length === props.columns.length)
+const toggleAll   = () => {
   selectedColumns.value = allSelected.value ? [] : props.columns.map(c => c.key)
 }
 
@@ -43,12 +43,12 @@ const doExport = () => {
   isOpen.value = false
 }
 
-const panelRef  = ref(null)
+const panelRef   = ref(null)
 const triggerRef = ref(null)
 
 const onOutsideClick = (e) => {
   if (
-    panelRef.value && !panelRef.value.contains(e.target) &&
+    panelRef.value   && !panelRef.value.contains(e.target) &&
     triggerRef.value && !triggerRef.value.contains(e.target)
   ) {
     isOpen.value = false
@@ -65,19 +65,21 @@ defineExpose({ open: () => { isOpen.value = true } })
 
 <template>
   <div class="relative">
+
+    <!-- Trigger — icon-only, igual al botón de columnas -->
     <button
       ref="triggerRef"
       type="button"
       @click="isOpen = !isOpen"
+      title="Exportar"
       :class="[
-        'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
+        'p-1.5 inline-flex items-center justify-center rounded-lg border transition-colors',
         isOpen
-          ? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:border-blue-500 dark:text-blue-300'
-          : 'border-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover'
+          ? 'border-primary/40 bg-primary/10 text-primary'
+          : 'border-transparent text-muted-foreground hover:border-card-line hover:bg-muted-hover hover:text-foreground'
       ]"
     >
       <IconDownload class="size-4" stroke="1.5" />
-      Exportar
     </button>
 
     <Transition
@@ -105,7 +107,7 @@ defineExpose({ open: () => { isOpen.value = true } })
             :class="[
               'flex flex-col items-center gap-1 py-2 rounded-lg border text-xs font-medium transition-colors',
               format === f.value
-                ? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:border-blue-500 dark:text-blue-300'
+                ? 'border-primary/40 bg-primary/10 text-primary'
                 : 'border-card-line text-muted-foreground-1 hover:bg-muted-hover'
             ]"
           >
@@ -124,7 +126,7 @@ defineExpose({ open: () => { isOpen.value = true } })
             <input
               v-model="filename"
               type="text"
-              class="flex-1 rounded-lg border border-card-line bg-card text-foreground py-1.5 px-2.5 text-xs focus:outline-none focus:ring-1 focus:ring-blue-500 min-w-0"
+              class="flex-1 rounded-lg border border-card-line bg-card text-foreground py-1.5 px-2.5 text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 min-w-0"
             />
             <span class="text-xs text-muted-foreground shrink-0">.{{ format }}</span>
           </div>
@@ -134,7 +136,7 @@ defineExpose({ open: () => { isOpen.value = true } })
         <div v-if="columns.length > 0" class="mb-3 px-1">
           <div class="flex items-center justify-between mb-1.5">
             <label class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">Columnas</label>
-            <button type="button" @click="toggleAll" class="text-[10px] text-blue-600 dark:text-blue-400 hover:underline">
+            <button type="button" @click="toggleAll" class="text-[10px] text-primary hover:underline">
               {{ allSelected ? 'Ninguna' : 'Todas' }}
             </button>
           </div>
@@ -148,7 +150,7 @@ defineExpose({ open: () => { isOpen.value = true } })
                 type="checkbox"
                 :checked="selectedColumns.includes(col.key)"
                 @change="toggleColumn(col.key)"
-                class="rounded border-card-line bg-surface shrink-0 cursor-pointer"
+                class="rounded border-card-line bg-surface shrink-0 cursor-pointer text-primary"
               />
               <span class="text-xs text-foreground truncate">{{ col.label }}</span>
             </label>
@@ -159,7 +161,7 @@ defineExpose({ open: () => { isOpen.value = true } })
         <button
           type="button"
           @click="doExport"
-          class="w-full py-1.5 px-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition-colors inline-flex items-center justify-center gap-2"
+          class="w-full py-1.5 px-3 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-medium transition-colors inline-flex items-center justify-center gap-2"
         >
           <IconDownload class="size-4" stroke="1.5" />
           Exportar

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/nuxt-theme-spark",
-  "version": "0.1.141",
+  "version": "0.1.142",
   "description": "Innertia Solutions — Spark theme: backoffice, landing and mobile components and layouts",
   "keywords": [
     "nuxt",