change utils location

css/index.js

@@ -1,3 +0,0 @@
-// css/index.js
-import './sigpro.min.css';
-export default { version: '1.0.0' };

dist/sigpro-ui.esm.js

@@ -436,7 +436,7 @@ if (typeof window < "u")
     window[s] = (t, r) => S(e, t, r);
   });
 
-// src/core/utils.js
+// src/utils.js
 var val2 = (t) => typeof t === "function" ? t() : t;
 var ui = (baseClass, additionalClassOrFn) => typeof additionalClassOrFn === "function" ? () => `${baseClass} ${additionalClassOrFn() || ""}`.trim() : `${baseClass} ${additionalClassOrFn || ""}`.trim();
 var getIcon = (icon) => {

dist/sigpro-ui.js

@@ -467,7 +467,7 @@
       window[s] = (t, r) => S(e, t, r);
     });
 
-  // src/core/utils.js
+  // src/utils.js
   var val2 = (t) => typeof t === "function" ? t() : t;
   var ui = (baseClass, additionalClassOrFn) => typeof additionalClassOrFn === "function" ? () => `${baseClass} ${additionalClassOrFn() || ""}`.trim() : `${baseClass} ${additionalClassOrFn || ""}`.trim();
   var getIcon = (icon) => {

dist/sigpro.css

@@ -6874,10 +6874,10 @@
   font-size: 14px;
 }
 .input, .select, .textarea {
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   &:focus, &:focus-within {
-    outline: 2px solid transparent !important;
+    outline: 1px solid transparent !important;
-    outline-offset: 2px !important;
+    outline-offset: 1px !important;
   }
   &:hover:not(:focus) {
     background-color: oklch(from var(--color-base-100) calc(l - 0.03) c h);

docs/components/swap.md

@@ -46,8 +46,7 @@ const BasicDemo = () => {
   return Swap({
     value: isOn,
     on: "🌟 ON",
-    off: "💫 OFF",
+    off: "💫 OFF"
-    onclick: () => isOn(!isOn())
   });
 };
 Mount(BasicDemo, '#demo-basic');
@@ -69,8 +68,7 @@ const IconsDemo = () => {
   return Swap({
     value: isOn,
     on: "👁️",
-    off: "👁️‍🗨️",
+    off: "👁️‍🗨️"
-    onclick: () => isOn(!isOn())
   });
 };
 Mount(IconsDemo, '#demo-icons');
@@ -92,8 +90,7 @@ const EmojiDemo = () => {
   return Swap({
     value: isOn,
     on: "❤️",
-    off: "🖤",
+    off: "🖤"
-    onclick: () => isOn(!isOn())
   });
 };
 Mount(EmojiDemo, '#demo-emoji');
@@ -115,8 +112,7 @@ const CustomDemo = () => {
   return Swap({
     value: isOn,
     on: Div({ class: "badge badge-success gap-1" }, ["✅", " Active"]),
-    off: Div({ class: "badge badge-ghost gap-1" }, ["⭕", " Inactive"]),
+    off: Div({ class: "badge badge-ghost gap-1" }, ["⭕", " Inactive"])
-    onclick: () => isOn(!isOn())
   });
 };
 Mount(CustomDemo, '#demo-custom');
@@ -139,8 +135,7 @@ const ReactiveDemo = () => {
     Swap({
       value: isOn,
       on: "👁️",
-      off: "👁️‍🗨️",
+      off: "👁️‍🗨️"
-      onclick: () => isOn(!isOn())
     }),
     Div({ class: 'text-center' }, () => 
       isOn() 
@@ -173,8 +168,7 @@ const ModeDemo = () => {
       Swap({
         value: darkMode,
         on: "🌙",
-        off: "☀️",
+        off: "☀️"
-        onclick: () => darkMode(!darkMode())
       })
     ]),
     Div({ class: 'flex justify-between items-center' }, [
@@ -182,8 +176,7 @@ const ModeDemo = () => {
       Swap({
         value: notifications,
         on: "🔔",
-        off: "🔕",
+        off: "🔕"
-        onclick: () => notifications(!notifications())
       })
     ]),
     Div({ class: 'flex justify-between items-center' }, [
@@ -191,8 +184,7 @@ const ModeDemo = () => {
       Swap({
         value: sound,
         on: "🔊",
-        off: "🔇",
+        off: "🔇"
-        onclick: () => sound(!sound())
       })
     ]),
     Div({ class: 'mt-2 p-3 rounded-lg', style: () => darkMode() ? 'background: #1f2937; color: white' : 'background: #f3f4f6' }, [
@@ -277,8 +269,7 @@ const TodoDemo = () => {
         Swap({
           value: todo.completed,
           on: "✅",
-          off: "⬜",
+          off: "⬜"
-          onclick: () => todo.completed(!todo.completed())
         })
       ])
     ),

index.js

@@ -30,7 +30,7 @@ import * as TabsModule from './src/components/Tabs.js';
 import * as TimelineModule from './src/components/Timeline.js';
 import * as ToastModule from './src/components/Toast.js';
 import * as TooltipModule from './src/components/Tooltip.js';
-import { Locale, tt } from './src/core/utils.js';
+import { Locale, tt } from './src/utils.js';
 
 export const Components = {
   ...AccordionModule,

package.json

@@ -22,8 +22,8 @@
       "types": "./index.d.ts"
     },
     "./css": {
-      "import": "./css/index.js",
+      "import": "./dist/index.js",
-      "default": "./css/index.js"
+      "default": "./dist/index.js"
     }
   },
   "bugs": {
@@ -33,7 +33,6 @@
     "index.js",
     "index.d.ts",
     "dist",
-    "css",
     "README.md",
     "LICENSE"
   ],
@@ -45,9 +44,9 @@
   },
   "scripts": {
     "clean": "rm -rf ./dist ./css/*.css ./docs/*.js ./docs/*.css",
-    "build:cssmin": "tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.min.css --content './src/**/*.js' --minify",
+    "build:cssmin": "tailwindcss -i ./src/sigpro.css -o ./dist/sigpro.min.css --content './src/**/*.js' --minify",
-    "build:css": "tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.css --content './src/**/*.js'",
+    "build:css": "tailwindcss -i ./src/sigpro.css -o ./dist/sigpro.css --content './src/**/*.js'",
-    "build:cssdocs": "tailwindcss -i ./src/css/sigpro.css -o ./docs/sigpro.css --content './src/**/*.js' --minify",
+    "build:cssdocs": "tailwindcss -i ./src/sigpro.css -o ./docs/sigpro.css --content './src/**/*.js' --minify",
     "build:js": "bun run build:js:iife && bun run build:js:esm",
     "build:js:iife": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI && bun build ./index.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
     "build:js:esm": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.js --format=esm && bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.min.js --format=esm --minify",
@@ -56,10 +55,6 @@
     "prepublishOnly": "bun run build",
     "docs": "bun x serve docs"
   },
-  "sideEffects": [
-    "./css/*",
-    "**/*.css"
-  ],
   "type": "module",
   "unpkg": "./dist/sigpro-ui.min.js"
 }

src/components/Accordion.js

@@ -1,6 +1,6 @@
 // components/Accordion.js
 import { Tag } from "sigpro";
-import { ui, val } from "../core/utils.js";
+import { ui, val } from "../utils.js";
 
 /**
  * Accordion component

src/components/Alert.js

@@ -1,6 +1,6 @@
 // components/Alert.js
 import { Tag } from "sigpro";
-import { ui, getIcon } from "../core/utils.js";
+import { ui, getIcon } from "../utils.js";
 
 /**
  * Alert component

src/components/Autocomplete.js

@@ -1,6 +1,6 @@
 // components/Autocomplete.js
 import { $, Tag, For } from "sigpro";
-import { val } from "../core/utils.js";
+import { val } from "../utils.js";
 import { Input } from "./Input.js";
 
 /**

src/components/Badge.js

@@ -1,6 +1,6 @@
 // components/Badge.js
 import { Tag } from "sigpro";
-import { ui } from "../core/utils.js";
+import { ui } from "../utils.js";
 
 /**
  * Badge component

src/components/Button.js

@@ -1,6 +1,6 @@
 // components/Button.js
 import { Tag } from "sigpro";
-import { ui, val, getIcon } from "../core/utils.js";
+import { ui, val, getIcon } from "../utils.js";
 
 /**
  * Button component

src/components/Checkbox.js

@@ -1,6 +1,6 @@
 // components/Checkbox.js
 import { Tag } from "sigpro";
-import { val, ui } from "../core/utils.js";
+import { val, ui } from "../utils.js";
 
 /**
  * Checkbox component

src/components/Colorpicker.js

@@ -1,6 +1,6 @@
 // components/Colorpicker.js
 import { $, Tag, If } from "sigpro";
-import { val, ui } from "../core/utils.js";
+import { val, ui } from "../utils.js";
 
 /**
  * Colorpicker component

src/components/Datepicker.js

@@ -1,6 +1,6 @@
 // components/Datepicker.js
 import { $, Tag, If } from "sigpro";
-import { val, ui, getIcon } from "../core/utils.js";
+import { val, ui, getIcon } from "../utils.js";
 import { Input } from "./Input.js";
 
 /**
@@ -69,7 +69,6 @@ export const Datepicker = (props) => {
     }
   };
 
-  // FIX CRÍTICO: Señal manual y Watch para displayValue
   const displayValue = $("");
 
   Watch(() => {
@@ -110,7 +109,7 @@ export const Datepicker = (props) => {
           type: "range",
           min: 0,
           max: 23,
-          value: hVal, // Sincronizado con hVal
+          value: hVal,
           class: "range range-xs flex-1",
           oninput: (e) => {
             const newHour = parseInt(e.target.value);
@@ -128,7 +127,7 @@ export const Datepicker = (props) => {
     Input({
       label,
       placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
-      value: displayValue, // Ahora es una señal que actualizamos manualmente
+      value: displayValue,
       readonly: true,
       icon: getIcon("icon-[lucide--calendar]"),
       onclick: (e) => {

src/components/Drawer.js

@@ -1,6 +1,6 @@
 // components/Drawer.js
 import { Tag } from "sigpro";
-import { ui } from "../core/utils.js";
+import { ui } from "../utils.js";
 
 /**
  * Drawer component

src/components/Dropdown.js

@@ -1,6 +1,6 @@
 // components/Dropdown.js
 import { Tag, For, Watch } from "sigpro";
-import { ui } from "../core/utils.js";
+import { ui } from "../utils.js";
 
 /**
  * Dropdown component - Solo soporta menús (items)

src/components/Fab.js

@@ -1,6 +1,6 @@
 // components/Fab.js
 import { Tag } from "sigpro";
-import { val, ui, getIcon } from "../core/utils.js";
+import { val, ui, getIcon } from "../utils.js";
 
 /**
  * Fab (Floating Action Button) component

src/components/Fieldset.js

@@ -1,6 +1,6 @@
 // components/Fieldset.js
 import { Tag } from "sigpro";
-import { val, ui } from "../core/utils.js";
+import { val, ui } from "../utils.js";
 
 /**
  * Fieldset component

src/components/Fileinput.js

@@ -1,6 +1,6 @@
 // components/Fileinput.js
 import { $, Tag, If, For } from "sigpro";
-import { ui, getIcon } from "../core/utils.js";
+import { ui, getIcon } from "../utils.js";
 
 /**
  * Fileinput component

src/components/Icon.js

@@ -0,0 +1,7 @@
+// components/Icon.js
+import { Tag } from "sigpro";
+
+export const Icon = (iconClass) => {
+  if (!iconClass) return null;
+  return Tag("span", { class: iconClass });
+};

src/components/Indicator.js

@@ -1,6 +1,6 @@
 // components/Indicator.js
 import { Tag } from "sigpro";
-import { ui } from "../core/utils.js";
+import { ui } from "../utils.js";
 
 /**
  * Indicator component

src/components/Input.js

@@ -1,6 +1,6 @@
 // components/Input.js
 import { Tag } from "sigpro";
-import { val, ui, getIcon } from "../core/utils.js";
+import { val, ui, getIcon } from "../utils.js";
 
 /**
  * Input component - Input con ícono integrado, toggle password, validación y floating label opcional

src/components/Label.js

@@ -1,6 +1,6 @@
 // components/Label.js
 import { Tag } from "sigpro";
-import { ui, val } from "../core/utils.js";
+import { ui, val } from "../utils.js";
 
 export const Label = (props) => {
   const { children, value, floating = false, class: className, ...rest } = props;

src/components/List.js

@@ -1,6 +1,6 @@
 // components/List.js
 import { Tag, If, For } from "sigpro";
-import { ui, val } from "../core/utils.js";
+import { ui, val } from "../utils.js";
 
 /**
  * List component

src/components/Menu.js

@@ -1,6 +1,6 @@
 // components/Menu.js
 import { Tag, For } from "sigpro";
-import { val, ui } from "../core/utils.js";
+import { val, ui } from "../utils.js";
 
 /**
  * Menu component

src/components/Modal.js

@@ -1,6 +1,6 @@
 // components/Modal.js
 import { Tag, Watch } from "sigpro";
-import { ui } from "../core/utils.js";
+import { ui } from "../utils.js";
 import { Button } from "./Button.js";
 
 /**

src/components/Navbar.js

@@ -1,6 +1,6 @@
 // components/Navbar.js
 import { Tag } from "sigpro";
-import { ui } from "../core/utils.js";
+import { ui } from "../utils.js";
 
 /**
  * Navbar component

src/components/Radio.js

@@ -1,6 +1,6 @@
 // components/Radio.js
 import { Tag } from "sigpro";
-import { val, ui } from "../core/utils.js";
+import { val, ui } from "../utils.js";
 
 /**
  * Radio component

src/components/Range.js

@@ -1,6 +1,6 @@
 // components/Range.js
 import { Tag } from "sigpro";
-import { val, ui } from "../core/utils.js";
+import { val, ui } from "../utils.js";
 
 /**
  * Range component

src/components/Rating.js

@@ -1,6 +1,6 @@
 // components/Rating.js
 import { Tag } from "sigpro";
-import { val, ui } from "../core/utils.js";
+import { val, ui } from "../utils.js";
 
 /**
  * Rating component

src/components/Select.js

@@ -1,6 +1,6 @@
 // components/Select.js
 import { Tag, For } from "sigpro";
-import { val, ui } from "../core/utils.js";
+import { val, ui } from "../utils.js";
 
 /**
  * Select component

src/components/Stack.js

@@ -1,6 +1,6 @@
 // components/Stack.js
 import { Tag } from "sigpro";
-import { ui } from "../core/utils.js";
+import { ui } from "../utils.js";
 
 /**
  * Stack component

src/components/Stat.js

@@ -1,6 +1,6 @@
 // components/Stat.js
 import { Tag } from "sigpro";
-import { val, ui } from "../core/utils.js";
+import { val, ui } from "../utils.js";
 
 /**
  * Stat component

src/components/Swap.js

@@ -1,6 +1,6 @@
 // components/Swap.js
 import { Tag } from "sigpro";
-import { ui, val } from "../core/utils.js";
+import { ui, val } from "../utils.js";
 
 /**
  * Swap component
@@ -15,7 +15,7 @@ export const Swap = (props) => {
   return Tag("label", { ...rest, class: ui('swap', className) }, [
     Tag("input", {
       type: "checkbox",
-      checked: () => val(value),  // ← FUNCIÓN: se reevalúa cuando la señal cambia
+      checked: () => val(value),
       onclick: (e) => {
         if (typeof value === "function") {
           value(e.target.checked);

src/components/Table.js

@@ -1,6 +1,6 @@
 // components/Table.js
 import { Tag, For, If } from "sigpro";
-import { val, ui } from "../core/utils.js";
+import { val, ui } from "../utils.js";
 
 /**
  * Table component

src/components/Tabs.js

@@ -1,6 +1,6 @@
 // components/Tabs.js
 import { $, Tag, Watch } from "sigpro";
-import { val, ui, getIcon } from "..//core/utils.js";
+import { val, ui, getIcon } from "../utils.js";
 
 /**
  * Tabs component

src/components/Timeline.js

@@ -1,6 +1,6 @@
 // components/Timeline.js
 import { Tag } from "sigpro";
-import { val, ui, getIcon } from "../core/utils.js";
+import { val, ui, getIcon } from "../utils.js";
 
 /**
  * Timeline component

src/components/Toast.js

@@ -1,6 +1,6 @@
 // components/Toast.js
 import { Tag, Mount } from "sigpro";
-import { getIcon } from "../core/utils.js";
+import { getIcon } from "../utils.js";
 import { Button } from "./Button.js";
 
 /**

src/components/Tooltip.js

@@ -1,6 +1,6 @@
 // components/Tooltip.js
 import { Tag } from "sigpro";
-import { ui } from "../core/utils.js";
+import { ui } from "../utils.js";
 
 /**
  * Tooltip component

src/css/index.js

@@ -1,4 +0,0 @@
-// css/index.js
-import './sigpro.css';
-
-export default { version: '1.0.0' };

src/css/sigpro.css

@@ -1,145 +0,0 @@
-@import "tailwindcss";
-@plugin "daisyui";
-@plugin "@iconify/tailwind4";
-
-/* join join-vertical lg:join-horizontal divider divider-horizontal validator validator-hint glass */
-
-@plugin "daisyui/theme" {
-  name: "light";
-  default: true;
-  prefersdark: false;
-  color-scheme: "light";
-  --color-base-100: oklch(100% 0 0);
-  --color-base-200: oklch(98% 0 0);
-  --color-base-300: oklch(92% 0 0);
-  --color-base-content: oklch(25% 0.006 285);
-  --color-primary: oklch(25% 0.006 285);
-  --color-primary-content: oklch(98% 0 0);
-  --color-secondary: oklch(55% 0.046 257.417);
-  --color-secondary-content: oklch(98% 0 0);
-  --color-accent: oklch(96% 0 0);
-  --color-accent-content: oklch(25% 0.006 285);
-  --color-neutral: oklch(14% 0.005 285.823);
-  --color-neutral-content: oklch(92% 0.004 286.32);
-  --color-info: oklch(74% 0.16 232);
-  --color-success: oklch(62% 0.17 163);
-  --color-warning: oklch(82% 0.18 84);
-  --color-error: oklch(60% 0.25 27);
-  --radius-selector: 0.5rem;
-  --radius-field: 0.4rem;
-  --radius-box: 0.5rem;
-  --border: 1px;
-}
-
-@plugin "daisyui/theme" {
-  name: "dark";
-  default: false;
-  prefersdark: true;
-  color-scheme: "dark";
-  --color-base-100: oklch(15% 0.005 285.823);
-  --color-base-200: oklch(20% 0.005 285.823);
-  --color-base-300: oklch(30% 0.005 285.823);
-  --color-base-content: oklch(92% 0.004 286.32);
-  --color-primary: oklch(98% 0 0);
-  --color-primary-content: oklch(15% 0 0);
-  --color-secondary: oklch(65% 0.046 257.417);
-  --color-secondary-content: oklch(15% 0.005 285.823);
-  --color-accent: oklch(25% 0 0);
-  --color-accent-content: oklch(98% 0 0);
-  --color-neutral: oklch(92% 0.004 286.32);
-  --color-neutral-content: oklch(14% 0.005 285.823);
-  --color-info: oklch(70% 0.1 230);
-  --color-success: oklch(65% 0.15 160);
-  --color-warning: oklch(85% 0.15 90);
-  --color-error: oklch(55% 0.2 27);
-  --radius-selector: 0.5rem;
-  --radius-field: 0.4rem;
-  --radius-box: 0.5rem;
-  --border: 1px;
-}
-
-:root {
-  font-size: 14px;
-}
-
-/* Agrupamos los selectores normales de CSS */
-.input, .select, .textarea {
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  
-  &:focus, 
-  &:focus-within {
-    outline: 2px solid transparent !important;
-    outline-offset: 2px !important;
-  }
-
-  &:hover:not(:focus) {
-    background-color: oklch(from var(--color-base-100) calc(l - 0.03) c h);
-  }
-
-  &:focus {
-    --focus-color: var(--color-primary);
-
-    /* Selectores que detectan la variante de color sin importar el prefijo */
-    &[class*="-secondary"] { --focus-color: var(--color-secondary); }
-    &[class*="-accent"]    { --focus-color: var(--color-accent); }
-    &[class*="-neutral"]   { --focus-color: var(--color-neutral); }
-    &[class*="-ghost"]     { --focus-color: var(--color-base-content); }
-    &[class*="-info"]      { --focus-color: var(--color-info); }
-    &[class*="-success"]   { --focus-color: var(--color-success); }
-    &[class*="-warning"]   { --focus-color: var(--color-warning); }
-    &[class*="-error"]     { --focus-color: var(--color-error); }
-
-    background-color: oklch(from var(--focus-color) l c h / 0.05);
-    border-color: var(--focus-color);
-    box-shadow: 0 0 0 4px oklch(from var(--focus-color) l c h / 0.25);
-    
-    &[class*="-ghost"] {
-      border-width: 1px;
-    }
-  }
-}
-
-.floating-label span {
-  color: oklch(30% 0.01 260);  /* Gris más oscuro (30% es más oscuro que 45%) */
-  font-size: 1.1rem;             /* text-base: más grande que 0.875rem */
-  transition: all 0.2s ease;
-}
-
-.floating-label:focus-within span {
-  color: oklch(25% 0.02 260);  /* Aún más oscuro al enfocar */
-  font-size: 1.1rem;             /* Mantiene el mismo tamaño */
-}
-
-.floating-label:has(input:not(:placeholder-shown)) span {
-  color: oklch(28% 0.01 260);  /* Gris oscuro cuando tiene valor */
-  font-size: 1.1rem;             /* Mantiene el mismo tamaño */
-}
-
-.collapse .collapse-content {
-  transform: scaleY(0);
-  transform-origin: top;
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  height: 0;
-  opacity: 0;
-}
-.collapse:has(input:checked) .collapse-content {
-  transform: scaleY(1);
-  height: auto;
-  opacity: 1;
-}
-
-.tab-content-inner {
-  animation: tabFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  transform-origin: top;
-}
-
-@keyframes tabFadeIn {
-  from {
-    opacity: 0;
-    transform: scaleY(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scaleY(1);
-  }
-}

src/sigpro.css

@@ -0,0 +1,356 @@
+@import "tailwindcss";
+@plugin "daisyui";
+@plugin "@iconify/tailwind4";
+
+/* join join-vertical lg:join-horizontal divider divider-horizontal validator validator-hint glass */
+
+@plugin "daisyui/theme" {
+  name: "light";
+  default: true;
+  prefersdark: false;
+  color-scheme: "light";
+  --color-base-100: oklch(100% 0 0);
+  --color-base-200: oklch(98% 0 0);
+  --color-base-300: oklch(92% 0 0);
+  --color-base-content: oklch(25% 0.006 285);
+  --color-primary: oklch(25% 0.006 285);
+  --color-primary-content: oklch(98% 0 0);
+  --color-secondary: oklch(55% 0.046 257.417);
+  --color-secondary-content: oklch(98% 0 0);
+  --color-accent: oklch(96% 0 0);
+  --color-accent-content: oklch(25% 0.006 285);
+  --color-neutral: oklch(14% 0.005 285.823);
+  --color-neutral-content: oklch(92% 0.004 286.32);
+  --color-info: oklch(74% 0.16 232);
+  --color-success: oklch(62% 0.17 163);
+  --color-warning: oklch(82% 0.18 84);
+  --color-error: oklch(60% 0.25 27);
+  --radius-selector: 0.5rem;
+  --radius-field: 0.4rem;
+  --radius-box: 0.5rem;
+  --border: 1px;
+}
+
+@plugin "daisyui/theme" {
+  name: "dark";
+  default: false;
+  prefersdark: true;
+  color-scheme: "dark";
+  --color-base-100: oklch(15% 0.005 285.823);
+  --color-base-200: oklch(20% 0.005 285.823);
+  --color-base-300: oklch(30% 0.005 285.823);
+  --color-base-content: oklch(92% 0.004 286.32);
+  --color-primary: oklch(98% 0 0);
+  --color-primary-content: oklch(15% 0 0);
+  --color-secondary: oklch(65% 0.046 257.417);
+  --color-secondary-content: oklch(15% 0.005 285.823);
+  --color-accent: oklch(25% 0 0);
+  --color-accent-content: oklch(98% 0 0);
+  --color-neutral: oklch(92% 0.004 286.32);
+  --color-neutral-content: oklch(14% 0.005 285.823);
+  --color-info: oklch(70% 0.1 230);
+  --color-success: oklch(65% 0.15 160);
+  --color-warning: oklch(85% 0.15 90);
+  --color-error: oklch(55% 0.2 27);
+  --radius-selector: 0.5rem;
+  --radius-field: 0.4rem;
+  --radius-box: 0.5rem;
+  --border: 1px;
+}
+
+:root {
+  font-size: 14px;
+}
+
+/* Agrupamos los selectores normales de CSS */
+.input, .select, .textarea {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:focus, 
+  &:focus-within {
+    outline: 1px solid transparent !important;
+    outline-offset: 1px !important;
+  }
+
+  &:hover:not(:focus) {
+    background-color: oklch(from var(--color-base-100) calc(l - 0.03) c h);
+  }
+
+  &:focus {
+    --focus-color: var(--color-primary);
+
+    /* Selectores que detectan la variante de color sin importar el prefijo */
+    &[class*="-secondary"] { --focus-color: var(--color-secondary); }
+    &[class*="-accent"]    { --focus-color: var(--color-accent); }
+    &[class*="-neutral"]   { --focus-color: var(--color-neutral); }
+    &[class*="-ghost"]     { --focus-color: var(--color-base-content); }
+    &[class*="-info"]      { --focus-color: var(--color-info); }
+    &[class*="-success"]   { --focus-color: var(--color-success); }
+    &[class*="-warning"]   { --focus-color: var(--color-warning); }
+    &[class*="-error"]     { --focus-color: var(--color-error); }
+
+    background-color: oklch(from var(--focus-color) l c h / 0.05);
+    border-color: var(--focus-color);
+    box-shadow: 0 0 0 4px oklch(from var(--focus-color) l c h / 0.25);
+    
+    &[class*="-ghost"] {
+      border-width: 1px;
+    }
+  }
+}
+
+.floating-label span {
+  color: oklch(30% 0.01 260);  /* Gris más oscuro (30% es más oscuro que 45%) */
+  font-size: 1.1rem;             /* text-base: más grande que 0.875rem */
+  transition: all 0.2s ease;
+}
+
+.floating-label:focus-within span {
+  color: oklch(25% 0.02 260);  /* Aún más oscuro al enfocar */
+  font-size: 1.1rem;             /* Mantiene el mismo tamaño */
+}
+
+.floating-label:has(input:not(:placeholder-shown)) span {
+  color: oklch(28% 0.01 260);  /* Gris oscuro cuando tiene valor */
+  font-size: 1.1rem;             /* Mantiene el mismo tamaño */
+}
+
+.collapse .collapse-content {
+  transform: scaleY(0);
+  transform-origin: top;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  height: 0;
+  opacity: 0;
+}
+.collapse:has(input:checked) .collapse-content {
+  transform: scaleY(1);
+  height: auto;
+  opacity: 1;
+}
+
+.tab-content-inner {
+  animation: tabFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: top;
+}
+
+@keyframes tabFadeIn {
+  from {
+    opacity: 0;
+    transform: scaleY(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+/* sigpro-ui daisyUI classes - extracted from components */
+
+/* Accordion */
+/* .input, .input-bordered, .input-ghost, .input-primary, .input-secondary, .input-accent, .input-info, .input-success, .input-warning, .input-error, .input-xs, .input-sm, .input-md, .input-lg, .floating-label, */
+
+/* Alert */
+/* .alert, .alert-info, .alert-success, .alert-warning, .alert-error, .alert-soft, .alert-outline, .alert-dash, */
+/* .icon-[lucide--info], .icon-[lucide--check-circle], .icon-[lucide--alert-triangle], .icon-[lucide--alert-circle], */
+
+/* Autocomplete */
+/* .menu, .menu-dropdown, .menu-dropdown-show, */
+
+/* Badge */
+/* .badge, .badge-primary, .badge-secondary, .badge-accent, .badge-info, .badge-success, .badge-warning, .badge-error, .badge-outline, .badge-soft, .badge-dash, .badge-xs, .badge-sm, .badge-md, .badge-lg, */
+
+/* Button */
+/* .btn, .btn-primary, .btn-secondary, .btn-accent, .btn-ghost, .btn-info, .btn-success, .btn-warning, .btn-error, .btn-neutral, .btn-xs, .btn-sm, .btn-md, .btn-lg, .btn-xl, .btn-outline, .btn-soft, .btn-dash, .btn-link, .btn-circle, .btn-square, .btn-wide, .btn-block, .btn-active, .btn-disabled, */
+
+/* Checkbox & Toggle */
+/* .checkbox, .checkbox-primary, .checkbox-secondary, .checkbox-accent, .checkbox-info, .checkbox-success, .checkbox-warning, .checkbox-error, .checkbox-xs, .checkbox-sm, .checkbox-md, .checkbox-lg, .toggle, .toggle-primary, .toggle-secondary, .toggle-accent, .toggle-xs, .toggle-sm, .toggle-md, .toggle-lg, */
+
+/* Colorpicker */
+
+/* Datepicker */
+/* .icon-[lucide--calendar], .icon-[lucide--chevrons-left], .icon-[lucide--chevron-left], .icon-[lucide--chevron-right], .icon-[lucide--chevrons-right], */
+
+/* Drawer */
+/* .drawer, .drawer-toggle, .drawer-content, .drawer-side, .drawer-overlay, */
+
+/* Dropdown */
+/* .dropdown, .dropdown-content, .dropdown-end, .dropdown-top, .dropdown-bottom, */
+
+/* Fab */
+/* .fab, */
+
+/* Fieldset */
+/* .fieldset, .fieldset-legend, */
+
+/* Fileinput */
+/* .icon-[lucide--upload], .icon-[lucide--x], */
+
+/* Indicator */
+/* .indicator, .indicator-item, */
+
+/* Input */
+/* .input, .input-bordered, .input-ghost, .input-primary, .input-secondary, .input-accent, .input-info, .input-success, .input-warning, .input-error, .input-xs, .input-sm, .input-md, .input-lg, .floating-label, */
+/* .icon-[lucide--text], .icon-[lucide--lock], .icon-[lucide--calendar], .icon-[lucide--hash], .icon-[lucide--mail], .icon-[lucide--search], .icon-[lucide--phone], .icon-[lucide--link], .icon-[lucide--eye-off], .icon-[lucide--eye], */
+
+/* List */
+/* .list, .list-row, .list-bullet, .list-image, .list-none, */
+
+/* Mask */
+/* .mask, .mask-star, .mask-star-2, .mask-heart, .mask-circle, */
+
+/* Menu */
+/* .menu, .menu-dropdown, .menu-dropdown-show, */
+
+/* Modal */
+/* .modal, .modal-box, .modal-action, .modal-backdrop, .modal-open, .modal-middle, .modal-top, .modal-bottom, */
+
+/* Navbar */
+/* .navbar, .navbar-start, .navbar-center, .navbar-end, */
+
+/* Radio */
+/* .radio, .radio-primary, .radio-secondary, .radio-accent, .radio-info, .radio-success, .radio-warning, .radio-error, .radio-xs, .radio-sm, .radio-md, .radio-lg, */
+
+/* Range */
+/* .range, .range-primary, .range-secondary, .range-accent, .range-info, .range-success, .range-warning, .range-error, .range-xs, .range-sm, .range-md, .range-lg, */
+
+/* Rating */
+/* .rating, .rating-half, .rating-hidden, */
+
+/* Select */
+/* .select, .select-bordered, .select-primary, .select-secondary, .select-accent, .select-info, .select-success, .select-warning, .select-error, .select-xs, .select-sm, .select-md, .select-lg, */
+
+/* Stack */
+/* .stack, .stack-top, .stack-bottom, .stack-start, .stack-end, */
+
+/* Stat */
+/* .stat, .stat-figure, .stat-title, .stat-value, .stat-desc, */
+
+/* Swap */
+/* .swap, .swap-on, .swap-off, .swap-active, .swap-rotate, .swap-flip, .swap-indeterminate, */
+
+/* Table */
+/* .table, .table-zebra, .table-pin-rows, .table-pin-cols, .table-xs, .table-sm, .table-md, .table-lg, */
+
+/* Tabs */
+/* .tabs, .tabs-box, .tabs-lift, .tabs-border, .tab, .tab-content, */
+/* .icon-[lucide--x], */
+
+/* Timeline */
+/* .timeline, .timeline-vertical, .timeline-horizontal, .timeline-compact, .timeline-start, .timeline-middle, .timeline-end, .timeline-box, */
+/* .icon-[lucide--info], .icon-[lucide--check-circle], .icon-[lucide--alert-triangle], .icon-[lucide--alert-circle], */
+
+/* Toast */
+/* .icon-[lucide--x], */
+
+/* Tooltip */
+/* .tooltip, .tooltip-top, .tooltip-bottom, .tooltip-left, .tooltip-right, .tooltip-primary, .tooltip-secondary, .tooltip-accent, .tooltip-info, .tooltip-success, .tooltip-warning, .tooltip-error, .tooltip-open, */
+
+/* ===== Tailwind ===== */
+
+/* Background */
+/* .bg-base-100, .bg-base-200, .bg-base-content, .bg-primary, .bg-primary/10, .bg-secondary, */
+
+/* Border */
+/* .border, .border-2, .border-base-300, .border-base-content/20, .border-dashed, .border-primary, */
+
+/* Bottom */
+/* .bottom-6, */
+
+/* Cursor */
+/* .cursor-pointer, */
+
+/* Duration */
+/* .duration-200, .duration-300, */
+
+/* Flex */
+/* .flex, .flex-1, .flex-col, .flex-col-reverse, */
+
+/* Font */
+/* .font-black, .font-bold, .font-medium, */
+
+/* Grid */
+/* .grid, .grid-cols-7, .grid-cols-8, */
+
+/* Height */
+/* .h-12, .min-h-full, */
+
+/* Inset */
+/* .inset-0, */
+
+/* Items */
+/* .items-center, .items-end, */
+
+/* Justify */
+/* .justify-between, .justify-start, */
+
+/* Left */
+/* .left-0, */
+
+/* Loading */
+/* .loading, .loading-spinner, */
+
+/* Max Height */
+/* .max-h-60, */
+
+/* Opacity */
+/* .opacity-0, .opacity-40, .opacity-50, .opacity-60, .opacity-70, */
+
+/* Overflow */
+/* .overflow-x-auto, .overflow-y-auto, */
+
+/* Padding */
+/* .p-2, .p-3, .p-4, .p-6, */
+
+/* Pointer events */
+/* .pointer-events-auto, .pointer-events-none, */
+
+/* Position */
+/* .absolute, .fixed, .relative, */
+
+/* Right */
+/* .right-0, */
+
+/* Rounded */
+/* .rounded-box, .rounded-lg, */
+
+/* Shadow */
+/* .shadow-2xl, .shadow-lg, .shadow-sm, .shadow-xl, */
+
+/* Shrink */
+/* .shrink-0, */
+
+/* Space */
+/* .space-y-1, */
+
+/* Spacing */
+/* .gap-1, .gap-2, .gap-3, */
+
+/* Text */
+/* .text-center, .text-error, .text-left, .text-lg, .text-primary-content, .text-right, .text-secondary, .text-sm, .text-xl, .text-xs, */
+
+/* Text custom */
+/* .text-[10px], */
+
+/* Top */
+/* .top-0, */
+
+/* Transform */
+/* .translate-x-10, */
+
+/* Transition */
+/* .transition-all, */
+
+/* Truncate */
+/* .truncate, */
+
+/* Width */
+/* .w-full, .w-52, .w-64, .w-80, */
+
+/* Z-index */
+/* .z-100, .z-50, .z-90, .z-[100], .z-[9999], */
+
+/* Tailwind variants */
+/* .hover:bg-base-200, */
+
+/* Misc */
+/* .active, .hr, .label, .label-text, */