@higinio/design-mcp 0.1.0 → 0.2.0

package/assets/nocturna/styleguide.html

@@ -26,6 +26,7 @@
   /* -- Primitivos: acento -- */
   --accent-100: #d9f0fb; --accent-200: #a8ddf6; --accent-300: #7dccf1;
   --accent-400: #52baed; --accent-500: #2fa3dd; --accent-600: #1f87bb; --accent-700: #186a94;
+  --accent-800: #12506f;
 
   /* -- Primitivos: índigo -- */
   --indigo-300: #7a83c4; --indigo-400: #565fa3; --indigo-500: #353d7c;
@@ -34,6 +35,7 @@
   /* -- 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-400: #6b7183; --night-300: #9aa0b0; --night-200: #c5c9d4;
   --night-100: #e8eaef; --night-50: #f6f7f9;
 
@@ -49,7 +51,10 @@
   --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);
@@ -120,7 +125,7 @@
   --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);
+  --border-emphasis: 1px solid var(--night-400); /* ver --border-strong */
   --focus-ring: 2px solid var(--accent-400);
   --focus-ring-offset: 2px;
 
@@ -153,30 +158,32 @@
   --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: #6b7183;
+  --text-muted: #5f6575;
   --text-disabled: #9aa0b0;
   --text-heading: #0b0d12;
   --text-on-accent: #010203; /* el CTA no cambia */
-  --success: #15803d; --success-bg: #e3f5ea;
-  --warning: #a16207; --warning-bg: #fbf3dd;
-  --danger: #c03535;  --danger-bg: #fbe7e7;
-  --info: #1f87bb;    --info-bg: #e3f2fb;
+  --success: #166534; --success-bg: #e3f5ea;
+  --warning: #854d0e; --warning-bg: #fbf3dd;
+  --danger: #b02c2c;  --danger-bg: #fbe7e7;
+  --info: #186a94;    --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);
 
-  --link: #1f87bb;
-  --link-hover: #186a94;
-  --focus-color: #1f87bb;
+  --link: #186a94;
+  --link-hover: #12506f;
+  --focus-color: #1f87bb; /* UI (4.01:1 ≥ 3), no texto */
   --border-hover: #b9c3d1;
   --outline-hover-bg: #eaf1f7;
   --outline-active-bg: #d8dfe8;
   --text-on-danger: #ffffff;
-  --data-color: #1f87bb;
+  --data-color: #186a94; /* cifras y .progress__value: es texto */
   --elevated-border: #d8dfe8;
   --card-border: #d8dfe8;
   --code-color: #186a94;
@@ -387,6 +394,8 @@ a:hover { color: var(--link-hover); }
    ============================================================ */
 .field { display: flex; flex-direction: column; margin-bottom: var(--form-gap); }
 .field__label { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
+/* Campo obligatorio: asterisco decorativo; la semántica va en required/aria-required del control */
+.field--required > .field__label::after { content: "*"; margin-left: 2px; color: var(--danger); font-weight: 600; }
 .field__help { font-size: var(--text-sm); color: var(--text-muted); margin-top: 6px; }
 .field__error {
   display: inline-flex; align-items: center; gap: 6px;
@@ -422,7 +431,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; }
@@ -530,6 +539,12 @@ a:hover { color: var(--link-hover); }
   margin-top: -2px;
 }
 .checkbox:checked::after { transform: rotate(-45deg) scale(1); }
+/* Indeterminate: guion horizontal, no el check. Solo por JS (el.indeterminate = true) */
+.checkbox:indeterminate { background: var(--accent-400); border-color: var(--accent-400); }
+.checkbox:indeterminate::after {
+  content: ""; width: 10px; height: 2px; margin-top: 0;
+  border: 0; border-radius: var(--radius-full); background: var(--text-on-accent); transform: none;
+}
 .radio::after {
   content: ""; width: 8px; height: 8px; border-radius: var(--radius-full);
   background: var(--text-on-accent); transform: scale(0);
@@ -613,6 +628,17 @@ a:hover { color: var(--link-hover); }
 .avatar__dot--away    { background: var(--warning); }
 .avatar__dot--offline { background: var(--border); }
 
+/* AvatarGroup — avatares solapados + chip +N.
+   Borde 2px del color del fondo (--surface-1 en tarjetas, --bg en el lienzo) para separar. */
+.avatar-group { display: inline-flex; align-items: center; }
+.avatar-group .avatar { border: 2px solid var(--surface-1); }
+.avatar-group .avatar:not(:first-child) { margin-left: -8px; }
+.avatar-group__more {
+  background: var(--surface-3); color: var(--text-secondary);
+  font-family: var(--font-body); font-weight: 600;
+  letter-spacing: 0; text-transform: none;
+}
+
 /* ============================================================
    12B. DIVIDER — .divider (hairline), .divider--label, .divider--vertical
    ============================================================ */
@@ -648,6 +674,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(--touch-target); 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)
    ============================================================ */
@@ -730,7 +782,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);
@@ -820,9 +872,39 @@ a:hover { color: var(--link-hover); }
 }
 .table tbody tr { transition: background-color var(--duration-fast) var(--ease-out); }
 .table tbody tr:hover { background: var(--row-hover); }
-.table tbody tr.is-selected { background: var(--accent-selected); box-shadow: inset 2px 0 0 var(--accent-400); }
 .table .num, .table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
 
+/* Zebra — filas pares en surface-2; hover y selección mandan sobre la banda */
+.table--zebra tbody tr:nth-child(even) { background: var(--surface-2); }
+.table--zebra tbody tr:hover { background: var(--row-hover); }
+
+/* Sticky header — dentro de un contenedor con overflow: auto y altura acotada */
+.table--sticky thead th { position: sticky; top: 0; z-index: 1; }
+
+/* Header ordenable — botón dentro del th + icono; el estado vive en aria-sort del th */
+.th-sort {
+  display: inline-flex; align-items: center; gap: 6px;
+  margin: 0; padding: 0; border: 0; background: transparent;
+  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
+  cursor: pointer;
+}
+.th-sort:hover { color: var(--text-secondary); }
+.th-sort:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
+.sort-icon {
+  width: 14px; height: 14px; flex: none; opacity: .45;
+  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
+}
+.table th[aria-sort="ascending"] .sort-icon,
+.table th[aria-sort="descending"] .sort-icon { opacity: 1; color: var(--accent-400); }
+.table th[aria-sort="descending"] .sort-icon { transform: rotate(180deg); }
+
+/* Columna de selección (checkbox en th y en cada fila) */
+.table .col-select { width: 44px; text-align: center; padding-left: var(--space-2); padding-right: var(--space-2); }
+
+/* Fila seleccionada — .row--selected (contrato); .is-selected se mantiene como alias */
+.table tbody tr.is-selected,
+.table tbody tr.row--selected { background: var(--accent-selected); box-shadow: inset 2px 0 0 var(--accent-400); }
+
 /* ============================================================
    19. NAVEGACIÓN — .navbar, .sidebar, .tabs, .breadcrumbs
    ============================================================ */
@@ -862,6 +944,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;
@@ -1007,6 +1153,273 @@ a:hover { color: var(--link-hover); }
   clip-path: inset(50%); overflow: hidden; white-space: nowrap;
 }
 
+/* ============================================================
+   25. COMBOBOX / AUTOCOMPLETE — .combobox + SEARCH — .search
+   El listado vive sobre --surface-2 (superficie de dropdowns).
+   ============================================================ */
+.combobox { position: relative; }
+.combobox__input { width: 100%; } /* consume .input para el resto de estilos */
+.combobox__list {
+  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
+  margin: 0; padding: 6px; list-style: none; max-height: 264px; overflow: auto;
+  background: var(--surface-2); border: 1px solid var(--elevated-border);
+  border-radius: var(--radius-md); box-shadow: var(--shadow-3);
+}
+.combobox__list[hidden] { display: none; }
+.combobox__option {
+  display: flex; align-items: center; gap: 10px; width: 100%;
+  padding: 10px 12px; border-radius: var(--radius-sm);
+  color: var(--text-primary); font-size: var(--text-sm); cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+.combobox__option[hidden] { display: none; }
+/* .is-active = resaltado por teclado; [aria-selected] = la elegida (fondo + icono, no solo color) */
+.combobox__option.is-active { background: var(--surface-3); }
+.combobox__option[aria-selected="true"] { background: var(--accent-selected); color: var(--accent-300); }
+[data-theme="light"] .combobox__option[aria-selected="true"] { color: var(--link); }
+.combobox__check { display: none; margin-left: auto; width: 16px; height: 16px; color: var(--accent-400); flex: none; }
+.combobox__option[aria-selected="true"] .combobox__check { display: block; }
+
+/* Search — wrapper con lupa (aria-hidden) + botón limpiar (×, aria-label="Limpiar") */
+.search { position: relative; display: flex; align-items: center; }
+.search__icon {
+  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
+  width: 18px; height: 18px; color: var(--text-disabled); pointer-events: none;
+}
+.search__input { width: 100%; padding-left: 40px; padding-right: 40px; } /* consume .input */
+/* Oculta el clear nativo de WebKit para no duplicar el affordance del .search__clear */
+.search__input::-webkit-search-cancel-button,
+.search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
+.search__clear {
+  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
+  display: inline-grid; place-content: center; width: 28px; height: 28px; padding: 0;
+  border: 0; border-radius: var(--radius-full); background: transparent;
+  color: var(--text-muted); cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
+}
+.search__clear:hover { background: var(--surface-3); color: var(--text-primary); }
+.search__clear svg { width: 16px; height: 16px; }
+.search__clear[hidden] { display: none; }
+
+/* ============================================================
+   26. DRAWER / SHEET — .drawer + __overlay + __panel (focus-trap por JS)
+   Motion: transform translate + fade del overlay (--duration-slow).
+   El overlay reutiliza --overlay del modal; SIN blur nuevo.
+   ============================================================ */
+.drawer { position: fixed; inset: 0; z-index: 100; }
+.drawer[hidden] { display: none; }
+.drawer__overlay {
+  position: absolute; inset: 0; background: var(--overlay);
+  opacity: 0; transition: opacity var(--duration-slow) var(--ease-out);
+}
+.drawer.is-open .drawer__overlay { opacity: 1; }
+.drawer__panel {
+  position: absolute; top: 0; right: 0; bottom: 0;
+  display: flex; flex-direction: column;
+  width: min(400px, 100%); padding: var(--card-padding);
+  background: var(--surface-2); border-left: 1px solid var(--elevated-border);
+  box-shadow: var(--shadow-3);
+  overflow-y: auto; overscroll-behavior: contain;
+  transform: translateX(100%);
+  transition: transform var(--duration-slow) var(--ease-out);
+}
+.drawer.is-open .drawer__panel { transform: none; }
+/* Variante izquierda */
+.drawer--left .drawer__panel {
+  right: auto; left: 0; border-left: 0; border-right: 1px solid var(--elevated-border);
+  transform: translateX(-100%);
+}
+.drawer--left.is-open .drawer__panel { transform: none; }
+/* Variante inferior (sheet) */
+.drawer--bottom .drawer__panel {
+  top: auto; left: 0; right: 0; width: 100%; max-height: 80dvh;
+  border-left: 0; border-top: 1px solid var(--elevated-border);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  transform: translateY(100%);
+}
+.drawer--bottom.is-open .drawer__panel { transform: none; }
+.drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
+.drawer__title { font-family: var(--font-body); font-size: var(--text-xl); font-weight: 600; letter-spacing: normal; color: var(--text-heading); margin: 0; }
+.drawer__body { flex: 1; }
+.drawer__footer { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }
+
+/* ============================================================
+   27. POPOVER — .popover + __trigger + __panel (abre por CLICK)
+   Motion: fade + scale(0.96→1) desde el transform-origin del trigger.
+   Panel sobre --surface-2. Se distingue del Tooltip: click, no hover.
+   ============================================================ */
+.popover { position: relative; display: inline-flex; }
+.popover__panel {
+  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
+  min-width: 240px; max-width: 320px; padding: var(--space-4);
+  background: var(--surface-2); border: 1px solid var(--elevated-border);
+  border-radius: var(--radius-md); box-shadow: var(--shadow-3);
+  transform-origin: top left; /* origin-aware: crece desde el disparador */
+  opacity: 0; transform: scale(.96); visibility: hidden;
+  transition: opacity var(--duration-base) var(--ease-out),
+              transform var(--duration-base) var(--ease-out),
+              visibility 0s linear var(--duration-base);
+}
+.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;
+}
+/* Alineado a la derecha del disparador */
+.popover--right .popover__panel { left: auto; right: 0; transform-origin: top right; }
+
+/* ============================================================
+   28. BUTTON GROUP — .btn-group (bordes compartidos, radios en extremos)
+   ============================================================ */
+.btn-group { display: inline-flex; }
+.btn-group > .btn { border-radius: 0; }
+.btn-group > .btn:not(:first-child) { margin-left: -1px; }
+.btn-group > .btn:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
+.btn-group > .btn:last-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
+/* El botón enfocado/hover sube de z-index para que su borde no lo tape el vecino */
+.btn-group > .btn:hover, .btn-group > .btn:focus-visible, .btn-group > .btn.is-active { z-index: 1; }
+
+/* ============================================================
+   29. DATEPICKER — .datepicker + calendario en popover
+   El panel reutiliza el look de .popover__panel sobre --surface-2.
+   Grid role="grid"; días como <button role="gridcell">.
+   ============================================================ */
+.datepicker { position: relative; }
+.datepicker__input { cursor: pointer; } /* consume .input; el icono va con .input-wrap */
+.datepicker__calendar {
+  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
+  padding: var(--space-4);
+  background: var(--surface-2); border: 1px solid var(--elevated-border);
+  border-radius: var(--radius-md); box-shadow: var(--shadow-3);
+}
+.datepicker__calendar[hidden] { display: none; }
+
+.calendar { width: 252px; }
+.calendar__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
+.calendar__title { font-size: var(--text-sm); font-weight: 600; color: var(--text-heading); } /* mes en minúscula (es) */
+.calendar__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--space-1); }
+.calendar__weekdays span {
+  display: grid; place-items: center; height: 28px;
+  font-size: var(--text-xs); font-weight: 500; color: var(--text-muted);
+}
+.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
+.calendar__week { display: contents; } /* fila semántica (role="row") sin romper el grid */
+.calendar__day {
+  display: grid; place-items: center; width: 100%; height: 36px; padding: 0;
+  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent;
+  color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums; cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-out),
+              color var(--duration-fast) var(--ease-out);
+}
+.calendar__day:hover:not([disabled]):not(.calendar__day--selected) { background: var(--surface-3); }
+/* Hoy: aro de acento por borde (no glow) + texto de acento */
+.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-muted); }
+.calendar__day[disabled] { color: var(--text-disabled); opacity: .5; cursor: not-allowed; }
+
+/* ============================================================
+   30. FILE UPLOAD — .file-upload (dropzone) + __list
+   El input file real va oculto accesiblemente (.visually-hidden).
+   ============================================================ */
+.file-upload { display: block; }
+.file-upload__label {
+  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
+  padding: var(--space-8) var(--space-6); text-align: center;
+  background: var(--surface-1); border: 1px dashed var(--border-strong);
+  border-radius: var(--radius-lg); color: var(--text-muted); cursor: pointer;
+  transition: border-color var(--duration-fast) var(--ease-out),
+              background-color var(--duration-fast) var(--ease-out),
+              color var(--duration-fast) var(--ease-out);
+}
+.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-muted); }
+@media (hover: hover) and (pointer: fine) {
+  .file-upload__label:hover { border-color: var(--border-hover); background: var(--surface-2); color: var(--text-secondary); }
+}
+/* El ring se pinta sobre el label porque el input está oculto */
+.file-upload__input:focus-visible + .file-upload__label { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
+/* Arrastrando encima: acento (icono + borde, no solo color) */
+.file-upload.is-dragover .file-upload__label { border-color: var(--accent-400); background: var(--accent-ghost-hover); color: var(--text-secondary); }
+
+.file-upload__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
+.file-upload__item {
+  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
+  padding: var(--space-3); background: var(--surface-2);
+  border: 1px solid var(--border); border-radius: var(--radius-md);
+}
+.file-upload__item > svg { width: 20px; height: 20px; color: var(--text-muted); flex: none; }
+.file-upload__item > div { min-width: 0; } /* permite truncar el nombre */
+.file-upload__item .progress { margin-top: var(--space-2); }
+.file-upload__name { display: block; font-size: var(--text-sm); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.file-upload__size { display: block; font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+/* Error: borde + icono + texto en danger, nunca solo por color */
+.file-upload__item--error { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--danger-bg); }
+.file-upload__item--error > svg { color: var(--danger); }
+.file-upload__item--error .file-upload__size { color: var(--danger); }
+.file-upload__remove {
+  display: inline-grid; place-content: center; width: 28px; height: 28px; padding: 0; flex: none;
+  border: 0; border-radius: var(--radius-full); background: transparent;
+  color: var(--text-muted); cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
+}
+.file-upload__remove:hover { background: var(--surface-3); color: var(--text-primary); }
+.file-upload__remove svg { width: 16px; height: 16px; }
+
+/* ============================================================
+   31. STEPPER / WIZARD — .stepper (<ol>) + .step
+   Completo → check (no solo color); actual → acento.
+   ============================================================ */
+.stepper { display: flex; list-style: none; margin: 0; padding: 0; }
+.step {
+  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
+  gap: var(--space-2); text-align: center; min-width: 0;
+}
+.step__marker {
+  position: relative; z-index: 1;
+  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
+  border-radius: var(--radius-full); border: 2px solid var(--border);
+  background: var(--surface-1); color: var(--text-muted);
+  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums;
+}
+.step__marker svg { width: 16px; height: 16px; }
+.step__label { font-size: var(--text-sm); color: var(--text-muted); }
+.step__connector {
+  position: absolute; top: 15px; left: 50%; z-index: 0;
+  width: 100%; height: 2px; background: var(--border);
+}
+/* Completo */
+.step--complete .step__marker { background: var(--accent-400); border-color: var(--accent-400); color: var(--text-on-accent); }
+.step--complete .step__label { color: var(--text-secondary); }
+.step--complete .step__connector { background: var(--accent-400); }
+/* Actual */
+.step--current .step__marker { border-color: var(--accent-400); color: var(--accent-300); }
+.step--current .step__label { color: var(--text-primary); font-weight: 600; }
+/* Próximo = valores por defecto (atenuado) */
+
+/* Variante vertical */
+.stepper--vertical { flex-direction: column; }
+.stepper--vertical .step { flex-direction: row; align-items: flex-start; gap: var(--space-3); text-align: left; padding-bottom: var(--space-6); }
+.stepper--vertical .step:last-child { padding-bottom: 0; }
+.stepper--vertical .step__label { padding-top: var(--space-1); }
+.stepper--vertical .step__connector { top: 34px; left: 15px; width: 2px; height: calc(100% - 34px); }
+
+/* ============================================================
+   32. KBD — .kbd (tecla / atajo de teclado)
+   Combos: varias .kbd con un "+" literal entre ellas.
+   ============================================================ */
+.kbd {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 20px; height: 20px; padding: 0 6px;
+  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; line-height: 1;
+  color: var(--text-secondary); background: var(--surface-2);
+  border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow-1);
+}
+
 
 /* ============================================================
    ESTILOS DE LA PÁGINA DE DOCS (.ds-*)
@@ -1071,10 +1484,23 @@ html { scroll-behavior: smooth; }
 .ds-demo--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
 .ds-demo:has(table) { overflow-x: auto; }
 
+/* Demo del sidebar contraíble: rejilla auto 1fr, el contenido sigue al riel sin animar el ancho */
+.ds-app-demo { display: grid; grid-template-columns: auto 1fr; align-items: stretch; gap: 0; min-height: 400px; padding: 0; }
+.ds-app-demo > .sidebar { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
+.ds-app-demo__main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; padding: var(--space-6); }
+@media (max-width: 767px) {
+  .ds-app-demo { grid-template-columns: 1fr; min-height: 0; }
+}
+
 .ds-code { margin-top: var(--space-3); border: 1px solid var(--row-border); border-radius: var(--radius-md); overflow: hidden; }
+/* «Copiar» es hermano del details, no hijo del summary (un control no puede
+   anidarse en otro), y se superpone al extremo derecho de la cabecera. */
+.ds-code-wrap { position: relative; margin-top: var(--space-3); }
+.ds-code-wrap > .ds-code { margin-top: 0; }
+.ds-code-wrap > .ds-copy { position: absolute; top: 11px; right: 17px; }
 .ds-code summary {
   display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
-  padding: 10px 16px; cursor: pointer; user-select: none;
+  min-height: 45px; padding: 10px 96px 10px 16px; cursor: pointer; user-select: none;
   font-size: var(--text-sm); color: var(--text-muted); list-style: none;
 }
 .ds-code summary::-webkit-details-marker { display: none; }
@@ -1220,6 +1646,14 @@ html { scroll-behavior: smooth; }
     <a href="#comp-navegacion">Navegación</a>
     <a href="#comp-skeleton">Skeleton y EmptyState</a>
     <a href="#comp-card">Card, Link y Code</a>
+    <a href="#comp-combobox">Combobox y Search</a>
+    <a href="#comp-drawer">Drawer</a>
+    <a href="#comp-popover">Popover</a>
+    <a href="#comp-buttongroup">ButtonGroup</a>
+    <a href="#comp-datepicker">DatePicker</a>
+    <a href="#comp-fileupload">FileUpload</a>
+    <a href="#comp-stepper">Stepper</a>
+    <a href="#comp-kbd">Kbd</a>
     </div>
     <div class="overline ds-group">Recursos</div>
     <a href="#motion">Motion</a>
@@ -1284,7 +1718,7 @@ html { scroll-behavior: smooth; }
     <div class="ds-swatches" id="swIndigo"></div>
     <div class="ds-callout ds-callout--warning">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.7 18-8-14a2 2 0 0 0-3.5 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3z"/><path d="M12 9v4m0 4h.01"/></svg>
-      <div>El índigo <span class="code">#353d7c</span> sobre negro da un contraste de ≈ 1.9:1 — <strong>nunca es texto sobre fondos nocturnos</strong>, solo fondos de sección, sidebars y estados seleccionados.</div>
+      <div>El índigo <span class="code">#353d7c</span> sobre negro da un contraste de 2.09:1 — <strong>nunca es texto sobre fondos nocturnos</strong>, solo fondos de sección, sidebars y estados seleccionados.</div>
     </div>
 
     <h3 style="margin-top:32px;">Neutrales — Escala Nocturna</h3>
@@ -1348,11 +1782,11 @@ html { scroll-behavior: smooth; }
       <div class="ds-elev-demo" style="background:var(--bg);border:1px dashed var(--border);">Nivel 0<br>night-950</div>
       <div class="ds-elev-demo" style="background:var(--surface-1);box-shadow:var(--shadow-1);border:1px solid var(--row-border);">Nivel 1<br>night-900 + shadow-1</div>
       <div class="ds-elev-demo" style="background:var(--surface-2);box-shadow:var(--shadow-2);border:1px solid var(--row-border);">Nivel 2<br>night-800 + shadow-2</div>
-      <div class="ds-elev-demo" style="background:var(--surface-2);box-shadow:var(--shadow-3);border:1px solid var(--border-strong);">Nivel 3<br>night-800 + borde night-600 + shadow-3</div>
+      <div class="ds-elev-demo" style="background:var(--surface-2);box-shadow:var(--shadow-3);border:1px solid var(--border-strong);">Nivel 3<br>night-800 + borde night-400 + shadow-3</div>
     </div>
     <h3 style="margin-top:32px;">Glow de acento</h3>
     <div class="ds-demo">
-      <div class="ds-elev-demo" style="background:var(--surface-1);box-shadow:var(--glow-accent);max-width:280px;">glow-accent<br><span style="color:var(--text-disabled)">máximo uno por pantalla</span></div>
+      <div class="ds-elev-demo" style="background:var(--surface-1);box-shadow:var(--glow-accent);max-width:280px;">glow-accent<br><span style="color:var(--text-muted)">máximo uno por pantalla</span></div>
     </div>
   </section>
 
@@ -1386,13 +1820,13 @@ html { scroll-behavior: smooth; }
   <section id="componentes">
     <span class="overline">Biblioteca</span>
     <h2>Componentes</h2>
-    <p class="ds-lead">Los 26 componentes del sistema, renderizados en vivo con las clases del framework <span class="code">nocturna-electrica.css</span>. Cada bloque incluye su código de uso.</p>
+    <p class="ds-lead">Los 35 componentes del sistema, renderizados en vivo con las clases del framework <span class="code">nocturna-electrica.css</span>. Cada bloque incluye su código de uso.</p>
   </section>
 
   <!-- ================= BOTONES ================= -->
   <section id="comp-botones">
     <h2>Botones</h2>
-    <p>Alturas 36 / 44 / 52px. El primario lleva <strong>texto oscuro</strong> (contraste ≈ 8.5:1) — nunca blanco. Un solo primario por pantalla.</p>
+    <p>Alturas 36 / 44 / 52px. El primario lleva <strong>texto oscuro</strong> (contraste 9.50:1) — nunca blanco. Un solo primario por pantalla.</p>
     <div class="ds-demo">
       <button class="btn btn--primary">Guardar cambios</button>
       <button class="btn btn--secondary">Ver informe</button>
@@ -1406,16 +1840,16 @@ html { scroll-behavior: smooth; }
       <button class="btn btn--primary">Mediano</button>
       <button class="btn btn--primary btn--lg">Grande</button>
       <button class="btn btn--outline"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-7-7v14"/></svg>Con icono</button>
-      <button class="btn btn--primary" style="min-width:160px;"><span class="spinner" style="color:currentColor;"></span></button>
+      <button class="btn btn--primary" style="min-width:160px;" aria-label="Cargando"><span class="spinner" style="color:currentColor;"></span></button>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;button class="btn btn--primary"&gt;Guardar cambios&lt;/button&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;button class="btn btn--primary"&gt;Guardar cambios&lt;/button&gt;
 &lt;button class="btn btn--secondary"&gt;Ver informe&lt;/button&gt;
 &lt;button class="btn btn--outline"&gt;Exportar&lt;/button&gt;
 &lt;button class="btn btn--ghost"&gt;Cancelar&lt;/button&gt;
 &lt;button class="btn btn--danger"&gt;Eliminar cuenta&lt;/button&gt;
 
 &lt;!-- Tamaños: .btn--sm (36px) · default (44px) · .btn--lg (52px) --&gt;
-&lt;!-- Loading: fijar min-width y sustituir el texto por .spinner --&gt;</code></pre></details>
+&lt;!-- Loading: fijar min-width y sustituir el texto por .spinner --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= ICON BUTTON ================= -->
@@ -1429,10 +1863,10 @@ html { scroll-behavior: smooth; }
       <button class="icon-btn icon-btn--outline icon-btn--sm" aria-label="Copiar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="14" height="14" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button>
       <button class="icon-btn icon-btn--outline" disabled aria-label="Deshabilitado"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;button class="icon-btn icon-btn--outline" aria-label="Buscar"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;button class="icon-btn icon-btn--outline" aria-label="Buscar"&gt;
   &lt;svg&gt;…&lt;/svg&gt;
 &lt;/button&gt;
-&lt;!-- Variantes: --outline · --ghost · --accent | Tamaños: --sm (36) · default (44) · --lg (52) --&gt;</code></pre></details>
+&lt;!-- Variantes: --outline · --ghost · --accent | Tamaños: --sm (36) · default (44) · --lg (52) --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= SPINNER ================= -->
@@ -1444,8 +1878,8 @@ html { scroll-behavior: smooth; }
       <span class="spinner" style="width:24px;height:24px;"></span>
       <span class="spinner" style="width:32px;height:32px;color:var(--text-muted);"></span>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;span class="spinner"&gt;&lt;/span&gt;
-&lt;!-- Hereda currentColor; default accent-400 --&gt;</code></pre></details>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;span class="spinner"&gt;&lt;/span&gt;
+&lt;!-- Hereda currentColor; default accent-400 --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= INPUT ================= -->
@@ -1474,14 +1908,25 @@ html { scroll-behavior: smooth; }
         <label class="field__label" for="i4">Deshabilitado</label>
         <input class="input" id="i4" type="text" value="Solo lectura" disabled>
       </div>
+      <div class="field field--required">
+        <label class="field__label" for="i5">Nombre completo</label>
+        <input class="input" id="i5" type="text" placeholder="Tu nombre" required aria-required="true">
+        <span class="field__help">El asterisco es decorativo; lo obligatorio lo marca <span class="code">required</span>.</span>
+      </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="field"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="field"&gt;
   &lt;label class="field__label" for="email"&gt;Correo&lt;/label&gt;
   &lt;input class="input" id="email" type="email" placeholder="tu@correo.com"&gt;
   &lt;span class="field__help"&gt;Texto de ayuda.&lt;/span&gt;
 &lt;/div&gt;
+&lt;!-- Obligatorio: .field--required en el .field pinta el asterisco (decorativo); --&gt;
+&lt;!-- el control lleva required + aria-required="true" --&gt;
+&lt;div class="field field--required"&gt;
+  &lt;label class="field__label" for="name"&gt;Nombre&lt;/label&gt;
+  &lt;input class="input" id="name" type="text" required aria-required="true"&gt;
+&lt;/div&gt;
 &lt;!-- Estados: .input--error (+ .field__error) · .input--success · disabled --&gt;
-&lt;!-- Icono leading: envolver en .input-wrap con un svg antes del input --&gt;</code></pre></details>
+&lt;!-- Icono leading: envolver en .input-wrap con un svg antes del input --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= TEXTAREA ================= -->
@@ -1495,11 +1940,11 @@ html { scroll-behavior: smooth; }
         <span class="field__count">0 / 280</span>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="field"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="field"&gt;
   &lt;label class="field__label" for="desc"&gt;Descripción&lt;/label&gt;
   &lt;textarea class="textarea" id="desc" placeholder="Describe el proyecto…"&gt;&lt;/textarea&gt;
   &lt;span class="field__count"&gt;0 / 280&lt;/span&gt;
-&lt;/div&gt;</code></pre></details>
+&lt;/div&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= SELECT ================= -->
@@ -1517,9 +1962,9 @@ html { scroll-behavior: smooth; }
         </div>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="select-wrap"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="select-wrap"&gt;
   &lt;select class="select"&gt;&lt;option&gt;Opción&lt;/option&gt;&lt;/select&gt;
-&lt;/div&gt;</code></pre></details>
+&lt;/div&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= SEGMENTEDCONTROL ================= -->
@@ -1538,11 +1983,11 @@ html { scroll-behavior: smooth; }
         <input type="radio" name="seg-per" id="seg-12m"><label for="seg-12m">12 m</label>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="segmented" role="radiogroup" aria-label="Vista"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="segmented" role="radiogroup" aria-label="Vista"&gt;
   &lt;input type="radio" name="vista" id="lista" checked&gt;&lt;label for="lista"&gt;Lista&lt;/label&gt;
   &lt;input type="radio" name="vista" id="tablero"&gt;&lt;label for="tablero"&gt;Tablero&lt;/label&gt;
 &lt;/div&gt;
-&lt;!-- Compacto: añadir segmented--sm --&gt;</code></pre></details>
+&lt;!-- Compacto: añadir segmented--sm --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= SLIDER ================= -->
@@ -1559,12 +2004,12 @@ html { scroll-behavior: smooth; }
       </div>
       <input class="slider js-slider" type="range" min="0" max="100" value="70" disabled aria-label="Slider deshabilitado">
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="slider-row"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="slider-row"&gt;
   &lt;span class="slider-label"&gt;Límite de gasto&lt;/span&gt;
   &lt;span class="slider-value"&gt;$ 350&lt;/span&gt;
 &lt;/div&gt;
 &lt;input class="slider" type="range" min="0" max="1000" value="350"&gt;
-&lt;!-- JS: --slider-fill = ((v-min)/(max-min))*100 + '%' --&gt;</code></pre></details>
+&lt;!-- JS: --slider-fill = ((v-min)/(max-min))*100 + '%' --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= CHECKBOX Y RADIO ================= -->
@@ -1573,11 +2018,14 @@ html { scroll-behavior: smooth; }
     <div class="ds-demo" style="gap:32px;">
       <label class="check-row"><input type="checkbox" class="checkbox" checked> Notificarme por correo</label>
       <label class="check-row"><input type="checkbox" class="checkbox"> Recordar sesión</label>
+      <label class="check-row"><input type="checkbox" class="checkbox" id="cbIndeterminate"> Seleccionar todo <span class="text-muted">(indeterminate)</span></label>
       <label class="check-row"><input type="radio" name="r1" class="radio" checked> Mensual</label>
       <label class="check-row"><input type="radio" name="r1" class="radio"> Anual</label>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;label class="check-row"&gt;&lt;input type="checkbox" class="checkbox"&gt; Etiqueta&lt;/label&gt;
-&lt;label class="check-row"&gt;&lt;input type="radio" name="g" class="radio"&gt; Opción&lt;/label&gt;</code></pre></details>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;label class="check-row"&gt;&lt;input type="checkbox" class="checkbox"&gt; Etiqueta&lt;/label&gt;
+&lt;label class="check-row"&gt;&lt;input type="radio" name="g" class="radio"&gt; Opción&lt;/label&gt;
+&lt;!-- Indeterminate = tercer estado (guion horizontal). Solo por JS: --&gt;
+&lt;!-- document.querySelector('.checkbox').indeterminate = true; --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= SWITCH ================= -->
@@ -1586,7 +2034,7 @@ html { scroll-behavior: smooth; }
     <div class="ds-demo" style="gap:32px;">
       <label class="check-row"><input type="checkbox" class="switch" checked> Modo compacto</label>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;label class="check-row"&gt;&lt;input type="checkbox" class="switch"&gt; Activar&lt;/label&gt;</code></pre></details>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;label class="check-row"&gt;&lt;input type="checkbox" class="switch"&gt; Activar&lt;/label&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= BADGES ================= -->
@@ -1600,8 +2048,8 @@ html { scroll-behavior: smooth; }
       <span class="tag">diseño <button class="tag__x" aria-label="Quitar etiqueta diseño">×</button></span>
       <span class="tag">frontend <button class="tag__x" aria-label="Quitar etiqueta frontend">×</button></span>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;span class="badge badge--success"&gt;Activo&lt;/span&gt;
-&lt;span class="tag"&gt;diseño &lt;button class="tag__x" aria-label="Quitar"&gt;×&lt;/button&gt;&lt;/span&gt;</code></pre></details>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;span class="badge badge--success"&gt;Activo&lt;/span&gt;
+&lt;span class="tag"&gt;diseño &lt;button class="tag__x" aria-label="Quitar"&gt;×&lt;/button&gt;&lt;/span&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= AVATAR ================= -->
@@ -1615,9 +2063,28 @@ html { scroll-behavior: smooth; }
       <span class="avatar avatar--lg">hs<span class="avatar__dot avatar__dot--busy"></span></span>
       <span class="avatar avatar--xl">hs<span class="avatar__dot avatar__dot--away"></span></span>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;span class="avatar"&gt;HS&lt;span class="avatar__dot avatar__dot--online"&gt;&lt;/span&gt;&lt;/span&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;span class="avatar"&gt;HS&lt;span class="avatar__dot avatar__dot--online"&gt;&lt;/span&gt;&lt;/span&gt;
 &lt;!-- Tamaños: --xs 24 · --sm 32 · default 40 · --lg 48 · --xl 64 --&gt;
-&lt;!-- Con imagen: &lt;span class="avatar"&gt;&lt;img src="…" alt="Nombre"&gt;&lt;/span&gt; --&gt;</code></pre></details>
+&lt;!-- Con imagen: &lt;span class="avatar"&gt;&lt;img src="…" alt="Nombre"&gt;&lt;/span&gt; --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
+
+    <h3 style="margin-top:var(--space-8);">AvatarGroup</h3>
+    <p>Avatares solapados 8px con borde <span class="code">2px</span> del color del fondo; el chip <span class="code">.avatar-group__more</span> resume los ocultos.</p>
+    <div class="ds-demo">
+      <div class="avatar-group" role="group" aria-label="Equipo del proyecto: 4 personas y 3 más">
+        <span class="avatar">hs</span>
+        <span class="avatar">ml</span>
+        <span class="avatar">ar</span>
+        <span class="avatar">jt</span>
+        <span class="avatar avatar-group__more">+3</span>
+      </div>
+    </div>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="avatar-group" role="group" aria-label="Equipo del proyecto"&gt;
+  &lt;span class="avatar"&gt;HS&lt;/span&gt;
+  &lt;span class="avatar"&gt;ML&lt;/span&gt;
+  &lt;span class="avatar"&gt;AR&lt;/span&gt;
+  &lt;span class="avatar avatar-group__more"&gt;+3&lt;/span&gt;
+&lt;/div&gt;
+&lt;!-- Solapamiento -8px + borde del color del fondo (--surface-1 / --bg). --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= DIVIDER ================= -->
@@ -1631,9 +2098,9 @@ html { scroll-behavior: smooth; }
         <span>Filtros</span><span class="divider--vertical" role="separator"></span><span>Ordenar</span><span class="divider--vertical" role="separator"></span><span>Exportar</span>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;hr class="divider"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;hr class="divider"&gt;
 &lt;div class="divider--label" role="separator"&gt;o continúa con&lt;/div&gt;
-&lt;span class="divider--vertical" role="separator"&gt;&lt;/span&gt;</code></pre></details>
+&lt;span class="divider--vertical" role="separator"&gt;&lt;/span&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= ACCORDION ================= -->
@@ -1651,11 +2118,11 @@ html { scroll-behavior: smooth; }
         </div>
         <div class="accordion__item">
           <button class="accordion__header" aria-expanded="false">¿Por qué el CTA lleva texto oscuro?<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
-          <div class="accordion__panel"><div class="accordion__inner"><div class="accordion__content">Negro nocturno sobre celeste eléctrico da ≈ 8.5:1 de contraste; blanco sobre celeste no pasa AA.</div></div></div>
+          <div class="accordion__panel"><div class="accordion__inner"><div class="accordion__content">Negro nocturno sobre celeste eléctrico da 9.50:1 de contraste; blanco sobre celeste no pasa AA.</div></div></div>
         </div>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="accordion"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="accordion"&gt;
   &lt;div class="accordion__item"&gt;
     &lt;button class="accordion__header" aria-expanded="false"&gt;
       Pregunta &lt;svg&gt;chevron&lt;/svg&gt;
@@ -1665,7 +2132,7 @@ html { scroll-behavior: smooth; }
     &lt;/div&gt;&lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;
-&lt;!-- JS: alternar aria-expanded en el header --&gt;</code></pre></details>
+&lt;!-- JS: alternar aria-expanded en el header --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= TOOLTIP ================= -->
@@ -1682,10 +2149,10 @@ html { scroll-behavior: smooth; }
         <span class="tooltip" role="tooltip">Ajustes</span>
       </span>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;span class="has-tooltip"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;span class="has-tooltip"&gt;
   &lt;button class="btn btn--outline"&gt;Pasa el cursor&lt;/button&gt;
   &lt;span class="tooltip" role="tooltip"&gt;Exportar como CSV&lt;/span&gt;
-&lt;/span&gt;</code></pre></details>
+&lt;/span&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= ALERT ================= -->
@@ -1726,7 +2193,7 @@ html { scroll-behavior: smooth; }
         <button class="alert__close js-alert-close" aria-label="Cerrar aviso"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="alert alert--warning" role="status"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="alert alert--warning" role="status"&gt;
   &lt;svg&gt;…icono…&lt;/svg&gt;
   &lt;div&gt;
     &lt;p class="alert__title"&gt;Tu plan expira en 5 días&lt;/p&gt;
@@ -1734,7 +2201,7 @@ html { scroll-behavior: smooth; }
   &lt;/div&gt;
   &lt;button class="alert__close" aria-label="Cerrar aviso"&gt;…x…&lt;/button&gt;
 &lt;/div&gt;
-&lt;!-- Variantes: --info · --success · --warning · --danger --&gt;</code></pre></details>
+&lt;!-- Variantes: --info · --success · --warning · --danger --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= TOAST ================= -->
@@ -1747,7 +2214,7 @@ html { scroll-behavior: smooth; }
       <button class="btn btn--outline" data-toast="warning">Toast de aviso</button>
       <button class="btn btn--outline" data-toast="danger">Toast de error</button>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="toast-stack" role="status" aria-live="polite"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="toast-stack" role="status" aria-live="polite"&gt;
   &lt;div class="toast toast--success"&gt;
     &lt;svg&gt;…&lt;/svg&gt;
     &lt;div&gt;
@@ -1755,7 +2222,7 @@ html { scroll-behavior: smooth; }
       &lt;div class="toast__body"&gt;El proyecto se actualizó correctamente.&lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
-&lt;/div&gt;</code></pre></details>
+&lt;/div&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= PROGRESS ================= -->
@@ -1765,14 +2232,14 @@ html { scroll-behavior: smooth; }
     <div class="ds-demo ds-demo--col" style="gap:24px;">
       <div>
         <div class="progress__head"><span class="progress__label">Subiendo archivos…</span><span class="progress__value" id="pgVal">64 %</span></div>
-        <div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"><div class="progress__bar" id="pgBar" style="width:64%;"></div></div>
+        <div class="progress" role="progressbar" aria-label="Subiendo archivos" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"><div class="progress__bar" id="pgBar" style="width:64%;"></div></div>
       </div>
       <div>
         <div class="progress__head"><span class="progress__label">Indeterminado</span></div>
-        <div class="progress progress--indeterminate" role="progressbar"><div class="progress__bar"></div></div>
+        <div class="progress progress--indeterminate" role="progressbar" aria-label="Indeterminado"><div class="progress__bar"></div></div>
       </div>
       <div style="display:flex;align-items:center;gap:24px;">
-        <div class="progress-ring" id="pgRing" data-value="64" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">
+        <div class="progress-ring" id="pgRing" data-value="64" role="progressbar" aria-label="Progreso circular" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">
           <svg width="56" height="56" viewBox="0 0 56 56" aria-hidden="true"><circle class="progress-ring__track" cx="28" cy="28" r="24" stroke-width="5"/><circle class="progress-ring__bar" id="pgRingBar" cx="28" cy="28" r="24" stroke-width="5"/></svg>
           <span class="progress-ring__value" id="pgRingVal">64%</span>
         </div>
@@ -1780,7 +2247,7 @@ html { scroll-behavior: smooth; }
       </div>
       <button class="btn btn--outline btn--sm" id="pgRandom" style="align-self:flex-start;">Cambiar progreso</button>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="progress__head"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="progress__head"&gt;
   &lt;span class="progress__label"&gt;Subiendo…&lt;/span&gt;
   &lt;span class="progress__value"&gt;64 %&lt;/span&gt;
 &lt;/div&gt;
@@ -1796,30 +2263,36 @@ html { scroll-behavior: smooth; }
   &lt;/svg&gt;
   &lt;span class="progress-ring__value"&gt;64%&lt;/span&gt;
 &lt;/div&gt;
-&lt;!-- JS: stroke-dasharray = 2πr; stroke-dashoffset = c * (1 - value/100) --&gt;</code></pre></details>
+&lt;!-- JS: stroke-dasharray = 2πr; stroke-dashoffset = c * (1 - value/100) --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= MODAL ================= -->
   <section id="comp-modal">
     <h2>Modal</h2>
-    <p>Overlay con blur 4px; se cierra con Esc o clic fuera (excepto flujos destructivos).</p>
+    <p>Overlay con blur 4px; se cierra con Esc o clic fuera (excepto flujos destructivos con <span class="code">data-modal-persistent</span>). Al abrir, el foco entra al panel y queda atrapado (Tab/Shift+Tab ciclan dentro); al cerrar, el foco vuelve al botón que lo abrió.</p>
     <div class="ds-demo">
       <button class="btn btn--primary" id="openModal">Abrir modal</button>
       <button class="btn btn--outline" id="openModalLg">Abrir formulario</button>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="modal-overlay"&gt;
-  &lt;div class="modal" role="dialog" aria-modal="true" aria-labelledby="mTitle"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="modal-overlay"&gt;
+  &lt;!-- aria-modal, aria-labelledby (título) y aria-describedby (descripción, si la hay);
+       tabindex="-1" permite mover el foco al panel al abrir --&gt;
+  &lt;div class="modal" role="dialog" aria-modal="true"
+       aria-labelledby="mTitle" aria-describedby="mDesc" tabindex="-1"&gt;
     &lt;div class="modal__header"&gt;
       &lt;h4 class="modal__title" id="mTitle"&gt;Título&lt;/h4&gt;
-      &lt;button class="icon-btn icon-btn--ghost" aria-label="Cerrar"&gt;×&lt;/button&gt;
+      &lt;button class="icon-btn icon-btn--ghost" data-close-modal aria-label="Cerrar"&gt;×&lt;/button&gt;
     &lt;/div&gt;
-    &lt;p&gt;Contenido…&lt;/p&gt;
+    &lt;p id="mDesc"&gt;Contenido…&lt;/p&gt;
     &lt;div class="modal__footer"&gt;
-      &lt;button class="btn btn--outline"&gt;Cancelar&lt;/button&gt;
-      &lt;button class="btn btn--primary"&gt;Confirmar&lt;/button&gt;
+      &lt;button class="btn btn--outline" data-close-modal&gt;Cancelar&lt;/button&gt;
+      &lt;button class="btn btn--primary" data-close-modal&gt;Confirmar&lt;/button&gt;
     &lt;/div&gt;
   &lt;/div&gt;
-&lt;/div&gt;</code></pre></details>
+&lt;/div&gt;
+&lt;!-- JS: al abrir guarda document.activeElement y enfoca el panel; Tab cicla dentro
+     (focus-trap); Esc / clic en overlay / data-close-modal cierran y devuelven el foco.
+     Destructivo: añade data-modal-persistent al .modal-overlay. --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= MENU ================= -->
@@ -1836,32 +2309,82 @@ html { scroll-behavior: smooth; }
         </div>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="menu"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="menu"&gt;
   &lt;button class="menu__item"&gt;Duplicar&lt;/button&gt;
   &lt;button class="menu__item is-selected"&gt;Seleccionado&lt;/button&gt;
-&lt;/div&gt;</code></pre></details>
+&lt;/div&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= TABLA ================= -->
   <section id="comp-tabla">
     <h2>Tabla</h2>
-    <div class="ds-demo ds-demo--col" style="padding:0;overflow-x:auto;">
-      <table class="table">
-        <thead><tr><th>Proyecto</th><th>Estado</th><th class="num">Ingresos</th><th class="num">Cambio</th></tr></thead>
+    <p>Zebra (<span class="code">.table--zebra</span>) + encabezado fijo (<span class="code">.table--sticky</span>, haz scroll dentro del recuadro) + columna ordenable (clic en «Proyecto» o «Ingresos») + columna de selección. La fila marcada usa <span class="code">.row--selected</span>; el checkbox maestro está en estado indeterminate.</p>
+    <div class="ds-demo ds-demo--col" style="padding:0;max-height:264px;overflow:auto;">
+      <table class="table table--zebra table--sticky" id="demoSortTable">
+        <thead>
+          <tr>
+            <th scope="col" class="col-select"><input type="checkbox" class="checkbox" id="tblSelectAll" aria-label="Seleccionar todas las filas"></th>
+            <th scope="col" aria-sort="ascending"><button class="th-sort" type="button">Proyecto <svg class="sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18 15-6-6-6 6"/></svg></button></th>
+            <th scope="col">Estado</th>
+            <th scope="col" class="num" aria-sort="none"><button class="th-sort" type="button">Ingresos <svg class="sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18 15-6-6-6 6"/></svg></button></th>
+            <th scope="col" class="num">Cambio</th>
+          </tr>
+        </thead>
         <tbody>
-          <tr><td style="color:var(--text-primary);">Panel analítico</td><td><span class="badge badge--success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>Activo</span></td><td class="num">$48 210</td><td class="num" style="color:var(--success);">+8,2 %</td></tr>
-          <tr class="is-selected"><td style="color:var(--text-primary);">API de pagos</td><td><span class="badge badge--info"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg>Beta</span></td><td class="num">$31 990</td><td class="num" style="color:var(--success);">+2,4 %</td></tr>
-          <tr><td style="color:var(--text-primary);">App móvil</td><td><span class="badge badge--warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.7 18-8-14a2 2 0 0 0-3.5 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3z"/><path d="M12 9v4m0 4h.01"/></svg>Pendiente</span></td><td class="num">$12 040</td><td class="num" style="color:var(--danger);">−1,1 %</td></tr>
+          <tr>
+            <td class="col-select"><input type="checkbox" class="checkbox" aria-label="Seleccionar API de pagos"></td>
+            <td style="color:var(--text-primary);">API de pagos</td>
+            <td><span class="badge badge--info"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg>Beta</span></td>
+            <td class="num" data-sort="31990">$31 990</td>
+            <td class="num" style="color:var(--success);">+2,4 %</td>
+          </tr>
+          <tr class="row--selected">
+            <td class="col-select"><input type="checkbox" class="checkbox" checked aria-label="Seleccionar App móvil"></td>
+            <td style="color:var(--text-primary);">App móvil</td>
+            <td><span class="badge badge--warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.7 18-8-14a2 2 0 0 0-3.5 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3z"/><path d="M12 9v4m0 4h.01"/></svg>Pendiente</span></td>
+            <td class="num" data-sort="12040">$12 040</td>
+            <td class="num" style="color:var(--danger);">−1,1 %</td>
+          </tr>
+          <tr>
+            <td class="col-select"><input type="checkbox" class="checkbox" aria-label="Seleccionar Panel analítico"></td>
+            <td style="color:var(--text-primary);">Panel analítico</td>
+            <td><span class="badge badge--success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>Activo</span></td>
+            <td class="num" data-sort="48210">$48 210</td>
+            <td class="num" style="color:var(--success);">+8,2 %</td>
+          </tr>
+          <tr>
+            <td class="col-select"><input type="checkbox" class="checkbox" aria-label="Seleccionar Portal de socios"></td>
+            <td style="color:var(--text-primary);">Portal de socios</td>
+            <td><span class="badge badge--success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>Activo</span></td>
+            <td class="num" data-sort="27500">$27 500</td>
+            <td class="num" style="color:var(--success);">+5,0 %</td>
+          </tr>
+          <tr>
+            <td class="col-select"><input type="checkbox" class="checkbox" aria-label="Seleccionar Reportes"></td>
+            <td style="color:var(--text-primary);">Reportes</td>
+            <td><span class="badge badge--info"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg>Beta</span></td>
+            <td class="num" data-sort="9800">$9 800</td>
+            <td class="num" style="color:var(--danger);">−0,4 %</td>
+          </tr>
         </tbody>
       </table>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;table class="table"&gt;
-  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Proyecto&lt;/th&gt;&lt;th class="num"&gt;Ingresos&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;table class="table table--zebra table--sticky"&gt;
+  &lt;thead&gt;&lt;tr&gt;
+    &lt;th scope="col" class="col-select"&gt;
+      &lt;input type="checkbox" class="checkbox" aria-label="Seleccionar todas"&gt;&lt;/th&gt;
+    &lt;th scope="col" aria-sort="ascending"&gt;
+      &lt;button class="th-sort" type="button"&gt;Proyecto
+        &lt;svg class="sort-icon" …&gt;&lt;path d="m18 15-6-6-6 6"/&gt;&lt;/svg&gt;
+      &lt;/button&gt;&lt;/th&gt;
+    &lt;th scope="col" class="num"&gt;Ingresos&lt;/th&gt;
+  &lt;/tr&gt;&lt;/thead&gt;
   &lt;tbody&gt;
-    &lt;tr&gt;&lt;td&gt;Panel analítico&lt;/td&gt;&lt;td class="num"&gt;$48 210&lt;/td&gt;&lt;/tr&gt;
-    &lt;tr class="is-selected"&gt;…&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="col-select"&gt;&lt;input type="checkbox" class="checkbox" aria-label="Seleccionar API de pagos"&gt;&lt;/td&gt;…&lt;/tr&gt;
+    &lt;tr class="row--selected"&gt;…&lt;/tr&gt;
   &lt;/tbody&gt;
-&lt;/table&gt;</code></pre></details>
+&lt;/table&gt;
+&lt;!-- El icono se atenúa si aria-sort no está fijado; JS reordena y alterna aria-sort. --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= STAT ================= -->
@@ -1885,11 +2408,30 @@ html { scroll-behavior: smooth; }
         <span class="stat__delta stat__delta--neutral">— sin cambios</span>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="stat"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="stat"&gt;
   &lt;span class="stat__label"&gt;Ingresos del mes&lt;/span&gt;
   &lt;span class="stat__value"&gt;$128 450&lt;/span&gt;
   &lt;span class="stat__delta stat__delta--up"&gt;▲ +12,4 %&lt;/span&gt;
-&lt;/div&gt;</code></pre></details>
+&lt;/div&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
+    <h3 style="margin-top:32px;">Chip de métrica</h3>
+    <p>Pastilla de una línea con rótulo y valor en <span class="code">--link</span> · fila con <span class="code">gap</span> que salta de línea en móvil · el chip interactivo es un <span class="code">&lt;button&gt;</span> de 44 px con nombre accesible completo.</p>
+    <div class="ds-demo">
+      <div class="metric-chips">
+        <span class="metric-chip"><span class="metric-chip__label">Latencia</span> <span class="metric-chip__value">42 ms</span></span>
+        <span class="metric-chip"><span class="metric-chip__label">Errores</span> <span class="metric-chip__value">0,3 %</span></span>
+        <button class="metric-chip" type="button" id="dsWaterChip" aria-label="Agua: 3 de 8 vasos. Sumar un vaso"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><span class="metric-chip__label">Agua</span> <span class="metric-chip__value">3 de 8</span></button>
+      </div>
+    </div>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="metric-chips"&gt;
+  &lt;span class="metric-chip"&gt;
+    &lt;span class="metric-chip__label"&gt;Latencia&lt;/span&gt; &lt;span class="metric-chip__value"&gt;42 ms&lt;/span&gt;
+  &lt;/span&gt;
+  &lt;button class="metric-chip" type="button" aria-label="Agua: 3 de 8 vasos. Sumar un vaso"&gt;
+    &lt;svg aria-hidden="true"&gt;…plus…&lt;/svg&gt;
+    &lt;span class="metric-chip__label"&gt;Agua&lt;/span&gt; &lt;span class="metric-chip__value"&gt;3 de 8&lt;/span&gt;
+  &lt;/button&gt;
+&lt;/div&gt;
+&lt;!-- El aria-label se actualiza con el valor; empieza por el texto visible --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= PAGINATION ================= -->
@@ -1899,14 +2441,14 @@ html { scroll-behavior: smooth; }
     <div class="ds-demo">
       <ul class="pagination" id="paginationDemo" aria-label="Paginación"></ul>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;ul class="pagination" aria-label="Paginación"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;ul class="pagination" aria-label="Paginación"&gt;
   &lt;li&gt;&lt;button class="pagination__btn" data-page="prev" aria-label="Página anterior"&gt;‹&lt;/button&gt;&lt;/li&gt;
   &lt;li&gt;&lt;button class="pagination__btn" data-page="1"&gt;1&lt;/button&gt;&lt;/li&gt;
   &lt;li&gt;&lt;span class="pagination__ellipsis"&gt;…&lt;/span&gt;&lt;/li&gt;
   &lt;li&gt;&lt;button class="pagination__btn is-active" data-page="5" aria-current="page"&gt;5&lt;/button&gt;&lt;/li&gt;
   &lt;li&gt;&lt;button class="pagination__btn" data-page="6"&gt;6&lt;/button&gt;&lt;/li&gt;
   &lt;li&gt;&lt;button class="pagination__btn" data-page="next" aria-label="Página siguiente"&gt;›&lt;/button&gt;&lt;/li&gt;
-&lt;/ul&gt;</code></pre></details>
+&lt;/ul&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= NAVEGACIÓN ================= -->
@@ -1931,6 +2473,69 @@ html { scroll-behavior: smooth; }
         <a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>Proyectos</a>
       </div>
     </div>
+    <h3 style="margin-top:32px;">Sidebar contraíble</h3>
+    <p>Expandido 260 px · riel de iconos de 64 px con grupos separados por una línea · en el riel, el nombre aparece como tooltip al pasar el cursor o al enfocar con teclado · el ancho cambia sin transición y solo los rótulos se funden · por debajo de 768 px lo sustituye un Drawer <span class="code">--left</span>.</p>
+    <div class="ds-demo ds-app-demo">
+      <nav class="sidebar sidebar--collapsible" id="demoAppNav" aria-label="Navegación de ejemplo">
+        <div class="sidebar__group" role="group" aria-labelledby="demoAppNavG1">
+          <span class="sidebar__group-label" id="demoAppNavG1">Monitoreo</span>
+          <a class="sidebar__item is-active" href="#comp-navegacion" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg><span class="sidebar__label">Inicio</span></a>
+          <a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"/><path d="M7 15v3m5-8v8m5-13v13"/></svg><span class="sidebar__label">Analítica</span></a>
+          <a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg><span class="sidebar__label">Actividad</span></a>
+        </div>
+        <div class="sidebar__group" role="group" aria-labelledby="demoAppNavG2">
+          <span class="sidebar__group-label" id="demoAppNavG2">Gestión</span>
+          <a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg><span class="sidebar__label">Proyectos</span></a>
+          <a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg><span class="sidebar__label">Equipo</span></a>
+          <a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg><span class="sidebar__label">Alertas</span></a>
+        </div>
+        <button class="sidebar__item sidebar__toggle" type="button" aria-expanded="true" aria-controls="demoAppNav"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg><span class="sidebar__label">Contraer</span></button>
+      </nav>
+      <div class="ds-app-demo__main">
+        <button class="icon-btn icon-btn--outline sidebar-trigger" type="button" id="openNavDrawer" aria-label="Abrir navegación" aria-expanded="false" aria-controls="demoNavDrawer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg></button>
+        <h4 style="margin:0;">Inicio</h4>
+        <p class="text-muted" style="margin:0;font-size:var(--text-sm);">El contenido ocupa el ancho que deja el sidebar: la rejilla <span class="code">auto 1fr</span> sigue al riel al instante, sin animar el ancho.</p>
+      </div>
+    </div>
+    <div class="drawer drawer--left" id="demoNavDrawer" hidden>
+      <div class="drawer__overlay" data-close-drawer></div>
+      <aside class="drawer__panel" role="dialog" aria-modal="true" aria-labelledby="navDrawerTitle" tabindex="-1">
+        <div class="drawer__header">
+          <h3 class="drawer__title" id="navDrawerTitle">Navegación</h3>
+          <button class="icon-btn icon-btn--ghost" data-close-drawer aria-label="Cerrar navegación"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+        </div>
+        <nav class="drawer__body" aria-label="Navegación de ejemplo">
+          <div class="sidebar__group" role="group" aria-labelledby="demoNavDrawerG1">
+            <span class="sidebar__group-label" id="demoNavDrawerG1">Monitoreo</span>
+            <a class="sidebar__item is-active" href="#comp-navegacion" aria-current="page" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg><span class="sidebar__label">Inicio</span></a>
+            <a class="sidebar__item" href="#comp-navegacion" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"/><path d="M7 15v3m5-8v8m5-13v13"/></svg><span class="sidebar__label">Analítica</span></a>
+            <a class="sidebar__item" href="#comp-navegacion" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg><span class="sidebar__label">Actividad</span></a>
+          </div>
+          <div class="sidebar__group" role="group" aria-labelledby="demoNavDrawerG2">
+            <span class="sidebar__group-label" id="demoNavDrawerG2">Gestión</span>
+            <a class="sidebar__item" href="#comp-navegacion" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg><span class="sidebar__label">Proyectos</span></a>
+            <a class="sidebar__item" href="#comp-navegacion" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg><span class="sidebar__label">Equipo</span></a>
+            <a class="sidebar__item" href="#comp-navegacion" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg><span class="sidebar__label">Alertas</span></a>
+          </div>
+        </nav>
+      </aside>
+    </div>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;nav class="sidebar sidebar--collapsible" id="appNav" aria-label="Principal"&gt;
+  &lt;div class="sidebar__group" role="group" aria-labelledby="navMonitor"&gt;
+    &lt;span class="sidebar__group-label" id="navMonitor"&gt;Monitoreo&lt;/span&gt;
+    &lt;a class="sidebar__item is-active" href="/" aria-current="page"&gt;
+      &lt;svg aria-hidden="true"&gt;…&lt;/svg&gt;&lt;span class="sidebar__label"&gt;Inicio&lt;/span&gt;
+    &lt;/a&gt;
+  &lt;/div&gt;
+  &lt;button class="sidebar__item sidebar__toggle" type="button"
+          aria-expanded="true" aria-controls="appNav"&gt;
+    &lt;svg aria-hidden="true"&gt;…chevron-left…&lt;/svg&gt;&lt;span class="sidebar__label"&gt;Contraer&lt;/span&gt;
+  &lt;/button&gt;
+&lt;/nav&gt;
+&lt;!-- Contraído: .is-collapsed en el nav, aria-expanded="false" y texto «Expandir».
+     Por debajo de 768 px: botón ☰ .sidebar-trigger que abre un .drawer.drawer--left con los mismos ítems. --&gt;
+&lt;button class="icon-btn sidebar-trigger" type="button" aria-label="Abrir navegación"
+        aria-expanded="false" aria-controls="navDrawer"&gt;…menu…&lt;/button&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
     <h3 style="margin-top:32px;">Tabs y Breadcrumbs</h3>
     <div class="ds-demo ds-demo--col">
       <div class="tabs" id="demoTabs">
@@ -1945,10 +2550,10 @@ html { scroll-behavior: smooth; }
         <li aria-current="page">Panel analítico</li>
       </ul>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="navbar"&gt;…&lt;a class="navbar__link is-active"&gt;Resumen&lt;/a&gt;…&lt;/div&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="navbar"&gt;…&lt;a class="navbar__link is-active"&gt;Resumen&lt;/a&gt;…&lt;/div&gt;
 &lt;div class="sidebar"&gt;&lt;a class="sidebar__item is-active"&gt;&lt;svg&gt;…&lt;/svg&gt;Inicio&lt;/a&gt;&lt;/div&gt;
 &lt;div class="tabs"&gt;&lt;button class="tabs__btn is-active"&gt;Resumen&lt;/button&gt;…&lt;span class="tabs__indicator"&gt;&lt;/span&gt;&lt;/div&gt;
-&lt;ul class="breadcrumbs"&gt;&lt;li&gt;&lt;a&gt;Inicio&lt;/a&gt;&lt;/li&gt;&lt;li aria-current="page"&gt;Actual&lt;/li&gt;&lt;/ul&gt;</code></pre></details>
+&lt;ul class="breadcrumbs"&gt;&lt;li&gt;&lt;a&gt;Inicio&lt;/a&gt;&lt;/li&gt;&lt;li aria-current="page"&gt;Actual&lt;/li&gt;&lt;/ul&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= SKELETON ================= -->
@@ -1969,7 +2574,7 @@ html { scroll-behavior: smooth; }
         <button class="btn btn--primary btn--sm">Crear proyecto</button>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;span class="skeleton" style="height:12px;width:70%"&gt;&lt;/span&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;span class="skeleton" style="height:12px;width:70%"&gt;&lt;/span&gt;
 &lt;span class="skeleton skeleton--circle" style="width:40px;height:40px"&gt;&lt;/span&gt;
 
 &lt;div class="empty-state"&gt;
@@ -1977,7 +2582,7 @@ html { scroll-behavior: smooth; }
   &lt;span class="empty-state__title"&gt;Aún no hay proyectos&lt;/span&gt;
   &lt;span class="empty-state__desc"&gt;Crea tu primer proyecto…&lt;/span&gt;
   &lt;button class="btn btn--primary btn--sm"&gt;Crear proyecto&lt;/button&gt;
-&lt;/div&gt;</code></pre></details>
+&lt;/div&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= CARD, LINK Y CODE ================= -->
@@ -1994,17 +2599,380 @@ html { scroll-behavior: smooth; }
         <p style="margin:0;font-size:var(--text-sm);color:var(--text-muted);">Al pasar el cursor sube de nivel: −2px + superficie más clara.</p>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="card"&gt;…&lt;/div&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="card"&gt;…&lt;/div&gt;
 &lt;div class="card card--interactive"&gt;…&lt;/div&gt;
-&lt;!-- .card--glow: firma de marca — MÁXIMO UNO POR PANTALLA --&gt;</code></pre></details>
+&lt;!-- .card--glow: firma de marca — MÁXIMO UNO POR PANTALLA --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
     <h3 style="margin-top:32px;">Link y Code</h3>
     <div class="ds-demo" style="gap:32px;">
       <a class="link" href="#comp-card">Link con subrayado animado</a>
       <a class="link" href="https://lucide.dev" target="_blank" rel="noopener noreferrer">Link externo<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M7 7h10v10"/></svg></a>
       <span>Acento con <span class="code">var(--accent-400)</span></span>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;a class="link" href="…"&gt;Link con subrayado animado&lt;/a&gt;
-&lt;span class="code"&gt;var(--accent-400)&lt;/span&gt;</code></pre></details>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;a class="link" href="…"&gt;Link con subrayado animado&lt;/a&gt;
+&lt;span class="code"&gt;var(--accent-400)&lt;/span&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
+  </section>
+
+  <!-- ================= COMBOBOX / SEARCH ================= -->
+  <section id="comp-combobox">
+    <h2>Combobox y Search</h2>
+    <p>Combobox con autocompletado: filtra en vivo y se navega con ↑/↓, Enter selecciona, Esc cierra. El listado vive sobre <span class="code">--surface-2</span>. Al lado, un campo de búsqueda con botón para limpiar.</p>
+    <div class="ds-demo ds-demo--grid" style="align-items:start;overflow:visible;">
+      <div>
+        <span class="field__label" style="display:block;margin-bottom:6px;">Framework</span>
+        <div class="combobox">
+          <input class="input combobox__input" type="text" id="cbInput"
+                 role="combobox" aria-expanded="false" aria-controls="cbList"
+                 aria-autocomplete="list" aria-activedescendant=""
+                 placeholder="Escribe para filtrar…" autocomplete="off" spellcheck="false">
+          <ul class="combobox__list" id="cbList" role="listbox" aria-label="Frameworks" hidden>
+            <li class="combobox__option" role="option" id="cbo-0" aria-selected="false">Angular<svg class="combobox__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></li>
+            <li class="combobox__option" role="option" id="cbo-1" aria-selected="false">Astro<svg class="combobox__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></li>
+            <li class="combobox__option" role="option" id="cbo-2" aria-selected="false">React<svg class="combobox__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></li>
+            <li class="combobox__option" role="option" id="cbo-3" aria-selected="false">Solid<svg class="combobox__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></li>
+            <li class="combobox__option" role="option" id="cbo-4" aria-selected="false">Svelte<svg class="combobox__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></li>
+            <li class="combobox__option" role="option" id="cbo-5" aria-selected="false">Vue<svg class="combobox__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></li>
+          </ul>
+        </div>
+      </div>
+      <div>
+        <span class="field__label" style="display:block;margin-bottom:6px;">Buscar</span>
+        <div class="search">
+          <svg class="search__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+          <input class="input search__input" type="search" id="searchInput" placeholder="Buscar proyectos…" aria-label="Buscar proyectos" autocomplete="off">
+          <button class="search__clear" type="button" id="searchClear" aria-label="Limpiar" hidden><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+        </div>
+      </div>
+    </div>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="combobox"&gt;
+  &lt;input class="input combobox__input" role="combobox" aria-expanded="false"
+    aria-controls="lista" aria-autocomplete="list" aria-activedescendant=""&gt;
+  &lt;ul class="combobox__list" id="lista" role="listbox" aria-label="Frameworks" hidden&gt;
+    &lt;li class="combobox__option" role="option" id="op-0" aria-selected="false"&gt;Angular&lt;/li&gt;
+    &lt;!-- .is-active = resaltado por teclado · aria-selected="true" = elegida --&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+
+&lt;div class="search"&gt;
+  &lt;svg class="search__icon" aria-hidden="true"&gt;…lupa…&lt;/svg&gt;
+  &lt;input class="input search__input" type="search" aria-label="Buscar"&gt;
+  &lt;button class="search__clear" aria-label="Limpiar" hidden&gt;×&lt;/button&gt;
+&lt;/div&gt;
+&lt;!-- JS: filtra en vivo, ↑/↓/Enter/Esc; el clear vacía y devuelve el foco. --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
+  </section>
+
+  <!-- ================= DRAWER ================= -->
+  <section id="comp-drawer">
+    <h2>Drawer</h2>
+    <p>Panel que entra deslizándose desde un borde (derecha por defecto; <span class="code">--left</span> / <span class="code">--bottom</span>). Igual que el modal: <span class="code">role="dialog"</span> + <span class="code">aria-modal</span>, foco atrapado, retorno de foco, y cierre con Esc o clic en el overlay. El panel usa <span class="code">overscroll-behavior: contain</span>.</p>
+    <div class="ds-demo">
+      <button class="btn btn--primary" id="openDrawer">Abrir panel</button>
+    </div>
+    <div class="drawer drawer--right" id="demoDrawer" hidden>
+      <div class="drawer__overlay" data-close-drawer></div>
+      <aside class="drawer__panel" role="dialog" aria-modal="true" aria-labelledby="drawerTitle" tabindex="-1">
+        <div class="drawer__header">
+          <h3 class="drawer__title" id="drawerTitle">Filtros</h3>
+          <button class="icon-btn icon-btn--ghost" data-close-drawer aria-label="Cerrar panel"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+        </div>
+        <div class="drawer__body">
+          <div class="field">
+            <label class="field__label" for="drawerRange">Rango de fechas</label>
+            <div class="select-wrap">
+              <select class="select" id="drawerRange">
+                <option>Últimos 7 días</option>
+                <option>Últimos 30 días</option>
+                <option>Este trimestre</option>
+              </select>
+            </div>
+          </div>
+          <div style="display:flex;flex-direction:column;gap:var(--space-3);">
+            <label class="check-row"><input type="checkbox" class="checkbox" checked> Solo proyectos activos</label>
+            <label class="check-row"><input type="checkbox" class="checkbox"> Incluir archivados</label>
+          </div>
+        </div>
+        <div class="drawer__footer">
+          <button class="btn btn--outline" data-close-drawer>Cancelar</button>
+          <button class="btn btn--primary" data-close-drawer>Aplicar filtros</button>
+        </div>
+      </aside>
+    </div>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="drawer drawer--right" hidden&gt;
+  &lt;div class="drawer__overlay" data-close-drawer&gt;&lt;/div&gt;
+  &lt;aside class="drawer__panel" role="dialog" aria-modal="true"
+         aria-labelledby="dTitle" tabindex="-1"&gt;
+    &lt;div class="drawer__header"&gt;
+      &lt;h3 class="drawer__title" id="dTitle"&gt;Filtros&lt;/h3&gt;
+      &lt;button class="icon-btn icon-btn--ghost" data-close-drawer aria-label="Cerrar"&gt;×&lt;/button&gt;
+    &lt;/div&gt;
+    &lt;div class="drawer__body"&gt;…&lt;/div&gt;
+    &lt;div class="drawer__footer"&gt;…&lt;/div&gt;
+  &lt;/aside&gt;
+&lt;/div&gt;
+&lt;!-- Variantes: --right (default) · --left · --bottom (sheet).
+     JS: .is-open dispara el slide; Esc / overlay cierran y devuelven el foco. --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
+  </section>
+
+  <!-- ================= POPOVER ================= -->
+  <section id="comp-popover">
+    <h2>Popover</h2>
+    <p>Se abre por <strong>clic</strong> —eso lo distingue del Tooltip, que es hover— y crece desde el <span class="code">transform-origin</span> del disparador. <span class="code">role="dialog"</span>, el foco entra al panel; cierra con Esc o clic fuera. Panel sobre <span class="code">--surface-2</span>.</p>
+    <div class="ds-demo" style="overflow:visible;">
+      <div class="popover">
+        <button class="btn btn--outline popover__trigger" type="button" id="popTrigger" aria-haspopup="dialog" aria-expanded="false" aria-controls="popPanel">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="m16 6-4-4-4 4"/><path d="M12 2v13"/></svg>
+          Compartir
+        </button>
+        <div class="popover__panel" role="dialog" aria-label="Compartir proyecto" id="popPanel">
+          <h3 style="margin:0 0 var(--space-2);font-family:var(--font-body);font-size:var(--text-base);font-weight:600;letter-spacing:normal;color:var(--text-heading);">Compartir proyecto</h3>
+          <p style="font-size:var(--text-sm);color:var(--text-muted);margin:0 0 var(--space-3);max-width:none;">Cualquiera con el enlace podrá ver este proyecto en modo lectura.</p>
+          <div style="display:flex;gap:var(--space-2);align-items:center;">
+            <input class="input" type="text" readonly value="higinio.dev/p/8f2a" aria-label="Enlace para compartir">
+            <button class="btn btn--primary btn--sm" type="button">Copiar</button>
+          </div>
+          <a class="link" href="#comp-popover" style="margin-top:var(--space-3);">Ver permisos avanzados</a>
+        </div>
+      </div>
+    </div>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="popover"&gt;
+  &lt;button class="btn btn--outline popover__trigger" type="button"
+          aria-haspopup="dialog" aria-expanded="false" aria-controls="panel"&gt;Compartir&lt;/button&gt;
+  &lt;div class="popover__panel" role="dialog" aria-label="Compartir proyecto" id="panel"&gt;
+    &lt;p&gt;Contenido de varias líneas…&lt;/p&gt;
+    &lt;button class="btn btn--primary btn--sm"&gt;Copiar&lt;/button&gt;
+    &lt;a class="link" href="…"&gt;Ver permisos avanzados&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;!-- Abre por CLICK (no hover); el foco entra al panel; Esc / clic fuera cierran. --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
+  </section>
+
+  <!-- ================= BUTTON GROUP ================= -->
+  <section id="comp-buttongroup">
+    <h2>ButtonGroup</h2>
+    <p>Botones adyacentes con bordes compartidos: el radio queda solo en los extremos y los bordes internos se colapsan. Reutiliza los <span class="code">.btn</span> existentes. <span class="code">role="group"</span> + <span class="code">aria-label</span>.</p>
+    <div class="ds-demo">
+      <div class="btn-group" role="group" aria-label="Alineación del texto">
+        <button class="btn btn--outline" type="button">Izquierda</button>
+        <button class="btn btn--outline" type="button">Centro</button>
+        <button class="btn btn--outline" type="button">Derecha</button>
+      </div>
+    </div>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="btn-group" role="group" aria-label="Alineación del texto"&gt;
+  &lt;button class="btn btn--outline"&gt;Izquierda&lt;/button&gt;
+  &lt;button class="btn btn--outline"&gt;Centro&lt;/button&gt;
+  &lt;button class="btn btn--outline"&gt;Derecha&lt;/button&gt;
+&lt;/div&gt;
+&lt;!-- Radios solo en los extremos; bordes internos colapsados (margin-left:-1px). --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
+  </section>
+
+  <!-- ================= DATEPICKER ================= -->
+  <section id="comp-datepicker">
+    <h2>DatePicker</h2>
+    <p>Campo de fecha con calendario en popover: el input abre el calendario al hacer clic, eliges un día con el ratón o las flechas y el valor vuelve al campo. El panel reutiliza el look de <span class="code">.popover__panel</span> sobre <span class="code">--surface-2</span>. El <span class="code">.calendar__grid</span> es <span class="code">role="grid"</span> y cada día un <span class="code">&lt;button role="gridcell"&gt;</span> con la fecha completa en <span class="code">aria-label</span>.</p>
+    <div class="ds-demo" style="overflow:visible;">
+      <div class="datepicker" id="datepicker">
+        <span class="field__label" id="dpLabel" style="display:block;margin-bottom:6px;">Fecha de entrega</span>
+        <div class="input-wrap" style="max-width:220px;">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
+          <input class="input datepicker__input" type="text" id="dpInput" readonly
+                 aria-haspopup="dialog" aria-controls="dpCalendar"
+                 aria-labelledby="dpLabel" value="15 de julio de 2026">
+        </div>
+        <div class="datepicker__calendar" id="dpCalendar" role="dialog" aria-label="Elegir fecha" hidden>
+          <div class="calendar">
+            <div class="calendar__header">
+              <button class="icon-btn icon-btn--ghost icon-btn--sm" type="button" id="dpPrev" aria-label="Mes anterior"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></button>
+              <span class="calendar__title" id="dpTitle" aria-live="polite">julio 2026</span>
+              <button class="icon-btn icon-btn--ghost icon-btn--sm" type="button" id="dpNext" aria-label="Mes siguiente"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></button>
+            </div>
+            <div class="calendar__table" role="grid" aria-labelledby="dpTitle">
+            <div class="calendar__weekdays" role="row">
+              <span role="columnheader" aria-label="lunes">L</span>
+              <span role="columnheader" aria-label="martes">M</span>
+              <span role="columnheader" aria-label="miércoles">X</span>
+              <span role="columnheader" aria-label="jueves">J</span>
+              <span role="columnheader" aria-label="viernes">V</span>
+              <span role="columnheader" aria-label="sábado">S</span>
+              <span role="columnheader" aria-label="domingo">D</span>
+            </div>
+            <div class="calendar__grid" id="dpGrid" role="rowgroup"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="datepicker"&gt;
+  &lt;div class="input-wrap"&gt;
+    &lt;svg aria-hidden="true"&gt;…calendario…&lt;/svg&gt;
+    &lt;input class="input datepicker__input" readonly aria-haspopup="dialog"
+           aria-controls="cal" value="15 de julio de 2026"&gt;
+  &lt;/div&gt;
+  &lt;div class="datepicker__calendar" id="cal" role="dialog" aria-label="Elegir fecha" hidden&gt;
+    &lt;div class="calendar"&gt;
+      &lt;div class="calendar__header"&gt;
+        &lt;button class="icon-btn icon-btn--ghost icon-btn--sm" aria-label="Mes anterior"&gt;‹&lt;/button&gt;
+        &lt;span class="calendar__title" aria-live="polite"&gt;julio 2026&lt;/span&gt;
+        &lt;button class="icon-btn icon-btn--ghost icon-btn--sm" aria-label="Mes siguiente"&gt;›&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class="calendar__table" role="grid" aria-label="julio 2026"&gt;
+      &lt;div class="calendar__weekdays" role="row"&gt;
+        &lt;span role="columnheader" aria-label="lunes"&gt;L&lt;/span&gt; …
+      &lt;/div&gt;
+      &lt;div class="calendar__grid" role="rowgroup"&gt;
+        &lt;div class="calendar__week" role="row"&gt;
+          &lt;button class="calendar__day" role="gridcell"
+                  aria-label="15 de julio de 2026" aria-selected="true"&gt;15&lt;/button&gt; …
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;!-- JS: clic abre; flechas mueven el día (±1, ±7) cruzando meses; Enter elige; Esc cierra. --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
+  </section>
+
+  <!-- ================= FILE UPLOAD ================= -->
+  <section id="comp-fileupload">
+    <h2>FileUpload</h2>
+    <p>Zona de arrastre con lista de archivos. El input file real va oculto accesiblemente (<span class="code">.visually-hidden</span>, sigue tabulable) y el ring de foco se pinta sobre el label. Al arrastrar un archivo encima, <span class="code">.is-dragover</span> tiñe el borde de acento. Un ítem subiendo incrusta el <span class="code">.progress</span>; el error se marca con icono + texto, no solo por color.</p>
+    <div class="ds-demo">
+      <div class="file-upload" id="fileUpload" style="width:100%;max-width:520px;">
+        <input class="file-upload__input visually-hidden" type="file" id="fuInput" multiple aria-describedby="fuHint">
+        <label class="file-upload__label" for="fuInput">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M17 8l-5-5-5 5"/><path d="M12 3v13"/></svg>
+          <span>Arrastra archivos aquí o <span class="file-upload__button">explora</span></span>
+          <span class="file-upload__hint" id="fuHint">PNG, JPG o PDF · máximo 10 MB</span>
+        </label>
+        <ul class="file-upload__list" id="fuList">
+          <li class="file-upload__item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
+            <div>
+              <span class="file-upload__name">informe-trimestral-q3.pdf</span>
+              <span class="file-upload__size">2.4 MB · subiendo…</span>
+              <div class="progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="Subiendo informe-trimestral-q3.pdf"><div class="progress__bar" style="width:60%;"></div></div>
+            </div>
+            <button class="file-upload__remove" type="button" aria-label="Cancelar informe-trimestral-q3.pdf"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+          </li>
+          <li class="file-upload__item">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
+            <div>
+              <span class="file-upload__name">mockup-portada.png</span>
+              <span class="file-upload__size">840 KB · completo</span>
+            </div>
+            <button class="file-upload__remove" type="button" aria-label="Quitar mockup-portada.png"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+          </li>
+          <li class="file-upload__item file-upload__item--error">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 8v4m0 4h.01"/></svg>
+            <div>
+              <span class="file-upload__name">video-demo.mov</span>
+              <span class="file-upload__size">Error: supera los 10 MB</span>
+            </div>
+            <button class="file-upload__remove" type="button" aria-label="Quitar video-demo.mov"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="file-upload"&gt;
+  &lt;input class="file-upload__input visually-hidden" type="file" id="f" multiple
+         aria-describedby="hint"&gt;
+  &lt;label class="file-upload__label" for="f"&gt;
+    &lt;svg aria-hidden="true"&gt;…subir…&lt;/svg&gt;
+    &lt;span&gt;Arrastra archivos aquí o &lt;span class="file-upload__button"&gt;explora&lt;/span&gt;&lt;/span&gt;
+    &lt;span class="file-upload__hint" id="hint"&gt;PNG, JPG o PDF · máximo 10 MB&lt;/span&gt;
+  &lt;/label&gt;
+  &lt;ul class="file-upload__list"&gt;
+    &lt;li class="file-upload__item"&gt;
+      &lt;svg aria-hidden="true"&gt;…archivo…&lt;/svg&gt;
+      &lt;div&gt;
+        &lt;span class="file-upload__name"&gt;informe.pdf&lt;/span&gt;
+        &lt;span class="file-upload__size"&gt;2.4 MB · subiendo…&lt;/span&gt;
+        &lt;div class="progress" role="progressbar" aria-valuenow="60" …&gt;
+          &lt;div class="progress__bar" style="width:60%"&gt;&lt;/div&gt;&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;button class="file-upload__remove" aria-label="Cancelar informe.pdf"&gt;×&lt;/button&gt;
+    &lt;/li&gt;
+    &lt;li class="file-upload__item file-upload__item--error"&gt;…icono + texto de error…&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+&lt;!-- JS: dragover añade .is-dragover; el botón × quita el ítem. --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
+  </section>
+
+  <!-- ================= STEPPER ================= -->
+  <section id="comp-stepper">
+    <h2>Stepper / Wizard</h2>
+    <p>Indicador de progreso por pasos. Es un <span class="code">&lt;ol&gt;</span>, así que el orden y el conteo se anuncian solos; el paso en curso lleva <span class="code">aria-current="step"</span> y los pasos completos muestran un check (estado no solo por color). El conector se tiñe de acento en el tramo ya recorrido. Variante <span class="code">.stepper--vertical</span> para apilarlos.</p>
+    <div class="ds-demo ds-demo--grid" style="align-items:start;">
+      <ol class="stepper" aria-label="Progreso de la configuración" style="width:100%;">
+        <li class="step step--complete">
+          <span class="step__marker"><span class="visually-hidden">Completado: </span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span>
+          <span class="step__label">Cuenta</span>
+          <span class="step__connector" aria-hidden="true"></span>
+        </li>
+        <li class="step step--complete">
+          <span class="step__marker"><span class="visually-hidden">Completado: </span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span>
+          <span class="step__label">Perfil</span>
+          <span class="step__connector" aria-hidden="true"></span>
+        </li>
+        <li class="step step--current" aria-current="step">
+          <span class="step__marker"><span class="visually-hidden">Paso actual: </span>3</span>
+          <span class="step__label">Pago</span>
+          <span class="step__connector" aria-hidden="true"></span>
+        </li>
+        <li class="step step--upcoming">
+          <span class="step__marker"><span class="visually-hidden">Pendiente: </span>4</span>
+          <span class="step__label">Confirmación</span>
+        </li>
+      </ol>
+      <ol class="stepper stepper--vertical" aria-label="Progreso del despliegue">
+        <li class="step step--complete">
+          <span class="step__marker"><span class="visually-hidden">Completado: </span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span>
+          <span class="step__label">Compilar el proyecto</span>
+          <span class="step__connector" aria-hidden="true"></span>
+        </li>
+        <li class="step step--current" aria-current="step">
+          <span class="step__marker"><span class="visually-hidden">Paso actual: </span>2</span>
+          <span class="step__label">Ejecutar pruebas</span>
+          <span class="step__connector" aria-hidden="true"></span>
+        </li>
+        <li class="step step--upcoming">
+          <span class="step__marker"><span class="visually-hidden">Pendiente: </span>3</span>
+          <span class="step__label">Publicar en producción</span>
+        </li>
+      </ol>
+    </div>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;ol class="stepper" aria-label="Progreso de la configuración"&gt;
+  &lt;li class="step step--complete"&gt;
+    &lt;span class="step__marker"&gt;&lt;svg aria-hidden="true"&gt;…check…&lt;/svg&gt;&lt;/span&gt;
+    &lt;span class="step__label"&gt;Cuenta&lt;/span&gt;
+    &lt;span class="step__connector" aria-hidden="true"&gt;&lt;/span&gt;
+  &lt;/li&gt;
+  &lt;li class="step step--current" aria-current="step"&gt;
+    &lt;span class="step__marker"&gt;3&lt;/span&gt;
+    &lt;span class="step__label"&gt;Pago&lt;/span&gt;
+    &lt;span class="step__connector" aria-hidden="true"&gt;&lt;/span&gt;
+  &lt;/li&gt;
+  &lt;li class="step step--upcoming"&gt;
+    &lt;span class="step__marker"&gt;4&lt;/span&gt;&lt;span class="step__label"&gt;Confirmación&lt;/span&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+&lt;!-- El último paso no lleva conector. Variante: .stepper--vertical. --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
+  </section>
+
+  <!-- ================= KBD ================= -->
+  <section id="comp-kbd">
+    <h2>Kbd</h2>
+    <p>Tecla o atajo de teclado sobre <span class="code">&lt;kbd&gt;</span>: JetBrains Mono, borde <span class="code">--border-strong</span> y sombra sutil, alto y ancho mínimo 20px. Para combos se encadenan varias con un "+" literal. Es informativa, nunca un botón.</p>
+    <div class="ds-demo" style="gap:var(--space-4);align-items:center;">
+      <span style="display:inline-flex;align-items:center;gap:6px;"><kbd class="kbd">Esc</kbd></span>
+      <span style="display:inline-flex;align-items:center;gap:6px;"><kbd class="kbd">Tab</kbd></span>
+      <span style="display:inline-flex;align-items:center;gap:6px;"><kbd class="kbd">↵</kbd></span>
+      <span style="display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);"><kbd class="kbd">⌘</kbd> + <kbd class="kbd">K</kbd></span>
+      <span style="display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);"><kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">S</kbd></span>
+      <span style="display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);"><kbd class="kbd">Shift</kbd> + <kbd class="kbd">⇥</kbd></span>
+    </div>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>Pulsa &lt;kbd class="kbd"&gt;Esc&lt;/kbd&gt; para cerrar.
+
+Abre el buscador con &lt;kbd class="kbd"&gt;⌘&lt;/kbd&gt; + &lt;kbd class="kbd"&gt;K&lt;/kbd&gt;.
+Guarda con &lt;kbd class="kbd"&gt;Ctrl&lt;/kbd&gt; + &lt;kbd class="kbd"&gt;S&lt;/kbd&gt;.</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= MOTION ================= -->
@@ -2042,16 +3010,22 @@ html { scroll-behavior: smooth; }
       <table class="table">
         <thead><tr><th>Combinación</th><th class="num">Contraste</th><th>Veredicto</th></tr></thead>
         <tbody>
-          <tr><td>night-100 sobre night-950</td><td class="num">≈ 16:1</td><td><span class="badge badge--success">AAA</span></td></tr>
-          <tr><td>accent-400 sobre night-950</td><td class="num">≈ 8.5:1</td><td><span class="badge badge--success">AA — sirve como texto/link</span></td></tr>
-          <tr><td>night-950 sobre accent-400 (CTA)</td><td class="num">≈ 8.5:1</td><td><span class="badge badge--success">AA — texto del CTA oscuro</span></td></tr>
-          <tr><td>indigo-500 sobre night-950</td><td class="num">≈ 1.9:1</td><td><span class="badge badge--danger">Solo fondo, nunca texto</span></td></tr>
-          <tr><td>night-50 sobre indigo-500</td><td class="num">≈ 9:1</td><td><span class="badge badge--success">AAA</span></td></tr>
+          <tr><td>night-100 sobre night-950</td><td class="num">17.25:1</td><td><span class="badge badge--success">AAA</span></td></tr>
+          <tr><td>accent-400 sobre night-950</td><td class="num">9.50:1</td><td><span class="badge badge--success">AA — sirve como texto/link</span></td></tr>
+          <tr><td>night-950 sobre accent-400 (CTA)</td><td class="num">9.50:1</td><td><span class="badge badge--success">AA — texto del CTA oscuro</span></td></tr>
+          <tr><td>indigo-500 sobre night-950</td><td class="num">2.09:1</td><td><span class="badge badge--danger">Solo fondo, nunca texto</span></td></tr>
+          <tr><td>night-50 sobre indigo-500</td><td class="num">9.29:1</td><td><span class="badge badge--success">AAA</span></td></tr>
+          <tr><td>accent-600 sobre blanco <em>(modo claro)</em></td><td class="num">4.01:1</td><td><span class="badge badge--warning">Solo UI — nunca texto</span></td></tr>
+          <tr><td>accent-700 sobre blanco <em>(texto de acción en claro)</em></td><td class="num">5.95:1</td><td><span class="badge badge--success">AA</span></td></tr>
+          <tr><td>accent-800 sobre blanco <em>(hover en claro)</em></td><td class="num">8.74:1</td><td><span class="badge badge--success">AAA</span></td></tr>
+          <tr><td>info sobre info-bg <em>(badge en claro)</em></td><td class="num">5.20:1</td><td><span class="badge badge--success">AA</span></td></tr>
         </tbody>
       </table>
     </div>
     <ul style="color:var(--text-secondary);line-height:1.9;font-size:var(--text-sm);">
       <li>Mínimos WCAG AA: 4.5:1 texto normal, 3:1 texto grande y componentes UI.</li>
+      <li>Ratios <strong>calculados</strong> con la fórmula WCAG 2.x, no estimados: <span class="code">mcp/test/contraste-tokens.test.ts</span> los recalcula desde <span class="code">tokens.css</span> en cada corrida.</li>
+      <li>En modo claro, <span class="code">accent-600</span> (<span class="code">#1f87bb</span>) vale como <strong>UI</strong> (focus, bordes, iconos) pero <strong>no como texto</strong>: da 4.01:1. El texto de acción usa <span class="code">accent-700</span>.</li>
       <li>Focus visible siempre (<span class="code">:focus-visible</span> global); estado nunca solo con color — siempre color + icono + texto.</li>
       <li>Touch targets de 44×44px. IconButton siempre con <span class="code">aria-label</span>.</li>
       <li><span class="code">role="progressbar"</span> en Progress, <span class="code">aria-expanded</span> en Accordion, <span class="code">aria-current</span> en navegación.</li>
@@ -2064,11 +3038,11 @@ html { scroll-behavior: smooth; }
     <p>El sistema se distribuye en <span class="code">dist/nocturna-electrica/</span>: <strong>nocturna-electrica.css</strong> (framework completo), <strong>tokens.css</strong> (solo variables), <strong>tailwind.css</strong> (bloque <span class="code">@theme</span> para Tailwind v4) y <strong>tokens.json</strong> (formato estándar W3C DTCG 2025.10, interoperable con Figma / Tokens Studio / Style Dictionary).</p>
 
     <h3>Variables CSS (núcleo)</h3>
-    <details class="ds-code" open><summary>tokens :root (aliases semánticos)<button class="ds-copy" type="button">Copiar</button></summary><pre><code>:root {
+    <div class="ds-code-wrap"><details class="ds-code" open><summary>tokens :root (aliases semánticos)</summary><pre><code>:root {
   /* Superficies */
   --bg: #010203;
   --surface-1: #0b0d12; --surface-2: #14171f; --surface-3: #1e222d;
-  --border: #3d4354; --border-strong: #2a2f3d;
+  --border: #3d4354; --border-strong: #6b7183;
 
   /* Texto */
   --text-primary: #e8eaef; --text-secondary: #c5c9d4;
@@ -2102,10 +3076,10 @@ html { scroll-behavior: smooth; }
   --ease-out: cubic-bezier(0.2, 0, 0, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
   --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
-}</code></pre></details>
+}</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <h3 style="margin-top:32px;">Tailwind CSS v4 — <span class="code">@theme</span></h3>
-    <details class="ds-code"><summary>tailwind.css<button class="ds-copy" type="button">Copiar</button></summary><pre><code>@import "tailwindcss";
+    <div class="ds-code-wrap"><details class="ds-code"><summary>tailwind.css</summary><pre><code>@import "tailwindcss";
 
 @theme {
   --color-night-950: #010203; --color-night-900: #0b0d12;
@@ -2117,7 +3091,7 @@ html { scroll-behavior: smooth; }
   --color-accent-100: #d9f0fb; --color-accent-200: #a8ddf6;
   --color-accent-300: #7dccf1; --color-accent-400: #52baed;
   --color-accent-500: #2fa3dd; --color-accent-600: #1f87bb;
-  --color-accent-700: #186a94;
+  --color-accent-700: #186a94; --color-accent-800: #12506f;
   --color-indigo-300: #7a83c4; --color-indigo-400: #565fa3;
   --color-indigo-500: #353d7c; --color-indigo-600: #2b3264;
   --color-indigo-700: #22284f; --color-indigo-800: #1a1e3b;
@@ -2139,7 +3113,7 @@ html { scroll-behavior: smooth; }
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
   --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
-}</code></pre></details>
+}</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <div class="ds-callout ds-callout--info" style="margin-top:32px;">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg>
@@ -2150,33 +3124,44 @@ html { scroll-behavior: smooth; }
   <!-- ================= INSTALACIÓN ================= -->
   <section id="instalacion">
     <h2>Instalación</h2>
-    <p>El sistema se distribuye como archivos en <span class="code">dist/nocturna-electrica/</span> — cópialos a tu proyecto (aún no hay paquete npm). Elige la vía según tu stack. En todas: <strong>dark por defecto</strong>; <span class="code">&lt;html data-theme="light"&gt;</span> activa el modo claro, y los componentes consumen <strong>solo aliases semánticos</strong>, nunca hex.</p>
+    <p>El sistema se distribuye como paquete npm (<span class="code">@higinio/design-css</span>) y también como archivos sueltos en <span class="code">dist/nocturna-electrica/</span>. Instálalo o cópialos, y elige qué importar según tu stack (A/B/C/D). En todas: <strong>dark por defecto</strong>; <span class="code">&lt;html data-theme="light"&gt;</span> activa el modo claro, y los componentes consumen <strong>solo aliases semánticos</strong>, nunca hex.</p>
+
+    <h3 style="margin-top:32px;">Instalar desde npm (recomendado)</h3>
+    <p>Un solo paquete con todos los sistemas, cada uno en su subruta; Nocturna Eléctrica vive en <span class="code">/nocturna/</span>. Instálalo y usa las vías de abajo apuntando a la subruta, en vez de a un archivo copiado.</p>
+    <div class="ds-code-wrap"><details class="ds-code" open><summary>terminal + CSS de entrada</summary><pre><code>npm i @higinio/design-css
+
+/* framework completo (vía A) */
+@import "@higinio/design-css/nocturna/framework.css";
+/* o solo tokens (vía B) */
+@import "@higinio/design-css/nocturna/tokens.css";
+/* o Tailwind v4 (vía C) */
+@import "@higinio/design-css/nocturna/tailwind.css";</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <h3 style="margin-top:32px;">A · CSS drop-in (framework completo)</h3>
     <p>Para cualquier proyecto — HTML plano o cualquier framework. Trae variables + clases de componentes listas (tipo Bootstrap) y ya importa las fuentes.</p>
-    <details class="ds-code" open><summary>index.html<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;link rel="stylesheet" href="/estilos/nocturna-electrica.css"&gt;
+    <div class="ds-code-wrap"><details class="ds-code" open><summary>index.html</summary><pre><code>&lt;link rel="stylesheet" href="/estilos/nocturna-electrica.css"&gt;
 &lt;!-- luego usas las clases directo: --&gt;
 &lt;button class="btn btn--primary"&gt;Guardar&lt;/button&gt;
-&lt;div class="card"&gt;…&lt;/div&gt;</code></pre></details>
+&lt;div class="card"&gt;…&lt;/div&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <h3 style="margin-top:32px;">B · Solo tokens</h3>
     <p>Si diseñas tus propios componentes: solo las variables, sin clases.</p>
-    <details class="ds-code"><summary>styles.css<button class="ds-copy" type="button">Copiar</button></summary><pre><code>@import "./tokens.css";
+    <div class="ds-code-wrap"><details class="ds-code"><summary>styles.css</summary><pre><code>@import "./tokens.css";
 
 .mi-panel {
   background: var(--surface-1);
   color: var(--text-primary);
   border: 1px solid var(--border);
-}</code></pre></details>
+}</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <h3 style="margin-top:32px;">C · Tailwind v4</h3>
     <p>Tailwind v4 se configura por CSS. El <span class="code">tailwind.css</span> ya incluye <span class="code">@import "tailwindcss"</span>, los tokens y el bloque <span class="code">@theme</span> — úsalo como tu hoja de entrada (mantén <span class="code">tokens.css</span> a su lado, que es lo que importa).</p>
-    <details class="ds-code"><summary>terminal + CSS de entrada<button class="ds-copy" type="button">Copiar</button></summary><pre><code># 1) instala Tailwind v4
+    <div class="ds-code-wrap"><details class="ds-code"><summary>terminal + CSS de entrada</summary><pre><code># 1) instala Tailwind v4
 npm i tailwindcss @tailwindcss/postcss
 
 # 2) copia tailwind.css + tokens.css a tu carpeta de CSS
 #    y usa tailwind.css como entrada. Ya tienes utilidades:
-&lt;div class="bg-night-900 text-accent-400"&gt;…&lt;/div&gt;</code></pre></details>
+&lt;div class="bg-night-900 text-accent-400"&gt;…&lt;/div&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <h3 style="margin-top:32px;">D · Pipelines de tokens</h3>
     <p>Para Figma, Tokens Studio o Style Dictionary: importa <span class="code">tokens.json</span> (formato estándar W3C DTCG 2025.10).</p>
@@ -2190,20 +3175,23 @@ npm i tailwindcss @tailwindcss/postcss
   <!-- ================= MCP ================= -->
   <section id="mcp">
     <h2>MCP</h2>
-    <p>El paquete <span class="code">@higinio/design-mcp</span> expone ambos sistemas de diseño — Celeste Clásica y Nocturna Eléctrica — a cualquier IDE o cliente compatible con Model Context Protocol: tokens, componentes, reglas duras y validación de código. Complementa a las skills de Claude, no las reemplaza: misma fuente de verdad, accesible también fuera del entorno de Claude.</p>
+    <p>El paquete <span class="code">@higinio/design-mcp</span> expone los sistemas de diseño de Higinio Sosa, entre ellos Nocturna Eléctrica (<span class="code">system="nocturna"</span>), a cualquier IDE o cliente compatible con Model Context Protocol: tokens, componentes, reglas duras y validación de código. Complementa a las skills de Claude, no las reemplaza: misma fuente de verdad, accesible también fuera del entorno de Claude.</p>
 
-    <h3>Las 8 tools</h3>
+    <h3>Las 11 tools</h3>
     <div class="ds-demo ds-demo--col" style="padding:0;overflow-x:auto;">
       <table class="table">
         <thead><tr><th>Tool</th><th>Qué hace</th></tr></thead>
         <tbody>
           <tr><td class="mono">list_design_systems</td><td>Lista los sistemas de diseño disponibles.</td></tr>
-          <tr><td class="mono">get_token</td><td>Devuelve el valor resuelto de un token o alias de un sistema.</td></tr>
+          <tr><td class="mono">get_token</td><td>Resuelve un alias semántico o un token DTCG por path a su valor.</td></tr>
           <tr><td class="mono">search_tokens</td><td>Busca tokens por nombre, categoría o valor.</td></tr>
           <tr><td class="mono">list_components</td><td>Lista los componentes documentados de un sistema.</td></tr>
           <tr><td class="mono">get_component_spec</td><td>Devuelve la especificación completa de un componente: estados, medidas, variantes.</td></tr>
           <tr><td class="mono">get_rules</td><td>Devuelve las reglas duras (no negociables) del sistema.</td></tr>
           <tr><td class="mono">validate_code</td><td>Audita CSS/HTML contra las reglas del sistema — hex directos, contraste, aliases.</td></tr>
+          <tr><td class="mono">validate_motion</td><td>Audita el motion contra las reglas del sistema: <span class="code">transition</span> sobre todas las propiedades, ease-in en entradas, propiedades de layout, duraciones por encima de <span class="code">--duration-page</span>.</td></tr>
+          <tr><td class="mono">check_slop</td><td>Detecta clichés de diseño generado por IA: gradientes, glassmorphism, sombras de negro puro, fuentes genéricas y copy de marketing.</td></tr>
+          <tr><td class="mono">checklist_preflight</td><td>Checklist estático de pre-producción sobre HTML/CSS: metadatos, headings, imágenes y accesibilidad de controles.</td></tr>
           <tr><td class="mono">generate_snippet</td><td>Genera un snippet de componente listo para usar, con los aliases correctos.</td></tr>
         </tbody>
       </table>
@@ -2211,7 +3199,7 @@ npm i tailwindcss @tailwindcss/postcss
 
     <h3 style="margin-top:32px;">Conectar (remoto)</h3>
     <p>Añade el servidor a tu <span class="code">.mcp.json</span>:</p>
-    <details class="ds-code" open><summary>.mcp.json<button class="ds-copy" type="button">Copiar</button></summary><pre><code>{
+    <div class="ds-code-wrap"><details class="ds-code" open><summary>.mcp.json</summary><pre><code>{
   "mcpServers": {
     "design": {
       "type": "http",
@@ -2219,15 +3207,15 @@ npm i tailwindcss @tailwindcss/postcss
       "headers": { "Authorization": "Bearer &lt;tu-token&gt;" }
     }
   }
-}</code></pre></details>
+}</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <h3 style="margin-top:32px;">Ejemplo</h3>
     <p>Consultar un token de este sistema:</p>
-    <details class="ds-code"><summary>get_token<button class="ds-copy" type="button">Copiar</button></summary><pre><code>get_token(system="nocturna", name="--accent")
-→ "#52baed"</code></pre></details>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>get_token</summary><pre><code>get_token(system="nocturna", name="--accent")
+→ "#52baed"</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
     <p>Auditar código antes de integrarlo:</p>
-    <details class="ds-code"><summary>validate_code<button class="ds-copy" type="button">Copiar</button></summary><pre><code>validate_code(system="nocturna", code="…")
-→ { ok: false, issues: ["hex directo #52baed en línea 12 — usa var(--accent-400)"] }</code></pre></details>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>validate_code</summary><pre><code>validate_code(system="nocturna", code="…")
+→ { ok: false, issues: ["hex directo #52baed en línea 12 — usa var(--accent-400)"] }</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <div class="ds-callout ds-callout--info" style="margin-top:32px;">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg>
@@ -2242,14 +3230,14 @@ npm i tailwindcss @tailwindcss/postcss
 
 <div class="toast-stack" id="toastStack" role="status" aria-live="polite"></div>
 <div class="modal-overlay" id="demoModal" hidden>
-  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="demoModalTitle">
+  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="demoModalTitle" aria-describedby="demoModalDesc" tabindex="-1">
     <div class="modal__header">
       <h4 class="modal__title" id="demoModalTitle">Archivar proyecto</h4>
       <button class="icon-btn icon-btn--ghost icon-btn--sm" data-close-modal aria-label="Cerrar">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
       </button>
     </div>
-    <p style="font-size:var(--text-sm);color:var(--text-secondary);">El proyecto dejará de aparecer en el panel, pero conservará sus datos. Puedes restaurarlo cuando quieras.</p>
+    <p id="demoModalDesc" style="font-size:var(--text-sm);color:var(--text-secondary);">El proyecto dejará de aparecer en el panel, pero conservará sus datos. Puedes restaurarlo cuando quieras.</p>
     <div class="modal__footer">
       <button class="btn btn--outline" data-close-modal>Cancelar</button>
       <button class="btn btn--primary" data-close-modal>Archivar</button>
@@ -2257,7 +3245,7 @@ npm i tailwindcss @tailwindcss/postcss
   </div>
 </div>
 <div class="modal-overlay" id="demoModalLg" hidden>
-  <div class="modal modal--lg" role="dialog" aria-modal="true" aria-labelledby="demoModalLgTitle">
+  <div class="modal modal--lg" role="dialog" aria-modal="true" aria-labelledby="demoModalLgTitle" tabindex="-1">
     <div class="modal__header">
       <h4 class="modal__title" id="demoModalLgTitle">Invitar al equipo</h4>
       <button class="icon-btn icon-btn--ghost icon-btn--sm" data-close-modal aria-label="Cerrar">
@@ -2418,10 +3406,9 @@ spaces.forEach(function(s){
 
 /* ---------- Copiar código ---------- */
 document.querySelectorAll('.ds-copy').forEach(function(btn){
-  btn.addEventListener('click', function(e){
-    e.preventDefault(); e.stopPropagation();
-    var details = btn.closest('details');
-    var code = details ? details.querySelector('code') : null;
+  btn.addEventListener('click', function(){
+    var box = btn.closest('.ds-code-wrap');
+    var code = box ? box.querySelector('code') : null;
     if (code) {
       copyText(code.textContent, function(){
         btn.textContent = '¡Copiado!'; btn.classList.add('is-done');
@@ -2512,6 +3499,31 @@ tabs.querySelectorAll('.tabs__btn').forEach(function(b){
 });
 setTimeout(function(){ moveIndicator(tabs.querySelector('.is-active')); }, 100);
 
+/* ---------- Sidebar contraíble: riel de iconos ---------- */
+document.querySelectorAll('.sidebar__toggle').forEach(function(btn){
+  var nav = document.getElementById(btn.getAttribute('aria-controls'));
+  var label = btn.querySelector('.sidebar__label');
+  if (!nav) return;
+  btn.addEventListener('click', function(){
+    var collapsed = nav.classList.toggle('is-collapsed');
+    btn.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+    if (label) label.textContent = collapsed ? 'Expandir' : 'Contraer';
+  });
+});
+
+/* ---------- Chip de métrica: sumar un vaso ---------- */
+(function(){
+  var chip = document.getElementById('dsWaterChip');
+  if (!chip) return;
+  var value = chip.querySelector('.metric-chip__value');
+  var max = 8, n = 3;
+  chip.addEventListener('click', function(){
+    n = n >= max ? 0 : n + 1;
+    value.textContent = n + ' de ' + max;
+    chip.setAttribute('aria-label', 'Agua: ' + n + ' de ' + max + ' vasos. ' + (n < max ? 'Sumar un vaso' : 'Empezar de nuevo'));
+  });
+})();
+
 /* ---------- Alert ---------- */
 document.querySelectorAll('.js-alert-close').forEach(function(btn){
   btn.addEventListener('click', function(){
@@ -2565,22 +3577,272 @@ document.querySelectorAll('[data-toast]').forEach(function(b){
   });
 });
 
-/* ---------- Modal ---------- */
-function wireModal(triggerId, modalId){
+/* ---------- Modal (focus-trap + retorno de foco + Esc) ---------- */
+var FOCUSABLE_SEL = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function getFocusable(container){
+  return Array.prototype.slice.call(container.querySelectorAll(FOCUSABLE_SEL))
+    .filter(function(el){ return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length; });
+}
+function wireModal(triggerId, overlayId){
   var trigger = document.getElementById(triggerId);
-  var modalEl = document.getElementById(modalId);
-  if (!trigger || !modalEl) return;
-  trigger.addEventListener('click', function(){ modalEl.hidden = false; });
-  modalEl.addEventListener('click', function(e){
-    if (e.target === modalEl || e.target.closest('[data-close-modal]')) modalEl.hidden = true;
+  var overlay = document.getElementById(overlayId);
+  if (!trigger || !overlay) return;
+  var panel = overlay.querySelector('.modal');
+  var persistent = overlay.hasAttribute('data-modal-persistent'); /* flujos destructivos */
+  var lastFocused = null;
+
+  function open(){
+    lastFocused = document.activeElement;
+    overlay.hidden = false;
+    if (panel) panel.focus(); /* el panel tiene tabindex="-1"; el lector anuncia el título */
+  }
+  function close(){
+    if (overlay.hidden) return;
+    overlay.hidden = true;
+    if (lastFocused && typeof lastFocused.focus === 'function') lastFocused.focus(); /* retorno de foco */
+  }
+
+  trigger.addEventListener('click', open);
+
+  overlay.addEventListener('click', function(e){
+    if (e.target.closest('[data-close-modal]')) { close(); return; }
+    if (e.target === overlay && !persistent) close(); /* click en overlay */
   });
-  document.addEventListener('keydown', function(e){
-    if (e.key === 'Escape' && !modalEl.hidden) modalEl.hidden = true;
+
+  overlay.addEventListener('keydown', function(e){
+    if (e.key === 'Escape' && !persistent) { e.stopPropagation(); close(); return; }
+    if (e.key !== 'Tab' || !panel) return;
+    var f = getFocusable(panel);
+    if (!f.length) { e.preventDefault(); return; }
+    var first = f[0], last = f[f.length - 1], active = document.activeElement;
+    if (f.indexOf(active) === -1) { /* foco en el panel (tabindex=-1): entra al extremo correcto */
+      e.preventDefault(); (e.shiftKey ? last : first).focus(); return;
+    }
+    if (e.shiftKey && active === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); }
   });
 }
 wireModal('openModal', 'demoModal');
 wireModal('openModalLg', 'demoModalLg');
 
+/* ---------- Drawer (focus-trap + retorno de foco + Esc + overlay) ---------- */
+function wireDrawer(triggerId, drawerId){
+  var trigger = document.getElementById(triggerId);
+  var drawer = document.getElementById(drawerId);
+  if (!trigger || !drawer) return;
+  var panel = drawer.querySelector('.drawer__panel');
+  var lastFocused = null;
+  function open(){
+    lastFocused = document.activeElement;
+    drawer.hidden = false;
+    if (trigger.hasAttribute('aria-expanded')) trigger.setAttribute('aria-expanded', 'true');
+    /* dos pasos: pinta oculto y en el siguiente frame añade .is-open para que el transform anime */
+    requestAnimationFrame(function(){ drawer.classList.add('is-open'); });
+    if (panel) panel.focus(); /* tabindex="-1"; el lector anuncia el título */
+  }
+  function close(){
+    if (drawer.hidden) return;
+    drawer.classList.remove('is-open');
+    if (trigger.hasAttribute('aria-expanded')) trigger.setAttribute('aria-expanded', 'false');
+    var finish = function(){ drawer.hidden = true; if (lastFocused && typeof lastFocused.focus === 'function') lastFocused.focus(); };
+    if (reduced) finish(); else setTimeout(finish, 250); /* espera el slide de salida (--duration-slow) */
+  }
+  trigger.addEventListener('click', open);
+  drawer.addEventListener('click', function(e){
+    if (e.target.closest('[data-close-drawer]')) close(); /* overlay o botón de cierre */
+  });
+  drawer.addEventListener('keydown', function(e){
+    if (e.key === 'Escape') { e.stopPropagation(); close(); return; }
+    if (e.key !== 'Tab' || !panel) return;
+    var f = getFocusable(panel);
+    if (!f.length) { e.preventDefault(); return; }
+    var first = f[0], last = f[f.length - 1], active = document.activeElement;
+    if (f.indexOf(active) === -1) { e.preventDefault(); (e.shiftKey ? last : first).focus(); return; }
+    if (e.shiftKey && active === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); }
+  });
+}
+wireDrawer('openDrawer', 'demoDrawer');
+wireDrawer('openNavDrawer', 'demoNavDrawer');
+
+/* ---------- Popover (abre por CLICK; foco entra; Esc / clic fuera cierran) ---------- */
+(function(){
+  var pop = document.querySelector('#comp-popover .popover');
+  var trigger = document.getElementById('popTrigger');
+  var panel = document.getElementById('popPanel');
+  if (!pop || !trigger || !panel) return;
+  function open(){
+    pop.classList.add('is-open');
+    trigger.setAttribute('aria-expanded', 'true');
+    var f = getFocusable(panel);
+    if (f.length) f[0].focus();
+  }
+  function close(returnFocus){
+    if (!pop.classList.contains('is-open')) return;
+    pop.classList.remove('is-open');
+    trigger.setAttribute('aria-expanded', 'false');
+    if (returnFocus) trigger.focus();
+  }
+  trigger.addEventListener('click', function(e){
+    e.stopPropagation();
+    if (pop.classList.contains('is-open')) close(true); else open();
+  });
+  document.addEventListener('click', function(e){
+    if (pop.classList.contains('is-open') && !pop.contains(e.target)) close(false);
+  });
+  document.addEventListener('keydown', function(e){
+    if (e.key === 'Escape' && pop.classList.contains('is-open')) close(true);
+  });
+})();
+
+/* ---------- Combobox (filtra en vivo + teclado ↑/↓/Enter/Esc) ---------- */
+(function(){
+  var input = document.getElementById('cbInput');
+  var list = document.getElementById('cbList');
+  if (!input || !list) return;
+  var options = Array.prototype.slice.call(list.querySelectorAll('.combobox__option'));
+  var activeIndex = -1;
+  function visible(){ return options.filter(function(o){ return !o.hidden; }); }
+  function openList(){ list.hidden = false; input.setAttribute('aria-expanded', 'true'); }
+  function closeList(){ list.hidden = true; input.setAttribute('aria-expanded', 'false'); setActive(-1); }
+  function setActive(i){
+    options.forEach(function(o){ o.classList.remove('is-active'); });
+    var vis = visible();
+    activeIndex = i;
+    if (i >= 0 && i < vis.length) {
+      vis[i].classList.add('is-active');
+      input.setAttribute('aria-activedescendant', vis[i].id);
+      vis[i].scrollIntoView({ block: 'nearest' });
+    } else {
+      input.setAttribute('aria-activedescendant', '');
+    }
+  }
+  function filter(){
+    var q = input.value.trim().toLowerCase();
+    options.forEach(function(o){
+      o.hidden = o.textContent.toLowerCase().indexOf(q) === -1;
+    });
+    if (visible().length) openList(); else closeList();
+    setActive(-1);
+  }
+  function choose(opt){
+    options.forEach(function(o){ o.setAttribute('aria-selected', 'false'); o.hidden = false; });
+    opt.setAttribute('aria-selected', 'true');
+    input.value = opt.textContent.trim();
+    closeList();
+    input.focus();
+  }
+  input.addEventListener('input', filter);
+  input.addEventListener('keydown', function(e){
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (list.hidden) openList();
+      var v = visible();
+      setActive(activeIndex < 0 ? 0 : Math.min(activeIndex + 1, v.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (list.hidden) openList();
+      setActive(Math.max(activeIndex - 1, 0));
+    } else if (e.key === 'Enter') {
+      var v = visible();
+      if (!list.hidden && activeIndex >= 0 && v[activeIndex]) { e.preventDefault(); choose(v[activeIndex]); }
+    } else if (e.key === 'Escape') {
+      if (!list.hidden) { e.preventDefault(); closeList(); }
+    }
+  });
+  list.addEventListener('click', function(e){
+    var opt = e.target.closest('.combobox__option');
+    if (opt) choose(opt);
+  });
+  list.addEventListener('mousemove', function(e){
+    var opt = e.target.closest('.combobox__option');
+    if (!opt) return;
+    var i = visible().indexOf(opt);
+    if (i !== -1 && i !== activeIndex) setActive(i);
+  });
+  document.addEventListener('click', function(e){
+    if (!list.hidden && e.target !== input && !list.contains(e.target)) closeList();
+  });
+})();
+
+/* ---------- Search (botón limpiar funcional) ---------- */
+(function(){
+  var input = document.getElementById('searchInput');
+  var clear = document.getElementById('searchClear');
+  if (!input || !clear) return;
+  function sync(){ clear.hidden = input.value.length === 0; }
+  input.addEventListener('input', sync);
+  clear.addEventListener('click', function(){ input.value = ''; sync(); input.focus(); });
+  sync();
+})();
+
+/* ---------- Checkbox indeterminate (solo se puede fijar por JS) ---------- */
+var cbInd = document.getElementById('cbIndeterminate');
+if (cbInd) cbInd.indeterminate = true;
+
+/* ---------- Tabla: orden por columna + seleccionar todo ---------- */
+(function(){
+  var table = document.getElementById('demoSortTable');
+  if (!table) return;
+  var tbody = table.tBodies[0];
+  var headRow = table.tHead.rows[0];
+
+  function cellValue(row, idx){
+    var cell = row.cells[idx];
+    if (!cell) return '';
+    var raw = cell.getAttribute('data-sort');
+    if (raw !== null) return parseFloat(raw);
+    if (cell.classList.contains('num')) return parseFloat(cell.textContent.replace(/[^\d.-]/g, '')) || 0;
+    return cell.textContent.trim().toLowerCase();
+  }
+
+  Array.prototype.forEach.call(headRow.cells, function(th, idx){
+    var btn = th.querySelector('.th-sort');
+    if (!btn) return;
+    btn.addEventListener('click', function(){
+      var current = th.getAttribute('aria-sort');
+      var dir = current === 'ascending' ? 'descending' : 'ascending';
+      /* una sola columna ordenada a la vez */
+      Array.prototype.forEach.call(headRow.cells, function(other){
+        if (other !== th && other.hasAttribute('aria-sort')) other.setAttribute('aria-sort', 'none');
+      });
+      th.setAttribute('aria-sort', dir);
+      var rows = Array.prototype.slice.call(tbody.rows);
+      rows.sort(function(a, b){
+        var va = cellValue(a, idx), vb = cellValue(b, idx);
+        if (va < vb) return dir === 'ascending' ? -1 : 1;
+        if (va > vb) return dir === 'ascending' ? 1 : -1;
+        return 0;
+      });
+      rows.forEach(function(r){ tbody.appendChild(r); });
+    });
+  });
+
+  /* Seleccionar todo: refleja el estado (todas / ninguna / indeterminate) */
+  var selectAll = document.getElementById('tblSelectAll');
+  function rowBoxes(){ return Array.prototype.slice.call(tbody.querySelectorAll('.col-select .checkbox')); }
+  function syncSelectAll(){
+    if (!selectAll) return;
+    var boxes = rowBoxes(), checked = boxes.filter(function(b){ return b.checked; }).length;
+    selectAll.checked = checked === boxes.length && boxes.length > 0;
+    selectAll.indeterminate = checked > 0 && checked < boxes.length;
+  }
+  function syncRow(box){
+    var tr = box.closest('tr');
+    if (tr) tr.classList.toggle('row--selected', box.checked);
+  }
+  if (selectAll) {
+    selectAll.addEventListener('change', function(){
+      rowBoxes().forEach(function(b){ b.checked = selectAll.checked; syncRow(b); });
+      selectAll.indeterminate = false;
+    });
+  }
+  rowBoxes().forEach(function(b){
+    b.addEventListener('change', function(){ syncRow(b); syncSelectAll(); });
+  });
+  syncSelectAll(); /* estado inicial: una fila marcada → indeterminate */
+})();
+
 /* ---------- Progress demo ---------- */
 var seq = [22, 47, 64, 81, 95], seqI = 2;
 function paintProgressRing(v){
@@ -2708,6 +3970,128 @@ if (mReplayBtn) {
     });
   });
 }
+
+/* ---------- DatePicker (calendario en popover; flechas + Enter/Esc) ---------- */
+(function(){
+  var wrap = document.getElementById('datepicker');
+  var input = document.getElementById('dpInput');
+  var cal = document.getElementById('dpCalendar');
+  var grid = document.getElementById('dpGrid');
+  var title = document.getElementById('dpTitle');
+  var prev = document.getElementById('dpPrev');
+  var next = document.getElementById('dpNext');
+  if (!wrap || !input || !cal || !grid) return;
+
+  var MONTHS = ['enero','febrero','marzo','abril','mayo','junio','julio','agosto','septiembre','octubre','noviembre','diciembre'];
+  var today = new Date(2026, 6, 10);     // 10 de julio de 2026 (fecha del demo)
+  var selected = new Date(2026, 6, 15);  // día seleccionado inicial
+  var view = new Date(2026, 6, 1);       // mes visible
+  var focusDate = new Date(selected);    // día con el roving tabindex
+
+  function sameDay(a, b){ return a.getFullYear()===b.getFullYear() && a.getMonth()===b.getMonth() && a.getDate()===b.getDate(); }
+  function fmtLabel(d){ return d.getDate() + ' de ' + MONTHS[d.getMonth()] + ' de ' + d.getFullYear(); }
+
+  function render(){
+    var y = view.getFullYear(), m = view.getMonth();
+    title.textContent = MONTHS[m] + ' ' + y;
+    grid.innerHTML = '';
+    var first = new Date(y, m, 1);
+    var startOffset = (first.getDay() + 6) % 7;   // la semana empieza en lunes
+    var start = new Date(y, m, 1 - startOffset);
+    for (var w = 0; w < 6; w++) {
+      var row = document.createElement('div');
+      row.className = 'calendar__week'; row.setAttribute('role', 'row');
+      for (var d = 0; d < 7; d++) {
+        var cur = new Date(start.getFullYear(), start.getMonth(), start.getDate() + (w*7 + d));
+        var btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'calendar__day';
+        btn.setAttribute('role', 'gridcell');
+        btn.textContent = cur.getDate();
+        btn.setAttribute('aria-label', fmtLabel(cur));
+        btn.dataset.y = cur.getFullYear(); btn.dataset.m = cur.getMonth(); btn.dataset.d = cur.getDate();
+        if (cur.getMonth() !== m) btn.classList.add('calendar__day--outside');
+        if (sameDay(cur, today)) { btn.classList.add('calendar__day--today'); btn.setAttribute('aria-current', 'date'); }
+        var isSel = sameDay(cur, selected);
+        btn.setAttribute('aria-selected', isSel ? 'true' : 'false');
+        if (isSel) btn.classList.add('calendar__day--selected');
+        btn.tabIndex = sameDay(cur, focusDate) ? 0 : -1;
+        row.appendChild(btn);
+      }
+      grid.appendChild(row);
+    }
+  }
+  function focusRoving(){ var f = grid.querySelector('.calendar__day[tabindex="0"]'); if (f) f.focus(); }
+  function open(){ render(); cal.hidden = false; focusRoving(); }
+  function close(returnFocus){
+    if (cal.hidden) return;
+    cal.hidden = true;
+    if (returnFocus) input.focus();
+  }
+  function setView(y, m){ view = new Date(y, m, 1); render(); }
+  function moveFocus(newDate){
+    focusDate = newDate;
+    setView(newDate.getFullYear(), newDate.getMonth());
+    focusRoving();
+  }
+  function choose(y, m, d){
+    selected = new Date(y, m, d);
+    focusDate = new Date(selected);
+    input.value = fmtLabel(selected);
+    close(true);
+  }
+
+  input.addEventListener('click', function(){ if (cal.hidden) open(); else close(true); });
+  prev.addEventListener('click', function(){ focusDate = new Date(view.getFullYear(), view.getMonth() - 1, Math.min(focusDate.getDate(), 28)); setView(view.getFullYear(), view.getMonth() - 1); });
+  next.addEventListener('click', function(){ focusDate = new Date(view.getFullYear(), view.getMonth() + 1, Math.min(focusDate.getDate(), 28)); setView(view.getFullYear(), view.getMonth() + 1); });
+
+  grid.addEventListener('click', function(e){
+    var b = e.target.closest('.calendar__day');
+    if (!b || b.disabled) return;
+    choose(+b.dataset.y, +b.dataset.m, +b.dataset.d);
+  });
+  grid.addEventListener('keydown', function(e){
+    var b = e.target.closest('.calendar__day');
+    if (!b) return;
+    var cur = new Date(+b.dataset.y, +b.dataset.m, +b.dataset.d), delta = 0;
+    if (e.key === 'ArrowLeft') delta = -1;
+    else if (e.key === 'ArrowRight') delta = 1;
+    else if (e.key === 'ArrowUp') delta = -7;
+    else if (e.key === 'ArrowDown') delta = 7;
+    else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); choose(+b.dataset.y, +b.dataset.m, +b.dataset.d); return; }
+    else if (e.key === 'Escape') { e.preventDefault(); close(true); return; }
+    else if (e.key === 'Home') { e.preventDefault(); moveFocus(new Date(cur.getFullYear(), cur.getMonth(), cur.getDate() - ((cur.getDay()+6)%7))); return; }
+    else if (e.key === 'End') { e.preventDefault(); moveFocus(new Date(cur.getFullYear(), cur.getMonth(), cur.getDate() + (6 - ((cur.getDay()+6)%7)))); return; }
+    else return;
+    e.preventDefault();
+    moveFocus(new Date(cur.getFullYear(), cur.getMonth(), cur.getDate() + delta));
+  });
+  document.addEventListener('click', function(e){
+    if (!cal.hidden && !wrap.contains(e.target)) close(false);
+  });
+
+  render(); // estado inicial coherente aunque el panel esté oculto
+})();
+
+/* ---------- FileUpload (dragover + quitar ítem) ---------- */
+(function(){
+  var fu = document.getElementById('fileUpload');
+  var list = document.getElementById('fuList');
+  if (!fu) return;
+  var depth = 0; // cuenta enter/leave anidados para no parpadear con hijos
+  fu.addEventListener('dragenter', function(e){ e.preventDefault(); depth++; fu.classList.add('is-dragover'); });
+  fu.addEventListener('dragover', function(e){ e.preventDefault(); });
+  fu.addEventListener('dragleave', function(){ depth--; if (depth <= 0) { depth = 0; fu.classList.remove('is-dragover'); } });
+  fu.addEventListener('drop', function(e){ e.preventDefault(); depth = 0; fu.classList.remove('is-dragover'); });
+  if (list) {
+    list.addEventListener('click', function(e){
+      var btn = e.target.closest('.file-upload__remove');
+      if (!btn) return;
+      var item = btn.closest('.file-upload__item');
+      if (item) item.parentNode.removeChild(item);
+    });
+  }
+})();
 })();
 </script>
 </body>