@axzydev/axzy_ui_system 1.2.9 → 1.2.11

package/dist/index.js

@@ -3,6 +3,10 @@ import { useEffect } from "react";
 var useClickOutside = (ref, callback) => {
   useEffect(() => {
     const handleClickOutside = (event) => {
+      const target = event.target;
+      const clickedDialog = target?.closest("[data-it-dialog]");
+      const currentDialog = ref.current?.closest("[data-it-dialog]");
+      if (clickedDialog && clickedDialog !== currentDialog) return;
       if (ref.current && !ref.current.contains(event.target)) {
         callback();
       }
@@ -189,11 +193,11 @@ function useTableState({
   const [totalPages, setTotalPages] = useState3(1);
   const goToPage = useCallback3(
     (page) => {
-      if (page >= 1 && page <= totalPages) {
+      if (page >= 1) {
         setCurrentPage(page);
       }
     },
-    [totalPages]
+    []
   );
   const handleItemsPerPageChange = useCallback3((value) => {
     setItemsPerPage(value);
@@ -347,6 +351,7 @@ var sizeMap = {
 var DEFAULT_COLOR = "bg-primary-600";
 var DEFAULT_BG = "var(--color-primary-600)";
 var DEFAULT_SHADOW = "0 4px 14px 0 rgba(37, 99, 235, 0.35)";
+var isRawColorValue = (value) => /^#|^rgb|^hsl|^var\(/i.test(value.trim());
 function ITAvatar({
   src,
   alt = "",
@@ -358,17 +363,18 @@ function ITAvatar({
   onClick
 }) {
   const { container, text } = sizeMap[size];
-  const useInlineStyle = !color || color === DEFAULT_COLOR;
+  const useDefaultStyle = !color || color === DEFAULT_COLOR;
+  const useRawColorStyle = !useDefaultStyle && isRawColorValue(color);
   return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: clsx2(
         "relative inline-flex items-center justify-center rounded-full flex-shrink-0 overflow-hidden text-white font-bold tracking-wide",
         container,
-        !useInlineStyle && color,
+        !useDefaultStyle && !useRawColorStyle && color,
         className
       ),
-      style: useInlineStyle ? { backgroundColor: DEFAULT_BG, boxShadow: DEFAULT_SHADOW } : void 0,
+      style: useDefaultStyle ? { backgroundColor: DEFAULT_BG, boxShadow: DEFAULT_SHADOW } : useRawColorStyle ? { backgroundColor: color } : void 0,
       onClick,
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
@@ -862,10 +868,23 @@ var typography = {
     relaxed: "1.75"
   }
 };
+var zIndex = {
+  /** Barras sticky (ITTopbar) y overlays de navegación (sidebar/aside móvil). */
+  navOverlay: 40,
+  /** Paneles deslizantes (ITDrawer). */
+  drawer: 50,
+  /** Diálogos modales (ITDialog, ITConfirmDialog). */
+  modal: 60,
+  /** UI flotante contextual: dropdowns, ITPopover, ITTooltip, ITDatePicker/ITTimePicker. */
+  floating: 70,
+  /** Notificaciones globales (ITToast) — siempre por encima de todo lo demás. */
+  toast: 80
+};
 var theme = {
   palette,
   colors: semanticColors,
   typography,
+  zIndex,
   ...components
 };
 
@@ -1714,7 +1733,7 @@ function ITConfirmDialog({
   loading = false
 }) {
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxs8("div", { className: "fixed inset-0 z-[300] flex items-center justify-center p-4", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: "fixed inset-0 z-[60] flex items-center justify-center p-4", children: [
     /* @__PURE__ */ jsx10("div", { className: "absolute inset-0 bg-black/40 backdrop-blur-sm", onClick: onClose }),
     /* @__PURE__ */ jsxs8(
       "div",
@@ -1774,6 +1793,19 @@ function inputLabel(error) {
 var inputError = "text-red-500 text-xs mt-1";
 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 clsx10("px-4 py-4 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 clsx10("px-4 py-3 align-middle", className);
+}
+var tableActionsCell = "flex items-center justify-center gap-2";
+var tableCellText = "text-secondary-700 font-medium";
+var tableEmptyContent = "flex flex-col items-center justify-center text-secondary-400";
 var gridColsClasses = {
   1: "grid-cols-1",
   2: "grid-cols-2",
@@ -2364,10 +2396,7 @@ function ITSelect({
       {
         as: "label",
         htmlFor: name,
-        className: clsx12(
-          "text-sm font-medium text-gray-700 dark:text-slate-300 pt-0",
-          { "text-red-500": hasError }
-        ),
+        className: inputLabel(hasError),
         children: [
           /* @__PURE__ */ jsx12(ITText, { as: "span", children: label }),
           required && /* @__PURE__ */ jsx12(ITText, { as: "span", className: "text-red-500 ml-1", children: "*" })
@@ -2398,13 +2427,13 @@ function ITSelect({
             ),
             style: getStyle(),
             children: [
-              /* @__PURE__ */ jsx12("option", { value: "", children: /* @__PURE__ */ jsx12(ITText, { as: "span", children: placeholder || "Selecciona una opci\xF3n" }) }),
-              readOnly ? /* @__PURE__ */ jsx12("option", { value, disabled: true, children: /* @__PURE__ */ jsx12(ITText, { as: "span", children: options.find((option) => option[valueField] === value)?.[labelField] }) }) : options.map((option) => /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx12("option", { value: "", children: placeholder || "Selecciona una opci\xF3n" }),
+              readOnly ? /* @__PURE__ */ jsx12("option", { value, disabled: true, children: options.find((option) => option[valueField] === value)?.[labelField] }) : options.map((option) => /* @__PURE__ */ jsx12(
                 "option",
                 {
                   value: option[valueField],
                   title: option[labelField],
-                  children: /* @__PURE__ */ jsx12(ITText, { as: "span", children: option[labelField] })
+                  children: option[labelField]
                 },
                 option[valueField]
               ))
@@ -2413,7 +2442,7 @@ function ITSelect({
         ),
         /* @__PURE__ */ jsx12("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500", children: /* @__PURE__ */ jsx12(FaAngleDown, {}) })
       ] }),
-      hasError && /* @__PURE__ */ jsx12("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ jsx12(ITText, { as: "p", className: "text-red-500 text-xs", children: errorMessage }) })
+      hasError && /* @__PURE__ */ jsx12("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ jsx12(ITText, { as: "p", className: inputError, children: errorMessage }) })
     ] })
   ] }) });
 }
@@ -2754,7 +2783,7 @@ function ITTable({
         );
       }
       if (col.catalogOptions.error) {
-        return /* @__PURE__ */ jsx14(ITText, { as: "span", className: "text-red-500 text-xs", children: "Error cargando" });
+        return /* @__PURE__ */ jsx14(ITText, { as: "span", className: "text-danger-500 text-xs", children: "Error cargando" });
       }
       return /* @__PURE__ */ jsx14(
         ITSelect,
@@ -2803,14 +2832,14 @@ function ITTable({
         return value ? /* @__PURE__ */ jsx14(
           FaCheck,
           {
-            className: "text-green-500",
+            className: "text-success-500",
             "aria-label": "Verdadero",
             title: "Verdadero"
           }
         ) : /* @__PURE__ */ jsx14(
           FaTimes2,
           {
-            className: "text-red-500",
+            className: "text-danger-500",
             "aria-label": "Falso",
             title: "Falso"
           }
@@ -2840,7 +2869,7 @@ function ITTable({
       actionCol?.actions && /* @__PURE__ */ jsx14("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__ */ jsx14("div", { className: clsx14("space-y-4 w-full", containerClassName), children: /* @__PURE__ */ jsxs12("div", { className: "rounded-xl shadow-sm overflow-hidden", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
+  return /* @__PURE__ */ jsx14("div", { className: clsx14("space-y-4 w-full", containerClassName), children: /* @__PURE__ */ jsxs12("div", { className: tableContainer, style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
     title && /* @__PURE__ */ jsxs12("div", { className: "px-6 py-5 flex items-center justify-between", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
       /* @__PURE__ */ jsx14(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
       /* @__PURE__ */ jsxs12("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: [
@@ -2892,7 +2921,7 @@ function ITTable({
         }
       )
     ] }) }),
-    viewMode === "cards" ? /* @__PURE__ */ jsx14("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: currentData.length > 0 ? currentData.map((row, i) => /* @__PURE__ */ jsx14("div", { children: renderCard ? renderCard(row) : renderDefaultCard(row) }, i)) : /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 text-secondary-400", children: [
+    viewMode === "cards" ? /* @__PURE__ */ jsx14("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: currentData.length > 0 ? currentData.map((row, i) => /* @__PURE__ */ jsx14("div", { children: renderCard ? renderCard(row) : renderDefaultCard(row) }, i)) : /* @__PURE__ */ jsxs12("div", { className: clsx14(tableEmptyContent, "py-12"), children: [
       /* @__PURE__ */ jsx14(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
       /* @__PURE__ */ jsx14(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
     ] }) }) : /* @__PURE__ */ jsx14("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs12(
@@ -2906,11 +2935,11 @@ function ITTable({
           sizeStyles[size]
         ),
         children: [
-          /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsx14("tr", { className: "bg-secondary-50 text-xs uppercase tracking-wider font-semibold text-slate-700 dark:text-slate-200", children: columns.map((col) => /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsx14("tr", { className: clsx14(tableHeaderRow, "dark:text-slate-200"), children: columns.map((col) => /* @__PURE__ */ jsx14(
             "th",
             {
               scope: "col",
-              className: clsx14("px-4 py-4 align-top", col.className),
+              className: tableHeaderCell(col.className),
               children: /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-3 min-w-[150px]", children: [
                 /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between gap-2", children: [
                   /* @__PURE__ */ jsx14(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
@@ -2929,21 +2958,21 @@ function ITTable({
             },
             col.key
           )) }) }),
-          /* @__PURE__ */ jsx14("tbody", { className: "divide-y divide-slate-100 dark:divide-slate-700/30", children: currentData.length > 0 ? currentData.map((row, rowIndex) => /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx14("tbody", { className: clsx14(tableBody, "dark:divide-slate-700/30"), children: currentData.length > 0 ? currentData.map((row, rowIndex) => /* @__PURE__ */ jsx14(
             "tr",
             {
-              className: clsx14("hover:bg-secondary-50/50 transition-colors duration-150 group", variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20"),
+              className: clsx14(tableRow, variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20"),
               children: columns.map((col) => /* @__PURE__ */ jsx14(
                 "td",
                 {
-                  className: clsx14("px-4 py-3 align-middle", col.className),
-                  children: col.type === "actions" ? /* @__PURE__ */ jsx14("div", { className: "flex items-center justify-center gap-2", children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx14("div", { className: "text-secondary-700 font-medium", children: renderCellContent(col, row) })
+                  className: tableCell(col.className),
+                  children: col.type === "actions" ? /* @__PURE__ */ jsx14("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx14("div", { className: tableCellText, children: renderCellContent(col, row) })
                 },
                 `${rowIndex}-${col.key}`
               ))
             },
             rowIndex
-          )) : /* @__PURE__ */ jsx14("tr", { children: /* @__PURE__ */ jsx14("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center text-secondary-400", children: [
+          )) : /* @__PURE__ */ jsx14("tr", { children: /* @__PURE__ */ jsx14("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: /* @__PURE__ */ jsxs12("div", { className: tableEmptyContent, children: [
             /* @__PURE__ */ jsx14(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
             /* @__PURE__ */ jsx14(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
           ] }) }) }) })
@@ -3077,7 +3106,7 @@ function ITDataTable({
         return /* @__PURE__ */ jsx15(FaSpinner2, { className: "animate-spin", "aria-label": "Cargando opciones", title: "Cargando opciones" });
       }
       if (col.catalogOptions.error) {
-        return /* @__PURE__ */ jsx15(ITText, { as: "span", className: "text-red-500 text-xs", children: "Error cargando" });
+        return /* @__PURE__ */ jsx15(ITText, { as: "span", className: "text-danger-500 text-xs", children: "Error cargando" });
       }
       return /* @__PURE__ */ jsx15(
         ITSelect,
@@ -3123,7 +3152,7 @@ function ITDataTable({
       case "number":
         return typeof value === "number" && col.currencyMX ? formatCurrencyMX(value) : value;
       case "boolean":
-        return value ? /* @__PURE__ */ jsx15(FaCheck2, { className: "text-green-500", "aria-label": "Verdadero", title: "Verdadero" }) : /* @__PURE__ */ jsx15(FaTimes3, { className: "text-red-500", "aria-label": "Falso", title: "Falso" });
+        return value ? /* @__PURE__ */ jsx15(FaCheck2, { className: "text-success-500", "aria-label": "Verdadero", title: "Verdadero" }) : /* @__PURE__ */ jsx15(FaTimes3, { className: "text-danger-500", "aria-label": "Falso", title: "Falso" });
       case "actions":
         return col.actions ? col.actions(row) : null;
       case "catalog":
@@ -3149,7 +3178,7 @@ function ITDataTable({
   };
   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__ */ jsxs13("div", { className: clsx15("space-y-4 w-full relative", containerClassName), children: [
-    /* @__PURE__ */ jsxs13("div", { className: "rounded-xl shadow-sm overflow-hidden", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
+    /* @__PURE__ */ jsxs13("div", { className: tableContainer, style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
       title && /* @__PURE__ */ jsxs13("div", { className: "px-6 py-5 flex items-center justify-between", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
         /* @__PURE__ */ jsx15(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
         /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
@@ -3181,7 +3210,7 @@ function ITDataTable({
           /* @__PURE__ */ jsx15(FaSpinner2, { className: "animate-spin text-primary-500 text-4xl" }),
           /* @__PURE__ */ jsx15(ITText, { as: "span", className: "text-sm font-semibold text-secondary-600 animate-pulse", children: "Cargando datos..." })
         ] }) }) }),
-        viewMode === "cards" ? /* @__PURE__ */ jsx15("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: data.length > 0 ? data.map((row, i) => /* @__PURE__ */ jsx15("div", { children: renderCard ? renderCard(row) : renderDefaultCard(row) }, i)) : !isLoading && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center justify-center py-12 text-secondary-400", children: [
+        viewMode === "cards" ? /* @__PURE__ */ jsx15("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: data.length > 0 ? data.map((row, i) => /* @__PURE__ */ jsx15("div", { children: renderCard ? renderCard(row) : renderDefaultCard(row) }, i)) : !isLoading && /* @__PURE__ */ jsxs13("div", { className: clsx15(tableEmptyContent, "py-12"), children: [
           /* @__PURE__ */ jsx15(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
           /* @__PURE__ */ jsx15(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
         ] }) }) : /* @__PURE__ */ jsxs13(
@@ -3197,7 +3226,7 @@ function ITDataTable({
               className
             ),
             children: [
-              /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsx15("tr", { className: "bg-secondary-50 text-xs uppercase tracking-wider font-semibold text-slate-700 dark:text-slate-200", children: columns.map((col) => /* @__PURE__ */ jsx15("th", { scope: "col", className: clsx15("px-4 py-4 align-top", col.className), children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-3 min-w-[150px]", children: [
+              /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsx15("tr", { className: clsx15(tableHeaderRow, "dark:text-slate-200"), children: columns.map((col) => /* @__PURE__ */ jsx15("th", { scope: "col", className: tableHeaderCell(col.className), children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-3 min-w-[150px]", children: [
                 /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between gap-2", children: [
                   /* @__PURE__ */ jsx15(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
                   col.sortable && col.type !== "actions" && /* @__PURE__ */ jsx15(
@@ -3213,7 +3242,7 @@ function ITDataTable({
                 ] }),
                 /* @__PURE__ */ jsx15("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
               ] }) }, col.key)) }) }),
-              /* @__PURE__ */ jsx15("tbody", { className: "divide-y divide-slate-100 dark:divide-slate-700/30", children: data.length > 0 ? data.map((row, rowIndex) => /* @__PURE__ */ jsx15("tr", { className: clsx15("hover:bg-secondary-50/50 transition-colors duration-150 group", variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20"), children: columns.map((col) => /* @__PURE__ */ jsx15("td", { className: clsx15("px-4 py-3 align-middle", col.className), children: col.type === "actions" ? /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center gap-2", children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx15("div", { className: "text-secondary-700 font-medium", children: renderCellContent(col, row) }) }, `${rowIndex}-${col.key}`)) }, rowIndex)) : /* @__PURE__ */ jsx15("tr", { children: /* @__PURE__ */ jsx15("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: !isLoading && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center justify-center text-secondary-400", children: [
+              /* @__PURE__ */ jsx15("tbody", { className: clsx15(tableBody, "dark:divide-slate-700/30"), children: data.length > 0 ? data.map((row, rowIndex) => /* @__PURE__ */ jsx15("tr", { className: clsx15(tableRow, variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20"), children: columns.map((col) => /* @__PURE__ */ jsx15("td", { className: tableCell(col.className), children: col.type === "actions" ? /* @__PURE__ */ jsx15("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx15("div", { className: tableCellText, children: renderCellContent(col, row) }) }, `${rowIndex}-${col.key}`)) }, rowIndex)) : /* @__PURE__ */ jsx15("tr", { children: /* @__PURE__ */ jsx15("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: !isLoading && /* @__PURE__ */ jsxs13("div", { className: tableEmptyContent, children: [
                 /* @__PURE__ */ jsx15(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
                 /* @__PURE__ */ jsx15(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
               ] }) }) }) })
@@ -3464,7 +3493,7 @@ function ITDatePicker({
       "div",
       {
         className: clsx16(
-          "fixed z-[9999]",
+          "fixed z-[70]",
           calendarClassName,
           range ? "w-[320px]" : "w-[280px]"
         ),
@@ -5522,7 +5551,8 @@ function ITDialog({
   const content = /* @__PURE__ */ jsx22(
     "div",
     {
-      className: `fixed inset-0 flex ${fullScreen ? "items-stretch" : "items-center justify-center"} bg-black/50 z-[9999]`,
+      "data-it-dialog": "true",
+      className: `fixed inset-0 flex ${fullScreen ? "items-stretch" : "items-center justify-center"} bg-black/50 z-[60]`,
       children: /* @__PURE__ */ jsx22(
         "div",
         {
@@ -5575,7 +5605,7 @@ function ITDrawer({
 }) {
   const panelRef = useRef7(null);
   useClickOutside_default(panelRef, onClose);
-  return /* @__PURE__ */ jsx23(Fragment5, { children: isOpen && /* @__PURE__ */ jsxs20("div", { className: "fixed inset-0 z-[100] flex", children: [
+  return /* @__PURE__ */ jsx23(Fragment5, { children: isOpen && /* @__PURE__ */ jsxs20("div", { className: "fixed inset-0 z-[50] flex", children: [
     /* @__PURE__ */ jsx23("div", { className: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" }),
     /* @__PURE__ */ jsxs20(
       "div",
@@ -5913,7 +5943,7 @@ function ITTimePicker({
       "div",
       {
         ref: dropdownRef,
-        className: "fixed z-[9999] bg-white border border-gray-100 shadow-xl rounded-xl w-64 overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-200 origin-top it-timepicker-dropdown",
+        className: "fixed z-[70] bg-white border border-gray-100 shadow-xl rounded-xl w-64 overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-200 origin-top it-timepicker-dropdown",
         style: {
           top: `${dropdownPosition.top}px`,
           left: `${dropdownPosition.left}px`
@@ -6104,7 +6134,7 @@ function ITSearchSelect({
   const getInputStyle = () => {
     const style = {
       backgroundColor: inputTheme.backgroundColor || "#ffffff",
-      borderColor: inputTheme.borderColor || "#e2e8f0",
+      borderColor: inputTheme.borderColor || "var(--color-secondary-300)",
       borderRadius: inputTheme.borderRadius || "0.5rem",
       padding: inputTheme.padding || "0.5rem 0.75rem",
       fontSize: inputTheme.fontSize || "0.875rem",
@@ -6115,8 +6145,8 @@ function ITSearchSelect({
       width: "100%"
     };
     if (disabled) {
-      style.backgroundColor = inputTheme.disabled?.backgroundColor || "#f1f5f9";
-      style.borderColor = inputTheme.disabled?.borderColor || "#e2e8f0";
+      style.backgroundColor = inputTheme.disabled?.backgroundColor || "var(--color-secondary-100)";
+      style.borderColor = inputTheme.disabled?.borderColor || "var(--color-secondary-200)";
       style.opacity = 0.7;
       style.cursor = "not-allowed";
     }
@@ -6169,7 +6199,7 @@ function ITSearchSelect({
           !isLoading && /* @__PURE__ */ jsx28(FaSearch, { size: 14, className: clsx24({ "text-primary-500": isFocused }) })
         ] })
       ] }),
-      isOpen && /* @__PURE__ */ jsx28("div", { className: "absolute z-50 w-full mt-1 bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top", children: /* @__PURE__ */ jsx28("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ jsx28(
+      isOpen && /* @__PURE__ */ jsx28("div", { className: "absolute z-[70] w-full mt-1 bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top", children: /* @__PURE__ */ jsx28("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ jsx28(
         ITText,
         {
           as: "div",
@@ -6767,7 +6797,7 @@ function ITNavbar({
               "div",
               {
                 ref: userMenuRef,
-                className: "z-50 absolute right-0 mt-2 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm",
+                className: "z-[70] absolute right-0 mt-2 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm",
                 children: [
                   /* @__PURE__ */ jsxs25("div", { className: "px-4 py-3", children: [
                     /* @__PURE__ */ jsx33(ITText, { as: "span", className: "block text-sm text-gray-900", children: userMenu.userName }),
@@ -6791,7 +6821,7 @@ function ITNavbar({
         ] }) })
       ] }) }),
       /* @__PURE__ */ jsxs25("div", { className: "flex-1 flex overflow-hidden relative", children: [
-        (showSidebar || showSidebarOnMobile) && /* @__PURE__ */ jsx33("aside", { className: "fixed inset-y-0 left-0 w-64 bg-gray-50 transform transition-transform duration-300 ease-in-out z-50 shadow-lg md:static md:transform-none md:shadow-none md:border-r md:border-gray-200", children: /* @__PURE__ */ jsx33("div", { className: "h-full overflow-y-auto py-4 px-3", children: /* @__PURE__ */ jsx33("ul", { className: "space-y-2 font-medium", children: sidebarItems }) }) }),
+        (showSidebar || showSidebarOnMobile) && /* @__PURE__ */ jsx33("aside", { className: "fixed inset-y-0 left-0 w-64 bg-gray-50 transform transition-transform duration-300 ease-in-out z-[40] shadow-lg md:static md:transform-none md:shadow-none md:border-r md:border-gray-200", children: /* @__PURE__ */ jsx33("div", { className: "h-full overflow-y-auto py-4 px-3", children: /* @__PURE__ */ jsx33("ul", { className: "space-y-2 font-medium", children: sidebarItems }) }) }),
         /* @__PURE__ */ jsx33("main", { className: "flex-1 bg-gray-100 overflow-y-auto", children })
       ] })
     ] });
@@ -7240,7 +7270,7 @@ function ITPopover({
   });
   return /* @__PURE__ */ jsxs29("div", { ref, className: clsx30("relative inline-flex", className), children: [
     /* @__PURE__ */ jsx38("div", { onClick: () => isControlled ? onClose?.() : setInternalOpen((p) => !p), className: "cursor-pointer", children: trigger }),
-    open && /* @__PURE__ */ jsx38("div", { className: clsx30("absolute z-[200]", positionClasses[position]), children: /* @__PURE__ */ jsx38("div", { className: "bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 p-3 min-w-[160px]", children }) })
+    open && /* @__PURE__ */ jsx38("div", { className: clsx30("absolute z-[70]", positionClasses[position]), children: /* @__PURE__ */ jsx38("div", { className: "bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 p-3 min-w-[160px]", children }) })
   ] });
 }
 
@@ -8075,7 +8105,7 @@ function ITSidebar({
       style: {
         zIndex: 50,
         backgroundColor: "var(--sidebar-bg, rgba(255, 255, 255, 0.90))",
-        borderRight: "1px solid var(--sidebar-border, #e2e8f0)",
+        borderRight: "1px solid var(--sidebar-border, var(--color-secondary-200))",
         WebkitBackdropFilter: "blur(12px)",
         backdropFilter: "blur(12px)"
       },
@@ -8089,12 +8119,12 @@ function ITSidebar({
                   ${isSidebarCollapsed ? "justify-center p-2.5 mb-2" : "justify-between px-3.5 py-3 mb-1"}
                 `,
             style: {
-              backgroundColor: item.isActive ? "var(--sidebar-active-bg, #f8fafc)" : "transparent",
+              backgroundColor: item.isActive ? "var(--sidebar-active-bg, var(--color-secondary-50))" : "transparent",
               boxShadow: item.isActive ? "0 1px 2px 0 rgba(0, 0, 0, 0.05)" : "none",
-              border: item.isActive ? "1px solid var(--sidebar-border, #e2e8f0)" : "1px solid transparent"
+              border: item.isActive ? "1px solid var(--sidebar-border, var(--color-secondary-200))" : "1px solid transparent"
             },
             onMouseEnter: (e) => {
-              if (!item.isActive) e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, #f1f5f9)";
+              if (!item.isActive) e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, var(--color-secondary-100))";
             },
             onMouseLeave: (e) => {
               if (!item.isActive) e.currentTarget.style.backgroundColor = "transparent";
@@ -8140,7 +8170,7 @@ function ITSidebar({
                 "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(--sidebar-active-color, #0f172a)" : "var(--sidebar-icon-color, #64748b)", opacity: 0.7 },
+                  style: { color: item.isActive ? "var(--sidebar-active-color, var(--color-secondary-900))" : "var(--sidebar-icon-color, var(--color-secondary-500))", opacity: 0.7 },
                   children: /* @__PURE__ */ jsx51(FaChevronDown2, { className: "w-3 h-3" })
                 }
               ),
@@ -8165,15 +8195,15 @@ function ITSidebar({
         isSidebarCollapsed && /* @__PURE__ */ jsxs39(
           "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-50 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)]",
+            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(--sidebar-bg, #ffffff)",
-              border: "1px solid var(--sidebar-border, #e2e8f0)",
+              border: "1px solid var(--sidebar-border, var(--color-secondary-200))",
               WebkitBackdropFilter: "blur(16px)",
               backdropFilter: "blur(16px)"
             },
             children: [
-              /* @__PURE__ */ jsxs39("div", { className: "px-5 py-4 flex items-center gap-3 font-semibold border-b", style: { borderColor: "var(--sidebar-border, #e2e8f0)", color: "var(--sidebar-active-color, #0f172a)" }, children: [
+              /* @__PURE__ */ jsxs39("div", { className: "px-5 py-4 flex items-center gap-3 font-semibold border-b", style: { borderColor: "var(--sidebar-border, var(--color-secondary-200))", color: "var(--sidebar-active-color, var(--color-secondary-900))" }, children: [
                 item.icon && /* @__PURE__ */ jsx51("span", { style: { color: "var(--sidebar-active-icon, #10b981)" }, className: "text-xl drop-shadow-sm", children: item.icon }),
                 /* @__PURE__ */ jsx51(ITText, { as: "span", className: "tracking-wide text-[15px]", children: item.label })
               ] }),
@@ -8192,8 +8222,8 @@ function ITSidebar({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx51("span", { className: `w-1.5 h-1.5 rounded-full transition-all ${subitem.isActive ? "scale-125" : ""}`, style: { backgroundColor: subitem.isActive ? "var(--sidebar-active-icon, #10b981)" : "var(--sidebar-icon-color, #94a3b8)" } }),
-                    /* @__PURE__ */ jsx51(ITText, { as: "span", style: { color: subitem.isActive ? "var(--sidebar-active-color, #0f172a)" : "var(--sidebar-label-color, #475569)", fontWeight: subitem.isActive ? 600 : 500 }, children: subitem.label })
+                    /* @__PURE__ */ jsx51("span", { className: `w-1.5 h-1.5 rounded-full transition-all ${subitem.isActive ? "scale-125" : ""}`, style: { backgroundColor: subitem.isActive ? "var(--sidebar-active-icon, #10b981)" : "var(--sidebar-icon-color, var(--color-secondary-400))" } }),
+                    /* @__PURE__ */ jsx51(ITText, { as: "span", style: { color: subitem.isActive ? "var(--sidebar-active-color, var(--color-secondary-900))" : "var(--sidebar-label-color, var(--color-secondary-600))", fontWeight: subitem.isActive ? 600 : 500 }, children: subitem.label })
                   ]
                 },
                 subitem.id
@@ -8206,7 +8236,7 @@ function ITSidebar({
           {
             className: "ml-5 flex flex-col gap-0.5 py-1",
             style: {
-              borderLeft: subitemConnector === "|" ? "1px solid var(--sidebar-border, #e2e8f0)" : "none"
+              borderLeft: subitemConnector === "|" ? "1px solid var(--sidebar-border, var(--color-secondary-200))" : "none"
             },
             children: item.subitems.map((subitem) => /* @__PURE__ */ jsx51("li", { className: "relative", children: /* @__PURE__ */ jsxs39(
               "button",
@@ -8217,8 +8247,8 @@ function ITSidebar({
                 },
                 className: `flex items-center gap-2.5 w-full text-left px-3 py-2 rounded-xl transition-all duration-300`,
                 style: {
-                  color: subitem.isActive ? "var(--sidebar-active-color, #0f172a)" : "var(--sidebar-label-color, #475569)",
-                  backgroundColor: subitem.isActive ? "var(--sidebar-active-bg, #f8fafc)" : "transparent",
+                  color: subitem.isActive ? "var(--sidebar-active-color, var(--color-secondary-900))" : "var(--sidebar-label-color, var(--color-secondary-600))",
+                  backgroundColor: subitem.isActive ? "var(--sidebar-active-bg, var(--color-secondary-50))" : "transparent",
                   fontSize: "0.85rem",
                   fontWeight: subitem.isActive ? 600 : 500,
                   letterSpacing: "0.01em",
@@ -8226,7 +8256,7 @@ function ITSidebar({
                 },
                 onMouseEnter: (e) => {
                   if (!subitem.isActive) {
-                    e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, #f1f5f9)";
+                    e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, var(--color-secondary-100))";
                     e.currentTarget.style.transform = "translateX(3px)";
                   }
                 },
@@ -8252,7 +8282,7 @@ function ITSidebar({
                     {
                       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(--sidebar-active-icon, #10b981)" : "var(--sidebar-icon-color, #94a3b8)"
+                        backgroundColor: subitem.isActive ? "var(--sidebar-active-icon, #10b981)" : "var(--sidebar-icon-color, var(--color-secondary-400))"
                       }
                     }
                   ),
@@ -8594,7 +8624,7 @@ function ITToast({
     "div",
     {
       className: clsx40(
-        "fixed z-50 p-4 rounded-xl shadow-xl flex items-center justify-between gap-4 transition-all duration-300 text-white min-w-[300px]",
+        "fixed z-[80] p-4 rounded-xl shadow-xl flex items-center justify-between gap-4 transition-all duration-300 text-white min-w-[300px]",
         positionStyles[position],
         {
           "opacity-100 translate-y-0 scale-100": isVisible,
@@ -8638,6 +8668,12 @@ var FileTypeEnum = /* @__PURE__ */ ((FileTypeEnum2) => {
   FileTypeEnum2["PNG"] = "image/png";
   FileTypeEnum2["JPG"] = "image/jpg";
   FileTypeEnum2["JPEG"] = "image/jpeg";
+  FileTypeEnum2["MP4"] = "video/mp4";
+  FileTypeEnum2["MOV"] = "video/quicktime";
+  FileTypeEnum2["AVI"] = "video/x-msvideo";
+  FileTypeEnum2["MKV"] = "video/x-matroska";
+  FileTypeEnum2["VIDEO_3GPP"] = "video/3gpp";
+  FileTypeEnum2["WEBM"] = "video/webm";
   return FileTypeEnum2;
 })(FileTypeEnum || {});
 var UploadStatus = /* @__PURE__ */ ((UploadStatus2) => {
@@ -8708,6 +8744,24 @@ var ITDropfile = ({
         case "image/jpeg" /* JPEG */:
           accept["image/jpeg" /* JPEG */] = [".jpeg", ".jpg"];
           break;
+        case "video/mp4" /* MP4 */:
+          accept["video/mp4" /* MP4 */] = [".mp4"];
+          break;
+        case "video/quicktime" /* MOV */:
+          accept["video/quicktime" /* MOV */] = [".mov"];
+          break;
+        case "video/x-msvideo" /* AVI */:
+          accept["video/x-msvideo" /* AVI */] = [".avi"];
+          break;
+        case "video/x-matroska" /* MKV */:
+          accept["video/x-matroska" /* MKV */] = [".mkv"];
+          break;
+        case "video/3gpp" /* VIDEO_3GPP */:
+          accept["video/3gpp" /* VIDEO_3GPP */] = [".3gp"];
+          break;
+        case "video/webm" /* WEBM */:
+          accept["video/webm" /* WEBM */] = [".webm"];
+          break;
       }
     });
     return accept;
@@ -8731,6 +8785,14 @@ var ITDropfile = ({
         case "image/jpeg" /* JPEG */:
           if (!extensions.includes("IMAGEN")) extensions.push("IMAGEN");
           break;
+        case "video/mp4" /* MP4 */:
+        case "video/quicktime" /* MOV */:
+        case "video/x-msvideo" /* AVI */:
+        case "video/x-matroska" /* MKV */:
+        case "video/3gpp" /* VIDEO_3GPP */:
+        case "video/webm" /* WEBM */:
+          if (!extensions.includes("VIDEO")) extensions.push("VIDEO");
+          break;
       }
     });
     return extensions.join(", ");
@@ -8893,35 +8955,41 @@ var ITDropfile = ({
       ] }) }),
       /* @__PURE__ */ jsx58("div", { className: "px-3 py-2 bg-white border-t border-gray-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ jsxs44(Fragment8, { children: [
         /* @__PURE__ */ jsx58(
-          "button",
+          ITButton,
           {
             type: "button",
+            variant: "outlined",
+            color: "secondary",
+            size: "small",
             onClick: handleCancel,
-            className: "px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors",
-            children: /* @__PURE__ */ jsx58(ITText, { as: "span", children: "Cancelar" })
+            children: /* @__PURE__ */ jsx58(ITText, { children: "Cancelar" })
           }
         ),
-        /* @__PURE__ */ jsxs44(
-          "button",
+        /* @__PURE__ */ jsx58(
+          ITButton,
           {
             type: "button",
+            variant: "filled",
+            color: "primary",
+            size: "small",
             onClick: handleConfirm,
-            className: "px-3 py-1.5 text-xs font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 shadow-sm transition-colors flex items-center gap-1",
-            children: [
-              /* @__PURE__ */ jsx58(ITText, { as: "span", children: "Confirmar" }),
+            children: /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx58(ITText, { children: "Confirmar" }),
               /* @__PURE__ */ jsx58("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx58("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
-            ]
+            ] })
           }
         )
       ] }) : /* @__PURE__ */ jsxs44(
-        "button",
+        ITButton,
         {
           type: "button",
+          variant: "outlined",
+          color: "danger",
+          size: "small",
           onClick: handleDelete,
-          className: "px-3 py-1.5 text-xs font-medium text-danger-600 bg-danger-50 border border-danger-100 rounded-lg hover:bg-danger-100 transition-colors flex items-center gap-1",
           children: [
             /* @__PURE__ */ jsx58("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx58("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
-            /* @__PURE__ */ jsx58(ITText, { as: "span", children: "Eliminar" })
+            /* @__PURE__ */ jsx58(ITText, { children: "Eliminar" })
           ]
         }
       ) }),
@@ -9074,7 +9142,7 @@ function ITTopBar({
             {
               ref: userMenuRef,
               className: `
-                absolute right-0 mt-3 w-64 rounded-2xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)] z-50 overflow-hidden transform origin-top-right transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]
+                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: {
@@ -9166,7 +9234,7 @@ function ITLayout({
           mobileSidebarOpen && /* @__PURE__ */ jsx60(
             "div",
             {
-              className: "lg:hidden fixed inset-0 z-50 transition-opacity duration-300 backdrop-blur-sm bg-black/40",
+              className: "lg:hidden fixed inset-0 z-[40] transition-opacity duration-300 backdrop-blur-sm bg-black/40",
               onClick: () => setMobileSidebarOpen(false),
               children: /* @__PURE__ */ jsx60(
                 "div",