@higinio/design-mcp 0.1.1 → 0.2.0

package/assets/nocturna/styleguide.html

@@ -51,7 +51,10 @@
   --surface-2: var(--night-800);
   --surface-3: var(--night-700);
   --border: var(--night-500);
-  --border-strong: var(--night-600);
+  /* night-400, no night-600: en dark, oscurecer un borde lo DEBILITA (principio 2:
+     la elevación se comunica aclarando). n600 daba 1.46:1 vs los 1.97:1 del borde
+     normal — el énfasis se veía más flojo. n400 = 3.99:1 sobre surface-1. */
+  --border-strong: var(--night-400);
   --text-primary: var(--night-100);
   --text-secondary: var(--night-200);
   --text-muted: var(--night-300);
@@ -122,7 +125,7 @@
   --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
   --radius-xl: 24px; --radius-full: 9999px;
   --border-default: 1px solid var(--night-500);
-  --border-emphasis: 1px solid var(--night-600);
+  --border-emphasis: 1px solid var(--night-400); /* ver --border-strong */
   --focus-ring: 2px solid var(--accent-400);
   --focus-ring-offset: 2px;
 
@@ -155,7 +158,9 @@
   --surface-2: #ffffff;
   --surface-3: #eaf1f7;
   --border: #d8dfe8;
-  --border-strong: #b9c3d1;
+  /* border-strong NO se redefine en claro: night-400 (:root) cumple 1.4.11 en
+     AMBOS temas (3.26-3.99:1 en dark, 4.27-4.87:1 en light). #b9c3d1 daba
+     1.53-1.78:1, bajo el mínimo de 3:1 para UI. */
   --text-primary: #14171f;
   --text-secondary: #3d4354;
   --text-muted: #5f6575;
@@ -426,7 +431,7 @@ a:hover { color: var(--link-hover); }
 .input-wrap .input { padding-left: 40px; }
 
 .textarea { min-height: 96px; padding: 12px 14px; resize: vertical; line-height: var(--leading-body); }
-.field__count { font-size: var(--text-xs); color: var(--text-disabled); text-align: right; margin-top: 4px; }
+.field__count { font-size: var(--text-xs); color: var(--text-muted); text-align: right; margin-top: 4px; }
 
 /* Select nativo estilizado (el menú custom usa .menu) */
 .select-wrap { position: relative; }
@@ -669,6 +674,32 @@ a:hover { color: var(--link-hover); }
 .stat__delta--down { color: var(--danger); }
 .stat__delta--neutral { color: var(--text-muted); }
 
+/* Chip de métrica: rótulo y valor en una pastilla de una línea */
+.metric-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.metric-chip {
+  display: inline-flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-1) var(--space-3);
+  border: 1px solid var(--border); border-radius: var(--radius-full);
+  background: var(--surface-1);
+  font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-snug);
+  color: var(--text-secondary); white-space: nowrap;
+}
+.metric-chip svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
+.metric-chip__value {
+  font-family: var(--font-mono); font-weight: 500; color: var(--link);
+  font-variant-numeric: tabular-nums;
+}
+button.metric-chip {
+  min-height: var(--touch-target); padding-inline: var(--space-4);
+  cursor: pointer; text-align: left;
+  transition: background-color var(--duration-fast) var(--ease-out),
+              border-color var(--duration-fast) var(--ease-out),
+              transform var(--duration-instant) var(--ease-out);
+}
+button.metric-chip:hover { background: var(--outline-hover-bg); border-color: var(--border-hover); }
+button.metric-chip:active { background: var(--outline-active-bg); transform: scale(.98); }
+button.metric-chip:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
+
 /* ============================================================
    13B. PAGINATION — .pagination (activa: fondo acento + peso, no solo color)
    ============================================================ */
@@ -751,7 +782,7 @@ a:hover { color: var(--link-hover); }
 }
 .alert > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
 .alert__title { font-weight: 600; margin: 0 0 2px; color: inherit; }
-.alert__body { margin: 0; color: inherit; opacity: .88; }
+.alert__body { margin: 0; color: inherit; }
 .alert__close {
   margin-left: auto; flex: none; display: grid; place-items: center;
   width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm);
@@ -913,6 +944,70 @@ a:hover { color: var(--link-hover); }
 .sidebar__item svg { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
 .sidebar__item.is-active svg { color: var(--sidebar-active-icon); }
 
+/* Grupos con rótulo dentro del sidebar */
+.sidebar__group { display: flex; flex-direction: column; gap: 2px; }
+.sidebar__group + .sidebar__group { margin-top: var(--space-4); }
+.sidebar__group-label {
+  padding: 0 12px var(--space-1);
+  font-size: var(--text-xs); font-weight: 500; text-transform: uppercase;
+  letter-spacing: var(--tracking-overline); color: var(--text-muted); white-space: nowrap;
+}
+.sidebar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Sidebar contraíble: expandido 260 px, riel de iconos de 64 px.
+   El ancho cambia sin transición; solo los rótulos se funden con opacity y transform. */
+.sidebar--collapsible .sidebar__label {
+  transition: opacity var(--duration-fast) var(--ease-out),
+              transform var(--duration-fast) var(--ease-out);
+}
+.sidebar__toggle {
+  margin-top: auto; width: 100%; border: 0; background: transparent;
+  font-family: var(--font-body); text-align: left; cursor: pointer;
+}
+.sidebar.is-collapsed { width: 64px; }
+.sidebar.is-collapsed .sidebar__item { position: relative; justify-content: center; padding-inline: 0; }
+.sidebar.is-collapsed .sidebar__toggle svg { transform: rotate(180deg); }
+.sidebar.is-collapsed .sidebar__group + .sidebar__group { margin-top: var(--space-2); }
+/* En el riel, el rótulo de grupo es un separador de 1 px; su texto sigue en el árbol de accesibilidad */
+.sidebar.is-collapsed .sidebar__group-label {
+  height: 1px; padding: 0; margin: 0 var(--space-2) var(--space-2);
+  overflow: hidden; color: transparent; background: var(--border);
+}
+/* Oculto a la vista pero accesible (patrón de .visually-hidden) */
+.sidebar.is-collapsed .sidebar__label,
+.sidebar.is-collapsed .sidebar__group:first-child > .sidebar__group-label {
+  position: absolute; width: 1px; height: 1px; margin: -1px;
+  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
+}
+.sidebar.is-collapsed .sidebar__label {
+  background: var(--tooltip-bg); border: 1px solid var(--tooltip-border); border-radius: var(--radius-sm);
+  color: var(--tooltip-text); font-size: var(--text-xs); line-height: 16px;
+  pointer-events: none; z-index: 70;
+  opacity: 0; transform: translateX(-4px);
+}
+/* Tooltip del riel: el propio rótulo aparece a la derecha del ítem, también con teclado */
+.sidebar.is-collapsed .sidebar__item:focus-visible .sidebar__label {
+  left: calc(100% + 8px); top: calc(50% - 15px); width: auto; height: auto;
+  margin: 0; padding: 6px 10px; clip-path: none; overflow: visible;
+  opacity: 1; transform: none; transition-delay: 400ms;
+}
+/* Por hover solo con puntero real — en touch quedaría pegado tras el tap */
+@media (hover: hover) and (pointer: fine) {
+  .sidebar.is-collapsed .sidebar__item:hover .sidebar__label {
+    left: calc(100% + 8px); top: calc(50% - 15px); width: auto; height: auto;
+    margin: 0; padding: 6px 10px; clip-path: none; overflow: visible;
+    opacity: 1; transform: none; transition-delay: 400ms;
+  }
+}
+/* Por debajo de 768 px la navegación vive en un Drawer --left, que abre el botón ☰
+   .sidebar-trigger (combinado con .icon-btn); desde 768 px el sidebar es fijo y el botón sobra */
+@media (max-width: 767px) {
+  .sidebar--collapsible { display: none; }
+}
+@media (min-width: 768px) {
+  .sidebar-trigger { display: none; }
+}
+
 .tabs { position: relative; display: flex; gap: var(--space-2); border-bottom: 1px solid var(--border-strong); }
 .tabs__btn {
   padding: 10px 14px; border: 0; background: transparent; cursor: pointer;
@@ -1223,7 +1318,7 @@ a:hover { color: var(--link-hover); }
 .calendar__day--today { border-color: var(--accent-400); color: var(--accent-300); }
 /* Seleccionado: fondo de acento + texto oscuro + peso — no depende solo del color */
 .calendar__day--selected { background: var(--accent-400); border-color: var(--accent-400); color: var(--text-on-accent); font-weight: 600; }
-.calendar__day--outside { color: var(--text-disabled); }
+.calendar__day--outside { color: var(--text-muted); }
 .calendar__day[disabled] { color: var(--text-disabled); opacity: .5; cursor: not-allowed; }
 
 /* ============================================================
@@ -1242,7 +1337,7 @@ a:hover { color: var(--link-hover); }
 }
 .file-upload__label > svg { width: 28px; height: 28px; color: var(--text-muted); }
 .file-upload__button { color: var(--link); font-weight: 600; }
-.file-upload__hint { font-size: var(--text-xs); color: var(--text-disabled); }
+.file-upload__hint { font-size: var(--text-xs); color: var(--text-muted); }
 @media (hover: hover) and (pointer: fine) {
   .file-upload__label:hover { border-color: var(--border-hover); background: var(--surface-2); color: var(--text-secondary); }
 }
@@ -1389,10 +1484,23 @@ html { scroll-behavior: smooth; }
 .ds-demo--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
 .ds-demo:has(table) { overflow-x: auto; }
 
+/* Demo del sidebar contraíble: rejilla auto 1fr, el contenido sigue al riel sin animar el ancho */
+.ds-app-demo { display: grid; grid-template-columns: auto 1fr; align-items: stretch; gap: 0; min-height: 400px; padding: 0; }
+.ds-app-demo > .sidebar { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
+.ds-app-demo__main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; padding: var(--space-6); }
+@media (max-width: 767px) {
+  .ds-app-demo { grid-template-columns: 1fr; min-height: 0; }
+}
+
 .ds-code { margin-top: var(--space-3); border: 1px solid var(--row-border); border-radius: var(--radius-md); overflow: hidden; }
+/* «Copiar» es hermano del details, no hijo del summary (un control no puede
+   anidarse en otro), y se superpone al extremo derecho de la cabecera. */
+.ds-code-wrap { position: relative; margin-top: var(--space-3); }
+.ds-code-wrap > .ds-code { margin-top: 0; }
+.ds-code-wrap > .ds-copy { position: absolute; top: 11px; right: 17px; }
 .ds-code summary {
   display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
-  padding: 10px 16px; cursor: pointer; user-select: none;
+  min-height: 45px; padding: 10px 96px 10px 16px; cursor: pointer; user-select: none;
   font-size: var(--text-sm); color: var(--text-muted); list-style: none;
 }
 .ds-code summary::-webkit-details-marker { display: none; }
@@ -1674,11 +1782,11 @@ html { scroll-behavior: smooth; }
       <div class="ds-elev-demo" style="background:var(--bg);border:1px dashed var(--border);">Nivel 0<br>night-950</div>
       <div class="ds-elev-demo" style="background:var(--surface-1);box-shadow:var(--shadow-1);border:1px solid var(--row-border);">Nivel 1<br>night-900 + shadow-1</div>
       <div class="ds-elev-demo" style="background:var(--surface-2);box-shadow:var(--shadow-2);border:1px solid var(--row-border);">Nivel 2<br>night-800 + shadow-2</div>
-      <div class="ds-elev-demo" style="background:var(--surface-2);box-shadow:var(--shadow-3);border:1px solid var(--border-strong);">Nivel 3<br>night-800 + borde night-600 + shadow-3</div>
+      <div class="ds-elev-demo" style="background:var(--surface-2);box-shadow:var(--shadow-3);border:1px solid var(--border-strong);">Nivel 3<br>night-800 + borde night-400 + shadow-3</div>
     </div>
     <h3 style="margin-top:32px;">Glow de acento</h3>
     <div class="ds-demo">
-      <div class="ds-elev-demo" style="background:var(--surface-1);box-shadow:var(--glow-accent);max-width:280px;">glow-accent<br><span style="color:var(--text-disabled)">máximo uno por pantalla</span></div>
+      <div class="ds-elev-demo" style="background:var(--surface-1);box-shadow:var(--glow-accent);max-width:280px;">glow-accent<br><span style="color:var(--text-muted)">máximo uno por pantalla</span></div>
     </div>
   </section>
 
@@ -1732,16 +1840,16 @@ html { scroll-behavior: smooth; }
       <button class="btn btn--primary">Mediano</button>
       <button class="btn btn--primary btn--lg">Grande</button>
       <button class="btn btn--outline"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-7-7v14"/></svg>Con icono</button>
-      <button class="btn btn--primary" style="min-width:160px;"><span class="spinner" style="color:currentColor;"></span></button>
+      <button class="btn btn--primary" style="min-width:160px;" aria-label="Cargando"><span class="spinner" style="color:currentColor;"></span></button>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;button class="btn btn--primary"&gt;Guardar cambios&lt;/button&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;button class="btn btn--primary"&gt;Guardar cambios&lt;/button&gt;
 &lt;button class="btn btn--secondary"&gt;Ver informe&lt;/button&gt;
 &lt;button class="btn btn--outline"&gt;Exportar&lt;/button&gt;
 &lt;button class="btn btn--ghost"&gt;Cancelar&lt;/button&gt;
 &lt;button class="btn btn--danger"&gt;Eliminar cuenta&lt;/button&gt;
 
 &lt;!-- Tamaños: .btn--sm (36px) · default (44px) · .btn--lg (52px) --&gt;
-&lt;!-- Loading: fijar min-width y sustituir el texto por .spinner --&gt;</code></pre></details>
+&lt;!-- Loading: fijar min-width y sustituir el texto por .spinner --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= ICON BUTTON ================= -->
@@ -1755,10 +1863,10 @@ html { scroll-behavior: smooth; }
       <button class="icon-btn icon-btn--outline icon-btn--sm" aria-label="Copiar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="14" height="14" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button>
       <button class="icon-btn icon-btn--outline" disabled aria-label="Deshabilitado"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;button class="icon-btn icon-btn--outline" aria-label="Buscar"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;button class="icon-btn icon-btn--outline" aria-label="Buscar"&gt;
   &lt;svg&gt;…&lt;/svg&gt;
 &lt;/button&gt;
-&lt;!-- Variantes: --outline · --ghost · --accent | Tamaños: --sm (36) · default (44) · --lg (52) --&gt;</code></pre></details>
+&lt;!-- Variantes: --outline · --ghost · --accent | Tamaños: --sm (36) · default (44) · --lg (52) --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= SPINNER ================= -->
@@ -1770,8 +1878,8 @@ html { scroll-behavior: smooth; }
       <span class="spinner" style="width:24px;height:24px;"></span>
       <span class="spinner" style="width:32px;height:32px;color:var(--text-muted);"></span>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;span class="spinner"&gt;&lt;/span&gt;
-&lt;!-- Hereda currentColor; default accent-400 --&gt;</code></pre></details>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;span class="spinner"&gt;&lt;/span&gt;
+&lt;!-- Hereda currentColor; default accent-400 --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= INPUT ================= -->
@@ -1806,7 +1914,7 @@ html { scroll-behavior: smooth; }
         <span class="field__help">El asterisco es decorativo; lo obligatorio lo marca <span class="code">required</span>.</span>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="field"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="field"&gt;
   &lt;label class="field__label" for="email"&gt;Correo&lt;/label&gt;
   &lt;input class="input" id="email" type="email" placeholder="tu@correo.com"&gt;
   &lt;span class="field__help"&gt;Texto de ayuda.&lt;/span&gt;
@@ -1818,7 +1926,7 @@ html { scroll-behavior: smooth; }
   &lt;input class="input" id="name" type="text" required aria-required="true"&gt;
 &lt;/div&gt;
 &lt;!-- Estados: .input--error (+ .field__error) · .input--success · disabled --&gt;
-&lt;!-- Icono leading: envolver en .input-wrap con un svg antes del input --&gt;</code></pre></details>
+&lt;!-- Icono leading: envolver en .input-wrap con un svg antes del input --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= TEXTAREA ================= -->
@@ -1832,11 +1940,11 @@ html { scroll-behavior: smooth; }
         <span class="field__count">0 / 280</span>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="field"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="field"&gt;
   &lt;label class="field__label" for="desc"&gt;Descripción&lt;/label&gt;
   &lt;textarea class="textarea" id="desc" placeholder="Describe el proyecto…"&gt;&lt;/textarea&gt;
   &lt;span class="field__count"&gt;0 / 280&lt;/span&gt;
-&lt;/div&gt;</code></pre></details>
+&lt;/div&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= SELECT ================= -->
@@ -1854,9 +1962,9 @@ html { scroll-behavior: smooth; }
         </div>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="select-wrap"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="select-wrap"&gt;
   &lt;select class="select"&gt;&lt;option&gt;Opción&lt;/option&gt;&lt;/select&gt;
-&lt;/div&gt;</code></pre></details>
+&lt;/div&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= SEGMENTEDCONTROL ================= -->
@@ -1875,11 +1983,11 @@ html { scroll-behavior: smooth; }
         <input type="radio" name="seg-per" id="seg-12m"><label for="seg-12m">12 m</label>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="segmented" role="radiogroup" aria-label="Vista"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="segmented" role="radiogroup" aria-label="Vista"&gt;
   &lt;input type="radio" name="vista" id="lista" checked&gt;&lt;label for="lista"&gt;Lista&lt;/label&gt;
   &lt;input type="radio" name="vista" id="tablero"&gt;&lt;label for="tablero"&gt;Tablero&lt;/label&gt;
 &lt;/div&gt;
-&lt;!-- Compacto: añadir segmented--sm --&gt;</code></pre></details>
+&lt;!-- Compacto: añadir segmented--sm --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= SLIDER ================= -->
@@ -1896,12 +2004,12 @@ html { scroll-behavior: smooth; }
       </div>
       <input class="slider js-slider" type="range" min="0" max="100" value="70" disabled aria-label="Slider deshabilitado">
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="slider-row"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="slider-row"&gt;
   &lt;span class="slider-label"&gt;Límite de gasto&lt;/span&gt;
   &lt;span class="slider-value"&gt;$ 350&lt;/span&gt;
 &lt;/div&gt;
 &lt;input class="slider" type="range" min="0" max="1000" value="350"&gt;
-&lt;!-- JS: --slider-fill = ((v-min)/(max-min))*100 + '%' --&gt;</code></pre></details>
+&lt;!-- JS: --slider-fill = ((v-min)/(max-min))*100 + '%' --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= CHECKBOX Y RADIO ================= -->
@@ -1914,10 +2022,10 @@ html { scroll-behavior: smooth; }
       <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;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;label class="check-row"&gt;&lt;input type="checkbox" class="checkbox"&gt; Etiqueta&lt;/label&gt;
 &lt;label class="check-row"&gt;&lt;input type="radio" name="g" class="radio"&gt; Opción&lt;/label&gt;
 &lt;!-- Indeterminate = tercer estado (guion horizontal). Solo por JS: --&gt;
-&lt;!-- document.querySelector('.checkbox').indeterminate = true; --&gt;</code></pre></details>
+&lt;!-- document.querySelector('.checkbox').indeterminate = true; --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= SWITCH ================= -->
@@ -1926,7 +2034,7 @@ html { scroll-behavior: smooth; }
     <div class="ds-demo" style="gap:32px;">
       <label class="check-row"><input type="checkbox" class="switch" checked> Modo compacto</label>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;label class="check-row"&gt;&lt;input type="checkbox" class="switch"&gt; Activar&lt;/label&gt;</code></pre></details>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;label class="check-row"&gt;&lt;input type="checkbox" class="switch"&gt; Activar&lt;/label&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= BADGES ================= -->
@@ -1940,8 +2048,8 @@ html { scroll-behavior: smooth; }
       <span class="tag">diseño <button class="tag__x" aria-label="Quitar etiqueta diseño">×</button></span>
       <span class="tag">frontend <button class="tag__x" aria-label="Quitar etiqueta frontend">×</button></span>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;span class="badge badge--success"&gt;Activo&lt;/span&gt;
-&lt;span class="tag"&gt;diseño &lt;button class="tag__x" aria-label="Quitar"&gt;×&lt;/button&gt;&lt;/span&gt;</code></pre></details>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;span class="badge badge--success"&gt;Activo&lt;/span&gt;
+&lt;span class="tag"&gt;diseño &lt;button class="tag__x" aria-label="Quitar"&gt;×&lt;/button&gt;&lt;/span&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= AVATAR ================= -->
@@ -1955,9 +2063,9 @@ html { scroll-behavior: smooth; }
       <span class="avatar avatar--lg">hs<span class="avatar__dot avatar__dot--busy"></span></span>
       <span class="avatar avatar--xl">hs<span class="avatar__dot avatar__dot--away"></span></span>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;span class="avatar"&gt;HS&lt;span class="avatar__dot avatar__dot--online"&gt;&lt;/span&gt;&lt;/span&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;span class="avatar"&gt;HS&lt;span class="avatar__dot avatar__dot--online"&gt;&lt;/span&gt;&lt;/span&gt;
 &lt;!-- Tamaños: --xs 24 · --sm 32 · default 40 · --lg 48 · --xl 64 --&gt;
-&lt;!-- Con imagen: &lt;span class="avatar"&gt;&lt;img src="…" alt="Nombre"&gt;&lt;/span&gt; --&gt;</code></pre></details>
+&lt;!-- Con imagen: &lt;span class="avatar"&gt;&lt;img src="…" alt="Nombre"&gt;&lt;/span&gt; --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <h3 style="margin-top:var(--space-8);">AvatarGroup</h3>
     <p>Avatares solapados 8px con borde <span class="code">2px</span> del color del fondo; el chip <span class="code">.avatar-group__more</span> resume los ocultos.</p>
@@ -1970,13 +2078,13 @@ html { scroll-behavior: smooth; }
         <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;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="avatar-group" role="group" aria-label="Equipo del proyecto"&gt;
   &lt;span class="avatar"&gt;HS&lt;/span&gt;
   &lt;span class="avatar"&gt;ML&lt;/span&gt;
   &lt;span class="avatar"&gt;AR&lt;/span&gt;
   &lt;span class="avatar avatar-group__more"&gt;+3&lt;/span&gt;
 &lt;/div&gt;
-&lt;!-- Solapamiento -8px + borde del color del fondo (--surface-1 / --bg). --&gt;</code></pre></details>
+&lt;!-- Solapamiento -8px + borde del color del fondo (--surface-1 / --bg). --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= DIVIDER ================= -->
@@ -1990,9 +2098,9 @@ html { scroll-behavior: smooth; }
         <span>Filtros</span><span class="divider--vertical" role="separator"></span><span>Ordenar</span><span class="divider--vertical" role="separator"></span><span>Exportar</span>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;hr class="divider"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;hr class="divider"&gt;
 &lt;div class="divider--label" role="separator"&gt;o continúa con&lt;/div&gt;
-&lt;span class="divider--vertical" role="separator"&gt;&lt;/span&gt;</code></pre></details>
+&lt;span class="divider--vertical" role="separator"&gt;&lt;/span&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= ACCORDION ================= -->
@@ -2014,7 +2122,7 @@ html { scroll-behavior: smooth; }
         </div>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="accordion"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="accordion"&gt;
   &lt;div class="accordion__item"&gt;
     &lt;button class="accordion__header" aria-expanded="false"&gt;
       Pregunta &lt;svg&gt;chevron&lt;/svg&gt;
@@ -2024,7 +2132,7 @@ html { scroll-behavior: smooth; }
     &lt;/div&gt;&lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;
-&lt;!-- JS: alternar aria-expanded en el header --&gt;</code></pre></details>
+&lt;!-- JS: alternar aria-expanded en el header --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= TOOLTIP ================= -->
@@ -2041,10 +2149,10 @@ html { scroll-behavior: smooth; }
         <span class="tooltip" role="tooltip">Ajustes</span>
       </span>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;span class="has-tooltip"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;span class="has-tooltip"&gt;
   &lt;button class="btn btn--outline"&gt;Pasa el cursor&lt;/button&gt;
   &lt;span class="tooltip" role="tooltip"&gt;Exportar como CSV&lt;/span&gt;
-&lt;/span&gt;</code></pre></details>
+&lt;/span&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= ALERT ================= -->
@@ -2085,7 +2193,7 @@ html { scroll-behavior: smooth; }
         <button class="alert__close js-alert-close" aria-label="Cerrar aviso"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="alert alert--warning" role="status"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="alert alert--warning" role="status"&gt;
   &lt;svg&gt;…icono…&lt;/svg&gt;
   &lt;div&gt;
     &lt;p class="alert__title"&gt;Tu plan expira en 5 días&lt;/p&gt;
@@ -2093,7 +2201,7 @@ html { scroll-behavior: smooth; }
   &lt;/div&gt;
   &lt;button class="alert__close" aria-label="Cerrar aviso"&gt;…x…&lt;/button&gt;
 &lt;/div&gt;
-&lt;!-- Variantes: --info · --success · --warning · --danger --&gt;</code></pre></details>
+&lt;!-- Variantes: --info · --success · --warning · --danger --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= TOAST ================= -->
@@ -2106,7 +2214,7 @@ html { scroll-behavior: smooth; }
       <button class="btn btn--outline" data-toast="warning">Toast de aviso</button>
       <button class="btn btn--outline" data-toast="danger">Toast de error</button>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="toast-stack" role="status" aria-live="polite"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="toast-stack" role="status" aria-live="polite"&gt;
   &lt;div class="toast toast--success"&gt;
     &lt;svg&gt;…&lt;/svg&gt;
     &lt;div&gt;
@@ -2114,7 +2222,7 @@ html { scroll-behavior: smooth; }
       &lt;div class="toast__body"&gt;El proyecto se actualizó correctamente.&lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
-&lt;/div&gt;</code></pre></details>
+&lt;/div&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= PROGRESS ================= -->
@@ -2124,14 +2232,14 @@ html { scroll-behavior: smooth; }
     <div class="ds-demo ds-demo--col" style="gap:24px;">
       <div>
         <div class="progress__head"><span class="progress__label">Subiendo archivos…</span><span class="progress__value" id="pgVal">64 %</span></div>
-        <div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"><div class="progress__bar" id="pgBar" style="width:64%;"></div></div>
+        <div class="progress" role="progressbar" aria-label="Subiendo archivos" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"><div class="progress__bar" id="pgBar" style="width:64%;"></div></div>
       </div>
       <div>
         <div class="progress__head"><span class="progress__label">Indeterminado</span></div>
-        <div class="progress progress--indeterminate" role="progressbar"><div class="progress__bar"></div></div>
+        <div class="progress progress--indeterminate" role="progressbar" aria-label="Indeterminado"><div class="progress__bar"></div></div>
       </div>
       <div style="display:flex;align-items:center;gap:24px;">
-        <div class="progress-ring" id="pgRing" data-value="64" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">
+        <div class="progress-ring" id="pgRing" data-value="64" role="progressbar" aria-label="Progreso circular" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">
           <svg width="56" height="56" viewBox="0 0 56 56" aria-hidden="true"><circle class="progress-ring__track" cx="28" cy="28" r="24" stroke-width="5"/><circle class="progress-ring__bar" id="pgRingBar" cx="28" cy="28" r="24" stroke-width="5"/></svg>
           <span class="progress-ring__value" id="pgRingVal">64%</span>
         </div>
@@ -2139,7 +2247,7 @@ html { scroll-behavior: smooth; }
       </div>
       <button class="btn btn--outline btn--sm" id="pgRandom" style="align-self:flex-start;">Cambiar progreso</button>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="progress__head"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="progress__head"&gt;
   &lt;span class="progress__label"&gt;Subiendo…&lt;/span&gt;
   &lt;span class="progress__value"&gt;64 %&lt;/span&gt;
 &lt;/div&gt;
@@ -2155,7 +2263,7 @@ html { scroll-behavior: smooth; }
   &lt;/svg&gt;
   &lt;span class="progress-ring__value"&gt;64%&lt;/span&gt;
 &lt;/div&gt;
-&lt;!-- JS: stroke-dasharray = 2πr; stroke-dashoffset = c * (1 - value/100) --&gt;</code></pre></details>
+&lt;!-- JS: stroke-dasharray = 2πr; stroke-dashoffset = c * (1 - value/100) --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= MODAL ================= -->
@@ -2166,7 +2274,7 @@ html { scroll-behavior: smooth; }
       <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;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="modal-overlay"&gt;
   &lt;!-- aria-modal, aria-labelledby (título) y aria-describedby (descripción, si la hay);
        tabindex="-1" permite mover el foco al panel al abrir --&gt;
   &lt;div class="modal" role="dialog" aria-modal="true"
@@ -2184,7 +2292,7 @@ html { scroll-behavior: smooth; }
 &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>
+     Destructivo: añade data-modal-persistent al .modal-overlay. --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= MENU ================= -->
@@ -2201,10 +2309,10 @@ html { scroll-behavior: smooth; }
         </div>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="menu"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="menu"&gt;
   &lt;button class="menu__item"&gt;Duplicar&lt;/button&gt;
   &lt;button class="menu__item is-selected"&gt;Seleccionado&lt;/button&gt;
-&lt;/div&gt;</code></pre></details>
+&lt;/div&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= TABLA ================= -->
@@ -2261,7 +2369,7 @@ html { scroll-behavior: smooth; }
         </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 table--zebra table--sticky"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;table class="table table--zebra table--sticky"&gt;
   &lt;thead&gt;&lt;tr&gt;
     &lt;th scope="col" class="col-select"&gt;
       &lt;input type="checkbox" class="checkbox" aria-label="Seleccionar todas"&gt;&lt;/th&gt;
@@ -2276,7 +2384,7 @@ html { scroll-behavior: smooth; }
     &lt;tr class="row--selected"&gt;…&lt;/tr&gt;
   &lt;/tbody&gt;
 &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>
+&lt;!-- El icono se atenúa si aria-sort no está fijado; JS reordena y alterna aria-sort. --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= STAT ================= -->
@@ -2300,11 +2408,30 @@ html { scroll-behavior: smooth; }
         <span class="stat__delta stat__delta--neutral">— sin cambios</span>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="stat"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="stat"&gt;
   &lt;span class="stat__label"&gt;Ingresos del mes&lt;/span&gt;
   &lt;span class="stat__value"&gt;$128 450&lt;/span&gt;
   &lt;span class="stat__delta stat__delta--up"&gt;▲ +12,4 %&lt;/span&gt;
-&lt;/div&gt;</code></pre></details>
+&lt;/div&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
+    <h3 style="margin-top:32px;">Chip de métrica</h3>
+    <p>Pastilla de una línea con rótulo y valor en <span class="code">--link</span> · fila con <span class="code">gap</span> que salta de línea en móvil · el chip interactivo es un <span class="code">&lt;button&gt;</span> de 44 px con nombre accesible completo.</p>
+    <div class="ds-demo">
+      <div class="metric-chips">
+        <span class="metric-chip"><span class="metric-chip__label">Latencia</span> <span class="metric-chip__value">42 ms</span></span>
+        <span class="metric-chip"><span class="metric-chip__label">Errores</span> <span class="metric-chip__value">0,3 %</span></span>
+        <button class="metric-chip" type="button" id="dsWaterChip" aria-label="Agua: 3 de 8 vasos. Sumar un vaso"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><span class="metric-chip__label">Agua</span> <span class="metric-chip__value">3 de 8</span></button>
+      </div>
+    </div>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="metric-chips"&gt;
+  &lt;span class="metric-chip"&gt;
+    &lt;span class="metric-chip__label"&gt;Latencia&lt;/span&gt; &lt;span class="metric-chip__value"&gt;42 ms&lt;/span&gt;
+  &lt;/span&gt;
+  &lt;button class="metric-chip" type="button" aria-label="Agua: 3 de 8 vasos. Sumar un vaso"&gt;
+    &lt;svg aria-hidden="true"&gt;…plus…&lt;/svg&gt;
+    &lt;span class="metric-chip__label"&gt;Agua&lt;/span&gt; &lt;span class="metric-chip__value"&gt;3 de 8&lt;/span&gt;
+  &lt;/button&gt;
+&lt;/div&gt;
+&lt;!-- El aria-label se actualiza con el valor; empieza por el texto visible --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= PAGINATION ================= -->
@@ -2314,14 +2441,14 @@ html { scroll-behavior: smooth; }
     <div class="ds-demo">
       <ul class="pagination" id="paginationDemo" aria-label="Paginación"></ul>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;ul class="pagination" aria-label="Paginación"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;ul class="pagination" aria-label="Paginación"&gt;
   &lt;li&gt;&lt;button class="pagination__btn" data-page="prev" aria-label="Página anterior"&gt;‹&lt;/button&gt;&lt;/li&gt;
   &lt;li&gt;&lt;button class="pagination__btn" data-page="1"&gt;1&lt;/button&gt;&lt;/li&gt;
   &lt;li&gt;&lt;span class="pagination__ellipsis"&gt;…&lt;/span&gt;&lt;/li&gt;
   &lt;li&gt;&lt;button class="pagination__btn is-active" data-page="5" aria-current="page"&gt;5&lt;/button&gt;&lt;/li&gt;
   &lt;li&gt;&lt;button class="pagination__btn" data-page="6"&gt;6&lt;/button&gt;&lt;/li&gt;
   &lt;li&gt;&lt;button class="pagination__btn" data-page="next" aria-label="Página siguiente"&gt;›&lt;/button&gt;&lt;/li&gt;
-&lt;/ul&gt;</code></pre></details>
+&lt;/ul&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= NAVEGACIÓN ================= -->
@@ -2346,6 +2473,69 @@ html { scroll-behavior: smooth; }
         <a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>Proyectos</a>
       </div>
     </div>
+    <h3 style="margin-top:32px;">Sidebar contraíble</h3>
+    <p>Expandido 260 px · riel de iconos de 64 px con grupos separados por una línea · en el riel, el nombre aparece como tooltip al pasar el cursor o al enfocar con teclado · el ancho cambia sin transición y solo los rótulos se funden · por debajo de 768 px lo sustituye un Drawer <span class="code">--left</span>.</p>
+    <div class="ds-demo ds-app-demo">
+      <nav class="sidebar sidebar--collapsible" id="demoAppNav" aria-label="Navegación de ejemplo">
+        <div class="sidebar__group" role="group" aria-labelledby="demoAppNavG1">
+          <span class="sidebar__group-label" id="demoAppNavG1">Monitoreo</span>
+          <a class="sidebar__item is-active" href="#comp-navegacion" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg><span class="sidebar__label">Inicio</span></a>
+          <a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"/><path d="M7 15v3m5-8v8m5-13v13"/></svg><span class="sidebar__label">Analítica</span></a>
+          <a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg><span class="sidebar__label">Actividad</span></a>
+        </div>
+        <div class="sidebar__group" role="group" aria-labelledby="demoAppNavG2">
+          <span class="sidebar__group-label" id="demoAppNavG2">Gestión</span>
+          <a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg><span class="sidebar__label">Proyectos</span></a>
+          <a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg><span class="sidebar__label">Equipo</span></a>
+          <a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg><span class="sidebar__label">Alertas</span></a>
+        </div>
+        <button class="sidebar__item sidebar__toggle" type="button" aria-expanded="true" aria-controls="demoAppNav"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg><span class="sidebar__label">Contraer</span></button>
+      </nav>
+      <div class="ds-app-demo__main">
+        <button class="icon-btn icon-btn--outline sidebar-trigger" type="button" id="openNavDrawer" aria-label="Abrir navegación" aria-expanded="false" aria-controls="demoNavDrawer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg></button>
+        <h4 style="margin:0;">Inicio</h4>
+        <p class="text-muted" style="margin:0;font-size:var(--text-sm);">El contenido ocupa el ancho que deja el sidebar: la rejilla <span class="code">auto 1fr</span> sigue al riel al instante, sin animar el ancho.</p>
+      </div>
+    </div>
+    <div class="drawer drawer--left" id="demoNavDrawer" hidden>
+      <div class="drawer__overlay" data-close-drawer></div>
+      <aside class="drawer__panel" role="dialog" aria-modal="true" aria-labelledby="navDrawerTitle" tabindex="-1">
+        <div class="drawer__header">
+          <h3 class="drawer__title" id="navDrawerTitle">Navegación</h3>
+          <button class="icon-btn icon-btn--ghost" data-close-drawer aria-label="Cerrar navegación"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+        </div>
+        <nav class="drawer__body" aria-label="Navegación de ejemplo">
+          <div class="sidebar__group" role="group" aria-labelledby="demoNavDrawerG1">
+            <span class="sidebar__group-label" id="demoNavDrawerG1">Monitoreo</span>
+            <a class="sidebar__item is-active" href="#comp-navegacion" aria-current="page" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg><span class="sidebar__label">Inicio</span></a>
+            <a class="sidebar__item" href="#comp-navegacion" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"/><path d="M7 15v3m5-8v8m5-13v13"/></svg><span class="sidebar__label">Analítica</span></a>
+            <a class="sidebar__item" href="#comp-navegacion" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg><span class="sidebar__label">Actividad</span></a>
+          </div>
+          <div class="sidebar__group" role="group" aria-labelledby="demoNavDrawerG2">
+            <span class="sidebar__group-label" id="demoNavDrawerG2">Gestión</span>
+            <a class="sidebar__item" href="#comp-navegacion" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg><span class="sidebar__label">Proyectos</span></a>
+            <a class="sidebar__item" href="#comp-navegacion" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg><span class="sidebar__label">Equipo</span></a>
+            <a class="sidebar__item" href="#comp-navegacion" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg><span class="sidebar__label">Alertas</span></a>
+          </div>
+        </nav>
+      </aside>
+    </div>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;nav class="sidebar sidebar--collapsible" id="appNav" aria-label="Principal"&gt;
+  &lt;div class="sidebar__group" role="group" aria-labelledby="navMonitor"&gt;
+    &lt;span class="sidebar__group-label" id="navMonitor"&gt;Monitoreo&lt;/span&gt;
+    &lt;a class="sidebar__item is-active" href="/" aria-current="page"&gt;
+      &lt;svg aria-hidden="true"&gt;…&lt;/svg&gt;&lt;span class="sidebar__label"&gt;Inicio&lt;/span&gt;
+    &lt;/a&gt;
+  &lt;/div&gt;
+  &lt;button class="sidebar__item sidebar__toggle" type="button"
+          aria-expanded="true" aria-controls="appNav"&gt;
+    &lt;svg aria-hidden="true"&gt;…chevron-left…&lt;/svg&gt;&lt;span class="sidebar__label"&gt;Contraer&lt;/span&gt;
+  &lt;/button&gt;
+&lt;/nav&gt;
+&lt;!-- Contraído: .is-collapsed en el nav, aria-expanded="false" y texto «Expandir».
+     Por debajo de 768 px: botón ☰ .sidebar-trigger que abre un .drawer.drawer--left con los mismos ítems. --&gt;
+&lt;button class="icon-btn sidebar-trigger" type="button" aria-label="Abrir navegación"
+        aria-expanded="false" aria-controls="navDrawer"&gt;…menu…&lt;/button&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
     <h3 style="margin-top:32px;">Tabs y Breadcrumbs</h3>
     <div class="ds-demo ds-demo--col">
       <div class="tabs" id="demoTabs">
@@ -2360,10 +2550,10 @@ html { scroll-behavior: smooth; }
         <li aria-current="page">Panel analítico</li>
       </ul>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="navbar"&gt;…&lt;a class="navbar__link is-active"&gt;Resumen&lt;/a&gt;…&lt;/div&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="navbar"&gt;…&lt;a class="navbar__link is-active"&gt;Resumen&lt;/a&gt;…&lt;/div&gt;
 &lt;div class="sidebar"&gt;&lt;a class="sidebar__item is-active"&gt;&lt;svg&gt;…&lt;/svg&gt;Inicio&lt;/a&gt;&lt;/div&gt;
 &lt;div class="tabs"&gt;&lt;button class="tabs__btn is-active"&gt;Resumen&lt;/button&gt;…&lt;span class="tabs__indicator"&gt;&lt;/span&gt;&lt;/div&gt;
-&lt;ul class="breadcrumbs"&gt;&lt;li&gt;&lt;a&gt;Inicio&lt;/a&gt;&lt;/li&gt;&lt;li aria-current="page"&gt;Actual&lt;/li&gt;&lt;/ul&gt;</code></pre></details>
+&lt;ul class="breadcrumbs"&gt;&lt;li&gt;&lt;a&gt;Inicio&lt;/a&gt;&lt;/li&gt;&lt;li aria-current="page"&gt;Actual&lt;/li&gt;&lt;/ul&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= SKELETON ================= -->
@@ -2384,7 +2574,7 @@ html { scroll-behavior: smooth; }
         <button class="btn btn--primary btn--sm">Crear proyecto</button>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;span class="skeleton" style="height:12px;width:70%"&gt;&lt;/span&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;span class="skeleton" style="height:12px;width:70%"&gt;&lt;/span&gt;
 &lt;span class="skeleton skeleton--circle" style="width:40px;height:40px"&gt;&lt;/span&gt;
 
 &lt;div class="empty-state"&gt;
@@ -2392,7 +2582,7 @@ html { scroll-behavior: smooth; }
   &lt;span class="empty-state__title"&gt;Aún no hay proyectos&lt;/span&gt;
   &lt;span class="empty-state__desc"&gt;Crea tu primer proyecto…&lt;/span&gt;
   &lt;button class="btn btn--primary btn--sm"&gt;Crear proyecto&lt;/button&gt;
-&lt;/div&gt;</code></pre></details>
+&lt;/div&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= CARD, LINK Y CODE ================= -->
@@ -2409,17 +2599,17 @@ html { scroll-behavior: smooth; }
         <p style="margin:0;font-size:var(--text-sm);color:var(--text-muted);">Al pasar el cursor sube de nivel: −2px + superficie más clara.</p>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="card"&gt;…&lt;/div&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="card"&gt;…&lt;/div&gt;
 &lt;div class="card card--interactive"&gt;…&lt;/div&gt;
-&lt;!-- .card--glow: firma de marca — MÁXIMO UNO POR PANTALLA --&gt;</code></pre></details>
+&lt;!-- .card--glow: firma de marca — MÁXIMO UNO POR PANTALLA --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
     <h3 style="margin-top:32px;">Link y Code</h3>
     <div class="ds-demo" style="gap:32px;">
       <a class="link" href="#comp-card">Link con subrayado animado</a>
       <a class="link" href="https://lucide.dev" target="_blank" rel="noopener noreferrer">Link externo<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M7 7h10v10"/></svg></a>
       <span>Acento con <span class="code">var(--accent-400)</span></span>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;a class="link" href="…"&gt;Link con subrayado animado&lt;/a&gt;
-&lt;span class="code"&gt;var(--accent-400)&lt;/span&gt;</code></pre></details>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;a class="link" href="…"&gt;Link con subrayado animado&lt;/a&gt;
+&lt;span class="code"&gt;var(--accent-400)&lt;/span&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= COMBOBOX / SEARCH ================= -->
@@ -2453,7 +2643,7 @@ html { scroll-behavior: smooth; }
         </div>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="combobox"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="combobox"&gt;
   &lt;input class="input combobox__input" role="combobox" aria-expanded="false"
     aria-controls="lista" aria-autocomplete="list" aria-activedescendant=""&gt;
   &lt;ul class="combobox__list" id="lista" role="listbox" aria-label="Frameworks" hidden&gt;
@@ -2467,7 +2657,7 @@ html { scroll-behavior: smooth; }
   &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>
+&lt;!-- JS: filtra en vivo, ↑/↓/Enter/Esc; el clear vacía y devuelve el foco. --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= DRAWER ================= -->
@@ -2506,7 +2696,7 @@ html { scroll-behavior: smooth; }
         </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;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="drawer drawer--right" hidden&gt;
   &lt;div class="drawer__overlay" data-close-drawer&gt;&lt;/div&gt;
   &lt;aside class="drawer__panel" role="dialog" aria-modal="true"
          aria-labelledby="dTitle" tabindex="-1"&gt;
@@ -2519,7 +2709,7 @@ html { scroll-behavior: smooth; }
   &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>
+     JS: .is-open dispara el slide; Esc / overlay cierran y devuelven el foco. --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= POPOVER ================= -->
@@ -2543,7 +2733,7 @@ html { scroll-behavior: smooth; }
         </div>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="popover"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="popover"&gt;
   &lt;button class="btn btn--outline popover__trigger" type="button"
           aria-haspopup="dialog" aria-expanded="false" aria-controls="panel"&gt;Compartir&lt;/button&gt;
   &lt;div class="popover__panel" role="dialog" aria-label="Compartir proyecto" id="panel"&gt;
@@ -2552,7 +2742,7 @@ html { scroll-behavior: smooth; }
     &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>
+&lt;!-- Abre por CLICK (no hover); el foco entra al panel; Esc / clic fuera cierran. --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= BUTTON GROUP ================= -->
@@ -2566,12 +2756,12 @@ html { scroll-behavior: smooth; }
         <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;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="btn-group" role="group" aria-label="Alineación del texto"&gt;
   &lt;button class="btn btn--outline"&gt;Izquierda&lt;/button&gt;
   &lt;button class="btn btn--outline"&gt;Centro&lt;/button&gt;
   &lt;button class="btn btn--outline"&gt;Derecha&lt;/button&gt;
 &lt;/div&gt;
-&lt;!-- Radios solo en los extremos; bordes internos colapsados (margin-left:-1px). --&gt;</code></pre></details>
+&lt;!-- Radios solo en los extremos; bordes internos colapsados (margin-left:-1px). --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= DATEPICKER ================= -->
@@ -2584,7 +2774,7 @@ html { scroll-behavior: smooth; }
         <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-haspopup="dialog" aria-controls="dpCalendar"
                  aria-labelledby="dpLabel" value="15 de julio de 2026">
         </div>
         <div class="datepicker__calendar" id="dpCalendar" role="dialog" aria-label="Elegir fecha" hidden>
@@ -2594,6 +2784,7 @@ html { scroll-behavior: smooth; }
               <span class="calendar__title" id="dpTitle" aria-live="polite">julio 2026</span>
               <button class="icon-btn icon-btn--ghost icon-btn--sm" type="button" id="dpNext" aria-label="Mes siguiente"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></button>
             </div>
+            <div class="calendar__table" role="grid" aria-labelledby="dpTitle">
             <div class="calendar__weekdays" role="row">
               <span role="columnheader" aria-label="lunes">L</span>
               <span role="columnheader" aria-label="martes">M</span>
@@ -2603,16 +2794,17 @@ html { scroll-behavior: smooth; }
               <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 class="calendar__grid" id="dpGrid" role="rowgroup"></div>
+            </div>
           </div>
         </div>
       </div>
     </div>
-    <details class="ds-code"><summary>Ver código<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;div class="datepicker"&gt;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="datepicker"&gt;
   &lt;div class="input-wrap"&gt;
     &lt;svg aria-hidden="true"&gt;…calendario…&lt;/svg&gt;
     &lt;input class="input datepicker__input" readonly aria-haspopup="dialog"
-           aria-expanded="false" aria-controls="cal" value="15 de julio de 2026"&gt;
+           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;
@@ -2621,19 +2813,21 @@ html { scroll-behavior: smooth; }
         &lt;span class="calendar__title" aria-live="polite"&gt;julio 2026&lt;/span&gt;
         &lt;button class="icon-btn icon-btn--ghost icon-btn--sm" aria-label="Mes siguiente"&gt;›&lt;/button&gt;
       &lt;/div&gt;
+      &lt;div class="calendar__table" role="grid" aria-label="julio 2026"&gt;
       &lt;div class="calendar__weekdays" role="row"&gt;
         &lt;span role="columnheader" aria-label="lunes"&gt;L&lt;/span&gt; …
       &lt;/div&gt;
-      &lt;div class="calendar__grid" role="grid"&gt;
+      &lt;div class="calendar__grid" role="rowgroup"&gt;
         &lt;div class="calendar__week" role="row"&gt;
           &lt;button class="calendar__day" role="gridcell"
                   aria-label="15 de julio de 2026" aria-selected="true"&gt;15&lt;/button&gt; …
         &lt;/div&gt;
       &lt;/div&gt;
+      &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;
-&lt;!-- JS: clic abre; flechas mueven el día (±1, ±7) cruzando meses; Enter elige; Esc cierra. --&gt;</code></pre></details>
+&lt;!-- JS: clic abre; flechas mueven el día (±1, ±7) cruzando meses; Enter elige; Esc cierra. --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= FILE UPLOAD ================= -->
@@ -2677,7 +2871,7 @@ html { scroll-behavior: smooth; }
         </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;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;div class="file-upload"&gt;
   &lt;input class="file-upload__input visually-hidden" type="file" id="f" multiple
          aria-describedby="hint"&gt;
   &lt;label class="file-upload__label" for="f"&gt;
@@ -2699,7 +2893,7 @@ html { scroll-behavior: smooth; }
     &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>
+&lt;!-- JS: dragover añade .is-dragover; el botón × quita el ítem. --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= STEPPER ================= -->
@@ -2745,7 +2939,7 @@ html { scroll-behavior: smooth; }
         </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;
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>&lt;ol class="stepper" aria-label="Progreso de la configuración"&gt;
   &lt;li class="step step--complete"&gt;
     &lt;span class="step__marker"&gt;&lt;svg aria-hidden="true"&gt;…check…&lt;/svg&gt;&lt;/span&gt;
     &lt;span class="step__label"&gt;Cuenta&lt;/span&gt;
@@ -2760,7 +2954,7 @@ html { scroll-behavior: smooth; }
     &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>
+&lt;!-- El último paso no lleva conector. Variante: .stepper--vertical. --&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= KBD ================= -->
@@ -2775,10 +2969,10 @@ html { scroll-behavior: smooth; }
       <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.
+    <div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>Pulsa &lt;kbd class="kbd"&gt;Esc&lt;/kbd&gt; para cerrar.
 
 Abre el buscador con &lt;kbd class="kbd"&gt;⌘&lt;/kbd&gt; + &lt;kbd class="kbd"&gt;K&lt;/kbd&gt;.
-Guarda con &lt;kbd class="kbd"&gt;Ctrl&lt;/kbd&gt; + &lt;kbd class="kbd"&gt;S&lt;/kbd&gt;.</code></pre></details>
+Guarda con &lt;kbd class="kbd"&gt;Ctrl&lt;/kbd&gt; + &lt;kbd class="kbd"&gt;S&lt;/kbd&gt;.</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
   </section>
 
   <!-- ================= MOTION ================= -->
@@ -2844,11 +3038,11 @@ Guarda con &lt;kbd class="kbd"&gt;Ctrl&lt;/kbd&gt; + &lt;kbd class="kbd"&gt;S&lt
     <p>El sistema se distribuye en <span class="code">dist/nocturna-electrica/</span>: <strong>nocturna-electrica.css</strong> (framework completo), <strong>tokens.css</strong> (solo variables), <strong>tailwind.css</strong> (bloque <span class="code">@theme</span> para Tailwind v4) y <strong>tokens.json</strong> (formato estándar W3C DTCG 2025.10, interoperable con Figma / Tokens Studio / Style Dictionary).</p>
 
     <h3>Variables CSS (núcleo)</h3>
-    <details class="ds-code" open><summary>tokens :root (aliases semánticos)<button class="ds-copy" type="button">Copiar</button></summary><pre><code>:root {
+    <div class="ds-code-wrap"><details class="ds-code" open><summary>tokens :root (aliases semánticos)</summary><pre><code>:root {
   /* Superficies */
   --bg: #010203;
   --surface-1: #0b0d12; --surface-2: #14171f; --surface-3: #1e222d;
-  --border: #3d4354; --border-strong: #2a2f3d;
+  --border: #3d4354; --border-strong: #6b7183;
 
   /* Texto */
   --text-primary: #e8eaef; --text-secondary: #c5c9d4;
@@ -2882,10 +3076,10 @@ Guarda con &lt;kbd class="kbd"&gt;Ctrl&lt;/kbd&gt; + &lt;kbd class="kbd"&gt;S&lt
   --ease-out: cubic-bezier(0.2, 0, 0, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
   --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
-}</code></pre></details>
+}</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <h3 style="margin-top:32px;">Tailwind CSS v4 — <span class="code">@theme</span></h3>
-    <details class="ds-code"><summary>tailwind.css<button class="ds-copy" type="button">Copiar</button></summary><pre><code>@import "tailwindcss";
+    <div class="ds-code-wrap"><details class="ds-code"><summary>tailwind.css</summary><pre><code>@import "tailwindcss";
 
 @theme {
   --color-night-950: #010203; --color-night-900: #0b0d12;
@@ -2919,7 +3113,7 @@ Guarda con &lt;kbd class="kbd"&gt;Ctrl&lt;/kbd&gt; + &lt;kbd class="kbd"&gt;S&lt
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
   --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
-}</code></pre></details>
+}</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <div class="ds-callout ds-callout--info" style="margin-top:32px;">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg>
@@ -2933,41 +3127,41 @@ Guarda con &lt;kbd class="kbd"&gt;Ctrl&lt;/kbd&gt; + &lt;kbd class="kbd"&gt;S&lt
     <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
+    <p>Un solo paquete con todos los sistemas, cada uno en su subruta; Nocturna Eléctrica vive en <span class="code">/nocturna/</span>. Instálalo y usa las vías de abajo apuntando a la subruta, en vez de a un archivo copiado.</p>
+    <div class="ds-code-wrap"><details class="ds-code" open><summary>terminal + CSS de entrada</summary><pre><code>npm i @higinio/design-css
 
 /* framework completo (vía A) */
 @import "@higinio/design-css/nocturna/framework.css";
 /* o solo tokens (vía B) */
 @import "@higinio/design-css/nocturna/tokens.css";
 /* o Tailwind v4 (vía C) */
-@import "@higinio/design-css/nocturna/tailwind.css";</code></pre></details>
+@import "@higinio/design-css/nocturna/tailwind.css";</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <h3 style="margin-top:32px;">A · CSS drop-in (framework completo)</h3>
     <p>Para cualquier proyecto — HTML plano o cualquier framework. Trae variables + clases de componentes listas (tipo Bootstrap) y ya importa las fuentes.</p>
-    <details class="ds-code" open><summary>index.html<button class="ds-copy" type="button">Copiar</button></summary><pre><code>&lt;link rel="stylesheet" href="/estilos/nocturna-electrica.css"&gt;
+    <div class="ds-code-wrap"><details class="ds-code" open><summary>index.html</summary><pre><code>&lt;link rel="stylesheet" href="/estilos/nocturna-electrica.css"&gt;
 &lt;!-- luego usas las clases directo: --&gt;
 &lt;button class="btn btn--primary"&gt;Guardar&lt;/button&gt;
-&lt;div class="card"&gt;…&lt;/div&gt;</code></pre></details>
+&lt;div class="card"&gt;…&lt;/div&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <h3 style="margin-top:32px;">B · Solo tokens</h3>
     <p>Si diseñas tus propios componentes: solo las variables, sin clases.</p>
-    <details class="ds-code"><summary>styles.css<button class="ds-copy" type="button">Copiar</button></summary><pre><code>@import "./tokens.css";
+    <div class="ds-code-wrap"><details class="ds-code"><summary>styles.css</summary><pre><code>@import "./tokens.css";
 
 .mi-panel {
   background: var(--surface-1);
   color: var(--text-primary);
   border: 1px solid var(--border);
-}</code></pre></details>
+}</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <h3 style="margin-top:32px;">C · Tailwind v4</h3>
     <p>Tailwind v4 se configura por CSS. El <span class="code">tailwind.css</span> ya incluye <span class="code">@import "tailwindcss"</span>, los tokens y el bloque <span class="code">@theme</span> — úsalo como tu hoja de entrada (mantén <span class="code">tokens.css</span> a su lado, que es lo que importa).</p>
-    <details class="ds-code"><summary>terminal + CSS de entrada<button class="ds-copy" type="button">Copiar</button></summary><pre><code># 1) instala Tailwind v4
+    <div class="ds-code-wrap"><details class="ds-code"><summary>terminal + CSS de entrada</summary><pre><code># 1) instala Tailwind v4
 npm i tailwindcss @tailwindcss/postcss
 
 # 2) copia tailwind.css + tokens.css a tu carpeta de CSS
 #    y usa tailwind.css como entrada. Ya tienes utilidades:
-&lt;div class="bg-night-900 text-accent-400"&gt;…&lt;/div&gt;</code></pre></details>
+&lt;div class="bg-night-900 text-accent-400"&gt;…&lt;/div&gt;</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <h3 style="margin-top:32px;">D · Pipelines de tokens</h3>
     <p>Para Figma, Tokens Studio o Style Dictionary: importa <span class="code">tokens.json</span> (formato estándar W3C DTCG 2025.10).</p>
@@ -2981,20 +3175,23 @@ npm i tailwindcss @tailwindcss/postcss
   <!-- ================= MCP ================= -->
   <section id="mcp">
     <h2>MCP</h2>
-    <p>El paquete <span class="code">@higinio/design-mcp</span> expone ambos sistemas de diseño — Celeste Clásica y Nocturna Eléctrica — a cualquier IDE o cliente compatible con Model Context Protocol: tokens, componentes, reglas duras y validación de código. Complementa a las skills de Claude, no las reemplaza: misma fuente de verdad, accesible también fuera del entorno de Claude.</p>
+    <p>El paquete <span class="code">@higinio/design-mcp</span> expone los sistemas de diseño de Higinio Sosa, entre ellos Nocturna Eléctrica (<span class="code">system="nocturna"</span>), a cualquier IDE o cliente compatible con Model Context Protocol: tokens, componentes, reglas duras y validación de código. Complementa a las skills de Claude, no las reemplaza: misma fuente de verdad, accesible también fuera del entorno de Claude.</p>
 
-    <h3>Las 8 tools</h3>
+    <h3>Las 11 tools</h3>
     <div class="ds-demo ds-demo--col" style="padding:0;overflow-x:auto;">
       <table class="table">
         <thead><tr><th>Tool</th><th>Qué hace</th></tr></thead>
         <tbody>
           <tr><td class="mono">list_design_systems</td><td>Lista los sistemas de diseño disponibles.</td></tr>
-          <tr><td class="mono">get_token</td><td>Devuelve el valor resuelto de un token o alias de un sistema.</td></tr>
+          <tr><td class="mono">get_token</td><td>Resuelve un alias semántico o un token DTCG por path a su valor.</td></tr>
           <tr><td class="mono">search_tokens</td><td>Busca tokens por nombre, categoría o valor.</td></tr>
           <tr><td class="mono">list_components</td><td>Lista los componentes documentados de un sistema.</td></tr>
           <tr><td class="mono">get_component_spec</td><td>Devuelve la especificación completa de un componente: estados, medidas, variantes.</td></tr>
           <tr><td class="mono">get_rules</td><td>Devuelve las reglas duras (no negociables) del sistema.</td></tr>
           <tr><td class="mono">validate_code</td><td>Audita CSS/HTML contra las reglas del sistema — hex directos, contraste, aliases.</td></tr>
+          <tr><td class="mono">validate_motion</td><td>Audita el motion contra las reglas del sistema: <span class="code">transition</span> sobre todas las propiedades, ease-in en entradas, propiedades de layout, duraciones por encima de <span class="code">--duration-page</span>.</td></tr>
+          <tr><td class="mono">check_slop</td><td>Detecta clichés de diseño generado por IA: gradientes, glassmorphism, sombras de negro puro, fuentes genéricas y copy de marketing.</td></tr>
+          <tr><td class="mono">checklist_preflight</td><td>Checklist estático de pre-producción sobre HTML/CSS: metadatos, headings, imágenes y accesibilidad de controles.</td></tr>
           <tr><td class="mono">generate_snippet</td><td>Genera un snippet de componente listo para usar, con los aliases correctos.</td></tr>
         </tbody>
       </table>
@@ -3002,7 +3199,7 @@ npm i tailwindcss @tailwindcss/postcss
 
     <h3 style="margin-top:32px;">Conectar (remoto)</h3>
     <p>Añade el servidor a tu <span class="code">.mcp.json</span>:</p>
-    <details class="ds-code" open><summary>.mcp.json<button class="ds-copy" type="button">Copiar</button></summary><pre><code>{
+    <div class="ds-code-wrap"><details class="ds-code" open><summary>.mcp.json</summary><pre><code>{
   "mcpServers": {
     "design": {
       "type": "http",
@@ -3010,15 +3207,15 @@ npm i tailwindcss @tailwindcss/postcss
       "headers": { "Authorization": "Bearer &lt;tu-token&gt;" }
     }
   }
-}</code></pre></details>
+}</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <h3 style="margin-top:32px;">Ejemplo</h3>
     <p>Consultar un token de este sistema:</p>
-    <details class="ds-code"><summary>get_token<button class="ds-copy" type="button">Copiar</button></summary><pre><code>get_token(system="nocturna", name="--accent")
-→ "#52baed"</code></pre></details>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>get_token</summary><pre><code>get_token(system="nocturna", name="--accent")
+→ "#52baed"</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
     <p>Auditar código antes de integrarlo:</p>
-    <details class="ds-code"><summary>validate_code<button class="ds-copy" type="button">Copiar</button></summary><pre><code>validate_code(system="nocturna", code="…")
-→ { ok: false, issues: ["hex directo #52baed en línea 12 — usa var(--accent-400)"] }</code></pre></details>
+    <div class="ds-code-wrap"><details class="ds-code"><summary>validate_code</summary><pre><code>validate_code(system="nocturna", code="…")
+→ { ok: false, issues: ["hex directo #52baed en línea 12 — usa var(--accent-400)"] }</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
 
     <div class="ds-callout ds-callout--info" style="margin-top:32px;">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg>
@@ -3209,10 +3406,9 @@ spaces.forEach(function(s){
 
 /* ---------- Copiar código ---------- */
 document.querySelectorAll('.ds-copy').forEach(function(btn){
-  btn.addEventListener('click', function(e){
-    e.preventDefault(); e.stopPropagation();
-    var details = btn.closest('details');
-    var code = details ? details.querySelector('code') : null;
+  btn.addEventListener('click', function(){
+    var box = btn.closest('.ds-code-wrap');
+    var code = box ? box.querySelector('code') : null;
     if (code) {
       copyText(code.textContent, function(){
         btn.textContent = '¡Copiado!'; btn.classList.add('is-done');
@@ -3303,6 +3499,31 @@ tabs.querySelectorAll('.tabs__btn').forEach(function(b){
 });
 setTimeout(function(){ moveIndicator(tabs.querySelector('.is-active')); }, 100);
 
+/* ---------- Sidebar contraíble: riel de iconos ---------- */
+document.querySelectorAll('.sidebar__toggle').forEach(function(btn){
+  var nav = document.getElementById(btn.getAttribute('aria-controls'));
+  var label = btn.querySelector('.sidebar__label');
+  if (!nav) return;
+  btn.addEventListener('click', function(){
+    var collapsed = nav.classList.toggle('is-collapsed');
+    btn.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+    if (label) label.textContent = collapsed ? 'Expandir' : 'Contraer';
+  });
+});
+
+/* ---------- Chip de métrica: sumar un vaso ---------- */
+(function(){
+  var chip = document.getElementById('dsWaterChip');
+  if (!chip) return;
+  var value = chip.querySelector('.metric-chip__value');
+  var max = 8, n = 3;
+  chip.addEventListener('click', function(){
+    n = n >= max ? 0 : n + 1;
+    value.textContent = n + ' de ' + max;
+    chip.setAttribute('aria-label', 'Agua: ' + n + ' de ' + max + ' vasos. ' + (n < max ? 'Sumar un vaso' : 'Empezar de nuevo'));
+  });
+})();
+
 /* ---------- Alert ---------- */
 document.querySelectorAll('.js-alert-close').forEach(function(btn){
   btn.addEventListener('click', function(){
@@ -3414,6 +3635,7 @@ function wireDrawer(triggerId, drawerId){
   function open(){
     lastFocused = document.activeElement;
     drawer.hidden = false;
+    if (trigger.hasAttribute('aria-expanded')) trigger.setAttribute('aria-expanded', 'true');
     /* dos pasos: pinta oculto y en el siguiente frame añade .is-open para que el transform anime */
     requestAnimationFrame(function(){ drawer.classList.add('is-open'); });
     if (panel) panel.focus(); /* tabindex="-1"; el lector anuncia el título */
@@ -3421,6 +3643,7 @@ function wireDrawer(triggerId, drawerId){
   function close(){
     if (drawer.hidden) return;
     drawer.classList.remove('is-open');
+    if (trigger.hasAttribute('aria-expanded')) trigger.setAttribute('aria-expanded', 'false');
     var finish = function(){ drawer.hidden = true; if (lastFocused && typeof lastFocused.focus === 'function') lastFocused.focus(); };
     if (reduced) finish(); else setTimeout(finish, 250); /* espera el slide de salida (--duration-slow) */
   }
@@ -3440,6 +3663,7 @@ function wireDrawer(triggerId, drawerId){
   });
 }
 wireDrawer('openDrawer', 'demoDrawer');
+wireDrawer('openNavDrawer', 'demoNavDrawer');
 
 /* ---------- Popover (abre por CLICK; foco entra; Esc / clic fuera cierran) ---------- */
 (function(){
@@ -3798,11 +4022,10 @@ if (mReplayBtn) {
     }
   }
   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 open(){ render(); cal.hidden = false; 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(); }