@beweco/aurora-ui 1.0.0-beta.147 → 1.0.0-beta.149

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import { Card as Card$1, Breadcrumbs, ProgressBar, Label, ListBoxSection, ListBo
 export { Accordion, AccordionItem, Avatar, Breadcrumbs, CardFooter, CardHeader, CheckboxGroup, CloseButton, DropdownItem, DropdownMenu, DropdownTrigger, Link, Popover, PopoverContent, PopoverTrigger, Radio, RadioGroup, Skeleton, Slider, Spinner, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@heroui/react';
 import { cnMerge } from 'tailwind-variants';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import $8WNJc$react, { Children, isValidElement, Fragment, useState, useRef, useCallback, useEffect, createElement, useId, forwardRef, useMemo, cloneElement, useImperativeHandle, createContext, useContext, useLayoutEffect, memo, useReducer, version } from 'react';
+import $8WNJc$react, { Children, isValidElement, Fragment, useState, useRef, useCallback, useEffect, createElement, useId, forwardRef, useMemo, cloneElement, useInsertionEffect, useImperativeHandle, createContext, useContext, useLayoutEffect, memo, useReducer, version } from 'react';
 import { Icon } from '@iconify/react';
 export { loadIcons } from '@iconify/react';
 import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, Tooltip as Tooltip$1, Area, LineChart, YAxis, Line, PieChart, Pie, Cell } from 'recharts';
@@ -1406,7 +1406,7 @@ const ACTIVE_SHADOW_CLASS = {
  * Traducciones por defecto en español. Todas son `aria-label`: este componente no tiene más
  * texto visible que los números de página.
  */
-const DEFAULT_TRANSLATIONS$g = {
+const DEFAULT_TRANSLATIONS$h = {
     previousPageAriaLabel: "Página anterior",
     nextPageAriaLabel: "Página siguiente",
     jumpBackwardAriaLabel: "Retroceder {count} páginas",
@@ -1437,7 +1437,7 @@ const EN_TRANSLATIONS = {
 function baseTranslations(locale) {
     return locale.toLowerCase().startsWith("en")
         ? EN_TRANSLATIONS
-        : DEFAULT_TRANSLATIONS$g;
+        : DEFAULT_TRANSLATIONS$h;
 }
 /**
  * TECH-2459 · elipsis navegable — páginas que salta la elipsis. Literal de v2:
@@ -3201,7 +3201,7 @@ function withV2ItemContent(children) {
 }
 
 /** Traducciones por defecto en español (mismo literal que la ✕ de la fachada `Input`). */
-const DEFAULT_TRANSLATIONS$f = {
+const DEFAULT_TRANSLATIONS$g = {
     clearButtonAriaLabel: "Limpiar",
     emptyContent: "No se encontraron resultados",
 };
@@ -3559,7 +3559,7 @@ labelPlacement: _labelPlacement, scrollShadowProps, ...props }) => {
         : icon === undefined
             ? DEFAULT_ICON
             : icon;
-    const t = { ...DEFAULT_TRANSLATIONS$f, ...translations };
+    const t = { ...DEFAULT_TRANSLATIONS$g, ...translations };
     // La regla de v2 para la lista vacía (ver `EMPTY_CONTENT_CLASS`).
     const hideEmptyContent = Boolean(allowsCustomValue) && listboxProps?.emptyContent == null;
     const emptyContent = listboxProps?.emptyContent ?? t.emptyContent;
@@ -3697,274 +3697,49 @@ labelPlacement: _labelPlacement, scrollShadowProps, ...props }) => {
 };
 
 /**
- * ColorPicker Types
- *
- * Defines the type system for the ColorPicker component used for brand configuration.
- */
-/**
- * Default predefined colors (Brand-safe palette)
- */
-const DEFAULT_PREDEFINED_COLORS = [
-    // Primary colors
-    { key: "blue", name: "Azul", value: "#3B82F6" },
-    { key: "violet", name: "Violeta", value: "#8B5CF6" },
-    { key: "purple", name: "Púrpura", value: "#A855F7" },
-    // Secondary colors
-    { key: "green", name: "Verde", value: "#10B981" },
-    { key: "teal", name: "Turquesa", value: "#14B8A6" },
-    { key: "cyan", name: "Cian", value: "#06B6D4" },
-    // Accent colors
-    { key: "pink", name: "Rosa", value: "#EC4899" },
-    { key: "rose", name: "Rosa claro", value: "#F43F5E" },
-    { key: "orange", name: "Naranja", value: "#F97316" },
-    // Neutral colors
-    { key: "red", name: "Rojo", value: "#EF4444" },
-    { key: "amber", name: "Ámbar", value: "#F59E0B" },
-    { key: "yellow", name: "Amarillo", value: "#EAB308" },
-    // Gray scale (useful for text/backgrounds)
-    { key: "gray-dark", name: "Gris oscuro", value: "#374151" },
-    { key: "gray", name: "Gris", value: "#6B7280" },
-    { key: "gray-light", name: "Gris claro", value: "#9CA3AF" },
-];
-
-/**
- * Default translations (Spanish)
- */
-const defaultTranslations$e = {
-    label: "Color",
-    placeholder: "Ingresa código hex",
-    customColorLabel: "Color personalizado",
-    predefinedColorsLabel: "Colores predefinidos",
-    recentColorsLabel: "Colores recientes",
-    noRecentColors: "No hay colores recientes",
-    invalidColorFormat: "El código de color no es un formato HEX válido (Ej: #FF5733 o FFA07A)",
-    colorPreview: "Vista previa del color",
-};
-/**
- * Validates hex color format (#RRGGBB or #RGB)
- */
-const isValidHexColor = (color) => {
-    const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
-    return hexRegex.test(color);
-};
-/**
- * Normalizes hex color to 6-digit format (#RGB -> #RRGGBB)
- */
-const normalizeHexColor = (color) => {
-    if (!color.startsWith("#")) {
-        color = `#${color}`;
+ * Deja una `<style id>` en el `<head>` con las reglas de un componente, una sola vez.
+ *
+ * Existe para los componentes que no pueden depender de `@beweco/aurora-ui/styles`: los
+ * que llegan a un microfrontend por Module Federation (chatbot-claw recibe aurora-ui del
+ * host con `import: false`) o se montan sueltos. Si sus reglas vivieran en `styles.css`,
+ * funcionarían solo cuando el host carga ese CSS y además en la misma versión que el JS
+ * que viaja por MF; cuando no, el componente sale sin animación ni tema y nadie se entera.
+ * Aquí la regla viaja con el componente, como ya hace `SocialMediaCarousel`.
+ *
+ * Idempotente por `id`: cien mascotas en un hilo dejan una sola `<style>`. Nunca reescribe
+ * una `<style>` existente: si en la página conviven dos copias del paquete, se pisarían en
+ * cada montaje. Para que una versión nueva del CSS entre, el id lleva su huella
+ * (`styleIdFor`).
+ */
+const injectStyle = (doc, id, css) => {
+    if (!doc?.head) {
+        return;
     }
-    // Convert 3-digit to 6-digit
-    if (color.length === 4) {
-        const r = color[1];
-        const g = color[2];
-        const b = color[3];
-        return `#${r}${r}${g}${g}${b}${b}`.toUpperCase();
+    if (doc.getElementById(id)) {
+        return;
     }
-    return color.toUpperCase();
+    const style = doc.createElement("style");
+    style.id = id;
+    style.textContent = css;
+    doc.head.appendChild(style);
+};
+/** `<base>-<huella del css>`: estable para el mismo CSS, distinto si cambia. */
+const styleIdFor = (base, css) => {
+    let hash = 5381;
+    for (let i = 0; i < css.length; i++) {
+        hash = ((hash << 5) + hash + css.charCodeAt(i)) | 0;
+    }
+    return `${base}-${(hash >>> 0).toString(36)}`;
 };
 /**
- * Strips leading "#" characters so the text input shows only the hex digits.
- * The "#" prefix is rendered as a fixed startContent in the Input.
+ * `useInsertionEffect` corre antes de pintar y antes que los efectos de layout: las reglas
+ * están en el documento cuando el SVG aparece por primera vez, sin parpadeo sin estilo.
+ * En servidor no corre (y `renderToStaticMarkup` en los tests tampoco lo ejecuta).
  */
-const stripHash = (color) => color.replace(/^#+/, "");
-/**
- * ColorPicker - Advanced color selection component
- *
- * Features:
- * - Native color picker input
- * - Text input for hex codes
- * - Predefined color palette
- * - Recent colors with localStorage persistence
- * - Full i18n support
- * - Dark mode compatible
- * - Accessible
- *
- * @component
- * @example
- * ```tsx
- * <ColorPicker
- *   value={brandColor}
- *   onChange={setBrandColor}
- *   label="Color de marca"
- *   enableRecentColors
- * />
- * ```
- */
-const ColorPicker = forwardRef(({ value, onChange, label, required = false, disabled = false, error = false, errorText, predefinedColors = DEFAULT_PREDEFINED_COLORS, enableRecentColors = true, maxRecentColors = 6, recentColorsStorageKey = "aurora-ui-recent-colors", showPredefinedColors = true, translations = {}, className = "", id, name, }, ref) => {
-    const generatedId = useId();
-    const inputId = id || generatedId;
-    const t = { ...defaultTranslations$e, ...translations };
-    // Local state for text input — holds the hex digits WITHOUT the leading "#".
-    // The "#" is rendered as a fixed startContent prefix.
-    const [textValue, setTextValue] = useState(stripHash(value));
-    const [isInvalidFormat, setIsInvalidFormat] = useState(false);
-    // Recent colors state
-    const [recentColors, setRecentColors] = useState([]);
-    // Load recent colors from localStorage on mount
-    useEffect(() => {
-        if (!enableRecentColors)
-            return;
-        try {
-            const stored = localStorage.getItem(recentColorsStorageKey);
-            if (stored) {
-                const colors = JSON.parse(stored);
-                setRecentColors(colors);
-            }
-        }
-        catch (error) {
-            console.error("Error loading recent colors:", error);
-        }
-    }, [enableRecentColors, recentColorsStorageKey]);
-    // Save to recent colors when value changes
-    useEffect(() => {
-        if (!enableRecentColors || !value || !isValidHexColor(value))
-            return;
-        const normalizedValue = normalizeHexColor(value);
-        // Add to recent colors if not already present
-        setRecentColors((prev) => {
-            // Remove if already exists
-            const filtered = prev.filter((c) => c !== normalizedValue);
-            // Add to beginning
-            const updated = [normalizedValue, ...filtered].slice(0, maxRecentColors);
-            // Save to localStorage
-            try {
-                localStorage.setItem(recentColorsStorageKey, JSON.stringify(updated));
-            }
-            catch (error) {
-                console.error("Error saving recent colors:", error);
-            }
-            return updated;
-        });
-    }, [value, enableRecentColors, maxRecentColors, recentColorsStorageKey]);
-    // Sync text value when prop value changes
-    useEffect(() => {
-        setTextValue(stripHash(value));
-        setIsInvalidFormat(false);
-    }, [value]);
-    /**
-     * Handle color picker (native input) change
-     */
-    const handleColorPickerChange = (e) => {
-        const newColor = normalizeHexColor(e.target.value);
-        setTextValue(stripHash(newColor));
-        setIsInvalidFormat(false);
-        onChange(newColor);
-    };
-    /**
-     * Handle text input change — passive: no validation, normalization, or
-     * onChange propagation while typing. We only update local state and clear
-     * any stale error so the user can correct an invalid value without the
-     * red border lingering. Validation (and stripping of the leading "#")
-     * runs on blur.
-     *
-     * While typing we let the user see whatever they pressed — including a
-     * leading "#" — so the input feels responsive. To prevent a double "#"
-     * on screen, the fixed prefix in `startContent` is hidden while
-     * `textValue` already starts with "#". The cap is `7` (1 "#" + 6 hex)
-     * when the user opted into a leading "#", otherwise `6`.
-     */
-    const handleTextChange = (newValue) => {
-        const max = newValue.startsWith("#") ? 7 : 6;
-        setTextValue(newValue.slice(0, max));
-        setIsInvalidFormat(false);
-    };
-    /**
-     * Validate the current hex input. Updates `isInvalidFormat` and, when
-     * the input is a valid hex, normalizes the display and propagates via
-     * `onChange`. Returns whether the input is acceptable so a caller can
-     * decide to block submission.
-     *
-     * Empty + not required → valid (no error, no propagation).
-     * Empty + required → invalid (error).
-     * Valid (3 or 6 hex chars, with or without leading "#") → normalize, sync
-     * display to canonical form, propagate, valid.
-     * Otherwise → invalid (error, no propagation).
-     */
-    const validate = useCallback(() => {
-        // User may have typed a leading "#" — strip it so it doesn't end up
-        // as "##" once we prepend "#" for the regex check.
-        const trimmed = stripHash(textValue.trim());
-        if (trimmed === "") {
-            const valid = !required;
-            setIsInvalidFormat(!valid);
-            // Drop any residual "#" the user typed but never followed up on,
-            // so the field reads as truly empty after blur.
-            setTextValue("");
-            return valid;
-        }
-        const candidate = `#${trimmed}`;
-        if (!isValidHexColor(candidate)) {
-            setIsInvalidFormat(true);
-            return false;
-        }
-        const normalized = normalizeHexColor(candidate);
-        setIsInvalidFormat(false);
-        setTextValue(stripHash(normalized));
-        onChange(normalized);
-        return true;
-    }, [textValue, required, onChange]);
-    useImperativeHandle(ref, () => ({ validate }), [validate]);
-    const handleTextBlur = () => {
-        validate();
-    };
-    /**
-     * Handle predefined color selection
-     */
-    const handlePredefinedColorClick = (colorValue) => {
-        if (disabled)
-            return;
-        const normalized = normalizeHexColor(colorValue);
-        setTextValue(stripHash(normalized));
-        setIsInvalidFormat(false);
-        onChange(normalized);
-    };
-    /**
-     * Render a color circle button
-     */
-    const renderColorCircle = (colorValue, colorName, isSelected) => (jsx("button", { type: "button", disabled: disabled, onClick: () => handlePredefinedColorClick(colorValue), className: `
-				w-8 h-8 rounded-full border-2 cursor-pointer transition-all
-				focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1
-				${disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-110"}
-				${isSelected
-            ? "border-primary-500 scale-110 ring-2 ring-primary-500 ring-offset-1"
-            : "border-default-700"}
-			`, style: { backgroundColor: colorValue }, title: colorName, "aria-label": colorName }, colorValue));
-    return (jsxs("div", { className: `flex flex-col gap-3 ${className}`, children: [label && (jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-foreground", children: [label, required && jsx("span", { className: "text-danger ml-1", children: "*" })] })), jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("input", { type: "color", id: inputId, name: name, value: `#${stripHash(textValue)}`, onChange: handleColorPickerChange, disabled: disabled, className: `
-							w-10 h-10 rounded-lg cursor-pointer border-2 flex-shrink-0
-							transition-colors appearance-none bg-transparent p-0.5
-							focus:border-primary-500
-							${disabled ? "opacity-50 cursor-not-allowed" : "hover:border-default-400"}
-							${error
-                                    ? "border-danger dark:border-danger-400"
-                                    : "border-default-300 dark:border-default-700"}
-						`, "aria-label": t.customColorLabel, title: t.customColorLabel }), jsx(Input, { type: "text", value: textValue, onValueChange: handleTextChange, onBlur: handleTextBlur, placeholder: t.placeholder, disabled: disabled, isDisabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered", 
-                                // `min-w-0` (TECH-2459, beweossmbs QA 24-sep): el campo es un ítem de la fila
-                                // flex de la muestra de color y tiene que poder encoger en huecos estrechos
-                                // (Agenda → Colors: 180px). El `w-full min-w-0` del `<input>` en la fachada
-                                // ya lo arregla; esto es el suelo explícito en la raíz del campo.
-                                className: "min-w-0", classNames: {
-                                    input: "uppercase font-mono text-sm",
-                                    inputWrapper: "min-h-8 h-8 focus-within:!border-primary-500",
-                                }, startContent: textValue.startsWith("#") ? null : (jsx("span", { className: "text-default-400 text-sm", children: "#" })) })] }), (error || isInvalidFormat) && (jsx("p", { className: "text-xs text-danger", children: isInvalidFormat ? t.invalidColorFormat : errorText }))] }), showPredefinedColors && predefinedColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: predefinedColors.map((color) => renderColorCircle(color.value, color.name, normalizeHexColor(value) === normalizeHexColor(color.value))) })] })), enableRecentColors && recentColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.recentColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: recentColors.map((color) => renderColorCircle(color, color, normalizeHexColor(value) === color)) })] }))] }));
-});
-ColorPicker.displayName = "ColorPicker";
-
-const ThemeContext = createContext({
-    mode: "light",
-    color: "blue",
-    customHex: null,
-    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
-    setMode: () => { },
-    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
-    setColor: () => { },
-});
-const useThemeContext = () => {
-    const context = useContext(ThemeContext);
-    if (!context) {
-        throw new Error("useThemeContext debe ser usado dentro de un ThemeProvider");
-    }
-    return context;
+const useInjectedStyle = (id, css) => {
+    useInsertionEffect(() => {
+        injectStyle(typeof document === "undefined" ? undefined : document, id, css);
+    }, [id, css]);
 };
 
 const themeColors = {
@@ -4765,6 +4540,406 @@ const themeColors = {
     },
 };
 
+/**
+ * Los mismos nombres de tema que resuelve HeroUI v3 (`@heroui/styles`):
+ * `:root, .light, .default, [data-theme=light], [data-theme=default]` para el claro y
+ * `.dark, [data-theme=dark]` para el oscuro. `default` es un alias del claro en v3; en v2 no
+ * existía. Más los 14 packs de aurora, cada uno en el lado de su `extend`, que son las clases
+ * que `theme-packs.generated.css` declara y `applyThemeClass` pone en `<html>`.
+ */
+const V3_ALIASES = {
+    light: [".default", '[data-theme="default"]'],
+    dark: [],
+};
+const namesOf = (mode) => [
+    `.${mode}`,
+    `[data-theme="${mode}"]`,
+    ...V3_ALIASES[mode],
+    ...Object.entries(themeColors)
+        .filter(([, theme]) => theme.extend === mode)
+        .map(([name]) => `.${name}`),
+];
+/**
+ * Selectores para que un componente con `appearance="auto"` siga al tema del ancestro MÁS
+ * CERCANO.
+ *
+ * Los temas no solo se llaman `dark`/`light`: el `ThemeProvider` de esta librería pone en
+ * `<html>` el tema completo (`blue-dark`, `purple-light`…) y nunca la clase `dark` suelta,
+ * así que mirar solo `.dark` dejaría la pieza en claro sobre un tema oscuro de aurora.
+ *
+ * - `dark`: cualquier ancestro oscuro, o uno oscuro dentro de uno claro.
+ * - `light`: uno claro dentro de uno oscuro (un panel claro en una página oscura). Tiene
+ *   una clase más que el oscuro simple, así que gana; va después en la hoja para ganar
+ *   también al «oscuro dentro de claro» cuando hay tres niveles.
+ */
+const themeScopeSelectors = (target) => {
+    const dark = namesOf("dark");
+    const light = namesOf("light");
+    const pairs = (outer, inner) => outer.flatMap((o) => inner.map((i) => `${o} ${i} ${target}`));
+    return {
+        dark: [...dark.map((d) => `${d} ${target}`), ...pairs(light, dark)].join(",\n"),
+        light: pairs(dark, light).join(",\n"),
+    };
+};
+
+/**
+ * Reglas del sello Beta. Viajan con el componente (se inyectan en `<head>`), igual que las
+ * de `LindaMascot`: el sello también se pinta dentro del microfrontend del chat.
+ *
+ * Borde de 1 px con el gradiente iridiscente de la mascota muy atenuado: dos fondos, el
+ * neutro recortado al `padding-box` y el gradiente al `border-box`, con el borde
+ * transparente para que se vea el de debajo. Es neutral de marca: lo verá también Luna.
+ */
+const AUTO_THEME$1 = themeScopeSelectors('.aurora-beta-badge[data-appearance="auto"]');
+const BETA_BADGE_CSS = `
+.aurora-beta-badge {
+	--bb-bg: #F6F5FB;
+	--bb-fg: #4B4F6E;
+	--bb-edge: 52%;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	border: 1px solid transparent;
+	border-radius: 999px;
+	background:
+		linear-gradient(var(--bb-bg), var(--bb-bg)) padding-box,
+		linear-gradient(
+			100deg,
+			color-mix(in srgb, #FF8AD8 var(--bb-edge), var(--bb-bg)),
+			color-mix(in srgb, #A48BFF var(--bb-edge), var(--bb-bg)) 38%,
+			color-mix(in srgb, #6FE3FF var(--bb-edge), var(--bb-bg)) 70%,
+			color-mix(in srgb, #FFD08A var(--bb-edge), var(--bb-bg))
+		) border-box;
+	color: var(--bb-fg);
+	font-family: inherit;
+	font-weight: 600;
+	line-height: 1;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	white-space: nowrap;
+	vertical-align: middle;
+	user-select: none;
+	flex-shrink: 0;
+}
+/* Tema: sigue al ancestro claro/oscuro más cercano (ver \`themeScopeSelectors\`). */
+${AUTO_THEME$1.dark},
+.aurora-beta-badge[data-appearance="dark"] {
+	--bb-bg: #1C1D30;
+	--bb-fg: #D5D8F0;
+	--bb-edge: 58%;
+}
+${AUTO_THEME$1.light} {
+	--bb-bg: #F6F5FB;
+	--bb-fg: #4B4F6E;
+	--bb-edge: 52%;
+}
+.aurora-beta-badge--sm {
+	font-size: 10px;
+	height: 16px;
+	padding: 0 6px 0 calc(6px + 0.06em);
+}
+.aurora-beta-badge--md {
+	font-size: 11px;
+	height: 18px;
+	padding: 0 7px 0 calc(7px + 0.06em);
+}
+`;
+
+const DEFAULT_TRANSLATIONS$f = {
+    label: "Beta",
+    title: "Funcionalidad en pruebas: puede cambiar",
+};
+const BETA_BADGE_STYLE_ID = styleIdFor("aurora-beta-badge-styles", BETA_BADGE_CSS);
+/**
+ * BetaBadge — sello «Beta» para lo que está en pruebas con clientes reales (Linda Claw).
+ * Píldora pequeña en mayúsculas con el borde iridiscente de la mascota muy atenuado.
+ * Ver README.
+ */
+const BetaBadge = forwardRef(function BetaBadge({ size = "sm", title, appearance = "auto", translations, className, ...spanProps }, ref) {
+    useInjectedStyle(BETA_BADGE_STYLE_ID, BETA_BADGE_CSS);
+    const t = { ...DEFAULT_TRANSLATIONS$f, ...translations };
+    const tooltip = title === true ? t.title : title || undefined;
+    return (jsx("span", { ref: ref, className: [
+            "aurora-beta-badge",
+            `aurora-beta-badge--${size}`,
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), "data-appearance": appearance, title: tooltip, ...spanProps, children: t.label }));
+});
+
+/**
+ * ColorPicker Types
+ *
+ * Defines the type system for the ColorPicker component used for brand configuration.
+ */
+/**
+ * Default predefined colors (Brand-safe palette)
+ */
+const DEFAULT_PREDEFINED_COLORS = [
+    // Primary colors
+    { key: "blue", name: "Azul", value: "#3B82F6" },
+    { key: "violet", name: "Violeta", value: "#8B5CF6" },
+    { key: "purple", name: "Púrpura", value: "#A855F7" },
+    // Secondary colors
+    { key: "green", name: "Verde", value: "#10B981" },
+    { key: "teal", name: "Turquesa", value: "#14B8A6" },
+    { key: "cyan", name: "Cian", value: "#06B6D4" },
+    // Accent colors
+    { key: "pink", name: "Rosa", value: "#EC4899" },
+    { key: "rose", name: "Rosa claro", value: "#F43F5E" },
+    { key: "orange", name: "Naranja", value: "#F97316" },
+    // Neutral colors
+    { key: "red", name: "Rojo", value: "#EF4444" },
+    { key: "amber", name: "Ámbar", value: "#F59E0B" },
+    { key: "yellow", name: "Amarillo", value: "#EAB308" },
+    // Gray scale (useful for text/backgrounds)
+    { key: "gray-dark", name: "Gris oscuro", value: "#374151" },
+    { key: "gray", name: "Gris", value: "#6B7280" },
+    { key: "gray-light", name: "Gris claro", value: "#9CA3AF" },
+];
+
+/**
+ * Default translations (Spanish)
+ */
+const defaultTranslations$e = {
+    label: "Color",
+    placeholder: "Ingresa código hex",
+    customColorLabel: "Color personalizado",
+    predefinedColorsLabel: "Colores predefinidos",
+    recentColorsLabel: "Colores recientes",
+    noRecentColors: "No hay colores recientes",
+    invalidColorFormat: "El código de color no es un formato HEX válido (Ej: #FF5733 o FFA07A)",
+    colorPreview: "Vista previa del color",
+};
+/**
+ * Validates hex color format (#RRGGBB or #RGB)
+ */
+const isValidHexColor = (color) => {
+    const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    return hexRegex.test(color);
+};
+/**
+ * Normalizes hex color to 6-digit format (#RGB -> #RRGGBB)
+ */
+const normalizeHexColor = (color) => {
+    if (!color.startsWith("#")) {
+        color = `#${color}`;
+    }
+    // Convert 3-digit to 6-digit
+    if (color.length === 4) {
+        const r = color[1];
+        const g = color[2];
+        const b = color[3];
+        return `#${r}${r}${g}${g}${b}${b}`.toUpperCase();
+    }
+    return color.toUpperCase();
+};
+/**
+ * Strips leading "#" characters so the text input shows only the hex digits.
+ * The "#" prefix is rendered as a fixed startContent in the Input.
+ */
+const stripHash = (color) => color.replace(/^#+/, "");
+/**
+ * ColorPicker - Advanced color selection component
+ *
+ * Features:
+ * - Native color picker input
+ * - Text input for hex codes
+ * - Predefined color palette
+ * - Recent colors with localStorage persistence
+ * - Full i18n support
+ * - Dark mode compatible
+ * - Accessible
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ColorPicker
+ *   value={brandColor}
+ *   onChange={setBrandColor}
+ *   label="Color de marca"
+ *   enableRecentColors
+ * />
+ * ```
+ */
+const ColorPicker = forwardRef(({ value, onChange, label, required = false, disabled = false, error = false, errorText, predefinedColors = DEFAULT_PREDEFINED_COLORS, enableRecentColors = true, maxRecentColors = 6, recentColorsStorageKey = "aurora-ui-recent-colors", showPredefinedColors = true, translations = {}, className = "", id, name, }, ref) => {
+    const generatedId = useId();
+    const inputId = id || generatedId;
+    const t = { ...defaultTranslations$e, ...translations };
+    // Local state for text input — holds the hex digits WITHOUT the leading "#".
+    // The "#" is rendered as a fixed startContent prefix.
+    const [textValue, setTextValue] = useState(stripHash(value));
+    const [isInvalidFormat, setIsInvalidFormat] = useState(false);
+    // Recent colors state
+    const [recentColors, setRecentColors] = useState([]);
+    // Load recent colors from localStorage on mount
+    useEffect(() => {
+        if (!enableRecentColors)
+            return;
+        try {
+            const stored = localStorage.getItem(recentColorsStorageKey);
+            if (stored) {
+                const colors = JSON.parse(stored);
+                setRecentColors(colors);
+            }
+        }
+        catch (error) {
+            console.error("Error loading recent colors:", error);
+        }
+    }, [enableRecentColors, recentColorsStorageKey]);
+    // Save to recent colors when value changes
+    useEffect(() => {
+        if (!enableRecentColors || !value || !isValidHexColor(value))
+            return;
+        const normalizedValue = normalizeHexColor(value);
+        // Add to recent colors if not already present
+        setRecentColors((prev) => {
+            // Remove if already exists
+            const filtered = prev.filter((c) => c !== normalizedValue);
+            // Add to beginning
+            const updated = [normalizedValue, ...filtered].slice(0, maxRecentColors);
+            // Save to localStorage
+            try {
+                localStorage.setItem(recentColorsStorageKey, JSON.stringify(updated));
+            }
+            catch (error) {
+                console.error("Error saving recent colors:", error);
+            }
+            return updated;
+        });
+    }, [value, enableRecentColors, maxRecentColors, recentColorsStorageKey]);
+    // Sync text value when prop value changes
+    useEffect(() => {
+        setTextValue(stripHash(value));
+        setIsInvalidFormat(false);
+    }, [value]);
+    /**
+     * Handle color picker (native input) change
+     */
+    const handleColorPickerChange = (e) => {
+        const newColor = normalizeHexColor(e.target.value);
+        setTextValue(stripHash(newColor));
+        setIsInvalidFormat(false);
+        onChange(newColor);
+    };
+    /**
+     * Handle text input change — passive: no validation, normalization, or
+     * onChange propagation while typing. We only update local state and clear
+     * any stale error so the user can correct an invalid value without the
+     * red border lingering. Validation (and stripping of the leading "#")
+     * runs on blur.
+     *
+     * While typing we let the user see whatever they pressed — including a
+     * leading "#" — so the input feels responsive. To prevent a double "#"
+     * on screen, the fixed prefix in `startContent` is hidden while
+     * `textValue` already starts with "#". The cap is `7` (1 "#" + 6 hex)
+     * when the user opted into a leading "#", otherwise `6`.
+     */
+    const handleTextChange = (newValue) => {
+        const max = newValue.startsWith("#") ? 7 : 6;
+        setTextValue(newValue.slice(0, max));
+        setIsInvalidFormat(false);
+    };
+    /**
+     * Validate the current hex input. Updates `isInvalidFormat` and, when
+     * the input is a valid hex, normalizes the display and propagates via
+     * `onChange`. Returns whether the input is acceptable so a caller can
+     * decide to block submission.
+     *
+     * Empty + not required → valid (no error, no propagation).
+     * Empty + required → invalid (error).
+     * Valid (3 or 6 hex chars, with or without leading "#") → normalize, sync
+     * display to canonical form, propagate, valid.
+     * Otherwise → invalid (error, no propagation).
+     */
+    const validate = useCallback(() => {
+        // User may have typed a leading "#" — strip it so it doesn't end up
+        // as "##" once we prepend "#" for the regex check.
+        const trimmed = stripHash(textValue.trim());
+        if (trimmed === "") {
+            const valid = !required;
+            setIsInvalidFormat(!valid);
+            // Drop any residual "#" the user typed but never followed up on,
+            // so the field reads as truly empty after blur.
+            setTextValue("");
+            return valid;
+        }
+        const candidate = `#${trimmed}`;
+        if (!isValidHexColor(candidate)) {
+            setIsInvalidFormat(true);
+            return false;
+        }
+        const normalized = normalizeHexColor(candidate);
+        setIsInvalidFormat(false);
+        setTextValue(stripHash(normalized));
+        onChange(normalized);
+        return true;
+    }, [textValue, required, onChange]);
+    useImperativeHandle(ref, () => ({ validate }), [validate]);
+    const handleTextBlur = () => {
+        validate();
+    };
+    /**
+     * Handle predefined color selection
+     */
+    const handlePredefinedColorClick = (colorValue) => {
+        if (disabled)
+            return;
+        const normalized = normalizeHexColor(colorValue);
+        setTextValue(stripHash(normalized));
+        setIsInvalidFormat(false);
+        onChange(normalized);
+    };
+    /**
+     * Render a color circle button
+     */
+    const renderColorCircle = (colorValue, colorName, isSelected) => (jsx("button", { type: "button", disabled: disabled, onClick: () => handlePredefinedColorClick(colorValue), className: `
+				w-8 h-8 rounded-full border-2 cursor-pointer transition-all
+				focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1
+				${disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-110"}
+				${isSelected
+            ? "border-primary-500 scale-110 ring-2 ring-primary-500 ring-offset-1"
+            : "border-default-700"}
+			`, style: { backgroundColor: colorValue }, title: colorName, "aria-label": colorName }, colorValue));
+    return (jsxs("div", { className: `flex flex-col gap-3 ${className}`, children: [label && (jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-foreground", children: [label, required && jsx("span", { className: "text-danger ml-1", children: "*" })] })), jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("input", { type: "color", id: inputId, name: name, value: `#${stripHash(textValue)}`, onChange: handleColorPickerChange, disabled: disabled, className: `
+							w-10 h-10 rounded-lg cursor-pointer border-2 flex-shrink-0
+							transition-colors appearance-none bg-transparent p-0.5
+							focus:border-primary-500
+							${disabled ? "opacity-50 cursor-not-allowed" : "hover:border-default-400"}
+							${error
+                                    ? "border-danger dark:border-danger-400"
+                                    : "border-default-300 dark:border-default-700"}
+						`, "aria-label": t.customColorLabel, title: t.customColorLabel }), jsx(Input, { type: "text", value: textValue, onValueChange: handleTextChange, onBlur: handleTextBlur, placeholder: t.placeholder, disabled: disabled, isDisabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered", 
+                                // `min-w-0` (TECH-2459, beweossmbs QA 24-sep): el campo es un ítem de la fila
+                                // flex de la muestra de color y tiene que poder encoger en huecos estrechos
+                                // (Agenda → Colors: 180px). El `w-full min-w-0` del `<input>` en la fachada
+                                // ya lo arregla; esto es el suelo explícito en la raíz del campo.
+                                className: "min-w-0", classNames: {
+                                    input: "uppercase font-mono text-sm",
+                                    inputWrapper: "min-h-8 h-8 focus-within:!border-primary-500",
+                                }, startContent: textValue.startsWith("#") ? null : (jsx("span", { className: "text-default-400 text-sm", children: "#" })) })] }), (error || isInvalidFormat) && (jsx("p", { className: "text-xs text-danger", children: isInvalidFormat ? t.invalidColorFormat : errorText }))] }), showPredefinedColors && predefinedColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: predefinedColors.map((color) => renderColorCircle(color.value, color.name, normalizeHexColor(value) === normalizeHexColor(color.value))) })] })), enableRecentColors && recentColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.recentColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: recentColors.map((color) => renderColorCircle(color, color, normalizeHexColor(value) === color)) })] }))] }));
+});
+ColorPicker.displayName = "ColorPicker";
+
+const ThemeContext = createContext({
+    mode: "light",
+    color: "blue",
+    customHex: null,
+    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
+    setMode: () => { },
+    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
+    setColor: () => { },
+});
+const useThemeContext = () => {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error("useThemeContext debe ser usado dentro de un ThemeProvider");
+    }
+    return context;
+};
+
 /**
  * @file This file contains the theme configurations for the application.
  */
@@ -6766,6 +6941,535 @@ const LindaIcon = ({ size = 24, className, ...nativeProps }) => {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", className: className, role: "img", "aria-hidden": "true", ...nativeProps, children: jsxs("g", { fill: "currentColor", children: [jsx("path", { d: "M3.84453 3.84453C2.71849 4.97056 2.71849 6.79623 3.84453 7.92226L5.43227 9.51C5.44419 9.49622 5.45669 9.48276 5.46978 9.46967L9.46978 5.46967C9.48284 5.45662 9.49625 5.44415 9.50999 5.43226L7.92226 3.84453C6.79623 2.71849 4.97056 2.71849 3.84453 3.84453Z" }), jsx("path", { d: "M10.5679 6.49012C10.556 6.50386 10.5435 6.51728 10.5304 6.53033L6.53044 10.5303C6.51735 10.5434 6.5039 10.5559 6.49011 10.5678L16.0777 20.1555C17.2038 21.2815 19.0294 21.2815 20.1555 20.1555C21.2815 19.0294 21.2815 17.2038 20.1555 16.0777L10.5679 6.49012Z" }), jsx("path", { d: "M16.1 2.30719C16.261 1.8976 16.8385 1.8976 16.9994 2.30719L17.4298 3.40247C17.479 3.52752 17.5776 3.62651 17.7022 3.67583L18.7934 4.1078C19.2015 4.26934 19.2015 4.849 18.7934 5.01054L17.7022 5.44252C17.5776 5.49184 17.479 5.59082 17.4298 5.71587L16.9995 6.81115C16.8385 7.22074 16.261 7.22074 16.1 6.81116L15.6697 5.71587C15.6205 5.59082 15.5219 5.49184 15.3973 5.44252L14.3061 5.01054C13.898 4.849 13.898 4.26934 14.3061 4.1078L15.3973 3.67583C15.5219 3.62651 15.6205 3.52752 15.6697 3.40247L16.1 2.30719Z" }), jsx("path", { d: "M19.9672 9.12945C20.1281 8.71987 20.7057 8.71987 20.8666 9.12945L21.0235 9.5288C21.0727 9.65385 21.1713 9.75284 21.2959 9.80215L21.6937 9.95965C22.1018 10.1212 22.1018 10.7009 21.6937 10.8624L21.2959 11.0199C21.1713 11.0692 21.0727 11.1682 21.0235 11.2932L20.8666 11.6926C20.7057 12.1022 20.1281 12.1022 19.9672 11.6926L19.8103 11.2932C19.7611 11.1682 19.6625 11.0692 19.5379 11.0199L19.14 10.8624C18.732 10.7009 18.732 10.1212 19.14 9.95965L19.5379 9.80215C19.6625 9.75284 19.7611 9.65385 19.8103 9.5288L19.9672 9.12945Z" }), jsx("path", { d: "M5.1332 15.3072C5.29414 14.8976 5.87167 14.8976 6.03261 15.3072L6.18953 15.7065C6.23867 15.8316 6.33729 15.9306 6.46188 15.9799L6.85975 16.1374C7.26783 16.2989 7.26783 16.8786 6.85975 17.0401L6.46188 17.1976C6.33729 17.2469 6.23867 17.3459 6.18953 17.471L6.03261 17.8703C5.87167 18.2799 5.29414 18.2799 5.1332 17.8703L4.97628 17.471C4.92714 17.3459 4.82852 17.2469 4.70393 17.1976L4.30606 17.0401C3.89798 16.8786 3.89798 16.2989 4.30606 16.1374L4.70393 15.9799C4.82852 15.9306 4.92714 15.8316 4.97628 15.7065L5.1332 15.3072Z" })] }) }));
 };
 
+const LINDA_MASCOT_STATES = [
+    "idle",
+    "processing",
+    "working",
+    "listening",
+    "talking",
+    "ready",
+];
+/** px de cada talla con nombre. Cada una cae en su propio nivel de detalle. */
+const LINDA_MASCOT_SIZE_PX = {
+    xs: 20,
+    sm: 32,
+    md: 72,
+    lg: 144,
+};
+/** Variable CSS que lleva la intensidad de voz (0–1). Parte del contrato público. */
+const LINDA_MASCOT_LEVEL_VAR = "--linda-mascot-level";
+/** id de la `<style>` que el componente deja en `<head>`. */
+const LINDA_MASCOT_STYLE_ID = "aurora-linda-mascot-styles";
+/** Paleta de la hoja de marca. */
+const LINDA_MASCOT_PALETTE = {
+    coreLight: "#2A2D4A",
+    coreDark: "#0B0C18",
+    eye: "#EAF2FF",
+    eyeGlow: "#8FB8FF",
+    pink: "#FF8AD8",
+    violet: "#A48BFF",
+    cyan: "#6FE3FF",
+    amber: "#FFD08A",
+};
+const resolveMascotPx = (size) => {
+    if (typeof size === "number") {
+        return Number.isFinite(size) && size > 0 ? size : LINDA_MASCOT_SIZE_PX.md;
+    }
+    return LINDA_MASCOT_SIZE_PX[size ?? "md"] ?? LINDA_MASCOT_SIZE_PX.md;
+};
+/** ≤20 xs · 21–40 sm · 41–95 md · ≥96 lg. */
+const resolveMascotTier = (px) => {
+    if (px <= 20) {
+        return "xs";
+    }
+    if (px <= 40) {
+        return "sm";
+    }
+    if (px < 96) {
+        return "md";
+    }
+    return "lg";
+};
+const clampLevel = (level) => {
+    if (typeof level !== "number" || Number.isNaN(level)) {
+        return 0;
+    }
+    return Math.min(1, Math.max(0, level));
+};
+const LINDA_MASCOT_GEOMETRY = {
+    xs: {
+        coreRx: 40,
+        coreCy: 61,
+        eyeWidth: 17,
+        eyeHeight: 8,
+        eyeStroke: 9,
+        eyeGap: 31,
+        rings: [{ r: 57, squash: 0.3, tilt: -16, strokePx: 1.2, opacity: 0.95 }],
+        halo: false,
+        specular: false,
+        blur: false,
+        ringGlow: "none",
+    },
+    sm: {
+        coreRx: 36,
+        coreCy: 61,
+        eyeWidth: 14,
+        eyeHeight: 6.5,
+        eyeStroke: 6,
+        eyeGap: 28,
+        rings: [
+            { r: 56, squash: 0.3, tilt: -16, strokePx: 1.1, opacity: 0.9 },
+            { r: 52, squash: 0.36, tilt: 20, strokePx: 1, opacity: 0.7 },
+        ],
+        halo: true,
+        specular: false,
+        blur: false,
+        ringGlow: "none",
+    },
+    md: {
+        coreRx: 33,
+        coreCy: 61,
+        eyeWidth: 12.5,
+        eyeHeight: 5.5,
+        eyeStroke: 4.4,
+        eyeGap: 25,
+        rings: [
+            { r: 56, squash: 0.3, tilt: -16, strokePx: 1.5, opacity: 0.85 },
+            { r: 52, squash: 0.38, tilt: 20, strokePx: 1.2, opacity: 0.7 },
+            { r: 58, squash: 0.2, tilt: -3, strokePx: 1, opacity: 0.55 },
+        ],
+        halo: true,
+        specular: true,
+        blur: true,
+        ringGlow: "flat",
+    },
+    lg: {
+        coreRx: 32,
+        coreCy: 61,
+        eyeWidth: 12,
+        eyeHeight: 5.2,
+        eyeStroke: 3.8,
+        eyeGap: 24,
+        rings: [
+            { r: 56, squash: 0.3, tilt: -16, strokePx: 2, opacity: 0.85 },
+            { r: 52, squash: 0.38, tilt: 20, strokePx: 1.6, opacity: 0.72 },
+            { r: 58, squash: 0.2, tilt: -3, strokePx: 1.3, opacity: 0.58 },
+        ],
+        halo: true,
+        specular: true,
+        blur: true,
+        ringGlow: "blur",
+    },
+};
+
+const LEVEL = `var(${LINDA_MASCOT_LEVEL_VAR})`;
+const AUTO_THEME = themeScopeSelectors('.aurora-linda-mascot[data-appearance="auto"]');
+/** Curva de los movimientos que responden a la voz: sale rápido, llega suave. */
+const EASE_OUT = "cubic-bezier(0.22, 0.7, 0.3, 1)";
+/**
+ * Reglas de la mascota. Viajan con el componente (se inyectan en `<head>`, ver
+ * `useInjectedStyle`) para que funcione en un microfrontend que no carga `styles.css`.
+ *
+ * Todo se anima con `transform` u `opacity`. Cada grupo animado es un `<g>` SIN atributo
+ * `transform`: en SVG la propiedad CSS `transform` reemplaza al atributo, así que la
+ * geometría (posición, inclinación, aplastamiento) vive en grupos padres y el movimiento
+ * en grupos hijos. Por la misma razón, lo que sigue a la voz (`--linda-mascot-level`,
+ * con `transition`) y lo que late en bucle (con `animation`) van en grupos distintos: una
+ * animación CSS anula la transición de la misma propiedad.
+ */
+/** Reglas de movimiento reducido bajo la raíz \`root\` (clase o clase+atributo). */
+const reducedMotionBody = (root) => `
+	${root} .aurora-lm-spin,
+	${root} .aurora-lm-boost,
+	${root} .aurora-lm-orbit,
+	${root} .aurora-lm-eyes,
+	${root} .aurora-lm-breathe,
+	${root} .aurora-lm-halo,
+	${root} .aurora-lm-sparkle {
+		animation: none !important;
+	}
+	${root} .aurora-lm-level-body,
+	${root} .aurora-lm-level-rings,
+	${root} .aurora-lm-level-halo {
+		transform: none !important;
+	}
+	${root}.aurora-linda-mascot--listening .aurora-lm-level-rings,
+	${root}.aurora-linda-mascot--talking .aurora-lm-level-rings {
+		opacity: calc(0.55 + ${LEVEL} * 0.45);
+	}
+	${root}.aurora-linda-mascot--processing .aurora-lm-halo {
+		animation: aurora-lm-glow 1.6s ease-in-out infinite !important;
+	}
+	${root}.aurora-linda-mascot--working .aurora-lm-halo {
+		opacity: 1 !important;
+	}
+	${root}.aurora-linda-mascot--listening .aurora-lm-level-halo,
+	${root}.aurora-linda-mascot--talking .aurora-lm-level-halo {
+		opacity: calc(0.4 + ${LEVEL} * 0.6) !important;
+	}
+	${root}.aurora-linda-mascot--ready .aurora-lm-sparkle {
+		animation: aurora-lm-sparkle-fade 700ms ease-out 1 both !important;
+	}
+`;
+const reducedMotionRules = (root) => `
+@media (prefers-reduced-motion: reduce) {${reducedMotionBody(root)}}
+${reducedMotionBody(`${root}[data-motion="reduce"]`)}
+`;
+const LINDA_MASCOT_CSS = `
+.aurora-linda-mascot {
+	${LINDA_MASCOT_LEVEL_VAR}: 0;
+	--lm-halo: 0.5;
+	--lm-shadow: 1;
+	--lm-rim: 0.85;
+	--lm-sparkle: #F2B441;
+	display: inline-block;
+	flex-shrink: 0;
+	overflow: visible;
+	vertical-align: middle;
+}
+/* En lg la mascota es escenario (bienvenida, llamada): más halo, como en la hoja de marca.
+   Multiplicador aparte para no competir en especificidad con las reglas de tema. */
+.aurora-linda-mascot--tier-lg {
+	--lm-halo-boost: 1.4;
+}
+/*
+ * Tema. \`auto\` sigue al ancestro claro/oscuro más cercano, incluidos los temas de aurora
+ * (\`blue-dark\`…); ver \`themeScopeSelectors\`.
+ */
+${AUTO_THEME.dark},
+.aurora-linda-mascot[data-appearance="dark"] {
+	--lm-halo: 0.95;
+	--lm-shadow: 0;
+	--lm-rim: 1;
+	--lm-sparkle: #FFF1C9;
+}
+${AUTO_THEME.light} {
+	--lm-halo: 0.5;
+	--lm-shadow: 1;
+	--lm-rim: 0.85;
+	--lm-sparkle: #F2B441;
+}
+
+/* Cuerpo entero: respiración en bucle + escala por voz (grupos distintos). */
+.aurora-lm-breathe,
+.aurora-lm-level-body,
+.aurora-lm-level-rings {
+	transform-box: view-box;
+	transform-origin: 60px 61px;
+}
+.aurora-lm-breathe {
+	animation: aurora-lm-breathe 2s ease-in-out infinite alternate;
+}
+.aurora-lm-level-body,
+.aurora-lm-level-rings,
+.aurora-lm-level-halo {
+	transition: transform 140ms ${EASE_OUT}, opacity 240ms ${EASE_OUT};
+}
+
+/* Halo y sombra de contacto. */
+.aurora-lm-halo,
+.aurora-lm-level-halo {
+	transform-box: fill-box;
+	transform-origin: center;
+}
+.aurora-lm-halo {
+	opacity: calc(var(--lm-halo) * var(--lm-halo-boost, 1));
+	transition: opacity 400ms ease;
+}
+.aurora-lm-shadow {
+	opacity: var(--lm-shadow);
+}
+.aurora-lm-rim {
+	opacity: var(--lm-rim);
+}
+
+/*
+ * Anillos. El círculo gira dentro de su grupo aplastado: la elipse no cambia de forma y
+ * lo que recorre el trazo es el color, como un anillo que gira en profundidad.
+ * \`--lm-spin-duration\` y \`--lm-spin-direction\` llegan por anillo desde el marcado.
+ */
+.aurora-lm-spin {
+	transform-box: view-box;
+	transform-origin: 0 0;
+	animation: aurora-lm-spin var(--lm-spin-duration, 24s) linear infinite
+		var(--lm-spin-direction, normal);
+}
+/* Segundo giro encadenado: parado salvo en working, donde dobla la velocidad sin saltos
+   (pausar conserva el ángulo; cambiar la duración lo haría saltar). */
+.aurora-lm-boost {
+	animation-play-state: paused;
+}
+/* Cometa del anillo principal: orbita siempre, se ve solo al pensar o trabajar. */
+.aurora-lm-orbit {
+	animation-play-state: paused;
+}
+.aurora-lm-comet,
+.aurora-lm-glint {
+	opacity: 0;
+	transition: opacity 320ms ease;
+}
+
+/* Ojos: solo parpadean (sin expresiones faciales). Dos parpadeos por ciclo, a 4,8 y 6,2 s. */
+.aurora-lm-eyes {
+	transform-box: fill-box;
+	transform-origin: center;
+	animation: aurora-lm-blink 11s ease-in-out infinite;
+}
+
+/* Chispas de fin de turno. */
+/* Dorado en claro (el blanco desaparece sobre fondo claro), casi blanco en oscuro. */
+.aurora-lm-sparkle {
+	transform-box: fill-box;
+	transform-origin: center;
+	opacity: 0;
+	fill: var(--lm-sparkle);
+}
+
+/* ── Estados ─────────────────────────────────────────────────────────────── */
+
+/* idle no añade nada: es el movimiento base de arriba (giro, respiración, parpadeo). */
+
+.aurora-linda-mascot--processing .aurora-lm-orbit {
+	animation-play-state: running;
+}
+.aurora-linda-mascot--processing .aurora-lm-comet {
+	opacity: 1;
+}
+.aurora-linda-mascot--processing .aurora-lm-halo {
+	animation: aurora-lm-pulse 1.6s ease-in-out infinite;
+}
+
+.aurora-linda-mascot--working .aurora-lm-boost,
+.aurora-linda-mascot--working .aurora-lm-orbit {
+	animation-play-state: running;
+}
+.aurora-linda-mascot--working .aurora-lm-glint {
+	opacity: 1;
+}
+
+.aurora-linda-mascot--listening .aurora-lm-level-rings {
+	transform: scale(calc(0.86 + ${LEVEL} * 0.16));
+}
+.aurora-linda-mascot--listening .aurora-lm-level-halo {
+	transform: scale(calc(0.92 + ${LEVEL} * 0.2));
+}
+
+.aurora-linda-mascot--talking .aurora-lm-level-body {
+	transform: scale(calc(1 + ${LEVEL} * 0.07));
+}
+.aurora-linda-mascot--talking .aurora-lm-level-halo {
+	transform: scale(calc(1 + ${LEVEL} * 0.32));
+	opacity: calc(0.75 + ${LEVEL} * 0.25);
+}
+
+.aurora-linda-mascot--ready .aurora-lm-sparkle {
+	animation: aurora-lm-sparkle 700ms cubic-bezier(0.2, 0.8, 0.3, 1) 1 both;
+	animation-delay: var(--lm-sparkle-delay, 0ms);
+}
+
+/* ── Keyframes ───────────────────────────────────────────────────────────── */
+
+@keyframes aurora-lm-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+@keyframes aurora-lm-breathe {
+	from {
+		transform: scale(1);
+	}
+	to {
+		transform: scale(1.03);
+	}
+}
+@keyframes aurora-lm-blink {
+	0%, 42%, 45%, 97.5%, 100% {
+		transform: scaleY(1);
+	}
+	43.5%, 98.8% {
+		transform: scaleY(0.12);
+	}
+}
+@keyframes aurora-lm-pulse {
+	0%, 100% {
+		transform: scale(1);
+		opacity: calc(var(--lm-halo) * var(--lm-halo-boost, 1));
+	}
+	50% {
+		transform: scale(1.12);
+		opacity: 1;
+	}
+}
+@keyframes aurora-lm-glow {
+	0%, 100% {
+		opacity: calc(var(--lm-halo) * var(--lm-halo-boost, 1));
+	}
+	50% {
+		opacity: 1;
+	}
+}
+@keyframes aurora-lm-sparkle {
+	0% {
+		opacity: 0;
+		transform: scale(0.2) rotate(0deg);
+	}
+	35% {
+		opacity: 1;
+		transform: scale(1) rotate(45deg);
+	}
+	100% {
+		opacity: 0;
+		transform: scale(0.5) rotate(90deg);
+	}
+}
+@keyframes aurora-lm-sparkle-fade {
+	0%, 100% {
+		opacity: 0;
+	}
+	35% {
+		opacity: 1;
+	}
+}
+
+/*
+ * Movimiento reducido: nada gira, parpadea, respira ni crece. El estado se sigue leyendo
+ * sin movimiento: al pensar o trabajar el cometa o el destello se quedan quietos sobre el
+ * anillo (así se distingue también en \`xs\`, que no tiene halo) y el halo late en opacidad
+ * o se enciende; con la voz sube la opacidad del halo y de los anillos; las chispas
+ * aparecen y se desvanecen sin moverse.
+ *
+ * Las mismas reglas se aplican con la preferencia del sistema y con \`motion="reduce"\`
+ * (\`data-motion\`), que el consumidor usa para listas largas o para forzarlo. \`!important\`
+ * porque las reglas por estado de arriba tienen más especificidad y \`@media\` no la sube.
+ */
+${reducedMotionRules(".aurora-linda-mascot")}
+`;
+
+const CX = 60;
+const STYLE_ID = styleIdFor(LINDA_MASCOT_STYLE_ID, LINDA_MASCOT_CSS);
+/** Velocidad de giro por anillo (s por vuelta) y sentido. */
+const RING_MOTION = [
+    { duration: "24s", direction: "normal" },
+    { duration: "30s", direction: "reverse" },
+    { duration: "36s", direction: "normal" },
+];
+/** Chispas de `ready`: posición en el viewBox, tamaño y retardo. */
+const SPARKLES = [
+    { x: 90, y: 17, s: 9, delay: "0ms" },
+    { x: 104, y: 35, s: 5.5, delay: "90ms" },
+    { x: 73, y: 7, s: 4.5, delay: "170ms" },
+];
+const sparklePath = (s) => {
+    const k = s * 0.18;
+    return `M0 ${-s}C${k} ${-k} ${k} ${-k} ${s} 0C${k} ${k} ${k} ${k} 0 ${s}C${-k} ${k} ${-k} ${k} ${-s} 0C${-k} ${-k} ${-k} ${-k} 0 ${-s}Z`;
+};
+/**
+ * Perímetro en px de pantalla de la elipse de un anillo. Con `non-scaling-stroke` los
+ * guiones se miden en px de pantalla (no en unidades del viewBox ni en `pathLength`), así
+ * que el cometa se dimensiona como fracción de este perímetro para medir lo mismo a
+ * cualquier talla.
+ */
+const ringPerimeterPx = (ring, px) => {
+    const a = (ring.r * px) / 120;
+    const b = a * ring.squash;
+    const h = ((a - b) / (a + b)) ** 2;
+    return Math.PI * (a + b) * (1 + (3 * h) / (10 + Math.sqrt(4 - 3 * h)));
+};
+/**
+ * Cometa con estela sobre un anillo: cola de `steps` tramos consecutivos con el
+ * iridiscente del anillo, cada uno más opaco y más grueso que el anterior, y una cabeza
+ * redonda y brillante al final. Todo es `stroke-dasharray` sobre el mismo círculo que el
+ * anillo, así que gira con `transform` y se recorta delante/detrás igual que él. El giro
+ * es horario: la cabeza va al final del trazo, por delante de su cola.
+ */
+const Comet = ({ className, r, perimeter, tail, strokePx, headPx, steps, ringPaint, headPaint, }) => {
+    const tailPx = perimeter * tail;
+    const seg = tailPx / steps;
+    return (jsxs("g", { className: className, "data-part": "comet", children: [Array.from({ length: steps }, (_, i) => {
+                const t = (i + 1) / steps;
+                return (jsx("circle", { r: r, fill: "none", stroke: ringPaint, strokeWidth: strokePx * (0.8 + 1.6 * t), strokeOpacity: t ** 1.5, strokeDasharray: `${(seg + 0.4).toFixed(2)} ${(perimeter - seg - 0.4).toFixed(2)}`, strokeDashoffset: (-seg * i).toFixed(2), vectorEffect: "non-scaling-stroke" }, i));
+            }), jsx("circle", { r: r, fill: "none", stroke: headPaint, strokeWidth: headPx * 1.5, strokeOpacity: 0.3, strokeLinecap: "round", strokeDasharray: `0.01 ${(perimeter - 0.01).toFixed(2)}`, strokeDashoffset: (-tailPx).toFixed(2), vectorEffect: "non-scaling-stroke" }), jsx("circle", { r: r, fill: "none", stroke: "#FFFFFF", strokeWidth: headPx, strokeLinecap: "round", strokeDasharray: `0.01 ${(perimeter - 0.01).toFixed(2)}`, strokeDashoffset: (-tailPx).toFixed(2), vectorEffect: "non-scaling-stroke" })] }));
+};
+/** Arco «∩» de un ojo centrado en (x, y): ancho w, alto h. */
+const eyePath = (x, y, w, h) => {
+    const half = w / 2;
+    const base = y + h / 2;
+    const control = y - h * 0.8333;
+    return `M${x - half} ${base}C${x - half} ${control} ${x + half} ${control} ${x + half} ${base}`;
+};
+/**
+ * `useId` devuelve `:r0:` (React 18), `«r0»` o `_r_0_` (19): fuera lo que no vale en un
+ * id referenciado desde `url(#…)`.
+ */
+const safeId = (raw) => `lm${raw.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+/**
+ * LindaMascot — la cara de Linda: un orbe de tinta con ojos luminosos y anillos
+ * iridiscentes, en SVG + CSS (sin imágenes, fuentes ni WebGL).
+ *
+ * Se anima según lo que Linda está haciendo (`state`) y, en la llamada de voz, según el
+ * volumen (`level`), sin preguntar nada al modelo. Pinta más o menos detalle según la
+ * talla para leerse igual a 16 px que a 200 px. Ver README.
+ */
+const LindaMascot = forwardRef(function LindaMascot({ state = "idle", size = "md", level, label, appearance = "auto", motion = "auto", className, style, ...svgProps }, ref) {
+    useInjectedStyle(STYLE_ID, LINDA_MASCOT_CSS);
+    const uid = safeId(useId());
+    const px = resolveMascotPx(size);
+    const tier = resolveMascotTier(px);
+    const g = LINDA_MASCOT_GEOMETRY[tier];
+    const coreRy = g.coreRx * 0.92;
+    const eyeY = g.coreCy - coreRy + coreRy * 2 * 0.45;
+    const eyes = [CX - g.eyeGap / 2, CX + g.eyeGap / 2];
+    // Recorte delante/detrás: en lg los velos desenfocados salen más allá del anillo.
+    const clipHalf = g.ringGlow === "blur" ? 120 : 80;
+    const id = {
+        core: `${uid}-core`,
+        coreClip: `${uid}-core-clip`,
+        rim: `${uid}-rim`,
+        ring: `${uid}-ring`,
+        halo: `${uid}-halo`,
+        shadow: `${uid}-shadow`,
+        specular: `${uid}-specular`,
+        back: `${uid}-back`,
+        front: `${uid}-front`,
+        soft: `${uid}-soft`,
+        eyeGlow: `${uid}-eye-glow`,
+        aura: `${uid}-aura`,
+        veil: `${uid}-veil`,
+        tail: `${uid}-tail`,
+    };
+    const a11y = label
+        ? { role: "img", "aria-label": label }
+        : { "aria-hidden": true };
+    const renderRing = (ring, index, half) => {
+        const motion = RING_MOTION[index];
+        const spinStyle = {
+            "--lm-spin-duration": motion.duration,
+            "--lm-spin-direction": motion.direction,
+        };
+        const isMain = index === 0;
+        const perimeter = ringPerimeterPx(ring, px);
+        return (jsx("g", { "data-ring": index + 1, "data-ring-half": half, transform: `translate(${CX} ${g.coreCy}) rotate(${ring.tilt})`, opacity: half === "back" ? ring.opacity * 0.62 : ring.opacity, children: jsx("g", { clipPath: `url(#${half === "back" ? id.back : id.front})`, children: jsxs("g", { transform: `scale(1 ${ring.squash})`, children: [jsx("g", { className: "aurora-lm-spin", style: spinStyle, children: jsxs("g", { className: "aurora-lm-spin aurora-lm-boost", style: spinStyle, children: [g.ringGlow === "blur" && (jsx("circle", { "data-part": "veil", r: ring.r, fill: "none", stroke: `url(#${id.ring})`, strokeWidth: ring.strokePx * 16, strokeOpacity: 0.3, vectorEffect: "non-scaling-stroke", filter: `url(#${id.veil})` })), g.ringGlow !== "none" && (jsx("circle", { r: ring.r, fill: "none", stroke: `url(#${id.ring})`, strokeWidth: ring.strokePx * (g.ringGlow === "blur" ? 6.5 : 5), strokeOpacity: g.ringGlow === "blur" ? 0.34 : 0.14, vectorEffect: "non-scaling-stroke", filter: g.ringGlow === "blur" ? `url(#${id.soft})` : undefined })), g.ringGlow !== "none" && (jsx("circle", { r: ring.r + 2.2, fill: "none", stroke: `url(#${id.ring})`, strokeWidth: ring.strokePx * 0.55, strokeOpacity: 0.55, vectorEffect: "non-scaling-stroke" })), jsx("circle", { r: ring.r, fill: "none", stroke: `url(#${id.ring})`, strokeWidth: ring.strokePx, vectorEffect: "non-scaling-stroke" })] }) }), isMain && (jsxs("g", { className: "aurora-lm-spin aurora-lm-orbit", style: {
+                                "--lm-spin-duration": "1.6s",
+                            }, children: [jsx(Comet, { className: "aurora-lm-comet", r: ring.r, perimeter: perimeter, tail: 0.3, strokePx: ring.strokePx, headPx: Math.max(2, ring.strokePx * 2.4), steps: tier === "xs" ? 6 : 12, ringPaint: `url(#${id.tail})`, headPaint: LINDA_MASCOT_PALETTE.eyeGlow }), jsx(Comet, { className: "aurora-lm-glint", r: ring.r, perimeter: perimeter, tail: 0.14, strokePx: ring.strokePx * 1.2, headPx: Math.max(2.4, ring.strokePx * 3), steps: tier === "xs" ? 4 : 8, ringPaint: `url(#${id.tail})`, headPaint: LINDA_MASCOT_PALETTE.eyeGlow })] }))] }) }) }, `${half}-${index}`));
+    };
+    const ringHalves = (half) => g.rings.map((ring, index) => renderRing(ring, index, half));
+    return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: el nombre llega por aria-label (con `label`) o la mascota es decorativa (aria-hidden); biome no ve el spread de `a11y`.
+    jsxs("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 120 120", width: px, height: px, focusable: "false", className: [
+            "aurora-linda-mascot",
+            `aurora-linda-mascot--${state}`,
+            `aurora-linda-mascot--tier-${tier}`,
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), "data-state": state, "data-tier": tier, "data-appearance": appearance, "data-motion": motion, style: {
+            ...style,
+            [LINDA_MASCOT_LEVEL_VAR]: clampLevel(level),
+        }, ...a11y, ...svgProps, children: [jsxs("defs", { children: [jsxs("radialGradient", { id: id.core, cx: "0.4", cy: "0.34", r: "0.72", children: [jsx("stop", { offset: "0", stopColor: LINDA_MASCOT_PALETTE.coreLight }), jsx("stop", { offset: "0.6", stopColor: "#15172B" }), jsx("stop", { offset: "1", stopColor: LINDA_MASCOT_PALETTE.coreDark })] }), jsxs("linearGradient", { id: id.ring, x1: "0", y1: "0", x2: "1", y2: "1", children: [jsx("stop", { offset: "0", stopColor: LINDA_MASCOT_PALETTE.pink }), jsx("stop", { offset: "0.36", stopColor: LINDA_MASCOT_PALETTE.violet }), jsx("stop", { offset: "0.68", stopColor: LINDA_MASCOT_PALETTE.cyan }), jsx("stop", { offset: "1", stopColor: LINDA_MASCOT_PALETTE.amber })] }), jsxs("linearGradient", { id: id.tail, x1: "0", y1: "0", x2: "1", y2: "1", children: [jsx("stop", { offset: "0", stopColor: "#FFC4EC" }), jsx("stop", { offset: "0.36", stopColor: "#D4C8FF" }), jsx("stop", { offset: "0.68", stopColor: "#B8F1FF" }), jsx("stop", { offset: "1", stopColor: "#FFE6BF" })] }), jsxs("linearGradient", { id: id.rim, x1: "0.2", y1: "0", x2: "0.5", y2: "1", children: [jsx("stop", { offset: "0", stopColor: LINDA_MASCOT_PALETTE.violet }), jsx("stop", { offset: "0.42", stopColor: LINDA_MASCOT_PALETTE.cyan }), jsx("stop", { offset: "0.74", stopColor: LINDA_MASCOT_PALETTE.pink }), jsx("stop", { offset: "1", stopColor: LINDA_MASCOT_PALETTE.amber })] }), jsx("clipPath", { id: id.coreClip, children: jsx("ellipse", { cx: CX, cy: g.coreCy, rx: g.coreRx, ry: coreRy }) }), jsx("clipPath", { id: id.back, children: jsx("rect", { x: -clipHalf, y: -clipHalf, width: clipHalf * 2, height: clipHalf }) }), jsx("clipPath", { id: id.front, children: jsx("rect", { x: -clipHalf, y: 0, width: clipHalf * 2, height: clipHalf }) }), g.halo && (jsxs("radialGradient", { id: id.halo, children: [jsx("stop", { offset: "0", stopColor: LINDA_MASCOT_PALETTE.violet, stopOpacity: "0.7" }), jsx("stop", { offset: tier === "lg" ? "0.48" : "0.42", stopColor: LINDA_MASCOT_PALETTE.pink, stopOpacity: tier === "lg" ? "0.36" : "0.28" }), jsx("stop", { offset: tier === "lg" ? "0.78" : "0.7", stopColor: LINDA_MASCOT_PALETTE.cyan, stopOpacity: tier === "lg" ? "0.14" : "0.08" }), jsx("stop", { offset: "1", stopColor: LINDA_MASCOT_PALETTE.cyan, stopOpacity: "0" })] })), g.halo && (jsxs("radialGradient", { id: id.shadow, children: [jsx("stop", { offset: "0", stopColor: LINDA_MASCOT_PALETTE.coreDark, stopOpacity: "0.28" }), jsx("stop", { offset: "1", stopColor: LINDA_MASCOT_PALETTE.coreDark, stopOpacity: "0" })] })), g.specular && (jsxs("radialGradient", { id: id.specular, children: [jsx("stop", { offset: "0", stopColor: "#FFFFFF", stopOpacity: "0.2" }), jsx("stop", { offset: "1", stopColor: "#FFFFFF", stopOpacity: "0" })] })), g.blur && (jsx("filter", { id: id.eyeGlow, filterUnits: "userSpaceOnUse", x: "-20", y: "-20", width: "160", height: "160", children: jsx("feGaussianBlur", { stdDeviation: "2.2" }) })), g.blur && (jsx("filter", { id: id.aura, filterUnits: "userSpaceOnUse", x: "-20", y: "-20", width: "160", height: "160", children: jsx("feGaussianBlur", { stdDeviation: tier === "lg" ? 5.5 : 4 }) })), g.ringGlow === "blur" && (jsx("filter", { id: id.soft, filterUnits: "userSpaceOnUse", x: "-90", y: "-90", width: "180", height: "180", children: jsx("feGaussianBlur", { stdDeviation: "2.6" }) })), g.ringGlow === "blur" && (jsx("filter", { id: id.veil, filterUnits: "userSpaceOnUse", x: "-100", y: "-100", width: "200", height: "200", children: jsx("feGaussianBlur", { stdDeviation: "5" }) }))] }), jsx("g", { className: "aurora-lm-level-body", children: jsxs("g", { className: "aurora-lm-breathe", children: [g.halo && (jsx("g", { className: "aurora-lm-level-halo", children: jsx("circle", { className: "aurora-lm-halo", "data-part": "halo", cx: CX, cy: g.coreCy, r: tier === "lg" ? 61 : 58, fill: `url(#${id.halo})` }) })), g.halo && (jsx("ellipse", { className: "aurora-lm-shadow", "data-part": "shadow", cx: CX, cy: g.coreCy + coreRy + 9, rx: g.coreRx * 0.8, ry: 4.5, fill: `url(#${id.shadow})` })), jsx("g", { className: "aurora-lm-rings aurora-lm-level-rings", children: ringHalves("back") }), tier !== "xs" && (jsx("ellipse", { className: "aurora-lm-rim", "data-part": "aura", cx: CX, cy: g.coreCy, rx: g.coreRx + 1, ry: coreRy + 1, fill: "none", stroke: `url(#${id.rim})`, strokeWidth: tier === "lg" ? 9 : g.blur ? 7 : 3, strokeOpacity: tier === "lg" ? 0.85 : g.blur ? 0.75 : 0.45, filter: g.blur ? `url(#${id.aura})` : undefined })), jsxs("g", { "data-part": "core", children: [jsx("ellipse", { cx: CX, cy: g.coreCy, rx: g.coreRx, ry: coreRy, fill: `url(#${id.core})` }), jsx("g", { clipPath: `url(#${id.coreClip})`, children: jsx("ellipse", { className: "aurora-lm-rim", cx: CX, cy: g.coreCy, rx: g.coreRx, ry: coreRy, fill: "none", stroke: `url(#${id.rim})`, strokeWidth: tier === "xs" ? 5 : g.blur ? 7 : 5, filter: g.blur ? `url(#${id.eyeGlow})` : undefined }) }), g.specular && (jsx("ellipse", { "data-part": "specular", cx: CX - g.coreRx * 0.36, cy: g.coreCy - coreRy * 0.5, rx: g.coreRx * 0.38, ry: g.coreRx * 0.2, transform: `rotate(-28 ${CX - g.coreRx * 0.36} ${g.coreCy - coreRy * 0.5})`, fill: `url(#${id.specular})` }))] }), jsxs("g", { className: "aurora-lm-eyes", "data-part": "eyes", children: [eyes.map((x) => (jsx("path", { d: eyePath(x, eyeY, g.eyeWidth, g.eyeHeight), fill: "none", stroke: LINDA_MASCOT_PALETTE.eyeGlow, strokeWidth: g.eyeStroke * (g.blur ? 2.2 : 1.7), strokeLinecap: "round", strokeOpacity: g.blur ? 0.85 : 0.35, filter: g.blur ? `url(#${id.eyeGlow})` : undefined }, `glow-${x}`))), eyes.map((x) => (jsx("path", { "data-part": "eye", d: eyePath(x, eyeY, g.eyeWidth, g.eyeHeight), fill: "none", stroke: LINDA_MASCOT_PALETTE.eye, strokeWidth: g.eyeStroke, strokeLinecap: "round" }, `eye-${x}`)))] }), jsx("g", { className: "aurora-lm-rings aurora-lm-level-rings", children: ringHalves("front") }), state === "ready" && tier !== "xs" && (jsx("g", { "data-part": "sparkles", children: SPARKLES.map((s) => (jsx("g", { transform: `translate(${s.x} ${s.y})`, children: jsx("path", { className: "aurora-lm-sparkle", d: sparklePath(s.s), style: {
+                                        "--lm-sparkle-delay": s.delay,
+                                    } }) }, `${s.x}-${s.y}`))) }))] }) })] }));
+});
+
 const defaultTranslations$8 = {
     previewAlt: "Vista previa de imagen",
     removeButtonAriaLabel: "Eliminar imagen",
@@ -11987,31 +12691,20 @@ const VARIANT_BY_COLOR = {
     danger: "danger",
     default: "default",
 };
-// TECH-2459 · F5 · P-25 — v2 pintaba el toast con `<Alert variant="flat" color={...}>`, y el
-// `flat` de v2 daba FONDO TEÑIDO por color (`@heroui/theme@2.4.15`, `chunk-BGEKJ4Q5.mjs`,
-// compound `variant: ["flat","faded"]`: `bg-success-50 dark:bg-success-50/50`, etc.). `.toast` de
-// v3 es siempre `bg-surface` (medido: `oklch(1 0 0)`, blanco puro) y solo tiñe el título, así que
-// el fondo de color se había perdido. Se reponen las clases LITERALES de v2 — Aurora emite toda
-// la escala 50-900 en `@theme static`, así que `bg-success-50` sigue siendo una utilidad válida.
-const SURFACE_BY_COLOR = {
-    primary: "bg-primary-50 dark:bg-primary-50/50",
-    secondary: "bg-secondary-50 dark:bg-secondary-50/50",
-    success: "bg-success-50 dark:bg-success-50/50",
-    warning: "bg-warning-50 dark:bg-warning-50/50",
-    danger: "bg-danger-50 dark:bg-danger-50/50",
-    default: "bg-default-100 dark:bg-default-50/50",
-};
-// Color de la `x`, también tomado del slot `closeButton` de v2 (`text-success-500`,
-// `data-[hover]:bg-success-200`, …). `bg-transparent` neutraliza el `bg-default` de
-// `.close-button--default` de v3, que sobre un fondo teñido cantaba como una píldora gris.
-const CLOSE_BY_COLOR = {
-    primary: "text-primary-500 hover:bg-primary-200",
-    secondary: "text-secondary-500 hover:bg-secondary-200",
-    success: "text-success-500 hover:bg-success-200",
-    warning: "text-warning-500 hover:bg-warning-200",
-    danger: "text-danger-500 hover:bg-danger-200",
-    default: "text-default-400 hover:bg-default-200",
-};
+// TECH-2459 · Aspecto de v3 — DECISIÓN DEL USUARIO del 1-oct-2026, excepción aceptada a v2. v2
+// pintaba el toast con `<Alert variant="flat" color={...}>`, que daba FONDO TEÑIDO por color, y
+// P-25 (F5) lo había repuesto con las clases literales de v2 (`bg-success-50`…). Ya no: el toast
+// se ve como los ejemplos oficiales de v3 (Default/Accent/Success/Warning/Danger). El fondo es el
+// de `.toast` (`bg-surface`: blanco en claro, la superficie oscura del pack en oscuro) en los seis
+// colores, y el color del estado va SOLO en el título y en el icono. La descripción es la de v3
+// (`text-muted`), sin tocar.
+// La `x`, neutra en los seis colores: `text-muted`, el mismo gris de `.close-button--default` de
+// v3, que llega solo al no pisarlo. `bg-transparent` quita el `bg-default` de esa clase: en Aurora
+// `--color-default` es el gris MEDIO de v2 (`#d4d4d8`), no el casi imperceptible que v3 espera, y
+// sobre el fondo blanco cantaba como una píldora gris permanente. El hover sí lleva el gris suave
+// de v3 (`bg-default-hover`, que deriva del `--default` PROPIO de v3, no del de Aurora); hay que
+// declararlo como utilidad porque el `bg-transparent` de arriba también gana al hover de v3.
+const CLOSE_CLASS = "shrink-0 self-center bg-transparent hover:bg-default-hover data-[hovered=true]:bg-default-hover";
 // TECH-2459 · Indicador de estado — REPUESTO el 8-sep-2026 por decisión del usuario, a partir del
 // finding `app-loginos-toast-v3-visual.md` (smoke de loginos contra QA, beta.114): con el MISMO
 // toast (`color="danger"`, login con credenciales inválidas) v2 pintaba un glifo de estado a la
@@ -12038,22 +12731,25 @@ const ICON_BY_VARIANT = {
     success: SuccessIcon,
     warning: WarningIcon,
 };
-// Color del glifo: los literales del `tv` de v2 (`alert.js`, `colorVariants.flat.<color>`), que
-// son los mismos que ya usa la fachada `Alert` (su mapa `FLAT_BASE`), porque en v2 el icono era
-// `fill-current` y heredaba el color del texto del alert. Hace falta declararlo estado a estado y
-// no vale con dejar que herede de v3: `.toast__indicator` solo tiñe success/warning/danger, y su
-// base es `text-overlay-foreground` (= `--foreground`, medido `oklch(0.9911 0 0)` en oscuro), o
-// sea que un toast `primary`/`secondary`/`default` pintaría un glifo NEUTRO (blanco en oscuro,
-// gris oscuro en claro) en vez del color del estado — se ve, pero no es el icono de v2.
-// `secondary` se trata como en el resto del fichero: v3 no tiene esa variante de marca (se parte
-// de "default"), así que se recolorea con el token propio de Aurora.
+// Color del glifo: el MISMO que el del título en cada estado (decisión del 1-oct, ver arriba). Los
+// literales de v2 que había aquí (`text-success-700`…) estaban pensados para el fondo teñido y ya
+// no aplican. Lo que pinta v3 por su cuenta (`toast.css`, la última regla de cada selector):
+// - success/warning/danger: `.toast--<x> .toast__indicator` → `text-<x>-soft-foreground`, el mismo
+//   token que su título. Se deja heredar: cadena vacía.
+// - accent (= `primary`): v3 tiñe el título (`text-accent-soft-foreground`) pero NO el indicador,
+//   que se queda en la base `text-overlay-foreground` (neutro: casi negro en claro, casi blanco en
+//   oscuro). Se le da el token del título para que icono y título digan el mismo estado.
+// - default: v3 no tiñe ni título ni indicador; los dos quedan en `text-overlay-foreground`, que
+//   es el foreground neutro que toca. Cadena vacía.
+// - secondary: v3 no tiene esa variante de marca (se parte de "default"), así que se recolorea con
+//   el token propio de Aurora, el mismo que el título (`--color-secondary-600`).
 const ICON_BY_COLOR = {
-    primary: "text-primary-600",
+    primary: "text-accent-soft-foreground",
     secondary: "text-secondary-600",
-    success: "text-success-700 dark:text-success",
-    warning: "text-warning-700 dark:text-warning",
-    danger: "text-danger-600 dark:text-danger-500",
-    default: "text-default-foreground",
+    success: "",
+    warning: "",
+    danger: "",
+    default: "",
 };
 // Geometría del hueco del icono en v2 (slot `iconWrapper`: `flex-none relative w-9 h-9
 // rounded-full grid place-items-center`, con el glifo a `w-6`). El toast de v2 pasaba
@@ -12078,7 +12774,7 @@ function GlobalToast({ translations = {} } = {}) {
     const slots = toastVariants({ placement: "top end", variant });
     const isSecondary = color === "secondary";
     const StatusIcon = ICON_BY_VARIANT[variant];
-    return (jsx("div", { className: "fixed top-4 right-4 z-[2000] w-full max-w-sm", children: jsxs("div", { className: cn(slots.toast(), "gap-x-0 rounded-[12px]", SURFACE_BY_COLOR[color]), "data-frontmost": "true", style: { position: "relative" }, children: [jsx("div", { className: cn(slots.indicator(), INDICATOR_BASE, ICON_BY_COLOR[color]), children: jsx(StatusIcon, {}) }), jsxs("div", { className: cn(slots.content(), "ms-2 box-border min-h-10 justify-center"), children: [jsx("div", { className: slots.title(), style: isSecondary ? { color: "var(--color-secondary-600)" } : undefined, children: toast.title }), toast.description && (jsx("div", { className: slots.description(), children: toast.description }))] }), jsx(CloseButton, { "aria-label": t.closeButtonAriaLabel, className: cn("shrink-0 self-center bg-transparent", CLOSE_BY_COLOR[color]), onPress: hideToast })] }) }));
+    return (jsx("div", { className: "fixed top-4 right-4 z-[2000] w-full max-w-sm", children: jsxs("div", { className: cn(slots.toast(), "gap-x-0 rounded-[12px]"), "data-frontmost": "true", style: { position: "relative" }, children: [jsx("div", { className: cn(slots.indicator(), INDICATOR_BASE, ICON_BY_COLOR[color]), children: jsx(StatusIcon, {}) }), jsxs("div", { className: cn(slots.content(), "ms-2 box-border min-h-10 justify-center"), children: [jsx("div", { className: slots.title(), style: isSecondary ? { color: "var(--color-secondary-600)" } : undefined, children: toast.title }), toast.description && (jsx("div", { className: slots.description(), children: toast.description }))] }), jsx(CloseButton, { "aria-label": t.closeButtonAriaLabel, className: CLOSE_CLASS, onPress: hideToast })] }) }));
 }
 
 /**
@@ -18883,4 +19579,4 @@ const NavigationLoadingProvider = ({ children, }) => {
     return (jsxs(NavigationLoadingContext.Provider, { value: value, children: [children, jsx(NavigationLoadingOverlay, { isVisible: isVisible })] }));
 };
 
-export { ALL_THEMES, AURORA_THEME_FAMILIES, AURORA_THEME_REGISTRY, AccordionList, AddHolidayForm, Alert, AnalyticsCard, AreaLineChart, AuraAutocomplete, AuraTable, AuraToastProvider, AuraAutocomplete as Autocomplete, AutocompleteItem, BEWEOS_THEME_MODE_COOKIE_NAME, Badge, BreadcrumbItem, BreadcrumbsComponent, Button, CONTAINER_ATTRIBUTE, Card, CardBody, Checkbox, Chip, ColorPicker, ColorSelector, ContentCarousel, Currency, DEFAULT_DONUT_COLORS, DEFAULT_PREDEFINED_COLORS, DEFAULT_RANKED_BAR_COLORS, DISMISS_CONTROL_ATTRIBUTE, DatePicker, DateRangePicker, DateSelector, Divider, DonutChart, Drawer, DrawerBody, DrawerContent, DrawerFilters, DrawerFooter, DrawerHeader, Dropdown, DropdownSection, EmailPreview, EnumMenuNavListItem, GlobalToast, H1, H2, H3, H4, HeaderComponent, HeroUIProvider, HolidayType, IconComponent, Image$1 as Image, ImagePreview, Input, InputPassword, Kanban, KanbanCard, KanbanColumn, LINDA_TONE_PROPERTIES, LindaIcon, MenuClaw, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, Progress, PromotionalBanner, REGISTERED_THEME_COLORS, RangeFilter, RankedBarList, RowSteps, DEFAULT_TRANSLATIONS$2 as SEGMENTATION_DEFAULT_TRANSLATIONS, ScheduleRow, SearchInput, SegmentationBuilder, Select, SelectItem, SelectSection, SimpleLineChart, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StatTile, StepIndicator, Switch, Switch as SwitchComponent, THEME_COLOR_HEX_MAP, Tab, Table, Tabs, TagsFilter, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput, TimeInputComponent, ToastContext, Tooltip, TwoColumnLayoutAgent, UploadFile, VerticalSteps, ViolinPlot, WhatsAppPreview, Wizard, WizardNavigation, WizardSidebar, applyCustomPrimaryColor, applyLindaTones, cn, computeBars, computeMax, computeSlices, computeTotal, containerProps, createCurrencyFormatter, uniqueCountries as defaultCountries, defaultCurrencyOptions, defaultTranslations$5 as defaultTranslations, deriveLindaTones, dismissControlProps, forceLightOnlyThemeBeforeReact, formatAuroraThemeTooltip, formatDonutPercent, generateThemeColorScale, getContrastForeground, getRegisteredThemeColorBases, getSelectedKeyFromPath, hexToHsl, hexToThemeColor, hslToCssValue, isAuroraFullThemeId, isDismissControl, isDonutEmpty, isExactThemeColor, isGroupState, isHexColor, isRankedBarListEmpty, isSegmentationGroup, parseColorToHsl, removeCustomPrimaryColor, removeLindaTones, shouldClosePopoverOnInteractOutside, sizeMap, themeColors, useAuraToast, useCloseOnAncestorScroll, useDisclosure, useMediaQuery, useNavigationLoading, useThemeContext };
+export { ALL_THEMES, AURORA_THEME_FAMILIES, AURORA_THEME_REGISTRY, AccordionList, AddHolidayForm, Alert, AnalyticsCard, AreaLineChart, AuraAutocomplete, AuraTable, AuraToastProvider, AuraAutocomplete as Autocomplete, AutocompleteItem, BEWEOS_THEME_MODE_COOKIE_NAME, Badge, BetaBadge, BreadcrumbItem, BreadcrumbsComponent, Button, CONTAINER_ATTRIBUTE, Card, CardBody, Checkbox, Chip, ColorPicker, ColorSelector, ContentCarousel, Currency, DEFAULT_DONUT_COLORS, DEFAULT_PREDEFINED_COLORS, DEFAULT_RANKED_BAR_COLORS, DISMISS_CONTROL_ATTRIBUTE, DatePicker, DateRangePicker, DateSelector, Divider, DonutChart, Drawer, DrawerBody, DrawerContent, DrawerFilters, DrawerFooter, DrawerHeader, Dropdown, DropdownSection, EmailPreview, EnumMenuNavListItem, GlobalToast, H1, H2, H3, H4, HeaderComponent, HeroUIProvider, HolidayType, IconComponent, Image$1 as Image, ImagePreview, Input, InputPassword, Kanban, KanbanCard, KanbanColumn, LINDA_MASCOT_LEVEL_VAR, LINDA_MASCOT_STATES, LINDA_TONE_PROPERTIES, LindaIcon, LindaMascot, MenuClaw, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, Progress, PromotionalBanner, REGISTERED_THEME_COLORS, RangeFilter, RankedBarList, RowSteps, DEFAULT_TRANSLATIONS$2 as SEGMENTATION_DEFAULT_TRANSLATIONS, ScheduleRow, SearchInput, SegmentationBuilder, Select, SelectItem, SelectSection, SimpleLineChart, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StatTile, StepIndicator, Switch, Switch as SwitchComponent, THEME_COLOR_HEX_MAP, Tab, Table, Tabs, TagsFilter, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput, TimeInputComponent, ToastContext, Tooltip, TwoColumnLayoutAgent, UploadFile, VerticalSteps, ViolinPlot, WhatsAppPreview, Wizard, WizardNavigation, WizardSidebar, applyCustomPrimaryColor, applyLindaTones, cn, computeBars, computeMax, computeSlices, computeTotal, containerProps, createCurrencyFormatter, uniqueCountries as defaultCountries, defaultCurrencyOptions, defaultTranslations$5 as defaultTranslations, deriveLindaTones, dismissControlProps, forceLightOnlyThemeBeforeReact, formatAuroraThemeTooltip, formatDonutPercent, generateThemeColorScale, getContrastForeground, getRegisteredThemeColorBases, getSelectedKeyFromPath, hexToHsl, hexToThemeColor, hslToCssValue, isAuroraFullThemeId, isDismissControl, isDonutEmpty, isExactThemeColor, isGroupState, isHexColor, isRankedBarListEmpty, isSegmentationGroup, parseColorToHsl, removeCustomPrimaryColor, removeLindaTones, shouldClosePopoverOnInteractOutside, sizeMap, themeColors, useAuraToast, useCloseOnAncestorScroll, useDisclosure, useMediaQuery, useNavigationLoading, useThemeContext };