@beweco/aurora-ui 0.6.79 → 1.0.0-beta.112

package/dist/assets/css/theme.css

@@ -0,0 +1,2550 @@
+/*
+ * AUTOGENERADO — no editar a mano.
+ * Fuente: scripts/generate-theme-tokens.mjs
+ *   ← src/styles/colors.default.ts (14 packs)
+ *   ← scripts/v2-base-palette.json (paleta base heredada por `extend`)
+ *   ← @heroui/styles@3.2.4 (espejo de neutrales oscuros)
+ *
+ * Regenerar y verificar contra el oráculo v2:
+ *   node scripts/generate-theme-tokens.mjs --check
+ */
+
+@theme static {
+	/* Valores del tema base claro — los 16 bloques de abajo los pisan por clase. */
+	--color-background: #FFFFFF;
+	--color-foreground: #11181C;
+	--color-foreground-50: #fafafa;
+	--color-foreground-100: #f4f4f5;
+	--color-foreground-200: #e4e4e7;
+	--color-foreground-300: #d4d4d8;
+	--color-foreground-400: #a1a1aa;
+	--color-foreground-500: #71717a;
+	--color-foreground-600: #52525b;
+	--color-foreground-700: #3f3f46;
+	--color-foreground-800: #27272a;
+	--color-foreground-900: #18181b;
+	--color-divider: rgba(17, 17, 17, 0.15);
+	--color-focus: #006FEE;
+	--color-content1: #FFFFFF;
+	--color-content1-foreground: #11181C;
+	--color-content2: #f4f4f5;
+	--color-content2-foreground: #27272a;
+	--color-content3: #e4e4e7;
+	--color-content3-foreground: #3f3f46;
+	--color-content4: #d4d4d8;
+	--color-content4-foreground: #52525b;
+	--color-default: #d4d4d8;
+	--color-default-foreground: #000;
+	--color-default-50: #fafafa;
+	--color-default-100: #f4f4f5;
+	--color-default-200: #e4e4e7;
+	--color-default-300: #d4d4d8;
+	--color-default-400: #a1a1aa;
+	--color-default-500: #71717a;
+	--color-default-600: #52525b;
+	--color-default-700: #3f3f46;
+	--color-default-800: #27272a;
+	--color-default-900: #18181b;
+	--color-primary: #006FEE;
+	--color-primary-foreground: #fff;
+	--color-primary-50: #e6f1fe;
+	--color-primary-100: #cce3fd;
+	--color-primary-200: #99c7fb;
+	--color-primary-300: #66aaf9;
+	--color-primary-400: #338ef7;
+	--color-primary-500: #006FEE;
+	--color-primary-600: #005bc4;
+	--color-primary-700: #004493;
+	--color-primary-800: #002e62;
+	--color-primary-900: #001731;
+	--color-secondary: #7828c8;
+	--color-secondary-foreground: #fff;
+	--color-secondary-50: #f2eafa;
+	--color-secondary-100: #e4d4f4;
+	--color-secondary-200: #c9a9e9;
+	--color-secondary-300: #ae7ede;
+	--color-secondary-400: #9353d3;
+	--color-secondary-500: #7828c8;
+	--color-secondary-600: #6020a0;
+	--color-secondary-700: #481878;
+	--color-secondary-800: #301050;
+	--color-secondary-900: #180828;
+	--color-success: #17c964;
+	--color-success-foreground: #000;
+	--color-success-50: #e8faf0;
+	--color-success-100: #d1f4e0;
+	--color-success-200: #a2e9c1;
+	--color-success-300: #74dfa2;
+	--color-success-400: #45d483;
+	--color-success-500: #17c964;
+	--color-success-600: #12a150;
+	--color-success-700: #0e793c;
+	--color-success-800: #095028;
+	--color-success-900: #052814;
+	--color-warning: #f5a524;
+	--color-warning-foreground: #000;
+	--color-warning-50: #fefce8;
+	--color-warning-100: #fdedd3;
+	--color-warning-200: #fbdba7;
+	--color-warning-300: #f9c97c;
+	--color-warning-400: #f7b750;
+	--color-warning-500: #f5a524;
+	--color-warning-600: #c4841d;
+	--color-warning-700: #936316;
+	--color-warning-800: #62420e;
+	--color-warning-900: #312107;
+	--color-danger: #f31260;
+	--color-danger-foreground: #ffffff;
+	--color-danger-50: #fee7ef;
+	--color-danger-100: #fdd0df;
+	--color-danger-200: #faa0bf;
+	--color-danger-300: #f871a0;
+	--color-danger-400: #f54180;
+	--color-danger-500: #f31260;
+	--color-danger-600: #c20e4d;
+	--color-danger-700: #920b3a;
+	--color-danger-800: #610726;
+	--color-danger-900: #310413;
+	--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+	--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+	--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+}
+
+@layer base {
+	:root, .light {
+		--color-background: #FFFFFF;
+		--color-foreground: #11181C;
+		--color-foreground-50: #fafafa;
+		--color-foreground-100: #f4f4f5;
+		--color-foreground-200: #e4e4e7;
+		--color-foreground-300: #d4d4d8;
+		--color-foreground-400: #a1a1aa;
+		--color-foreground-500: #71717a;
+		--color-foreground-600: #52525b;
+		--color-foreground-700: #3f3f46;
+		--color-foreground-800: #27272a;
+		--color-foreground-900: #18181b;
+		--color-divider: rgba(17, 17, 17, 0.15);
+		--color-focus: #006FEE;
+		--color-content1: #FFFFFF;
+		--color-content1-foreground: #11181C;
+		--color-content2: #f4f4f5;
+		--color-content2-foreground: #27272a;
+		--color-content3: #e4e4e7;
+		--color-content3-foreground: #3f3f46;
+		--color-content4: #d4d4d8;
+		--color-content4-foreground: #52525b;
+		--color-default: #d4d4d8;
+		--color-default-foreground: #000;
+		--color-default-50: #fafafa;
+		--color-default-100: #f4f4f5;
+		--color-default-200: #e4e4e7;
+		--color-default-300: #d4d4d8;
+		--color-default-400: #a1a1aa;
+		--color-default-500: #71717a;
+		--color-default-600: #52525b;
+		--color-default-700: #3f3f46;
+		--color-default-800: #27272a;
+		--color-default-900: #18181b;
+		--color-primary: #006FEE;
+		--color-primary-foreground: #fff;
+		--color-primary-50: #e6f1fe;
+		--color-primary-100: #cce3fd;
+		--color-primary-200: #99c7fb;
+		--color-primary-300: #66aaf9;
+		--color-primary-400: #338ef7;
+		--color-primary-500: #006FEE;
+		--color-primary-600: #005bc4;
+		--color-primary-700: #004493;
+		--color-primary-800: #002e62;
+		--color-primary-900: #001731;
+		--color-secondary: #7828c8;
+		--color-secondary-foreground: #fff;
+		--color-secondary-50: #f2eafa;
+		--color-secondary-100: #e4d4f4;
+		--color-secondary-200: #c9a9e9;
+		--color-secondary-300: #ae7ede;
+		--color-secondary-400: #9353d3;
+		--color-secondary-500: #7828c8;
+		--color-secondary-600: #6020a0;
+		--color-secondary-700: #481878;
+		--color-secondary-800: #301050;
+		--color-secondary-900: #180828;
+		--color-success: #17c964;
+		--color-success-foreground: #000;
+		--color-success-50: #e8faf0;
+		--color-success-100: #d1f4e0;
+		--color-success-200: #a2e9c1;
+		--color-success-300: #74dfa2;
+		--color-success-400: #45d483;
+		--color-success-500: #17c964;
+		--color-success-600: #12a150;
+		--color-success-700: #0e793c;
+		--color-success-800: #095028;
+		--color-success-900: #052814;
+		--color-warning: #f5a524;
+		--color-warning-foreground: #000;
+		--color-warning-50: #fefce8;
+		--color-warning-100: #fdedd3;
+		--color-warning-200: #fbdba7;
+		--color-warning-300: #f9c97c;
+		--color-warning-400: #f7b750;
+		--color-warning-500: #f5a524;
+		--color-warning-600: #c4841d;
+		--color-warning-700: #936316;
+		--color-warning-800: #62420e;
+		--color-warning-900: #312107;
+		--color-danger: #f31260;
+		--color-danger-foreground: #ffffff;
+		--color-danger-50: #fee7ef;
+		--color-danger-100: #fdd0df;
+		--color-danger-200: #faa0bf;
+		--color-danger-300: #f871a0;
+		--color-danger-400: #f54180;
+		--color-danger-500: #f31260;
+		--color-danger-600: #c20e4d;
+		--color-danger-700: #920b3a;
+		--color-danger-800: #610726;
+		--color-danger-900: #310413;
+		--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+		--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+		--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+	}
+
+	.dark {
+		--color-background: #000000;
+		--color-foreground: #ECEDEE;
+		--color-foreground-50: #18181b;
+		--color-foreground-100: #27272a;
+		--color-foreground-200: #3f3f46;
+		--color-foreground-300: #52525b;
+		--color-foreground-400: #71717a;
+		--color-foreground-500: #a1a1aa;
+		--color-foreground-600: #d4d4d8;
+		--color-foreground-700: #e4e4e7;
+		--color-foreground-800: #f4f4f5;
+		--color-foreground-900: #fafafa;
+		--color-divider: rgba(255, 255, 255, 0.15);
+		--color-focus: #006FEE;
+		--color-content1: #18181b;
+		--color-content1-foreground: #fafafa;
+		--color-content2: #27272a;
+		--color-content2-foreground: #f4f4f5;
+		--color-content3: #3f3f46;
+		--color-content3-foreground: #e4e4e7;
+		--color-content4: #52525b;
+		--color-content4-foreground: #d4d4d8;
+		--color-default: #3f3f46;
+		--color-default-foreground: #fff;
+		--color-default-50: #18181b;
+		--color-default-100: #27272a;
+		--color-default-200: #3f3f46;
+		--color-default-300: #52525b;
+		--color-default-400: #71717a;
+		--color-default-500: #a1a1aa;
+		--color-default-600: #d4d4d8;
+		--color-default-700: #e4e4e7;
+		--color-default-800: #f4f4f5;
+		--color-default-900: #fafafa;
+		--color-primary: #006FEE;
+		--color-primary-foreground: #fff;
+		--color-primary-50: #001731;
+		--color-primary-100: #002e62;
+		--color-primary-200: #004493;
+		--color-primary-300: #005bc4;
+		--color-primary-400: #006FEE;
+		--color-primary-500: #338ef7;
+		--color-primary-600: #66aaf9;
+		--color-primary-700: #99c7fb;
+		--color-primary-800: #cce3fd;
+		--color-primary-900: #e6f1fe;
+		--color-secondary: #9353d3;
+		--color-secondary-foreground: #fff;
+		--color-secondary-50: #180828;
+		--color-secondary-100: #301050;
+		--color-secondary-200: #481878;
+		--color-secondary-300: #6020a0;
+		--color-secondary-400: #7828c8;
+		--color-secondary-500: #9353d3;
+		--color-secondary-600: #ae7ede;
+		--color-secondary-700: #c9a9e9;
+		--color-secondary-800: #e4d4f4;
+		--color-secondary-900: #f2eafa;
+		--color-success: #17c964;
+		--color-success-foreground: #000;
+		--color-success-50: #052814;
+		--color-success-100: #095028;
+		--color-success-200: #0e793c;
+		--color-success-300: #12a150;
+		--color-success-400: #17c964;
+		--color-success-500: #45d483;
+		--color-success-600: #74dfa2;
+		--color-success-700: #a2e9c1;
+		--color-success-800: #d1f4e0;
+		--color-success-900: #e8faf0;
+		--color-warning: #f5a524;
+		--color-warning-foreground: #000;
+		--color-warning-50: #312107;
+		--color-warning-100: #62420e;
+		--color-warning-200: #936316;
+		--color-warning-300: #c4841d;
+		--color-warning-400: #f5a524;
+		--color-warning-500: #f7b750;
+		--color-warning-600: #f9c97c;
+		--color-warning-700: #fbdba7;
+		--color-warning-800: #fdedd3;
+		--color-warning-900: #fefce8;
+		--color-danger: #f31260;
+		--color-danger-foreground: #ffffff;
+		--color-danger-50: #310413;
+		--color-danger-100: #610726;
+		--color-danger-200: #920b3a;
+		--color-danger-300: #c20e4d;
+		--color-danger-400: #f31260;
+		--color-danger-500: #f54180;
+		--color-danger-600: #f871a0;
+		--color-danger-700: #faa0bf;
+		--color-danger-800: #fdd0df;
+		--color-danger-900: #fee7ef;
+		--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+		--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+		--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+	}
+
+	.blue-light {
+		--color-background: #FFFFFF;
+		--color-foreground: #11181C;
+		--color-foreground-50: #fafafa;
+		--color-foreground-100: #f4f4f5;
+		--color-foreground-200: #e4e4e7;
+		--color-foreground-300: #d4d4d8;
+		--color-foreground-400: #a1a1aa;
+		--color-foreground-500: #71717a;
+		--color-foreground-600: #52525b;
+		--color-foreground-700: #3f3f46;
+		--color-foreground-800: #27272a;
+		--color-foreground-900: #18181b;
+		--color-divider: rgba(17, 17, 17, 0.15);
+		--color-focus: #006FEE;
+		--color-content1: #FFFFFF;
+		--color-content1-foreground: #11181C;
+		--color-content2: #f4f4f5;
+		--color-content2-foreground: #27272a;
+		--color-content3: #e4e4e7;
+		--color-content3-foreground: #3f3f46;
+		--color-content4: #d4d4d8;
+		--color-content4-foreground: #52525b;
+		--color-default: #d4d4d8;
+		--color-default-foreground: #000;
+		--color-default-50: #fafafa;
+		--color-default-100: #f4f4f5;
+		--color-default-200: #e4e4e7;
+		--color-default-300: #d4d4d8;
+		--color-default-400: #a1a1aa;
+		--color-default-500: #71717a;
+		--color-default-600: #52525b;
+		--color-default-700: #3f3f46;
+		--color-default-800: #27272a;
+		--color-default-900: #18181b;
+		--color-primary: #006fee;
+		--color-primary-foreground: #fff;
+		--color-primary-50: #dfedfd;
+		--color-primary-100: #b3d4fa;
+		--color-primary-200: #86bbf7;
+		--color-primary-300: #59a1f4;
+		--color-primary-400: #2d88f1;
+		--color-primary-500: #006fee;
+		--color-primary-600: #005cc4;
+		--color-primary-700: #00489b;
+		--color-primary-800: #003571;
+		--color-primary-900: #002147;
+		--color-secondary: #7828c8;
+		--color-secondary-foreground: #fff;
+		--color-secondary-50: #eee4f8;
+		--color-secondary-100: #d7bfef;
+		--color-secondary-200: #bf99e5;
+		--color-secondary-300: #a773db;
+		--color-secondary-400: #904ed2;
+		--color-secondary-500: #7828c8;
+		--color-secondary-600: #6321a5;
+		--color-secondary-700: #4e1a82;
+		--color-secondary-800: #39135f;
+		--color-secondary-900: #240c3c;
+		--color-success: #17c964;
+		--color-success-foreground: #000;
+		--color-success-50: #e2f8ec;
+		--color-success-100: #b9efd1;
+		--color-success-200: #91e5b5;
+		--color-success-300: #68dc9a;
+		--color-success-400: #40d27f;
+		--color-success-500: #17c964;
+		--color-success-600: #13a653;
+		--color-success-700: #0f8341;
+		--color-success-800: #0b5f30;
+		--color-success-900: #073c1e;
+		--color-warning: #f5a524;
+		--color-warning-foreground: #000;
+		--color-warning-50: #fef4e4;
+		--color-warning-100: #fce4bd;
+		--color-warning-200: #fad497;
+		--color-warning-300: #f9c571;
+		--color-warning-400: #f7b54a;
+		--color-warning-500: #f5a524;
+		--color-warning-600: #ca881e;
+		--color-warning-700: #9f6b17;
+		--color-warning-800: #744e11;
+		--color-warning-900: #4a320b;
+		--color-danger: #f31260;
+		--color-danger-foreground: #000;
+		--color-danger-50: #fee1eb;
+		--color-danger-100: #fbb8cf;
+		--color-danger-200: #f98eb3;
+		--color-danger-300: #f76598;
+		--color-danger-400: #f53b7c;
+		--color-danger-500: #f31260;
+		--color-danger-600: #c80f4f;
+		--color-danger-700: #9e0c3e;
+		--color-danger-800: #73092e;
+		--color-danger-900: #49051d;
+		--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+		--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+		--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+	}
+
+	.blue-dark {
+		/* Neutrales oscuros de HeroUI v3 (espejo de su selector `.dark`). */
+    /* == Dark Theme Variables == */
+
+    /* Base Colors */
+    --background: oklch(12% 0.005 285.823);
+    --foreground: var(--snow);
+
+    /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
+    --surface: oklch(0.2103 0.0059 285.89);
+    --surface-foreground: var(--foreground);
+
+    --surface-secondary: oklch(0.257 0.0037 286.14);
+    --surface-tertiary: oklch(0.2721 0.0024 247.91);
+
+    /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
+    --overlay: oklch(0.2103 0.0059 285.89);
+    --overlay-foreground: var(--foreground);
+
+    --muted: oklch(70.5% 0.015 286.067);
+
+    --scrollbar: var(--scrollbar-thumb);
+    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
+    --scrollbar-track: transparent;
+    --scrollbar-gutter: auto;
+    --scrollbar-width: thin;
+    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+
+    --default: oklch(27.4% 0.006 286.033);
+    --default-foreground: var(--snow);
+
+    /* Form Fields */
+    --field-background: oklch(0.2103 0.0059 285.89);
+    --field-foreground: var(--foreground);
+
+    /* Status Colors */
+    --warning: oklch(0.8203 0.1388 76.34);
+    --warning-foreground: var(--eclipse);
+
+    --danger: oklch(0.594 0.1967 24.63);
+    --danger-foreground: var(--snow);
+
+    /* Component Colors */
+    --segment: oklch(0.3964 0.01 285.93);
+    --segment-foreground: var(--foreground);
+
+    /* Misc Colors */
+    --border: oklch(28% 0.006 286.033);
+    --separator: oklch(25% 0.006 286.033);
+    --focus: var(--accent);
+    --link: var(--foreground);
+
+    /* Backdrop */
+    --backdrop: rgba(0, 0, 0, 0.6);
+
+    /* Shadows */
+    --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
+    --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
+    --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
+
+    /* Calculated Colors */
+    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+
+    --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
+    --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --background-inverse: var(--foreground);
+
+    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
+    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+    --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
+    --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
+    --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
+
+    --field-hover: color-mix(
+      in oklab,
+      var(--field-background, var(--default)) 90%,
+      var(--field-foreground, var(--foreground)) 2%
+    );
+    --field-focus: var(--field-background, var(--default));
+    --field-border-hover: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 88%,
+      var(--field-foreground, var(--foreground)) 10%
+    );
+    --field-border-focus: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 74%,
+      var(--field-foreground, var(--foreground)) 22%
+    );
+
+    --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
+    --default-soft-foreground: var(--default-foreground);
+    --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
+
+    --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
+    --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
+    --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
+
+    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
+    --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
+    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
+
+    --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
+    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
+    --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
+
+    --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
+    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
+    --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
+
+    --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+    --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
+
+    --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
+    --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
+
+		--color-background: #000000;
+		--color-foreground: #ECEDEE;
+		--color-foreground-50: #18181b;
+		--color-foreground-100: #27272a;
+		--color-foreground-200: #3f3f46;
+		--color-foreground-300: #52525b;
+		--color-foreground-400: #71717a;
+		--color-foreground-500: #a1a1aa;
+		--color-foreground-600: #d4d4d8;
+		--color-foreground-700: #e4e4e7;
+		--color-foreground-800: #f4f4f5;
+		--color-foreground-900: #fafafa;
+		--color-divider: rgba(255, 255, 255, 0.15);
+		--color-focus: #006FEE;
+		--color-content1: #18181b;
+		--color-content1-foreground: #fafafa;
+		--color-content2: #27272a;
+		--color-content2-foreground: #f4f4f5;
+		--color-content3: #3f3f46;
+		--color-content3-foreground: #e4e4e7;
+		--color-content4: #52525b;
+		--color-content4-foreground: #d4d4d8;
+		--color-default: #3f3f46;
+		--color-default-foreground: #fff;
+		--color-default-50: #18181b;
+		--color-default-100: #27272a;
+		--color-default-200: #3f3f46;
+		--color-default-300: #52525b;
+		--color-default-400: #71717a;
+		--color-default-500: #a1a1aa;
+		--color-default-600: #d4d4d8;
+		--color-default-700: #e4e4e7;
+		--color-default-800: #f4f4f5;
+		--color-default-900: #fafafa;
+		--color-primary: #006fee;
+		--color-primary-foreground: #fff;
+		--color-primary-50: #002147;
+		--color-primary-100: #003571;
+		--color-primary-200: #00489b;
+		--color-primary-300: #005cc4;
+		--color-primary-400: #006fee;
+		--color-primary-500: #2d88f1;
+		--color-primary-600: #59a1f4;
+		--color-primary-700: #86bbf7;
+		--color-primary-800: #b3d4fa;
+		--color-primary-900: #dfedfd;
+		--color-secondary: #7828c8;
+		--color-secondary-foreground: #fff;
+		--color-secondary-50: #240c3c;
+		--color-secondary-100: #39135f;
+		--color-secondary-200: #4e1a82;
+		--color-secondary-300: #6321a5;
+		--color-secondary-400: #7828c8;
+		--color-secondary-500: #904ed2;
+		--color-secondary-600: #a773db;
+		--color-secondary-700: #bf99e5;
+		--color-secondary-800: #d7bfef;
+		--color-secondary-900: #eee4f8;
+		--color-success: #17c964;
+		--color-success-foreground: #000;
+		--color-success-50: #073c1e;
+		--color-success-100: #0b5f30;
+		--color-success-200: #0f8341;
+		--color-success-300: #13a653;
+		--color-success-400: #17c964;
+		--color-success-500: #40d27f;
+		--color-success-600: #68dc9a;
+		--color-success-700: #91e5b5;
+		--color-success-800: #b9efd1;
+		--color-success-900: #e2f8ec;
+		--color-warning: #f5a524;
+		--color-warning-foreground: #000;
+		--color-warning-50: #4a320b;
+		--color-warning-100: #744e11;
+		--color-warning-200: #9f6b17;
+		--color-warning-300: #ca881e;
+		--color-warning-400: #f5a524;
+		--color-warning-500: #f7b54a;
+		--color-warning-600: #f9c571;
+		--color-warning-700: #fad497;
+		--color-warning-800: #fce4bd;
+		--color-warning-900: #fef4e4;
+		--color-danger: #f31260;
+		--color-danger-foreground: #000;
+		--color-danger-50: #49051d;
+		--color-danger-100: #73092e;
+		--color-danger-200: #9e0c3e;
+		--color-danger-300: #c80f4f;
+		--color-danger-400: #f31260;
+		--color-danger-500: #f53b7c;
+		--color-danger-600: #f76598;
+		--color-danger-700: #f98eb3;
+		--color-danger-800: #fbb8cf;
+		--color-danger-900: #fee1eb;
+		--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+		--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+		--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+	}
+
+	.purple-light {
+		--color-background: #FFFFFF;
+		--color-foreground: #11181C;
+		--color-foreground-50: #fafafa;
+		--color-foreground-100: #f4f4f5;
+		--color-foreground-200: #e4e4e7;
+		--color-foreground-300: #d4d4d8;
+		--color-foreground-400: #a1a1aa;
+		--color-foreground-500: #71717a;
+		--color-foreground-600: #52525b;
+		--color-foreground-700: #3f3f46;
+		--color-foreground-800: #27272a;
+		--color-foreground-900: #18181b;
+		--color-divider: rgba(17, 17, 17, 0.15);
+		--color-focus: #7828c8;
+		--color-content1: #FFFFFF;
+		--color-content1-foreground: #11181C;
+		--color-content2: #f4f4f5;
+		--color-content2-foreground: #27272a;
+		--color-content3: #e4e4e7;
+		--color-content3-foreground: #3f3f46;
+		--color-content4: #d4d4d8;
+		--color-content4-foreground: #52525b;
+		--color-default: #d4d4d8;
+		--color-default-foreground: #000;
+		--color-default-50: #fafafa;
+		--color-default-100: #f4f4f5;
+		--color-default-200: #e4e4e7;
+		--color-default-300: #d4d4d8;
+		--color-default-400: #a1a1aa;
+		--color-default-500: #71717a;
+		--color-default-600: #52525b;
+		--color-default-700: #3f3f46;
+		--color-default-800: #27272a;
+		--color-default-900: #18181b;
+		--color-primary: #7828c8;
+		--color-primary-foreground: #fff;
+		--color-primary-50: #eee4f8;
+		--color-primary-100: #d7bfef;
+		--color-primary-200: #bf99e5;
+		--color-primary-300: #a773db;
+		--color-primary-400: #904ed2;
+		--color-primary-500: #7828c8;
+		--color-primary-600: #6321a5;
+		--color-primary-700: #4e1a82;
+		--color-primary-800: #39135f;
+		--color-primary-900: #240c3c;
+		--color-secondary: #006fee;
+		--color-secondary-foreground: #fff;
+		--color-secondary-50: #dfedfd;
+		--color-secondary-100: #b3d4fa;
+		--color-secondary-200: #86bbf7;
+		--color-secondary-300: #59a1f4;
+		--color-secondary-400: #2d88f1;
+		--color-secondary-500: #006fee;
+		--color-secondary-600: #005cc4;
+		--color-secondary-700: #00489b;
+		--color-secondary-800: #003571;
+		--color-secondary-900: #002147;
+		--color-success: #17c964;
+		--color-success-foreground: #000;
+		--color-success-50: #e8faf0;
+		--color-success-100: #d1f4e0;
+		--color-success-200: #a2e9c1;
+		--color-success-300: #74dfa2;
+		--color-success-400: #45d483;
+		--color-success-500: #17c964;
+		--color-success-600: #12a150;
+		--color-success-700: #0e793c;
+		--color-success-800: #095028;
+		--color-success-900: #052814;
+		--color-warning: #f5a524;
+		--color-warning-foreground: #000;
+		--color-warning-50: #fefce8;
+		--color-warning-100: #fdedd3;
+		--color-warning-200: #fbdba7;
+		--color-warning-300: #f9c97c;
+		--color-warning-400: #f7b750;
+		--color-warning-500: #f5a524;
+		--color-warning-600: #c4841d;
+		--color-warning-700: #936316;
+		--color-warning-800: #62420e;
+		--color-warning-900: #312107;
+		--color-danger: #f31260;
+		--color-danger-foreground: #ffffff;
+		--color-danger-50: #fee7ef;
+		--color-danger-100: #fdd0df;
+		--color-danger-200: #faa0bf;
+		--color-danger-300: #f871a0;
+		--color-danger-400: #f54180;
+		--color-danger-500: #f31260;
+		--color-danger-600: #c20e4d;
+		--color-danger-700: #920b3a;
+		--color-danger-800: #610726;
+		--color-danger-900: #310413;
+		--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+		--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+		--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+	}
+
+	.purple-dark {
+		/* Neutrales oscuros de HeroUI v3 (espejo de su selector `.dark`). */
+    /* == Dark Theme Variables == */
+
+    /* Base Colors */
+    --background: oklch(12% 0.005 285.823);
+    --foreground: var(--snow);
+
+    /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
+    --surface: oklch(0.2103 0.0059 285.89);
+    --surface-foreground: var(--foreground);
+
+    --surface-secondary: oklch(0.257 0.0037 286.14);
+    --surface-tertiary: oklch(0.2721 0.0024 247.91);
+
+    /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
+    --overlay: oklch(0.2103 0.0059 285.89);
+    --overlay-foreground: var(--foreground);
+
+    --muted: oklch(70.5% 0.015 286.067);
+
+    --scrollbar: var(--scrollbar-thumb);
+    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
+    --scrollbar-track: transparent;
+    --scrollbar-gutter: auto;
+    --scrollbar-width: thin;
+    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+
+    --default: oklch(27.4% 0.006 286.033);
+    --default-foreground: var(--snow);
+
+    /* Form Fields */
+    --field-background: oklch(0.2103 0.0059 285.89);
+    --field-foreground: var(--foreground);
+
+    /* Status Colors */
+    --warning: oklch(0.8203 0.1388 76.34);
+    --warning-foreground: var(--eclipse);
+
+    --danger: oklch(0.594 0.1967 24.63);
+    --danger-foreground: var(--snow);
+
+    /* Component Colors */
+    --segment: oklch(0.3964 0.01 285.93);
+    --segment-foreground: var(--foreground);
+
+    /* Misc Colors */
+    --border: oklch(28% 0.006 286.033);
+    --separator: oklch(25% 0.006 286.033);
+    --focus: var(--accent);
+    --link: var(--foreground);
+
+    /* Backdrop */
+    --backdrop: rgba(0, 0, 0, 0.6);
+
+    /* Shadows */
+    --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
+    --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
+    --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
+
+    /* Calculated Colors */
+    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+
+    --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
+    --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --background-inverse: var(--foreground);
+
+    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
+    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+    --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
+    --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
+    --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
+
+    --field-hover: color-mix(
+      in oklab,
+      var(--field-background, var(--default)) 90%,
+      var(--field-foreground, var(--foreground)) 2%
+    );
+    --field-focus: var(--field-background, var(--default));
+    --field-border-hover: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 88%,
+      var(--field-foreground, var(--foreground)) 10%
+    );
+    --field-border-focus: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 74%,
+      var(--field-foreground, var(--foreground)) 22%
+    );
+
+    --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
+    --default-soft-foreground: var(--default-foreground);
+    --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
+
+    --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
+    --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
+    --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
+
+    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
+    --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
+    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
+
+    --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
+    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
+    --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
+
+    --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
+    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
+    --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
+
+    --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+    --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
+
+    --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
+    --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
+
+		--color-background: #000000;
+		--color-foreground: #ECEDEE;
+		--color-foreground-50: #18181b;
+		--color-foreground-100: #27272a;
+		--color-foreground-200: #3f3f46;
+		--color-foreground-300: #52525b;
+		--color-foreground-400: #71717a;
+		--color-foreground-500: #a1a1aa;
+		--color-foreground-600: #d4d4d8;
+		--color-foreground-700: #e4e4e7;
+		--color-foreground-800: #f4f4f5;
+		--color-foreground-900: #fafafa;
+		--color-divider: rgba(255, 255, 255, 0.15);
+		--color-focus: #9353d3;
+		--color-content1: #18181b;
+		--color-content1-foreground: #fafafa;
+		--color-content2: #27272a;
+		--color-content2-foreground: #f4f4f5;
+		--color-content3: #3f3f46;
+		--color-content3-foreground: #e4e4e7;
+		--color-content4: #52525b;
+		--color-content4-foreground: #d4d4d8;
+		--color-default: #3f3f46;
+		--color-default-foreground: #fff;
+		--color-default-50: #18181b;
+		--color-default-100: #27272a;
+		--color-default-200: #3f3f46;
+		--color-default-300: #52525b;
+		--color-default-400: #71717a;
+		--color-default-500: #a1a1aa;
+		--color-default-600: #d4d4d8;
+		--color-default-700: #e4e4e7;
+		--color-default-800: #f4f4f5;
+		--color-default-900: #fafafa;
+		--color-primary: #9353d3;
+		--color-primary-foreground: #fff;
+		--color-primary-50: #2c193f;
+		--color-primary-100: #462764;
+		--color-primary-200: #603689;
+		--color-primary-300: #7944ae;
+		--color-primary-400: #9353d3;
+		--color-primary-500: #a671db;
+		--color-primary-600: #b98fe2;
+		--color-primary-700: #ccadea;
+		--color-primary-800: #dfcbf2;
+		--color-primary-900: #f2eafa;
+		--color-secondary: #637aff;
+		--color-secondary-foreground: #000;
+		--color-secondary-50: #1e254d;
+		--color-secondary-100: #2f3a79;
+		--color-secondary-200: #404fa6;
+		--color-secondary-300: #5265d2;
+		--color-secondary-400: #637aff;
+		--color-secondary-500: #7e91ff;
+		--color-secondary-600: #9aa9ff;
+		--color-secondary-700: #b5c0ff;
+		--color-secondary-800: #d0d7ff;
+		--color-secondary-900: #eceeff;
+		--color-success: #17c964;
+		--color-success-foreground: #000;
+		--color-success-50: #052814;
+		--color-success-100: #095028;
+		--color-success-200: #0e793c;
+		--color-success-300: #12a150;
+		--color-success-400: #17c964;
+		--color-success-500: #45d483;
+		--color-success-600: #74dfa2;
+		--color-success-700: #a2e9c1;
+		--color-success-800: #d1f4e0;
+		--color-success-900: #e8faf0;
+		--color-warning: #f5a524;
+		--color-warning-foreground: #000;
+		--color-warning-50: #312107;
+		--color-warning-100: #62420e;
+		--color-warning-200: #936316;
+		--color-warning-300: #c4841d;
+		--color-warning-400: #f5a524;
+		--color-warning-500: #f7b750;
+		--color-warning-600: #f9c97c;
+		--color-warning-700: #fbdba7;
+		--color-warning-800: #fdedd3;
+		--color-warning-900: #fefce8;
+		--color-danger: #f31260;
+		--color-danger-foreground: #ffffff;
+		--color-danger-50: #310413;
+		--color-danger-100: #610726;
+		--color-danger-200: #920b3a;
+		--color-danger-300: #c20e4d;
+		--color-danger-400: #f31260;
+		--color-danger-500: #f54180;
+		--color-danger-600: #f871a0;
+		--color-danger-700: #faa0bf;
+		--color-danger-800: #fdd0df;
+		--color-danger-900: #fee7ef;
+		--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+		--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+		--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+	}
+
+	.yellow-light {
+		--color-background: #FFFFFF;
+		--color-foreground: #11181C;
+		--color-foreground-50: #fafafa;
+		--color-foreground-100: #f4f4f5;
+		--color-foreground-200: #e4e4e7;
+		--color-foreground-300: #d4d4d8;
+		--color-foreground-400: #a1a1aa;
+		--color-foreground-500: #71717a;
+		--color-foreground-600: #52525b;
+		--color-foreground-700: #3f3f46;
+		--color-foreground-800: #27272a;
+		--color-foreground-900: #18181b;
+		--color-divider: rgba(17, 17, 17, 0.15);
+		--color-focus: #FFD505;
+		--color-content1: #FFFFFF;
+		--color-content1-foreground: #11181C;
+		--color-content2: #f4f4f5;
+		--color-content2-foreground: #27272a;
+		--color-content3: #e4e4e7;
+		--color-content3-foreground: #3f3f46;
+		--color-content4: #d4d4d8;
+		--color-content4-foreground: #52525b;
+		--color-default: #d4d4d8;
+		--color-default-foreground: #000;
+		--color-default-50: #fafafa;
+		--color-default-100: #f4f4f5;
+		--color-default-200: #e4e4e7;
+		--color-default-300: #d4d4d8;
+		--color-default-400: #a1a1aa;
+		--color-default-500: #71717a;
+		--color-default-600: #52525b;
+		--color-default-700: #3f3f46;
+		--color-default-800: #27272a;
+		--color-default-900: #18181b;
+		--color-primary: #FFD505;
+		--color-primary-foreground: #000;
+		--color-primary-50: #fffbe6;
+		--color-primary-100: #FFFACD;
+		--color-primary-200: #FFF39B;
+		--color-primary-300: #FFEB69;
+		--color-primary-400: #FFE243;
+		--color-primary-500: #FFD505;
+		--color-primary-600: #DBB303;
+		--color-primary-700: #B79202;
+		--color-primary-800: #937301;
+		--color-primary-900: #7A5D00;
+		--color-secondary: #1E40AF;
+		--color-secondary-foreground: #fff;
+		--color-secondary-50: #F3F7FD;
+		--color-secondary-100: #D1DFFB;
+		--color-secondary-200: #A5BEF7;
+		--color-secondary-300: #7494E7;
+		--color-secondary-400: #4E6FCF;
+		--color-secondary-500: #1E40AF;
+		--color-secondary-600: #153096;
+		--color-secondary-700: #0F237D;
+		--color-secondary-800: #091865;
+		--color-secondary-900: #051053;
+		--color-success: #17c964;
+		--color-success-foreground: #000;
+		--color-success-50: #e8faf0;
+		--color-success-100: #d1f4e0;
+		--color-success-200: #a2e9c1;
+		--color-success-300: #74dfa2;
+		--color-success-400: #45d483;
+		--color-success-500: #17c964;
+		--color-success-600: #12a150;
+		--color-success-700: #0e793c;
+		--color-success-800: #095028;
+		--color-success-900: #052814;
+		--color-warning: #f5a524;
+		--color-warning-foreground: #000;
+		--color-warning-50: #fefce8;
+		--color-warning-100: #fdedd3;
+		--color-warning-200: #fbdba7;
+		--color-warning-300: #f9c97c;
+		--color-warning-400: #f7b750;
+		--color-warning-500: #f5a524;
+		--color-warning-600: #c4841d;
+		--color-warning-700: #936316;
+		--color-warning-800: #62420e;
+		--color-warning-900: #312107;
+		--color-danger: #f31260;
+		--color-danger-foreground: #ffffff;
+		--color-danger-50: #fee7ef;
+		--color-danger-100: #fdd0df;
+		--color-danger-200: #faa0bf;
+		--color-danger-300: #f871a0;
+		--color-danger-400: #f54180;
+		--color-danger-500: #f31260;
+		--color-danger-600: #c20e4d;
+		--color-danger-700: #920b3a;
+		--color-danger-800: #610726;
+		--color-danger-900: #310413;
+		--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+		--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+		--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+	}
+
+	.yellow-dark {
+		/* Neutrales oscuros de HeroUI v3 (espejo de su selector `.dark`). */
+    /* == Dark Theme Variables == */
+
+    /* Base Colors */
+    --background: oklch(12% 0.005 285.823);
+    --foreground: var(--snow);
+
+    /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
+    --surface: oklch(0.2103 0.0059 285.89);
+    --surface-foreground: var(--foreground);
+
+    --surface-secondary: oklch(0.257 0.0037 286.14);
+    --surface-tertiary: oklch(0.2721 0.0024 247.91);
+
+    /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
+    --overlay: oklch(0.2103 0.0059 285.89);
+    --overlay-foreground: var(--foreground);
+
+    --muted: oklch(70.5% 0.015 286.067);
+
+    --scrollbar: var(--scrollbar-thumb);
+    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
+    --scrollbar-track: transparent;
+    --scrollbar-gutter: auto;
+    --scrollbar-width: thin;
+    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+
+    --default: oklch(27.4% 0.006 286.033);
+    --default-foreground: var(--snow);
+
+    /* Form Fields */
+    --field-background: oklch(0.2103 0.0059 285.89);
+    --field-foreground: var(--foreground);
+
+    /* Status Colors */
+    --warning: oklch(0.8203 0.1388 76.34);
+    --warning-foreground: var(--eclipse);
+
+    --danger: oklch(0.594 0.1967 24.63);
+    --danger-foreground: var(--snow);
+
+    /* Component Colors */
+    --segment: oklch(0.3964 0.01 285.93);
+    --segment-foreground: var(--foreground);
+
+    /* Misc Colors */
+    --border: oklch(28% 0.006 286.033);
+    --separator: oklch(25% 0.006 286.033);
+    --focus: var(--accent);
+    --link: var(--foreground);
+
+    /* Backdrop */
+    --backdrop: rgba(0, 0, 0, 0.6);
+
+    /* Shadows */
+    --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
+    --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
+    --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
+
+    /* Calculated Colors */
+    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+
+    --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
+    --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --background-inverse: var(--foreground);
+
+    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
+    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+    --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
+    --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
+    --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
+
+    --field-hover: color-mix(
+      in oklab,
+      var(--field-background, var(--default)) 90%,
+      var(--field-foreground, var(--foreground)) 2%
+    );
+    --field-focus: var(--field-background, var(--default));
+    --field-border-hover: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 88%,
+      var(--field-foreground, var(--foreground)) 10%
+    );
+    --field-border-focus: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 74%,
+      var(--field-foreground, var(--foreground)) 22%
+    );
+
+    --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
+    --default-soft-foreground: var(--default-foreground);
+    --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
+
+    --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
+    --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
+    --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
+
+    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
+    --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
+    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
+
+    --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
+    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
+    --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
+
+    --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
+    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
+    --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
+
+    --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+    --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
+
+    --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
+    --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
+
+		--color-background: #000000;
+		--color-foreground: #ECEDEE;
+		--color-foreground-50: #18181b;
+		--color-foreground-100: #27272a;
+		--color-foreground-200: #3f3f46;
+		--color-foreground-300: #52525b;
+		--color-foreground-400: #71717a;
+		--color-foreground-500: #a1a1aa;
+		--color-foreground-600: #d4d4d8;
+		--color-foreground-700: #e4e4e7;
+		--color-foreground-800: #f4f4f5;
+		--color-foreground-900: #fafafa;
+		--color-divider: rgba(255, 255, 255, 0.15);
+		--color-focus: #FFD505;
+		--color-content1: #18181b;
+		--color-content1-foreground: #fafafa;
+		--color-content2: #27272a;
+		--color-content2-foreground: #f4f4f5;
+		--color-content3: #3f3f46;
+		--color-content3-foreground: #e4e4e7;
+		--color-content4: #52525b;
+		--color-content4-foreground: #d4d4d8;
+		--color-default: #3f3f46;
+		--color-default-foreground: #fff;
+		--color-default-50: #18181b;
+		--color-default-100: #27272a;
+		--color-default-200: #3f3f46;
+		--color-default-300: #52525b;
+		--color-default-400: #71717a;
+		--color-default-500: #a1a1aa;
+		--color-default-600: #d4d4d8;
+		--color-default-700: #e4e4e7;
+		--color-default-800: #f4f4f5;
+		--color-default-900: #fafafa;
+		--color-primary: #FFD505;
+		--color-primary-foreground: #000;
+		--color-primary-50: #7A5D00;
+		--color-primary-100: #937301;
+		--color-primary-200: #B79202;
+		--color-primary-300: #DBB303;
+		--color-primary-400: #FFD505;
+		--color-primary-500: #FFE243;
+		--color-primary-600: #FFEB69;
+		--color-primary-700: #FFF39B;
+		--color-primary-800: #FFFACD;
+		--color-primary-900: #fffbe6;
+		--color-secondary: #006fee;
+		--color-secondary-foreground: #fff;
+		--color-secondary-50: #002147;
+		--color-secondary-100: #003571;
+		--color-secondary-200: #00489b;
+		--color-secondary-300: #005cc4;
+		--color-secondary-400: #006fee;
+		--color-secondary-500: #2d88f1;
+		--color-secondary-600: #59a1f4;
+		--color-secondary-700: #86bbf7;
+		--color-secondary-800: #b3d4fa;
+		--color-secondary-900: #dfedfd;
+		--color-success: #17c964;
+		--color-success-foreground: #000;
+		--color-success-50: #052814;
+		--color-success-100: #095028;
+		--color-success-200: #0e793c;
+		--color-success-300: #12a150;
+		--color-success-400: #17c964;
+		--color-success-500: #45d483;
+		--color-success-600: #74dfa2;
+		--color-success-700: #a2e9c1;
+		--color-success-800: #d1f4e0;
+		--color-success-900: #e8faf0;
+		--color-warning: #f5a524;
+		--color-warning-foreground: #000;
+		--color-warning-50: #312107;
+		--color-warning-100: #62420e;
+		--color-warning-200: #936316;
+		--color-warning-300: #c4841d;
+		--color-warning-400: #f5a524;
+		--color-warning-500: #f7b750;
+		--color-warning-600: #f9c97c;
+		--color-warning-700: #fbdba7;
+		--color-warning-800: #fdedd3;
+		--color-warning-900: #fefce8;
+		--color-danger: #f31260;
+		--color-danger-foreground: #ffffff;
+		--color-danger-50: #310413;
+		--color-danger-100: #610726;
+		--color-danger-200: #920b3a;
+		--color-danger-300: #c20e4d;
+		--color-danger-400: #f31260;
+		--color-danger-500: #f54180;
+		--color-danger-600: #f871a0;
+		--color-danger-700: #faa0bf;
+		--color-danger-800: #fdd0df;
+		--color-danger-900: #fee7ef;
+		--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+		--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+		--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+	}
+
+	.coral-light {
+		--color-background: #FFFFFF;
+		--color-foreground: #11181C;
+		--color-foreground-50: #fafafa;
+		--color-foreground-100: #f4f4f5;
+		--color-foreground-200: #e4e4e7;
+		--color-foreground-300: #d4d4d8;
+		--color-foreground-400: #a1a1aa;
+		--color-foreground-500: #71717a;
+		--color-foreground-600: #52525b;
+		--color-foreground-700: #3f3f46;
+		--color-foreground-800: #27272a;
+		--color-foreground-900: #18181b;
+		--color-divider: rgba(17, 17, 17, 0.15);
+		--color-focus: #ff4f4f;
+		--color-content1: #FFFFFF;
+		--color-content1-foreground: #11181C;
+		--color-content2: #f4f4f5;
+		--color-content2-foreground: #27272a;
+		--color-content3: #e4e4e7;
+		--color-content3-foreground: #3f3f46;
+		--color-content4: #d4d4d8;
+		--color-content4-foreground: #52525b;
+		--color-default: #d4d4d8;
+		--color-default-foreground: #000;
+		--color-default-50: #fafafa;
+		--color-default-100: #f4f4f5;
+		--color-default-200: #e4e4e7;
+		--color-default-300: #d4d4d8;
+		--color-default-400: #a1a1aa;
+		--color-default-500: #71717a;
+		--color-default-600: #52525b;
+		--color-default-700: #3f3f46;
+		--color-default-800: #27272a;
+		--color-default-900: #18181b;
+		--color-primary: #ff4f4f;
+		--color-primary-foreground: #000;
+		--color-primary-50: #ffe9e9;
+		--color-primary-100: #ffcaca;
+		--color-primary-200: #ffabab;
+		--color-primary-300: #ff8d8d;
+		--color-primary-400: #ff6e6e;
+		--color-primary-500: #ff4f4f;
+		--color-primary-600: #d24141;
+		--color-primary-700: #a63333;
+		--color-primary-800: #792626;
+		--color-primary-900: #4d1818;
+		--color-secondary: #7828c8;
+		--color-secondary-foreground: #fff;
+		--color-secondary-50: #f2eafa;
+		--color-secondary-100: #e4d4f4;
+		--color-secondary-200: #c9a9e9;
+		--color-secondary-300: #ae7ede;
+		--color-secondary-400: #9353d3;
+		--color-secondary-500: #7828c8;
+		--color-secondary-600: #6020a0;
+		--color-secondary-700: #481878;
+		--color-secondary-800: #301050;
+		--color-secondary-900: #180828;
+		--color-success: #17c964;
+		--color-success-foreground: #000;
+		--color-success-50: #e8faf0;
+		--color-success-100: #d1f4e0;
+		--color-success-200: #a2e9c1;
+		--color-success-300: #74dfa2;
+		--color-success-400: #45d483;
+		--color-success-500: #17c964;
+		--color-success-600: #12a150;
+		--color-success-700: #0e793c;
+		--color-success-800: #095028;
+		--color-success-900: #052814;
+		--color-warning: #f5a524;
+		--color-warning-foreground: #000;
+		--color-warning-50: #fefce8;
+		--color-warning-100: #fdedd3;
+		--color-warning-200: #fbdba7;
+		--color-warning-300: #f9c97c;
+		--color-warning-400: #f7b750;
+		--color-warning-500: #f5a524;
+		--color-warning-600: #c4841d;
+		--color-warning-700: #936316;
+		--color-warning-800: #62420e;
+		--color-warning-900: #312107;
+		--color-danger: #f31260;
+		--color-danger-foreground: #ffffff;
+		--color-danger-50: #fee7ef;
+		--color-danger-100: #fdd0df;
+		--color-danger-200: #faa0bf;
+		--color-danger-300: #f871a0;
+		--color-danger-400: #f54180;
+		--color-danger-500: #f31260;
+		--color-danger-600: #c20e4d;
+		--color-danger-700: #920b3a;
+		--color-danger-800: #610726;
+		--color-danger-900: #310413;
+		--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+		--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+		--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+	}
+
+	.coral-dark {
+		/* Neutrales oscuros de HeroUI v3 (espejo de su selector `.dark`). */
+    /* == Dark Theme Variables == */
+
+    /* Base Colors */
+    --background: oklch(12% 0.005 285.823);
+    --foreground: var(--snow);
+
+    /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
+    --surface: oklch(0.2103 0.0059 285.89);
+    --surface-foreground: var(--foreground);
+
+    --surface-secondary: oklch(0.257 0.0037 286.14);
+    --surface-tertiary: oklch(0.2721 0.0024 247.91);
+
+    /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
+    --overlay: oklch(0.2103 0.0059 285.89);
+    --overlay-foreground: var(--foreground);
+
+    --muted: oklch(70.5% 0.015 286.067);
+
+    --scrollbar: var(--scrollbar-thumb);
+    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
+    --scrollbar-track: transparent;
+    --scrollbar-gutter: auto;
+    --scrollbar-width: thin;
+    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+
+    --default: oklch(27.4% 0.006 286.033);
+    --default-foreground: var(--snow);
+
+    /* Form Fields */
+    --field-background: oklch(0.2103 0.0059 285.89);
+    --field-foreground: var(--foreground);
+
+    /* Status Colors */
+    --warning: oklch(0.8203 0.1388 76.34);
+    --warning-foreground: var(--eclipse);
+
+    --danger: oklch(0.594 0.1967 24.63);
+    --danger-foreground: var(--snow);
+
+    /* Component Colors */
+    --segment: oklch(0.3964 0.01 285.93);
+    --segment-foreground: var(--foreground);
+
+    /* Misc Colors */
+    --border: oklch(28% 0.006 286.033);
+    --separator: oklch(25% 0.006 286.033);
+    --focus: var(--accent);
+    --link: var(--foreground);
+
+    /* Backdrop */
+    --backdrop: rgba(0, 0, 0, 0.6);
+
+    /* Shadows */
+    --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
+    --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
+    --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
+
+    /* Calculated Colors */
+    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+
+    --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
+    --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --background-inverse: var(--foreground);
+
+    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
+    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+    --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
+    --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
+    --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
+
+    --field-hover: color-mix(
+      in oklab,
+      var(--field-background, var(--default)) 90%,
+      var(--field-foreground, var(--foreground)) 2%
+    );
+    --field-focus: var(--field-background, var(--default));
+    --field-border-hover: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 88%,
+      var(--field-foreground, var(--foreground)) 10%
+    );
+    --field-border-focus: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 74%,
+      var(--field-foreground, var(--foreground)) 22%
+    );
+
+    --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
+    --default-soft-foreground: var(--default-foreground);
+    --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
+
+    --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
+    --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
+    --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
+
+    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
+    --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
+    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
+
+    --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
+    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
+    --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
+
+    --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
+    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
+    --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
+
+    --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+    --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
+
+    --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
+    --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
+
+		--color-background: #000000;
+		--color-foreground: #ECEDEE;
+		--color-foreground-50: #18181b;
+		--color-foreground-100: #27272a;
+		--color-foreground-200: #3f3f46;
+		--color-foreground-300: #52525b;
+		--color-foreground-400: #71717a;
+		--color-foreground-500: #a1a1aa;
+		--color-foreground-600: #d4d4d8;
+		--color-foreground-700: #e4e4e7;
+		--color-foreground-800: #f4f4f5;
+		--color-foreground-900: #fafafa;
+		--color-divider: rgba(255, 255, 255, 0.15);
+		--color-focus: #ff4f4f;
+		--color-content1: #18181b;
+		--color-content1-foreground: #fafafa;
+		--color-content2: #27272a;
+		--color-content2-foreground: #f4f4f5;
+		--color-content3: #3f3f46;
+		--color-content3-foreground: #e4e4e7;
+		--color-content4: #52525b;
+		--color-content4-foreground: #d4d4d8;
+		--color-default: #3f3f46;
+		--color-default-foreground: #fff;
+		--color-default-50: #18181b;
+		--color-default-100: #27272a;
+		--color-default-200: #3f3f46;
+		--color-default-300: #52525b;
+		--color-default-400: #71717a;
+		--color-default-500: #a1a1aa;
+		--color-default-600: #d4d4d8;
+		--color-default-700: #e4e4e7;
+		--color-default-800: #f4f4f5;
+		--color-default-900: #fafafa;
+		--color-primary: #ff4f4f;
+		--color-primary-foreground: #000;
+		--color-primary-50: #4d1818;
+		--color-primary-100: #792626;
+		--color-primary-200: #a63333;
+		--color-primary-300: #d24141;
+		--color-primary-400: #ff4f4f;
+		--color-primary-500: #ff6e6e;
+		--color-primary-600: #ff8d8d;
+		--color-primary-700: #ffabab;
+		--color-primary-800: #ffcaca;
+		--color-primary-900: #ffe9e9;
+		--color-secondary: #9353d3;
+		--color-secondary-foreground: #fff;
+		--color-secondary-50: #180828;
+		--color-secondary-100: #301050;
+		--color-secondary-200: #481878;
+		--color-secondary-300: #6020a0;
+		--color-secondary-400: #7828c8;
+		--color-secondary-500: #9353d3;
+		--color-secondary-600: #ae7ede;
+		--color-secondary-700: #c9a9e9;
+		--color-secondary-800: #e4d4f4;
+		--color-secondary-900: #f2eafa;
+		--color-success: #17c964;
+		--color-success-foreground: #000;
+		--color-success-50: #052814;
+		--color-success-100: #095028;
+		--color-success-200: #0e793c;
+		--color-success-300: #12a150;
+		--color-success-400: #17c964;
+		--color-success-500: #45d483;
+		--color-success-600: #74dfa2;
+		--color-success-700: #a2e9c1;
+		--color-success-800: #d1f4e0;
+		--color-success-900: #e8faf0;
+		--color-warning: #f5a524;
+		--color-warning-foreground: #000;
+		--color-warning-50: #312107;
+		--color-warning-100: #62420e;
+		--color-warning-200: #936316;
+		--color-warning-300: #c4841d;
+		--color-warning-400: #f5a524;
+		--color-warning-500: #f7b750;
+		--color-warning-600: #f9c97c;
+		--color-warning-700: #fbdba7;
+		--color-warning-800: #fdedd3;
+		--color-warning-900: #fefce8;
+		--color-danger: #f31260;
+		--color-danger-foreground: #ffffff;
+		--color-danger-50: #310413;
+		--color-danger-100: #610726;
+		--color-danger-200: #920b3a;
+		--color-danger-300: #c20e4d;
+		--color-danger-400: #f31260;
+		--color-danger-500: #f54180;
+		--color-danger-600: #f871a0;
+		--color-danger-700: #faa0bf;
+		--color-danger-800: #fdd0df;
+		--color-danger-900: #fee7ef;
+		--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+		--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+		--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+	}
+
+	.green-light {
+		--color-background: #FFFFFF;
+		--color-foreground: #11181C;
+		--color-foreground-50: #fafafa;
+		--color-foreground-100: #f4f4f5;
+		--color-foreground-200: #e4e4e7;
+		--color-foreground-300: #d4d4d8;
+		--color-foreground-400: #a1a1aa;
+		--color-foreground-500: #71717a;
+		--color-foreground-600: #52525b;
+		--color-foreground-700: #3f3f46;
+		--color-foreground-800: #27272a;
+		--color-foreground-900: #18181b;
+		--color-divider: rgba(17, 17, 17, 0.15);
+		--color-focus: #66cc8a;
+		--color-content1: #FFFFFF;
+		--color-content1-foreground: #11181C;
+		--color-content2: #f4f4f5;
+		--color-content2-foreground: #27272a;
+		--color-content3: #e4e4e7;
+		--color-content3-foreground: #3f3f46;
+		--color-content4: #d4d4d8;
+		--color-content4-foreground: #52525b;
+		--color-default: #d4d4d8;
+		--color-default-foreground: #000;
+		--color-default-50: #fafafa;
+		--color-default-100: #f4f4f5;
+		--color-default-200: #e4e4e7;
+		--color-default-300: #d4d4d8;
+		--color-default-400: #a1a1aa;
+		--color-default-500: #71717a;
+		--color-default-600: #52525b;
+		--color-default-700: #3f3f46;
+		--color-default-800: #27272a;
+		--color-default-900: #18181b;
+		--color-primary: #16C964;
+		--color-primary-foreground: #000;
+		--color-primary-50: #EFFFEF;
+		--color-primary-100: #CFFCD1;
+		--color-primary-200: #A0F9AC;
+		--color-primary-300: #6FEE8D;
+		--color-primary-400: #49DE7B;
+		--color-primary-500: #16C964;
+		--color-primary-600: #10AC64;
+		--color-primary-700: #0B905F;
+		--color-primary-800: #077457;
+		--color-primary-900: #046051;
+		--color-secondary: #3956F9;
+		--color-secondary-foreground: #fff;
+		--color-secondary-50: #e3eaff;
+		--color-secondary-100: #D7DFFE;
+		--color-secondary-200: #AFBFFE;
+		--color-secondary-300: #889DFD;
+		--color-secondary-400: #6A82FB;
+		--color-secondary-500: #3956F9;
+		--color-secondary-600: #2941D6;
+		--color-secondary-700: #1C2EB3;
+		--color-secondary-800: #121F90;
+		--color-secondary-900: #0A1477;
+		--color-success: #49D127;
+		--color-success-foreground: #000;
+		--color-success-50: #e7fde3;
+		--color-success-100: #E8FCD3;
+		--color-success-200: #CBFAA8;
+		--color-success-300: #A4F17B;
+		--color-success-400: #7EE358;
+		--color-success-500: #49D127;
+		--color-success-600: #2FB31C;
+		--color-success-700: #1A9613;
+		--color-success-800: #0C790E;
+		--color-success-900: #076410;
+		--color-warning: #FFC300;
+		--color-warning-foreground: #000;
+		--color-warning-50: #fff9da;
+		--color-warning-100: #FFF7CC;
+		--color-warning-200: #FFEE99;
+		--color-warning-300: #FFE266;
+		--color-warning-400: #FFD63F;
+		--color-warning-500: #FFC300;
+		--color-warning-600: #DBA200;
+		--color-warning-700: #B78300;
+		--color-warning-800: #936600;
+		--color-warning-900: #7A5100;
+		--color-danger: #FF3F4C;
+		--color-danger-foreground: #000;
+		--color-danger-50: #ffe2e5;
+		--color-danger-100: #FFE3D8;
+		--color-danger-200: #FFC1B2;
+		--color-danger-300: #FF988B;
+		--color-danger-400: #FF726F;
+		--color-danger-500: #FF3F4C;
+		--color-danger-600: #DB2E49;
+		--color-danger-700: #B71F45;
+		--color-danger-800: #93143F;
+		--color-danger-900: #7A0C3B;
+		--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+		--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+		--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+	}
+
+	.green-dark {
+		/* Neutrales oscuros de HeroUI v3 (espejo de su selector `.dark`). */
+    /* == Dark Theme Variables == */
+
+    /* Base Colors */
+    --background: oklch(12% 0.005 285.823);
+    --foreground: var(--snow);
+
+    /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
+    --surface: oklch(0.2103 0.0059 285.89);
+    --surface-foreground: var(--foreground);
+
+    --surface-secondary: oklch(0.257 0.0037 286.14);
+    --surface-tertiary: oklch(0.2721 0.0024 247.91);
+
+    /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
+    --overlay: oklch(0.2103 0.0059 285.89);
+    --overlay-foreground: var(--foreground);
+
+    --muted: oklch(70.5% 0.015 286.067);
+
+    --scrollbar: var(--scrollbar-thumb);
+    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
+    --scrollbar-track: transparent;
+    --scrollbar-gutter: auto;
+    --scrollbar-width: thin;
+    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+
+    --default: oklch(27.4% 0.006 286.033);
+    --default-foreground: var(--snow);
+
+    /* Form Fields */
+    --field-background: oklch(0.2103 0.0059 285.89);
+    --field-foreground: var(--foreground);
+
+    /* Status Colors */
+    --warning: oklch(0.8203 0.1388 76.34);
+    --warning-foreground: var(--eclipse);
+
+    --danger: oklch(0.594 0.1967 24.63);
+    --danger-foreground: var(--snow);
+
+    /* Component Colors */
+    --segment: oklch(0.3964 0.01 285.93);
+    --segment-foreground: var(--foreground);
+
+    /* Misc Colors */
+    --border: oklch(28% 0.006 286.033);
+    --separator: oklch(25% 0.006 286.033);
+    --focus: var(--accent);
+    --link: var(--foreground);
+
+    /* Backdrop */
+    --backdrop: rgba(0, 0, 0, 0.6);
+
+    /* Shadows */
+    --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
+    --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
+    --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
+
+    /* Calculated Colors */
+    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+
+    --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
+    --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --background-inverse: var(--foreground);
+
+    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
+    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+    --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
+    --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
+    --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
+
+    --field-hover: color-mix(
+      in oklab,
+      var(--field-background, var(--default)) 90%,
+      var(--field-foreground, var(--foreground)) 2%
+    );
+    --field-focus: var(--field-background, var(--default));
+    --field-border-hover: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 88%,
+      var(--field-foreground, var(--foreground)) 10%
+    );
+    --field-border-focus: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 74%,
+      var(--field-foreground, var(--foreground)) 22%
+    );
+
+    --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
+    --default-soft-foreground: var(--default-foreground);
+    --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
+
+    --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
+    --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
+    --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
+
+    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
+    --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
+    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
+
+    --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
+    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
+    --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
+
+    --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
+    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
+    --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
+
+    --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+    --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
+
+    --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
+    --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
+
+		--color-background: #000000;
+		--color-foreground: #ECEDEE;
+		--color-foreground-50: #18181b;
+		--color-foreground-100: #27272a;
+		--color-foreground-200: #3f3f46;
+		--color-foreground-300: #52525b;
+		--color-foreground-400: #71717a;
+		--color-foreground-500: #a1a1aa;
+		--color-foreground-600: #d4d4d8;
+		--color-foreground-700: #e4e4e7;
+		--color-foreground-800: #f4f4f5;
+		--color-foreground-900: #fafafa;
+		--color-divider: rgba(255, 255, 255, 0.15);
+		--color-focus: #66cc8a;
+		--color-content1: #18181b;
+		--color-content1-foreground: #fafafa;
+		--color-content2: #27272a;
+		--color-content2-foreground: #f4f4f5;
+		--color-content3: #3f3f46;
+		--color-content3-foreground: #e4e4e7;
+		--color-content4: #52525b;
+		--color-content4-foreground: #d4d4d8;
+		--color-default: #3f3f46;
+		--color-default-foreground: #fff;
+		--color-default-50: #18181b;
+		--color-default-100: #27272a;
+		--color-default-200: #3f3f46;
+		--color-default-300: #52525b;
+		--color-default-400: #71717a;
+		--color-default-500: #a1a1aa;
+		--color-default-600: #d4d4d8;
+		--color-default-700: #e4e4e7;
+		--color-default-800: #f4f4f5;
+		--color-default-900: #fafafa;
+		--color-primary: #16C964;
+		--color-primary-foreground: #000;
+		--color-primary-50: #EFFFEF;
+		--color-primary-100: #CFFCD1;
+		--color-primary-200: #A0F9AC;
+		--color-primary-300: #6FEE8D;
+		--color-primary-400: #49DE7B;
+		--color-primary-500: #16C964;
+		--color-primary-600: #10AC64;
+		--color-primary-700: #0B905F;
+		--color-primary-800: #077457;
+		--color-primary-900: #046051;
+		--color-secondary: #3956F9;
+		--color-secondary-foreground: #fff;
+		--color-secondary-50: #e3eaff;
+		--color-secondary-100: #D7DFFE;
+		--color-secondary-200: #AFBFFE;
+		--color-secondary-300: #889DFD;
+		--color-secondary-400: #6A82FB;
+		--color-secondary-500: #3956F9;
+		--color-secondary-600: #2941D6;
+		--color-secondary-700: #1C2EB3;
+		--color-secondary-800: #121F90;
+		--color-secondary-900: #0A1477;
+		--color-success: #49D127;
+		--color-success-foreground: #000;
+		--color-success-50: #e7fde3;
+		--color-success-100: #E8FCD3;
+		--color-success-200: #CBFAA8;
+		--color-success-300: #A4F17B;
+		--color-success-400: #7EE358;
+		--color-success-500: #49D127;
+		--color-success-600: #2FB31C;
+		--color-success-700: #1A9613;
+		--color-success-800: #0C790E;
+		--color-success-900: #076410;
+		--color-warning: #FFC300;
+		--color-warning-foreground: #000;
+		--color-warning-50: #fff9da;
+		--color-warning-100: #FFF7CC;
+		--color-warning-200: #FFEE99;
+		--color-warning-300: #FFE266;
+		--color-warning-400: #FFD63F;
+		--color-warning-500: #FFC300;
+		--color-warning-600: #DBA200;
+		--color-warning-700: #B78300;
+		--color-warning-800: #936600;
+		--color-warning-900: #7A5100;
+		--color-danger: #FF3F4C;
+		--color-danger-foreground: #fff;
+		--color-danger-50: #ffe2e5;
+		--color-danger-100: #FFE3D8;
+		--color-danger-200: #FFC1B2;
+		--color-danger-300: #FF988B;
+		--color-danger-400: #FF726F;
+		--color-danger-500: #FF3F4C;
+		--color-danger-600: #DB2E49;
+		--color-danger-700: #B71F45;
+		--color-danger-800: #93143F;
+		--color-danger-900: #7A0C3B;
+		--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+		--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+		--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+	}
+
+	.skyBlue-light {
+		--color-background: #FFFFFF;
+		--color-foreground: #11181C;
+		--color-foreground-50: #fafafa;
+		--color-foreground-100: #f4f4f5;
+		--color-foreground-200: #e4e4e7;
+		--color-foreground-300: #d4d4d8;
+		--color-foreground-400: #a1a1aa;
+		--color-foreground-500: #71717a;
+		--color-foreground-600: #52525b;
+		--color-foreground-700: #3f3f46;
+		--color-foreground-800: #27272a;
+		--color-foreground-900: #18181b;
+		--color-divider: rgba(17, 17, 17, 0.15);
+		--color-focus: #006FEE;
+		--color-content1: #FFFFFF;
+		--color-content1-foreground: #11181C;
+		--color-content2: #f4f4f5;
+		--color-content2-foreground: #27272a;
+		--color-content3: #e4e4e7;
+		--color-content3-foreground: #3f3f46;
+		--color-content4: #d4d4d8;
+		--color-content4-foreground: #52525b;
+		--color-default: #d4d4d8;
+		--color-default-foreground: #000;
+		--color-default-50: #fafafa;
+		--color-default-100: #f4f4f5;
+		--color-default-200: #e4e4e7;
+		--color-default-300: #d4d4d8;
+		--color-default-400: #a1a1aa;
+		--color-default-500: #71717a;
+		--color-default-600: #52525b;
+		--color-default-700: #3f3f46;
+		--color-default-800: #27272a;
+		--color-default-900: #18181b;
+		--color-primary: #60a5fa;
+		--color-primary-foreground: #000;
+		--color-primary-50: #ebf4fe;
+		--color-primary-100: #cfe4fe;
+		--color-primary-200: #b3d4fd;
+		--color-primary-300: #98c5fc;
+		--color-primary-400: #7cb5fb;
+		--color-primary-500: #60a5fa;
+		--color-primary-600: #4f88ce;
+		--color-primary-700: #3e6ba3;
+		--color-primary-800: #2e4e77;
+		--color-primary-900: #1d324b;
+		--color-secondary: #fad19e;
+		--color-secondary-foreground: #000;
+		--color-secondary-50: #fef9f3;
+		--color-secondary-100: #fef1e2;
+		--color-secondary-200: #fde9d1;
+		--color-secondary-300: #fce1c0;
+		--color-secondary-400: #fbd9af;
+		--color-secondary-500: #fad19e;
+		--color-secondary-600: #ceac82;
+		--color-secondary-700: #a38867;
+		--color-secondary-800: #77634b;
+		--color-secondary-900: #4b3f2f;
+		--color-success: #7aca97;
+		--color-success-foreground: #000;
+		--color-success-50: #eef8f2;
+		--color-success-100: #d7efe0;
+		--color-success-200: #c0e6ce;
+		--color-success-300: #a9ddbb;
+		--color-success-400: #91d3a9;
+		--color-success-500: #7aca97;
+		--color-success-600: #65a77d;
+		--color-success-700: #4f8362;
+		--color-success-800: #3a6048;
+		--color-success-900: #253d2d;
+		--color-warning: #ffa37c;
+		--color-warning-foreground: #000;
+		--color-warning-50: #fff4ef;
+		--color-warning-100: #ffe3d8;
+		--color-warning-200: #ffd3c1;
+		--color-warning-300: #ffc3aa;
+		--color-warning-400: #ffb393;
+		--color-warning-500: #ffa37c;
+		--color-warning-600: #d28666;
+		--color-warning-700: #a66a51;
+		--color-warning-800: #794d3b;
+		--color-warning-900: #4d3125;
+		--color-danger: #f16969;
+		--color-danger-foreground: #000;
+		--color-danger-50: #fdecec;
+		--color-danger-100: #fbd2d2;
+		--color-danger-200: #f8b8b8;
+		--color-danger-300: #f69e9e;
+		--color-danger-400: #f38383;
+		--color-danger-500: #f16969;
+		--color-danger-600: #c75757;
+		--color-danger-700: #9d4444;
+		--color-danger-800: #723232;
+		--color-danger-900: #482020;
+		--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+		--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+		--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+	}
+
+	.skyBlue-dark {
+		/* Neutrales oscuros de HeroUI v3 (espejo de su selector `.dark`). */
+    /* == Dark Theme Variables == */
+
+    /* Base Colors */
+    --background: oklch(12% 0.005 285.823);
+    --foreground: var(--snow);
+
+    /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
+    --surface: oklch(0.2103 0.0059 285.89);
+    --surface-foreground: var(--foreground);
+
+    --surface-secondary: oklch(0.257 0.0037 286.14);
+    --surface-tertiary: oklch(0.2721 0.0024 247.91);
+
+    /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
+    --overlay: oklch(0.2103 0.0059 285.89);
+    --overlay-foreground: var(--foreground);
+
+    --muted: oklch(70.5% 0.015 286.067);
+
+    --scrollbar: var(--scrollbar-thumb);
+    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
+    --scrollbar-track: transparent;
+    --scrollbar-gutter: auto;
+    --scrollbar-width: thin;
+    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+
+    --default: oklch(27.4% 0.006 286.033);
+    --default-foreground: var(--snow);
+
+    /* Form Fields */
+    --field-background: oklch(0.2103 0.0059 285.89);
+    --field-foreground: var(--foreground);
+
+    /* Status Colors */
+    --warning: oklch(0.8203 0.1388 76.34);
+    --warning-foreground: var(--eclipse);
+
+    --danger: oklch(0.594 0.1967 24.63);
+    --danger-foreground: var(--snow);
+
+    /* Component Colors */
+    --segment: oklch(0.3964 0.01 285.93);
+    --segment-foreground: var(--foreground);
+
+    /* Misc Colors */
+    --border: oklch(28% 0.006 286.033);
+    --separator: oklch(25% 0.006 286.033);
+    --focus: var(--accent);
+    --link: var(--foreground);
+
+    /* Backdrop */
+    --backdrop: rgba(0, 0, 0, 0.6);
+
+    /* Shadows */
+    --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
+    --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
+    --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
+
+    /* Calculated Colors */
+    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+
+    --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
+    --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --background-inverse: var(--foreground);
+
+    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
+    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+    --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
+    --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
+    --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
+
+    --field-hover: color-mix(
+      in oklab,
+      var(--field-background, var(--default)) 90%,
+      var(--field-foreground, var(--foreground)) 2%
+    );
+    --field-focus: var(--field-background, var(--default));
+    --field-border-hover: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 88%,
+      var(--field-foreground, var(--foreground)) 10%
+    );
+    --field-border-focus: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 74%,
+      var(--field-foreground, var(--foreground)) 22%
+    );
+
+    --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
+    --default-soft-foreground: var(--default-foreground);
+    --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
+
+    --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
+    --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
+    --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
+
+    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
+    --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
+    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
+
+    --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
+    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
+    --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
+
+    --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
+    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
+    --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
+
+    --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+    --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
+
+    --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
+    --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
+
+		--color-background: #000000;
+		--color-foreground: #ECEDEE;
+		--color-foreground-50: #18181b;
+		--color-foreground-100: #27272a;
+		--color-foreground-200: #3f3f46;
+		--color-foreground-300: #52525b;
+		--color-foreground-400: #71717a;
+		--color-foreground-500: #a1a1aa;
+		--color-foreground-600: #d4d4d8;
+		--color-foreground-700: #e4e4e7;
+		--color-foreground-800: #f4f4f5;
+		--color-foreground-900: #fafafa;
+		--color-divider: rgba(255, 255, 255, 0.15);
+		--color-focus: #006FEE;
+		--color-content1: #18181b;
+		--color-content1-foreground: #fafafa;
+		--color-content2: #27272a;
+		--color-content2-foreground: #f4f4f5;
+		--color-content3: #3f3f46;
+		--color-content3-foreground: #e4e4e7;
+		--color-content4: #52525b;
+		--color-content4-foreground: #d4d4d8;
+		--color-default: #3f3f46;
+		--color-default-foreground: #fff;
+		--color-default-50: #18181b;
+		--color-default-100: #27272a;
+		--color-default-200: #3f3f46;
+		--color-default-300: #52525b;
+		--color-default-400: #71717a;
+		--color-default-500: #a1a1aa;
+		--color-default-600: #d4d4d8;
+		--color-default-700: #e4e4e7;
+		--color-default-800: #f4f4f5;
+		--color-default-900: #fafafa;
+		--color-primary: #60a5fa;
+		--color-primary-foreground: #000;
+		--color-primary-50: #1d324b;
+		--color-primary-100: #2e4e77;
+		--color-primary-200: #3e6ba3;
+		--color-primary-300: #4f88ce;
+		--color-primary-400: #60a5fa;
+		--color-primary-500: #7cb5fb;
+		--color-primary-600: #98c5fc;
+		--color-primary-700: #b3d4fd;
+		--color-primary-800: #cfe4fe;
+		--color-primary-900: #ebf4fe;
+		--color-secondary: #fad19e;
+		--color-secondary-foreground: #000;
+		--color-secondary-50: #4b3f2f;
+		--color-secondary-100: #77634b;
+		--color-secondary-200: #a38867;
+		--color-secondary-300: #ceac82;
+		--color-secondary-400: #fad19e;
+		--color-secondary-500: #fbd9af;
+		--color-secondary-600: #fce1c0;
+		--color-secondary-700: #fde9d1;
+		--color-secondary-800: #fef1e2;
+		--color-secondary-900: #fef9f3;
+		--color-success: #7aca97;
+		--color-success-foreground: #000;
+		--color-success-50: #253d2d;
+		--color-success-100: #3a6048;
+		--color-success-200: #4f8362;
+		--color-success-300: #65a77d;
+		--color-success-400: #7aca97;
+		--color-success-500: #91d3a9;
+		--color-success-600: #a9ddbb;
+		--color-success-700: #c0e6ce;
+		--color-success-800: #d7efe0;
+		--color-success-900: #eef8f2;
+		--color-warning: #ffa37c;
+		--color-warning-foreground: #000;
+		--color-warning-50: #4d3125;
+		--color-warning-100: #794d3b;
+		--color-warning-200: #a66a51;
+		--color-warning-300: #d28666;
+		--color-warning-400: #ffa37c;
+		--color-warning-500: #ffb393;
+		--color-warning-600: #ffc3aa;
+		--color-warning-700: #ffd3c1;
+		--color-warning-800: #ffe3d8;
+		--color-warning-900: #fff4ef;
+		--color-danger: #f16969;
+		--color-danger-foreground: #000;
+		--color-danger-50: #482020;
+		--color-danger-100: #723232;
+		--color-danger-200: #9d4444;
+		--color-danger-300: #c75757;
+		--color-danger-400: #f16969;
+		--color-danger-500: #f38383;
+		--color-danger-600: #f69e9e;
+		--color-danger-700: #f8b8b8;
+		--color-danger-800: #fbd2d2;
+		--color-danger-900: #fdecec;
+		--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+		--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+		--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+	}
+
+	.oceanMint-light {
+		--color-background: #FFFFFF;
+		--color-foreground: #11181C;
+		--color-foreground-50: #fafafa;
+		--color-foreground-100: #f4f4f5;
+		--color-foreground-200: #e4e4e7;
+		--color-foreground-300: #d4d4d8;
+		--color-foreground-400: #a1a1aa;
+		--color-foreground-500: #71717a;
+		--color-foreground-600: #52525b;
+		--color-foreground-700: #3f3f46;
+		--color-foreground-800: #27272a;
+		--color-foreground-900: #18181b;
+		--color-divider: rgba(17, 17, 17, 0.15);
+		--color-focus: #006FEE;
+		--color-content1: #FFFFFF;
+		--color-content1-foreground: #11181C;
+		--color-content2: #f4f4f5;
+		--color-content2-foreground: #27272a;
+		--color-content3: #e4e4e7;
+		--color-content3-foreground: #3f3f46;
+		--color-content4: #d4d4d8;
+		--color-content4-foreground: #52525b;
+		--color-default: #d4d4d8;
+		--color-default-foreground: #000;
+		--color-default-50: #fafafa;
+		--color-default-100: #f4f4f5;
+		--color-default-200: #e4e4e7;
+		--color-default-300: #d4d4d8;
+		--color-default-400: #a1a1aa;
+		--color-default-500: #71717a;
+		--color-default-600: #52525b;
+		--color-default-700: #3f3f46;
+		--color-default-800: #27272a;
+		--color-default-900: #18181b;
+		--color-primary: #26a5e5;
+		--color-primary-foreground: #000;
+		--color-primary-50: #e4f4fc;
+		--color-primary-100: #bee4f7;
+		--color-primary-200: #98d4f3;
+		--color-primary-300: #72c5ee;
+		--color-primary-400: #4cb5ea;
+		--color-primary-500: #26a5e5;
+		--color-primary-600: #1f88bd;
+		--color-primary-700: #196b95;
+		--color-primary-800: #124e6d;
+		--color-primary-900: #0b3245;
+		--color-secondary: #1aef96;
+		--color-secondary-foreground: #000;
+		--color-secondary-50: #e2fdf2;
+		--color-secondary-100: #bafae0;
+		--color-secondary-200: #92f7cd;
+		--color-secondary-300: #6af5bb;
+		--color-secondary-400: #42f2a8;
+		--color-secondary-500: #1aef96;
+		--color-secondary-600: #15c57c;
+		--color-secondary-700: #119b62;
+		--color-secondary-800: #0c7247;
+		--color-secondary-900: #08482d;
+		--color-success: #17c964;
+		--color-success-foreground: #000;
+		--color-success-50: #e2f8ec;
+		--color-success-100: #b9efd1;
+		--color-success-200: #91e5b5;
+		--color-success-300: #68dc9a;
+		--color-success-400: #40d27f;
+		--color-success-500: #17c964;
+		--color-success-600: #13a653;
+		--color-success-700: #0f8341;
+		--color-success-800: #0b5f30;
+		--color-success-900: #073c1e;
+		--color-warning: #f5a524;
+		--color-warning-foreground: #000;
+		--color-warning-50: #fef4e4;
+		--color-warning-100: #fce4bd;
+		--color-warning-200: #fad497;
+		--color-warning-300: #f9c571;
+		--color-warning-400: #f7b54a;
+		--color-warning-500: #f5a524;
+		--color-warning-600: #ca881e;
+		--color-warning-700: #9f6b17;
+		--color-warning-800: #744e11;
+		--color-warning-900: #4a320b;
+		--color-danger: #f31260;
+		--color-danger-foreground: #000;
+		--color-danger-50: #fee1eb;
+		--color-danger-100: #fbb8cf;
+		--color-danger-200: #f98eb3;
+		--color-danger-300: #f76598;
+		--color-danger-400: #f53b7c;
+		--color-danger-500: #f31260;
+		--color-danger-600: #c80f4f;
+		--color-danger-700: #9e0c3e;
+		--color-danger-800: #73092e;
+		--color-danger-900: #49051d;
+		--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+		--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+		--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+	}
+
+	.oceanMint-dark {
+		/* Neutrales oscuros de HeroUI v3 (espejo de su selector `.dark`). */
+    /* == Dark Theme Variables == */
+
+    /* Base Colors */
+    --background: oklch(12% 0.005 285.823);
+    --foreground: var(--snow);
+
+    /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
+    --surface: oklch(0.2103 0.0059 285.89);
+    --surface-foreground: var(--foreground);
+
+    --surface-secondary: oklch(0.257 0.0037 286.14);
+    --surface-tertiary: oklch(0.2721 0.0024 247.91);
+
+    /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
+    --overlay: oklch(0.2103 0.0059 285.89);
+    --overlay-foreground: var(--foreground);
+
+    --muted: oklch(70.5% 0.015 286.067);
+
+    --scrollbar: var(--scrollbar-thumb);
+    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
+    --scrollbar-track: transparent;
+    --scrollbar-gutter: auto;
+    --scrollbar-width: thin;
+    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+
+    --default: oklch(27.4% 0.006 286.033);
+    --default-foreground: var(--snow);
+
+    /* Form Fields */
+    --field-background: oklch(0.2103 0.0059 285.89);
+    --field-foreground: var(--foreground);
+
+    /* Status Colors */
+    --warning: oklch(0.8203 0.1388 76.34);
+    --warning-foreground: var(--eclipse);
+
+    --danger: oklch(0.594 0.1967 24.63);
+    --danger-foreground: var(--snow);
+
+    /* Component Colors */
+    --segment: oklch(0.3964 0.01 285.93);
+    --segment-foreground: var(--foreground);
+
+    /* Misc Colors */
+    --border: oklch(28% 0.006 286.033);
+    --separator: oklch(25% 0.006 286.033);
+    --focus: var(--accent);
+    --link: var(--foreground);
+
+    /* Backdrop */
+    --backdrop: rgba(0, 0, 0, 0.6);
+
+    /* Shadows */
+    --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
+    --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
+    --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
+
+    /* Calculated Colors */
+    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+
+    --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
+    --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --background-inverse: var(--foreground);
+
+    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
+    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+    --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
+    --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
+    --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
+
+    --field-hover: color-mix(
+      in oklab,
+      var(--field-background, var(--default)) 90%,
+      var(--field-foreground, var(--foreground)) 2%
+    );
+    --field-focus: var(--field-background, var(--default));
+    --field-border-hover: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 88%,
+      var(--field-foreground, var(--foreground)) 10%
+    );
+    --field-border-focus: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 74%,
+      var(--field-foreground, var(--foreground)) 22%
+    );
+
+    --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
+    --default-soft-foreground: var(--default-foreground);
+    --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
+
+    --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
+    --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
+    --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
+
+    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
+    --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
+    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
+
+    --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
+    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
+    --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
+
+    --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
+    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
+    --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
+
+    --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+    --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
+
+    --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
+    --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
+
+		--color-background: #000000;
+		--color-foreground: #ECEDEE;
+		--color-foreground-50: #18181b;
+		--color-foreground-100: #27272a;
+		--color-foreground-200: #3f3f46;
+		--color-foreground-300: #52525b;
+		--color-foreground-400: #71717a;
+		--color-foreground-500: #a1a1aa;
+		--color-foreground-600: #d4d4d8;
+		--color-foreground-700: #e4e4e7;
+		--color-foreground-800: #f4f4f5;
+		--color-foreground-900: #fafafa;
+		--color-divider: rgba(255, 255, 255, 0.15);
+		--color-focus: #006FEE;
+		--color-content1: #18181b;
+		--color-content1-foreground: #fafafa;
+		--color-content2: #27272a;
+		--color-content2-foreground: #f4f4f5;
+		--color-content3: #3f3f46;
+		--color-content3-foreground: #e4e4e7;
+		--color-content4: #52525b;
+		--color-content4-foreground: #d4d4d8;
+		--color-default: #3f3f46;
+		--color-default-foreground: #fff;
+		--color-default-50: #18181b;
+		--color-default-100: #27272a;
+		--color-default-200: #3f3f46;
+		--color-default-300: #52525b;
+		--color-default-400: #71717a;
+		--color-default-500: #a1a1aa;
+		--color-default-600: #d4d4d8;
+		--color-default-700: #e4e4e7;
+		--color-default-800: #f4f4f5;
+		--color-default-900: #fafafa;
+		--color-primary: #26a5e5;
+		--color-primary-foreground: #000;
+		--color-primary-50: #0b3245;
+		--color-primary-100: #124e6d;
+		--color-primary-200: #196b95;
+		--color-primary-300: #1f88bd;
+		--color-primary-400: #26a5e5;
+		--color-primary-500: #4cb5ea;
+		--color-primary-600: #72c5ee;
+		--color-primary-700: #98d4f3;
+		--color-primary-800: #bee4f7;
+		--color-primary-900: #e4f4fc;
+		--color-secondary: #1aef96;
+		--color-secondary-foreground: #000;
+		--color-secondary-50: #08482d;
+		--color-secondary-100: #0c7247;
+		--color-secondary-200: #119b62;
+		--color-secondary-300: #15c57c;
+		--color-secondary-400: #1aef96;
+		--color-secondary-500: #42f2a8;
+		--color-secondary-600: #6af5bb;
+		--color-secondary-700: #92f7cd;
+		--color-secondary-800: #bafae0;
+		--color-secondary-900: #e2fdf2;
+		--color-success: #17c964;
+		--color-success-foreground: #000;
+		--color-success-50: #073c1e;
+		--color-success-100: #0b5f30;
+		--color-success-200: #0f8341;
+		--color-success-300: #13a653;
+		--color-success-400: #17c964;
+		--color-success-500: #40d27f;
+		--color-success-600: #68dc9a;
+		--color-success-700: #91e5b5;
+		--color-success-800: #b9efd1;
+		--color-success-900: #e2f8ec;
+		--color-warning: #f5a524;
+		--color-warning-foreground: #000;
+		--color-warning-50: #4a320b;
+		--color-warning-100: #744e11;
+		--color-warning-200: #9f6b17;
+		--color-warning-300: #ca881e;
+		--color-warning-400: #f5a524;
+		--color-warning-500: #f7b54a;
+		--color-warning-600: #f9c571;
+		--color-warning-700: #fad497;
+		--color-warning-800: #fce4bd;
+		--color-warning-900: #fef4e4;
+		--color-danger: #f31260;
+		--color-danger-foreground: #000;
+		--color-danger-50: #49051d;
+		--color-danger-100: #73092e;
+		--color-danger-200: #9e0c3e;
+		--color-danger-300: #c80f4f;
+		--color-danger-400: #f31260;
+		--color-danger-500: #f53b7c;
+		--color-danger-600: #f76598;
+		--color-danger-700: #f98eb3;
+		--color-danger-800: #fbb8cf;
+		--color-danger-900: #fee1eb;
+		--aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+		--aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+		--aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
+	}
+
+	/*
+	 * HeroUI v3 pinta con sus propios tokens (`--accent`, `--danger`, `--focus`…).
+	 * Se apuntan a los de Aurora para que sigan al pack activo sea cual sea.
+	 * `secondary` no se mapea: v3 no tiene ese color (su `variant="secondary"` es gris).
+	 */
+	:root, .light,
+	.dark,
+	.blue-light,
+	.blue-dark,
+	.purple-light,
+	.purple-dark,
+	.yellow-light,
+	.yellow-dark,
+	.coral-light,
+	.coral-dark,
+	.green-light,
+	.green-dark,
+	.skyBlue-light,
+	.skyBlue-dark,
+	.oceanMint-light,
+	.oceanMint-dark {
+		--accent: var(--color-primary);
+		--accent-foreground: var(--color-primary-foreground);
+		--success: var(--color-success);
+		--success-foreground: var(--color-success-foreground);
+		--warning: var(--color-warning);
+		--warning-foreground: var(--color-warning-foreground);
+		--danger: var(--color-danger);
+		--danger-foreground: var(--color-danger-foreground);
+		--focus: var(--color-focus);
+	}
+}