@beweco/aurora-ui 1.0.3 → 1.0.4

package/dist/index.cjs.js

@@ -6949,14 +6949,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 +7348,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 +7373,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--listening .aurora-lm-level-halo {
-	transform: scale(calc(0.92 + ${LEVEL} * 0.2));
+.aurora-linda-mascot--alert .aurora-lm-pulse--2 {
+	animation-delay: 0.8s;
+}
+.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--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--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-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-hue {
+	to { --aurora-lm-a: 360deg; }
+}
 @keyframes aurora-lm-spin {
-	to {
-		transform: rotate(360deg);
-	}
+	to { transform: rotate(360deg); }
 }
-@keyframes aurora-lm-breathe {
-	from {
-		transform: scale(1);
-	}
-	to {
-		transform: scale(1.03);
-	}
+@keyframes aurora-lm-float {
+	0%, 100% { transform: translateY(0); }
+	50% { transform: translateY(${s(-0.025)}); }
 }
-@keyframes aurora-lm-blink {
-	0%, 42%, 45%, 97.5%, 100% {
-		transform: scaleY(1);
-	}
-	43.5%, 98.8% {
-		transform: scaleY(0.12);
-	}
+@keyframes aurora-lm-squish {
+	0%, 100% { transform: scale(1, 1); }
+	50% { transform: scale(1.035, 0.965) translateY(1.5%); }
 }
-@keyframes aurora-lm-pulse {
-	0%, 100% {
-		transform: scale(1);
-		opacity: calc(var(--lm-halo) * var(--lm-halo-boost, 1));
-	}
-	50% {
-		transform: scale(1.12);
-		opacity: 1;
-	}
-}
-@keyframes aurora-lm-glow {
-	0%, 100% {
-		opacity: calc(var(--lm-halo) * var(--lm-halo-boost, 1));
-	}
-	50% {
-		opacity: 1;
-	}
+@keyframes aurora-lm-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",
@@ -19856,6 +20697,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 +20711,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 +20748,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 +20764,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;
@@ -19959,8 +20809,12 @@ exports.WhatsAppPreview = WhatsAppPreview;
 exports.Wizard = Wizard;
 exports.WizardNavigation = WizardNavigation;
 exports.WizardSidebar = WizardSidebar;
+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;
@@ -19984,6 +20838,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 +20846,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;