@axzydev/axzy_ui_system 1.2.11 → 1.2.12

package/dist/index.cjs

@@ -446,7 +446,7 @@ var sizeMap = {
 };
 var DEFAULT_COLOR = "bg-primary-600";
 var DEFAULT_BG = "var(--color-primary-600)";
-var DEFAULT_SHADOW = "0 4px 14px 0 rgba(37, 99, 235, 0.35)";
+var 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,
@@ -692,7 +692,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",
@@ -703,7 +703,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"
@@ -713,41 +713,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",
@@ -755,7 +755,7 @@ var components = {
       borderColor: semanticColors.primary[600],
       borderWidth: "2px",
       hover: semanticColors.primary[50],
-      borderRadius: "0.375rem"
+      borderRadius: "var(--radius-md)"
     }
   },
   badge: {
@@ -813,19 +813,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"
@@ -834,7 +834,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: {
@@ -900,8 +900,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",
@@ -1446,7 +1446,7 @@ var ITCalendar = ({
               },
               year
             )) }) : mode === "month" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "p-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grid grid-cols-7 mb-2", children: ["Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b", "Dom"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ITText, { as: "div", className: "text-center text-xs font-semibold text-gray-400 uppercase py-1", children: day }, day)) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grid grid-cols-7 mb-2", children: ["Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b", "Dom"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ITText, { as: "div", className: "text-center text-xs font-semibold text-secondary-400 uppercase py-1", children: day }, day)) }),
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grid grid-cols-7 gap-1", children: monthDays.map((day) => {
                 const isDisabled = isDateDisabled(day);
                 const isCurrentMonth = (0, import_date_fns.isSameMonth)(day, currentDate);
@@ -1687,11 +1687,14 @@ function ITCard({
   const [isHovered, setIsHovered] = (0, import_react7.useState)(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 = {
@@ -1723,13 +1726,13 @@ function ITCard({
               children: title
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ITText, { as: "div", className: "text-gray-600", children })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ITText, { as: "div", className: "text-secondary-600", children })
         ] }),
         actions && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
             className: (0, import_clsx7.default)(
-              "p-4 border-t border-gray-100 mt-auto",
+              "p-4 border-t border-secondary-100 mt-auto",
               actionClassName
             ),
             children: actions
@@ -1865,10 +1868,10 @@ var import_clsx10 = __toESM(require("clsx"), 1);
 function inputLabel(error) {
   return (0, import_clsx10.default)(
     "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";
@@ -2272,14 +2275,14 @@ function ITInput({
               type === "checkbox" && "form-checkbox rounded",
               className,
               { [disabledOverlay]: disabled },
-              { "border-red-500": hasError }
+              { "border-danger-500": hasError }
             )
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { htmlFor: name, className: "text-sm text-gray-700 dark:text-slate-300 select-none", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { htmlFor: name, className: "text-sm text-secondary-700 dark:text-slate-300 select-none", children: [
           label,
           " ",
-          required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ITText, { as: "span", className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ITText, { as: "span", className: "text-danger-500", children: "*" })
         ] })
       ] })
     ) : (
@@ -2295,7 +2298,7 @@ function ITInput({
             ),
             children: [
               label,
-              required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ITText, { as: "span", className: "text-red-500 ml-1", children: "*" })
+              required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ITText, { as: "span", className: "text-danger-500 ml-1", children: "*" })
             ]
           }
         ),
@@ -2374,7 +2377,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__ */ (0, import_jsx_runtime11.jsxs)("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: [
@@ -2394,11 +2397,11 @@ function ITInput({
       ] })
     ),
     hasError && !isCheckboxOrRadio && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ITText, { as: "p", className: inputError, children: errorMessage }) }),
-    showHintLength && (minLength || maxLength) && !isCheckboxOrRadio && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ITText, { as: "p", className: "text-gray-500", children: [
+    showHintLength && (minLength || maxLength) && !isCheckboxOrRadio && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ITText, { as: "p", className: "text-secondary-500", children: [
       currentLength,
       maxLength && `/${maxLength}`
     ] }) }),
-    isCheckboxOrRadio && hasError && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ITText, { as: "p", className: "text-red-500", children: errorMessage }) })
+    isCheckboxOrRadio && hasError && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ITText, { as: "p", className: "text-danger-500", children: errorMessage }) })
   ] });
 }
 
@@ -2477,7 +2480,7 @@ function ITSelect({
         className: inputLabel(hasError),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ITText, { as: "span", children: label }),
-          required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ITText, { as: "span", className: "text-red-500 ml-1", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ITText, { as: "span", className: "text-danger-500 ml-1", children: "*" })
         ]
       }
     ),
@@ -2518,7 +2521,7 @@ function ITSelect({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_fa5.FaAngleDown, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-secondary-500", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_fa5.FaAngleDown, {}) })
       ] }),
       hasError && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ITText, { as: "p", className: inputError, children: errorMessage }) })
     ] })
@@ -2606,7 +2609,7 @@ function ITPagination({
       {
         className: (0, import_clsx13.default)(
           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,
@@ -2619,7 +2622,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}`
@@ -2632,7 +2635,7 @@ function ITPagination({
           as: "div",
           className: (0, import_clsx13.default)(
             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,
@@ -2650,7 +2653,7 @@ function ITPagination({
       {
         className: (0, import_clsx13.default)(
           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,
@@ -2662,8 +2665,8 @@ function ITPagination({
     const startItem = Math.min((currentPage - 1) * itemsPerPage + 1, totalItems || 0);
     const endItem = Math.min(currentPage * itemsPerPage, totalItems || 0);
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_clsx13.default)("flex flex-col sm:flex-row justify-between items-center gap-4 w-full", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-4 text-sm text-gray-500", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 bg-gray-50 px-3 py-1 rounded-lg border border-gray-200", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-4 text-sm text-secondary-500", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 bg-secondary-50 px-3 py-1 rounded-lg border border-secondary-200", children: [
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ITText, { as: "span", className: "text-xs font-medium", children: "Mostrar" }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             ITSelect,
@@ -2678,19 +2681,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__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ITText, { as: "span", className: "text-gray-300", children: "|" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ITText, { as: "span", className: "text-secondary-300", children: "|" }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ITText, { as: "span", className: "text-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ITText, { as: "span", className: "font-semibold text-gray-700", children: startItem }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ITText, { as: "span", className: "font-semibold text-secondary-700", children: startItem }),
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ITText, { as: "span", children: " - " }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ITText, { as: "span", className: "font-semibold text-gray-700", children: endItem }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ITText, { as: "span", className: "font-semibold text-secondary-700", children: endItem }),
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ITText, { as: "span", children: " de " }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ITText, { as: "span", className: "font-semibold text-gray-900", children: totalItems })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ITText, { as: "span", className: "font-semibold text-secondary-900", children: totalItems })
           ] })
         ] })
       ] }),
@@ -2827,15 +2830,15 @@ function ITTable({
           onClick: () => handleFilterChange(col.key, nextValue),
           "aria-label": `${getToggleLabel()} para ${col.label}`,
           title: `${getToggleLabel()} para ${col.label}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "relative w-10 h-5 bg-gray-300 rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "relative w-10 h-5 bg-secondary-300 rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "div",
             {
               className: (0, import_clsx14.default)(
                 "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
                 }
               )
             }
@@ -3157,15 +3160,15 @@ function ITDataTable({
           "aria-label": `${getToggleLabel()} para ${col.label}`,
           title: `${getToggleLabel()} para ${col.label}`,
           disabled: isLoading,
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "relative w-10 h-5 bg-gray-300 rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "relative w-10 h-5 bg-secondary-300 rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
               className: (0, import_clsx15.default)(
                 "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
                 }
               )
             }
@@ -3632,8 +3635,8 @@ var ITTabs = ({
   const activeContent = items.find((item) => item.id === activeId)?.content;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: (0, import_clsx17.clsx)("w-full", containerClassName), children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_clsx17.clsx)(
-      "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;
@@ -3647,12 +3650,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"
           ),
@@ -4458,23 +4461,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;
       }
 
@@ -4482,25 +4485,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;
       }
@@ -4568,23 +4571,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;
       }
 
@@ -4592,24 +4595,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;
       }
@@ -4637,13 +4640,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; }
@@ -4673,12 +4676,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;
       }
 
@@ -5277,7 +5280,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__ */ (0, import_jsx_runtime20.jsx)(import_md3.MdClose, { size: 12 })
             }
@@ -5624,7 +5627,7 @@ function ITDialog({
     "div",
     {
       "data-it-dialog": "true",
-      className: `fixed inset-0 flex ${fullScreen ? "items-stretch" : "items-center justify-center"} bg-black/50 z-[60]`,
+      className: `fixed inset-0 flex ${fullScreen ? "items-stretch" : "items-center justify-center"} bg-slate-900/50 z-[60]`,
       children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "div",
         {
@@ -5645,7 +5648,7 @@ function ITDialog({
             /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "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__ */ (0, import_jsx_runtime22.jsx)(import_fa11.FaRegTimesCircle, {})
               }
@@ -6015,14 +6018,14 @@ function ITTimePicker({
       "div",
       {
         ref: dropdownRef,
-        className: "fixed z-[70] bg-white border border-gray-100 shadow-xl rounded-xl w-64 overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-200 origin-top it-timepicker-dropdown",
+        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__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex bg-gray-50 border-b border-gray-100 text-xs font-semibold text-gray-500 uppercase tracking-wider", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ITText, { as: "div", className: "flex-1 text-center py-2 border-r border-gray-100", children: "Horas" }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex bg-secondary-50 border-b border-secondary-100 text-xs font-semibold text-secondary-500 uppercase tracking-wider", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ITText, { as: "div", className: "flex-1 text-center py-2 border-r border-secondary-100", children: "Horas" }),
             /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ITText, { as: "div", className: "flex-1 text-center py-2", children: "Minutos" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex h-56 relative bg-white", children: [
@@ -6030,7 +6033,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__ */ (0, import_jsx_runtime27.jsx)("div", { className: "py-2", children: hoursList.map((h) => {
                   const isSelected = currentHour === h;
                   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -6096,7 +6099,7 @@ function ITTimePicker({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("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__ */ (0, import_jsx_runtime27.jsx)("div", { className: "p-3 bg-gray-50 border-t border-gray-100 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "p-3 bg-secondary-50 border-t border-secondary-100 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             ITButton,
             {
               variant: "solid",
@@ -6238,12 +6241,12 @@ function ITSearchSelect({
       ITText,
       {
         as: "label",
-        className: (0, import_clsx24.default)("text-sm font-medium text-gray-700 dark:text-slate-300", {
-          "text-red-500": hasError
+        className: (0, import_clsx24.default)("text-sm font-medium text-secondary-700 dark:text-slate-300", {
+          "text-danger-500": hasError
         }),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ITText, { as: "span", children: label }),
-          required && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ITText, { as: "span", className: "text-red-500 ml-1", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ITText, { as: "span", className: "text-danger-500 ml-1", children: "*" })
         ]
       }
     ),
@@ -6266,26 +6269,26 @@ function ITSearchSelect({
             autoComplete: "off"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "absolute right-3 flex items-center gap-2 text-gray-400 pointer-events-none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "absolute right-3 flex items-center gap-2 text-secondary-400 pointer-events-none", children: [
           isLoading && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "animate-spin h-4 w-4 border-2 border-primary-500 border-t-transparent rounded-full" }),
           !isLoading && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fa15.FaSearch, { size: 14, className: (0, import_clsx24.default)({ "text-primary-500": isFocused }) })
         ] })
       ] }),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute z-[70] w-full mt-1 bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("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__ */ (0, import_jsx_runtime28.jsx)("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         ITText,
         {
           as: "div",
           onClick: () => handleSelect(option),
           className: (0, import_clsx24.default)(
             "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__ */ (0, import_jsx_runtime28.jsx)(ITText, { as: "span", children: option[labelField] })
         },
         option[valueField]
-      )) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ITText, { as: "div", className: "px-4 py-6 text-sm text-center text-gray-500 italic", children: isLoading ? "Cargando..." : noResultsMessage }) }) })
+      )) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ITText, { as: "div", className: "px-4 py-6 text-sm text-center text-secondary-500 italic", children: isLoading ? "Cargando..." : noResultsMessage }) }) })
     ] }),
-    hasError && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ITText, { as: "p", className: "text-red-500 text-xs mt-1", children: errorMessage })
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ITText, { as: "p", className: "text-danger-500 text-xs mt-1", children: errorMessage })
   ] });
 }
 
@@ -6514,7 +6517,7 @@ var ITFieldRenderer = ({
         return null;
       case "section":
         return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: (0, import_clsx25.default)("w-full col-span-full", activeConfig.className), children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ITText, { as: "h4", className: "text-lg font-semibold text-gray-800 mb-4", children: label }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ITText, { as: "h4", className: "text-lg font-semibold text-secondary-800 mb-4", children: label }),
           /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: (0, import_clsx25.default)("grid gap-y-6 gap-x-5", getGridColsClass(columns)), children: activeConfig.fields?.map((childConfig) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             ITFieldRenderer,
             {
@@ -6525,7 +6528,7 @@ var ITFieldRenderer = ({
           )) })
         ] });
       case "array":
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "p-4 border-2 border-dashed border-gray-200 rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(ITText, { as: "p", className: "text-sm text-gray-500 text-center", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "p-4 border-2 border-dashed border-secondary-200 rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(ITText, { as: "p", className: "text-sm text-secondary-500 text-center", children: [
           "Array Field: ",
           label
         ] }) });
@@ -6841,10 +6844,10 @@ function ITNavbar({
   const shouldUseLegacy = !navigationItems.length && (navItems || sidebarItems);
   if (shouldUseLegacy) {
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col h-screen", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("nav", { className: "bg-white border-b border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between mx-auto p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("nav", { className: "bg-white border-b border-secondary-200", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between mx-auto p-4", children: [
         /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center space-x-3 rtl:space-x-reverse", children: [
           logo && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "h-8", children: logo }),
-          logoText && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", className: "self-center text-2xl font-semibold whitespace-nowrap text-gray-900", children: logoText })
+          logoText && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", className: "self-center text-2xl font-semibold whitespace-nowrap text-secondary-900", children: logoText })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center justify-end w-full md:w-auto md:order-2", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center space-x-4 md:order-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "hidden md:flex space-x-4", children: navItems }),
@@ -6853,7 +6856,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__ */ (0, import_jsx_runtime33.jsx)(
                   "img",
@@ -6862,18 +6865,18 @@ function ITNavbar({
                     src: userMenu.userImage,
                     alt: "user photo"
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa17.FaUserCircle, { className: "w-8 h-8 text-gray-500" })
+                ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa17.FaUserCircle, { className: "w-8 h-8 text-secondary-500" })
               }
             ),
             isUserMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
               "div",
               {
                 ref: userMenuRef,
-                className: "z-[70] 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__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "px-4 py-3", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", className: "block text-sm text-gray-900", children: userMenu.userName }),
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", className: "block text-sm text-gray-500 truncate", children: userMenu.userEmail })
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", className: "block text-sm text-secondary-900", children: userMenu.userName }),
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", className: "block text-sm text-secondary-500 truncate", children: userMenu.userEmail })
                   ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "py-2", children: userMenu.menuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     "button",
@@ -6882,7 +6885,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__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", children: item.label })
                     }
                   ) }, index)) })
@@ -6893,8 +6896,8 @@ function ITNavbar({
         ] }) })
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex-1 flex overflow-hidden relative", children: [
-        (showSidebar || showSidebarOnMobile) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("aside", { className: "fixed inset-y-0 left-0 w-64 bg-gray-50 transform transition-transform duration-300 ease-in-out z-[40] shadow-lg md:static md:transform-none md:shadow-none md:border-r md:border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "h-full overflow-y-auto py-4 px-3", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "space-y-2 font-medium", children: sidebarItems }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("main", { className: "flex-1 bg-gray-100 overflow-y-auto", children })
+        (showSidebar || showSidebarOnMobile) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("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__ */ (0, import_jsx_runtime33.jsx)("div", { className: "h-full overflow-y-auto py-4 px-3", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "space-y-2 font-medium", children: sidebarItems }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("main", { className: "flex-1 bg-secondary-100 overflow-y-auto", children })
       ] })
     ] });
   }
@@ -7475,7 +7478,7 @@ function SearchInput({
   className = ""
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: `relative flex-1 ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_fa19.FaSearch, { className: "h-5 w-5 text-gray-400" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_fa19.FaSearch, { className: "h-5 w-5 text-secondary-400" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       ITInput,
       {
@@ -7503,12 +7506,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__ */ (0, import_jsx_runtime42.jsx)(import_fa20.FaSortUp, { className: "w-4 h-4 text-slate-500" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_fa20.FaSortDown, { className: "w-4 h-4 text-slate-500" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_fa20.FaSort, { className: "w-4 h-4 text-gray-500" }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(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__ */ (0, import_jsx_runtime42.jsx)(import_fa20.FaSortUp, { className: "w-4 h-4 text-slate-500" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_fa20.FaSortDown, { className: "w-4 h-4 text-slate-500" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_fa20.FaSort, { className: "w-4 h-4 text-secondary-500" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ITText, { as: "span", className: "text-sm font-medium text-secondary-700", children: sortConfig ? sortConfig.direction === "asc" ? "Asc \u2191" : "Desc \u2193" : "Ordenar" })
       ]
     }
   );
@@ -7524,7 +7527,7 @@ function SearchAndSortBar({
   sortConfig,
   searchInputPlaceholder = "Buscar en todos los campos..."
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "bg-gray-50 px-6 py-4 border-b border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center gap-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "bg-secondary-50 px-6 py-4 border-b border-secondary-200", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center gap-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       SearchInput,
       {
@@ -7584,7 +7587,7 @@ function TableHeader({
   onSort,
   sortConfig
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("tr", { className: "bg-white border-b border-gray-200", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("tr", { className: "bg-white border-b border-secondary-200", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     TableHeaderCell,
     {
       label: col.label,
@@ -7727,7 +7730,7 @@ function EditableCell({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "w-full", children: [
     renderInput(),
-    error && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "text-red-500 text-xs mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ITText, { as: "span", children: error }) })
+    error && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "text-danger-500 text-xs mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ITText, { as: "span", children: error }) })
   ] });
 }
 
@@ -7772,7 +7775,7 @@ function TableRow({
             "aria-label": "Verdadero",
             title: "Verdadero"
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_fa21.FaTimes, { className: "text-red-500", "aria-label": "Falso", title: "Falso" });
+        ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_fa21.FaTimes, { className: "text-danger-500", "aria-label": "Falso", title: "Falso" });
       case "actions":
         if (isEditing && col.saveActions) {
           return col.saveActions(rowData, {
@@ -7801,7 +7804,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__ */ (0, import_jsx_runtime47.jsx)(
         "td",
         {
@@ -7855,7 +7858,7 @@ function PaginationInfo({
   totalCount,
   className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(ITText, { as: "span", className: `text-sm text-gray-700 ${className}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(ITText, { as: "span", className: `text-sm text-secondary-700 ${className}`, children: [
     "Mostrando ",
     currentCount,
     " de ",
@@ -7882,7 +7885,7 @@ function PaginationControls({
     /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center space-x-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PaginationInfo, { currentCount, totalCount }),
       /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ITText, { as: "span", className: "text-sm text-gray-700", children: "Mostrar:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ITText, { as: "span", className: "text-sm text-secondary-700", children: "Mostrar:" }),
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           ITSelect,
           {
@@ -7915,7 +7918,7 @@ function PaginationControls({
           children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_fa22.FaArrowLeft, { "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ITText, { as: "span", className: "px-4 py-2 text-sm text-gray-700", "aria-live": "polite", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ITText, { as: "span", className: "px-4 py-2 text-sm text-secondary-700", "aria-live": "polite", children: [
         "P\xE1gina ",
         pageIndex,
         " de ",
@@ -8009,7 +8012,7 @@ function ITSearchTable({
     /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "shadow-md sm:rounded-lg overflow-hidden", children: [
       title && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "bg-teal-500 text-white px-6 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ITText, { as: "h2", className: "text-xl font-bold text-center whitespace-nowrap", children: title }) }),
       /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "bg-white", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "p-4 border-b border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "p-4 border-b border-secondary-200", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           SearchAndSortBar,
           {
             searchTerm,
@@ -8024,7 +8027,7 @@ function ITSearchTable({
           "table",
           {
             className: (0, import_clsx34.default)(
-              "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]
             ),
@@ -8172,7 +8175,7 @@ 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,
@@ -8192,7 +8195,7 @@ function ITSidebar({
                 `,
             style: {
               backgroundColor: item.isActive ? "var(--sidebar-active-bg, var(--color-secondary-50))" : "transparent",
-              boxShadow: item.isActive ? "0 1px 2px 0 rgba(0, 0, 0, 0.05)" : "none",
+              boxShadow: item.isActive ? "var(--shadow-xs)" : "none",
               border: item.isActive ? "1px solid var(--sidebar-border, var(--color-secondary-200))" : "1px solid transparent"
             },
             onMouseEnter: (e) => {
@@ -8207,7 +8210,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__ */ (0, import_jsx_runtime52.jsxs)("div", { className: `flex items-center ${!isSidebarCollapsed ? "gap-3.5" : "justify-center"} relative z-10 w-full`, children: [
@@ -8216,7 +8219,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"
@@ -8230,7 +8233,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"
                     },
@@ -8254,9 +8257,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
                 }
@@ -8276,7 +8279,7 @@ function ITSidebar({
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("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__ */ (0, import_jsx_runtime52.jsx)("span", { style: { color: "var(--sidebar-active-icon, #10b981)" }, className: "text-xl drop-shadow-sm", children: item.icon }),
+                item.icon && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { style: { color: "var(--sidebar-active-icon, var(--color-primary-500))" }, className: "text-xl drop-shadow-sm", children: item.icon }),
                 /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ITText, { as: "span", className: "tracking-wide text-[15px]", children: item.label })
               ] }),
               item.subitems && item.subitems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "py-2", children: item.subitems.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
@@ -8289,17 +8292,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__ */ (0, import_jsx_runtime52.jsx)("span", { className: `w-1.5 h-1.5 rounded-full transition-all ${subitem.isActive ? "scale-125" : ""}`, style: { backgroundColor: subitem.isActive ? "var(--sidebar-active-icon, #10b981)" : "var(--sidebar-icon-color, var(--color-secondary-400))" } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("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__ */ (0, import_jsx_runtime52.jsx)(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__ */ (0, import_jsx_runtime52.jsx)(ITText, { as: "div", className: "px-5 py-3 text-sm italic", style: { color: "var(--sidebar-label-color, #71717a)" }, children: "No hay submen\xFA" })
+              )) }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(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" })
             ]
           }
         ),
@@ -8344,8 +8347,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)"
                       }
                     }
                   ),
@@ -8354,7 +8357,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, var(--color-secondary-400))"
+                        backgroundColor: subitem.isActive ? "var(--sidebar-active-icon, var(--color-primary-500))" : "var(--sidebar-icon-color, var(--color-secondary-400))"
                       }
                     }
                   ),
@@ -8473,7 +8476,7 @@ function ITSlider({
   className
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: (0, import_clsx36.default)("flex flex-col gap-1.5", className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(ITText, { as: "label", className: "text-xs font-semibold text-gray-600 dark:text-gray-400", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(ITText, { as: "label", className: "text-xs font-semibold text-secondary-600 dark:text-secondary-400", children: [
       label,
       ": ",
       value
@@ -8490,7 +8493,7 @@ function ITSlider({
         disabled,
         className: (0, import_clsx36.default)(
           "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",
@@ -8499,7 +8502,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"
         )
       }
@@ -8587,8 +8590,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"
         )
       }
     ),
@@ -8972,9 +8975,9 @@ var ITDropfile = ({
   const isImage = fileType && fileType.startsWith("image/");
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: (0, import_clsx41.default)("w-full transition-all duration-300", containerClassName), children: [
     /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("label", { className: "block text-sm font-semibold text-gray-700", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("label", { className: "block text-sm font-semibold text-secondary-700", children: [
         /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ITText, { as: "span", children: "Subir archivo " }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(ITText, { as: "span", className: "text-gray-400 font-normal text-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(ITText, { as: "span", className: "text-secondary-400 font-normal text-xs", children: [
           "(",
           getFileExtensions(),
           ")"
@@ -8989,43 +8992,43 @@ 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__ */ (0, import_jsx_runtime59.jsx)("input", { ...getInputProps() }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("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__ */ (0, import_jsx_runtime59.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("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__ */ (0, import_jsx_runtime59.jsx)(
             "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__ */ (0, import_jsx_runtime59.jsx)("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__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-center space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(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__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-center space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(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__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "w-full bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden animate-fade-in", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex items-center justify-between p-3 bg-gray-50 border-b border-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+    ) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "w-full bg-white border border-secondary-200 rounded-xl shadow-sm overflow-hidden animate-fade-in", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex items-center justify-between p-3 bg-secondary-50 border-b border-secondary-100", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
         /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("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__ */ (0, import_jsx_runtime59.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("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__ */ (0, import_jsx_runtime59.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("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__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ITText, { as: "p", className: "text-xs font-medium text-gray-900 truncate", title: selectedFile?.name || "Imagen cargada", children: selectedFile?.name || "Imagen cargada" }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ITText, { as: "p", className: "text-[10px] text-gray-500", children: selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : "" })
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ITText, { as: "p", className: "text-xs font-medium text-secondary-900 truncate", title: selectedFile?.name || "Imagen cargada", children: selectedFile?.name || "Imagen cargada" }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ITText, { as: "p", className: "text-[10px] text-secondary-500", children: selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : "" })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: (0, import_clsx41.default)("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__ */ (0, import_jsx_runtime59.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: (0, import_clsx41.default)("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__ */ (0, import_jsx_runtime59.jsx)(
         "img",
         {
           src: imagePreview,
           alt: "Vista previa",
           className: "w-full h-full object-contain max-h-[200px]"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "py-8 flex flex-col items-center text-gray-400", children: [
+      ) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "py-8 flex flex-col items-center text-secondary-400", children: [
         /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("svg", { className: "w-10 h-10 mb-2 opacity-50", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("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__ */ (0, import_jsx_runtime59.jsx)(ITText, { as: "span", className: "text-xs", children: "Sin vista previa" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "px-3 py-2 bg-white border-t border-gray-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "px-3 py-2 bg-white border-t border-secondary-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           ITButton,
           {
@@ -9065,7 +9068,7 @@ var ITDropfile = ({
           ]
         }
       ) }),
-      uploadStatus === "subiendo" /* UPLOADING */ && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "px-4 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      uploadStatus === "subiendo" /* UPLOADING */ && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "px-4 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "w-full bg-secondary-200 rounded-full h-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "div",
         {
           className: "bg-primary-600 h-1.5 rounded-full transition-all duration-1000 ease-out",
@@ -9106,8 +9109,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__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center justify-between h-[72px] px-6 lg:px-8", children: [
         /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center gap-5", children: [
@@ -9136,7 +9139,7 @@ function ITTopBar({
               }
             )
           ] }),
-          navItems && navItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("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__ */ (0, import_jsx_runtime60.jsx)(
+          navItems && navItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("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__ */ (0, import_jsx_runtime60.jsx)(
             "button",
             {
               onClick: () => onNavItemClick?.(item.id),
@@ -9163,7 +9166,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"
               },
@@ -9238,9 +9241,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";
@@ -9393,7 +9396,7 @@ function ITLoader({
     return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       "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__ */ (0, import_jsx_runtime62.jsx)(
           "div",
           {
@@ -9504,7 +9507,7 @@ function ITStepper({
       /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         "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
         }
       ),
@@ -9539,7 +9542,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)
@@ -9551,7 +9554,7 @@ function ITStepper({
                   as: "span",
                   className: (0, import_clsx43.default)(
                     "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
@@ -9572,7 +9575,7 @@ function ITStepper({
         "aria-labelledby": `step-${currentStep}`,
         className: (0, import_clsx43.default)(
           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,
@@ -9594,7 +9597,7 @@ function ITStepper({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(ITText, { as: "div", className: "text-sm text-gray-500 mr-2 hidden sm:block", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(ITText, { as: "div", className: "text-sm text-secondary-500 mr-2 hidden sm:block", children: [
           "Paso ",
           currentStep + 1,
           " de ",