@higinio/design-mcp 0.1.0 → 0.1.1

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;
 
@@ -156,27 +158,27 @@
   --border-strong: #b9c3d1;
   --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 +389,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;
@@ -530,6 +534,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 +623,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
    ============================================================ */
@@ -820,9 +841,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
    ============================================================ */
@@ -1007,6 +1058,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-disabled); }
+.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-disabled); }
+@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-*)
@@ -1220,6 +1538,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 +1610,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>
@@ -1386,13 +1712,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>
@@ -1474,12 +1800,23 @@ 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;
   &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>
   </section>
@@ -1573,11 +1910,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>
+&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>
   </section>
 
   <!-- ================= SWITCH ================= -->
@@ -1618,6 +1958,25 @@ html { scroll-behavior: smooth; }
     <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;
 &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>
+
+    <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>
+    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></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>
   </section>
 
   <!-- ================= DIVIDER ================= -->
@@ -1651,7 +2010,7 @@ 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>
@@ -1802,24 +2161,30 @@ html { scroll-behavior: smooth; }
   <!-- ================= 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;
+  &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>
   </section>
 
   <!-- ================= MENU ================= -->
@@ -1845,23 +2210,73 @@ html { scroll-behavior: smooth; }
   <!-- ================= 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;
+    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></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>
   </section>
 
   <!-- ================= STAT ================= -->
@@ -2007,6 +2422,365 @@ html { scroll-behavior: smooth; }
 &lt;span class="code"&gt;var(--accent-400)&lt;/span&gt;</code></pre></details>
   </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>
+    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></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>
+  </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>
+    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></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>
+  </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>
+    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></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>
+  </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>
+    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></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>
+  </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-expanded="false" 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__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="grid" aria-labelledby="dpTitle"></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="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-expanded="false" 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__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="grid"&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;!-- JS: clic abre; flechas mueven el día (±1, ±7) cruzando meses; Enter elige; Esc cierra. --&gt;</code></pre></details>
+  </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>
+    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></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>
+  </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>
+    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></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>
+  </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>
+    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></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>
+  </section>
+
   <!-- ================= MOTION ================= -->
   <section id="motion">
     <h2>Motion</h2>
@@ -2042,16 +2816,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>
@@ -2117,7 +2897,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;
@@ -2150,7 +2930,18 @@ 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 los dos sistemas en subrutas <span class="code">/celeste/</span> y <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>
+    <details class="ds-code" open><summary>terminal + CSS de entrada<button class="ds-copy" type="button">Copiar</button></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>
 
     <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>
@@ -2242,14 +3033,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 +3048,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">
@@ -2565,22 +3356,269 @@ 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;
+    /* 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');
+    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');
+
+/* ---------- 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 +3746,129 @@ 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; input.setAttribute('aria-expanded', 'true'); focusRoving(); }
+  function close(returnFocus){
+    if (cal.hidden) return;
+    cal.hidden = true;
+    input.setAttribute('aria-expanded', 'false');
+    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>