@axzydev/axzy_ui_system 1.0.166 → 1.0.168

package/dist/index.js

@@ -259,17 +259,17 @@ var components = {
     }
   },
   card: {
-    backgroundColor: "#ffffff",
+    backgroundColor: "var(--card-bg, #ffffff)",
     borderRadius: "1rem",
-    borderColor: semanticColors.gray[200],
+    borderColor: `var(--card-border, ${semanticColors.gray[200]})`,
     borderWidth: "1px",
-    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, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))",
     hover: {
-      shadow: "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, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1))"
     },
     header: {
-      backgroundColor: semanticColors.gray[50],
-      borderBottom: `1px solid var(--color-secondary-200)`,
+      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"
@@ -279,23 +279,23 @@ var components = {
     }
   },
   input: {
-    backgroundColor: "#ffffff",
-    borderColor: semanticColors.gray[300],
+    backgroundColor: "var(--input-bg, #ffffff)",
+    borderColor: `var(--input-border, ${semanticColors.gray[300]})`,
     borderRadius: "0.5rem",
     padding: "0.5rem 0.75rem",
     fontSize: "0.875rem",
     focus: {
-      borderColor: semanticColors.primary[500],
-      ring: `0 0 0 3px ${semanticColors.primary[100]}`
+      borderColor: `var(--input-focus-border, ${semanticColors.primary[500]})`,
+      ring: `var(--input-focus-ring, 0 0 0 3px ${semanticColors.primary[100]})`
     },
-    placeholder: semanticColors.gray[400],
+    placeholder: `var(--input-placeholder, ${semanticColors.gray[400]})`,
     disabled: {
-      backgroundColor: semanticColors.gray[100],
-      borderColor: semanticColors.gray[200]
+      backgroundColor: `var(--input-disabled-bg, ${semanticColors.gray[100]})`,
+      borderColor: `var(--input-disabled-border, ${semanticColors.gray[200]})`
     },
     error: {
-      borderColor: semanticColors.danger[500],
-      ring: `0 0 0 3px ${semanticColors.danger[100]}`
+      borderColor: `var(--input-error-border, ${semanticColors.danger[500]})`,
+      ring: `var(--input-error-ring, 0 0 0 3px ${semanticColors.danger[100]})`
     }
   },
   table: {
@@ -343,24 +343,24 @@ var components = {
   },
   modal: {
     overlay: {
-      backgroundColor: "rgba(15, 23, 42, 0.75)"
+      backgroundColor: "var(--modal-overlay, rgba(15, 23, 42, 0.75))"
     },
     content: {
-      backgroundColor: "#ffffff",
+      backgroundColor: "var(--modal-bg, #ffffff)",
       borderRadius: "1rem",
-      shadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
+      shadow: "var(--modal-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1))"
     },
     header: {
       padding: "1.5rem 1.5rem 0.5rem 1.5rem",
-      borderBottom: `1px solid var(--color-secondary-200)`
+      borderBottom: `1px solid var(--modal-header-border, var(--color-secondary-200))`
     },
     body: {
       padding: "1.5rem"
     },
     footer: {
       padding: "1rem 1.5rem",
-      borderTop: `1px solid var(--color-secondary-200)`,
-      backgroundColor: semanticColors.gray[50]
+      borderTop: `1px solid var(--modal-footer-border, var(--color-secondary-200))`,
+      backgroundColor: `var(--modal-footer-bg, ${semanticColors.gray[50]})`
     }
   },
   calendar: {
@@ -627,11 +627,21 @@ var ITCalendar = ({
   endDate,
   minDate,
   maxDate,
-  className
+  className,
+  variant = "primary"
 }) => {
   const mode = modeProp || (onChange ? "month" : "week");
   const [currentDate, setCurrentDate] = useState2(value || /* @__PURE__ */ new Date());
   const [view, setView] = useState2("calendar");
+  const getVariantStyles = () => {
+    const v = variant || "primary";
+    return {
+      "--calendar-selected-bg": `var(--color-${v})`,
+      "--calendar-range-bg": `var(--color-${v}-50)`,
+      "--calendar-today-bg": `var(--color-${v}-100)`,
+      "--calendar-today-text": `var(--color-${v})`
+    };
+  };
   useEffect(() => {
     if (value) setCurrentDate(value);
   }, [value]);
@@ -749,7 +759,8 @@ var ITCalendar = ({
       className: cn("flex flex-col h-full rounded-lg shadow-sm overflow-hidden select-none", className),
       style: {
         backgroundColor: "var(--calendar-bg, #ffffff)",
-        border: "1px solid var(--calendar-border, #e2e8f0)"
+        border: "1px solid var(--calendar-border, #e2e8f0)",
+        ...getVariantStyles()
       },
       onMouseUp: handleMouseUp,
       onMouseLeave: () => {
@@ -757,218 +768,326 @@ var ITCalendar = ({
         setDragCurrent(null);
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-2 border-b border-gray-200", style: { backgroundColor: "var(--calendar-bg, #ffffff)" }, children: [
-          /* @__PURE__ */ jsx3(
-            "h2",
-            {
-              className: "text-sm font-bold capitalize cursor-pointer transition-colors select-none px-2 py-1 rounded",
-              style: {
-                color: "var(--calendar-header-text, #1e293b)"
-              },
-              onClick: () => setView(view === "calendar" ? "years" : "calendar"),
-              onMouseEnter: (e) => {
-                e.currentTarget.style.backgroundColor = "var(--calendar-header-hover, #f1f5f9)";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.backgroundColor = "transparent";
-              },
-              children: view === "years" ? `${years[0]} - ${years[years.length - 1]}` : format(currentDate, "MMMM yyyy", { locale: es })
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx3("button", { onClick: handlePrev, type: "button", className: "p-1.5 hover:bg-gray-100 rounded-md transition-colors text-gray-600", children: /* @__PURE__ */ jsx3(FaChevronLeft, { size: 14 }) }),
-            /* @__PURE__ */ jsx3("button", { onClick: handleToday, type: "button", className: "text-sm font-medium text-gray-700 hover:bg-gray-100 px-3 py-1.5 rounded-md transition-colors", children: "Hoy" }),
-            /* @__PURE__ */ jsx3("button", { onClick: handleNext, type: "button", className: "p-1.5 hover:bg-gray-100 rounded-md transition-colors text-gray-600", children: /* @__PURE__ */ jsx3(FaChevronRight, { size: 14 }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx3("div", { className: "flex-1 overflow-auto relative bg-white", children: view === "years" ? /* @__PURE__ */ jsx3("div", { className: "p-4 grid grid-cols-4 gap-2", children: years.map((year) => /* @__PURE__ */ jsx3(
-          "button",
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            type: "button",
-            className: cn(
-              "h-10 rounded-md text-sm font-medium transition-colors border border-transparent",
-              year === currentDate.getFullYear() ? "bg-primary-600 text-white" : "hover:bg-primary-50 text-gray-700 hover:text-primary-700"
-            ),
-            onClick: () => {
-              setCurrentDate((d) => {
-                const newDate = new Date(d);
-                newDate.setFullYear(year);
-                return newDate;
-              });
-              setView("calendar");
+            className: "flex items-center justify-between px-2 py-2 border-b",
+            style: {
+              backgroundColor: "var(--calendar-bg, #ffffff)",
+              borderBottomColor: "var(--calendar-border, #e2e8f0)"
             },
-            children: year
-          },
-          year
-        )) }) : mode === "month" ? /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-          /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-7 mb-2", children: ["Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b", "Dom"].map((day) => /* @__PURE__ */ jsx3("div", { className: "text-center text-xs font-semibold text-gray-400 uppercase py-1", children: day }, day)) }),
-          /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-7 gap-1", children: monthDays.map((day) => {
-            const isDisabled = isDateDisabled(day);
-            const isCurrentMonth = isSameMonth(day, currentDate);
-            const isSelected = selectionMode === "single" && value && isSameDay(day, value);
-            const isRangeStart = selectionMode === "range" && startDate && isSameDay(day, startDate);
-            const isRangeEnd = selectionMode === "range" && endDate && isSameDay(day, endDate);
-            const isInRange = selectionMode === "range" && startDate && endDate && isAfter(day, startDate) && isBefore(day, endDate);
-            return /* @__PURE__ */ jsxs(
+            children: [
+              /* @__PURE__ */ jsx3(
+                "h2",
+                {
+                  className: "text-sm font-bold capitalize cursor-pointer transition-colors select-none px-2 py-1 rounded",
+                  style: {
+                    color: "var(--calendar-header-text, #1e293b)"
+                  },
+                  onClick: () => setView(view === "calendar" ? "years" : "calendar"),
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = "var(--calendar-header-hover, #f1f5f9)";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                  },
+                  children: view === "years" ? `${years[0]} - ${years[years.length - 1]}` : format(currentDate, "MMMM yyyy", { locale: es })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    onClick: handlePrev,
+                    type: "button",
+                    className: "p-1.5 rounded-md transition-colors",
+                    style: { color: "var(--calendar-days-text, #334155)" },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = "var(--calendar-header-hover, #f1f5f9)";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    },
+                    children: /* @__PURE__ */ jsx3(FaChevronLeft, { size: 14 })
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    onClick: handleToday,
+                    type: "button",
+                    className: "text-sm font-medium px-3 py-1.5 rounded-md transition-colors",
+                    style: { color: "var(--calendar-days-text, #334155)" },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = "var(--calendar-header-hover, #f1f5f9)";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    },
+                    children: "Hoy"
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    onClick: handleNext,
+                    type: "button",
+                    className: "p-1.5 rounded-md transition-colors",
+                    style: { color: "var(--calendar-days-text, #334155)" },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = "var(--calendar-header-hover, #f1f5f9)";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    },
+                    children: /* @__PURE__ */ jsx3(FaChevronRight, { size: 14 })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "flex-1 overflow-auto relative",
+            style: { backgroundColor: "var(--calendar-bg, #ffffff)" },
+            children: view === "years" ? /* @__PURE__ */ jsx3("div", { className: "p-4 grid grid-cols-4 gap-2", children: years.map((year) => /* @__PURE__ */ jsx3(
               "button",
               {
                 type: "button",
-                disabled: isDisabled,
-                onClick: () => onChange && onChange(day),
                 className: cn(
-                  "h-10 w-full flex items-center justify-center rounded-md text-sm transition-colors relative",
-                  !isCurrentMonth && "opacity-40",
-                  isDisabled && "opacity-20 cursor-not-allowed"
+                  "h-10 rounded-md text-sm font-medium transition-colors border border-transparent",
+                  year === currentDate.getFullYear() ? "bg-[var(--calendar-selected-bg)] text-[var(--calendar-selected-text)]" : "hover:bg-[var(--calendar-today-bg)] hover:text-[var(--calendar-today-text)]"
                 ),
                 style: {
-                  backgroundColor: isSelected || isRangeStart || isRangeEnd ? "var(--calendar-selected-bg, #2563eb)" : isInRange ? "var(--calendar-range-bg, #eff6ff)" : isToday(day) ? "var(--calendar-today-bg, #eff6ff)" : "transparent",
-                  color: isSelected || isRangeStart || isRangeEnd ? "var(--calendar-selected-text, #ffffff)" : isToday(day) ? "var(--calendar-today-text, #2563eb)" : "var(--calendar-days-text, #334155)",
-                  fontWeight: isSelected || isRangeStart || isRangeEnd || isToday(day) ? "700" : "400"
+                  color: year === currentDate.getFullYear() ? "var(--calendar-selected-text, #ffffff)" : "var(--calendar-days-text, #334155)"
                 },
-                children: [
-                  format(day, "d"),
-                  selectionMode === "range" && isRangeStart && endDate && /* @__PURE__ */ jsx3("div", { className: "absolute right-0 top-0 bottom-0 w-2 bg-primary-50 -z-10" }),
-                  selectionMode === "range" && isRangeEnd && startDate && /* @__PURE__ */ jsx3("div", { className: "absolute left-0 top-0 bottom-0 w-2 bg-primary-50 -z-10" })
-                ]
+                onClick: () => {
+                  setCurrentDate((d) => {
+                    const newDate = new Date(d);
+                    newDate.setFullYear(year);
+                    return newDate;
+                  });
+                  setView("calendar");
+                },
+                children: year
               },
-              day.toISOString()
-            );
-          }) })
-        ] }) : (
-          /* Week/Day View (Scheduler) */
-          /* @__PURE__ */ jsxs("div", { className: cn("flex h-full", mode === "week" ? "min-w-[800px]" : "w-full"), children: [
-            /* @__PURE__ */ jsx3("div", { className: "flex-none w-16 border-r border-gray-100 bg-gray-50 pt-10 select-none", children: TIME_SLOTS.map((hour) => hour < END_HOUR && /* @__PURE__ */ jsx3("div", { className: "h-20 relative text-right pr-2", children: /* @__PURE__ */ jsx3("span", { className: "text-xs text-gray-400 -mt-2 inline-block transform -translate-y-1/2", children: format((/* @__PURE__ */ new Date()).setHours(hour, 0), "HH:mm") }) }, hour)) }),
-            /* @__PURE__ */ jsx3("div", { className: "flex flex-1", children: viewDays.map((day) => /* @__PURE__ */ jsxs("div", { className: "flex-1 border-r border-gray-100 min-w-[120px] relative", children: [
-              /* @__PURE__ */ jsxs("div", { className: cn(
-                "h-10 border-b border-gray-200 flex flex-col items-center justify-center sticky top-0 bg-white z-10",
-                isToday(day) && "bg-primary-50"
-              ), children: [
-                /* @__PURE__ */ jsx3("span", { className: cn("text-xs font-semibold uppercase", isToday(day) ? "text-primary-600" : "text-gray-500"), children: format(day, "EEE", { locale: es }) }),
-                /* @__PURE__ */ jsx3("span", { className: cn(
-                  "text-sm font-bold w-6 h-6 flex items-center justify-center rounded-full mt-0.5",
-                  isToday(day) ? "bg-primary-600 text-white" : "text-gray-800"
-                ), children: format(day, "d") })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                TIME_SLOTS.map((hour) => hour < END_HOUR && /* @__PURE__ */ jsxs(
+              year
+            )) }) : mode === "month" ? /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+              /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-7 mb-2", children: ["Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b", "Dom"].map((day) => /* @__PURE__ */ jsx3("div", { className: "text-center text-xs font-semibold text-gray-400 uppercase py-1", children: day }, day)) }),
+              /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-7 gap-1", children: monthDays.map((day) => {
+                const isDisabled = isDateDisabled(day);
+                const isCurrentMonth = isSameMonth(day, currentDate);
+                const isSelected = selectionMode === "single" && value && isSameDay(day, value);
+                const isRangeStart = selectionMode === "range" && startDate && isSameDay(day, startDate);
+                const isRangeEnd = selectionMode === "range" && endDate && isSameDay(day, endDate);
+                const isInRange = selectionMode === "range" && startDate && endDate && isAfter(day, startDate) && isBefore(day, endDate);
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: isDisabled,
+                    onClick: () => onChange && onChange(day),
+                    className: cn(
+                      "h-10 w-full flex items-center justify-center rounded-md text-sm transition-colors relative",
+                      !isCurrentMonth && "opacity-40",
+                      isDisabled && "opacity-20 cursor-not-allowed"
+                    ),
+                    style: {
+                      backgroundColor: isSelected || isRangeStart || isRangeEnd ? "var(--calendar-selected-bg, #2563eb)" : isInRange ? "var(--calendar-range-bg, #eff6ff)" : isToday(day) ? "var(--calendar-today-bg, #eff6ff)" : "transparent",
+                      color: isSelected || isRangeStart || isRangeEnd ? "var(--calendar-selected-text, #ffffff)" : isToday(day) ? "var(--calendar-today-text, #2563eb)" : "var(--calendar-days-text, #334155)",
+                      fontWeight: isSelected || isRangeStart || isRangeEnd || isToday(day) ? "700" : "400"
+                    },
+                    children: [
+                      format(day, "d"),
+                      selectionMode === "range" && isRangeStart && endDate && /* @__PURE__ */ jsx3("div", { className: "absolute right-0 top-0 bottom-0 w-2 bg-[var(--calendar-range-bg)] -z-10" }),
+                      selectionMode === "range" && isRangeEnd && startDate && /* @__PURE__ */ jsx3("div", { className: "absolute left-0 top-0 bottom-0 w-2 bg-[var(--calendar-range-bg)] -z-10" })
+                    ]
+                  },
+                  day.toISOString()
+                );
+              }) })
+            ] }) : (
+              /* Week/Day View (Scheduler) */
+              /* @__PURE__ */ jsxs("div", { className: cn("flex h-full", mode === "week" ? "min-w-[800px]" : "w-full"), children: [
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    className: "flex-none w-16 pt-10 select-none",
+                    style: {
+                      backgroundColor: "var(--calendar-header-hover, #f1f5f9)",
+                      borderRight: "1px solid var(--calendar-border, #e2e8f0)"
+                    },
+                    children: TIME_SLOTS.map((hour) => hour < END_HOUR && /* @__PURE__ */ jsx3("div", { className: "h-20 relative text-right pr-2", children: /* @__PURE__ */ jsx3("span", { className: "text-xs text-slate-400 dark:text-slate-500 -mt-2 inline-block transform -translate-y-1/2", children: format((/* @__PURE__ */ new Date()).setHours(hour, 0), "HH:mm") }) }, hour))
+                  }
+                ),
+                /* @__PURE__ */ jsx3("div", { className: "flex flex-1", children: viewDays.map((day) => /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    className: "h-20 border-b border-gray-100 border-dashed relative group",
+                    className: "flex-1 min-w-[120px] relative",
+                    style: { borderRight: "1px solid var(--calendar-border, #e2e8f0)" },
                     children: [
-                      /* @__PURE__ */ jsx3(
+                      /* @__PURE__ */ jsxs(
                         "div",
                         {
-                          className: "absolute inset-x-0 top-0 h-10 border-b border-transparent hover:border-primary-100 hover:bg-primary-50/30 transition-colors cursor-pointer z-0",
-                          onMouseDown: (e) => {
-                            const d = new Date(day);
-                            d.setHours(hour, 0, 0, 0);
-                            handleMouseDown(d, e);
-                          },
-                          onMouseEnter: () => {
-                            const d = new Date(day);
-                            d.setHours(hour, 0, 0, 0);
-                            handleMouseEnter(d);
+                          className: "h-10 flex flex-col items-center justify-center sticky top-0 z-10",
+                          style: {
+                            backgroundColor: isToday(day) ? "var(--calendar-today-bg, #eff6ff)" : "var(--calendar-bg, #ffffff)",
+                            borderBottom: "1px solid var(--calendar-border, #e2e8f0)"
                           },
-                          onClick: () => {
-                            if (!isDraggingRef.current) {
-                              const d = new Date(day);
-                              d.setHours(hour, 0, 0, 0);
-                              onSlotClick && onSlotClick(d);
-                            }
-                          }
+                          children: [
+                            /* @__PURE__ */ jsx3(
+                              "span",
+                              {
+                                className: "text-xs font-semibold uppercase",
+                                style: {
+                                  color: isToday(day) ? "var(--calendar-today-text, #2563eb)" : "var(--calendar-days-text, #334155)",
+                                  opacity: isToday(day) ? 1 : 0.6
+                                },
+                                children: format(day, "EEE", { locale: es })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx3(
+                              "span",
+                              {
+                                className: "text-sm font-bold w-6 h-6 flex items-center justify-center rounded-full mt-0.5",
+                                style: {
+                                  color: isToday(day) ? "var(--calendar-selected-text, #ffffff)" : "var(--calendar-days-text, #334155)",
+                                  backgroundColor: isToday(day) ? "var(--calendar-selected-bg, #2563eb)" : "transparent"
+                                },
+                                children: format(day, "d")
+                              }
+                            )
+                          ]
                         }
                       ),
-                      /* @__PURE__ */ jsx3(
+                      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                        TIME_SLOTS.map((hour) => hour < END_HOUR && /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            className: "h-20 relative group",
+                            style: { borderBottom: "1px dashed var(--calendar-border, #e2e8f0)" },
+                            children: [
+                              /* @__PURE__ */ jsx3(
+                                "div",
+                                {
+                                  className: "absolute inset-x-0 top-0 h-10 border-b border-transparent hover:border-[var(--calendar-today-bg)] hover:bg-[var(--calendar-today-bg)] transition-colors cursor-pointer z-0",
+                                  onMouseDown: (e) => {
+                                    const d = new Date(day);
+                                    d.setHours(hour, 0, 0, 0);
+                                    handleMouseDown(d, e);
+                                  },
+                                  onMouseEnter: () => {
+                                    const d = new Date(day);
+                                    d.setHours(hour, 0, 0, 0);
+                                    handleMouseEnter(d);
+                                  },
+                                  onClick: () => {
+                                    if (!isDraggingRef.current) {
+                                      const d = new Date(day);
+                                      d.setHours(hour, 0, 0, 0);
+                                      onSlotClick && onSlotClick(d);
+                                    }
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx3(
+                                "div",
+                                {
+                                  className: "absolute inset-x-0 bottom-0 h-10 hover:border-[var(--calendar-today-bg)] hover:bg-[var(--calendar-today-bg)] transition-colors cursor-pointer z-0",
+                                  onMouseDown: (e) => {
+                                    const d = new Date(day);
+                                    d.setHours(hour, 30, 0, 0);
+                                    handleMouseDown(d, e);
+                                  },
+                                  onMouseEnter: () => {
+                                    const d = new Date(day);
+                                    d.setHours(hour, 30, 0, 0);
+                                    handleMouseEnter(d);
+                                  },
+                                  onClick: () => {
+                                    if (!isDraggingRef.current) {
+                                      const d = new Date(day);
+                                      d.setHours(hour, 30, 0, 0);
+                                      onSlotClick && onSlotClick(d);
+                                    }
+                                  }
+                                }
+                              )
+                            ]
+                          },
+                          hour
+                        )),
+                        dragStart && dragCurrent && isSameDay(dragStart, day) && (() => {
+                          let start = dragStart;
+                          let end = dragCurrent;
+                          if (isBefore(end, start)) [start, end] = [end, start];
+                          const finalEnd = addMinutes(end, 30);
+                          const startMinutes = start.getHours() * 60 + start.getMinutes();
+                          const dayStartMinutes = START_HOUR * 60;
+                          const duration = differenceInMinutes(finalEnd, start);
+                          const top = (startMinutes - dayStartMinutes) / 60 * 80;
+                          const height = duration / 60 * 80;
+                          return /* @__PURE__ */ jsx3(
+                            "div",
+                            {
+                              className: "absolute left-1 right-1 bg-[var(--calendar-selected-bg)]/30 border border-[var(--calendar-selected-bg)] rounded z-10 pointer-events-none",
+                              style: { top: `${top}px`, height: `${height}px` }
+                            }
+                          );
+                        })(),
+                        weekEvents.filter((event) => isSameDay(typeof event.start === "string" ? parseISO(event.start) : event.start, day)).map((event) => {
+                          const style = getEventStyle(event);
+                          return /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: cn(
+                                "absolute left-1 right-1 rounded px-2 py-1 text-xs cursor-pointer hover:brightness-95 transition-all shadow-sm overflow-hidden z-20 border-l-4",
+                                !event.color && "bg-[var(--calendar-today-bg)] text-[var(--calendar-today-text)] border-[var(--calendar-selected-bg)]"
+                              ),
+                              style: {
+                                top: style.top,
+                                height: style.height,
+                                backgroundColor: event.color ? `${event.color}20` : void 0,
+                                borderColor: event.color,
+                                color: event.color ? event.color : void 0
+                              },
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                onEventClick && onEventClick(event);
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx3("div", { className: "font-semibold truncate", children: event.title }),
+                                /* @__PURE__ */ jsxs("div", { className: "opacity-80 truncate", children: [
+                                  format(typeof event.start === "string" ? parseISO(event.start) : event.start, "HH:mm"),
+                                  " -",
+                                  format(typeof event.end === "string" ? parseISO(event.end) : event.end, "HH:mm")
+                                ] })
+                              ]
+                            },
+                            event.id
+                          );
+                        })
+                      ] }),
+                      isToday(day) && /* @__PURE__ */ jsx3(
                         "div",
                         {
-                          className: "absolute inset-x-0 bottom-0 h-10 hover:border-primary-100 hover:bg-primary-50/30 transition-colors cursor-pointer z-0",
-                          onMouseDown: (e) => {
-                            const d = new Date(day);
-                            d.setHours(hour, 30, 0, 0);
-                            handleMouseDown(d, e);
-                          },
-                          onMouseEnter: () => {
-                            const d = new Date(day);
-                            d.setHours(hour, 30, 0, 0);
-                            handleMouseEnter(d);
+                          className: "absolute left-0 right-0 border-t-2 border-danger-500 z-30 pointer-events-none",
+                          style: {
+                            top: `${((/* @__PURE__ */ new Date()).getHours() * 60 + (/* @__PURE__ */ new Date()).getMinutes() - START_HOUR * 60) / 60 * 80}px`
                           },
-                          onClick: () => {
-                            if (!isDraggingRef.current) {
-                              const d = new Date(day);
-                              d.setHours(hour, 30, 0, 0);
-                              onSlotClick && onSlotClick(d);
-                            }
-                          }
+                          children: /* @__PURE__ */ jsx3("div", { className: "absolute -left-1.5 -top-1.5 w-3 h-3 bg-danger-500 rounded-full" })
                         }
                       )
                     ]
                   },
-                  hour
-                )),
-                dragStart && dragCurrent && isSameDay(dragStart, day) && (() => {
-                  let start = dragStart;
-                  let end = dragCurrent;
-                  if (isBefore(end, start)) [start, end] = [end, start];
-                  const finalEnd = addMinutes(end, 30);
-                  const startMinutes = start.getHours() * 60 + start.getMinutes();
-                  const dayStartMinutes = START_HOUR * 60;
-                  const duration = differenceInMinutes(finalEnd, start);
-                  const top = (startMinutes - dayStartMinutes) / 60 * 80;
-                  const height = duration / 60 * 80;
-                  return /* @__PURE__ */ jsx3(
-                    "div",
-                    {
-                      className: "absolute left-1 right-1 bg-primary-500/30 border border-primary-500 rounded z-10 pointer-events-none",
-                      style: { top: `${top}px`, height: `${height}px` }
-                    }
-                  );
-                })(),
-                weekEvents.filter((event) => isSameDay(typeof event.start === "string" ? parseISO(event.start) : event.start, day)).map((event) => {
-                  const style = getEventStyle(event);
-                  return /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: cn(
-                        "absolute left-1 right-1 rounded px-2 py-1 text-xs cursor-pointer hover:brightness-95 transition-all shadow-sm overflow-hidden z-20 border-l-4",
-                        !event.color && "bg-primary-100 text-primary-700 border-primary-500"
-                      ),
-                      style: {
-                        top: style.top,
-                        height: style.height,
-                        backgroundColor: event.color ? `${event.color}20` : void 0,
-                        borderColor: event.color,
-                        color: event.color ? event.color : void 0
-                      },
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onEventClick && onEventClick(event);
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx3("div", { className: "font-semibold truncate", children: event.title }),
-                        /* @__PURE__ */ jsxs("div", { className: "opacity-80 truncate", children: [
-                          format(typeof event.start === "string" ? parseISO(event.start) : event.start, "HH:mm"),
-                          " -",
-                          format(typeof event.end === "string" ? parseISO(event.end) : event.end, "HH:mm")
-                        ] })
-                      ]
-                    },
-                    event.id
-                  );
-                })
-              ] }),
-              isToday(day) && /* @__PURE__ */ jsx3(
-                "div",
-                {
-                  className: "absolute left-0 right-0 border-t-2 border-danger-500 z-30 pointer-events-none",
-                  style: {
-                    top: `${((/* @__PURE__ */ new Date()).getHours() * 60 + (/* @__PURE__ */ new Date()).getMinutes() - START_HOUR * 60) / 60 * 80}px`
-                  },
-                  children: /* @__PURE__ */ jsx3("div", { className: "absolute -left-1.5 -top-1.5 w-3 h-3 bg-danger-500 rounded-full" })
-                }
-              )
-            ] }, day.toISOString())) })
-          ] })
-        ) })
+                  day.toISOString()
+                )) })
+              ] })
+            )
+          }
+        )
       ]
     }
   );
@@ -1105,6 +1224,7 @@ function ITInput({
   const [isFocused, setIsFocused] = useState4(false);
   const [hasSelectedAll, setHasSelectedAll] = useState4(false);
   const [showPassword, setShowPassword] = useState4(false);
+  const [localTouched, setLocalTouched] = useState4(false);
   const inputRef = useRef(null);
   const inputTheme = theme.input || {};
   const getStyle = () => {
@@ -1117,8 +1237,8 @@ function ITInput({
       borderWidth: "1px",
       borderStyle: "solid",
       transition: "all 0.2s",
-      color: theme.colors.gray[900]
-      // Default text color
+      color: "var(--input-text-color, var(--color-secondary-900))"
+      // Theme-aware text color
     };
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
@@ -1141,7 +1261,11 @@ function ITInput({
     }
     return style;
   };
-  const hasError = touched && error;
+  const isTouched = touched !== void 0 ? touched : localTouched;
+  const isEmpty = isCheckboxOrRadio ? !checked : value === void 0 || value === null || String(value).trim() === "";
+  const effectiveError = error !== void 0 && error !== false ? error === true ? "Este campo es requerido" : error : required && isEmpty ? "Este campo es requerido" : void 0;
+  const hasError = isTouched && !!effectiveError;
+  const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
   const handleClick = (e) => {
     if (onClick) {
       onClick();
@@ -1311,6 +1435,7 @@ function ITInput({
     e.currentTarget.select();
   };
   const handleBlur = (e) => {
+    setLocalTouched(true);
     setHasSelectedAll(false);
     setIsFocused(false);
     if (readOnly) {
@@ -1394,7 +1519,14 @@ function ITInput({
             id: name,
             type,
             checked,
-            onChange: handleTextChange,
+            onChange: (e) => {
+              setLocalTouched(true);
+              handleTextChange(e);
+            },
+            onBlur: (e) => {
+              setLocalTouched(true);
+              onBlur?.(e);
+            },
             disabled,
             required,
             className: clsx5(
@@ -1403,11 +1535,11 @@ function ITInput({
               type === "checkbox" && "form-checkbox rounded",
               className,
               { "opacity-50 cursor-not-allowed": disabled },
-              { "border-red-500": touched && error }
+              { "border-red-500": hasError }
             )
           }
         ),
-        label && /* @__PURE__ */ jsxs3("label", { htmlFor: name, className: "text-sm text-gray-700 select-none", children: [
+        label && /* @__PURE__ */ jsxs3("label", { htmlFor: name, className: "text-sm text-gray-700 dark:text-slate-300 select-none", children: [
           label,
           " ",
           required && /* @__PURE__ */ jsx5("span", { className: "text-red-500", children: "*" })
@@ -1421,8 +1553,8 @@ function ITInput({
           {
             htmlFor: name,
             className: clsx5(
-              "text-sm font-medium text-gray-700",
-              { "text-red-500": touched && error },
+              "text-sm font-medium text-gray-700 dark:text-slate-300",
+              { "text-red-500": hasError },
               labelClassName
             ),
             children: [
@@ -1441,7 +1573,11 @@ function ITInput({
               placeholder,
               value: value ?? "",
               onChange: readOnly ? void 0 : onChange,
-              onBlur: readOnly ? void 0 : onBlur,
+              onBlur: (e) => {
+                if (readOnly) return;
+                setLocalTouched(true);
+                onBlur?.(e);
+              },
               readOnly,
               maxLength,
               minLength,
@@ -1473,6 +1609,7 @@ function ITInput({
                 onFocus: isNumberType ? handleFocus : () => setIsFocused(true),
                 onBlur: isNumberType ? handleBlur : (e) => {
                   setIsFocused(false);
+                  setLocalTouched(true);
                   onBlur?.(e);
                 },
                 onKeyDown: isNumberType ? handleKeyDown : void 0,
@@ -1519,12 +1656,12 @@ function ITInput({
         ] })
       ] })
     ),
-    touched && error && !isCheckboxOrRadio && /* @__PURE__ */ jsx5("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ jsx5("p", { className: "text-red-500 text-xs", children: error }) }),
+    hasError && !isCheckboxOrRadio && /* @__PURE__ */ jsx5("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ jsx5("p", { className: "text-red-500 text-xs", children: errorMessage }) }),
     showHintLength && (minLength || maxLength) && !isCheckboxOrRadio && /* @__PURE__ */ jsx5("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ jsxs3("p", { className: "text-gray-500", children: [
       currentLength,
       maxLength && `/${maxLength}`
     ] }) }),
-    isCheckboxOrRadio && touched && error && /* @__PURE__ */ jsx5("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ jsx5("p", { className: "text-red-500", children: error }) })
+    isCheckboxOrRadio && hasError && /* @__PURE__ */ jsx5("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ jsx5("p", { className: "text-red-500", children: errorMessage }) })
   ] });
 }
 
@@ -1535,8 +1672,8 @@ import { FaChevronLeft as FaChevronLeft2, FaChevronRight as FaChevronRight2 } fr
 
 // src/components/select/select.tsx
 import clsx6 from "clsx";
-import { FaAngleDown } from "react-icons/fa";
 import { useState as useState5 } from "react";
+import { FaAngleDown } from "react-icons/fa";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function ITSelect({
   name,
@@ -1556,7 +1693,13 @@ function ITSelect({
   readOnly = false
 }) {
   const [isFocused, setIsFocused] = useState5(false);
+  const [localTouched, setLocalTouched] = useState5(false);
   const inputTheme = theme.input || {};
+  const isTouched = touched !== void 0 ? touched : localTouched;
+  const isEmpty = value === void 0 || value === null || String(value).trim() === "";
+  const effectiveError = error !== void 0 && error !== false ? error === true ? "Este campo es requerido" : error : required && isEmpty ? "Este campo es requerido" : void 0;
+  const hasError = isTouched && !!effectiveError;
+  const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
   const getStyle = () => {
     const style = {
       backgroundColor: inputTheme.backgroundColor,
@@ -1567,7 +1710,7 @@ function ITSelect({
       borderWidth: "1px",
       borderStyle: "solid",
       transition: "all 0.2s",
-      color: theme.colors.gray[900],
+      color: "var(--input-text-color, var(--color-secondary-900))",
       appearance: "none"
       // Important for custom styling
     };
@@ -1576,7 +1719,7 @@ function ITSelect({
       style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
       style.opacity = 0.7;
     }
-    if (touched && error) {
+    if (hasError) {
       style.borderColor = inputTheme.error?.borderColor || "red";
       if (isFocused) {
         style.boxShadow = inputTheme.error?.ring;
@@ -1594,8 +1737,8 @@ function ITSelect({
       {
         htmlFor: name,
         className: clsx6(
-          "text-sm font-medium text-gray-700 pt-0",
-          { "text-red-500": touched && error }
+          "text-sm font-medium text-gray-700 dark:text-slate-300 pt-0",
+          { "text-red-500": hasError }
         ),
         children: [
           label,
@@ -1614,6 +1757,7 @@ function ITSelect({
             onChange: readOnly ? void 0 : onChange,
             onBlur: (e) => {
               setIsFocused(false);
+              setLocalTouched(true);
               readOnly ? void 0 : onBlur?.(e);
             },
             onFocus: () => setIsFocused(true),
@@ -1641,7 +1785,7 @@ function ITSelect({
         ),
         /* @__PURE__ */ jsx6("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500", children: /* @__PURE__ */ jsx6(FaAngleDown, {}) })
       ] }),
-      touched && error && /* @__PURE__ */ jsx6("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ jsx6("p", { className: "text-red-500 text-xs", children: error }) })
+      hasError && /* @__PURE__ */ jsx6("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ jsx6("p", { className: "text-red-500 text-xs", children: errorMessage }) })
     ] })
   ] }) });
 }
@@ -2648,6 +2792,7 @@ function ITDatePicker({
             onChange: handleDateChange,
             minDate,
             maxDate,
+            variant,
             className: "h-auto border-none shadow-none w-full"
           }
         )
@@ -2909,11 +3054,11 @@ function ITTimePicker({
   const handleBlurInput = () => {
     if (!validateTime(inputValue)) {
       setIsValidTime(false);
-      onBlur({ target: { name, value } });
+      onBlur?.({ target: { name, value } });
       return;
     }
     setIsValidTime(true);
-    onBlur({ target: { name, value: inputValue } });
+    onBlur?.({ target: { name, value: inputValue } });
   };
   const handleHourSelect = (h) => {
     const min = currentMinute || "00";
@@ -3752,6 +3897,7 @@ function ITSearchSelect({
   const [isOpen, setIsOpen] = useState15(false);
   const [searchTerm, setSearchTerm] = useState15("");
   const [isFocused, setIsFocused] = useState15(false);
+  const [localTouched, setLocalTouched] = useState15(false);
   const containerRef = useRef7(null);
   const timeoutRef = useRef7(null);
   const selectedOption = useMemo4(() => {
@@ -3804,10 +3950,16 @@ function ITSearchSelect({
   const handleInputBlur = (e) => {
     setTimeout(() => {
       setIsFocused(false);
+      setLocalTouched(true);
       onBlur?.(e);
     }, 200);
   };
   const inputTheme = theme.input || {};
+  const isTouched = touched !== void 0 ? touched : localTouched;
+  const isEmpty = value === void 0 || value === null || String(value).trim() === "";
+  const effectiveError = error !== void 0 && error !== false ? error === true ? "Este campo es requerido" : error : required && isEmpty ? "Este campo es requerido" : void 0;
+  const hasError = isTouched && !!effectiveError;
+  const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
   const getInputStyle = () => {
     const style = {
       backgroundColor: inputTheme.backgroundColor || "#ffffff",
@@ -3818,7 +3970,7 @@ function ITSearchSelect({
       borderWidth: "1px",
       borderStyle: "solid",
       transition: "all 0.2s",
-      color: theme.colors.gray[900],
+      color: "var(--input-text-color, var(--color-secondary-900))",
       width: "100%"
     };
     if (disabled) {
@@ -3827,7 +3979,7 @@ function ITSearchSelect({
       style.opacity = 0.7;
       style.cursor = "not-allowed";
     }
-    if (touched && error) {
+    if (hasError) {
       style.borderColor = inputTheme.error?.borderColor || "red";
       if (isFocused) {
         style.boxShadow = inputTheme.error?.ring;
@@ -3838,12 +3990,12 @@ function ITSearchSelect({
     }
     return style;
   };
-  return /* @__PURE__ */ jsxs14("div", { className: clsx14("w-full flex flex-col gap-1.5", className), ref: containerRef, children: [
+  return /* @__PURE__ */ jsxs14("div", { className: clsx14("w-full flex flex-col gap-1.5", className, isOpen && "relative z-30"), ref: containerRef, children: [
     label && /* @__PURE__ */ jsxs14(
       "label",
       {
-        className: clsx14("text-sm font-medium text-gray-700", {
-          "text-red-500": touched && error
+        className: clsx14("text-sm font-medium text-gray-700 dark:text-slate-300", {
+          "text-red-500": hasError
         }),
         children: [
           label,
@@ -3875,20 +4027,20 @@ function ITSearchSelect({
           !isLoading && /* @__PURE__ */ jsx19(FaSearch, { size: 14, className: clsx14({ "text-primary-500": isFocused }) })
         ] })
       ] }),
-      isOpen && /* @__PURE__ */ jsx19("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top", children: /* @__PURE__ */ jsx19("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ jsx19(
+      isOpen && /* @__PURE__ */ jsx19("div", { className: "absolute z-50 w-full mt-1 bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top", children: /* @__PURE__ */ jsx19("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ jsx19(
         "div",
         {
           onClick: () => handleSelect(option),
           className: clsx14(
             "px-4 py-2 text-sm cursor-pointer transition-colors",
-            value === option[valueField] ? "bg-primary-50 text-primary-700 font-medium" : "hover:bg-gray-50 text-gray-700"
+            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"
           ),
           children: option[labelField]
         },
         option[valueField]
       )) : /* @__PURE__ */ jsx19("div", { className: "px-4 py-6 text-sm text-center text-gray-500 italic", children: isLoading ? "Cargando..." : noResultsMessage }) }) })
     ] }),
-    touched && error && /* @__PURE__ */ jsx19("p", { className: "text-red-500 text-xs mt-1", children: error })
+    hasError && /* @__PURE__ */ jsx19("p", { className: "text-red-500 text-xs mt-1", children: errorMessage })
   ] });
 }
 
@@ -3988,6 +4140,90 @@ function ITText({ children, className = "" }) {
   return /* @__PURE__ */ jsx21("p", { className: `${className} text-gray-900 `, children });
 }
 
+// src/components/tabs/tabs.tsx
+import { useState as useState17 } from "react";
+import { clsx as clsx16 } from "clsx";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var ITTabs = ({
+  items,
+  defaultActiveId,
+  onChange,
+  variant = "line",
+  className = "",
+  containerClassName = ""
+}) => {
+  const [activeId, setActiveId] = useState17(defaultActiveId || items[0]?.id);
+  const handleTabClick = (id, disabled) => {
+    if (disabled) return;
+    setActiveId(id);
+    if (onChange) onChange(id);
+  };
+  const activeContent = items.find((item) => item.id === activeId)?.content;
+  return /* @__PURE__ */ jsxs15("div", { className: clsx16("w-full", containerClassName), children: [
+    /* @__PURE__ */ jsx22("div", { className: clsx16(
+      "flex border-gray-200 mb-4",
+      variant === "line" ? "border-b" : "gap-2 p-1 bg-gray-100 rounded-lg w-fit",
+      className
+    ), children: items.map((item) => {
+      const isActive = item.id === activeId;
+      return /* @__PURE__ */ jsxs15(
+        "button",
+        {
+          onClick: () => handleTabClick(item.id, item.disabled),
+          disabled: item.disabled,
+          className: clsx16(
+            "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all duration-200 outline-none",
+            // 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"
+            ],
+            // PILL VARIANT
+            variant === "pill" && [
+              "rounded-md",
+              isActive ? "bg-white text-primary-600 shadow-sm" : "text-gray-500 hover:text-gray-700"
+            ],
+            item.disabled && "opacity-50 cursor-not-allowed"
+          ),
+          children: [
+            item.icon && /* @__PURE__ */ jsx22("span", { className: "w-4 h-4", children: item.icon }),
+            item.label
+          ]
+        },
+        item.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx22("div", { className: "tab-content animate-fadeIn", children: activeContent })
+  ] });
+};
+var tabs_default = ITTabs;
+
+// src/components/triple-filter/tripleFilter.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+var ITTripleFilter = ({
+  value,
+  onChange,
+  options,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx23(
+    "div",
+    {
+      className: `flex bg-slate-100 p-1 rounded-xl gap-1 w-fit ${className}`,
+      children: options.map((option) => /* @__PURE__ */ jsx23(
+        "button",
+        {
+          onClick: () => onChange(option.value),
+          className: `px-4 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition-all duration-200 whitespace-nowrap ${value === option.value ? "bg-white text-emerald-600 shadow-sm" : "text-slate-400 hover:text-slate-600"}`,
+          children: option.label
+        },
+        String(option.value)
+      ))
+    }
+  );
+};
+var tripleFilter_default = ITTripleFilter;
+
 // src/types/toast.types.ts
 var positionStyles = {
   "top-right": "top-4 right-4",
@@ -3999,10 +4235,10 @@ var positionStyles = {
 };
 
 // src/components/toast/toast.tsx
-import clsx16 from "clsx";
-import { useEffect as useEffect14, useState as useState17 } from "react";
+import clsx17 from "clsx";
+import { useEffect as useEffect14, useState as useState18 } from "react";
 import { FaTimesCircle, FaCheckCircle, FaExclamationTriangle, FaInfoCircle, FaTimes as FaTimes5 } from "react-icons/fa";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 function ITToast({
   message,
   type = "info",
@@ -4010,7 +4246,7 @@ function ITToast({
   position = "top-right",
   onClose
 }) {
-  const [isVisible, setIsVisible] = useState17(true);
+  const [isVisible, setIsVisible] = useState18(true);
   useEffect14(() => {
     const timer = setTimeout(() => {
       setIsVisible(false);
@@ -4031,21 +4267,21 @@ function ITToast({
   const TypeIcon = () => {
     switch (type) {
       case "success":
-        return /* @__PURE__ */ jsx22(FaCheckCircle, { className: "w-5 h-5 flex-shrink-0" });
+        return /* @__PURE__ */ jsx24(FaCheckCircle, { className: "w-5 h-5 flex-shrink-0" });
       case "error":
       case "danger":
-        return /* @__PURE__ */ jsx22(FaTimesCircle, { className: "w-5 h-5 flex-shrink-0" });
+        return /* @__PURE__ */ jsx24(FaTimesCircle, { className: "w-5 h-5 flex-shrink-0" });
       case "warning":
-        return /* @__PURE__ */ jsx22(FaExclamationTriangle, { className: "w-5 h-5 flex-shrink-0" });
+        return /* @__PURE__ */ jsx24(FaExclamationTriangle, { className: "w-5 h-5 flex-shrink-0" });
       case "info":
       default:
-        return /* @__PURE__ */ jsx22(FaInfoCircle, { className: "w-5 h-5 flex-shrink-0" });
+        return /* @__PURE__ */ jsx24(FaInfoCircle, { className: "w-5 h-5 flex-shrink-0" });
     }
   };
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
-      className: clsx16(
+      className: clsx17(
         "fixed z-50 p-4 rounded-xl shadow-xl flex items-center justify-between gap-4 transition-all duration-300 text-white min-w-[300px]",
         positionStyles[position],
         {
@@ -4058,17 +4294,17 @@ function ITToast({
       style: { backgroundColor },
       role: "alert",
       children: [
-        /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx22(TypeIcon, {}),
-          /* @__PURE__ */ jsx22("span", { className: "font-medium text-sm sm:text-base leading-snug", children: message })
+        /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx24(TypeIcon, {}),
+          /* @__PURE__ */ jsx24("span", { className: "font-medium text-sm sm:text-base leading-snug", children: message })
         ] }),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx24(
           "button",
           {
             onClick: handleClose,
             className: "p-1.5 rounded-full hover:bg-black/15 transition-colors focus:outline-none focus:ring-2 focus:ring-white/50",
             "aria-label": "Close notification",
-            children: /* @__PURE__ */ jsx22(FaTimes5, { className: "w-4 h-4" })
+            children: /* @__PURE__ */ jsx24(FaTimes5, { className: "w-4 h-4" })
           }
         )
       ]
@@ -4077,10 +4313,27 @@ function ITToast({
 }
 
 // src/components/dropfile/dropfile.tsx
-import { useState as useState18, useEffect as useEffect15, useRef as useRef8 } from "react";
+import { useState as useState19, useEffect as useEffect15, useRef as useRef8 } from "react";
 import { useDropzone } from "react-dropzone";
-import clsx17 from "clsx";
-import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import clsx18 from "clsx";
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+var FileTypeEnum = /* @__PURE__ */ ((FileTypeEnum2) => {
+  FileTypeEnum2["PDF"] = "application/pdf";
+  FileTypeEnum2["XLS"] = "application/vnd.ms-excel";
+  FileTypeEnum2["XLSX"] = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+  FileTypeEnum2["CSV"] = "text/csv";
+  FileTypeEnum2["PNG"] = "image/png";
+  FileTypeEnum2["JPG"] = "image/jpg";
+  FileTypeEnum2["JPEG"] = "image/jpeg";
+  return FileTypeEnum2;
+})(FileTypeEnum || {});
+var UploadStatus = /* @__PURE__ */ ((UploadStatus2) => {
+  UploadStatus2["PENDING"] = "pendiente";
+  UploadStatus2["UPLOADING"] = "subiendo";
+  UploadStatus2["UPLOADED"] = "subido";
+  UploadStatus2["ERROR"] = "error";
+  return UploadStatus2;
+})(UploadStatus || {});
 var ITDropfile = ({
   onFileSelect,
   onCancel,
@@ -4093,11 +4346,11 @@ var ITDropfile = ({
   onStatusChange,
   initialPreviewUrl
 }) => {
-  const [selectedFile, setSelectedFile] = useState18(null);
-  const [fileType, setFileType] = useState18(null);
-  const [imagePreview, setImagePreview] = useState18(initialPreviewUrl || null);
-  const [isConfirmed, setIsConfirmed] = useState18(false);
-  const [internalUploadStatus, setInternalUploadStatus] = useState18(
+  const [selectedFile, setSelectedFile] = useState19(null);
+  const [fileType, setFileType] = useState19(null);
+  const [imagePreview, setImagePreview] = useState19(initialPreviewUrl || null);
+  const [isConfirmed, setIsConfirmed] = useState19(false);
+  const [internalUploadStatus, setInternalUploadStatus] = useState19(
     initialPreviewUrl ? "subido" /* UPLOADED */ : "pendiente" /* PENDING */
   );
   const canvasRef = useRef8(null);
@@ -4190,9 +4443,9 @@ var ITDropfile = ({
       }
     };
     const { label, color, dotColor } = config[status];
-    return /* @__PURE__ */ jsxs16("div", { className: `inline-flex items-center gap-2 px-2.5 py-1 rounded-full border ${color}`, children: [
-      /* @__PURE__ */ jsx23("div", { className: `w-2 h-2 rounded-full ${dotColor}` }),
-      /* @__PURE__ */ jsx23("span", { className: "text-xs font-medium flex items-center gap-1.5", children: label })
+    return /* @__PURE__ */ jsxs17("div", { className: `inline-flex items-center gap-2 px-2.5 py-1 rounded-full border ${color}`, children: [
+      /* @__PURE__ */ jsx25("div", { className: `w-2 h-2 rounded-full ${dotColor}` }),
+      /* @__PURE__ */ jsx25("span", { className: "text-xs font-medium flex items-center gap-1.5", children: label })
     ] });
   };
   const onDrop = (acceptedFiles) => {
@@ -4267,19 +4520,19 @@ var ITDropfile = ({
     handleCancel();
   };
   const isImage = fileType && fileType.startsWith("image/");
-  return /* @__PURE__ */ jsxs16("div", { className: clsx17("w-full transition-all duration-300", containerClassName), children: [
-    /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsxs16("label", { className: "block text-sm font-semibold text-gray-700", children: [
+  return /* @__PURE__ */ jsxs17("div", { className: clsx18("w-full transition-all duration-300", containerClassName), children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsxs17("label", { className: "block text-sm font-semibold text-gray-700", children: [
         "Subir archivo ",
-        /* @__PURE__ */ jsxs16("span", { className: "text-gray-400 font-normal text-xs", children: [
+        /* @__PURE__ */ jsxs17("span", { className: "text-gray-400 font-normal text-xs", children: [
           "(",
           getFileExtensions(),
           ")"
         ] })
       ] }),
-      showStatusBadge && selectedFile && /* @__PURE__ */ jsx23(StatusBadge, { status: uploadStatus })
+      showStatusBadge && selectedFile && /* @__PURE__ */ jsx25(StatusBadge, { status: uploadStatus })
     ] }),
-    !selectedFile && !imagePreview ? /* @__PURE__ */ jsxs16(
+    !selectedFile && !imagePreview ? /* @__PURE__ */ jsxs17(
       "div",
       {
         ...getRootProps(),
@@ -4289,41 +4542,41 @@ var ITDropfile = ({
             ${isDragActive ? "border-primary-500 bg-primary-50 scale-[1.01]" : "border-gray-300 bg-white hover:border-primary-400 hover:bg-gray-50"}
           `,
         children: [
-          /* @__PURE__ */ jsx23("input", { ...getInputProps() }),
-          /* @__PURE__ */ jsx23("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__ */ jsx23(
+          /* @__PURE__ */ jsx25("input", { ...getInputProps() }),
+          /* @__PURE__ */ jsx25("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__ */ jsx25(
             "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__ */ jsx23("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" })
+              children: /* @__PURE__ */ jsx25("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__ */ jsx23("div", { className: "text-center space-y-1", children: /* @__PURE__ */ jsx23("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__ */ jsx25("div", { className: "text-center space-y-1", children: /* @__PURE__ */ jsx25("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__ */ jsxs16("div", { className: "w-full bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden animate-fade-in", children: [
-      /* @__PURE__ */ jsx23("div", { className: "flex items-center justify-between p-3 bg-gray-50 border-b border-gray-100", children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-        /* @__PURE__ */ jsx23("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__ */ jsx23("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx23("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__ */ jsx23("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx23("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__ */ jsxs16("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx23("p", { className: "text-xs font-medium text-gray-900 truncate", title: selectedFile?.name || "Imagen cargada", children: selectedFile?.name || "Imagen cargada" }),
-          /* @__PURE__ */ jsx23("p", { className: "text-[10px] text-gray-500", children: selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : "" })
+    ) : /* @__PURE__ */ jsxs17("div", { className: "w-full bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden animate-fade-in", children: [
+      /* @__PURE__ */ jsx25("div", { className: "flex items-center justify-between p-3 bg-gray-50 border-b border-gray-100", children: /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+        /* @__PURE__ */ jsx25("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__ */ jsx25("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx25("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__ */ jsx25("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx25("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__ */ jsxs17("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx25("p", { className: "text-xs font-medium text-gray-900 truncate", title: selectedFile?.name || "Imagen cargada", children: selectedFile?.name || "Imagen cargada" }),
+          /* @__PURE__ */ jsx25("p", { className: "text-[10px] text-gray-500", children: selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : "" })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx23("div", { className: clsx17("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__ */ jsx23(
+      /* @__PURE__ */ jsx25("div", { className: clsx18("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__ */ jsx25(
         "img",
         {
           src: imagePreview,
           alt: "Vista previa",
           className: "w-full h-full object-contain max-h-[200px]"
         }
-      ) : /* @__PURE__ */ jsxs16("div", { className: "py-8 flex flex-col items-center text-gray-400", children: [
-        /* @__PURE__ */ jsx23("svg", { className: "w-10 h-10 mb-2 opacity-50", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "text-xs", children: "Sin vista previa" })
+      ) : /* @__PURE__ */ jsxs17("div", { className: "py-8 flex flex-col items-center text-gray-400", children: [
+        /* @__PURE__ */ jsx25("svg", { className: "w-10 h-10 mb-2 opacity-50", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx25("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__ */ jsx25("span", { className: "text-xs", children: "Sin vista previa" })
       ] }) }),
-      /* @__PURE__ */ jsx23("div", { className: "px-3 py-2 bg-white border-t border-gray-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ jsxs16(Fragment5, { children: [
-        /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx25("div", { className: "px-3 py-2 bg-white border-t border-gray-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ jsxs17(Fragment5, { children: [
+        /* @__PURE__ */ jsx25(
           "button",
           {
             type: "button",
@@ -4332,31 +4585,31 @@ var ITDropfile = ({
             children: "Cancelar"
           }
         ),
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs17(
           "button",
           {
             type: "button",
             onClick: handleConfirm,
             className: "px-3 py-1.5 text-xs font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 shadow-sm transition-colors flex items-center gap-1",
             children: [
-              /* @__PURE__ */ jsx23("span", { children: "Confirmar" }),
-              /* @__PURE__ */ jsx23("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
+              /* @__PURE__ */ jsx25("span", { children: "Confirmar" }),
+              /* @__PURE__ */ jsx25("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx25("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
             ]
           }
         )
-      ] }) : /* @__PURE__ */ jsxs16(
+      ] }) : /* @__PURE__ */ jsxs17(
         "button",
         {
           type: "button",
           onClick: handleDelete,
           className: "px-3 py-1.5 text-xs font-medium text-danger-600 bg-danger-50 border border-danger-100 rounded-lg hover:bg-danger-100 transition-colors flex items-center gap-1",
           children: [
-            /* @__PURE__ */ jsx23("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx23("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__ */ jsx23("span", { children: "Eliminar" })
+            /* @__PURE__ */ jsx25("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx25("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__ */ jsx25("span", { children: "Eliminar" })
           ]
         }
       ) }),
-      uploadStatus === "subiendo" /* UPLOADING */ && /* @__PURE__ */ jsx23("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsx23("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ jsx23(
+      uploadStatus === "subiendo" /* UPLOADING */ && /* @__PURE__ */ jsx25("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsx25("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ jsx25(
         "div",
         {
           className: "bg-primary-600 h-1.5 rounded-full transition-all duration-1000 ease-out",
@@ -4372,12 +4625,12 @@ var ITDropfile = ({
 var dropfile_default = ITDropfile;
 
 // src/components/layout/layout.tsx
-import { useState as useState21 } from "react";
+import { useState as useState22 } from "react";
 
 // src/components/topbar/topbar.tsx
 import { FaUserCircle as FaUserCircle2, FaBars } from "react-icons/fa";
-import { useRef as useRef9, useState as useState19 } from "react";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useRef as useRef9, useState as useState20 } from "react";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 function ITTopBar({
   logo,
   logoText,
@@ -4387,10 +4640,10 @@ function ITTopBar({
   navItems,
   onNavItemClick
 }) {
-  const [isUserMenuOpen, setIsUserMenuOpen] = useState19(false);
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState20(false);
   const userMenuRef = useRef9(null);
   useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     "header",
     {
       className: "sticky top-0 z-40 backdrop-blur-md transition-all duration-300",
@@ -4399,9 +4652,9 @@ function ITTopBar({
         borderBottom: `1px solid ${theme.topbar?.borderColor || "#e2e8f0"}`,
         boxShadow: theme.topbar?.shadow || "none"
       },
-      children: /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between h-[72px] px-6 lg:px-8", children: [
-        /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-5", children: [
-          showMobileMenuButton && /* @__PURE__ */ jsx24(
+      children: /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between h-[72px] px-6 lg:px-8", children: [
+        /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-5", children: [
+          showMobileMenuButton && /* @__PURE__ */ jsx26(
             "button",
             {
               className: "lg:hidden p-2.5 rounded-xl transition-colors duration-200",
@@ -4411,12 +4664,12 @@ function ITTopBar({
               onMouseEnter: (e) => e.currentTarget.style.backgroundColor = theme.topbar?.userMenu?.hoverBackground || "#f1f5f9",
               onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
               onClick: onToggleMobileMenu,
-              children: /* @__PURE__ */ jsx24(FaBars, { className: "w-[1.125rem] h-[1.125rem]" })
+              children: /* @__PURE__ */ jsx26(FaBars, { className: "w-[1.125rem] h-[1.125rem]" })
             }
           ),
-          /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-3", children: [
-            logo && /* @__PURE__ */ jsx24("div", { className: "flex-shrink-0 drop-shadow-sm", children: logo }),
-            logoText && /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3", children: [
+            logo && /* @__PURE__ */ jsx26("div", { className: "flex-shrink-0 drop-shadow-sm", children: logo }),
+            logoText && /* @__PURE__ */ jsx26(
               "span",
               {
                 className: "text-[1.15rem] font-bold tracking-tight",
@@ -4425,7 +4678,7 @@ function ITTopBar({
               }
             )
           ] }),
-          navItems && navItems.length > 0 && /* @__PURE__ */ jsx24("nav", { className: "hidden md:flex ml-8 space-x-1 border-l pl-8", style: { borderColor: theme.topbar?.borderColor || "#e2e8f0" }, children: navItems.map((item) => /* @__PURE__ */ jsx24(
+          navItems && navItems.length > 0 && /* @__PURE__ */ jsx26("nav", { className: "hidden md:flex ml-8 space-x-1 border-l pl-8", style: { borderColor: theme.topbar?.borderColor || "#e2e8f0" }, children: navItems.map((item) => /* @__PURE__ */ jsx26(
             "button",
             {
               onClick: () => onNavItemClick?.(item.id),
@@ -4439,16 +4692,16 @@ function ITTopBar({
                 e.currentTarget.style.color = theme.topbar?.textColor || "#475569";
                 e.currentTarget.style.backgroundColor = "transparent";
               },
-              children: /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
-                item.icon && /* @__PURE__ */ jsx24("span", { className: "opacity-70", children: item.icon }),
+              children: /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+                item.icon && /* @__PURE__ */ jsx26("span", { className: "opacity-70", children: item.icon }),
                 item.label
               ] })
             },
             item.id
           )) })
         ] }),
-        userMenu && /* @__PURE__ */ jsxs17("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxs17(
+        userMenu && /* @__PURE__ */ jsxs18("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxs18(
             "button",
             {
               type: "button",
@@ -4464,19 +4717,19 @@ function ITTopBar({
               },
               onClick: () => setIsUserMenuOpen(!isUserMenuOpen),
               children: [
-                /* @__PURE__ */ jsxs17("div", { className: "relative", children: [
-                  userMenu.userImage ? /* @__PURE__ */ jsx24(
+                /* @__PURE__ */ jsxs18("div", { className: "relative", children: [
+                  userMenu.userImage ? /* @__PURE__ */ jsx26(
                     "img",
                     {
                       className: "w-9 h-9 rounded-full object-cover ring-2 ring-white shadow-sm",
                       src: userMenu.userImage,
                       alt: "Current user"
                     }
-                  ) : /* @__PURE__ */ jsx24("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ jsx24(FaUserCircle2, { className: "w-6 h-6", style: { color: theme.topbar?.iconColor || "#94a3b8" } }) }),
-                  /* @__PURE__ */ jsx24("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
+                  ) : /* @__PURE__ */ jsx26("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ jsx26(FaUserCircle2, { className: "w-6 h-6", style: { color: theme.topbar?.iconColor || "#94a3b8" } }) }),
+                  /* @__PURE__ */ jsx26("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
                 ] }),
-                /* @__PURE__ */ jsxs17("div", { className: "hidden sm:flex flex-col text-left py-0.5", children: [
-                  /* @__PURE__ */ jsx24(
+                /* @__PURE__ */ jsxs18("div", { className: "hidden sm:flex flex-col text-left py-0.5", children: [
+                  /* @__PURE__ */ jsx26(
                     "span",
                     {
                       className: "font-semibold text-[0.85rem] leading-tight",
@@ -4484,7 +4737,7 @@ function ITTopBar({
                       children: userMenu.userName
                     }
                   ),
-                  /* @__PURE__ */ jsx24(
+                  /* @__PURE__ */ jsx26(
                     "span",
                     {
                       className: "text-[0.7rem] font-medium",
@@ -4496,7 +4749,7 @@ function ITTopBar({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs17(
+          /* @__PURE__ */ jsxs18(
             "div",
             {
               ref: userMenuRef,
@@ -4509,15 +4762,15 @@ function ITTopBar({
                 border: `1px solid ${theme.topbar?.userMenu?.dropdown?.borderColor || "#f1f5f9"}`
               },
               children: [
-                /* @__PURE__ */ jsxs17("div", { className: "px-5 py-4 border-b bg-slate-50/50", style: { borderColor: theme.topbar?.userMenu?.dropdown?.borderColor || "#f1f5f9" }, children: [
-                  /* @__PURE__ */ jsx24("span", { className: "block font-bold text-[0.9rem]", style: { color: theme.topbar?.userMenu?.textColor || "#0f172a" }, children: userMenu.userName }),
-                  /* @__PURE__ */ jsx24("span", { className: "block text-xs font-medium truncate mt-0.5", style: { color: theme.topbar?.userMenu?.subtitleColor || "#64748b" }, children: userMenu.userEmail })
+                /* @__PURE__ */ jsxs18("div", { className: "px-5 py-4 border-b bg-slate-50/50", style: { borderColor: theme.topbar?.userMenu?.dropdown?.borderColor || "#f1f5f9" }, children: [
+                  /* @__PURE__ */ jsx26("span", { className: "block font-bold text-[0.9rem]", style: { color: theme.topbar?.userMenu?.textColor || "#0f172a" }, children: userMenu.userName }),
+                  /* @__PURE__ */ jsx26("span", { className: "block text-xs font-medium truncate mt-0.5", style: { color: theme.topbar?.userMenu?.subtitleColor || "#64748b" }, children: userMenu.userEmail })
                 ] }),
-                /* @__PURE__ */ jsx24("ul", { className: "py-2", children: userMenu.menuItems.map((m, i) => {
+                /* @__PURE__ */ jsx26("ul", { className: "py-2", children: userMenu.menuItems.map((m, i) => {
                   const isDestructive = m.label.toLowerCase().includes("salir") || m.label.toLowerCase().includes("cerrar") || m.label.toLowerCase().includes("logout");
-                  return /* @__PURE__ */ jsxs17("li", { className: "px-2", children: [
-                    i === userMenu.menuItems.length - 1 && isDestructive && i > 0 && /* @__PURE__ */ jsx24("div", { className: "h-px bg-slate-100 my-1 mx-2" }),
-                    /* @__PURE__ */ jsx24(
+                  return /* @__PURE__ */ jsxs18("li", { className: "px-2", children: [
+                    i === userMenu.menuItems.length - 1 && isDestructive && i > 0 && /* @__PURE__ */ jsx26("div", { className: "h-px bg-slate-100 my-1 mx-2" }),
+                    /* @__PURE__ */ jsx26(
                       "button",
                       {
                         onClick: (e) => {
@@ -4547,18 +4800,21 @@ function ITTopBar({
 }
 
 // src/components/sidebar/sidebar.tsx
-import { useEffect as useEffect16, useRef as useRef10, useState as useState20 } from "react";
+import { useEffect as useEffect16, useRef as useRef10, useState as useState21 } from "react";
 import { FaChevronDown as FaChevronDown2 } from "react-icons/fa";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 function ITSidebar({
   navigationItems = [],
   isCollapsed = false,
   onToggleCollapse,
   className = "",
-  visibleOnMobile = false
+  visibleOnMobile = false,
+  onItemClick,
+  onSubItemClick,
+  subitemConnector = "|"
 }) {
-  const [expandedItems, setExpandedItems] = useState20(/* @__PURE__ */ new Set());
-  const [isHovering, setIsHovering] = useState20(false);
+  const [expandedItems, setExpandedItems] = useState21(/* @__PURE__ */ new Set());
+  const [isHovering, setIsHovering] = useState21(false);
   const sidebarRef = useRef10(null);
   const hoverTimeoutRef = useRef10(null);
   const leaveTimeoutRef = useRef10(null);
@@ -4587,6 +4843,27 @@ function ITSidebar({
       if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
     };
   }, [isCollapsed]);
+  useEffect16(() => {
+    const activeParents = /* @__PURE__ */ new Set();
+    navigationItems.forEach((item) => {
+      if (item.subitems && item.subitems.some((sub) => sub.isActive)) {
+        activeParents.add(item.id);
+      }
+    });
+    if (activeParents.size > 0) {
+      setExpandedItems((prev) => {
+        const next = new Set(prev);
+        let changed = false;
+        activeParents.forEach((id) => {
+          if (!next.has(id)) {
+            next.add(id);
+            changed = true;
+          }
+        });
+        return changed ? next : prev;
+      });
+    }
+  }, [navigationItems]);
   const toggleExpanded = (itemId) => {
     const newExpanded = new Set(expandedItems);
     if (newExpanded.has(itemId)) newExpanded.delete(itemId);
@@ -4596,13 +4873,14 @@ function ITSidebar({
   const handleItemClick = (item) => {
     if (item.subitems && item.subitems.length > 0) {
       toggleExpanded(item.id);
-    } else if (item.action) {
-      item.action();
+    } else {
+      if (item.action) item.action();
+      if (onItemClick) onItemClick(item);
     }
   };
   const isSidebarCollapsed = visibleOnMobile ? false : !isHovering && isCollapsed;
   const sidebarWidth = isSidebarCollapsed ? "w-[88px]" : "w-[280px]";
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     "aside",
     {
       ref: sidebarRef,
@@ -4621,8 +4899,8 @@ function ITSidebar({
         WebkitBackdropFilter: "blur(12px)",
         backdropFilter: "blur(12px)"
       },
-      children: /* @__PURE__ */ jsx25("nav", { className: "flex-1 py-6 overflow-y-auto overflow-x-hidden custom-scrollbar px-4", children: /* @__PURE__ */ jsx25("ul", { className: "space-y-2", children: navigationItems.map((item) => /* @__PURE__ */ jsxs18("li", { className: "relative group/navitem", children: [
-        /* @__PURE__ */ jsxs18(
+      children: /* @__PURE__ */ jsx27("nav", { className: "flex-1 py-6 overflow-y-auto overflow-x-hidden custom-scrollbar px-4", children: /* @__PURE__ */ jsx27("ul", { className: "space-y-2", children: navigationItems.map((item) => /* @__PURE__ */ jsxs19("li", { className: "relative group/navitem", children: [
+        /* @__PURE__ */ jsxs19(
           "div",
           {
             className: `flex items-center cursor-pointer 
@@ -4643,15 +4921,15 @@ function ITSidebar({
             },
             onClick: () => handleItemClick(item),
             children: [
-              item.isActive && !isSidebarCollapsed && /* @__PURE__ */ jsx25(
+              item.isActive && !isSidebarCollapsed && /* @__PURE__ */ jsx27(
                 "div",
                 {
                   className: "absolute left-0 top-1/4 bottom-1/4 w-[3px] rounded-r-full transition-all",
                   style: { backgroundColor: theme.sidebar?.active?.iconColor || "#10b981", boxShadow: `0 0 10px ${theme.sidebar?.active?.iconColor || "#10b981"}` }
                 }
               ),
-              /* @__PURE__ */ jsxs18("div", { className: `flex items-center ${!isSidebarCollapsed ? "gap-3.5" : "justify-center"} relative z-10 w-full`, children: [
-                item.icon && /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsxs19("div", { className: `flex items-center ${!isSidebarCollapsed ? "gap-3.5" : "justify-center"} relative z-10 w-full`, children: [
+                item.icon && /* @__PURE__ */ jsx27(
                   "div",
                   {
                     className: `transition-all duration-300 flex-shrink-0 flex items-center justify-center`,
@@ -4664,7 +4942,7 @@ function ITSidebar({
                     children: item.icon
                   }
                 ),
-                !isSidebarCollapsed && /* @__PURE__ */ jsx25(
+                !isSidebarCollapsed && /* @__PURE__ */ jsx27(
                   "span",
                   {
                     className: `transition-all duration-300 truncate tracking-wide`,
@@ -4677,15 +4955,15 @@ function ITSidebar({
                   }
                 )
               ] }),
-              !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ jsx25(
+              !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ jsx27(
                 "div",
                 {
                   className: `flex-shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "rotate-180" : ""}`,
                   style: { color: item.isActive ? theme.sidebar?.active?.color || "#0f172a" : theme.sidebar?.icon?.color || "#64748b", opacity: 0.7 },
-                  children: /* @__PURE__ */ jsx25(FaChevronDown2, { className: "w-3 h-3" })
+                  children: /* @__PURE__ */ jsx27(FaChevronDown2, { className: "w-3 h-3" })
                 }
               ),
-              item.badge && /* @__PURE__ */ jsx25(
+              item.badge && /* @__PURE__ */ jsx27(
                 "span",
                 {
                   className: `
@@ -4703,7 +4981,7 @@ function ITSidebar({
             ]
           }
         ),
-        isSidebarCollapsed && /* @__PURE__ */ jsxs18(
+        isSidebarCollapsed && /* @__PURE__ */ jsxs19(
           "div",
           {
             className: "absolute left-full top-0 ml-4 rounded-2xl opacity-0 invisible group-hover/navitem:opacity-100 group-hover/navitem:visible transition-all duration-300 pointer-events-none z-50 min-w-[220px] overflow-hidden -translate-x-2 group-hover/navitem:translate-x-0 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)]",
@@ -4714,61 +4992,73 @@ function ITSidebar({
               backdropFilter: "blur(16px)"
             },
             children: [
-              /* @__PURE__ */ jsxs18("div", { className: "px-5 py-4 flex items-center gap-3 font-semibold border-b", style: { borderColor: theme.sidebar?.borderColor || "#e2e8f0", color: theme.sidebar?.active?.color || "#0f172a" }, children: [
-                item.icon && /* @__PURE__ */ jsx25("span", { style: { color: theme.sidebar?.active?.iconColor || "#10b981" }, className: "text-xl drop-shadow-sm", children: item.icon }),
-                /* @__PURE__ */ jsx25("span", { className: "tracking-wide text-[15px]", children: item.label })
+              /* @__PURE__ */ jsxs19("div", { className: "px-5 py-4 flex items-center gap-3 font-semibold border-b", style: { borderColor: theme.sidebar?.borderColor || "#e2e8f0", color: theme.sidebar?.active?.color || "#0f172a" }, children: [
+                item.icon && /* @__PURE__ */ jsx27("span", { style: { color: theme.sidebar?.active?.iconColor || "#10b981" }, className: "text-xl drop-shadow-sm", children: item.icon }),
+                /* @__PURE__ */ jsx27("span", { className: "tracking-wide text-[15px]", children: item.label })
               ] }),
-              item.subitems && item.subitems.length > 0 ? /* @__PURE__ */ jsx25("div", { className: "py-2", children: item.subitems.map((subitem) => /* @__PURE__ */ jsxs18(
+              item.subitems && item.subitems.length > 0 ? /* @__PURE__ */ jsx27("div", { className: "py-2", children: item.subitems.map((subitem) => /* @__PURE__ */ jsxs19(
                 "div",
                 {
                   className: `px-5 py-2.5 text-sm flex items-center gap-3 transition-colors`,
                   children: [
-                    /* @__PURE__ */ jsx25("span", { className: `w-1.5 h-1.5 rounded-full transition-all ${subitem.isActive ? "scale-125" : ""}`, style: { backgroundColor: subitem.isActive ? theme.sidebar?.active?.iconColor || "#10b981" : theme.sidebar?.icon?.color || "#94a3b8" } }),
-                    /* @__PURE__ */ jsx25("span", { style: { color: subitem.isActive ? theme.sidebar?.active?.color || "#0f172a" : theme.sidebar?.label?.color || "#475569", fontWeight: subitem.isActive ? 600 : 500 }, children: subitem.label })
+                    /* @__PURE__ */ jsx27("span", { className: `w-1.5 h-1.5 rounded-full transition-all ${subitem.isActive ? "scale-125" : ""}`, style: { backgroundColor: subitem.isActive ? theme.sidebar?.active?.iconColor || "#10b981" : theme.sidebar?.icon?.color || "#94a3b8" } }),
+                    /* @__PURE__ */ jsx27("span", { style: { color: subitem.isActive ? theme.sidebar?.active?.color || "#0f172a" : theme.sidebar?.label?.color || "#475569", fontWeight: subitem.isActive ? 600 : 500 }, children: subitem.label })
                   ]
                 },
                 subitem.id
-              )) }) : /* @__PURE__ */ jsx25("div", { className: "px-5 py-3 text-sm text-zinc-500 italic", children: "No hay submen\xFA" })
+              )) }) : /* @__PURE__ */ jsx27("div", { className: "px-5 py-3 text-sm text-zinc-500 italic", children: "No hay submen\xFA" })
             ]
           }
         ),
-        !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ jsx25("div", { className: `overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[500px] opacity-100 mt-1" : "max-h-0 opacity-0"}`, children: /* @__PURE__ */ jsx25("ul", { className: "ml-5 pl-4 space-y-1 py-1", style: { borderLeft: `2px solid ${theme.sidebar?.borderColor || "#e2e8f0"}` }, children: item.subitems.map((subitem) => /* @__PURE__ */ jsxs18("li", { className: "relative", children: [
-          subitem.isActive && /* @__PURE__ */ jsx25("div", { className: "absolute -left-[18px] top-1/2 -translate-y-1/2 w-4 h-[2px] rounded-r-full", style: { backgroundColor: theme.sidebar?.active?.iconColor || "#10b981" } }),
-          /* @__PURE__ */ jsx25(
-            "button",
-            {
-              onClick: subitem.action,
-              className: `block w-full text-left px-4 py-2 rounded-xl transition-all duration-300`,
-              style: {
-                color: subitem.isActive ? theme.sidebar?.active?.color || "#0f172a" : theme.sidebar?.label?.color || "#475569",
-                backgroundColor: subitem.isActive ? theme.sidebar?.active?.backgroundColor || "#f8fafc" : "transparent",
-                fontSize: "0.85rem",
-                fontWeight: subitem.isActive ? 600 : 500,
-                letterSpacing: "0.01em"
-              },
-              onMouseEnter: (e) => {
-                if (!subitem.isActive) {
-                  e.currentTarget.style.backgroundColor = theme.sidebar?.hover?.backgroundColor || "#f1f5f9";
-                  e.currentTarget.style.transform = "translateX(4px)";
-                }
-              },
-              onMouseLeave: (e) => {
-                if (!subitem.isActive) {
-                  e.currentTarget.style.backgroundColor = "transparent";
-                  e.currentTarget.style.transform = "translateX(0)";
+        !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ jsx27("div", { className: `overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[500px] opacity-100 mt-1" : "max-h-0 opacity-0"}`, children: /* @__PURE__ */ jsx27(
+          "ul",
+          {
+            className: "ml-5 pl-4 space-y-1 py-1",
+            style: {
+              borderLeft: subitemConnector === "none" ? "none" : `2px ${subitemConnector === "dots" ? "dotted" : "solid"} ${theme.sidebar?.borderColor || "#e2e8f0"}`
+            },
+            children: item.subitems.map((subitem) => /* @__PURE__ */ jsxs19("li", { className: "relative", children: [
+              subitem.isActive && (subitemConnector === "lines" || subitemConnector === "dots") && /* @__PURE__ */ jsx27("div", { className: "absolute -left-[18px] top-1/2 -translate-y-1/2 w-4 h-[2px] rounded-r-full", style: { backgroundColor: theme.sidebar?.active?.iconColor || "#10b981" } }),
+              /* @__PURE__ */ jsx27(
+                "button",
+                {
+                  onClick: () => {
+                    if (subitem.action) subitem.action();
+                    if (onSubItemClick) onSubItemClick(subitem);
+                  },
+                  className: `block w-full text-left px-4 py-2 rounded-xl transition-all duration-300`,
+                  style: {
+                    color: subitem.isActive ? theme.sidebar?.active?.color || "#0f172a" : theme.sidebar?.label?.color || "#475569",
+                    backgroundColor: subitem.isActive ? theme.sidebar?.active?.backgroundColor || "#f8fafc" : "transparent",
+                    fontSize: "0.85rem",
+                    fontWeight: subitem.isActive ? 600 : 500,
+                    letterSpacing: "0.01em"
+                  },
+                  onMouseEnter: (e) => {
+                    if (!subitem.isActive) {
+                      e.currentTarget.style.backgroundColor = theme.sidebar?.hover?.backgroundColor || "#f1f5f9";
+                      e.currentTarget.style.transform = "translateX(4px)";
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    if (!subitem.isActive) {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                      e.currentTarget.style.transform = "translateX(0)";
+                    }
+                  },
+                  children: subitem.label
                 }
-              },
-              children: subitem.label
-            }
-          )
-        ] }, subitem.id)) }) })
+              )
+            ] }, subitem.id))
+          }
+        ) })
       ] }, item.id)) }) })
     }
   );
 }
 
 // src/components/layout/layout.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
 function ITLayout({
   topBar,
   sidebar,
@@ -4776,10 +5066,10 @@ function ITLayout({
   className = "",
   contentClassName = ""
 }) {
-  const [desktopCollapsed, setDesktopCollapsed] = useState21(true);
-  const [mobileSidebarOpen, setMobileSidebarOpen] = useState21(false);
-  return /* @__PURE__ */ jsxs19("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
-    /* @__PURE__ */ jsx26(
+  const [desktopCollapsed, setDesktopCollapsed] = useState22(true);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState22(false);
+  return /* @__PURE__ */ jsxs20("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
+    /* @__PURE__ */ jsx28(
       ITTopBar,
       {
         ...topBar,
@@ -4787,10 +5077,10 @@ function ITLayout({
         onToggleMobileMenu: () => setMobileSidebarOpen((v) => !v)
       }
     ),
-    /* @__PURE__ */ jsxs19("div", { className: "flex flex-1 overflow-hidden relative", style: { backgroundColor: theme.layout?.backgroundColor || "#f8fafc" }, children: [
-      /* @__PURE__ */ jsxs19("div", { className: "hidden lg:block relative z-40 h-full", children: [
-        /* @__PURE__ */ jsx26("div", { className: "w-[88px] h-full flex-shrink-0" }),
-        /* @__PURE__ */ jsx26("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 overflow-hidden relative", style: { backgroundColor: theme.layout?.backgroundColor || "#f8fafc" }, children: [
+      /* @__PURE__ */ jsxs20("div", { className: "hidden lg:block relative z-40 h-full", children: [
+        /* @__PURE__ */ jsx28("div", { className: "w-[88px] h-full flex-shrink-0" }),
+        /* @__PURE__ */ jsx28("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ jsx28(
           ITSidebar,
           {
             ...sidebar,
@@ -4801,31 +5091,33 @@ function ITLayout({
           }
         ) })
       ] }),
-      mobileSidebarOpen && /* @__PURE__ */ jsx26(
+      mobileSidebarOpen && /* @__PURE__ */ jsx28(
         "div",
         {
           className: "lg:hidden fixed inset-0 z-50 transition-opacity duration-300 backdrop-blur-sm bg-black/40",
           onClick: () => setMobileSidebarOpen(false),
-          children: /* @__PURE__ */ jsx26(
+          children: /* @__PURE__ */ jsx28(
             "div",
             {
-              className: "h-full w-auto transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]",
+              className: "h-full w-fit flex transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ jsx26(
+              children: /* @__PURE__ */ jsx28(
                 ITSidebar,
                 {
                   ...sidebar,
                   isCollapsed: false,
                   visibleOnMobile: true,
-                  className: "h-full shadow-2xl",
-                  onToggleCollapse: () => setMobileSidebarOpen(false)
+                  className: "h-full shadow-2xl relative z-[60]",
+                  onToggleCollapse: () => setMobileSidebarOpen(false),
+                  onItemClick: () => setMobileSidebarOpen(false),
+                  onSubItemClick: () => setMobileSidebarOpen(false)
                 }
               )
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx26("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx28("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ jsx28(
         "div",
         {
           className: `mx-auto w-full h-full ${contentClassName}`,
@@ -4846,7 +5138,7 @@ var sizeClasses = {
 };
 
 // src/components/loader/loader.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function ITLoader({
   size = "md",
   variant = "spinner",
@@ -4861,22 +5153,22 @@ function ITLoader({
   const bgStyle = isCssValue ? { backgroundColor: resolvedColor } : {};
   const colorClass = !isCssValue ? color : "";
   if (variant === "spinner") {
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx29(
       "div",
       {
         className: `inline-block ${sizeClasses[size]} animate-spin rounded-full border-2 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] ${colorClass} ${className}`,
         role: "status",
         style,
-        children: /* @__PURE__ */ jsx27("span", { className: "!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]", children: "Loading..." })
+        children: /* @__PURE__ */ jsx29("span", { className: "!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]", children: "Loading..." })
       }
     );
   }
   if (variant === "dots") {
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx29(
       "div",
       {
         className: `flex items-center justify-center space-x-2 ${className}`,
-        children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsx27(
+        children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsx29(
           "div",
           {
             className: `${sizeClasses[size.replace(/l|g/, "")]} animate-bounce rounded-full ${colorClass}`,
@@ -4891,11 +5183,11 @@ function ITLoader({
     );
   }
   if (variant === "bar") {
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx29(
       "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}`,
-        children: /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsx29(
           "div",
           {
             className: `h-full animate-progress ${colorClass}`,
@@ -4911,7 +5203,7 @@ function ITLoader({
     );
   }
   if (variant === "pulse") {
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx29(
       "div",
       {
         className: `rounded-full ${sizeClasses[size]} animate-pulse ${colorClass} ${className}`,
@@ -4923,10 +5215,10 @@ function ITLoader({
 }
 
 // src/components/stepper/stepper.tsx
-import clsx18 from "clsx";
-import { useEffect as useEffect17, useRef as useRef11, useState as useState22 } from "react";
+import clsx19 from "clsx";
+import { useEffect as useEffect17, useRef as useRef11, useState as useState23 } from "react";
 import { FaChevronLeft as FaChevronLeft4, FaChevronRight as FaChevronRight5, FaCheck as FaCheck3 } from "react-icons/fa";
-import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 function ITStepper({
   steps,
   currentStep,
@@ -4941,7 +5233,7 @@ function ITStepper({
   maxContentHeight = "400px",
   color = "primary"
 }) {
-  const [direction, setDirection] = useState22("next");
+  const [direction, setDirection] = useState23("next");
   const contentRef = useRef11(null);
   const progressRef = useRef11(null);
   const isThemeColor = color in theme.colors;
@@ -4993,23 +5285,23 @@ function ITStepper({
   const renderStepContent = (index, isCompleted, isActive) => {
     const step = steps[index];
     if (isCompleted) {
-      return /* @__PURE__ */ jsx28(FaCheck3, { className: "w-4 h-4" });
+      return /* @__PURE__ */ jsx30(FaCheck3, { className: "w-4 h-4" });
     }
     if (step.icon && useIcons) {
-      return /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-center w-5 h-5", children: step.icon });
+      return /* @__PURE__ */ jsx30("div", { className: "flex items-center justify-center w-5 h-5", children: step.icon });
     }
-    return /* @__PURE__ */ jsx28("span", { className: "text-sm font-semibold", children: index + 1 });
+    return /* @__PURE__ */ jsx30("span", { className: "text-sm font-semibold", children: index + 1 });
   };
-  return /* @__PURE__ */ jsxs20("div", { className: clsx18("w-full max-w-5xl mx-auto px-4", containerClassName), children: [
-    /* @__PURE__ */ jsxs20("div", { className: "relative mb-8", children: [
-      /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs21("div", { className: clsx19("w-full max-w-5xl mx-auto px-4", containerClassName), children: [
+    /* @__PURE__ */ jsxs21("div", { className: "relative mb-8", children: [
+      /* @__PURE__ */ jsx30(
         "div",
         {
           className: "absolute left-6 right-6 top-5 h-1 bg-gray-200 rounded-full z-0",
           "aria-hidden": true
         }
       ),
-      /* @__PURE__ */ jsx28(
+      /* @__PURE__ */ jsx30(
         "div",
         {
           ref: progressRef,
@@ -5017,11 +5309,11 @@ function ITStepper({
           "aria-hidden": true
         }
       ),
-      /* @__PURE__ */ jsx28("div", { className: "flex items-start justify-between space-x-2 relative z-20", children: steps.map((step, idx) => {
+      /* @__PURE__ */ jsx30("div", { className: "flex items-start justify-between space-x-2 relative z-20", children: steps.map((step, idx) => {
         const isActive = idx === currentStep;
         const isCompleted = idx < currentStep;
         const hasIcon = step.icon && useIcons;
-        return /* @__PURE__ */ jsx28(
+        return /* @__PURE__ */ jsx30(
           "button",
           {
             type: "button",
@@ -5031,11 +5323,11 @@ function ITStepper({
             "aria-label": `Paso ${idx + 1} ${step.label}`,
             className: "flex-1 group",
             title: step.label,
-            children: /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center", children: [
-              /* @__PURE__ */ jsx28(
+            children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center", children: [
+              /* @__PURE__ */ jsx30(
                 "div",
                 {
-                  className: clsx18(
+                  className: clsx19(
                     "flex items-center justify-center w-11 h-11 rounded-full border-2 transition-all duration-300 transform",
                     hasIcon && "p-2",
                     isCompleted && "bg-slate-400 border-slate-400 text-white scale-100 shadow",
@@ -5046,10 +5338,10 @@ function ITStepper({
                   children: renderStepContent(idx, isCompleted, isActive)
                 }
               ),
-              /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsx30(
                 "span",
                 {
-                  className: clsx18(
+                  className: clsx19(
                     "mt-2 text-xs sm:text-sm font-medium transition-colors text-center",
                     isCompleted ? "text-slate-400" : !isActive && "text-gray-400"
                   ),
@@ -5063,14 +5355,14 @@ function ITStepper({
         );
       }) })
     ] }),
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx30(
       "div",
       {
         ref: contentRef,
         tabIndex: -1,
         role: "region",
         "aria-labelledby": `step-${currentStep}`,
-        className: clsx18(
+        className: clsx19(
           stepClassName,
           "bg-white border border-gray-100 rounded-2xl shadow-lg min-h-[280px] transition-transform duration-400 no-scrollbar p-6",
           scrollableContent && "overflow-y-auto hide-scrollbar"
@@ -5079,37 +5371,37 @@ function ITStepper({
         children: steps[currentStep].content
       }
     ),
-    /* @__PURE__ */ jsxs20("div", { className: "flex justify-between items-center mt-6", children: [
-      /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsxs21("div", { className: "flex justify-between items-center mt-6", children: [
+      /* @__PURE__ */ jsx30(
         ITButton,
         {
           variant: "outlined",
           color: "secondary",
           disabled: currentStep === 0,
           onClick: prevStep,
-          children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx28(FaChevronLeft4, {}),
+          children: /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx30(FaChevronLeft4, {}),
             "Atr\xE1s"
           ] })
         }
       ),
-      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxs20("div", { className: "text-sm text-gray-500 mr-2 hidden sm:block", children: [
+      /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs21("div", { className: "text-sm text-gray-500 mr-2 hidden sm:block", children: [
           "Paso ",
           currentStep + 1,
           " de ",
           steps.length
         ] }),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx30(
           ITButton,
           {
             variant: "solid",
             color,
             disabled: disableNext,
             onClick: nextStep,
-            children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+            children: /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
               currentStep === steps.length - 1 ? "Finalizar" : "Siguiente",
-              currentStep === steps.length - 1 ? /* @__PURE__ */ jsx28(FaCheck3, {}) : /* @__PURE__ */ jsx28(FaChevronRight5, {})
+              currentStep === steps.length - 1 ? /* @__PURE__ */ jsx30(FaCheck3, {}) : /* @__PURE__ */ jsx30(FaChevronRight5, {})
             ] })
           }
         )
@@ -5119,153 +5411,1756 @@ function ITStepper({
 }
 
 // src/components/theme-provider/themeProvider.tsx
-import { useMemo as useMemo5 } from "react";
-import { Fragment as Fragment6, jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
-function ITThemeProvider({ theme: theme2, children }) {
-  const activeThemeContext = useMemo5(() => {
-    const baseColors = {
-      primary: palette.blue,
-      secondary: palette.gray,
-      success: palette.success,
-      danger: palette.danger,
-      warning: palette.warning,
-      info: palette.cyan,
-      purple: palette.purple
-    };
-    return {
-      colors: {
-        ...baseColors,
-        ...theme2?.colors
+import { createContext as createContext2, useContext as useContext2, useState as useState24, useEffect as useEffect18 } from "react";
+import { MdPalette, MdClose, MdRefresh, MdCheck } from "react-icons/md";
+import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+var STORAGE_KEY = "it-theme-palette";
+var DEFAULT_PALETTE = {
+  primary: "#06b6d4",
+  // Cyan
+  secondary: "#6b7280",
+  // Gray
+  ternary: "#8b5cf6",
+  // Purple/Violet
+  danger: "#ef4444",
+  // Red
+  success: "#22c55e",
+  // Green
+  info: "#3b82f6",
+  // Blue
+  alert: "#f97316",
+  // Orange
+  warning: "#eab308",
+  // Yellow
+  layout: {
+    sidebarBg: "#0f172a",
+    // Dark slate-900
+    sidebarText: "#94a3b8",
+    // Slate-400
+    navbarBg: "#ffffff",
+    // White
+    navbarText: "#1e293b"
+    // Slate-800
+  },
+  table: {
+    headerBg: "#f8fafc",
+    // Slate-50
+    headerText: "#334155",
+    // Slate-700
+    rowBg: "#ffffff",
+    // White
+    rowText: "#1e293b"
+    // Slate-800
+  }
+};
+var PRESETS = [
+  {
+    name: "Midnight Nova \u{1F30C}",
+    colors: {
+      primary: "#6366f1",
+      // Indigo
+      secondary: "#475569",
+      // Slate
+      ternary: "#a855f7",
+      // Purple
+      danger: "#ef4444",
+      success: "#22c55e",
+      info: "#38bdf8",
+      alert: "#f97316",
+      warning: "#eab308",
+      layout: {
+        sidebarBg: "#020617",
+        // Slate-950
+        sidebarText: "#cbd5e1",
+        navbarBg: "#0f172a",
+        navbarText: "#f8fafc"
+      },
+      table: {
+        headerBg: "#1e293b",
+        headerText: "#e2e8f0",
+        rowBg: "#0f172a",
+        rowText: "#cbd5e1"
+      }
+    }
+  },
+  {
+    name: "Tokyo Drift \u{1F3CE}\uFE0F",
+    colors: {
+      primary: "#f43f5e",
+      // Rose
+      secondary: "#64748b",
+      ternary: "#fb923c",
+      // Orange
+      danger: "#dc2626",
+      success: "#16a34a",
+      info: "#0ea5e9",
+      alert: "#f97316",
+      warning: "#facc15",
+      layout: {
+        sidebarBg: "#0f050b",
+        // Deep rose-slate
+        sidebarText: "#fda4af",
+        navbarBg: "#1c0a15",
+        navbarText: "#ffe4e6"
+      },
+      table: {
+        headerBg: "#2e1022",
+        headerText: "#fecdd3",
+        rowBg: "#1c0a15",
+        rowText: "#ffe4e6"
+      }
+    }
+  },
+  {
+    name: "Ocean Core \u{1F30A}",
+    colors: {
+      primary: "#0ea5e9",
+      // Sky
+      secondary: "#64748b",
+      ternary: "#14b8a6",
+      // Teal
+      danger: "#ef4444",
+      success: "#10b981",
+      info: "#3b82f6",
+      alert: "#f97316",
+      warning: "#eab308",
+      layout: {
+        sidebarBg: "#031b2f",
+        // Deep ocean blue
+        sidebarText: "#7dd3fc",
+        navbarBg: "#0b253c",
+        navbarText: "#e0f2fe"
+      },
+      table: {
+        headerBg: "#0c2e4b",
+        headerText: "#bae6fd",
+        rowBg: "#0b253c",
+        rowText: "#e0f2fe"
+      }
+    }
+  },
+  {
+    name: "Matrix Pulse \u{1F49A}",
+    colors: {
+      primary: "#10b981",
+      // Emerald
+      secondary: "#64748b",
+      ternary: "#84cc16",
+      // Lime
+      danger: "#ef4444",
+      success: "#16a34a",
+      info: "#06b6d4",
+      alert: "#f59e0b",
+      warning: "#eab308",
+      layout: {
+        sidebarBg: "#022c1b",
+        // Deep forest green
+        sidebarText: "#6ee7b7",
+        navbarBg: "#043e26",
+        navbarText: "#d1fae5"
       },
+      table: {
+        headerBg: "#064e3b",
+        headerText: "#a7f3d0",
+        rowBg: "#043e26",
+        rowText: "#d1fae5"
+      }
+    }
+  },
+  {
+    name: "Royal Velvet \u{1F451}",
+    colors: {
+      primary: "#8b5cf6",
+      // Violet
+      secondary: "#64748b",
+      ternary: "#ec4899",
+      // Pink
+      danger: "#e11d48",
+      success: "#22c55e",
+      info: "#3b82f6",
+      alert: "#f97316",
+      warning: "#facc15",
       layout: {
-        ...theme.layout,
-        ...theme2?.layout
+        sidebarBg: "#1e0b36",
+        // Deep royal purple
+        sidebarText: "#c084fc",
+        navbarBg: "#291048",
+        navbarText: "#f3e8ff"
+      },
+      table: {
+        headerBg: "#3b1764",
+        headerText: "#e9d5ff",
+        rowBg: "#291048",
+        rowText: "#f3e8ff"
+      }
+    }
+  }
+];
+var ITThemeContext = createContext2(void 0);
+var useITTheme = () => {
+  const context = useContext2(ITThemeContext);
+  if (!context) {
+    throw new Error("useITTheme must be used within an ITThemeProvider");
+  }
+  return context;
+};
+var getNestedValue3 = (obj, path) => {
+  return path.split(".").reduce((acc, part) => acc && acc[part], obj);
+};
+var isLightColor = (hex) => {
+  if (!hex || typeof hex !== "string") return false;
+  const color = hex.replace("#", "");
+  let r = 0, g = 0, b = 0;
+  if (color.length === 3) {
+    r = parseInt(color[0] + color[0], 16);
+    g = parseInt(color[1] + color[1], 16);
+    b = parseInt(color[2] + color[2], 16);
+  } else if (color.length === 6) {
+    r = parseInt(color.substring(0, 2), 16);
+    g = parseInt(color.substring(2, 4), 16);
+    b = parseInt(color.substring(4, 6), 16);
+  } else {
+    return false;
+  }
+  const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
+  return brightness > 140;
+};
+function ITThemeProvider({ children, theme: theme2 }) {
+  const [palette2, setPaletteState] = useState24(() => {
+    const basePalette = {
+      ...DEFAULT_PALETTE,
+      ...theme2,
+      layout: { ...DEFAULT_PALETTE.layout, ...theme2?.layout },
+      table: { ...DEFAULT_PALETTE.table, ...theme2?.table }
+    };
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        return {
+          ...basePalette,
+          ...parsed,
+          layout: { ...basePalette.layout, ...parsed.layout },
+          table: { ...basePalette.table, ...parsed.table }
+        };
+      }
+    } catch (e) {
+      console.error("Failed to load theme from localStorage", e);
+    }
+    return basePalette;
+  });
+  const [isOpen, setIsOpen] = useState24(false);
+  const [showSavedToast, setShowSavedToast] = useState24(false);
+  const [resolvedTheme, setResolvedTheme] = useState24("light");
+  const [darkModeMode, setDarkModeMode] = useState24(() => {
+    const saved = localStorage.getItem("it-theme-dark-mode");
+    if (saved === "light" || saved === "dark" || saved === "system") {
+      return saved;
+    }
+    return "system";
+  });
+  useEffect18(() => {
+    localStorage.setItem("it-theme-dark-mode", darkModeMode);
+    const applyDarkMode = (isDark) => {
+      if (isDark) {
+        document.documentElement.classList.add("dark");
+        document.documentElement.setAttribute("data-theme", "dark");
+        setResolvedTheme("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+        document.documentElement.setAttribute("data-theme", "light");
+        setResolvedTheme("light");
       }
     };
-  }, [theme2]);
-  const cssVariables = useMemo5(() => {
-    let variablesString = "";
-    Object.entries(activeThemeContext.colors).forEach(([colorName, scale]) => {
-      Object.entries(scale).forEach(([shade, hexValue]) => {
-        variablesString += `--color-${colorName}-${shade}: ${hexValue};
-`;
-      });
-    });
-    if (theme2?.layout) {
-      if (theme2.layout.backgroundColor) variablesString += `--layout-bg: ${theme2.layout.backgroundColor};
-`;
-      if (theme2.layout.contentPadding) variablesString += `--layout-padding: ${theme2.layout.contentPadding};
-`;
-    }
-    if (theme2?.topbar) {
-      if (theme2.topbar.backgroundColor) variablesString += `--topbar-bg: ${theme2.topbar.backgroundColor};
-`;
-      if (theme2.topbar.borderColor) variablesString += `--topbar-border: ${theme2.topbar.borderColor};
-`;
-      if (theme2.topbar.iconColor) variablesString += `--topbar-icon: ${theme2.topbar.iconColor};
-`;
-      if (theme2.topbar.iconHoverColor) variablesString += `--topbar-icon-hover: ${theme2.topbar.iconHoverColor};
-`;
-      if (theme2.topbar.shadow) variablesString += `--topbar-shadow: ${theme2.topbar.shadow};
-`;
-      if (theme2.topbar.textColor) variablesString += `--topbar-text: ${theme2.topbar.textColor};
-`;
-      if (theme2.topbar.textHoverColor) variablesString += `--topbar-text-hover: ${theme2.topbar.textHoverColor};
-`;
-      if (theme2.topbar.userMenu) {
-        if (theme2.topbar.userMenu.backgroundColor) variablesString += `--topbar-user-bg: ${theme2.topbar.userMenu.backgroundColor};
-`;
-        if (theme2.topbar.userMenu.hoverBackground) variablesString += `--topbar-user-hover: ${theme2.topbar.userMenu.hoverBackground};
-`;
-        if (theme2.topbar.userMenu.textColor) variablesString += `--topbar-user-text: ${theme2.topbar.userMenu.textColor};
-`;
-        if (theme2.topbar.userMenu.subtitleColor) variablesString += `--topbar-user-subtitle: ${theme2.topbar.userMenu.subtitleColor};
-`;
-        if (theme2.topbar.userMenu.dropdown) {
-          if (theme2.topbar.userMenu.dropdown.backgroundColor) variablesString += `--topbar-user-dropdown-bg: ${theme2.topbar.userMenu.dropdown.backgroundColor};
-`;
-          if (theme2.topbar.userMenu.dropdown.borderColor) variablesString += `--topbar-user-dropdown-border: ${theme2.topbar.userMenu.dropdown.borderColor};
-`;
-          if (theme2.topbar.userMenu.dropdown.itemHoverBackground) variablesString += `--topbar-user-item-hover: ${theme2.topbar.userMenu.dropdown.itemHoverBackground};
-`;
+    if (darkModeMode === "system") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      applyDarkMode(mediaQuery.matches);
+      const listener = (e) => {
+        applyDarkMode(e.matches);
+      };
+      mediaQuery.addEventListener("change", listener);
+      return () => mediaQuery.removeEventListener("change", listener);
+    } else {
+      applyDarkMode(darkModeMode === "dark");
+    }
+  }, [darkModeMode]);
+  useEffect18(() => {
+    const injectStyles = (obj, prefix = "") => {
+      Object.entries(obj).forEach(([key, val]) => {
+        if (typeof val === "object" && val !== null) {
+          injectStyles(val, prefix + key + "-");
+        } else {
+          document.documentElement.style.setProperty(`--color-${prefix}${key}`, val);
+          if (prefix === "layout-") {
+            document.documentElement.style.setProperty(`--color-${key}`, val);
+          }
         }
-      }
+      });
+    };
+    injectStyles(palette2);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(palette2));
+    let styleTag = document.getElementById("it-theme-dynamic-overrides");
+    if (!styleTag) {
+      styleTag = document.createElement("style");
+      styleTag.id = "it-theme-dynamic-overrides";
+      document.head.appendChild(styleTag);
     }
-    if (theme2?.sidebar) {
-      if (theme2.sidebar.backgroundColor) variablesString += `--sidebar-bg: ${theme2.sidebar.backgroundColor};
-`;
-      if (theme2.sidebar.borderColor) variablesString += `--sidebar-border: ${theme2.sidebar.borderColor};
-`;
-      if (theme2.sidebar.label) {
-        if (theme2.sidebar.label.color) variablesString += `--sidebar-label-color: ${theme2.sidebar.label.color};
-`;
-        if (theme2.sidebar.label.size) variablesString += `--sidebar-label-size: ${theme2.sidebar.label.size};
-`;
-        if (theme2.sidebar.label.weight) variablesString += `--sidebar-label-weight: ${theme2.sidebar.label.weight};
-`;
-      }
-      if (theme2.sidebar.icon) {
-        if (theme2.sidebar.icon.color) variablesString += `--sidebar-icon-color: ${theme2.sidebar.icon.color};
-`;
-        if (theme2.sidebar.icon.size) variablesString += `--sidebar-icon-size: ${theme2.sidebar.icon.size};
-`;
-      }
-      if (theme2.sidebar.hover?.backgroundColor) variablesString += `--sidebar-hover-bg: ${theme2.sidebar.hover.backgroundColor};
-`;
-      if (theme2.sidebar.active) {
-        if (theme2.sidebar.active.backgroundColor) variablesString += `--sidebar-active-bg: ${theme2.sidebar.active.backgroundColor};
-`;
-        if (theme2.sidebar.active.color) variablesString += `--sidebar-active-color: ${theme2.sidebar.active.color};
-`;
-        if (theme2.sidebar.active.iconColor) variablesString += `--sidebar-active-icon: ${theme2.sidebar.active.iconColor};
-`;
-      }
-      if (theme2.sidebar.badge) {
-        if (theme2.sidebar.badge.backgroundColor) variablesString += `--sidebar-badge-bg: ${theme2.sidebar.badge.backgroundColor};
-`;
-        if (theme2.sidebar.badge.color) variablesString += `--sidebar-badge-color: ${theme2.sidebar.badge.color};
-`;
-      }
-    }
-    if (theme2?.calendar) {
-      if (theme2.calendar.backgroundColor) variablesString += `--calendar-bg: ${theme2.calendar.backgroundColor};
-`;
-      if (theme2.calendar.borderColor) variablesString += `--calendar-border: ${theme2.calendar.borderColor};
-`;
-      if (theme2.calendar.header) {
-        if (theme2.calendar.header.textColor) variablesString += `--calendar-header-text: ${theme2.calendar.header.textColor};
-`;
-        if (theme2.calendar.header.hoverBackground) variablesString += `--calendar-header-hover: ${theme2.calendar.header.hoverBackground};
-`;
-      }
-      if (theme2.calendar.days) {
-        if (theme2.calendar.days.textColor) variablesString += `--calendar-days-text: ${theme2.calendar.days.textColor};
-`;
-        if (theme2.calendar.days.weekendColor) variablesString += `--calendar-days-weekend: ${theme2.calendar.days.weekendColor};
-`;
-        if (theme2.calendar.days.outsideMonthColor) variablesString += `--calendar-days-outside: ${theme2.calendar.days.outsideMonthColor};
-`;
-      }
-      if (theme2.calendar.selection) {
-        if (theme2.calendar.selection.selectedColor) variablesString += `--calendar-selected-text: ${theme2.calendar.selection.selectedColor};
-`;
-        if (theme2.calendar.selection.selectedBackground) variablesString += `--calendar-selected-bg: ${theme2.calendar.selection.selectedBackground};
-`;
-        if (theme2.calendar.selection.rangeBackground) variablesString += `--calendar-range-bg: ${theme2.calendar.selection.rangeBackground};
-`;
-        if (theme2.calendar.selection.todayBackground) variablesString += `--calendar-today-bg: ${theme2.calendar.selection.todayBackground};
-`;
-        if (theme2.calendar.selection.todayColor) variablesString += `--calendar-today-text: ${theme2.calendar.selection.todayColor};
-`;
-      }
-    }
-    return `:root {
-${variablesString}}`;
-  }, [activeThemeContext]);
-  return /* @__PURE__ */ jsxs21(Fragment6, { children: [
-    /* @__PURE__ */ jsx29("style", { suppressHydrationWarning: true, children: cssVariables }),
-    children
-  ] });
+    const isDark = resolvedTheme === "dark";
+    let tableRowBg = palette2.table.rowBg;
+    let tableRowText = palette2.table.rowText;
+    let tableHeaderBg = palette2.table.headerBg;
+    let tableHeaderText = palette2.table.headerText;
+    let navbarBg = palette2.layout.navbarBg;
+    let navbarText = palette2.layout.navbarText;
+    let sidebarBg = palette2.layout.sidebarBg;
+    let sidebarText = palette2.layout.sidebarText;
+    if (isDark) {
+      if (isLightColor(tableRowBg)) {
+        tableRowBg = `color-mix(in srgb, ${palette2.table.rowBg} 8%, #111827)`;
+      }
+      if (!isLightColor(tableRowText)) {
+        tableRowText = `color-mix(in srgb, ${palette2.table.rowText} 20%, #f3f4f6)`;
+      }
+      if (isLightColor(tableHeaderBg)) {
+        tableHeaderBg = `color-mix(in srgb, ${palette2.table.headerBg} 12%, #1f2937)`;
+      }
+      if (!isLightColor(tableHeaderText)) {
+        tableHeaderText = `color-mix(in srgb, ${palette2.table.headerText} 20%, #f9fafb)`;
+      }
+      if (isLightColor(navbarBg)) {
+        navbarBg = `color-mix(in srgb, ${palette2.layout.navbarBg} 8%, #111827)`;
+      }
+      if (!isLightColor(navbarText)) {
+        navbarText = `color-mix(in srgb, ${palette2.layout.navbarText} 20%, #f3f4f6)`;
+      }
+      if (isLightColor(sidebarBg)) {
+        sidebarBg = `color-mix(in srgb, ${palette2.layout.sidebarBg} 8%, #0f172a)`;
+      }
+      if (!isLightColor(sidebarText)) {
+        sidebarText = `color-mix(in srgb, ${palette2.layout.sidebarText} 20%, #cbd5e1)`;
+      }
+    } else {
+      if (!isLightColor(tableRowBg)) {
+        tableRowBg = `color-mix(in srgb, ${palette2.table.rowBg} 8%, #ffffff)`;
+      }
+      if (isLightColor(tableRowText)) {
+        tableRowText = `color-mix(in srgb, ${palette2.table.rowText} 30%, #1e293b)`;
+      }
+      if (!isLightColor(tableHeaderBg)) {
+        tableHeaderBg = `color-mix(in srgb, ${palette2.table.headerBg} 12%, #f8fafc)`;
+      }
+      if (isLightColor(tableHeaderText)) {
+        tableHeaderText = `color-mix(in srgb, ${palette2.table.headerText} 30%, #334155)`;
+      }
+      if (!isLightColor(navbarBg)) {
+        navbarBg = `color-mix(in srgb, ${palette2.layout.navbarBg} 8%, #ffffff)`;
+      }
+      if (isLightColor(navbarText)) {
+        navbarText = `color-mix(in srgb, ${palette2.layout.navbarText} 30%, #1e293b)`;
+      }
+      if (!isLightColor(sidebarBg)) {
+        sidebarBg = `color-mix(in srgb, ${palette2.layout.sidebarBg} 8%, #ffffff)`;
+      }
+      if (isLightColor(sidebarText)) {
+        sidebarText = `color-mix(in srgb, ${palette2.layout.sidebarText} 30%, #1e293b)`;
+      }
+    }
+    styleTag.innerHTML = `
+      :root {
+        --color-primary: ${palette2.primary};
+        --color-secondary: ${palette2.secondary};
+        --color-ternary: ${palette2.ternary};
+        --color-danger: ${palette2.danger};
+        --color-success: ${palette2.success};
+        --color-info: ${palette2.info};
+        --color-alert: ${palette2.alert};
+        --color-warning: ${palette2.warning};
+
+        /* Generated scales for primary */
+        --color-primary-50: color-mix(in srgb, var(--color-primary) 5%, #ffffff);
+        --color-primary-100: color-mix(in srgb, var(--color-primary) 10%, #ffffff);
+        --color-primary-200: color-mix(in srgb, var(--color-primary) 30%, #ffffff);
+        --color-primary-300: color-mix(in srgb, var(--color-primary) 50%, #ffffff);
+        --color-primary-400: color-mix(in srgb, var(--color-primary) 70%, #ffffff);
+        --color-primary-500: var(--color-primary);
+        --color-primary-600: color-mix(in srgb, var(--color-primary) 85%, #000000);
+        --color-primary-700: color-mix(in srgb, var(--color-primary) 70%, #000000);
+        --color-primary-800: color-mix(in srgb, var(--color-primary) 55%, #000000);
+        --color-primary-900: color-mix(in srgb, var(--color-primary) 40%, #000000);
+        --color-primary-950: color-mix(in srgb, var(--color-primary) 25%, #000000);
+
+        /* Generated scales for secondary */
+        --color-secondary-50: color-mix(in srgb, var(--color-secondary) 5%, #ffffff);
+        --color-secondary-100: color-mix(in srgb, var(--color-secondary) 10%, #ffffff);
+        --color-secondary-200: color-mix(in srgb, var(--color-secondary) 30%, #ffffff);
+        --color-secondary-300: color-mix(in srgb, var(--color-secondary) 50%, #ffffff);
+        --color-secondary-400: color-mix(in srgb, var(--color-secondary) 70%, #ffffff);
+        --color-secondary-500: var(--color-secondary);
+        --color-secondary-600: color-mix(in srgb, var(--color-secondary) 85%, #000000);
+        --color-secondary-700: color-mix(in srgb, var(--color-secondary) 70%, #000000);
+        --color-secondary-800: color-mix(in srgb, var(--color-secondary) 55%, #000000);
+        --color-secondary-900: color-mix(in srgb, var(--color-secondary) 40%, #000000);
+        --color-secondary-950: color-mix(in srgb, var(--color-secondary) 25%, #000000);
+
+        /* Generated scales for ternary */
+        --color-ternary-50: color-mix(in srgb, var(--color-ternary) 5%, #ffffff);
+        --color-ternary-100: color-mix(in srgb, var(--color-ternary) 10%, #ffffff);
+        --color-ternary-200: color-mix(in srgb, var(--color-ternary) 30%, #ffffff);
+        --color-ternary-300: color-mix(in srgb, var(--color-ternary) 50%, #ffffff);
+        --color-ternary-400: color-mix(in srgb, var(--color-ternary) 70%, #ffffff);
+        --color-ternary-500: var(--color-ternary);
+        --color-ternary-600: color-mix(in srgb, var(--color-ternary) 85%, #000000);
+        --color-ternary-700: color-mix(in srgb, var(--color-ternary) 70%, #000000);
+        --color-ternary-800: color-mix(in srgb, var(--color-ternary) 55%, #000000);
+        --color-ternary-900: color-mix(in srgb, var(--color-ternary) 40%, #000000);
+        --color-ternary-950: color-mix(in srgb, var(--color-ternary) 25%, #000000);
+
+        /* Purple scales mapped as aliases to ternary */
+        --color-purple-50: var(--color-ternary-50);
+        --color-purple-100: var(--color-ternary-100);
+        --color-purple-200: var(--color-ternary-200);
+        --color-purple-300: var(--color-ternary-300);
+        --color-purple-400: var(--color-ternary-400);
+        --color-purple-500: var(--color-ternary-500);
+        --color-purple-600: var(--color-ternary-600);
+        --color-purple-700: var(--color-ternary-700);
+        --color-purple-800: var(--color-ternary-800);
+        --color-purple-900: var(--color-ternary-900);
+        --color-purple-950: var(--color-ternary-950);
+
+        /* Generated scales for danger */
+        --color-danger-50: color-mix(in srgb, var(--color-danger) 5%, #ffffff);
+        --color-danger-100: color-mix(in srgb, var(--color-danger) 10%, #ffffff);
+        --color-danger-200: color-mix(in srgb, var(--color-danger) 30%, #ffffff);
+        --color-danger-300: color-mix(in srgb, var(--color-danger) 50%, #ffffff);
+        --color-danger-400: color-mix(in srgb, var(--color-danger) 70%, #ffffff);
+        --color-danger-500: var(--color-danger);
+        --color-danger-600: color-mix(in srgb, var(--color-danger) 85%, #000000);
+        --color-danger-700: color-mix(in srgb, var(--color-danger) 70%, #000000);
+        --color-danger-800: color-mix(in srgb, var(--color-danger) 55%, #000000);
+        --color-danger-900: color-mix(in srgb, var(--color-danger) 40%, #000000);
+        --color-danger-950: color-mix(in srgb, var(--color-danger) 25%, #000000);
+
+        /* Generated scales for success */
+        --color-success-50: color-mix(in srgb, var(--color-success) 5%, #ffffff);
+        --color-success-100: color-mix(in srgb, var(--color-success) 10%, #ffffff);
+        --color-success-200: color-mix(in srgb, var(--color-success) 30%, #ffffff);
+        --color-success-300: color-mix(in srgb, var(--color-success) 50%, #ffffff);
+        --color-success-400: color-mix(in srgb, var(--color-success) 70%, #ffffff);
+        --color-success-500: var(--color-success);
+        --color-success-600: color-mix(in srgb, var(--color-success) 85%, #000000);
+        --color-success-700: color-mix(in srgb, var(--color-success) 70%, #000000);
+        --color-success-800: color-mix(in srgb, var(--color-success) 55%, #000000);
+        --color-success-900: color-mix(in srgb, var(--color-success) 40%, #000000);
+        --color-success-950: color-mix(in srgb, var(--color-success) 25%, #000000);
+
+        /* Generated scales for info */
+        --color-info-50: color-mix(in srgb, var(--color-info) 5%, #ffffff);
+        --color-info-100: color-mix(in srgb, var(--color-info) 10%, #ffffff);
+        --color-info-200: color-mix(in srgb, var(--color-info) 30%, #ffffff);
+        --color-info-300: color-mix(in srgb, var(--color-info) 50%, #ffffff);
+        --color-info-400: color-mix(in srgb, var(--color-info) 70%, #ffffff);
+        --color-info-500: var(--color-info);
+        --color-info-600: color-mix(in srgb, var(--color-info) 85%, #000000);
+        --color-info-700: color-mix(in srgb, var(--color-info) 70%, #000000);
+        --color-info-800: color-mix(in srgb, var(--color-info) 55%, #000000);
+        --color-info-900: color-mix(in srgb, var(--color-info) 40%, #000000);
+        --color-info-950: color-mix(in srgb, var(--color-info) 25%, #000000);
+
+        /* Generated scales for alert */
+        --color-alert-50: color-mix(in srgb, var(--color-alert) 5%, #ffffff);
+        --color-alert-100: color-mix(in srgb, var(--color-alert) 10%, #ffffff);
+        --color-alert-200: color-mix(in srgb, var(--color-alert) 30%, #ffffff);
+        --color-alert-300: color-mix(in srgb, var(--color-alert) 50%, #ffffff);
+        --color-alert-400: color-mix(in srgb, var(--color-alert) 70%, #ffffff);
+        --color-alert-500: var(--color-alert);
+        --color-alert-600: color-mix(in srgb, var(--color-alert) 85%, #000000);
+        --color-alert-700: color-mix(in srgb, var(--color-alert) 70%, #000000);
+        --color-alert-800: color-mix(in srgb, var(--color-alert) 55%, #000000);
+        --color-alert-900: color-mix(in srgb, var(--color-alert) 40%, #000000);
+        --color-alert-950: color-mix(in srgb, var(--color-alert) 25%, #000000);
+
+        /* Generated scales for warning */
+        --color-warning-50: color-mix(in srgb, var(--color-warning) 5%, #ffffff);
+        --color-warning-100: color-mix(in srgb, var(--color-warning) 10%, #ffffff);
+        --color-warning-200: color-mix(in srgb, var(--color-warning) 30%, #ffffff);
+        --color-warning-300: color-mix(in srgb, var(--color-warning) 50%, #ffffff);
+        --color-warning-400: color-mix(in srgb, var(--color-warning) 70%, #ffffff);
+        --color-warning-500: var(--color-warning);
+        --color-warning-600: color-mix(in srgb, var(--color-warning) 85%, #000000);
+        --color-warning-700: color-mix(in srgb, var(--color-warning) 70%, #000000);
+        --color-warning-800: color-mix(in srgb, var(--color-warning) 55%, #000000);
+        --color-warning-900: color-mix(in srgb, var(--color-warning) 40%, #000000);
+        --color-warning-950: color-mix(in srgb, var(--color-warning) 25%, #000000);
+
+        /* Support legacy client app variables */
+        --color-primary-focus: color-mix(in srgb, var(--color-primary) 30%, transparent);
+        --color-primary-light: color-mix(in srgb, var(--color-primary) 10%, #ffffff);
+        --color-secondary-border: color-mix(in srgb, var(--color-secondary) 30%, #000000);
+        --color-ternary-light: color-mix(in srgb, var(--color-ternary) 15%, #ffffff);
+        --color-danger-focus: color-mix(in srgb, var(--color-danger) 30%, transparent);
+        --color-success-focus: color-mix(in srgb, var(--color-success) 30%, transparent);
+        --color-info-focus: color-mix(in srgb, var(--color-info) 30%, transparent);
+        --color-alert-focus: color-mix(in srgb, var(--color-alert) 30%, transparent);
+        --color-warning-focus: color-mix(in srgb, var(--color-warning) 30%, transparent);
+
+        /* Map library properties for complete safety */
+        --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, #000000);
+        --color-primary-ring: color-mix(in srgb, var(--color-primary) 40%, transparent);
+        --color-primary-soft: color-mix(in srgb, var(--color-primary) 12%, transparent);
+        --color-primary-soft-border: color-mix(in srgb, var(--color-primary) 24%, transparent);
+
+        --color-secondary-hover: color-mix(in srgb, var(--color-secondary) 85%, #000000);
+        --color-secondary-ring: color-mix(in srgb, var(--color-secondary) 40%, transparent);
+        --color-secondary-soft: color-mix(in srgb, var(--color-secondary) 12%, transparent);
+        --color-secondary-soft-border: color-mix(in srgb, var(--color-secondary) 24%, transparent);
+
+        --color-ternary-hover: color-mix(in srgb, var(--color-ternary) 85%, #000000);
+        --color-ternary-ring: color-mix(in srgb, var(--color-ternary) 40%, transparent);
+        --color-ternary-soft: color-mix(in srgb, var(--color-ternary) 12%, transparent);
+        --color-ternary-soft-border: color-mix(in srgb, var(--color-ternary) 24%, transparent);
+
+        --color-danger-hover: color-mix(in srgb, var(--color-danger) 85%, #000000);
+        --color-danger-ring: color-mix(in srgb, var(--color-danger) 40%, transparent);
+        --color-danger-soft: color-mix(in srgb, var(--color-danger) 12%, transparent);
+        --color-danger-soft-border: color-mix(in srgb, var(--color-danger) 24%, transparent);
+
+        --color-success-hover: color-mix(in srgb, var(--color-success) 85%, #000000);
+        --color-success-ring: color-mix(in srgb, var(--color-success) 40%, transparent);
+        --color-success-soft: color-mix(in srgb, var(--color-success) 12%, transparent);
+        --color-success-soft-border: color-mix(in srgb, var(--color-success) 24%, transparent);
+
+        --color-info-hover: color-mix(in srgb, var(--color-info) 85%, #000000);
+        --color-info-ring: color-mix(in srgb, var(--color-info) 40%, transparent);
+        --color-info-soft: color-mix(in srgb, var(--color-info) 12%, transparent);
+        --color-info-soft-border: color-mix(in srgb, var(--color-info) 24%, transparent);
+
+        --color-alert-hover: color-mix(in srgb, var(--color-alert) 85%, #000000);
+        --color-alert-ring: color-mix(in srgb, var(--color-alert) 40%, transparent);
+        --color-alert-soft: color-mix(in srgb, var(--color-alert) 12%, transparent);
+        --color-alert-soft-border: color-mix(in srgb, var(--color-alert) 24%, transparent);
+
+        --color-warning-hover: color-mix(in srgb, var(--color-warning) 85%, #000000);
+        --color-warning-ring: color-mix(in srgb, var(--color-warning) 40%, transparent);
+        --color-warning-soft: color-mix(in srgb, var(--color-warning) 12%, transparent);
+        --color-warning-soft-border: color-mix(in srgb, var(--color-warning) 24%, transparent);
+
+        --color-sidebarBg: ${sidebarBg} !important;
+        --color-sidebarText: ${sidebarText} !important;
+        --color-navbarBg: ${navbarBg} !important;
+        --color-navbarText: ${navbarText} !important;
+
+        --color-table-headerBg: ${tableHeaderBg} !important;
+        --color-table-headerText: ${tableHeaderText} !important;
+        --color-table-rowBg: ${tableRowBg} !important;
+        --color-table-rowText: ${tableRowText} !important;
+
+        /* Native library variables integration */
+        --sidebar-bg: var(--color-sidebarBg);
+        --sidebar-border: color-mix(in srgb, var(--color-sidebarBg) 85%, #000000);
+        --sidebar-label-color: var(--color-sidebarText);
+        --sidebar-icon-color: color-mix(in srgb, var(--color-sidebarText) 80%, transparent);
+        --sidebar-hover-bg: color-mix(in srgb, var(--color-sidebarText) 10%, transparent);
+        --sidebar-active-bg: color-mix(in srgb, var(--color-primary) 12%, transparent);
+        --sidebar-active-color: var(--color-primary);
+        --sidebar-active-icon: var(--color-primary);
+        --sidebar-badge-bg: var(--color-primary);
+        --sidebar-badge-color: #ffffff;
+
+        --topbar-bg: var(--color-navbarBg);
+        --topbar-text: var(--color-navbarText);
+        --topbar-border: color-mix(in srgb, var(--color-navbarBg) 85%, #000000);
+        --topbar-icon: color-mix(in srgb, var(--color-navbarText) 80%, transparent);
+        --topbar-icon-hover: var(--color-navbarText);
+
+        --layout-bg: var(--color-secondary-50);
+        --input-text-color: var(--color-secondary-900);
+
+        --calendar-selected-bg: var(--color-primary);
+        --calendar-selected-text: #ffffff;
+        --calendar-range-bg: var(--color-primary-50);
+        --calendar-today-bg: var(--color-primary-100);
+        --calendar-today-text: var(--color-primary);
+      }
+
+      /* Dark mode overrides */
+      .dark, [data-theme="dark"] {
+        --layout-bg: #090f1d;
+        --card-bg: #111827;
+        --card-border: #1f2937;
+        --card-header-bg: #1f2937;
+        --card-header-border: #374151;
+        --input-bg: #1f2937;
+        --input-border: #374151;
+        --input-placeholder: #6b7280;
+        --input-text-color: #cbd5e1;
+        --modal-bg: #111827;
+        --modal-footer-bg: #1f2937;
+        --modal-header-border: #374151;
+        --modal-footer-border: #374151;
+        --calendar-bg: #111827;
+        --calendar-border: #1f2937;
+        --calendar-header-text: #f3f4f6;
+        --calendar-header-hover: #1f2937;
+        --calendar-days-text: #e5e7eb;
+        --calendar-selected-bg: var(--color-primary);
+        --calendar-selected-text: #ffffff;
+        --calendar-range-bg: var(--color-primary-50);
+        --calendar-today-bg: var(--color-primary-100);
+        --calendar-today-text: var(--color-primary);
+
+        /* Override dynamic color-mix scales to blend with dark instead of white */
+        --color-primary-50: color-mix(in srgb, var(--color-primary) 10%, #0b1329);
+        --color-primary-100: color-mix(in srgb, var(--color-primary) 20%, #0b1329);
+        --color-primary-200: color-mix(in srgb, var(--color-primary) 35%, #0b1329);
+        --color-primary-300: color-mix(in srgb, var(--color-primary) 50%, #0b1329);
+        --color-primary-400: color-mix(in srgb, var(--color-primary) 70%, #0b1329);
+
+        --color-secondary-50: color-mix(in srgb, var(--color-secondary) 10%, #090f1d);
+        --color-secondary-100: color-mix(in srgb, var(--color-secondary) 18%, #090f1d);
+        --color-secondary-200: color-mix(in srgb, var(--color-secondary) 30%, #090f1d);
+        --color-secondary-300: color-mix(in srgb, var(--color-secondary) 45%, #090f1d);
+        --color-secondary-400: color-mix(in srgb, var(--color-secondary) 60%, #090f1d);
+
+        --color-success-50: color-mix(in srgb, var(--color-success) 10%, #061f14);
+        --color-success-100: color-mix(in srgb, var(--color-success) 20%, #061f14);
+        --color-success-200: color-mix(in srgb, var(--color-success) 35%, #061f14);
+
+        --color-danger-50: color-mix(in srgb, var(--color-danger) 10%, #1f0808);
+        --color-danger-100: color-mix(in srgb, var(--color-danger) 20%, #1f0808);
+        --color-danger-200: color-mix(in srgb, var(--color-danger) 35%, #1f0808);
+
+        --color-warning-50: color-mix(in srgb, var(--color-warning) 10%, #1f1b05);
+        --color-warning-100: color-mix(in srgb, var(--color-warning) 20%, #1f1b05);
+        --color-warning-200: color-mix(in srgb, var(--color-warning) 35%, #1f1b05);
+
+        --color-ternary-50: color-mix(in srgb, var(--color-ternary) 10%, #14081f);
+        --color-ternary-100: color-mix(in srgb, var(--color-ternary) 20%, #14081f);
+        --color-ternary-200: color-mix(in srgb, var(--color-ternary) 35%, #14081f);
+
+        --color-info-50: color-mix(in srgb, var(--color-info) 10%, #08141f);
+        --color-info-100: color-mix(in srgb, var(--color-info) 20%, #08141f);
+        --color-info-200: color-mix(in srgb, var(--color-info) 35%, #08141f);
+      }
+
+      /* Force dark mode class overrides for common backgrounds, borders, and texts */
+      .dark, [data-theme="dark"] {
+        color: #cbd5e1;
+      }
+      .dark .text-slate-800, [data-theme="dark"] .text-slate-800,
+      .dark .text-gray-800, [data-theme="dark"] .text-gray-800,
+      .dark h1, [data-theme="dark"] h1,
+      .dark h2, [data-theme="dark"] h2,
+      .dark h3, [data-theme="dark"] h3 {
+        color: #f8fafc !important;
+      }
+      .dark .text-slate-700, [data-theme="dark"] .text-slate-700,
+      .dark .text-gray-700, [data-theme="dark"] .text-gray-700 {
+        color: #cbd5e1 !important;
+      }
+      .dark .text-slate-600, [data-theme="dark"] .text-slate-600,
+      .dark .text-gray-600, [data-theme="dark"] .text-gray-600 {
+        color: #cbd5e1 !important;
+      }
+      .dark .text-slate-500, [data-theme="dark"] .text-slate-500,
+      .dark .text-gray-500, [data-theme="dark"] .text-gray-500 {
+        color: #94a3b8 !important;
+      }
+      .dark .text-slate-400, [data-theme="dark"] .text-slate-400,
+      .dark .text-gray-400, [data-theme="dark"] .text-gray-400 {
+        color: #64748b !important;
+      }
+
+      .dark .bg-white, [data-theme="dark"] .bg-white {
+        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 {
+        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-slate-200, [data-theme="dark"] .border-slate-200,
+      .dark .border-gray-200, [data-theme="dark"] .border-gray-200 {
+        border-color: #374151 !important;
+      }
+
+      .dark .bg-gray-100, [data-theme="dark"] .bg-gray-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-slate-300, [data-theme="dark"] .border-slate-300 {
+        border-color: #4b5563 !important;
+      }
+      .dark .bg-gray-200, [data-theme="dark"] .bg-gray-200,
+      .dark .bg-slate-200, [data-theme="dark"] .bg-slate-200 {
+        background-color: #374151 !important;
+      }
+
+      /* Light mode overrides inside forced light subtree */
+      [data-theme="light"] {
+        color: #334155;
+        --layout-bg: var(--color-secondary-50);
+        --card-bg: #ffffff;
+        --card-border: #f1f5f9;
+        --card-header-bg: #f8fafc;
+        --card-header-border: #e2e8f0;
+        --input-bg: #ffffff;
+        --input-border: #cbd5e1;
+        --input-placeholder: #94a3b8;
+        --input-text-color: #1e293b;
+        --modal-bg: #ffffff;
+        --modal-footer-bg: #f8fafc;
+        --modal-header-border: #e2e8f0;
+        --modal-footer-border: #e2e8f0;
+        --calendar-bg: #ffffff;
+        --calendar-border: #e2e8f0;
+        --calendar-header-text: #1e293b;
+        --calendar-header-hover: #f1f5f9;
+        --calendar-days-text: #334155;
+        --calendar-selected-bg: var(--color-primary);
+        --calendar-selected-text: #ffffff;
+        --calendar-range-bg: var(--color-primary-50);
+        --calendar-today-bg: var(--color-primary-100);
+        --calendar-today-text: var(--color-primary);
+
+        --color-primary-50: color-mix(in srgb, var(--color-primary) 5%, #ffffff);
+        --color-primary-100: color-mix(in srgb, var(--color-primary) 10%, #ffffff);
+        --color-primary-200: color-mix(in srgb, var(--color-primary) 30%, #ffffff);
+        --color-primary-300: color-mix(in srgb, var(--color-primary) 50%, #ffffff);
+        --color-primary-400: color-mix(in srgb, var(--color-primary) 70%, #ffffff);
+
+        --color-secondary-50: color-mix(in srgb, var(--color-secondary) 5%, #ffffff);
+        --color-secondary-100: color-mix(in srgb, var(--color-secondary) 10%, #ffffff);
+        --color-secondary-200: color-mix(in srgb, var(--color-secondary) 30%, #ffffff);
+        --color-secondary-300: color-mix(in srgb, var(--color-secondary) 50%, #ffffff);
+        --color-secondary-400: color-mix(in srgb, var(--color-secondary) 70%, #ffffff);
+
+        --color-success-50: color-mix(in srgb, var(--color-success) 5%, #ffffff);
+        --color-success-100: color-mix(in srgb, var(--color-success) 10%, #ffffff);
+        --color-success-200: color-mix(in srgb, var(--color-success) 30%, #ffffff);
+
+        --color-danger-50: color-mix(in srgb, var(--color-danger) 5%, #ffffff);
+        --color-danger-100: color-mix(in srgb, var(--color-danger) 10%, #ffffff);
+        --color-danger-200: color-mix(in srgb, var(--color-danger) 30%, #ffffff);
+
+        --color-warning-50: color-mix(in srgb, var(--color-warning) 5%, #ffffff);
+        --color-warning-100: color-mix(in srgb, var(--color-warning) 10%, #ffffff);
+        --color-warning-200: color-mix(in srgb, var(--color-warning) 30%, #ffffff);
+
+        --color-ternary-50: color-mix(in srgb, var(--color-ternary) 5%, #ffffff);
+        --color-ternary-100: color-mix(in srgb, var(--color-ternary) 10%, #ffffff);
+        --color-ternary-200: color-mix(in srgb, var(--color-ternary) 30%, #ffffff);
+
+        --color-info-50: color-mix(in srgb, var(--color-info) 5%, #ffffff);
+        --color-info-100: color-mix(in srgb, var(--color-info) 10%, #ffffff);
+        --color-info-200: color-mix(in srgb, var(--color-info) 30%, #ffffff);
+      }
+
+      [data-theme="light"] .text-slate-800,
+      [data-theme="light"] .text-gray-800,
+      [data-theme="light"] h1,
+      [data-theme="light"] h2,
+      [data-theme="light"] h3 {
+        color: #1e293b !important;
+      }
+      [data-theme="light"] .text-slate-700,
+      [data-theme="light"] .text-gray-700 {
+        color: #334155 !important;
+      }
+      [data-theme="light"] .text-slate-600,
+      [data-theme="light"] .text-gray-600 {
+        color: #475569 !important;
+      }
+      [data-theme="light"] .text-slate-500,
+      [data-theme="light"] .text-gray-500 {
+        color: #64748b !important;
+      }
+      [data-theme="light"] .text-slate-400,
+      [data-theme="light"] .text-gray-400 {
+        color: #94a3b8 !important;
+      }
+
+      [data-theme="light"] .bg-white {
+        background-color: #ffffff !important;
+      }
+      [data-theme="light"] .bg-slate-50,
+      [data-theme="light"] .bg-gray-50 {
+        background-color: #f8fafc !important;
+      }
+      [data-theme="light"] .border-slate-100,
+      [data-theme="light"] .border-gray-100,
+      [data-theme="light"] .border-slate-200,
+      [data-theme="light"] .border-gray-200 {
+        border-color: #e2e8f0 !important;
+      }
+      [data-theme="light"] .bg-gray-100,
+      [data-theme="light"] .bg-slate-100 {
+        background-color: #f1f5f9 !important;
+      }
+      [data-theme="light"] .border-gray-300,
+      [data-theme="light"] .border-slate-300 {
+        border-color: #cbd5e1 !important;
+      }
+      [data-theme="light"] .bg-gray-200,
+      [data-theme="light"] .bg-slate-200 {
+        background-color: #e2e8f0 !important;
+      }
+
+
+      /* Primary overrides (cyan mappings in UI library) */
+      .bg-cyan-400 { background-color: var(--color-primary) !important; }
+      .hover\\:bg-cyan-500:hover { background-color: var(--color-primary-hover) !important; }
+      .focus\\:ring-cyan-300:focus { --tw-ring-color: var(--color-primary-ring) !important; }
+      .text-cyan-600 { color: var(--color-primary) !important; }
+      .text-cyan-500 { color: var(--color-primary) !important; }
+      .border-cyan-400 { border-color: var(--color-primary) !important; }
+      .focus\\:border-cyan-500:focus { border-color: var(--color-primary-hover) !important; }
+      .focus\\:ring-cyan-500:focus { --tw-ring-color: var(--color-primary-hover) !important; }
+      .text-cyan-100 { color: var(--color-primary-soft) !important; }
+      .hover\\:bg-cyan-50:hover { background-color: var(--color-primary-soft) !important; }
+
+      /* Success overrides (green mappings in UI library) */
+      .bg-green-700 { background-color: var(--color-success) !important; }
+      .hover\\:bg-green-800:hover { background-color: var(--color-success-hover) !important; }
+      .focus\\:ring-green-300:focus { --tw-ring-color: var(--color-success-ring) !important; }
+      .text-green-700 { color: var(--color-success) !important; }
+      .border-green-700 { border-color: var(--color-success) !important; }
+      .bg-green-500 { background-color: var(--color-success) !important; }
+      .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; }
+
+      /* Warning overrides (yellow mappings in UI library) */
+      .bg-yellow-400 { background-color: var(--color-warning) !important; }
+      .hover\\:bg-yellow-500:hover { background-color: var(--color-warning-hover) !important; }
+      .focus\\:ring-yellow-300:focus { --tw-ring-color: var(--color-warning-ring) !important; }
+      .text-yellow-600 { color: var(--color-warning-hover) !important; }
+      .border-yellow-400 { border-color: var(--color-warning) !important; }
+      .bg-yellow-500 { background-color: var(--color-warning) !important; }
+      .hover\\:bg-yellow-600:hover { background-color: var(--color-warning-hover) !important; }
+
+      /* Ternary / Orange overrides */
+      .bg-orange-500 { background-color: var(--color-ternary) !important; }
+      .hover\\:bg-orange-500:hover { background-color: var(--color-ternary-hover) !important; }
+      .hover\\:bg-orange-600:hover { background-color: var(--color-ternary-hover) !important; }
+      .text-orange-500 { color: var(--color-ternary) !important; }
+      .text-orange-800 { color: var(--color-ternary-hover) !important; }
+      .bg-orange-200 { background-color: var(--color-ternary-soft) !important; }
+      .border-orange-400 { border-color: var(--color-ternary) !important; }
+      .border-orange-500 { border-color: var(--color-ternary) !important; }
+      .hover\\:bg-orange-50\\/30:hover { background-color: var(--color-ternary-soft) !important; }
+
+      /* Info / Blue overrides */
+      .bg-blue-500 { background-color: var(--color-info) !important; }
+      .hover\\:bg-blue-600:hover { background-color: var(--color-info-hover) !important; }
+      .text-blue-500 { color: var(--color-info) !important; }
+      .text-blue-600 { color: var(--color-info-hover) !important; }
+      .border-blue-500 { border-color: var(--color-info) !important; }
+
+      /* Secondary elements overrides */
+      button[class*="bg-white"][class*="hover:bg-gray-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 {
+        background-color: var(--color-secondary-hover) !important;
+      }
+
+      /* Custom Table styling overrides */
+      thead tr, tr.bg-secondary-50, tr[class*="bg-secondary-50"] {
+        background-color: var(--color-table-headerBg) !important;
+        border-bottom-color: color-mix(in srgb, var(--color-table-headerBg) 85%, #000000) !important;
+      }
+      th span, th div span {
+        color: var(--color-table-headerText) !important;
+      }
+      tbody tr {
+        background-color: var(--color-table-rowBg) !important;
+      }
+      tbody tr td, tbody tr td div {
+        color: var(--color-table-rowText) !important;
+      }
+      tbody tr:hover {
+        background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-table-rowBg)) !important;
+      }
+
+      /* Animation for Saved Indicator */
+      @keyframes fadeInOut {
+        0%, 100% { opacity: 0; transform: translateY(-4px); }
+        15%, 85% { opacity: 1; transform: translateY(0); }
+      }
+      .animate-fade-in-out {
+        animation: fadeInOut 1.5s ease-in-out forwards;
+      }
+
+      /* Fallback utility classes for blurs */
+      .backdrop-blur-xs {
+        backdrop-filter: blur(2px);
+        -webkit-backdrop-filter: blur(2px);
+      }
+      .backdrop-blur-xl {
+        backdrop-filter: blur(24px);
+        -webkit-backdrop-filter: blur(24px);
+      }
+
+      /* =======================================================================
+         AUTONOMOUS THEME DESIGNER STYLES (No Tailwind dependencies)
+         ======================================================================= */
+
+      @keyframes itBounce {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-8px); }
+      }
+      .it-theme-bounce {
+        animation: itBounce 3s infinite ease-in-out !important;
+      }
+
+      /* FAB styles */
+      .it-theme-fab {
+        position: fixed !important;
+        bottom: 24px !important;
+        right: 24px !important;
+        width: 56px !important;
+        height: 56px !important;
+        border-radius: 50% !important;
+        border: none !important;
+        color: #ffffff !important;
+        box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15) !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        cursor: pointer !important;
+        z-index: 99999 !important;
+        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, box-shadow 0.2s ease !important;
+        outline: none !important;
+      }
+      .it-theme-fab:hover {
+        transform: scale(1.1) !important;
+        box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2) !important;
+      }
+      .it-theme-fab:active {
+        transform: scale(0.95) !important;
+      }
+
+      /* Backdrop styles */
+      .it-theme-backdrop {
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        background-color: rgba(15, 23, 42, 0.3) !important;
+        backdrop-filter: blur(4px) !important;
+        -webkit-backdrop-filter: blur(4px) !important;
+        z-index: 99997 !important;
+        transition: opacity 0.3s ease !important;
+      }
+
+      /* Drawer container */
+      .it-theme-drawer {
+        position: fixed !important;
+        top: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        width: 100% !important;
+        max-width: 420px !important;
+        background-color: #ffffff !important;
+        box-shadow: -10px 0 25px -5px rgba(0, 0, 0, 0.08), -8px 0 10px -6px rgba(0, 0, 0, 0.08) !important;
+        z-index: 99998 !important;
+        display: flex !important;
+        flex-direction: column !important;
+        justify-content: space-between !important;
+        padding: 24px !important;
+        box-sizing: border-box !important;
+        border-left: 1px solid rgba(226, 232, 240, 0.8) !important;
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        font-family: Inter, system-ui, -apple-system, sans-serif !important;
+        color: #1e293b !important;
+      }
+
+      .dark .it-theme-drawer, [data-theme="dark"] .it-theme-drawer {
+        background-color: #0f172a !important;
+        border-left-color: rgba(30, 41, 59, 0.8) !important;
+        color: #f1f5f9 !important;
+      }
+
+      /* Drawer Header */
+      .it-theme-drawer-header {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+        padding-bottom: 16px !important;
+        border-bottom: 1px solid #e2e8f0 !important;
+      }
+      .dark .it-theme-drawer-header, [data-theme="dark"] .it-theme-drawer-header {
+        border-bottom-color: #1e293b !important;
+      }
+      
+      .it-theme-drawer-title-group {
+        display: flex !important;
+        align-items: center !important;
+        gap: 12px !important;
+      }
+
+      .it-theme-icon-container {
+        width: 36px !important;
+        height: 36px !important;
+        border-radius: 8px !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        color: #ffffff !important;
+      }
+
+      .it-theme-drawer-title {
+        font-size: 16px !important;
+        font-weight: 700 !important;
+        margin: 0 !important;
+        color: #1e293b !important;
+        line-height: 1.2 !important;
+      }
+      .dark .it-theme-drawer-title, [data-theme="dark"] .it-theme-drawer-title {
+        color: #f8fafc !important;
+      }
+
+      .it-theme-drawer-subtitle {
+        font-size: 11px !important;
+        color: #64748b !important;
+        margin: 2px 0 0 0 !important;
+        font-weight: 400 !important;
+      }
+      .dark .it-theme-drawer-subtitle, [data-theme="dark"] .it-theme-drawer-subtitle {
+        color: #94a3b8 !important;
+      }
+
+      .it-theme-close-btn {
+        background: none !important;
+        border: none !important;
+        color: #94a3b8 !important;
+        cursor: pointer !important;
+        padding: 6px !important;
+        border-radius: 6px !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        transition: background-color 0.2s, color 0.2s !important;
+      }
+      .it-theme-close-btn:hover {
+        background-color: #f1f5f9 !important;
+        color: #334155 !important;
+      }
+      .dark .it-theme-close-btn:hover, [data-theme="dark"] .it-theme-close-btn:hover {
+        background-color: #1e293b !important;
+        color: #f1f5f9 !important;
+      }
+
+      /* Sections inside Drawer */
+      .it-theme-section {
+        margin-top: 18px !important;
+      }
+      
+      .it-theme-section-title {
+        font-size: 10px !important;
+        font-weight: 700 !important;
+        text-transform: uppercase !important;
+        letter-spacing: 0.05em !important;
+        color: #94a3b8 !important;
+        margin-bottom: 8px !important;
+        margin-top: 0 !important;
+      }
+
+      /* Preset Grid */
+      .it-theme-presets-grid {
+        display: grid !important;
+        grid-template-columns: repeat(2, 1fr) !important;
+        gap: 8px !important;
+      }
+
+      .it-theme-preset-card {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: flex-start !important;
+        padding: 10px !important;
+        border-radius: 10px !important;
+        border: 1px solid #e2e8f0 !important;
+        background-color: rgba(255, 255, 255, 0.6) !important;
+        cursor: pointer !important;
+        text-align: left !important;
+        transition: all 0.2s ease !important;
+        width: 100% !important;
+        box-sizing: border-box !important;
+      }
+      .dark .it-theme-preset-card, [data-theme="dark"] .it-theme-preset-card {
+        border-color: #1e293b !important;
+        background-color: rgba(15, 23, 42, 0.4) !important;
+      }
+      
+      .it-theme-preset-card:hover {
+        border-color: #cbd5e1 !important;
+        transform: translateY(-1px) !important;
+      }
+      .dark .it-theme-preset-card:hover, [data-theme="dark"] .it-theme-preset-card:hover {
+        border-color: #334155 !important;
+      }
+
+      .it-theme-preset-name {
+        font-size: 11px !important;
+        font-weight: 600 !important;
+        color: #334155 !important;
+        margin-bottom: 6px !important;
+        margin-top: 0 !important;
+        white-space: nowrap !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        width: 100% !important;
+      }
+      .dark .it-theme-preset-name, [data-theme="dark"] .it-theme-preset-name {
+        color: #cbd5e1 !important;
+      }
+
+      .it-theme-preset-colors {
+        display: flex !important;
+        gap: 4px !important;
+      }
+
+      .it-theme-preset-dot {
+        width: 12px !important;
+        height: 12px !important;
+        border-radius: 50% !important;
+        border: 1px solid rgba(0,0,0,0.08) !important;
+      }
+
+      /* Color controls list */
+      .it-theme-color-list {
+        display: flex !important;
+        flex-direction: column !important;
+        gap: 6px !important;
+        max-height: 250px !important;
+        overflow-y: auto !important;
+        padding-right: 4px !important;
+      }
+
+      .it-theme-color-row {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+        padding: 6px 10px !important;
+        border-radius: 10px !important;
+        border: 1px solid #f1f5f9 !important;
+        background-color: rgba(248, 250, 252, 0.5) !important;
+      }
+      .dark .it-theme-color-row, [data-theme="dark"] .it-theme-color-row {
+        border-color: #1e293b !important;
+        background-color: rgba(9, 15, 29, 0.5) !important;
+      }
+
+      .it-theme-color-left {
+        display: flex !important;
+        align-items: center !important;
+        gap: 12px !important;
+      }
+
+      .it-theme-color-picker-btn {
+        position: relative !important;
+        width: 28px !important;
+        height: 28px !important;
+        border-radius: 50% !important;
+        overflow: hidden !important;
+        border: 1px solid #cbd5e1 !important;
+        box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06) !important;
+        cursor: pointer !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+      }
+      .dark .it-theme-color-picker-btn, [data-theme="dark"] .it-theme-color-picker-btn {
+        border-color: #475569 !important;
+      }
+
+      .it-theme-color-picker-input {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: 100% !important;
+        height: 100% !important;
+        opacity: 0 !important;
+        cursor: pointer !important;
+        margin: 0 !important;
+        padding: 0 !important;
+      }
+
+      .it-theme-color-picker-preview {
+        width: 100% !important;
+        height: 100% !important;
+        border-radius: 50% !important;
+      }
+
+      .it-theme-color-meta {
+        display: flex !important;
+        flex-direction: column !important;
+      }
+
+      .it-theme-color-label {
+        font-size: 10px !important;
+        font-weight: 700 !important;
+        text-transform: uppercase !important;
+        color: #475569 !important;
+      }
+      .dark .it-theme-color-label, [data-theme="dark"] .it-theme-color-label {
+        color: #cbd5e1 !important;
+      }
+
+      .it-theme-color-hex-text {
+        font-family: monospace !important;
+        font-size: 9px !important;
+        color: #94a3b8 !important;
+        margin-top: 1px !important;
+      }
+
+      .it-theme-color-text-input {
+        width: 80px !important;
+        padding: 4px 6px !important;
+        font-size: 11px !important;
+        font-family: monospace !important;
+        text-align: center !important;
+        border-radius: 6px !important;
+        border: 1px solid #cbd5e1 !important;
+        background-color: #ffffff !important;
+        color: #334155 !important;
+        outline: none !important;
+        transition: border-color 0.2s !important;
+        box-sizing: border-box !important;
+      }
+      .dark .it-theme-color-text-input, [data-theme="dark"] .it-theme-color-text-input {
+        border-color: #475569 !important;
+        background-color: #1e293b !important;
+        color: #cbd5e1 !important;
+      }
+
+      /* Mode Selector Segmented Control */
+      .it-theme-mode-selector {
+        display: grid !important;
+        grid-template-columns: repeat(3, 1fr) !important;
+        gap: 2px !important;
+        background-color: #f1f5f9 !important;
+        padding: 2px !important;
+        border-radius: 8px !important;
+        width: 180px !important;
+      }
+      .dark .it-theme-mode-selector, [data-theme="dark"] .it-theme-mode-selector {
+        background-color: #1e293b !important;
+      }
+
+      .it-theme-mode-btn {
+        background: none !important;
+        border: none !important;
+        padding: 6px 8px !important;
+        font-size: 11px !important;
+        font-weight: 600 !important;
+        color: #475569 !important;
+        border-radius: 6px !important;
+        cursor: pointer !important;
+        text-align: center !important;
+        transition: all 0.2s ease !important;
+      }
+      .dark .it-theme-mode-btn, [data-theme="dark"] .it-theme-mode-btn {
+        color: #94a3b8 !important;
+      }
+
+      .it-theme-mode-btn-active {
+        background-color: #ffffff !important;
+        color: var(--color-primary) !important;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
+      }
+      .dark .it-theme-mode-btn-active, [data-theme="dark"] .it-theme-mode-btn-active {
+        background-color: #0f172a !important;
+        color: var(--color-primary) !important;
+      }
+
+      /* Saved notification toast */
+      .it-theme-toast-container {
+        height: 20px !important;
+        margin: 6px 0 !important;
+        position: relative !important;
+      }
+
+      .it-theme-toast {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        display: flex !important;
+        justify-content: center !important;
+      }
+
+      .it-theme-toast-badge {
+        display: inline-flex !important;
+        align-items: center !important;
+        gap: 4px !important;
+        font-size: 10px !important;
+        font-weight: 600 !important;
+        background-color: rgba(34, 197, 94, 0.1) !important;
+        color: #16a34a !important;
+        padding: 3px 10px !important;
+        border-radius: 9999px !important;
+        border: 1px solid rgba(34, 197, 94, 0.2) !important;
+      }
+
+      /* Drawer Footer */
+      .it-theme-drawer-footer {
+        padding-top: 12px !important;
+        margin-top: 12px !important;
+        border-top: 1px solid #e2e8f0 !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+      }
+      .dark .it-theme-drawer-footer, [data-theme="dark"] .it-theme-drawer-footer {
+        border-top-color: #1e293b !important;
+      }
+
+      .it-theme-reset-btn {
+        display: flex !important;
+        align-items: center !important;
+        gap: 6px !important;
+        padding: 6px 12px !important;
+        font-size: 11px !important;
+        font-weight: 600 !important;
+        background: none !important;
+        border: none !important;
+        border-radius: 6px !important;
+        color: #64748b !important;
+        cursor: pointer !important;
+        transition: background-color 0.2s, color 0.2s !important;
+      }
+      .it-theme-reset-btn:hover {
+        background-color: #f1f5f9 !important;
+        color: #1e293b !important;
+      }
+      .dark .it-theme-reset-btn:hover, [data-theme="dark"] .it-theme-reset-btn:hover {
+        background-color: #1e293b !important;
+        color: #f8fafc !important;
+      }
+
+      .it-theme-done-btn {
+        padding: 6px 16px !important;
+        font-size: 11px !important;
+        font-weight: 700 !important;
+        border: none !important;
+        border-radius: 6px !important;
+        color: #ffffff !important;
+        cursor: pointer !important;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
+        transition: transform 0.2s, background-color 0.2s !important;
+      }
+      .it-theme-done-btn:hover {
+        transform: translateY(-1px) !important;
+      }
+    `;
+    setShowSavedToast(true);
+    const timer = setTimeout(() => setShowSavedToast(false), 1500);
+    return () => clearTimeout(timer);
+  }, [palette2, resolvedTheme]);
+  const updateColor = (key, value) => {
+    setPaletteState((prev) => {
+      if (key.includes(".")) {
+        const [section, subKey] = key.split(".");
+        return {
+          ...prev,
+          [section]: {
+            ...prev[section],
+            [subKey]: value
+          }
+        };
+      }
+      return {
+        ...prev,
+        [key]: value
+      };
+    });
+  };
+  const applyPreset = (colors2) => {
+    setPaletteState(colors2);
+  };
+  const resetTheme = () => {
+    const basePalette = {
+      ...DEFAULT_PALETTE,
+      ...theme2,
+      layout: { ...DEFAULT_PALETTE.layout, ...theme2?.layout },
+      table: { ...DEFAULT_PALETTE.table, ...theme2?.table }
+    };
+    setPaletteState(basePalette);
+  };
+  return /* @__PURE__ */ jsxs22(
+    ITThemeContext.Provider,
+    {
+      value: {
+        palette: palette2,
+        colors: palette2,
+        setPalette: setPaletteState,
+        updateColor,
+        resetTheme,
+        applyPreset,
+        resolvedTheme,
+        darkModeMode,
+        setDarkModeMode
+      },
+      children: [
+        children,
+        /* @__PURE__ */ jsx31(
+          "button",
+          {
+            onClick: () => setIsOpen((prev) => !prev),
+            className: "it-theme-fab it-theme-bounce",
+            style: {
+              backgroundColor: "var(--color-primary)"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = "var(--color-primary-hover)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "var(--color-primary)";
+            },
+            "aria-label": "Configurar Paleta de Colores",
+            title: "Configurar Paleta de Colores",
+            children: /* @__PURE__ */ jsx31(MdPalette, { style: { width: "28px", height: "28px" } })
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsxs22(Fragment6, { children: [
+          /* @__PURE__ */ jsx31(
+            "div",
+            {
+              onClick: () => setIsOpen(false),
+              className: "it-theme-backdrop"
+            }
+          ),
+          /* @__PURE__ */ jsxs22("div", { className: "it-theme-drawer", children: [
+            /* @__PURE__ */ jsxs22("div", { children: [
+              /* @__PURE__ */ jsxs22("div", { className: "it-theme-drawer-header", children: [
+                /* @__PURE__ */ jsxs22("div", { className: "it-theme-drawer-title-group", children: [
+                  /* @__PURE__ */ jsx31(
+                    "div",
+                    {
+                      className: "it-theme-icon-container",
+                      style: { backgroundColor: "var(--color-primary)" },
+                      children: /* @__PURE__ */ jsx31(MdPalette, { style: { width: "20px", height: "20px" } })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs22("div", { children: [
+                    /* @__PURE__ */ jsx31("h3", { className: "it-theme-drawer-title", children: "ITTheme Designer" }),
+                    /* @__PURE__ */ jsx31("p", { className: "it-theme-drawer-subtitle", children: "Configure color tokens in real-time" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx31(
+                  "button",
+                  {
+                    onClick: () => setIsOpen(false),
+                    className: "it-theme-close-btn",
+                    children: /* @__PURE__ */ jsx31(MdClose, { style: { width: "20px", height: "20px" } })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx31("div", { className: "it-theme-toast-container", children: showSavedToast && /* @__PURE__ */ jsx31("div", { className: "it-theme-toast", children: /* @__PURE__ */ jsxs22("span", { className: "it-theme-toast-badge", children: [
+                /* @__PURE__ */ jsx31(MdCheck, { style: { width: "14px", height: "14px" } }),
+                "Auto-saved to LocalStorage"
+              ] }) }) }),
+              /* @__PURE__ */ jsxs22("div", { className: "it-theme-section", style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "16px" }, children: [
+                /* @__PURE__ */ jsx31("h4", { className: "it-theme-section-title", style: { margin: 0 }, children: "Apariencia" }),
+                /* @__PURE__ */ jsxs22("div", { className: "it-theme-mode-selector", children: [
+                  /* @__PURE__ */ jsx31(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setDarkModeMode("light"),
+                      className: `it-theme-mode-btn ${darkModeMode === "light" ? "it-theme-mode-btn-active" : ""}`,
+                      children: "Claro"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx31(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setDarkModeMode("dark"),
+                      className: `it-theme-mode-btn ${darkModeMode === "dark" ? "it-theme-mode-btn-active" : ""}`,
+                      children: "Oscuro"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx31(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setDarkModeMode("system"),
+                      className: `it-theme-mode-btn ${darkModeMode === "system" ? "it-theme-mode-btn-active" : ""}`,
+                      children: "Local"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs22("div", { className: "it-theme-section", children: [
+                /* @__PURE__ */ jsx31("h4", { className: "it-theme-section-title", children: "Presets" }),
+                /* @__PURE__ */ jsx31("div", { className: "it-theme-presets-grid", children: PRESETS.map((preset) => {
+                  const isSelected = JSON.stringify(preset.colors) === JSON.stringify(palette2);
+                  return /* @__PURE__ */ jsxs22(
+                    "button",
+                    {
+                      onClick: () => applyPreset(preset.colors),
+                      className: "it-theme-preset-card",
+                      style: isSelected ? {
+                        borderColor: "var(--color-primary)",
+                        backgroundColor: "color-mix(in srgb, var(--color-primary) 5%, transparent)",
+                        boxShadow: "0 0 0 1px var(--color-primary)"
+                      } : {},
+                      children: [
+                        /* @__PURE__ */ jsx31("span", { className: "it-theme-preset-name", children: preset.name }),
+                        /* @__PURE__ */ jsxs22("div", { className: "it-theme-preset-colors", children: [
+                          /* @__PURE__ */ jsx31(
+                            "span",
+                            {
+                              className: "it-theme-preset-dot",
+                              style: { backgroundColor: preset.colors.primary }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx31(
+                            "span",
+                            {
+                              className: "it-theme-preset-dot",
+                              style: { backgroundColor: preset.colors.secondary }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx31(
+                            "span",
+                            {
+                              className: "it-theme-preset-dot",
+                              style: { backgroundColor: preset.colors.ternary }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx31(
+                            "span",
+                            {
+                              className: "it-theme-preset-dot",
+                              style: { backgroundColor: preset.colors.success }
+                            }
+                          )
+                        ] })
+                      ]
+                    },
+                    preset.name
+                  );
+                }) })
+              ] }),
+              /* @__PURE__ */ jsxs22("div", { children: [
+                /* @__PURE__ */ jsxs22("div", { className: "it-theme-section", children: [
+                  /* @__PURE__ */ jsx31("h4", { className: "it-theme-section-title", children: "Base Brand Colors" }),
+                  /* @__PURE__ */ jsx31("div", { className: "it-theme-color-list", children: [
+                    "primary",
+                    "secondary",
+                    "ternary",
+                    "danger",
+                    "success",
+                    "info",
+                    "alert",
+                    "warning"
+                  ].map((key) => {
+                    return /* @__PURE__ */ jsxs22(
+                      "div",
+                      {
+                        className: "it-theme-color-row",
+                        children: [
+                          /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-left", children: [
+                            /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-picker-btn", children: [
+                              /* @__PURE__ */ jsx31(
+                                "input",
+                                {
+                                  type: "color",
+                                  value: getNestedValue3(palette2, key),
+                                  onChange: (e) => updateColor(key, e.target.value),
+                                  className: "it-theme-color-picker-input"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx31(
+                                "div",
+                                {
+                                  className: "it-theme-color-picker-preview",
+                                  style: { backgroundColor: getNestedValue3(palette2, key) }
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-meta", children: [
+                              /* @__PURE__ */ jsx31("span", { className: "it-theme-color-label", children: key }),
+                              /* @__PURE__ */ jsx31("div", { className: "it-theme-color-hex-text", children: getNestedValue3(palette2, key) })
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ jsx31(
+                            "input",
+                            {
+                              type: "text",
+                              value: getNestedValue3(palette2, key),
+                              onChange: (e) => updateColor(key, e.target.value),
+                              placeholder: "#000000",
+                              className: "it-theme-color-text-input"
+                            }
+                          )
+                        ]
+                      },
+                      key
+                    );
+                  }) })
+                ] }),
+                /* @__PURE__ */ jsxs22("div", { className: "it-theme-section", children: [
+                  /* @__PURE__ */ jsx31("h4", { className: "it-theme-section-title", children: "Sidebar & Navbar Styles" }),
+                  /* @__PURE__ */ jsx31("div", { className: "it-theme-color-list", children: [
+                    "layout.sidebarBg",
+                    "layout.sidebarText",
+                    "layout.navbarBg",
+                    "layout.navbarText"
+                  ].map((key) => {
+                    const displayLabel = key.split(".")[1];
+                    return /* @__PURE__ */ jsxs22(
+                      "div",
+                      {
+                        className: "it-theme-color-row",
+                        children: [
+                          /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-left", children: [
+                            /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-picker-btn", children: [
+                              /* @__PURE__ */ jsx31(
+                                "input",
+                                {
+                                  type: "color",
+                                  value: getNestedValue3(palette2, key),
+                                  onChange: (e) => updateColor(key, e.target.value),
+                                  className: "it-theme-color-picker-input"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx31(
+                                "div",
+                                {
+                                  className: "it-theme-color-picker-preview",
+                                  style: { backgroundColor: getNestedValue3(palette2, key) }
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-meta", children: [
+                              /* @__PURE__ */ jsx31("span", { className: "it-theme-color-label", children: displayLabel }),
+                              /* @__PURE__ */ jsx31("div", { className: "it-theme-color-hex-text", children: getNestedValue3(palette2, key) })
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ jsx31(
+                            "input",
+                            {
+                              type: "text",
+                              value: getNestedValue3(palette2, key),
+                              onChange: (e) => updateColor(key, e.target.value),
+                              placeholder: "#000000",
+                              className: "it-theme-color-text-input"
+                            }
+                          )
+                        ]
+                      },
+                      key
+                    );
+                  }) })
+                ] }),
+                /* @__PURE__ */ jsxs22("div", { className: "it-theme-section", style: { paddingBottom: "24px" }, children: [
+                  /* @__PURE__ */ jsx31("h4", { className: "it-theme-section-title", children: "Table Styles" }),
+                  /* @__PURE__ */ jsx31("div", { className: "it-theme-color-list", children: [
+                    "table.headerBg",
+                    "table.headerText",
+                    "table.rowBg",
+                    "table.rowText"
+                  ].map((key) => {
+                    const displayLabel = key.split(".")[1];
+                    return /* @__PURE__ */ jsxs22(
+                      "div",
+                      {
+                        className: "it-theme-color-row",
+                        children: [
+                          /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-left", children: [
+                            /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-picker-btn", children: [
+                              /* @__PURE__ */ jsx31(
+                                "input",
+                                {
+                                  type: "color",
+                                  value: getNestedValue3(palette2, key),
+                                  onChange: (e) => updateColor(key, e.target.value),
+                                  className: "it-theme-color-picker-input"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx31(
+                                "div",
+                                {
+                                  className: "it-theme-color-picker-preview",
+                                  style: { backgroundColor: getNestedValue3(palette2, key) }
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-meta", children: [
+                              /* @__PURE__ */ jsx31("span", { className: "it-theme-color-label", children: displayLabel }),
+                              /* @__PURE__ */ jsx31("div", { className: "it-theme-color-hex-text", children: getNestedValue3(palette2, key) })
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ jsx31(
+                            "input",
+                            {
+                              type: "text",
+                              value: getNestedValue3(palette2, key),
+                              onChange: (e) => updateColor(key, e.target.value),
+                              placeholder: "#000000",
+                              className: "it-theme-color-text-input"
+                            }
+                          )
+                        ]
+                      },
+                      key
+                    );
+                  }) })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs22("div", { className: "it-theme-drawer-footer", children: [
+              /* @__PURE__ */ jsxs22(
+                "button",
+                {
+                  onClick: resetTheme,
+                  className: "it-theme-reset-btn",
+                  children: [
+                    /* @__PURE__ */ jsx31(MdRefresh, { style: { width: "16px", height: "16px" } }),
+                    "Reset Defaults"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx31(
+                "button",
+                {
+                  onClick: () => setIsOpen(false),
+                  className: "it-theme-done-btn",
+                  style: {
+                    backgroundColor: "var(--color-primary)"
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = "var(--color-primary-hover)";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "var(--color-primary)";
+                  },
+                  children: "Done"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 
 // src/types/yup.types.ts
@@ -5279,6 +7174,7 @@ var createValidationSchema = (fields) => Yup.object().shape(
   }, {})
 );
 export {
+  FileTypeEnum,
   ITBadget,
   ITButton,
   calendar_default as ITCalendar,
@@ -5299,10 +7195,14 @@ export {
   ITSlideToggle,
   ITStepper,
   ITTable,
+  tabs_default as ITTabs,
   ITText,
   ITThemeProvider,
   ITTimePicker,
   ITToast,
-  createValidationSchema
+  tripleFilter_default as ITTripleFilter,
+  UploadStatus,
+  createValidationSchema,
+  useITTheme
 };
 //# sourceMappingURL=index.js.map