@studiolxd/brand 50.0.0 → 51.0.1

package/dist/tokens.css

@@ -97,8 +97,8 @@
   --color-text-placeholder-on-dark: var(--color-grey-light); /** Placeholder sobre superficie oscura. Mismo gris que el texto secundario */
   --color-text-muted-on-light: var(--color-grey-darkest); /** Texto secundario: ayudas, etiquetas, metadatos */
   --color-text-muted-on-dark: var(--color-grey-light); /** Muted text on dark backgrounds */
-  --color-background-light: var(--color-white); /** Light surface background */
-  --color-background-dark: var(--color-prussian); /** Dark surface background */
+  --color-bg-light: var(--color-white); /** Light surface background */
+  --color-bg-dark: var(--color-prussian); /** Dark surface background */
   --color-surface-secondary-on-light: var(--color-grey-lightest); /** Superficie clara secundaria sobre fondo claro: bloque de código, kbd, carril de progreso, pie de tabla */
   --color-surface-secondary-on-dark: var(--color-grey-darkest); /** Superficie clara secundaria — variante para superficie oscura */
   --color-surface-inverse-on-light: var(--color-grey-darkest); /** Superficie invertida sobre fondo claro: relleno neutral oscuro (Tag) */
@@ -197,10 +197,10 @@
 
 :root {
   --shadow-none: none; /** Escala. Valor del rol default */
-  --shadow-sm: 0 1px 2px rgba(17,30,48,0.08); /** Escala. El sistema no lo usa */
-  --shadow-md: 0 2px 8px rgba(17,30,48,0.10); /** Escala. El sistema no lo usa */
-  --shadow-lg: 0 4px 16px rgba(17,30,48,0.12); /** Escala. El sistema no lo usa */
-  --shadow-xl: 0 8px 32px rgba(17,30,48,0.16); /** Escala. El sistema no lo usa */
+  --shadow-sm: 0 1px 2px rgba(17,30,48,0.08); /** Escala. El sistema no lo usa. El color es el prusia de la paleta con opacidad 0.08 (sale como rgba(17,30,48,0.08)) */
+  --shadow-md: 0 2px 8px rgba(17,30,48,0.10); /** Escala. El sistema no lo usa. El color es el prusia de la paleta con opacidad 0.10 (sale como rgba(17,30,48,0.10)) */
+  --shadow-lg: 0 4px 16px rgba(17,30,48,0.12); /** Escala. El sistema no lo usa. El color es el prusia de la paleta con opacidad 0.12 (sale como rgba(17,30,48,0.12)) */
+  --shadow-xl: 0 8px 32px rgba(17,30,48,0.16); /** Escala. El sistema no lo usa. El color es el prusia de la paleta con opacidad 0.16 (sale como rgba(17,30,48,0.16)) */
   --shadow-default: var(--shadow-none); /** Rol: ningún elemento del sistema proyecta sombra. La elevación se expresa con borde y con el fondo del panel */
 }
 
@@ -319,7 +319,7 @@ html.dark {
   --accordion-trigger-padding-inline: var(--spacing-6); /** Aire horizontal del disparador */
   --accordion-trigger-gap: var(--spacing-4); /** Hueco entre el texto y el chevron */
   --accordion-index-font-family: var(--font-family-mono); /** Monoespaciada: los números del acordeón numerado se alinean en columna */
-  --accordion-index-min-inline-size: var(--spacing-5); /** Ancho mínimo de la ranura del número (24px): mantiene la columna aunque pase de una a dos cifras */
+  --accordion-index-min-width: var(--spacing-5); /** Ancho mínimo de la ranura del número (24px): mantiene la columna aunque pase de una a dos cifras */
   --accordion-content-padding-block: var(--spacing-6); /** Aire inferior del contenido */
   --accordion-content-padding-inline: var(--spacing-6); /** Aire horizontal del contenido */
   --accordion-transition-duration: var(--motion-duration-slow); /** Duración de abrir/cerrar (cambio de contexto: el panel entra) */
@@ -381,7 +381,7 @@ html.dark {
   --text-list-item-gap: var(--spacing-3); /** Aire entre el contenido de una fila y su accesorio final (trailing) (12px) */
   --text-font-weight: var(--font-weight-default); /** Default font weight */
   --text-color: var(--color-text-on-light); /** Default text color */
-  --text-background: var(--color-background-light); /** Fondo del lienzo de página (body) */
+  --text-bg: var(--color-bg-light); /** Fondo del lienzo de página (body) */
   --text-heading-font-weight: var(--font-weight-emphasis); /** Heading font weight */
   --text-heading-color: var(--color-text-on-light); /** Heading color */
   --text-h1-font-family: var(--text-heading-font-family); /** H1 font family */
@@ -431,7 +431,7 @@ html.dark {
 [data-theme="dark"],
 html.dark {
   --text-color: var(--color-text-on-dark); /** Color de texto por defecto — surface-dark */
-  --text-background: var(--color-background-dark); /** Fondo del lienzo de página — surface-dark */
+  --text-bg: var(--color-bg-dark); /** Fondo del lienzo de página — surface-dark */
   --text-h1-color: var(--color-text-on-dark); /** H1 color — surface-dark */
   --text-h2-color: var(--color-text-on-dark); /** H2 color — surface-dark */
   --text-h3-color: var(--color-text-on-dark); /** H3 color — surface-dark */
@@ -457,7 +457,7 @@ html.dark {
   --breadcrumb-font-weight: var(--font-weight-default); /** Font weight base */
   --breadcrumb-separator-color: var(--color-text-on-light); /** Color del separador */
   --breadcrumb-link-color: var(--color-text-on-light); /** Color del link navegable */
-  --breadcrumb-link-color-hover: var(--color-primary); /** Color del link en hover */
+  --breadcrumb-link-hover-color: var(--color-primary); /** Color del link en hover */
   --breadcrumb-current-color: var(--color-text-on-light); /** Color del item activo (página actual) */
   --breadcrumb-current-font-weight: var(--font-weight-emphasis); /** Peso del item activo */
   --breadcrumb-focus-ring-color: var(--color-primary); /** Color del focus ring */
@@ -470,7 +470,7 @@ html.dark {
 [data-theme="dark"],
 html.dark {
   --breadcrumb-link-color: var(--color-text-on-dark); /** Link color — surface-dark */
-  --breadcrumb-link-color-hover: var(--color-text-on-dark); /** Link hover color — surface-dark */
+  --breadcrumb-link-hover-color: var(--color-text-on-dark); /** Link hover color — surface-dark */
   --breadcrumb-current-color: var(--color-text-on-dark); /** Current color — surface-dark */
   --breadcrumb-separator-color: var(--color-text-on-dark); /** Separator color — surface-dark */
   --breadcrumb-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
@@ -481,23 +481,33 @@ html.dark {
  */
 
 :root {
-  --link-hover-underline-width: 0px; /** Grosor de la línea en hover (en claro desaparece) */
+  --link-hover-underline-width: 0px; /** Grosor del subrayado en hover (en claro no hay línea: la quita `link.hover-decoration-line`) */
+  --link-decoration-line: underline; /** Si el enlace se subraya en reposo (`text-decoration-line`): `underline` o `none`. En claro, sí */
+  --link-hover-decoration-line: none; /** Si el enlace se subraya en hover (`text-decoration-line`): en claro la línea desaparece */
+  --link-in-text-hover-underline-width: 0px; /** Enlace dentro de texto corrido: sin línea en hover, en las dos superficies (D41) */
+  --link-in-text-decoration-line: underline; /** Enlace dentro de texto corrido: subrayado en reposo, en las DOS superficies (D41). Sin par oscuro a propósito */
+  --link-in-text-hover-decoration-line: none; /** Enlace dentro de texto corrido: sin subrayado en hover, en las dos superficies (D41) */
   --link-cursor: pointer; /** Cursor */
   --link-ink-hover-underline-width: 0px; /** Tono ink: sin línea en hover */
+  --link-ink-decoration-line: underline; /** Tono ink: subrayado en reposo, en las dos superficies */
+  --link-ink-hover-decoration-line: none; /** Tono ink: sin subrayado en hover */
   --link-accent-1-hover-underline-width: 0px; /** Tono accent-1: sin línea en hover, como accent */
-  --link-underline-offset: var(--spacing-1); /** Separación entre el texto y la línea */
+  --link-accent-1-decoration-line: underline; /** Tono accent-1: subrayado en reposo, en las dos superficies */
+  --link-accent-1-hover-decoration-line: none; /** Tono accent-1: sin subrayado en hover */
+  --link-underline-offset: var(--spacing-1); /** Separación entre el texto y la línea. Se reserva como `padding-block-end` (el hueco de la línea: nada se mueve al aparecer) y la línea se coloca con `text-underline-position: under` y `text-underline-offset: calc(<separación> - <grosor>)`, de modo que cae en el borde inferior de ese hueco */
   --link-icon-gap: var(--spacing-2); /** Aire entre el icono y el texto del enlace */
   --link-color: var(--color-text-on-light); /** El enlace no tiene color propio: es texto, y lo distingue el subrayado */
   --link-hover-color: var(--color-text-on-light); /** Color en hover */
-  --link-underline-width: var(--border-width-default); /** El subrayado es una línea bajo el enlace (borde, no text-decoration): cubre texto e icono y se separa del texto. Su grosor */
+  --link-underline-width: var(--border-width-default); /** Grosor del subrayado (`text-decoration-thickness`). El subrayado es `text-decoration` con grosor y distancia de token (D64): se mantiene en alto contraste, se imprime y lo reconocen las herramientas de accesibilidad. Si se pinta o no lo dice `link.decoration-line`: un grosor 0 no oculta la línea (el navegador pinta como mínimo un píxel de dispositivo) */
+  --link-in-text-underline-width: var(--border-width-default); /** Enlace dentro de texto corrido (párrafo, etiqueta, Prose): línea en reposo, en las DOS superficies. Entre texto, el color no basta para distinguirlo (en oscuro, amarillo sobre blanco da 1,5:1; WCAG 1.4.1 pide 3:1 u otra marca), así que la marca es la línea (D41). Sin par oscuro a propósito */
   --link-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
   --link-focus-ring-offset: var(--border-width-default); /** Separación entre el enlace y el anillo */
   --link-focus-ring-color: var(--color-primary); /** Anillo de foco */
   --link-ink-color: var(--color-text-on-light); /** Tono ink (enlaces utilitarios: legal, volver): tinta */
   --link-ink-underline-width: var(--border-width-default); /** Tono ink: línea en reposo, en las dos superficies */
-  --link-accent-1-color: var(--color-accent-1); /** Tono accent-1 (lavanda): color saturado que ya contrasta en cualquier superficie, sin par surface-dark (mismo motivo que Card/Step/ProgressBar) */
-  --link-accent-1-hover-color: var(--color-accent-1); /** Tono accent-1: mismo color en hover, como accent — lo que cambia es la línea */
-  --link-accent-1-underline-width: var(--border-width-default); /** Tono accent-1: línea en reposo, igual en las dos superficies (el color no cambia) */
+  --link-accent-1-underline-width: var(--border-width-default); /** Tono accent-1: línea en reposo, en las dos superficies */
+  --link-accent-1-color: var(--link-color); /** Tono accent-1 (lavanda) en superficie clara: cae al tono por defecto. La lavanda sobre blanco da 2,02:1 (D41): el tono solo se ve en superficie oscura */
+  --link-accent-1-hover-color: var(--link-hover-color); /** Tono accent-1 en hover, superficie clara: el del tono por defecto */
 }
 
 .surface-dark,
@@ -505,11 +515,15 @@ html.dark {
 [data-theme="dark"],
 html.dark {
   --link-underline-width: 0px; /** Sin línea en reposo — surface-dark */
+  --link-decoration-line: none; /** Sin subrayado en reposo — surface-dark: el amarillo ya lo distingue fuera del texto corrido */
+  --link-hover-decoration-line: underline; /** Subrayado en hover — surface-dark */
   --link-color: var(--color-accent-2); /** Color — surface-dark: amarillo (accent-2), y sin línea en reposo */
   --link-hover-color: var(--color-accent-2); /** Hover — surface-dark: amarillo, con línea */
   --link-hover-underline-width: var(--border-width-default); /** Línea en hover — surface-dark */
   --link-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
   --link-ink-color: var(--color-text-on-dark); /** Tono ink — surface-dark: blanco, no amarillo */
+  --link-accent-1-color: var(--color-accent-1); /** Tono accent-1 — surface-dark: lavanda, que sobre prusia sí contrasta */
+  --link-accent-1-hover-color: var(--color-accent-1); /** Tono accent-1 en hover — surface-dark: lavanda */
 }
 
 /**
@@ -541,8 +555,8 @@ html.dark {
   --tag-warning-bg: var(--color-warning-fill); /** Aviso — relleno universal del rol de feedback. Es el amarillo de siempre, pero llega por el rol, no por la marca */
   --tag-success-bg: var(--color-success-fill); /** Éxito — relleno universal del sistema */
   --tag-success-color: var(--color-success-fill-text); /** Éxito — contenido sobre el relleno */
-  --tag-danger-bg: var(--color-error-fill); /** Peligro — relleno universal del sistema */
-  --tag-danger-color: var(--color-error-fill-text); /** Peligro — contenido sobre el relleno */
+  --tag-error-bg: var(--color-error-fill); /** Error — relleno universal del sistema */
+  --tag-error-color: var(--color-error-fill-text); /** Error — contenido sobre el relleno */
   --tag-warning-color: var(--color-warning-fill-text); /** Aviso — contenido sobre el relleno: el prusia (11,17:1, AAA) */
 }
 
@@ -551,9 +565,9 @@ html.dark {
 [data-theme="dark"],
 html.dark {
   --tag-primary-bg: var(--color-text-on-dark); /** Marca primaria, relleno — surface-dark (invertido: el prusia es el fondo de la superficie y el tag desaparecería) */
-  --tag-primary-color: var(--color-background-dark); /** Marca primaria, texto — surface-dark (invertido) */
+  --tag-primary-color: var(--color-bg-dark); /** Marca primaria, texto — surface-dark (invertido) */
   --tag-info-bg: var(--color-text-on-dark); /** Información, relleno — surface-dark (invertido, misma razón que primary) */
-  --tag-info-color: var(--color-background-dark); /** Información, texto — surface-dark (invertido) */
+  --tag-info-color: var(--color-bg-dark); /** Información, texto — surface-dark (invertido) */
 }
 
 /**
@@ -587,7 +601,7 @@ html.dark {
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --kbd-bg: rgba(255, 255, 255, 0.08); /** Fondo del keycap — surface-dark: el gris claro no existe en superficie oscura, y el velo translúcido es el mismo recurso que usan Skeleton y Table */
+  --kbd-bg: var(--color-surface-secondary-on-dark); /** Fondo del keycap — surface-dark: la superficie secundaria en su par oscuro, el mismo rol (y el mismo token) que usa Skeleton. Antes era un velo blanco al 8 % escrito a mano */
   --kbd-color: var(--color-text-on-dark); /** Símbolo — surface-dark */
   --kbd-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
 }
@@ -627,7 +641,7 @@ html.dark {
   --card-footer-gap: var(--spacing-2); /** Separación entre acciones del pie */
   --card-border-radius: var(--border-radius-default); /** Radio de esquinas — sin redondeado */
   --card-title-font-weight: var(--font-weight-emphasis); /** Peso del título de la tarjeta */
-  --card-primary-bg: var(--color-accent-1); /** Variante primary — fondo lavanda. No es `color.primary` (prussian): coincidiría con `color.background.dark` y desaparecería sobre `.surface-dark`. Mismo patrón autocontenido que `button.primary` — un par que no depende de la superficie ambiente, igual en claro y oscuro */
+  --card-primary-bg: var(--color-accent-1); /** Variante primary — fondo lavanda. No es `color.primary` (prussian): coincidiría con `color.bg.dark` y desaparecería sobre `.surface-dark`. Mismo patrón autocontenido que `button.primary` — un par que no depende de la superficie ambiente, igual en claro y oscuro */
   --card-primary-color: var(--color-primary); /** Variante primary — texto prussian sobre el fondo lavanda */
   --card-accent-1-bg: var(--color-accent-1); /** Variante accent-1 — fondo lavanda */
   --card-accent-1-color: var(--color-text-on-light); /** Variante accent-1 — texto. Color saturado que ya contrasta en cualquier superficie: sin par surface-dark, como las variantes semánticas de Alert/Tag */
@@ -637,7 +651,7 @@ html.dark {
   --card-support-1-color: var(--color-text-on-light); /** Variante support-1 — texto. Sin par surface-dark: mismo motivo que accent-1 */
   --card-support-2-bg: var(--color-support-2); /** Variante support-2 — fondo cayena */
   --card-support-2-color: var(--color-text-on-light); /** Variante support-2 — texto. Sin par surface-dark: mismo motivo que accent-1 */
-  --card-outline-bg: var(--color-background-light); /** Variante outline — fondo blanco (light) */
+  --card-outline-bg: var(--color-bg-light); /** Variante outline — fondo blanco (light) */
   --card-outline-color: var(--color-text-on-light); /** Variante outline — texto oscuro sobre blanco */
   --card-outline-border-color: var(--color-primary); /** Variante outline — borde prussian */
   --card-outline-border-width: var(--border-width-default); /** Variante outline — grosor de borde */
@@ -650,7 +664,7 @@ html.dark {
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --card-outline-bg: var(--color-background-dark); /** Variante outline — fondo, surface-dark */
+  --card-outline-bg: var(--color-bg-dark); /** Variante outline — fondo, surface-dark */
   --card-outline-color: var(--color-text-on-dark); /** Variante outline — texto, surface-dark */
   --card-outline-border-color: var(--color-text-on-dark); /** Variante outline — borde, surface-dark */
 }
@@ -771,11 +785,11 @@ html.dark {
   --site-header-settings-gap: var(--spacing-5); /** Separación entre los ajustes del sitio: en fila en escritorio, apilados en móvil */
   --site-header-content-height-compact: var(--logo-height-lg); /** Lo más alto que lleva la barra en móvil (por debajo de md): el logotipo a talla lg (48px), para que quepa con los controles */
   --site-header-content-height-narrow: var(--logo-height-md); /** Lo más alto que lleva la barra en teléfono (por debajo de sm): el logotipo a talla md (40px), para caber en 360px con idioma y menú */
-  --site-header-bg: var(--color-background-light); /** Fondo de la barra */
+  --site-header-bg: var(--color-bg-light); /** Fondo de la barra */
   --site-header-z-index: var(--app-header-z-index); /** Capa z — sobre el contenido, bajo los paneles flotantes */
-  --site-header-panel-bg: var(--color-background-light); /** Fondo del panel de navegación */
+  --site-header-panel-bg: var(--color-bg-light); /** Fondo del panel de navegación */
   --site-header-panel-padding-block: var(--section-padding-block-xl); /** Aire superior del panel, entre la barra y el índice */
-  --site-header-content-height: var(--logo-height-xxl); /** Lo más alto que lleva la barra: el logotipo a talla xxl (85px) */
+  --site-header-content-height: var(--logo-height-2xl); /** Lo más alto que lleva la barra: el logotipo a talla 2xl (85px) */
   --site-header-height-narrow: calc(var(--site-header-content-height-narrow) + 2 * var(--app-header-padding-block)); /** Alto de la barra en teléfono (56px, la misma que la barra de aplicación) */
   --site-header-height-compact: calc(var(--site-header-content-height-compact) + 2 * var(--app-header-padding-block)); /** Alto de la barra en móvil (64px) */
   --site-header-logo-margin-inline-start: calc(-1 * var(--container-padding-inline)); /** La marca sale del aire lateral del Container: el logotipo trae su propio espacio de seguridad en el trazado, y con el padding encima se veía descolgado del borde del contenido */
@@ -787,8 +801,8 @@ html.dark {
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --site-header-bg: var(--color-background-dark); /** Fondo de la barra — surface-dark */
-  --site-header-panel-bg: var(--color-background-dark); /** Fondo del panel — surface-dark */
+  --site-header-bg: var(--color-bg-dark); /** Fondo de la barra — surface-dark */
+  --site-header-panel-bg: var(--color-bg-dark); /** Fondo del panel — surface-dark */
 }
 
 /**
@@ -867,6 +881,7 @@ html.dark {
   --label-letter-spacing: var(--letter-spacing-normal); /** Letter spacing */
   --label-font-weight: var(--font-weight-emphasis); /** Font weight */
   --label-color: var(--color-text-on-light); /** Text color */
+  --label-optional-color: var(--color-text-muted-on-light); /** Tinta de la marca « (opcional)» tras la etiqueta de un campo `optional` (D70): la apagada, mismo tamaño que la etiqueta */
 }
 
 .surface-dark,
@@ -874,6 +889,7 @@ html.dark {
 [data-theme="dark"],
 html.dark {
   --label-color: var(--color-text-on-dark); /** Color — surface-dark */
+  --label-optional-color: var(--color-text-muted-on-dark); /** Tinta de la marca de opcional — surface-dark */
 }
 
 /**
@@ -946,7 +962,7 @@ html.dark {
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --input-bg: var(--color-background-dark); /** Background — surface-dark */
+  --input-bg: var(--color-bg-dark); /** Background — surface-dark */
   --input-color: var(--color-text-on-dark); /** Text color — surface-dark */
   --input-border-color: var(--color-text-on-dark); /** Border color — surface-dark */
   --input-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder — surface-dark: blanco */
@@ -957,7 +973,7 @@ html.dark {
   --input-disabled-bg: var(--color-disabled-bg-on-dark); /** Fondo deshabilitado — surface-dark */
   --input-disabled-color: var(--color-disabled-text-on-dark); /** Texto deshabilitado — surface-dark */
   --input-disabled-border-color: var(--color-disabled-border-on-dark); /** Borde deshabilitado — surface-dark */
-  --input-error-bg: var(--color-background-dark); /** Fondo en error — surface-dark (el del lienzo, no blanco) */
+  --input-error-bg: var(--color-bg-dark); /** Fondo en error — surface-dark (el del lienzo, no blanco) */
   --input-error-color: var(--color-text-on-dark); /** Texto en error — surface-dark */
   --input-error-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder en error — surface-dark */
   --input-error-focus-border-color: var(--color-error-text-on-dark); /** Borde en foco+error — surface-dark */
@@ -1025,7 +1041,7 @@ html.dark {
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --textarea-bg: var(--color-background-dark); /** Background — surface-dark */
+  --textarea-bg: var(--color-bg-dark); /** Background — surface-dark */
   --textarea-color: var(--color-text-on-dark); /** Text color — surface-dark */
   --textarea-border-color: var(--color-text-on-dark); /** Border color — surface-dark */
   --textarea-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder — surface-dark: blanco */
@@ -1036,7 +1052,7 @@ html.dark {
   --textarea-disabled-bg: var(--color-disabled-bg-on-dark); /** Fondo deshabilitado — surface-dark */
   --textarea-disabled-color: var(--color-disabled-text-on-dark); /** Texto deshabilitado — surface-dark */
   --textarea-disabled-border-color: var(--color-disabled-border-on-dark); /** Borde deshabilitado — surface-dark */
-  --textarea-error-bg: var(--color-background-dark); /** Fondo en error — surface-dark (el del lienzo, no blanco) */
+  --textarea-error-bg: var(--color-bg-dark); /** Fondo en error — surface-dark (el del lienzo, no blanco) */
   --textarea-error-color: var(--color-text-on-dark); /** Texto en error — surface-dark */
   --textarea-error-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder en error — surface-dark */
   --textarea-error-focus-border-color: var(--color-error-text-on-dark); /** Borde en foco+error — surface-dark */
@@ -1059,6 +1075,7 @@ html.dark {
   --button-outline-bg: rgba(0, 0, 0, 0); /** Background */
   --button-text-border-width: 0; /** Border width — 0 para uso inline en texto */
   --button-text-padding-inline: 0; /** Inline (horizontal) padding — 0 para uso inline en texto */
+  --button-text-padding-block-start: 0; /** Padding superior — 0. Anula el `padding-block` de 1px que el agente de usuario pone a `<button>`: sin él, la variante como botón medía 21px y como enlace (`href`) 20px. La caja es el alto de línea más la separación de la línea (`underline-offset`) */
   --button-text-bg: rgba(0, 0, 0, 0); /** Background — always transparent */
   --button-text-border: rgba(0, 0, 0, 0); /** Border color — transparent */
   --button-text-hover-bg: rgba(0, 0, 0, 0); /** Hover background — stays transparent */
@@ -1105,7 +1122,11 @@ html.dark {
   --button-text-cursor: var(--link-cursor); /** Cursor */
   --button-text-white-space: var(--button-white-space); /** White space */
   --button-text-hover-underline-width: var(--link-hover-underline-width); /** Grosor de la línea en hover y en activo — el de `Link` */
+  --button-text-decoration-line: var(--link-decoration-line); /** Si se subraya en reposo — el de `Link` */
+  --button-text-hover-decoration-line: var(--link-hover-decoration-line); /** Si se subraya en hover y en activo — el de `Link` */
   --button-text-ink-hover-underline-width: var(--link-ink-hover-underline-width); /** tone=ink: grosor del subrayado en hover */
+  --button-text-ink-decoration-line: var(--link-ink-decoration-line); /** tone=ink: si se subraya en reposo */
+  --button-text-ink-hover-decoration-line: var(--link-ink-hover-decoration-line); /** tone=ink: si se subraya en hover */
   --button-text-disabled-cursor: var(--button-disabled-cursor); /** Cursor when disabled */
   --button-text-focus-ring-style: var(--button-focus-ring-style); /** Focus ring border style */
   --button-ghost-border-style: var(--button-border-style); /** Border style */
@@ -1168,7 +1189,7 @@ html.dark {
   --button-text-font-family: var(--button-font-family); /** Font family */
   --button-text-font-size: var(--button-font-size); /** Font size */
   --button-text-line-height: var(--button-line-height); /** Line height */
-  --button-text-underline-offset: var(--link-underline-offset); /** Separación entre el texto y su línea — la de `Link`. Va como `padding-block-end`, así que la línea cae por debajo del icono igual que del texto */
+  --button-text-underline-offset: var(--link-underline-offset); /** Separación entre el texto y su línea — la de `Link`. Se reserva como `padding-block-end` (la caja mide alto de línea más esta separación) y la línea cae en el borde inferior de ese hueco (`text-underline-offset: calc(<separación> - <grosor>)`) */
   --button-text-transition-duration: var(--button-transition-duration); /** Transition duration */
   --button-text-transition-easing: var(--button-transition-easing); /** Transition easing */
   --button-ghost-font-family: var(--button-font-family); /** Font family */
@@ -1196,7 +1217,7 @@ html.dark {
   --button-outline-focus-ring-width: var(--button-focus-ring-width); /** Focus ring width */
   --button-text-border-radius: var(--button-border-radius); /** Border radius */
   --button-text-font-weight: var(--button-font-weight); /** Font weight */
-  --button-text-underline-width: var(--link-underline-width); /** Grosor de la línea en reposo. La variante `text` se subraya con la misma técnica que `Link` —sombra interior, no `text-decoration`— porque `text-decoration` no cubre un SVG y un botón con icono quedaba con la línea cortada. Apunta al token de `Link` para que las dos piezas no puedan separarse */
+  --button-text-underline-width: var(--link-underline-width); /** Grosor del subrayado en reposo (`text-decoration-thickness`). La variante `text` se subraya igual que `Link` —`text-decoration` con grosor y distancia de token (D64)—, y apunta a sus tokens para que las dos piezas no puedan separarse. El icono del botón no se subraya */
   --button-text-ink-color: var(--link-ink-color); /** tone=ink: la tinta de la superficie, como en Link */
   --button-text-ink-underline-width: var(--link-ink-underline-width); /** tone=ink: grosor del subrayado en reposo */
   --button-text-disabled-color: var(--button-disabled-color); /** Text color when disabled — light surface */
@@ -1222,6 +1243,8 @@ html.dark {
   --button-outline-active-border: var(--color-white); /** Active border color — surface-dark */
   --button-outline-focus-ring-color: var(--color-white); /** Focus ring color — surface-dark */
   --button-text-underline-width: var(--link-underline-width); /** Grosor de la línea en reposo — surface-dark: el de `Link`, que sobre fondo oscuro no lleva línea en reposo */
+  --button-text-decoration-line: var(--link-decoration-line); /** Si se subraya en reposo — surface-dark: el de `Link`, sin línea */
+  --button-text-hover-decoration-line: var(--link-hover-decoration-line); /** Si se subraya en hover y activo — surface-dark: el de `Link`, con línea */
   --button-primary-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark (blanco) */
   --button-destructive-color: var(--color-destructive-text-on-dark); /** Text color — surface-dark */
   --button-destructive-border: var(--color-destructive-text-on-dark); /** Border color — surface-dark */
@@ -1275,13 +1298,13 @@ html.dark {
   --checkbox-border-radius: var(--border-radius-default); /** Border radius */
   --checkbox-border-width: var(--border-width-default); /** Border width */
   --checkbox-border-color: var(--color-primary); /** Color del borde */
-  --checkbox-bg-checked: var(--color-primary); /** Fondo cuando está marcado */
+  --checkbox-checked-bg: var(--color-primary); /** Fondo cuando está marcado */
   --checkbox-focus-ring-width: var(--border-width-focus); /** Ancho del anillo de foco */
   --checkbox-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco respecto al borde */
   --checkbox-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
   --checkbox-error-border-color: var(--color-error-text-on-light); /** Borde en error: el color de error (texto/borde, nunca fondo) */
   --checkbox-disabled-border-color: var(--color-disabled-border-on-light); /** Color del borde cuando está deshabilitado */
-  --checkbox-disabled-bg-checked: var(--color-disabled-border-on-light); /** Fondo marcado/indeterminado cuando está deshabilitado */
+  --checkbox-checked-disabled-bg: var(--color-disabled-border-on-light); /** Fondo marcado/indeterminado cuando está deshabilitado */
 }
 
 .surface-dark,
@@ -1290,11 +1313,11 @@ html.dark {
 html.dark {
   --checkbox-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
   --checkbox-border-color: var(--color-text-on-dark); /** Border color — surface-dark */
-  --checkbox-bg-checked: var(--color-text-on-dark); /** Background when checked — surface-dark */
-  --checkbox-check-color: var(--color-background-dark); /** Checkmark color — surface-dark */
+  --checkbox-checked-bg: var(--color-text-on-dark); /** Background when checked — surface-dark */
+  --checkbox-check-color: var(--color-bg-dark); /** Checkmark color — surface-dark */
   --checkbox-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
   --checkbox-disabled-border-color: var(--color-text-muted-on-dark); /** Borde deshabilitado — surface-dark */
-  --checkbox-disabled-bg-checked: var(--color-text-muted-on-dark); /** Fondo marcado deshabilitado — surface-dark */
+  --checkbox-checked-disabled-bg: var(--color-text-muted-on-dark); /** Fondo marcado deshabilitado — surface-dark */
 }
 
 /**
@@ -1387,6 +1410,15 @@ html.dark {
   --close-button-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
 }
 
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --embed-frame-device-mobile-width: 375px; /** Ancho del marco con `device="mobile"`: el de un teléfono en vertical, el ancho de referencia contra el que el sistema comprueba que una maqueta cabe. No es un punto de corte —el primero, `breakpoint.sm`, es el teléfono apaisado—: es la pantalla que se simula */
+  --embed-frame-device-tablet-width: var(--breakpoint-md); /** Ancho del marco con `device="tablet"` (768px): la tableta. Apunta al breakpoint porque es justo lo que se simula —el ancho en el que el documento de dentro pasa de una columna a varias— */
+}
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1396,7 +1428,7 @@ html.dark {
   --logo-height-md: var(--size-component-md); /** Alto por defecto: cabeceras y formularios de acceso */
   --logo-height-lg: var(--size-component-lg); /** Alto destacado: pie de página */
   --logo-height-xl: var(--icon-size-xl); /** Alto de marca: la cabecera del sitio. Es la talla ilustrativa de la escala de iconos (64px), no una talla de control */
-  --logo-height-xxl: calc(var(--logo-height-xl) * 4 / 3); /** Alto de marca mayor: la cabecera del sitio por defecto. Sigue la progresión de la escala —el mismo salto que hay de lg a xl (4/3)— sobre la talla xl: 85,33px */
+  --logo-height-2xl: calc(var(--logo-height-xl) * 4 / 3); /** Alto de marca mayor: la cabecera del sitio por defecto. Sigue la progresión de la escala —el mismo salto que hay de lg a xl (4/3)— sobre la talla xl: 85,33px */
   --logo-color: var(--color-text-on-light); /** Color del trazado sobre superficie clara */
 }
 
@@ -1438,7 +1470,7 @@ html.dark {
   --app-header-flyout-offset: var(--spacing-1); /** Separación compartida entre el borde inferior de la cabecera y el flotante que anclan sus disparadores (menú de usuario, panel de notificaciones): la que ya tenía el menú de usuario */
   --app-header-z-index: var(--z-index-bar); /** Capa de barra fija */
   --app-header-height: calc(var(--app-header-content-height) + 2 * var(--app-header-padding-block)); /** Altura de la barra: compuesta, 56px */
-  --app-header-bg: var(--color-background-light); /** Fondo */
+  --app-header-bg: var(--color-bg-light); /** Fondo */
   --app-header-border-width: var(--border-width-default); /** Borde inferior que la separa del contenido */
   --app-header-border-color: var(--color-primary); /** Color del borde */
 }
@@ -1447,7 +1479,7 @@ html.dark {
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --app-header-bg: var(--color-background-dark); /** Fondo — surface-dark */
+  --app-header-bg: var(--color-bg-dark); /** Fondo — surface-dark */
   --app-header-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
 }
 
@@ -1544,7 +1576,7 @@ html.dark {
   --filter-bar-row-gap: var(--field-row-row-gap); /** Aire entre las filas de filtros cuando hay más de las que caben por punto de corte, y entre los filtros apilados en móvil */
   --filter-bar-actions-gap: var(--form-actions-gap); /** Aire entre las acciones de la barra — el de los botones de un formulario: la fila de acciones del sistema es una sola */
   --filter-bar-label-offset: calc(var(--label-font-size) * var(--label-line-height) + var(--input-field-gap)); /** El renglón que ocupa un rótulo sobre su control: cuerpo × interlineado del `Label` más el aire que los separa en un campo (29px en la aplicación; en la superficie pública el rótulo es mayor y el renglón sube con él). Es lo que la barra reserva sobre lo que NO lleva rótulo —un interruptor, el botón de limpiar— para que no se suba a la línea de las etiquetas */
-  --filter-bar-control-block-size: var(--control-height); /** La caja de un campo de una línea (40px, la talla md del sistema; 48px en la superficie pública, que parte de lg). Es la referencia contra la que se centra lo que no lleva rótulo: el interruptor queda a la altura óptica del recuadro que tiene al lado, no del renglón entero —que con un control alto al lado sería otra altura cada vez— */
+  --filter-bar-control-height: var(--control-height); /** La caja de un campo de una línea (40px, la talla md del sistema; 48px en la superficie pública, que parte de lg). Es la referencia contra la que se centra lo que no lleva rótulo: el interruptor queda a la altura óptica del recuadro que tiene al lado, no del renglón entero —que con un control alto al lado sería otra altura cada vez— */
 }
 
 /**
@@ -1569,6 +1601,7 @@ html.dark {
   --site-nav-item-gap: var(--spacing-3); /** Separación entre enlaces de un grupo */
   --site-nav-item-font-size: var(--font-size-4); /** Enlaces: un punto por debajo de la cabecera del grupo (Heading talla 6 = font-size.5) */
   --site-nav-item-line-height: var(--line-height-snug); /** Enlaces */
+  --site-nav-item-hover-decoration-line: var(--link-decoration-line); /** Enlaces en hover: subrayados en claro (`text-decoration-line`), como los enlaces de texto en reposo */
   --site-nav-item-badge-gap: var(--spacing-2); /** Aire entre el rótulo del ítem y su distintivo */
   --site-nav-item-font-weight: var(--font-weight-default); /** Enlaces */
   --site-nav-item-color: var(--color-text-on-light); /** Enlaces */
@@ -1580,7 +1613,7 @@ html.dark {
   --site-nav-focus-ring-width: var(--border-width-focus); /** Anillo de foco */
   --site-nav-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco */
   --site-nav-focus-ring-color: var(--color-primary); /** Anillo de foco */
-  --site-nav-item-hover-line-width: var(--link-underline-width); /** Enlaces en hover: la línea bajo el enlace (como los enlaces de texto), en claro */
+  --site-nav-item-hover-line-width: var(--link-underline-width); /** Enlaces en hover: grosor del subrayado (`text-decoration-thickness`), el de los enlaces de texto */
 }
 
 .surface-dark,
@@ -1588,6 +1621,7 @@ html.dark {
 [data-theme="dark"],
 html.dark {
   --site-nav-item-hover-line-width: 0px; /** Enlaces en hover — surface-dark: sin línea, cambia el color */
+  --site-nav-item-hover-decoration-line: none; /** Enlaces en hover — surface-dark: sin subrayado, cambia el color (un grosor 0 no basta: el navegador pinta como mínimo un píxel) */
   --site-nav-item-color: var(--color-text-on-dark); /** Enlaces — surface-dark */
   --site-nav-item-disabled-color: var(--color-disabled-text-on-dark); /** Ítem apagado — surface-dark */
   --site-nav-item-hover-color: var(--color-accent-2); /** Enlaces en hover — surface-dark: amarillo (accent-2) en vez de línea */
@@ -1663,6 +1697,7 @@ html.dark {
   --dropdown-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
   --dropdown-field-padding-inline: var(--select-padding-inline); /** Padding inline del control: el del Select */
   --dropdown-field-font-weight: var(--select-font-weight); /** Peso: el del Select */
+  --dropdown-field-line-height: var(--select-line-height); /** Interlineado del control: el del Select. Sin él, el botón heredaba el 1,15 de normalize.css */
   --dropdown-field-color: var(--select-color); /** Texto del control */
   --dropdown-field-border-width: var(--select-border-width); /** Borde rectangular, como el Select */
   --dropdown-field-border-color: var(--select-border-color); /** Color del borde */
@@ -1681,7 +1716,7 @@ html.dark {
 html.dark {
   --dropdown-field-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
   --dropdown-field-color: var(--color-text-on-dark); /** Texto — surface-dark */
-  --dropdown-field-bg: var(--color-background-dark); /** Fondo — surface-dark */
+  --dropdown-field-bg: var(--color-bg-dark); /** Fondo — surface-dark */
   --dropdown-field-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
   --dropdown-field-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
   --dropdown-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
@@ -1766,9 +1801,9 @@ html.dark {
  */
 
 :root {
-  --notification-panel-list-max-block-size: 21rem; /** Alto máximo de la lista (336px): pasado ese alto la lista hace scroll y la cabecera y el pie se quedan quietos. Medida de maqueta */
+  --notification-panel-list-max-height: 21rem; /** Alto máximo de la lista (336px): pasado ese alto la lista hace scroll y la cabecera y el pie se quedan quietos. Medida de maqueta */
   --notification-panel-item-body-line-clamp: 2; /** Cuántas líneas del cuerpo se ven antes de recortar con elipsis. El panel es un adelanto: el texto entero está en la bandeja */
-  --notification-panel-inline-size: min(22.5rem, calc(100vw - 2 * var(--spacing-5))); /** Ancho del panel (360px), con tope para que no se salga en una pantalla estrecha. Medida de maqueta, como la de la Sidebar: no pertenece a la escala de tallas */
+  --notification-panel-width: min(22.5rem, calc(100vw - 2 * var(--spacing-5))); /** Ancho del panel (360px), con tope para que no se salga en una pantalla estrecha. Medida de maqueta, como la de la Sidebar: no pertenece a la escala de tallas */
   --notification-panel-padding-inline: var(--spacing-4); /** Aire lateral de las filas, del bloque de marcar todas y del pie: el mismo, para que todo alinee en una sola columna */
   --notification-panel-mark-all-padding-block: var(--spacing-3); /** Aire vertical del bloque de «Marcar todas», entre la lista y el pie */
   --notification-panel-list-padding-block: var(--spacing-2); /** Aire vertical de la lista dentro del panel */
@@ -1972,7 +2007,7 @@ html.dark {
  */
 
 :root {
-  --otp-input-cell-inline-size: 3.5ch; /** Anchura de una celda: medida en caracteres para que el dígito quepa centrado a cualquier talla de texto, sin recortarse con el texto ampliado (WCAG 1.4.4) */
+  --otp-input-cell-width: 3.5ch; /** Anchura de una celda: medida en caracteres para que el dígito quepa centrado a cualquier talla de texto, sin recortarse con el texto ampliado (WCAG 1.4.4) */
   --otp-input-gap: var(--spacing-2); /** Separación entre celdas del código */
 }
 
@@ -2121,11 +2156,11 @@ html.dark {
 [data-theme="dark"],
 html.dark {
   --select-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
-  --select-bg: var(--color-background-dark); /** Fondo del trigger — surface-dark */
+  --select-bg: var(--color-bg-dark); /** Fondo del trigger — surface-dark */
   --select-color: var(--color-text-on-dark); /** Color del texto — surface-dark */
   --select-border-color: var(--color-text-on-dark); /** Color del borde — surface-dark */
   --select-focus-ring-color: var(--color-text-on-dark); /** Color del anillo de foco — surface-dark */
-  --select-content-bg: var(--color-background-dark); /** Fondo del dropdown — surface-dark */
+  --select-content-bg: var(--color-bg-dark); /** Fondo del dropdown — surface-dark */
   --select-content-border-color: var(--color-text-on-dark); /** Borde del dropdown — surface-dark */
   --select-separator-color: var(--color-text-on-dark); /** Color del separador entre grupos — surface-dark */
   --select-item-highlighted-bg: var(--color-text-on-dark); /** Relleno de la opción resaltada — surface-dark: la misma inversión de marca, al revés */
@@ -2195,12 +2230,12 @@ html.dark {
 [data-theme="dark"],
 html.dark {
   --multi-select-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
-  --multi-select-bg: var(--color-background-dark); /** Background — surface-dark */
+  --multi-select-bg: var(--color-bg-dark); /** Background — surface-dark */
   --multi-select-color: var(--color-text-on-dark); /** Text color — surface-dark */
   --multi-select-border-color: var(--color-text-on-dark); /** Border color — surface-dark */
   --multi-select-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
   --multi-select-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder color — surface-dark */
-  --multi-select-content-bg: var(--color-background-dark); /** Dropdown background — surface-dark */
+  --multi-select-content-bg: var(--color-bg-dark); /** Dropdown background — surface-dark */
   --multi-select-content-border-color: var(--color-text-on-dark); /** Dropdown border color — surface-dark */
   --multi-select-pill-bg: var(--color-accent-1); /** Relleno de las pills — surface-dark: el prusia coincidiría con el lienzo; par de `Button primary` (lavanda con tinta prusia) */
   --multi-select-pill-color: var(--color-primary); /** Texto de las pills — surface-dark */
@@ -2315,7 +2350,7 @@ html.dark {
  */
 
 :root {
-  --async-multi-select-input-min-inline-size: 4rem; /** Ancho mínimo del texto de búsqueda junto a las píldoras: lo justo para escribir sin que salte de línea a cada letra */
+  --async-multi-select-input-min-width: 4rem; /** Ancho mínimo del texto de búsqueda junto a las píldoras: lo justo para escribir sin que salte de línea a cada letra */
   --async-multi-select-disabled-cursor: var(--input-disabled-cursor); /** Cursor cuando está deshabilitado: el de los campos */
   --async-multi-select-disabled-opacity: var(--async-select-disabled-opacity); /** Opacidad del control deshabilitado: la del buscador de selección única */
   --async-multi-select-pill-remove-opacity: var(--opacity-muted); /** Opacidad del aspa de la píldora en reposo: presente pero en segundo plano */
@@ -2530,7 +2565,7 @@ html.dark {
   --floating-panel-z-index: var(--z-index-floating); /** Capa z — por encima del modal (1001) para que los paneles flotantes sean visibles dentro de modales */
   --floating-panel-transition-duration: var(--motion-duration-fast); /** Duración de la animación de entrada/salida */
   --floating-panel-transition-easing: var(--motion-easing-default); /** Easing de la animación */
-  --floating-panel-bg: var(--color-background-light); /** Fondo de cualquier panel flotante (popover, context-menu…) */
+  --floating-panel-bg: var(--color-bg-light); /** Fondo de cualquier panel flotante (popover, context-menu…) */
   --floating-panel-border-width: var(--border-width-default); /** Grosor del borde */
   --floating-panel-border-color: var(--color-primary); /** Color del borde — prussian en modo claro */
   --floating-panel-border-radius: var(--border-radius-default); /** Sin radio de esquinas */
@@ -2541,7 +2576,7 @@ html.dark {
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --floating-panel-bg: var(--color-background-dark); /** Fondo — surface-dark */
+  --floating-panel-bg: var(--color-bg-dark); /** Fondo — surface-dark */
   --floating-panel-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
 }
 
@@ -2550,8 +2585,8 @@ html.dark {
  */
 
 :root {
-  --floating-dock-panel-inline-size: 22rem; /** Ancho del panel (352px). Medida de layout, como `modal.width-max`: no sale de la escala de espaciado */
-  --floating-dock-panel-block-size: 32rem; /** Alto del panel (512px). Se recorta contra la ventana: nunca sobrepasa el alto disponible */
+  --floating-dock-panel-width: 22rem; /** Ancho del panel (352px). Medida de layout, como `modal.max-width`: no sale de la escala de espaciado */
+  --floating-dock-panel-height: 32rem; /** Alto del panel (512px). Se recorta contra la ventana: nunca sobrepasa el alto disponible */
   --floating-dock-z-index: var(--z-index-bar); /** Capa del ancla: la del chrome de aplicación (100). Por debajo del velo y del modal, para que un diálogo del producto siga tapando al dock */
   --floating-dock-offset-inline: var(--spacing-5); /** Distancia al borde lateral de la ventana (24px). Se suma al `safe-area-inset` del dispositivo, nunca lo sustituye */
   --floating-dock-offset-block: var(--spacing-5); /** Distancia al borde superior o inferior de la ventana (24px). Se suma al `safe-area-inset` */
@@ -2615,7 +2650,6 @@ html.dark {
   --menu-item-font-size: var(--font-size-2); /** Tamaño de texto de ítems */
   --menu-item-line-height: var(--line-height-snug); /** Interlineado de ítems */
   --menu-label-padding-block: var(--spacing-2); /** Padding vertical del rótulo de sección */
-  --menu-label-padding-inline: var(--spacing-4); /** Padding horizontal del rótulo de sección */
   --menu-label-font-size: var(--font-size-1); /** Tamaño de texto del rótulo de sección */
   --menu-disabled-opacity: var(--opacity-disabled); /** Opacidad de ítems deshabilitados */
   --menu-z-index: var(--floating-panel-z-index); /** Capa z del panel flotante */
@@ -2632,6 +2666,8 @@ html.dark {
   --menu-item-destructive-color: var(--color-destructive-text-on-light); /** Color de texto de ítem destructivo */
   --menu-item-destructive-highlighted-bg: var(--color-destructive-fill); /** Relleno del ítem destructivo resaltado: el rojo sólido, universal en las dos superficies */
   --menu-item-destructive-highlighted-color: var(--color-destructive-fill-text); /** Texto del ítem destructivo resaltado */
+  --menu-label-margin-inline: var(--menu-padding-inline); /** Margen lateral del rótulo de sección: el mismo `margin-inline` que el ítem (`menu.padding-inline`), para que su texto quede alineado con el del ítem por construcción */
+  --menu-label-padding-inline: var(--menu-item-padding-inline); /** Padding horizontal del rótulo de sección: el mismo que el del ítem (`menu.item-padding-inline`). Con `label-margin-inline`, el texto del rótulo arranca donde arranca el contenido del ítem (su texto o, si lo lleva, su icono) */
   --menu-label-font-weight: var(--font-weight-emphasis); /** Peso del rótulo de sección */
   --menu-label-color: var(--color-text-muted-on-light); /** Color del rótulo de sección */
   --menu-separator-margin-block: var(--separator-spacing-md); /** Margen vertical del separador — el aire md de la línea del sistema */
@@ -2666,6 +2702,7 @@ html.dark {
 
 :root {
   --command-palette-max-height: min(24rem, 60vh); /** Alto máximo de la paleta — la lista scrollea dentro */
+  --command-palette-input-line-height: 1.15; /** Interlineado del buscador: el 1,15 que heredaba de normalize.css, ahora declarado. No es `1` (1): Chromium no deja que un `<input>` baje de su interlineado `normal`, y a 20px el buscador crecía de 48 a 50px */
   --command-palette-input-padding-block: var(--spacing-3); /** Padding vertical del buscador */
   --command-palette-input-padding-inline: var(--spacing-2); /** Padding horizontal del buscador */
   --command-palette-input-font-size: var(--font-size-3); /** Tamaño de texto del buscador */
@@ -2771,7 +2808,7 @@ html.dark {
   --tooltip-font-size: var(--font-size-1); /** Tamaño de texto del bocadillo */
   --tooltip-line-height: var(--line-height-snug); /** Interlineado del bocadillo */
   --tooltip-offset: var(--spacing-1); /** Separación entre disparador y bocadillo (4px). Fuente del sideOffset por defecto */
-  --tooltip-bg: var(--color-background-dark); /** Fondo del bocadillo — superficie invertida para máximo contraste */
+  --tooltip-bg: var(--color-bg-dark); /** Fondo del bocadillo — superficie invertida para máximo contraste */
   --tooltip-color: var(--color-text-on-dark); /** Color del texto del bocadillo */
   --tooltip-border-radius: var(--border-radius-default); /** Radio de esquinas del bocadillo */
   --tooltip-z-index: var(--floating-panel-z-index); /** Capa z — la misma que el resto de paneles flotantes */
@@ -2783,7 +2820,7 @@ html.dark {
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --tooltip-bg: var(--color-background-light); /** Fondo del bocadillo — surface-dark. Mismo patrón de superficie invertida que en claro (ahí: fondo `background.dark`), pero simétrico para lienzo oscuro: fondo claro, texto oscuro. Sin acento de marca */
+  --tooltip-bg: var(--color-bg-light); /** Fondo del bocadillo — surface-dark. Mismo patrón de superficie invertida que en claro (ahí: fondo `background.dark`), pero simétrico para lienzo oscuro: fondo claro, texto oscuro. Sin acento de marca */
   --tooltip-color: var(--color-text-on-light); /** Texto del bocadillo — surface-dark, el par del fondo claro */
 }
 
@@ -2814,6 +2851,7 @@ html.dark {
   --pagination-summary-color: var(--color-text-on-light); /** Color del texto de total de resultados */
   --pagination-btn-height: var(--button-height); /** Altura del botón de página — la del `Button md` (40px). También su lado mínimo: la caja es cuadrada */
   --pagination-btn-font-size: var(--button-font-size); /** Tipografía del botón de página — la del `Button md` */
+  --pagination-btn-line-height: var(--button-line-height); /** Interlineado del botón de página — el del `Button`. Sin él, heredaba el 1,15 de normalize.css */
   --pagination-btn-color: var(--color-primary); /** Tinta del botón en reposo */
   --pagination-btn-border-color: var(--color-primary); /** Borde del botón en reposo */
   --pagination-btn-hover-bg: var(--color-primary); /** Relleno en hover — el outline se invierte, sin subrayado */
@@ -2913,11 +2951,11 @@ html.dark {
   --consent-banner-z-index: var(--z-index-bar); /** Capa: la de las barras fijas de la aplicación. Por debajo del velo de un modal — el banner no bloquea nada */
   --consent-preferences-gap: var(--spacing-4); /** Separación entre los bloques del panel */
   --consent-preferences-category-gap: var(--spacing-3); /** Separación entre categorías de la lista */
-  --consent-banner-bg: var(--color-background-light); /** Fondo de la banda */
+  --consent-banner-bg: var(--color-bg-light); /** Fondo de la banda */
   --consent-banner-color: var(--color-text-on-light); /** Texto de la banda */
   --consent-banner-border-color: var(--color-primary); /** Línea superior que separa la banda de la página */
   --consent-banner-border-width: var(--border-width-default); /** Grosor de la línea superior */
-  --consent-banner-max-inline-size: var(--container-max-width-xl); /** Ancho máximo del contenido dentro de la banda: el mismo del contenido de una página pública */
+  --consent-banner-max-width: var(--container-max-width-xl); /** Ancho máximo del contenido dentro de la banda: el mismo del contenido de una página pública */
   --consent-banner-title-font-size: var(--text-size-3); /** Cuerpo del título de la banda */
   --consent-banner-description-font-size: var(--text-font-size); /** Cuerpo del texto de la banda: el cuerpo de texto de la superficie, sin reducir (decisión del 2026-08-28) */
 }
@@ -2926,7 +2964,7 @@ html.dark {
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --consent-banner-bg: var(--color-background-dark); /** Fondo de la banda — surface-dark */
+  --consent-banner-bg: var(--color-bg-dark); /** Fondo de la banda — surface-dark */
   --consent-banner-color: var(--color-text-on-dark); /** Texto de la banda — surface-dark */
   --consent-banner-border-color: var(--color-text-on-dark); /** Línea superior — surface-dark */
 }
@@ -2940,9 +2978,9 @@ html.dark {
   --carousel-gap: var(--spacing-4); /** Aire entre diapositivas */
   --carousel-controls-gap: var(--spacing-2); /** Aire entre los botones de la barra de control */
   --carousel-controls-space-before: var(--spacing-4); /** Aire entre la pista y la barra de control */
-  --carousel-indicator-inline-size: var(--spacing-6); /** Largo de la barra indicadora (32px) */
-  --carousel-indicator-hit-block-size: var(--spacing-4); /** Alto del área pulsable del indicador: la barra es fina, el objetivo táctil no */
-  --carousel-indicator-block-size: var(--border-width-focus); /** Grosor de la barra indicadora — el mismo peso que la barra de activo del sistema */
+  --carousel-indicator-width: var(--spacing-6); /** Largo de la barra indicadora (32px) */
+  --carousel-indicator-hit-height: var(--spacing-4); /** Alto del área pulsable del indicador: la barra es fina, el objetivo táctil no */
+  --carousel-indicator-height: var(--border-width-focus); /** Grosor de la barra indicadora — el mismo peso que la barra de activo del sistema */
   --carousel-indicator-color: var(--color-text-muted-on-light); /** Barra de una diapositiva que no está a la vista */
   --carousel-indicator-current-color: var(--color-text-on-light); /** Barra de la diapositiva a la vista. Es una barra de tinta, no un relleno: la posición no es un estado que se pinte de marca */
   --carousel-focus-ring-color: var(--color-primary); /** Color del anillo de foco de los indicadores */
@@ -2987,7 +3025,7 @@ html.dark {
 
 :root {
   --table-bg: rgba(0, 0, 0, 0); /** Fondo de la tabla */
-  --table-actions-inline-size: 1px; /** Ancho de la cabecera de la columna de acciones. No fija un ancho: con `table-layout: auto` el sobrante se reparte entre las demás columnas y esta se encoge a su contenido */
+  --table-actions-width: 1px; /** Ancho de la cabecera de la columna de acciones. No fija un ancho: con `table-layout: auto` el sobrante se reparte entre las demás columnas y esta se encoge a su contenido */
   --table-font-family: var(--font-family-sans); /** Font family */
   --table-header-padding-block: var(--spacing-3); /** Padding block del encabezado */
   --table-header-padding-inline: var(--spacing-3); /** Padding inline del encabezado */
@@ -3016,7 +3054,7 @@ html.dark {
   --table-row-hover-marker-width: var(--border-width-focus); /** Grosor de la barra que marca la fila bajo el puntero. El hover no pinta relleno (regla de Colores): la fila se señala con una barra de tinta en su borde de inicio, el mismo grafismo que la sección activa del SidebarNav en rail */
   --table-row-hover-marker-color: var(--color-primary); /** Color de la barra de hover — tinta de la superficie */
   --table-row-selected-font-weight: var(--font-weight-emphasis); /** Peso de la fila seleccionada */
-  --table-sticky-bg: var(--color-background-light); /** Fondo de la columna de acciones pegajosa (cabecera y celda): opaco, para tapar el resto de columnas que se deslizan debajo al hacer scroll horizontal */
+  --table-sticky-bg: var(--color-bg-light); /** Fondo de la columna de acciones pegajosa (cabecera y celda): opaco, para tapar el resto de columnas que se deslizan debajo al hacer scroll horizontal */
   --table-footer-bg: var(--color-surface-secondary-on-light); /** Fondo del tfoot: superficie clara secundaria, no un fondo de estado */
   --table-footer-border-width: var(--border-width-default); /** Borde superior del tfoot — 1px, como el del thead */
   --table-footer-border-color: var(--color-text-on-light); /** Color del borde superior del tfoot */
@@ -3036,7 +3074,7 @@ html.dark {
   --table-sort-icon-active-color: var(--color-text-on-dark); /** Icono de sort activo — surface-dark */
   --table-row-border-color: var(--color-text-on-dark); /** Separador entre filas — surface-dark */
   --table-row-selected-color: var(--color-accent-1); /** Tinta de la fila seleccionada — surface-dark: lavanda, como en el SidebarNav */
-  --table-sticky-bg: var(--color-background-dark); /** Fondo de la columna pegajosa — surface-dark */
+  --table-sticky-bg: var(--color-bg-dark); /** Fondo de la columna pegajosa — surface-dark */
   --table-footer-bg: var(--color-surface-secondary-on-dark); /** Fondo del tfoot — surface-dark */
   --table-footer-border-color: var(--color-text-on-dark); /** Borde superior del tfoot — surface-dark */
   --table-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
@@ -3069,7 +3107,7 @@ html.dark {
   --step-border-radius: var(--border-radius-default); /** Marca cuadrada, el radio del sistema — no `round`: la marca de un paso es identidad de marca, no un avatar ni una píldora */
   --step-border-width: var(--border-width-default); /** Filete de la marca hueca (estado `pending`). Todo borde del sistema mide lo mismo */
   --step-font-weight: var(--font-weight-default); /** Peso de la cifra: dentro de una marca rellena de otro color el peso no señala nada — el estado ya lo dicen el relleno y el filete */
-  --step-pending-bg: var(--color-background-light); /** Fondo de una marca hueca (`pending`): el lienzo de la página. Tiene que tapar el carril igual que una marca rellena — transparente, la línea lo cruzaría por la mitad */
+  --step-pending-bg: var(--color-bg-light); /** Fondo de una marca hueca (`pending`): el lienzo de la página. Tiene que tapar el carril igual que una marca rellena — transparente, la línea lo cruzaría por la mitad */
   --step-pending-border-color: var(--color-border-default-on-light); /** Filete de una marca hueca: el borde general del sistema */
   --step-pending-color: var(--color-text-muted-on-light); /** Cifra de una marca hueca: texto secundario */
   --step-tone-primary-bg: var(--color-primary); /** Relleno tono primary: la marca del sistema */
@@ -3082,8 +3120,8 @@ html.dark {
   --step-tone-support-1-color: var(--color-text-on-light); /** Tinta sobre support-1 */
   --step-tone-support-2-bg: var(--color-support-2); /** Relleno tono support-2 (cayenne) */
   --step-tone-support-2-color: var(--color-text-on-light); /** Tinta sobre support-2 */
-  --step-tone-danger-bg: var(--color-error-fill); /** Relleno tono danger */
-  --step-tone-danger-color: var(--color-error-fill-text); /** Tinta sobre danger */
+  --step-tone-error-bg: var(--color-error-fill); /** Relleno tono error */
+  --step-tone-error-color: var(--color-error-fill-text); /** Tinta sobre error */
   --step-tone-success-bg: var(--color-success-fill); /** Relleno tono success */
   --step-tone-success-color: var(--color-success-fill-text); /** Tinta sobre success */
   --step-tone-neutral-bg: var(--color-surface-inverse-on-light); /** Relleno tono neutral (gris oscuro) */
@@ -3098,7 +3136,7 @@ html.dark {
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --step-pending-bg: var(--color-background-dark); /** Fondo de la marca hueca — surface-dark */
+  --step-pending-bg: var(--color-bg-dark); /** Fondo de la marca hueca — surface-dark */
   --step-pending-border-color: var(--color-text-on-dark); /** Filete de la marca hueca — surface-dark */
   --step-pending-color: var(--color-text-muted-on-dark); /** Cifra de la marca hueca — surface-dark */
   --step-tone-primary-bg: var(--color-accent-2); /** Relleno primary — surface-dark. El prusia es el lienzo; se aparta de la derivación (lavanda, el par de Button primary) a propósito, en amarillo, para que el progreso no se confunda con una acción — decisión heredada de Stepper */
@@ -3185,7 +3223,7 @@ html.dark {
   --sidebar-group-padding-block: var(--spacing-2); /** Aire vertical de una sección del panel */
   --sidebar-group-gap: var(--spacing-1); /** Entre elementos de una sección */
   --sidebar-rail-width: calc(2 * var(--app-header-padding-inline) + var(--size-component-md)); /** Ancho del rail (72px): inset simétrico `1rem` (16px) a los dos lados — el izquierdo alinea el centro del icono con el centro del `MenuButton` del header — + caja de icono `2.5rem` (40px). Ver `rail-padding-inline-start` */
-  --sidebar-bg: var(--color-background-light); /** Fondo */
+  --sidebar-bg: var(--color-bg-light); /** Fondo */
   --sidebar-border-width: var(--border-width-default); /** Borde que separa la sidebar del contenido */
   --sidebar-border-color: var(--color-primary); /** Color del borde */
   --sidebar-rail-padding-inline-start: var(--app-header-padding-inline); /** Inset del rail (16px), igual a `--app-header-padding-inline`, a AMBOS lados (simétrico): alinea el centro del icono del rail con el centro del `MenuButton` del header (x=36px) y evita el aire desigual de una columna estrecha. Desacoplado del padding de desplegada (`padding-inline`) para no romper su alineación, ya correcta por composición de otros tokens */
@@ -3201,7 +3239,7 @@ html.dark {
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --sidebar-bg: var(--color-background-dark); /** Fondo — surface-dark */
+  --sidebar-bg: var(--color-bg-dark); /** Fondo — surface-dark */
   --sidebar-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
   --sidebar-separator-color: var(--color-text-on-dark); /** Línea — surface-dark */
   --sidebar-resizer-hover-color: var(--color-text-on-dark); /** Asa de redimensionado bajo el puntero — surface-dark */
@@ -3295,7 +3333,7 @@ html.dark {
   --app-launcher-transition-easing: var(--floating-panel-transition-easing); /** Easing de la animación */
   --app-launcher-tile-padding-block: var(--menu-item-padding-block); /** Padding vertical de cada tile — el de un ítem de Menu, para que la altura case con las listas de opciones del DS */
   --app-launcher-tile-padding-inline: var(--menu-item-padding-inline); /** Padding horizontal de cada tile — el de un ítem de Menu */
-  --app-launcher-tile-badge-block-size: calc(var(--tag-font-size) * var(--tag-line-height) + 2 * var(--tag-padding-block)); /** Alto de la fila del distintivo, que va ENCIMA del nombre. Es la caja de una `Tag` (cuerpo por interlineado más su aire) y se reserva SIEMPRE, lleve distintivo la baldosa o no: de ahí que todos los nombres de la rejilla queden a la misma altura. Sale de los tokens de `Tag`, así que sigue cuadrando si la píldora cambia de talla */
+  --app-launcher-tile-badge-height: calc(var(--tag-font-size) * var(--tag-line-height) + 2 * var(--tag-padding-block)); /** Alto de la fila del distintivo, que va ENCIMA del nombre. Es la caja de una `Tag` (cuerpo por interlineado más su aire) y se reserva SIEMPRE, lleve distintivo la baldosa o no: de ahí que todos los nombres de la rejilla queden a la misma altura. Sale de los tokens de `Tag`, así que sigue cuadrando si la píldora cambia de talla */
   --app-launcher-tile-border-radius: var(--border-radius-default); /** Radio de cada tile */
   --app-launcher-tile-name-font-weight: var(--font-weight-default); /** Peso del nombre de app */
   --app-launcher-tile-name-line-height: var(--menu-item-line-height); /** Interlineado del nombre de app — el de un ítem de Menu, para que la altura case con las listas de opciones del DS */
@@ -3465,9 +3503,9 @@ html.dark {
 
 :root {
   --modal-border-color: rgba(0, 0, 0, 0); /** Sin borde en superficie clara: el velo y el fondo blanco ya separan el panel */
-  --modal-width-max: 560px; /** Anchura máxima del panel. Medida de layout (como container.max-width-*), no de la escala de espaciado ni de tallas de componente */
-  --modal-inline-size: 90vw; /** Ancho del panel antes del tope de `width-max`: deja aire a los lados en pantallas estrechas. Medida de layout, igual que width-max */
-  --modal-max-height: 90dvh; /** Altura máxima del panel modal (dvh para móviles con barra de navegador variable). Medida de layout, igual que width-max */
+  --modal-max-width: 560px; /** Anchura máxima del panel. Medida de layout (como container.max-width-*), no de la escala de espaciado ni de tallas de componente */
+  --modal-width: 90vw; /** Ancho del panel antes del tope de `max-width`: deja aire a los lados en pantallas estrechas. Medida de layout, igual que `max-width` */
+  --modal-max-height: 90dvh; /** Altura máxima del panel modal (dvh para móviles con barra de navegador variable). Medida de layout, igual que `max-width` */
   --modal-z-index: var(--z-index-modal); /** z-index del panel modal */
   --modal-backdrop-z-index: var(--z-index-backdrop); /** z-index del backdrop */
   --modal-backdrop-bg: var(--color-black); /** Color del backdrop/scrim */
@@ -3483,7 +3521,7 @@ html.dark {
   --modal-description-margin-block-end: var(--spacing-4); /** Separación entre la descripción y el cuerpo del modal */
   --modal-close-size: var(--size-component-md); /** Caja del botón de cerrar (40px). En la superficie pública (SiteShell) remapea a size-component.lg */
   --modal-close-icon-size: var(--icon-size-md); /** Glifo del botón de cerrar (24px), la talla por defecto de icono-botón. En la superficie pública remapea igualmente a icon.size-md */
-  --modal-bg: var(--color-background-light); /** Fondo del panel modal */
+  --modal-bg: var(--color-bg-light); /** Fondo del panel modal */
   --modal-border-width: var(--border-width-default); /** Grosor del borde del panel */
   --modal-border-radius: var(--border-radius-default); /** Radio del panel */
   --modal-shadow: var(--shadow-default); /** Sombra de elevación */
@@ -3503,7 +3541,7 @@ html.dark {
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --modal-bg: var(--color-background-dark); /** Fondo del panel — surface-dark */
+  --modal-bg: var(--color-bg-dark); /** Fondo del panel — surface-dark */
   --modal-title-color: var(--color-text-on-dark); /** Color del título — surface-dark */
   --modal-border-color: var(--color-text-on-dark); /** Borde 1px — surface-dark: separa el panel del velo, que también es oscuro */
   --modal-description-color: var(--color-text-muted-on-dark); /** Color de la descripción — surface-dark */
@@ -3516,8 +3554,8 @@ html.dark {
  */
 
 :root {
-  --sheet-inline-size: min(20rem, 85vw); /** Ancho cuando entra por un lateral */
-  --sheet-block-size: 85vh; /** Alto máximo cuando entra por arriba o abajo */
+  --sheet-width: min(20rem, 85vw); /** Ancho cuando entra por un lateral */
+  --sheet-height: 85vh; /** Alto máximo cuando entra por arriba o abajo */
   --sheet-gap: var(--spacing-4); /** Separación entre bloques del panel */
   --sheet-footer-gap: var(--spacing-2); /** Separación entre acciones del pie */
   --sheet-close-inset: var(--spacing-3); /** Distancia del botón de cierre a la esquina */
@@ -3550,11 +3588,12 @@ html.dark {
  */
 
 :root {
+  --tabs-trigger-line-height: 1.15; /** Interlineado del trigger (1,15). Es el que el `<button>` heredaba de `normalize.css` sin declararlo; el token lo fija para que no dependa de la hoja de terceros. No hay primitivo de 1,15 en `line-height.*`: es medida propia del componente */
   --tabs-list-gap: var(--spacing-1); /** Gap entre triggers */
   --tabs-trigger-padding-block: var(--spacing-3); /** Padding vertical del trigger */
   --tabs-trigger-padding-inline: var(--spacing-4); /** Padding horizontal del trigger */
   --tabs-trigger-font-size: var(--font-size-2); /** Tamaño de fuente del trigger */
-  --tabs-trigger-pill-color-active: var(--color-white); /** Texto del trigger activo en variante pill */
+  --tabs-trigger-pill-active-color: var(--color-white); /** Texto del trigger activo en variante pill */
   --tabs-trigger-disabled-opacity: var(--opacity-disabled); /** Opacidad del trigger deshabilitado */
   --tabs-content-padding-block: var(--spacing-4); /** Padding vertical del panel de contenido */
   --tabs-transition-duration: var(--motion-duration-fast); /** Duración de la transición de color */
@@ -3568,7 +3607,7 @@ html.dark {
   --tabs-trigger-active-color: var(--color-text-on-light); /** Color del trigger activo */
   --tabs-trigger-indicator-width: var(--border-width-default); /** Grosor del indicador activo (underline) */
   --tabs-trigger-indicator-color: var(--color-primary); /** Color del indicador activo */
-  --tabs-trigger-pill-bg-active: var(--color-primary); /** Fondo del trigger activo en variante pill */
+  --tabs-trigger-pill-active-bg: var(--color-primary); /** Fondo del trigger activo en variante pill */
   --tabs-trigger-border-radius: var(--border-radius-default); /** Radio de borde del trigger (pill + focus ring) */
   --tabs-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
   --tabs-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
@@ -3583,8 +3622,8 @@ html.dark {
   --tabs-trigger-color: var(--color-text-muted-on-dark); /** Color del trigger inactivo — surface-dark */
   --tabs-trigger-hover-color: var(--color-text-on-dark); /** Color hover del trigger — surface-dark */
   --tabs-trigger-active-color: var(--color-text-on-dark); /** Color del trigger activo — surface-dark */
-  --tabs-trigger-pill-bg-active: var(--color-accent-1); /** Fondo del trigger activo, variante pill — surface-dark. `color.primary` coincide con el lienzo oscuro; toma el par de `Button primary` (lavanda con tinta prusia), la regla de derivación del sistema. Antes se invertía a blanco, que es el par de los componentes en los que `accent-1` ya es otra variante — no es el caso de Tabs */
-  --tabs-trigger-pill-color-active: var(--color-primary); /** Texto del trigger activo, variante pill — surface-dark */
+  --tabs-trigger-pill-active-bg: var(--color-accent-1); /** Fondo del trigger activo, variante pill — surface-dark. `color.primary` coincide con el lienzo oscuro; toma el par de `Button primary` (lavanda con tinta prusia), la regla de derivación del sistema. Antes se invertía a blanco, que es el par de los componentes en los que `accent-1` ya es otra variante — no es el caso de Tabs */
+  --tabs-trigger-pill-active-color: var(--color-primary); /** Texto del trigger activo, variante pill — surface-dark */
   --tabs-trigger-indicator-color: var(--color-text-on-dark); /** Indicador de pestaña activa (underline) — surface-dark: color.primary colisiona con el fondo */
   --tabs-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
 }
@@ -3628,6 +3667,7 @@ html.dark {
   --calendar-title-color: var(--color-text-on-light); /** Color del título del mes */
   --calendar-weekday-color: var(--color-text-muted-on-light); /** Color de las cabeceras de día de semana */
   --calendar-day-font-weight: var(--font-weight-default); /** Peso de fuente de los días */
+  --calendar-day-line-height: var(--control-line-height); /** Interlineado de los días y de los años: el de los controles. Sin él, el botón heredaba el 1,15 de normalize.css */
   --calendar-day-radius: var(--border-radius-default); /** Radio de borde de los botones de día */
   --calendar-day-color: var(--color-text-on-light); /** Color de texto de los días */
   --calendar-day-focus-ring-color: var(--color-primary); /** Color del focus ring de los días */
@@ -3644,9 +3684,9 @@ html.dark {
   --calendar-year-height: var(--calendar-day-size); /** Alto de la celda de año — md: el del día, para que la vista de años no cambie la altura del panel */
   --calendar-year-padding-inline: var(--calendar-grid-gap); /** Aire a los lados de la celda de año: el año lleva cuatro cifras y no cabe en el cuadrado del día */
   --calendar-year-font-size: var(--calendar-day-font-size); /** Cuerpo de letra del año */
-  --calendar-year-grid-min-inline-size: calc(7 * var(--calendar-day-size) + 6 * var(--calendar-grid-gap)); /** Ancho mínimo de la rejilla de años — md: el de la semana (siete días y sus seis huecos), para que el panel no encoja al pasar de los días a los años */
-  --calendar-sm-year-grid-min-inline-size: calc(7 * var(--calendar-sm-day-size) + 6 * var(--calendar-grid-gap)); /** Ancho mínimo de la rejilla de años — sm */
-  --calendar-lg-year-grid-min-inline-size: calc(7 * var(--calendar-lg-day-size) + 6 * var(--calendar-grid-gap)); /** Ancho mínimo de la rejilla de años — lg */
+  --calendar-year-grid-min-width: calc(7 * var(--calendar-day-size) + 6 * var(--calendar-grid-gap)); /** Ancho mínimo de la rejilla de años — md: el de la semana (siete días y sus seis huecos), para que el panel no encoja al pasar de los días a los años */
+  --calendar-sm-year-grid-min-width: calc(7 * var(--calendar-sm-day-size) + 6 * var(--calendar-grid-gap)); /** Ancho mínimo de la rejilla de años — sm */
+  --calendar-lg-year-grid-min-width: calc(7 * var(--calendar-lg-day-size) + 6 * var(--calendar-grid-gap)); /** Ancho mínimo de la rejilla de años — lg */
   --calendar-sm-year-height: var(--calendar-sm-day-size); /** Alto de la celda de año — sm */
   --calendar-lg-year-height: var(--calendar-lg-day-size); /** Alto de la celda de año — lg */
   --calendar-lg-year-font-size: var(--calendar-lg-day-font-size); /** Cuerpo de letra del año — lg */
@@ -3674,7 +3714,7 @@ html.dark {
   --calendar-today-color: var(--color-text-on-dark); /** Color del día de hoy — surface-dark */
   --calendar-today-marker-color: var(--color-text-on-dark); /** Marcador del día de hoy — surface-dark */
   --calendar-selected-bg: var(--color-text-on-dark); /** Fondo del día seleccionado — surface-dark */
-  --calendar-selected-color: var(--color-background-dark); /** Texto del día seleccionado — surface-dark */
+  --calendar-selected-color: var(--color-bg-dark); /** Texto del día seleccionado — surface-dark */
   --calendar-outside-color: var(--color-text-muted-on-dark); /** Días fuera de mes — surface-dark */
   --calendar-disabled-color: var(--color-text-muted-on-dark); /** Días deshabilitados — surface-dark */
   --calendar-hover-line-color: var(--color-text-on-dark); /** Color de la línea de hover — surface-dark */
@@ -3699,6 +3739,7 @@ html.dark {
   --calendar-planner-day-number-size: var(--spacing-5); /** Tamaño (ancho y alto) del badge con el número */
   --calendar-planner-items-gap: var(--spacing-1); /** Gap entre elementos/tags dentro de la celda */
   --calendar-planner-more-font-size: var(--font-size-1); /** Tamaño del texto '+N más' */
+  --calendar-planner-more-line-height: var(--line-height-none); /** Interlineado del texto '+N más': una línea justa. No es un control con talla (no tiene alto propio: es un rótulo pulsable dentro de la casilla), así que no bebe de control.line-height. Sin él, el botón heredaba el 1,15 de normalize.css */
   --calendar-planner-weekday-gap: var(--spacing-1); /** Aire entre el nombre del día y su número en la cabecera de la vista de semana */
   --calendar-planner-event-time-font-size: var(--font-size-1); /** Tamaño de la hora del evento en la vista de semana */
   --calendar-planner-gap: var(--calendar-gap); /** Gap entre cabecera y cuadrícula — hereda de Calendar */
@@ -3749,7 +3790,7 @@ html.dark {
   --calendar-planner-cell-outside-bg: var(--color-surface-secondary-on-dark); /** Fondo de celdas fuera de mes — surface-dark */
   --calendar-planner-cell-focus-ring-color: var(--color-text-on-dark); /** Focus ring de la celda — surface-dark */
   --calendar-planner-cell-today-number-bg: var(--color-text-on-dark); /** Fondo del número de hoy — surface-dark */
-  --calendar-planner-cell-today-number-color: var(--color-background-dark); /** Texto del número de hoy — surface-dark */
+  --calendar-planner-cell-today-number-color: var(--color-bg-dark); /** Texto del número de hoy — surface-dark */
   --calendar-planner-day-number-color: var(--color-text-on-dark); /** Color del número de día — surface-dark */
   --calendar-planner-day-number-outside-color: var(--color-text-muted-on-dark); /** Número fuera de mes — surface-dark */
   --calendar-planner-more-color: var(--color-text-muted-on-dark); /** Texto '+N más' — surface-dark */
@@ -3789,16 +3830,16 @@ html.dark {
   --calendar-roster-border-width: var(--border-width-default); /** Grosor de los bordes del grid */
   --calendar-roster-th-name-font-weight: var(--font-weight-emphasis); /** Peso del encabezado de nombre */
   --calendar-roster-th-name-color: var(--color-text-muted-on-light); /** Color del encabezado de nombre */
-  --calendar-roster-th-name-bg: var(--color-background-light); /** Fondo sticky de la columna de nombre */
+  --calendar-roster-th-name-bg: var(--color-bg-light); /** Fondo sticky de la columna de nombre */
   --calendar-roster-th-day-color: var(--color-text-on-light); /** Color del encabezado de día */
-  --calendar-roster-th-day-bg: var(--color-background-light); /** Fondo del encabezado de día */
-  --calendar-roster-th-day-today-color: var(--color-background-light); /** Texto del encabezado del día de hoy */
+  --calendar-roster-th-day-bg: var(--color-bg-light); /** Fondo del encabezado de día */
+  --calendar-roster-th-day-today-color: var(--color-bg-light); /** Texto del encabezado del día de hoy */
   --calendar-roster-th-day-today-bg: var(--color-primary); /** Fondo del encabezado del día de hoy */
   --calendar-roster-th-day-today-radius: var(--border-radius-default); /** Radio del badge del día de hoy */
   --calendar-roster-td-name-color: var(--color-text-on-light); /** Color del nombre del empleado */
   --calendar-roster-td-name-font-weight: var(--font-weight-default); /** Peso del nombre del empleado (la celda es th: el agente de usuario la pondría en negrita) */
-  --calendar-roster-td-name-bg: var(--color-background-light); /** Fondo sticky de la celda de nombre */
-  --calendar-roster-cell-bg: var(--color-background-light); /** Fondo de celdas de día laborable */
+  --calendar-roster-td-name-bg: var(--color-bg-light); /** Fondo sticky de la celda de nombre */
+  --calendar-roster-cell-bg: var(--color-bg-light); /** Fondo de celdas de día laborable */
   --calendar-roster-cell-weekend-bg: var(--color-surface-secondary-on-light); /** Fondo de celdas de fin de semana — superficie secundaria, la misma para todo día no laborable: lo que los distingue es el chip, no el gris */
   --calendar-roster-cell-holiday-bg: var(--color-surface-secondary-on-light); /** Fondo de celdas festivas — misma superficie secundaria; el festivo se nombra con su chip */
   --calendar-roster-cell-non-working-bg: var(--color-surface-secondary-on-light); /** Fondo de celdas no laborables (laborable sin turno asignado) */
@@ -3817,13 +3858,13 @@ html.dark {
 html.dark {
   --calendar-roster-cell-bg: rgba(0, 0, 0, 0); /** Fondo de celdas — surface-dark */
   --calendar-roster-border-color: var(--color-text-on-dark); /** Color de bordes del grid — surface-dark */
-  --calendar-roster-th-name-bg: var(--color-background-dark); /** Fondo columna de nombre — surface-dark */
+  --calendar-roster-th-name-bg: var(--color-bg-dark); /** Fondo columna de nombre — surface-dark */
   --calendar-roster-th-name-color: var(--color-text-muted-on-dark); /** Color columna de nombre — surface-dark */
   --calendar-roster-th-day-color: var(--color-text-on-dark); /** Color encabezado de día — surface-dark */
-  --calendar-roster-th-day-bg: var(--color-background-dark); /** Fondo encabezado de día — surface-dark */
+  --calendar-roster-th-day-bg: var(--color-bg-dark); /** Fondo encabezado de día — surface-dark */
   --calendar-roster-th-day-today-bg: var(--color-text-on-dark); /** Fondo del día de hoy — surface-dark */
-  --calendar-roster-th-day-today-color: var(--color-background-dark); /** Texto del día de hoy — surface-dark */
-  --calendar-roster-td-name-bg: var(--color-background-dark); /** Fondo celda de nombre — surface-dark */
+  --calendar-roster-th-day-today-color: var(--color-bg-dark); /** Texto del día de hoy — surface-dark */
+  --calendar-roster-td-name-bg: var(--color-bg-dark); /** Fondo celda de nombre — surface-dark */
   --calendar-roster-td-name-color: var(--color-text-on-dark); /** Color celda de nombre — surface-dark */
   --calendar-roster-cell-weekend-bg: var(--color-surface-secondary-on-dark); /** Fondo fin de semana — surface-dark */
   --calendar-roster-cell-holiday-bg: var(--color-surface-secondary-on-dark); /** Fondo festivo — surface-dark */
@@ -3877,7 +3918,7 @@ html.dark {
 
 :root {
   --date-picker-button-cursor: pointer; /** Cursor del botón: abre el calendario, no se escribe en él */
-  --date-picker-inline-size: var(--input-width); /** Anchura del control: la del campo, que siempre ocupa su contenedor */
+  --date-picker-width: var(--input-width); /** Anchura del control: la del campo, que siempre ocupa su contenedor */
   --date-picker-disabled-cursor: var(--input-disabled-cursor); /** Cursor con el control deshabilitado */
   --date-picker-button-slot-size: var(--size-component-md); /** Lado del hueco que ocupa el botón del calendario dentro del campo: la talla md, la misma que el campo — así el adorno queda cuadrado sobre el control y su borde inferior coincide con el del campo */
   --date-picker-button-sm-slot-size: var(--size-component-sm); /** Lado del hueco — sm */
@@ -4004,8 +4045,8 @@ html.dark {
   --color-picker-trigger-error-focus-ring-color: var(--input-error-focus-ring-color); /** Anillo de foco en error */
   --color-picker-trigger-disabled-bg: var(--input-disabled-bg); /** Fondo deshabilitado */
   --color-picker-trigger-disabled-border-color: var(--input-disabled-border-color); /** Borde deshabilitado */
-  --color-picker-panel-inline-size: calc(8 * var(--color-picker-preset-size) + 7 * var(--color-picker-preset-gap)); /** Ancho del panel: ocho predefinidos por fila y sus siete huecos. El área y las bandas lo ocupan entero */
-  --color-picker-area-block-size: calc(6 * var(--color-picker-preset-size) + 5 * var(--color-picker-preset-gap)); /** Alto del área de saturación y brillo: seis filas de la misma rejilla que mide el ancho */
+  --color-picker-panel-width: calc(8 * var(--color-picker-preset-size) + 7 * var(--color-picker-preset-gap)); /** Ancho del panel: ocho predefinidos por fila y sus siete huecos. El área y las bandas lo ocupan entero */
+  --color-picker-area-height: calc(6 * var(--color-picker-preset-size) + 5 * var(--color-picker-preset-gap)); /** Alto del área de saturación y brillo: seis filas de la misma rejilla que mide el ancho */
   --color-picker-trigger-focus-ring-width: var(--input-focus-ring-width); /** Grosor del anillo de foco, por dentro del borde como en un campo */
 }
 
@@ -4074,7 +4115,6 @@ html.dark {
   --switcher-sm-track-width: 2.25em; /** Ancho del track — variante sm */
   --switcher-sm-track-height: 1.25em; /** Alto del track — variante sm */
   --switcher-sm-thumb-size: 0.875em; /** Tamaño del thumb — variante sm */
-  --switcher-lg-track-width: 3rem; /** Ancho del track — variante lg (48px, alineado con la talla lg del sistema, size-component.lg). En rem, no en em: como el resto de campos en lg, no se escala además con la fuente del párrafo large del campo */
   --switcher-lg-track-height: 1.625rem; /** Alto del track — variante lg. En rem, ver lg-track-width */
   --switcher-lg-thumb-size: 1.25rem; /** Tamaño del thumb — variante lg. En rem, ver lg-track-width */
   --switcher-target-size: var(--size-target-min); /** Área sensible al puntero: 24×24 px como pide WCAG 2.5.8, aunque el track (sm) sea menor en bloque. Se extiende de forma invisible y centrada, sin mover la maqueta */
@@ -4082,8 +4122,9 @@ html.dark {
   --switcher-disabled-opacity: var(--opacity-disabled); /** Opacidad cuando está deshabilitado */
   --switcher-transition-duration: var(--motion-duration-fast); /** Duración de la transición */
   --switcher-transition-easing: var(--motion-easing-default); /** Easing de la transición */
+  --switcher-lg-track-width: var(--size-component-lg); /** Ancho del track — variante lg: la talla lg del sistema (48px). En rem, no en em: como el resto de campos en lg, no se escala además con la fuente del párrafo large del campo */
   --switcher-track-bg: var(--color-border-default-on-light); /** Fondo del track — estado off */
-  --switcher-track-bg-checked: var(--color-primary); /** Fondo del track — estado on */
+  --switcher-track-checked-bg: var(--color-primary); /** Fondo del track — estado on */
   --switcher-track-border-radius: var(--border-radius-round); /** Radio del track (pill) */
   --switcher-thumb-border-radius: var(--border-radius-round); /** Radio del thumb (circular) */
   --switcher-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
@@ -4099,7 +4140,7 @@ html.dark {
 [data-theme="dark"],
 html.dark {
   --switcher-error-ring-color: var(--color-error-text-on-dark); /** Anillo de error — surface-dark */
-  --switcher-track-bg-checked: var(--color-accent-1); /** Fondo del track (on) — surface-dark. `track-bg-checked` (prussian) coincide con el fondo de la superficie y quedaría invisible; se usa accent-1 en su lugar. */
+  --switcher-track-checked-bg: var(--color-accent-1); /** Fondo del track (on) — surface-dark. `track-checked-bg` (prussian) coincide con el fondo de la superficie y quedaría invisible; se usa accent-1 en su lugar. */
   --switcher-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark. `focus-ring-color` (prussian) sería invisible sobre fondo oscuro. */
   --switcher-track-bg: var(--color-text-on-dark); /** Fondo del track (off) — surface-dark. `track-bg` es un rol de borde (`color.border.default-on-light`) y la regla de derivación le da `color.text.on-dark`, igual que el carril sin recorrer del Slider. */
   --switcher-thumb-bg: var(--color-primary); /** Color del thumb — surface-dark. El thumb blanco desaparecería sobre el track claro del estado off; en prusia contrasta con los dos tracks oscuros (blanco en off, lavanda en on), como el pulgar lavanda del Slider sobre su carril blanco. */
@@ -4161,7 +4202,7 @@ html.dark {
   --password-field-lg-toggle-size: var(--size-component-lg); /** Lado del toggle — lg */
   --password-field-action-margin-block-start: var(--spacing-2); /** Aire extra sobre la acción bajo el campo («¿Olvidaste tu contraseña?»), además del gap del campo */
   --password-field-toggle-color: var(--color-primary); /** Color del icono toggle: tinta, prusia sobre claro */
-  --password-field-toggle-color-hover: var(--color-primary); /** Color del icono toggle en hover (sin cambio: la tinta no se atenúa; el foco se marca con el anillo) */
+  --password-field-toggle-hover-color: var(--color-primary); /** Color del icono toggle en hover (sin cambio: la tinta no se atenúa; el foco se marca con el anillo) */
   --password-field-toggle-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco del toggle */
   --password-field-toggle-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco del toggle (se dibuja hacia dentro de la caja: el toggle va a ras del borde del campo) */
   --password-field-toggle-focus-ring-color: var(--color-primary); /** Color del anillo de foco del toggle: la tinta de la superficie */
@@ -4173,7 +4214,7 @@ html.dark {
 [data-theme="dark"],
 html.dark {
   --password-field-toggle-color: var(--color-text-on-dark); /** Color del icono toggle — surface-dark (blanco) */
-  --password-field-toggle-color-hover: var(--color-text-on-dark); /** Color del icono toggle en hover — surface-dark */
+  --password-field-toggle-hover-color: var(--color-text-on-dark); /** Color del icono toggle en hover — surface-dark */
   --password-field-toggle-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco del toggle — surface-dark */
 }
 
@@ -4262,13 +4303,13 @@ html.dark {
  */
 
 :root {
-  --spinner-border-width-sm: 2px; /** Grosor del trazo (stroke) para sm */
-  --spinner-border-width-md: 2px; /** Grosor del trazo (stroke) para md */
-  --spinner-border-width-lg: 2px; /** Grosor del trazo (stroke) para lg */
   --spinner-animation-duration: 2000ms; /** Un ciclo del bucle: dibujar el contorno (mitad) y desdibujarlo (mitad) */
   --spinner-size-sm: var(--spacing-4); /** 16px — compact spinner */
   --spinner-size-md: var(--spacing-5); /** 24px — default spinner */
   --spinner-size-lg: var(--spacing-8); /** 64px — large spinner */
+  --spinner-border-width-sm: var(--border-width-default); /** Grosor del trazo (stroke) para sm: el rol de todo borde del sistema (1px) */
+  --spinner-border-width-md: var(--border-width-default); /** Grosor del trazo (stroke) para md: el rol de todo borde del sistema (1px) */
+  --spinner-border-width-lg: var(--border-width-default); /** Grosor del trazo (stroke) para lg: el rol de todo borde del sistema (1px) */
 }
 
 /**
@@ -4297,8 +4338,8 @@ html.dark {
  */
 
 :root {
-  --loading-state-min-block-size: 16rem; /** Alto que reserva la espera de una página o una zona: la caja no colapsa a la altura del girador mientras el contenido no llega */
-  --loading-state-sm-min-block-size: 8rem; /** Alto que reserva la espera en talla sm — el cuerpo de un diálogo, una hoja o un popover */
+  --loading-state-min-height: 16rem; /** Alto que reserva la espera de una página o una zona: la caja no colapsa a la altura del girador mientras el contenido no llega */
+  --loading-state-sm-min-height: 8rem; /** Alto que reserva la espera en talla sm — el cuerpo de un diálogo, una hoja o un popover */
   --loading-state-sm-padding-block: var(--spacing-5); /** Padding vertical en talla sm: dentro de un diálogo el aire ya lo pone el diálogo */
   --loading-state-gap: var(--empty-state-gap); /** Aire entre el girador y la acción — el mismo que EmptyState, porque ocupa su sitio */
   --loading-state-padding-block: var(--empty-state-padding-block); /** Padding vertical — el de EmptyState */
@@ -4361,6 +4402,7 @@ html.dark {
   --alert-error-description-color: var(--color-error-fill-text); /** Descripción blanca sobre fondo error */
   --alert-warning-bg: var(--color-warning-fill); /** Fondo warning — el relleno del rol de aviso. Es el amarillo de siempre, pero la procedencia es el rol de feedback, no la marca */
   --alert-warning-border-color: var(--color-warning-fill); /** Borde igual al fondo warning */
+  --alert-title-letter-spacing: var(--text-h2-letter-spacing); /** Tracking del título (−0,02em): el de los títulos (`text.h2.letter-spacing`), aunque el título del `Alert` sea un `<p>`. Es el mismo que el del `Toast` (`toast.title-letter-spacing` hereda de aquí), para que los dos avisos pinten el título igual; el token lo fija para que no dependa del elemento */
   --alert-warning-title-color: var(--color-warning-fill-text); /** Título prusia sobre fondo warning (11,17:1, AAA) */
   --alert-warning-description-color: var(--color-warning-fill-text); /** Descripción prusia sobre fondo warning */
   --alert-warning-close-color: var(--color-warning-fill-text); /** Aspa y su anillo de foco sobre el relleno de aviso. Es el único relleno claro del componente, así que el aspa no puede tomar la tinta ambiente: con `[data-theme="dark"]` en la raíz saldría blanca sobre amarillo (1,50:1). Va fijada a la tinta del rol, que es universal */
@@ -4417,6 +4459,7 @@ html.dark {
   --toast-duration-in: var(--motion-duration-base); /** Duración de la entrada. Con `prefers-reduced-motion: reduce` vale 0ms y el aviso aparece sin animación */
   --toast-duration-out: var(--motion-duration-base); /** Duración de la salida. Con `prefers-reduced-motion: reduce` vale 0ms */
   --toast-easing: var(--motion-easing-out); /** Curva de entrada y salida — lo que aparece y desaparece frena al final */
+  --toast-title-letter-spacing: var(--alert-title-letter-spacing); /** Tracking del título del aviso (−0,02em): hereda el del `Alert` (`alert.title-letter-spacing`, el de un `<h2>`), así que los dos avisos pintan el título igual. El token lo fija en la tarjeta para que no dependa de la herencia de `base.css` ni del nivel de encabezado del `Toast.Title` */
 }
 
 /**
@@ -4558,7 +4601,7 @@ html.dark {
   --file-upload-thumb-bg: var(--color-surface-secondary-on-light); /** Fondo del thumb para iconos (no imagen) */
   --file-upload-thumb-icon-color: var(--color-icon-secondary-on-light); /** Color del icono de archivo genérico */
   --file-upload-remove-color: var(--color-text-muted-on-light); /** Color del botón eliminar */
-  --file-upload-remove-color-hover: var(--color-error-text-on-light); /** Color del botón eliminar al hacer hover */
+  --file-upload-remove-hover-color: var(--color-error-text-on-light); /** Color del botón eliminar al hacer hover */
   --file-upload-text-font-size: var(--text-font-size); /** El texto del dropzone es texto corriente: hereda el cuerpo de la superficie — talla md */
   --file-upload-sm-text-font-size: var(--text-paragraph-small-font-size); /** Texto del dropzone — talla sm: un peldaño por debajo del cuerpo */
   --file-upload-lg-text-font-size: var(--text-paragraph-large-font-size); /** Texto del dropzone — talla lg: un peldaño por encima */
@@ -4581,20 +4624,20 @@ html.dark {
   --file-upload-subtext-color: var(--color-text-muted-on-dark); /** Texto secundario — surface-dark */
   --file-upload-icon-color: var(--color-text-on-dark); /** Icono de subida — surface-dark */
   --file-upload-drag-border-color: var(--color-text-on-dark); /** Borde con arrastre activo — surface-dark */
-  --file-upload-drag-bg: var(--color-background-dark); /** Fondo con arrastre activo — surface-dark: el lienzo, para que el dropzone se vacíe igual que en claro */
+  --file-upload-drag-bg: var(--color-bg-dark); /** Fondo con arrastre activo — surface-dark: el lienzo, para que el dropzone se vacíe igual que en claro */
   --file-upload-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
   --file-upload-error-bg: var(--color-surface-secondary-on-dark); /** Fondo en error — surface-dark */
-  --file-upload-item-bg: var(--color-background-dark); /** Fondo de cada archivo — surface-dark */
+  --file-upload-item-bg: var(--color-bg-dark); /** Fondo de cada archivo — surface-dark */
   --file-upload-item-border-color: var(--color-text-on-dark); /** Borde de cada archivo — surface-dark */
   --file-upload-item-name-color: var(--color-text-on-dark); /** Nombre del archivo — surface-dark */
   --file-upload-item-size-color: var(--color-text-muted-on-dark); /** Peso del archivo — surface-dark */
   --file-upload-item-error-color: var(--color-error-text-on-dark); /** Mensaje de error por archivo — surface-dark */
   --file-upload-item-error-border-color: var(--color-error-text-on-dark); /** Borde del archivo con error — surface-dark */
-  --file-upload-item-error-bg: var(--color-background-dark); /** Fondo del archivo con error — surface-dark */
+  --file-upload-item-error-bg: var(--color-bg-dark); /** Fondo del archivo con error — surface-dark */
   --file-upload-thumb-bg: var(--color-surface-secondary-on-dark); /** Fondo de la miniatura — surface-dark */
   --file-upload-thumb-icon-color: var(--color-text-muted-on-dark); /** Icono de archivo genérico — surface-dark: `grey-dark` no llega a 3:1 sobre prusia */
   --file-upload-remove-color: var(--color-text-muted-on-dark); /** Aspa de quitar — surface-dark */
-  --file-upload-remove-color-hover: var(--color-error-text-on-dark); /** Aspa de quitar, bajo el puntero — surface-dark */
+  --file-upload-remove-hover-color: var(--color-error-text-on-dark); /** Aspa de quitar, bajo el puntero — surface-dark */
 }
 
 /**
@@ -4679,8 +4722,8 @@ html.dark {
   --number-badge-support-1-color: var(--color-text-on-light); /** Texto sobre support-1 */
   --number-badge-support-2-bg: var(--color-support-2); /** Fondo support-2 (cayenne) */
   --number-badge-support-2-color: var(--color-text-on-light); /** Texto sobre support-2 */
-  --number-badge-danger-bg: var(--color-error-fill); /** Fondo danger (red) */
-  --number-badge-danger-color: var(--color-error-fill-text); /** Texto sobre danger */
+  --number-badge-error-bg: var(--color-error-fill); /** Fondo error (rojo) */
+  --number-badge-error-color: var(--color-error-fill-text); /** Texto sobre error */
   --number-badge-success-bg: var(--color-success-fill); /** Fondo success (green) */
   --number-badge-success-color: var(--color-success-fill-text); /** Texto sobre success */
   --number-badge-neutral-bg: var(--color-surface-inverse-on-light); /** Fondo neutral (dark grey) */
@@ -4692,7 +4735,7 @@ html.dark {
 [data-theme="dark"],
 html.dark {
   --number-badge-primary-bg: var(--color-text-on-dark); /** Relleno primary — surface-dark. El prusia es el lienzo y el contador desaparecería; se invierte en vez de pasar a lavanda porque `accent-1` ya es otra variante del mismo componente (mismo caso que `Tag`) */
-  --number-badge-primary-color: var(--color-background-dark); /** Texto sobre primary — surface-dark */
+  --number-badge-primary-color: var(--color-bg-dark); /** Texto sobre primary — surface-dark */
   --number-badge-neutral-bg: var(--color-surface-inverse-on-dark); /** Relleno neutral — surface-dark: la superficie invertida, como en `Tag` */
   --number-badge-neutral-color: var(--color-text-on-light); /** Texto sobre neutral — surface-dark */
 }
@@ -4723,7 +4766,7 @@ html.dark {
   --message-bubble-font-weight: var(--font-weight-default); /** Peso tipográfico */
   --message-bubble-color: var(--color-text-on-light); /** Tinta del mensaje. La misma para los dos emisores: el globo no tiene relleno, así que el texto va sobre la superficie */
   --message-bubble-border-color: var(--color-text-on-light); /** Contorno del globo. Único separador del mensaje: no hay relleno ni sombra */
-  --message-bubble-tail-fill: var(--color-background-light); /** Color con el que se vacía la cola: el de la superficie que hay detrás del globo. Es lo que interrumpe el borde donde nace la cola y deja el triángulo en puro contorno. Si el hilo vive sobre otra superficie, se repunta aquí */
+  --message-bubble-tail-fill: var(--color-bg-light); /** Color con el que se vacía la cola: el de la superficie que hay detrás del globo. Es lo que interrumpe el borde donde nace la cola y deja el triángulo en puro contorno. Si el hilo vive sobre otra superficie, se repunta aquí */
 }
 
 .surface-dark,
@@ -4732,7 +4775,7 @@ html.dark {
 html.dark {
   --message-bubble-color: var(--color-text-on-dark); /** Tinta del mensaje — superficie oscura */
   --message-bubble-border-color: var(--color-text-on-dark); /** Contorno del globo — superficie oscura */
-  --message-bubble-tail-fill: var(--color-background-dark); /** Vaciado de la cola — superficie oscura */
+  --message-bubble-tail-fill: var(--color-bg-dark); /** Vaciado de la cola — superficie oscura */
 }
 
 /**
@@ -4744,7 +4787,7 @@ html.dark {
   --typing-indicator-dot-rise: 0.25rem; /** Cuánto sube el punto en lo alto del salto (4px): una fracción del propio punto, no un desplazamiento de maqueta */
   --typing-indicator-dot-gap: var(--spacing-1); /** Separación entre puntos */
   --typing-indicator-dot-opacity-inactive: var(--opacity-disabled); /** Opacidad del punto en reposo */
-  --typing-indicator-dot-opacity-active: var(--opacity-full); /** Opacidad del punto en lo alto del salto */
+  --typing-indicator-dot-active-opacity: var(--opacity-full); /** Opacidad del punto en lo alto del salto */
   --typing-indicator-animation-duration: var(--motion-duration-slow); /** Duración del ciclo de animación */
   --typing-indicator-animation-easing: var(--motion-easing-in-out); /** Curva del salto: movimiento */
   --typing-indicator-dot-color: var(--color-text-on-light); /** Color de los puntos */
@@ -4786,7 +4829,7 @@ html.dark {
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --message-composer-bg: var(--color-background-dark); /** Fondo del marco — superficie oscura */
+  --message-composer-bg: var(--color-bg-dark); /** Fondo del marco — superficie oscura */
   --message-composer-border-color: var(--color-text-on-dark); /** Color del marco — superficie oscura */
   --message-composer-focus-border-color: var(--color-text-on-dark); /** Color del marco con el foco dentro — superficie oscura */
   --message-composer-focus-ring-color: var(--color-text-on-dark); /** Color del anillo de foco — superficie oscura */
@@ -4825,6 +4868,7 @@ html.dark {
   --conversation-list-item-padding-block: var(--spacing-2); /** Aire vertical de cada conversación */
   --conversation-list-item-padding-inline: var(--spacing-3); /** Aire horizontal de cada conversación */
   --conversation-list-item-font-family: var(--font-family-sans); /** Familia tipográfica del título de la conversación */
+  --conversation-list-item-line-height: var(--line-height-none); /** Interlineado del título: una línea justa (el título no parte, va con elipsis), para que el alto de la fila lo marque su padding y no un interlineado heredado. Sin él, el botón heredaba el 1,15 de normalize.css */
   --conversation-list-transition-duration: var(--motion-duration-fast); /** Duración de la transición de color */
   --conversation-list-transition-easing: var(--motion-easing-default); /** Curva de la transición de color */
   --conversation-list-item-border-radius: var(--border-radius-default); /** Radio de cada conversación: recto, como todo el sistema */
@@ -4914,14 +4958,14 @@ html.dark {
   --chat-shell-breakpoint: var(--breakpoint-lg); /** Donde el armazón pasa de dos columnas a una. El mismo punto en el que el chrome de aplicación pasa de barra superior a barra lateral */
   --chat-shell-drawer-gap: var(--chat-shell-thread-padding-block); /** Dentro del cajón de pantalla estrecha, el aire entre la fila del disparador y la lista. Cascada desde el aire de la ranura del hilo porque el cajón repite la maqueta de la columna principal: la lista tiene que arrancar donde arranca el hilo, para que al desplegar no se mueva más que el contenido. El cajón anula el relleno propio del `Sheet` (ver ChatShell.css), así que esta es la única medida que el armazón pone dentro de él */
   --chat-shell-thread-padding-inline: calc(var(--message-bubble-tail-size) + var(--message-bubble-border-width)); /** Pasillo lateral del hilo: exactamente lo que sobresale la cola del globo, que nace FUERA de su caja (el lado del triángulo más su contorno). Sin él la cola se corta contra el canto del desplazamiento. No es un margen de página —el aire alrededor del chat sigue poniéndolo quien lo monta—: es la anchura justa para que el pico respire */
-  --chat-shell-bg: var(--color-background-light); /** Fondo del armazón */
+  --chat-shell-bg: var(--color-bg-light); /** Fondo del armazón */
 }
 
 .surface-dark,
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --chat-shell-bg: var(--color-background-dark); /** Fondo del armazón — superficie oscura */
+  --chat-shell-bg: var(--color-bg-dark); /** Fondo del armazón — superficie oscura */
 }
 
 /**
@@ -4961,6 +5005,7 @@ html.dark {
   --chart-bar-radius: 0.25rem; /** 4px — extremo de dato redondeado; el extremo de la línea base queda recto */
   --chart-area-fill-opacity: 0.1; /** El área es un velo del tono de la serie, nunca un bloque saturado */
   --chart-donut-thickness: 0.55; /** Fracción del radio que ocupa el anillo del donut */
+  --chart-dot-size: 10px; /** 10px de diámetro — medida propia del componente (no hay peldaño de 10 en `spacing.*`). Punto de la nube de dispersión, mayor que el marcador de línea porque aquí el punto es la marca, no un remate */
   --chart-radar-fill-opacity: 0.15; /** El polígono del radar es un velo del tono de la serie, como el área */
   --chart-hover-opacity: 0.75; /** Atenuación de las marcas que no son la activa mientras el puntero está encima */
   --chart-series-1: var(--color-chart-series-1); /** Ranura categórica 1. El orden de las ranuras es el mecanismo de seguridad para daltonismo: se asignan en orden, nunca se ciclan */
@@ -4990,7 +5035,6 @@ html.dark {
   --chart-marker-size: var(--spacing-2); /** 8px de diámetro — punto de serie y marcador de extremo */
   --chart-funnel-gap: var(--spacing-1); /** 4px — hueco de superficie entre tramos del embudo */
   --chart-radial-bar-gap: var(--spacing-1); /** 4px — hueco entre anillos de la barra radial */
-  --chart-dot-size: var(--spacing-3); /** 10px de diámetro nominal — punto de la nube de dispersión, mayor que el marcador de línea porque aquí el punto es la marca, no un remate */
   --chart-tile-label-color-1: var(--color-black); /** Rótulo sobre la baldosa de la ranura 1. La tinta se elige por ranura: ninguna de las dos (blanco o negro) llega a 4.5:1 sobre las ocho series, así que cada una lleva la que cumple. Negro, no prusia: el prusia es un casi-negro entintado y se queda corto sobre el azul de la ranura 1 */
   --chart-tile-label-color-2: var(--color-black); /** Rótulo sobre la baldosa de la ranura 2 */
   --chart-tile-label-color-3: var(--color-black); /** Rótulo sobre la baldosa de la ranura 3 */
@@ -5009,7 +5053,7 @@ html.dark {
   --chart-transition-duration: var(--motion-duration-fast); /** Respuesta de la marca al puntero. Con `prefers-reduced-motion` no hay transición */
   --chart-transition-easing: var(--motion-easing-out); /** Curva de la respuesta al puntero */
   --chart-diverging-neutral: var(--color-surface-secondary-on-light); /** Punto medio divergente: gris neutro. Nunca un tono — el medio tiene que leerse como «nada». Es el único dato que se viste con un rol de SUPERFICIE, y a propósito: el cero es el punto de MENOR saliencia de la rampa, así que su trabajo es retirarse hacia el lienzo, no contrastar con él. Sobre blanco queda en 1,12:1, por debajo de los seis pasos de los dos brazos (2,49:1 el más flojo) */
-  --chart-surface: var(--color-background-light); /** Color del hueco de 2px entre marcas contiguas y del anillo de 2px de los puntos. Es la superficie, no un borde: separar con trazo añadiría tinta que no es dato */
+  --chart-surface: var(--color-bg-light); /** Color del hueco de 2px entre marcas contiguas y del anillo de 2px de los puntos. Es la superficie, no un borde: separar con trazo añadiría tinta que no es dato */
   --chart-grid-color: var(--color-border-default-on-light); /** Rejilla: filete de 1px a un paso de la superficie. Cromo recesivo */
   --chart-grid-width: var(--border-width-default); /** Grosor de la rejilla. Sólida siempre: una rejilla discontinua se lee como umbral */
   --chart-axis-color: var(--color-icon-secondary-on-light); /** Línea base y eje: un paso más firme que la rejilla, porque es el ancla del cero */
@@ -5064,7 +5108,7 @@ html.dark {
   --chart-diverging-cool-2: var(--color-chart-diverging-cool-2-on-dark); /** Divergente frío 2 — surface-dark */
   --chart-diverging-cool-3: var(--color-chart-diverging-cool-3-on-dark); /** Divergente frío 3 — surface-dark */
   --chart-radial-track-color: var(--color-disabled-border-on-dark); /** Carril del anillo — surface-dark. La misma tinta que el eje en oscuro, por el mismo motivo */
-  --chart-surface: var(--color-background-dark); /** Hueco y anillo — surface-dark */
+  --chart-surface: var(--color-bg-dark); /** Hueco y anillo — surface-dark */
   --chart-grid-color: var(--color-border-recessive-on-dark); /** Rejilla — surface-dark. Excepción declarada a la regla de derivación (borde → `text.on-dark`): la rejilla es cromo recesivo, no un borde con peso de dato; en blanco sobre prusia se leería como tinta. Procedencia corregida: apuntaba a `color.surface.secondary-on-dark`, un token de SUPERFICIE (el mismo defecto de origen que hizo invisible el carril del Stepper) — ahora apunta a `color.border.recessive-on-dark`, un token de LÍNEA, con el mismo `grey-darkest` y por tanto el mismo valor visual */
   --chart-axis-color: var(--color-disabled-border-on-dark); /** Eje — surface-dark: un paso por encima de la rejilla, igual que en claro. Excepción declarada como `grid-color`: mismo `grey-dark` que en claro, no el `text.muted-on-dark` de `axis-color` */
   --chart-label-color: var(--color-text-muted-on-dark); /** Rótulos — surface-dark */
@@ -5206,6 +5250,7 @@ html.dark {
   --collapsible-transition-easing: var(--motion-easing-default); /** Easing de abrir y cerrar */
   --collapsible-trigger-font-family: var(--control-font-family); /** Familia tipográfica del disparador */
   --collapsible-trigger-font-size: var(--control-font-size); /** Tamaño de fuente del disparador */
+  --collapsible-trigger-line-height: var(--text-line-height); /** Interlineado del disparador: el del texto corriente. Con `all: unset` el botón lo heredaba de su padre; ahora es fijo y no depende de dónde se monte */
   --collapsible-trigger-color: var(--color-text-on-light); /** Tinta del disparador */
   --collapsible-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
   --collapsible-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
@@ -5254,7 +5299,7 @@ html.dark {
 :root {
   --slider-cursor: pointer; /** Cursor sobre la banda */
   --slider-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
-  --slider-control-block-size: var(--spacing-5); /** Alto de la zona sensible: la banda es fina, pero el objetivo de pulsación no */
+  --slider-control-height: var(--spacing-5); /** Alto de la zona sensible: la banda es fina, pero el objetivo de pulsación no */
   --slider-track-size: var(--spacing-1); /** Grosor del carril */
   --slider-thumb-size: var(--icon-size-sm); /** Lado del pulgar (cuadrado, como el resto de formas del sistema) */
   --slider-value-gap: var(--spacing-3); /** Separación entre la banda y el valor */
@@ -5350,8 +5395,6 @@ html.dark {
   --annotation-thread-item-gap: var(--spacing-2); /** Separación entre la cabecera, el cuerpo y las acciones de una anotación */
   --annotation-thread-items-gap: var(--spacing-4); /** Separación entre anotaciones */
   --annotation-thread-header-gap: var(--spacing-2); /** Separación entre autor, fecha y marca de editada */
-  --annotation-thread-acknowledged-opacity: var(--opacity-muted); /** Un hilo atendido da un paso atrás: sigue vivo, pero ya no es lo primero que hay que mirar */
-  --annotation-thread-resolved-opacity: var(--opacity-disabled); /** Un hilo resuelto se retira: baja de intensidad sin desaparecer */
   --annotation-thread-border-width: var(--border-width-default); /** Grosor del borde del hilo */
   --annotation-thread-border-color: var(--color-border-default-on-light); /** Borde del hilo */
   --annotation-thread-reply-guide-width: var(--border-width-default); /** Grosor de la guía que acompaña a las respuestas */
@@ -5389,7 +5432,8 @@ html.dark {
 :root {
   --text-inline-emphasis-font-weight: var(--font-weight-emphasis); /** Peso del énfasis fuerte en línea */
   --text-inline-muted-color: var(--color-text-muted-on-light); /** Texto secundario en línea: una aclaración, un metadato */
-  --text-inline-destructive-color: var(--color-destructive-text-on-light); /** Énfasis en línea con intención destructiva: la palabra que dice que algo se pierde. Es tinta sobre la superficie, nunca un relleno */
+  --text-inline-error-color: var(--color-error-text-on-light); /** Énfasis en línea de error: un estado que ha fallado («cupón rechazado»). Es tinta sobre la superficie, nunca un relleno */
+  --text-inline-destructive-color: var(--color-destructive-text-on-light); /** Énfasis en línea con intención destructiva: la palabra que avisa de que una acción hace perder algo («esta acción **borra** el curso»). Es tinta sobre la superficie, nunca un relleno */
   --text-inline-success-color: var(--color-success-text-on-light); /** Énfasis en línea con intención de logro */
   --text-inline-strikethrough-color: var(--color-text-muted-on-light); /** Texto tachado: lo que ya está hecho (un producto en el carrito) o ya no vale. Atenuado como el texto secundario; con un `tone` manda el tono */
   --text-inline-strikethrough-thickness: var(--border-width-default); /** Grosor de la línea del tachado: el de los demás trazos del sistema */
@@ -5401,6 +5445,7 @@ html.dark {
 html.dark {
   --text-inline-strikethrough-color: var(--color-text-muted-on-dark); /** Texto tachado — surface-dark */
   --text-inline-muted-color: var(--color-text-muted-on-dark); /** Texto secundario en línea — surface-dark */
+  --text-inline-error-color: var(--color-error-text-on-dark); /** Énfasis de error — surface-dark */
   --text-inline-destructive-color: var(--color-destructive-text-on-dark); /** Énfasis destructivo — surface-dark */
   --text-inline-success-color: var(--color-success-text-on-dark); /** Énfasis de logro — surface-dark */
 }
@@ -5477,7 +5522,7 @@ html.dark {
   --table-of-contents-item-padding-inline-start: var(--spacing-3); /** Sangría base de una entrada, que deja sitio a la barra de la entrada actual */
   --table-of-contents-item-indent: var(--spacing-3); /** Sangría que suma cada nivel de profundidad respecto al título más alto del índice */
   --table-of-contents-sticky-offset: var(--spacing-5); /** Distancia al borde superior cuando el índice queda fijo (`sticky`). El consumidor la sube si tiene una cabecera fija más alta */
-  --table-of-contents-sticky-max-block-size: calc(100vh - (2 * var(--spacing-5))); /** Alto máximo del índice fijo: el alto de la ventana menos su aire arriba y abajo. Un índice largo scrollea dentro */
+  --table-of-contents-sticky-max-height: calc(100vh - (2 * var(--spacing-5))); /** Alto máximo del índice fijo: el alto de la ventana menos su aire arriba y abajo. Un índice largo scrollea dentro */
   --table-of-contents-transition-duration: var(--motion-duration-fast); /** Duración de la transición de hover */
   --table-of-contents-transition-easing: var(--motion-easing-default); /** Easing de la transición de hover */
   --table-of-contents-title-font-weight: var(--font-weight-emphasis); /** Peso del rótulo del índice */
@@ -5512,7 +5557,7 @@ html.dark {
  */
 
 :root {
-  --docs-search-results-max-block-size: min(28rem, 60vh); /** Alto máximo de la lista: a partir de ahí scrollea dentro en vez de empujar la página */
+  --docs-search-results-max-height: min(28rem, 60vh); /** Alto máximo de la lista: a partir de ahí scrollea dentro en vez de empujar la página */
   --docs-search-gap: var(--spacing-3); /** Aire entre el campo de búsqueda y la lista de resultados */
   --docs-search-results-gap: var(--spacing-1); /** Aire entre dos resultados */
   --docs-search-result-padding-block: var(--spacing-3); /** Padding vertical de un resultado */
@@ -5555,7 +5600,7 @@ html.dark {
  */
 
 :root {
-  --search-form-inline-size: var(--input-width); /** Anchura del formulario: la del campo, que siempre ocupa su contenedor. El buscador vive dentro del panel del menú y se estira con él */
+  --search-form-width: var(--input-width); /** Anchura del formulario: la del campo, que siempre ocupa su contenedor. El buscador vive dentro del panel del menú y se estira con él */
   --search-form-xl-height: var(--spacing-8); /** Altura del campo — xl (64px, el peldaño de espaciado que sigue a los 48 de lg). No es una talla de control del sistema: solo existe aquí, para el buscador del menú del sitio */
   --search-form-xl-padding-inline: var(--spacing-6); /** Aire horizontal del campo — xl: el peldaño de espaciado siguiente al de lg */
   --search-form-xl-font-size: var(--font-size-5); /** Cuerpo de letra del campo — xl (28px): la escala de títulos pequeños, no la del cuerpo de texto. A esta talla el buscador se lee como un titular */
@@ -5767,8 +5812,7 @@ html.dark {
   --heatmap-empty-pattern-width: var(--spacing-1); /** Ancho de la trama de la celda sin dato */
   --heatmap-legend-gap: var(--spacing-2); /** Separación entre los elementos de la leyenda */
   --heatmap-legend-font-size: var(--font-size-1); /** Tamaño del texto de la leyenda */
-  --heatmap-legend-swatch-size: var(--spacing-3); /** Lado del cuadradito de la leyenda */
-  --heatmap-legend-swatch-gap: var(--spacing-1); /** Separación entre cuadraditos de la leyenda */
+  --heatmap-legend-swatch-size: var(--spacing-3); /** Alto de la tira de la leyenda y ancho de cada uno de sus peldaños, que van pegados */
   --heatmap-margin-block-start: var(--spacing-3); /** Aire entre la matriz y su leyenda */
   --heatmap-step-1-bg: var(--color-chart-sequential-100); /** Paso 1 de la rampa de la matriz — sequential-100 de la rampa secuencial del sistema */
   --heatmap-step-2-bg: var(--color-chart-sequential-200); /** Paso 2 de la rampa de la matriz — sequential-200 de la rampa secuencial del sistema */
@@ -5776,15 +5820,21 @@ html.dark {
   --heatmap-step-4-bg: var(--color-chart-sequential-500); /** Paso 4 de la rampa de la matriz — sequential-500 de la rampa secuencial del sistema */
   --heatmap-step-5-bg: var(--color-chart-sequential-600); /** Paso 5 de la rampa de la matriz — sequential-600 de la rampa secuencial del sistema */
   --heatmap-step-6-bg: var(--color-chart-sequential-700); /** Paso 6 de la rampa de la matriz — sequential-700 de la rampa secuencial del sistema */
+  --heatmap-diverging-warm-3-bg: var(--color-chart-diverging-warm-3); /** Escala divergente, peldaño warm-3 — diverging-warm-3 (#9F431F), extremo del brazo cálido */
+  --heatmap-diverging-warm-2-bg: var(--color-chart-diverging-warm-2-on-dark); /** Escala divergente, peldaño warm-2 — diverging-warm-2-on-dark (#E26330): ver la tinta */
+  --heatmap-diverging-warm-1-bg: var(--color-chart-diverging-warm-1); /** Escala divergente, peldaño warm-1 — diverging-warm-1 (#F37F54), junto al neutro */
+  --heatmap-diverging-cool-1-bg: var(--color-chart-diverging-cool-1); /** Escala divergente, peldaño cool-1 — diverging-cool-1 (#70A6F2), junto al neutro */
+  --heatmap-diverging-cool-2-bg: var(--color-chart-diverging-cool-2); /** Escala divergente, peldaño cool-2 — diverging-cool-2 (#3484EE), intermedio */
+  --heatmap-diverging-cool-3-bg: var(--color-chart-diverging-cool-3); /** Escala divergente, peldaño cool-3 — diverging-cool-3 (#1F61B6), extremo del brazo frío */
   --heatmap-radius: var(--border-radius-default); /** Radio del marco de la matriz */
   --heatmap-border-color: var(--color-primary); /** Color de la rejilla */
   --heatmap-border-width: var(--border-width-default); /** Grosor de la rejilla */
   --heatmap-row-header-color: var(--color-text-on-light); /** Color del nombre de la fila */
   --heatmap-row-header-font-weight: var(--font-weight-default); /** Peso del nombre de la fila (la celda es th: el agente de usuario la pondría en negrita) */
-  --heatmap-row-header-bg: var(--color-background-light); /** Fondo sticky de la columna de filas */
+  --heatmap-row-header-bg: var(--color-bg-light); /** Fondo sticky de la columna de filas */
   --heatmap-column-header-font-weight: var(--font-weight-emphasis); /** Peso del nombre de la columna */
   --heatmap-column-header-color: var(--color-text-muted-on-light); /** Color del nombre de la columna */
-  --heatmap-column-header-bg: var(--color-background-light); /** Fondo del encabezado de columna */
+  --heatmap-column-header-bg: var(--color-bg-light); /** Fondo del encabezado de columna */
   --heatmap-group-header-color: var(--color-text-muted-on-light); /** Color del nombre del grupo de columnas */
   --heatmap-cell-font-weight: var(--font-weight-emphasis); /** Peso de la cifra de la celda */
   --heatmap-empty-bg: var(--color-surface-secondary-on-light); /** Fondo de una celda sin dato — superficie secundaria, no un paso de la rampa */
@@ -5796,6 +5846,14 @@ html.dark {
   --heatmap-step-4-color: var(--color-text-on-light); /** Tinta sobre el paso 4 — la que llega a 4,5:1 sobre ese relleno */
   --heatmap-step-5-color: var(--color-text-on-dark); /** Tinta sobre el paso 5 — la que llega a 4,5:1 sobre ese relleno */
   --heatmap-step-6-color: var(--color-text-on-dark); /** Tinta sobre el paso 6 — la que llega a 4,5:1 sobre ese relleno */
+  --heatmap-diverging-warm-3-color: var(--color-text-on-dark); /** Tinta sobre el peldaño divergente warm-3 — diverging-warm-3 (#9F431F), extremo del brazo cálido. Blanco: 6,37:1 (prusia daría 2,63:1) */
+  --heatmap-diverging-warm-2-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente warm-2 — diverging-warm-2-on-dark (#E26330), NO diverging-warm-2. El intermedio cálido del sistema (#D45C2C) no admite cifra con ninguna de las dos tintas: 4,29:1 con prusia y 3,91:1 con blanco. Su par de superficie oscura, ya en la paleta, sí: 4,84:1 con prusia, y queda entre sus dos vecinos (1,32:1 con warm-1, 1,84:1 con warm-3). Sin color nuevo (regla 9) */
+  --heatmap-diverging-warm-1-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente warm-1 — diverging-warm-1 (#F37F54), junto al neutro. Prusia: 6,37:1 (blanco daría 2,63:1) */
+  --heatmap-diverging-neutral-bg: var(--color-surface-secondary-on-light); /** Escala divergente, peldaño neutral — el centro: el mismo gris que chart.diverging-neutral (#F2F2F2), un rol de superficie porque el centro se retira hacia el lienzo */
+  --heatmap-diverging-neutral-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente neutral — el centro: el mismo gris que chart.diverging-neutral (#F2F2F2), un rol de superficie porque el centro se retira hacia el lienzo. Prusia: 14,98:1. Comparte relleno con la casilla sin dato, que se distingue por su trama y por no llevar cifra */
+  --heatmap-diverging-cool-1-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente cool-1 — diverging-cool-1 (#70A6F2), junto al neutro. Prusia: 6,73:1 (blanco daría 2,49:1) */
+  --heatmap-diverging-cool-2-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente cool-2 — diverging-cool-2 (#3484EE), intermedio. Prusia: 4,54:1 (blanco daría 3,70:1) */
+  --heatmap-diverging-cool-3-color: var(--color-text-on-dark); /** Tinta sobre el peldaño divergente cool-3 — diverging-cool-3 (#1F61B6), extremo del brazo frío. Blanco: 6,10:1 (prusia daría 2,75:1) */
 }
 
 .surface-dark,
@@ -5808,16 +5866,30 @@ html.dark {
   --heatmap-step-4-bg: var(--color-chart-sequential-500-on-dark); /** Paso 4 de la rampa — surface-dark */
   --heatmap-step-5-bg: var(--color-chart-sequential-600-on-dark); /** Paso 5 de la rampa — surface-dark */
   --heatmap-step-6-bg: var(--color-chart-sequential-700-on-dark); /** Paso 6 de la rampa — surface-dark */
+  --heatmap-diverging-warm-3-bg: var(--color-chart-diverging-warm-3-on-dark); /** Peldaño divergente warm-3 — surface-dark: el par -on-dark del sistema */
+  --heatmap-diverging-warm-2-bg: var(--color-chart-diverging-warm-2-on-dark); /** Peldaño divergente warm-2 — surface-dark: el par -on-dark del sistema */
+  --heatmap-diverging-warm-1-bg: var(--color-chart-diverging-warm-1-on-dark); /** Peldaño divergente warm-1 — surface-dark: el par -on-dark del sistema */
+  --heatmap-diverging-cool-1-bg: var(--color-chart-diverging-cool-1-on-dark); /** Peldaño divergente cool-1 — surface-dark: el par -on-dark del sistema */
+  --heatmap-diverging-cool-2-bg: var(--color-chart-diverging-cool-2-on-dark); /** Peldaño divergente cool-2 — surface-dark: el par -on-dark del sistema */
+  --heatmap-diverging-cool-3-bg: var(--color-chart-diverging-cool-3-on-dark); /** Peldaño divergente cool-3 — surface-dark: el par -on-dark del sistema */
   --heatmap-step-1-color: var(--color-text-on-dark); /** Tinta sobre el paso 1 — surface-dark */
   --heatmap-step-2-color: var(--color-text-on-dark); /** Tinta sobre el paso 2 — surface-dark */
   --heatmap-step-3-color: var(--color-text-on-dark); /** Tinta sobre el paso 3 — surface-dark */
   --heatmap-step-4-color: var(--color-text-on-light); /** Tinta sobre el paso 4 — surface-dark */
   --heatmap-step-5-color: var(--color-text-on-light); /** Tinta sobre el paso 5 — surface-dark */
   --heatmap-step-6-color: var(--color-text-on-light); /** Tinta sobre el paso 6 — surface-dark */
+  --heatmap-diverging-warm-3-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente warm-3 — surface-dark. #F48F6A. Prusia: 7,17:1 (blanco daría 2,34:1) */
+  --heatmap-diverging-warm-2-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente warm-2 — surface-dark. #E26330. Prusia: 4,84:1 (blanco daría 3,46:1) */
+  --heatmap-diverging-warm-1-color: var(--color-text-on-dark); /** Tinta sobre el peldaño divergente warm-1 — surface-dark. #B54E24. Blanco: 5,15:1 (prusia daría 3,26:1) */
+  --heatmap-diverging-neutral-bg: var(--color-surface-secondary-on-dark); /** Peldaño divergente neutral — surface-dark: el par -on-dark del sistema */
+  --heatmap-diverging-neutral-color: var(--color-text-on-dark); /** Tinta sobre el peldaño divergente neutral — surface-dark. el mismo gris que surface-dark-diverging-neutral de Chart (#4A4A4A). Blanco: 8,86:1 (prusia daría 1,89:1) */
+  --heatmap-diverging-cool-1-color: var(--color-text-on-dark); /** Tinta sobre el peldaño divergente cool-1 — surface-dark. #256FCF. Blanco: 4,94:1 (prusia daría 3,40:1) */
+  --heatmap-diverging-cool-2-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente cool-2 — surface-dark. #488FEF. Prusia: 5,15:1 (blanco daría 3,26:1) */
+  --heatmap-diverging-cool-3-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente cool-3 — surface-dark. #80B0F3. Prusia: 7,52:1 (blanco daría 2,23:1) */
   --heatmap-border-color: var(--color-text-on-dark); /** Color de la rejilla — surface-dark */
-  --heatmap-row-header-bg: var(--color-background-dark); /** Fondo de la columna de filas — surface-dark */
+  --heatmap-row-header-bg: var(--color-bg-dark); /** Fondo de la columna de filas — surface-dark */
   --heatmap-row-header-color: var(--color-text-on-dark); /** Color del nombre de la fila — surface-dark */
-  --heatmap-column-header-bg: var(--color-background-dark); /** Fondo del encabezado de columna — surface-dark */
+  --heatmap-column-header-bg: var(--color-bg-dark); /** Fondo del encabezado de columna — surface-dark */
   --heatmap-column-header-color: var(--color-text-muted-on-dark); /** Color del encabezado de columna — surface-dark */
   --heatmap-group-header-color: var(--color-text-muted-on-dark); /** Color del nombre del grupo — surface-dark */
   --heatmap-empty-bg: var(--color-surface-secondary-on-dark); /** Fondo de una celda sin dato — surface-dark */
@@ -5838,7 +5910,12 @@ html.dark {
   --recurrence-field-legend-margin-block-end: var(--spacing-1); /** Aire entre la etiqueta del grupo de días y los días */
   --recurrence-field-legend-font-size: var(--label-font-size); /** Tamaño de la etiqueta del grupo de días — el de una etiqueta de campo */
   --recurrence-field-legend-color: var(--color-text-on-light); /** Color de la etiqueta del grupo de días */
+  --recurrence-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda del editor */
+  --recurrence-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda del editor */
   --recurrence-field-legend-font-weight: var(--label-font-weight); /** Peso de la etiqueta del grupo de días — el de una etiqueta de campo */
+  --recurrence-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda del editor */
+  --recurrence-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda del editor */
+  --recurrence-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda del editor */
 }
 
 .surface-dark,
@@ -5866,17 +5943,17 @@ html.dark {
   --planning-grid-cell-padding-block: var(--spacing-1); /** Padding vertical de una celda */
   --planning-grid-cell-padding-inline: var(--spacing-1); /** Padding horizontal de una celda */
   --planning-grid-cell-font-size: var(--font-size-1); /** Tamaño de la cifra de una celda de solo lectura */
-  --planning-grid-pending-opacity: var(--opacity-disabled); /** Opacidad de una celda cuyo cambio está en vuelo */
+  --planning-grid-saving-gap: var(--spacing-1); /** Aire entre el campo de un cruce en vuelo y su marca de guardado (el Spinner sm) */
   --planning-grid-radius: var(--border-radius-default); /** Radio del marco de la rejilla */
   --planning-grid-border-color: var(--color-primary); /** Color de la rejilla */
   --planning-grid-border-width: var(--border-width-default); /** Grosor de la rejilla */
   --planning-grid-row-header-font-weight: var(--font-weight-default); /** Peso del nombre de la fila (la celda es th: el agente de usuario la pondría en negrita) */
   --planning-grid-row-header-color: var(--color-text-on-light); /** Color del nombre de la fila */
-  --planning-grid-row-header-bg: var(--color-background-light); /** Fondo sticky de la columna de filas */
+  --planning-grid-row-header-bg: var(--color-bg-light); /** Fondo sticky de la columna de filas */
   --planning-grid-column-header-font-weight: var(--font-weight-emphasis); /** Peso del nombre de la columna */
   --planning-grid-column-header-color: var(--color-text-on-light); /** Color del nombre de la columna */
   --planning-grid-column-header-sub-color: var(--color-text-muted-on-light); /** Color de la segunda línea del encabezado */
-  --planning-grid-column-header-bg: var(--color-background-light); /** Fondo del encabezado de columna */
+  --planning-grid-column-header-bg: var(--color-bg-light); /** Fondo del encabezado de columna */
   --planning-grid-current-outline-color: var(--color-primary); /** Recuadro de la columna en curso */
   --planning-grid-current-outline-width: var(--border-width-focus); /** Grosor del recuadro de la columna en curso */
   --planning-grid-cell-color: var(--color-text-on-light); /** Color de la cifra de una celda */
@@ -5885,7 +5962,8 @@ html.dark {
   --planning-grid-footer-bg: var(--color-surface-secondary-on-light); /** Fondo de las filas de totales */
   --planning-grid-footer-font-weight: var(--font-weight-emphasis); /** Peso de las filas de totales */
   --planning-grid-footer-color: var(--color-text-on-light); /** Color de las filas de totales */
-  --planning-grid-over-color: var(--color-error-text-on-light); /** Color de un resto negativo: hay más horas asignadas que disponibles */
+  --planning-grid-over-bg: var(--color-error-fill); /** Relleno de un resto negativo: hay más horas asignadas que disponibles. Relleno universal, igual en las dos superficies (sin par oscuro) */
+  --planning-grid-over-color: var(--color-error-fill-text); /** Tinta de un resto negativo, sobre su relleno de error */
 }
 
 .surface-dark,
@@ -5893,9 +5971,9 @@ html.dark {
 [data-theme="dark"],
 html.dark {
   --planning-grid-border-color: var(--color-text-on-dark); /** Color de la rejilla — surface-dark */
-  --planning-grid-row-header-bg: var(--color-background-dark); /** Fondo de la columna de filas — surface-dark */
+  --planning-grid-row-header-bg: var(--color-bg-dark); /** Fondo de la columna de filas — surface-dark */
   --planning-grid-row-header-color: var(--color-text-on-dark); /** Color del nombre de la fila — surface-dark */
-  --planning-grid-column-header-bg: var(--color-background-dark); /** Fondo del encabezado de columna — surface-dark */
+  --planning-grid-column-header-bg: var(--color-bg-dark); /** Fondo del encabezado de columna — surface-dark */
   --planning-grid-column-header-color: var(--color-text-on-dark); /** Color del encabezado de columna — surface-dark */
   --planning-grid-column-header-sub-color: var(--color-text-muted-on-dark); /** Color de la segunda línea del encabezado — surface-dark */
   --planning-grid-current-outline-color: var(--color-text-on-dark); /** Recuadro de la columna en curso — surface-dark */
@@ -5904,7 +5982,6 @@ html.dark {
   --planning-grid-cell-readonly-bg: var(--color-surface-secondary-on-dark); /** Fondo de una celda que no se edita — surface-dark */
   --planning-grid-footer-bg: var(--color-surface-secondary-on-dark); /** Fondo de las filas de totales — surface-dark */
   --planning-grid-footer-color: var(--color-text-on-dark); /** Color de las filas de totales — surface-dark */
-  --planning-grid-over-color: var(--color-error-text-on-dark); /** Color de un resto negativo — surface-dark */
 }
 
 /**
@@ -5912,8 +5989,8 @@ html.dark {
  */
 
 :root {
-  --org-chart-viewport-block-size: 32rem; /** Alto del lienzo con desplazamiento */
-  --org-chart-card-inline-size: 14rem; /** Ancho de la tarjeta de un departamento */
+  --org-chart-viewport-height: 32rem; /** Alto del lienzo con desplazamiento */
+  --org-chart-card-width: 14rem; /** Ancho de la tarjeta de un departamento */
   --org-chart-font-family: var(--font-family-sans); /** Familia tipográfica del organigrama */
   --org-chart-gap: var(--spacing-3); /** Separación entre el lienzo y sus controles */
   --org-chart-viewport-padding: var(--spacing-5); /** Aire alrededor del árbol dentro del lienzo */
@@ -5938,7 +6015,7 @@ html.dark {
   --org-chart-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco */
   --org-chart-connector-color: var(--color-border-default-on-light); /** Color de las líneas que unen los nodos */
   --org-chart-connector-width: var(--border-width-default); /** Grosor de las líneas que unen los nodos */
-  --org-chart-card-bg: var(--color-background-light); /** Fondo de la tarjeta */
+  --org-chart-card-bg: var(--color-bg-light); /** Fondo de la tarjeta */
   --org-chart-card-border-color: var(--color-primary); /** Borde de la tarjeta */
   --org-chart-card-border-width: var(--border-width-default); /** Grosor del borde de la tarjeta */
   --org-chart-card-radius: var(--border-radius-default); /** Radio de la tarjeta */
@@ -5958,7 +6035,7 @@ html.dark {
   --org-chart-viewport-border-color: var(--color-text-on-dark); /** Borde del lienzo — surface-dark */
   --org-chart-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
   --org-chart-connector-color: var(--color-text-on-dark); /** Color de las líneas — surface-dark */
-  --org-chart-card-bg: var(--color-background-dark); /** Fondo de la tarjeta — surface-dark */
+  --org-chart-card-bg: var(--color-bg-dark); /** Fondo de la tarjeta — surface-dark */
   --org-chart-card-border-color: var(--color-text-on-dark); /** Borde de la tarjeta — surface-dark */
   --org-chart-name-color: var(--color-text-on-dark); /** Color del nombre del departamento — surface-dark */
   --org-chart-group-color: var(--color-text-muted-on-dark); /** Color del rótulo de grupo — surface-dark */
@@ -5972,10 +6049,10 @@ html.dark {
  */
 
 :root {
-  --site-search-ghost-section-inline-size: 30%; /** Ancho de la barra fantasma del rastro de sección */
-  --site-search-ghost-title-inline-size: 70%; /** Ancho de la barra fantasma del título */
-  --site-search-ghost-url-inline-size: 45%; /** Ancho de la barra fantasma de la dirección */
-  --site-search-inline-size: var(--input-width); /** Anchura del buscador: la de su contenedor. Es la página de resultados entera, así que ocupa todo el hueco donde se monte — declarada y no heredada del flujo, para que tampoco se encoja dentro de una fila flex o una celda de retícula */
+  --site-search-ghost-section-width: 30%; /** Ancho de la barra fantasma del rastro de sección */
+  --site-search-ghost-title-width: 70%; /** Ancho de la barra fantasma del título */
+  --site-search-ghost-url-width: 45%; /** Ancho de la barra fantasma de la dirección */
+  --site-search-width: var(--input-width); /** Anchura del buscador: la de su contenedor. Es la página de resultados entera, así que ocupa todo el hueco donde se monte — declarada y no heredada del flujo, para que tampoco se encoja dentro de una fila flex o una celda de retícula */
   --site-search-gap: var(--spacing-5); /** Aire entre los bloques del buscador: el formulario, el aviso de estado, los resultados y el pie */
   --site-search-status-line-height: var(--line-height-normal); /** Interlineado del aviso de estado */
   --site-search-status-gap: var(--spacing-2); /** Aire entre el indicador de carga y su texto */
@@ -6232,6 +6309,7 @@ html.dark {
   --prose-table-border-color: var(--table-row-border-color);
   --prose-table-header-border-color: var(--table-header-border-color);
   --prose-rule-color: var(--separator-color);
+  --recurrence-field-helper-color: var(--form-helper-color);
   --sheet-bg: var(--modal-bg);
   --sheet-title-color: var(--modal-title-color);
   --sheet-description-color: var(--modal-description-color);
@@ -6275,7 +6353,7 @@ html.dark .surface-light {
   --alert-border-color: var(--color-text-on-dark);
   --alert-title-color: var(--color-text-on-dark);
   --alert-description-color: var(--color-text-on-dark);
-  --app-header-bg: var(--color-background-light);
+  --app-header-bg: var(--color-bg-light);
   --app-header-border-color: var(--color-primary);
   --app-launcher-trigger-color: var(--color-text-on-light);
   --app-launcher-focus-ring-color: var(--color-primary);
@@ -6328,7 +6406,7 @@ html.dark .surface-light {
   --avatar-initials-color: var(--color-text-on-dark);
   --breadcrumb-separator-color: var(--color-text-on-light);
   --breadcrumb-link-color: var(--color-text-on-light);
-  --breadcrumb-link-color-hover: var(--color-primary);
+  --breadcrumb-link-hover-color: var(--color-primary);
   --breadcrumb-current-color: var(--color-text-on-light);
   --breadcrumb-focus-ring-color: var(--color-primary);
   --button-primary-focus-ring-color: var(--color-primary);
@@ -6352,6 +6430,8 @@ html.dark .surface-light {
   --button-outline-active-border: var(--color-text-on-light);
   --button-text-underline-width: var(--link-underline-width);
   --button-text-hover-underline-width: var(--link-hover-underline-width);
+  --button-text-decoration-line: var(--link-decoration-line);
+  --button-text-hover-decoration-line: var(--link-hover-decoration-line);
   --button-text-ink-color: var(--link-ink-color);
   --button-text-disabled-color: var(--button-disabled-color);
   --button-text-focus-ring-color: var(--link-focus-ring-color);
@@ -6365,17 +6445,17 @@ html.dark .surface-light {
   --button-ghost-hover-color: var(--color-text-on-dark);
   --button-ghost-active-bg: var(--color-primary);
   --button-ghost-active-color: var(--color-text-on-dark);
-  --card-outline-bg: var(--color-background-light);
+  --card-outline-bg: var(--color-bg-light);
   --card-outline-color: var(--color-text-on-light);
   --card-outline-border-color: var(--color-primary);
   --card-selectable-focus-ring-color: var(--button-primary-focus-ring-color);
   --checkbox-border-color: var(--color-primary);
-  --checkbox-bg-checked: var(--color-primary);
+  --checkbox-checked-bg: var(--color-primary);
   --checkbox-check-color: var(--color-white);
   --checkbox-focus-ring-color: var(--color-primary);
   --checkbox-error-border-color: var(--color-error-text-on-light);
   --checkbox-disabled-border-color: var(--color-disabled-border-on-light);
-  --checkbox-disabled-bg-checked: var(--color-disabled-border-on-light);
+  --checkbox-checked-disabled-bg: var(--color-disabled-border-on-light);
   --close-button-color: var(--color-text-on-light);
   --close-button-focus-ring-color: var(--color-text-on-light);
   --code-block-border-color: var(--card-outline-border-color);
@@ -6427,7 +6507,7 @@ html.dark .surface-light {
   --file-upload-thumb-bg: var(--color-surface-secondary-on-light);
   --file-upload-thumb-icon-color: var(--color-icon-secondary-on-light);
   --file-upload-remove-color: var(--color-text-muted-on-light);
-  --file-upload-remove-color-hover: var(--color-error-text-on-light);
+  --file-upload-remove-hover-color: var(--color-error-text-on-light);
   --floating-dock-panel-bg: var(--floating-panel-bg);
   --floating-dock-panel-border-color: var(--floating-panel-border-color);
   --floating-dock-title-color: var(--modal-title-color);
@@ -6435,7 +6515,7 @@ html.dark .surface-light {
   --floating-dock-close-color: var(--modal-close-color);
   --floating-dock-close-focus-ring-color: var(--modal-close-focus-ring-color);
   --floating-dock-focus-ring-color: var(--color-primary);
-  --floating-panel-bg: var(--color-background-light);
+  --floating-panel-bg: var(--color-bg-light);
   --floating-panel-border-color: var(--color-primary);
   --form-error-color: var(--color-error-text-on-light);
   --form-helper-color: var(--color-text-on-light);
@@ -6462,12 +6542,17 @@ html.dark .surface-light {
   --kbd-bg: var(--color-surface-secondary-on-light);
   --kbd-color: var(--color-text-on-light);
   --label-color: var(--color-text-on-light);
+  --label-optional-color: var(--color-text-muted-on-light);
   --link-color: var(--color-text-on-light);
   --link-hover-color: var(--color-text-on-light);
   --link-underline-width: var(--border-width-default);
   --link-hover-underline-width: 0px;
+  --link-decoration-line: underline;
+  --link-hover-decoration-line: none;
   --link-focus-ring-color: var(--color-primary);
   --link-ink-color: var(--color-text-on-light);
+  --link-accent-1-color: var(--link-color);
+  --link-accent-1-hover-color: var(--link-hover-color);
   --loading-state-spinner-color: var(--empty-state-icon-color);
   --loading-state-label-color: var(--empty-state-description-color);
   --logo-color: var(--color-text-on-light);
@@ -6486,8 +6571,8 @@ html.dark .surface-light {
   --menu-separator-color: var(--separator-color);
   --message-bubble-color: var(--color-text-on-light);
   --message-bubble-border-color: var(--color-text-on-light);
-  --message-bubble-tail-fill: var(--color-background-light);
-  --modal-bg: var(--color-background-light);
+  --message-bubble-tail-fill: var(--color-bg-light);
+  --modal-bg: var(--color-bg-light);
   --modal-border-color: rgba(0, 0, 0, 0);
   --modal-title-color: var(--color-text-on-light);
   --modal-description-color: var(--color-text-muted-on-light);
@@ -6551,7 +6636,7 @@ html.dark .surface-light {
   --pagination-ellipsis-color: var(--color-text-muted-on-light);
   --pagination-focus-ring-color: var(--color-primary);
   --password-field-toggle-color: var(--color-primary);
-  --password-field-toggle-color-hover: var(--color-primary);
+  --password-field-toggle-hover-color: var(--color-primary);
   --password-field-toggle-focus-ring-color: var(--color-primary);
   --popover-bg: var(--floating-panel-bg);
   --popover-border-color: var(--floating-panel-border-color);
@@ -6587,13 +6672,13 @@ html.dark .surface-light {
   --sidebar-nav-focus-ring-color: var(--color-primary);
   --sidebar-nav-item-empty-color: var(--color-text-muted-on-light);
   --sidebar-nav-item-empty-mark-color: var(--color-text-muted-on-light);
-  --sidebar-bg: var(--color-background-light);
+  --sidebar-bg: var(--color-bg-light);
   --sidebar-border-color: var(--color-primary);
   --sidebar-resizer-hover-color: var(--color-primary);
   --sidebar-separator-color: var(--separator-color);
   --site-footer-legal-separator-color: var(--separator-color);
-  --site-header-bg: var(--color-background-light);
-  --site-header-panel-bg: var(--color-background-light);
+  --site-header-bg: var(--color-bg-light);
+  --site-header-panel-bg: var(--color-bg-light);
   --skeleton-bg: var(--color-surface-secondary-on-light);
   --skeleton-highlight: var(--color-white);
   --skip-link-bg: var(--color-primary);
@@ -6613,7 +6698,7 @@ html.dark .surface-light {
   --star-rating-empty-color: var(--color-text-muted-on-light);
   --star-rating-fill-color: var(--color-primary);
   --star-rating-focus-ring-color: var(--color-primary);
-  --step-pending-bg: var(--color-background-light);
+  --step-pending-bg: var(--color-bg-light);
   --step-pending-border-color: var(--color-border-default-on-light);
   --step-pending-color: var(--color-text-muted-on-light);
   --step-tone-primary-bg: var(--color-primary);
@@ -6624,7 +6709,7 @@ html.dark .surface-light {
   --step-connector-done-color: var(--color-primary);
   --step-description-color: var(--color-text-muted-on-light);
   --switcher-track-bg: var(--color-border-default-on-light);
-  --switcher-track-bg-checked: var(--color-primary);
+  --switcher-track-checked-bg: var(--color-primary);
   --switcher-thumb-bg: var(--color-white);
   --switcher-focus-ring-color: var(--color-primary);
   --switcher-error-ring-color: var(--color-error-text-on-light);
@@ -6635,7 +6720,7 @@ html.dark .surface-light {
   --table-row-border-color: var(--color-primary);
   --table-row-selected-color: var(--color-primary);
   --table-row-hover-marker-color: var(--color-primary);
-  --table-sticky-bg: var(--color-background-light);
+  --table-sticky-bg: var(--color-bg-light);
   --table-footer-bg: var(--color-surface-secondary-on-light);
   --table-footer-border-color: var(--color-text-on-light);
   --table-focus-ring-color: var(--color-primary);
@@ -6644,19 +6729,20 @@ html.dark .surface-light {
   --tabs-trigger-hover-color: var(--color-text-on-light);
   --tabs-trigger-active-color: var(--color-text-on-light);
   --tabs-trigger-indicator-color: var(--color-primary);
-  --tabs-trigger-pill-bg-active: var(--color-primary);
-  --tabs-trigger-pill-color-active: var(--color-white);
+  --tabs-trigger-pill-active-bg: var(--color-primary);
+  --tabs-trigger-pill-active-color: var(--color-white);
   --tabs-focus-ring-color: var(--color-primary);
   --tag-primary-bg: var(--color-primary);
   --tag-primary-color: var(--color-text-on-dark);
   --tag-info-bg: var(--color-primary);
   --tag-info-color: var(--color-text-on-dark);
   --text-inline-muted-color: var(--color-text-muted-on-light);
+  --text-inline-error-color: var(--color-error-text-on-light);
   --text-inline-destructive-color: var(--color-destructive-text-on-light);
   --text-inline-success-color: var(--color-success-text-on-light);
   --text-inline-strikethrough-color: var(--color-text-muted-on-light);
   --text-color: var(--color-text-on-light);
-  --text-background: var(--color-background-light);
+  --text-bg: var(--color-bg-light);
   --text-h1-color: var(--text-heading-color);
   --text-h2-color: var(--text-heading-color);
   --text-h3-color: var(--text-heading-color);
@@ -6689,7 +6775,7 @@ html.dark .surface-light {
   --toggle-pressed-color: var(--color-text-on-dark);
   --toggle-pressed-border-color: var(--color-primary);
   --toggle-focus-ring-color: var(--color-primary);
-  --tooltip-bg: var(--color-background-dark);
+  --tooltip-bg: var(--color-bg-dark);
   --tooltip-color: var(--color-text-on-dark);
   --typing-indicator-dot-color: var(--color-text-on-light);
   --user-menu-focus-ring-color: var(--color-primary);
@@ -6730,14 +6816,14 @@ html.dark .surface-light {
   --calendar-planner-hover-line-color: var(--calendar-hover-line-color);
   --calendar-roster-border-color: var(--color-primary);
   --calendar-roster-th-name-color: var(--color-text-muted-on-light);
-  --calendar-roster-th-name-bg: var(--color-background-light);
+  --calendar-roster-th-name-bg: var(--color-bg-light);
   --calendar-roster-th-day-color: var(--color-text-on-light);
-  --calendar-roster-th-day-bg: var(--color-background-light);
-  --calendar-roster-th-day-today-color: var(--color-background-light);
+  --calendar-roster-th-day-bg: var(--color-bg-light);
+  --calendar-roster-th-day-today-color: var(--color-bg-light);
   --calendar-roster-th-day-today-bg: var(--color-primary);
   --calendar-roster-td-name-color: var(--color-text-on-light);
-  --calendar-roster-td-name-bg: var(--color-background-light);
-  --calendar-roster-cell-bg: var(--color-background-light);
+  --calendar-roster-td-name-bg: var(--color-bg-light);
+  --calendar-roster-cell-bg: var(--color-bg-light);
   --calendar-roster-cell-weekend-bg: var(--color-surface-secondary-on-light);
   --calendar-roster-cell-holiday-bg: var(--color-surface-secondary-on-light);
   --calendar-roster-cell-non-working-bg: var(--color-surface-secondary-on-light);
@@ -6795,7 +6881,7 @@ html.dark .surface-light {
   --command-palette-item-color: var(--menu-item-color);
   --command-palette-item-highlighted-bg: var(--menu-item-highlighted-bg);
   --command-palette-item-highlighted-color: var(--menu-item-highlighted-color);
-  --consent-banner-bg: var(--color-background-light);
+  --consent-banner-bg: var(--color-bg-light);
   --consent-banner-color: var(--color-text-on-light);
   --consent-banner-border-color: var(--color-primary);
   --conversation-list-item-color: var(--color-text-muted-on-light);
@@ -6830,9 +6916,9 @@ html.dark .surface-light {
   --floating-toolbar-border-color: var(--floating-panel-border-color);
   --heatmap-border-color: var(--color-primary);
   --heatmap-row-header-color: var(--color-text-on-light);
-  --heatmap-row-header-bg: var(--color-background-light);
+  --heatmap-row-header-bg: var(--color-bg-light);
   --heatmap-column-header-color: var(--color-text-muted-on-light);
-  --heatmap-column-header-bg: var(--color-background-light);
+  --heatmap-column-header-bg: var(--color-bg-light);
   --heatmap-group-header-color: var(--color-text-muted-on-light);
   --heatmap-empty-bg: var(--color-surface-secondary-on-light);
   --heatmap-empty-pattern-color: var(--color-border-default-on-light);
@@ -6849,6 +6935,20 @@ html.dark .surface-light {
   --heatmap-step-5-color: var(--color-text-on-dark);
   --heatmap-step-6-bg: var(--color-chart-sequential-700);
   --heatmap-step-6-color: var(--color-text-on-dark);
+  --heatmap-diverging-warm-3-bg: var(--color-chart-diverging-warm-3);
+  --heatmap-diverging-warm-3-color: var(--color-text-on-dark);
+  --heatmap-diverging-warm-2-bg: var(--color-chart-diverging-warm-2-on-dark);
+  --heatmap-diverging-warm-2-color: var(--color-text-on-light);
+  --heatmap-diverging-warm-1-bg: var(--color-chart-diverging-warm-1);
+  --heatmap-diverging-warm-1-color: var(--color-text-on-light);
+  --heatmap-diverging-neutral-bg: var(--color-surface-secondary-on-light);
+  --heatmap-diverging-neutral-color: var(--color-text-on-light);
+  --heatmap-diverging-cool-1-bg: var(--color-chart-diverging-cool-1);
+  --heatmap-diverging-cool-1-color: var(--color-text-on-light);
+  --heatmap-diverging-cool-2-bg: var(--color-chart-diverging-cool-2);
+  --heatmap-diverging-cool-2-color: var(--color-text-on-light);
+  --heatmap-diverging-cool-3-bg: var(--color-chart-diverging-cool-3);
+  --heatmap-diverging-cool-3-color: var(--color-text-on-dark);
   --image-crop-dialog-area-bg: var(--color-surface-secondary-on-light);
   --input-field-search-icon-color: var(--color-primary);
   --input-field-search-clear-color: var(--color-primary);
@@ -6896,6 +6996,7 @@ html.dark .surface-light {
   --recovery-codes-color: var(--color-text-on-light);
   --recovery-codes-index-color: var(--color-text-muted-on-light);
   --recurrence-field-legend-color: var(--color-text-on-light);
+  --recurrence-field-helper-color: var(--form-helper-color);
   --search-form-submit-color: var(--color-primary);
   --search-form-submit-hover-color: var(--color-primary);
   --search-form-submit-disabled-color: var(--input-disabled-color);
@@ -6909,6 +7010,7 @@ html.dark .surface-light {
   --site-nav-item-color: var(--color-text-on-light);
   --site-nav-item-hover-color: var(--color-text-on-light);
   --site-nav-item-hover-line-width: var(--link-underline-width);
+  --site-nav-item-hover-decoration-line: var(--link-decoration-line);
   --site-nav-item-disabled-color: var(--color-disabled-text-on-light);
   --site-nav-focus-ring-color: var(--color-primary);
   --stat-tile-border-color: var(--card-outline-border-color);
@@ -6979,7 +7081,7 @@ html.dark .surface-light {
   --chart-diverging-cool-1: var(--color-chart-diverging-cool-1);
   --chart-diverging-cool-2: var(--color-chart-diverging-cool-2);
   --chart-diverging-cool-3: var(--color-chart-diverging-cool-3);
-  --chart-surface: var(--color-background-light);
+  --chart-surface: var(--color-bg-light);
   --chart-grid-color: var(--color-border-default-on-light);
   --chart-axis-color: var(--color-icon-secondary-on-light);
   --chart-label-color: var(--color-text-muted-on-light);
@@ -6990,13 +7092,13 @@ html.dark .surface-light {
   --chart-tooltip-bg: var(--tooltip-bg);
   --chart-tooltip-color: var(--tooltip-color);
   --chart-crosshair-color: var(--color-icon-secondary-on-light);
-  --chat-shell-bg: var(--color-background-light);
+  --chat-shell-bg: var(--color-bg-light);
   --connector-auth-untrusted-focus-ring-color: var(--link-focus-ring-color);
   --org-chart-viewport-bg: var(--color-surface-secondary-on-light);
   --org-chart-viewport-border-color: var(--color-border-default-on-light);
   --org-chart-focus-ring-color: var(--color-primary);
   --org-chart-connector-color: var(--color-border-default-on-light);
-  --org-chart-card-bg: var(--color-background-light);
+  --org-chart-card-bg: var(--color-bg-light);
   --org-chart-card-border-color: var(--color-primary);
   --org-chart-name-color: var(--color-text-on-light);
   --org-chart-group-color: var(--color-text-muted-on-light);
@@ -7005,17 +7107,16 @@ html.dark .surface-light {
   --org-chart-empty-color: var(--color-text-muted-on-light);
   --planning-grid-border-color: var(--color-primary);
   --planning-grid-row-header-color: var(--color-text-on-light);
-  --planning-grid-row-header-bg: var(--color-background-light);
+  --planning-grid-row-header-bg: var(--color-bg-light);
   --planning-grid-column-header-color: var(--color-text-on-light);
   --planning-grid-column-header-sub-color: var(--color-text-muted-on-light);
-  --planning-grid-column-header-bg: var(--color-background-light);
+  --planning-grid-column-header-bg: var(--color-bg-light);
   --planning-grid-current-outline-color: var(--color-primary);
   --planning-grid-cell-color: var(--color-text-on-light);
   --planning-grid-cell-readonly-color: var(--color-text-muted-on-light);
   --planning-grid-cell-readonly-bg: var(--color-surface-secondary-on-light);
   --planning-grid-footer-bg: var(--color-surface-secondary-on-light);
   --planning-grid-footer-color: var(--color-text-on-light);
-  --planning-grid-over-color: var(--color-error-text-on-light);
   --site-search-status-color: var(--color-text-muted-on-light);
   --site-search-result-title-color: var(--color-text-on-light);
   --site-search-result-section-color: var(--color-text-muted-on-light);
@@ -7113,7 +7214,7 @@ html.dark .surface-light {
   --calendar-day-size: var(--calendar-lg-day-size);
   --calendar-title-font-size: var(--calendar-lg-title-font-size);
   --calendar-day-font-size: var(--calendar-lg-day-font-size);
-  --calendar-year-grid-min-inline-size: var(--calendar-lg-year-grid-min-inline-size);
+  --calendar-year-grid-min-width: var(--calendar-lg-year-grid-min-width);
   --calendar-year-height: var(--calendar-lg-year-height);
   --calendar-year-font-size: var(--calendar-lg-year-font-size);
   --checkbox-field-gap: var(--checkbox-field-lg-gap);
@@ -7179,6 +7280,7 @@ html.dark .surface-light {
   --code-block-font-size: var(--text-paragraph-small-font-size);
   --code-font-size: var(--code-block-font-size);
   --collapsible-trigger-font-size: var(--control-font-size);
+  --collapsible-trigger-line-height: var(--text-line-height);
   --description-list-term-font-size: var(--text-paragraph-small-font-size);
   --description-list-value-font-size: var(--text-font-size);
   --description-list-value-line-height: var(--text-line-height);
@@ -7241,7 +7343,7 @@ html.dark .surface-light {
   --field-row-empty-font-size: var(--text-paragraph-small-font-size);
   --file-upload-field-helper-font-size: var(--form-helper-font-size);
   --filter-bar-label-offset: calc(var(--label-font-size) * var(--label-line-height) + var(--input-field-gap));
-  --filter-bar-control-block-size: var(--control-height);
+  --filter-bar-control-height: var(--control-height);
   --input-field-search-input-padding-inline-start: var(--input-field-search-slot-size);
   --input-field-search-input-padding-inline-end: var(--input-field-search-slot-size);
   --input-field-error-font-size: var(--form-error-font-size);
@@ -7271,6 +7373,7 @@ html.dark .surface-light {
   --radio-field-helper-font-size: var(--form-helper-font-size);
   --recovery-codes-font-size: var(--text-paragraph-small-font-size);
   --recurrence-field-legend-font-size: var(--label-font-size);
+  --recurrence-field-helper-font-size: var(--form-helper-font-size);
   --search-form-submit-input-padding-inline-end: var(--search-form-submit-slot-size);
   --select-field-helper-font-size: var(--form-helper-font-size);
   --sheet-description-font-size: var(--modal-description-font-size);
@@ -7308,3 +7411,82 @@ html.dark .surface-light {
   --site-search-result-url-font-size: var(--text-font-size);
   --site-search-result-url-line-height: var(--text-line-height);
 }
+
+/* Alias obsoletos de la v51 (D9): los nombres de token anteriores a la
+   convención de nombres, cada uno leyendo su nombre nuevo. Generado; se retira
+   en la v52. */
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * OBSOLETOS (v51): los nombres de token anteriores a la convención D9
+ * (`<componente>-<parte>-<estado>-<propiedad>-<talla>`). Cada uno lee el valor
+ * de su nombre nuevo; sobrescribirlo NO cambia el componente, que lee el nuevo.
+ * Se retiran en la v52.
+ */
+
+:root,
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark,
+.surface-light,
+.site-shell {
+  --color-background-light: var(--color-bg-light); /* obsoleto: usar --color-bg-light */
+  --color-background-dark: var(--color-bg-dark); /* obsoleto: usar --color-bg-dark */
+  --accordion-index-min-inline-size: var(--accordion-index-min-width); /* obsoleto: usar --accordion-index-min-width */
+  --app-launcher-tile-badge-block-size: var(--app-launcher-tile-badge-height); /* obsoleto: usar --app-launcher-tile-badge-height */
+  --async-multi-select-input-min-inline-size: var(--async-multi-select-input-min-width); /* obsoleto: usar --async-multi-select-input-min-width */
+  --breadcrumb-link-color-hover: var(--breadcrumb-link-hover-color); /* obsoleto: usar --breadcrumb-link-hover-color */
+  --checkbox-bg-checked: var(--checkbox-checked-bg); /* obsoleto: usar --checkbox-checked-bg */
+  --checkbox-disabled-bg-checked: var(--checkbox-checked-disabled-bg); /* obsoleto: usar --checkbox-checked-disabled-bg */
+  --embed-frame-device-mobile-inline-size: var(--embed-frame-device-mobile-width); /* obsoleto: usar --embed-frame-device-mobile-width */
+  --embed-frame-device-tablet-inline-size: var(--embed-frame-device-tablet-width); /* obsoleto: usar --embed-frame-device-tablet-width */
+  --file-upload-remove-color-hover: var(--file-upload-remove-hover-color); /* obsoleto: usar --file-upload-remove-hover-color */
+  --floating-dock-panel-inline-size: var(--floating-dock-panel-width); /* obsoleto: usar --floating-dock-panel-width */
+  --floating-dock-panel-block-size: var(--floating-dock-panel-height); /* obsoleto: usar --floating-dock-panel-height */
+  --loading-state-min-block-size: var(--loading-state-min-height); /* obsoleto: usar --loading-state-min-height */
+  --loading-state-sm-min-block-size: var(--loading-state-sm-min-height); /* obsoleto: usar --loading-state-sm-min-height */
+  --logo-height-xxl: var(--logo-height-2xl); /* obsoleto: usar --logo-height-2xl */
+  --modal-width-max: var(--modal-max-width); /* obsoleto: usar --modal-max-width */
+  --modal-inline-size: var(--modal-width); /* obsoleto: usar --modal-width */
+  --number-badge-danger-bg: var(--number-badge-error-bg); /* obsoleto: usar --number-badge-error-bg */
+  --number-badge-danger-color: var(--number-badge-error-color); /* obsoleto: usar --number-badge-error-color */
+  --otp-input-cell-inline-size: var(--otp-input-cell-width); /* obsoleto: usar --otp-input-cell-width */
+  --password-field-toggle-color-hover: var(--password-field-toggle-hover-color); /* obsoleto: usar --password-field-toggle-hover-color */
+  --slider-control-block-size: var(--slider-control-height); /* obsoleto: usar --slider-control-height */
+  --step-tone-danger-bg: var(--step-tone-error-bg); /* obsoleto: usar --step-tone-error-bg */
+  --step-tone-danger-color: var(--step-tone-error-color); /* obsoleto: usar --step-tone-error-color */
+  --switcher-track-bg-checked: var(--switcher-track-checked-bg); /* obsoleto: usar --switcher-track-checked-bg */
+  --table-actions-inline-size: var(--table-actions-width); /* obsoleto: usar --table-actions-width */
+  --tabs-trigger-pill-bg-active: var(--tabs-trigger-pill-active-bg); /* obsoleto: usar --tabs-trigger-pill-active-bg */
+  --tabs-trigger-pill-color-active: var(--tabs-trigger-pill-active-color); /* obsoleto: usar --tabs-trigger-pill-active-color */
+  --tag-danger-bg: var(--tag-error-bg); /* obsoleto: usar --tag-error-bg */
+  --tag-danger-color: var(--tag-error-color); /* obsoleto: usar --tag-error-color */
+  --text-background: var(--text-bg); /* obsoleto: usar --text-bg */
+  --typing-indicator-dot-opacity-active: var(--typing-indicator-dot-active-opacity); /* obsoleto: usar --typing-indicator-dot-active-opacity */
+  --calendar-year-grid-min-inline-size: var(--calendar-year-grid-min-width); /* obsoleto: usar --calendar-year-grid-min-width */
+  --calendar-sm-year-grid-min-inline-size: var(--calendar-sm-year-grid-min-width); /* obsoleto: usar --calendar-sm-year-grid-min-width */
+  --calendar-lg-year-grid-min-inline-size: var(--calendar-lg-year-grid-min-width); /* obsoleto: usar --calendar-lg-year-grid-min-width */
+  --carousel-indicator-inline-size: var(--carousel-indicator-width); /* obsoleto: usar --carousel-indicator-width */
+  --carousel-indicator-block-size: var(--carousel-indicator-height); /* obsoleto: usar --carousel-indicator-height */
+  --carousel-indicator-hit-block-size: var(--carousel-indicator-hit-height); /* obsoleto: usar --carousel-indicator-hit-height */
+  --color-picker-panel-inline-size: var(--color-picker-panel-width); /* obsoleto: usar --color-picker-panel-width */
+  --color-picker-area-block-size: var(--color-picker-area-height); /* obsoleto: usar --color-picker-area-height */
+  --consent-banner-max-inline-size: var(--consent-banner-max-width); /* obsoleto: usar --consent-banner-max-width */
+  --date-picker-inline-size: var(--date-picker-width); /* obsoleto: usar --date-picker-width */
+  --docs-search-results-max-block-size: var(--docs-search-results-max-height); /* obsoleto: usar --docs-search-results-max-height */
+  --filter-bar-control-block-size: var(--filter-bar-control-height); /* obsoleto: usar --filter-bar-control-height */
+  --notification-panel-inline-size: var(--notification-panel-width); /* obsoleto: usar --notification-panel-width */
+  --notification-panel-list-max-block-size: var(--notification-panel-list-max-height); /* obsoleto: usar --notification-panel-list-max-height */
+  --search-form-inline-size: var(--search-form-width); /* obsoleto: usar --search-form-width */
+  --sheet-inline-size: var(--sheet-width); /* obsoleto: usar --sheet-width */
+  --sheet-block-size: var(--sheet-height); /* obsoleto: usar --sheet-height */
+  --table-of-contents-sticky-max-block-size: var(--table-of-contents-sticky-max-height); /* obsoleto: usar --table-of-contents-sticky-max-height */
+  --org-chart-viewport-block-size: var(--org-chart-viewport-height); /* obsoleto: usar --org-chart-viewport-height */
+  --org-chart-card-inline-size: var(--org-chart-card-width); /* obsoleto: usar --org-chart-card-width */
+  --site-search-inline-size: var(--site-search-width); /* obsoleto: usar --site-search-width */
+  --site-search-ghost-section-inline-size: var(--site-search-ghost-section-width); /* obsoleto: usar --site-search-ghost-section-width */
+  --site-search-ghost-title-inline-size: var(--site-search-ghost-title-width); /* obsoleto: usar --site-search-ghost-title-width */
+  --site-search-ghost-url-inline-size: var(--site-search-ghost-url-width); /* obsoleto: usar --site-search-ghost-url-width */
+}