@axzydev/axzy_ui_system 1.3.1 → 1.3.2

package/dist/index.js

@@ -2032,6 +2032,34 @@ import { useRef as useRef4, useState as useState9 } from "react";
 
 // src/utils/styles.ts
 import clsx11 from "clsx";
+
+// src/types/table.types.ts
+var variantStyles = {
+  default: "",
+  striped: "",
+  bordered: "border border-gray-200"
+};
+var sizeStyles = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-lg"
+};
+var densityStyles = {
+  compact: { header: "px-3 py-2", cell: "px-3 py-1.5", rowHeight: 33 },
+  normal: { header: "px-4 py-4", cell: "px-4 py-3", rowHeight: 45 },
+  comfortable: { header: "px-4 py-5", cell: "px-4 py-4", rowHeight: 53 }
+};
+var sizeLineHeights = { sm: 16, md: 20, lg: 28 };
+function getRowHeight(size, density) {
+  return densityStyles[density].rowHeight - sizeLineHeights.md + sizeLineHeights[size];
+}
+var tableAlignClasses = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+
+// src/utils/styles.ts
 function inputFieldStyle(inputTheme, size = "md", extra) {
   const sizeConfig = inputSizeTokens[size] ?? inputSizeTokens.md;
   return {
@@ -2061,13 +2089,15 @@ var iconAbsoluteLeft = "absolute inset-y-0 left-0 flex items-center pl-3 z-10";
 var iconAbsoluteRight = "absolute inset-y-0 right-0 flex items-center pr-3 z-10";
 var tableContainer = "rounded-xl shadow-sm border border-secondary-200 overflow-hidden";
 var tableHeaderRow = "bg-secondary-50 border-b border-secondary-200 text-xs uppercase tracking-wider font-semibold text-secondary-500";
-function tableHeaderCell(className) {
-  return clsx11("px-4 py-4 align-top", className);
+function tableHeaderCell(className, density = "normal") {
+  return clsx11(densityStyles[density].header, "align-top", className);
 }
 var tableBody = "divide-y divide-secondary-100";
 var tableRow = "hover:bg-secondary-50/50 transition-colors duration-150 group";
-function tableCell(className) {
-  return clsx11("px-4 py-3 align-middle", className);
+var tableRowClickable = "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-inset";
+var tableCardClickable = "cursor-pointer rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
+function tableCell(className, density = "normal") {
+  return clsx11(densityStyles[density].cell, "align-middle", className);
 }
 var tableActionsCell = "flex items-center justify-center gap-2";
 var tableCellText = "text-secondary-700 font-medium";
@@ -3484,21 +3514,88 @@ function ITConfirmDialog({
   ] });
 }
 
-// src/types/table.types.ts
-var variantStyles = {
-  default: "",
-  striped: "",
-  bordered: "border border-gray-200"
-};
-var sizeStyles = {
-  sm: "text-xs",
-  md: "text-sm",
-  lg: "text-lg"
-};
+// src/hooks/useElementSize.ts
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef9, useState as useState14 } from "react";
+function useElementSize() {
+  const ref = useRef9(null);
+  const [size, setSize] = useState14({ width: 0, height: 0 });
+  useLayoutEffect2(() => {
+    const element = ref.current;
+    if (!element) return;
+    const update = () => {
+      const rect = element.getBoundingClientRect();
+      setSize({ width: rect.width, height: rect.height });
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return { ref, width: size.width, height: size.height };
+}
+
+// src/hooks/useVirtualRows.ts
+import { useCallback as useCallback6, useLayoutEffect as useLayoutEffect3, useRef as useRef10, useState as useState15 } from "react";
+function useVirtualRows({
+  count,
+  rowHeight,
+  overscan = 5,
+  enabled = true,
+  resetKey
+}) {
+  const scrollRef = useRef10(null);
+  const [scrollTop, setScrollTop] = useState15(0);
+  const [viewportHeight, setViewportHeight] = useState15(0);
+  const scrollToTop = useCallback6(() => {
+    setScrollTop(0);
+    const element = scrollRef.current;
+    if (element) element.scrollTop = 0;
+  }, []);
+  useLayoutEffect3(() => {
+    if (!enabled) return;
+    const element = scrollRef.current;
+    if (!element) return;
+    const onScroll = () => setScrollTop(element.scrollTop);
+    const measure = () => setViewportHeight(element.clientHeight);
+    measure();
+    setScrollTop(element.scrollTop);
+    element.addEventListener("scroll", onScroll, { passive: true });
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => {
+      element.removeEventListener("scroll", onScroll);
+      observer.disconnect();
+    };
+  }, [enabled]);
+  useLayoutEffect3(() => {
+    if (!enabled) return;
+    const element = scrollRef.current;
+    if (element) element.scrollTop = 0;
+    setScrollTop(0);
+  }, [resetKey, enabled]);
+  const valid = enabled && rowHeight > 0 && count > 0;
+  const safeScrollTop = valid ? scrollTop : 0;
+  const startIndex = valid ? Math.min(count - 1, Math.max(0, Math.floor(safeScrollTop / rowHeight) - overscan)) : 0;
+  const endIndex = valid ? Math.min(
+    count - 1,
+    Math.ceil((safeScrollTop + viewportHeight) / rowHeight) + overscan
+  ) : Math.max(0, count - 1);
+  const topSpacerHeight = valid ? startIndex * rowHeight : 0;
+  const bottomSpacerHeight = valid ? Math.max(0, (count - 1 - endIndex) * rowHeight) : 0;
+  return {
+    scrollRef,
+    startIndex,
+    endIndex,
+    topSpacerHeight,
+    bottomSpacerHeight,
+    scrollTop: safeScrollTop,
+    scrollToTop
+  };
+}
 
 // src/components/organisms/data-table/dataTable.tsx
 import clsx21 from "clsx";
-import { useState as useState15, useEffect as useEffect7, useCallback as useCallback6, useRef as useRef9 } from "react";
+import { useState as useState17, useEffect as useEffect7, useCallback as useCallback7, useRef as useRef11 } from "react";
 import { FaCheck as FaCheck2, FaSpinner, FaTimes as FaTimes4, FaTable, FaThLarge } from "react-icons/fa";
 import { MdOutlineSwapVert } from "react-icons/md";
 
@@ -3509,7 +3606,7 @@ import { FaChevronLeft as FaChevronLeft2, FaChevronRight as FaChevronRight3 } fr
 
 // src/components/molecules/select/select.tsx
 import clsx19 from "clsx";
-import { useState as useState14 } from "react";
+import { useState as useState16 } from "react";
 import { FaAngleDown } from "react-icons/fa";
 import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function ITSelect({
@@ -3530,8 +3627,8 @@ function ITSelect({
   readOnly = false,
   size = "md"
 }) {
-  const [isFocused, setIsFocused] = useState14(false);
-  const [localTouched, setLocalTouched] = useState14(false);
+  const [isFocused, setIsFocused] = useState16(false);
+  const [localTouched, setLocalTouched] = useState16(false);
   const inputTheme = theme.input || {};
   const isTouched = touched !== void 0 ? touched : localTouched;
   const isEmpty = value === void 0 || value === null || String(value).trim() === "";
@@ -3802,6 +3899,14 @@ var formatCurrencyMX = (value) => {
 var getNestedValue = (obj, path) => {
   return path.split(".").reduce((acc, part) => acc && acc[part], obj);
 };
+var ROW_CLICK_IGNORE_SELECTOR = 'button, a, input, select, textarea, [role="button"], [role="link"], [data-row-click-ignore]';
+function isInteractiveTarget(target, boundary = null) {
+  if (!(target instanceof Element)) return false;
+  const interactive = target.closest(ROW_CLICK_IGNORE_SELECTOR);
+  if (!interactive) return false;
+  if (boundary instanceof Node && interactive === boundary) return false;
+  return true;
+}
 
 // src/components/organisms/data-table/dataTable.tsx
 import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -3827,12 +3932,32 @@ function ITDataTable({
   renderCard,
   defaultView,
   showVerticalBorder = true,
-  verticalBorderClassname
+  verticalBorderClassname,
+  onRowClick,
+  layout = "auto",
+  density = "normal",
+  autoCardBreakpoint = 0,
+  virtualized = false,
+  virtualizedMaxHeight = 400,
+  rowHeight,
+  overscan = 5,
+  stickyHeader = false
 }) {
-  const [viewMode, setViewMode] = useState15(defaultView || "table");
-  const [data, setData] = useState15([]);
-  const [totalItems, setTotalItems] = useState15(0);
-  const [isLoading, setIsLoading] = useState15(fetchOnMount);
+  const [viewMode, setViewMode] = useState17(defaultView || "table");
+  const { ref: rootRef, width: containerWidth } = useElementSize();
+  const [data, setData] = useState17([]);
+  const [totalItems, setTotalItems] = useState17(0);
+  const [isLoading, setIsLoading] = useState17(fetchOnMount);
+  const isFixed = layout === "fixed";
+  const forcedCards = autoCardBreakpoint > 0 && containerWidth > 0 && containerWidth < autoCardBreakpoint;
+  const effectiveView = forcedCards ? "cards" : viewMode;
+  const hasColumnWidths = columns.some((col) => col.width != null);
+  const tableLayoutClass = isFixed ? "w-full text-sm text-left text-secondary-600 transition-opacity duration-300" : "min-w-max w-full text-sm text-left text-secondary-600 transition-opacity duration-300";
+  const isTableVirtual = virtualized && effectiveView === "table";
+  const isStickyHeader = stickyHeader && isTableVirtual;
+  const resolvedRowHeight = rowHeight ?? getRowHeight(size, density);
+  const columnCount = columns.length;
+  const scrollOuterClass = isTableVirtual ? "relative min-h-[200px]" : "overflow-x-auto relative min-h-[200px]";
   const {
     currentPage,
     itemsPerPage,
@@ -3843,15 +3968,29 @@ function ITDataTable({
     handleSort,
     handleItemsPerPageChange
   } = useTableState({ defaultItemsPerPage });
-  const debounceTimerRef = useRef9(null);
-  const hasFetchedRef = useRef9(false);
-  const fetchDataRef = useRef9(fetchData);
+  const {
+    scrollRef,
+    startIndex,
+    endIndex,
+    topSpacerHeight,
+    bottomSpacerHeight
+  } = useVirtualRows({
+    count: data.length,
+    rowHeight: resolvedRowHeight,
+    overscan,
+    enabled: isTableVirtual,
+    resetKey: `${currentPage}-${itemsPerPage}`
+  });
+  const windowData = isTableVirtual ? data.slice(startIndex, endIndex + 1) : data;
+  const debounceTimerRef = useRef11(null);
+  const hasFetchedRef = useRef11(false);
+  const fetchDataRef = useRef11(fetchData);
   fetchDataRef.current = fetchData;
-  const externalFiltersRef = useRef9(externalFilters);
+  const externalFiltersRef = useRef11(externalFilters);
   externalFiltersRef.current = externalFilters;
   const externalKey = JSON.stringify(externalFilters);
   const computedTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
-  const performFetch = useCallback6(async () => {
+  const performFetch = useCallback7(async () => {
     setIsLoading(true);
     try {
       const response = await fetchDataRef.current({
@@ -3872,7 +4011,7 @@ function ITDataTable({
       setIsLoading(false);
     }
   }, [currentPage, itemsPerPage, filters, sortConfig]);
-  const performFetchRef = useRef9(performFetch);
+  const performFetchRef = useRef11(performFetch);
   performFetchRef.current = performFetch;
   useEffect7(() => {
     if (!fetchOnMount && !hasFetchedRef.current) return;
@@ -3993,15 +4132,132 @@ function ITDataTable({
       actionCol?.actions && /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-end gap-2 pt-2 border-t border-slate-100 dark:border-slate-700", children: actionCol.actions(row) })
     ] });
   };
-  const segCtrlClass = (mode) => `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${viewMode === mode ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`;
-  return /* @__PURE__ */ jsxs18("div", { className: clsx21("space-y-4 w-full relative", containerClassName), children: [
+  const segCtrlClass = (mode) => `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${effectiveView === mode ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`;
+  const handleRowClick = (row) => (event) => {
+    if (!onRowClick || isLoading || isInteractiveTarget(event.target, event.currentTarget)) return;
+    onRowClick(row, event);
+  };
+  const handleRowKeyDown = (row) => (event) => {
+    if (!onRowClick || isLoading) return;
+    if (event.target !== event.currentTarget) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onRowClick(row, event);
+  };
+  const tableEl = /* @__PURE__ */ jsxs18(
+    "table",
+    {
+      className: clsx21(
+        tableLayoutClass,
+        showVerticalBorder && "[&_th]:border-r [&_th:last-child]:border-r-0 [&_td]:border-r [&_td:last-child]:border-r-0",
+        showVerticalBorder && (verticalBorderClassname || "[&_th]:border-slate-100 dark:[&_th]:border-slate-700/30 [&_td]:border-slate-100 dark:[&_td]:border-slate-700/30"),
+        isLoading ? "opacity-50" : "opacity-100",
+        variantStyles[variant],
+        sizeStyles[size],
+        className
+      ),
+      style: isFixed ? { tableLayout: "fixed" } : void 0,
+      "aria-rowcount": isTableVirtual ? data.length + 1 : void 0,
+      children: [
+        hasColumnWidths && /* @__PURE__ */ jsx21("colgroup", { children: columns.map((col) => /* @__PURE__ */ jsx21(
+          "col",
+          {
+            style: col.width != null ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : void 0
+          },
+          col.key
+        )) }),
+        /* @__PURE__ */ jsx21("thead", { children: /* @__PURE__ */ jsx21(
+          "tr",
+          {
+            className: clsx21(tableHeaderRow, "dark:text-slate-200"),
+            "aria-rowindex": isTableVirtual ? 1 : void 0,
+            children: columns.map((col) => /* @__PURE__ */ jsx21(
+              "th",
+              {
+                scope: "col",
+                className: clsx21(
+                  tableHeaderCell(col.className, density),
+                  col.align && tableAlignClasses[col.align],
+                  isStickyHeader && "sticky top-0 z-10 bg-secondary-50"
+                ),
+                style: col.minWidth != null || isStickyHeader ? {
+                  ...col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {},
+                  ...isStickyHeader ? { backgroundColor: "var(--color-table-headerBg, #f8fafc)" } : {}
+                } : void 0,
+                children: /* @__PURE__ */ jsxs18("div", { className: isFixed ? "flex flex-col gap-3" : "flex flex-col gap-3 min-w-[150px]", children: [
+                  /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between gap-2", children: [
+                    /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
+                    col.sortable && col.type !== "actions" && /* @__PURE__ */ jsx21(
+                      "button",
+                      {
+                        onClick: () => handleSort(col.key),
+                        disabled: isLoading,
+                        className: `p-1 rounded-md transition-colors ${sortConfig?.key === col.key ? "bg-secondary-200 text-secondary-900" : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"} disabled:opacity-50`,
+                        title: `Ordenar por ${col.label}`,
+                        children: /* @__PURE__ */ jsx21(MdOutlineSwapVert, { className: "w-4 h-4", "aria-hidden": "true" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx21("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
+                ] })
+              },
+              col.key
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ jsx21("tbody", { className: clsx21(tableBody, "dark:divide-slate-700/30"), children: data.length > 0 ? /* @__PURE__ */ jsxs18(Fragment4, { children: [
+          isTableVirtual && topSpacerHeight > 0 && /* @__PURE__ */ jsx21("tr", { "aria-hidden": "true", style: { height: topSpacerHeight }, children: /* @__PURE__ */ jsx21("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) }),
+          windowData.map((row, windowIndex) => {
+            const absoluteIndex = isTableVirtual ? startIndex + windowIndex : windowIndex;
+            return /* @__PURE__ */ jsx21(
+              "tr",
+              {
+                "aria-rowindex": isTableVirtual ? absoluteIndex + 2 : void 0,
+                className: clsx21(
+                  tableRow,
+                  variant === "striped" && absoluteIndex % 2 === 0 && "bg-secondary-50/40 dark:bg-slate-800/20",
+                  onRowClick && !isLoading && tableRowClickable
+                ),
+                tabIndex: onRowClick && !isLoading ? 0 : void 0,
+                onClick: onRowClick && !isLoading ? handleRowClick(row) : void 0,
+                onKeyDown: onRowClick && !isLoading ? handleRowKeyDown(row) : void 0,
+                children: columns.map((col) => {
+                  const rawValue = getNestedValue2(row, col.key);
+                  const truncateTitle = col.truncate && (typeof rawValue === "string" || typeof rawValue === "number") ? String(rawValue) : void 0;
+                  return /* @__PURE__ */ jsx21(
+                    "td",
+                    {
+                      className: clsx21(
+                        tableCell(col.className, density),
+                        col.align && tableAlignClasses[col.align]
+                      ),
+                      style: col.minWidth != null ? { minWidth: `${col.minWidth}px` } : void 0,
+                      title: truncateTitle,
+                      children: col.type === "actions" ? /* @__PURE__ */ jsx21("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx21("div", { className: clsx21(tableCellText, col.truncate && "truncate"), children: renderCellContent(col, row) })
+                    },
+                    `${absoluteIndex}-${col.key}`
+                  );
+                })
+              },
+              absoluteIndex
+            );
+          }),
+          isTableVirtual && bottomSpacerHeight > 0 && /* @__PURE__ */ jsx21("tr", { "aria-hidden": "true", style: { height: bottomSpacerHeight }, children: /* @__PURE__ */ jsx21("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) })
+        ] }) : /* @__PURE__ */ jsx21("tr", { children: /* @__PURE__ */ jsx21("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: !isLoading && /* @__PURE__ */ jsxs18("div", { className: tableEmptyContent, children: [
+          /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
+          /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
+        ] }) }) }) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs18("div", { ref: rootRef, className: clsx21("space-y-4 w-full relative", containerClassName), children: [
     /* @__PURE__ */ jsxs18("div", { className: tableContainer, style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
       title && /* @__PURE__ */ jsxs18("div", { className: "px-6 py-5 flex items-center justify-between", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
         /* @__PURE__ */ jsx21(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
         /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3", children: [
           isLoading && /* @__PURE__ */ jsx21("div", { className: "text-secondary-400", children: loadingIndicator || /* @__PURE__ */ jsx21(FaSpinner, { className: "animate-spin text-primary-500 text-xl" }) }),
           /* @__PURE__ */ jsxs18("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
-            /* @__PURE__ */ jsxs18("button", { onClick: () => setViewMode("table"), className: segCtrlClass("table"), children: [
+            /* @__PURE__ */ jsxs18("button", { onClick: () => setViewMode("table"), disabled: forcedCards, className: segCtrlClass("table"), children: [
               /* @__PURE__ */ jsx21(FaTable, { size: 11 }),
               "Table"
             ] }),
@@ -4013,7 +4269,7 @@ function ITDataTable({
         ] })
       ] }),
       !title && /* @__PURE__ */ jsx21("div", { className: "flex justify-end px-4 pt-3", children: /* @__PURE__ */ jsxs18("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
-        /* @__PURE__ */ jsxs18("button", { onClick: () => setViewMode("table"), className: segCtrlClass("table"), children: [
+        /* @__PURE__ */ jsxs18("button", { onClick: () => setViewMode("table"), disabled: forcedCards, className: segCtrlClass("table"), children: [
           /* @__PURE__ */ jsx21(FaTable, { size: 11 }),
           "Table"
         ] }),
@@ -4022,50 +4278,34 @@ function ITDataTable({
           "Cards"
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxs18("div", { className: "overflow-x-auto relative min-h-[200px]", children: [
+      /* @__PURE__ */ jsxs18("div", { className: scrollOuterClass, children: [
         isLoading && /* @__PURE__ */ jsx21("div", { className: "absolute inset-0 z-20 flex items-center justify-center bg-white/40 backdrop-blur-[2px] transition-all duration-300", children: /* @__PURE__ */ jsx21("div", { className: "flex flex-col items-center gap-3 p-6 rounded-2xl shadow-xl border border-secondary-100 animate-in fade-in zoom-in duration-300", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: loadingIndicator || /* @__PURE__ */ jsxs18(Fragment4, { children: [
           /* @__PURE__ */ jsx21(FaSpinner, { className: "animate-spin text-primary-500 text-4xl" }),
           /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-sm font-semibold text-secondary-600 animate-pulse", children: "Cargando datos..." })
         ] }) }) }),
-        viewMode === "cards" ? /* @__PURE__ */ jsx21("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: data.length > 0 ? data.map((row, i) => /* @__PURE__ */ jsx21("div", { children: renderCard ? renderCard(row) : renderDefaultCard(row) }, i)) : !isLoading && /* @__PURE__ */ jsxs18("div", { className: clsx21(tableEmptyContent, "py-12"), children: [
+        effectiveView === "cards" ? /* @__PURE__ */ jsx21("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: data.length > 0 ? data.map((row, i) => /* @__PURE__ */ jsx21(
+          "div",
+          {
+            className: clsx21(onRowClick && !isLoading && tableCardClickable),
+            role: onRowClick && !isLoading ? "button" : void 0,
+            tabIndex: onRowClick && !isLoading ? 0 : void 0,
+            onClick: onRowClick && !isLoading ? handleRowClick(row) : void 0,
+            onKeyDown: onRowClick && !isLoading ? handleRowKeyDown(row) : void 0,
+            children: renderCard ? renderCard(row) : renderDefaultCard(row)
+          },
+          i
+        )) : !isLoading && /* @__PURE__ */ jsxs18("div", { className: clsx21(tableEmptyContent, "py-12"), children: [
           /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
           /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
-        ] }) }) : /* @__PURE__ */ jsxs18(
-          "table",
+        ] }) }) : isTableVirtual ? /* @__PURE__ */ jsx21(
+          "div",
           {
-            className: clsx21(
-              "min-w-max w-full text-sm text-left text-secondary-600 transition-opacity duration-300",
-              showVerticalBorder && "[&_th]:border-r [&_th:last-child]:border-r-0 [&_td]:border-r [&_td:last-child]:border-r-0",
-              showVerticalBorder && (verticalBorderClassname || "[&_th]:border-slate-100 dark:[&_th]:border-slate-700/30 [&_td]:border-slate-100 dark:[&_td]:border-slate-700/30"),
-              isLoading ? "opacity-50" : "opacity-100",
-              variantStyles[variant],
-              sizeStyles[size],
-              className
-            ),
-            children: [
-              /* @__PURE__ */ jsx21("thead", { children: /* @__PURE__ */ jsx21("tr", { className: clsx21(tableHeaderRow, "dark:text-slate-200"), children: columns.map((col) => /* @__PURE__ */ jsx21("th", { scope: "col", className: tableHeaderCell(col.className), children: /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-3 min-w-[150px]", children: [
-                /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
-                  col.sortable && col.type !== "actions" && /* @__PURE__ */ jsx21(
-                    "button",
-                    {
-                      onClick: () => handleSort(col.key),
-                      disabled: isLoading,
-                      className: `p-1 rounded-md transition-colors ${sortConfig?.key === col.key ? "bg-secondary-200 text-secondary-900" : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"} disabled:opacity-50`,
-                      title: `Ordenar por ${col.label}`,
-                      children: /* @__PURE__ */ jsx21(MdOutlineSwapVert, { className: "w-4 h-4", "aria-hidden": "true" })
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx21("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
-              ] }) }, col.key)) }) }),
-              /* @__PURE__ */ jsx21("tbody", { className: clsx21(tableBody, "dark:divide-slate-700/30"), children: data.length > 0 ? data.map((row, rowIndex) => /* @__PURE__ */ jsx21("tr", { className: clsx21(tableRow, variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20"), children: columns.map((col) => /* @__PURE__ */ jsx21("td", { className: tableCell(col.className), children: col.type === "actions" ? /* @__PURE__ */ jsx21("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx21("div", { className: tableCellText, children: renderCellContent(col, row) }) }, `${rowIndex}-${col.key}`)) }, rowIndex)) : /* @__PURE__ */ jsx21("tr", { children: /* @__PURE__ */ jsx21("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: !isLoading && /* @__PURE__ */ jsxs18("div", { className: tableEmptyContent, children: [
-                /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
-                /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
-              ] }) }) }) })
-            ]
+            ref: scrollRef,
+            className: "overflow-x-auto overflow-y-auto",
+            style: { maxHeight: virtualizedMaxHeight },
+            children: tableEl
           }
-        )
+        ) : tableEl
       ] })
     ] }),
     /* @__PURE__ */ jsx21("div", { className: "rounded-b-xl px-6 py-4", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ jsx21(
@@ -4086,7 +4326,7 @@ function ITDataTable({
 
 // src/components/molecules/date-picker/datePicker.tsx
 import clsx22 from "clsx";
-import React5, { useEffect as useEffect8, useRef as useRef10, useState as useState16 } from "react";
+import React5, { useEffect as useEffect8, useRef as useRef12, useState as useState18 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { FaCalendarAlt } from "react-icons/fa";
 import { isBefore as isBefore2 } from "date-fns";
@@ -4110,11 +4350,11 @@ function ITDatePicker({
   maxDate,
   range = false
 }) {
-  const [isOpen, setIsOpen] = useState16(false);
-  const [inputValue, setInputValue] = useState16("");
-  const [isValidDate, setIsValidDate] = useState16(true);
-  const [internalRange, setInternalRange] = useState16([null, null]);
-  const wrapperRef = useRef10(null);
+  const [isOpen, setIsOpen] = useState18(false);
+  const [inputValue, setInputValue] = useState18("");
+  const [isValidDate, setIsValidDate] = useState18(true);
+  const [internalRange, setInternalRange] = useState18([null, null]);
+  const wrapperRef = useRef12(null);
   const { panelRef, style: panelStyle } = useFloatingPanel(wrapperRef, isOpen, {
     estimatedHeight: 360,
     matchWidth: false
@@ -4339,7 +4579,7 @@ function ITDatePicker({
 
 // src/components/organisms/dialog/dialog.tsx
 import { createPortal as createPortal4 } from "react-dom";
-import { useEffect as useEffect9, useRef as useRef11 } from "react";
+import { useEffect as useEffect9, useRef as useRef13 } from "react";
 import { FaRegTimesCircle } from "react-icons/fa";
 
 // src/components/molecules/form-header/form-header.tsx
@@ -4476,7 +4716,7 @@ function ITDialog({
   useFormHeader = false,
   fullScreen = false
 }) {
-  const modalRef = useRef11(null);
+  const modalRef = useRef13(null);
   useClickOutside_default(modalRef, onClose);
   useEffect9(() => {
     const handleEscape = (event) => {
@@ -4559,7 +4799,7 @@ function ITDivider({
 // src/components/organisms/drawer/drawer.tsx
 import clsx24 from "clsx";
 import { FaTimes as FaTimes6 } from "react-icons/fa";
-import { useRef as useRef12 } from "react";
+import { useRef as useRef14 } from "react";
 import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 function ITDrawer({
   isOpen,
@@ -4571,7 +4811,7 @@ function ITDrawer({
   className,
   style
 }) {
-  const panelRef = useRef12(null);
+  const panelRef = useRef14(null);
   useClickOutside_default(panelRef, onClose);
   return /* @__PURE__ */ jsx26(Fragment6, { children: isOpen && /* @__PURE__ */ jsxs22("div", { className: "fixed inset-0 z-[50] flex", children: [
     /* @__PURE__ */ jsx26("div", { className: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" }),
@@ -4697,14 +4937,14 @@ function ITFlex({
 import { useMemo as useMemo10 } from "react";
 
 // src/components/organisms/form-builder/formBuilder.context.tsx
-import React6, { createContext as createContext2, useContext as useContext2, useState as useState17 } from "react";
+import React6, { createContext as createContext2, useContext as useContext2, useState as useState19 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 var ITFormBuilderContext = createContext2(void 0);
 var ITFormBuilderProvider = ({
   children,
   value
 }) => {
-  const [fieldRegistry, setFieldRegistry] = useState17({});
+  const [fieldRegistry, setFieldRegistry] = useState19({});
   const registerField = React6.useCallback((name, config2) => {
     setFieldRegistry((prev) => ({ ...prev, [name]: config2 }));
   }, []);
@@ -4744,12 +4984,12 @@ var useITFormBuilderContext = () => {
 };
 
 // src/components/organisms/form-builder/fieldRenderer.tsx
-import { memo, useCallback as useCallback7, useEffect as useEffect12, useMemo as useMemo9, useState as useState20, useRef as useRef15 } from "react";
+import { memo, useCallback as useCallback8, useEffect as useEffect12, useMemo as useMemo9, useState as useState22, useRef as useRef17 } from "react";
 import clsx29 from "clsx";
 
 // src/components/molecules/time-picker/timePicker.tsx
 import clsx27 from "clsx";
-import { useEffect as useEffect10, useRef as useRef13, useState as useState18 } from "react";
+import { useEffect as useEffect10, useRef as useRef15, useState as useState20 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 import { FaClock } from "react-icons/fa";
 import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
@@ -4769,12 +5009,12 @@ function ITTimePicker({
   variant = "primary",
   color = "primary"
 }) {
-  const [isOpen, setIsOpen] = useState18(false);
-  const [inputValue, setInputValue] = useState18(value || "");
-  const [isValidTime, setIsValidTime] = useState18(true);
-  const wrapperRef = useRef13(null);
-  const hoursRef = useRef13(null);
-  const minutesRef = useRef13(null);
+  const [isOpen, setIsOpen] = useState20(false);
+  const [inputValue, setInputValue] = useState20(value || "");
+  const [isValidTime, setIsValidTime] = useState20(true);
+  const wrapperRef = useRef15(null);
+  const hoursRef = useRef15(null);
+  const minutesRef = useRef15(null);
   const { panelRef: dropdownRef, style: panelStyle } = useFloatingPanel(
     wrapperRef,
     isOpen && !disabled,
@@ -5003,7 +5243,7 @@ function ITTimePicker({
 }
 
 // src/components/molecules/search-select/search-select.tsx
-import { useState as useState19, useEffect as useEffect11, useRef as useRef14, useMemo as useMemo7 } from "react";
+import { useState as useState21, useEffect as useEffect11, useRef as useRef16, useMemo as useMemo7 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 import clsx28 from "clsx";
 import { FaSearch as FaSearch2, FaTimes as FaTimes7 } from "react-icons/fa";
@@ -5032,13 +5272,13 @@ function ITSearchSelect({
   clearable = true,
   onClear
 }) {
-  const [isOpen, setIsOpen] = useState19(false);
-  const [searchTerm, setSearchTerm] = useState19("");
-  const [isFocused, setIsFocused] = useState19(false);
-  const [localTouched, setLocalTouched] = useState19(false);
-  const containerRef = useRef14(null);
-  const inputWrapperRef = useRef14(null);
-  const timeoutRef = useRef14(null);
+  const [isOpen, setIsOpen] = useState21(false);
+  const [searchTerm, setSearchTerm] = useState21("");
+  const [isFocused, setIsFocused] = useState21(false);
+  const [localTouched, setLocalTouched] = useState21(false);
+  const containerRef = useRef16(null);
+  const inputWrapperRef = useRef16(null);
+  const timeoutRef = useRef16(null);
   const { panelRef, style: panelStyle } = useFloatingPanel(inputWrapperRef, isOpen, {
     estimatedHeight: 260,
     matchWidth: true
@@ -5266,9 +5506,9 @@ var useFieldRules = (config2, dependentValues) => {
 import { FaSpinner as FaSpinner2 } from "react-icons/fa";
 import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 function useAsyncOptions(options, deps) {
-  const [resolved, setResolved] = useState20([]);
-  const [loading, setLoading] = useState20(false);
-  const optionsRef = useRef15(options);
+  const [resolved, setResolved] = useState22([]);
+  const [loading, setLoading] = useState22(false);
+  const optionsRef = useRef17(options);
   optionsRef.current = options;
   useEffect12(() => {
     const opts = optionsRef.current;
@@ -5345,7 +5585,7 @@ var ITFieldRenderer = ({
     options,
     [options, dependentValues]
   );
-  const handleChangeWrapper = useCallback7(
+  const handleChangeWrapper = useCallback8(
     async (val) => {
       const finalValue = val && typeof val === "object" && "target" in val ? val.target.value : val;
       await context.setFieldValue(name, finalValue);
@@ -5807,7 +6047,7 @@ function ITGrid({
 }
 
 // src/components/atoms/image/image.tsx
-import { useState as useState21 } from "react";
+import { useState as useState23 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
 var ITImage = ({
   src,
@@ -5815,7 +6055,7 @@ var ITImage = ({
   className = "",
   fallback = ""
 }) => {
-  const [imageError, setImageError] = useState21(false);
+  const [imageError, setImageError] = useState23(false);
   const handleImageError = () => {
     setImageError(true);
   };
@@ -5845,7 +6085,7 @@ var ITImage = ({
 var image_default = ITImage;
 
 // src/components/organisms/navbar/navbar.tsx
-import { useRef as useRef16, useState as useState22 } from "react";
+import { useRef as useRef18, useState as useState24 } from "react";
 import { FaChevronDown as FaChevronDown3, FaChevronRight as FaChevronRight4, FaUserCircle } from "react-icons/fa";
 import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
 function ITNavbar({
@@ -5860,9 +6100,9 @@ function ITNavbar({
   showSidebarOnMobile = false,
   sidebarItems
 }) {
-  const [isUserMenuOpen, setIsUserMenuOpen] = useState22(false);
-  const [expandedItems, setExpandedItems] = useState22(/* @__PURE__ */ new Set());
-  const userMenuRef = useRef16(null);
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState24(false);
+  const [expandedItems, setExpandedItems] = useState24(/* @__PURE__ */ new Set());
+  const userMenuRef = useRef18(null);
   useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
   const toggleUserMenu = () => {
     setIsUserMenuOpen(!isUserMenuOpen);
@@ -6301,11 +6541,13 @@ function ITPage(props) {
     className,
     children,
     maxWidth = "7xl",
-    noPadding = false
+    noPadding = false,
+    horizontalPadding = "px-4 sm:px-6 lg:px-8"
   } = props;
   const wrapperClass = clsx33(
     "mx-auto w-full",
-    !noPadding && "px-4 sm:px-6 lg:px-8 py-6",
+    !noPadding && horizontalPadding,
+    !noPadding && "py-6",
     `max-w-${maxWidth}`,
     "space-y-8",
     className
@@ -6360,7 +6602,7 @@ function ITPage(props) {
 }
 
 // src/components/atoms/popover/popover.tsx
-import { useState as useState23, useRef as useRef17 } from "react";
+import { useState as useState25, useRef as useRef19 } from "react";
 import clsx34 from "clsx";
 import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
 var positionClasses = {
@@ -6377,10 +6619,10 @@ function ITPopover({
   onClose,
   className
 }) {
-  const [internalOpen, setInternalOpen] = useState23(false);
+  const [internalOpen, setInternalOpen] = useState25(false);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const ref = useRef17(null);
+  const ref = useRef19(null);
   useClickOutside_default(ref, () => {
     if (isControlled) onClose?.();
     else setInternalOpen(false);
@@ -6508,7 +6750,7 @@ function ITRadioGroup({
 
 // src/components/organisms/searchTable/searchTable.tsx
 import clsx38 from "clsx";
-import { useState as useState24 } from "react";
+import { useState as useState26 } from "react";
 
 // src/components/organisms/searchTable/components/SearchInput.tsx
 import { FaSearch as FaSearch3 } from "react-icons/fa";
@@ -7001,7 +7243,7 @@ function ITSearchTable({
   onSave,
   onCancel
 }) {
-  const [itemsPerPage, setItemsPerPage] = useState24(defaultItemsPerPage);
+  const [itemsPerPage, setItemsPerPage] = useState26(defaultItemsPerPage);
   const { searchTerm, handleSearchChange, handleClearSearch } = useDebouncedSearch({
     initialValue: searchTermInitial,
     onSearch: (value) => {
@@ -7164,7 +7406,7 @@ function ITSegmentedControl({
 }
 
 // src/components/organisms/sidebar/sidebar.tsx
-import { useEffect as useEffect13, useRef as useRef18, useState as useState25 } from "react";
+import { useEffect as useEffect13, useRef as useRef20, useState as useState27 } from "react";
 import { FaChevronDown as FaChevronDown4 } from "react-icons/fa";
 import { jsx as jsx55, jsxs as jsxs43 } from "react/jsx-runtime";
 function ITSidebar({
@@ -7174,13 +7416,14 @@ function ITSidebar({
   visibleOnMobile = false,
   onItemClick,
   onSubItemClick,
-  subitemConnector = "dot"
+  subitemConnector = "dot",
+  header
 }) {
-  const [expandedItems, setExpandedItems] = useState25(/* @__PURE__ */ new Set());
-  const [isHovering, setIsHovering] = useState25(false);
-  const sidebarRef = useRef18(null);
-  const hoverTimeoutRef = useRef18(null);
-  const leaveTimeoutRef = useRef18(null);
+  const [expandedItems, setExpandedItems] = useState27(/* @__PURE__ */ new Set());
+  const [isHovering, setIsHovering] = useState27(false);
+  const sidebarRef = useRef20(null);
+  const hoverTimeoutRef = useRef20(null);
+  const leaveTimeoutRef = useRef20(null);
   useEffect13(() => {
     const hoverTimer = hoverTimeoutRef.current;
     const leaveTimer = leaveTimeoutRef.current;
@@ -7245,7 +7488,7 @@ function ITSidebar({
   };
   const isSidebarCollapsed = visibleOnMobile ? false : !isHovering && isCollapsed;
   const sidebarWidth = isSidebarCollapsed ? "w-[88px]" : "w-[280px]";
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsxs43(
     "aside",
     {
       ref: sidebarRef,
@@ -7264,196 +7507,215 @@ function ITSidebar({
         WebkitBackdropFilter: "blur(12px)",
         backdropFilter: "blur(12px)"
       },
-      children: /* @__PURE__ */ jsx55("nav", { className: "flex-1 py-4 overflow-y-auto overflow-x-hidden custom-scrollbar px-4", children: /* @__PURE__ */ jsx55("ul", { className: "space-y-1", children: navigationItems.map((item) => /* @__PURE__ */ jsxs43("li", { className: "relative group/navitem", children: [
-        /* @__PURE__ */ jsxs43(
-          "div",
-          {
-            className: `flex items-center cursor-pointer 
+      children: [
+        header && !isSidebarCollapsed && /* @__PURE__ */ jsx55("div", { className: "px-4 pt-4 pb-1 flex-shrink-0", children: header }),
+        /* @__PURE__ */ jsx55("nav", { "aria-label": "Componentes de la librer\xEDa", className: "flex-1 py-4 overflow-y-auto overflow-x-hidden custom-scrollbar px-4", children: /* @__PURE__ */ jsx55("ul", { className: "space-y-1", children: navigationItems.map((item) => {
+          const hasSubmenu = !!item.subitems && item.subitems.length > 0;
+          const submenuId = `it-sidebar-submenu-${item.id}`;
+          return /* @__PURE__ */ jsxs43("li", { className: "relative group/navitem", children: [
+            /* @__PURE__ */ jsxs43(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                "aria-label": item.label,
+                "aria-expanded": hasSubmenu ? expandedItems.has(item.id) : void 0,
+                "aria-controls": hasSubmenu ? submenuId : void 0,
+                className: `flex items-center cursor-pointer 
                   transition-all duration-300 ease-[cubic-bezier(0.2,0,0,1)]
                   rounded-xl relative overflow-visible
                   ${isSidebarCollapsed ? "justify-center p-2 mb-1" : "justify-between px-3 py-2 mb-0.5"}
                 `,
-            style: {
-              backgroundColor: item.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
-              boxShadow: item.isActive ? "var(--shadow-xs)" : "none",
-              border: item.isActive ? "1px solid var(--it-sidebar-border, var(--color-secondary-200))" : "1px solid transparent"
-            },
-            onMouseEnter: (e) => {
-              if (!item.isActive) e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
-            },
-            onMouseLeave: (e) => {
-              if (!item.isActive) e.currentTarget.style.backgroundColor = "transparent";
-            },
-            onClick: () => handleItemClick(item),
-            children: [
-              item.isActive && !isSidebarCollapsed && /* @__PURE__ */ jsx55(
-                "div",
-                {
-                  className: "absolute left-0 top-1/4 bottom-1/4 w-[3px] rounded-r-full transition-all",
-                  style: { backgroundColor: "var(--it-sidebar-active-icon, var(--color-primary-500))", boxShadow: "0 0 10px var(--it-sidebar-active-icon, var(--color-primary-500))" }
-                }
-              ),
-              /* @__PURE__ */ jsxs43("div", { className: `flex items-center ${!isSidebarCollapsed ? "gap-2.5" : "justify-center"} relative z-10 w-full`, children: [
-                item.icon && /* @__PURE__ */ jsx55(
-                  "div",
-                  {
-                    className: `transition-all duration-300 flex-shrink-0 flex items-center justify-center`,
-                    style: {
-                      color: item.isActive ? "var(--it-sidebar-active-icon, var(--color-primary-500))" : "var(--it-sidebar-icon-color, #9ca3af)",
-                      opacity: item.isActive ? 1 : 0.8,
-                      fontSize: item.isActive ? "1.12rem" : "1.05rem",
-                      filter: item.isActive ? "drop-shadow(0 0 8px rgba(255,255,255,0.2))" : "none"
-                    },
-                    children: item.icon
-                  }
-                ),
-                !isSidebarCollapsed && /* @__PURE__ */ jsx55(
-                  ITText,
-                  {
-                    as: "span",
-                    className: `transition-all duration-300 truncate tracking-wide`,
-                    style: {
-                      color: item.isActive ? "var(--it-sidebar-active-color, #ffffff)" : "var(--it-sidebar-label-color, var(--color-secondary-300))",
-                      fontSize: "0.8rem",
-                      fontWeight: item.isActive ? "600" : "500"
-                    },
-                    children: item.label
-                  }
-                )
-              ] }),
-              !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ jsx55(
-                "div",
-                {
-                  className: `flex-shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "rotate-180" : ""}`,
-                  style: { color: item.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-icon-color, var(--color-secondary-500))", opacity: 0.7 },
-                  children: /* @__PURE__ */ jsx55(FaChevronDown4, { className: "w-3 h-3" })
-                }
-              ),
-              item.badge && /* @__PURE__ */ jsx55(
-                "span",
-                {
-                  className: `
-                      absolute flex items-center justify-center font-bold shadow-md
-                      ${isSidebarCollapsed ? "top-1 right-1 w-2.5 h-2.5 rounded-full ring-2 ring-white" : "right-3 top-1/2 transform -translate-y-1/2 px-1.5 py-0 text-[9px] rounded-full backdrop-blur-sm"}
-                    `,
-                  style: {
-                    backgroundColor: "var(--it-sidebar-badge-bg, var(--color-primary-500))",
-                    color: "var(--it-sidebar-badge-color, #ffffff)",
-                    boxShadow: isSidebarCollapsed ? "0 0 0 2px var(--it-sidebar-bg, var(--color-secondary-900))" : "none"
-                  },
-                  children: isSidebarCollapsed ? "" : item.badge
-                }
-              )
-            ]
-          }
-        ),
-        isSidebarCollapsed && /* @__PURE__ */ jsxs43(
-          "div",
-          {
-            className: "absolute left-full top-0 ml-4 rounded-2xl opacity-0 invisible group-hover/navitem:opacity-100 group-hover/navitem:visible transition-all duration-300 pointer-events-none z-[70] min-w-[220px] overflow-hidden -translate-x-2 group-hover/navitem:translate-x-0 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)]",
-            style: {
-              backgroundColor: "var(--it-sidebar-bg, #ffffff)",
-              border: "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
-              WebkitBackdropFilter: "blur(16px)",
-              backdropFilter: "blur(16px)"
-            },
-            children: [
-              /* @__PURE__ */ jsxs43("div", { className: "px-5 py-4 flex items-center gap-3 font-semibold border-b", style: { borderColor: "var(--it-sidebar-border, var(--color-secondary-200))", color: "var(--it-sidebar-active-color, var(--color-secondary-900))" }, children: [
-                item.icon && /* @__PURE__ */ jsx55("span", { style: { color: "var(--it-sidebar-active-icon, var(--color-primary-500))" }, className: "text-xl drop-shadow-sm", children: item.icon }),
-                /* @__PURE__ */ jsx55(ITText, { as: "span", className: "tracking-wide text-[15px]", children: item.label })
-              ] }),
-              item.subitems && item.subitems.length > 0 ? /* @__PURE__ */ jsx55("div", { className: "py-2", children: item.subitems.map((subitem) => /* @__PURE__ */ jsxs43(
-                "div",
-                {
-                  className: `px-5 py-2.5 text-sm flex items-center gap-3 transition-colors relative`,
-                  children: [
-                    subitem.isActive && subitemConnector === "|" && /* @__PURE__ */ jsx55(
-                      "div",
-                      {
-                        className: "absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full",
-                        style: {
-                          backgroundColor: "var(--it-sidebar-active-icon, var(--color-primary-500))",
-                          boxShadow: "0 0 6px color-mix(in srgb, var(--it-sidebar-active-icon, var(--color-primary-500)) 25%, transparent)"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx55("span", { className: `w-1.5 h-1.5 rounded-full transition-all ${subitem.isActive ? "scale-125" : ""}`, style: { backgroundColor: subitem.isActive ? "var(--it-sidebar-active-icon, var(--color-primary-500))" : "var(--it-sidebar-icon-color, var(--color-secondary-400))" } }),
-                    /* @__PURE__ */ jsx55(ITText, { as: "span", style: { color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))", fontWeight: subitem.isActive ? 600 : 500 }, children: subitem.label })
-                  ]
-                },
-                subitem.id
-              )) }) : /* @__PURE__ */ jsx55(ITText, { as: "div", className: "px-5 py-3 text-sm italic", style: { color: "var(--it-sidebar-label-color, var(--color-secondary-400))" }, children: "No hay submen\xFA" })
-            ]
-          }
-        ),
-        !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ jsx55("div", { className: `overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[500px] opacity-100 mt-1" : "max-h-0 opacity-0"}`, children: /* @__PURE__ */ jsx55(
-          "ul",
-          {
-            className: "ml-4 flex flex-col gap-0 py-0.5",
-            style: {
-              borderLeft: subitemConnector === "|" ? "1px solid var(--it-sidebar-border, var(--color-secondary-200))" : "none"
-            },
-            children: item.subitems.map((subitem) => /* @__PURE__ */ jsx55("li", { className: "relative", children: /* @__PURE__ */ jsxs43(
-              "button",
-              {
-                onClick: () => {
-                  if (subitem.action) subitem.action();
-                  if (onSubItemClick) onSubItemClick(subitem);
-                },
-                className: `flex items-center gap-2 w-full text-left px-3 py-1.5 rounded-xl transition-all duration-300`,
                 style: {
-                  color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))",
-                  backgroundColor: subitem.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
-                  fontSize: "0.78rem",
-                  fontWeight: subitem.isActive ? 600 : 500,
-                  letterSpacing: "0.01em",
-                  marginLeft: subitemConnector === "|" ? "-1px" : "0"
+                  backgroundColor: item.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
+                  boxShadow: item.isActive ? "var(--shadow-xs)" : "none",
+                  border: item.isActive ? "1px solid var(--it-sidebar-border, var(--color-secondary-200))" : "1px solid transparent"
                 },
                 onMouseEnter: (e) => {
-                  if (!subitem.isActive) {
-                    e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
-                    e.currentTarget.style.transform = "translateX(3px)";
-                  }
+                  if (!item.isActive) e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
                 },
                 onMouseLeave: (e) => {
-                  if (!subitem.isActive) {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                    e.currentTarget.style.transform = "translateX(0)";
+                  if (!item.isActive) e.currentTarget.style.backgroundColor = "transparent";
+                },
+                onClick: () => handleItemClick(item),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleItemClick(item);
                   }
                 },
                 children: [
-                  subitem.isActive && subitemConnector === "|" && /* @__PURE__ */ jsx55(
+                  item.isActive && !isSidebarCollapsed && /* @__PURE__ */ jsx55(
                     "div",
                     {
-                      className: "absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full transition-all",
-                      style: {
-                        backgroundColor: "var(--it-sidebar-active-icon, var(--color-primary-500))",
-                        boxShadow: "0 0 6px color-mix(in srgb, var(--it-sidebar-active-icon, var(--color-primary-500)) 25%, transparent)"
+                      className: "absolute left-0 top-1/4 bottom-1/4 w-[3px] rounded-r-full transition-all",
+                      style: { backgroundColor: "var(--it-sidebar-active-icon, var(--color-primary-500))", boxShadow: "0 0 10px var(--it-sidebar-active-icon, var(--color-primary-500))" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs43("div", { className: `flex items-center ${!isSidebarCollapsed ? "gap-2.5" : "justify-center"} relative z-10 w-full`, children: [
+                    item.icon && /* @__PURE__ */ jsx55(
+                      "div",
+                      {
+                        className: `transition-all duration-300 flex-shrink-0 flex items-center justify-center`,
+                        style: {
+                          color: item.isActive ? "var(--it-sidebar-active-icon, var(--color-primary-500))" : "var(--it-sidebar-icon-color, #9ca3af)",
+                          opacity: item.isActive ? 1 : 0.8,
+                          fontSize: item.isActive ? "1.12rem" : "1.05rem",
+                          filter: item.isActive ? "drop-shadow(0 0 8px rgba(255,255,255,0.2))" : "none"
+                        },
+                        children: item.icon
+                      }
+                    ),
+                    !isSidebarCollapsed && /* @__PURE__ */ jsx55(
+                      ITText,
+                      {
+                        as: "span",
+                        className: `transition-all duration-300 truncate tracking-wide`,
+                        style: {
+                          color: item.isActive ? "var(--it-sidebar-active-color, #ffffff)" : "var(--it-sidebar-label-color, var(--color-secondary-300))",
+                          fontSize: "0.8rem",
+                          fontWeight: item.isActive ? "600" : "500"
+                        },
+                        children: item.label
                       }
+                    )
+                  ] }),
+                  !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ jsx55(
+                    "div",
+                    {
+                      className: `flex-shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "rotate-180" : ""}`,
+                      style: { color: item.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-icon-color, var(--color-secondary-500))", opacity: 0.7 },
+                      children: /* @__PURE__ */ jsx55(FaChevronDown4, { className: "w-3 h-3" })
                     }
                   ),
-                  subitemConnector === "dot" && /* @__PURE__ */ jsx55(
+                  item.badge && /* @__PURE__ */ jsx55(
                     "span",
                     {
-                      className: `w-1.5 h-1.5 rounded-full flex-shrink-0 transition-all duration-300 ${subitem.isActive ? "scale-125" : ""}`,
+                      className: `
+                      absolute flex items-center justify-center font-bold shadow-md
+                      ${isSidebarCollapsed ? "top-1 right-1 w-2.5 h-2.5 rounded-full ring-2 ring-white" : "right-3 top-1/2 transform -translate-y-1/2 px-1.5 py-0 text-[9px] rounded-full backdrop-blur-sm"}
+                    `,
                       style: {
-                        backgroundColor: subitem.isActive ? "var(--it-sidebar-active-icon, var(--color-primary-500))" : "var(--it-sidebar-icon-color, var(--color-secondary-400))"
-                      }
+                        backgroundColor: "var(--it-sidebar-badge-bg, var(--color-primary-500))",
+                        color: "var(--it-sidebar-badge-color, #ffffff)",
+                        boxShadow: isSidebarCollapsed ? "0 0 0 2px var(--it-sidebar-bg, var(--color-secondary-900))" : "none"
+                      },
+                      children: isSidebarCollapsed ? "" : item.badge
                     }
-                  ),
-                  /* @__PURE__ */ jsx55(ITText, { as: "span", className: "truncate", children: subitem.label })
+                  )
                 ]
               }
-            ) }, subitem.id))
-          }
-        ) })
-      ] }, item.id)) }) })
+            ),
+            isSidebarCollapsed && /* @__PURE__ */ jsxs43(
+              "div",
+              {
+                className: "absolute left-full top-0 ml-4 rounded-2xl opacity-0 invisible group-hover/navitem:opacity-100 group-hover/navitem:visible transition-all duration-300 pointer-events-none z-[70] min-w-[220px] overflow-hidden -translate-x-2 group-hover/navitem:translate-x-0 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)]",
+                style: {
+                  backgroundColor: "var(--it-sidebar-bg, #ffffff)",
+                  border: "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
+                  WebkitBackdropFilter: "blur(16px)",
+                  backdropFilter: "blur(16px)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs43("div", { className: "px-5 py-4 flex items-center gap-3 font-semibold border-b", style: { borderColor: "var(--it-sidebar-border, var(--color-secondary-200))", color: "var(--it-sidebar-active-color, var(--color-secondary-900))" }, children: [
+                    item.icon && /* @__PURE__ */ jsx55("span", { style: { color: "var(--it-sidebar-active-icon, var(--color-primary-500))" }, className: "text-xl drop-shadow-sm", children: item.icon }),
+                    /* @__PURE__ */ jsx55(ITText, { as: "span", className: "tracking-wide text-[15px]", children: item.label })
+                  ] }),
+                  item.subitems && item.subitems.length > 0 ? /* @__PURE__ */ jsx55("div", { className: "py-2", children: item.subitems.map((subitem) => /* @__PURE__ */ jsxs43(
+                    "div",
+                    {
+                      className: `px-5 py-2.5 text-sm flex items-center gap-3 transition-colors relative`,
+                      children: [
+                        subitem.isActive && subitemConnector === "|" && /* @__PURE__ */ jsx55(
+                          "div",
+                          {
+                            className: "absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full",
+                            style: {
+                              backgroundColor: "var(--it-sidebar-active-icon, var(--color-primary-500))",
+                              boxShadow: "0 0 6px color-mix(in srgb, var(--it-sidebar-active-icon, var(--color-primary-500)) 25%, transparent)"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx55("span", { className: `w-1.5 h-1.5 rounded-full transition-all ${subitem.isActive ? "scale-125" : ""}`, style: { backgroundColor: subitem.isActive ? "var(--it-sidebar-active-icon, var(--color-primary-500))" : "var(--it-sidebar-icon-color, var(--color-secondary-400))" } }),
+                        /* @__PURE__ */ jsx55(ITText, { as: "span", style: { color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))", fontWeight: subitem.isActive ? 600 : 500 }, children: subitem.label })
+                      ]
+                    },
+                    subitem.id
+                  )) }) : /* @__PURE__ */ jsx55(ITText, { as: "div", className: "px-5 py-3 text-sm italic", style: { color: "var(--it-sidebar-label-color, var(--color-secondary-400))" }, children: "No hay submen\xFA" })
+                ]
+              }
+            ),
+            !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ jsx55("div", { id: submenuId, role: "group", "aria-label": item.label, className: `overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[500px] opacity-100 mt-1" : "max-h-0 opacity-0"}`, children: /* @__PURE__ */ jsx55(
+              "ul",
+              {
+                className: "ml-4 flex flex-col gap-0 py-0.5",
+                style: {
+                  borderLeft: subitemConnector === "|" ? "1px solid var(--it-sidebar-border, var(--color-secondary-200))" : "none"
+                },
+                children: item.subitems.map((subitem) => /* @__PURE__ */ jsx55("li", { className: "relative", children: /* @__PURE__ */ jsxs43(
+                  "button",
+                  {
+                    "aria-current": subitem.isActive ? "page" : void 0,
+                    onClick: () => {
+                      if (subitem.action) subitem.action();
+                      if (onSubItemClick) onSubItemClick(subitem);
+                    },
+                    className: `flex items-center gap-2 w-full text-left px-3 py-1.5 rounded-xl transition-all duration-300`,
+                    style: {
+                      color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))",
+                      backgroundColor: subitem.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
+                      fontSize: "0.78rem",
+                      fontWeight: subitem.isActive ? 600 : 500,
+                      letterSpacing: "0.01em",
+                      marginLeft: subitemConnector === "|" ? "-1px" : "0"
+                    },
+                    onMouseEnter: (e) => {
+                      if (!subitem.isActive) {
+                        e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
+                        e.currentTarget.style.transform = "translateX(3px)";
+                      }
+                    },
+                    onMouseLeave: (e) => {
+                      if (!subitem.isActive) {
+                        e.currentTarget.style.backgroundColor = "transparent";
+                        e.currentTarget.style.transform = "translateX(0)";
+                      }
+                    },
+                    children: [
+                      subitem.isActive && subitemConnector === "|" && /* @__PURE__ */ jsx55(
+                        "div",
+                        {
+                          className: "absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full transition-all",
+                          style: {
+                            backgroundColor: "var(--it-sidebar-active-icon, var(--color-primary-500))",
+                            boxShadow: "0 0 6px color-mix(in srgb, var(--it-sidebar-active-icon, var(--color-primary-500)) 25%, transparent)"
+                          }
+                        }
+                      ),
+                      subitemConnector === "dot" && /* @__PURE__ */ jsx55(
+                        "span",
+                        {
+                          className: `w-1.5 h-1.5 rounded-full flex-shrink-0 transition-all duration-300 ${subitem.isActive ? "scale-125" : ""}`,
+                          style: {
+                            backgroundColor: subitem.isActive ? "var(--it-sidebar-active-icon, var(--color-primary-500))" : "var(--it-sidebar-icon-color, var(--color-secondary-400))"
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx55(ITText, { as: "span", className: "truncate", children: subitem.label })
+                    ]
+                  }
+                ) }, subitem.id))
+              }
+            ) })
+          ] }, item.id);
+        }) }) })
+      ]
     }
   );
 }
 
 // src/components/atoms/slide/slide.tsx
-import { useState as useState26, useEffect as useEffect14 } from "react";
+import { useState as useState28, useEffect as useEffect14 } from "react";
 import clsx40 from "clsx";
 import { jsx as jsx56 } from "react/jsx-runtime";
 function ITSlideToggle({
@@ -7468,7 +7730,7 @@ function ITSlideToggle({
   className = ""
 }) {
   const isControlled = controlledIsOn !== void 0;
-  const [internalIsOn, setInternalIsOn] = useState26(initialState);
+  const [internalIsOn, setInternalIsOn] = useState28(initialState);
   useEffect14(() => {
     if (isControlled) {
       setInternalIsOn(controlledIsOn);
@@ -7633,7 +7895,7 @@ function ITStatCard({
 
 // src/components/molecules/table/table.tsx
 import clsx43 from "clsx";
-import React11, { useState as useState27 } from "react";
+import React11, { useState as useState29 } from "react";
 import {
   FaCheck as FaCheck4,
   FaSpinner as FaSpinner3,
@@ -7642,7 +7904,7 @@ import {
   FaThLarge as FaThLarge2
 } from "react-icons/fa";
 import { MdOutlineSwapVert as MdOutlineSwapVert2 } from "react-icons/md";
-import { jsx as jsx59, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx59, jsxs as jsxs46 } from "react/jsx-runtime";
 function ITTable({
   columns,
   data = [],
@@ -7655,9 +7917,24 @@ function ITTable({
   renderCard,
   defaultView = "table",
   showVerticalBorder = true,
-  verticalBorderClassname
+  verticalBorderClassname,
+  onRowClick,
+  layout = "auto",
+  density = "normal",
+  autoCardBreakpoint = 0,
+  virtualized = false,
+  virtualizedMaxHeight = 400,
+  rowHeight,
+  overscan = 5,
+  stickyHeader = false
 }) {
-  const [viewMode, setViewMode] = useState27(defaultView);
+  const [viewMode, setViewMode] = useState29(defaultView);
+  const { ref: rootRef, width: containerWidth } = useElementSize();
+  const isFixed = layout === "fixed";
+  const forcedCards = autoCardBreakpoint > 0 && containerWidth > 0 && containerWidth < autoCardBreakpoint;
+  const effectiveView = forcedCards ? "cards" : viewMode;
+  const hasColumnWidths = columns.some((col) => col.width != null);
+  const tableLayoutClass = isFixed ? "w-full text-sm text-left text-secondary-600" : "min-w-max w-full text-sm text-left text-secondary-600";
   const {
     currentPage,
     itemsPerPage,
@@ -7737,6 +8014,24 @@ function ITTable({
     (currentPage - 1) * itemsPerPage,
     currentPage * itemsPerPage
   );
+  const isTableVirtual = virtualized && effectiveView === "table";
+  const isStickyHeader = stickyHeader && isTableVirtual;
+  const resolvedRowHeight = rowHeight ?? getRowHeight(size, density);
+  const columnCount = columns.length;
+  const {
+    scrollRef,
+    startIndex,
+    endIndex,
+    topSpacerHeight,
+    bottomSpacerHeight
+  } = useVirtualRows({
+    count: currentData.length,
+    rowHeight: resolvedRowHeight,
+    overscan,
+    enabled: isTableVirtual,
+    resetKey: `${currentPage}-${itemsPerPage}`
+  });
+  const windowData = isTableVirtual ? currentData.slice(startIndex, endIndex + 1) : currentData;
   const renderFilterInput = (col) => {
     if (!col.filter) return null;
     if (col.type === "boolean") {
@@ -7868,7 +8163,18 @@ function ITTable({
       actionCol?.actions && /* @__PURE__ */ jsx59("div", { className: "flex items-center justify-end gap-2 pt-2 border-t border-slate-100 dark:border-slate-700", children: actionCol.actions(row) })
     ] });
   };
-  return /* @__PURE__ */ jsx59("div", { className: clsx43("space-y-4 w-full", containerClassName), children: /* @__PURE__ */ jsxs46("div", { className: tableContainer, style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
+  const handleRowClick = (row) => (event) => {
+    if (!onRowClick || isInteractiveTarget(event.target, event.currentTarget)) return;
+    onRowClick(row, event);
+  };
+  const handleRowKeyDown = (row) => (event) => {
+    if (!onRowClick) return;
+    if (event.target !== event.currentTarget) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onRowClick(row, event);
+  };
+  return /* @__PURE__ */ jsx59("div", { ref: rootRef, className: clsx43("space-y-4 w-full", containerClassName), children: /* @__PURE__ */ jsxs46("div", { className: tableContainer, style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
     title && /* @__PURE__ */ jsxs46("div", { className: "px-6 py-5 flex items-center justify-between", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
       /* @__PURE__ */ jsx59(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
       /* @__PURE__ */ jsxs46("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
@@ -7876,7 +8182,8 @@ function ITTable({
           "button",
           {
             onClick: () => setViewMode("table"),
-            className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${viewMode === "table" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
+            disabled: forcedCards,
+            className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${effectiveView === "table" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
             children: [
               /* @__PURE__ */ jsx59(FaTable2, { size: 11 }),
               "Table"
@@ -7887,7 +8194,7 @@ function ITTable({
           "button",
           {
             onClick: () => setViewMode("cards"),
-            className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${viewMode === "cards" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
+            className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${effectiveView === "cards" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
             children: [
               /* @__PURE__ */ jsx59(FaThLarge2, { size: 11 }),
               "Cards"
@@ -7901,7 +8208,8 @@ function ITTable({
         "button",
         {
           onClick: () => setViewMode("table"),
-          className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${viewMode === "table" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
+          disabled: forcedCards,
+          className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${effectiveView === "table" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
           children: [
             /* @__PURE__ */ jsx59(FaTable2, { size: 11 }),
             "Table"
@@ -7912,7 +8220,7 @@ function ITTable({
         "button",
         {
           onClick: () => setViewMode("cards"),
-          className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${viewMode === "cards" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
+          className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${effectiveView === "cards" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
           children: [
             /* @__PURE__ */ jsx59(FaThLarge2, { size: 11 }),
             "Cards"
@@ -7920,64 +8228,131 @@ function ITTable({
         }
       )
     ] }) }),
-    viewMode === "cards" ? /* @__PURE__ */ jsx59("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: currentData.length > 0 ? currentData.map((row, i) => /* @__PURE__ */ jsx59("div", { children: renderCard ? renderCard(row) : renderDefaultCard(row) }, i)) : /* @__PURE__ */ jsxs46("div", { className: clsx43(tableEmptyContent, "py-12"), children: [
+    effectiveView === "cards" ? /* @__PURE__ */ jsx59("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: currentData.length > 0 ? currentData.map((row, i) => /* @__PURE__ */ jsx59(
+      "div",
+      {
+        className: clsx43(onRowClick && tableCardClickable),
+        role: onRowClick ? "button" : void 0,
+        tabIndex: onRowClick ? 0 : void 0,
+        onClick: onRowClick ? handleRowClick(row) : void 0,
+        onKeyDown: onRowClick ? handleRowKeyDown(row) : void 0,
+        children: renderCard ? renderCard(row) : renderDefaultCard(row)
+      },
+      i
+    )) : /* @__PURE__ */ jsxs46("div", { className: clsx43(tableEmptyContent, "py-12"), children: [
       /* @__PURE__ */ jsx59(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
       /* @__PURE__ */ jsx59(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
-    ] }) }) : /* @__PURE__ */ jsx59("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs46(
-      "table",
+    ] }) }) : /* @__PURE__ */ jsx59(
+      "div",
       {
-        className: clsx43(
-          "min-w-max w-full text-sm text-left text-secondary-600",
-          showVerticalBorder && "[&_th]:border-r [&_th:last-child]:border-r-0 [&_td]:border-r [&_td:last-child]:border-r-0",
-          showVerticalBorder && (verticalBorderClassname || "[&_th]:border-slate-100 dark:[&_th]:border-slate-700/30 [&_td]:border-slate-100 dark:[&_td]:border-slate-700/30"),
-          variantStyles[variant],
-          sizeStyles[size]
-        ),
-        children: [
-          /* @__PURE__ */ jsx59("thead", { children: /* @__PURE__ */ jsx59("tr", { className: clsx43(tableHeaderRow, "dark:text-slate-200"), children: columns.map((col) => /* @__PURE__ */ jsx59(
-            "th",
-            {
-              scope: "col",
-              className: tableHeaderCell(col.className),
-              children: /* @__PURE__ */ jsxs46("div", { className: "flex flex-col gap-3 min-w-[150px]", children: [
-                /* @__PURE__ */ jsxs46("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ jsx59(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
-                  col.sortable && col.type !== "actions" && /* @__PURE__ */ jsx59(
-                    "button",
-                    {
-                      onClick: () => handleSort(col.key),
-                      className: `p-1 rounded-md transition-colors ${sortConfig?.key === col.key ? "bg-secondary-200 text-secondary-900" : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"}`,
-                      title: `Ordenar por ${col.label}`,
-                      children: /* @__PURE__ */ jsx59(MdOutlineSwapVert2, { className: "w-4 h-4", "aria-hidden": "true" })
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx59("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
-              ] })
-            },
-            col.key
-          )) }) }),
-          /* @__PURE__ */ jsx59("tbody", { className: clsx43(tableBody, "dark:divide-slate-700/30"), children: currentData.length > 0 ? currentData.map((row, rowIndex) => /* @__PURE__ */ jsx59(
-            "tr",
-            {
-              className: clsx43(tableRow, variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20"),
-              children: columns.map((col) => /* @__PURE__ */ jsx59(
-                "td",
+        ref: isTableVirtual ? scrollRef : void 0,
+        className: isTableVirtual ? "overflow-x-auto overflow-y-auto" : "overflow-x-auto",
+        style: isTableVirtual ? { maxHeight: virtualizedMaxHeight } : void 0,
+        children: /* @__PURE__ */ jsxs46(
+          "table",
+          {
+            className: clsx43(
+              tableLayoutClass,
+              showVerticalBorder && "[&_th]:border-r [&_th:last-child]:border-r-0 [&_td]:border-r [&_td:last-child]:border-r-0",
+              showVerticalBorder && (verticalBorderClassname || "[&_th]:border-slate-100 dark:[&_th]:border-slate-700/30 [&_td]:border-slate-100 dark:[&_td]:border-slate-700/30"),
+              variantStyles[variant],
+              sizeStyles[size]
+            ),
+            style: isFixed ? { tableLayout: "fixed" } : void 0,
+            "aria-rowcount": isTableVirtual ? currentData.length + 1 : void 0,
+            children: [
+              hasColumnWidths && /* @__PURE__ */ jsx59("colgroup", { children: columns.map((col) => /* @__PURE__ */ jsx59(
+                "col",
                 {
-                  className: tableCell(col.className),
-                  children: col.type === "actions" ? /* @__PURE__ */ jsx59("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx59("div", { className: tableCellText, children: renderCellContent(col, row) })
+                  style: col.width != null ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : void 0
                 },
-                `${rowIndex}-${col.key}`
-              ))
-            },
-            rowIndex
-          )) : /* @__PURE__ */ jsx59("tr", { children: /* @__PURE__ */ jsx59("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: /* @__PURE__ */ jsxs46("div", { className: tableEmptyContent, children: [
-            /* @__PURE__ */ jsx59(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
-            /* @__PURE__ */ jsx59(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
-          ] }) }) }) })
-        ]
+                col.key
+              )) }),
+              /* @__PURE__ */ jsx59("thead", { children: /* @__PURE__ */ jsx59(
+                "tr",
+                {
+                  className: clsx43(tableHeaderRow, "dark:text-slate-200"),
+                  "aria-rowindex": isTableVirtual ? 1 : void 0,
+                  children: columns.map((col) => /* @__PURE__ */ jsx59(
+                    "th",
+                    {
+                      scope: "col",
+                      className: clsx43(
+                        tableHeaderCell(col.className, density),
+                        col.align && tableAlignClasses[col.align],
+                        isStickyHeader && "sticky top-0 z-10 bg-secondary-50"
+                      ),
+                      style: col.minWidth != null || isStickyHeader ? {
+                        ...col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {},
+                        ...isStickyHeader ? { backgroundColor: "var(--color-table-headerBg, #f8fafc)" } : {}
+                      } : void 0,
+                      children: /* @__PURE__ */ jsxs46("div", { className: isFixed ? "flex flex-col gap-3" : "flex flex-col gap-3 min-w-[150px]", children: [
+                        /* @__PURE__ */ jsxs46("div", { className: "flex items-center justify-between gap-2", children: [
+                          /* @__PURE__ */ jsx59(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
+                          col.sortable && col.type !== "actions" && /* @__PURE__ */ jsx59(
+                            "button",
+                            {
+                              onClick: () => handleSort(col.key),
+                              className: `p-1 rounded-md transition-colors ${sortConfig?.key === col.key ? "bg-secondary-200 text-secondary-900" : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"}`,
+                              title: `Ordenar por ${col.label}`,
+                              children: /* @__PURE__ */ jsx59(MdOutlineSwapVert2, { className: "w-4 h-4", "aria-hidden": "true" })
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx59("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
+                      ] })
+                    },
+                    col.key
+                  ))
+                }
+              ) }),
+              /* @__PURE__ */ jsx59("tbody", { className: clsx43(tableBody, "dark:divide-slate-700/30"), children: currentData.length > 0 ? /* @__PURE__ */ jsxs46(Fragment9, { children: [
+                isTableVirtual && topSpacerHeight > 0 && /* @__PURE__ */ jsx59("tr", { "aria-hidden": "true", style: { height: topSpacerHeight }, children: /* @__PURE__ */ jsx59("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) }),
+                windowData.map((row, windowIndex) => {
+                  const absoluteIndex = isTableVirtual ? startIndex + windowIndex : windowIndex;
+                  return /* @__PURE__ */ jsx59(
+                    "tr",
+                    {
+                      "aria-rowindex": isTableVirtual ? absoluteIndex + 2 : void 0,
+                      className: clsx43(
+                        tableRow,
+                        variant === "striped" && absoluteIndex % 2 === 0 && "bg-secondary-50/40 dark:bg-slate-800/20",
+                        onRowClick && tableRowClickable
+                      ),
+                      tabIndex: onRowClick ? 0 : void 0,
+                      onClick: onRowClick ? handleRowClick(row) : void 0,
+                      onKeyDown: onRowClick ? handleRowKeyDown(row) : void 0,
+                      children: columns.map((col) => {
+                        const rawValue = getNestedValue(row, col.key);
+                        const truncateTitle = col.truncate && (typeof rawValue === "string" || typeof rawValue === "number") ? String(rawValue) : void 0;
+                        return /* @__PURE__ */ jsx59(
+                          "td",
+                          {
+                            className: clsx43(
+                              tableCell(col.className, density),
+                              col.align && tableAlignClasses[col.align]
+                            ),
+                            style: col.minWidth != null ? { minWidth: `${col.minWidth}px` } : void 0,
+                            title: truncateTitle,
+                            children: col.type === "actions" ? /* @__PURE__ */ jsx59("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx59("div", { className: clsx43(tableCellText, col.truncate && "truncate"), children: renderCellContent(col, row) })
+                          },
+                          `${absoluteIndex}-${col.key}`
+                        );
+                      })
+                    },
+                    absoluteIndex
+                  );
+                }),
+                isTableVirtual && bottomSpacerHeight > 0 && /* @__PURE__ */ jsx59("tr", { "aria-hidden": "true", style: { height: bottomSpacerHeight }, children: /* @__PURE__ */ jsx59("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) })
+              ] }) : /* @__PURE__ */ jsx59("tr", { children: /* @__PURE__ */ jsx59("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: /* @__PURE__ */ jsxs46("div", { className: tableEmptyContent, children: [
+                /* @__PURE__ */ jsx59(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
+                /* @__PURE__ */ jsx59(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
+              ] }) }) }) })
+            ]
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsx59("div", { className: "rounded-b-xl px-6 py-4", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ jsx59(
       ITPagination,
       {
@@ -8043,7 +8418,7 @@ function ITTextarea({
 }
 
 // src/components/molecules/tabs/tabs.tsx
-import { useState as useState28 } from "react";
+import { useState as useState30 } from "react";
 import { clsx as clsx45 } from "clsx";
 import { jsx as jsx61, jsxs as jsxs48 } from "react/jsx-runtime";
 var ITTabs = ({
@@ -8054,7 +8429,7 @@ var ITTabs = ({
   className = "",
   containerClassName = ""
 }) => {
-  const [activeId, setActiveId] = useState28(defaultActiveId || items[0]?.id);
+  const [activeId, setActiveId] = useState30(defaultActiveId || items[0]?.id);
   const handleTabClick = (id, disabled) => {
     if (disabled) return;
     setActiveId(id);
@@ -8154,7 +8529,7 @@ var positionStyles = {
 
 // src/components/organisms/toast/toast.tsx
 import clsx47 from "clsx";
-import { useEffect as useEffect15, useState as useState29 } from "react";
+import { useEffect as useEffect15, useState as useState31 } from "react";
 import { FaTimesCircle as FaTimesCircle2, FaCheckCircle as FaCheckCircle2, FaExclamationTriangle as FaExclamationTriangle3, FaInfoCircle as FaInfoCircle2, FaTimes as FaTimes10 } from "react-icons/fa";
 import { jsx as jsx63, jsxs as jsxs49 } from "react/jsx-runtime";
 function ITToast({
@@ -8164,7 +8539,7 @@ function ITToast({
   position = "top-right",
   onClose
 }) {
-  const [isVisible, setIsVisible] = useState29(true);
+  const [isVisible, setIsVisible] = useState31(true);
   useEffect15(() => {
     const timer = setTimeout(() => {
       setIsVisible(false);
@@ -8232,10 +8607,10 @@ function ITToast({
 
 // src/components/molecules/wysiwyg/wysiwyg.tsx
 import {
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useEffect as useEffect16,
-  useRef as useRef19,
-  useState as useState31
+  useRef as useRef21,
+  useState as useState33
 } from "react";
 import clsx49 from "clsx";
 import {
@@ -8260,7 +8635,7 @@ var toolbarActions = [
 ];
 
 // src/components/atoms/tooltip/tooltip.tsx
-import { useState as useState30 } from "react";
+import { useState as useState32 } from "react";
 import clsx48 from "clsx";
 import { jsx as jsx64, jsxs as jsxs50 } from "react/jsx-runtime";
 var positionClasses2 = {
@@ -8282,7 +8657,7 @@ function ITTooltip({
   delay = 200,
   className
 }) {
-  const [visible, setVisible] = useState30(false);
+  const [visible, setVisible] = useState32(false);
   let timeout;
   const handleMouseEnter = () => {
     timeout = setTimeout(() => setVisible(true), delay);
@@ -8335,12 +8710,12 @@ function ITWysiwyg({
   toolbar = toolbarActions,
   className
 }) {
-  const editorRef = useRef19(null);
-  const focusedRef = useRef19(false);
-  const [active, setActive] = useState31({});
+  const editorRef = useRef21(null);
+  const focusedRef = useRef21(false);
+  const [active, setActive] = useState33({});
   const isLocked = disabled || readOnly;
   const sizeConfig = inputSizeTokens[size] ?? inputSizeTokens.md;
-  const findAncestor = useCallback8(
+  const findAncestor = useCallback9(
     (node, predicate) => {
       const editor = editorRef.current;
       if (!editor) return null;
@@ -8353,7 +8728,7 @@ function ITWysiwyg({
     },
     []
   );
-  const isInlineTag = useCallback8((el, tag) => {
+  const isInlineTag = useCallback9((el, tag) => {
     if (tag === "STRONG" || tag === "B") {
       return el.tagName === "STRONG" || el.tagName === "B";
     }
@@ -8362,7 +8737,7 @@ function ITWysiwyg({
     }
     return el.tagName === tag;
   }, []);
-  const getTextNodesInRange = useCallback8((range) => {
+  const getTextNodesInRange = useCallback9((range) => {
     const editor = editorRef.current;
     if (!editor) return [];
     const out = [];
@@ -8373,7 +8748,7 @@ function ITWysiwyg({
     }
     return out;
   }, []);
-  const placeCaretAtEnd = useCallback8((target) => {
+  const placeCaretAtEnd = useCallback9((target) => {
     const editor = editorRef.current;
     const sel = window.getSelection();
     if (!editor || !sel) return;
@@ -8384,11 +8759,11 @@ function ITWysiwyg({
     sel.addRange(range);
     if (document.activeElement !== editor) editor.focus();
   }, []);
-  const emitChange = useCallback8(() => {
+  const emitChange = useCallback9(() => {
     const editor = editorRef.current;
     if (editor) onChange?.(editor.innerHTML);
   }, [onChange]);
-  const updateActive = useCallback8(() => {
+  const updateActive = useCallback9(() => {
     const editor = editorRef.current;
     const sel = window.getSelection();
     const node = sel?.anchorNode ?? null;
@@ -8407,13 +8782,13 @@ function ITWysiwyg({
       (prev) => JSON.stringify(prev) === JSON.stringify(next) ? prev : next
     );
   }, [findAncestor, isInlineTag]);
-  const unwrapElement = useCallback8((el) => {
+  const unwrapElement = useCallback9((el) => {
     const parent = el.parentNode;
     if (!parent) return;
     while (el.firstChild) parent.insertBefore(el.firstChild, el);
     el.remove();
   }, []);
-  const applyInline = useCallback8(
+  const applyInline = useCallback9(
     (tag, prepare) => {
       const editor = editorRef.current;
       const sel = window.getSelection();
@@ -8495,7 +8870,7 @@ function ITWysiwyg({
       updateActive
     ]
   );
-  const normalizeBlocks = useCallback8(() => {
+  const normalizeBlocks = useCallback9(() => {
     const editor = editorRef.current;
     if (!editor) return;
     const children = Array.from(editor.childNodes);
@@ -8517,7 +8892,7 @@ function ITWysiwyg({
     }
     flush();
   }, []);
-  const convertLiToDiv = useCallback8((li) => {
+  const convertLiToDiv = useCallback9((li) => {
     const list = li.parentElement;
     if (!list || !list.parentNode) return;
     const div = document.createElement("div");
@@ -8525,20 +8900,20 @@ function ITWysiwyg({
     list.parentNode.insertBefore(div, list);
     li.remove();
   }, []);
-  const cleanupEmptyLists = useCallback8(() => {
+  const cleanupEmptyLists = useCallback9(() => {
     const editor = editorRef.current;
     if (!editor) return;
     editor.querySelectorAll("ul, ol").forEach((list) => {
       if (!list.querySelector("li")) list.remove();
     });
   }, []);
-  const retagList = useCallback8((list, type) => {
+  const retagList = useCallback9((list, type) => {
     if (!list.parentNode) return;
     const nl = document.createElement(type);
     while (list.firstChild) nl.appendChild(list.firstChild);
     list.parentNode.replaceChild(nl, list);
   }, []);
-  const toggleList = useCallback8(
+  const toggleList = useCallback9(
     (type) => {
       const editor = editorRef.current;
       const sel = window.getSelection();
@@ -8636,7 +9011,7 @@ function ITWysiwyg({
       updateActive
     ]
   );
-  const clearFormatting = useCallback8(() => {
+  const clearFormatting = useCallback9(() => {
     const editor = editorRef.current;
     const sel = window.getSelection();
     if (!editor || !sel || sel.rangeCount === 0) return;
@@ -8817,7 +9192,7 @@ function ITWysiwyg({
 }
 
 // src/components/organisms/dropfile/dropfile.tsx
-import { useState as useState32, useEffect as useEffect17 } from "react";
+import { useState as useState34, useEffect as useEffect17 } from "react";
 import { useDropzone } from "react-dropzone";
 import clsx50 from "clsx";
 
@@ -8847,7 +9222,7 @@ var UploadStatus = /* @__PURE__ */ ((UploadStatus2) => {
 })(UploadStatus || {});
 
 // src/components/organisms/dropfile/dropfile.tsx
-import { Fragment as Fragment9, jsx as jsx66, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx66, jsxs as jsxs52 } from "react/jsx-runtime";
 var ITDropfile = ({
   onFileSelect,
   onCancel,
@@ -8863,12 +9238,12 @@ var ITDropfile = ({
   buttonLabel = "Subir archivo",
   modalTitle
 }) => {
-  const [isModalOpen, setIsModalOpen] = useState32(false);
-  const [selectedFile, setSelectedFile] = useState32(null);
-  const [fileType, setFileType] = useState32(null);
-  const [imagePreview, setImagePreview] = useState32(initialPreviewUrl || null);
-  const [isConfirmed, setIsConfirmed] = useState32(false);
-  const [internalUploadStatus, setInternalUploadStatus] = useState32(
+  const [isModalOpen, setIsModalOpen] = useState34(false);
+  const [selectedFile, setSelectedFile] = useState34(null);
+  const [fileType, setFileType] = useState34(null);
+  const [imagePreview, setImagePreview] = useState34(initialPreviewUrl || null);
+  const [isConfirmed, setIsConfirmed] = useState34(false);
+  const [internalUploadStatus, setInternalUploadStatus] = useState34(
     initialPreviewUrl ? "subido" /* UPLOADED */ : "pendiente" /* PENDING */
   );
   useEffect17(() => {
@@ -9090,7 +9465,7 @@ var ITDropfile = ({
     ] }),
     showStatusBadge && selectedFile && /* @__PURE__ */ jsx66(StatusBadge, { status: uploadStatus })
   ] });
-  const dropZoneOrPreview = /* @__PURE__ */ jsx66(Fragment9, { children: !selectedFile && !imagePreview ? /* @__PURE__ */ jsxs52(
+  const dropZoneOrPreview = /* @__PURE__ */ jsx66(Fragment10, { children: !selectedFile && !imagePreview ? /* @__PURE__ */ jsxs52(
     "div",
     {
       ...getRootProps(),
@@ -9133,7 +9508,7 @@ var ITDropfile = ({
       /* @__PURE__ */ jsx66("svg", { className: "w-10 h-10 mb-2 opacity-50", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx66("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }),
       /* @__PURE__ */ jsx66(ITText, { as: "span", className: "text-xs", children: "Sin vista previa" })
     ] }) }),
-    /* @__PURE__ */ jsx66("div", { className: "px-3 py-2 bg-white border-t border-secondary-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ jsxs52(Fragment9, { children: [
+    /* @__PURE__ */ jsx66("div", { className: "px-3 py-2 bg-white border-t border-secondary-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ jsxs52(Fragment10, { children: [
       /* @__PURE__ */ jsx66(
         ITButton,
         {
@@ -9216,24 +9591,26 @@ var ITDropfile = ({
 var dropfile_default = ITDropfile;
 
 // src/components/templates/layout/layout.tsx
-import { useState as useState34 } from "react";
+import { useState as useState36 } from "react";
 import clsx51 from "clsx";
 
 // src/components/organisms/topbar/topbar.tsx
 import { FaUserCircle as FaUserCircle2, FaBars } from "react-icons/fa";
-import { useRef as useRef20, useState as useState33 } from "react";
+import { useRef as useRef22, useState as useState35 } from "react";
 import { jsx as jsx67, jsxs as jsxs53 } from "react/jsx-runtime";
 function ITTopBar({
   logo,
   logoText,
+  centerContent,
   userMenu,
+  children,
   showMobileMenuButton,
   onToggleMobileMenu,
   navItems,
   onNavItemClick
 }) {
-  const [isUserMenuOpen, setIsUserMenuOpen] = useState33(false);
-  const userMenuRef = useRef20(null);
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState35(false);
+  const userMenuRef = useRef22(null);
   useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
   return /* @__PURE__ */ jsx67(
     "header",
@@ -9293,101 +9670,105 @@ function ITTopBar({
             item.id
           )) })
         ] }),
-        userMenu && /* @__PURE__ */ jsxs53("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxs53(
-            "button",
-            {
-              type: "button",
-              className: "flex items-center gap-3 rounded-full pl-2 pr-4 py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-secondary-200",
-              style: {
-                backgroundColor: isUserMenuOpen ? "var(--it-topbar-user-hover, #f1f5f9)" : "transparent"
-              },
-              onMouseEnter: (e) => {
-                if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)";
-              },
-              onMouseLeave: (e) => {
-                if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "transparent";
-              },
-              onClick: () => setIsUserMenuOpen(!isUserMenuOpen),
-              children: [
-                /* @__PURE__ */ jsxs53("div", { className: "relative", children: [
-                  userMenu.userImage ? /* @__PURE__ */ jsx67(
-                    "img",
-                    {
-                      className: "w-9 h-9 rounded-full object-cover ring-2 ring-white shadow-sm",
-                      src: userMenu.userImage,
-                      alt: "Current user"
-                    }
-                  ) : /* @__PURE__ */ jsx67("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ jsx67(FaUserCircle2, { className: "w-6 h-6", style: { color: "var(--it-topbar-icon, #94a3b8)" } }) }),
-                  /* @__PURE__ */ jsx67("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
-                ] }),
-                /* @__PURE__ */ jsxs53("div", { className: "hidden sm:flex flex-col text-left py-0.5", children: [
-                  /* @__PURE__ */ jsx67(
-                    ITText,
-                    {
-                      as: "span",
-                      className: "font-semibold text-[0.85rem] leading-tight",
-                      style: { color: "var(--it-topbar-user-text, #0f172a)" },
-                      children: userMenu.userName
-                    }
-                  ),
-                  /* @__PURE__ */ jsx67(
-                    ITText,
-                    {
-                      as: "span",
-                      className: "text-[0.7rem] font-medium",
-                      style: { color: "var(--it-topbar-user-subtitle, #64748b)" },
-                      children: userMenu.userEmail
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs53(
-            "div",
-            {
-              ref: userMenuRef,
-              className: `
-                absolute right-0 mt-3 w-64 rounded-2xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)] z-[70] overflow-hidden transform origin-top-right transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]
-                ${isUserMenuOpen ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-2 pointer-events-none"}
-              `,
-              style: {
-                backgroundColor: "var(--it-topbar-user-dropdown-bg, #ffffff)",
-                border: "1px solid var(--it-topbar-user-dropdown-border, #f1f5f9)"
-              },
-              children: [
-                /* @__PURE__ */ jsxs53("div", { className: "px-5 py-4 border-b", style: { borderColor: "var(--it-topbar-user-dropdown-border, #f1f5f9)", backgroundColor: "var(--it-topbar-user-bg, #f8fafc)" }, children: [
-                  /* @__PURE__ */ jsx67(ITText, { as: "span", className: "block font-bold text-[0.9rem]", style: { color: "var(--it-topbar-user-text, #0f172a)" }, children: userMenu.userName }),
-                  /* @__PURE__ */ jsx67(ITText, { as: "span", className: "block text-xs font-medium truncate mt-0.5", style: { color: "var(--it-topbar-user-subtitle, #64748b)" }, children: userMenu.userEmail })
-                ] }),
-                /* @__PURE__ */ jsx67("ul", { className: "py-2", children: userMenu.menuItems.map((m, i) => {
-                  const isDestructive = m.label.toLowerCase().includes("salir") || m.label.toLowerCase().includes("cerrar") || m.label.toLowerCase().includes("logout");
-                  return /* @__PURE__ */ jsxs53("li", { className: "px-2", children: [
-                    i === userMenu.menuItems.length - 1 && isDestructive && i > 0 && /* @__PURE__ */ jsx67("div", { className: "h-px bg-slate-100 my-1 mx-2" }),
+        centerContent && /* @__PURE__ */ jsx67("div", { className: "hidden lg:flex flex-1 min-w-0 items-center justify-center px-4", children: /* @__PURE__ */ jsx67("div", { className: "w-full max-w-[420px]", children: centerContent }) }),
+        (children || userMenu) && /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-2", children: [
+          children,
+          userMenu && /* @__PURE__ */ jsxs53("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs53(
+              "button",
+              {
+                type: "button",
+                className: "flex items-center gap-3 rounded-full pl-2 pr-4 py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-secondary-200",
+                style: {
+                  backgroundColor: isUserMenuOpen ? "var(--it-topbar-user-hover, #f1f5f9)" : "transparent"
+                },
+                onMouseEnter: (e) => {
+                  if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)";
+                },
+                onMouseLeave: (e) => {
+                  if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "transparent";
+                },
+                onClick: () => setIsUserMenuOpen(!isUserMenuOpen),
+                children: [
+                  /* @__PURE__ */ jsxs53("div", { className: "relative", children: [
+                    userMenu.userImage ? /* @__PURE__ */ jsx67(
+                      "img",
+                      {
+                        className: "w-9 h-9 rounded-full object-cover ring-2 ring-white shadow-sm",
+                        src: userMenu.userImage,
+                        alt: "Current user"
+                      }
+                    ) : /* @__PURE__ */ jsx67("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ jsx67(FaUserCircle2, { className: "w-6 h-6", style: { color: "var(--it-topbar-icon, #94a3b8)" } }) }),
+                    /* @__PURE__ */ jsx67("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
+                  ] }),
+                  /* @__PURE__ */ jsxs53("div", { className: "hidden sm:flex flex-col text-left py-0.5", children: [
                     /* @__PURE__ */ jsx67(
-                      "button",
+                      ITText,
                       {
-                        onClick: () => {
-                          m.onClick();
-                          setIsUserMenuOpen(false);
-                        },
-                        className: "block w-full text-left px-3 py-2.5 rounded-xl text-[0.875rem] font-medium transition-colors duration-150",
-                        style: { color: isDestructive ? "var(--color-danger-500)" : "var(--it-topbar-user-text, #334155)" },
-                        onMouseEnter: (e) => {
-                          e.currentTarget.style.backgroundColor = isDestructive ? "var(--color-danger-50)" : "var(--it-topbar-user-item-hover, #f8fafc)";
-                        },
-                        onMouseLeave: (e) => {
-                          e.currentTarget.style.backgroundColor = "transparent";
-                        },
-                        children: /* @__PURE__ */ jsx67(ITText, { as: "span", children: m.label })
+                        as: "span",
+                        className: "font-semibold text-[0.85rem] leading-tight",
+                        style: { color: "var(--it-topbar-user-text, #0f172a)" },
+                        children: userMenu.userName
+                      }
+                    ),
+                    /* @__PURE__ */ jsx67(
+                      ITText,
+                      {
+                        as: "span",
+                        className: "text-[0.7rem] font-medium",
+                        style: { color: "var(--it-topbar-user-subtitle, #64748b)" },
+                        children: userMenu.userEmail
                       }
                     )
-                  ] }, i);
-                }) })
-              ]
-            }
-          )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs53(
+              "div",
+              {
+                ref: userMenuRef,
+                className: `
+                    absolute right-0 mt-3 w-64 rounded-2xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)] z-[70] overflow-hidden transform origin-top-right transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]
+                    ${isUserMenuOpen ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-2 pointer-events-none"}
+                  `,
+                style: {
+                  backgroundColor: "var(--it-topbar-user-dropdown-bg, #ffffff)",
+                  border: "1px solid var(--it-topbar-user-dropdown-border, #f1f5f9)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs53("div", { className: "px-5 py-4 border-b", style: { borderColor: "var(--it-topbar-user-dropdown-border, #f1f5f9)", backgroundColor: "var(--it-topbar-user-bg, #f8fafc)" }, children: [
+                    /* @__PURE__ */ jsx67(ITText, { as: "span", className: "block font-bold text-[0.9rem]", style: { color: "var(--it-topbar-user-text, #0f172a)" }, children: userMenu.userName }),
+                    /* @__PURE__ */ jsx67(ITText, { as: "span", className: "block text-xs font-medium truncate mt-0.5", style: { color: "var(--it-topbar-user-subtitle, #64748b)" }, children: userMenu.userEmail })
+                  ] }),
+                  /* @__PURE__ */ jsx67("ul", { className: "py-2", children: userMenu.menuItems.map((m, i) => {
+                    const isDestructive = m.label.toLowerCase().includes("salir") || m.label.toLowerCase().includes("cerrar") || m.label.toLowerCase().includes("logout");
+                    return /* @__PURE__ */ jsxs53("li", { className: "px-2", children: [
+                      i === userMenu.menuItems.length - 1 && isDestructive && i > 0 && /* @__PURE__ */ jsx67("div", { className: "h-px bg-slate-100 my-1 mx-2" }),
+                      /* @__PURE__ */ jsx67(
+                        "button",
+                        {
+                          onClick: () => {
+                            m.onClick();
+                            setIsUserMenuOpen(false);
+                          },
+                          className: "block w-full text-left px-3 py-2.5 rounded-xl text-[0.875rem] font-medium transition-colors duration-150",
+                          style: { color: isDestructive ? "var(--color-danger-500)" : "var(--it-topbar-user-text, #334155)" },
+                          onMouseEnter: (e) => {
+                            e.currentTarget.style.backgroundColor = isDestructive ? "var(--color-danger-50)" : "var(--it-topbar-user-item-hover, #f8fafc)";
+                          },
+                          onMouseLeave: (e) => {
+                            e.currentTarget.style.backgroundColor = "transparent";
+                          },
+                          children: /* @__PURE__ */ jsx67(ITText, { as: "span", children: m.label })
+                        }
+                      )
+                    ] }, i);
+                  }) })
+                ]
+              }
+            )
+          ] })
         ] })
       ] })
     }
@@ -9403,8 +9784,8 @@ function ITLayout({
   className = "",
   contentClassName = ""
 }) {
-  const [internalCollapsed, setInternalCollapsed] = useState34(true);
-  const [mobileSidebarOpen, setMobileSidebarOpen] = useState34(false);
+  const [internalCollapsed, setInternalCollapsed] = useState36(true);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState36(false);
   const isControlled = sidebar.isCollapsed !== void 0;
   const desktopCollapsed = isControlled ? sidebar.isCollapsed : internalCollapsed;
   const handleToggleCollapse = isControlled ? sidebar.onToggleCollapse ?? (() => {
@@ -9426,7 +9807,12 @@ function ITLayout({
         style: { backgroundColor: layoutTokens.backgroundColor },
         children: [
           /* @__PURE__ */ jsxs54("div", { className: "hidden lg:block relative z-40 h-full", children: [
-            /* @__PURE__ */ jsx68("div", { className: "w-[88px] h-full flex-shrink-0" }),
+            /* @__PURE__ */ jsx68(
+              "div",
+              {
+                className: `${desktopCollapsed ? "w-[88px]" : "w-[280px]"} h-full flex-shrink-0`
+              }
+            ),
             /* @__PURE__ */ jsx68("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ jsx68(
               ITSidebar,
               {
@@ -9558,7 +9944,7 @@ function ITLoader({
 
 // src/components/molecules/stepper/stepper.tsx
 import clsx52 from "clsx";
-import { useEffect as useEffect18, useRef as useRef21, useState as useState35 } from "react";
+import { useEffect as useEffect18, useRef as useRef23, useState as useState37 } from "react";
 import { FaChevronLeft as FaChevronLeft4, FaChevronRight as FaChevronRight5, FaCheck as FaCheck5 } from "react-icons/fa";
 import { jsx as jsx70, jsxs as jsxs55 } from "react/jsx-runtime";
 function ITStepper({
@@ -9575,9 +9961,9 @@ function ITStepper({
   maxContentHeight = "400px",
   color = "primary"
 }) {
-  const [direction, setDirection] = useState35("next");
-  const contentRef = useRef21(null);
-  const progressRef = useRef21(null);
+  const [direction, setDirection] = useState37("next");
+  const contentRef = useRef23(null);
+  const progressRef = useRef23(null);
   const isThemeColor = color in theme.colors;
   const resolvedColor = isThemeColor ? theme.colors[color][500] : color;
   useEffect18(() => {
@@ -9754,7 +10140,7 @@ function ITStepper({
 }
 
 // src/components/theme-provider/themeProvider.tsx
-import { useState as useState36, useEffect as useEffect19, useLayoutEffect as useLayoutEffect2 } from "react";
+import { useState as useState38, useEffect as useEffect19, useLayoutEffect as useLayoutEffect4 } from "react";
 import { MdPalette, MdClose, MdRefresh } from "react-icons/md";
 
 // src/components/theme-provider/themePresets.ts
@@ -10019,7 +10405,7 @@ function ITThemeProvider({
   radius,
   shadow
 }) {
-  const [palette2, setPaletteState] = useState36(() => {
+  const [palette2, setPaletteState] = useState38(() => {
     const basePalette = {
       ...DEFAULT_PALETTE,
       ...theme2,
@@ -10045,8 +10431,8 @@ function ITThemeProvider({
     }
     return basePalette;
   });
-  const [isOpen, setIsOpen] = useState36(false);
-  const [customPresets, setCustomPresets] = useState36(() => {
+  const [isOpen, setIsOpen] = useState38(false);
+  const [customPresets, setCustomPresets] = useState38(() => {
     try {
       const saved = localStorage.getItem("it-theme-custom-presets");
       return saved ? JSON.parse(saved) : [];
@@ -10055,8 +10441,8 @@ function ITThemeProvider({
       return [];
     }
   });
-  const [newPresetName, setNewPresetName] = useState36("");
-  const [isSavingPreset, setIsSavingPreset] = useState36(false);
+  const [newPresetName, setNewPresetName] = useState38("");
+  const [isSavingPreset, setIsSavingPreset] = useState38(false);
   const handleSavePreset = () => {
     if (!newPresetName.trim()) return;
     const newPreset = {
@@ -10075,8 +10461,8 @@ function ITThemeProvider({
     setCustomPresets(updated);
     localStorage.setItem("it-theme-custom-presets", JSON.stringify(updated));
   };
-  const [resolvedTheme, setResolvedTheme] = useState36("light");
-  const [darkModeMode, setDarkModeMode] = useState36(
+  const [resolvedTheme, setResolvedTheme] = useState38("light");
+  const [darkModeMode, setDarkModeMode] = useState38(
     () => {
       const saved = localStorage.getItem("it-theme-dark-mode");
       if (saved === "light" || saved === "dark" || saved === "system") {
@@ -10120,7 +10506,7 @@ function ITThemeProvider({
       });
     }
   }, [theme2, showFab]);
-  useLayoutEffect2(() => {
+  useLayoutEffect4(() => {
     const root = document.documentElement;
     const scale = typeof density === "number" && isFinite(density) ? Math.min(Math.max(density, 0.5), 1.5) : 1;
     root.style.setProperty("--it-density", String(scale));
@@ -10130,7 +10516,7 @@ function ITThemeProvider({
       root.style.fontSize = "";
     };
   }, [density]);
-  useLayoutEffect2(() => {
+  useLayoutEffect4(() => {
     const root = document.documentElement;
     const radiusTokens = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
     if (typeof radius === "number" && isFinite(radius)) {