@stackcraftmx/calcita 0.28.0 → 0.30.1

package/dist/theme/createToolkitTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"createToolkitTheme.js","sources":["../../src/theme/createToolkitTheme.js"],"sourcesContent":["// El tema del framework: el estilo de Stackcraft (del tema de walk-ot) con claro y oscuro. Es opcional: ToolkitProvider\n// funciona con cualquier tema de MUI.\n//\n//   const theme = createToolkitTheme();                                  // los colores de Stackcraft\n//   const theme = createToolkitTheme({glass: true});                     // con vidrio líquido en lo que flota\n//   const theme = createToolkitTheme({glass: {opacity: 0.7}});           // con vidrio más transparente (por omisión 0.8)\n//   const theme = createToolkitTheme({glass: {surfaces: true}});         // también las tarjetas del contenido (con advertencia)\n//   const theme = createToolkitTheme({glass: true, bar: TOP_BAR.band});  // la barra de arriba en franja (por omisión, cápsulas)\n//   const theme = createToolkitTheme({colorSchemes: {light: {palette: {primary: {main: '#0B5FFF'}}}, dark: {...}}});\n//\n// Lo que trae, con su porqué:\n//   - variables CSS y los dos modos: ColorSchemeToggle cambia de modo sin volver a pintar, y las gráficas leen sus colores\n//     del tema (theme.vars): con variables cambian solas al cambiar de modo, sin ellas se quedarían con las del arranque.\n//   - colorSchemeSelector 'class': el modo lo elige la persona con el botón (con 'media' solo mandaría el sistema\n//     operativo y el botón no haría nada). Con Next.js va con <InitColorSchemeScript attribute=\"class\" />.\n//   - letra base de 16 px: con menos, el iPhone hace zoom al entrar a un campo. body1 16 px y body2 15 px en el teléfono;\n//     responsiveFontSizes los ajusta por ancho de pantalla.\n//   - transiciones de 220 ms, iguales al abrir y al cerrar: más ágiles que las de Material (300 ms) y sin el desfase de\n//     30 ms entre lo que solo conoce una transición (la barra) y lo que conoce dos (el menú lateral).\n//   - esquinas de 8 px y los ajustes de componentes de toolkitComponents().\n//   - glass: el vidrio líquido en lo que flota y en los controles (glassSurface.js explica dónde y por qué). Queda anotado\n//     en theme.toolkit.glass para que los componentes del framework que flotan (el marco, los avisos) lo sepan sin otra prop.\n//   - components: los ajustes propios del proyecto se SUMAN a los del framework (mergeComponents), no los borran.\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {createTheme, responsiveFontSizes} from '@mui/material/styles';\n\nimport {glassComponents} from '@/theme/components/glassComponents.js';\nimport {GLASS_OPACITY} from '@/theme/glassSurface.js';\nimport {mergeComponents} from '@/theme/mergeComponents.js';\nimport {stackcraftDarkPalette, stackcraftLightPalette} from '@/theme/stackcraftPalette.js';\nimport {trackingOf} from '@/theme/appleTracking.js';\nimport {toolkitComponents} from '@/theme/toolkitComponents.js';\nimport {minimalComponents, minimalTonesOf} from '@/theme/components/minimalComponents.js';\nimport {FIELD_TONES} from '@/theme/glassSurface.js';\nimport {createLogger} from '@/observability/logger.js';\n\nconst log = createLogger('theme');\n// el aviso de las tarjetas de vidrio sale una vez por pestaña: el tema se vuelve a armar cada vez que cambia algo (un\n// configurador de tema lo arma en cada clic) y la consola se llenaba del mismo aviso\nlet hasWarnedAboutGlassSurfaces = false;\n\nconst SYSTEM_FONT_FAMILY = 'system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif';\nconst CORNER_RADIUS_PIXELS = 8;\n// cuántos niveles de sombra trae el tema de MUI (del 0 al 24)\nconst SHADOW_LEVELS = 25;\n\n/** El estilo del tema: el de Stackcraft (con vidrio o sin él) o el minimalista, plano y tonal. */\nexport const THEME_LOOK = Object.freeze({standard: 'standard', minimal: 'minimal'});\n\n/**\n * La barra de arriba, con vidrio y con el minimalista: por omisión como las ventanas de macOS Tahoe, sin franja (el nombre\n * y los botones en cápsulas por grupo; lo eligió el autor al verlas), o la franja de lado a lado. Con vidrio las cápsulas\n * son de vidrio y el contenido pasa por debajo desenfocado; con el minimalista son bloques del tono de las tarjetas sobre\n * el color del fondo (AppLayout). El estilo de Stackcraft sin vidrio se queda con su barra de siempre.\n */\nexport const TOP_BAR = Object.freeze({band: 'band', capsules: 'capsules'});\n\n/**\n * Lo que pidió el proyecto del vidrio, ya revisado: false (sin vidrio) o {opacity, surfaces}.\n *\n * @param {boolean|{opacity?: number, surfaces?: boolean}} glass\n * @returns {false|{opacity: number, surfaces: boolean}}\n */\nfunction glassSettingsOf(glass) {\n    if (!glass) {\n        return false;\n    }\n    const requested = glass === true ? {} : glass;\n    const opacity = requested.opacity ?? GLASS_OPACITY;\n    // un 80 en lugar de 0.8 daría un color inválido y la barra saldría sin fondo, sin ningún aviso\n    if (typeof opacity !== 'number' || opacity < 0 || opacity > 1) {\n        throw new RangeError(`createToolkitTheme: glass.opacity va de 0 a 1 (llegó ${opacity}).`);\n    }\n    const surfaces = Boolean(requested.surfaces);\n    // se permite, pero con advertencia: la guía de Apple pide el contenido sin vidrio y cada tarjeta desenfoca lo de atrás\n    if (surfaces && !hasWarnedAboutGlassSurfaces) {\n        hasWarnedAboutGlassSurfaces = true;\n        log.warn('glass.surfaces pone vidrio también en el contenido (tarjetas, avisos, tabla): pesa más en equipos modestos '\n            + 'y la guía de Apple no lo recomienda («no use Liquid Glass en la capa del contenido»). Úselo en una portada o una '\n            + 'demostración, no en pantallas de trabajo.');\n    }\n    return {opacity, surfaces};\n}\n\n/**\n * @param {object} [options]\n * @param {{light?: object|boolean, dark?: object|boolean}} [options.colorSchemes] los colores de cada modo; por omisión los de\n *     Stackcraft; true: los de MUI tal cual\n * @param {'class'|'data'|'media'|string} [options.colorSchemeSelector] cómo se elige el modo; por omisión 'class'\n * @param {string} [options.fontFamily] por omisión la letra del sistema\n * @param {boolean|{opacity?: number, surfaces?: boolean}} [options.glass] vidrio líquido en lo que flota y en los\n *     controles; por omisión no. Con {opacity} se elige qué tan opaco (0 a 1; por omisión GLASS_OPACITY, 0.6) y con\n *     {surfaces: true} también las tarjetas del contenido (por omisión sólidas, como pide la guía; avisa en consola)\n * @param {'standard'|'minimal'} [options.look] el estilo (THEME_LOOK): el de Stackcraft (por omisión) o el minimalista,\n *     plano y tonal (sin bordes ni sombras: las superficies se separan por su tono; sin vidrio aunque se pida)\n * @param {'capsules'|'band'} [options.bar] la barra de arriba con vidrio o con el minimalista (TOP_BAR): por omisión en\n *     cápsulas; 'band' la franja de lado a lado\n * @param {{light?: {default?: string, paper?: string, fill?: string, floating?: string}, dark?: {default?: string, paper?: string, fill?: string, floating?: string}}} [options.minimalTones]\n *     los tonos del minimalista con los colores de la marca, por modo: default (el fondo de la página), paper (las tarjetas,\n *     un escalón arriba), fill (el relleno de campos, grupos y botones sin color) y floating (la barra de pestañas del\n *     teléfono y lo que flota). Lo que no se pase se queda con los grises de Apple (MINIMAL_TONES). OJO: con el minimalista\n *     el fondo de la página sale de aquí y no de la paleta (sin minimalTones, los grises de Apple aunque la paleta traiga\n *     su background)\n * @param {{radius?: number, light?: {fill?: string, hoverFill?: string, border?: string, hoverBorder?: string}, dark?: {fill?: string, hoverFill?: string, border?: string, hoverBorder?: string}}} [options.fields]\n *     cómo se ven los campos de captura (con vidrio, con el minimalista y dentro de FormSection), por modo: fill (el\n *     relleno), hoverFill (con el cursor encima), border y hoverBorder (la orilla); y radius (las esquinas, en px). Lo que no\n *     se pase se queda como el estilo lo trae (FIELD_TONES: el gris de Apple; con el minimalista, su relleno). Van en la\n *     paleta de cada modo (palette.field), así que también se pueden escribir en colorSchemes y cambian solos con el modo.\n *     Ejemplo, campos blancos con borde en claro: {light: {fill: '#FFFFFF', hoverFill: '#FFFFFF', border: '#C4CDD5'}}\n * @param {object} [options.components] ajustes propios de componentes (se suman; en el mismo estilo ganan los del proyecto)\n * @param {object} [options.overrides] cualquier otra cosa de createTheme (breakpoints, spacing…)\n * @returns {object} el tema de MUI\n */\nexport function createToolkitTheme({\n    colorSchemes = {light: {palette: stackcraftLightPalette}, dark: {palette: stackcraftDarkPalette}},\n    colorSchemeSelector = 'class',\n    fontFamily = SYSTEM_FONT_FAMILY,\n    glass = false,\n    look = THEME_LOOK.standard,\n    bar = TOP_BAR.capsules,\n    minimalTones = {},\n    fields = {},\n    components = {},\n    overrides = {},\n} = {}) {\n    // un nombre mal escrito dejaría la franja sin avisar: mejor que truene al armar el tema\n    if (!Object.values(TOP_BAR).includes(bar)) {\n        throw new RangeError(`createToolkitTheme: bar es '${TOP_BAR.capsules}' o '${TOP_BAR.band}' (llegó ${bar}).`);\n    }\n    const isMinimal = look === THEME_LOOK.minimal;\n    // el minimalista es sólido: sin vidrio aunque se pida\n    const glassSettings = isMinimal ? null : glassSettingsOf(glass);\n    const frameworkComponents = isMinimal\n        ? mergeComponents(toolkitComponents(), minimalComponents())\n        : (glassSettings ? mergeComponents(toolkitComponents(), glassComponents({surfaces: glassSettings.surfaces})) : toolkitComponents());\n    // el minimalista separa las superficies por su tono: el fondo de la página y la tarjeta un escalón arriba (los grises de\n    // Apple o los tonos de la marca que pasó el proyecto)\n    const tones = isMinimal ? minimalTonesOf(minimalTones) : null;\n    // los campos de cada modo: lo del estilo (el gris de Apple o, con el minimalista, su relleno), encima lo de `fields` y\n    // encima lo que el proyecto escribió en su paleta (palette.field)\n    const fieldTonesOf = (mode, scheme) => {\n        const lookTones = tones?.[mode]\n            ? {...FIELD_TONES[mode], fill: tones[mode].fill, hoverFill: tones[mode].fill}\n            : FIELD_TONES[mode] ?? FIELD_TONES.light;\n        return {...lookTones, ...fields[mode], ...scheme?.palette?.field};\n    };\n    const schemes = Object.fromEntries(Object.entries(colorSchemes).map(([mode, scheme]) => [mode, {\n        ...scheme,\n        palette: {\n            ...scheme?.palette,\n            ...(isMinimal && {background: tones[mode] ? {default: tones[mode].default, paper: tones[mode].paper} : scheme?.palette?.background}),\n            field: fieldTonesOf(mode, scheme),\n        },\n    }]));\n    const baseTheme = createTheme({\n        cssVariables: {colorSchemeSelector},\n        colorSchemes: schemes,\n        // el espaciado entre letras (tracking) de la tabla de SF Pro de Apple para cada tamaño (appleTracking.js). MUI\n        // trae uno POSITIVO pensado para Roboto (+0.15 px en el texto, +0.4 px en botones y textos chicos) y con la letra del\n        // sistema se veía la letra separada (lo reportaron: «kerning»); Apple, de 13 a 22 pt, lo cierra\n        typography: {\n            fontFamily,\n            h1: {letterSpacing: trackingOf(96)},\n            h2: {letterSpacing: trackingOf(60)},\n            h3: {letterSpacing: trackingOf(48)},\n            h4: {letterSpacing: trackingOf(34)},\n            h5: {fontWeight: 600, letterSpacing: trackingOf(24)},\n            h6: {fontWeight: 600, letterSpacing: trackingOf(20)},\n            subtitle1: {letterSpacing: trackingOf(16)},\n            subtitle2: {letterSpacing: trackingOf(14)},\n            body1: {fontSize: '1rem', letterSpacing: trackingOf(16)},\n            body2: {fontSize: '0.9375rem', letterSpacing: trackingOf(15)},\n            button: {fontSize: '0.9375rem', textTransform: 'none', fontWeight: 500, letterSpacing: trackingOf(15)},\n            caption: {letterSpacing: trackingOf(12)},\n        },\n        transitions: {\n            duration: {\n                shortest: 150,\n                shorter: 180,\n                short: 200,\n                standard: 220,\n                complex: 280,\n                enteringScreen: 220,\n                leavingScreen: 220,\n            },\n        },\n        shape: {borderRadius: CORNER_RADIUS_PIXELS},\n        components: mergeComponents(frameworkComponents, components),\n        // sin sombras en el minimalista: lo plano es la idea\n        ...(isMinimal && {shadows: Array(SHADOW_LEVELS).fill('none')}),\n        // minimalTones: los tonos con que se pintan los rellenos y lo que flota (minimalComponents los lee del tema)\n        // fields: las esquinas de los campos (sus tonos van en la paleta: palette.field)\n        toolkit: {glass: glassSettings, look, bar, minimalTones: tones, fields: {radius: fields.radius}},\n        ...overrides,\n    });\n    return responsiveFontSizes(baseTheme);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"createToolkitTheme.js","sources":["../../src/theme/createToolkitTheme.js"],"sourcesContent":["// El tema del framework: el estilo de Stackcraft (del tema de walk-ot) con claro y oscuro. Es opcional: ToolkitProvider\n// funciona con cualquier tema de MUI.\n//\n//   const theme = createToolkitTheme();                                  // los colores de Stackcraft\n//   const theme = createToolkitTheme({glass: true});                     // con vidrio líquido en lo que flota\n//   const theme = createToolkitTheme({glass: {opacity: 0.7}});           // con vidrio más transparente (por omisión 0.8)\n//   const theme = createToolkitTheme({glass: {surfaces: true}});         // también las tarjetas del contenido (con advertencia)\n//   const theme = createToolkitTheme({glass: true, bar: TOP_BAR.band});  // la barra de arriba en franja (por omisión, cápsulas)\n//   const theme = createToolkitTheme({colorSchemes: {light: {palette: {primary: {main: '#0B5FFF'}}}, dark: {...}}});\n//\n// Lo que trae, con su porqué:\n//   - variables CSS y los dos modos: ColorSchemeToggle cambia de modo sin volver a pintar, y las gráficas leen sus colores\n//     del tema (theme.vars): con variables cambian solas al cambiar de modo, sin ellas se quedarían con las del arranque.\n//   - colorSchemeSelector 'class': el modo lo elige la persona con el botón (con 'media' solo mandaría el sistema\n//     operativo y el botón no haría nada). Con Next.js va con <InitColorSchemeScript attribute=\"class\" />.\n//   - letra base de 16 px: con menos, el iPhone hace zoom al entrar a un campo. body1 16 px y body2 15 px en el teléfono;\n//     responsiveFontSizes los ajusta por ancho de pantalla.\n//   - transiciones de 220 ms, iguales al abrir y al cerrar: más ágiles que las de Material (300 ms) y sin el desfase de\n//     30 ms entre lo que solo conoce una transición (la barra) y lo que conoce dos (el menú lateral).\n//   - esquinas de 8 px y los ajustes de componentes de toolkitComponents().\n//   - glass: el vidrio líquido en lo que flota y en los controles (glassSurface.js explica dónde y por qué). Queda anotado\n//     en theme.toolkit.glass para que los componentes del framework que flotan (el marco, los avisos) lo sepan sin otra prop.\n//   - components: los ajustes propios del proyecto se SUMAN a los del framework (mergeComponents), no los borran.\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {createTheme, responsiveFontSizes} from '@mui/material/styles';\n\nimport {glassComponents} from '@/theme/components/glassComponents.js';\nimport {GLASS_OPACITY} from '@/theme/glassSurface.js';\nimport {mergeComponents} from '@/theme/mergeComponents.js';\nimport {stackcraftDarkPalette, stackcraftLightPalette} from '@/theme/stackcraftPalette.js';\nimport {trackingOf} from '@/theme/appleTracking.js';\nimport {toolkitComponents} from '@/theme/toolkitComponents.js';\nimport {minimalComponents, minimalTonesOf} from '@/theme/components/minimalComponents.js';\nimport {FIELD_TONES} from '@/theme/glassSurface.js';\nimport {cssTokenDeclarationsOf} from '@/theme/cssTokens.js';\nimport {createLogger} from '@/observability/logger.js';\n\nconst log = createLogger('theme');\n// el aviso de las tarjetas de vidrio sale una vez por pestaña: el tema se vuelve a armar cada vez que cambia algo (un\n// configurador de tema lo arma en cada clic) y la consola se llenaba del mismo aviso\nlet hasWarnedAboutGlassSurfaces = false;\n\nconst SYSTEM_FONT_FAMILY = 'system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif';\nconst CORNER_RADIUS_PIXELS = 8;\n// cuántos niveles de sombra trae el tema de MUI (del 0 al 24)\nconst SHADOW_LEVELS = 25;\n\n/** El estilo del tema: el de Stackcraft (con vidrio o sin él) o el minimalista, plano y tonal. */\nexport const THEME_LOOK = Object.freeze({standard: 'standard', minimal: 'minimal'});\n\n/**\n * La barra de arriba, con vidrio y con el minimalista: por omisión como las ventanas de macOS Tahoe, sin franja (el nombre\n * y los botones en cápsulas por grupo; lo eligió el autor al verlas), o la franja de lado a lado. Con vidrio las cápsulas\n * son de vidrio y el contenido pasa por debajo desenfocado; con el minimalista son bloques del tono de las tarjetas sobre\n * el color del fondo (AppLayout). El estilo de Stackcraft sin vidrio se queda con su barra de siempre.\n */\nexport const TOP_BAR = Object.freeze({band: 'band', capsules: 'capsules'});\n\n/**\n * Lo que pidió el proyecto del vidrio, ya revisado: false (sin vidrio) o {opacity, surfaces}.\n *\n * @param {boolean|{opacity?: number, surfaces?: boolean}} glass\n * @returns {false|{opacity: number, surfaces: boolean}}\n */\nfunction glassSettingsOf(glass) {\n    if (!glass) {\n        return false;\n    }\n    const requested = glass === true ? {} : glass;\n    const opacity = requested.opacity ?? GLASS_OPACITY;\n    // un 80 en lugar de 0.8 daría un color inválido y la barra saldría sin fondo, sin ningún aviso\n    if (typeof opacity !== 'number' || opacity < 0 || opacity > 1) {\n        throw new RangeError(`createToolkitTheme: glass.opacity va de 0 a 1 (llegó ${opacity}).`);\n    }\n    const surfaces = Boolean(requested.surfaces);\n    // se permite, pero con advertencia: la guía de Apple pide el contenido sin vidrio y cada tarjeta desenfoca lo de atrás\n    if (surfaces && !hasWarnedAboutGlassSurfaces) {\n        hasWarnedAboutGlassSurfaces = true;\n        log.warn('glass.surfaces pone vidrio también en el contenido (tarjetas, avisos, tabla): pesa más en equipos modestos '\n            + 'y la guía de Apple no lo recomienda («no use Liquid Glass en la capa del contenido»). Úselo en una portada o una '\n            + 'demostración, no en pantallas de trabajo.');\n    }\n    return {opacity, surfaces};\n}\n\n/** Las variables CSS del proyecto declaradas en :root (con el CssBaseline de MUI); sin valores, nada. */\nfunction cssTokenComponentsOf(cssTokens) {\n    const declarations = cssTokenDeclarationsOf(cssTokens);\n    return Object.keys(declarations).length > 0 ? {MuiCssBaseline: {styleOverrides: {':root': declarations}}} : {};\n}\n\n/**\n * @param {object} [options]\n * @param {{light?: object|boolean, dark?: object|boolean}} [options.colorSchemes] los colores de cada modo; por omisión los de\n *     Stackcraft; true: los de MUI tal cual\n * @param {'class'|'data'|'media'|string} [options.colorSchemeSelector] cómo se elige el modo; por omisión 'class'\n * @param {string} [options.fontFamily] por omisión la letra del sistema\n * @param {boolean|{opacity?: number, surfaces?: boolean}} [options.glass] vidrio líquido en lo que flota y en los\n *     controles; por omisión no. Con {opacity} se elige qué tan opaco (0 a 1; por omisión GLASS_OPACITY, 0.6) y con\n *     {surfaces: true} también las tarjetas del contenido (por omisión sólidas, como pide la guía; avisa en consola)\n * @param {'standard'|'minimal'} [options.look] el estilo (THEME_LOOK): el de Stackcraft (por omisión) o el minimalista,\n *     plano y tonal (sin bordes ni sombras: las superficies se separan por su tono; sin vidrio aunque se pida)\n * @param {'capsules'|'band'} [options.bar] la barra de arriba con vidrio o con el minimalista (TOP_BAR): por omisión en\n *     cápsulas; 'band' la franja de lado a lado\n * @param {{light?: {default?: string, paper?: string, fill?: string, floating?: string}, dark?: {default?: string, paper?: string, fill?: string, floating?: string}}} [options.minimalTones]\n *     los tonos del minimalista con los colores de la marca, por modo: default (el fondo de la página), paper (las tarjetas,\n *     un escalón arriba), fill (el relleno de campos, grupos y botones sin color) y floating (la barra de pestañas del\n *     teléfono y lo que flota). Lo que no se pase se queda con los grises de Apple (MINIMAL_TONES). OJO: con el minimalista\n *     el fondo de la página sale de aquí y no de la paleta (sin minimalTones, los grises de Apple aunque la paleta traiga\n *     su background)\n * @param {{radius?: number, light?: {fill?: string, hoverFill?: string, border?: string, hoverBorder?: string}, dark?: {fill?: string, hoverFill?: string, border?: string, hoverBorder?: string}}} [options.fields]\n *     cómo se ven los campos de captura (con vidrio, con el minimalista y dentro de FormSection), por modo: fill (el\n *     relleno), hoverFill (con el cursor encima), border y hoverBorder (la orilla); y radius (las esquinas, en px). Lo que no\n *     se pase se queda como el estilo lo trae (FIELD_TONES: el gris de Apple; con el minimalista, su relleno). Van en la\n *     paleta de cada modo (palette.field), así que también se pueden escribir en colorSchemes y cambian solos con el modo.\n *     Ejemplo, campos blancos con borde en claro: {light: {fill: '#FFFFFF', hoverFill: '#FFFFFF', border: '#C4CDD5'}}\n * @param {{panelRadius?: number|string, menuRadius?: number|string, fieldRadius?: number|string, glassBlur?: number|string, glassSaturate?: number|string}} [options.cssTokens]\n *     los valores globales de Calcita como variables CSS (--calcita-panel-radius…, ver cssTokens.js): las esquinas de los\n *     paneles, los menús y los campos, y el desenfoque del vidrio. Se declaran en :root con el CssBaseline; un número va en\n *     px (glassSaturate en %). Sin la opción, cada estilo usa los suyos. También se pueden poner en CSS suelto\n * @param {object} [options.components] ajustes propios de componentes (se suman; en el mismo estilo ganan los del proyecto)\n * @param {object} [options.overrides] cualquier otra cosa de createTheme (breakpoints, spacing…)\n * @returns {object} el tema de MUI\n */\nexport function createToolkitTheme({\n    colorSchemes = {light: {palette: stackcraftLightPalette}, dark: {palette: stackcraftDarkPalette}},\n    colorSchemeSelector = 'class',\n    fontFamily = SYSTEM_FONT_FAMILY,\n    glass = false,\n    look = THEME_LOOK.standard,\n    bar = TOP_BAR.capsules,\n    minimalTones = {},\n    fields = {},\n    cssTokens = {},\n    components = {},\n    overrides = {},\n} = {}) {\n    // un nombre mal escrito dejaría la franja sin avisar: mejor que truene al armar el tema\n    if (!Object.values(TOP_BAR).includes(bar)) {\n        throw new RangeError(`createToolkitTheme: bar es '${TOP_BAR.capsules}' o '${TOP_BAR.band}' (llegó ${bar}).`);\n    }\n    const isMinimal = look === THEME_LOOK.minimal;\n    // el minimalista es sólido: sin vidrio aunque se pida\n    const glassSettings = isMinimal ? null : glassSettingsOf(glass);\n    const frameworkComponents = isMinimal\n        ? mergeComponents(toolkitComponents(), minimalComponents())\n        : (glassSettings ? mergeComponents(toolkitComponents(), glassComponents({surfaces: glassSettings.surfaces})) : toolkitComponents());\n    // el minimalista separa las superficies por su tono: el fondo de la página y la tarjeta un escalón arriba (los grises de\n    // Apple o los tonos de la marca que pasó el proyecto)\n    const tones = isMinimal ? minimalTonesOf(minimalTones) : null;\n    // los campos de cada modo: lo del estilo (el gris de Apple o, con el minimalista, su relleno), encima lo de `fields` y\n    // encima lo que el proyecto escribió en su paleta (palette.field)\n    const fieldTonesOf = (mode, scheme) => {\n        const lookTones = tones?.[mode]\n            ? {...FIELD_TONES[mode], fill: tones[mode].fill, hoverFill: tones[mode].fill}\n            : FIELD_TONES[mode] ?? FIELD_TONES.light;\n        return {...lookTones, ...fields[mode], ...scheme?.palette?.field};\n    };\n    const schemes = Object.fromEntries(Object.entries(colorSchemes).map(([mode, scheme]) => [mode, {\n        ...scheme,\n        palette: {\n            ...scheme?.palette,\n            ...(isMinimal && {background: tones[mode] ? {default: tones[mode].default, paper: tones[mode].paper} : scheme?.palette?.background}),\n            field: fieldTonesOf(mode, scheme),\n        },\n    }]));\n    const baseTheme = createTheme({\n        cssVariables: {colorSchemeSelector},\n        colorSchemes: schemes,\n        // el espaciado entre letras (tracking) de la tabla de SF Pro de Apple para cada tamaño (appleTracking.js). MUI\n        // trae uno POSITIVO pensado para Roboto (+0.15 px en el texto, +0.4 px en botones y textos chicos) y con la letra del\n        // sistema se veía la letra separada (lo reportaron: «kerning»); Apple, de 13 a 22 pt, lo cierra\n        typography: {\n            fontFamily,\n            h1: {letterSpacing: trackingOf(96)},\n            h2: {letterSpacing: trackingOf(60)},\n            h3: {letterSpacing: trackingOf(48)},\n            h4: {letterSpacing: trackingOf(34)},\n            h5: {fontWeight: 600, letterSpacing: trackingOf(24)},\n            h6: {fontWeight: 600, letterSpacing: trackingOf(20)},\n            subtitle1: {letterSpacing: trackingOf(16)},\n            subtitle2: {letterSpacing: trackingOf(14)},\n            body1: {fontSize: '1rem', letterSpacing: trackingOf(16)},\n            body2: {fontSize: '0.9375rem', letterSpacing: trackingOf(15)},\n            button: {fontSize: '0.9375rem', textTransform: 'none', fontWeight: 500, letterSpacing: trackingOf(15)},\n            caption: {letterSpacing: trackingOf(12)},\n        },\n        transitions: {\n            duration: {\n                shortest: 150,\n                shorter: 180,\n                short: 200,\n                standard: 220,\n                complex: 280,\n                enteringScreen: 220,\n                leavingScreen: 220,\n            },\n        },\n        shape: {borderRadius: CORNER_RADIUS_PIXELS},\n        // las variables CSS del proyecto en :root (con el CssBaseline), y encima sus propios ajustes de componentes\n        components: mergeComponents(mergeComponents(frameworkComponents, cssTokenComponentsOf(cssTokens)), components),\n        // sin sombras en el minimalista: lo plano es la idea\n        ...(isMinimal && {shadows: Array(SHADOW_LEVELS).fill('none')}),\n        // minimalTones: los tonos con que se pintan los rellenos y lo que flota (minimalComponents los lee del tema)\n        // fields: las esquinas de los campos (sus tonos van en la paleta: palette.field)\n        toolkit: {glass: glassSettings, look, bar, minimalTones: tones, fields: {radius: fields.radius}},\n        ...overrides,\n    });\n    return responsiveFontSizes(baseTheme);\n}\n"],"names":[],"mappings":"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"}

package/dist/theme/cssTokens.js

@@ -0,0 +1,23 @@
+const CSS_TOKENS = Object.freeze({
+  // lo que flota grande y las tarjetas grandes: menú lateral, barra en cápsula, diálogos, la sección de un formulario
+  panelRadius: Object.freeze({ variable: "--calcita-panel-radius", fallback: "20px", unit: "px" }),
+  // menús, listas desplegables, globos y avisos
+  menuRadius: Object.freeze({ variable: "--calcita-menu-radius", fallback: "12px", unit: "px" }),
+  // los campos de captura (con vidrio, con el minimalista y dentro de FormSection)
+  fieldRadius: Object.freeze({ variable: "--calcita-field-radius", fallback: "12px", unit: "px" }),
+  // el desenfoque del vidrio y cuánto aviva los colores de atrás
+  glassBlur: Object.freeze({ variable: "--calcita-glass-blur", fallback: "20px", unit: "px" }),
+  glassSaturate: Object.freeze({ variable: "--calcita-glass-saturate", fallback: "180%", unit: "%" })
+});
+function cssTokenOf(key, fallback = CSS_TOKENS[key].fallback) {
+  return `var(${CSS_TOKENS[key].variable}, ${fallback})`;
+}
+function cssTokenDeclarationsOf(values = {}) {
+  return Object.fromEntries(Object.entries(values).filter(([key, value]) => Object.hasOwn(CSS_TOKENS, key) && value !== void 0 && value !== null && value !== "").map(([key, value]) => [CSS_TOKENS[key].variable, typeof value === "number" ? `${value}${CSS_TOKENS[key].unit}` : String(value)]));
+}
+export {
+  CSS_TOKENS,
+  cssTokenDeclarationsOf,
+  cssTokenOf
+};
+//# sourceMappingURL=cssTokens.js.map

package/dist/theme/cssTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssTokens.js","sources":["../../src/theme/cssTokens.js"],"sourcesContent":["// Los valores globales de Calcita que un proyecto cambia de un jalón con CSS, como variables (--calcita-…): las esquinas de\n// los paneles (tarjetas grandes, menú lateral, diálogos, la sección de un formulario), de los menús y ventanitas y de los\n// campos, y el desenfoque del vidrio. Cada uso lleva su valor de siempre como respaldo (var(--calcita-panel-radius, 20px)):\n// sin la variable se ve igual que antes.\n//\n// Tres formas de ponerlas, de la más amplia a la más chica:\n//   - en el tema: createToolkitTheme({cssTokens: {panelRadius: 6, glassBlur: 12}}) las declara en :root (con el\n//     CssBaseline de MUI, que la app ya pinta);\n//   - en CSS suelto, también en la página de un sistema que ya existe: :root {--calcita-panel-radius: 6px;}\n//   - en un contenedor, para una sola parte de la pantalla: <Box sx={{'--calcita-panel-radius': '6px'}}>…</Box>\n// Lo que va en una ventana o un menú flotante (se pinta al final del body) toma las de :root, no las del contenedor.\n//\n// Los colores de los campos no van aquí: son variables de MUI (--mui-palette-field-fill…, ver createToolkitTheme fields).\n//\n// Funciones puras, sin React: function (regla de la casa). Pruebas en cssTokens.test.js.\n\n/** Cada valor: su variable, el de siempre (respaldo) y la unidad para cuando el proyecto lo da en número. */\nexport const CSS_TOKENS = Object.freeze({\n    // lo que flota grande y las tarjetas grandes: menú lateral, barra en cápsula, diálogos, la sección de un formulario\n    panelRadius: Object.freeze({variable: '--calcita-panel-radius', fallback: '20px', unit: 'px'}),\n    // menús, listas desplegables, globos y avisos\n    menuRadius: Object.freeze({variable: '--calcita-menu-radius', fallback: '12px', unit: 'px'}),\n    // los campos de captura (con vidrio, con el minimalista y dentro de FormSection)\n    fieldRadius: Object.freeze({variable: '--calcita-field-radius', fallback: '12px', unit: 'px'}),\n    // el desenfoque del vidrio y cuánto aviva los colores de atrás\n    glassBlur: Object.freeze({variable: '--calcita-glass-blur', fallback: '20px', unit: 'px'}),\n    glassSaturate: Object.freeze({variable: '--calcita-glass-saturate', fallback: '180%', unit: '%'}),\n});\n\n/**\n * El valor para un estilo: la variable con su respaldo. Un estilo con su propio valor de siempre lo pasa (el minimalista\n * tiene las tarjetas de 16 px).\n *\n * @param {keyof typeof CSS_TOKENS} key\n * @param {string} [fallback] por omisión el de CSS_TOKENS\n * @returns {string} p. ej. 'var(--calcita-panel-radius, 20px)'\n */\nexport function cssTokenOf(key, fallback = CSS_TOKENS[key].fallback) {\n    return `var(${CSS_TOKENS[key].variable}, ${fallback})`;\n}\n\n/**\n * Las declaraciones para :root (o para un contenedor) con los valores del proyecto: {panelRadius: 6} →\n * {'--calcita-panel-radius': '6px'}. Un número lleva la unidad del valor (px o %); un texto va tal cual ('0.5rem').\n * Lo que no es un valor conocido se ignora.\n *\n * @param {Partial<Record<keyof typeof CSS_TOKENS, number|string>>} [values]\n * @returns {Record<string, string>}\n */\nexport function cssTokenDeclarationsOf(values = {}) {\n    return Object.fromEntries(Object.entries(values)\n        .filter(([key, value]) => Object.hasOwn(CSS_TOKENS, key) && value !== undefined && value !== null && value !== '')\n        .map(([key, value]) => [CSS_TOKENS[key].variable, typeof value === 'number' ? `${value}${CSS_TOKENS[key].unit}` : String(value)]));\n}\n"],"names":[],"mappings":"AAiBY,MAAC,aAAa,OAAO,OAAO;AAAA;AAAA,EAEpC,aAAa,OAAO,OAAO,EAAC,UAAU,0BAA0B,UAAU,QAAQ,MAAM,KAAI,CAAC;AAAA;AAAA,EAE7F,YAAY,OAAO,OAAO,EAAC,UAAU,yBAAyB,UAAU,QAAQ,MAAM,KAAI,CAAC;AAAA;AAAA,EAE3F,aAAa,OAAO,OAAO,EAAC,UAAU,0BAA0B,UAAU,QAAQ,MAAM,KAAI,CAAC;AAAA;AAAA,EAE7F,WAAW,OAAO,OAAO,EAAC,UAAU,wBAAwB,UAAU,QAAQ,MAAM,KAAI,CAAC;AAAA,EACzF,eAAe,OAAO,OAAO,EAAC,UAAU,4BAA4B,UAAU,QAAQ,MAAM,IAAG,CAAC;AACpG,CAAC;AAUM,SAAS,WAAW,KAAK,WAAW,WAAW,GAAG,EAAE,UAAU;AACjE,SAAO,OAAO,WAAW,GAAG,EAAE,QAAQ,KAAK,QAAQ;AACvD;AAUO,SAAS,uBAAuB,SAAS,IAAI;AAChD,SAAO,OAAO,YAAY,OAAO,QAAQ,MAAM,EAC1C,OAAO,CAAC,CAAC,KAAK,KAAK,MAAM,OAAO,OAAO,YAAY,GAAG,KAAK,UAAU,UAAa,UAAU,QAAQ,UAAU,EAAE,EAChH,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,WAAW,GAAG,EAAE,UAAU,OAAO,UAAU,WAAW,GAAG,KAAK,GAAG,WAAW,GAAG,EAAE,IAAI,KAAK,OAAO,KAAK,CAAC,CAAC,CAAC;AACzI;"}

package/dist/theme/glassSurface.js

@@ -1,10 +1,13 @@
 import { paletteOf } from "./components/paletteOf.js";
 import { lightDarkStylesOf } from "./lightDarkStyles.js";
+import { cssTokenOf } from "./cssTokens.js";
 const GLASS_OPACITY = 0.6;
 const GLASS_PANEL_RADIUS_PIXELS = 20;
 const GLASS_MENU_RADIUS_PIXELS = 12;
+const PANEL_RADIUS = cssTokenOf("panelRadius", `${GLASS_PANEL_RADIUS_PIXELS}px`);
+const MENU_RADIUS = cssTokenOf("menuRadius", `${GLASS_MENU_RADIUS_PIXELS}px`);
 const GLASS_INSET_PIXELS = 8;
-const GLASS_BLUR = "blur(20px) saturate(180%)";
+const GLASS_BLUR = `blur(${cssTokenOf("glassBlur")}) saturate(${cssTokenOf("glassSaturate")})`;
 const GLASS_LENS = Object.freeze({
   control: { filterId: "toolkit-glass-lens-control", edgeFraction: 0.25, scale: 0.2, blurPixels: 3, clearerBy: 0.25 },
   panel: { filterId: "toolkit-glass-lens-panel", edgeFraction: 0.12, scale: 0.05, blurPixels: 10, clearerBy: 0.1 }
@@ -209,8 +212,13 @@ function fieldPaletteOf(theme) {
 function fieldEdgeOf(color) {
   return `inset 0 0 0 1px ${color}`;
 }
+const FORM_ROW_FIELD_RADIUS = "999px";
+function pixelsOf(radius) {
+  return typeof radius === "number" ? `${radius}px` : radius;
+}
 function fieldRadiusOf(theme, lookRadius) {
-  return theme.toolkit?.fields?.radius ?? lookRadius;
+  const projectRadius = theme.toolkit?.fields?.radius;
+  return projectRadius !== void 0 && projectRadius !== null ? pixelsOf(projectRadius) : cssTokenOf("fieldRadius", pixelsOf(lookRadius));
 }
 function fieldWellStylesOf(theme, { radius = FIELD_WELL_RADIUS_PIXELS } = {}) {
   const base = { backgroundImage: "none", backdropFilter: "none", WebkitBackdropFilter: "none", borderRadius: fieldRadiusOf(theme, radius) };
@@ -251,7 +259,7 @@ function fieldWellFromVariablesOf(theme) {
     backgroundImage: "none",
     backdropFilter: "none",
     WebkitBackdropFilter: "none",
-    borderRadius: fieldRadiusOf(theme, FIELD_WELL_RADIUS_PIXELS),
+    borderRadius: fieldRadiusOf(theme, FORM_ROW_FIELD_RADIUS),
     backgroundColor: "var(--calcita-field-fill)",
     boxShadow: "var(--calcita-field-edge)",
     "&:hover": { backgroundColor: "var(--calcita-field-hover-fill)", boxShadow: "var(--calcita-field-hover-edge)" }
@@ -263,7 +271,7 @@ function canvasFieldStylesOf(theme) {
     backgroundImage: "none",
     backdropFilter: GLASS_BLUR,
     WebkitBackdropFilter: GLASS_BLUR,
-    borderRadius: FIELD_WELL_RADIUS_PIXELS,
+    borderRadius: cssTokenOf("fieldRadius", `${FIELD_WELL_RADIUS_PIXELS}px`),
     ...lightDarkStylesOf(theme, {
       backgroundColor: CANVAS_FIELD.light.rest,
       boxShadow: `0 0 0 1px ${CANVAS_FIELD.light.edge}`,
@@ -343,12 +351,15 @@ function scrollEdgeStylesOf(theme) {
 }
 export {
   FIELD_TONES,
+  GLASS_BLUR,
   GLASS_INSET_PIXELS,
   GLASS_LENS,
   GLASS_LENS_FLAG_SELECTOR,
   GLASS_MENU_RADIUS_PIXELS,
   GLASS_OPACITY,
   GLASS_PANEL_RADIUS_PIXELS,
+  MENU_RADIUS,
+  PANEL_RADIUS,
   accentTextStylesOf,
   ambientBackgroundOf,
   canvasFieldStylesOf,

package/dist/theme/glassSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"glassSurface.js","sources":["../../src/theme/glassSurface.js"],"sourcesContent":["// El «vidrio líquido» (Liquid Glass de Apple, 2025) en su versión de CSS: una superficie poco transparente que deja ver,\n// desenfocado, lo que pasa por detrás, con un brillo en el borde de arriba. La guía de Apple (Human Interface Guidelines,\n// «Materials»: https://developer.apple.com/design/human-interface-guidelines/materials) separa dos capas, y aquí igual:\n//   - VIDRIO (glassStylesOf): «a distinct functional layer for controls and navigation elements… that floats above the\n//     content layer». En el framework: la barra de arriba, el menú lateral, los menús y ventanitas, los diálogos, los\n//     tooltips, los avisos, el panel de descargas, el botón flotante y, en los controles, la «gota» que marca lo elegido.\n//   - MATERIAL (materialStylesOf): «Don't use Liquid Glass in the content layer»; el contenido usa los materiales estándar\n//     (vidrio esmerilado, sin el brillo del borde) y los gruesos, más opacos, porque «provide better contrast for text».\n//     Es lo que llevan las tarjetas con createToolkitTheme({glass: {surfaces: true}}).\n//\n// Decisiones, con su porqué:\n//   - 60 % opaco por omisión. Con 80 %, en claro el vidrio era casi blanco sobre un lienzo casi blanco y se leía como\n//     «cápsulas con sombra» (lo dijo el autor), no como vidrio: Apple dice que el vidrio «has no inherent color, and\n//     instead takes on colors from the content directly behind it», y para eso tiene que dejar pasar el color. El material\n//     del contenido es «delgado» (MATERIAL_OPACITY_OFFSET): con 74 % las tarjetas se veían planas, de un solo color (lo dijo\n//     el autor); con el desenfoque de 20 px el texto se sigue leyendo. El proyecto lo cambia con\n//     createToolkitTheme({glass: {opacity: 0.8}}), que mueve las dos.\n//   - Lo que dibuja el vidrio es su filo de luz, como la orilla de una lente: brillante arriba a la izquierda (de donde\n//     viene la luz), más suave abajo a la derecha, y un resplandor por dentro; la sombra de afuera es corta.\n//   - Se pinta sólido si la persona pidió menos transparencia o más contraste en su equipo, o si el navegador no sabe\n//     desenfocar: la misma guía pide respetar «Reducir transparencia», y Apple tuvo que agregar el control en iOS 26.1\n//     porque el texto sobre vidrio no se leía.\n//   - Con vidrio, el lienzo lleva unas manchas de color (ambientBackgroundOf): sobre un lienzo liso, el vidrio no\n//     se distingue de una superficie sólida, porque no hay nada que desenfocar.\n//   - Esquinas concéntricas: la de afuera es la de adentro más el margen (los renglones del menú lateral son de 12 px a 8 px\n//     del borde, así que el panel es de 20 px). Apple lo pide así; si no, las esquinas «no casan» y se nota.\n//   - Sin refracción (la lupa que deforma lo de atrás): en la web solo sale con filtros SVG que hoy funcionan nada más en\n//     Chrome, o con WebGL. Esto es la versión que funciona en todos.\n//   - color-mix y no alpha(): sirve igual con las variables CSS del tema (var(--mui-palette-…)) que con un color normal.\n//\n// OJO: backdrop-filter vuelve a la superficie el «contenedor» de lo que lleve adentro con position: fixed. Lo que deba\n// quedar fijo a la ventana va fuera de ella (los menús de MUI ya van en un portal).\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {lightDarkStylesOf} from '@/theme/lightDarkStyles.js';\n\n/** Qué tan opaca es la superficie (0 a 1). */\nexport const GLASS_OPACITY = 0.6;\n\n/** Las esquinas de lo que flota grande (menú lateral, barra, diálogos): renglones de 12 px a 8 px del borde. */\nexport const GLASS_PANEL_RADIUS_PIXELS = 20;\n\n/** Las esquinas de los menús y ventanitas: renglones de 8 px a 4 px del borde. */\nexport const GLASS_MENU_RADIUS_PIXELS = 12;\n\n/**\n * Lo que se separa de la orilla de la ventana lo que flota (la barra, el menú lateral, los cajones y la hoja de abajo):\n * Apple lo pide para que el contenido se asome por detrás («half sheets are inset from the edge of the display to allow\n * content to peek through from beneath them», Adopting Liquid Glass).\n */\nexport const GLASS_INSET_PIXELS = 8;\n\nconst GLASS_BLUR = 'blur(20px) saturate(180%)';\n\n/**\n * El lente de cada tamaño (ver lensRulesOf), medido en capturas de Chrome: el control chico (botón, chip) más claro y con\n * la orilla más marcada; el panel (barra, menú, diálogo) más grueso, porque lleva texto («Liquid Glass appears more opaque\n * in larger elements like sidebars to preserve legibility», HIG «Color»). edgeFraction y scale van en fracción del tamaño\n * del vidrio; clearerBy es cuánto menos tinte lleva que el esmerilado.\n */\nexport const GLASS_LENS = Object.freeze({\n    control: {filterId: 'toolkit-glass-lens-control', edgeFraction: 0.25, scale: 0.2, blurPixels: 3, clearerBy: 0.25},\n    panel: {filterId: 'toolkit-glass-lens-panel', edgeFraction: 0.12, scale: 0.05, blurPixels: 10, clearerBy: 0.1},\n});\n\n// el gris de la gota en oscuro (por ciento de blanco): lo elegido se tiene que notar (glassDropOf)\nconst DARK_DROP_WHITE_PERCENT = 18;\n// cuánto negro (en claro) o blanco (en oscuro) lleva un texto del color del tema para leerse (accentTextStylesOf)\nconst ACCENT_TEXT_SHADE_PERCENT = 30;\n// el pozo de los campos (fieldWellStylesOf): el gris de relleno de Apple en claro y un oscurecido en oscuro\nconst FIELD_WELL_RADIUS_PIXELS = 12;\nconst FIELD_WELL_FILL = Object.freeze({\n    light: {rest: 'rgba(118, 118, 128, 0.12)', hover: 'rgba(118, 118, 128, 0.18)'},\n    // en oscuro el gris de Apple, MÁS CLARO que lo de atrás (su «tertiary fill»): con negro al 32 % el campo se perdía\n    dark: {rest: 'rgba(118, 118, 128, 0.24)', hover: 'rgba(118, 118, 128, 0.30)'},\n});\n// el campo suelto sobre el lienzo (canvasFieldStylesOf): lámina clara en claro, oscura en oscuro, con su filo\nconst CANVAS_FIELD = Object.freeze({\n    light: {rest: 'rgba(255, 255, 255, 0.62)', hover: 'rgba(255, 255, 255, 0.78)', edge: 'rgba(15, 23, 42, 0.10)'},\n    // en oscuro, el gris de relleno de Apple (más claro que el fondo). Con negro al 34 % el campo contra el fondo casi negro\n    // medía 1.01 : 1 y no se veía (lo reportaron: el buscador «se pierde»); con este, 1.26 : 1, y su filo aparte\n    dark: {rest: 'rgba(118, 118, 128, 0.24)', hover: 'rgba(118, 118, 128, 0.30)', edge: 'rgba(255, 255, 255, 0.10)'},\n});\n// el contraste mínimo de WCAG para letra normal, y cómo se oscurece un relleno hasta lograrlo (whiteLabelFillOf)\nconst MIN_TEXT_CONTRAST = 4.5;\nconst FILL_SHARE_STEP_PERCENT = 5;\nconst MIN_FILL_SHARE_PERCENT = 30;\n\n/** La marca que GlassLensFilter pone en <body> cuando el navegador sí pinta el lente. */\nexport const GLASS_LENS_FLAG_SELECTOR = 'body[data-glass-lens=\"on\"]';\n\n/**\n * El selector de «este control está dentro de una tarjeta» (cualquier Paper: tarjeta, diálogo, menú), donde el control ya\n * no es vidrio. Va en dos versiones, sin y con la marca del lente: la regla del lente (una etiqueta y dos clases) le ganaba\n * a la de la tarjeta (dos clases) y los botones dentro de una tarjeta volvían a ser vidrio. Medido en Chrome.\n *\n * @param {string} [suffix] lo que va pegado al control (p. ej. ':not(.MuiButtonGroup-grouped)')\n * @returns {string}\n */\nexport function insideContentSelectorOf(suffix = '') {\n    return `.MuiPaper-root &${suffix}, ${GLASS_LENS_FLAG_SELECTOR} .MuiPaper-root &${suffix}`;\n}\nconst REDUCED_TRANSPARENCY_QUERY = '@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)';\nconst NO_BACKDROP_FILTER_QUERY = '@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))';\n\n// qué tan fuertes son las manchas del lienzo (por ciento del color). En oscuro van MÁS fuertes que en claro: sobre un lienzo\n// casi negro, unas manchas tenues no dan nada que desenfocar y el vidrio se ve como un gris sólido.\n// La de en medio (center) va detrás del contenido: sin ella, en claro las tarjetas de vidrio quedaban sobre blanco y se\n// veían sólidas (medido en las capturas de Chrome).\nconst AMBIENT_STRENGTH_LIGHT = Object.freeze({primary: 40, info: 30, accent: 30, center: 16});\n// en oscuro: manchas de los tonos oscuros sobre un casi negro con un toque azul (como los fondos oscuros de Apple). Antes\n// eran los tonos vivos al 36 % sobre #0A0A0A: aclaraban el fondo hasta el gris de las tarjetas y los elementos se perdían\n// (lo reportaron; medido: tarjeta contra fondo 1.12 : 1). Ahora 1.28 : 1 en el peor punto\nconst AMBIENT_STRENGTH_DARK = Object.freeze({primary: 18, info: 18, accent: 12, center: 10});\nconst DARK_CANVAS = Object.freeze({base: '#05070B'});\n\n// el filo de la lente: la luz de arriba a la izquierda (rimLight), la de abajo a la derecha más suave (rimShade), un\n// resplandor por dentro (innerGlow), una línea fina de afuera que lo separa del lienzo (outline) y la sombra que lo\n// despega (shadow). En oscuro el filo es más tenue, pero la sombra más fuerte: una negra suave no se ve sobre casi negro.\n// Un control chico (botón, chip) lleva una sombra corta (controlShadow): la de un panel se veía como neblina alrededor y,\n// dentro de una tira que se desliza (los filtros rápidos), la tira la cortaba en un rectángulo.\nconst GLASS_EDGE_LIGHT = Object.freeze({\n    rimLight: 'rgba(255, 255, 255, 0.95)', rimShade: 'rgba(255, 255, 255, 0.5)', innerGlow: 'rgba(255, 255, 255, 0.45)',\n    outline: 'rgba(15, 23, 42, 0.07)', shadow: '0 6px 20px rgba(15, 23, 42, 0.10)',\n    controlShadow: '0 1px 2px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06)',\n});\nconst GLASS_EDGE_DARK = Object.freeze({\n    rimLight: 'rgba(255, 255, 255, 0.32)', rimShade: 'rgba(255, 255, 255, 0.12)', innerGlow: 'rgba(255, 255, 255, 0.07)',\n    outline: 'rgba(0, 0, 0, 0.35)', shadow: '0 8px 28px rgba(0, 0, 0, 0.45)',\n    controlShadow: '0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.25)',\n});\n// lo ancho del resplandor de adentro (px): lo que se ve como el grosor del vidrio en la orilla\nconst INNER_GLOW_PIXELS = 12;\n// en oscuro el vidrio se aclara un poco sobre su color: un gris igual de oscuro que el lienzo no se distingue de él aunque\n// desenfoque. Es lo que Apple hace en oscuro: lo que va al frente usa los colores «elevated», más claros, «making\n// foreground interfaces appear to advance» (HIG, Dark Mode). Con 8 % las tarjetas y los controles se perdían en el fondo\n// oscuro (lo reportaron); con 16 % y el lienzo nuevo (DARK_CANVAS) la tarjeta se separa 1.28 : 1 del fondo y el control\n// 1.32 : 1 (medido; Apple, su tarjeta #1C1C1E sobre negro: 1.23 : 1)\nconst DARK_GLASS_LIFT_PERCENT = 16;\n\n// el material del contenido: sin brillo de borde (eso es del vidrio de los controles), con una línea fina de afuera que lo\n// separa del lienzo y una sombra suave. En oscuro la línea es clara: una oscura no se ve sobre casi negro\nconst MATERIAL_EDGE_LIGHT = Object.freeze({outline: 'rgba(15, 23, 42, 0.08)', shadow: '0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06)'});\nconst MATERIAL_EDGE_DARK = Object.freeze({outline: 'rgba(255, 255, 255, 0.08)', shadow: '0 8px 24px rgba(0, 0, 0, 0.35)'});\n// el material del contenido es «delgado» (HIG «Materials»: «Thinner materials… help people retain their context by\n// providing a visible reminder of the content that's in the background»): menos opaco que el vidrio de los controles. Con\n// el «grueso» (+0.14, 74 %) las tarjetas se veían planas; el texto se lee por el desenfoque de 20 px, y con «Reducir\n// transparencia» se pinta sólido. En oscuro resta menos: con 45 % la tarjeta casi no se separaba del fondo (medido 1.12 : 1)\nconst MATERIAL_OPACITY_OFFSET = Object.freeze({light: -0.15, dark: -0.05});\n// el material «grueso» (por ciento): tapa lo que pasa por debajo, como la columna fija de una tabla\nconst THICK_MATERIAL_PERCENT = 92;\n\n/**\n * Si el tema trae el vidrio prendido (createToolkitTheme({glass: …})). Lo usan los componentes del framework que flotan\n * (el marco, el panel de descargas, los avisos) y lo puede usar el proyecto para lo suyo.\n *\n * @param {object} theme el tema de MUI\n * @returns {boolean}\n */\nexport function isGlassTheme(theme) {\n    return Boolean(theme?.toolkit?.glass);\n}\n\n/**\n * La opacidad del vidrio del tema: la que pidió el proyecto o GLASS_OPACITY.\n *\n * @param {object} theme\n * @returns {number}\n */\nexport function glassOpacityOf(theme) {\n    return theme?.toolkit?.glass?.opacity ?? GLASS_OPACITY;\n}\n\n/**\n * El estilo de una superficie de vidrio sobre un color.\n *\n * @param {string} solidColor el color sólido de la superficie (p. ej. palette.background.paper o primary.main)\n * @param {object} [options]\n * @param {number} [options.opacity] por omisión GLASS_OPACITY\n * @param {boolean} [options.isDark] en oscuro el vidrio se aclara un poco y su filo brilla más\n * @param {boolean} [options.isControl] un control chico (botón, chip): sombra corta en vez de la de un panel\n * @returns {object} estilos para styleOverrides o sx\n */\nexport function glassSurfaceOf(solidColor, {opacity = GLASS_OPACITY, isDark = false, isControl = false} = {}) {\n    const edge = isDark ? GLASS_EDGE_DARK : GLASS_EDGE_LIGHT;\n    const tint = isDark ? `color-mix(in srgb, ${solidColor}, white ${DARK_GLASS_LIFT_PERCENT}%)` : solidColor;\n    return {\n        backgroundColor: `color-mix(in srgb, ${tint} ${Math.round(opacity * 100)}%, transparent)`,\n        backdropFilter: GLASS_BLUR,\n        WebkitBackdropFilter: GLASS_BLUR,\n        backgroundImage: 'linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 40%)',\n        boxShadow: [\n            `inset 1px 1px 0 ${edge.rimLight}`,\n            `inset -1px -1px 0 ${edge.rimShade}`,\n            `inset 0 0 ${INNER_GLOW_PIXELS}px ${edge.innerGlow}`,\n            `0 0 0 1px ${edge.outline}`,\n            isControl ? edge.controlShadow : edge.shadow,\n        ].join(', '),\n        ...solidFallbackOf({backgroundColor: solidColor, backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n    };\n}\n\n/**\n * Lo que se pinta en lugar del vidrio si la persona pidió menos transparencia o más contraste, o si el navegador no sabe\n * desenfocar. Para lo transparente que no es una superficie (el fondo oscuro detrás de un diálogo, la perilla del\n * deslizador al arrastrarla).\n *\n * @param {object} solidStyle los estilos sólidos\n * @returns {object}\n */\nexport function solidFallbackOf(solidStyle) {\n    return {[REDUCED_TRANSPARENCY_QUERY]: solidStyle, [NO_BACKDROP_FILTER_QUERY]: solidStyle};\n}\n\n/**\n * El vidrio sobre un color del tema en claro y en oscuro, con la opacidad del tema. Es lo que usan los ajustes de\n * componentes, y lo que usa el proyecto para algo suyo que flote:\n *   sx={(theme) => glassStylesOf(theme)}                                          // sobre el color de las tarjetas\n *   sx={(theme) => glassStylesOf(theme, {color: paletteOf(theme).primary.main})}  // vidrio del color principal\n *\n * @param {object} theme el tema de MUI\n * @param {object} [options]\n * @param {string} [options.color] el color de la superficie; por omisión el de las tarjetas (background.paper)\n * @param {string} [options.darkColor] el de modo oscuro, si es otro; por omisión el mismo\n * @param {number} [options.opacity] por omisión la del tema\n * @param {boolean} [options.isControl] un control chico (botón, chip): sombra corta en vez de la de un panel\n * @returns {object}\n */\nexport function glassStylesOf(theme, {color, darkColor, opacity, isControl = false} = {}) {\n    const lightColor = color ?? paletteOf(theme).background.paper;\n    const glassOpacity = opacity ?? glassOpacityOf(theme);\n    return {\n        ...lightDarkStylesOf(theme,\n            glassSurfaceOf(lightColor, {opacity: glassOpacity, isControl}),\n            glassSurfaceOf(darkColor ?? lightColor, {opacity: glassOpacity, isDark: true, isControl})),\n        ...lensRulesOf(theme, {lightColor, darkColor: darkColor ?? lightColor, opacity: glassOpacity, isControl}),\n    };\n}\n\n/**\n * El LENTE: lo que, según Apple, define al vidrio líquido («The primary way Liquid Glass visually defines itself is through\n * something called Lensing… previous materials scattered light, this new set of materials dynamically bends, shapes, and\n * concentrates light», WWDC25 «Meet Liquid Glass»). La orilla dobla lo de atrás (un filtro SVG de desplazamiento,\n * GlassLensFilter) y el centro queda más claro: menos tinte y menos desenfoque que el esmerilado.\n *\n * Solo en Chrome y sus parientes (Edge, Brave, Arc): son los únicos que aplican un filtro SVG en backdrop-filter; Firefox\n * lo acepta sin pintarlo (el vidrio se quedaría sin desenfoque) y Safari no lo entiende. Por eso va detrás de la marca que\n * GlassLensFilter pone en <body> solo en esos navegadores; en los demás queda el esmerilado. Con «Reducir transparencia» o\n * «Aumentar contraste» se pinta sólido igual que siempre.\n *\n * OJO: el modo oscuro va en su propia regla y no anidado: el selector de oscuro vive en <html> y, anidado debajo de la\n * marca de <body>, buscaría un .dark DENTRO de <body> y nunca coincidiría.\n *\n * @param {object} theme\n * @param {{lightColor: string, darkColor: string, opacity: number, isControl: boolean}} options\n * @returns {object}\n */\nfunction lensRulesOf(theme, {lightColor, darkColor, opacity, isControl}) {\n    const lens = isControl ? GLASS_LENS.control : GLASS_LENS.panel;\n    const lensOpacity = Math.max(0, opacity - lens.clearerBy);\n    const backdrop = `blur(${lens.blurPixels}px) saturate(180%) url(#${lens.filterId})`;\n    const lensSurfaceOf = (solidColor, isDark) => {\n        const tint = isDark ? `color-mix(in srgb, ${solidColor}, white ${DARK_GLASS_LIFT_PERCENT}%)` : solidColor;\n        return {\n            backgroundColor: `color-mix(in srgb, ${tint} ${Math.round(lensOpacity * 100)}%, transparent)`,\n            backdropFilter: backdrop,\n            WebkitBackdropFilter: backdrop,\n            ...solidFallbackOf({backgroundColor: solidColor, backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n        };\n    };\n    const lensKey = `${GLASS_LENS_FLAG_SELECTOR} &`;\n    // la regla de oscuro del tema: un selector (*:where(.dark) &) o una media query, según cómo elija el modo el proyecto\n    const darkKey = Object.keys(theme.applyStyles('dark', {}))[0];\n    if (!darkKey) {\n        return {[lensKey]: lensSurfaceOf(lightColor, false)};\n    }\n    const darkLens = darkKey.startsWith('@')\n        ? {[darkKey]: {[lensKey]: lensSurfaceOf(darkColor, true)}}\n        : {[darkKey.replace('&', lensKey)]: lensSurfaceOf(darkColor, true)};\n    return {[lensKey]: lensSurfaceOf(lightColor, false), ...darkLens};\n}\n\n/**\n * El mapa de desplazamiento del lente (una imagen SVG): rojo para lo de lado y verde para lo de arriba abajo; 128 en medio\n * es «no mover». En la orilla de la izquierda y la de arriba vale más (toma de adentro) y en la de la derecha y la de\n * abajo, menos (también de adentro): así la orilla dobla lo de atrás hacia el centro, como una lente convexa, y nunca toma\n * de afuera del vidrio (afuera no hay imagen y la orilla se quedaba en blanco).\n *\n * @param {number} edgeFraction lo ancho de la orilla que dobla (0 a 0.5 del tamaño del vidrio)\n * @returns {string} data URI para el feImage del filtro\n */\nexport function lensDisplacementMapOf(edgeFraction) {\n    const inner = 1 - edgeFraction;\n    const svg = '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" preserveAspectRatio=\"none\"><defs>'\n        + `<linearGradient id=\"x\" x1=\"0\" x2=\"1\"><stop offset=\"0\" stop-color=\"#ff0000\"/><stop offset=\"${edgeFraction}\" stop-color=\"#800000\"/>`\n        + `<stop offset=\"${inner}\" stop-color=\"#800000\"/><stop offset=\"1\" stop-color=\"#000000\"/></linearGradient>`\n        + `<linearGradient id=\"y\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#00ff00\"/><stop offset=\"${edgeFraction}\" stop-color=\"#008000\"/>`\n        + `<stop offset=\"${inner}\" stop-color=\"#008000\"/><stop offset=\"1\" stop-color=\"#000000\"/></linearGradient>`\n        + '</defs><rect width=\"100\" height=\"100\" fill=\"url(#x)\"/><rect width=\"100\" height=\"100\" fill=\"url(#y)\" style=\"mix-blend-mode:screen\"/></svg>';\n    return `data:image/svg+xml,${encodeURIComponent(svg)}`;\n}\n\n/**\n * El material del contenido sobre un color: esmerilado como el vidrio pero sin el brillo del borde, y más transparente.\n *\n * @param {string} solidColor\n * @param {object} [options]\n * @param {number} [options.opacity] la del vidrio; el material le suma MATERIAL_OPACITY_OFFSET de su modo (le resta)\n * @param {boolean} [options.isDark]\n * @returns {object}\n */\nexport function materialSurfaceOf(solidColor, {opacity = GLASS_OPACITY, isDark = false} = {}) {\n    const edge = isDark ? MATERIAL_EDGE_DARK : MATERIAL_EDGE_LIGHT;\n    const tint = isDark ? `color-mix(in srgb, ${solidColor}, white ${DARK_GLASS_LIFT_PERCENT}%)` : solidColor;\n    const offset = isDark ? MATERIAL_OPACITY_OFFSET.dark : MATERIAL_OPACITY_OFFSET.light;\n    const materialOpacity = Math.min(1, Math.max(0, opacity + offset));\n    return {\n        backgroundColor: `color-mix(in srgb, ${tint} ${Math.round(materialOpacity * 100)}%, transparent)`,\n        backdropFilter: GLASS_BLUR,\n        WebkitBackdropFilter: GLASS_BLUR,\n        backgroundImage: 'none',\n        boxShadow: `0 0 0 1px ${edge.outline}, ${edge.shadow}`,\n        ...solidFallbackOf({backgroundColor: solidColor, backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n    };\n}\n\n/**\n * El material del contenido en claro y en oscuro (las tarjetas con glass: {surfaces: true}). Para algo del proyecto que va\n * en el contenido: sx={(theme) => materialStylesOf(theme)}.\n *\n * @param {object} theme\n * @param {object} [options]\n * @param {string} [options.color] por omisión el de las tarjetas (background.paper)\n * @param {string} [options.darkColor] por omisión el mismo\n * @returns {object}\n */\nexport function materialStylesOf(theme, {color, darkColor} = {}) {\n    const lightColor = color ?? paletteOf(theme).background.paper;\n    const opacity = glassOpacityOf(theme);\n    return lightDarkStylesOf(theme, materialSurfaceOf(lightColor, {opacity}), materialSurfaceOf(darkColor ?? lightColor, {opacity, isDark: true}));\n}\n\n/**\n * Solo el fondo del material, sin su línea ni su sombra: para lo que va DENTRO de una tarjeta y debe tapar lo que pasa por\n * debajo sin verse como un parche sólido (la columna pegada de la tabla al deslizarla de lado). Va como capa\n * (background-image) y no como color: así el color propio del elemento (el del renglón: la cebra, el cursor encima) se\n * sigue pintando encima.\n *\n * Con {thick: true}, el material «grueso» de Apple (HIG «Materials»: los gruesos son para leer sobre otro contenido): el\n * mismo desenfoque al 92 %. Es el de la columna fija de una tabla: con el delgado de la tarjeta (45 a 55 %) se veían pasar\n * por detrás las otras columnas (lo reportaron).\n *\n * @param {object} theme\n * @param {object} [options]\n * @param {boolean} [options.thick] el material grueso, para tapar lo que pasa por debajo\n * @returns {object}\n */\nexport function materialBackgroundOf(theme, {thick = false} = {}) {\n    const paper = paletteOf(theme).background.paper;\n    const opacityOf = (offset) => (thick ? THICK_MATERIAL_PERCENT : Math.round(Math.min(1, Math.max(0, glassOpacityOf(theme) + offset)) * 100));\n    const layerOf = (color) => `linear-gradient(${color}, ${color})`;\n    const frostedOf = (tint, opacity) => ({\n        backgroundImage: layerOf(`color-mix(in srgb, ${tint} ${opacity}%, transparent)`),\n        backdropFilter: GLASS_BLUR,\n        WebkitBackdropFilter: GLASS_BLUR,\n    });\n    return {\n        ...lightDarkStylesOf(theme,\n            frostedOf(paper, opacityOf(MATERIAL_OPACITY_OFFSET.light)),\n            frostedOf(`color-mix(in srgb, ${paper}, white ${DARK_GLASS_LIFT_PERCENT}%)`, opacityOf(MATERIAL_OPACITY_OFFSET.dark))),\n        ...solidFallbackOf({backgroundImage: layerOf(paper), backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n    };\n}\n\n/**\n * La «gota» que marca lo elegido dentro de un control (la pestaña, la opción, el renglón del menú lateral): en claro, una\n * pastilla blanca con su brillo y su sombra; en oscuro, un relleno gris parejo, como el renglón elegido de las barras\n * laterales de Apple en oscuro. No es transparente del todo: va DENTRO de algo que ya puede ser de vidrio (un menú), y\n * vidrio sobre vidrio no se lee.\n * OJO, oscuro: con blanco al 14 % casi no se veía, y su línea de luz arriba dibujaba un arco raro en la esquina («no se\n * nota la selección», «se ve raro»; lo reportaron). Va al 18 % y sin línea.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function glassDropOf(theme) {\n    const palette = paletteOf(theme);\n    return lightDarkStylesOf(theme, {\n        backgroundColor: palette.background.paper,\n        color: palette.text.primary,\n        boxShadow: 'inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08)',\n    }, {\n        backgroundColor: `color-mix(in srgb, ${palette.common.white} ${DARK_DROP_WHITE_PERCENT}%, transparent)`,\n        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.35)',\n    });\n}\n\n/**\n * El relleno de un control lleno de color (el botón principal, la etiqueta elegida) para llevar letra BLANCA y que se lea:\n * el color del tema oscurecido lo justo para llegar a 4.5 : 1 (WCAG). En oscuro la paleta trae letra negra sobre el\n * naranja («El suyo», «Guardar»: se veía feo, lo reportaron) y el blanco sobre el naranja tal cual da 2.85 : 1; con el\n * naranja al 75 % y blanco da 4.79 : 1. Se calcula con el color que elija el proyecto, no con uno fijo.\n *\n * @param {string} rawColor el color en #RRGGBB o #RGB (el de la paleta, no la variable CSS)\n * @returns {string|null} el relleno en #RRGGBB; null si el color no viene en hexadecimal\n */\nexport function whiteLabelFillOf(rawColor) {\n    const channels = hexChannelsOf(rawColor);\n    if (!channels) {\n        return null;\n    }\n    // del color tal cual hacia el negro, en pasos de 5 %, hasta que la letra blanca se lea\n    for (let share = 100; share >= MIN_FILL_SHARE_PERCENT; share -= FILL_SHARE_STEP_PERCENT) {\n        const mixed = channels.map((channel) => Math.round((channel * share) / 100));\n        if (contrastWithWhiteOf(mixed) >= MIN_TEXT_CONTRAST) {\n            return `#${mixed.map((channel) => channel.toString(16).padStart(2, '0')).join('')}`;\n        }\n    }\n    return `#${channels.map((channel) => Math.round((channel * MIN_FILL_SHARE_PERCENT) / 100).toString(16).padStart(2, '0')).join('')}`;\n}\n\n/**\n * Los tres canales de un color #RRGGBB o #RGB (0 a 255); null si no es hexadecimal.\n *\n * @param {string} color\n * @returns {number[]|null}\n */\nfunction hexChannelsOf(color) {\n    const match = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(String(color ?? '').trim());\n    if (!match) {\n        return null;\n    }\n    const digits = match[1].length === 3 ? [...match[1]].map((digit) => digit + digit).join('') : match[1];\n    return [0, 2, 4].map((start) => parseInt(digits.slice(start, start + 2), 16));\n}\n\n/**\n * El contraste de la letra blanca sobre un color (fórmula de WCAG).\n *\n * @param {number[]} channels\n * @returns {number}\n */\nfunction contrastWithWhiteOf(channels) {\n    const [red, green, blue] = channels.map((channel) => {\n        const unit = channel / 255;\n        return unit <= 0.03928 ? unit / 12.92 : ((unit + 0.055) / 1.055) ** 2.4;\n    });\n    const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue;\n    return 1.05 / (luminance + 0.05);\n}\n\n/**\n * Los tonos de los campos por omisión, por modo: fill (el relleno), hoverFill (con el cursor encima), border y hoverBorder\n * (la orilla; transparente: el pozo de Apple no lleva). createToolkitTheme los pone en la paleta de cada modo\n * (palette.field) y el proyecto los cambia con `fields` o con su paleta: blancos con borde, del tono de su marca…\n */\nexport const FIELD_TONES = Object.freeze({\n    light: Object.freeze({fill: FIELD_WELL_FILL.light.rest, hoverFill: FIELD_WELL_FILL.light.hover, border: 'transparent', hoverBorder: 'transparent'}),\n    dark: Object.freeze({fill: FIELD_WELL_FILL.dark.rest, hoverFill: FIELD_WELL_FILL.dark.hover, border: 'transparent', hoverBorder: 'transparent'}),\n});\n\n/**\n * Los tonos de los campos del tema (palette.field, que llena createToolkitTheme; con sus variables CSS cambian solos con el\n * modo, sin reglas de oscuro), o null si el tema no los trae (un createTheme de MUI sin Calcita).\n *\n * @param {object} theme\n * @returns {{fill: string, hoverFill: string, border: string, hoverBorder: string}|null}\n */\nexport function fieldPaletteOf(theme) {\n    return paletteOf(theme).field ?? null;\n}\n\n/** La orilla de un campo: una línea por dentro (sombra inset), que no mueve el texto ni pelea con el aro del foco (outline). */\nfunction fieldEdgeOf(color) {\n    return `inset 0 0 0 1px ${color}`;\n}\n\n/** Las esquinas de los campos: las que pidió el proyecto (createToolkitTheme fields.radius) o las de cada estilo. */\nfunction fieldRadiusOf(theme, lookRadius) {\n    return theme.toolkit?.fields?.radius ?? lookRadius;\n}\n\n/**\n * El «pozo» de un campo de texto dentro del contenido (una tarjeta, un formulario agrupado), como los de Apple: un relleno\n * parejo con esquinas de 12 px, del gris de relleno de Apple («tertiary fill»): tenue en claro y más claro que la tarjeta en\n * oscuro (con negro, en oscuro se perdía). Sin vidrio adentro de la tarjeta: ahí no tiene nada que dejar\n * ver. Con el cursor encima se marca apenas; antes el relleno salía solo con el cursor y en cuadro («hovers espantosos»).\n * Los tonos y las esquinas los puede cambiar el proyecto (createToolkitTheme fields).\n *\n * @param {object} theme\n * @param {{radius?: number}} [options] las esquinas del estilo que lo pide (el minimalista las tiene más chicas)\n * @returns {object}\n */\nexport function fieldWellStylesOf(theme, {radius = FIELD_WELL_RADIUS_PIXELS} = {}) {\n    const base = {backgroundImage: 'none', backdropFilter: 'none', WebkitBackdropFilter: 'none', borderRadius: fieldRadiusOf(theme, radius)};\n    const field = fieldPaletteOf(theme);\n    if (field) {\n        return {\n            ...base,\n            backgroundColor: field.fill,\n            boxShadow: fieldEdgeOf(field.border),\n            '&:hover': {backgroundColor: field.hoverFill, boxShadow: fieldEdgeOf(field.hoverBorder)},\n        };\n    }\n    const {light, dark} = FIELD_TONES;\n    return {\n        ...base,\n        ...lightDarkStylesOf(theme,\n            {backgroundColor: light.fill, boxShadow: fieldEdgeOf(light.border), '&:hover': {backgroundColor: light.hoverFill, boxShadow: fieldEdgeOf(light.hoverBorder)}},\n            {backgroundColor: dark.fill, boxShadow: fieldEdgeOf(dark.border), '&:hover': {backgroundColor: dark.hoverFill, boxShadow: fieldEdgeOf(dark.hoverBorder)}}),\n    };\n}\n\n/**\n * Los tonos de los campos como variables (--calcita-field-*) para un contenedor: el renglón de FormSection las pone en sí\n * mismo y sus campos las leen (fieldWellFromVariablesOf). OJO, trampa pagada: el renglón le gana al tema con selectores\n * largos («html body &&& .MuiOutlinedInput-root») y una regla de oscuro anidada ahí abajo nunca aplicaba (en oscuro el\n * campo salía con el gris de claro). En el contenedor la regla de oscuro sí aplica, y los campos heredan la variable.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function fieldVariablesOf(theme) {\n    const variablesOf = (tones) => ({\n        '--calcita-field-fill': tones.fill,\n        '--calcita-field-hover-fill': tones.hoverFill,\n        '--calcita-field-edge': fieldEdgeOf(tones.border),\n        '--calcita-field-hover-edge': fieldEdgeOf(tones.hoverBorder),\n    });\n    const field = fieldPaletteOf(theme);\n    if (field) {\n        return variablesOf(field);\n    }\n    return {...variablesOf(FIELD_TONES.light), ...theme.applyStyles('dark', variablesOf(FIELD_TONES.dark))};\n}\n\n/**\n * El pozo de un campo leyendo las variables de su contenedor (fieldVariablesOf).\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function fieldWellFromVariablesOf(theme) {\n    return {\n        backgroundImage: 'none',\n        backdropFilter: 'none',\n        WebkitBackdropFilter: 'none',\n        borderRadius: fieldRadiusOf(theme, FIELD_WELL_RADIUS_PIXELS),\n        backgroundColor: 'var(--calcita-field-fill)',\n        boxShadow: 'var(--calcita-field-edge)',\n        '&:hover': {backgroundColor: 'var(--calcita-field-hover-fill)', boxShadow: 'var(--calcita-field-hover-edge)'},\n    };\n}\n\n/**\n * Un campo de texto suelto sobre el lienzo (fuera de una tarjeta): una lámina de vidrio clara en claro y el gris de relleno\n * de Apple en oscuro, más claro que el fondo casi negro. Con «Reducir transparencia» se pinta sólido.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function canvasFieldStylesOf(theme) {\n    const paper = paletteOf(theme).background.paper;\n    return {\n        backgroundImage: 'none',\n        backdropFilter: GLASS_BLUR,\n        WebkitBackdropFilter: GLASS_BLUR,\n        borderRadius: FIELD_WELL_RADIUS_PIXELS,\n        ...lightDarkStylesOf(theme, {\n            backgroundColor: CANVAS_FIELD.light.rest,\n            boxShadow: `0 0 0 1px ${CANVAS_FIELD.light.edge}`,\n            '&:hover': {backgroundColor: CANVAS_FIELD.light.hover},\n        }, {\n            backgroundColor: CANVAS_FIELD.dark.rest,\n            boxShadow: `0 0 0 1px ${CANVAS_FIELD.dark.edge}`,\n            '&:hover': {backgroundColor: CANVAS_FIELD.dark.hover},\n        }),\n        ...solidFallbackOf({backgroundColor: paper, backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n    };\n}\n\n/**\n * El color de un TEXTO que debe ir del color del tema (una liga, un botón de solo texto, el renglón elegido del menú, el\n * valor de una fecha): el color de la paleta oscurecido en claro y aclarado en oscuro, para que se lea. Medido (WCAG pide\n * 4.5 : 1 en letra normal): el naranja de la marca sobre una tarjeta clara daba 2.78 : 1 y sobre su propio tinte en oscuro\n * 4.41 : 1 (el reporte: «cuesta leer», «se pierde»); con 30 % de negro en claro da 5.24 : 1 y con 30 % de blanco en\n * oscuro 8.23 : 1. Los botones con relleno de color NO usan esto: van con letra de un solo color (HIG «Buttons»: «Avoid\n * applying a similar color to button labels and content layer backgrounds»).\n *\n * @param {object} theme\n * @param {string} [colorName] primary, error, success… (por omisión primary)\n * @returns {object} {color, y el de oscuro}\n */\nexport function accentTextStylesOf(theme, colorName = 'primary') {\n    const palette = paletteOf(theme);\n    const main = (palette[colorName] ?? palette.primary).main;\n    const keep = 100 - ACCENT_TEXT_SHADE_PERCENT;\n    return lightDarkStylesOf(theme, {color: `color-mix(in srgb, ${main} ${keep}%, black)`}, {color: `color-mix(in srgb, ${main} ${keep}%, white)`});\n}\n\n/**\n * Un fondo FIJO a la ventana que no se mueve al deslizar, también en el iPhone: va en una capa aparte (::before con\n * position: fixed) detrás del contenido del elemento. Así el vidrio se ve pasar por encima de un fondo quieto.\n *\n * OJO: background-attachment: fixed no sirve para esto. Safari del iPhone y del iPad lo ignora y el fondo se movía con\n * todo (lo vio el autor en el teléfono); además, en escritorio vuelve a pintar todo el fondo en cada paso al deslizar.\n * La capa va con z-index -1 dentro de un contexto propio (isolation): queda arriba del color del elemento y abajo de su\n * contenido. Si el elemento es una caja con esquinas (la escena de un ejemplo), clip-path la recorta a la caja.\n *\n * @param {object} layerStyles el fondo de la capa (backgroundColor, backgroundImage…; puede llevar el modo oscuro)\n * @param {object} [options]\n * @param {string} [options.clipPath] p. ej. 'inset(0 round 20px)' para una caja; sin él, la capa ocupa toda la ventana\n * @returns {object} estilos para el sx del elemento\n */\nexport function fixedBackgroundLayerOf(layerStyles, {clipPath} = {}) {\n    return {\n        isolation: 'isolate',\n        ...(clipPath && {clipPath}),\n        // OJO, iPhone: con inset: 0 el alto de la capa cambia cuando la barra de Safari se esconde al deslizar, y el fondo\n        // «seguía al scroll» (lo vio el autor en su teléfono). Medida fija de toda la pantalla (100vw × 100lvh, el alto con\n        // la barra escondida; 100vh donde no hay lvh) y su propia capa de composición (translateZ), que es lo que la deja\n        // quieta en WebKit\n        '&::before': {\n            content: '\"\"',\n            position: 'fixed',\n            top: 0,\n            left: 0,\n            width: '100vw',\n            height: '100vh',\n            '@supports (height: 100lvh)': {height: '100lvh'},\n            transform: 'translateZ(0)',\n            willChange: 'transform',\n            zIndex: -1,\n            pointerEvents: 'none',\n            ...layerStyles,\n        },\n    };\n}\n\n/**\n * El fondo del lienzo con vidrio: manchas del color principal y del de información, fijas a la ventana, para\n * que el vidrio tenga algo que desenfocar. AppLayout ya lo pone; una pantalla fuera del marco (el inicio de sesión) lo usa\n * con sx={(theme) => ambientBackgroundOf(theme)}.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function ambientBackgroundOf(theme) {\n    const palette = paletteOf(theme);\n    const washOf = (strength, tones) => [\n        `radial-gradient(60vmax 45vmax at 0% 0%, color-mix(in srgb, ${tones.primary} ${strength.primary}%, transparent), transparent 70%)`,\n        `radial-gradient(50vmax 40vmax at 100% 15%, color-mix(in srgb, ${tones.info} ${strength.info}%, transparent), transparent 70%)`,\n        `radial-gradient(55vmax 45vmax at 70% 100%, color-mix(in srgb, ${tones.accent} ${strength.accent}%, transparent), transparent 70%)`,\n        `radial-gradient(45vmax 35vmax at 45% 50%, color-mix(in srgb, ${tones.info} ${strength.center}%, transparent), transparent 70%)`,\n    ].join(', ');\n    const lightTones = {primary: palette.primary.main, info: palette.info.main, accent: palette.primary.light};\n    // en oscuro, los tonos OSCUROS de la paleta sobre un casi negro: el color tiñe sin aclarar el fondo, y las tarjetas y el\n    // vidrio (más claros) no se pierden (ver DARK_CANVAS)\n    const darkTones = {primary: palette.primary.dark, info: palette.info.dark, accent: palette.primary.dark};\n    return {\n        ...lightDarkStylesOf(theme, {backgroundColor: palette.background.default}, {backgroundColor: DARK_CANVAS.base}),\n        ...fixedBackgroundLayerOf(lightDarkStylesOf(theme,\n            {backgroundColor: palette.background.default, backgroundImage: washOf(AMBIENT_STRENGTH_LIGHT, lightTones)},\n            {backgroundColor: DARK_CANVAS.base, backgroundImage: washOf(AMBIENT_STRENGTH_DARK, darkTones)})),\n    };\n}\n\n// la orilla de arriba con la barra en cápsulas: cuánto tinte del lienzo lleva y cuánto desenfoca (px)\nconst SCROLL_EDGE_TINT_PERCENT = 55;\nconst SCROLL_EDGE_BLUR_PIXELS = 12;\n\n/**\n * La orilla de arriba cuando la barra va en cápsulas (TOP_BAR.capsules con vidrio, como las ventanas de macOS Tahoe; Apple le\n * llama «scroll edge effect»): lo que pasa por debajo se desenfoca y se desvanece hacia el contenido, para que el título\n * y las cápsulas se lean sobre cualquier cosa. Con «Reducir transparencia» o sin backdrop-filter, el color del lienzo.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function scrollEdgeStylesOf(theme) {\n    const palette = paletteOf(theme);\n    const tintOf = (canvas) => `color-mix(in srgb, ${canvas} ${SCROLL_EDGE_TINT_PERCENT}%, transparent)`;\n    const blur = `blur(${SCROLL_EDGE_BLUR_PIXELS}px)`;\n    // de arriba (cubre) hacia abajo (se desvanece): sin raya donde termina\n    const fade = 'linear-gradient(to bottom, black 45%, transparent)';\n    return {\n        ...lightDarkStylesOf(theme, {backgroundColor: tintOf(palette.background.default)}, {backgroundColor: tintOf(DARK_CANVAS.base)}),\n        backdropFilter: blur,\n        WebkitBackdropFilter: blur,\n        maskImage: fade,\n        WebkitMaskImage: fade,\n        ...solidFallbackOf({backgroundColor: palette.background.default, backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n    };\n}\n"],"names":[],"mappings":";;AAsCY,MAAC,gBAAgB;AAGjB,MAAC,4BAA4B;AAG7B,MAAC,2BAA2B;AAO5B,MAAC,qBAAqB;AAElC,MAAM,aAAa;AAQP,MAAC,aAAa,OAAO,OAAO;AAAA,EACpC,SAAS,EAAC,UAAU,8BAA8B,cAAc,MAAM,OAAO,KAAK,YAAY,GAAG,WAAW,KAAI;AAAA,EAChH,OAAO,EAAC,UAAU,4BAA4B,cAAc,MAAM,OAAO,MAAM,YAAY,IAAI,WAAW,IAAG;AACjH,CAAC;AAGD,MAAM,0BAA0B;AAEhC,MAAM,4BAA4B;AAElC,MAAM,2BAA2B;AACjC,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAClC,OAAO,EAAC,MAAM,6BAA6B,OAAO,4BAA2B;AAAA;AAAA,EAE7E,MAAM,EAAC,MAAM,6BAA6B,OAAO,4BAA2B;AAChF,CAAC;AAED,MAAM,eAAe,OAAO,OAAO;AAAA,EAC/B,OAAO,EAAC,MAAM,6BAA6B,OAAO,6BAA6B,MAAM,yBAAwB;AAAA;AAAA;AAAA,EAG7G,MAAM,EAAC,MAAM,6BAA6B,OAAO,6BAA6B,MAAM,4BAA2B;AACnH,CAAC;AAED,MAAM,oBAAoB;AAC1B,MAAM,0BAA0B;AAChC,MAAM,yBAAyB;AAGnB,MAAC,2BAA2B;AAUjC,SAAS,wBAAwB,SAAS,IAAI;AACjD,SAAO,mBAAmB,MAAM,KAAK,wBAAwB,oBAAoB,MAAM;AAC3F;AACA,MAAM,6BAA6B;AACnC,MAAM,2BAA2B;AAMjC,MAAM,yBAAyB,OAAO,OAAO,EAAC,SAAS,IAAI,MAAM,IAAI,QAAQ,IAAI,QAAQ,GAAE,CAAC;AAI5F,MAAM,wBAAwB,OAAO,OAAO,EAAC,SAAS,IAAI,MAAM,IAAI,QAAQ,IAAI,QAAQ,GAAE,CAAC;AAC3F,MAAM,cAAc,OAAO,OAAO,EAAC,MAAM,UAAS,CAAC;AAOnD,MAAM,mBAAmB,OAAO,OAAO;AAAA,EACnC,UAAU;AAAA,EAA6B,UAAU;AAAA,EAA4B,WAAW;AAAA,EACxF,SAAS;AAAA,EAA0B,QAAQ;AAAA,EAC3C,eAAe;AACnB,CAAC;AACD,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAClC,UAAU;AAAA,EAA6B,UAAU;AAAA,EAA6B,WAAW;AAAA,EACzF,SAAS;AAAA,EAAuB,QAAQ;AAAA,EACxC,eAAe;AACnB,CAAC;AAED,MAAM,oBAAoB;AAM1B,MAAM,0BAA0B;AAIhC,MAAM,sBAAsB,OAAO,OAAO,EAAC,SAAS,0BAA0B,QAAQ,sEAAqE,CAAC;AAC5J,MAAM,qBAAqB,OAAO,OAAO,EAAC,SAAS,6BAA6B,QAAQ,iCAAgC,CAAC;AAKzH,MAAM,0BAA0B,OAAO,OAAO,EAAC,OAAO,OAAO,MAAM,MAAK,CAAC;AAEzE,MAAM,yBAAyB;AASxB,SAAS,aAAa,OAAO;AAChC,SAAO,QAAQ,OAAO,SAAS,KAAK;AACxC;AAQO,SAAS,eAAe,OAAO;AAClC,SAAO,OAAO,SAAS,OAAO,WAAW;AAC7C;AAYO,SAAS,eAAe,YAAY,EAAC,UAAU,eAAe,SAAS,OAAO,YAAY,MAAK,IAAI,IAAI;AAC1G,QAAM,OAAO,SAAS,kBAAkB;AACxC,QAAM,OAAO,SAAS,sBAAsB,UAAU,WAAW,uBAAuB,OAAO;AAC/F,SAAO;AAAA,IACH,iBAAiB,sBAAsB,IAAI,IAAI,KAAK,MAAM,UAAU,GAAG,CAAC;AAAA,IACxE,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,iBAAiB;AAAA,IACjB,WAAW;AAAA,MACP,mBAAmB,KAAK,QAAQ;AAAA,MAChC,qBAAqB,KAAK,QAAQ;AAAA,MAClC,aAAa,iBAAiB,MAAM,KAAK,SAAS;AAAA,MAClD,aAAa,KAAK,OAAO;AAAA,MACzB,YAAY,KAAK,gBAAgB,KAAK;AAAA,IAClD,EAAU,KAAK,IAAI;AAAA,IACX,GAAG,gBAAgB,EAAC,iBAAiB,YAAY,gBAAgB,QAAQ,sBAAsB,OAAM,CAAC;AAAA,EAC9G;AACA;AAUO,SAAS,gBAAgB,YAAY;AACxC,SAAO,EAAC,CAAC,0BAA0B,GAAG,YAAY,CAAC,wBAAwB,GAAG,WAAU;AAC5F;AAgBO,SAAS,cAAc,OAAO,EAAC,OAAO,WAAW,SAAS,YAAY,MAAK,IAAI,IAAI;AACtF,QAAM,aAAa,SAAS,UAAU,KAAK,EAAE,WAAW;AACxD,QAAM,eAAe,WAAW,eAAe,KAAK;AACpD,SAAO;AAAA,IACH,GAAG;AAAA,MAAkB;AAAA,MACjB,eAAe,YAAY,EAAC,SAAS,cAAc,UAAS,CAAC;AAAA,MAC7D,eAAe,aAAa,YAAY,EAAC,SAAS,cAAc,QAAQ,MAAM,UAAS,CAAC;AAAA,IAAC;AAAA,IAC7F,GAAG,YAAY,OAAO,EAAC,YAAY,WAAW,aAAa,YAAY,SAAS,cAAc,UAAS,CAAC;AAAA,EAChH;AACA;AAoBA,SAAS,YAAY,OAAO,EAAC,YAAY,WAAW,SAAS,UAAS,GAAG;AACrE,QAAM,OAAO,YAAY,WAAW,UAAU,WAAW;AACzD,QAAM,cAAc,KAAK,IAAI,GAAG,UAAU,KAAK,SAAS;AACxD,QAAM,WAAW,QAAQ,KAAK,UAAU,2BAA2B,KAAK,QAAQ;AAChF,QAAM,gBAAgB,CAAC,YAAY,WAAW;AAC1C,UAAM,OAAO,SAAS,sBAAsB,UAAU,WAAW,uBAAuB,OAAO;AAC/F,WAAO;AAAA,MACH,iBAAiB,sBAAsB,IAAI,IAAI,KAAK,MAAM,cAAc,GAAG,CAAC;AAAA,MAC5E,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,MACtB,GAAG,gBAAgB,EAAC,iBAAiB,YAAY,gBAAgB,QAAQ,sBAAsB,OAAM,CAAC;AAAA,IAClH;AAAA,EACI;AACA,QAAM,UAAU,GAAG,wBAAwB;AAE3C,QAAM,UAAU,OAAO,KAAK,MAAM,YAAY,QAAQ,CAAA,CAAE,CAAC,EAAE,CAAC;AAC5D,MAAI,CAAC,SAAS;AACV,WAAO,EAAC,CAAC,OAAO,GAAG,cAAc,YAAY,KAAK,EAAC;AAAA,EACvD;AACA,QAAM,WAAW,QAAQ,WAAW,GAAG,IACjC,EAAC,CAAC,OAAO,GAAG,EAAC,CAAC,OAAO,GAAG,cAAc,WAAW,IAAI,EAAC,EAAC,IACvD,EAAC,CAAC,QAAQ,QAAQ,KAAK,OAAO,CAAC,GAAG,cAAc,WAAW,IAAI,EAAC;AACtE,SAAO,EAAC,CAAC,OAAO,GAAG,cAAc,YAAY,KAAK,GAAG,GAAG,SAAQ;AACpE;AAWO,SAAS,sBAAsB,cAAc;AAChD,QAAM,QAAQ,IAAI;AAClB,QAAM,MAAM,+LACuF,YAAY,yCACxF,KAAK,2LACqF,YAAY,yCACtG,KAAK;AAE5B,SAAO,sBAAsB,mBAAmB,GAAG,CAAC;AACxD;AAWO,SAAS,kBAAkB,YAAY,EAAC,UAAU,eAAe,SAAS,MAAK,IAAI,IAAI;AAC1F,QAAM,OAAO,SAAS,qBAAqB;AAC3C,QAAM,OAAO,SAAS,sBAAsB,UAAU,WAAW,uBAAuB,OAAO;AAC/F,QAAM,SAAS,SAAS,wBAAwB,OAAO,wBAAwB;AAC/E,QAAM,kBAAkB,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,MAAM,CAAC;AACjE,SAAO;AAAA,IACH,iBAAiB,sBAAsB,IAAI,IAAI,KAAK,MAAM,kBAAkB,GAAG,CAAC;AAAA,IAChF,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,iBAAiB;AAAA,IACjB,WAAW,aAAa,KAAK,OAAO,KAAK,KAAK,MAAM;AAAA,IACpD,GAAG,gBAAgB,EAAC,iBAAiB,YAAY,gBAAgB,QAAQ,sBAAsB,OAAM,CAAC;AAAA,EAC9G;AACA;AAYO,SAAS,iBAAiB,OAAO,EAAC,OAAO,UAAS,IAAI,CAAA,GAAI;AAC7D,QAAM,aAAa,SAAS,UAAU,KAAK,EAAE,WAAW;AACxD,QAAM,UAAU,eAAe,KAAK;AACpC,SAAO,kBAAkB,OAAO,kBAAkB,YAAY,EAAC,QAAO,CAAC,GAAG,kBAAkB,aAAa,YAAY,EAAC,SAAS,QAAQ,KAAI,CAAC,CAAC;AACjJ;AAiBO,SAAS,qBAAqB,OAAO,EAAC,QAAQ,MAAK,IAAI,CAAA,GAAI;AAC9D,QAAM,QAAQ,UAAU,KAAK,EAAE,WAAW;AAC1C,QAAM,YAAY,CAAC,WAAY,QAAQ,yBAAyB,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,eAAe,KAAK,IAAI,MAAM,CAAC,IAAI,GAAG;AACzI,QAAM,UAAU,CAAC,UAAU,mBAAmB,KAAK,KAAK,KAAK;AAC7D,QAAM,YAAY,CAAC,MAAM,aAAa;AAAA,IAClC,iBAAiB,QAAQ,sBAAsB,IAAI,IAAI,OAAO,iBAAiB;AAAA,IAC/E,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,EAC9B;AACI,SAAO;AAAA,IACH,GAAG;AAAA,MAAkB;AAAA,MACjB,UAAU,OAAO,UAAU,wBAAwB,KAAK,CAAC;AAAA,MACzD,UAAU,sBAAsB,KAAK,WAAW,uBAAuB,MAAM,UAAU,wBAAwB,IAAI,CAAC;AAAA,IAAC;AAAA,IACzH,GAAG,gBAAgB,EAAC,iBAAiB,QAAQ,KAAK,GAAG,gBAAgB,QAAQ,sBAAsB,OAAM,CAAC;AAAA,EAClH;AACA;AAaO,SAAS,YAAY,OAAO;AAC/B,QAAM,UAAU,UAAU,KAAK;AAC/B,SAAO,kBAAkB,OAAO;AAAA,IAC5B,iBAAiB,QAAQ,WAAW;AAAA,IACpC,OAAO,QAAQ,KAAK;AAAA,IACpB,WAAW;AAAA,EACnB,GAAO;AAAA,IACC,iBAAiB,sBAAsB,QAAQ,OAAO,KAAK,IAAI,uBAAuB;AAAA,IACtF,WAAW;AAAA,EACnB,CAAK;AACL;AAWO,SAAS,iBAAiB,UAAU;AACvC,QAAM,WAAW,cAAc,QAAQ;AACvC,MAAI,CAAC,UAAU;AACX,WAAO;AAAA,EACX;AAEA,WAAS,QAAQ,KAAK,SAAS,wBAAwB,SAAS,yBAAyB;AACrF,UAAM,QAAQ,SAAS,IAAI,CAAC,YAAY,KAAK,MAAO,UAAU,QAAS,GAAG,CAAC;AAC3E,QAAI,oBAAoB,KAAK,KAAK,mBAAmB;AACjD,aAAO,IAAI,MAAM,IAAI,CAAC,YAAY,QAAQ,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;AAAA,IACrF;AAAA,EACJ;AACA,SAAO,IAAI,SAAS,IAAI,CAAC,YAAY,KAAK,MAAO,UAAU,yBAA0B,GAAG,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;AACrI;AAQA,SAAS,cAAc,OAAO;AAC1B,QAAM,QAAQ,gCAAgC,KAAK,OAAO,SAAS,EAAE,EAAE,MAAM;AAC7E,MAAI,CAAC,OAAO;AACR,WAAO;AAAA,EACX;AACA,QAAM,SAAS,MAAM,CAAC,EAAE,WAAW,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,QAAQ,KAAK,EAAE,KAAK,EAAE,IAAI,MAAM,CAAC;AACrG,SAAO,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,UAAU,SAAS,OAAO,MAAM,OAAO,QAAQ,CAAC,GAAG,EAAE,CAAC;AAChF;AAQA,SAAS,oBAAoB,UAAU;AACnC,QAAM,CAAC,KAAK,OAAO,IAAI,IAAI,SAAS,IAAI,CAAC,YAAY;AACjD,UAAM,OAAO,UAAU;AACvB,WAAO,QAAQ,UAAU,OAAO,UAAU,OAAO,SAAS,UAAU;AAAA,EACxE,CAAC;AACD,QAAM,YAAY,SAAS,MAAM,SAAS,QAAQ,SAAS;AAC3D,SAAO,QAAQ,YAAY;AAC/B;AAOY,MAAC,cAAc,OAAO,OAAO;AAAA,EACrC,OAAO,OAAO,OAAO,EAAC,MAAM,gBAAgB,MAAM,MAAM,WAAW,gBAAgB,MAAM,OAAO,QAAQ,eAAe,aAAa,cAAa,CAAC;AAAA,EAClJ,MAAM,OAAO,OAAO,EAAC,MAAM,gBAAgB,KAAK,MAAM,WAAW,gBAAgB,KAAK,OAAO,QAAQ,eAAe,aAAa,cAAa,CAAC;AACnJ,CAAC;AASM,SAAS,eAAe,OAAO;AAClC,SAAO,UAAU,KAAK,EAAE,SAAS;AACrC;AAGA,SAAS,YAAY,OAAO;AACxB,SAAO,mBAAmB,KAAK;AACnC;AAGA,SAAS,cAAc,OAAO,YAAY;AACtC,SAAO,MAAM,SAAS,QAAQ,UAAU;AAC5C;AAaO,SAAS,kBAAkB,OAAO,EAAC,SAAS,yBAAwB,IAAI,CAAA,GAAI;AAC/E,QAAM,OAAO,EAAC,iBAAiB,QAAQ,gBAAgB,QAAQ,sBAAsB,QAAQ,cAAc,cAAc,OAAO,MAAM,EAAC;AACvI,QAAM,QAAQ,eAAe,KAAK;AAClC,MAAI,OAAO;AACP,WAAO;AAAA,MACH,GAAG;AAAA,MACH,iBAAiB,MAAM;AAAA,MACvB,WAAW,YAAY,MAAM,MAAM;AAAA,MACnC,WAAW,EAAC,iBAAiB,MAAM,WAAW,WAAW,YAAY,MAAM,WAAW,EAAC;AAAA,IACnG;AAAA,EACI;AACA,QAAM,EAAC,OAAO,KAAI,IAAI;AACtB,SAAO;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,MAAkB;AAAA,MACjB,EAAC,iBAAiB,MAAM,MAAM,WAAW,YAAY,MAAM,MAAM,GAAG,WAAW,EAAC,iBAAiB,MAAM,WAAW,WAAW,YAAY,MAAM,WAAW,EAAC,EAAC;AAAA,MAC5J,EAAC,iBAAiB,KAAK,MAAM,WAAW,YAAY,KAAK,MAAM,GAAG,WAAW,EAAC,iBAAiB,KAAK,WAAW,WAAW,YAAY,KAAK,WAAW,EAAC,EAAC;AAAA,IAAC;AAAA,EACrK;AACA;AAWO,SAAS,iBAAiB,OAAO;AACpC,QAAM,cAAc,CAAC,WAAW;AAAA,IAC5B,wBAAwB,MAAM;AAAA,IAC9B,8BAA8B,MAAM;AAAA,IACpC,wBAAwB,YAAY,MAAM,MAAM;AAAA,IAChD,8BAA8B,YAAY,MAAM,WAAW;AAAA,EACnE;AACI,QAAM,QAAQ,eAAe,KAAK;AAClC,MAAI,OAAO;AACP,WAAO,YAAY,KAAK;AAAA,EAC5B;AACA,SAAO,EAAC,GAAG,YAAY,YAAY,KAAK,GAAG,GAAG,MAAM,YAAY,QAAQ,YAAY,YAAY,IAAI,CAAC,EAAC;AAC1G;AAQO,SAAS,yBAAyB,OAAO;AAC5C,SAAO;AAAA,IACH,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,cAAc,cAAc,OAAO,wBAAwB;AAAA,IAC3D,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,WAAW,EAAC,iBAAiB,mCAAmC,WAAW,kCAAiC;AAAA,EACpH;AACA;AASO,SAAS,oBAAoB,OAAO;AACvC,QAAM,QAAQ,UAAU,KAAK,EAAE,WAAW;AAC1C,SAAO;AAAA,IACH,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,cAAc;AAAA,IACd,GAAG,kBAAkB,OAAO;AAAA,MACxB,iBAAiB,aAAa,MAAM;AAAA,MACpC,WAAW,aAAa,aAAa,MAAM,IAAI;AAAA,MAC/C,WAAW,EAAC,iBAAiB,aAAa,MAAM,MAAK;AAAA,IACjE,GAAW;AAAA,MACC,iBAAiB,aAAa,KAAK;AAAA,MACnC,WAAW,aAAa,aAAa,KAAK,IAAI;AAAA,MAC9C,WAAW,EAAC,iBAAiB,aAAa,KAAK,MAAK;AAAA,IAChE,CAAS;AAAA,IACD,GAAG,gBAAgB,EAAC,iBAAiB,OAAO,gBAAgB,QAAQ,sBAAsB,OAAM,CAAC;AAAA,EACzG;AACA;AAcO,SAAS,mBAAmB,OAAO,YAAY,WAAW;AAC7D,QAAM,UAAU,UAAU,KAAK;AAC/B,QAAM,QAAQ,QAAQ,SAAS,KAAK,QAAQ,SAAS;AACrD,QAAM,OAAO,MAAM;AACnB,SAAO,kBAAkB,OAAO,EAAC,OAAO,sBAAsB,IAAI,IAAI,IAAI,YAAW,GAAG,EAAC,OAAO,sBAAsB,IAAI,IAAI,IAAI,YAAW,CAAC;AAClJ;AAgBO,SAAS,uBAAuB,aAAa,EAAC,SAAQ,IAAI,CAAA,GAAI;AACjE,SAAO;AAAA,IACH,WAAW;AAAA,IACX,GAAI,YAAY,EAAC,SAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,IAKzB,aAAa;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,8BAA8B,EAAC,QAAQ,SAAQ;AAAA,MAC/C,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,GAAG;AAAA,IACf;AAAA,EACA;AACA;AAUO,SAAS,oBAAoB,OAAO;AACvC,QAAM,UAAU,UAAU,KAAK;AAC/B,QAAM,SAAS,CAAC,UAAU,UAAU;AAAA,IAChC,8DAA8D,MAAM,OAAO,IAAI,SAAS,OAAO;AAAA,IAC/F,iEAAiE,MAAM,IAAI,IAAI,SAAS,IAAI;AAAA,IAC5F,iEAAiE,MAAM,MAAM,IAAI,SAAS,MAAM;AAAA,IAChG,gEAAgE,MAAM,IAAI,IAAI,SAAS,MAAM;AAAA,EACrG,EAAM,KAAK,IAAI;AACX,QAAM,aAAa,EAAC,SAAS,QAAQ,QAAQ,MAAM,MAAM,QAAQ,KAAK,MAAM,QAAQ,QAAQ,QAAQ,MAAK;AAGzG,QAAM,YAAY,EAAC,SAAS,QAAQ,QAAQ,MAAM,MAAM,QAAQ,KAAK,MAAM,QAAQ,QAAQ,QAAQ,KAAI;AACvG,SAAO;AAAA,IACH,GAAG,kBAAkB,OAAO,EAAC,iBAAiB,QAAQ,WAAW,QAAO,GAAG,EAAC,iBAAiB,YAAY,KAAI,CAAC;AAAA,IAC9G,GAAG,uBAAuB;AAAA,MAAkB;AAAA,MACxC,EAAC,iBAAiB,QAAQ,WAAW,SAAS,iBAAiB,OAAO,wBAAwB,UAAU,EAAC;AAAA,MACzG,EAAC,iBAAiB,YAAY,MAAM,iBAAiB,OAAO,uBAAuB,SAAS,EAAC;AAAA,IAAC,CAAC;AAAA,EAC3G;AACA;AAGA,MAAM,2BAA2B;AACjC,MAAM,0BAA0B;AAUzB,SAAS,mBAAmB,OAAO;AACtC,QAAM,UAAU,UAAU,KAAK;AAC/B,QAAM,SAAS,CAAC,WAAW,sBAAsB,MAAM,IAAI,wBAAwB;AACnF,QAAM,OAAO,QAAQ,uBAAuB;AAE5C,QAAM,OAAO;AACb,SAAO;AAAA,IACH,GAAG,kBAAkB,OAAO,EAAC,iBAAiB,OAAO,QAAQ,WAAW,OAAO,EAAC,GAAG,EAAC,iBAAiB,OAAO,YAAY,IAAI,EAAC,CAAC;AAAA,IAC9H,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,GAAG,gBAAgB,EAAC,iBAAiB,QAAQ,WAAW,SAAS,gBAAgB,QAAQ,sBAAsB,OAAM,CAAC;AAAA,EAC9H;AACA;"}
+{"version":3,"file":"glassSurface.js","sources":["../../src/theme/glassSurface.js"],"sourcesContent":["// El «vidrio líquido» (Liquid Glass de Apple, 2025) en su versión de CSS: una superficie poco transparente que deja ver,\n// desenfocado, lo que pasa por detrás, con un brillo en el borde de arriba. La guía de Apple (Human Interface Guidelines,\n// «Materials»: https://developer.apple.com/design/human-interface-guidelines/materials) separa dos capas, y aquí igual:\n//   - VIDRIO (glassStylesOf): «a distinct functional layer for controls and navigation elements… that floats above the\n//     content layer». En el framework: la barra de arriba, el menú lateral, los menús y ventanitas, los diálogos, los\n//     tooltips, los avisos, el panel de descargas, el botón flotante y, en los controles, la «gota» que marca lo elegido.\n//   - MATERIAL (materialStylesOf): «Don't use Liquid Glass in the content layer»; el contenido usa los materiales estándar\n//     (vidrio esmerilado, sin el brillo del borde) y los gruesos, más opacos, porque «provide better contrast for text».\n//     Es lo que llevan las tarjetas con createToolkitTheme({glass: {surfaces: true}}).\n//\n// Decisiones, con su porqué:\n//   - 60 % opaco por omisión. Con 80 %, en claro el vidrio era casi blanco sobre un lienzo casi blanco y se leía como\n//     «cápsulas con sombra» (lo dijo el autor), no como vidrio: Apple dice que el vidrio «has no inherent color, and\n//     instead takes on colors from the content directly behind it», y para eso tiene que dejar pasar el color. El material\n//     del contenido es «delgado» (MATERIAL_OPACITY_OFFSET): con 74 % las tarjetas se veían planas, de un solo color (lo dijo\n//     el autor); con el desenfoque de 20 px el texto se sigue leyendo. El proyecto lo cambia con\n//     createToolkitTheme({glass: {opacity: 0.8}}), que mueve las dos.\n//   - Lo que dibuja el vidrio es su filo de luz, como la orilla de una lente: brillante arriba a la izquierda (de donde\n//     viene la luz), más suave abajo a la derecha, y un resplandor por dentro; la sombra de afuera es corta.\n//   - Se pinta sólido si la persona pidió menos transparencia o más contraste en su equipo, o si el navegador no sabe\n//     desenfocar: la misma guía pide respetar «Reducir transparencia», y Apple tuvo que agregar el control en iOS 26.1\n//     porque el texto sobre vidrio no se leía.\n//   - Con vidrio, el lienzo lleva unas manchas de color (ambientBackgroundOf): sobre un lienzo liso, el vidrio no\n//     se distingue de una superficie sólida, porque no hay nada que desenfocar.\n//   - Esquinas concéntricas: la de afuera es la de adentro más el margen (los renglones del menú lateral son de 12 px a 8 px\n//     del borde, así que el panel es de 20 px). Apple lo pide así; si no, las esquinas «no casan» y se nota.\n//   - Sin refracción (la lupa que deforma lo de atrás): en la web solo sale con filtros SVG que hoy funcionan nada más en\n//     Chrome, o con WebGL. Esto es la versión que funciona en todos.\n//   - color-mix y no alpha(): sirve igual con las variables CSS del tema (var(--mui-palette-…)) que con un color normal.\n//\n// OJO: backdrop-filter vuelve a la superficie el «contenedor» de lo que lleve adentro con position: fixed. Lo que deba\n// quedar fijo a la ventana va fuera de ella (los menús de MUI ya van en un portal).\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {lightDarkStylesOf} from '@/theme/lightDarkStyles.js';\nimport {cssTokenOf} from '@/theme/cssTokens.js';\n\n/** Qué tan opaca es la superficie (0 a 1). */\nexport const GLASS_OPACITY = 0.6;\n\n/** Las esquinas de lo que flota grande (menú lateral, barra, diálogos): renglones de 12 px a 8 px del borde. */\nexport const GLASS_PANEL_RADIUS_PIXELS = 20;\n\n/** Las esquinas de los menús y ventanitas: renglones de 8 px a 4 px del borde. */\nexport const GLASS_MENU_RADIUS_PIXELS = 12;\n\n// las esquinas y el desenfoque como variables CSS que el proyecto cambia de un jalón (cssTokens.js), con el valor de siempre\n// como respaldo\nexport const PANEL_RADIUS = cssTokenOf('panelRadius', `${GLASS_PANEL_RADIUS_PIXELS}px`);\nexport const MENU_RADIUS = cssTokenOf('menuRadius', `${GLASS_MENU_RADIUS_PIXELS}px`);\n\n/**\n * Lo que se separa de la orilla de la ventana lo que flota (la barra, el menú lateral, los cajones y la hoja de abajo):\n * Apple lo pide para que el contenido se asome por detrás («half sheets are inset from the edge of the display to allow\n * content to peek through from beneath them», Adopting Liquid Glass).\n */\nexport const GLASS_INSET_PIXELS = 8;\n\nexport const GLASS_BLUR = `blur(${cssTokenOf('glassBlur')}) saturate(${cssTokenOf('glassSaturate')})`;\n\n/**\n * El lente de cada tamaño (ver lensRulesOf), medido en capturas de Chrome: el control chico (botón, chip) más claro y con\n * la orilla más marcada; el panel (barra, menú, diálogo) más grueso, porque lleva texto («Liquid Glass appears more opaque\n * in larger elements like sidebars to preserve legibility», HIG «Color»). edgeFraction y scale van en fracción del tamaño\n * del vidrio; clearerBy es cuánto menos tinte lleva que el esmerilado.\n */\nexport const GLASS_LENS = Object.freeze({\n    control: {filterId: 'toolkit-glass-lens-control', edgeFraction: 0.25, scale: 0.2, blurPixels: 3, clearerBy: 0.25},\n    panel: {filterId: 'toolkit-glass-lens-panel', edgeFraction: 0.12, scale: 0.05, blurPixels: 10, clearerBy: 0.1},\n});\n\n// el gris de la gota en oscuro (por ciento de blanco): lo elegido se tiene que notar (glassDropOf)\nconst DARK_DROP_WHITE_PERCENT = 18;\n// cuánto negro (en claro) o blanco (en oscuro) lleva un texto del color del tema para leerse (accentTextStylesOf)\nconst ACCENT_TEXT_SHADE_PERCENT = 30;\n// el pozo de los campos (fieldWellStylesOf): el gris de relleno de Apple en claro y un oscurecido en oscuro\nconst FIELD_WELL_RADIUS_PIXELS = 12;\nconst FIELD_WELL_FILL = Object.freeze({\n    light: {rest: 'rgba(118, 118, 128, 0.12)', hover: 'rgba(118, 118, 128, 0.18)'},\n    // en oscuro el gris de Apple, MÁS CLARO que lo de atrás (su «tertiary fill»): con negro al 32 % el campo se perdía\n    dark: {rest: 'rgba(118, 118, 128, 0.24)', hover: 'rgba(118, 118, 128, 0.30)'},\n});\n// el campo suelto sobre el lienzo (canvasFieldStylesOf): lámina clara en claro, oscura en oscuro, con su filo\nconst CANVAS_FIELD = Object.freeze({\n    light: {rest: 'rgba(255, 255, 255, 0.62)', hover: 'rgba(255, 255, 255, 0.78)', edge: 'rgba(15, 23, 42, 0.10)'},\n    // en oscuro, el gris de relleno de Apple (más claro que el fondo). Con negro al 34 % el campo contra el fondo casi negro\n    // medía 1.01 : 1 y no se veía (lo reportaron: el buscador «se pierde»); con este, 1.26 : 1, y su filo aparte\n    dark: {rest: 'rgba(118, 118, 128, 0.24)', hover: 'rgba(118, 118, 128, 0.30)', edge: 'rgba(255, 255, 255, 0.10)'},\n});\n// el contraste mínimo de WCAG para letra normal, y cómo se oscurece un relleno hasta lograrlo (whiteLabelFillOf)\nconst MIN_TEXT_CONTRAST = 4.5;\nconst FILL_SHARE_STEP_PERCENT = 5;\nconst MIN_FILL_SHARE_PERCENT = 30;\n\n/** La marca que GlassLensFilter pone en <body> cuando el navegador sí pinta el lente. */\nexport const GLASS_LENS_FLAG_SELECTOR = 'body[data-glass-lens=\"on\"]';\n\n/**\n * El selector de «este control está dentro de una tarjeta» (cualquier Paper: tarjeta, diálogo, menú), donde el control ya\n * no es vidrio. Va en dos versiones, sin y con la marca del lente: la regla del lente (una etiqueta y dos clases) le ganaba\n * a la de la tarjeta (dos clases) y los botones dentro de una tarjeta volvían a ser vidrio. Medido en Chrome.\n *\n * @param {string} [suffix] lo que va pegado al control (p. ej. ':not(.MuiButtonGroup-grouped)')\n * @returns {string}\n */\nexport function insideContentSelectorOf(suffix = '') {\n    return `.MuiPaper-root &${suffix}, ${GLASS_LENS_FLAG_SELECTOR} .MuiPaper-root &${suffix}`;\n}\nconst REDUCED_TRANSPARENCY_QUERY = '@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)';\nconst NO_BACKDROP_FILTER_QUERY = '@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))';\n\n// qué tan fuertes son las manchas del lienzo (por ciento del color). En oscuro van MÁS fuertes que en claro: sobre un lienzo\n// casi negro, unas manchas tenues no dan nada que desenfocar y el vidrio se ve como un gris sólido.\n// La de en medio (center) va detrás del contenido: sin ella, en claro las tarjetas de vidrio quedaban sobre blanco y se\n// veían sólidas (medido en las capturas de Chrome).\nconst AMBIENT_STRENGTH_LIGHT = Object.freeze({primary: 40, info: 30, accent: 30, center: 16});\n// en oscuro: manchas de los tonos oscuros sobre un casi negro con un toque azul (como los fondos oscuros de Apple). Antes\n// eran los tonos vivos al 36 % sobre #0A0A0A: aclaraban el fondo hasta el gris de las tarjetas y los elementos se perdían\n// (lo reportaron; medido: tarjeta contra fondo 1.12 : 1). Ahora 1.28 : 1 en el peor punto\nconst AMBIENT_STRENGTH_DARK = Object.freeze({primary: 18, info: 18, accent: 12, center: 10});\nconst DARK_CANVAS = Object.freeze({base: '#05070B'});\n\n// el filo de la lente: la luz de arriba a la izquierda (rimLight), la de abajo a la derecha más suave (rimShade), un\n// resplandor por dentro (innerGlow), una línea fina de afuera que lo separa del lienzo (outline) y la sombra que lo\n// despega (shadow). En oscuro el filo es más tenue, pero la sombra más fuerte: una negra suave no se ve sobre casi negro.\n// Un control chico (botón, chip) lleva una sombra corta (controlShadow): la de un panel se veía como neblina alrededor y,\n// dentro de una tira que se desliza (los filtros rápidos), la tira la cortaba en un rectángulo.\nconst GLASS_EDGE_LIGHT = Object.freeze({\n    rimLight: 'rgba(255, 255, 255, 0.95)', rimShade: 'rgba(255, 255, 255, 0.5)', innerGlow: 'rgba(255, 255, 255, 0.45)',\n    outline: 'rgba(15, 23, 42, 0.07)', shadow: '0 6px 20px rgba(15, 23, 42, 0.10)',\n    controlShadow: '0 1px 2px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06)',\n});\nconst GLASS_EDGE_DARK = Object.freeze({\n    rimLight: 'rgba(255, 255, 255, 0.32)', rimShade: 'rgba(255, 255, 255, 0.12)', innerGlow: 'rgba(255, 255, 255, 0.07)',\n    outline: 'rgba(0, 0, 0, 0.35)', shadow: '0 8px 28px rgba(0, 0, 0, 0.45)',\n    controlShadow: '0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.25)',\n});\n// lo ancho del resplandor de adentro (px): lo que se ve como el grosor del vidrio en la orilla\nconst INNER_GLOW_PIXELS = 12;\n// en oscuro el vidrio se aclara un poco sobre su color: un gris igual de oscuro que el lienzo no se distingue de él aunque\n// desenfoque. Es lo que Apple hace en oscuro: lo que va al frente usa los colores «elevated», más claros, «making\n// foreground interfaces appear to advance» (HIG, Dark Mode). Con 8 % las tarjetas y los controles se perdían en el fondo\n// oscuro (lo reportaron); con 16 % y el lienzo nuevo (DARK_CANVAS) la tarjeta se separa 1.28 : 1 del fondo y el control\n// 1.32 : 1 (medido; Apple, su tarjeta #1C1C1E sobre negro: 1.23 : 1)\nconst DARK_GLASS_LIFT_PERCENT = 16;\n\n// el material del contenido: sin brillo de borde (eso es del vidrio de los controles), con una línea fina de afuera que lo\n// separa del lienzo y una sombra suave. En oscuro la línea es clara: una oscura no se ve sobre casi negro\nconst MATERIAL_EDGE_LIGHT = Object.freeze({outline: 'rgba(15, 23, 42, 0.08)', shadow: '0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06)'});\nconst MATERIAL_EDGE_DARK = Object.freeze({outline: 'rgba(255, 255, 255, 0.08)', shadow: '0 8px 24px rgba(0, 0, 0, 0.35)'});\n// el material del contenido es «delgado» (HIG «Materials»: «Thinner materials… help people retain their context by\n// providing a visible reminder of the content that's in the background»): menos opaco que el vidrio de los controles. Con\n// el «grueso» (+0.14, 74 %) las tarjetas se veían planas; el texto se lee por el desenfoque de 20 px, y con «Reducir\n// transparencia» se pinta sólido. En oscuro resta menos: con 45 % la tarjeta casi no se separaba del fondo (medido 1.12 : 1)\nconst MATERIAL_OPACITY_OFFSET = Object.freeze({light: -0.15, dark: -0.05});\n// el material «grueso» (por ciento): tapa lo que pasa por debajo, como la columna fija de una tabla\nconst THICK_MATERIAL_PERCENT = 92;\n\n/**\n * Si el tema trae el vidrio prendido (createToolkitTheme({glass: …})). Lo usan los componentes del framework que flotan\n * (el marco, el panel de descargas, los avisos) y lo puede usar el proyecto para lo suyo.\n *\n * @param {object} theme el tema de MUI\n * @returns {boolean}\n */\nexport function isGlassTheme(theme) {\n    return Boolean(theme?.toolkit?.glass);\n}\n\n/**\n * La opacidad del vidrio del tema: la que pidió el proyecto o GLASS_OPACITY.\n *\n * @param {object} theme\n * @returns {number}\n */\nexport function glassOpacityOf(theme) {\n    return theme?.toolkit?.glass?.opacity ?? GLASS_OPACITY;\n}\n\n/**\n * El estilo de una superficie de vidrio sobre un color.\n *\n * @param {string} solidColor el color sólido de la superficie (p. ej. palette.background.paper o primary.main)\n * @param {object} [options]\n * @param {number} [options.opacity] por omisión GLASS_OPACITY\n * @param {boolean} [options.isDark] en oscuro el vidrio se aclara un poco y su filo brilla más\n * @param {boolean} [options.isControl] un control chico (botón, chip): sombra corta en vez de la de un panel\n * @returns {object} estilos para styleOverrides o sx\n */\nexport function glassSurfaceOf(solidColor, {opacity = GLASS_OPACITY, isDark = false, isControl = false} = {}) {\n    const edge = isDark ? GLASS_EDGE_DARK : GLASS_EDGE_LIGHT;\n    const tint = isDark ? `color-mix(in srgb, ${solidColor}, white ${DARK_GLASS_LIFT_PERCENT}%)` : solidColor;\n    return {\n        backgroundColor: `color-mix(in srgb, ${tint} ${Math.round(opacity * 100)}%, transparent)`,\n        backdropFilter: GLASS_BLUR,\n        WebkitBackdropFilter: GLASS_BLUR,\n        backgroundImage: 'linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 40%)',\n        boxShadow: [\n            `inset 1px 1px 0 ${edge.rimLight}`,\n            `inset -1px -1px 0 ${edge.rimShade}`,\n            `inset 0 0 ${INNER_GLOW_PIXELS}px ${edge.innerGlow}`,\n            `0 0 0 1px ${edge.outline}`,\n            isControl ? edge.controlShadow : edge.shadow,\n        ].join(', '),\n        ...solidFallbackOf({backgroundColor: solidColor, backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n    };\n}\n\n/**\n * Lo que se pinta en lugar del vidrio si la persona pidió menos transparencia o más contraste, o si el navegador no sabe\n * desenfocar. Para lo transparente que no es una superficie (el fondo oscuro detrás de un diálogo, la perilla del\n * deslizador al arrastrarla).\n *\n * @param {object} solidStyle los estilos sólidos\n * @returns {object}\n */\nexport function solidFallbackOf(solidStyle) {\n    return {[REDUCED_TRANSPARENCY_QUERY]: solidStyle, [NO_BACKDROP_FILTER_QUERY]: solidStyle};\n}\n\n/**\n * El vidrio sobre un color del tema en claro y en oscuro, con la opacidad del tema. Es lo que usan los ajustes de\n * componentes, y lo que usa el proyecto para algo suyo que flote:\n *   sx={(theme) => glassStylesOf(theme)}                                          // sobre el color de las tarjetas\n *   sx={(theme) => glassStylesOf(theme, {color: paletteOf(theme).primary.main})}  // vidrio del color principal\n *\n * @param {object} theme el tema de MUI\n * @param {object} [options]\n * @param {string} [options.color] el color de la superficie; por omisión el de las tarjetas (background.paper)\n * @param {string} [options.darkColor] el de modo oscuro, si es otro; por omisión el mismo\n * @param {number} [options.opacity] por omisión la del tema\n * @param {boolean} [options.isControl] un control chico (botón, chip): sombra corta en vez de la de un panel\n * @returns {object}\n */\nexport function glassStylesOf(theme, {color, darkColor, opacity, isControl = false} = {}) {\n    const lightColor = color ?? paletteOf(theme).background.paper;\n    const glassOpacity = opacity ?? glassOpacityOf(theme);\n    return {\n        ...lightDarkStylesOf(theme,\n            glassSurfaceOf(lightColor, {opacity: glassOpacity, isControl}),\n            glassSurfaceOf(darkColor ?? lightColor, {opacity: glassOpacity, isDark: true, isControl})),\n        ...lensRulesOf(theme, {lightColor, darkColor: darkColor ?? lightColor, opacity: glassOpacity, isControl}),\n    };\n}\n\n/**\n * El LENTE: lo que, según Apple, define al vidrio líquido («The primary way Liquid Glass visually defines itself is through\n * something called Lensing… previous materials scattered light, this new set of materials dynamically bends, shapes, and\n * concentrates light», WWDC25 «Meet Liquid Glass»). La orilla dobla lo de atrás (un filtro SVG de desplazamiento,\n * GlassLensFilter) y el centro queda más claro: menos tinte y menos desenfoque que el esmerilado.\n *\n * Solo en Chrome y sus parientes (Edge, Brave, Arc): son los únicos que aplican un filtro SVG en backdrop-filter; Firefox\n * lo acepta sin pintarlo (el vidrio se quedaría sin desenfoque) y Safari no lo entiende. Por eso va detrás de la marca que\n * GlassLensFilter pone en <body> solo en esos navegadores; en los demás queda el esmerilado. Con «Reducir transparencia» o\n * «Aumentar contraste» se pinta sólido igual que siempre.\n *\n * OJO: el modo oscuro va en su propia regla y no anidado: el selector de oscuro vive en <html> y, anidado debajo de la\n * marca de <body>, buscaría un .dark DENTRO de <body> y nunca coincidiría.\n *\n * @param {object} theme\n * @param {{lightColor: string, darkColor: string, opacity: number, isControl: boolean}} options\n * @returns {object}\n */\nfunction lensRulesOf(theme, {lightColor, darkColor, opacity, isControl}) {\n    const lens = isControl ? GLASS_LENS.control : GLASS_LENS.panel;\n    const lensOpacity = Math.max(0, opacity - lens.clearerBy);\n    const backdrop = `blur(${lens.blurPixels}px) saturate(180%) url(#${lens.filterId})`;\n    const lensSurfaceOf = (solidColor, isDark) => {\n        const tint = isDark ? `color-mix(in srgb, ${solidColor}, white ${DARK_GLASS_LIFT_PERCENT}%)` : solidColor;\n        return {\n            backgroundColor: `color-mix(in srgb, ${tint} ${Math.round(lensOpacity * 100)}%, transparent)`,\n            backdropFilter: backdrop,\n            WebkitBackdropFilter: backdrop,\n            ...solidFallbackOf({backgroundColor: solidColor, backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n        };\n    };\n    const lensKey = `${GLASS_LENS_FLAG_SELECTOR} &`;\n    // la regla de oscuro del tema: un selector (*:where(.dark) &) o una media query, según cómo elija el modo el proyecto\n    const darkKey = Object.keys(theme.applyStyles('dark', {}))[0];\n    if (!darkKey) {\n        return {[lensKey]: lensSurfaceOf(lightColor, false)};\n    }\n    const darkLens = darkKey.startsWith('@')\n        ? {[darkKey]: {[lensKey]: lensSurfaceOf(darkColor, true)}}\n        : {[darkKey.replace('&', lensKey)]: lensSurfaceOf(darkColor, true)};\n    return {[lensKey]: lensSurfaceOf(lightColor, false), ...darkLens};\n}\n\n/**\n * El mapa de desplazamiento del lente (una imagen SVG): rojo para lo de lado y verde para lo de arriba abajo; 128 en medio\n * es «no mover». En la orilla de la izquierda y la de arriba vale más (toma de adentro) y en la de la derecha y la de\n * abajo, menos (también de adentro): así la orilla dobla lo de atrás hacia el centro, como una lente convexa, y nunca toma\n * de afuera del vidrio (afuera no hay imagen y la orilla se quedaba en blanco).\n *\n * @param {number} edgeFraction lo ancho de la orilla que dobla (0 a 0.5 del tamaño del vidrio)\n * @returns {string} data URI para el feImage del filtro\n */\nexport function lensDisplacementMapOf(edgeFraction) {\n    const inner = 1 - edgeFraction;\n    const svg = '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" preserveAspectRatio=\"none\"><defs>'\n        + `<linearGradient id=\"x\" x1=\"0\" x2=\"1\"><stop offset=\"0\" stop-color=\"#ff0000\"/><stop offset=\"${edgeFraction}\" stop-color=\"#800000\"/>`\n        + `<stop offset=\"${inner}\" stop-color=\"#800000\"/><stop offset=\"1\" stop-color=\"#000000\"/></linearGradient>`\n        + `<linearGradient id=\"y\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#00ff00\"/><stop offset=\"${edgeFraction}\" stop-color=\"#008000\"/>`\n        + `<stop offset=\"${inner}\" stop-color=\"#008000\"/><stop offset=\"1\" stop-color=\"#000000\"/></linearGradient>`\n        + '</defs><rect width=\"100\" height=\"100\" fill=\"url(#x)\"/><rect width=\"100\" height=\"100\" fill=\"url(#y)\" style=\"mix-blend-mode:screen\"/></svg>';\n    return `data:image/svg+xml,${encodeURIComponent(svg)}`;\n}\n\n/**\n * El material del contenido sobre un color: esmerilado como el vidrio pero sin el brillo del borde, y más transparente.\n *\n * @param {string} solidColor\n * @param {object} [options]\n * @param {number} [options.opacity] la del vidrio; el material le suma MATERIAL_OPACITY_OFFSET de su modo (le resta)\n * @param {boolean} [options.isDark]\n * @returns {object}\n */\nexport function materialSurfaceOf(solidColor, {opacity = GLASS_OPACITY, isDark = false} = {}) {\n    const edge = isDark ? MATERIAL_EDGE_DARK : MATERIAL_EDGE_LIGHT;\n    const tint = isDark ? `color-mix(in srgb, ${solidColor}, white ${DARK_GLASS_LIFT_PERCENT}%)` : solidColor;\n    const offset = isDark ? MATERIAL_OPACITY_OFFSET.dark : MATERIAL_OPACITY_OFFSET.light;\n    const materialOpacity = Math.min(1, Math.max(0, opacity + offset));\n    return {\n        backgroundColor: `color-mix(in srgb, ${tint} ${Math.round(materialOpacity * 100)}%, transparent)`,\n        backdropFilter: GLASS_BLUR,\n        WebkitBackdropFilter: GLASS_BLUR,\n        backgroundImage: 'none',\n        boxShadow: `0 0 0 1px ${edge.outline}, ${edge.shadow}`,\n        ...solidFallbackOf({backgroundColor: solidColor, backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n    };\n}\n\n/**\n * El material del contenido en claro y en oscuro (las tarjetas con glass: {surfaces: true}). Para algo del proyecto que va\n * en el contenido: sx={(theme) => materialStylesOf(theme)}.\n *\n * @param {object} theme\n * @param {object} [options]\n * @param {string} [options.color] por omisión el de las tarjetas (background.paper)\n * @param {string} [options.darkColor] por omisión el mismo\n * @returns {object}\n */\nexport function materialStylesOf(theme, {color, darkColor} = {}) {\n    const lightColor = color ?? paletteOf(theme).background.paper;\n    const opacity = glassOpacityOf(theme);\n    return lightDarkStylesOf(theme, materialSurfaceOf(lightColor, {opacity}), materialSurfaceOf(darkColor ?? lightColor, {opacity, isDark: true}));\n}\n\n/**\n * Solo el fondo del material, sin su línea ni su sombra: para lo que va DENTRO de una tarjeta y debe tapar lo que pasa por\n * debajo sin verse como un parche sólido (la columna pegada de la tabla al deslizarla de lado). Va como capa\n * (background-image) y no como color: así el color propio del elemento (el del renglón: la cebra, el cursor encima) se\n * sigue pintando encima.\n *\n * Con {thick: true}, el material «grueso» de Apple (HIG «Materials»: los gruesos son para leer sobre otro contenido): el\n * mismo desenfoque al 92 %. Es el de la columna fija de una tabla: con el delgado de la tarjeta (45 a 55 %) se veían pasar\n * por detrás las otras columnas (lo reportaron).\n *\n * @param {object} theme\n * @param {object} [options]\n * @param {boolean} [options.thick] el material grueso, para tapar lo que pasa por debajo\n * @returns {object}\n */\nexport function materialBackgroundOf(theme, {thick = false} = {}) {\n    const paper = paletteOf(theme).background.paper;\n    const opacityOf = (offset) => (thick ? THICK_MATERIAL_PERCENT : Math.round(Math.min(1, Math.max(0, glassOpacityOf(theme) + offset)) * 100));\n    const layerOf = (color) => `linear-gradient(${color}, ${color})`;\n    const frostedOf = (tint, opacity) => ({\n        backgroundImage: layerOf(`color-mix(in srgb, ${tint} ${opacity}%, transparent)`),\n        backdropFilter: GLASS_BLUR,\n        WebkitBackdropFilter: GLASS_BLUR,\n    });\n    return {\n        ...lightDarkStylesOf(theme,\n            frostedOf(paper, opacityOf(MATERIAL_OPACITY_OFFSET.light)),\n            frostedOf(`color-mix(in srgb, ${paper}, white ${DARK_GLASS_LIFT_PERCENT}%)`, opacityOf(MATERIAL_OPACITY_OFFSET.dark))),\n        ...solidFallbackOf({backgroundImage: layerOf(paper), backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n    };\n}\n\n/**\n * La «gota» que marca lo elegido dentro de un control (la pestaña, la opción, el renglón del menú lateral): en claro, una\n * pastilla blanca con su brillo y su sombra; en oscuro, un relleno gris parejo, como el renglón elegido de las barras\n * laterales de Apple en oscuro. No es transparente del todo: va DENTRO de algo que ya puede ser de vidrio (un menú), y\n * vidrio sobre vidrio no se lee.\n * OJO, oscuro: con blanco al 14 % casi no se veía, y su línea de luz arriba dibujaba un arco raro en la esquina («no se\n * nota la selección», «se ve raro»; lo reportaron). Va al 18 % y sin línea.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function glassDropOf(theme) {\n    const palette = paletteOf(theme);\n    return lightDarkStylesOf(theme, {\n        backgroundColor: palette.background.paper,\n        color: palette.text.primary,\n        boxShadow: 'inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08)',\n    }, {\n        backgroundColor: `color-mix(in srgb, ${palette.common.white} ${DARK_DROP_WHITE_PERCENT}%, transparent)`,\n        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.35)',\n    });\n}\n\n/**\n * El relleno de un control lleno de color (el botón principal, la etiqueta elegida) para llevar letra BLANCA y que se lea:\n * el color del tema oscurecido lo justo para llegar a 4.5 : 1 (WCAG). En oscuro la paleta trae letra negra sobre el\n * naranja («El suyo», «Guardar»: se veía feo, lo reportaron) y el blanco sobre el naranja tal cual da 2.85 : 1; con el\n * naranja al 75 % y blanco da 4.79 : 1. Se calcula con el color que elija el proyecto, no con uno fijo.\n *\n * @param {string} rawColor el color en #RRGGBB o #RGB (el de la paleta, no la variable CSS)\n * @returns {string|null} el relleno en #RRGGBB; null si el color no viene en hexadecimal\n */\nexport function whiteLabelFillOf(rawColor) {\n    const channels = hexChannelsOf(rawColor);\n    if (!channels) {\n        return null;\n    }\n    // del color tal cual hacia el negro, en pasos de 5 %, hasta que la letra blanca se lea\n    for (let share = 100; share >= MIN_FILL_SHARE_PERCENT; share -= FILL_SHARE_STEP_PERCENT) {\n        const mixed = channels.map((channel) => Math.round((channel * share) / 100));\n        if (contrastWithWhiteOf(mixed) >= MIN_TEXT_CONTRAST) {\n            return `#${mixed.map((channel) => channel.toString(16).padStart(2, '0')).join('')}`;\n        }\n    }\n    return `#${channels.map((channel) => Math.round((channel * MIN_FILL_SHARE_PERCENT) / 100).toString(16).padStart(2, '0')).join('')}`;\n}\n\n/**\n * Los tres canales de un color #RRGGBB o #RGB (0 a 255); null si no es hexadecimal.\n *\n * @param {string} color\n * @returns {number[]|null}\n */\nfunction hexChannelsOf(color) {\n    const match = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(String(color ?? '').trim());\n    if (!match) {\n        return null;\n    }\n    const digits = match[1].length === 3 ? [...match[1]].map((digit) => digit + digit).join('') : match[1];\n    return [0, 2, 4].map((start) => parseInt(digits.slice(start, start + 2), 16));\n}\n\n/**\n * El contraste de la letra blanca sobre un color (fórmula de WCAG).\n *\n * @param {number[]} channels\n * @returns {number}\n */\nfunction contrastWithWhiteOf(channels) {\n    const [red, green, blue] = channels.map((channel) => {\n        const unit = channel / 255;\n        return unit <= 0.03928 ? unit / 12.92 : ((unit + 0.055) / 1.055) ** 2.4;\n    });\n    const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue;\n    return 1.05 / (luminance + 0.05);\n}\n\n/**\n * Los tonos de los campos por omisión, por modo: fill (el relleno), hoverFill (con el cursor encima), border y hoverBorder\n * (la orilla; transparente: el pozo de Apple no lleva). createToolkitTheme los pone en la paleta de cada modo\n * (palette.field) y el proyecto los cambia con `fields` o con su paleta: blancos con borde, del tono de su marca…\n */\nexport const FIELD_TONES = Object.freeze({\n    light: Object.freeze({fill: FIELD_WELL_FILL.light.rest, hoverFill: FIELD_WELL_FILL.light.hover, border: 'transparent', hoverBorder: 'transparent'}),\n    dark: Object.freeze({fill: FIELD_WELL_FILL.dark.rest, hoverFill: FIELD_WELL_FILL.dark.hover, border: 'transparent', hoverBorder: 'transparent'}),\n});\n\n/**\n * Los tonos de los campos del tema (palette.field, que llena createToolkitTheme; con sus variables CSS cambian solos con el\n * modo, sin reglas de oscuro), o null si el tema no los trae (un createTheme de MUI sin Calcita).\n *\n * @param {object} theme\n * @returns {{fill: string, hoverFill: string, border: string, hoverBorder: string}|null}\n */\nexport function fieldPaletteOf(theme) {\n    return paletteOf(theme).field ?? null;\n}\n\n/** La orilla de un campo: una línea por dentro (sombra inset), que no mueve el texto ni pelea con el aro del foco (outline). */\nfunction fieldEdgeOf(color) {\n    return `inset 0 0 0 1px ${color}`;\n}\n\n// los campos de un renglón de FormSection son cápsulas. OJO: así se aprobaron, aunque salían por accidente: el renglón\n// decía 12 y sx lo multiplicaba por el radio del tema (96 px). Con la variable el número se lee en px, así que la cápsula\n// se escribe tal cual (999 px: con 40 px de alto da lo mismo que 96)\nconst FORM_ROW_FIELD_RADIUS = '999px';\n\n/** Un radio en px: un número lleva «px» (en sx un número se multiplica por el radio del tema); un texto va tal cual. */\nfunction pixelsOf(radius) {\n    return typeof radius === 'number' ? `${radius}px` : radius;\n}\n\n/**\n * Las esquinas de los campos: las que pidió el proyecto en su tema (createToolkitTheme fields.radius; un número va en px\n * en todos lados), o la variable --calcita-field-radius con las de cada estilo de respaldo.\n */\nfunction fieldRadiusOf(theme, lookRadius) {\n    const projectRadius = theme.toolkit?.fields?.radius;\n    return projectRadius !== undefined && projectRadius !== null ? pixelsOf(projectRadius) : cssTokenOf('fieldRadius', pixelsOf(lookRadius));\n}\n\n/**\n * El «pozo» de un campo de texto dentro del contenido (una tarjeta, un formulario agrupado), como los de Apple: un relleno\n * parejo con esquinas de 12 px, del gris de relleno de Apple («tertiary fill»): tenue en claro y más claro que la tarjeta en\n * oscuro (con negro, en oscuro se perdía). Sin vidrio adentro de la tarjeta: ahí no tiene nada que dejar\n * ver. Con el cursor encima se marca apenas; antes el relleno salía solo con el cursor y en cuadro («hovers espantosos»).\n * Los tonos y las esquinas los puede cambiar el proyecto (createToolkitTheme fields).\n *\n * @param {object} theme\n * @param {{radius?: number}} [options] las esquinas del estilo que lo pide (el minimalista las tiene más chicas)\n * @returns {object}\n */\nexport function fieldWellStylesOf(theme, {radius = FIELD_WELL_RADIUS_PIXELS} = {}) {\n    const base = {backgroundImage: 'none', backdropFilter: 'none', WebkitBackdropFilter: 'none', borderRadius: fieldRadiusOf(theme, radius)};\n    const field = fieldPaletteOf(theme);\n    if (field) {\n        return {\n            ...base,\n            backgroundColor: field.fill,\n            boxShadow: fieldEdgeOf(field.border),\n            '&:hover': {backgroundColor: field.hoverFill, boxShadow: fieldEdgeOf(field.hoverBorder)},\n        };\n    }\n    const {light, dark} = FIELD_TONES;\n    return {\n        ...base,\n        ...lightDarkStylesOf(theme,\n            {backgroundColor: light.fill, boxShadow: fieldEdgeOf(light.border), '&:hover': {backgroundColor: light.hoverFill, boxShadow: fieldEdgeOf(light.hoverBorder)}},\n            {backgroundColor: dark.fill, boxShadow: fieldEdgeOf(dark.border), '&:hover': {backgroundColor: dark.hoverFill, boxShadow: fieldEdgeOf(dark.hoverBorder)}}),\n    };\n}\n\n/**\n * Los tonos de los campos como variables (--calcita-field-*) para un contenedor: el renglón de FormSection las pone en sí\n * mismo y sus campos las leen (fieldWellFromVariablesOf). OJO, trampa pagada: el renglón le gana al tema con selectores\n * largos («html body &&& .MuiOutlinedInput-root») y una regla de oscuro anidada ahí abajo nunca aplicaba (en oscuro el\n * campo salía con el gris de claro). En el contenedor la regla de oscuro sí aplica, y los campos heredan la variable.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function fieldVariablesOf(theme) {\n    const variablesOf = (tones) => ({\n        '--calcita-field-fill': tones.fill,\n        '--calcita-field-hover-fill': tones.hoverFill,\n        '--calcita-field-edge': fieldEdgeOf(tones.border),\n        '--calcita-field-hover-edge': fieldEdgeOf(tones.hoverBorder),\n    });\n    const field = fieldPaletteOf(theme);\n    if (field) {\n        return variablesOf(field);\n    }\n    return {...variablesOf(FIELD_TONES.light), ...theme.applyStyles('dark', variablesOf(FIELD_TONES.dark))};\n}\n\n/**\n * El pozo de un campo leyendo las variables de su contenedor (fieldVariablesOf).\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function fieldWellFromVariablesOf(theme) {\n    return {\n        backgroundImage: 'none',\n        backdropFilter: 'none',\n        WebkitBackdropFilter: 'none',\n        borderRadius: fieldRadiusOf(theme, FORM_ROW_FIELD_RADIUS),\n        backgroundColor: 'var(--calcita-field-fill)',\n        boxShadow: 'var(--calcita-field-edge)',\n        '&:hover': {backgroundColor: 'var(--calcita-field-hover-fill)', boxShadow: 'var(--calcita-field-hover-edge)'},\n    };\n}\n\n/**\n * Un campo de texto suelto sobre el lienzo (fuera de una tarjeta): una lámina de vidrio clara en claro y el gris de relleno\n * de Apple en oscuro, más claro que el fondo casi negro. Con «Reducir transparencia» se pinta sólido.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function canvasFieldStylesOf(theme) {\n    const paper = paletteOf(theme).background.paper;\n    return {\n        backgroundImage: 'none',\n        backdropFilter: GLASS_BLUR,\n        WebkitBackdropFilter: GLASS_BLUR,\n        borderRadius: cssTokenOf('fieldRadius', `${FIELD_WELL_RADIUS_PIXELS}px`),\n        ...lightDarkStylesOf(theme, {\n            backgroundColor: CANVAS_FIELD.light.rest,\n            boxShadow: `0 0 0 1px ${CANVAS_FIELD.light.edge}`,\n            '&:hover': {backgroundColor: CANVAS_FIELD.light.hover},\n        }, {\n            backgroundColor: CANVAS_FIELD.dark.rest,\n            boxShadow: `0 0 0 1px ${CANVAS_FIELD.dark.edge}`,\n            '&:hover': {backgroundColor: CANVAS_FIELD.dark.hover},\n        }),\n        ...solidFallbackOf({backgroundColor: paper, backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n    };\n}\n\n/**\n * El color de un TEXTO que debe ir del color del tema (una liga, un botón de solo texto, el renglón elegido del menú, el\n * valor de una fecha): el color de la paleta oscurecido en claro y aclarado en oscuro, para que se lea. Medido (WCAG pide\n * 4.5 : 1 en letra normal): el naranja de la marca sobre una tarjeta clara daba 2.78 : 1 y sobre su propio tinte en oscuro\n * 4.41 : 1 (el reporte: «cuesta leer», «se pierde»); con 30 % de negro en claro da 5.24 : 1 y con 30 % de blanco en\n * oscuro 8.23 : 1. Los botones con relleno de color NO usan esto: van con letra de un solo color (HIG «Buttons»: «Avoid\n * applying a similar color to button labels and content layer backgrounds»).\n *\n * @param {object} theme\n * @param {string} [colorName] primary, error, success… (por omisión primary)\n * @returns {object} {color, y el de oscuro}\n */\nexport function accentTextStylesOf(theme, colorName = 'primary') {\n    const palette = paletteOf(theme);\n    const main = (palette[colorName] ?? palette.primary).main;\n    const keep = 100 - ACCENT_TEXT_SHADE_PERCENT;\n    return lightDarkStylesOf(theme, {color: `color-mix(in srgb, ${main} ${keep}%, black)`}, {color: `color-mix(in srgb, ${main} ${keep}%, white)`});\n}\n\n/**\n * Un fondo FIJO a la ventana que no se mueve al deslizar, también en el iPhone: va en una capa aparte (::before con\n * position: fixed) detrás del contenido del elemento. Así el vidrio se ve pasar por encima de un fondo quieto.\n *\n * OJO: background-attachment: fixed no sirve para esto. Safari del iPhone y del iPad lo ignora y el fondo se movía con\n * todo (lo vio el autor en el teléfono); además, en escritorio vuelve a pintar todo el fondo en cada paso al deslizar.\n * La capa va con z-index -1 dentro de un contexto propio (isolation): queda arriba del color del elemento y abajo de su\n * contenido. Si el elemento es una caja con esquinas (la escena de un ejemplo), clip-path la recorta a la caja.\n *\n * @param {object} layerStyles el fondo de la capa (backgroundColor, backgroundImage…; puede llevar el modo oscuro)\n * @param {object} [options]\n * @param {string} [options.clipPath] p. ej. 'inset(0 round 20px)' para una caja; sin él, la capa ocupa toda la ventana\n * @returns {object} estilos para el sx del elemento\n */\nexport function fixedBackgroundLayerOf(layerStyles, {clipPath} = {}) {\n    return {\n        isolation: 'isolate',\n        ...(clipPath && {clipPath}),\n        // OJO, iPhone: con inset: 0 el alto de la capa cambia cuando la barra de Safari se esconde al deslizar, y el fondo\n        // «seguía al scroll» (lo vio el autor en su teléfono). Medida fija de toda la pantalla (100vw × 100lvh, el alto con\n        // la barra escondida; 100vh donde no hay lvh) y su propia capa de composición (translateZ), que es lo que la deja\n        // quieta en WebKit\n        '&::before': {\n            content: '\"\"',\n            position: 'fixed',\n            top: 0,\n            left: 0,\n            width: '100vw',\n            height: '100vh',\n            '@supports (height: 100lvh)': {height: '100lvh'},\n            transform: 'translateZ(0)',\n            willChange: 'transform',\n            zIndex: -1,\n            pointerEvents: 'none',\n            ...layerStyles,\n        },\n    };\n}\n\n/**\n * El fondo del lienzo con vidrio: manchas del color principal y del de información, fijas a la ventana, para\n * que el vidrio tenga algo que desenfocar. AppLayout ya lo pone; una pantalla fuera del marco (el inicio de sesión) lo usa\n * con sx={(theme) => ambientBackgroundOf(theme)}.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function ambientBackgroundOf(theme) {\n    const palette = paletteOf(theme);\n    const washOf = (strength, tones) => [\n        `radial-gradient(60vmax 45vmax at 0% 0%, color-mix(in srgb, ${tones.primary} ${strength.primary}%, transparent), transparent 70%)`,\n        `radial-gradient(50vmax 40vmax at 100% 15%, color-mix(in srgb, ${tones.info} ${strength.info}%, transparent), transparent 70%)`,\n        `radial-gradient(55vmax 45vmax at 70% 100%, color-mix(in srgb, ${tones.accent} ${strength.accent}%, transparent), transparent 70%)`,\n        `radial-gradient(45vmax 35vmax at 45% 50%, color-mix(in srgb, ${tones.info} ${strength.center}%, transparent), transparent 70%)`,\n    ].join(', ');\n    const lightTones = {primary: palette.primary.main, info: palette.info.main, accent: palette.primary.light};\n    // en oscuro, los tonos OSCUROS de la paleta sobre un casi negro: el color tiñe sin aclarar el fondo, y las tarjetas y el\n    // vidrio (más claros) no se pierden (ver DARK_CANVAS)\n    const darkTones = {primary: palette.primary.dark, info: palette.info.dark, accent: palette.primary.dark};\n    return {\n        ...lightDarkStylesOf(theme, {backgroundColor: palette.background.default}, {backgroundColor: DARK_CANVAS.base}),\n        ...fixedBackgroundLayerOf(lightDarkStylesOf(theme,\n            {backgroundColor: palette.background.default, backgroundImage: washOf(AMBIENT_STRENGTH_LIGHT, lightTones)},\n            {backgroundColor: DARK_CANVAS.base, backgroundImage: washOf(AMBIENT_STRENGTH_DARK, darkTones)})),\n    };\n}\n\n// la orilla de arriba con la barra en cápsulas: cuánto tinte del lienzo lleva y cuánto desenfoca (px)\nconst SCROLL_EDGE_TINT_PERCENT = 55;\nconst SCROLL_EDGE_BLUR_PIXELS = 12;\n\n/**\n * La orilla de arriba cuando la barra va en cápsulas (TOP_BAR.capsules con vidrio, como las ventanas de macOS Tahoe; Apple le\n * llama «scroll edge effect»): lo que pasa por debajo se desenfoca y se desvanece hacia el contenido, para que el título\n * y las cápsulas se lean sobre cualquier cosa. Con «Reducir transparencia» o sin backdrop-filter, el color del lienzo.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function scrollEdgeStylesOf(theme) {\n    const palette = paletteOf(theme);\n    const tintOf = (canvas) => `color-mix(in srgb, ${canvas} ${SCROLL_EDGE_TINT_PERCENT}%, transparent)`;\n    const blur = `blur(${SCROLL_EDGE_BLUR_PIXELS}px)`;\n    // de arriba (cubre) hacia abajo (se desvanece): sin raya donde termina\n    const fade = 'linear-gradient(to bottom, black 45%, transparent)';\n    return {\n        ...lightDarkStylesOf(theme, {backgroundColor: tintOf(palette.background.default)}, {backgroundColor: tintOf(DARK_CANVAS.base)}),\n        backdropFilter: blur,\n        WebkitBackdropFilter: blur,\n        maskImage: fade,\n        WebkitMaskImage: fade,\n        ...solidFallbackOf({backgroundColor: palette.background.default, backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n    };\n}\n"],"names":[],"mappings":"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"}

package/dist/theme/glassToasterStyles.js

@@ -1,15 +1,14 @@
 import { paletteOf } from "./components/paletteOf.js";
-import { solidFallbackOf, GLASS_MENU_RADIUS_PIXELS } from "./glassSurface.js";
+import { GLASS_BLUR, solidFallbackOf, MENU_RADIUS } from "./glassSurface.js";
 const TOAST_OPACITY_PERCENT = 88;
 const STATUS_TINT_PERCENT = 14;
 const TOAST_STATUSES = Object.freeze(["success", "info", "warning", "error"]);
-const GLASS_BLUR = "blur(20px) saturate(180%)";
 const TOASTER_LIGHT_SELECTOR = "html [data-sonner-toaster][data-sonner-theme='light']";
 const TOASTER_DARK_SELECTOR = "html [data-sonner-toaster][data-sonner-theme='dark']";
 const TOAST_SELECTOR = "html [data-sonner-toaster] [data-sonner-toast][data-styled='true']";
 function toasterVariablesOf(palette, textShade, surfaceOf) {
   const variables = {
-    "--border-radius": `${GLASS_MENU_RADIUS_PIXELS}px`,
+    "--border-radius": MENU_RADIUS,
     "--normal-bg": surfaceOf(palette.background.paper),
     "--normal-border": palette.divider,
     "--normal-text": palette.text.primary

package/dist/theme/glassToasterStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"glassToasterStyles.js","sources":["../../src/theme/glassToasterStyles.js"],"sourcesContent":["// Los avisos (el <Toaster/> de sonner) de vidrio, cuando el tema lo trae (createToolkitTheme({glass: true})). Los avisos\n// flotan sobre todo: es justo donde la guía del vidrio lo pide.\n//\n// Cómo: sonner pinta sus colores con variables CSS (--normal-bg, --success-bg, --success-text…). Aquí se cambian por los\n// colores del tema de MUI mezclados con transparencia, y a cada aviso se le pone el desenfoque y el brillo del borde. Los\n// colores del tema van como variables de MUI: cambian solos con claro y oscuro.\n//\n// OJO, trampas de sonner:\n//   - sus variables viven en [data-sonner-toaster][data-sonner-theme=light|dark]; sin el `html` de adelante, ganaba la de\n//     sonner o la nuestra según qué hoja se cargara al final.\n//   - su texto de error, aviso… es su propio color; aquí sale del tema: en claro el tono oscuro (`dark`) del color y en\n//     oscuro el claro (`light`), para que se lea sobre el fondo teñido.\n//   - el contorno del foco del teclado estaba en box-shadow, que aquí se reemplaza: se vuelve a poner.\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {GLASS_MENU_RADIUS_PIXELS, solidFallbackOf} from '@/theme/glassSurface.js';\n\n// el texto de un aviso es chico: un poco más opaco que el resto del vidrio\nconst TOAST_OPACITY_PERCENT = 88;\n// cuánto del color del aviso (éxito, error…) tiñe su fondo\nconst STATUS_TINT_PERCENT = 14;\nconst TOAST_STATUSES = Object.freeze(['success', 'info', 'warning', 'error']);\nconst GLASS_BLUR = 'blur(20px) saturate(180%)';\n\nconst TOASTER_LIGHT_SELECTOR = \"html [data-sonner-toaster][data-sonner-theme='light']\";\nconst TOASTER_DARK_SELECTOR = \"html [data-sonner-toaster][data-sonner-theme='dark']\";\nconst TOAST_SELECTOR = \"html [data-sonner-toaster] [data-sonner-toast][data-styled='true']\";\n\n/**\n * Las variables de color de sonner con los colores del tema.\n *\n * @param {object} palette la paleta (con variables CSS si las hay)\n * @param {'light'|'dark'} textShade el tono del texto de cada color: en claro el oscuro, en oscuro el claro\n * @param {(color: string) => string} surfaceOf con o sin transparencia\n * @returns {object}\n */\nfunction toasterVariablesOf(palette, textShade, surfaceOf) {\n    const variables = {\n        '--border-radius': `${GLASS_MENU_RADIUS_PIXELS}px`,\n        '--normal-bg': surfaceOf(palette.background.paper),\n        '--normal-border': palette.divider,\n        '--normal-text': palette.text.primary,\n    };\n    TOAST_STATUSES.forEach((status) => {\n        const statusColor = palette[status];\n        variables[`--${status}-bg`] = surfaceOf(`color-mix(in srgb, ${statusColor.main} ${STATUS_TINT_PERCENT}%, ${palette.background.paper})`);\n        variables[`--${status}-border`] = `color-mix(in srgb, ${statusColor.main} 35%, transparent)`;\n        variables[`--${status}-text`] = statusColor[textShade];\n    });\n    return variables;\n}\n\n/**\n * Los estilos globales de los avisos de vidrio (para <GlobalStyles styles={…} />).\n *\n * @param {object} theme el tema de MUI\n * @returns {object}\n */\nexport function glassToasterStylesOf(theme) {\n    const palette = paletteOf(theme);\n    const glassOf = (color) => `color-mix(in srgb, ${color} ${TOAST_OPACITY_PERCENT}%, transparent)`;\n    const solidOf = (color) => color;\n    const toastShadow = 'inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 24px rgba(0, 0, 0, 0.12)';\n    return {\n        [TOASTER_LIGHT_SELECTOR]: toasterVariablesOf(palette, 'dark', glassOf),\n        [TOASTER_DARK_SELECTOR]: toasterVariablesOf(palette, 'light', glassOf),\n        [TOAST_SELECTOR]: {\n            backdropFilter: GLASS_BLUR,\n            WebkitBackdropFilter: GLASS_BLUR,\n            boxShadow: toastShadow,\n            '&:focus-visible': {boxShadow: `${toastShadow}, 0 0 0 2px ${palette.primary.main}`},\n        },\n        // menos transparencia, más contraste o un navegador que no desenfoca: los mismos colores, sólidos\n        ...solidFallbackOf({\n            [TOASTER_LIGHT_SELECTOR]: toasterVariablesOf(palette, 'dark', solidOf),\n            [TOASTER_DARK_SELECTOR]: toasterVariablesOf(palette, 'light', solidOf),\n            [TOAST_SELECTOR]: {backdropFilter: 'none', WebkitBackdropFilter: 'none'},\n        }),\n    };\n}\n"],"names":[],"mappings":";;AAmBA,MAAM,wBAAwB;AAE9B,MAAM,sBAAsB;AAC5B,MAAM,iBAAiB,OAAO,OAAO,CAAC,WAAW,QAAQ,WAAW,OAAO,CAAC;AAC5E,MAAM,aAAa;AAEnB,MAAM,yBAAyB;AAC/B,MAAM,wBAAwB;AAC9B,MAAM,iBAAiB;AAUvB,SAAS,mBAAmB,SAAS,WAAW,WAAW;AACvD,QAAM,YAAY;AAAA,IACd,mBAAmB,GAAG,wBAAwB;AAAA,IAC9C,eAAe,UAAU,QAAQ,WAAW,KAAK;AAAA,IACjD,mBAAmB,QAAQ;AAAA,IAC3B,iBAAiB,QAAQ,KAAK;AAAA,EACtC;AACI,iBAAe,QAAQ,CAAC,WAAW;AAC/B,UAAM,cAAc,QAAQ,MAAM;AAClC,cAAU,KAAK,MAAM,KAAK,IAAI,UAAU,sBAAsB,YAAY,IAAI,IAAI,mBAAmB,MAAM,QAAQ,WAAW,KAAK,GAAG;AACtI,cAAU,KAAK,MAAM,SAAS,IAAI,sBAAsB,YAAY,IAAI;AACxE,cAAU,KAAK,MAAM,OAAO,IAAI,YAAY,SAAS;AAAA,EACzD,CAAC;AACD,SAAO;AACX;AAQO,SAAS,qBAAqB,OAAO;AACxC,QAAM,UAAU,UAAU,KAAK;AAC/B,QAAM,UAAU,CAAC,UAAU,sBAAsB,KAAK,IAAI,qBAAqB;AAC/E,QAAM,UAAU,CAAC,UAAU;AAC3B,QAAM,cAAc;AACpB,SAAO;AAAA,IACH,CAAC,sBAAsB,GAAG,mBAAmB,SAAS,QAAQ,OAAO;AAAA,IACrE,CAAC,qBAAqB,GAAG,mBAAmB,SAAS,SAAS,OAAO;AAAA,IACrE,CAAC,cAAc,GAAG;AAAA,MACd,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,MACtB,WAAW;AAAA,MACX,mBAAmB,EAAC,WAAW,GAAG,WAAW,eAAe,QAAQ,QAAQ,IAAI,GAAE;AAAA,IAC9F;AAAA;AAAA,IAEQ,GAAG,gBAAgB;AAAA,MACf,CAAC,sBAAsB,GAAG,mBAAmB,SAAS,QAAQ,OAAO;AAAA,MACrE,CAAC,qBAAqB,GAAG,mBAAmB,SAAS,SAAS,OAAO;AAAA,MACrE,CAAC,cAAc,GAAG,EAAC,gBAAgB,QAAQ,sBAAsB,OAAM;AAAA,IACnF,CAAS;AAAA,EACT;AACA;"}
+{"version":3,"file":"glassToasterStyles.js","sources":["../../src/theme/glassToasterStyles.js"],"sourcesContent":["// Los avisos (el <Toaster/> de sonner) de vidrio, cuando el tema lo trae (createToolkitTheme({glass: true})). Los avisos\n// flotan sobre todo: es justo donde la guía del vidrio lo pide.\n//\n// Cómo: sonner pinta sus colores con variables CSS (--normal-bg, --success-bg, --success-text…). Aquí se cambian por los\n// colores del tema de MUI mezclados con transparencia, y a cada aviso se le pone el desenfoque y el brillo del borde. Los\n// colores del tema van como variables de MUI: cambian solos con claro y oscuro.\n//\n// OJO, trampas de sonner:\n//   - sus variables viven en [data-sonner-toaster][data-sonner-theme=light|dark]; sin el `html` de adelante, ganaba la de\n//     sonner o la nuestra según qué hoja se cargara al final.\n//   - su texto de error, aviso… es su propio color; aquí sale del tema: en claro el tono oscuro (`dark`) del color y en\n//     oscuro el claro (`light`), para que se lea sobre el fondo teñido.\n//   - el contorno del foco del teclado estaba en box-shadow, que aquí se reemplaza: se vuelve a poner.\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {GLASS_BLUR, MENU_RADIUS, solidFallbackOf} from '@/theme/glassSurface.js';\n\n// el texto de un aviso es chico: un poco más opaco que el resto del vidrio\nconst TOAST_OPACITY_PERCENT = 88;\n// cuánto del color del aviso (éxito, error…) tiñe su fondo\nconst STATUS_TINT_PERCENT = 14;\nconst TOAST_STATUSES = Object.freeze(['success', 'info', 'warning', 'error']);\n\nconst TOASTER_LIGHT_SELECTOR = \"html [data-sonner-toaster][data-sonner-theme='light']\";\nconst TOASTER_DARK_SELECTOR = \"html [data-sonner-toaster][data-sonner-theme='dark']\";\nconst TOAST_SELECTOR = \"html [data-sonner-toaster] [data-sonner-toast][data-styled='true']\";\n\n/**\n * Las variables de color de sonner con los colores del tema.\n *\n * @param {object} palette la paleta (con variables CSS si las hay)\n * @param {'light'|'dark'} textShade el tono del texto de cada color: en claro el oscuro, en oscuro el claro\n * @param {(color: string) => string} surfaceOf con o sin transparencia\n * @returns {object}\n */\nfunction toasterVariablesOf(palette, textShade, surfaceOf) {\n    const variables = {\n        '--border-radius': MENU_RADIUS,\n        '--normal-bg': surfaceOf(palette.background.paper),\n        '--normal-border': palette.divider,\n        '--normal-text': palette.text.primary,\n    };\n    TOAST_STATUSES.forEach((status) => {\n        const statusColor = palette[status];\n        variables[`--${status}-bg`] = surfaceOf(`color-mix(in srgb, ${statusColor.main} ${STATUS_TINT_PERCENT}%, ${palette.background.paper})`);\n        variables[`--${status}-border`] = `color-mix(in srgb, ${statusColor.main} 35%, transparent)`;\n        variables[`--${status}-text`] = statusColor[textShade];\n    });\n    return variables;\n}\n\n/**\n * Los estilos globales de los avisos de vidrio (para <GlobalStyles styles={…} />).\n *\n * @param {object} theme el tema de MUI\n * @returns {object}\n */\nexport function glassToasterStylesOf(theme) {\n    const palette = paletteOf(theme);\n    const glassOf = (color) => `color-mix(in srgb, ${color} ${TOAST_OPACITY_PERCENT}%, transparent)`;\n    const solidOf = (color) => color;\n    const toastShadow = 'inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 24px rgba(0, 0, 0, 0.12)';\n    return {\n        [TOASTER_LIGHT_SELECTOR]: toasterVariablesOf(palette, 'dark', glassOf),\n        [TOASTER_DARK_SELECTOR]: toasterVariablesOf(palette, 'light', glassOf),\n        [TOAST_SELECTOR]: {\n            backdropFilter: GLASS_BLUR,\n            WebkitBackdropFilter: GLASS_BLUR,\n            boxShadow: toastShadow,\n            '&:focus-visible': {boxShadow: `${toastShadow}, 0 0 0 2px ${palette.primary.main}`},\n        },\n        // menos transparencia, más contraste o un navegador que no desenfoca: los mismos colores, sólidos\n        ...solidFallbackOf({\n            [TOASTER_LIGHT_SELECTOR]: toasterVariablesOf(palette, 'dark', solidOf),\n            [TOASTER_DARK_SELECTOR]: toasterVariablesOf(palette, 'light', solidOf),\n            [TOAST_SELECTOR]: {backdropFilter: 'none', WebkitBackdropFilter: 'none'},\n        }),\n    };\n}\n"],"names":[],"mappings":";;AAmBA,MAAM,wBAAwB;AAE9B,MAAM,sBAAsB;AAC5B,MAAM,iBAAiB,OAAO,OAAO,CAAC,WAAW,QAAQ,WAAW,OAAO,CAAC;AAE5E,MAAM,yBAAyB;AAC/B,MAAM,wBAAwB;AAC9B,MAAM,iBAAiB;AAUvB,SAAS,mBAAmB,SAAS,WAAW,WAAW;AACvD,QAAM,YAAY;AAAA,IACd,mBAAmB;AAAA,IACnB,eAAe,UAAU,QAAQ,WAAW,KAAK;AAAA,IACjD,mBAAmB,QAAQ;AAAA,IAC3B,iBAAiB,QAAQ,KAAK;AAAA,EACtC;AACI,iBAAe,QAAQ,CAAC,WAAW;AAC/B,UAAM,cAAc,QAAQ,MAAM;AAClC,cAAU,KAAK,MAAM,KAAK,IAAI,UAAU,sBAAsB,YAAY,IAAI,IAAI,mBAAmB,MAAM,QAAQ,WAAW,KAAK,GAAG;AACtI,cAAU,KAAK,MAAM,SAAS,IAAI,sBAAsB,YAAY,IAAI;AACxE,cAAU,KAAK,MAAM,OAAO,IAAI,YAAY,SAAS;AAAA,EACzD,CAAC;AACD,SAAO;AACX;AAQO,SAAS,qBAAqB,OAAO;AACxC,QAAM,UAAU,UAAU,KAAK;AAC/B,QAAM,UAAU,CAAC,UAAU,sBAAsB,KAAK,IAAI,qBAAqB;AAC/E,QAAM,UAAU,CAAC,UAAU;AAC3B,QAAM,cAAc;AACpB,SAAO;AAAA,IACH,CAAC,sBAAsB,GAAG,mBAAmB,SAAS,QAAQ,OAAO;AAAA,IACrE,CAAC,qBAAqB,GAAG,mBAAmB,SAAS,SAAS,OAAO;AAAA,IACrE,CAAC,cAAc,GAAG;AAAA,MACd,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,MACtB,WAAW;AAAA,MACX,mBAAmB,EAAC,WAAW,GAAG,WAAW,eAAe,QAAQ,QAAQ,IAAI,GAAE;AAAA,IAC9F;AAAA;AAAA,IAEQ,GAAG,gBAAgB;AAAA,MACf,CAAC,sBAAsB,GAAG,mBAAmB,SAAS,QAAQ,OAAO;AAAA,MACrE,CAAC,qBAAqB,GAAG,mBAAmB,SAAS,SAAS,OAAO;AAAA,MACrE,CAAC,cAAc,GAAG,EAAC,gBAAgB,QAAQ,sBAAsB,OAAM;AAAA,IACnF,CAAS;AAAA,EACT;AACA;"}

package/dist/theme/themePieces.js

@@ -0,0 +1,16 @@
+"use client";
+import { styled, useThemeProps } from "@mui/material/styles";
+const PIECE_ONLY_PROPS = /* @__PURE__ */ new Set(["ownSx", "ownerState", "theme", "as"]);
+function piecePart(name, slot, component = "div") {
+  return styled(component, { name, slot, shouldForwardProp: (prop) => !PIECE_ONLY_PROPS.has(prop) })(
+    ({ theme, ownSx }) => ownSx ? theme.unstable_sx(ownSx) : {}
+  );
+}
+function usePieceProps(props, name) {
+  return useThemeProps({ props, name });
+}
+export {
+  piecePart,
+  usePieceProps
+};
+//# sourceMappingURL=themePieces.js.map

package/dist/theme/themePieces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themePieces.js","sources":["../../src/theme/themePieces.js"],"sourcesContent":["// Las piezas de Calcita se cambian desde el tema del proyecto como las de MUI: theme.components.Calcita<Pieza> con\n// defaultProps y styleOverrides de cada una de sus partes (root, title, card…). Lo del proyecto va DESPUÉS del estilo de\n// Calcita y le gana; los números se leen como en MUI (borderRadius: 4 son 4 px).\n//\n// Cómo se arma una parte con nombre: piecePart(nombre, parte, componente) da el componente (Box, Paper, Typography…) con su\n// lugar en el tema, y el estilo de Calcita le llega en `ownSx` (lo mismo que antes iba en `sx`, con su forma de sx: objeto,\n// lista o función del tema). Va en la base de la parte, ANTES de lo que ponga el proyecto. OJO: si quedara en `sx`, MUI lo\n// aplicaría al final y el tema del proyecto ya no le podría ganar.\n//\n//   const CardRoot = piecePart('CalcitaMetricCard', 'Root', Paper);\n//   <CardRoot variant=\"outlined\" ownSx={{p: 2, borderRadius: 3}}>…</CardRoot>\n//\n// Y sus props por omisión: const {label, value} = usePieceProps(props, 'CalcitaMetricCard').\n//\n// Funciones genéricas del paquete: function (regla de la casa).\nimport {styled, useThemeProps} from '@mui/material/styles';\n\n// lo que la parte usa y no se le pasa al componente de adentro (ni al HTML)\nconst PIECE_ONLY_PROPS = new Set(['ownSx', 'ownerState', 'theme', 'as']);\n\n/**\n * Un componente con su lugar en el tema: theme.components[name].styleOverrides[parte con minúscula] se aplica después\n * del estilo de Calcita (ownSx) y gana.\n *\n * @template {import('react').ElementType} C\n * @param {string} name el nombre de la pieza en el tema (CalcitaMetricCard)\n * @param {string} slot la parte, con mayúscula: Root, Title, Card…\n * @param {C} [component] lo que se pinta (por omisión un div)\n * @returns {import('react').ComponentType<any>}\n */\nexport function piecePart(name, slot, component = 'div') {\n    return styled(component, {name, slot, shouldForwardProp: (prop) => !PIECE_ONLY_PROPS.has(prop)})(\n        ({theme, ownSx}) => (ownSx ? theme.unstable_sx(ownSx) : {}),\n    );\n}\n\n/**\n * Los props de la pieza con los defaultProps del tema del proyecto debajo: lo que llega en la pantalla gana.\n *\n * @template {object} P\n * @param {P} props\n * @param {string} name el nombre de la pieza en el tema\n * @returns {P}\n */\nexport function usePieceProps(props, name) {\n    return useThemeProps({props, name});\n}\n"],"names":[],"mappings":";;AAkBA,MAAM,mBAAmB,oBAAI,IAAI,CAAC,SAAS,cAAc,SAAS,IAAI,CAAC;AAYhE,SAAS,UAAU,MAAM,MAAM,YAAY,OAAO;AACrD,SAAO,OAAO,WAAW,EAAC,MAAM,MAAM,mBAAmB,CAAC,SAAS,CAAC,iBAAiB,IAAI,IAAI,EAAC,CAAC;AAAA,IAC3F,CAAC,EAAC,OAAO,MAAK,MAAO,QAAQ,MAAM,YAAY,KAAK,IAAI;EAChE;AACA;AAUO,SAAS,cAAc,OAAO,MAAM;AACvC,SAAO,cAAc,EAAC,OAAO,KAAI,CAAC;AACtC;"}

package/dist/types/DataTable/AuditTrailDialog.d.ts

@@ -13,7 +13,7 @@
  *     consulta)
  * @param {(row: any) => string|null} [props.eventSuffixOf] complemento del evento de un renglón (AuditTrailTable)
  */
-export default function AuditTrailDialog({ open, onClose, title, subtitle, subjectKey, fetchPage, eventDictionary, resultDictionary, extraColumns, header, eventSuffixOf, }: {
+export default function AuditTrailDialog(props: {
     open: boolean;
     onClose: () => void;
     title: string;

package/dist/types/DataTable/ColumnFilters/HeaderFilterPopover.d.ts

@@ -1,7 +1,7 @@
 /**
  * @param {{activeCount?: number, onClear: () => void, children: import('react').ReactNode}} props children = el filtro
  */
-export default function HeaderFilterPopover({ activeCount, onClear, children }: {
+export default function HeaderFilterPopover(props: {
     activeCount?: number;
     onClear: () => void;
     children: import('react').ReactNode;

package/dist/types/DataTable/ColumnFilters/MultiSelectColumnFilter.d.ts

@@ -5,7 +5,7 @@
  * @param {Array<{value: string, total: number}>} [props.options] faceta del servidor
  * @param {(value: string) => import('react').ReactNode} [props.renderOption] cómo se lee el valor (diccionario)
  */
-export default function MultiSelectColumnFilter({ value, onChange, options, renderOption }: {
+export default function MultiSelectColumnFilter(props: {
     value?: string[];
     onChange: (value: string[]) => void;
     options?: Array<{

package/dist/types/DataTable/ColumnFilters/SortableFilterHeader.d.ts

@@ -10,7 +10,7 @@
  * @param {() => void} [props.onClear]
  * @param {import('react').ReactNode} [props.children] el filtro de la columna
  */
-export default function SortableFilterHeader({ label, sortable, sortEntry, onSort, onClearSort, filterable, activeCount, onClear, children, }: {
+export default function SortableFilterHeader(props: {
     label: string;
     sortable?: boolean;
     sortEntry?: {

package/dist/types/DataTable/EmptyState.d.ts

@@ -5,7 +5,7 @@
  * @param {() => void} [props.onClearFilters]
  * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete
  */
-export default function EmptyState({ filtered, label, onClearFilters, texts }?: {
+export default function EmptyState(props?: {
     filtered?: boolean;
     label?: string;
     onClearFilters?: () => void;

package/dist/types/DataTable/FilterChips.d.ts

@@ -7,7 +7,7 @@
  * @param {number} [props.quickActiveCount] accesos rápidos puestos que no tienen chip aquí
  * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete
  */
-export default function FilterChips({ chipConfig, filters, onSetFilter, onClearAll, quickActiveCount, texts }: {
+export default function FilterChips(props: {
     chipConfig: Array<object>;
     filters: object;
     onSetFilter: (field: string, value: unknown) => void;

package/dist/types/DataTable/GoToPage.d.ts

@@ -5,7 +5,7 @@
  * @param {(page: number) => void} props.onChange
  * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete
  */
-export default function GoToPage({ page, pageCount, onChange, texts }: {
+export default function GoToPage(props: {
     page: number;
     pageCount: number;
     onChange: (page: number) => void;