@axzydev/axzy_ui_system 1.2.9 → 1.2.12

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);
@@ -346,7 +350,8 @@ 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 DEFAULT_SHADOW = "0 6px 16px -2px rgba(37, 99, 235, 0.25)";
+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,
@@ -590,7 +596,7 @@ var components = {
       hover: semanticColors.primary[600],
       active: semanticColors.primary[700],
       focus: `0 0 0 2px ${semanticColors.primary[200]}`,
-      borderRadius: "0.375rem",
+      borderRadius: "var(--radius-md)",
       padding: "0.5rem 1rem",
       fontSize: "0.875rem",
       fontWeight: "600",
@@ -601,7 +607,7 @@ var components = {
       color: "#ffffff",
       hover: semanticColors.secondary[600],
       focus: `0 0 0 2px ${semanticColors.secondary[200]}`,
-      borderRadius: "0.375rem",
+      borderRadius: "var(--radius-md)",
       padding: "0.5rem 1rem",
       fontSize: "0.875rem",
       fontWeight: "600"
@@ -611,41 +617,41 @@ var components = {
       color: "#ffffff",
       hover: semanticColors.success[600],
       focus: `0 0 0 2px ${semanticColors.success[200]}`,
-      borderRadius: "0.375rem"
+      borderRadius: "var(--radius-md)"
     },
     danger: {
       backgroundColor: semanticColors.danger[500],
       color: "#ffffff",
       hover: semanticColors.danger[600],
       focus: `0 0 0 2px ${semanticColors.danger[200]}`,
-      borderRadius: "0.375rem"
+      borderRadius: "var(--radius-md)"
     },
     error: {
       backgroundColor: semanticColors.danger[500],
       color: "#ffffff",
       hover: semanticColors.danger[600],
-      borderRadius: "0.375rem"
+      borderRadius: "var(--radius-md)"
     },
     warning: {
       backgroundColor: semanticColors.warning[500],
       color: "#ffffff",
       hover: semanticColors.warning[600],
       focus: `0 0 0 2px ${semanticColors.warning[200]}`,
-      borderRadius: "0.375rem"
+      borderRadius: "var(--radius-md)"
     },
     info: {
       backgroundColor: semanticColors.info[500],
       color: "#ffffff",
       hover: semanticColors.info[600],
       focus: `0 0 0 2px ${semanticColors.info[200]}`,
-      borderRadius: "0.375rem"
+      borderRadius: "var(--radius-md)"
     },
     purple: {
       backgroundColor: semanticColors.purple[500],
       color: "#ffffff",
       hover: semanticColors.purple[600],
       focus: `0 0 0 2px ${semanticColors.purple[200]}`,
-      borderRadius: "0.375rem"
+      borderRadius: "var(--radius-md)"
     },
     outline: {
       backgroundColor: "transparent",
@@ -653,7 +659,7 @@ var components = {
       borderColor: semanticColors.primary[600],
       borderWidth: "2px",
       hover: semanticColors.primary[50],
-      borderRadius: "0.375rem"
+      borderRadius: "var(--radius-md)"
     }
   },
   badge: {
@@ -711,19 +717,19 @@ var components = {
   },
   card: {
     backgroundColor: "var(--card-bg, #ffffff)",
-    borderRadius: "1rem",
+    borderRadius: "var(--radius-2xl)",
     borderColor: `var(--card-border, ${semanticColors.gray[200]})`,
     borderWidth: "1px",
-    shadow: "var(--card-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))",
+    shadow: "var(--card-shadow, var(--shadow-md))",
     hover: {
-      shadow: "var(--card-shadow-hover, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1))"
+      shadow: "var(--card-shadow-hover, var(--shadow-lg))"
     },
     header: {
       backgroundColor: `var(--card-header-bg, ${semanticColors.gray[50]})`,
       borderBottom: `1px solid var(--card-header-border, var(--color-secondary-200))`,
       padding: "1rem 1.5rem",
-      borderTopLeftRadius: "1rem",
-      borderTopRightRadius: "1rem"
+      borderTopLeftRadius: "var(--radius-2xl)",
+      borderTopRightRadius: "var(--radius-2xl)"
     },
     body: {
       padding: "1.5rem"
@@ -732,7 +738,7 @@ var components = {
   input: {
     backgroundColor: "var(--input-bg, #ffffff)",
     borderColor: `var(--input-border, ${semanticColors.gray[300]})`,
-    borderRadius: "0.5rem",
+    borderRadius: "var(--radius-md)",
     padding: "0.5rem 0.75rem",
     fontSize: "0.875rem",
     focus: {
@@ -798,8 +804,8 @@ var components = {
     },
     content: {
       backgroundColor: "var(--modal-bg, #ffffff)",
-      borderRadius: "1rem",
-      shadow: "var(--modal-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1))"
+      borderRadius: "var(--radius-2xl)",
+      shadow: "var(--modal-shadow, var(--shadow-xl))"
     },
     header: {
       padding: "1.5rem 1.5rem 0.5rem 1.5rem",
@@ -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
 };
 
@@ -1349,7 +1368,7 @@ var ITCalendar = ({
               },
               year
             )) }) : mode === "month" ? /* @__PURE__ */ jsxs5("div", { className: "p-4", children: [
-              /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-7 mb-2", children: ["Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b", "Dom"].map((day) => /* @__PURE__ */ jsx7(ITText, { as: "div", className: "text-center text-xs font-semibold text-gray-400 uppercase py-1", children: day }, day)) }),
+              /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-7 mb-2", children: ["Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b", "Dom"].map((day) => /* @__PURE__ */ jsx7(ITText, { as: "div", className: "text-center text-xs font-semibold text-secondary-400 uppercase py-1", children: day }, day)) }),
               /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-7 gap-1", children: monthDays.map((day) => {
                 const isDisabled = isDateDisabled(day);
                 const isCurrentMonth = isSameMonth(day, currentDate);
@@ -1590,11 +1609,14 @@ function ITCard({
   const [isHovered, setIsHovered] = useState6(false);
   const containerStyle = {
     backgroundColor: "var(--card-bg, #ffffff)",
-    borderColor: "var(--card-border, #e2e8f0)",
+    borderColor: "var(--card-border, rgba(15, 23, 42, 0.06))",
     borderWidth: "1px",
-    borderRadius: "var(--card-radius, 0.75rem)",
-    boxShadow: onClick ? isHovered ? "0 8px 25px -5px rgba(0, 0, 0, 0.1)" : "0 1px 3px 0 rgba(0, 0, 0, 0.05)" : "none",
-    transition: onClick ? "all 0.2s ease-in-out" : "none",
+    borderRadius: "var(--card-radius, var(--radius-2xl))",
+    // Soft depth: every card floats a little at rest; interactive cards
+    // gain visual weight on hover instead of appearing flat until clicked.
+    boxShadow: onClick ? isHovered ? "var(--shadow-lg)" : "var(--shadow-sm)" : "var(--shadow-sm)",
+    transition: onClick ? "box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out" : "none",
+    transform: onClick && isHovered ? "translateY(-2px)" : "translateY(0)",
     cursor: onClick ? "pointer" : "default"
   };
   const bodyStyle = {
@@ -1626,13 +1648,13 @@ function ITCard({
               children: title
             }
           ),
-          /* @__PURE__ */ jsx8(ITText, { as: "div", className: "text-gray-600", children })
+          /* @__PURE__ */ jsx8(ITText, { as: "div", className: "text-secondary-600", children })
         ] }),
         actions && /* @__PURE__ */ jsx8(
           "div",
           {
             className: clsx7(
-              "p-4 border-t border-gray-100 mt-auto",
+              "p-4 border-t border-secondary-100 mt-auto",
               actionClassName
             ),
             children: actions
@@ -1714,7 +1736,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",
@@ -1768,12 +1790,25 @@ import clsx10 from "clsx";
 function inputLabel(error) {
   return clsx10(
     "text-sm font-medium",
-    error ? "text-red-500" : "text-gray-700 dark:text-slate-300"
+    error ? "text-danger-500" : "text-secondary-700 dark:text-secondary-300"
   );
 }
-var inputError = "text-red-500 text-xs mt-1";
+var inputError = "text-danger-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",
@@ -2162,14 +2197,14 @@ function ITInput({
               type === "checkbox" && "form-checkbox rounded",
               className,
               { [disabledOverlay]: disabled },
-              { "border-red-500": hasError }
+              { "border-danger-500": hasError }
             )
           }
         ),
-        label && /* @__PURE__ */ jsxs9("label", { htmlFor: name, className: "text-sm text-gray-700 dark:text-slate-300 select-none", children: [
+        label && /* @__PURE__ */ jsxs9("label", { htmlFor: name, className: "text-sm text-secondary-700 dark:text-slate-300 select-none", children: [
           label,
           " ",
-          required && /* @__PURE__ */ jsx11(ITText, { as: "span", className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx11(ITText, { as: "span", className: "text-danger-500", children: "*" })
         ] })
       ] })
     ) : (
@@ -2185,7 +2220,7 @@ function ITInput({
             ),
             children: [
               label,
-              required && /* @__PURE__ */ jsx11(ITText, { as: "span", className: "text-red-500 ml-1", children: "*" })
+              required && /* @__PURE__ */ jsx11(ITText, { as: "span", className: "text-danger-500 ml-1", children: "*" })
             ]
           }
         ),
@@ -2264,7 +2299,7 @@ function ITInput({
               "button",
               {
                 type: "button",
-                className: "absolute inset-y-0 right-0 flex items-center pr-3 z-10 text-gray-400 hover:text-gray-600 focus:outline-none",
+                className: "absolute inset-y-0 right-0 flex items-center pr-3 z-10 text-secondary-400 hover:text-secondary-600 focus:outline-none",
                 onClick: () => setShowPassword(!showPassword),
                 tabIndex: -1,
                 children: showPassword ? /* @__PURE__ */ jsxs9("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
@@ -2284,11 +2319,11 @@ function ITInput({
       ] })
     ),
     hasError && !isCheckboxOrRadio && /* @__PURE__ */ jsx11("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ jsx11(ITText, { as: "p", className: inputError, children: errorMessage }) }),
-    showHintLength && (minLength || maxLength) && !isCheckboxOrRadio && /* @__PURE__ */ jsx11("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ jsxs9(ITText, { as: "p", className: "text-gray-500", children: [
+    showHintLength && (minLength || maxLength) && !isCheckboxOrRadio && /* @__PURE__ */ jsx11("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ jsxs9(ITText, { as: "p", className: "text-secondary-500", children: [
       currentLength,
       maxLength && `/${maxLength}`
     ] }) }),
-    isCheckboxOrRadio && hasError && /* @__PURE__ */ jsx11("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ jsx11(ITText, { as: "p", className: "text-red-500", children: errorMessage }) })
+    isCheckboxOrRadio && hasError && /* @__PURE__ */ jsx11("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ jsx11(ITText, { as: "p", className: "text-danger-500", children: errorMessage }) })
   ] });
 }
 
@@ -2364,13 +2399,10 @@ 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: "*" })
+          required && /* @__PURE__ */ jsx12(ITText, { as: "span", className: "text-danger-500 ml-1", children: "*" })
         ]
       }
     ),
@@ -2398,22 +2430,22 @@ 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]
               ))
             ]
           }
         ),
-        /* @__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, {}) })
+        /* @__PURE__ */ jsx12("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-secondary-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 }) })
     ] })
   ] }) });
 }
@@ -2499,7 +2531,7 @@ function ITPagination({
       {
         className: clsx13(
           baseItemClass,
-          currentPage === 1 ? "text-gray-300 cursor-not-allowed" : "text-gray-500 hover:bg-gray-100"
+          currentPage === 1 ? "text-secondary-300 cursor-not-allowed" : "text-secondary-500 hover:bg-secondary-100"
         ),
         onClick: handlePrevious,
         "aria-disabled": currentPage === 1,
@@ -2512,7 +2544,7 @@ function ITPagination({
           ITText,
           {
             as: "div",
-            className: "flex items-center justify-center w-8 h-8 select-none text-gray-400",
+            className: "flex items-center justify-center w-8 h-8 select-none text-secondary-400",
             children: "\u2026"
           },
           `dots-${idx}`
@@ -2525,7 +2557,7 @@ function ITPagination({
           as: "div",
           className: clsx13(
             baseItemClass,
-            isActive ? "text-white" : "text-gray-600 hover:bg-gray-100"
+            isActive ? "text-white" : "text-secondary-600 hover:bg-secondary-100"
           ),
           style: {
             backgroundColor: isActive ? resolvedBgColor : void 0,
@@ -2543,7 +2575,7 @@ function ITPagination({
       {
         className: clsx13(
           baseItemClass,
-          currentPage === totalPages ? "text-gray-300 cursor-not-allowed" : "text-gray-500 hover:bg-gray-100"
+          currentPage === totalPages ? "text-secondary-300 cursor-not-allowed" : "text-secondary-500 hover:bg-secondary-100"
         ),
         onClick: handleNext,
         "aria-disabled": currentPage === totalPages,
@@ -2555,8 +2587,8 @@ function ITPagination({
     const startItem = Math.min((currentPage - 1) * itemsPerPage + 1, totalItems || 0);
     const endItem = Math.min(currentPage * itemsPerPage, totalItems || 0);
     return /* @__PURE__ */ jsxs11("div", { className: clsx13("flex flex-col sm:flex-row justify-between items-center gap-4 w-full", className), children: [
-      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-4 text-sm text-gray-500", children: [
-        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 bg-gray-50 px-3 py-1 rounded-lg border border-gray-200", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-4 text-sm text-secondary-500", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 bg-secondary-50 px-3 py-1 rounded-lg border border-secondary-200", children: [
           /* @__PURE__ */ jsx13(ITText, { as: "span", className: "text-xs font-medium", children: "Mostrar" }),
           /* @__PURE__ */ jsx13(
             ITSelect,
@@ -2571,19 +2603,19 @@ function ITPagination({
               onBlur: () => {
               },
               size: "small",
-              className: "!w-14 !h-6 !text-xs !py-0 !px-1! !border-none !bg-transparent !ring-0 focus:!ring-0 cursor-pointer font-bold text-gray-700",
+              className: "!w-14 !h-6 !text-xs !py-0 !px-1! !border-none !bg-transparent !ring-0 focus:!ring-0 cursor-pointer font-bold text-secondary-700",
               placeholder: ""
             }
           )
         ] }),
         totalItems !== void 0 && /* @__PURE__ */ jsxs11(Fragment2, { children: [
-          /* @__PURE__ */ jsx13(ITText, { as: "span", className: "text-gray-300", children: "|" }),
+          /* @__PURE__ */ jsx13(ITText, { as: "span", className: "text-secondary-300", children: "|" }),
           /* @__PURE__ */ jsxs11(ITText, { as: "span", className: "text-xs", children: [
-            /* @__PURE__ */ jsx13(ITText, { as: "span", className: "font-semibold text-gray-700", children: startItem }),
+            /* @__PURE__ */ jsx13(ITText, { as: "span", className: "font-semibold text-secondary-700", children: startItem }),
             /* @__PURE__ */ jsx13(ITText, { as: "span", children: " - " }),
-            /* @__PURE__ */ jsx13(ITText, { as: "span", className: "font-semibold text-gray-700", children: endItem }),
+            /* @__PURE__ */ jsx13(ITText, { as: "span", className: "font-semibold text-secondary-700", children: endItem }),
             /* @__PURE__ */ jsx13(ITText, { as: "span", children: " de " }),
-            /* @__PURE__ */ jsx13(ITText, { as: "span", className: "font-semibold text-gray-900", children: totalItems })
+            /* @__PURE__ */ jsx13(ITText, { as: "span", className: "font-semibold text-secondary-900", children: totalItems })
           ] })
         ] })
       ] }),
@@ -2726,15 +2758,15 @@ function ITTable({
           onClick: () => handleFilterChange(col.key, nextValue),
           "aria-label": `${getToggleLabel()} para ${col.label}`,
           title: `${getToggleLabel()} para ${col.label}`,
-          children: /* @__PURE__ */ jsx14("div", { className: "relative w-10 h-5 bg-gray-300 rounded-full", children: /* @__PURE__ */ jsx14(
+          children: /* @__PURE__ */ jsx14("div", { className: "relative w-10 h-5 bg-secondary-300 rounded-full", children: /* @__PURE__ */ jsx14(
             "div",
             {
               className: clsx14(
                 "absolute top-0.5 w-4 h-4 rounded-full transition-all duration-300 shadow-sm",
                 {
-                  "left-0.5 bg-gray-400": currentValue === void 0,
+                  "left-0.5 bg-secondary-400": currentValue === void 0,
                   "left-5 bg-slate-500": currentValue === true,
-                  "left-0.5 bg-gray-500": currentValue === false
+                  "left-0.5 bg-secondary-500": currentValue === false
                 }
               )
             }
@@ -2754,7 +2786,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 +2835,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 +2872,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 +2924,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 +2938,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 +2961,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" })
           ] }) }) }) })
@@ -3056,15 +3088,15 @@ function ITDataTable({
           "aria-label": `${getToggleLabel()} para ${col.label}`,
           title: `${getToggleLabel()} para ${col.label}`,
           disabled: isLoading,
-          children: /* @__PURE__ */ jsx15("div", { className: "relative w-10 h-5 bg-gray-300 rounded-full", children: /* @__PURE__ */ jsx15(
+          children: /* @__PURE__ */ jsx15("div", { className: "relative w-10 h-5 bg-secondary-300 rounded-full", children: /* @__PURE__ */ jsx15(
             "div",
             {
               className: clsx15(
                 "absolute top-0.5 w-4 h-4 rounded-full transition-all duration-300 shadow-sm",
                 {
-                  "left-0.5 bg-gray-400": currentValue === void 0,
+                  "left-0.5 bg-secondary-400": currentValue === void 0,
                   "left-5 bg-slate-500": currentValue === true,
-                  "left-0.5 bg-gray-500": currentValue === false
+                  "left-0.5 bg-secondary-500": currentValue === false
                 }
               )
             }
@@ -3077,7 +3109,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 +3155,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 +3181,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 +3213,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 +3229,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 +3245,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 +3496,7 @@ function ITDatePicker({
       "div",
       {
         className: clsx16(
-          "fixed z-[9999]",
+          "fixed z-[70]",
           calendarClassName,
           range ? "w-[320px]" : "w-[280px]"
         ),
@@ -3531,8 +3563,8 @@ var ITTabs = ({
   const activeContent = items.find((item) => item.id === activeId)?.content;
   return /* @__PURE__ */ jsxs15("div", { className: clsx17("w-full", containerClassName), children: [
     /* @__PURE__ */ jsx17("div", { className: clsx17(
-      "flex border-gray-200 mb-4",
-      variant === "line" ? "border-b" : "gap-2 p-1 bg-gray-100 rounded-lg w-fit",
+      "flex border-secondary-200 mb-4",
+      variant === "line" ? "border-b" : "gap-2 p-1 bg-secondary-100 rounded-lg w-fit",
       className
     ), children: items.map((item) => {
       const isActive = item.id === activeId;
@@ -3546,12 +3578,12 @@ var ITTabs = ({
             // LINE VARIANT
             variant === "line" && [
               "border-b-2 -mb-[2px]",
-              isActive ? "border-primary-500 text-primary-600" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+              isActive ? "border-primary-500 text-primary-600" : "border-transparent text-secondary-500 hover:text-secondary-700 hover:border-secondary-300"
             ],
             // PILL VARIANT
             variant === "pill" && [
               "rounded-md",
-              isActive ? "bg-white text-primary-600 shadow-sm" : "text-gray-500 hover:text-gray-700"
+              isActive ? "bg-white text-primary-600 shadow-sm" : "text-secondary-500 hover:text-secondary-700"
             ],
             item.disabled && "opacity-50 cursor-not-allowed"
           ),
@@ -4357,23 +4389,23 @@ function ITThemeProvider({
         color: #cbd5e1;
       }
       .dark .text-slate-800, [data-theme="dark"] .text-slate-800,
-      .dark .text-gray-800, [data-theme="dark"] .text-gray-800 {
+      .dark .text-secondary-800, [data-theme="dark"] .text-secondary-800 {
         color: #f8fafc !important;
       }
       .dark .text-slate-700, [data-theme="dark"] .text-slate-700,
-      .dark .text-gray-700, [data-theme="dark"] .text-gray-700 {
+      .dark .text-secondary-700, [data-theme="dark"] .text-secondary-700 {
         color: #cbd5e1 !important;
       }
       .dark .text-slate-600, [data-theme="dark"] .text-slate-600,
-      .dark .text-gray-600, [data-theme="dark"] .text-gray-600 {
+      .dark .text-secondary-600, [data-theme="dark"] .text-secondary-600 {
         color: #cbd5e1 !important;
       }
       .dark .text-slate-500, [data-theme="dark"] .text-slate-500,
-      .dark .text-gray-500, [data-theme="dark"] .text-gray-500 {
+      .dark .text-secondary-500, [data-theme="dark"] .text-secondary-500 {
         color: #94a3b8 !important;
       }
       .dark .text-slate-400, [data-theme="dark"] .text-slate-400,
-      .dark .text-gray-400, [data-theme="dark"] .text-gray-400 {
+      .dark .text-secondary-400, [data-theme="dark"] .text-secondary-400 {
         color: #64748b !important;
       }
 
@@ -4381,25 +4413,25 @@ function ITThemeProvider({
         background-color: var(--card-bg, #111827) !important;
       }
       .dark .bg-slate-50, [data-theme="dark"] .bg-slate-50,
-      .dark .bg-gray-50, [data-theme="dark"] .bg-gray-50 {
+      .dark .bg-secondary-50, [data-theme="dark"] .bg-secondary-50 {
         background-color: #1f2937 !important;
       }
       .dark .border-slate-100, [data-theme="dark"] .border-slate-100,
-      .dark .border-gray-100, [data-theme="dark"] .border-gray-100,
+      .dark .border-secondary-100, [data-theme="dark"] .border-secondary-100,
       .dark .border-slate-200, [data-theme="dark"] .border-slate-200,
-      .dark .border-gray-200, [data-theme="dark"] .border-gray-200 {
+      .dark .border-secondary-200, [data-theme="dark"] .border-secondary-200 {
         border-color: #374151 !important;
       }
 
-      .dark .bg-gray-100, [data-theme="dark"] .bg-gray-100,
+      .dark .bg-secondary-100, [data-theme="dark"] .bg-secondary-100,
       .dark .bg-slate-100, [data-theme="dark"] .bg-slate-100 {
         background-color: #1f2937 !important;
       }
-      .dark .border-gray-300, [data-theme="dark"] .border-gray-300,
+      .dark .border-secondary-300, [data-theme="dark"] .border-secondary-300,
       .dark .border-slate-300, [data-theme="dark"] .border-slate-300 {
         border-color: #4b5563 !important;
       }
-      .dark .bg-gray-200, [data-theme="dark"] .bg-gray-200,
+      .dark .bg-secondary-200, [data-theme="dark"] .bg-secondary-200,
       .dark .bg-slate-200, [data-theme="dark"] .bg-slate-200 {
         background-color: #374151 !important;
       }
@@ -4467,23 +4499,23 @@ function ITThemeProvider({
       }
 
       [data-theme="light"] .text-slate-800,
-      [data-theme="light"] .text-gray-800 {
+      [data-theme="light"] .text-secondary-800 {
         color: #1e293b !important;
       }
       [data-theme="light"] .text-slate-700,
-      [data-theme="light"] .text-gray-700 {
+      [data-theme="light"] .text-secondary-700 {
         color: #334155 !important;
       }
       [data-theme="light"] .text-slate-600,
-      [data-theme="light"] .text-gray-600 {
+      [data-theme="light"] .text-secondary-600 {
         color: #475569 !important;
       }
       [data-theme="light"] .text-slate-500,
-      [data-theme="light"] .text-gray-500 {
+      [data-theme="light"] .text-secondary-500 {
         color: #64748b !important;
       }
       [data-theme="light"] .text-slate-400,
-      [data-theme="light"] .text-gray-400 {
+      [data-theme="light"] .text-secondary-400 {
         color: #94a3b8 !important;
       }
 
@@ -4491,24 +4523,24 @@ function ITThemeProvider({
         background-color: #ffffff !important;
       }
       [data-theme="light"] .bg-slate-50,
-      [data-theme="light"] .bg-gray-50 {
+      [data-theme="light"] .bg-secondary-50 {
         background-color: #f8fafc !important;
       }
       [data-theme="light"] .border-slate-100,
-      [data-theme="light"] .border-gray-100,
+      [data-theme="light"] .border-secondary-100,
       [data-theme="light"] .border-slate-200,
-      [data-theme="light"] .border-gray-200 {
+      [data-theme="light"] .border-secondary-200 {
         border-color: #e2e8f0 !important;
       }
-      [data-theme="light"] .bg-gray-100,
+      [data-theme="light"] .bg-secondary-100,
       [data-theme="light"] .bg-slate-100 {
         background-color: #f1f5f9 !important;
       }
-      [data-theme="light"] .border-gray-300,
+      [data-theme="light"] .border-secondary-300,
       [data-theme="light"] .border-slate-300 {
         border-color: #cbd5e1 !important;
       }
-      [data-theme="light"] .bg-gray-200,
+      [data-theme="light"] .bg-secondary-200,
       [data-theme="light"] .bg-slate-200 {
         background-color: #e2e8f0 !important;
       }
@@ -4536,13 +4568,13 @@ function ITThemeProvider({
       .hover\\:bg-green-600:hover { background-color: var(--color-success-hover) !important; }
 
       /* Danger overrides (red mappings in UI library) */
-      .bg-red-700 { background-color: var(--color-danger) !important; }
-      .hover\\:bg-red-800:hover { background-color: var(--color-danger-hover) !important; }
-      .focus\\:ring-red-300:focus { --tw-ring-color: var(--color-danger-ring) !important; }
-      .text-red-700 { color: var(--color-danger) !important; }
-      .border-red-700 { border-color: var(--color-danger) !important; }
-      .bg-red-500 { background-color: var(--color-danger) !important; }
-      .hover\\:bg-red-600:hover { background-color: var(--color-danger-hover) !important; }
+      .bg-danger-700 { background-color: var(--color-danger) !important; }
+      .hover\\:bg-danger-800:hover { background-color: var(--color-danger-hover) !important; }
+      .focus\\:ring-danger-300:focus { --tw-ring-color: var(--color-danger-ring) !important; }
+      .text-danger-700 { color: var(--color-danger) !important; }
+      .border-danger-700 { border-color: var(--color-danger) !important; }
+      .bg-danger-500 { background-color: var(--color-danger) !important; }
+      .hover\\:bg-danger-600:hover { background-color: var(--color-danger-hover) !important; }
 
       /* Warning overrides (yellow mappings in UI library) */
       .bg-yellow-400 { background-color: var(--color-warning) !important; }
@@ -4572,12 +4604,12 @@ function ITThemeProvider({
       .border-blue-500 { border-color: var(--color-info) !important; }
 
       /* Secondary elements overrides */
-      button[class*="bg-white"][class*="hover:bg-gray-100"] {
+      button[class*="bg-white"][class*="hover:bg-secondary-100"] {
         background-color: var(--color-secondary) !important;
         border-color: var(--color-secondary-soft-border) !important;
         color: #111827 !important;
       }
-      button[class*="bg-white"][class*="hover:bg-gray-100"]:hover {
+      button[class*="bg-white"][class*="hover:bg-secondary-100"]:hover {
         background-color: var(--color-secondary-hover) !important;
       }
 
@@ -5176,7 +5208,7 @@ function ITThemeProvider({
                 e.stopPropagation();
                 handleDeletePreset(preset.name, e);
               },
-              className: "absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 p-0.5 rounded-md hover:bg-red-500/10 hover:text-red-500 text-slate-400 dark:text-slate-500 cursor-pointer transition-all z-10",
+              className: "absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 p-0.5 rounded-md hover:bg-danger-500/10 hover:text-danger-500 text-slate-400 dark:text-slate-500 cursor-pointer transition-all z-10",
               title: "Eliminar",
               children: /* @__PURE__ */ jsx20(MdClose, { size: 12 })
             }
@@ -5522,7 +5554,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-slate-900/50 z-[60]`,
       children: /* @__PURE__ */ jsx22(
         "div",
         {
@@ -5543,7 +5576,7 @@ function ITDialog({
             /* @__PURE__ */ jsx22(
               "button",
               {
-                className: "absolute top-2 right-2 text-gray-600 hover:text-gray-900",
+                className: "absolute top-2 right-2 text-secondary-600 hover:text-secondary-900",
                 onClick: onClose,
                 children: /* @__PURE__ */ jsx22(FaRegTimesCircle, {})
               }
@@ -5575,7 +5608,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,14 +5946,14 @@ 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-secondary-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`
         },
         children: [
-          /* @__PURE__ */ jsxs22("div", { className: "flex bg-gray-50 border-b border-gray-100 text-xs font-semibold text-gray-500 uppercase tracking-wider", children: [
-            /* @__PURE__ */ jsx27(ITText, { as: "div", className: "flex-1 text-center py-2 border-r border-gray-100", children: "Horas" }),
+          /* @__PURE__ */ jsxs22("div", { className: "flex bg-secondary-50 border-b border-secondary-100 text-xs font-semibold text-secondary-500 uppercase tracking-wider", children: [
+            /* @__PURE__ */ jsx27(ITText, { as: "div", className: "flex-1 text-center py-2 border-r border-secondary-100", children: "Horas" }),
             /* @__PURE__ */ jsx27(ITText, { as: "div", className: "flex-1 text-center py-2", children: "Minutos" })
           ] }),
           /* @__PURE__ */ jsxs22("div", { className: "flex h-56 relative bg-white", children: [
@@ -5928,7 +5961,7 @@ function ITTimePicker({
               "div",
               {
                 ref: hoursRef,
-                className: "flex-1 overflow-y-auto no-scrollbar border-r border-gray-50 scroll-smooth relative",
+                className: "flex-1 overflow-y-auto no-scrollbar border-r border-secondary-50 scroll-smooth relative",
                 children: /* @__PURE__ */ jsx27("div", { className: "py-2", children: hoursList.map((h) => {
                   const isSelected = currentHour === h;
                   return /* @__PURE__ */ jsx27(
@@ -5994,7 +6027,7 @@ function ITTimePicker({
             ),
             /* @__PURE__ */ jsx27("div", { className: "absolute top-1/2 left-0 right-0 h-10 -mt-5 bg-black/5 pointer-events-none border-y border-black/10 z-10" })
           ] }),
-          /* @__PURE__ */ jsx27("div", { className: "p-3 bg-gray-50 border-t border-gray-100 flex justify-end", children: /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx27("div", { className: "p-3 bg-secondary-50 border-t border-secondary-100 flex justify-end", children: /* @__PURE__ */ jsx27(
             ITButton,
             {
               variant: "solid",
@@ -6104,7 +6137,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 +6148,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";
     }
@@ -6136,12 +6169,12 @@ function ITSearchSelect({
       ITText,
       {
         as: "label",
-        className: clsx24("text-sm font-medium text-gray-700 dark:text-slate-300", {
-          "text-red-500": hasError
+        className: clsx24("text-sm font-medium text-secondary-700 dark:text-slate-300", {
+          "text-danger-500": hasError
         }),
         children: [
           /* @__PURE__ */ jsx28(ITText, { as: "span", children: label }),
-          required && /* @__PURE__ */ jsx28(ITText, { as: "span", className: "text-red-500 ml-1", children: "*" })
+          required && /* @__PURE__ */ jsx28(ITText, { as: "span", className: "text-danger-500 ml-1", children: "*" })
         ]
       }
     ),
@@ -6164,26 +6197,26 @@ function ITSearchSelect({
             autoComplete: "off"
           }
         ),
-        /* @__PURE__ */ jsxs23("div", { className: "absolute right-3 flex items-center gap-2 text-gray-400 pointer-events-none", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "absolute right-3 flex items-center gap-2 text-secondary-400 pointer-events-none", children: [
           isLoading && /* @__PURE__ */ jsx28("div", { className: "animate-spin h-4 w-4 border-2 border-primary-500 border-t-transparent rounded-full" }),
           !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-secondary-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",
           onClick: () => handleSelect(option),
           className: clsx24(
             "px-4 py-2 text-sm cursor-pointer transition-colors",
-            value === option[valueField] ? "bg-primary-50 dark:bg-primary-950/40 text-primary-700 dark:text-primary-300 font-medium" : "hover:bg-gray-50 dark:hover:bg-slate-800 text-gray-700 dark:text-slate-300"
+            value === option[valueField] ? "bg-primary-50 dark:bg-primary-950/40 text-primary-700 dark:text-primary-300 font-medium" : "hover:bg-secondary-50 dark:hover:bg-slate-800 text-secondary-700 dark:text-slate-300"
           ),
           children: /* @__PURE__ */ jsx28(ITText, { as: "span", children: option[labelField] })
         },
         option[valueField]
-      )) : /* @__PURE__ */ jsx28(ITText, { as: "div", className: "px-4 py-6 text-sm text-center text-gray-500 italic", children: isLoading ? "Cargando..." : noResultsMessage }) }) })
+      )) : /* @__PURE__ */ jsx28(ITText, { as: "div", className: "px-4 py-6 text-sm text-center text-secondary-500 italic", children: isLoading ? "Cargando..." : noResultsMessage }) }) })
     ] }),
-    hasError && /* @__PURE__ */ jsx28(ITText, { as: "p", className: "text-red-500 text-xs mt-1", children: errorMessage })
+    hasError && /* @__PURE__ */ jsx28(ITText, { as: "p", className: "text-danger-500 text-xs mt-1", children: errorMessage })
   ] });
 }
 
@@ -6412,7 +6445,7 @@ var ITFieldRenderer = ({
         return null;
       case "section":
         return /* @__PURE__ */ jsxs24("div", { className: clsx25("w-full col-span-full", activeConfig.className), children: [
-          label && /* @__PURE__ */ jsx29(ITText, { as: "h4", className: "text-lg font-semibold text-gray-800 mb-4", children: label }),
+          label && /* @__PURE__ */ jsx29(ITText, { as: "h4", className: "text-lg font-semibold text-secondary-800 mb-4", children: label }),
           /* @__PURE__ */ jsx29("div", { className: clsx25("grid gap-y-6 gap-x-5", getGridColsClass(columns)), children: activeConfig.fields?.map((childConfig) => /* @__PURE__ */ jsx29(
             ITFieldRenderer,
             {
@@ -6423,7 +6456,7 @@ var ITFieldRenderer = ({
           )) })
         ] });
       case "array":
-        return /* @__PURE__ */ jsx29("div", { className: "p-4 border-2 border-dashed border-gray-200 rounded-xl", children: /* @__PURE__ */ jsxs24(ITText, { as: "p", className: "text-sm text-gray-500 text-center", children: [
+        return /* @__PURE__ */ jsx29("div", { className: "p-4 border-2 border-dashed border-secondary-200 rounded-xl", children: /* @__PURE__ */ jsxs24(ITText, { as: "p", className: "text-sm text-secondary-500 text-center", children: [
           "Array Field: ",
           label
         ] }) });
@@ -6739,10 +6772,10 @@ function ITNavbar({
   const shouldUseLegacy = !navigationItems.length && (navItems || sidebarItems);
   if (shouldUseLegacy) {
     return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col h-screen", children: [
-      /* @__PURE__ */ jsx33("nav", { className: "bg-white border-b border-gray-200", children: /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between mx-auto p-4", children: [
+      /* @__PURE__ */ jsx33("nav", { className: "bg-white border-b border-secondary-200", children: /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between mx-auto p-4", children: [
         /* @__PURE__ */ jsxs25("div", { className: "flex items-center space-x-3 rtl:space-x-reverse", children: [
           logo && /* @__PURE__ */ jsx33("div", { className: "h-8", children: logo }),
-          logoText && /* @__PURE__ */ jsx33(ITText, { as: "span", className: "self-center text-2xl font-semibold whitespace-nowrap text-gray-900", children: logoText })
+          logoText && /* @__PURE__ */ jsx33(ITText, { as: "span", className: "self-center text-2xl font-semibold whitespace-nowrap text-secondary-900", children: logoText })
         ] }),
         /* @__PURE__ */ jsx33("div", { className: "flex items-center justify-end w-full md:w-auto md:order-2", children: /* @__PURE__ */ jsxs25("div", { className: "flex items-center space-x-4 md:order-2", children: [
           /* @__PURE__ */ jsx33("ul", { className: "hidden md:flex space-x-4", children: navItems }),
@@ -6751,7 +6784,7 @@ function ITNavbar({
               "button",
               {
                 type: "button",
-                className: "flex text-sm bg-gray-200 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300",
+                className: "flex text-sm bg-secondary-200 rounded-full md:me-0 focus:ring-4 focus:ring-secondary-300",
                 onClick: toggleUserMenu,
                 children: userMenu.userImage ? /* @__PURE__ */ jsx33(
                   "img",
@@ -6760,18 +6793,18 @@ function ITNavbar({
                     src: userMenu.userImage,
                     alt: "user photo"
                   }
-                ) : /* @__PURE__ */ jsx33(FaUserCircle, { className: "w-8 h-8 text-gray-500" })
+                ) : /* @__PURE__ */ jsx33(FaUserCircle, { className: "w-8 h-8 text-secondary-500" })
               }
             ),
             isUserMenuOpen && /* @__PURE__ */ jsxs25(
               "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-secondary-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 }),
-                    /* @__PURE__ */ jsx33(ITText, { as: "span", className: "block text-sm text-gray-500 truncate", children: userMenu.userEmail })
+                    /* @__PURE__ */ jsx33(ITText, { as: "span", className: "block text-sm text-secondary-900", children: userMenu.userName }),
+                    /* @__PURE__ */ jsx33(ITText, { as: "span", className: "block text-sm text-secondary-500 truncate", children: userMenu.userEmail })
                   ] }),
                   /* @__PURE__ */ jsx33("ul", { className: "py-2", children: userMenu.menuItems.map((item, index) => /* @__PURE__ */ jsx33("li", { children: /* @__PURE__ */ jsx33(
                     "button",
@@ -6780,7 +6813,7 @@ function ITNavbar({
                         item.onClick();
                         setIsUserMenuOpen(false);
                       },
-                      className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left",
+                      className: "block px-4 py-2 text-sm text-secondary-700 hover:bg-secondary-100 w-full text-left",
                       children: /* @__PURE__ */ jsx33(ITText, { as: "span", children: item.label })
                     }
                   ) }, index)) })
@@ -6791,8 +6824,8 @@ 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 }) }) }),
-        /* @__PURE__ */ jsx33("main", { className: "flex-1 bg-gray-100 overflow-y-auto", children })
+        (showSidebar || showSidebarOnMobile) && /* @__PURE__ */ jsx33("aside", { className: "fixed inset-y-0 left-0 w-64 bg-secondary-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-secondary-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-secondary-100 overflow-y-auto", children })
       ] })
     ] });
   }
@@ -7240,7 +7273,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 }) })
   ] });
 }
 
@@ -7373,7 +7406,7 @@ function SearchInput({
   className = ""
 }) {
   return /* @__PURE__ */ jsxs31("div", { className: `relative flex-1 ${className}`, children: [
-    /* @__PURE__ */ jsx41("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx41(FaSearch2, { className: "h-5 w-5 text-gray-400" }) }),
+    /* @__PURE__ */ jsx41("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx41(FaSearch2, { className: "h-5 w-5 text-secondary-400" }) }),
     /* @__PURE__ */ jsx41(
       ITInput,
       {
@@ -7401,12 +7434,12 @@ function SortButton({
     "button",
     {
       onClick,
-      className: `p-3 rounded-lg bg-white border border-gray-300 hover:bg-gray-50 transition-colors duration-200 flex items-center gap-2 min-w-[120px] ${className}`,
+      className: `p-3 rounded-lg bg-white border border-secondary-300 hover:bg-secondary-50 transition-colors duration-200 flex items-center gap-2 min-w-[120px] ${className}`,
       "aria-label": `Ordenar tabla ${sortConfig ? sortConfig.direction === "asc" ? "descendente" : "ascendente" : "ascendente"}`,
       title: "Ordenar tabla",
       children: [
-        sortConfig ? sortConfig.direction === "asc" ? /* @__PURE__ */ jsx42(FaSortUp, { className: "w-4 h-4 text-slate-500" }) : /* @__PURE__ */ jsx42(FaSortDown, { className: "w-4 h-4 text-slate-500" }) : /* @__PURE__ */ jsx42(FaSort, { className: "w-4 h-4 text-gray-500" }),
-        /* @__PURE__ */ jsx42(ITText, { as: "span", className: "text-sm font-medium text-gray-700", children: sortConfig ? sortConfig.direction === "asc" ? "Asc \u2191" : "Desc \u2193" : "Ordenar" })
+        sortConfig ? sortConfig.direction === "asc" ? /* @__PURE__ */ jsx42(FaSortUp, { className: "w-4 h-4 text-slate-500" }) : /* @__PURE__ */ jsx42(FaSortDown, { className: "w-4 h-4 text-slate-500" }) : /* @__PURE__ */ jsx42(FaSort, { className: "w-4 h-4 text-secondary-500" }),
+        /* @__PURE__ */ jsx42(ITText, { as: "span", className: "text-sm font-medium text-secondary-700", children: sortConfig ? sortConfig.direction === "asc" ? "Asc \u2191" : "Desc \u2193" : "Ordenar" })
       ]
     }
   );
@@ -7422,7 +7455,7 @@ function SearchAndSortBar({
   sortConfig,
   searchInputPlaceholder = "Buscar en todos los campos..."
 }) {
-  return /* @__PURE__ */ jsx43("div", { className: "bg-gray-50 px-6 py-4 border-b border-gray-200", children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-4", children: [
+  return /* @__PURE__ */ jsx43("div", { className: "bg-secondary-50 px-6 py-4 border-b border-secondary-200", children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-4", children: [
     /* @__PURE__ */ jsx43(
       SearchInput,
       {
@@ -7482,7 +7515,7 @@ function TableHeader({
   onSort,
   sortConfig
 }) {
-  return /* @__PURE__ */ jsx45("thead", { children: /* @__PURE__ */ jsx45("tr", { className: "bg-white border-b border-gray-200", children: columns.map((col) => /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx45("thead", { children: /* @__PURE__ */ jsx45("tr", { className: "bg-white border-b border-secondary-200", children: columns.map((col) => /* @__PURE__ */ jsx45(
     TableHeaderCell,
     {
       label: col.label,
@@ -7625,7 +7658,7 @@ function EditableCell({
   };
   return /* @__PURE__ */ jsxs35("div", { className: "w-full", children: [
     renderInput(),
-    error && /* @__PURE__ */ jsx46("div", { className: "text-red-500 text-xs mt-1", children: /* @__PURE__ */ jsx46(ITText, { as: "span", children: error }) })
+    error && /* @__PURE__ */ jsx46("div", { className: "text-danger-500 text-xs mt-1", children: /* @__PURE__ */ jsx46(ITText, { as: "span", children: error }) })
   ] });
 }
 
@@ -7670,7 +7703,7 @@ function TableRow({
             "aria-label": "Verdadero",
             title: "Verdadero"
           }
-        ) : /* @__PURE__ */ jsx47(FaTimes7, { className: "text-red-500", "aria-label": "Falso", title: "Falso" });
+        ) : /* @__PURE__ */ jsx47(FaTimes7, { className: "text-danger-500", "aria-label": "Falso", title: "Falso" });
       case "actions":
         if (isEditing && col.saveActions) {
           return col.saveActions(rowData, {
@@ -7699,7 +7732,7 @@ function TableRow({
     {
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
-      className: `border-b border-gray-200 transition-colors duration-150 ${isEditing ? "bg-slate-50" : rowIndex % 2 === 0 ? "bg-white" : "bg-gray-50"} ${isHovered && !isEditing ? "bg-gray-100" : ""}`,
+      className: `border-b border-secondary-200 transition-colors duration-150 ${isEditing ? "bg-slate-50" : rowIndex % 2 === 0 ? "bg-white" : "bg-secondary-50"} ${isHovered && !isEditing ? "bg-secondary-100" : ""}`,
       children: columns.map((col) => /* @__PURE__ */ jsx47(
         "td",
         {
@@ -7753,7 +7786,7 @@ function PaginationInfo({
   totalCount,
   className = ""
 }) {
-  return /* @__PURE__ */ jsxs36(ITText, { as: "span", className: `text-sm text-gray-700 ${className}`, children: [
+  return /* @__PURE__ */ jsxs36(ITText, { as: "span", className: `text-sm text-secondary-700 ${className}`, children: [
     "Mostrando ",
     currentCount,
     " de ",
@@ -7780,7 +7813,7 @@ function PaginationControls({
     /* @__PURE__ */ jsxs37("div", { className: "flex items-center space-x-4", children: [
       /* @__PURE__ */ jsx49(PaginationInfo, { currentCount, totalCount }),
       /* @__PURE__ */ jsxs37("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsx49(ITText, { as: "span", className: "text-sm text-gray-700", children: "Mostrar:" }),
+        /* @__PURE__ */ jsx49(ITText, { as: "span", className: "text-sm text-secondary-700", children: "Mostrar:" }),
         /* @__PURE__ */ jsx49(
           ITSelect,
           {
@@ -7813,7 +7846,7 @@ function PaginationControls({
           children: /* @__PURE__ */ jsx49(FaArrowLeft, { "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ jsxs37(ITText, { as: "span", className: "px-4 py-2 text-sm text-gray-700", "aria-live": "polite", children: [
+      /* @__PURE__ */ jsxs37(ITText, { as: "span", className: "px-4 py-2 text-sm text-secondary-700", "aria-live": "polite", children: [
         "P\xE1gina ",
         pageIndex,
         " de ",
@@ -7907,7 +7940,7 @@ function ITSearchTable({
     /* @__PURE__ */ jsxs38("div", { className: "shadow-md sm:rounded-lg overflow-hidden", children: [
       title && /* @__PURE__ */ jsx50("div", { className: "bg-teal-500 text-white px-6 py-4", children: /* @__PURE__ */ jsx50(ITText, { as: "h2", className: "text-xl font-bold text-center whitespace-nowrap", children: title }) }),
       /* @__PURE__ */ jsxs38("div", { className: "bg-white", children: [
-        /* @__PURE__ */ jsx50("div", { className: "p-4 border-b border-gray-200", children: /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx50("div", { className: "p-4 border-b border-secondary-200", children: /* @__PURE__ */ jsx50(
           SearchAndSortBar,
           {
             searchTerm,
@@ -7922,7 +7955,7 @@ function ITSearchTable({
           "table",
           {
             className: clsx34(
-              "min-w-full text-sm text-left bg-white text-gray-900 table-auto",
+              "min-w-full text-sm text-left bg-white text-secondary-900 table-auto",
               variantStyles[variant],
               sizeStyles[size]
             ),
@@ -8070,12 +8103,12 @@ function ITSidebar({
         ${sidebarWidth}
         ${className}
         ${!visibleOnMobile ? "hidden lg:flex" : "flex"}
-        shadow-[4px_0_24px_rgba(0,0,0,0.02)]
+        shadow-[4px_0_32px_rgba(15,23,42,0.04)]
       `,
       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 +8122,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",
-              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"
+              backgroundColor: item.isActive ? "var(--sidebar-active-bg, var(--color-secondary-50))" : "transparent",
+              boxShadow: item.isActive ? "var(--shadow-xs)" : "none",
+              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";
@@ -8105,7 +8138,7 @@ function ITSidebar({
                 "div",
                 {
                   className: "absolute left-0 top-1/4 bottom-1/4 w-[3px] rounded-r-full transition-all",
-                  style: { backgroundColor: "var(--sidebar-active-icon, #10b981)", boxShadow: "0 0 10px var(--sidebar-active-icon, #10b981)" }
+                  style: { backgroundColor: "var(--sidebar-active-icon, var(--color-primary-500))", boxShadow: "0 0 10px var(--sidebar-active-icon, var(--color-primary-500))" }
                 }
               ),
               /* @__PURE__ */ jsxs39("div", { className: `flex items-center ${!isSidebarCollapsed ? "gap-3.5" : "justify-center"} relative z-10 w-full`, children: [
@@ -8114,7 +8147,7 @@ function ITSidebar({
                   {
                     className: `transition-all duration-300 flex-shrink-0 flex items-center justify-center`,
                     style: {
-                      color: item.isActive ? "var(--sidebar-active-icon, #10b981)" : "var(--sidebar-icon-color, #9ca3af)",
+                      color: item.isActive ? "var(--sidebar-active-icon, var(--color-primary-500))" : "var(--sidebar-icon-color, #9ca3af)",
                       opacity: item.isActive ? 1 : 0.8,
                       fontSize: item.isActive ? "1.35rem" : "1.25rem",
                       filter: item.isActive ? "drop-shadow(0 0 8px rgba(255,255,255,0.2))" : "none"
@@ -8128,7 +8161,7 @@ function ITSidebar({
                     as: "span",
                     className: `transition-all duration-300 truncate tracking-wide`,
                     style: {
-                      color: item.isActive ? "var(--sidebar-active-color, #ffffff)" : "var(--sidebar-label-color, #d1d5db)",
+                      color: item.isActive ? "var(--sidebar-active-color, #ffffff)" : "var(--sidebar-label-color, var(--color-secondary-300))",
                       fontSize: "0.9rem",
                       fontWeight: item.isActive ? "600" : "500"
                     },
@@ -8140,7 +8173,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" })
                 }
               ),
@@ -8152,9 +8185,9 @@ function ITSidebar({
                       ${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-2 py-0.5 text-[10px] rounded-full backdrop-blur-sm"}
                     `,
                   style: {
-                    backgroundColor: "var(--sidebar-badge-bg, #10b981)",
+                    backgroundColor: "var(--sidebar-badge-bg, var(--color-primary-500))",
                     color: "var(--sidebar-badge-color, #ffffff)",
-                    boxShadow: isSidebarCollapsed ? "0 0 0 2px var(--sidebar-bg, #111827)" : "none"
+                    boxShadow: isSidebarCollapsed ? "0 0 0 2px var(--sidebar-bg, var(--color-secondary-900))" : "none"
                   },
                   children: isSidebarCollapsed ? "" : item.badge
                 }
@@ -8165,16 +8198,16 @@ 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: [
-                item.icon && /* @__PURE__ */ jsx51("span", { style: { color: "var(--sidebar-active-icon, #10b981)" }, className: "text-xl drop-shadow-sm", children: item.icon }),
+              /* @__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, var(--color-primary-500))" }, className: "text-xl drop-shadow-sm", children: item.icon }),
                 /* @__PURE__ */ jsx51(ITText, { as: "span", className: "tracking-wide text-[15px]", children: item.label })
               ] }),
               item.subitems && item.subitems.length > 0 ? /* @__PURE__ */ jsx51("div", { className: "py-2", children: item.subitems.map((subitem) => /* @__PURE__ */ jsxs39(
@@ -8187,17 +8220,17 @@ function ITSidebar({
                       {
                         className: "absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full",
                         style: {
-                          backgroundColor: "var(--sidebar-active-icon, #10b981)",
-                          boxShadow: "0 0 6px color-mix(in srgb, var(--sidebar-active-icon, #10b981) 25%, transparent)"
+                          backgroundColor: "var(--sidebar-active-icon, var(--color-primary-500))",
+                          boxShadow: "0 0 6px color-mix(in srgb, var(--sidebar-active-icon, var(--color-primary-500)) 25%, transparent)"
                         }
                       }
                     ),
-                    /* @__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, var(--color-primary-500))" : "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
-              )) }) : /* @__PURE__ */ jsx51(ITText, { as: "div", className: "px-5 py-3 text-sm italic", style: { color: "var(--sidebar-label-color, #71717a)" }, children: "No hay submen\xFA" })
+              )) }) : /* @__PURE__ */ jsx51(ITText, { as: "div", className: "px-5 py-3 text-sm italic", style: { color: "var(--sidebar-label-color, var(--color-secondary-400))" }, children: "No hay submen\xFA" })
             ]
           }
         ),
@@ -8206,7 +8239,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 +8250,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 +8259,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)";
                   }
                 },
@@ -8242,8 +8275,8 @@ function ITSidebar({
                     {
                       className: "absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full transition-all",
                       style: {
-                        backgroundColor: "var(--sidebar-active-icon, #10b981)",
-                        boxShadow: "0 0 6px color-mix(in srgb, var(--sidebar-active-icon, #10b981) 25%, transparent)"
+                        backgroundColor: "var(--sidebar-active-icon, var(--color-primary-500))",
+                        boxShadow: "0 0 6px color-mix(in srgb, var(--sidebar-active-icon, var(--color-primary-500)) 25%, transparent)"
                       }
                     }
                   ),
@@ -8252,7 +8285,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, var(--color-primary-500))" : "var(--sidebar-icon-color, var(--color-secondary-400))"
                       }
                     }
                   ),
@@ -8371,7 +8404,7 @@ function ITSlider({
   className
 }) {
   return /* @__PURE__ */ jsxs40("div", { className: clsx36("flex flex-col gap-1.5", className), children: [
-    label && /* @__PURE__ */ jsxs40(ITText, { as: "label", className: "text-xs font-semibold text-gray-600 dark:text-gray-400", children: [
+    label && /* @__PURE__ */ jsxs40(ITText, { as: "label", className: "text-xs font-semibold text-secondary-600 dark:text-secondary-400", children: [
       label,
       ": ",
       value
@@ -8388,7 +8421,7 @@ function ITSlider({
         disabled,
         className: clsx36(
           "w-full h-1.5 appearance-none rounded-full outline-none cursor-pointer",
-          "bg-gray-200 dark:bg-gray-700",
+          "bg-secondary-200 dark:bg-secondary-700",
           "accent-primary-500",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4",
@@ -8397,7 +8430,7 @@ function ITSlider({
           "[&::-webkit-slider-thumb]:hover:bg-primary-600 [&::-webkit-slider-thumb]:transition-colors",
           "[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full",
           "[&::-moz-range-thumb]:bg-primary-500 [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white",
-          "[&::-moz-range-track]:bg-gray-200 dark:[&::-moz-range-track]:bg-gray-700",
+          "[&::-moz-range-track]:bg-secondary-200 dark:[&::-moz-range-track]:bg-secondary-700",
           "[&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-1.5"
         )
       }
@@ -8485,8 +8518,8 @@ function ITTextarea({
           "w-full border border-solid transition-all duration-200 rounded-lg px-3 py-2 text-sm outline-none",
           "focus:ring-2",
           resizeMap[resize],
-          error ? "border-red-500 ring-red-100 focus:border-red-500 focus:ring-red-100" : "border-gray-300 focus:border-primary-500 focus:ring-primary-100",
-          disabled && "opacity-50 cursor-not-allowed bg-gray-100 dark:bg-slate-800"
+          error ? "border-danger-500 ring-danger-100 focus:border-danger-500 focus:ring-danger-100" : "border-secondary-300 focus:border-primary-500 focus:ring-primary-100",
+          disabled && "opacity-50 cursor-not-allowed bg-secondary-100 dark:bg-slate-800"
         )
       }
     ),
@@ -8594,7 +8627,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 +8671,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 +8747,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 +8788,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(", ");
@@ -8838,9 +8903,9 @@ var ITDropfile = ({
   const isImage = fileType && fileType.startsWith("image/");
   return /* @__PURE__ */ jsxs44("div", { className: clsx41("w-full transition-all duration-300", containerClassName), children: [
     /* @__PURE__ */ jsxs44("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsxs44("label", { className: "block text-sm font-semibold text-gray-700", children: [
+      /* @__PURE__ */ jsxs44("label", { className: "block text-sm font-semibold text-secondary-700", children: [
         /* @__PURE__ */ jsx58(ITText, { as: "span", children: "Subir archivo " }),
-        /* @__PURE__ */ jsxs44(ITText, { as: "span", className: "text-gray-400 font-normal text-xs", children: [
+        /* @__PURE__ */ jsxs44(ITText, { as: "span", className: "text-secondary-400 font-normal text-xs", children: [
           "(",
           getFileExtensions(),
           ")"
@@ -8855,77 +8920,83 @@ var ITDropfile = ({
         className: `
             relative group flex flex-col items-center justify-center w-full p-6 
             border-2 border-dashed rounded-xl cursor-pointer transition-all duration-300 ease-in-out
-            ${isDragActive ? "border-primary-500 bg-primary-50 scale-[1.01]" : "border-gray-300 bg-white hover:border-primary-400 hover:bg-gray-50"}
+            ${isDragActive ? "border-primary-500 bg-primary-50 scale-[1.01]" : "border-secondary-300 bg-white hover:border-primary-400 hover:bg-secondary-50"}
           `,
         children: [
           /* @__PURE__ */ jsx58("input", { ...getInputProps() }),
-          /* @__PURE__ */ jsx58("div", { className: `mb-3 p-3 rounded-full transition-colors duration-300 ${isDragActive ? "bg-primary-100" : "bg-gray-100 group-hover:bg-primary-50"}`, children: /* @__PURE__ */ jsx58(
+          /* @__PURE__ */ jsx58("div", { className: `mb-3 p-3 rounded-full transition-colors duration-300 ${isDragActive ? "bg-primary-100" : "bg-secondary-100 group-hover:bg-primary-50"}`, children: /* @__PURE__ */ jsx58(
             "svg",
             {
-              className: `w-6 h-6 transition-colors duration-300 ${isDragActive ? "text-primary-600" : "text-gray-400 group-hover:text-primary-500"}`,
+              className: `w-6 h-6 transition-colors duration-300 ${isDragActive ? "text-primary-600" : "text-secondary-400 group-hover:text-primary-500"}`,
               fill: "none",
               viewBox: "0 0 24 24",
               stroke: "currentColor",
               children: /* @__PURE__ */ jsx58("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" })
             }
           ) }),
-          /* @__PURE__ */ jsx58("div", { className: "text-center space-y-1", children: /* @__PURE__ */ jsx58(ITText, { as: "p", className: `text-sm font-medium transition-colors duration-300 ${isDragActive ? "text-primary-700" : "text-gray-700"}`, children: isDragActive ? "\xA1Suelta aqu\xED!" : "Haz clic o arrastra" }) })
+          /* @__PURE__ */ jsx58("div", { className: "text-center space-y-1", children: /* @__PURE__ */ jsx58(ITText, { as: "p", className: `text-sm font-medium transition-colors duration-300 ${isDragActive ? "text-primary-700" : "text-secondary-700"}`, children: isDragActive ? "\xA1Suelta aqu\xED!" : "Haz clic o arrastra" }) })
         ]
       }
-    ) : /* @__PURE__ */ jsxs44("div", { className: "w-full bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden animate-fade-in", children: [
-      /* @__PURE__ */ jsx58("div", { className: "flex items-center justify-between p-3 bg-gray-50 border-b border-gray-100", children: /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+    ) : /* @__PURE__ */ jsxs44("div", { className: "w-full bg-white border border-secondary-200 rounded-xl shadow-sm overflow-hidden animate-fade-in", children: [
+      /* @__PURE__ */ jsx58("div", { className: "flex items-center justify-between p-3 bg-secondary-50 border-b border-secondary-100", children: /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-3 overflow-hidden", children: [
         /* @__PURE__ */ jsx58("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-primary-100 flex items-center justify-center text-primary-600", children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ jsx58("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx58("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) : /* @__PURE__ */ jsx58("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx58("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }),
         /* @__PURE__ */ jsxs44("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx58(ITText, { as: "p", className: "text-xs font-medium text-gray-900 truncate", title: selectedFile?.name || "Imagen cargada", children: selectedFile?.name || "Imagen cargada" }),
-          /* @__PURE__ */ jsx58(ITText, { as: "p", className: "text-[10px] text-gray-500", children: selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : "" })
+          /* @__PURE__ */ jsx58(ITText, { as: "p", className: "text-xs font-medium text-secondary-900 truncate", title: selectedFile?.name || "Imagen cargada", children: selectedFile?.name || "Imagen cargada" }),
+          /* @__PURE__ */ jsx58(ITText, { as: "p", className: "text-[10px] text-secondary-500", children: selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : "" })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx58("div", { className: clsx41("relative bg-gray-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName), children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ jsx58(
+      /* @__PURE__ */ jsx58("div", { className: clsx41("relative bg-secondary-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName), children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ jsx58(
         "img",
         {
           src: imagePreview,
           alt: "Vista previa",
           className: "w-full h-full object-contain max-h-[200px]"
         }
-      ) : /* @__PURE__ */ jsxs44("div", { className: "py-8 flex flex-col items-center text-gray-400", children: [
+      ) : /* @__PURE__ */ jsxs44("div", { className: "py-8 flex flex-col items-center text-secondary-400", children: [
         /* @__PURE__ */ jsx58("svg", { className: "w-10 h-10 mb-2 opacity-50", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx58("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }),
         /* @__PURE__ */ jsx58(ITText, { as: "span", className: "text-xs", children: "Sin vista previa" })
       ] }) }),
-      /* @__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("div", { className: "px-3 py-2 bg-white border-t border-secondary-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" })
           ]
         }
       ) }),
-      uploadStatus === "subiendo" /* UPLOADING */ && /* @__PURE__ */ jsx58("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsx58("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ jsx58(
+      uploadStatus === "subiendo" /* UPLOADING */ && /* @__PURE__ */ jsx58("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsx58("div", { className: "w-full bg-secondary-200 rounded-full h-1.5", children: /* @__PURE__ */ jsx58(
         "div",
         {
           className: "bg-primary-600 h-1.5 rounded-full transition-all duration-1000 ease-out",
@@ -8966,8 +9037,8 @@ function ITTopBar({
       className: "sticky top-0 z-40 backdrop-blur-md transition-all duration-300",
       style: {
         backgroundColor: "var(--topbar-bg, rgba(255, 255, 255, 0.9))",
-        borderBottom: "1px solid var(--topbar-border, #e2e8f0)",
-        boxShadow: "none"
+        borderBottom: "1px solid var(--topbar-border, rgba(15, 23, 42, 0.06))",
+        boxShadow: "var(--shadow-xs)"
       },
       children: /* @__PURE__ */ jsxs45("div", { className: "flex items-center justify-between h-[72px] px-6 lg:px-8", children: [
         /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-5", children: [
@@ -8996,7 +9067,7 @@ function ITTopBar({
               }
             )
           ] }),
-          navItems && navItems.length > 0 && /* @__PURE__ */ jsx59("nav", { className: "hidden md:flex ml-8 space-x-1 border-l pl-8", style: { borderColor: "var(--topbar-border, #e2e8f0)" }, children: navItems.map((item) => /* @__PURE__ */ jsx59(
+          navItems && navItems.length > 0 && /* @__PURE__ */ jsx59("nav", { className: "hidden md:flex ml-8 space-x-1 border-l pl-8", style: { borderColor: "var(--topbar-border, rgba(15, 23, 42, 0.06))" }, children: navItems.map((item) => /* @__PURE__ */ jsx59(
             "button",
             {
               onClick: () => onNavItemClick?.(item.id),
@@ -9023,7 +9094,7 @@ function ITTopBar({
             "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-gray-200",
+              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(--topbar-user-hover, #f1f5f9)" : "transparent"
               },
@@ -9074,7 +9145,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: {
@@ -9098,9 +9169,9 @@ function ITTopBar({
                           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 ? "#ef4444" : "var(--topbar-user-text, #334155)" },
+                        style: { color: isDestructive ? "var(--color-danger-500)" : "var(--topbar-user-text, #334155)" },
                         onMouseEnter: (e) => {
-                          e.currentTarget.style.backgroundColor = isDestructive ? "#fef2f2" : "var(--topbar-user-item-hover, #f8fafc)";
+                          e.currentTarget.style.backgroundColor = isDestructive ? "var(--color-danger-50)" : "var(--topbar-user-item-hover, #f8fafc)";
                         },
                         onMouseLeave: (e) => {
                           e.currentTarget.style.backgroundColor = "transparent";
@@ -9166,7 +9237,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",
@@ -9253,7 +9324,7 @@ function ITLoader({
     return /* @__PURE__ */ jsx61(
       "div",
       {
-        className: `w-full ${size === "sm" ? "h-1" : size === "md" ? "h-1.5" : size === "lg" ? "h-2" : "h-2.5"} bg-gray-200 rounded-full overflow-hidden ${className}`,
+        className: `w-full ${size === "sm" ? "h-1" : size === "md" ? "h-1.5" : size === "lg" ? "h-2" : "h-2.5"} bg-secondary-200 rounded-full overflow-hidden ${className}`,
         children: /* @__PURE__ */ jsx61(
           "div",
           {
@@ -9364,7 +9435,7 @@ function ITStepper({
       /* @__PURE__ */ jsx62(
         "div",
         {
-          className: "absolute left-6 right-6 top-5 h-1 bg-gray-200 rounded-full z-0",
+          className: "absolute left-6 right-6 top-5 h-1 bg-secondary-200 rounded-full z-0",
           "aria-hidden": true
         }
       ),
@@ -9399,7 +9470,7 @@ function ITStepper({
                     hasIcon && "p-2",
                     isCompleted && "bg-slate-400 border-slate-400 text-white scale-100 shadow",
                     isActive && "text-white scale-110 shadow-lg",
-                    !isActive && !isCompleted && "bg-white border-gray-300 text-gray-400"
+                    !isActive && !isCompleted && "bg-white border-secondary-300 text-secondary-400"
                   ),
                   style: isActive ? { backgroundColor: resolvedColor, borderColor: resolvedColor } : void 0,
                   children: renderStepContent(idx, isCompleted, isActive)
@@ -9411,7 +9482,7 @@ function ITStepper({
                   as: "span",
                   className: clsx43(
                     "mt-2 text-xs sm:text-sm font-medium transition-colors text-center",
-                    isCompleted ? "text-slate-400" : !isActive && "text-gray-400"
+                    isCompleted ? "text-slate-400" : !isActive && "text-secondary-400"
                   ),
                   style: isActive ? { color: resolvedColor } : void 0,
                   children: step.label
@@ -9432,7 +9503,7 @@ function ITStepper({
         "aria-labelledby": `step-${currentStep}`,
         className: clsx43(
           stepClassName,
-          "bg-white border border-gray-100 rounded-2xl shadow-lg min-h-[280px] transition-transform duration-400 no-scrollbar p-6",
+          "bg-white border border-secondary-100 rounded-2xl shadow-lg min-h-[280px] transition-transform duration-400 no-scrollbar p-6",
           scrollableContent && "overflow-y-auto hide-scrollbar"
         ),
         style: scrollableContent && maxContentHeight ? { maxHeight: maxContentHeight } : void 0,
@@ -9454,7 +9525,7 @@ function ITStepper({
         }
       ),
       /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxs47(ITText, { as: "div", className: "text-sm text-gray-500 mr-2 hidden sm:block", children: [
+        /* @__PURE__ */ jsxs47(ITText, { as: "div", className: "text-sm text-secondary-500 mr-2 hidden sm:block", children: [
           "Paso ",
           currentStep + 1,
           " de ",