@higinio/design-mcp 0.1.1 → 0.2.0

package/assets/nocturna/design-doc.md

@@ -73,7 +73,7 @@
 | `night-900` | `#0b0d12` | Superficie 1 (tarjetas) |
 | `night-800` | `#14171f` | Superficie 2 (modales, dropdowns, inputs) |
 | `night-700` | `#1e222d` | Superficie 3, hover de filas |
-| `night-600` | `#2a2f3d` | Bordes destacados (énfasis) |
+| `night-600` | `#2a2f3d` | Superficie de separadores sutiles |
 | `night-500` | `#3d4354` | Bordes por defecto |
 | `night-450` | `#5f6575` | Solo light: texto atenuado (`--text-muted`) — `night-400` caía a 4.27:1 sobre `--surface-3` |
 | `night-400` | `#6b7183` | Deshabilitado, placeholders |
@@ -102,7 +102,7 @@ Los componentes **nunca** usan los primitivos de arriba directamente: consumen e
 | `--surface-2` | `night-800` | Modales, dropdowns, inputs |
 | `--surface-3` | `night-700` | Hover de filas, superficie máxima |
 | `--border` | `night-500` | Borde por defecto |
-| `--border-strong` | `night-600` | Borde de énfasis (elevación 3, accordion) |
+| `--border-strong` | `night-400` | Borde de énfasis (elevación 3, accordion). **Mismo valor en ambos temas**: un gris medio cumple 1.4.11 sobre fondos oscuros (3.26-3.99:1) y claros (4.27-4.87:1). En dark **sube** de peldaño respecto a `--border` (night-500) porque oscurecerlo lo debilitaría (principio 2) |
 | `--text-primary` | `night-100` | Texto principal |
 | `--text-secondary` | `night-200` | Texto secundario |
 | `--text-muted` | `night-300` | Terciario, captions |
@@ -210,7 +210,7 @@ Tokens compuestos:
 
 ```css
 --border-default: 1px solid var(--night-500);
---border-emphasis: 1px solid var(--night-600);
+--border-emphasis: 1px solid var(--night-400);
 --focus-ring: 2px solid var(--accent-400);
 --focus-ring-offset: 2px;
 ```
@@ -228,7 +228,7 @@ En fondo casi negro las sombras solas no bastan: la elevación combina **superfi
 | 0 | `night-950` | — | Fondo de la app |
 | 1 | `night-900` | `--shadow-1: 0 1px 2px rgba(0,0,0,.4)` | Tarjetas en reposo |
 | 2 | `night-800` | `--shadow-2: 0 4px 12px rgba(0,0,0,.5)` | Dropdowns, hover |
-| 3 | `night-800` + borde `night-600` | `--shadow-3: 0 12px 32px rgba(0,0,0,.6)` | Modales, popovers |
+| 3 | `night-800` + borde `night-400` | `--shadow-3: 0 12px 32px rgba(0,0,0,.6)` | Modales, popovers |
 
 Tokens adicionales:
 
@@ -323,7 +323,7 @@ Indicador de carga circular; también sustituye el label del botón en estado lo
 
 ### 10.5 Textarea
 
-Mismos estados que input. Min-height 96px, `resize: vertical`. Contador `text-xs` `night-400` a la derecha.
+Mismos estados que input. Min-height 96px, `resize: vertical`. Contador (`.field__count`) `text-xs` `--text-muted` a la derecha.
 
 ### 10.6 Select
 
@@ -399,7 +399,7 @@ Banner de estado **inline y persistente** (a diferencia del Toast, transitorio):
 
 - 4 tonos: fondo suave semántico (`*-bg`, ej. `info-bg` `#0d1f2c`), borde `1px` del tono al 30%, radius `md`, padding 14px 16px.
 - Icono semántico 20px en el color del tono: info→`info` · success→`circle-check` · warning→`triangle-alert` · danger→`circle-alert`.
-- Título `text-sm` semibold y cuerpo `text-sm`, ambos en el color del tono (cuerpo con opacidad 88%).
+- Título `text-sm` semibold y cuerpo `text-sm`, ambos en el color del tono, a contraste completo (sin opacidad).
 - Botón cerrar opcional (× 18px, hit-área 36px) vía `onDismiss`; hover fondo `currentColor` al 14%. `role="status"`.
 
 ### 10.17 Toast
@@ -466,6 +466,26 @@ Lista de acciones desplegable anclada a un trigger (acciones de fila, botón "m
 - Gap vertical 6px. Formato numérico con `Intl.NumberFormat` (`es-MX`).
 - **Count-up** 350ms ease-out al montar (techo `--duration-page`); con `prefers-reduced-motion` muestra el valor directo.
 
+#### Chip de métrica
+
+Pastilla de una línea con rótulo y valor —por ejemplo, «Agua **3 de 8**»— para métricas secundarias que no merecen una cifra de Stat.
+
+- **`.metric-chip`:** radius `full`, borde `1px --border`, fondo `--surface-1`, padding `4px 12px`, `text-sm` `--text-secondary`; icono opcional de 16px en `--text-muted`.
+- **Contenido:** `.metric-chip__label` y `.metric-chip__value`; el valor va en JetBrains Mono peso 500, `--link` y `tabular-nums`.
+- **Fila:** `.metric-chips` agrupa los chips con `display: flex; flex-wrap: wrap; gap: var(--space-2)`, así que saltan de línea en móvil.
+- **Interactivo** (por ejemplo, «sumar un vaso»): `button.metric-chip`, con `min-height: var(--touch-target)` (44px) y padding horizontal de 16px. Hover: fondo `--outline-hover-bg` y borde `--border-hover` (como Outline). Active: fondo `--outline-active-bg` y `scale(.98)`. Foco de teclado con el anillo del sistema (`--focus-ring`, offset `--focus-ring-offset`).
+
+```html
+<div class="metric-chips">
+  <span class="metric-chip"><span class="metric-chip__label">Latencia</span> <span class="metric-chip__value">42 ms</span></span>
+  <button class="metric-chip" type="button" aria-label="Agua: 3 de 8 vasos. Sumar un vaso">
+    <span class="metric-chip__label">Agua</span> <span class="metric-chip__value">3 de 8</span>
+  </button>
+</div>
+```
+
+**Accesibilidad:** el chip interactivo es un `<button>` con nombre accesible completo, no solo la cifra («Agua: 3 de 8 vasos. Sumar un vaso»); el nombre empieza por el texto visible (WCAG 2.5.3) y se actualiza con el valor. El chip informativo es texto: no lleva rol ni foco.
+
 ### 10.23 Pagination
 
 Navegador de páginas 1-indexado, bajo tablas y listas largas.
@@ -482,6 +502,37 @@ Navegador de páginas 1-indexado, bajo tablas y listas largas.
 - **Tabs:** borde inferior `night-600`; indicador 2px `accent-400` que se desliza (250ms).
 - **Breadcrumbs:** `text-sm` `night-300`, separador `/` (tipográfico), último ítem `night-100`.
 
+#### Sidebar contraíble
+
+Variante del Sidebar para consolas y dashboards con muchas secciones: alterna entre la lista con rótulos y un riel de iconos que deja más ancho a los datos.
+
+- **Estados:** expandido, 260px (el ancho del Sidebar), y contraído, riel de iconos de 64px. Clases: `.sidebar.sidebar--collapsible` y, contraído, `.is-collapsed`. Cada ítem lleva su icono de 18px y el nombre en `.sidebar__label`.
+- **Grupos con rótulo:** `.sidebar__group` con un `.sidebar__group-label` (overline: 12px, peso 500, mayúsculas, tracking `+0.08em`, `--text-muted`); 16px entre grupos. En el riel, cada rótulo se convierte en un separador de 1px `--border` y el del primer grupo se oculta.
+- **Ítem activo:** `.is-active` (fondo `--sidebar-active-bg`, texto `--sidebar-active-text`, icono `--sidebar-active-icon`) más `aria-current="page"`.
+- **Botón de contraer:** `.sidebar__item.sidebar__toggle` al pie (`margin-top: auto`), con un chevron que apunta hacia donde se moverá el borde (rota 180° en el riel) y el texto «Contraer» / «Expandir» en su `.sidebar__label`.
+- **Tooltip en el riel:** el `.sidebar__label` queda oculto a la vista pero accesible (patrón de `.visually-hidden`) y aparece a la derecha del ítem con el look del Tooltip (§10.15: `--tooltip-bg`, borde `--tooltip-border`, `text-xs`, delay 400ms) al pasar el cursor —solo con puntero real, §11.5— y al enfocar el ítem con teclado (`:focus-visible`). No es un `title`: el nombre sigue en el árbol de accesibilidad. El riel no recorta su contenido (sin `overflow`) para que el tooltip pueda salir de él.
+- **Por debajo de 768px** (`md`), `.sidebar--collapsible` no se muestra fijo: lo sustituye un botón ☰ `.icon-btn.sidebar-trigger` que abre un Drawer `.drawer--left` (§10.29) con los mismos grupos e ítems. El framework muestra `.sidebar-trigger` solo por debajo de 768px y lo oculta (`display: none`) desde 768px, el mismo breakpoint en el que aparece el sidebar fijo; así el ☰ y el sidebar nunca conviven. El botón lleva `aria-label="Abrir navegación"`, `aria-controls` con el id del drawer y `aria-expanded` (`false` cerrado, `true` abierto).
+- **Motion:** el ancho cambia sin transición —el layout usa `grid-template-columns: auto 1fr` y el contenido sigue al sidebar al instante—; nunca se anima `width`. Solo los rótulos se funden al expandir: `opacity` 0→1 y `translateX(-4px)`→0 en `--duration-fast` `--ease-out`. Con `prefers-reduced-motion`, sin animación (piso global, §11.5).
+
+```html
+<nav class="sidebar sidebar--collapsible" id="appNav" aria-label="Principal">
+  <div class="sidebar__group" role="group" aria-labelledby="navMonitor">
+    <span class="sidebar__group-label" id="navMonitor">Monitoreo</span>
+    <a class="sidebar__item is-active" href="/" aria-current="page"><svg aria-hidden="true">…</svg><span class="sidebar__label">Inicio</span></a>
+  </div>
+  <button class="sidebar__item sidebar__toggle" type="button" aria-expanded="true" aria-controls="appNav">
+    <svg aria-hidden="true">…</svg><span class="sidebar__label">Contraer</span>
+  </button>
+</nav>
+
+<!-- Solo por debajo de 768px -->
+<button class="icon-btn sidebar-trigger" type="button" aria-label="Abrir navegación"
+        aria-expanded="false" aria-controls="navDrawer">…menu…</button>
+<div class="drawer drawer--left" id="navDrawer">…los mismos grupos e ítems…</div>
+```
+
+**Accesibilidad:** el contenedor es un `<nav>` con `aria-label`; el ítem de la página actual lleva `aria-current="page"` además de `.is-active`. El toggle es un `<button>` real con `aria-expanded` (`true` expandido, `false` en el riel) y `aria-controls` con el id del sidebar; al alternar, su texto cambia entre «Contraer» y «Expandir». El ☰ `.sidebar-trigger` también es un `<button>` con `aria-expanded` y `aria-controls` hacia el drawer, y el drawer sigue el contrato de foco del Modal. Los grupos se declaran con `role="group"` y `aria-labelledby` apuntando a su rótulo, que en el riel sigue siendo legible para el lector aunque se vea como una línea.
+
 ### 10.25 Skeleton y EmptyState
 
 - Skeleton: fondo `night-800` con shimmer (gradiente hacia `night-700`, barre en 1.4s loop). Radius igual al contenido.
@@ -551,8 +602,8 @@ Campo de fecha con calendario en popover: el input abre el calendario al hacer c
 
 - **`.datepicker`** (ancla `relative`), **`.datepicker__input`** (reutiliza el `Input` §10.4, con icono de calendario leading vía `.input-wrap`), **`.datepicker__calendar`** = panel que reutiliza el look de `.popover__panel` sobre `--surface-2` (borde `--border-strong`, sombra nivel 3, radius `md`).
 - **Calendario:** `.calendar` contiene `.calendar__header` (mes y año + prev/next con los iconos chevron-left/chevron-right), `.calendar__weekdays` (iniciales L–D) y `.calendar__grid` con los `.calendar__day`.
-- **Estados del día:** `.calendar__day--today` (aro interior `accent-400` + texto `accent-300`), `.calendar__day--selected` (fondo `accent-400`, texto `--text-on-accent`, peso 600 — no depende solo del color), `.calendar__day--outside` (días del mes vecino, atenuados) y `[disabled]` (fuera de rango).
-- **Accesibilidad:** `.calendar__grid` es `role="grid"` con filas `role="row"` (`.calendar__week`, con `display: contents` para no romper el grid); los encabezados de día son `role="columnheader"` con `aria-label` del nombre completo (lunes…); cada día es un `<button role="gridcell">` con `aria-label` de la fecha completa ("10 de julio de 2026") y `aria-selected`. El día de hoy lleva `aria-current="date"`.
+- **Estados del día:** `.calendar__day--today` (aro interior `accent-400` + texto `accent-300`), `.calendar__day--selected` (fondo `accent-400`, texto `--text-on-accent`, peso 600 — no depende solo del color), `.calendar__day--outside` (días del mes vecino, `--text-muted`) y `[disabled]` (fuera de rango).
+- **Accesibilidad:** `.calendar__table` es `role="grid"` (con `aria-labelledby` al título del mes) y envuelve la fila de cabeceras `.calendar__weekdays` (`role="row"`) y `.calendar__grid` (`role="rowgroup"`) con filas `.calendar__week` (`role="row"`, con `display: contents` para no romper el grid); el input lleva `aria-haspopup="dialog"` + `aria-controls`, sin `aria-expanded` (no es válido en un `input` de texto); los encabezados de día son `role="columnheader"` con `aria-label` del nombre completo (lunes…); cada día es un `<button role="gridcell">` con `aria-label` de la fecha completa ("10 de julio de 2026") y `aria-selected`. El día de hoy lleva `aria-current="date"`.
 - **Teclado:** el input abre el calendario (clic) y mueve el foco al día activo; las flechas mueven el día enfocado (±1 día, ±7 una semana) cruzando meses, Inicio/Fin saltan a los extremos de la semana, Enter/Espacio eligen y Esc cierra devolviendo el foco al input. Roving tabindex: solo el día activo es tabulable.
 
 ### 10.33 FileUpload
@@ -756,7 +807,7 @@ Ratios calculados con la fórmula WCAG 2.x (no estimados). El test `mcp/test/con
   /* == Aliases semánticos (los componentes consumen SOLO esto) == */
   --bg: var(--night-950);
   --surface-1: var(--night-900); --surface-2: var(--night-800); --surface-3: var(--night-700);
-  --border: var(--night-500); --border-strong: var(--night-600);
+  --border: var(--night-500); --border-strong: var(--night-400);
   --text-primary: var(--night-100); --text-secondary: var(--night-200);
   --text-muted: var(--night-300); --text-disabled: var(--night-400);
   --text-heading: var(--night-50); --text-on-accent: var(--night-950);
@@ -792,7 +843,7 @@ Ratios calculados con la fórmula WCAG 2.x (no estimados). El test `mcp/test/con
   --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);
   --focus-ring: 2px solid var(--accent-400);
   --focus-ring-offset: 2px;
 
@@ -859,7 +910,7 @@ El sistema es **dark-first**, pero todo producto debe soportar light mode con lo
 | `--surface-2` | `#14171f` | `#ffffff` |
 | `--surface-3` | `#1e222d` | `#eaf1f7` |
 | `--border` | `#3d4354` | `#d8dfe8` |
-| `--border-strong` | `#2a2f3d` | `#b9c3d1` |
+| `--border-strong` | `#6b7183` (`night-400`) | `#6b7183` (`night-400`, mismo valor) |
 | `--text-primary` | `#e8eaef` | `#14171f` |
 | `--text-secondary` | `#c5c9d4` | `#3d4354` |
 | `--text-muted` | `#9aa0b0` | `#5f6575` (`night-450`) |
@@ -951,7 +1002,7 @@ Ratios calculados con la fórmula WCAG 2.x, no estimados a ojo. `mcp/test/contra
   --surface-2: #ffffff;
   --surface-3: #eaf1f7;
   --border: #d8dfe8;
-  --border-strong: #b9c3d1;
+  /* --border-strong no se redefine: night-400 (:root) cumple 1.4.11 en los dos temas */
   --text-primary: #14171f;
   --text-secondary: #3d4354;
   --text-muted: #5f6575;  /* night-450 — night-400 caía a 4.27:1 sobre --surface-3 */

package/assets/nocturna/framework.css

@@ -41,7 +41,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);
@@ -112,7 +115,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;
 
@@ -145,7 +148,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; /* night-400 caía a 4.27:1 sobre --surface-3 */
@@ -416,7 +421,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; }
@@ -657,6 +662,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)
    ============================================================ */
@@ -739,7 +770,7 @@ a:hover { color: var(--link-hover); }
 }
 .alert > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
 .alert__title { font-weight: 600; margin: 0 0 2px; color: inherit; }
-.alert__body { margin: 0; color: inherit; opacity: .88; }
+.alert__body { margin: 0; color: inherit; }
 .alert__close {
   margin-left: auto; flex: none; display: grid; place-items: center;
   width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm);
@@ -901,6 +932,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;
@@ -1208,7 +1303,7 @@ a:hover { color: var(--link-hover); }
 .calendar__day--today { border-color: var(--accent-400); color: var(--accent-300); }
 /* Seleccionado: fondo de acento + texto oscuro + peso — no depende solo del color */
 .calendar__day--selected { background: var(--accent-400); border-color: var(--accent-400); color: var(--text-on-accent); font-weight: 600; }
-.calendar__day--outside { color: var(--text-disabled); }
+.calendar__day--outside { color: var(--text-muted); }
 .calendar__day[disabled] { color: var(--text-disabled); opacity: .5; cursor: not-allowed; }
 
 /* ============================================================
@@ -1227,7 +1322,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); }
 }