@axzydev/axzy_ui_system 1.3.1 → 1.3.2

package/dist/index.cjs

@@ -2119,6 +2119,34 @@ var import_react10 = require("react");
 
 // src/utils/styles.ts
 var import_clsx11 = __toESM(require("clsx"), 1);
+
+// 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 {
@@ -2148,13 +2176,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 (0, import_clsx11.default)("px-4 py-4 align-top", className);
+function tableHeaderCell(className, density = "normal") {
+  return (0, import_clsx11.default)(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 (0, import_clsx11.default)("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 (0, import_clsx11.default)(densityStyles[density].cell, "align-middle", className);
 }
 var tableActionsCell = "flex items-center justify-center gap-2";
 var tableCellText = "text-secondary-700 font-medium";
@@ -3571,32 +3601,99 @@ 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
+var import_react15 = require("react");
+function useElementSize() {
+  const ref = (0, import_react15.useRef)(null);
+  const [size, setSize] = (0, import_react15.useState)({ width: 0, height: 0 });
+  (0, import_react15.useLayoutEffect)(() => {
+    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
+var import_react16 = require("react");
+function useVirtualRows({
+  count,
+  rowHeight,
+  overscan = 5,
+  enabled = true,
+  resetKey
+}) {
+  const scrollRef = (0, import_react16.useRef)(null);
+  const [scrollTop, setScrollTop] = (0, import_react16.useState)(0);
+  const [viewportHeight, setViewportHeight] = (0, import_react16.useState)(0);
+  const scrollToTop = (0, import_react16.useCallback)(() => {
+    setScrollTop(0);
+    const element = scrollRef.current;
+    if (element) element.scrollTop = 0;
+  }, []);
+  (0, import_react16.useLayoutEffect)(() => {
+    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]);
+  (0, import_react16.useLayoutEffect)(() => {
+    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
 var import_clsx21 = __toESM(require("clsx"), 1);
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_fa11 = require("react-icons/fa");
 var import_md = require("react-icons/md");
 
 // src/components/molecules/pagination/pagination.tsx
-var import_react16 = __toESM(require("react"), 1);
+var import_react18 = __toESM(require("react"), 1);
 var import_clsx20 = __toESM(require("clsx"), 1);
 var import_fa10 = require("react-icons/fa");
 
 // src/components/molecules/select/select.tsx
 var import_clsx19 = __toESM(require("clsx"), 1);
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_fa9 = require("react-icons/fa");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function ITSelect({
@@ -3617,8 +3714,8 @@ function ITSelect({
   readOnly = false,
   size = "md"
 }) {
-  const [isFocused, setIsFocused] = (0, import_react15.useState)(false);
-  const [localTouched, setLocalTouched] = (0, import_react15.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react17.useState)(false);
+  const [localTouched, setLocalTouched] = (0, import_react17.useState)(false);
   const inputTheme = theme.input || {};
   const isTouched = touched !== void 0 ? touched : localTouched;
   const isEmpty = value === void 0 || value === null || String(value).trim() === "";
@@ -3712,7 +3809,7 @@ var usePagination = ({
   currentPage,
   siblingCount = 1
 }) => {
-  return import_react16.default.useMemo(() => {
+  return import_react18.default.useMemo(() => {
     const totalPageNumbers = siblingCount + 5;
     if (totalPageNumbers >= totalPages) {
       return Array.from({ length: totalPages }, (_, i) => i + 1);
@@ -3889,6 +3986,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
 var import_jsx_runtime21 = require("react/jsx-runtime");
@@ -3914,12 +4019,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] = (0, import_react17.useState)(defaultView || "table");
-  const [data, setData] = (0, import_react17.useState)([]);
-  const [totalItems, setTotalItems] = (0, import_react17.useState)(0);
-  const [isLoading, setIsLoading] = (0, import_react17.useState)(fetchOnMount);
+  const [viewMode, setViewMode] = (0, import_react19.useState)(defaultView || "table");
+  const { ref: rootRef, width: containerWidth } = useElementSize();
+  const [data, setData] = (0, import_react19.useState)([]);
+  const [totalItems, setTotalItems] = (0, import_react19.useState)(0);
+  const [isLoading, setIsLoading] = (0, import_react19.useState)(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,
@@ -3930,15 +4055,29 @@ function ITDataTable({
     handleSort,
     handleItemsPerPageChange
   } = useTableState({ defaultItemsPerPage });
-  const debounceTimerRef = (0, import_react17.useRef)(null);
-  const hasFetchedRef = (0, import_react17.useRef)(false);
-  const fetchDataRef = (0, import_react17.useRef)(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 = (0, import_react19.useRef)(null);
+  const hasFetchedRef = (0, import_react19.useRef)(false);
+  const fetchDataRef = (0, import_react19.useRef)(fetchData);
   fetchDataRef.current = fetchData;
-  const externalFiltersRef = (0, import_react17.useRef)(externalFilters);
+  const externalFiltersRef = (0, import_react19.useRef)(externalFilters);
   externalFiltersRef.current = externalFilters;
   const externalKey = JSON.stringify(externalFilters);
   const computedTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
-  const performFetch = (0, import_react17.useCallback)(async () => {
+  const performFetch = (0, import_react19.useCallback)(async () => {
     setIsLoading(true);
     try {
       const response = await fetchDataRef.current({
@@ -3959,9 +4098,9 @@ function ITDataTable({
       setIsLoading(false);
     }
   }, [currentPage, itemsPerPage, filters, sortConfig]);
-  const performFetchRef = (0, import_react17.useRef)(performFetch);
+  const performFetchRef = (0, import_react19.useRef)(performFetch);
   performFetchRef.current = performFetch;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!fetchOnMount && !hasFetchedRef.current) return;
     if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
     debounceTimerRef.current = setTimeout(() => {
@@ -4080,15 +4219,132 @@ function ITDataTable({
       actionCol?.actions && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime21.jsxs)("div", { className: (0, import_clsx21.default)("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__ */ (0, import_jsx_runtime21.jsxs)(
+    "table",
+    {
+      className: (0, import_clsx21.default)(
+        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__ */ (0, import_jsx_runtime21.jsx)("colgroup", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "col",
+          {
+            style: col.width != null ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : void 0
+          },
+          col.key
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "tr",
+          {
+            className: (0, import_clsx21.default)(tableHeaderRow, "dark:text-slate-200"),
+            "aria-rowindex": isTableVirtual ? 1 : void 0,
+            children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              "th",
+              {
+                scope: "col",
+                className: (0, import_clsx21.default)(
+                  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__ */ (0, import_jsx_runtime21.jsxs)("div", { className: isFixed ? "flex flex-col gap-3" : "flex flex-col gap-3 min-w-[150px]", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
+                    col.sortable && col.type !== "actions" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      "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__ */ (0, import_jsx_runtime21.jsx)(import_md.MdOutlineSwapVert, { className: "w-4 h-4", "aria-hidden": "true" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
+                ] })
+              },
+              col.key
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tbody", { className: (0, import_clsx21.default)(tableBody, "dark:divide-slate-700/30"), children: data.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+          isTableVirtual && topSpacerHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { "aria-hidden": "true", style: { height: topSpacerHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) }),
+          windowData.map((row, windowIndex) => {
+            const absoluteIndex = isTableVirtual ? startIndex + windowIndex : windowIndex;
+            return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              "tr",
+              {
+                "aria-rowindex": isTableVirtual ? absoluteIndex + 2 : void 0,
+                className: (0, import_clsx21.default)(
+                  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__ */ (0, import_jsx_runtime21.jsx)(
+                    "td",
+                    {
+                      className: (0, import_clsx21.default)(
+                        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__ */ (0, import_jsx_runtime21.jsx)("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: (0, import_clsx21.default)(tableCellText, col.truncate && "truncate"), children: renderCellContent(col, row) })
+                    },
+                    `${absoluteIndex}-${col.key}`
+                  );
+                })
+              },
+              absoluteIndex
+            );
+          }),
+          isTableVirtual && bottomSpacerHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { "aria-hidden": "true", style: { height: bottomSpacerHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: tableEmptyContent, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
+        ] }) }) }) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref: rootRef, className: (0, import_clsx21.default)("space-y-4 w-full relative", containerClassName), children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: tableContainer, style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
       title && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "px-6 py-5 flex items-center justify-between", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-3", children: [
           isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-secondary-400", children: loadingIndicator || /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fa11.FaSpinner, { className: "animate-spin text-primary-500 text-xl" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("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__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: () => setViewMode("table"), className: segCtrlClass("table"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: () => setViewMode("table"), disabled: forcedCards, className: segCtrlClass("table"), children: [
               /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fa11.FaTable, { size: 11 }),
               "Table"
             ] }),
@@ -4100,7 +4356,7 @@ function ITDataTable({
         ] })
       ] }),
       !title && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex justify-end px-4 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("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__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: () => setViewMode("table"), className: segCtrlClass("table"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: () => setViewMode("table"), disabled: forcedCards, className: segCtrlClass("table"), children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fa11.FaTable, { size: 11 }),
           "Table"
         ] }),
@@ -4109,50 +4365,34 @@ function ITDataTable({
           "Cards"
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "overflow-x-auto relative min-h-[200px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: scrollOuterClass, children: [
         isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute inset-0 z-20 flex items-center justify-center bg-white/40 backdrop-blur-[2px] transition-all duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fa11.FaSpinner, { className: "animate-spin text-primary-500 text-4xl" }),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ITText, { as: "span", className: "text-sm font-semibold text-secondary-600 animate-pulse", children: "Cargando datos..." })
         ] }) }) }),
-        viewMode === "cards" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: data.length > 0 ? data.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: renderCard ? renderCard(row) : renderDefaultCard(row) }, i)) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: (0, import_clsx21.default)(tableEmptyContent, "py-12"), children: [
+        effectiveView === "cards" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: data.length > 0 ? data.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "div",
+          {
+            className: (0, import_clsx21.default)(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__ */ (0, import_jsx_runtime21.jsxs)("div", { className: (0, import_clsx21.default)(tableEmptyContent, "py-12"), children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
-        ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-          "table",
+        ] }) }) : isTableVirtual ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "div",
           {
-            className: (0, import_clsx21.default)(
-              "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__ */ (0, import_jsx_runtime21.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: (0, import_clsx21.default)(tableHeaderRow, "dark:text-slate-200"), children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("th", { scope: "col", className: tableHeaderCell(col.className), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-3 min-w-[150px]", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
-                  col.sortable && col.type !== "actions" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                    "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__ */ (0, import_jsx_runtime21.jsx)(import_md.MdOutlineSwapVert, { className: "w-4 h-4", "aria-hidden": "true" })
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
-              ] }) }, col.key)) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tbody", { className: (0, import_clsx21.default)(tableBody, "dark:divide-slate-700/30"), children: data.length > 0 ? data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: (0, import_clsx21.default)(tableRow, variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20"), children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { className: tableCell(col.className), children: col.type === "actions" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: tableCellText, children: renderCellContent(col, row) }) }, `${rowIndex}-${col.key}`)) }, rowIndex)) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: tableEmptyContent, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(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__ */ (0, import_jsx_runtime21.jsx)("div", { className: "rounded-b-xl px-6 py-4", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -4173,7 +4413,7 @@ function ITDataTable({
 
 // src/components/molecules/date-picker/datePicker.tsx
 var import_clsx22 = __toESM(require("clsx"), 1);
-var import_react18 = __toESM(require("react"), 1);
+var import_react20 = __toESM(require("react"), 1);
 var import_react_dom3 = require("react-dom");
 var import_fa12 = require("react-icons/fa");
 var import_date_fns2 = require("date-fns");
@@ -4197,16 +4437,16 @@ function ITDatePicker({
   maxDate,
   range = false
 }) {
-  const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react18.useState)("");
-  const [isValidDate, setIsValidDate] = (0, import_react18.useState)(true);
-  const [internalRange, setInternalRange] = (0, import_react18.useState)([null, null]);
-  const wrapperRef = (0, import_react18.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react20.useState)("");
+  const [isValidDate, setIsValidDate] = (0, import_react20.useState)(true);
+  const [internalRange, setInternalRange] = (0, import_react20.useState)([null, null]);
+  const wrapperRef = (0, import_react20.useRef)(null);
   const { panelRef, style: panelStyle } = useFloatingPanel(wrapperRef, isOpen, {
     estimatedHeight: 360,
     matchWidth: false
   });
-  const dateRange = import_react18.default.useMemo(() => {
+  const dateRange = import_react20.default.useMemo(() => {
     if (range) {
       if (Array.isArray(value)) return value;
       return internalRange;
@@ -4214,7 +4454,7 @@ function ITDatePicker({
     return [value instanceof Date ? value : null, null];
   }, [value, range, internalRange]);
   const [startDate, endDate] = dateRange;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (range) {
       if (startDate && endDate) {
         setInputValue(`${formatDate(startDate)} - ${formatDate(endDate)}`);
@@ -4231,7 +4471,7 @@ function ITDatePicker({
       }
     }
   }, [startDate, endDate, range]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       const inWrapper = wrapperRef.current?.contains(target);
@@ -4426,24 +4666,24 @@ function ITDatePicker({
 
 // src/components/organisms/dialog/dialog.tsx
 var import_react_dom4 = require("react-dom");
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_fa14 = require("react-icons/fa");
 
 // src/components/molecules/form-header/form-header.tsx
 var import_fa13 = require("react-icons/fa");
 
 // src/theme/theme-context.ts
-var import_react19 = require("react");
-var ITThemeContext = (0, import_react19.createContext)(void 0);
+var import_react21 = require("react");
+var ITThemeContext = (0, import_react21.createContext)(void 0);
 var useITTheme = () => {
-  const context = (0, import_react19.useContext)(ITThemeContext);
+  const context = (0, import_react21.useContext)(ITThemeContext);
   if (!context) {
     throw new Error("useITTheme must be used within an ITThemeProvider");
   }
   return context;
 };
 var useITThemeSafe = () => {
-  return (0, import_react19.useContext)(ITThemeContext);
+  return (0, import_react21.useContext)(ITThemeContext);
 };
 
 // src/utils/color.utils.ts
@@ -4563,9 +4803,9 @@ function ITDialog({
   useFormHeader = false,
   fullScreen = false
 }) {
-  const modalRef = (0, import_react20.useRef)(null);
+  const modalRef = (0, import_react22.useRef)(null);
   useClickOutside_default(modalRef, onClose);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const handleEscape = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -4646,7 +4886,7 @@ function ITDivider({
 // src/components/organisms/drawer/drawer.tsx
 var import_clsx24 = __toESM(require("clsx"), 1);
 var import_fa15 = require("react-icons/fa");
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function ITDrawer({
   isOpen,
@@ -4658,7 +4898,7 @@ function ITDrawer({
   className,
   style
 }) {
-  const panelRef = (0, import_react21.useRef)(null);
+  const panelRef = (0, import_react23.useRef)(null);
   useClickOutside_default(panelRef, onClose);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "fixed inset-0 z-[50] flex", children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" }),
@@ -4781,36 +5021,36 @@ function ITFlex({
 }
 
 // src/components/organisms/form-builder/formBuilder.tsx
-var import_react27 = require("react");
+var import_react29 = require("react");
 
 // src/components/organisms/form-builder/formBuilder.context.tsx
-var import_react22 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var ITFormBuilderContext = (0, import_react22.createContext)(void 0);
+var ITFormBuilderContext = (0, import_react24.createContext)(void 0);
 var ITFormBuilderProvider = ({
   children,
   value
 }) => {
-  const [fieldRegistry, setFieldRegistry] = (0, import_react22.useState)({});
-  const registerField = import_react22.default.useCallback((name, config2) => {
+  const [fieldRegistry, setFieldRegistry] = (0, import_react24.useState)({});
+  const registerField = import_react24.default.useCallback((name, config2) => {
     setFieldRegistry((prev) => ({ ...prev, [name]: config2 }));
   }, []);
-  const unregisterField = import_react22.default.useCallback((name) => {
+  const unregisterField = import_react24.default.useCallback((name) => {
     setFieldRegistry((prev) => {
       const next = { ...prev };
       delete next[name];
       return next;
     });
   }, []);
-  const getFieldConfig = import_react22.default.useCallback(
+  const getFieldConfig = import_react24.default.useCallback(
     (name) => fieldRegistry[name],
     [fieldRegistry]
   );
-  const getAllFieldConfigs = import_react22.default.useCallback(
+  const getAllFieldConfigs = import_react24.default.useCallback(
     () => Object.values(fieldRegistry),
     [fieldRegistry]
   );
-  const contextValue = import_react22.default.useMemo(
+  const contextValue = import_react24.default.useMemo(
     () => ({
       ...value,
       registerField,
@@ -4823,7 +5063,7 @@ var ITFormBuilderProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ITFormBuilderContext.Provider, { value: contextValue, children });
 };
 var useITFormBuilderContext = () => {
-  const context = (0, import_react22.useContext)(ITFormBuilderContext);
+  const context = (0, import_react24.useContext)(ITFormBuilderContext);
   if (!context) {
     throw new Error("useITFormBuilderContext must be used within an ITFormBuilderProvider");
   }
@@ -4831,12 +5071,12 @@ var useITFormBuilderContext = () => {
 };
 
 // src/components/organisms/form-builder/fieldRenderer.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 var import_clsx29 = __toESM(require("clsx"), 1);
 
 // src/components/molecules/time-picker/timePicker.tsx
 var import_clsx27 = __toESM(require("clsx"), 1);
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_react_dom5 = require("react-dom");
 var import_fa17 = require("react-icons/fa");
 var import_jsx_runtime30 = require("react/jsx-runtime");
@@ -4856,12 +5096,12 @@ function ITTimePicker({
   variant = "primary",
   color = "primary"
 }) {
-  const [isOpen, setIsOpen] = (0, import_react23.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react23.useState)(value || "");
-  const [isValidTime, setIsValidTime] = (0, import_react23.useState)(true);
-  const wrapperRef = (0, import_react23.useRef)(null);
-  const hoursRef = (0, import_react23.useRef)(null);
-  const minutesRef = (0, import_react23.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react25.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react25.useState)(value || "");
+  const [isValidTime, setIsValidTime] = (0, import_react25.useState)(true);
+  const wrapperRef = (0, import_react25.useRef)(null);
+  const hoursRef = (0, import_react25.useRef)(null);
+  const minutesRef = (0, import_react25.useRef)(null);
   const { panelRef: dropdownRef, style: panelStyle } = useFloatingPanel(
     wrapperRef,
     isOpen && !disabled,
@@ -4875,7 +5115,7 @@ function ITTimePicker({
   const isThemeColor = color in theme.colors;
   const highlightColor = isThemeColor ? theme.colors[color][50] : "#f3f4f6";
   const activeColor = isThemeColor ? theme.colors[color][100] : "#e5e7eb";
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     setInputValue(value || "");
   }, [value]);
   const validateTime = (timeString) => {
@@ -4884,7 +5124,7 @@ function ITTimePicker({
   };
   const currentHour = validateTime(inputValue) ? inputValue.split(":")[0] : null;
   const currentMinute = validateTime(inputValue) ? inputValue.split(":")[1] : null;
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (isOpen) {
       setTimeout(() => {
         if (hoursRef.current && currentHour) {
@@ -5090,7 +5330,7 @@ function ITTimePicker({
 }
 
 // src/components/molecules/search-select/search-select.tsx
-var import_react24 = require("react");
+var import_react26 = require("react");
 var import_react_dom6 = require("react-dom");
 var import_clsx28 = __toESM(require("clsx"), 1);
 var import_fa18 = require("react-icons/fa");
@@ -5119,26 +5359,26 @@ function ITSearchSelect({
   clearable = true,
   onClear
 }) {
-  const [isOpen, setIsOpen] = (0, import_react24.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react24.useState)("");
-  const [isFocused, setIsFocused] = (0, import_react24.useState)(false);
-  const [localTouched, setLocalTouched] = (0, import_react24.useState)(false);
-  const containerRef = (0, import_react24.useRef)(null);
-  const inputWrapperRef = (0, import_react24.useRef)(null);
-  const timeoutRef = (0, import_react24.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react26.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react26.useState)("");
+  const [isFocused, setIsFocused] = (0, import_react26.useState)(false);
+  const [localTouched, setLocalTouched] = (0, import_react26.useState)(false);
+  const containerRef = (0, import_react26.useRef)(null);
+  const inputWrapperRef = (0, import_react26.useRef)(null);
+  const timeoutRef = (0, import_react26.useRef)(null);
   const { panelRef, style: panelStyle } = useFloatingPanel(inputWrapperRef, isOpen, {
     estimatedHeight: 260,
     matchWidth: true
   });
-  const selectedOption = (0, import_react24.useMemo)(() => {
+  const selectedOption = (0, import_react26.useMemo)(() => {
     return options.find((opt) => opt[valueField] === value);
   }, [options, value, valueField]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!isFocused) {
       setSearchTerm(selectedOption ? String(selectedOption[labelField]) : "");
     }
   }, [selectedOption, isFocused, labelField]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     function handleClickOutside(event) {
       const target = event.target;
       const inContainer = containerRef.current?.contains(target);
@@ -5151,7 +5391,7 @@ function ITSearchSelect({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
   const selectedLabel = selectedOption ? String(selectedOption[labelField]) : "";
-  const filteredOptions = (0, import_react24.useMemo)(() => {
+  const filteredOptions = (0, import_react26.useMemo)(() => {
     if (onSearch) return options;
     if (!searchTerm || !isFocused || searchTerm === selectedLabel) return options;
     return options.filter(
@@ -5320,26 +5560,26 @@ function ITSearchSelect({
 }
 
 // src/components/organisms/form-builder/useFormBuilder.ts
-var import_react25 = require("react");
+var import_react27 = require("react");
 var useFieldRules = (config2, dependentValues) => {
   const { getFieldConfig } = useITFormBuilderContext();
   const fieldConfig = getFieldConfig(config2.name) || config2;
-  const isVisible = (0, import_react25.useMemo)(() => {
+  const isVisible = (0, import_react27.useMemo)(() => {
     if (!fieldConfig.renderWhen) return true;
     return fieldConfig.renderWhen(dependentValues);
   }, [fieldConfig, dependentValues]);
-  const dynamicProps = (0, import_react25.useMemo)(() => {
+  const dynamicProps = (0, import_react27.useMemo)(() => {
     if (!fieldConfig.dynamicProps) return {};
     return fieldConfig.dynamicProps(dependentValues);
   }, [fieldConfig, dependentValues]);
-  const isRequired = (0, import_react25.useMemo)(() => {
+  const isRequired = (0, import_react27.useMemo)(() => {
     if (typeof dynamicProps.required !== "undefined") return dynamicProps.required;
     if (typeof fieldConfig.required === "function") {
       return fieldConfig.required(dependentValues);
     }
     return !!fieldConfig.required;
   }, [fieldConfig, dynamicProps.required, dependentValues]);
-  const isDisabled = (0, import_react25.useMemo)(() => {
+  const isDisabled = (0, import_react27.useMemo)(() => {
     if (typeof dynamicProps.disabled !== "undefined") return dynamicProps.disabled;
     if (typeof fieldConfig.disabled === "function") {
       return fieldConfig.disabled(dependentValues);
@@ -5353,11 +5593,11 @@ var useFieldRules = (config2, dependentValues) => {
 var import_fa19 = require("react-icons/fa");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function useAsyncOptions(options, deps) {
-  const [resolved, setResolved] = (0, import_react26.useState)([]);
-  const [loading, setLoading] = (0, import_react26.useState)(false);
-  const optionsRef = (0, import_react26.useRef)(options);
+  const [resolved, setResolved] = (0, import_react28.useState)([]);
+  const [loading, setLoading] = (0, import_react28.useState)(false);
+  const optionsRef = (0, import_react28.useRef)(options);
   optionsRef.current = options;
-  (0, import_react26.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const opts = optionsRef.current;
     let cancelled = false;
     if (typeof opts === "function") {
@@ -5400,13 +5640,13 @@ var ITFieldRenderer = ({
     config2,
     dependentValues
   );
-  (0, import_react26.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     context.registerField(config2.name, config2);
     return () => {
       context.unregisterField(config2.name);
     };
   }, [config2.name]);
-  const activeConfig = (0, import_react26.useMemo)(
+  const activeConfig = (0, import_react28.useMemo)(
     () => ({
       ...config2,
       ...dynamicProps,
@@ -5432,7 +5672,7 @@ var ITFieldRenderer = ({
     options,
     [options, dependentValues]
   );
-  const handleChangeWrapper = (0, import_react26.useCallback)(
+  const handleChangeWrapper = (0, import_react28.useCallback)(
     async (val) => {
       const finalValue = val && typeof val === "object" && "target" in val ? val.target.value : val;
       await context.setFieldValue(name, finalValue);
@@ -5646,7 +5886,7 @@ var ITFieldRenderer = ({
     }
   );
 };
-var fieldRenderer_default = (0, import_react26.memo)(ITFieldRenderer);
+var fieldRenderer_default = (0, import_react28.memo)(ITFieldRenderer);
 
 // src/components/organisms/form-builder/formBuilder.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
@@ -5677,7 +5917,7 @@ function ITFormBuilder({
   isSubmitting = false,
   children
 }) {
-  const providerValue = (0, import_react27.useMemo)(
+  const providerValue = (0, import_react29.useMemo)(
     () => ({
       config: config2 || [],
       values: values || {},
@@ -5894,7 +6134,7 @@ function ITGrid({
 }
 
 // src/components/atoms/image/image.tsx
-var import_react28 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var ITImage = ({
   src,
@@ -5902,7 +6142,7 @@ var ITImage = ({
   className = "",
   fallback = ""
 }) => {
-  const [imageError, setImageError] = (0, import_react28.useState)(false);
+  const [imageError, setImageError] = (0, import_react30.useState)(false);
   const handleImageError = () => {
     setImageError(true);
   };
@@ -5932,7 +6172,7 @@ var ITImage = ({
 var image_default = ITImage;
 
 // src/components/organisms/navbar/navbar.tsx
-var import_react29 = require("react");
+var import_react31 = require("react");
 var import_fa20 = require("react-icons/fa");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function ITNavbar({
@@ -5947,9 +6187,9 @@ function ITNavbar({
   showSidebarOnMobile = false,
   sidebarItems
 }) {
-  const [isUserMenuOpen, setIsUserMenuOpen] = (0, import_react29.useState)(false);
-  const [expandedItems, setExpandedItems] = (0, import_react29.useState)(/* @__PURE__ */ new Set());
-  const userMenuRef = (0, import_react29.useRef)(null);
+  const [isUserMenuOpen, setIsUserMenuOpen] = (0, import_react31.useState)(false);
+  const [expandedItems, setExpandedItems] = (0, import_react31.useState)(/* @__PURE__ */ new Set());
+  const userMenuRef = (0, import_react31.useRef)(null);
   useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
   const toggleUserMenu = () => {
     setIsUserMenuOpen(!isUserMenuOpen);
@@ -6290,7 +6530,7 @@ function ITSkeleton({
 
 // src/components/atoms/stack/stack.tsx
 var import_clsx32 = __toESM(require("clsx"), 1);
-var import_react30 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var directionMap2 = {
   row: "flex-row",
@@ -6331,7 +6571,7 @@ function ITStack({
   as: Component = "div"
 }) {
   const hasDivider = divider !== void 0;
-  const items = import_react30.Children.toArray(children);
+  const items = import_react32.Children.toArray(children);
   const resolvedStyle = {
     gap: spacing > 0 ? `${spacing * 0.25}rem` : void 0,
     ...style
@@ -6348,9 +6588,9 @@ function ITStack({
         className
       ),
       style: resolvedStyle,
-      children: hasDivider ? items.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react30.Fragment, { children: [
+      children: hasDivider ? items.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react32.Fragment, { children: [
         child,
-        index < items.length - 1 && (0, import_react30.isValidElement)(divider) ? (0, import_react30.cloneElement)(divider, { key: `divider-${index}` }) : null
+        index < items.length - 1 && (0, import_react32.isValidElement)(divider) ? (0, import_react32.cloneElement)(divider, { key: `divider-${index}` }) : null
       ] }, index)) : children
     }
   );
@@ -6388,11 +6628,13 @@ function ITPage(props) {
     className,
     children,
     maxWidth = "7xl",
-    noPadding = false
+    noPadding = false,
+    horizontalPadding = "px-4 sm:px-6 lg:px-8"
   } = props;
   const wrapperClass = (0, import_clsx33.default)(
     "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
@@ -6447,7 +6689,7 @@ function ITPage(props) {
 }
 
 // src/components/atoms/popover/popover.tsx
-var import_react31 = require("react");
+var import_react33 = require("react");
 var import_clsx34 = __toESM(require("clsx"), 1);
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var positionClasses = {
@@ -6464,10 +6706,10 @@ function ITPopover({
   onClose,
   className
 }) {
-  const [internalOpen, setInternalOpen] = (0, import_react31.useState)(false);
+  const [internalOpen, setInternalOpen] = (0, import_react33.useState)(false);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const ref = (0, import_react31.useRef)(null);
+  const ref = (0, import_react33.useRef)(null);
   useClickOutside_default(ref, () => {
     if (isControlled) onClose?.();
     else setInternalOpen(false);
@@ -6595,7 +6837,7 @@ function ITRadioGroup({
 
 // src/components/organisms/searchTable/searchTable.tsx
 var import_clsx38 = __toESM(require("clsx"), 1);
-var import_react32 = require("react");
+var import_react34 = require("react");
 
 // src/components/organisms/searchTable/components/SearchInput.tsx
 var import_fa22 = require("react-icons/fa");
@@ -7088,7 +7330,7 @@ function ITSearchTable({
   onSave,
   onCancel
 }) {
-  const [itemsPerPage, setItemsPerPage] = (0, import_react32.useState)(defaultItemsPerPage);
+  const [itemsPerPage, setItemsPerPage] = (0, import_react34.useState)(defaultItemsPerPage);
   const { searchTerm, handleSearchChange, handleClearSearch } = useDebouncedSearch({
     initialValue: searchTermInitial,
     onSearch: (value) => {
@@ -7251,7 +7493,7 @@ function ITSegmentedControl({
 }
 
 // src/components/organisms/sidebar/sidebar.tsx
-var import_react33 = require("react");
+var import_react35 = require("react");
 var import_fa26 = require("react-icons/fa");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 function ITSidebar({
@@ -7261,14 +7503,15 @@ function ITSidebar({
   visibleOnMobile = false,
   onItemClick,
   onSubItemClick,
-  subitemConnector = "dot"
+  subitemConnector = "dot",
+  header
 }) {
-  const [expandedItems, setExpandedItems] = (0, import_react33.useState)(/* @__PURE__ */ new Set());
-  const [isHovering, setIsHovering] = (0, import_react33.useState)(false);
-  const sidebarRef = (0, import_react33.useRef)(null);
-  const hoverTimeoutRef = (0, import_react33.useRef)(null);
-  const leaveTimeoutRef = (0, import_react33.useRef)(null);
-  (0, import_react33.useEffect)(() => {
+  const [expandedItems, setExpandedItems] = (0, import_react35.useState)(/* @__PURE__ */ new Set());
+  const [isHovering, setIsHovering] = (0, import_react35.useState)(false);
+  const sidebarRef = (0, import_react35.useRef)(null);
+  const hoverTimeoutRef = (0, import_react35.useRef)(null);
+  const leaveTimeoutRef = (0, import_react35.useRef)(null);
+  (0, import_react35.useEffect)(() => {
     const hoverTimer = hoverTimeoutRef.current;
     const leaveTimer = leaveTimeoutRef.current;
     const handleMouseEnter = () => {
@@ -7295,7 +7538,7 @@ function ITSidebar({
       if (leaveTimer) clearTimeout(leaveTimer);
     };
   }, [isCollapsed]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     const activeParents = /* @__PURE__ */ new Set();
     navigationItems.forEach((item) => {
       if (item.subitems && item.subitems.some((sub) => sub.isActive)) {
@@ -7332,7 +7575,7 @@ function ITSidebar({
   };
   const isSidebarCollapsed = visibleOnMobile ? false : !isHovering && isCollapsed;
   const sidebarWidth = isSidebarCollapsed ? "w-[88px]" : "w-[280px]";
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     "aside",
     {
       ref: sidebarRef,
@@ -7351,196 +7594,215 @@ function ITSidebar({
         WebkitBackdropFilter: "blur(12px)",
         backdropFilter: "blur(12px)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("nav", { className: "flex-1 py-4 overflow-y-auto overflow-x-hidden custom-scrollbar px-4", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("ul", { className: "space-y-1", children: navigationItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("li", { className: "relative group/navitem", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-          "div",
-          {
-            className: `flex items-center cursor-pointer 
+      children: [
+        header && !isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "px-4 pt-4 pb-1 flex-shrink-0", children: header }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("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__ */ (0, import_jsx_runtime56.jsx)("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__ */ (0, import_jsx_runtime56.jsxs)("li", { className: "relative group/navitem", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+              "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__ */ (0, import_jsx_runtime56.jsx)(
-                "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__ */ (0, import_jsx_runtime56.jsxs)("div", { className: `flex items-center ${!isSidebarCollapsed ? "gap-2.5" : "justify-center"} relative z-10 w-full`, children: [
-                item.icon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                  "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__ */ (0, import_jsx_runtime56.jsx)(
-                  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__ */ (0, import_jsx_runtime56.jsx)(
-                "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__ */ (0, import_jsx_runtime56.jsx)(import_fa26.FaChevronDown, { className: "w-3 h-3" })
-                }
-              ),
-              item.badge && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                "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__ */ (0, import_jsx_runtime56.jsxs)(
-          "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__ */ (0, import_jsx_runtime56.jsxs)("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__ */ (0, import_jsx_runtime56.jsx)("span", { style: { color: "var(--it-sidebar-active-icon, var(--color-primary-500))" }, className: "text-xl drop-shadow-sm", children: item.icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ITText, { as: "span", className: "tracking-wide text-[15px]", children: item.label })
-              ] }),
-              item.subitems && item.subitems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "py-2", children: item.subitems.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-                "div",
-                {
-                  className: `px-5 py-2.5 text-sm flex items-center gap-3 transition-colors relative`,
-                  children: [
-                    subitem.isActive && subitemConnector === "|" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                      "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__ */ (0, import_jsx_runtime56.jsx)("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__ */ (0, import_jsx_runtime56.jsx)(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__ */ (0, import_jsx_runtime56.jsx)(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__ */ (0, import_jsx_runtime56.jsx)("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__ */ (0, import_jsx_runtime56.jsx)(
-          "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__ */ (0, import_jsx_runtime56.jsx)("li", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-              "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__ */ (0, import_jsx_runtime56.jsx)(
+                  item.isActive && !isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                     "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__ */ (0, import_jsx_runtime56.jsxs)("div", { className: `flex items-center ${!isSidebarCollapsed ? "gap-2.5" : "justify-center"} relative z-10 w-full`, children: [
+                    item.icon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                      "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__ */ (0, import_jsx_runtime56.jsx)(
+                      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__ */ (0, import_jsx_runtime56.jsx)(
+                    "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__ */ (0, import_jsx_runtime56.jsx)(import_fa26.FaChevronDown, { className: "w-3 h-3" })
                     }
                   ),
-                  subitemConnector === "dot" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                  item.badge && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                     "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__ */ (0, import_jsx_runtime56.jsx)(ITText, { as: "span", className: "truncate", children: subitem.label })
+                  )
                 ]
               }
-            ) }, subitem.id))
-          }
-        ) })
-      ] }, item.id)) }) })
+            ),
+            isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+              "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__ */ (0, import_jsx_runtime56.jsxs)("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__ */ (0, import_jsx_runtime56.jsx)("span", { style: { color: "var(--it-sidebar-active-icon, var(--color-primary-500))" }, className: "text-xl drop-shadow-sm", children: item.icon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ITText, { as: "span", className: "tracking-wide text-[15px]", children: item.label })
+                  ] }),
+                  item.subitems && item.subitems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "py-2", children: item.subitems.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                    "div",
+                    {
+                      className: `px-5 py-2.5 text-sm flex items-center gap-3 transition-colors relative`,
+                      children: [
+                        subitem.isActive && subitemConnector === "|" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                          "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__ */ (0, import_jsx_runtime56.jsx)("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__ */ (0, import_jsx_runtime56.jsx)(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__ */ (0, import_jsx_runtime56.jsx)(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__ */ (0, import_jsx_runtime56.jsx)("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__ */ (0, import_jsx_runtime56.jsx)(
+              "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__ */ (0, import_jsx_runtime56.jsx)("li", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                  "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__ */ (0, import_jsx_runtime56.jsx)(
+                        "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__ */ (0, import_jsx_runtime56.jsx)(
+                        "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__ */ (0, import_jsx_runtime56.jsx)(ITText, { as: "span", className: "truncate", children: subitem.label })
+                    ]
+                  }
+                ) }, subitem.id))
+              }
+            ) })
+          ] }, item.id);
+        }) }) })
+      ]
     }
   );
 }
 
 // src/components/atoms/slide/slide.tsx
-var import_react34 = require("react");
+var import_react36 = require("react");
 var import_clsx40 = __toESM(require("clsx"), 1);
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function ITSlideToggle({
@@ -7555,8 +7817,8 @@ function ITSlideToggle({
   className = ""
 }) {
   const isControlled = controlledIsOn !== void 0;
-  const [internalIsOn, setInternalIsOn] = (0, import_react34.useState)(initialState);
-  (0, import_react34.useEffect)(() => {
+  const [internalIsOn, setInternalIsOn] = (0, import_react36.useState)(initialState);
+  (0, import_react36.useEffect)(() => {
     if (isControlled) {
       setInternalIsOn(controlledIsOn);
     }
@@ -7720,7 +7982,7 @@ function ITStatCard({
 
 // src/components/molecules/table/table.tsx
 var import_clsx43 = __toESM(require("clsx"), 1);
-var import_react35 = __toESM(require("react"), 1);
+var import_react37 = __toESM(require("react"), 1);
 var import_fa27 = require("react-icons/fa");
 var import_md2 = require("react-icons/md");
 var import_jsx_runtime60 = require("react/jsx-runtime");
@@ -7736,9 +7998,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] = (0, import_react35.useState)(defaultView);
+  const [viewMode, setViewMode] = (0, import_react37.useState)(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,
@@ -7749,7 +8026,7 @@ function ITTable({
     handleSort,
     handleItemsPerPageChange
   } = useTableState({ defaultItemsPerPage });
-  const sortedData = import_react35.default.useMemo(() => {
+  const sortedData = import_react37.default.useMemo(() => {
     const safeData = Array.isArray(data) ? data : [];
     if (!sortConfig) return safeData;
     return [...safeData].sort((a, b) => {
@@ -7818,6 +8095,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") {
@@ -7949,7 +8244,18 @@ function ITTable({
       actionCol?.actions && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("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__ */ (0, import_jsx_runtime60.jsx)("div", { className: (0, import_clsx43.default)("space-y-4 w-full", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("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__ */ (0, import_jsx_runtime60.jsx)("div", { ref: rootRef, className: (0, import_clsx43.default)("space-y-4 w-full", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: tableContainer, style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "px-6 py-5 flex items-center justify-between", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("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: [
@@ -7957,7 +8263,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__ */ (0, import_jsx_runtime60.jsx)(import_fa27.FaTable, { size: 11 }),
               "Table"
@@ -7968,7 +8275,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__ */ (0, import_jsx_runtime60.jsx)(import_fa27.FaThLarge, { size: 11 }),
               "Cards"
@@ -7982,7 +8289,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__ */ (0, import_jsx_runtime60.jsx)(import_fa27.FaTable, { size: 11 }),
             "Table"
@@ -7993,7 +8301,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__ */ (0, import_jsx_runtime60.jsx)(import_fa27.FaThLarge, { size: 11 }),
             "Cards"
@@ -8001,64 +8309,131 @@ function ITTable({
         }
       )
     ] }) }),
-    viewMode === "cards" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: currentData.length > 0 ? currentData.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { children: renderCard ? renderCard(row) : renderDefaultCard(row) }, i)) : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: (0, import_clsx43.default)(tableEmptyContent, "py-12"), children: [
+    effectiveView === "cards" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: currentData.length > 0 ? currentData.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      "div",
+      {
+        className: (0, import_clsx43.default)(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__ */ (0, import_jsx_runtime60.jsxs)("div", { className: (0, import_clsx43.default)(tableEmptyContent, "py-12"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
       /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
-    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
-      "table",
+    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      "div",
       {
-        className: (0, import_clsx43.default)(
-          "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__ */ (0, import_jsx_runtime60.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { className: (0, import_clsx43.default)(tableHeaderRow, "dark:text-slate-200"), children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-            "th",
-            {
-              scope: "col",
-              className: tableHeaderCell(col.className),
-              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-col gap-3 min-w-[150px]", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
-                  col.sortable && col.type !== "actions" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                    "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__ */ (0, import_jsx_runtime60.jsx)(import_md2.MdOutlineSwapVert, { className: "w-4 h-4", "aria-hidden": "true" })
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
-              ] })
-            },
-            col.key
-          )) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tbody", { className: (0, import_clsx43.default)(tableBody, "dark:divide-slate-700/30"), children: currentData.length > 0 ? currentData.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-            "tr",
-            {
-              className: (0, import_clsx43.default)(tableRow, variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20"),
-              children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                "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__ */ (0, import_jsx_runtime60.jsxs)(
+          "table",
+          {
+            className: (0, import_clsx43.default)(
+              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__ */ (0, import_jsx_runtime60.jsx)("colgroup", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                "col",
                 {
-                  className: tableCell(col.className),
-                  children: col.type === "actions" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("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__ */ (0, import_jsx_runtime60.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: tableEmptyContent, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
-          ] }) }) }) })
-        ]
+                col.key
+              )) }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                "tr",
+                {
+                  className: (0, import_clsx43.default)(tableHeaderRow, "dark:text-slate-200"),
+                  "aria-rowindex": isTableVirtual ? 1 : void 0,
+                  children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                    "th",
+                    {
+                      scope: "col",
+                      className: (0, import_clsx43.default)(
+                        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__ */ (0, import_jsx_runtime60.jsxs)("div", { className: isFixed ? "flex flex-col gap-3" : "flex flex-col gap-3 min-w-[150px]", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
+                          col.sortable && col.type !== "actions" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                            "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__ */ (0, import_jsx_runtime60.jsx)(import_md2.MdOutlineSwapVert, { className: "w-4 h-4", "aria-hidden": "true" })
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
+                      ] })
+                    },
+                    col.key
+                  ))
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tbody", { className: (0, import_clsx43.default)(tableBody, "dark:divide-slate-700/30"), children: currentData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+                isTableVirtual && topSpacerHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { "aria-hidden": "true", style: { height: topSpacerHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) }),
+                windowData.map((row, windowIndex) => {
+                  const absoluteIndex = isTableVirtual ? startIndex + windowIndex : windowIndex;
+                  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                    "tr",
+                    {
+                      "aria-rowindex": isTableVirtual ? absoluteIndex + 2 : void 0,
+                      className: (0, import_clsx43.default)(
+                        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__ */ (0, import_jsx_runtime60.jsx)(
+                          "td",
+                          {
+                            className: (0, import_clsx43.default)(
+                              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__ */ (0, import_jsx_runtime60.jsx)("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: (0, import_clsx43.default)(tableCellText, col.truncate && "truncate"), children: renderCellContent(col, row) })
+                          },
+                          `${absoluteIndex}-${col.key}`
+                        );
+                      })
+                    },
+                    absoluteIndex
+                  );
+                }),
+                isTableVirtual && bottomSpacerHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { "aria-hidden": "true", style: { height: bottomSpacerHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: tableEmptyContent, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
+              ] }) }) }) })
+            ]
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "rounded-b-xl px-6 py-4", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       ITPagination,
       {
@@ -8124,7 +8499,7 @@ function ITTextarea({
 }
 
 // src/components/molecules/tabs/tabs.tsx
-var import_react36 = require("react");
+var import_react38 = require("react");
 var import_clsx45 = require("clsx");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var ITTabs = ({
@@ -8135,7 +8510,7 @@ var ITTabs = ({
   className = "",
   containerClassName = ""
 }) => {
-  const [activeId, setActiveId] = (0, import_react36.useState)(defaultActiveId || items[0]?.id);
+  const [activeId, setActiveId] = (0, import_react38.useState)(defaultActiveId || items[0]?.id);
   const handleTabClick = (id, disabled) => {
     if (disabled) return;
     setActiveId(id);
@@ -8235,7 +8610,7 @@ var positionStyles = {
 
 // src/components/organisms/toast/toast.tsx
 var import_clsx47 = __toESM(require("clsx"), 1);
-var import_react37 = require("react");
+var import_react39 = require("react");
 var import_fa28 = require("react-icons/fa");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 function ITToast({
@@ -8245,8 +8620,8 @@ function ITToast({
   position = "top-right",
   onClose
 }) {
-  const [isVisible, setIsVisible] = (0, import_react37.useState)(true);
-  (0, import_react37.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react39.useState)(true);
+  (0, import_react39.useEffect)(() => {
     const timer = setTimeout(() => {
       setIsVisible(false);
       setTimeout(() => {
@@ -8312,7 +8687,7 @@ function ITToast({
 }
 
 // src/components/molecules/wysiwyg/wysiwyg.tsx
-var import_react39 = require("react");
+var import_react41 = require("react");
 var import_clsx49 = __toESM(require("clsx"), 1);
 var import_fa29 = require("react-icons/fa");
 
@@ -8328,7 +8703,7 @@ var toolbarActions = [
 ];
 
 // src/components/atoms/tooltip/tooltip.tsx
-var import_react38 = require("react");
+var import_react40 = require("react");
 var import_clsx48 = __toESM(require("clsx"), 1);
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var positionClasses2 = {
@@ -8350,7 +8725,7 @@ function ITTooltip({
   delay = 200,
   className
 }) {
-  const [visible, setVisible] = (0, import_react38.useState)(false);
+  const [visible, setVisible] = (0, import_react40.useState)(false);
   let timeout;
   const handleMouseEnter = () => {
     timeout = setTimeout(() => setVisible(true), delay);
@@ -8403,12 +8778,12 @@ function ITWysiwyg({
   toolbar = toolbarActions,
   className
 }) {
-  const editorRef = (0, import_react39.useRef)(null);
-  const focusedRef = (0, import_react39.useRef)(false);
-  const [active, setActive] = (0, import_react39.useState)({});
+  const editorRef = (0, import_react41.useRef)(null);
+  const focusedRef = (0, import_react41.useRef)(false);
+  const [active, setActive] = (0, import_react41.useState)({});
   const isLocked = disabled || readOnly;
   const sizeConfig = inputSizeTokens[size] ?? inputSizeTokens.md;
-  const findAncestor = (0, import_react39.useCallback)(
+  const findAncestor = (0, import_react41.useCallback)(
     (node, predicate) => {
       const editor = editorRef.current;
       if (!editor) return null;
@@ -8421,7 +8796,7 @@ function ITWysiwyg({
     },
     []
   );
-  const isInlineTag = (0, import_react39.useCallback)((el, tag) => {
+  const isInlineTag = (0, import_react41.useCallback)((el, tag) => {
     if (tag === "STRONG" || tag === "B") {
       return el.tagName === "STRONG" || el.tagName === "B";
     }
@@ -8430,7 +8805,7 @@ function ITWysiwyg({
     }
     return el.tagName === tag;
   }, []);
-  const getTextNodesInRange = (0, import_react39.useCallback)((range) => {
+  const getTextNodesInRange = (0, import_react41.useCallback)((range) => {
     const editor = editorRef.current;
     if (!editor) return [];
     const out = [];
@@ -8441,7 +8816,7 @@ function ITWysiwyg({
     }
     return out;
   }, []);
-  const placeCaretAtEnd = (0, import_react39.useCallback)((target) => {
+  const placeCaretAtEnd = (0, import_react41.useCallback)((target) => {
     const editor = editorRef.current;
     const sel = window.getSelection();
     if (!editor || !sel) return;
@@ -8452,11 +8827,11 @@ function ITWysiwyg({
     sel.addRange(range);
     if (document.activeElement !== editor) editor.focus();
   }, []);
-  const emitChange = (0, import_react39.useCallback)(() => {
+  const emitChange = (0, import_react41.useCallback)(() => {
     const editor = editorRef.current;
     if (editor) onChange?.(editor.innerHTML);
   }, [onChange]);
-  const updateActive = (0, import_react39.useCallback)(() => {
+  const updateActive = (0, import_react41.useCallback)(() => {
     const editor = editorRef.current;
     const sel = window.getSelection();
     const node = sel?.anchorNode ?? null;
@@ -8475,13 +8850,13 @@ function ITWysiwyg({
       (prev) => JSON.stringify(prev) === JSON.stringify(next) ? prev : next
     );
   }, [findAncestor, isInlineTag]);
-  const unwrapElement = (0, import_react39.useCallback)((el) => {
+  const unwrapElement = (0, import_react41.useCallback)((el) => {
     const parent = el.parentNode;
     if (!parent) return;
     while (el.firstChild) parent.insertBefore(el.firstChild, el);
     el.remove();
   }, []);
-  const applyInline = (0, import_react39.useCallback)(
+  const applyInline = (0, import_react41.useCallback)(
     (tag, prepare) => {
       const editor = editorRef.current;
       const sel = window.getSelection();
@@ -8563,7 +8938,7 @@ function ITWysiwyg({
       updateActive
     ]
   );
-  const normalizeBlocks = (0, import_react39.useCallback)(() => {
+  const normalizeBlocks = (0, import_react41.useCallback)(() => {
     const editor = editorRef.current;
     if (!editor) return;
     const children = Array.from(editor.childNodes);
@@ -8585,7 +8960,7 @@ function ITWysiwyg({
     }
     flush();
   }, []);
-  const convertLiToDiv = (0, import_react39.useCallback)((li) => {
+  const convertLiToDiv = (0, import_react41.useCallback)((li) => {
     const list = li.parentElement;
     if (!list || !list.parentNode) return;
     const div = document.createElement("div");
@@ -8593,20 +8968,20 @@ function ITWysiwyg({
     list.parentNode.insertBefore(div, list);
     li.remove();
   }, []);
-  const cleanupEmptyLists = (0, import_react39.useCallback)(() => {
+  const cleanupEmptyLists = (0, import_react41.useCallback)(() => {
     const editor = editorRef.current;
     if (!editor) return;
     editor.querySelectorAll("ul, ol").forEach((list) => {
       if (!list.querySelector("li")) list.remove();
     });
   }, []);
-  const retagList = (0, import_react39.useCallback)((list, type) => {
+  const retagList = (0, import_react41.useCallback)((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 = (0, import_react39.useCallback)(
+  const toggleList = (0, import_react41.useCallback)(
     (type) => {
       const editor = editorRef.current;
       const sel = window.getSelection();
@@ -8704,7 +9079,7 @@ function ITWysiwyg({
       updateActive
     ]
   );
-  const clearFormatting = (0, import_react39.useCallback)(() => {
+  const clearFormatting = (0, import_react41.useCallback)(() => {
     const editor = editorRef.current;
     const sel = window.getSelection();
     if (!editor || !sel || sel.rangeCount === 0) return;
@@ -8738,7 +9113,7 @@ function ITWysiwyg({
     emitChange,
     updateActive
   ]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const editor = editorRef.current;
     if (!editor) return;
     if (!focusedRef.current) {
@@ -8746,7 +9121,7 @@ function ITWysiwyg({
       if (editor.innerHTML !== next) editor.innerHTML = next;
     }
   }, [value]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const onSelectionChange = () => {
       const editor = editorRef.current;
       const sel = window.getSelection();
@@ -8885,7 +9260,7 @@ function ITWysiwyg({
 }
 
 // src/components/organisms/dropfile/dropfile.tsx
-var import_react40 = require("react");
+var import_react42 = require("react");
 var import_react_dropzone = require("react-dropzone");
 var import_clsx50 = __toESM(require("clsx"), 1);
 
@@ -8931,15 +9306,15 @@ var ITDropfile = ({
   buttonLabel = "Subir archivo",
   modalTitle
 }) => {
-  const [isModalOpen, setIsModalOpen] = (0, import_react40.useState)(false);
-  const [selectedFile, setSelectedFile] = (0, import_react40.useState)(null);
-  const [fileType, setFileType] = (0, import_react40.useState)(null);
-  const [imagePreview, setImagePreview] = (0, import_react40.useState)(initialPreviewUrl || null);
-  const [isConfirmed, setIsConfirmed] = (0, import_react40.useState)(false);
-  const [internalUploadStatus, setInternalUploadStatus] = (0, import_react40.useState)(
+  const [isModalOpen, setIsModalOpen] = (0, import_react42.useState)(false);
+  const [selectedFile, setSelectedFile] = (0, import_react42.useState)(null);
+  const [fileType, setFileType] = (0, import_react42.useState)(null);
+  const [imagePreview, setImagePreview] = (0, import_react42.useState)(initialPreviewUrl || null);
+  const [isConfirmed, setIsConfirmed] = (0, import_react42.useState)(false);
+  const [internalUploadStatus, setInternalUploadStatus] = (0, import_react42.useState)(
     initialPreviewUrl ? "subido" /* UPLOADED */ : "pendiente" /* PENDING */
   );
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (initialPreviewUrl && !selectedFile) {
       setImagePreview(initialPreviewUrl);
       if (externalStatus === void 0) setInternalUploadStatus("subido" /* UPLOADED */);
@@ -9088,12 +9463,12 @@ var ITDropfile = ({
     accept: getAcceptedFileTypes(),
     maxFiles: 1
   });
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     const renderPDF = async () => {
     };
     renderPDF();
   }, [selectedFile, fileType]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     return () => {
       if (imagePreview) {
         URL.revokeObjectURL(imagePreview);
@@ -9130,7 +9505,7 @@ var ITDropfile = ({
   const handleDelete = () => {
     handleCancel();
   };
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (view === "button" && isConfirmed && uploadStatus === "subido" /* UPLOADED */) {
       const timeout = setTimeout(() => {
         setIsModalOpen(false);
@@ -9284,24 +9659,26 @@ var ITDropfile = ({
 var dropfile_default = ITDropfile;
 
 // src/components/templates/layout/layout.tsx
-var import_react42 = require("react");
+var import_react44 = require("react");
 var import_clsx51 = __toESM(require("clsx"), 1);
 
 // src/components/organisms/topbar/topbar.tsx
 var import_fa30 = require("react-icons/fa");
-var import_react41 = require("react");
+var import_react43 = require("react");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 function ITTopBar({
   logo,
   logoText,
+  centerContent,
   userMenu,
+  children,
   showMobileMenuButton,
   onToggleMobileMenu,
   navItems,
   onNavItemClick
 }) {
-  const [isUserMenuOpen, setIsUserMenuOpen] = (0, import_react41.useState)(false);
-  const userMenuRef = (0, import_react41.useRef)(null);
+  const [isUserMenuOpen, setIsUserMenuOpen] = (0, import_react43.useState)(false);
+  const userMenuRef = (0, import_react43.useRef)(null);
   useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     "header",
@@ -9361,101 +9738,105 @@ function ITTopBar({
             item.id
           )) })
         ] }),
-        userMenu && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
-            "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__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "relative", children: [
-                  userMenu.userImage ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-                    "img",
-                    {
-                      className: "w-9 h-9 rounded-full object-cover ring-2 ring-white shadow-sm",
-                      src: userMenu.userImage,
-                      alt: "Current user"
-                    }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_fa30.FaUserCircle, { className: "w-6 h-6", style: { color: "var(--it-topbar-icon, #94a3b8)" } }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "hidden sm:flex flex-col text-left py-0.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-                    ITText,
-                    {
-                      as: "span",
-                      className: "font-semibold text-[0.85rem] leading-tight",
-                      style: { color: "var(--it-topbar-user-text, #0f172a)" },
-                      children: userMenu.userName
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-                    ITText,
-                    {
-                      as: "span",
-                      className: "text-[0.7rem] font-medium",
-                      style: { color: "var(--it-topbar-user-subtitle, #64748b)" },
-                      children: userMenu.userEmail
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
-            "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__ */ (0, import_jsx_runtime68.jsxs)("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__ */ (0, import_jsx_runtime68.jsx)(ITText, { as: "span", className: "block font-bold text-[0.9rem]", style: { color: "var(--it-topbar-user-text, #0f172a)" }, children: userMenu.userName }),
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(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__ */ (0, import_jsx_runtime68.jsx)("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__ */ (0, import_jsx_runtime68.jsxs)("li", { className: "px-2", children: [
-                    i === userMenu.menuItems.length - 1 && isDestructive && i > 0 && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "h-px bg-slate-100 my-1 mx-2" }),
+        centerContent && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "hidden lg:flex flex-1 min-w-0 items-center justify-center px-4", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "w-full max-w-[420px]", children: centerContent }) }),
+        (children || userMenu) && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center gap-2", children: [
+          children,
+          userMenu && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+              "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__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "relative", children: [
+                    userMenu.userImage ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                      "img",
+                      {
+                        className: "w-9 h-9 rounded-full object-cover ring-2 ring-white shadow-sm",
+                        src: userMenu.userImage,
+                        alt: "Current user"
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_fa30.FaUserCircle, { className: "w-6 h-6", style: { color: "var(--it-topbar-icon, #94a3b8)" } }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "hidden sm:flex flex-col text-left py-0.5", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-                      "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__ */ (0, import_jsx_runtime68.jsx)(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__ */ (0, import_jsx_runtime68.jsx)(
+                      ITText,
+                      {
+                        as: "span",
+                        className: "text-[0.7rem] font-medium",
+                        style: { color: "var(--it-topbar-user-subtitle, #64748b)" },
+                        children: userMenu.userEmail
                       }
                     )
-                  ] }, i);
-                }) })
-              ]
-            }
-          )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+              "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__ */ (0, import_jsx_runtime68.jsxs)("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__ */ (0, import_jsx_runtime68.jsx)(ITText, { as: "span", className: "block font-bold text-[0.9rem]", style: { color: "var(--it-topbar-user-text, #0f172a)" }, children: userMenu.userName }),
+                    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(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__ */ (0, import_jsx_runtime68.jsx)("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__ */ (0, import_jsx_runtime68.jsxs)("li", { className: "px-2", children: [
+                      i === userMenu.menuItems.length - 1 && isDestructive && i > 0 && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "h-px bg-slate-100 my-1 mx-2" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                        "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__ */ (0, import_jsx_runtime68.jsx)(ITText, { as: "span", children: m.label })
+                        }
+                      )
+                    ] }, i);
+                  }) })
+                ]
+              }
+            )
+          ] })
         ] })
       ] })
     }
@@ -9471,8 +9852,8 @@ function ITLayout({
   className = "",
   contentClassName = ""
 }) {
-  const [internalCollapsed, setInternalCollapsed] = (0, import_react42.useState)(true);
-  const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react42.useState)(false);
+  const [internalCollapsed, setInternalCollapsed] = (0, import_react44.useState)(true);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react44.useState)(false);
   const isControlled = sidebar.isCollapsed !== void 0;
   const desktopCollapsed = isControlled ? sidebar.isCollapsed : internalCollapsed;
   const handleToggleCollapse = isControlled ? sidebar.onToggleCollapse ?? (() => {
@@ -9494,7 +9875,12 @@ function ITLayout({
         style: { backgroundColor: layoutTokens.backgroundColor },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "hidden lg:block relative z-40 h-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "w-[88px] h-full flex-shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+              "div",
+              {
+                className: `${desktopCollapsed ? "w-[88px]" : "w-[280px]"} h-full flex-shrink-0`
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
               ITSidebar,
               {
@@ -9626,7 +10012,7 @@ function ITLoader({
 
 // src/components/molecules/stepper/stepper.tsx
 var import_clsx52 = __toESM(require("clsx"), 1);
-var import_react43 = require("react");
+var import_react45 = require("react");
 var import_fa31 = require("react-icons/fa");
 var import_jsx_runtime71 = require("react/jsx-runtime");
 function ITStepper({
@@ -9643,15 +10029,15 @@ function ITStepper({
   maxContentHeight = "400px",
   color = "primary"
 }) {
-  const [direction, setDirection] = (0, import_react43.useState)("next");
-  const contentRef = (0, import_react43.useRef)(null);
-  const progressRef = (0, import_react43.useRef)(null);
+  const [direction, setDirection] = (0, import_react45.useState)("next");
+  const contentRef = (0, import_react45.useRef)(null);
+  const progressRef = (0, import_react45.useRef)(null);
   const isThemeColor = color in theme.colors;
   const resolvedColor = isThemeColor ? theme.colors[color][500] : color;
-  (0, import_react43.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     onStepChange?.(currentStep);
   }, [currentStep, onStepChange]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     const pct = currentStep / Math.max(1, steps.length - 1) * 100;
     if (progressRef.current) {
       progressRef.current.style.width = `${pct}%`;
@@ -9822,7 +10208,7 @@ function ITStepper({
 }
 
 // src/components/theme-provider/themeProvider.tsx
-var import_react44 = require("react");
+var import_react46 = require("react");
 var import_md3 = require("react-icons/md");
 
 // src/components/theme-provider/themePresets.ts
@@ -10087,7 +10473,7 @@ function ITThemeProvider({
   radius,
   shadow
 }) {
-  const [palette2, setPaletteState] = (0, import_react44.useState)(() => {
+  const [palette2, setPaletteState] = (0, import_react46.useState)(() => {
     const basePalette = {
       ...DEFAULT_PALETTE,
       ...theme2,
@@ -10113,8 +10499,8 @@ function ITThemeProvider({
     }
     return basePalette;
   });
-  const [isOpen, setIsOpen] = (0, import_react44.useState)(false);
-  const [customPresets, setCustomPresets] = (0, import_react44.useState)(() => {
+  const [isOpen, setIsOpen] = (0, import_react46.useState)(false);
+  const [customPresets, setCustomPresets] = (0, import_react46.useState)(() => {
     try {
       const saved = localStorage.getItem("it-theme-custom-presets");
       return saved ? JSON.parse(saved) : [];
@@ -10123,8 +10509,8 @@ function ITThemeProvider({
       return [];
     }
   });
-  const [newPresetName, setNewPresetName] = (0, import_react44.useState)("");
-  const [isSavingPreset, setIsSavingPreset] = (0, import_react44.useState)(false);
+  const [newPresetName, setNewPresetName] = (0, import_react46.useState)("");
+  const [isSavingPreset, setIsSavingPreset] = (0, import_react46.useState)(false);
   const handleSavePreset = () => {
     if (!newPresetName.trim()) return;
     const newPreset = {
@@ -10143,8 +10529,8 @@ function ITThemeProvider({
     setCustomPresets(updated);
     localStorage.setItem("it-theme-custom-presets", JSON.stringify(updated));
   };
-  const [resolvedTheme, setResolvedTheme] = (0, import_react44.useState)("light");
-  const [darkModeMode, setDarkModeMode] = (0, import_react44.useState)(
+  const [resolvedTheme, setResolvedTheme] = (0, import_react46.useState)("light");
+  const [darkModeMode, setDarkModeMode] = (0, import_react46.useState)(
     () => {
       const saved = localStorage.getItem("it-theme-dark-mode");
       if (saved === "light" || saved === "dark" || saved === "system") {
@@ -10153,7 +10539,7 @@ function ITThemeProvider({
       return "system";
     }
   );
-  (0, import_react44.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     localStorage.setItem("it-theme-dark-mode", darkModeMode);
     const applyDarkMode = (isDark) => {
       if (isDark) {
@@ -10178,7 +10564,7 @@ function ITThemeProvider({
       applyDarkMode(darkModeMode === "dark");
     }
   }, [darkModeMode]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (!showFab) {
       setPaletteState({
         ...DEFAULT_PALETTE,
@@ -10188,7 +10574,7 @@ function ITThemeProvider({
       });
     }
   }, [theme2, showFab]);
-  (0, import_react44.useLayoutEffect)(() => {
+  (0, import_react46.useLayoutEffect)(() => {
     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));
@@ -10198,7 +10584,7 @@ function ITThemeProvider({
       root.style.fontSize = "";
     };
   }, [density]);
-  (0, import_react44.useLayoutEffect)(() => {
+  (0, import_react46.useLayoutEffect)(() => {
     const root = document.documentElement;
     const radiusTokens = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
     if (typeof radius === "number" && isFinite(radius)) {
@@ -10230,7 +10616,7 @@ function ITThemeProvider({
       surfaceStyle?.remove();
     };
   }, [radius, shadow]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     const injectStyles = (obj, prefix = "") => {
       Object.entries(obj).forEach(([key, val]) => {
         if (typeof val === "object" && val !== null) {