@axzydev/axzy_ui_system 1.2.11 → 1.2.13

package/dist/index.js

@@ -350,7 +350,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,
@@ -596,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",
@@ -607,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"
@@ -617,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",
@@ -659,7 +659,7 @@ var components = {
       borderColor: semanticColors.primary[600],
       borderWidth: "2px",
       hover: semanticColors.primary[50],
-      borderRadius: "0.375rem"
+      borderRadius: "var(--radius-md)"
     }
   },
   badge: {
@@ -717,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"
@@ -738,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: {
@@ -804,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",
@@ -1368,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);
@@ -1609,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 = {
@@ -1645,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
@@ -1787,10 +1790,10 @@ 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";
@@ -2194,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: "*" })
         ] })
       ] })
     ) : (
@@ -2217,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: "*" })
             ]
           }
         ),
@@ -2296,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: [
@@ -2316,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 }) })
   ] });
 }
 
@@ -2399,7 +2402,7 @@ function ITSelect({
         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: "*" })
         ]
       }
     ),
@@ -2440,7 +2443,7 @@ function ITSelect({
             ]
           }
         ),
-        /* @__PURE__ */ jsx12("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500", children: /* @__PURE__ */ jsx12(FaAngleDown, {}) })
+        /* @__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: inputError, children: errorMessage }) })
     ] })
@@ -2528,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,
@@ -2541,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}`
@@ -2554,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,
@@ -2572,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,
@@ -2584,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,
@@ -2600,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 })
           ] })
         ] })
       ] }),
@@ -2755,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
                 }
               )
             }
@@ -3085,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
                 }
               )
             }
@@ -3560,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;
@@ -3575,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"
           ),
@@ -4386,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;
       }
 
@@ -4410,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;
       }
@@ -4496,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;
       }
 
@@ -4520,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;
       }
@@ -4565,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; }
@@ -4601,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;
       }
 
@@ -5205,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 })
             }
@@ -5552,7 +5555,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__ */ jsx22(
         "div",
         {
@@ -5573,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, {})
               }
@@ -5943,14 +5946,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__ */ 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: [
@@ -5958,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(
@@ -6024,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",
@@ -6166,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: "*" })
         ]
       }
     ),
@@ -6194,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-[70] w-full mt-1 bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top", children: /* @__PURE__ */ jsx28("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ jsx28(
+      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 })
   ] });
 }
 
@@ -6442,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,
             {
@@ -6453,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
         ] }) });
@@ -6769,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 }),
@@ -6781,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",
@@ -6790,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-[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__ */ 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",
@@ -6810,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)) })
@@ -6821,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-[40] shadow-lg md:static md:transform-none md:shadow-none md:border-r md:border-gray-200", children: /* @__PURE__ */ jsx33("div", { className: "h-full overflow-y-auto py-4 px-3", children: /* @__PURE__ */ jsx33("ul", { className: "space-y-2 font-medium", children: sidebarItems }) }) }),
-        /* @__PURE__ */ jsx33("main", { className: "flex-1 bg-gray-100 overflow-y-auto", children })
+        (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 })
       ] })
     ] });
   }
@@ -7403,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,
       {
@@ -7431,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" })
       ]
     }
   );
@@ -7452,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,
       {
@@ -7512,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,
@@ -7655,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 }) })
   ] });
 }
 
@@ -7700,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, {
@@ -7729,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",
         {
@@ -7783,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 ",
@@ -7810,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,
           {
@@ -7843,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 ",
@@ -7937,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,
@@ -7952,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]
             ),
@@ -8100,7 +8103,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,
@@ -8120,7 +8123,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) => {
@@ -8135,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: [
@@ -8144,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"
@@ -8158,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"
                     },
@@ -8182,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
                 }
@@ -8204,7 +8207,7 @@ function ITSidebar({
             },
             children: [
               /* @__PURE__ */ jsxs39("div", { className: "px-5 py-4 flex items-center gap-3 font-semibold border-b", style: { borderColor: "var(--sidebar-border, var(--color-secondary-200))", color: "var(--sidebar-active-color, var(--color-secondary-900))" }, children: [
-                item.icon && /* @__PURE__ */ jsx51("span", { style: { color: "var(--sidebar-active-icon, #10b981)" }, className: "text-xl drop-shadow-sm", children: item.icon }),
+                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(
@@ -8217,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, var(--color-secondary-400))" } }),
+                    /* @__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" })
             ]
           }
         ),
@@ -8272,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)"
                       }
                     }
                   ),
@@ -8282,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, var(--color-secondary-400))"
+                        backgroundColor: subitem.isActive ? "var(--sidebar-active-icon, var(--color-primary-500))" : "var(--sidebar-icon-color, var(--color-secondary-400))"
                       }
                     }
                   ),
@@ -8401,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
@@ -8418,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",
@@ -8427,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"
         )
       }
@@ -8515,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"
         )
       }
     ),
@@ -8655,7 +8658,7 @@ function ITToast({
 }
 
 // src/components/dropfile/dropfile.tsx
-import { useState as useState26, useEffect as useEffect17, useRef as useRef13 } from "react";
+import { useState as useState26, useEffect as useEffect17 } from "react";
 import { useDropzone } from "react-dropzone";
 import clsx41 from "clsx";
 
@@ -8696,8 +8699,12 @@ var ITDropfile = ({
   showStatusBadge = true,
   uploadStatus: externalStatus,
   onStatusChange,
-  initialPreviewUrl
+  initialPreviewUrl,
+  view = "drop",
+  buttonLabel = "Subir archivo",
+  modalTitle
 }) => {
+  const [isModalOpen, setIsModalOpen] = useState26(false);
   const [selectedFile, setSelectedFile] = useState26(null);
   const [fileType, setFileType] = useState26(null);
   const [imagePreview, setImagePreview] = useState26(initialPreviewUrl || null);
@@ -8705,7 +8712,6 @@ var ITDropfile = ({
   const [internalUploadStatus, setInternalUploadStatus] = useState26(
     initialPreviewUrl ? "subido" /* UPLOADED */ : "pendiente" /* PENDING */
   );
-  const canvasRef = useRef13(null);
   useEffect17(() => {
     if (initialPreviewUrl && !selectedFile) {
       setImagePreview(initialPreviewUrl);
@@ -8897,113 +8903,144 @@ var ITDropfile = ({
   const handleDelete = () => {
     handleCancel();
   };
-  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__ */ jsx58(ITText, { as: "span", children: "Subir archivo " }),
-        /* @__PURE__ */ jsxs44(ITText, { as: "span", className: "text-gray-400 font-normal text-xs", children: [
-          "(",
-          getFileExtensions(),
-          ")"
-        ] })
-      ] }),
-      showStatusBadge && selectedFile && /* @__PURE__ */ jsx58(StatusBadge, { status: uploadStatus })
+  useEffect17(() => {
+    if (view === "button" && isConfirmed && uploadStatus === "subido" /* UPLOADED */) {
+      const timeout = setTimeout(() => setIsModalOpen(false), 900);
+      return () => clearTimeout(timeout);
+    }
+  }, [view, isConfirmed, uploadStatus]);
+  const headerRow = /* @__PURE__ */ jsxs44("div", { className: "flex items-center justify-between mb-2", 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-secondary-400 font-normal text-xs", children: [
+        "(",
+        getFileExtensions(),
+        ")"
+      ] })
     ] }),
-    !selectedFile && !imagePreview ? /* @__PURE__ */ jsxs44(
-      "div",
-      {
-        ...getRootProps(),
-        className: `
+    showStatusBadge && selectedFile && /* @__PURE__ */ jsx58(StatusBadge, { status: uploadStatus })
+  ] });
+  const dropZoneOrPreview = /* @__PURE__ */ jsx58(Fragment8, { children: !selectedFile && !imagePreview ? /* @__PURE__ */ jsxs44(
+    "div",
+    {
+      ...getRootProps(),
+      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(
-            "svg",
-            {
-              className: `w-6 h-6 transition-colors duration-300 ${isDragActive ? "text-primary-600" : "text-gray-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__ */ 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__ */ 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("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(
-        "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__ */ 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(
-          ITButton,
-          {
-            type: "button",
-            variant: "outlined",
-            color: "secondary",
-            size: "small",
-            onClick: handleCancel,
-            children: /* @__PURE__ */ jsx58(ITText, { children: "Cancelar" })
-          }
-        ),
-        /* @__PURE__ */ jsx58(
-          ITButton,
+      children: [
+        /* @__PURE__ */ jsx58("input", { ...getInputProps() }),
+        /* @__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",
           {
-            type: "button",
-            variant: "filled",
-            color: "primary",
-            size: "small",
-            onClick: handleConfirm,
-            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" }) })
-            ] })
+            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__ */ jsxs44(
+        ) }),
+        /* @__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-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-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-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-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-secondary-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ jsxs44(Fragment8, { children: [
+      /* @__PURE__ */ jsx58(
         ITButton,
         {
           type: "button",
           variant: "outlined",
-          color: "danger",
+          color: "secondary",
           size: "small",
-          onClick: handleDelete,
-          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, { children: "Eliminar" })
-          ]
+          onClick: handleCancel,
+          children: /* @__PURE__ */ jsx58(ITText, { children: "Cancelar" })
         }
-      ) }),
-      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(
-        "div",
+      ),
+      /* @__PURE__ */ jsx58(
+        ITButton,
         {
-          className: "bg-primary-600 h-1.5 rounded-full transition-all duration-1000 ease-out",
-          style: {
-            width: "100%",
-            animation: "pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite"
-          }
+          type: "button",
+          variant: "filled",
+          color: "primary",
+          size: "small",
+          onClick: handleConfirm,
+          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(
+      ITButton,
+      {
+        type: "button",
+        variant: "outlined",
+        color: "danger",
+        size: "small",
+        onClick: handleDelete,
+        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, { children: "Eliminar" })
+        ]
+      }
+    ) }),
+    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",
+        style: {
+          width: "100%",
+          animation: "pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+        }
+      }
+    ) }) })
+  ] }) });
+  if (view === "button") {
+    const hasFile = Boolean(selectedFile || imagePreview);
+    return /* @__PURE__ */ jsxs44("div", { className: clsx41("inline-block", containerClassName), children: [
+      /* @__PURE__ */ jsx58(
+        ITButton,
+        {
+          type: "button",
+          variant: "outlined",
+          color: hasFile ? "primary" : "secondary",
+          size: "small",
+          onClick: () => setIsModalOpen(true),
+          children: /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-2 max-w-[220px]", children: [
+            /* @__PURE__ */ jsx58("svg", { className: "w-4 h-4 flex-shrink-0", 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(ITText, { className: "truncate", children: selectedFile?.name || (hasFile ? "Archivo cargado" : buttonLabel) }),
+            showStatusBadge && hasFile && /* @__PURE__ */ jsx58(StatusBadge, { status: uploadStatus })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx58(ITDialog, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), title: modalTitle ?? buttonLabel, children: /* @__PURE__ */ jsxs44("div", { className: "w-full transition-all duration-300", children: [
+        headerRow,
+        dropZoneOrPreview
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs44("div", { className: clsx41("w-full transition-all duration-300", containerClassName), children: [
+    headerRow,
+    dropZoneOrPreview
   ] });
 };
 var dropfile_default = ITDropfile;
@@ -9014,7 +9051,7 @@ import clsx42 from "clsx";
 
 // src/components/topbar/topbar.tsx
 import { FaUserCircle as FaUserCircle2, FaBars } from "react-icons/fa";
-import { useRef as useRef14, useState as useState27 } from "react";
+import { useRef as useRef13, useState as useState27 } from "react";
 import { jsx as jsx59, jsxs as jsxs45 } from "react/jsx-runtime";
 function ITTopBar({
   logo,
@@ -9026,7 +9063,7 @@ function ITTopBar({
   onNavItemClick
 }) {
   const [isUserMenuOpen, setIsUserMenuOpen] = useState27(false);
-  const userMenuRef = useRef14(null);
+  const userMenuRef = useRef13(null);
   useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
   return /* @__PURE__ */ jsx59(
     "header",
@@ -9034,8 +9071,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: [
@@ -9064,7 +9101,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),
@@ -9091,7 +9128,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"
               },
@@ -9166,9 +9203,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";
@@ -9321,7 +9358,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",
           {
@@ -9351,7 +9388,7 @@ function ITLoader({
 
 // src/components/stepper/stepper.tsx
 import clsx43 from "clsx";
-import { useEffect as useEffect18, useRef as useRef15, useState as useState29 } from "react";
+import { useEffect as useEffect18, useRef as useRef14, useState as useState29 } from "react";
 import { FaChevronLeft as FaChevronLeft4, FaChevronRight as FaChevronRight5, FaCheck as FaCheck4 } from "react-icons/fa";
 import { jsx as jsx62, jsxs as jsxs47 } from "react/jsx-runtime";
 function ITStepper({
@@ -9369,8 +9406,8 @@ function ITStepper({
   color = "primary"
 }) {
   const [direction, setDirection] = useState29("next");
-  const contentRef = useRef15(null);
-  const progressRef = useRef15(null);
+  const contentRef = useRef14(null);
+  const progressRef = useRef14(null);
   const isThemeColor = color in theme.colors;
   const resolvedColor = isThemeColor ? theme.colors[color][500] : color;
   useEffect18(() => {
@@ -9432,7 +9469,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
         }
       ),
@@ -9467,7 +9504,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)
@@ -9479,7 +9516,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
@@ -9500,7 +9537,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,
@@ -9522,7 +9559,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 ",