@beweco/aurora-ui 1.0.1-qa.164 → 1.0.1-qa.166

package/dist/index.cjs.js

@@ -471,7 +471,7 @@ const COLOR_TOKENS$1 = {
         fg: "var(--color-primary-foreground)",
         softBg: "var(--accent-soft)",
         softBgHover: "var(--accent-soft-hover)",
-        softFg: "var(--color-primary)",
+        softFg: "var(--accent-soft-foreground)",
     },
     success: {
         bg: "var(--success)",
@@ -1014,8 +1014,8 @@ const COLOR_TOKENS = {
         bg: "var(--accent)",
         fg: "var(--color-primary-foreground)",
         flatBg: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
-        flatFg: "var(--color-primary-600)",
-        tintFg: "var(--color-primary)",
+        flatFg: "var(--accent-soft-foreground)",
+        tintFg: "var(--accent-soft-foreground)",
     },
     success: {
         bg: "var(--success)",
@@ -2896,7 +2896,7 @@ const AnalyticsCard = ({ data, showTimePeriods = true, showDropdownMenu = true,
     return (jsxRuntime.jsx(Card, { className: "dark:border-default-100 border border-transparent", ...props, children: jsxRuntime.jsxs("section", { className: "flex flex-col flex-nowrap", children: [jsxRuntime.jsx("div", { className: "flex flex-col justify-between gap-y-2", children: jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-2", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-0", children: [jsxRuntime.jsx(H2, { children: t.title }), jsxRuntime.jsx(P, { children: t.description })] }), jsxRuntime.jsx("div", { className: "h-2", "aria-hidden": "true" }), showTimePeriods && (jsxRuntime.jsx(react.Tabs, { className: "self-end", onSelectionChange: (key) => handleTimePeriodChange(String(key)), children: jsxRuntime.jsx(react.Tabs.ListContainer, { className: "bg-default-100", children: jsxRuntime.jsxs(react.Tabs.List, { "aria-label": t.title, children: [jsxRuntime.jsxs(react.Tabs.Tab, { id: "6-months", className: "whitespace-nowrap", children: [t.months6, jsxRuntime.jsx(react.Tabs.Indicator, {})] }), jsxRuntime.jsxs(react.Tabs.Tab, { id: "3-months", className: "whitespace-nowrap", children: [t.months3, jsxRuntime.jsx(react.Tabs.Indicator, {})] }), jsxRuntime.jsxs(react.Tabs.Tab, { id: "30-days", className: "whitespace-nowrap", children: [t.days30, jsxRuntime.jsx(react.Tabs.Indicator, {})] }), jsxRuntime.jsxs(react.Tabs.Tab, { id: "7-days", className: "whitespace-nowrap", children: [t.days7, jsxRuntime.jsx(react.Tabs.Indicator, {})] }), jsxRuntime.jsxs(react.Tabs.Tab, { id: "24-hours", className: "whitespace-nowrap", children: [t.hours24, jsxRuntime.jsx(react.Tabs.Indicator, {})] })] }) }) })), showMetricCards && (jsxRuntime.jsx("div", { className: "mt-2 flex w-full items-center", children: jsxRuntime.jsx("div", { className: "-my-3 flex w-full max-w-[800px] items-center gap-x-3 overflow-x-auto py-3", children: data.map(({ key, change, changeType, type, value, title }) => (jsxRuntime.jsxs("button", { type: "button", className: cn("rounded-[12px] flex w-full flex-col gap-2 p-3 transition-colors", {
                                             "bg-default-100": activeChart === key,
                                         }), onClick: () => handleChartChange(key), children: [jsxRuntime.jsx("span", { className: cn("text-sm text-default-500 font-medium transition-colors", {
-                                                    "text-primary": activeChart === key,
+                                                    "text-accent-soft-foreground": activeChart === key,
                                                 }), children: title }), jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [jsxRuntime.jsx("span", { className: "text-foreground text-2xl font-bold", children: formatValue(value, type) }), jsxRuntime.jsx(Chip, { color: changeType === "positive"
                                                             ? "success"
                                                             : changeType === "negative"
@@ -4044,6 +4044,76 @@ const themeColors = {
             overlay: "#ffffff",
         },
     },
+    "amberYellow-light": {
+        extend: "light",
+        colors: {
+            primary: {
+                "50": "#FFFBE3",
+                "100": "#FFF4BD",
+                "200": "#FFEB92",
+                "300": "#FFDC5E",
+                "400": "#FFCF34",
+                "500": "#FFBF00",
+                "600": "#D8A200",
+                "700": "#AC7E00",
+                "800": "#805900",
+                "900": "#533600",
+                foreground: "#000",
+                DEFAULT: "#FFBF00",
+            },
+            secondary: {
+                "50": "#F3F7FD",
+                "100": "#D1DFFB",
+                "200": "#A5BEF7",
+                "300": "#7494E7",
+                "400": "#4E6FCF",
+                "500": "#1E40AF",
+                "600": "#153096",
+                "700": "#0F237D",
+                "800": "#091865",
+                "900": "#051053",
+                foreground: "#fff",
+                DEFAULT: "#1E40AF",
+            },
+            focus: "#FFBF00",
+            overlay: "#000000",
+        },
+    },
+    "amberYellow-dark": {
+        extend: "dark",
+        colors: {
+            primary: {
+                "50": "#533600",
+                "100": "#805900",
+                "200": "#AC7E00",
+                "300": "#D8A200",
+                "400": "#FFBF00",
+                "500": "#FFCF34",
+                "600": "#FFDC5E",
+                "700": "#FFEB92",
+                "800": "#FFF4BD",
+                "900": "#FFFBE3",
+                foreground: "#000",
+                DEFAULT: "#FFBF00",
+            },
+            secondary: {
+                "50": "#002147",
+                "100": "#003571",
+                "200": "#00489b",
+                "300": "#005cc4",
+                "400": "#006fee",
+                "500": "#2d88f1",
+                "600": "#59a1f4",
+                "700": "#86bbf7",
+                "800": "#b3d4fa",
+                "900": "#dfedfd",
+                foreground: "#fff",
+                DEFAULT: "#006fee",
+            },
+            focus: "#FFBF00",
+            overlay: "#ffffff",
+        },
+    },
     "coral-light": {
         extend: "light",
         colors: {
@@ -4552,7 +4622,7 @@ 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
+ * existía. Más los 16 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 = {
@@ -6839,7 +6909,7 @@ const KanbanColumnComponent = ({ column, renderItem, onCardClick, cardClassName,
                         // siempre visible pero la story lo tapaba, y ahora queda apagado por defecto.
                         className: "static text-xs font-medium transform-none", style: column.countBadgeColor === "secondary"
                             ? SECONDARY_BADGE_STYLE
-                            : undefined, "aria-label": `${itemCount} ${t.itemsLabel}`, children: itemCount }))] })), jsxRuntime.jsx("div", { ref: scrollContainerRef, className: cn("flex-1 overflow-y-auto p-3 space-y-3", isDragOver && isEmpty && "min-h-24"), style: { maxHeight }, children: isEmpty ? (isDragOver && isDragging ? (jsxRuntime.jsx("div", { className: "h-24 border-2 border-dashed border-primary-300 rounded-lg bg-primary-50/50 flex items-center justify-center", children: jsxRuntime.jsx("span", { className: "text-primary-500 text-sm", children: t.dropHere }) })) : renderEmptyState ? (renderEmptyState(column)) : (jsxRuntime.jsx("div", { className: "flex items-center justify-center h-24 text-default-400 text-sm", children: column.emptyMessage || t.emptyMessage }))) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [column.items.map((item, index) => (jsxRuntime.jsxs("div", { onDragOver: (e) => handleDragOverItem(e, index), children: [isDragOver && dropIndex === index && (jsxRuntime.jsx("div", { className: "h-1 bg-primary-400 rounded-full mb-3 animate-pulse" })), jsxRuntime.jsx(KanbanCard, { item: item, columnId: column.id, index: index, renderContent: renderItem, onCardClick: onCardClick, className: cardClassName, isClickable: isCardClickable, isDraggable: isDraggable, onDragStart: onDragStart, onDragEnd: onDragEnd })] }, item.id))), isDragOver && dropIndex === column.items.length && (jsxRuntime.jsx("div", { className: "h-1 bg-primary-400 rounded-full mt-3 animate-pulse" })), column.isLoading && (jsxRuntime.jsx("div", { className: "flex items-center justify-center py-4", children: jsxRuntime.jsx(react.Spinner, { size: "sm", color: "accent" }) }))] })) })] }));
+                            : undefined, "aria-label": `${itemCount} ${t.itemsLabel}`, children: itemCount }))] })), jsxRuntime.jsx("div", { ref: scrollContainerRef, className: cn("flex-1 overflow-y-auto p-3 space-y-3", isDragOver && isEmpty && "min-h-24"), style: { maxHeight }, children: isEmpty ? (isDragOver && isDragging ? (jsxRuntime.jsx("div", { className: "h-24 border-2 border-dashed border-primary-300 rounded-lg bg-primary-50/50 flex items-center justify-center", children: jsxRuntime.jsx("span", { className: "text-accent-soft-foreground text-sm", children: t.dropHere }) })) : renderEmptyState ? (renderEmptyState(column)) : (jsxRuntime.jsx("div", { className: "flex items-center justify-center h-24 text-default-400 text-sm", children: column.emptyMessage || t.emptyMessage }))) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [column.items.map((item, index) => (jsxRuntime.jsxs("div", { onDragOver: (e) => handleDragOverItem(e, index), children: [isDragOver && dropIndex === index && (jsxRuntime.jsx("div", { className: "h-1 bg-primary-400 rounded-full mb-3 animate-pulse" })), jsxRuntime.jsx(KanbanCard, { item: item, columnId: column.id, index: index, renderContent: renderItem, onCardClick: onCardClick, className: cardClassName, isClickable: isCardClickable, isDraggable: isDraggable, onDragStart: onDragStart, onDragEnd: onDragEnd })] }, item.id))), isDragOver && dropIndex === column.items.length && (jsxRuntime.jsx("div", { className: "h-1 bg-primary-400 rounded-full mt-3 animate-pulse" })), column.isLoading && (jsxRuntime.jsx("div", { className: "flex items-center justify-center py-4", children: jsxRuntime.jsx(react.Spinner, { size: "sm", color: "accent" }) }))] })) })] }));
 };
 const KanbanColumn = $8WNJc$react.memo(KanbanColumnComponent);
 KanbanColumn.displayName = "KanbanColumn";
@@ -6949,14 +7019,394 @@ const LindaIcon = ({ size = 24, className, ...nativeProps }) => {
     return (jsxRuntime.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: jsxRuntime.jsxs("g", { fill: "currentColor", children: [jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" })] }) }));
 };
 
+/** Aritmética mínima de color del personaje. TS puro: sin DOM ni React. */
+const HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+/**
+ * Un color en HEX normalizado a `#RRGGBB` en mayúsculas, o `null` si no lo es.
+ *
+ * Acepta `#RGB` y `#RRGGBB` en cualquier caja y con espacios alrededor; cualquier otra
+ * cosa (un nombre, `rgb()`, un hex con alfa, un no-texto) devuelve `null` para que quien
+ * llama decida el respaldo en vez de pintar un color que el navegador no entiende.
+ */
+const normalizeHex = (value) => {
+    if (typeof value !== "string") {
+        return null;
+    }
+    const trimmed = value.trim();
+    if (!HEX.test(trimmed)) {
+        return null;
+    }
+    const digits = trimmed.slice(1);
+    const full = digits.length === 3
+        ? digits
+            .split("")
+            .map((digit) => digit + digit)
+            .join("")
+        : digits;
+    return `#${full.toUpperCase()}`;
+};
+/**
+ * Aclara un color hacia el blanco canal a canal: `0` lo deja igual y `1` es blanco.
+ * Espera un HEX ya normalizado.
+ */
+const tintHex = (hex, amount) => {
+    const value = Number.parseInt(hex.slice(1), 16);
+    const channels = [(value >> 16) & 255, (value >> 8) & 255, value & 255];
+    return `#${channels
+        .map((channel) => Math.round(channel + (255 - channel) * amount)
+        .toString(16)
+        .padStart(2, "0"))
+        .join("")
+        .toUpperCase()}`;
+};
+
+/**
+ * Los temas del personaje de Linda: el dato de color del agente.
+ *
+ * Un tema son **9 colores con rol** del lienzo de diseño. La anatomía, los estados y las
+ * animaciones son los mismos en todos; lo único que cambia son estos colores. Aquí está
+ * el único sitio de la librería donde se escriben los hex de un tema: el componente los
+ * recibe por variables CSS (ver `character-css-vars.ts`).
+ *
+ * Las claves de los roles son las mismas que guarda y sirve el backend de agencias, para
+ * que lo que llega por la API se pueda pasar tal cual a `characterPaletteFromTheme`.
+ */
+/** Los 9 roles de un tema, en el orden de la tabla del diseño. */
+const CHARACTER_THEME_COLOR_KEYS = [
+    /** Accent AI: scoring y micro-detalles de inteligencia. */
+    "accent",
+    /** Primary: acción principal y control humano. */
+    "primary",
+    /** Cian de navegación: fondos destacados y navegación activa. */
+    "navigation",
+    /** Aqua suave: fondo general y contenedores amplios. */
+    "soft",
+    /** Teal neutro: apoyo, divisores y estados neutros. */
+    "neutral",
+    /** Secondary (verde de crecimiento): éxito, clientes activos, automatizaciones. */
+    "secondary",
+    /** Contexto AI: propuestas proactivas. */
+    "context",
+    /** Superficie profunda: tarjetas oscuras y datos secundarios. */
+    "surface",
+    /** Base oscura: núcleo, tipografía, encabezados y menús. */
+    "base",
+];
+const CHARACTER_THEME_IDS = [
+    "linda",
+    "luna",
+    "purple",
+    "coral",
+    "green",
+    "ocean",
+    "sky",
+    "yellow",
+];
+/** El tema de Bewe y el que se usa cuando no hay otro. */
+const DEFAULT_CHARACTER_THEME_ID = "linda";
+const theme = (id, name, values, outline) => {
+    const hexes = values.split(" ");
+    const colors = Object.fromEntries(CHARACTER_THEME_COLOR_KEYS.map((key, index) => [key, hexes[index]]));
+    return Object.freeze({
+        id,
+        name,
+        colors: Object.freeze({ ...colors, outline }),
+    });
+};
+/**
+ * Los 8 temas del lienzo. Valores en el orden de `CHARACTER_THEME_COLOR_KEYS`; el último
+ * argumento es el filo del aro de cada tema (`.rimline` en las páginas de Estados).
+ * Congelados en profundidad: son el respaldo de toda paleta incompleta.
+ */
+const CHARACTER_THEMES = Object.freeze({
+    linda: theme("linda", "Linda", "#FAD19E #60A5FA #67E8F9 #CCFBF1 #75C9C8 #34D399 #FEF3C7 #355452 #0A2540", "#B4E1FC"),
+    luna: theme("luna", "Luna", "#D29EF6 #A133EB #C27AF2 #F2E4F9 #ACA0B1 #7F6D87 #F2E4F9 #534758 #262128", "#E3C2F9"),
+    purple: theme("purple", "Purple", "#A773DB #7828C8 #59A1F4 #EEE4F8 #86BBF7 #006FEE #DFEDFD #39135F #240C3C", "#B3D4FA"),
+    coral: theme("coral", "Coral", "#FF6E6E #FF4F4F #FF8D8D #FFE9E9 #FFABAB #D24141 #FFCACA #792626 #4C1818", "#FFCACA"),
+    green: theme("green", "Green", "#7E91FB #16C964 #68DC9A #E2F8EC #90E5B5 #3956F9 #E6EAFE #1B2976 #111A4B", "#B9EFD0"),
+    ocean: theme("ocean", "Ocean", "#6AF5BB #26A5E5 #72C4EE #E4F4FC #98D4F3 #1AEF96 #E2FDF2 #124E6D #0B3245", "#BEE4F7"),
+    sky: theme("sky", "Sky", "#FAD19E #60A5FA #98C5FC #EBF4FE #7CB5FB #7ACA97 #FEF1E2 #2E4E77 #1D324B", "#CFE4FE"),
+    yellow: theme("yellow", "Yellow", "#FFD505 #4561BD #6D83CB #FFFAE0 #94A4D9 #D2B004 #FFF2B4 #0E1E53 #091334", "#BCC6E7"),
+});
+/**
+ * Los colores fijos del personaje, iguales en todos los temas: el aviso (naranja, su
+ * tono suave y el rojo del borde) y el blanco de ojos y brillos.
+ */
+const CHARACTER_FIXED_COLORS = {
+    alert: "#F97316",
+    alertSoft: "#FB923C",
+    alertDeep: "#EF4444",
+    light: "#FFFFFF",
+};
+
+/** Cuánto se aclara el Primary para el filo del aro cuando los colores son propios. */
+const OUTLINE_TINT = 0.7;
+/**
+ * Valida los colores de un tema y completa lo que falte con los de Linda, rol a rol.
+ *
+ * Una configuración incompleta (un rol sin enviar, un color mal escrito) nunca deja el
+ * personaje sin color: ese rol sale como el de Linda y se informa en `issues`. El filo
+ * (`outline`) solo se conserva si es un HEX válido; si no, se omite y lo resuelve la
+ * derivación.
+ */
+const normalizeCharacterThemeColors = (input) => {
+    const source = input !== null && typeof input === "object"
+        ? input
+        : {};
+    const fallback = CHARACTER_THEMES[DEFAULT_CHARACTER_THEME_ID].colors;
+    const issues = [];
+    const colors = {};
+    for (const key of CHARACTER_THEME_COLOR_KEYS) {
+        const hex = normalizeHex(source[key]);
+        if (hex) {
+            colors[key] = hex;
+        }
+        else {
+            colors[key] = fallback[key];
+            issues.push({
+                key,
+                reason: source[key] === undefined ? "missing" : "invalid",
+            });
+        }
+    }
+    const outline = normalizeHex(source.outline);
+    if (outline) {
+        colors.outline = outline;
+    }
+    else if (source.outline !== undefined && source.outline !== null) {
+        issues.push({ key: "outline", reason: "invalid" });
+    }
+    return { colors, issues };
+};
+/**
+ * El filo del aro de un tema del lienzo si los 9 colores son exactamente los suyos.
+ *
+ * El backend guarda 9 colores y no el filo, que el diseño ajusta a mano por tema y no sale
+ * de ninguna regla. Así un tema elegido en el panel se pinta igual que en el lienzo.
+ */
+const outlineOfMatchingTheme = (colors) => {
+    const match = CHARACTER_THEME_IDS.find((id) => CHARACTER_THEME_COLOR_KEYS.every((key) => CHARACTER_THEMES[id].colors[key] === colors[key]));
+    return match ? CHARACTER_THEMES[match].colors.outline : undefined;
+};
+/**
+ * Los 9 colores de un tema repartidos por las piezas del dibujo.
+ *
+ * Es la regla del lienzo: el aro recorre Primary → Cian → Secondary → Accent y vuelve; al
+ * pensar se enfría hacia Teal y Aqua; el núcleo es la Base; la película de la pompa pasa
+ * por Aqua, Contexto, Accent, Primary y Cian. El aviso y el blanco son fijos, salvo el
+ * tercer tono del aro de aviso, que es el Accent del tema.
+ *
+ * Tolera entradas incompletas o inválidas: cada rol que no se entienda sale como el de
+ * Linda (ver `normalizeCharacterThemeColors`).
+ */
+const characterPaletteFromTheme = (input) => {
+    const { colors } = normalizeCharacterThemeColors(input);
+    const { accent, primary, navigation, soft, neutral, secondary, context, base, } = colors;
+    const { alert, alertSoft, alertDeep, light } = CHARACTER_FIXED_COLORS;
+    return {
+        ring: [
+            primary,
+            navigation,
+            secondary,
+            accent,
+            secondary,
+            navigation,
+            primary,
+        ],
+        thinkingRing: [navigation, primary, neutral, soft, navigation],
+        alertRing: [alert, alertSoft, accent, alert, alertDeep, alert],
+        core: base,
+        film: [soft, context, accent, primary, navigation],
+        light,
+        mint: soft,
+        glow: navigation,
+        deep: primary,
+        spark: secondary,
+        warm: accent,
+        outline: colors.outline ??
+            outlineOfMatchingTheme(colors) ??
+            tintHex(primary, OUTLINE_TINT),
+        alert,
+        alertDeep,
+    };
+};
+const lindaPalette = characterPaletteFromTheme(CHARACTER_THEMES[DEFAULT_CHARACTER_THEME_ID].colors);
+for (const value of Object.values(lindaPalette)) {
+    if (Array.isArray(value)) {
+        Object.freeze(value);
+    }
+}
+/**
+ * La paleta de Linda: el respaldo de todo lo que no se entienda. Congelada, porque todas
+ * las mascotas caen a ella: modificarla desde fuera cambiaría el respaldo de todas.
+ */
+const DEFAULT_CHARACTER_PALETTE = Object.freeze(lindaPalette);
+
+const LIST_KEYS = ["ring", "thinkingRing", "alertRing", "film"];
+/**
+ * Tonos mínimos de cada lista. Un aro es un degradado que da la vuelta: con un solo tono
+ * no hay degradado (y hay navegadores que descartan uno de una sola parada, dejando el aro
+ * sin pintar). La película sí admite uno: los huecos repiten su primer tono.
+ */
+const MIN_LENGTH = {
+    ring: 2,
+    thinkingRing: 2,
+    alertRing: 2,
+    film: 1,
+};
+const COLOR_KEYS = [
+    "core",
+    "light",
+    "mint",
+    "glow",
+    "deep",
+    "spark",
+    "warm",
+    "outline",
+    "alert",
+    "alertDeep",
+];
+/**
+ * Valida una paleta ya repartida (la de la app, una guardada, la que llega por props) y
+ * la completa con la de Linda pieza por pieza.
+ *
+ * Un campo suelto que no sea un HEX cae al de Linda. Una lista que no sea un array de HEX
+ * válidos (al menos dos en los aros) cae ENTERA a la de Linda: mezclar tonos de dos temas en el mismo
+ * aro se ve como un error, no como un tema. Nunca lanza.
+ */
+const normalizeCharacterPalette = (input) => {
+    const source = input !== null && typeof input === "object"
+        ? input
+        : {};
+    const issues = [];
+    const palette = { ...DEFAULT_CHARACTER_PALETTE };
+    for (const key of LIST_KEYS) {
+        const value = source[key];
+        const hexes = Array.isArray(value) ? value.map(normalizeHex) : [];
+        if (hexes.length >= MIN_LENGTH[key] && hexes.every((hex) => hex !== null)) {
+            palette[key] = hexes;
+        }
+        else {
+            palette[key] = [...DEFAULT_CHARACTER_PALETTE[key]];
+            issues.push({ key, reason: value === undefined ? "missing" : "invalid" });
+        }
+    }
+    for (const key of COLOR_KEYS) {
+        const hex = normalizeHex(source[key]);
+        if (hex) {
+            palette[key] = hex;
+        }
+        else {
+            issues.push({
+                key,
+                reason: source[key] === undefined ? "missing" : "invalid",
+            });
+        }
+    }
+    return { palette, issues };
+};
+/** `true` si la paleta está completa y todos sus colores son HEX válidos. */
+const isCompleteCharacterPalette = (input) => normalizeCharacterPalette(input).issues.length === 0;
+
+/**
+ * Las variables CSS que lee `LindaMascot`. Las listas (`--lm-ring`…) van separadas por
+ * comas para entrar tal cual en un `conic-gradient`. `--lm-teal` y `--lm-alert-soft` no
+ * son campos de la paleta: salen de ella (el tercer tono del aro de pensar y el segundo
+ * del de aviso), igual que hace la app con las órbitas.
+ */
+const CHARACTER_CSS_VARS = [
+    "--lm-ring",
+    "--lm-thinking-ring",
+    "--lm-alert-ring",
+    "--lm-core",
+    "--lm-film-1",
+    "--lm-film-2",
+    "--lm-film-3",
+    "--lm-film-4",
+    "--lm-film-5",
+    "--lm-light",
+    "--lm-mint",
+    "--lm-glow",
+    "--lm-deep",
+    "--lm-spark",
+    "--lm-warm",
+    "--lm-outline",
+    "--lm-alert",
+    "--lm-alert-deep",
+    "--lm-teal",
+    "--lm-alert-soft",
+];
+/**
+ * Una paleta como variables CSS, lista para un `style` o para `setProperty`. Normaliza
+ * antes: lo que no se entienda sale con los colores de Linda.
+ */
+const characterPaletteToCssVars = (input) => {
+    const { palette } = normalizeCharacterPalette(input);
+    const film = (index) => palette.film[index] ?? palette.film[0];
+    return {
+        "--lm-ring": palette.ring.join(", "),
+        "--lm-thinking-ring": palette.thinkingRing.join(", "),
+        "--lm-alert-ring": palette.alertRing.join(", "),
+        "--lm-core": palette.core,
+        "--lm-film-1": film(0),
+        "--lm-film-2": film(1),
+        "--lm-film-3": film(2),
+        "--lm-film-4": film(3),
+        "--lm-film-5": film(4),
+        "--lm-light": palette.light,
+        "--lm-mint": palette.mint,
+        "--lm-glow": palette.glow,
+        "--lm-deep": palette.deep,
+        "--lm-spark": palette.spark,
+        "--lm-warm": palette.warm,
+        "--lm-outline": palette.outline,
+        "--lm-alert": palette.alert,
+        "--lm-alert-deep": palette.alertDeep,
+        "--lm-teal": palette.thinkingRing[2] ?? palette.thinkingRing[0],
+        "--lm-alert-soft": palette.alertRing[1],
+    };
+};
+/**
+ * Escribe la paleta del personaje en un elemento, típicamente
+ * `document.documentElement.style` para que todas las mascotas de la página la hereden.
+ */
+const applyCharacterPalette = (style, palette) => {
+    for (const [name, value] of Object.entries(characterPaletteToCssVars(palette))) {
+        style.setProperty(name, value);
+    }
+};
+/** Quita la paleta: las mascotas vuelven a pintarse con la de Linda. */
+const removeCharacterPalette = (style) => {
+    for (const name of CHARACTER_CSS_VARS) {
+        style.removeProperty(name);
+    }
+};
+
+/** Los estados que se pintan, en el orden del lienzo de diseño. */
 const LINDA_MASCOT_STATES = [
-    "idle",
-    "processing",
+    "ready",
+    "thinking",
     "working",
     "listening",
+    "alert",
+    "loading",
     "talking",
-    "ready",
 ];
+/** Nombres anteriores de estado y el estado con el que se pintan ahora. */
+const LINDA_MASCOT_STATE_ALIASES = {
+    idle: "ready",
+    processing: "thinking",
+};
+/** El estado que se pinta. Un nombre anterior se traduce; uno desconocido, reposo. */
+const resolveMascotState = (state) => {
+    if (state === undefined) {
+        return "ready";
+    }
+    if (state === "idle" || state === "processing") {
+        return LINDA_MASCOT_STATE_ALIASES[state];
+    }
+    return LINDA_MASCOT_STATES.includes(state) ? state : "ready";
+};
 /** px de cada talla con nombre. Cada una cae en su propio nivel de detalle. */
 const LINDA_MASCOT_SIZE_PX = {
     xs: 20,
@@ -6968,17 +7418,6 @@ const LINDA_MASCOT_SIZE_PX = {
 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;
@@ -7004,480 +7443,952 @@ const clampLevel = (level) => {
     }
     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",
-    },
-};
 
+/**
+ * La hoja del personaje: el lienzo de diseño (variante «pompa de jabón») aplanado.
+ *
+ * El lienzo es HTML + CSS con una cascada larga de refinados; aquí está solo lo que de
+ * verdad se ve, resuelto regla a regla, con tres cambios:
+ *
+ * - **Ningún color escrito.** Cada color de tema sale de una variable `--_lm-*`, que lee la
+ *   pública `--lm-*` (la escribe `applyCharacterPalette` o la prop `palette`) con la paleta
+ *   de Linda como respaldo, generada desde el dato del tema. Los tonos con transparencia
+ *   del lienzo (`rgba(<rol>, .35)`) son `color-mix` de esas variables. Solo el blanco y el
+ *   negro de brillos y sombras van escritos.
+ * - **Mide en `cqmin`.** El lienzo multiplica todo por `--s` (el lado). Aquí el lado es la
+ *   caja de la raíz (`container-type: size`), así que el dibujo sigue a la caja aunque el
+ *   consumidor la cambie por CSS (`size-full` en la llamada de Claw). La talla de la prop va
+ *   en \`@layer base\` para que esa clase gane.
+ * - **Sin `!important` en las animaciones.** El lienzo resolvía su cascada con `!important`
+ *   y selectores de id; aquí cada estado gana por especificidad y el único `!important` es
+ *   el del movimiento reducido, que así para todo.
+ */
+const ROOT = ".aurora-linda-mascot";
 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 {
+/** Una medida del lienzo: fracción del lado. */
+const s = (k) => `calc(var(--_lm-s) * ${k})`;
+/** Un color de tema con transparencia. */
+const mix = (name, percent) => `color-mix(in srgb, var(--_lm-${name}) ${percent}%, transparent)`;
+const white = (alpha) => `rgba(255, 255, 255, ${alpha})`;
+const black = (alpha) => `rgba(0, 0, 0, ${alpha})`;
+/** Huevo del aro y del núcleo. */
+const EGG = "50% 50% 46% 46% / 54% 54% 46% 46%";
+/** La pompa en reposo. */
+const BUBBLE_SHAPE = "63% 37% 54% 46% / 43% 60% 40% 57%";
+/** Máscara que deja solo el borde de una caja (el aro). */
+const BORDER_ONLY = `-webkit-mask: linear-gradient(black 0 0) padding-box, linear-gradient(black 0 0);
+	-webkit-mask-composite: xor;
+	mask: linear-gradient(black 0 0) padding-box, linear-gradient(black 0 0);
+	mask-composite: exclude;`;
+const SOFT_EASE = "cubic-bezier(0.45, 0.05, 0.55, 0.95)";
+/**
+ * `--_lm-x: var(--lm-x, <Linda>);` por cada variable pública. Una línea por variable: el
+ * test que vigila que no haya colores escritos se salta exactamente estas líneas.
+ */
+const paletteFallbacks = () => {
+    const linda = characterPaletteToCssVars(DEFAULT_CHARACTER_PALETTE);
+    return CHARACTER_CSS_VARS.map((name) => `\t--_lm-${name.slice(5)}: var(${name}, ${linda[name]});`).join("\n");
+};
+const AUTO_THEME = themeScopeSelectors(`${ROOT}[data-appearance="auto"]`);
+const reducedMotion = (root) => `
+	${root},
+	${root}::after,
+	${root} *,
+	${root} *::before,
+	${root} *::after {
 		animation: none !important;
+		transition: 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--loading .aurora-lm-load {
+		opacity: 1;
 	}
-	${root}.aurora-linda-mascot--ready .aurora-lm-sparkle {
-		animation: aurora-lm-sparkle-fade 700ms ease-out 1 both !important;
+	${root}.aurora-linda-mascot--loading .aurora-lm-body {
+		opacity: 0;
 	}
 `;
-const reducedMotionRules = (root) => `
-@media (prefers-reduced-motion: reduce) {${reducedMotionBody(root)}}
-${reducedMotionBody(`${root}[data-motion="reduce"]`)}
-`;
+/** Tiempo de respiración y grosor del aro por estado (`--breath` y `--rw` del lienzo). */
 const LINDA_MASCOT_CSS = `
-.aurora-linda-mascot {
+@property --aurora-lm-a {
+	syntax: "<angle>";
+	inherits: false;
+	initial-value: 0deg;
+}
+
+/*
+ * La talla de la prop, en la capa \`base\` y con especificidad 0: cualquier clase del
+ * consumidor la pisa, también las utilidades de Tailwind 4, que van en \`@layer utilities\`
+ * y perderían contra una regla sin capa. Una capa con nombre propio no vale: inyectada
+ * después de Tailwind quedaría detrás de \`utilities\` y volvería a ganar.
+ */
+@layer base {
+	:where(${ROOT}) {
+		width: var(--_lm-size, 72px);
+		height: var(--_lm-size, 72px);
+	}
+}
+
+${ROOT} {
+${paletteFallbacks()}
+	--_lm-s: 100cqmin;
+	--_lm-rw: ${s(0.036)};
+	--_lm-rb: var(--_lm-ring);
+	--_lm-c1: var(--_lm-glow);
+	--_lm-c2: var(--_lm-deep);
+	--_lm-c3: var(--_lm-spark);
+	--_lm-c4: var(--_lm-warm);
+	--_lm-breath: 6s;
+	--_lm-shadow-display: block;
 	${LINDA_MASCOT_LEVEL_VAR}: 0;
-	--lm-halo: 0.5;
-	--lm-shadow: 1;
-	--lm-rim: 0.85;
-	--lm-sparkle: #F2B441;
+	position: relative;
 	display: inline-block;
 	flex-shrink: 0;
-	overflow: visible;
+	container-type: size;
 	vertical-align: middle;
+	overflow: visible;
 }
-/* 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;
+
+/* Reflejo claro en el suelo, bajo la pompa. */
+${ROOT}::after {
+	content: "";
+	position: absolute;
+	left: 28%;
+	right: 28%;
+	bottom: -14%;
+	height: 6%;
+	border-radius: 50%;
+	background: radial-gradient(closest-side, ${white(0.7)}, ${mix("mint", 30)} 55%, transparent);
+	filter: blur(${s(0.01)});
+	pointer-events: none;
 }
-/*
- * 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;
+
+/* ── Estados: colores y ritmo ─────────────────────────────────────────────── */
+
+.aurora-linda-mascot--ready,
+.aurora-linda-mascot--talking {
+	--_lm-breath: 5s;
 }
-${AUTO_THEME.light} {
-	--lm-halo: 0.5;
-	--lm-shadow: 1;
-	--lm-rim: 0.85;
-	--lm-sparkle: #F2B441;
+.aurora-linda-mascot--listening {
+	--_lm-breath: 6.5s;
+	--_lm-rw: ${s(0.055)};
 }
-
-/* 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-linda-mascot--thinking {
+	--_lm-rb: var(--_lm-thinking-ring);
+	--_lm-c3: var(--_lm-teal);
+	--_lm-c4: var(--_lm-deep);
+	--_lm-breath: 5s;
 }
-.aurora-lm-breathe {
-	animation: aurora-lm-breathe 2s ease-in-out infinite alternate;
+.aurora-linda-mascot--working {
+	--_lm-breath: 1.8s;
+	--_lm-rw: ${s(0.042)};
 }
-.aurora-lm-level-body,
-.aurora-lm-level-rings,
-.aurora-lm-level-halo {
-	transition: transform 140ms ${EASE_OUT}, opacity 240ms ${EASE_OUT};
+.aurora-linda-mascot--alert {
+	--_lm-rb: var(--_lm-alert-ring);
+	--_lm-c1: var(--_lm-alert);
+	--_lm-c2: var(--_lm-alert-deep);
+	--_lm-c3: var(--_lm-alert-soft);
+	--_lm-c4: var(--_lm-warm);
+	--_lm-breath: 1.3s;
 }
 
-/* Halo y sombra de contacto. */
-.aurora-lm-halo,
-.aurora-lm-level-halo {
-	transform-box: fill-box;
-	transform-origin: center;
+/* ── Tema: en oscuro la sombra de contacto (tinta de la base) no se ve ───── */
+
+${AUTO_THEME.dark},
+${ROOT}[data-appearance="dark"] {
+	--_lm-shadow-display: none;
 }
-.aurora-lm-halo {
-	opacity: calc(var(--lm-halo) * var(--lm-halo-boost, 1));
-	transition: opacity 400ms ease;
+${AUTO_THEME.light} {
+	--_lm-shadow-display: block;
 }
+
+/* ── Capas ────────────────────────────────────────────────────────────────── */
+
+.aurora-lm-pulse,
+.aurora-lm-shadow,
+.aurora-lm-load,
+.aurora-lm-level,
+.aurora-lm-body,
+.aurora-lm-body > span,
+.aurora-lm-orbit,
+.aurora-lm-soap > span,
+.aurora-lm-headphones > span {
+	position: absolute;
+	box-sizing: border-box;
+}
+
+/* Ondas: solo al escuchar y en aviso. */
+.aurora-lm-pulse {
+	inset: 4%;
+	border-radius: 50%;
+	border: ${s(0.01)} solid var(--_lm-c1);
+	opacity: 0;
+	pointer-events: none;
+}
+
 .aurora-lm-shadow {
-	opacity: var(--lm-shadow);
+	display: var(--_lm-shadow-display);
+	left: 18%;
+	right: 18%;
+	bottom: -12%;
+	height: 9%;
+	border-radius: 50%;
+	background: radial-gradient(closest-side, ${mix("core", 28)}, ${mix("core", 8)} 60%, transparent);
+	filter: blur(${s(0.012)});
+	animation: aurora-lm-shadow var(--_lm-breath) ease-in-out infinite;
+}
+
+/* Cargando: cuadrícula de 9 puntos, oculta en el resto de estados. */
+.aurora-lm-load {
+	display: none;
+	left: 50%;
+	top: 44%;
+	width: 52%;
+	aspect-ratio: 1;
+	translate: -50% -50%;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: repeat(3, 1fr);
+	place-items: center;
+	opacity: 0;
+	z-index: 5;
+}
+.aurora-lm-dot {
+	--_lm-dot: var(--_lm-c2);
+	display: block;
+	width: 58%;
+	aspect-ratio: 1;
+	border-radius: 50%;
+	background: var(--_lm-dot);
+	box-shadow: 0 0 ${s(0.03)} var(--_lm-dot), inset 0 ${s(-6e-3)} ${s(0.01)} ${black(0.12)}, inset 0 ${s(0.006)} ${s(0.008)} ${white(0.6)};
+	opacity: 0.25;
+}
+.aurora-lm-dot--1 { --_lm-dot: var(--_lm-c2); animation-delay: 1.6s; }
+.aurora-lm-dot--2 { --_lm-dot: var(--_lm-c1); animation-delay: 1.75s; }
+.aurora-lm-dot--3 { --_lm-dot: var(--_lm-c3); animation-delay: 1.9s; }
+.aurora-lm-dot--6 { --_lm-dot: var(--_lm-c4); animation-delay: 2.05s; }
+.aurora-lm-dot--9 { --_lm-dot: var(--_lm-c2); animation-delay: 2.2s; }
+.aurora-lm-dot--8 { --_lm-dot: var(--_lm-c1); animation-delay: 2.35s; }
+.aurora-lm-dot--7 { --_lm-dot: var(--_lm-c3); animation-delay: 2.5s; }
+.aurora-lm-dot--4 { --_lm-dot: var(--_lm-c4); animation-delay: 2.65s; }
+
+/* Envoltorio que solo escala con la voz: separado de las animaciones del cuerpo. */
+.aurora-lm-level {
+	inset: 0;
+	transition: scale 140ms cubic-bezier(0.22, 0.7, 0.3, 1);
+}
+
+.aurora-lm-body {
+	inset: 0;
+	animation: aurora-lm-float var(--_lm-breath) ease-in-out infinite;
+}
+
+/* Aro: borde cónico que gira el color; su resplandor, el mismo aro desenfocado. */
+.aurora-lm-rimglow {
+	inset: 0;
+	filter: blur(${s(0.028)}) saturate(1.8) brightness(1.45);
+}
+.aurora-lm-rim-glow,
+.aurora-lm-rim {
+	border-style: solid;
+	border-color: transparent;
+	background: conic-gradient(from var(--aurora-lm-a), var(--_lm-rb)) border-box;
+	${BORDER_ONLY}
+	animation: aurora-lm-hue 8s linear infinite, aurora-lm-squish var(--_lm-breath) ease-in-out infinite;
+}
+.aurora-lm-rim-glow {
+	position: absolute;
+	box-sizing: border-box;
+	inset: 10.5% 10.5% 20.5% 18.5%;
+	border-radius: ${EGG};
+	border-width: calc(var(--_lm-rw) * 1.4) calc(var(--_lm-rw) * 1.3) calc(var(--_lm-rw) * 2) calc(var(--_lm-rw) * 1.9);
 }
 .aurora-lm-rim {
-	opacity: var(--lm-rim);
+	inset: 12% 12% 22% 20%;
+	border-radius: ${EGG};
+	border-width: calc(var(--_lm-rw) * 0.7) calc(var(--_lm-rw) * 0.6) calc(var(--_lm-rw) * 1.3) calc(var(--_lm-rw) * 1.25);
+	filter: blur(${s(0.0015)}) saturate(1.9) brightness(1.35);
+}
+.aurora-lm-rimline {
+	inset: 12% 12% 22% 20%;
+	border-radius: ${EGG};
+	box-shadow: 0 0 0 ${s(0.004)} ${mix("outline", 95)}, 0 0 0 ${s(0.007)} ${mix("outline", 40)};
+	pointer-events: none;
+	animation: aurora-lm-squish var(--_lm-breath) ease-in-out infinite;
+}
+
+/* Núcleo oscuro con su reflejo. */
+.aurora-lm-core {
+	inset: 12% 12% 22% 20%;
+	border-radius: ${EGG};
+	background: radial-gradient(ellipse at 30% 80%, ${mix("deep", 28)}, transparent 45%), radial-gradient(ellipse at 80% 60%, ${mix("glow", 12)}, transparent 40%), var(--_lm-core);
+	box-shadow: inset 0 0 ${s(0.03)} ${mix("glow", 25)};
+	scale: 0.975;
+	animation: aurora-lm-squish var(--_lm-breath) ease-in-out infinite;
+}
+.aurora-lm-core::before {
+	content: "";
+	position: absolute;
+	right: 10%;
+	top: 7%;
+	width: 46%;
+	height: 26%;
+	border-radius: 50%;
+	background: linear-gradient(200deg, ${white(0.55)}, ${white(0)} 75%);
+	transform: rotate(28deg);
+	filter: blur(${s(0.008)});
+	z-index: 1;
+}
+
+/* Órbitas de pensar: tres luces girando dentro del núcleo. */
+.aurora-lm-orbits {
+	inset: 22% 18% 30% 26%;
+	opacity: 0;
+	transition: opacity 0.6s;
 }
-
-/*
- * 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;
+	inset: 0;
 }
-.aurora-lm-comet,
-.aurora-lm-glint {
-	opacity: 0;
-	transition: opacity 320ms ease;
+.aurora-lm-orbit::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 50%;
+	width: ${s(0.034)};
+	height: ${s(0.034)};
+	margin-left: ${s(-0.017)};
+	border-radius: 50%;
+	background: var(--_lm-light);
+	box-shadow: 0 0 ${s(0.04)} var(--_lm-c1);
+}
+.aurora-lm-orbit--2 {
+	inset: 14%;
+}
+.aurora-lm-orbit--2::before {
+	background: var(--_lm-c3);
+}
+.aurora-lm-orbit--3 {
+	inset: -10%;
+}
+.aurora-lm-orbit--3::before {
+	background: var(--_lm-c4);
+	width: ${s(0.024)};
+	height: ${s(0.024)};
 }
 
-/* Ojos: solo parpadean (sin expresiones faciales). Dos parpadeos por ciclo, a 4,8 y 6,2 s. */
+/* Ojos: dos cápsulas de luz que parpadean. */
 .aurora-lm-eyes {
-	transform-box: fill-box;
-	transform-origin: center;
-	animation: aurora-lm-blink 11s ease-in-out infinite;
+	left: 54%;
+	top: 50%;
+	width: 42%;
+	height: 22%;
+	transform: translate(-50%, -50%);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	transition: transform 0.6s ease;
 }
-
-/* 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);
+.aurora-lm-eye {
+	display: block;
+	box-sizing: border-box;
+	width: 24%;
+	height: 60%;
+	border-radius: 999px;
+	background: linear-gradient(180deg, var(--_lm-light) 0%, var(--_lm-light) 55%, var(--_lm-mint) 100%);
+	box-shadow: 0 0 ${s(0.025)} var(--_lm-light), 0 0 ${s(0.08)} var(--_lm-glow);
+	animation: aurora-lm-blink 5s infinite;
+	transition: scale 0.5s ease, rotate 0.5s ease;
+}
+
+/* Gafas de trabajar: ojo de gato en línea, del color de los ojos. */
+.aurora-lm-glasses {
+	position: absolute;
+	left: -16%;
+	top: -12%;
+	width: 132%;
+	height: 124%;
+	overflow: visible;
+	filter: drop-shadow(0 0 ${s(0.006)} var(--_lm-light)) drop-shadow(0 0 ${s(0.016)} ${mix("light", 60)});
+}
+.aurora-lm-glasses g {
+	fill: none;
+	stroke: var(--_lm-light);
+	stroke-width: 7;
+	stroke-linejoin: round;
+	stroke-linecap: round;
+}
+
+/* Pompa de jabón: la burbuja que envuelve al personaje. */
+.aurora-lm-bubble {
+	inset: -3% -2% -1% -4%;
+	overflow: hidden;
+	border-radius: ${BUBBLE_SHAPE};
+	background: radial-gradient(circle at 38% 32%, ${white(0.12)} 0%, transparent 45%), radial-gradient(circle at 50% 50%, transparent 66%, ${mix("core", 4)} 78%, ${mix("core", 10)} 87%, ${white(0.28)} 93%, ${white(0.4)} 96%, ${white(0.12)} 99%, transparent 100%);
+	box-shadow: inset ${s(-0.03)} ${s(-0.04)} ${s(0.07)} ${mix("core", 14)}, inset ${s(0.02)} ${s(0.025)} ${s(0.06)} ${white(0.4)}, 0 0 ${s(0.05)} ${white(0.35)}, 0 0 ${s(0.12)} ${mix("mint", 30)};
+	filter: blur(${s(0.006)});
+	animation: aurora-lm-jabon 11s ${SOFT_EASE} infinite, aurora-lm-breathe 7.3s ${SOFT_EASE} infinite, aurora-lm-drift 16s linear infinite;
+}
+.aurora-lm-bubble::before {
+	content: "";
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	background: conic-gradient(from var(--aurora-lm-a), var(--_lm-film-1) 0deg, var(--_lm-film-2) 80deg, var(--_lm-film-3) 130deg, var(--_lm-film-4) 185deg, var(--_lm-film-5) 225deg, var(--_lm-film-1) 290deg, var(--_lm-film-1) 360deg);
+	-webkit-mask: radial-gradient(closest-side, transparent 52%, ${black(0.6)} 78%, black 100%);
+	mask: radial-gradient(closest-side, transparent 52%, ${black(0.6)} 78%, black 100%);
+	opacity: 0.4;
+	animation: aurora-lm-hue 36s linear infinite;
+}
+
+/* Reflejos y película de la pompa. */
+.aurora-lm-soap {
+	left: -4%;
+	top: -3%;
+	right: -2%;
+	bottom: -1%;
+	overflow: hidden;
+	border-radius: ${BUBBLE_SHAPE};
+	-webkit-mask: radial-gradient(closest-side, black 92%, transparent 100%);
+	mask: radial-gradient(closest-side, black 92%, transparent 100%);
+	animation: aurora-lm-jabon 11s ${SOFT_EASE} infinite, aurora-lm-breathe 7.3s ${SOFT_EASE} infinite, aurora-lm-drift 40s linear infinite;
+}
+.aurora-lm-soap > span:nth-child(1) {
+	left: 17%;
+	right: 13%;
+	top: 1.2%;
+	height: 34%;
+	border-radius: 50% 50% 40% 46% / 80% 80% 20% 28%;
+	background: radial-gradient(ellipse 120% 150% at 50% 135%, ${mix("deep", 0)} 52%, ${mix("deep", 55)} 60%, ${mix("glow", 80)} 68%, ${mix("spark", 80)} 76%, ${mix("film-2", 85)} 83%, ${mix("warm", 90)} 90%, ${white(0.95)} 97%);
+	mix-blend-mode: screen;
+	opacity: 0.45;
+	filter: blur(${s(0.008)});
+}
+.aurora-lm-soap > span:nth-child(2) {
+	left: 18%;
+	width: 46%;
+	bottom: 6%;
+	height: 26%;
+	border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
+	background: radial-gradient(ellipse 130% 110% at 50% -10%, ${mix("glow", 0)} 40%, ${mix("glow", 60)} 55%, ${mix("deep", 55)} 70%, ${mix("warm", 65)} 85%, ${white(0.35)} 100%);
+	mix-blend-mode: screen;
+	opacity: 0.38;
+	filter: blur(${s(0.014)});
+}
+.aurora-lm-soap > span:nth-child(3) {
+	left: 42%;
+	right: 12%;
+	bottom: 8%;
+	height: 24%;
+	border-radius: 55% 45% 45% 55% / 50% 60% 40% 50%;
+	background: radial-gradient(ellipse 120% 110% at 40% -5%, ${mix("glow", 0)} 38%, ${mix("glow", 70)} 52%, ${mix("warm", 70)} 72%, ${mix("warm", 60)} 88%, ${white(0.3)} 100%);
+	mix-blend-mode: screen;
+	opacity: 0.38;
+	filter: blur(${s(0.014)});
+}
+.aurora-lm-soap > span:nth-child(4) {
+	inset: 0;
+	border-radius: inherit;
+	box-shadow: inset ${s(0.015)} ${s(-0.02)} ${s(0.02)} ${mix("core", 18)}, inset ${s(-0.01)} ${s(0.01)} ${s(0.03)} ${white(0.35)};
+}
+.aurora-lm-soap > span:nth-child(5) {
+	left: 16%;
+	top: 15%;
+	width: 15%;
+	height: 10%;
+	border-radius: 40%;
+	background: linear-gradient(160deg, ${white(0.95)}, ${white(0.35)});
+	rotate: -35deg;
+	filter: blur(${s(0.004)});
+}
+.aurora-lm-soap > span:nth-child(6) {
+	left: 14%;
+	top: 28%;
+	width: 6%;
+	height: 4%;
+	border-radius: 50%;
+	background: ${white(0.9)};
+	rotate: -35deg;
+	filter: blur(${s(0.003)});
+}
+.aurora-lm-soap > span:nth-child(7) {
+	right: 14%;
+	top: 12%;
+	width: 5%;
+	height: 5%;
+	border-radius: 50%;
+	background: radial-gradient(closest-side, ${white(1)}, ${white(0)});
+	filter: blur(${s(0.002)});
+}
+.aurora-lm-soap > span:nth-child(8) {
+	inset: 1.2%;
+	border-radius: inherit;
+	border: ${s(0.012)} solid transparent;
+	border-left-color: ${white(0.85)};
+	border-bottom-color: ${white(0.55)};
+	rotate: 20deg;
+	filter: blur(${s(0.012)});
+	opacity: 0.8;
+}
+.aurora-lm-soap > span:nth-child(9) {
+	inset: 2.5%;
+	border-radius: inherit;
+	border: ${s(0.008)} solid transparent;
+	border-right-color: ${white(0.7)};
+	border-top-color: ${white(0.3)};
+	rotate: -15deg;
+	filter: blur(${s(0.01)});
+	opacity: 0.7;
+}
+.aurora-lm-soap > span:nth-child(10) {
+	left: 24%;
+	right: 18%;
+	top: 1.4%;
+	height: 6%;
+	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
+	border-top: ${s(0.01)} solid ${white(0.95)};
+	filter: blur(${s(0.006)});
+}
+.aurora-lm-soap > span:nth-child(11) {
+	right: 20%;
+	bottom: 10%;
+	width: 8%;
+	height: 3%;
+	border-radius: 50%;
+	background: ${white(0.85)};
+	rotate: -20deg;
+	filter: blur(${s(0.004)});
+}
+.aurora-lm-soap > span:nth-child(12) {
+	left: 34%;
+	right: 26%;
+	bottom: 3.5%;
+	height: 9%;
+	border-radius: 50%;
+	background: radial-gradient(closest-side, ${white(0.9)}, ${mix("mint", 55)} 45%, transparent);
+	filter: blur(${s(0.008)});
+}
+.aurora-lm-soap > span:nth-child(13) {
+	inset: 0;
+	border-radius: inherit;
+	background: radial-gradient(circle at 70% 78%, ${mix("core", 12)}, transparent 38%);
+}
+
+/* Auriculares de escuchar. */
+.aurora-lm-headphones {
+	inset: 9% 9% 19% 17%;
+	rotate: -6deg;
+	transform-origin: 50% 55%;
+}
+.aurora-lm-headphones-arc {
+	left: 4%;
+	right: 4%;
+	top: -6%;
+	height: 58%;
+	border: ${s(0.03)} solid var(--_lm-core);
+	border-bottom: 0;
+	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
+	filter: drop-shadow(0 ${s(0.01)} ${s(0.015)} ${mix("core", 25)});
+}
+.aurora-lm-headphones-cup {
+	top: 32%;
+	width: 20%;
+	height: 36%;
+	border-radius: 50% 50% 46% 46% / 50% 50% 50% 50%;
+	background: radial-gradient(circle at 35% 28%, var(--_lm-teal), color-mix(in srgb, var(--_lm-teal) 45%, var(--_lm-core)) 50%, var(--_lm-core) 100%);
+	box-shadow: inset 0 0 0 ${s(0.018)} var(--_lm-glow), 0 ${s(0.02)} ${s(0.03)} ${mix("core", 30)};
+}
+.aurora-lm-headphones-cup--left {
+	left: -5%;
+	rotate: 10deg;
+}
+.aurora-lm-headphones-cup--right {
+	right: -5%;
+	rotate: -10deg;
+}
+
+/* ── Estados: movimiento, ojos y accesorios ───────────────────────────────── */
+
+/* Lista (reposo) y hablando: flota sereno y una luz blanca recorre el aro. */
+.aurora-linda-mascot--ready .aurora-lm-body,
+.aurora-linda-mascot--talking .aurora-lm-body {
+	animation: aurora-lm-ready 4s ease-in-out infinite;
+}
+.aurora-linda-mascot--ready .aurora-lm-rim,
+.aurora-linda-mascot--talking .aurora-lm-rim {
+	background: conic-gradient(from var(--aurora-lm-a), transparent 0deg 150deg, ${white(0.6)} 270deg, ${white(1)} 320deg, ${white(1)} 355deg, transparent 360deg) border-box, conic-gradient(from var(--aurora-lm-a), var(--_lm-rb)) border-box;
+	animation: aurora-lm-hue 2.6s linear infinite;
+}
+.aurora-linda-mascot--ready .aurora-lm-rim-glow,
+.aurora-linda-mascot--talking .aurora-lm-rim-glow {
+	background: conic-gradient(from var(--aurora-lm-a), transparent 0deg 200deg, ${mix("glow", 90)} 300deg, ${white(1)} 350deg, transparent 360deg) border-box, conic-gradient(from var(--aurora-lm-a), var(--_lm-rb)) border-box;
+	animation: aurora-lm-hue 2.6s linear infinite;
+}
+.aurora-linda-mascot--ready .aurora-lm-eye,
+.aurora-linda-mascot--talking .aurora-lm-eye {
+	scale: 1.15 1;
+	-webkit-mask: radial-gradient(ellipse 66% 74% at 50% 104%, transparent 98%, black 100%);
+	mask: radial-gradient(ellipse 66% 74% at 50% 104%, transparent 98%, black 100%);
+}
+.aurora-linda-mascot--talking .aurora-lm-level {
+	scale: calc(1 + ${LEVEL} * 0.07);
+}
+
+/* Escuchando: auriculares, asiente y lanza ondas en azul y verde. */
+.aurora-linda-mascot--listening .aurora-lm-body {
+	animation: aurora-lm-float var(--_lm-breath) ease-in-out infinite, aurora-lm-nod 2.8s ease-in-out infinite;
+}
+.aurora-linda-mascot--listening .aurora-lm-level {
+	scale: calc(1 + ${LEVEL} * 0.05);
+}
+.aurora-linda-mascot--listening .aurora-lm-rim,
+.aurora-linda-mascot--listening .aurora-lm-rim-glow {
+	animation: aurora-lm-hue 3.5s linear infinite;
+}
+.aurora-linda-mascot--listening .aurora-lm-eyes {
+	transform: translate(-50%, -50%) rotate(-7deg);
+	animation: aurora-lm-nod-eyes 2.8s ease-in-out infinite;
+}
+.aurora-linda-mascot--listening .aurora-lm-eye {
+	scale: 1.12 1.22;
+}
+.aurora-linda-mascot--listening .aurora-lm-pulse {
+	border-color: var(--_lm-deep);
+	box-shadow: 0 0 ${s(0.03)} ${mix("deep", 45)}, inset 0 0 ${s(0.02)} ${mix("glow", 35)};
+	filter: blur(${s(0.002)});
+	animation: aurora-lm-listen-wave 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s infinite;
+}
+.aurora-linda-mascot--listening .aurora-lm-pulse--2 {
+	border-color: var(--_lm-spark);
+	box-shadow: 0 0 ${s(0.03)} ${mix("spark", 45)}, inset 0 0 ${s(0.02)} ${mix("mint", 40)};
+	animation-delay: 0.58s;
+}
+.aurora-linda-mascot--listening .aurora-lm-bubble {
+	box-shadow: inset ${s(-0.03)} ${s(-0.04)} ${s(0.07)} ${mix("core", 14)}, inset 0 0 ${s(0.06)} ${mix("deep", 35)}, 0 0 ${s(0.06)} ${mix("deep", 35)}, 0 0 ${s(0.14)} ${mix("spark", 20)};
 }
 
-/* ── 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;
+/* Pensando: el aro se enfría, mira arriba de un lado a otro y entrecierra los ojos. */
+.aurora-linda-mascot--thinking .aurora-lm-body {
+	animation: aurora-lm-float var(--_lm-breath) ease-in-out infinite, aurora-lm-tilt 9s ease-in-out infinite;
 }
-.aurora-linda-mascot--processing .aurora-lm-comet {
+.aurora-linda-mascot--thinking .aurora-lm-orbits {
 	opacity: 1;
 }
-.aurora-linda-mascot--processing .aurora-lm-halo {
-	animation: aurora-lm-pulse 1.6s ease-in-out infinite;
+/* Solo aquí giran: invisibles en el resto de estados, no gastan animación. */
+.aurora-linda-mascot--thinking .aurora-lm-orbit {
+	animation: aurora-lm-spin 1.9s linear infinite;
+}
+.aurora-linda-mascot--thinking .aurora-lm-orbit--2 {
+	animation-duration: 2.6s;
+	animation-direction: reverse;
+}
+.aurora-linda-mascot--thinking .aurora-lm-orbit--3 {
+	animation-duration: 3.8s;
+}
+.aurora-linda-mascot--thinking .aurora-lm-eyes {
+	transform: translate(-50%, -58%);
+	animation: aurora-lm-think 5s ease-in-out infinite;
+}
+.aurora-linda-mascot--thinking .aurora-lm-eye {
+	animation: aurora-lm-squint 3.6s ease-in-out infinite;
 }
 
-.aurora-linda-mascot--working .aurora-lm-boost,
-.aurora-linda-mascot--working .aurora-lm-orbit {
-	animation-play-state: running;
+/* Trabajando: gafas, vibra y los ojos recorren de lado a lado. */
+.aurora-linda-mascot--working .aurora-lm-body {
+	animation: aurora-lm-buzz 0.45s linear infinite;
 }
-.aurora-linda-mascot--working .aurora-lm-glint {
-	opacity: 1;
+.aurora-linda-mascot--working .aurora-lm-core {
+	animation: aurora-lm-squish 1.8s ease-in-out infinite, aurora-lm-flicker 0.9s ease-in-out infinite;
+}
+.aurora-linda-mascot--working .aurora-lm-eyes {
+	transform: translate(-50%, -44%);
+	justify-content: space-around;
+	animation: aurora-lm-scan 1.4s ease-in-out infinite;
+}
+.aurora-linda-mascot--working .aurora-lm-eye {
+	scale: 0.64 0.52;
 }
 
-.aurora-linda-mascot--listening .aurora-lm-level-rings {
-	transform: scale(calc(0.86 + ${LEVEL} * 0.16));
+/* Alerta: tiembla, ojos redondos de aviso y ondas naranjas. */
+.aurora-linda-mascot--alert .aurora-lm-body {
+	animation: aurora-lm-float var(--_lm-breath) ease-in-out infinite, aurora-lm-shake 2.6s ease-in-out infinite;
+}
+.aurora-linda-mascot--alert .aurora-lm-eyes {
+	transform: translate(-50%, -50%) scale(1.08);
+}
+.aurora-linda-mascot--alert .aurora-lm-eye {
+	height: auto;
+	aspect-ratio: 1;
+	border-radius: 50%;
+	box-shadow: 0 0 ${s(0.025)} var(--_lm-light), 0 0 ${s(0.08)} var(--_lm-alert);
+	animation: aurora-lm-alert-pop 1.6s ease-out infinite;
+}
+.aurora-linda-mascot--alert .aurora-lm-pulse {
+	border-color: var(--_lm-alert);
+	animation: aurora-lm-ping 1.6s ease-out infinite;
+}
+.aurora-linda-mascot--alert .aurora-lm-pulse--2 {
+	animation-delay: 0.8s;
 }
-.aurora-linda-mascot--listening .aurora-lm-level-halo {
-	transform: scale(calc(0.92 + ${LEVEL} * 0.2));
+.aurora-linda-mascot--alert .aurora-lm-bubble {
+	box-shadow: inset ${s(-0.03)} ${s(-0.04)} ${s(0.07)} ${mix("core", 14)}, inset 0 0 ${s(0.06)} ${mix("alert", 35)}, 0 0 ${s(0.06)} ${mix("alert", 35)}, 0 0 ${s(0.14)} ${mix("alert-deep", 20)};
 }
 
-.aurora-linda-mascot--talking .aurora-lm-level-body {
-	transform: scale(calc(1 + ${LEVEL} * 0.07));
+/* Cargando: rebota una vez y en el segundo salto se vuelve 9 puntos que giran. */
+.aurora-linda-mascot--loading .aurora-lm-body {
+	transform-origin: 50% 90%;
+	animation: aurora-lm-load-body 6s cubic-bezier(0.45, 0, 0.35, 1) infinite;
 }
-.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--loading .aurora-lm-shadow {
+	animation: aurora-lm-load-shadow 6s ease-in-out infinite;
+}
+.aurora-linda-mascot--loading .aurora-lm-pulse {
+	opacity: 0;
+}
+.aurora-linda-mascot--loading .aurora-lm-load {
+	display: grid;
+	animation: aurora-lm-load-grid 6s ease-in-out infinite;
+}
+.aurora-linda-mascot--loading .aurora-lm-dot {
+	animation-name: aurora-lm-load-dot;
+	animation-duration: 1.2s;
+	animation-timing-function: ease-in-out;
+	animation-iteration-count: infinite;
+}
+.aurora-linda-mascot--loading .aurora-lm-dot--5 {
+	animation: none;
+	opacity: 0.3;
 }
 
-.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);
+/* ── Talla avatar: fuera lo que a 20 px es ruido ─────────────────────────── */
+
+.aurora-linda-mascot--tier-xs::after,
+.aurora-linda-mascot--tier-xs .aurora-lm-shadow {
+	display: none;
 }
 
 /* ── Keyframes ───────────────────────────────────────────────────────────── */
 
-@keyframes aurora-lm-spin {
-	to {
-		transform: rotate(360deg);
-	}
+@keyframes aurora-lm-hue {
+	to { --aurora-lm-a: 360deg; }
 }
-@keyframes aurora-lm-breathe {
-	from {
-		transform: scale(1);
-	}
-	to {
-		transform: scale(1.03);
-	}
+@keyframes aurora-lm-spin {
+	to { transform: rotate(360deg); }
 }
-@keyframes aurora-lm-blink {
-	0%, 42%, 45%, 97.5%, 100% {
-		transform: scaleY(1);
-	}
-	43.5%, 98.8% {
-		transform: scaleY(0.12);
-	}
+@keyframes aurora-lm-float {
+	0%, 100% { transform: translateY(0); }
+	50% { transform: translateY(${s(-0.025)}); }
 }
-@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-squish {
+	0%, 100% { transform: scale(1, 1); }
+	50% { transform: scale(1.035, 0.965) translateY(1.5%); }
 }
-@keyframes aurora-lm-glow {
-	0%, 100% {
-		opacity: calc(var(--lm-halo) * var(--lm-halo-boost, 1));
-	}
-	50% {
-		opacity: 1;
-	}
+@keyframes aurora-lm-shadow {
+	0%, 100% { transform: scale(1); opacity: 1; }
+	50% { transform: scale(0.86); opacity: 0.7; }
 }
-@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-blink {
+	0%, 93%, 100% { transform: scaleY(1); }
+	96% { transform: scaleY(0.08); }
+}
+@keyframes aurora-lm-ping {
+	0% { transform: scale(0.92); opacity: 0.85; }
+	100% { transform: scale(1.55); opacity: 0; }
+}
+@keyframes aurora-lm-flicker {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0.72; }
+}
+@keyframes aurora-lm-tilt {
+	0%, 100% { rotate: -9deg; }
+	50% { rotate: 9deg; }
+}
+@keyframes aurora-lm-think {
+	0%, 100% { translate: -16% -10%; }
+	40% { translate: 16% -20%; }
+	70% { translate: 0 -6%; }
+}
+@keyframes aurora-lm-scan {
+	0%, 100% { translate: -18% 0; }
+	50% { translate: 18% 0; }
+}
+@keyframes aurora-lm-buzz {
+	0%, 100% { translate: 0 0; }
+	25% { translate: 0 ${s(-0.025)}; }
+	75% { translate: 0 ${s(0.015)}; }
+}
+@keyframes aurora-lm-shake {
+	0%, 65%, 100% { rotate: 0deg; }
+	70% { rotate: -12deg; }
+	76% { rotate: 12deg; }
+	82% { rotate: -8deg; }
+	88% { rotate: 5deg; }
+	94% { rotate: -2deg; }
+}
+@keyframes aurora-lm-ready {
+	0%, 100% { translate: 0 0; }
+	50% { translate: 0 ${s(-0.018)}; }
+}
+@keyframes aurora-lm-squint {
+	0%, 22%, 100% { scale: 1 1; }
+	34%, 70% { scale: 1.06 0.38; }
+	82% { scale: 1 1.06; }
+}
+@keyframes aurora-lm-alert-pop {
+	0%, 100% { scale: 1.22 1.22; }
+	12% { scale: 1.38 1.38; }
+	24% { scale: 1.22 1.22; }
+}
+@keyframes aurora-lm-listen-wave {
+	0% { scale: 0.97; opacity: 0; border-width: ${s(0.014)}; }
+	18% { opacity: 0.75; }
+	100% { scale: 1.42; opacity: 0; border-width: ${s(0.002)}; }
+}
+@keyframes aurora-lm-nod {
+	0%, 55%, 100% { translate: 0 0; rotate: 0deg; }
+	8% { translate: 0 ${s(0.06)}; rotate: 3deg; }
+	16% { translate: 0 ${s(-0.018)}; rotate: 0deg; }
+	24% { translate: 0 ${s(0.06)}; rotate: 3deg; }
+	32% { translate: 0 0; rotate: 0deg; }
+}
+@keyframes aurora-lm-nod-eyes {
+	0%, 55%, 100% { translate: 0 0; }
+	8% { translate: 0 26%; }
+	16% { translate: 0 -8%; }
+	24% { translate: 0 26%; }
+	32% { translate: 0 0; }
+}
+@keyframes aurora-lm-jabon {
+	0%, 100% { border-radius: 62% 38% 56% 44% / 44% 60% 40% 56%; }
+	17% { border-radius: 52% 48% 64% 36% / 38% 54% 46% 62%; }
+	33% { border-radius: 40% 60% 50% 50% / 56% 44% 60% 40%; }
+	50% { border-radius: 46% 54% 38% 62% / 62% 50% 50% 38%; }
+	67% { border-radius: 58% 42% 44% 56% / 50% 62% 38% 50%; }
+	83% { border-radius: 66% 34% 52% 48% / 42% 48% 52% 58%; }
 }
-@keyframes aurora-lm-sparkle-fade {
-	0%, 100% {
-		opacity: 0;
-	}
-	35% {
-		opacity: 1;
-	}
+@keyframes aurora-lm-breathe {
+	0%, 100% { scale: 1.05 0.96; }
+	25% { scale: 0.98 1.03; }
+	50% { scale: 0.95 1.06; }
+	75% { scale: 1.03 0.98; }
+}
+@keyframes aurora-lm-drift {
+	from { rotate: 0deg; }
+	to { rotate: 360deg; }
+}
+@keyframes aurora-lm-load-body {
+	0%, 100% { translate: 0 0; scale: 1 1; opacity: 1; filter: blur(0); }
+	5% { translate: 0 ${s(0.04)}; scale: 1.1 0.86; opacity: 1; }
+	13% { translate: 0 ${s(-0.22)}; scale: 0.94 1.06; opacity: 1; }
+	20% { translate: 0 ${s(0.03)}; scale: 1.08 0.9; opacity: 1; }
+	24% { translate: 0 0; scale: 1 1; opacity: 1; }
+	28% { translate: 0 ${s(0.04)}; scale: 1.1 0.86; opacity: 1; }
+	37% { translate: 0 ${s(-0.3)}; scale: 0.92 1.08; opacity: 1; }
+	44% { translate: 0 ${s(-0.05)}; scale: 0.25 0.25; opacity: 0; }
+	80% { translate: 0 ${s(-0.28)}; scale: 0.45 0.45; opacity: 0; filter: blur(${s(0.02)}); }
+	86% { translate: 0 ${s(-0.14)}; scale: 0.92 1.06; opacity: 1; filter: blur(0); }
+	90% { translate: 0 ${s(0.04)}; scale: 1.14 0.84; opacity: 1; }
+	94% { translate: 0 ${s(-0.09)}; scale: 0.95 1.06; opacity: 1; }
+	97% { translate: 0 ${s(0.015)}; scale: 1.05 0.95; opacity: 1; }
+}
+@keyframes aurora-lm-load-shadow {
+	0%, 24%, 100% { opacity: 1; scale: 1; }
+	13% { opacity: 0.5; scale: 0.7; }
+	37% { opacity: 0.4; scale: 0.6; }
+	44%, 84% { opacity: 0.5; scale: 0.5; }
+}
+@keyframes aurora-lm-load-grid {
+	0%, 41% { opacity: 0; scale: 0.3; rotate: -30deg; }
+	49% { opacity: 1; scale: 1.08; rotate: 0deg; }
+	54%, 76% { opacity: 1; scale: 1; rotate: 0deg; filter: blur(0); }
+	90%, 100% { opacity: 0; scale: 0.55; rotate: 12deg; filter: blur(${s(0.02)}); }
+}
+@keyframes aurora-lm-load-dot {
+	0%, 100% { opacity: 0.35; scale: 0.8; }
+	12%, 30% { opacity: 1; scale: 1.08; }
+	48% { opacity: 0.35; scale: 0.8; }
 }
 
 /*
- * 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.
+ * Movimiento reducido: nada se mueve. Cada estado se sigue leyendo por sus colores, sus
+ * ojos y sus accesorios (gafas, auriculares, órbitas); cargando se queda en la cuadrícula.
+ * Las mismas reglas con la preferencia del sistema y con \`motion="reduce"\`.
  */
-${reducedMotionRules(".aurora-linda-mascot")}
+@media (prefers-reduced-motion: reduce) {${reducedMotion(ROOT)}}
+${reducedMotion(`${ROOT}[data-motion="reduce"]`)}
 `;
 
-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`;
-};
+/** Los 9 puntos de cargando, en el orden de la cuadrícula (fila a fila). */
+const LOAD_DOTS = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+/** Las 13 capas de reflejos de la pompa; cada una se dibuja por su posición. */
+const SOAP_LAYERS = Array.from({ length: 13 }, (_, index) => index + 1);
 /**
- * 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.
+ * Las gafas de trabajar: dos ojos de gato y un puente, en la caja de 200 × 90 del lienzo.
+ * Van en línea, dibujadas aquí, para no depender de ningún recurso externo.
  */
-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)));
-};
+const Glasses = () => (jsxRuntime.jsx("svg", { className: "aurora-lm-glasses", "data-part": "glasses", viewBox: "0 0 200 90", "aria-hidden": "true", focusable: "false", children: jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("ellipse", { cx: "51", cy: "45", rx: "38", ry: "34" }), jsxRuntime.jsx("ellipse", { cx: "149", cy: "45", rx: "38", ry: "34" }), jsxRuntime.jsx("path", { d: "M89 40 Q 100 32 111 40" })] }) }));
 /**
- * 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 (jsxRuntime.jsxs("g", { className: className, "data-part": "comet", children: [Array.from({ length: steps }, (_, i) => {
-                const t = (i + 1) / steps;
-                return (jsxRuntime.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));
-            }), jsxRuntime.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" }), jsxRuntime.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).
+ * LindaMascot — el personaje del agente: un núcleo oscuro con dos ojos de luz, un aro
+ * iridiscente y una pompa de jabón alrededor, en HTML + CSS (sin imágenes ni fuentes).
  *
- * 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.
+ * Sus colores son dato: los lee de las variables `--lm-*` que escribe
+ * `applyCharacterPalette` (o de la prop `palette`) y, sin ellas, se pinta como Linda.
+ * Se anima según lo que está haciendo (`state`) y, en la llamada de voz, según el volumen
+ * (`level`). Ver README.
  */
-const LindaMascot = $8WNJc$react.forwardRef(function LindaMascot({ state = "idle", size = "md", level, label, appearance = "auto", motion = "auto", className, style, ...svgProps }, ref) {
+const LindaMascot = $8WNJc$react.forwardRef(function LindaMascot({ state, size = "md", level, label, appearance = "auto", motion = "auto", palette, className, style, ...spanProps }, ref) {
     useInjectedStyle(STYLE_ID, LINDA_MASCOT_CSS);
-    const uid = safeId($8WNJc$react.useId());
+    const visualState = resolveMascotState(state);
     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 paletteVars = $8WNJc$react.useMemo(() => (palette ? characterPaletteToCssVars(palette) : undefined), [palette]);
     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 (jsxRuntime.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: jsxRuntime.jsx("g", { clipPath: `url(#${half === "back" ? id.back : id.front})`, children: jsxRuntime.jsxs("g", { transform: `scale(1 ${ring.squash})`, children: [jsxRuntime.jsx("g", { className: "aurora-lm-spin", style: spinStyle, children: jsxRuntime.jsxs("g", { className: "aurora-lm-spin aurora-lm-boost", style: spinStyle, children: [g.ringGlow === "blur" && (jsxRuntime.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" && (jsxRuntime.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" && (jsxRuntime.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" })), jsxRuntime.jsx("circle", { r: ring.r, fill: "none", stroke: `url(#${id.ring})`, strokeWidth: ring.strokePx, vectorEffect: "non-scaling-stroke" })] }) }), isMain && (jsxRuntime.jsxs("g", { className: "aurora-lm-spin aurora-lm-orbit", style: {
-                                "--lm-spin-duration": "1.6s",
-                            }, children: [jsxRuntime.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 }), jsxRuntime.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`.
-    jsxRuntime.jsxs("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 120 120", width: px, height: px, focusable: "false", className: [
+    return (jsxRuntime.jsxs("span", { ref: ref, className: [
             "aurora-linda-mascot",
-            `aurora-linda-mascot--${state}`,
+            `aurora-linda-mascot--${visualState}`,
             `aurora-linda-mascot--tier-${tier}`,
             className,
         ]
             .filter(Boolean)
-            .join(" "), "data-state": state, "data-tier": tier, "data-appearance": appearance, "data-motion": motion, style: {
+            .join(" "), "data-state": visualState, "data-tier": tier, "data-appearance": appearance, "data-motion": motion, style: {
+            ...paletteVars,
             ...style,
+            "--_lm-size": `${px}px`,
             [LINDA_MASCOT_LEVEL_VAR]: clampLevel(level),
-        }, ...a11y, ...svgProps, children: [jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("radialGradient", { id: id.core, cx: "0.4", cy: "0.34", r: "0.72", children: [jsxRuntime.jsx("stop", { offset: "0", stopColor: LINDA_MASCOT_PALETTE.coreLight }), jsxRuntime.jsx("stop", { offset: "0.6", stopColor: "#15172B" }), jsxRuntime.jsx("stop", { offset: "1", stopColor: LINDA_MASCOT_PALETTE.coreDark })] }), jsxRuntime.jsxs("linearGradient", { id: id.ring, x1: "0", y1: "0", x2: "1", y2: "1", children: [jsxRuntime.jsx("stop", { offset: "0", stopColor: LINDA_MASCOT_PALETTE.pink }), jsxRuntime.jsx("stop", { offset: "0.36", stopColor: LINDA_MASCOT_PALETTE.violet }), jsxRuntime.jsx("stop", { offset: "0.68", stopColor: LINDA_MASCOT_PALETTE.cyan }), jsxRuntime.jsx("stop", { offset: "1", stopColor: LINDA_MASCOT_PALETTE.amber })] }), jsxRuntime.jsxs("linearGradient", { id: id.tail, x1: "0", y1: "0", x2: "1", y2: "1", children: [jsxRuntime.jsx("stop", { offset: "0", stopColor: "#FFC4EC" }), jsxRuntime.jsx("stop", { offset: "0.36", stopColor: "#D4C8FF" }), jsxRuntime.jsx("stop", { offset: "0.68", stopColor: "#B8F1FF" }), jsxRuntime.jsx("stop", { offset: "1", stopColor: "#FFE6BF" })] }), jsxRuntime.jsxs("linearGradient", { id: id.rim, x1: "0.2", y1: "0", x2: "0.5", y2: "1", children: [jsxRuntime.jsx("stop", { offset: "0", stopColor: LINDA_MASCOT_PALETTE.violet }), jsxRuntime.jsx("stop", { offset: "0.42", stopColor: LINDA_MASCOT_PALETTE.cyan }), jsxRuntime.jsx("stop", { offset: "0.74", stopColor: LINDA_MASCOT_PALETTE.pink }), jsxRuntime.jsx("stop", { offset: "1", stopColor: LINDA_MASCOT_PALETTE.amber })] }), jsxRuntime.jsx("clipPath", { id: id.coreClip, children: jsxRuntime.jsx("ellipse", { cx: CX, cy: g.coreCy, rx: g.coreRx, ry: coreRy }) }), jsxRuntime.jsx("clipPath", { id: id.back, children: jsxRuntime.jsx("rect", { x: -clipHalf, y: -clipHalf, width: clipHalf * 2, height: clipHalf }) }), jsxRuntime.jsx("clipPath", { id: id.front, children: jsxRuntime.jsx("rect", { x: -clipHalf, y: 0, width: clipHalf * 2, height: clipHalf }) }), g.halo && (jsxRuntime.jsxs("radialGradient", { id: id.halo, children: [jsxRuntime.jsx("stop", { offset: "0", stopColor: LINDA_MASCOT_PALETTE.violet, stopOpacity: "0.7" }), jsxRuntime.jsx("stop", { offset: tier === "lg" ? "0.48" : "0.42", stopColor: LINDA_MASCOT_PALETTE.pink, stopOpacity: tier === "lg" ? "0.36" : "0.28" }), jsxRuntime.jsx("stop", { offset: tier === "lg" ? "0.78" : "0.7", stopColor: LINDA_MASCOT_PALETTE.cyan, stopOpacity: tier === "lg" ? "0.14" : "0.08" }), jsxRuntime.jsx("stop", { offset: "1", stopColor: LINDA_MASCOT_PALETTE.cyan, stopOpacity: "0" })] })), g.halo && (jsxRuntime.jsxs("radialGradient", { id: id.shadow, children: [jsxRuntime.jsx("stop", { offset: "0", stopColor: LINDA_MASCOT_PALETTE.coreDark, stopOpacity: "0.28" }), jsxRuntime.jsx("stop", { offset: "1", stopColor: LINDA_MASCOT_PALETTE.coreDark, stopOpacity: "0" })] })), g.specular && (jsxRuntime.jsxs("radialGradient", { id: id.specular, children: [jsxRuntime.jsx("stop", { offset: "0", stopColor: "#FFFFFF", stopOpacity: "0.2" }), jsxRuntime.jsx("stop", { offset: "1", stopColor: "#FFFFFF", stopOpacity: "0" })] })), g.blur && (jsxRuntime.jsx("filter", { id: id.eyeGlow, filterUnits: "userSpaceOnUse", x: "-20", y: "-20", width: "160", height: "160", children: jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "2.2" }) })), g.blur && (jsxRuntime.jsx("filter", { id: id.aura, filterUnits: "userSpaceOnUse", x: "-20", y: "-20", width: "160", height: "160", children: jsxRuntime.jsx("feGaussianBlur", { stdDeviation: tier === "lg" ? 5.5 : 4 }) })), g.ringGlow === "blur" && (jsxRuntime.jsx("filter", { id: id.soft, filterUnits: "userSpaceOnUse", x: "-90", y: "-90", width: "180", height: "180", children: jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "2.6" }) })), g.ringGlow === "blur" && (jsxRuntime.jsx("filter", { id: id.veil, filterUnits: "userSpaceOnUse", x: "-100", y: "-100", width: "200", height: "200", children: jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "5" }) }))] }), jsxRuntime.jsx("g", { className: "aurora-lm-level-body", children: jsxRuntime.jsxs("g", { className: "aurora-lm-breathe", children: [g.halo && (jsxRuntime.jsx("g", { className: "aurora-lm-level-halo", children: jsxRuntime.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 && (jsxRuntime.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})` })), jsxRuntime.jsx("g", { className: "aurora-lm-rings aurora-lm-level-rings", children: ringHalves("back") }), tier !== "xs" && (jsxRuntime.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 })), jsxRuntime.jsxs("g", { "data-part": "core", children: [jsxRuntime.jsx("ellipse", { cx: CX, cy: g.coreCy, rx: g.coreRx, ry: coreRy, fill: `url(#${id.core})` }), jsxRuntime.jsx("g", { clipPath: `url(#${id.coreClip})`, children: jsxRuntime.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 && (jsxRuntime.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})` }))] }), jsxRuntime.jsxs("g", { className: "aurora-lm-eyes", "data-part": "eyes", children: [eyes.map((x) => (jsxRuntime.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) => (jsxRuntime.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}`)))] }), jsxRuntime.jsx("g", { className: "aurora-lm-rings aurora-lm-level-rings", children: ringHalves("front") }), state === "ready" && tier !== "xs" && (jsxRuntime.jsx("g", { "data-part": "sparkles", children: SPARKLES.map((s) => (jsxRuntime.jsx("g", { transform: `translate(${s.x} ${s.y})`, children: jsxRuntime.jsx("path", { className: "aurora-lm-sparkle", d: sparklePath(s.s), style: {
-                                        "--lm-sparkle-delay": s.delay,
-                                    } }) }, `${s.x}-${s.y}`))) }))] }) })] }));
+        }, ...a11y, ...spanProps, children: [jsxRuntime.jsx("span", { className: "aurora-lm-pulse", "data-part": "pulse" }), jsxRuntime.jsx("span", { className: "aurora-lm-pulse aurora-lm-pulse--2", "data-part": "pulse" }), tier !== "xs" && (jsxRuntime.jsx("span", { className: "aurora-lm-shadow", "data-part": "shadow" })), jsxRuntime.jsx("span", { className: "aurora-lm-load", "data-part": "load", children: LOAD_DOTS.map((dot) => (jsxRuntime.jsx("span", { className: `aurora-lm-dot aurora-lm-dot--${dot}`, "data-part": "load-dot" }, dot))) }), jsxRuntime.jsx("span", { className: "aurora-lm-level", "data-part": "level", children: jsxRuntime.jsxs("span", { className: "aurora-lm-body", "data-part": "body", children: [jsxRuntime.jsx("span", { className: "aurora-lm-rimglow", children: jsxRuntime.jsx("span", { className: "aurora-lm-rim-glow", "data-part": "rim-glow" }) }), jsxRuntime.jsx("span", { className: "aurora-lm-core", "data-part": "core" }), jsxRuntime.jsx("span", { className: "aurora-lm-rim", "data-part": "rim" }), jsxRuntime.jsx("span", { className: "aurora-lm-rimline", "data-part": "rimline" }), jsxRuntime.jsxs("span", { className: "aurora-lm-orbits", "data-part": "orbits", children: [jsxRuntime.jsx("span", { className: "aurora-lm-orbit", "data-part": "orbit" }), jsxRuntime.jsx("span", { className: "aurora-lm-orbit aurora-lm-orbit--2", "data-part": "orbit" }), jsxRuntime.jsx("span", { className: "aurora-lm-orbit aurora-lm-orbit--3", "data-part": "orbit" })] }), jsxRuntime.jsxs("span", { className: "aurora-lm-eyes", "data-part": "eyes", children: [jsxRuntime.jsx("span", { className: "aurora-lm-eye", "data-part": "eye" }), jsxRuntime.jsx("span", { className: "aurora-lm-eye", "data-part": "eye" }), visualState === "working" && jsxRuntime.jsx(Glasses, {})] }), jsxRuntime.jsx("span", { className: "aurora-lm-bubble", "data-part": "bubble" }), jsxRuntime.jsx("span", { className: "aurora-lm-soap", "data-part": "soap", children: SOAP_LAYERS.map((layer) => (jsxRuntime.jsx("span", {}, layer))) }), visualState === "listening" && tier !== "xs" && (jsxRuntime.jsxs("span", { className: "aurora-lm-headphones", "data-part": "headphones", children: [jsxRuntime.jsx("span", { className: "aurora-lm-headphones-arc" }), jsxRuntime.jsx("span", { className: "aurora-lm-headphones-cup aurora-lm-headphones-cup--left" }), jsxRuntime.jsx("span", { className: "aurora-lm-headphones-cup aurora-lm-headphones-cup--right" })] }))] }) })] }));
 });
 
+/**
+ * El tema del personaje que ve una agencia que no ha elegido ninguno: el que corresponde a
+ * su tema de color de la plataforma. `blue` es el de Bewe y se pinta como Linda; los
+ * otros seis tienen un tema del personaje con el mismo color. Luna no aparece: es un tema
+ * propio de Gurú, no uno de plataforma.
+ */
+const PLATFORM_THEME_TO_CHARACTER_THEME = {
+    blue: "linda",
+    purple: "purple",
+    coral: "coral",
+    green: "green",
+    oceanMint: "ocean",
+    skyBlue: "sky",
+    yellow: "yellow",
+};
+/**
+ * El tema del personaje para un tema de plataforma.
+ *
+ * Acepta el color solo (`purple`) y el nombre con modo que usa el tema de aurora
+ * (`purple-dark`). Todo lo demás —vacío, un hex a medida, `light`/`dark` sueltos (el azul
+ * de siempre) o un nombre desconocido— cae a Linda.
+ */
+const characterThemeForPlatformTheme = (value) => {
+    if (typeof value !== "string") {
+        return DEFAULT_CHARACTER_THEME_ID;
+    }
+    const color = value.trim().replace(/-(light|dark)$/, "");
+    return Object.prototype.hasOwnProperty.call(PLATFORM_THEME_TO_CHARACTER_THEME, color)
+        ? PLATFORM_THEME_TO_CHARACTER_THEME[color]
+        : DEFAULT_CHARACTER_THEME_ID;
+};
+
 const defaultTranslations$8 = {
     previewAlt: "Vista previa de imagen",
     removeButtonAriaLabel: "Eliminar imagen",
@@ -13848,7 +14759,7 @@ size, width = "100%", height = "auto", multiple = false, maxFiles = 1, maxFileSi
                                     ? "opacity-0"
                                     : "opacity-100 transition-opacity", children: jsxRuntime.jsxs("div", { className: `flex flex-col items-center ${size === "micro" ? "gap-0" : size === "small" ? "gap-0.5" : "gap-1"}`, children: [jsxRuntime.jsx(IconComponent, { icon: icon, size: size === "micro" ? "sm" : size === "small" ? "md" : "lg", className: `${size === "micro" ? "text-sm"
                                                 : size === "small" ? "text-base sm:text-lg"
-                                                    : "text-xl sm:text-2xl"} ${disabled ? "text-default-400" : iconColor || "text-primary"}` }), shouldShowText && (jsxRuntime.jsxs("div", { className: `text-center ${size === "micro" ? "px-0"
+                                                    : "text-xl sm:text-2xl"} ${disabled ? "text-default-400" : iconColor || "text-accent-soft-foreground"}` }), shouldShowText && (jsxRuntime.jsxs("div", { className: `text-center ${size === "micro" ? "px-0"
                                                 : size === "small" ? "px-0.5"
                                                     : "px-1"} ${size === "micro" || size === "small"
                                                 ? "upload-file-dropzone-text"
@@ -14523,7 +15434,7 @@ const NavigationLoadingOverlay = ({ isVisible, }) => {
  */
 const DrawerFiltersFooter = ({ onClearFilters, onCancel, onApplyFilters, translations = {}, }) => {
     const { clearFilters = "Limpiar filtro", cancel = "Cancelar", applyFilters = "Aplicar filtro", } = translations;
-    return (jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-10 bg-content1", children: [jsxRuntime.jsx(Button, { variant: "light", color: "primary", onPress: onClearFilters, className: "text-primary", children: clearFilters }), jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(Button, { variant: "bordered", color: "primary", onPress: onCancel, children: cancel }), jsxRuntime.jsx(Button, { variant: "solid", color: "primary", onPress: onApplyFilters, children: applyFilters })] })] }));
+    return (jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-10 bg-content1", children: [jsxRuntime.jsx(Button, { variant: "light", color: "primary", onPress: onClearFilters, className: "text-accent-soft-foreground", children: clearFilters }), jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(Button, { variant: "bordered", color: "primary", onPress: onCancel, children: cancel }), jsxRuntime.jsx(Button, { variant: "solid", color: "primary", onPress: onApplyFilters, children: applyFilters })] })] }));
 };
 
 /**
@@ -15068,7 +15979,7 @@ const MultiSelectFilter = ({ filter, value, onChange, translations, titleId }) =
                                 classNames: {
                                     inputWrapper: "bg-default-100 shadow-none border-0 min-h-9 h-9",
                                     input: "text-sm",
-                                }, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:magnifer-outline", className: "pointer-events-none shrink-0 text-default-400", size: "sm", "aria-hidden": true }), "aria-label": searchPlaceholder }) })), jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto px-1 py-1", children: filteredData.length === 0 ? (jsxRuntime.jsx("p", { className: "px-2 py-3 text-center text-xs text-default-400", children: noResultsText })) : (jsxRuntime.jsx(react.ListBox, { "aria-label": filter.title, selectionMode: "multiple", selectionBehavior: "toggle", selectedKeys: selectedKeys, onSelectionChange: handleListboxSelectionChange, disallowEmptySelection: false, className: "w-full gap-0.5 p-0", children: filteredData.map((item) => (jsxRuntime.jsx(react.ListBoxItem, { id: item.value, textValue: item.label, className: "rounded-[12px] px-2 py-2.5 text-sm font-normal text-default-600 data-[hovered=true]:bg-default-100 data-[selectable=true]:focus:bg-default-100 data-[selected=true]:bg-primary-50/80 data-[selected=true]:font-medium data-[selected=true]:text-primary", children: item.label }, item.value))) })) })] }) })] }));
+                                }, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:magnifer-outline", className: "pointer-events-none shrink-0 text-default-400", size: "sm", "aria-hidden": true }), "aria-label": searchPlaceholder }) })), jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto px-1 py-1", children: filteredData.length === 0 ? (jsxRuntime.jsx("p", { className: "px-2 py-3 text-center text-xs text-default-400", children: noResultsText })) : (jsxRuntime.jsx(react.ListBox, { "aria-label": filter.title, selectionMode: "multiple", selectionBehavior: "toggle", selectedKeys: selectedKeys, onSelectionChange: handleListboxSelectionChange, disallowEmptySelection: false, className: "w-full gap-0.5 p-0", children: filteredData.map((item) => (jsxRuntime.jsx(react.ListBoxItem, { id: item.value, textValue: item.label, className: "rounded-[12px] px-2 py-2.5 text-sm font-normal text-default-600 data-[hovered=true]:bg-default-100 data-[selectable=true]:focus:bg-default-100 data-[selected=true]:bg-primary-50/80 data-[selected=true]:font-medium data-[selected=true]:text-accent-soft-foreground", children: item.label }, item.value))) })) })] }) })] }));
 };
 // =========================================================================
 // RANGE FILTER
@@ -17772,7 +18683,7 @@ const RADIUS_CLASS = {
  */
 const FLAT_BASE = {
     default: "bg-default-100 text-default-foreground dark:bg-default-50/50",
-    primary: "bg-primary-50 text-primary-600 dark:bg-primary-50/50",
+    primary: "bg-primary-50 text-accent-soft-foreground dark:bg-primary-50/50",
     secondary: "bg-secondary-50 text-secondary-600 dark:bg-secondary-50/50",
     success: "bg-success-50 text-success-700 dark:bg-success-50/50 dark:text-success",
     warning: "bg-warning-50 text-warning-700 dark:bg-warning-50/50 dark:text-warning",
@@ -17790,7 +18701,7 @@ const FADED_BORDER = {
 /** `bordered`: `colorVariants.bordered.<color>` (+ `border-small`, sin fondo). */
 const BORDERED_BASE = {
     default: "bg-transparent border-default text-foreground",
-    primary: "bg-transparent border-primary text-primary",
+    primary: "bg-transparent border-primary text-accent-soft-foreground",
     secondary: "bg-transparent border-secondary text-secondary",
     success: "bg-transparent border-success text-success",
     warning: "bg-transparent border-warning text-warning",
@@ -19126,6 +20037,7 @@ const THEME_COLOR_HEX_MAP = {
     blue: "#006fee",
     purple: "#7828c8",
     yellow: "#ffd505",
+    amberYellow: "#ffbf00",
     green: "#16c964",
     coral: "#ff4f4f",
     skyBlue: "#60A5FA",
@@ -19149,6 +20061,15 @@ function colorDistance(a, b) {
     return (a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2 + (a[2] - b[2]) ** 2;
 }
 const THEME_COLORS = Object.keys(THEME_COLOR_HEX_MAP);
+/**
+ * Packs que solo se resuelven por coincidencia exacta de su hex, nunca como «el más
+ * cercano». `amberYellow` es una variante oscura de `yellow` pensada para una marca
+ * concreta: si entrara en la búsqueda por cercanía, los hex de marca ámbar/oliva de
+ * cualquier negocio cambiarían de pack (y con él su secundario y sus estados) sin
+ * haberlo elegido nadie.
+ */
+const EXACT_MATCH_ONLY = new Set(["amberYellow"]);
+const NEAREST_CANDIDATES = THEME_COLORS.filter((themeColor) => !EXACT_MATCH_ONLY.has(themeColor));
 function isHexColor(value) {
     return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value);
 }
@@ -19165,7 +20086,7 @@ function hexToThemeColor(hex) {
     const targetRgb = hexToRgb$1(hex);
     let closest = "blue";
     let minDistance = Number.POSITIVE_INFINITY;
-    for (const themeColor of THEME_COLORS) {
+    for (const themeColor of NEAREST_CANDIDATES) {
         const themeRgb = hexToRgb$1(THEME_COLOR_HEX_MAP[themeColor]);
         const dist = colorDistance(targetRgb, themeRgb);
         if (dist < minDistance) {
@@ -19223,7 +20144,7 @@ function hslToCssValue(h, s, l) {
  * Pasa un hex (`#rgb` o `#rrggbb`, en cualquier caja) a canales HSL.
  *
  * Se expone porque el hex es una de las dos formas en las que llega el `primary` del
- * tema —los 14 packs lo emiten así en `theme-tokens.generated.css`— y `linda-tones.ts`
+ * tema —los 16 packs lo emiten así en `theme-tokens.generated.css`— y `linda-tones.ts`
  * necesita esa misma conversión para derivar los tonos del aura. Antes de exportarla ya
  * había dos copias privadas de `hexToRgb` en esta carpeta; no hacía falta una tercera.
  */
@@ -19236,6 +20157,93 @@ function getContrastForeground(hex) {
     const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
     return luminance > 0.5 ? "0 0% 0%" : "0 0% 100%";
 }
+/** Contraste mínimo (WCAG) del texto de marca sobre el fondo suave de la propia marca. */
+const ACCENT_SOFT_FOREGROUND_MIN_CONTRAST = 3;
+/**
+ * Opacidad del fondo tintado más oscuro sobre el que se pinta el token en modo claro: el
+ * `flatBg` del Chip (accent al 20 % sobre blanco). El `--accent-soft` de HeroUI v3 en claro es
+ * más claro (15 %), así que lo que llega aquí llega también en el Button soft.
+ */
+const SOFT_TINT_ALPHA = 0.2;
+/**
+ * Proporción de `--accent` en la mezcla que trae HeroUI v3 en modo claro para
+ * `--accent-soft-foreground`: `color-mix(in oklab, var(--accent) 70%, var(--foreground) 30%)`
+ * (bloque `:root, .light, .default` de `@heroui/styles/dist/themes/default/variables.css`).
+ */
+const V3_LIGHT_ACCENT_SOFT_FOREGROUND_SHARE = 70;
+/** `--foreground` de HeroUI v3 en modo claro (`--eclipse`, oklch(0.2103 0.0059 285.89)). */
+const LIGHT_FOREGROUND_HEX = "#18181b";
+const toLinear = (c) => {
+    const v = c / 255;
+    return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+};
+const fromLinear = (c) => {
+    const v = c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
+    return Math.round(Math.min(Math.max(v, 0), 1) * 255);
+};
+function relativeLuminance([r, g, b]) {
+    return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+}
+function contrastRatio(a, b) {
+    const la = relativeLuminance(a);
+    const lb = relativeLuminance(b);
+    return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+function rgbToOklab([r, g, b]) {
+    const [lr, lg, lb] = [toLinear(r), toLinear(g), toLinear(b)];
+    const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+    const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+    const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+    return [
+        0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+        1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+        0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
+    ];
+}
+function oklabToRgb([L, a, b]) {
+    const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+    const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+    const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+    return [
+        fromLinear(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
+        fromLinear(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
+        fromLinear(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s),
+    ];
+}
+/** `color-mix(in oklab, accent share, foreground resto)` calculado en sRGB. */
+function mixOklab(accent, foreground, share) {
+    const A = rgbToOklab(accent);
+    const F = rgbToOklab(foreground);
+    return oklabToRgb([0, 1, 2].map((i) => A[i] * share + F[i] * (1 - share)));
+}
+/**
+ * Proporción de `--accent` (0–100) con la que `--accent-soft-foreground` alcanza
+ * `minContrast` sobre su fondo tintado (el accent al 20 % sobre blanco), en modo claro.
+ *
+ * Devuelve `null` cuando la mezcla 70/30 que ya trae HeroUI v3 llega al mínimo: en esos
+ * temas no se pisa nada. Si no llega, la primera proporción que sí lo hace, bajando de 1 en 1
+ * (cuanto menos accent, más se acerca al color de texto). En el límite, 0: el propio
+ * `--foreground`.
+ */
+function getAccentSoftForegroundShare(accentHex, minContrast = ACCENT_SOFT_FOREGROUND_MIN_CONTRAST) {
+    const accent = hexToRgb(accentHex);
+    const foreground = hexToRgb(LIGHT_FOREGROUND_HEX);
+    const tint = accent.map((c) => c * SOFT_TINT_ALPHA + 255 * (1 - SOFT_TINT_ALPHA));
+    const reaches = (share) => contrastRatio(mixOklab(accent, foreground, share), tint) >= minContrast;
+    if (reaches(V3_LIGHT_ACCENT_SOFT_FOREGROUND_SHARE / 100)) {
+        return null;
+    }
+    for (let share = V3_LIGHT_ACCENT_SOFT_FOREGROUND_SHARE - 1; share > 0; share--) {
+        if (reaches(share / 100)) {
+            return share;
+        }
+    }
+    return 0;
+}
+/** Valor CSS de `--accent-soft-foreground` para una proporción de accent dada. */
+function accentSoftForegroundMix(share) {
+    return `color-mix(in oklab, var(--accent) ${share}%, var(--foreground))`;
+}
 const LIGHT_SHADE_LIGHTNESS = {
     "50": 95,
     "100": 90,
@@ -19284,6 +20292,8 @@ function generateThemeColorScale(hex, mode) {
     return { shades, foreground, defaultValue };
 }
 
+/** La mezcla que trae HeroUI v3 para `--accent-soft-foreground` en modo claro. */
+const V3_ACCENT_SOFT_FOREGROUND = "color-mix(in oklab, var(--accent) 70%, var(--foreground) 30%)";
 const PRIMARY_SHADES = [
     "50",
     "100",
@@ -19303,6 +20313,7 @@ const CUSTOM_PROPERTIES = [
     "--color-focus",
     "--accent",
     "--accent-foreground",
+    "--accent-soft-foreground",
 ];
 /**
  * `generateThemeColorScale` devuelve canales HSL sueltos (`"212 100% 46.67%"`), que es lo que
@@ -19332,6 +20343,16 @@ function applyCustomPrimaryColor(hex, mode) {
     style.setProperty("--color-focus", primary);
     style.setProperty("--accent", primary);
     style.setProperty("--accent-foreground", primaryForeground);
+    // Mismo cálculo que los packs (generate-theme-tokens.mjs). Se escribe SIEMPRE en línea,
+    // también cuando basta la mezcla de v3: la clase del pack más cercano puede traer su propia
+    // proporción, calculada para SU color, y aquí manda el de la marca.
+    // En oscuro no se pisa: vale la mezcla propia del tema oscuro de v3.
+    if (mode === "dark") {
+        style.removeProperty("--accent-soft-foreground");
+        return;
+    }
+    const share = getAccentSoftForegroundShare(hex);
+    style.setProperty("--accent-soft-foreground", share === null ? V3_ACCENT_SOFT_FOREGROUND : accentSoftForegroundMix(share));
 }
 function removeCustomPrimaryColor() {
     const style = document.documentElement.style;
@@ -19837,6 +20858,7 @@ Object.defineProperty(exports, "loadIcons", {
     enumerable: true,
     get: function () { return react$1.loadIcons; }
 });
+exports.ACCENT_SOFT_FOREGROUND_MIN_CONTRAST = ACCENT_SOFT_FOREGROUND_MIN_CONTRAST;
 exports.ALL_THEMES = ALL_THEMES;
 exports.AURORA_THEME_FAMILIES = AURORA_THEME_FAMILIES;
 exports.AURORA_THEME_REGISTRY = AURORA_THEME_REGISTRY;
@@ -19856,6 +20878,11 @@ exports.BetaBadge = BetaBadge;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.BreadcrumbsComponent = BreadcrumbsComponent;
 exports.Button = Button;
+exports.CHARACTER_CSS_VARS = CHARACTER_CSS_VARS;
+exports.CHARACTER_FIXED_COLORS = CHARACTER_FIXED_COLORS;
+exports.CHARACTER_THEMES = CHARACTER_THEMES;
+exports.CHARACTER_THEME_COLOR_KEYS = CHARACTER_THEME_COLOR_KEYS;
+exports.CHARACTER_THEME_IDS = CHARACTER_THEME_IDS;
 exports.CONTAINER_ATTRIBUTE = CONTAINER_ATTRIBUTE;
 exports.Card = Card;
 exports.CardBody = CardBody;
@@ -19865,6 +20892,8 @@ exports.ColorPicker = ColorPicker;
 exports.ColorSelector = ColorSelector;
 exports.ContentCarousel = ContentCarousel;
 exports.Currency = Currency;
+exports.DEFAULT_CHARACTER_PALETTE = DEFAULT_CHARACTER_PALETTE;
+exports.DEFAULT_CHARACTER_THEME_ID = DEFAULT_CHARACTER_THEME_ID;
 exports.DEFAULT_DONUT_COLORS = DEFAULT_DONUT_COLORS;
 exports.DEFAULT_PREDEFINED_COLORS = DEFAULT_PREDEFINED_COLORS;
 exports.DEFAULT_RANKED_BAR_COLORS = DEFAULT_RANKED_BAR_COLORS;
@@ -19900,6 +20929,7 @@ exports.KanbanCard = KanbanCard;
 exports.KanbanColumn = KanbanColumn;
 exports.LINDA_MASCOT_LEVEL_VAR = LINDA_MASCOT_LEVEL_VAR;
 exports.LINDA_MASCOT_STATES = LINDA_MASCOT_STATES;
+exports.LINDA_MASCOT_STATE_ALIASES = LINDA_MASCOT_STATE_ALIASES;
 exports.LINDA_TONE_PROPERTIES = LINDA_TONE_PROPERTIES;
 exports.LindaIcon = LindaIcon;
 exports.LindaMascot = LindaMascot;
@@ -19915,6 +20945,7 @@ exports.NavigationLoadingContext = NavigationLoadingContext;
 exports.NavigationLoadingOverlay = NavigationLoadingOverlay;
 exports.NavigationLoadingProvider = NavigationLoadingProvider;
 exports.P = P;
+exports.PLATFORM_THEME_TO_CHARACTER_THEME = PLATFORM_THEME_TO_CHARACTER_THEME;
 exports.Pagination = Pagination;
 exports.Phone = Phone;
 exports.Progress = Progress;
@@ -19953,14 +20984,20 @@ exports.ToastContext = ToastContext;
 exports.Tooltip = Tooltip;
 exports.TwoColumnLayoutAgent = TwoColumnLayoutAgent;
 exports.UploadFile = UploadFile;
+exports.V3_LIGHT_ACCENT_SOFT_FOREGROUND_SHARE = V3_LIGHT_ACCENT_SOFT_FOREGROUND_SHARE;
 exports.VerticalSteps = VerticalSteps;
 exports.ViolinPlot = ViolinPlot;
 exports.WhatsAppPreview = WhatsAppPreview;
 exports.Wizard = Wizard;
 exports.WizardNavigation = WizardNavigation;
 exports.WizardSidebar = WizardSidebar;
+exports.accentSoftForegroundMix = accentSoftForegroundMix;
+exports.applyCharacterPalette = applyCharacterPalette;
 exports.applyCustomPrimaryColor = applyCustomPrimaryColor;
 exports.applyLindaTones = applyLindaTones;
+exports.characterPaletteFromTheme = characterPaletteFromTheme;
+exports.characterPaletteToCssVars = characterPaletteToCssVars;
+exports.characterThemeForPlatformTheme = characterThemeForPlatformTheme;
 exports.cn = cn;
 exports.computeBars = computeBars;
 exports.computeMax = computeMax;
@@ -19977,6 +21014,7 @@ exports.forceLightOnlyThemeBeforeReact = forceLightOnlyThemeBeforeReact;
 exports.formatAuroraThemeTooltip = formatAuroraThemeTooltip;
 exports.formatDonutPercent = formatDonutPercent;
 exports.generateThemeColorScale = generateThemeColorScale;
+exports.getAccentSoftForegroundShare = getAccentSoftForegroundShare;
 exports.getContrastForeground = getContrastForeground;
 exports.getRegisteredThemeColorBases = getRegisteredThemeColorBases;
 exports.getSelectedKeyFromPath = getSelectedKeyFromPath;
@@ -19984,6 +21022,7 @@ exports.hexToHsl = hexToHsl;
 exports.hexToThemeColor = hexToThemeColor;
 exports.hslToCssValue = hslToCssValue;
 exports.isAuroraFullThemeId = isAuroraFullThemeId;
+exports.isCompleteCharacterPalette = isCompleteCharacterPalette;
 exports.isDismissControl = isDismissControl;
 exports.isDonutEmpty = isDonutEmpty;
 exports.isExactThemeColor = isExactThemeColor;
@@ -19991,9 +21030,13 @@ exports.isGroupState = isGroupState;
 exports.isHexColor = isHexColor;
 exports.isRankedBarListEmpty = isRankedBarListEmpty;
 exports.isSegmentationGroup = isSegmentationGroup;
+exports.normalizeCharacterPalette = normalizeCharacterPalette;
+exports.normalizeCharacterThemeColors = normalizeCharacterThemeColors;
 exports.parseColorToHsl = parseColorToHsl;
+exports.removeCharacterPalette = removeCharacterPalette;
 exports.removeCustomPrimaryColor = removeCustomPrimaryColor;
 exports.removeLindaTones = removeLindaTones;
+exports.resolveMascotState = resolveMascotState;
 exports.shouldClosePopoverOnInteractOutside = shouldClosePopoverOnInteractOutside;
 exports.sizeMap = sizeMap;
 exports.themeColors = themeColors;