@higinio/design-mcp 0.1.1 → 0.2.1

package/assets/nocturna/framework.css

@@ -1,93 +1,64 @@
-/* ============================================================================
-   NOCTURNA ELÉCTRICA — Framework CSS v2.0
-   Sistema de diseño dark-first de Higinio Sosa.
+/* ============================================================
+   Nocturna Eléctrica — Design Tokens v2.0
+   Sistema de diseño de Higinio Sosa · dark-first
    Fuente de verdad: DESIGN-nocturna-electrica.md
-   Uso: enlazar este archivo antes de cualquier estilo propio.
-   Tema: dark por defecto; <html data-theme="light"> activa la variante clara.
-   Los componentes consumen SOLO aliases semánticos — nunca hex directos.
-   ========================================================================== */
+   Uso: importar ANTES de cualquier estilo propio.
+   Los componentes consumen SOLO aliases semánticos, nunca hex.
+   ============================================================ */
 
 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 
-/* ============================================================
-   1. TOKENS — primitivos + aliases (dark por defecto)
-   ============================================================ */
 :root {
-  /* -- Primitivos: acento -- */
+  /* == Primitivos: acento (Celeste Eléctrico) ==
+     accent-600 sobre blanco da 4.01:1 — vale como UI (≥3) pero NO como texto (<4.5).
+     Para texto sobre claro se usa accent-700 (5.95:1) y accent-800 (8.74:1). */
   --accent-100: #d9f0fb; --accent-200: #a8ddf6; --accent-300: #7dccf1;
   --accent-400: #52baed; --accent-500: #2fa3dd; --accent-600: #1f87bb; --accent-700: #186a94;
-  --accent-800: #12506f; /* solo light: texto de acción en hover */
+  --accent-800: #12506f;
 
-  /* -- Primitivos: índigo -- */
+  /* == Primitivos: índigo (Índigo Profundo) — nunca texto sobre negro == */
   --indigo-300: #7a83c4; --indigo-400: #565fa3; --indigo-500: #353d7c;
   --indigo-600: #2b3264; --indigo-700: #22284f; --indigo-800: #1a1e3b;
 
-  /* -- Primitivos: escala nocturna -- */
+  /* == Primitivos: escala nocturna == */
   --night-950: #010203; --night-900: #0b0d12; --night-800: #14171f;
   --night-700: #1e222d; --night-600: #2a2f3d; --night-500: #3d4354;
-  --night-450: #5f6575; /* texto atenuado en light */
+  --night-450: #5f6575; /* texto atenuado en light: night-400 caía a 4.27:1 sobre --surface-3 */
   --night-400: #6b7183; --night-300: #9aa0b0; --night-200: #c5c9d4;
   --night-100: #e8eaef; --night-50: #f6f7f9;
 
-  /* -- Primitivos: semánticos -- */
+  /* == Primitivos: semánticos (calibrados para dark) == */
   --success-400: #4ade80; --success-bg: #0a2617;
   --warning-400: #fbbf24; --warning-bg: #2a2005;
   --danger-400: #f87171;  --danger-bg: #2c0f0f;
   --info-400: #52baed;    --info-bg: #0d1f2c;
 
-  /* -- Aliases semánticos (los componentes consumen SOLO esto) -- */
+  /* == Aliases semánticos (los componentes consumen SOLO esto) == */
   --bg: var(--night-950);
   --surface-1: var(--night-900);
   --surface-2: var(--night-800);
   --surface-3: var(--night-700);
   --border: var(--night-500);
-  --border-strong: var(--night-600);
+  /* night-400, no night-600: en dark, oscurecer un borde lo DEBILITA (principio 2:
+     la elevación se comunica aclarando). n600 daba 1.46:1 vs los 1.97:1 del borde
+     normal — el énfasis se veía más flojo. n400 = 3.99:1 sobre surface-1. */
+  --border-strong: var(--night-400);
   --text-primary: var(--night-100);
   --text-secondary: var(--night-200);
   --text-muted: var(--night-300);
   --text-disabled: var(--night-400);
   --text-heading: var(--night-50);
-  --text-on-accent: var(--night-950);
-  --success: var(--success-400);
-  --warning: var(--warning-400);
-  --danger: var(--danger-400);
-  --info: var(--info-400);
+  --text-on-accent: var(--night-950); /* texto de CTA oscuro, nunca blanco */
+  --success: var(--success-400); --warning: var(--warning-400);
+  --danger: var(--danger-400); --info: var(--info-400);
+  --link: var(--accent-400);
+  --link-hover: var(--accent-200);
   --accent-ghost-hover: rgba(82,186,237,.08);
   --accent-ghost-active: rgba(82,186,237,.14);
   --accent-selected: rgba(82,186,237,.12);
   --overlay: rgba(1,2,3,.7);
 
-  /* -- Aliases de componentes (derivados; cambian con el tema) -- */
-  --link: var(--accent-400);
-  --link-hover: var(--accent-200);
-  --focus-color: var(--accent-400);
-  --border-hover: var(--night-400);
-  --outline-hover-bg: var(--surface-2);
-  --outline-active-bg: var(--surface-3);
-  --text-on-danger: var(--night-950);
-  --data-color: var(--accent-400);         /* cifras/datos clave */
-  --elevated-border: var(--night-600);     /* borde de toasts, modales, menús */
-  --card-border: var(--night-600);
-  --code-color: var(--accent-300);
-  --code-border: var(--night-700);
-  --table-header-bg: var(--night-900);
-  --row-border: var(--night-800);
-  --row-hover: var(--night-700);
-  --navbar-bg: rgba(1,2,3,.8);
-  --nav-active: var(--accent-400);
-  --sidebar-bg: var(--night-900);
-  --sidebar-active-bg: var(--indigo-800);
-  --sidebar-active-text: var(--night-50);
-  --sidebar-active-icon: var(--accent-400);
-  --switch-off: var(--night-600);
-  --tooltip-bg: var(--night-700);
-  --tooltip-border: var(--night-600);
-  --tooltip-text: var(--night-100);
-  --skeleton-base: var(--night-800);
-  --skeleton-sheen: var(--night-700);
-  --empty-icon: var(--indigo-400);
-
-  /* -- Tipografía -- */
+  /* == Tipografía == */
   --font-display: "Space Grotesk", system-ui, sans-serif;
   --font-body: "Manrope", system-ui, sans-serif;
   --font-mono: "JetBrains Mono", monospace;
@@ -99,7 +70,7 @@
   --tracking-display: -0.02em; --tracking-overline: 0.08em;
   --measure: 65ch;
 
-  /* -- Espaciado -- */
+  /* == Espaciado (escala base 4px) == */
   --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
   --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
   --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
@@ -108,68 +79,148 @@
   --button-padding: 12px 20px; --touch-target: 44px;
   --grid-gutter: 24px; --grid-gutter-mobile: 16px;
 
-  /* -- Radios y bordes -- */
+  /* == Radios y bordes == */
   --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
   --radius-xl: 24px; --radius-full: 9999px;
   --border-default: 1px solid var(--night-500);
-  --border-emphasis: 1px solid var(--night-600);
-  --focus-ring: 2px solid var(--accent-400);
+  --border-emphasis: 1px solid var(--night-400); /* ver --border-strong */
+  --focus-ring: 2px solid var(--focus-color);
   --focus-ring-offset: 2px;
 
-  /* -- Elevación -- */
+  /* == Elevación (superficie + sombra + borde) == */
   --shadow-1: 0 1px 2px rgba(0,0,0,.4);
   --shadow-2: 0 4px 12px rgba(0,0,0,.5);
   --shadow-3: 0 12px 32px rgba(0,0,0,.6);
-  --glow-accent: 0 0 0 1px rgba(82,186,237,.35), 0 4px 20px rgba(82,186,237,.18);
+  --glow-accent: 0 0 0 1px rgba(82,186,237,.35), 0 4px 20px rgba(82,186,237,.18); /* máx. uno por pantalla */
   --ring: 0 0 0 3px rgba(82,186,237,.2);
   --ring-danger: 0 0 0 3px rgba(248,113,113,.2);
 
-  /* -- Motion -- */
+  /* == Motion == */
   --duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 220ms;
   --duration-slow: 250ms; --duration-page: 350ms;
   --ease-out: cubic-bezier(0.2, 0, 0, 1);
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* moverse de A a B en pantalla */
   --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
+  --stagger-step: 30ms;
 
   color-scheme: dark;
-}
 
-/* ============================================================
-   2. VARIANTE LIGHT — <html data-theme="light">
-   El CTA primario NO cambia (fondo #52baed, texto #010203).
-   ============================================================ */
+  --focus-color: var(--accent-400);
+  --border-hover: var(--night-400);
+  --outline-hover-bg: var(--surface-2);
+  --outline-active-bg: var(--surface-3);
+  --text-on-danger: var(--night-950);
+  --data-color: var(--accent-400);
+  --elevated-border: var(--night-600);
+  --card-border: var(--night-600);
+  --code-color: var(--accent-300);
+  --code-border: var(--night-700);
+  --table-header-bg: var(--night-900);
+  --row-border: var(--night-800);
+  --row-hover: var(--night-700);
+  --navbar-bg: rgba(1,2,3,.8);
+  --nav-active: var(--accent-400);
+  --sidebar-bg: var(--night-900);
+  --sidebar-active-bg: var(--indigo-800);
+  --sidebar-active-text: var(--night-50);
+  --sidebar-active-icon: var(--accent-400);
+  --switch-off: var(--night-600);
+  --tooltip-bg: var(--night-700);
+  --tooltip-border: var(--night-600);
+  --tooltip-text: var(--night-100);
+  --skeleton-base: var(--night-800);
+  --skeleton-sheen: var(--night-700);
+  --empty-icon: var(--indigo-400);
+
+  --action-bg: var(--accent);
+  --action-hover: var(--accent-hover);
+  --action-active: var(--accent-active);
+  --text-on-action: var(--text-on-accent);
+  --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;
+  --control-height-md: 44px;
+  --button-padding-md: 12px 20px;
+  --surface: var(--surface-1);
+  --surface-alt: var(--surface-2);
+  --accent: var(--accent-400);
+  --accent-hover: var(--accent-300);
+  --accent-active: var(--accent-500);
+  --text-display-fluid: clamp(2.5rem, 1.5rem + 3.4vw, 5rem);
+  --text-on-primary-solid: var(--link);
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --leading-base: 1.6;
+  --leading-lg: 1.55;
+  --gutter: 24px;
+  --gutter-mobile: 16px;
+
+  /* Series categóricas: orden estable; acompañar con etiqueta o forma. */
+  --chart-1: #52baed;
+  --chart-2: #a0587c;
+  --chart-3: #2aa79e;
+  --chart-4: #aa5849;
+  --chart-5: #67a369;
+  --chart-6: #946a1c;
+  --chart-7: #877cc3;
+  /* 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-6);
+
+}
+
+/* == Modo claro (variante) — alternar data-theme en <html> == */
 [data-theme="light"] {
   --bg: #f5f8fb;
   --surface-1: #ffffff;
   --surface-2: #ffffff;
   --surface-3: #eaf1f7;
   --border: #d8dfe8;
-  --border-strong: #b9c3d1;
+  /* border-strong NO se redefine en claro: night-400 (:root) cumple 1.4.11 en
+     AMBOS temas (3.26-3.99:1 en dark, 4.27-4.87:1 en light). #b9c3d1 daba
+     1.53-1.78:1, bajo el mínimo de 3:1 para UI. */
   --text-primary: #14171f;
   --text-secondary: #3d4354;
-  --text-muted: #5f6575; /* night-400 caía a 4.27:1 sobre --surface-3 */
+  --text-muted: var(--night-450); /* no night-400: ese caía a 4.27:1 sobre --surface-3 */
   --text-disabled: #9aa0b0;
-  --text-heading: #0b0d12;
-  --text-on-accent: #010203; /* el CTA no cambia */
-  /* Los semánticos son texto sobre su propio --*-bg tintado: se calibran contra ese fondo. */
-  --success: #166534; --success-bg: #e3f5ea;
-  --warning: #854d0e; --warning-bg: #fbf3dd;
-  --danger: #b02c2c;  --danger-bg: #fbe7e7;
-  --info: #186a94;    --info-bg: #e3f2fb;
+  --text-heading: #14171f;
+  --link: #186a94; /* accent-700 · 5.95:1 sobre blanco — accent-600 solo daba 4.01:1 */
+  --link-hover: #12506f; /* accent-800 · en light el hover OSCURECE (en dark aclara) */
+  --text-on-accent: #010203; /* CTA no cambia entre modos */
+  /* Semánticos de light: son a la vez relleno y TEXTO sobre su propio --*-bg tintado,
+     así que se calibran contra ese fondo, no contra blanco. */
+  --success: #166534;
+  --warning: #854d0e;
+  --danger: #b02c2c;
+  --info: #186a94;
+  --success-bg: #e3f5ea; --warning-bg: #fbf3dd;
+  --danger-bg: #fbe7e7;  --info-bg: #e3f2fb;
   --accent-ghost-hover: rgba(31,135,187,.08);
   --accent-ghost-active: rgba(31,135,187,.14);
   --accent-selected: rgba(82,186,237,.12);
   --overlay: rgba(20,23,31,.45);
+  --ring: 0 0 0 3px rgba(31,135,187,.25);
+  --shadow-1: 0 1px 3px rgba(53,61,124,.08);
+  --shadow-2: 0 4px 10px rgba(53,61,124,.10);
+  --shadow-3: 0 12px 28px rgba(53,61,124,.14);
+  --glow-accent: 0 0 0 1px rgba(82,186,237,.4), 0 4px 16px rgba(82,186,237,.25);
+  color-scheme: light;
 
-  --link: #186a94;       /* accent-700 · 5.95:1 — accent-600 solo daba 4.01:1 */
-  --link-hover: #12506f; /* accent-800 · en light el hover oscurece */
-  --focus-color: #1f87bb; /* accent-600 se queda: es UI (4.01 ≥ 3), no texto */
-  --border-hover: #b9c3d1;
+  --focus-color: #186a94;
+  --border-hover: #5f6575;
   --outline-hover-bg: #eaf1f7;
   --outline-active-bg: #d8dfe8;
   --text-on-danger: #ffffff;
-  --data-color: #186a94; /* pinta cifras y .progress__value: es TEXTO, necesita 4.5 */
+  --data-color: #186a94;
   --elevated-border: #d8dfe8;
   --card-border: #d8dfe8;
   --code-color: #186a94;
@@ -183,38 +234,36 @@
   --sidebar-active-bg: #e3f2fb;
   --sidebar-active-text: #14171f;
   --sidebar-active-icon: #1f87bb;
-  --switch-off: #b9c3d1;
+  --switch-off: var(--control-border);
   --tooltip-bg: #14171f;
   --tooltip-border: #14171f;
   --tooltip-text: #f6f7f9;
   --skeleton-base: #eaf1f7;
   --skeleton-sheen: #f5f8fb;
-
-  --ring: 0 0 0 3px rgba(31,135,187,.25);
   --ring-danger: 0 0 0 3px rgba(192,53,53,.2);
-  --shadow-1: 0 1px 3px rgba(53,61,124,.08);
-  --shadow-2: 0 4px 10px rgba(53,61,124,.10);
-  --shadow-3: 0 12px 28px rgba(53,61,124,.14);
-  --glow-accent: 0 0 0 1px rgba(82,186,237,.4), 0 4px 16px rgba(82,186,237,.25);
 
-  color-scheme: light;
+  --selection-bg: var(--action-bg);
+  --selection-text: var(--text-on-action);
+
+  /* Series categóricas: orden estable; acompañar con etiqueta o forma. */
+  --chart-1: #186a94;
+  --chart-2: #853f63;
+  --chart-3: #129a92;
+  --chart-4: #8e4031;
+  --chart-5: #5b975e;
+  --chart-6: #8a600a;
+  --chart-7: #857bc1;
 }
 
-/* ============================================================
-   3. ACCESIBILIDAD DEL MOVIMIENTO
-   ============================================================ */
+/* == Accesibilidad del movimiento == */
+
 @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;
   }
 }
 
-/* ============================================================
-   4. BASE
-   ============================================================ */
 *, *::before, *::after { box-sizing: border-box; }
 
 body {
@@ -245,7 +294,7 @@ p { max-width: var(--measure); margin: 0 0 var(--space-4); }
 a { color: var(--link); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
 a:hover { color: var(--link-hover); }
 
-::placeholder { color: var(--text-disabled); }
+::placeholder { color: var(--placeholder); }
 ::selection { background: rgba(82,186,237,.3); }
 
 :focus-visible {
@@ -299,12 +348,12 @@ a:hover { color: var(--link-hover); }
 /* Gating de hover (§11.5): los hover que mueven/elevan (transform, box-shadow, glow)
    van dentro de @media (hover: hover) and (pointer: fine) — en touch el tap dispara
    hovers falsos que se quedan pegados. Los hover de solo color/fondo quedan fuera. */
-.btn--primary { background: var(--accent-400); color: var(--text-on-accent); }
-.btn--primary:hover:not(:disabled) { background: var(--accent-500); }
+.btn--primary { background: var(--action-bg); color: var(--text-on-action); }
+.btn--primary:hover:not(:disabled) { background: var(--action-hover); }
 @media (hover: hover) and (pointer: fine) {
   .btn--primary:hover:not(:disabled) { box-shadow: var(--glow-accent); }
 }
-.btn--primary:active:not(:disabled) { background: var(--accent-600); box-shadow: none; }
+.btn--primary:active:not(:disabled) { background: var(--action-active); box-shadow: none; }
 .btn--primary:disabled { background: var(--surface-3); color: var(--text-disabled); }
 
 /* Secundario — índigo (idéntico en ambos temas) */
@@ -390,7 +439,7 @@ a:hover { color: var(--link-hover); }
 
 .input, .textarea, .select {
   width: 100%; background: var(--surface-2);
-  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  border: 1px solid var(--control-border); border-radius: var(--radius-sm);
   color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base);
   transition: border-color var(--duration-fast) var(--ease-out),
               box-shadow var(--duration-fast) var(--ease-out);
@@ -416,7 +465,7 @@ a:hover { color: var(--link-hover); }
 .input-wrap .input { padding-left: 40px; }
 
 .textarea { min-height: 96px; padding: 12px 14px; resize: vertical; line-height: var(--leading-body); }
-.field__count { font-size: var(--text-xs); color: var(--text-disabled); text-align: right; margin-top: 4px; }
+.field__count { font-size: var(--text-xs); color: var(--text-muted); text-align: right; margin-top: 4px; }
 
 /* Select nativo estilizado (el menú custom usa .menu) */
 .select-wrap { position: relative; }
@@ -466,7 +515,7 @@ a:hover { color: var(--link-hover); }
 }
 .segmented--sm label { padding: 0 12px; font-size: var(--text-xs); }
 .segmented input:checked + label {
-  background: var(--surface-3); color: var(--accent-300);
+  background: var(--surface-3); color: var(--link);
   font-weight: 600; box-shadow: var(--shadow-1);
 }
 .segmented input:focus-visible + label { outline: var(--focus-ring); outline-offset: 2px; }
@@ -496,8 +545,8 @@ a:hover { color: var(--link-hover); }
 }
 .slider:active::-moz-range-thumb { transform: scale(1.15); }
 @media (prefers-reduced-motion: reduce) {
-  .slider::-webkit-slider-thumb { transition-duration: 0.01ms !important; }
-  .slider::-moz-range-thumb { transition-duration: 0.01ms !important; }
+  .slider::-webkit-slider-thumb { transition: none; }
+  .slider::-moz-range-thumb { transition: none; }
 }
 
 /* ============================================================
@@ -657,6 +706,32 @@ a:hover { color: var(--link-hover); }
 .stat__delta--down { color: var(--danger); }
 .stat__delta--neutral { color: var(--text-muted); }
 
+/* Chip de métrica: rótulo y valor en una pastilla de una línea */
+.metric-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.metric-chip {
+  display: inline-flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-1) var(--space-3);
+  border: 1px solid var(--border); border-radius: var(--radius-full);
+  background: var(--surface-1);
+  font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-snug);
+  color: var(--text-secondary); white-space: nowrap;
+}
+.metric-chip svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
+.metric-chip__value {
+  font-family: var(--font-mono); font-weight: 500; color: var(--link);
+  font-variant-numeric: tabular-nums;
+}
+button.metric-chip {
+  min-height: var(--control-height-md); padding-inline: var(--space-4);
+  cursor: pointer; text-align: left;
+  transition: background-color var(--duration-fast) var(--ease-out),
+              border-color var(--duration-fast) var(--ease-out),
+              transform var(--duration-instant) var(--ease-out);
+}
+button.metric-chip:hover { background: var(--outline-hover-bg); border-color: var(--border-hover); }
+button.metric-chip:active { background: var(--outline-active-bg); transform: scale(.98); }
+button.metric-chip:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
+
 /* ============================================================
    13B. PAGINATION — .pagination (activa: fondo acento + peso, no solo color)
    ============================================================ */
@@ -739,7 +814,7 @@ a:hover { color: var(--link-hover); }
 }
 .alert > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
 .alert__title { font-weight: 600; margin: 0 0 2px; color: inherit; }
-.alert__body { margin: 0; color: inherit; opacity: .88; }
+.alert__body { margin: 0; color: inherit; }
 .alert__close {
   margin-left: auto; flex: none; display: grid; place-items: center;
   width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm);
@@ -901,6 +976,70 @@ a:hover { color: var(--link-hover); }
 .sidebar__item svg { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
 .sidebar__item.is-active svg { color: var(--sidebar-active-icon); }
 
+/* Grupos con rótulo dentro del sidebar */
+.sidebar__group { display: flex; flex-direction: column; gap: 2px; }
+.sidebar__group + .sidebar__group { margin-top: var(--space-4); }
+.sidebar__group-label {
+  padding: 0 12px var(--space-1);
+  font-size: var(--text-xs); font-weight: 500; text-transform: uppercase;
+  letter-spacing: var(--tracking-overline); color: var(--text-muted); white-space: nowrap;
+}
+.sidebar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Sidebar contraíble: expandido 260 px, riel de iconos de 64 px.
+   El ancho cambia sin transición; solo los rótulos se funden con opacity y transform. */
+.sidebar--collapsible .sidebar__label {
+  transition: opacity var(--duration-fast) var(--ease-out),
+              transform var(--duration-fast) var(--ease-out);
+}
+.sidebar__toggle {
+  margin-top: auto; width: 100%; border: 0; background: transparent;
+  font-family: var(--font-body); text-align: left; cursor: pointer;
+}
+.sidebar.is-collapsed { width: 64px; }
+.sidebar.is-collapsed .sidebar__item { position: relative; justify-content: center; padding-inline: 0; }
+.sidebar.is-collapsed .sidebar__toggle svg { transform: rotate(180deg); }
+.sidebar.is-collapsed .sidebar__group + .sidebar__group { margin-top: var(--space-2); }
+/* En el riel, el rótulo de grupo es un separador de 1 px; su texto sigue en el árbol de accesibilidad */
+.sidebar.is-collapsed .sidebar__group-label {
+  height: 1px; padding: 0; margin: 0 var(--space-2) var(--space-2);
+  overflow: hidden; color: transparent; background: var(--border);
+}
+/* Oculto a la vista pero accesible (patrón de .visually-hidden) */
+.sidebar.is-collapsed .sidebar__label,
+.sidebar.is-collapsed .sidebar__group:first-child > .sidebar__group-label {
+  position: absolute; width: 1px; height: 1px; margin: -1px;
+  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
+}
+.sidebar.is-collapsed .sidebar__label {
+  background: var(--tooltip-bg); border: 1px solid var(--tooltip-border); border-radius: var(--radius-sm);
+  color: var(--tooltip-text); font-size: var(--text-xs); line-height: 16px;
+  pointer-events: none; z-index: 70;
+  opacity: 0; transform: translateX(-4px);
+}
+/* Tooltip del riel: el propio rótulo aparece a la derecha del ítem, también con teclado */
+.sidebar.is-collapsed .sidebar__item:focus-visible .sidebar__label {
+  left: calc(100% + 8px); top: calc(50% - 15px); width: auto; height: auto;
+  margin: 0; padding: 6px 10px; clip-path: none; overflow: visible;
+  opacity: 1; transform: none; transition-delay: 400ms;
+}
+/* Por hover solo con puntero real — en touch quedaría pegado tras el tap */
+@media (hover: hover) and (pointer: fine) {
+  .sidebar.is-collapsed .sidebar__item:hover .sidebar__label {
+    left: calc(100% + 8px); top: calc(50% - 15px); width: auto; height: auto;
+    margin: 0; padding: 6px 10px; clip-path: none; overflow: visible;
+    opacity: 1; transform: none; transition-delay: 400ms;
+  }
+}
+/* Por debajo de 768 px la navegación vive en un Drawer --left, que abre el botón ☰
+   .sidebar-trigger (combinado con .icon-btn); desde 768 px el sidebar es fijo y el botón sobra */
+@media (max-width: 767px) {
+  .sidebar--collapsible { display: none; }
+}
+@media (min-width: 768px) {
+  .sidebar-trigger { display: none; }
+}
+
 .tabs { position: relative; display: flex; gap: var(--space-2); border-bottom: 1px solid var(--border-strong); }
 .tabs__btn {
   padding: 10px 14px; border: 0; background: transparent; cursor: pointer;
@@ -982,7 +1121,7 @@ a:hover { color: var(--link-hover); }
   font-weight: 600; color: var(--data-color); font-variant-numeric: tabular-nums;
 }
 @media (prefers-reduced-motion: reduce) {
-  .progress-ring__bar { transition-duration: 0.01ms !important; }
+  .progress-ring__bar { transition: none; }
 }
 
 /* ============================================================
@@ -1149,13 +1288,13 @@ a:hover { color: var(--link-hover); }
   transition: opacity var(--duration-base) var(--ease-out),
               transform var(--duration-base) var(--ease-out),
               visibility 0s linear var(--duration-base);
-}
+ display: none; }
 .popover.is-open .popover__panel {
   opacity: 1; transform: none; visibility: visible;
   transition: opacity var(--duration-base) var(--ease-out),
               transform var(--duration-base) var(--ease-out),
               visibility 0s;
-}
+ display: block; }
 /* Alineado a la derecha del disparador */
 .popover--right .popover__panel { left: auto; right: 0; transform-origin: top right; }
 
@@ -1208,7 +1347,7 @@ a:hover { color: var(--link-hover); }
 .calendar__day--today { border-color: var(--accent-400); color: var(--accent-300); }
 /* Seleccionado: fondo de acento + texto oscuro + peso — no depende solo del color */
 .calendar__day--selected { background: var(--accent-400); border-color: var(--accent-400); color: var(--text-on-accent); font-weight: 600; }
-.calendar__day--outside { color: var(--text-disabled); }
+.calendar__day--outside { color: var(--text-muted); }
 .calendar__day[disabled] { color: var(--text-disabled); opacity: .5; cursor: not-allowed; }
 
 /* ============================================================
@@ -1227,7 +1366,7 @@ a:hover { color: var(--link-hover); }
 }
 .file-upload__label > svg { width: 28px; height: 28px; color: var(--text-muted); }
 .file-upload__button { color: var(--link); font-weight: 600; }
-.file-upload__hint { font-size: var(--text-xs); color: var(--text-disabled); }
+.file-upload__hint { font-size: var(--text-xs); color: var(--text-muted); }
 @media (hover: hover) and (pointer: fine) {
   .file-upload__label:hover { border-color: var(--border-hover); background: var(--surface-2); color: var(--text-secondary); }
 }
@@ -1309,3 +1448,168 @@ a:hover { color: var(--link-hover); }
   color: var(--text-secondary); background: var(--surface-2);
   border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow-1);
 }
+
+/* CONTRATOS COMPARTIDOS GENERADOS */
+/* Contratos comunes de interacción; la identidad y los valores viven en tokens.css. */
+.grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+.grid > *, .field, .card { min-inline-size: 0; }
+.stack, .card__content, .form-stack, .text-group { display: flex; flex-direction: column; align-items: stretch; }
+.stack, .card__content { gap: var(--content-gap); }
+.stack--tight, .text-group { gap: var(--heading-gap); }
+.stack--cards { gap: var(--card-group-gap); }
+.form-stack { gap: var(--form-gap); }
+.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
+.card { display: flex; flex-direction: column; gap: var(--card-content-gap); }
+.field { gap: var(--field-gap); }
+.field__label, .field__help, .field__error, .field > :is(label, p, span, div) { margin-block: 0; }
+:where(.field + .field, .field + .btn, .field + .cluster) { margin-block-start: var(--form-gap); }
+:where(.card + .card) { margin-block-start: var(--card-group-gap); }
+.stack > *, .card__content > *, .form-stack > *, .text-group > *, .grid > .card,
+.card > :is(h1, h2, h3, h4, h5, h6, p), .text-group > :is(h1, h2, h3, h4, h5, h6, p),
+.stack > :is(h1, h2, h3, h4, h5, h6, p) { margin-block: 0; }
+.form-stack > .field { margin-block: 0; }
+.btn {
+  block-size: auto;
+  min-block-size: var(--control-height-md);
+  max-inline-size: 100%;
+  white-space: normal;
+  line-height: 1.35;
+  text-align: center;
+}
+.btn--sm { min-block-size: var(--control-height-sm, 36px); }
+.btn--lg { min-block-size: var(--control-height-lg, 52px); }
+.btn--primary, .icon-btn--primary, .calendar__day--selected, .pagination__btn.is-active {
+  background: var(--action-bg);
+  color: var(--text-on-action);
+}
+.btn--primary:hover:not(:disabled), .icon-btn--primary:hover:not(:disabled) { background: var(--action-hover); color: var(--text-on-action); }
+.btn--primary:active:not(:disabled), .icon-btn--primary:active:not(:disabled) { background: var(--action-active); color: var(--text-on-action); }
+.input, .textarea, .select, .combobox__input, .search__input, .datepicker__input {
+  max-inline-size: 100%;
+  caret-color: var(--focus-color);
+}
+.input, .select, .combobox__input, .search__input, .datepicker__input {
+  block-size: auto; min-block-size: var(--control-height-md);
+  padding-block: var(--space-2); line-height: 1.5;
+}
+:is(.input, .textarea, .select, .combobox__input, .search__input, .datepicker__input):not(.input--error, .input--success, .textarea--error, [aria-invalid="true"]) { border-color: var(--control-border); }
+.input:hover:not(:disabled):not(:focus):not(.input--error, .input--success, [aria-invalid="true"]), .textarea:hover:not(:disabled):not(:focus):not(.textarea--error, [aria-invalid="true"]),
+.select:hover:not(:disabled):not(:focus), .combobox__input:hover:not(:disabled):not(:focus),
+.search__input:hover:not(:focus), .datepicker__input:hover:not(:disabled):not(:focus) { border-color: var(--border-hover); }
+.input:focus-visible, .textarea:focus-visible, .select:focus-visible,
+.combobox__input:focus-visible, .search__input:focus-visible, .datepicker__input:focus-visible {
+  outline: 2px solid var(--focus-color);
+  outline-offset: 2px;
+}
+.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger-text, var(--danger)); }
+.input.input--error, .textarea.textarea--error,
+.input.input--error:hover:not(:disabled):not(:focus), .textarea.textarea--error:hover:not(:disabled):not(:focus),
+:is(.input, .textarea, .select, .combobox__input, .search__input, .datepicker__input)[aria-invalid="true"]:hover:not(:disabled):not(:focus) {
+  border-color: var(--danger-text, var(--danger));
+}
+.input.input--success, .input.input--success:hover:not(:disabled):not(:focus) { border-color: var(--success-text, var(--success)); }
+.pagination { max-inline-size: 100%; flex-wrap: wrap; row-gap: var(--space-2); }
+.pagination__ellipsis { color: var(--text-muted); }
+.step--current .step__marker { color: var(--link); border-color: var(--focus-color); }
+.checkbox input:focus-visible ~ .checkbox__box,
+.radio input:focus-visible ~ .radio__dot,
+.switch input:focus-visible ~ .switch__track {
+  outline: 2px solid var(--focus-color);
+  outline-offset: 2px;
+}
+input.checkbox, input.radio { border-color: var(--control-border); }
+input.checkbox:hover, input.radio:hover { border-color: var(--focus-color); }
+input.checkbox:checked, input.checkbox:indeterminate, input.radio:checked { border-color: var(--focus-color); }
+.switch__track { background: var(--control-border); }
+.tabs { max-inline-size: 100%; overflow-x: auto; }
+.tabs__tab { flex-shrink: 0; }
+.segmented { max-inline-size: 100%; block-size: auto; min-block-size: var(--control-height-md); overflow-x: auto; }
+.segmented label { padding-block: var(--space-2); }
+.stat__row, .breadcrumbs, .check-row { flex-wrap: wrap; row-gap: var(--space-2); }
+.progress-row, .slider-row { flex-wrap: wrap; gap: var(--space-2); }
+.stat__value { max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }
+.file-upload, .file-upload__label { min-inline-size: 0; max-inline-size: 100%; }
+.file-upload__button { max-inline-size: 100%; white-space: normal; text-align: center; }
+.file-upload__hint { overflow-wrap: anywhere; }
+.table-scroll { max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
+.popover__panel, .datepicker__calendar, .combobox__list {
+  max-inline-size: calc(100vw - 2rem);
+  max-block-size: min(32rem, 70dvh);
+  overflow: auto;
+}
+.file-upload__input:focus-visible + .file-upload__label { outline: 2px solid var(--focus-color); outline-offset: 2px; }
+.calendar { max-inline-size: calc(100vw - 2rem); }
+.ui-title, :is(h1, h2, h3, h4, h5, h6).ui-title, [data-mode="operate"] :is(h1, h2, h3) {
+  font-family: var(--font-ui-heading);
+  letter-spacing: 0;
+  line-height: 1.3;
+  font-weight: var(--weight-semibold);
+}
+.ui-title, :is(h1, h2, h3, h4, h5, h6).ui-title, [data-mode="operate"] h1 { font-size: var(--text-ui-title); }
+[data-mode="operate"] h2 { font-size: var(--text-xl); }
+[data-mode="operate"] h3 { font-size: var(--text-lg); }
+.display, .reading-title, :is(h1, h2, h3, h4, h5, h6):is(.display, .reading-title) {
+  font-family: var(--font-display);
+  font-size: var(--text-display-fluid);
+  line-height: 1.08;
+  letter-spacing: var(--tracking-display);
+  text-wrap: balance;
+}
+:where(.celeste-reset, .salvia-reset, .bruma-reset, .nocturna-reset, body[data-system]) {
+  scrollbar-color: var(--control-border) var(--bg);
+}
+::selection,
+.celeste-reset ::selection, .salvia-reset ::selection, .bruma-reset ::selection {
+  background: var(--selection-bg); color: var(--selection-text);
+}
+::placeholder { color: var(--placeholder); opacity: 1; }
+:where(a) { text-underline-offset: .2em; text-decoration-thickness: .08em; }
+.skip-link {
+  position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2);
+  z-index: 1000; padding: var(--space-3) var(--space-4);
+  background: var(--action-bg); color: var(--text-on-action);
+  border-radius: var(--radius-sm); transform: translateY(-180%);
+}
+.skip-link:focus { transform: none; outline: 2px solid var(--focus-color); outline-offset: 2px; }
+[data-tooltip]::before, [data-tooltip]::after { display: none; }
+[data-tooltip]:focus-visible::before, [data-tooltip]:focus-visible::after { display: block; }
+.has-tooltip .tooltip { display: none; }
+.has-tooltip:has(:focus-visible) .tooltip { display: block; opacity: 1; transform: translate(-50%, 0); }
+@media (hover: hover) and (pointer: fine) {
+  [data-tooltip]:hover::before, [data-tooltip]:hover::after { display: block; }
+  .has-tooltip:hover .tooltip { display: block; }
+}
+@media (pointer: coarse) {
+  .btn, .icon-btn, .segmented label, .pagination button,
+  .tag__close, .search__clear, .toast__close, .check-row,
+  .checkbox:not(input), .radio:not(input), .switch:not(input) {
+    min-block-size: var(--touch-target);
+    min-inline-size: var(--touch-target);
+  }
+}
+@media (max-width: 479px) {
+  .btn-group { flex-wrap: wrap; }
+  .modal { max-inline-size: calc(100vw - 2rem); }
+  .stepper { flex-direction: column; align-items: stretch; gap: var(--space-4); }
+  .step { flex-direction: row; align-items: center; gap: var(--space-3); text-align: start; min-inline-size: 0; }
+  .step__label { overflow-wrap: anywhere; }
+  .step__connector { display: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  html, html:focus-within { scroll-behavior: auto; }
+  .spinner, .skeleton, .skeleton::after,
+  .progress--indeterminate .progress__bar, .alert.is-leaving, .toast.is-leaving { animation: none; }
+  .progress--indeterminate .progress__bar { transform: none; }
+  .btn, .icon-btn, .card--interactive, .slider::-webkit-slider-thumb { transform: none; }
+  .btn:active:not(:disabled), .icon-btn:active:not(:disabled), .card--interactive:hover { transform: none; }
+  .btn, .icon-btn { transition: background-color 80ms linear, color 80ms linear; }
+  .menu, .popover__panel, .datepicker__calendar, .link::after { transition: none; }
+  .progress__bar, .progress-ring__value, .accordion__content, .accordion__body { transition: none; }
+}
+@media (forced-colors: active) {
+  input.switch, .switch__track { border: 1px solid CanvasText; background: Canvas; }
+  input.switch::after, .switch__track::after { background: CanvasText; }
+  input.switch:checked, .switch input:checked ~ .switch__track { border-color: Highlight; }
+  input.switch:checked::after, .switch input:checked ~ .switch__track::after { background: Highlight; }
+  .checkbox__box, .radio__dot { border-color: CanvasText; }
+}