@higinio/design-mcp 0.1.1 → 0.2.1

package/assets/celeste/framework.css

@@ -1,30 +1,27 @@
-/* ==========================================================================
-   CELESTE CLÁSICA — Framework CSS v2.0
+/* ============================================================
+   Celeste Clásica — Design Tokens v2.0
    Sistema de diseño de Higinio Sosa · light-first
    Fuente de verdad: DESIGN-celeste-clasica.md
-   Uso: enlazar este archivo antes de cualquier estilo propio y aplicar
-   la clase .celeste-reset al <body>. Tema: data-theme="light|dark" en <html>.
-   ========================================================================== */
+   Uso: importar ANTES de cualquier estilo propio.
+   Los componentes consumen SOLO aliases semánticos, nunca hex.
+   ============================================================ */
 
 @import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;1,9..144,600&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap");
 
-/* --------------------------------------------------------------------------
-   1. TOKENS (§13)
-   -------------------------------------------------------------------------- */
 :root {
-  /* == Primitivos: primario == */
+  /* == Primitivos: primario (Azul Acero) == */
   --primary-50: #f2f6fa; --primary-100: #dfe9f2; --primary-200: #c3d5e6;
   --primary-300: #a0c0d4; --primary-400: #87a8c7; --primary-500: #7192ba;
   --primary-600: #5d7ba3; --primary-700: #4d6588; --primary-800: #40536e;
   --primary-900: #31343e;
 
-  /* == Primitivos: neutrales == */
+  /* == Primitivos: neutrales (Gris Azulado) == */
   --neutral-0: #ffffff; --neutral-50: #f7f8fa; --neutral-100: #eef0f3;
   --neutral-200: #dcdfe5; --neutral-300: #b8bdc7; --neutral-400: #8a8f9c;
   --neutral-500: #666b78; --neutral-600: #4d5160; --neutral-700: #3d414e;
   --neutral-800: #31343e; --neutral-900: #22242b;
 
-  /* == Primitivos: semánticos (ramp de 3) == */
+  /* == Primitivos: semánticos (ramp de 3: sólido / fondo / texto AA) == */
   --success-500: #3d9970; --success-100: #e2f3ec; --success-text: #2b6e50;
   --warning-500: #c9922e; --warning-100: #faf1de; --warning-text: #8a651c;
   --danger-500: #c04d4d;  --danger-100: #f9e7e7;  --danger-text: #8f3232;
@@ -47,10 +44,7 @@
   --accent-active: var(--primary-700);
   --accent-soft: var(--primary-50);
   --accent-soft-strong: var(--primary-100);
-  --link: var(--primary-700);
-  --overlay: rgba(49, 52, 62, .5);
-  --tooltip-bg: var(--neutral-900);
-  --tooltip-text: #ffffff;
+  --link: var(--primary-700); /* AA ~6:1 — texto de links y ghost; primary-500 solo para UI */
 
   /* == Tipografía == */
   --font-display: "Fraunces", Georgia, serif;
@@ -66,7 +60,7 @@
   --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
   --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;
@@ -76,7 +70,7 @@
   --control-height-sm: 36px; --control-height-md: 44px; --control-height-lg: 52px;
   --gutter: 24px; --gutter-mobile: 16px;
 
-  /* == Radios, bordes y sombras == */
+  /* == Radios, bordes y sombras (teñidas de tinta, nunca negro puro) == */
   --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
   --radius-xl: 20px; --radius-full: 9999px;
   --border-width: 1px;
@@ -89,7 +83,6 @@
   /* == Focus == */
   --ring: 0 0 0 3px rgba(113,146,186,.25);
   --ring-color: rgba(113,146,186,.25);
-  --ring-danger: 0 0 0 3px rgba(192,77,77,.22);
 
   /* == Motion == */
   --duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 200ms;
@@ -98,11 +91,49 @@
   --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: light;
-}
 
-/* Modo oscuro (§15.6, extendido con aliases derivados) */
+  --overlay: rgba(49, 52, 62, .5);
+  --tooltip-bg: var(--neutral-900);
+  --tooltip-text: #ffffff;
+  --ring-danger: 0 0 0 3px rgba(192,77,77,.22);
+
+  --action-bg: var(--primary-700);
+  --action-hover: var(--primary-800);
+  --action-active: var(--primary-900);
+  --text-on-action: var(--text-on-primary);
+  --control-border: var(--neutral-400);
+  --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;
+  --focus-color: var(--accent);
+  --text-display-fluid: clamp(2.75rem, 1.7rem + 3vw, 4.75rem);
+  --border-hover: var(--neutral-500);
+  --text-on-danger: #ffffff;
+
+  /* Series categóricas: orden estable; acompañar con etiqueta o forma. */
+  --chart-1: #4a8cc1;
+  --chart-2: #853f63;
+  --chart-3: #129a92;
+  --chart-4: #8e4031;
+  --chart-5: #5b975e;
+  --chart-6: #8a600a;
+  --chart-7: #857bc1;
+  /* 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 oscuro (variante) — alternar data-theme en <html> == */
 [data-theme="dark"] {
   --bg: #16181e;
   --surface: #1d2028;
@@ -119,31 +150,58 @@
   --accent-soft: rgba(113,146,186,.12);
   --accent-soft-strong: rgba(113,146,186,.18);
   --text-on-primary: #16181e;
-  --text-on-primary-solid: #a0c0d4;
   --link: #a0c0d4;
-  --overlay: rgba(0, 0, 0, .6);
-  --tooltip-bg: #e6e9ee;
-  --tooltip-text: #31343e;
   --success-500: #5cbf93; --success-100: #12291f; --success-text: #7fd4ae;
   --warning-500: #e0ad4d; --warning-100: #2b2210; --warning-text: #ecc57e;
   --danger-500: #e07777;  --danger-100: #2e1515;  --danger-text: #eb9e9e;
   --info-500: #87a8c7;    --info-100: #1a2430;    --info-text: #a0c0d4;
   --ring: 0 0 0 3px rgba(160,192,212,.3);
-  --ring-danger: 0 0 0 3px rgba(224,119,119,.25);
+  --ring-color: rgba(160,192,212,.3);
   --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
   --shadow-md: 0 4px 12px rgba(0,0,0,.45);
   --shadow-lg: 0 12px 32px rgba(0,0,0,.55);
   color-scheme: dark;
+
+  --text-on-primary-solid: #a0c0d4;
+  --overlay: rgba(0, 0, 0, .6);
+  --tooltip-bg: #e6e9ee;
+  --tooltip-text: #31343e;
+  --ring-danger: 0 0 0 3px rgba(224,119,119,.25);
+
+  --selection-bg: var(--action-bg);
+  --selection-text: var(--text-on-action);
+  --action-bg: var(--accent);
+  --action-hover: var(--accent-hover);
+  --action-active: var(--accent-active);
+  --control-border: var(--text-muted);
+  --border-hover: var(--text-secondary);
+  --text-on-danger: #16181e;
+  --focus-color: var(--accent);
+
+  /* Series categóricas: orden estable; acompañar con etiqueta o forma. */
+  --chart-1: #5798ce;
+  --chart-2: #a0587c;
+  --chart-3: #2aa79e;
+  --chart-4: #aa5849;
+  --chart-5: #67a369;
+  --chart-6: #946a1c;
+  --chart-7: #877cc3;
+}
+
+/* == 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;
+  }
 }
 
-/* --------------------------------------------------------------------------
-   2. BASE (§6, §11.5, §13)
-   -------------------------------------------------------------------------- */
 *, *::before, *::after { box-sizing: border-box; }
 
 /* Focus ring global de teclado — especificidad cero vía :where() */
 :where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
-  outline: 2px solid var(--primary-500);
+  outline: 2px solid var(--focus-color);
   outline-offset: 2px;
   border-radius: 2px;
 }
@@ -180,17 +238,10 @@
 .celeste-reset h6 { font-size: var(--text-base); line-height: var(--leading-base); }
 .celeste-reset p { max-width: var(--measure); margin: 0 0 1em; }
 .celeste-reset table { font-variant-numeric: tabular-nums; }
-.celeste-reset ::placeholder { color: var(--text-disabled); }
+.celeste-reset ::placeholder { color: var(--placeholder); }
 .celeste-reset ::selection { background: rgba(113,146,186,.25); }
 
-@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;
-  }
-}
+
 
 /* --------------------------------------------------------------------------
    3. LAYOUT — contenedor, grid 12 col (§14)
@@ -238,12 +289,12 @@
 /* Gating de hover (§11.5): los hover que mueven/elevan (transform, box-shadow) 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); color: var(--text-on-primary); }
-.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
+.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(--shadow-sm); }
 }
-.btn--primary:active:not(:disabled) { background: var(--accent-active); box-shadow: none; }
+.btn--primary:active:not(:disabled) { background: var(--action-active); box-shadow: none; }
 .btn--primary:disabled { background: var(--border); color: var(--text-disabled); box-shadow: none; }
 
 .btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text-primary); }
@@ -261,7 +312,7 @@
 .btn--ghost:active:not(:disabled) { background: var(--accent-soft-strong); }
 .btn--ghost:disabled { background: var(--border); color: var(--text-disabled); }
 
-.btn--danger { background: var(--danger-500); color: #fff; }
+.btn--danger { background: var(--danger-500); color: var(--text-on-danger); }
 .btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger-500) 92%, #000); }
 .btn--danger:active:not(:disabled) { background: color-mix(in srgb, var(--danger-500) 86%, #000); }
 .btn--danger:disabled { opacity: .5; }
@@ -302,7 +353,7 @@
 .field { display: flex; flex-direction: column; gap: 6px; }
 .field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
 .field__help { font-size: var(--text-sm); color: var(--text-muted); }
-.field__error { font-size: var(--text-sm); color: var(--danger-500); display: inline-flex; align-items: center; gap: 6px; }
+.field__error { font-size: var(--text-sm); color: var(--danger-text); display: inline-flex; align-items: center; gap: 6px; }
 .field__error svg { width: 14px; height: 14px; flex: none; }
 /* Campo obligatorio (§10.4): asterisco decorativo; el input lleva required/aria-required */
 .field--required .field__label::after { content: " *"; color: var(--danger-500); }
@@ -310,14 +361,14 @@
 .input, .textarea, .select {
   width: 100%; font-family: var(--font-body); font-size: var(--text-base);
   color: var(--text-primary); background: var(--surface);
-  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-sm);
+  border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm);
   transition: border-color var(--duration-fast) var(--ease-out),
               box-shadow var(--duration-fast) var(--ease-out);
 }
 .input, .select { height: var(--control-height-md); padding: 0 14px; }
 .input:hover:not(:disabled):not(:focus),
 .textarea:hover:not(:disabled):not(:focus),
-.select:hover:not(:disabled):not(:focus) { border-color: var(--text-disabled); }
+.select:hover:not(:disabled):not(:focus) { border-color: var(--border-hover); }
 .input:focus, .textarea:focus, .select:focus {
   outline: none; border-color: var(--accent); box-shadow: var(--ring);
 }
@@ -335,7 +386,7 @@
 .input-icon .input { padding-left: 40px; }
 
 .textarea { min-height: 96px; padding: 12px 14px; resize: vertical; line-height: var(--leading-base); }
-.textarea-counter { font-size: var(--text-xs); color: var(--text-disabled); text-align: right; }
+.textarea-counter { font-size: var(--text-xs); color: var(--text-muted); text-align: right; }
 
 .select-wrap { position: relative; }
 .select { appearance: none; padding-right: 38px; cursor: pointer; }
@@ -371,7 +422,7 @@
   background: var(--surface); color: var(--text-primary);
   font-weight: var(--weight-semibold); box-shadow: var(--shadow-xs);
 }
-.segmented input:focus-visible + label { outline: 2px solid var(--primary-500); outline-offset: 2px; }
+.segmented input:focus-visible + label { outline: 2px solid var(--focus-color); outline-offset: 2px; }
 
 .slider-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
 .slider-row .slider-label { font-size: var(--text-sm); color: var(--text-secondary); }
@@ -408,7 +459,7 @@
 }
 .checkbox__box {
   width: 20px; height: 20px; flex: none; display: grid; place-items: center;
-  background: var(--surface); border: 2px solid var(--border-strong); border-radius: 4px;
+  background: var(--surface); border: 2px solid var(--control-border); border-radius: 4px;
   transition: background-color var(--duration-fast) var(--ease-out),
               border-color var(--duration-fast) var(--ease-out);
 }
@@ -418,7 +469,7 @@
   stroke-dasharray: 20; stroke-dashoffset: 20;
   transition: stroke-dashoffset var(--duration-base) var(--ease-spring);
 }
-.checkbox:hover .checkbox__box { border-color: var(--primary-400); }
+.checkbox:hover .checkbox__box { border-color: var(--focus-color); }
 .checkbox input:checked ~ .checkbox__box { background: var(--accent); border-color: var(--accent); }
 .checkbox input:checked ~ .checkbox__box svg { stroke-dashoffset: 0; }
 .checkbox input:focus-visible ~ .checkbox__box { box-shadow: var(--ring); }
@@ -435,7 +486,7 @@
 
 .radio__dot {
   width: 20px; height: 20px; flex: none; display: grid; place-items: center;
-  background: var(--surface); border: 2px solid var(--border-strong); border-radius: var(--radius-full);
+  background: var(--surface); border: 2px solid var(--control-border); border-radius: var(--radius-full);
   transition: background-color var(--duration-fast) var(--ease-out),
               border-color var(--duration-fast) var(--ease-out);
 }
@@ -444,7 +495,7 @@
   background: var(--text-on-primary); transform: scale(0);
   transition: transform var(--duration-base) var(--ease-spring);
 }
-.radio:hover .radio__dot { border-color: var(--primary-400); }
+.radio:hover .radio__dot { border-color: var(--focus-color); }
 .radio input:checked ~ .radio__dot { background: var(--accent); border-color: var(--accent); }
 .radio input:checked ~ .radio__dot::after { transform: scale(1); }
 .radio input:focus-visible ~ .radio__dot { box-shadow: var(--ring); }
@@ -634,7 +685,7 @@
 }
 .alert > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
 .alert__title { font-weight: var(--weight-semibold); margin: 0 0 2px; }
-.alert__body { opacity: .92; margin: 0; }
+.alert__body { margin: 0; }
 .alert__close {
   margin-left: auto; flex: none; display: grid; place-items: center;
   width: 24px; height: 24px; border: 0; border-radius: var(--radius-sm);
@@ -774,10 +825,14 @@
   background: var(--surface); border: var(--border-width) solid var(--border);
   border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
   opacity: 0; transform: translateY(-4px); pointer-events: none;
-  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
+  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
+
+  visibility: hidden;
+
+  display: none;
 }
 .menu--right { left: auto; right: 0; }
-.menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
+.menu.is-open { opacity: 1; transform: none; pointer-events: auto;  visibility: visible;  display: block; }
 .menu__item {
   display: flex; align-items: center; gap: 10px; width: 100%;
   padding: 9px 12px; border: 0; border-radius: var(--radius-sm);
@@ -787,7 +842,7 @@
 }
 .menu__item:hover { background: var(--bg); }
 .menu__item svg { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
-.menu__item--danger, .menu__item--danger svg { color: var(--danger-500); }
+.menu__item--danger, .menu__item--danger svg { color: var(--danger-text); }
 .menu__item--danger:hover { background: var(--danger-100); }
 .menu__sep { height: var(--border-width); background: var(--border); margin: 6px 4px; }
 
@@ -855,6 +910,32 @@
 .stat__delta--up   { color: var(--success-text); }
 .stat__delta--down { color: var(--danger-text); }
 
+/* Chip de métrica (§10.22): 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: var(--border-width) solid var(--border); border-radius: var(--radius-full);
+  background: var(--surface);
+  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5;
+  color: var(--text-secondary); white-space: nowrap;
+}
+.metric-chip svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
+.metric-chip__value {
+  font-weight: var(--weight-semibold); 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(--accent-soft); border-color: var(--accent); }
+button.metric-chip:active { background: var(--accent-soft-strong); transform: scale(.98); }
+button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }
+
 .pagination { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0; }
 .pagination__btn {
   display: inline-grid; place-items: center;
@@ -903,7 +984,7 @@
 .sidebar__item {
   display: flex; align-items: center; gap: 10px;
   padding: 10px 12px; border-radius: var(--radius-md);
-  font-size: var(--text-sm); font-weight: var(--weight-medium);
+  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium);
   color: var(--text-secondary); text-decoration: none; border: 0; background: transparent;
   cursor: pointer; text-align: left; width: 100%;
   transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
@@ -913,6 +994,68 @@
 .sidebar__item.is-active { background: var(--accent-soft-strong); color: var(--link); }
 .sidebar__item.is-active svg { color: var(--accent); }
 
+/* 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: var(--weight-semibold);
+  text-transform: uppercase; letter-spacing: var(--tracking-label);
+  color: var(--text-muted); white-space: nowrap;
+}
+.sidebar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Sidebar contraíble (§10.24): 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; }
+.sidebar.is-collapsed { width: 64px; padding-inline: var(--space-3); }
+.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 .u-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 {
+  border-radius: var(--radius-sm); background: var(--tooltip-bg); 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% - 14px); 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% - 14px); 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 (§10.29), 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 { display: flex; gap: var(--space-6); border-bottom: var(--border-width) solid var(--border); }
 .tabs__tab {
   padding: 12px 4px; margin-bottom: -1px;
@@ -960,11 +1103,11 @@
   width: 100%; height: var(--control-height-md); padding: 0 14px;
   font-family: var(--font-body); font-size: var(--text-base);
   color: var(--text-primary); background: var(--surface);
-  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-sm);
+  border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm);
   transition: border-color var(--duration-fast) var(--ease-out),
               box-shadow var(--duration-fast) var(--ease-out);
 }
-.combobox__input:hover:not(:disabled):not(:focus) { border-color: var(--text-disabled); }
+.combobox__input:hover:not(:disabled):not(:focus) { border-color: var(--border-hover); }
 .combobox__input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
 .combobox__input:disabled { background: var(--surface-alt); color: var(--text-disabled); cursor: not-allowed; }
 .combobox__list {
@@ -1002,12 +1145,12 @@
   width: 100%; height: var(--control-height-md); padding: 0 40px;
   font-family: var(--font-body); font-size: var(--text-base);
   color: var(--text-primary); background: var(--surface);
-  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-sm);
+  border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm);
   transition: border-color var(--duration-fast) var(--ease-out),
               box-shadow var(--duration-fast) var(--ease-out);
 }
 .search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
-.search__input:hover:not(:focus) { border-color: var(--text-disabled); }
+.search__input:hover:not(:focus) { border-color: var(--border-hover); }
 .search__input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
 .search__clear {
   position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
@@ -1070,8 +1213,12 @@
   transform-origin: top left; opacity: 0; transform: scale(.96); pointer-events: none;
   transition: opacity var(--duration-base) var(--ease-out),
               transform var(--duration-base) var(--ease-out);
+
+  visibility: hidden;
+
+  display: none;
 }
-.popover.is-open .popover__panel { opacity: 1; transform: none; pointer-events: auto; }
+.popover.is-open .popover__panel { opacity: 1; transform: none; pointer-events: auto;  visibility: visible;  display: block; }
 .popover--right .popover__panel { left: auto; right: 0; transform-origin: top right; }
 
 /* ButtonGroup (§10.31) */
@@ -1096,11 +1243,11 @@
   width: 100%; height: var(--control-height-md); padding: 0 40px 0 14px;
   font-family: var(--font-body); font-size: var(--text-base);
   color: var(--text-primary); background: var(--surface);
-  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-sm);
+  border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm);
   transition: border-color var(--duration-fast) var(--ease-out),
               box-shadow var(--duration-fast) var(--ease-out);
 }
-.datepicker__input:hover:not(:disabled):not(:focus) { border-color: var(--text-disabled); }
+.datepicker__input:hover:not(:disabled):not(:focus) { border-color: var(--border-hover); }
 .datepicker__input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
 .datepicker__input:disabled { background: var(--surface-alt); color: var(--text-disabled); cursor: not-allowed; }
 .datepicker__icon {
@@ -1115,8 +1262,12 @@
   transform-origin: top left; opacity: 0; transform: scale(.96); pointer-events: none;
   transition: opacity var(--duration-base) var(--ease-out),
               transform var(--duration-base) var(--ease-out);
+
+  visibility: hidden;
+
+  display: none;
 }
-.datepicker.is-open .datepicker__calendar { opacity: 1; transform: none; pointer-events: auto; }
+.datepicker.is-open .datepicker__calendar { opacity: 1; transform: none; pointer-events: auto;  visibility: visible;  display: block; }
 .datepicker--right .datepicker__calendar { left: auto; right: 0; transform-origin: top right; }
 
 .calendar { width: 15.75rem; }
@@ -1128,6 +1279,7 @@
 .calendar__weekdays,
 .calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
 .calendar__weekdays { margin-bottom: 4px; }
+.calendar__week { display: contents; }
 .calendar__weekday {
   display: flex; align-items: center; justify-content: center; height: 28px;
   font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted);
@@ -1142,7 +1294,7 @@
               color var(--duration-fast) var(--ease-out);
 }
 .calendar__day:hover:not(:disabled):not(.calendar__day--selected) { background: var(--accent-soft); }
-.calendar__day--outside { color: var(--text-disabled); }
+.calendar__day--outside { color: var(--text-muted); }
 .calendar__day--today { font-weight: var(--weight-semibold); box-shadow: inset 0 0 0 1px var(--border-strong); }
 .calendar__day--selected { background: var(--accent); color: var(--text-on-primary); font-weight: var(--weight-semibold); }
 .calendar__day:disabled { color: var(--text-disabled); cursor: not-allowed; }
@@ -1260,3 +1412,168 @@
 .u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
 .u-muted { color: var(--text-muted); }
 .u-measure { max-width: var(--measure); }
+
+/* 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; }
+}