@higinio/design-mcp 0.2.0 → 0.2.1

package/assets/bruma/design-doc.md

@@ -106,7 +106,7 @@ Los componentes **nunca** usan los primitivos directamente: consumen esta capa.
 | `--text-primary` | `neutral-800` | Texto principal |
 | `--text-secondary` | `neutral-600` | Texto secundario |
 | `--text-muted` | `neutral-500` | Terciario, captions |
-| `--text-disabled` | `neutral-400` | Deshabilitado, placeholder |
+| `--text-disabled` | `neutral-400` | Solo controles deshabilitados |
 | `--text-on-primary` | `#ffffff` | Texto sobre botón primario |
 | `--text-on-primary-solid` | `primary-700` | Texto de peso normal sobre `primary-100` |
 | `--accent` | `primary-500` | Rellenos de controles, bordes activos, focus |
@@ -121,26 +121,32 @@ Los componentes **nunca** usan los primitivos directamente: consumen esta capa.
 
 > ⚠️ **Regla de área del acento:** `--accent` es un color de control, no de superficie. Si una pieza mide más que un botón grande, no va en lavanda sólida: una tarjeta destacada se marca con borde `--border-strong` o con un indicador de 2–3px en `--accent`, nunca con fondo lavanda. El éxito, por su parte, es verde azulado (`--success-500`), lejos del acento (ΔE76 52.6 en claro y 49.2 en oscuro), y siempre lleva ✓.
 
-### 3.5 Proporción de uso (regla 60-30-10)
+### 3.5 Uso del color y jerarquía
 
-- **60% — Niebla y superficies** (`neutral-0/50/100`): fondos y superficies.
-- **30% — Tinta y estructura** (`neutral-600→900`, bordes): texto, iconos, divisores.
-- **10% — Lavanda y semánticos**: botones, links, estados activos, foco, gráficas. **El acento pierde poder si supera el 10%**, y en Bruma además no puede concentrarse en una sola área grande (§1). (Excepción: una visualización de datos multiserie usa la paleta categórica validada de la skill `dataviz-marca`, exenta de este techo — son datos, no cromo decorativo.)
+El primitivo de marca expresa identidad; el rol de acción asegura legibilidad. Una acción dominante por contexto de decisión: un formulario, un diálogo o una región independiente pueden tener su propia acción. Evita competir dentro del mismo grupo. La proporción de acento se decide por jerarquía y contenido; 60/30/10 es una orientación visual, no una cuota ni un criterio de conformidad.
 
-Reglas prácticas:
-- **Un solo botón primario visible por pantalla**; el resto secundarios o ghost.
-- **Fondos siempre planos** (`--bg`, niebla): sin degradados de ningún tipo, sin texturas, granulado ni patrones, sin veladuras ni full-bleed decorativo — la superficie de trabajo (tarjetas de niebla clara con su borde) es la protagonista.
-- Estado nunca solo con color: siempre color + icono + texto.
+| Rol semántico | Uso |
+|---|---|
+| `--action-bg`, `--action-hover`, `--action-active` | Relleno de acciones sólidas y selección con texto |
+| `--text-on-action` | Texto e iconos sobre los tres fondos de acción; ≥4.5:1 |
+| `--control-border` | Contorno necesario para reconocer campos, checkbox y radio; ≥3:1 |
+| `--focus-color` | Contorno sólido de teclado, distinto del halo decorativo |
+| `--placeholder` | Ayuda legible dentro de campos; nunca sustituye al label |
+| `--selection-bg`, `--selection-text` | Selección nativa de texto, con contraste propio |
+
+`--accent` conserva la firma cromática y no garantiza contraste como relleno de texto normal. No lo intercambies con `--action-bg`. Los separadores decorativos usan `--border`; los controles usan `--control-border`.
+
+Para datos categóricos consulta `.claude/skills/dataviz-marca/references/paletas-graficas.md`: allí se declara la validación de cada paleta, sus límites y los fallbacks. La identidad de serie también necesita etiqueta, forma o patrón; un cambio de tendencia no significa éxito por defecto.
 
 ---
 
 ## 4. Tipografía
 
-### 4.1 Familias (roles estrictos)
+### 4.1 Familias y funciones
 
 | Rol | Fuente | Fallback | Uso |
 |---|---|---|---|
-| Display | **Bricolage Grotesque** (600–700) | system-ui, sans-serif | **Solo h1–h2**, cifras hero, títulos de marketing — nunca UI ni párrafos |
+| Display | **Bricolage Grotesque** (600–700) | system-ui, sans-serif | Marca y títulos editoriales, cifras hero, títulos de marketing — nunca UI ni párrafos |
 | Body/UI | **Atkinson Hyperlegible Next** (400–700) | system-ui, sans-serif | Párrafos, botones, formularios, h3–h6 |
 | Mono | **Atkinson Hyperlegible Mono** (400–500) | ui-monospace, monospace | Datos numéricos, código, IDs, cantidades en tablas |
 
@@ -191,6 +197,14 @@ Pesos tokenizados: `--weight-regular 400` · `--weight-medium 500` · `--weight-
 
 ---
 
+### Roles tipográficos por tarea
+
+La etiqueta HTML expresa estructura, no una familia tipográfica. En **Operate** (formularios, datos, ajustes), usa `data-mode="operate"` en la región: la familia de UI lleva h1–h3, con una escala fija en rem de 32/20/18px. `.ui-title` permite aplicarla de forma local. Conserva un solo h1 de página y el orden de encabezados.
+
+En **Read**, la familia display puede abrir una página editorial; `.reading-title` y `.display` consumen `--text-display-fluid`, con límites en rem y `text-wrap: balance`. El cuerpo mantiene 65–75ch y tamaños en rem. **Persuade** prioriza una decisión y **Experience** deja protagonismo a la obra: no copies la composición de un dashboard a una landing. Las cifras de tablas usan `tabular-nums`; reserva la mono para código, IDs o mediciones que lo necesiten.
+
+---
+
 ## 5. Espaciado
 
 Escala base 4px — tokens `--space-1…24` (número = px/4): `4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96`
@@ -210,6 +224,40 @@ Aliases de uso (consumir estos, no números sueltos):
 
 ---
 
+### Ritmo entre textos, controles y tarjetas
+
+| Relación | Separación | Token |
+|---|---:|---|
+| Etiqueta → control; control → ayuda/error | 6px | `--field-gap` |
+| Título → descripción del mismo grupo | 8px | `--heading-gap` |
+| Párrafos o bloques relacionados | 16px | `--content-gap` |
+| Bloques directos dentro de una tarjeta | 16px | `--card-content-gap` |
+| Campos consecutivos y pie del formulario | 20px | `--form-gap` |
+| Tarjetas consecutivas | 20px | `--card-group-gap` |
+| Secciones independientes | 48px | `--section-gap` |
+
+El padding protege el borde; el gap separa contenido. `.card` organiza sus hijos directos con `--card-content-gap`. Para anidar contenido usa `.card__content` o `.stack`; `.text-group` agrupa título y descripción a 8px. `.form-stack` separa campos a 20px; `.cluster` agrupa acciones con 12px y permite envolver. `.stack--cards` consume la separación de tarjetas de esta marca.
+
+Un contenedor es dueño de la separación: dentro de stacks y grids se neutralizan los márgenes de sus hijos para no sumar margen y gap. Los `.field` consecutivos también se separan en flujo normal. Evita repartir márgenes manuales entre cada div; aplica el contenedor al grupo. Las alturas de control son mínimas: permiten crecer cuando aumenta el tamaño del texto.
+
+```html
+<div class="stack stack--cards">
+  <section class="card" data-mode="operate">
+    <header class="text-group"><h2>Datos de contacto</h2><p>Usaremos estos datos para responder.</p></header>
+    <form class="form-stack">
+      <div class="field"><label class="field__label" for="nombre">Nombre</label><input class="input" id="nombre" autocomplete="name"></div>
+      <div class="field"><label class="field__label" for="correo">Correo</label><input class="input" id="correo" type="email" autocomplete="email"></div>
+      <div class="cluster"><button class="btn btn--primary" type="submit">Guardar</button><button class="btn btn--secondary" type="button">Cancelar</button></div>
+    </form>
+  </section>
+  <section class="card"><h2 class="ui-title">Otra sección</h2><p>El contenedor mantiene su distancia respecto a la tarjeta anterior.</p></section>
+</div>
+```
+
+Verifica la composición con ayuda/error multilínea, textos largos, 320px y texto al 200%. El texto debe envolver y los controles crecer; no reduzcas gaps para hacer caber contenido.
+
+---
+
 ## 6. Bordes, radios y focus
 
 | Token | Valor | Uso |
@@ -296,11 +344,11 @@ No hay logo ni imágenes de marca — el wordmark es puramente tipográfico. Don
 
 ### 10.1 Botones
 
-Alturas: 36 (sm) / 44 (md) / 52px (lg). Radius `md`. Peso 600, `text-sm`/`text-base`; lg usa padding `14px 24px` y `text-lg`. Un solo primario visible por pantalla; ghost y outline usan `--link` (AA), no `primary-500`.
+Alturas: 36 (sm) / 44 (md) / 52px (lg). Radius `md`. Peso 600, `text-sm`/`text-base`; lg usa padding `14px 24px` y `text-lg`. Una acción dominante por contexto de decisión; ghost y outline usan `--link` (AA), no `primary-500`.
 
 | Variante | Reposo | Hover | Active | Disabled |
 |---|---|---|---|---|
-| Primario | fondo `--accent`, texto `--text-on-primary` | `--accent-hover` + `shadow-sm` | `--accent-active`, sin sombra | fondo `--border`, texto `--text-disabled` |
+| Primario | fondo `--action-bg`, texto `--text-on-action` | `--action-hover` | `--action-active`, sin sombra | fondo `--border`, texto `--text-disabled` |
 | Secundario | fondo `--surface`, borde `--border-strong`, texto `--text-primary` | fondo `--bg` | fondo `--surface-alt` | opacidad 50% |
 | Outline | fondo transparente, borde `--accent`, **texto `--link`** | fondo `--accent-soft`, borde `--accent-hover` | fondo `--accent-soft-strong` | opacidad 50% |
 | Ghost | **texto `--link`** (`primary-600`) | fondo `--accent-soft` | fondo `--accent-soft-strong` | fondo `--border`, texto `--text-disabled` |
@@ -309,7 +357,7 @@ Alturas: 36 (sm) / 44 (md) / 52px (lg). Radius `md`. Peso 600, `text-sm`/`text-b
 - `--text-on-danger` es un token del framework: `neutral-0` en claro (5.01:1 sobre `danger-500`) y la tinta oscura `#16151c` en oscuro (6.99:1), donde el rojo se aclara y el texto claro ya no alcanza AA. Los oscurecidos de hover y active (`color-mix` con negro al 92% y 86%) se mantienen por encima de 4.5:1 en los dos modos.
 - Con icono: gap 8px, icono 20px.
 - Loading: spinner 16px reemplaza el texto (el botón conserva su ancho — fijar `min-width`).
-- El botón es el control por excelencia del lavanda, y no se estira hasta el ancho de una sección: un botón así sería un área de color (§3.4). Si el layout pide un bloque de llamada, el bloque va en `--surface` con borde y el botón dentro, a su tamaño.
+- El botón puede ocupar el ancho disponible de un formulario móvil. La restricción de lavanda en grandes superficies se aplica a héroes, secciones y banners decorativos; no impide un control cómodo y legible.
 
 ### 10.2 IconButton
 
@@ -401,7 +449,7 @@ Rango de valor único.
 
 - Contenedor: borde `--border`, radius `lg`, fondo `--surface`, ítems separados por borde interno.
 - Header: botón full-width, padding `16px 20px`, `text-base` medium `--text-primary`, hover fondo `--bg`; chevron 18px `--text-muted` rota 180° (180ms). `aria-expanded`.
-- Panel: altura animada con `grid-template-rows` 0fr→1fr 240ms ease-out (sin reflow); contenido `text-sm --text-secondary`, padding `0 20px 16px`.
+- Panel: altura animada con `grid-template-rows` 0fr→1fr 240ms ease-out (con layout local controlado); contenido `text-sm --text-secondary`, padding `0 20px 16px`.
 - Un panel abierto a la vez salvo `allowMultiple`; `defaultOpen` por ids.
 
 ### 10.15 Tooltip
@@ -628,7 +676,7 @@ Campo de fecha con un calendario en popover. Reusa el patrón visual del `Popove
 - **`.datepicker`** — contenedor relativo (`.is-open` lo abre). **`.datepicker__input`** con el look de `Input` (borde `--border-strong`, focus `--accent` + `--ring`), `readonly` + `aria-haspopup="dialog"` + `aria-controls` (sin `aria-expanded`, que no es válido en un `input` de texto; el estado abierto lo da `.is-open`); un `.datepicker__icon` de calendario 18px a la derecha (decorativo, `aria-hidden`).
 - **`.datepicker__calendar`** — panel flotante `role="dialog"` con `aria-label`, mismo patrón que `.popover__panel`. Variante `.datepicker--right` ancla a la derecha.
 - **`.calendar`** — dentro del panel: `.calendar__header` (mes/año en `.calendar__title` + botones prev/next con `#i-chevron-left/right`), `.calendar__table` (`role="grid"`) que envuelve la fila de cabeceras `.calendar__weekdays` (`role="row"`, 7 encabezados `role="columnheader"` con `aria-label` completo: "lunes"…) y `.calendar__grid` (`role="rowgroup"`) con una `.calendar__week` (`role="row"`, `display: contents` para no romper la rejilla) por semana, y `.calendar__day` (botón `role="gridcell"`, `aria-label` de la fecha completa vía `Intl.DateTimeFormat` y `aria-selected`). Semana empieza en lunes.
-- **Estados de día:** `.calendar__day--today` (semibold + anillo interior `--border-strong`), `.calendar__day--selected` (fondo `--accent`, texto `--text-on-primary`), `.calendar__day--outside` (días de otro mes, `--text-muted`), `[disabled]` (no seleccionable). El hover usa `--accent-soft`.
+- **Estados de día:** `.calendar__day--today` (semibold + anillo interior `--border-strong`), `.calendar__day--selected` (fondo `--action-bg`, texto `--text-on-action`), `.calendar__day--outside` (días de otro mes, `--text-muted`), `[disabled]` (no seleccionable). El hover usa `--accent-soft`.
 - **Teclado y foco (como Popover):** el input abre por click (o Enter/Espacio/↓); al abrir, el foco entra al calendario (día enfocado). Dentro de la rejilla las **flechas** mueven el foco entre días (roving `tabindex`, cambiando de mes al cruzar el borde), Home/End saltan a los extremos de la semana, PageUp/PageDown cambian de mes, Enter/Espacio selecciona; **Esc** cierra y devuelve el foco al input. La fecha se formatea con `Intl` (`es-MX`), nunca a mano.
 - **Motion:** el panel aparece con fade + `scale(0.96→1)`, `--duration-base` `--ease-out`, bajo el techo `--duration-page`. Solo `transform`/`opacity`.
 
@@ -700,7 +748,7 @@ Las duraciones son cortas y precisas: el movimiento confirma y se aparta, y esa
 ### 11.2 Principios de movimiento
 
 1. **Entra rápido, sale más rápido** — La salida siempre es ~20% más corta que la entrada.
-2. **Solo `transform` y `opacity`** — Nunca animar `width/height/top/left` (evita reflow). Excepciones controladas: width de Progress y `grid-template-rows` del Accordion.
+2. **Propiedades según coste y propósito** — Prefiere `transform` y `opacity` para desplazamiento y aparición. Color y sombra pueden acompañar un estado. Width de Progress y `grid-template-rows` del Accordion recalculan layout: mantenlos locales, cortos y medidos; no son animaciones gratis.
 3. **Distancias cortas** — Desplazamientos de entrada de 4–8px; nada "vuela" por la pantalla.
 4. **Jerarquía temporal** — En listas, stagger de `--stagger-step` (30ms) por ítem (máximo 6 ítems con stagger).
 5. **La animación explica** — Todo movimiento responde a: ¿de dónde vino, qué cambió, a dónde se fue?
@@ -740,27 +788,21 @@ Las duraciones son cortas y precisas: el movimiento confirma y se aparta, y esa
 
 ### 11.5 Accesibilidad del movimiento
 
+La preferencia reducida cambia los tokens de duración propios a 0ms y detiene spinner y skeleton. Los estados finales siguen visibles; el feedback de color de botones puede durar 80ms. No se acortan con un selector universal las animaciones de otras librerías. No uses eventos de animación como única condición para completar una operación o retirar un elemento.
+
 ```css
 @media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
+  :root {
+    --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms;
+    --duration-slow: 0ms; --duration-page: 0ms; --stagger-step: 0ms;
   }
+  html { scroll-behavior: auto; }
+  .spinner, .skeleton, .skeleton::after { animation: none; }
+  .btn, .icon-btn { transform: none; transition: background-color 80ms linear, color 80ms linear; }
 }
 ```
 
-Este reset con `*` es el **piso de seguridad**: garantiza que ningún motion sobreviva si el usuario pide reducirlo, incluso en componentes que no se revisaron a mano. Donde el movimiento comunica información real (progreso, un check, un conteo) y eliminarlo del todo perjudicaría la comprensión, un componente puede sobrescribir el reset con un selector más específico y una duración corta (p. ej. `transition-duration: 80ms`) en vez de colapsar a 0.01ms — hoy ningún componente del sistema ejerce esta excepción; todos usan el piso global.
-
-**Gating de hover:** los efectos de hover que mueven o elevan (transform, box-shadow) van dentro de `@media (hover: hover) and (pointer: fine)` — en touch no hay hover real y el tap dispara hovers falsos que se quedan pegados hasta el siguiente toque. Los hover de solo color/fondo pueden quedar fuera: un cambio de color pegado no estorba. La sombra del botón primario va dentro; el borde de la tarjeta interactiva también, aunque solo cambie de color, para que un tap no la deje marcada como si siguiera bajo el cursor.
-
-```css
-@media (hover: hover) and (pointer: fine) {
-  .btn--primary:hover:not(:disabled) { box-shadow: var(--shadow-sm); }
-  .card--interactive:hover { border-color: var(--border-strong); }
-}
-```
+Los hover que desplazan o elevan solo se aplican con `(hover: hover) and (pointer: fine)`. Verifica la alternativa reducida con el mismo contenido y flujo, incluidos abrir, cerrar, cargar y confirmar. Los datos llegan con su valor final desde HTML: no hay valor final visible desde la carga.
 
 ### 11.6 Anti-patrones de motion
 
@@ -794,7 +836,7 @@ Un "motion gap" es UI que aparece o desaparece sin transición y debería tenerl
 - Estados de carga y de error.
 - Paneles de settings / inspector.
 
-Regla: un gap en UI primaria (el flujo principal) es crítico; en UI secundaria, medio. Toda entrada/salida condicional necesita su transición de `opacity`/`transform`, con su contraparte de salida más discreta.
+La ausencia de transición no es un defecto por sí sola. Evalúa si el cambio se entiende y mantiene el foco. En tareas frecuentes, teclado o movimiento reducido, una actualización instantánea puede ser la respuesta correcta.
 
 ---
 
@@ -827,6 +869,16 @@ Ratios calculados con la fórmula WCAG 2.x (no estimados). El test `mcp/test/con
 ## 13. Tokens CSS consolidados
 
 ```css
+/* ============================================================
+   Bruma Lavanda — Design Tokens v1.0
+   Sistema de diseño de Higinio Sosa · light-first
+   Fuente de verdad: DESIGN-bruma-lavanda.md
+   Uso: importar ANTES de cualquier estilo propio.
+   Los componentes consumen SOLO aliases semánticos, nunca hex.
+   ============================================================ */
+
+@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700&family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Atkinson+Hyperlegible+Mono:wght@400;500&display=swap");
+
 :root {
   /* == Primitivos: primario (Lavanda) ==
      Lavanda apagada, nunca violeta saturado. El acento no rellena áreas grandes:
@@ -918,6 +970,107 @@ Ratios calculados con la fórmula WCAG 2.x (no estimados). El test `mcp/test/con
   --stagger-step: 30ms;
 
   color-scheme: light;
+
+  --overlay: rgba(31, 30, 40, .5);
+  --tooltip-bg: var(--neutral-900);
+  --tooltip-text: var(--neutral-0);
+  --focus-color: var(--accent);
+  --text-on-danger: var(--neutral-0);
+  --border-hover: var(--neutral-500);
+  --ring-danger: 0 0 0 3px rgba(178,76,85,.22);
+
+  --action-bg: var(--accent);
+  --action-hover: var(--accent-hover);
+  --action-active: var(--accent-active);
+  --text-on-action: var(--text-on-primary);
+  --control-border: var(--border-strong);
+  --placeholder: var(--text-muted);
+  --selection-bg: var(--action-bg);
+  --selection-text: var(--text-on-action);
+  --font-ui-heading: var(--font-body);
+  --text-ui-title: 2rem;
+  --touch-target: 44px;
+  --text-display-fluid: clamp(2.5rem, 1.8rem + 2.2vw, 4.25rem);
+
+  /* Series categóricas: orden estable; acompañar con etiqueta o forma. */
+  --chart-1: #857bc1;
+  --chart-2: #8a600a;
+  --chart-3: #4a8cc1;
+  --chart-4: #853f63;
+  --chart-5: #129a92;
+  --chart-6: #8e4031;
+  --chart-7: #5b975e;
+  /* Ritmo de contenido y formularios. */
+  --field-gap: 6px;
+  --heading-gap: var(--space-2);
+  --content-gap: var(--space-4);
+  --card-content-gap: var(--space-4);
+  --card-group-gap: var(--space-5);
+
+}
+
+/* == Modo oscuro (variante) — alternar data-theme en <html> ==
+   Sin sombras en las capas: se separan por superficie y borde, y solo
+   los overlays (lg/xl) conservan una sombra tenue. */
+[data-theme="dark"] {
+  --bg: #16151c;
+  --surface: #1f1e27;
+  --surface-alt: #27262f;
+  --border: #2f2d3a;
+  --border-strong: #747189;
+  --text-primary: #e7e6ef;
+  --text-secondary: #c9c7d6;
+  --text-muted: #aaa8bb;
+  --text-disabled: #7b7990;
+  --accent: #b0acdc;
+  --accent-hover: #c4c1e6;
+  --accent-active: #9d98cf;
+  --accent-soft: #2b2940;
+  --accent-soft-strong: #36334f;
+  --text-on-primary: #16151c;
+  --text-on-primary-solid: #c4c1e6;
+  --link: #c4c1e6;
+  --success-500: #6cc1ad; --success-100: #13261f; --success-text: #8bd1c0;
+  --warning-500: #d6a752; --warning-100: #29220f; --warning-text: #e4c07f;
+  --danger-500: #e08890;  --danger-100: #2c171a;  --danger-text: #eba4ab;
+  --info-500: #8daecb;    --info-100: #172129;    --info-text: #a8c3da;
+  --ring: 0 0 0 3px rgba(176,172,220,.3);
+  --ring-color: rgba(176,172,220,.3);
+  --shadow-xs: none;
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: 0 8px 20px rgba(8,8,12,.28);
+  --shadow-xl: 0 16px 32px rgba(8,8,12,.32);
+  color-scheme: dark;
+
+  --overlay: rgba(0, 0, 0, .6);
+  --tooltip-bg: #e7e6ef;
+  --tooltip-text: #1f1e28;
+  --focus-color: var(--accent);
+  --text-on-danger: #16151c;
+  --border-hover: #aaa8bb;
+  --ring-danger: 0 0 0 3px rgba(224,136,144,.25);
+
+  --selection-bg: var(--action-bg);
+  --selection-text: var(--text-on-action);
+
+  /* Series categóricas: orden estable; acompañar con etiqueta o forma. */
+  --chart-1: #877cc3;
+  --chart-2: #946a1c;
+  --chart-3: #5798ce;
+  --chart-4: #a0587c;
+  --chart-5: #2aa79e;
+  --chart-6: #aa5849;
+  --chart-7: #67a369;
+}
+
+/* == Accesibilidad del movimiento == */
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms;
+    --duration-slow: 0ms; --duration-page: 0ms; --stagger-step: 0ms;
+  }
 }
 ```
 
@@ -944,6 +1097,17 @@ Grid de 12 columnas, gutter 24px (16px móvil). Mobile-first. Navbar fija de 64p
 
 ---
 
+### Adaptación de los componentes
+
+- Reflow a 320 CSS px sin recortar contenido ni ocultar el desbordamiento del documento. Revisa también texto al 200% y zoom al 400%.
+- Acciones de formularios se apilan cuando no caben; el primario puede ocupar el ancho disponible en móvil. Las etiquetas largas pueden envolver sin quedar cortadas.
+- La navegación lateral se convierte en disclosure o drawer con estado accesible, cierre con Escape, devolución de foco y contenido cerrado fuera del orden de tabulación. Tabs largas conservan desplazamiento horizontal local.
+- Una tabla ancha usa `.table-scroll`, con nombre accesible y región enfocables si el scroll necesita teclado; prioriza columnas o una vista de detalle sin retirar datos necesarios.
+- Calendarios y grupos compactos mantienen objetivos de al menos 24×24px o espaciado equivalente; 44×44px es la preferencia de comodidad táctil, no el mínimo AA universal. El tamaño visible del icono puede ser menor que su zona activa.
+- Popovers, combobox y calendarios respetan el viewport y se reposicionan cerca de sus bordes. En producción usa top layer, portal o posicionamiento con detección de colisiones para escapar de ancestros con overflow. El framework CSS por sí solo no gestiona colisiones ni foco.
+
+---
+
 ## 15. Modo oscuro (variante)
 
 El sistema es **light-first**, pero todo producto debe soportar dark mode con los mismos tokens semánticos. La marca no cambia: cambia el escenario — de la niebla de la mañana a la penumbra de la noche, igual de ordenada.
@@ -1053,6 +1217,26 @@ Ratios calculados, no estimados (mismo test que §12).
   --shadow-lg: 0 8px 20px rgba(8,8,12,.28);
   --shadow-xl: 0 16px 32px rgba(8,8,12,.32);
   color-scheme: dark;
+
+  --overlay: rgba(0, 0, 0, .6);
+  --tooltip-bg: #e7e6ef;
+  --tooltip-text: #1f1e28;
+  --focus-color: var(--accent);
+  --text-on-danger: #16151c;
+  --border-hover: #aaa8bb;
+  --ring-danger: 0 0 0 3px rgba(224,136,144,.25);
+
+  --selection-bg: var(--action-bg);
+  --selection-text: var(--text-on-action);
+
+  /* Series categóricas: orden estable; acompañar con etiqueta o forma. */
+  --chart-1: #877cc3;
+  --chart-2: #946a1c;
+  --chart-3: #5798ce;
+  --chart-4: #a0587c;
+  --chart-5: #2aa79e;
+  --chart-6: #aa5849;
+  --chart-7: #67a369;
 }
 ```
 
@@ -1081,3 +1265,11 @@ El sistema se distribuye en varios formatos para poder usarlo desde cualquier st
 3. Los componentes consumen solo aliases semánticos (§3.4) — nunca hex.
 4. Para light/dark: alternar `data-theme` en `<html>`; los tokens hacen el resto.
 5. En el `<head>`: `<meta name="theme-color" content="#f2f1f6">` (el `--bg` claro, niebla); con el tema oscuro activo, actualizarlo a `#16151c` para que la barra del navegador acompañe al fondo.
+
+### Mantenimiento de las distribuciones
+
+Los contratos se definen en esta especificación y sus valores ejecutables en `dist/bruma-lavanda/tokens.css`. Los ajustes comunes de componentes están en `web/component-contracts.css`; la presentación compartida de las guías, en `web/styleguide.css`. Tras editar, ejecuta `node scripts/build-design-assets.mjs`: regenera el prefijo de tokens del framework, el CSS embebido de las guías y los roles semánticos de Tailwind/DTCG. Los componentes propios del framework se conservan. Luego sincroniza skills, paquete CSS y MCP. Las guías siguen siendo HTML autocontenido, excepto la carga externa de fuentes.
+
+### Series categóricas
+
+`--chart-1` a `--chart-7` mantienen su orden y cambian de paso con el tema. La prueba `mcp/test/chart-palettes.test.ts` verifica contraste ≥3:1 contra la superficie y separación entre colores adyacentes en OKLab: ≥15 en visión normal y ≥8 bajo simulaciones Machado de protanopía, deuteranopía y tritanopía. Son umbrales internos, no certificación WCAG ni garantía para todos los pares o personas; usa etiquetas, formas o patrones y tabla equivalente.