@higinio/design-mcp 0.1.0

package/assets/nocturna/framework.css

@@ -0,0 +1,992 @@
+/* ============================================================================
+   NOCTURNA ELÉCTRICA — Framework CSS v2.0
+   Sistema de diseño dark-first de Higinio Sosa.
+   Fuente de verdad: DESIGN-nocturna-electrica.md
+   Uso: enlazar este archivo antes de cualquier estilo propio.
+   Tema: dark por defecto; <html data-theme="light"> activa la variante clara.
+   Los componentes consumen SOLO aliases semánticos — nunca hex directos.
+   ========================================================================== */
+
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+/* ============================================================
+   1. TOKENS — primitivos + aliases (dark por defecto)
+   ============================================================ */
+:root {
+  /* -- Primitivos: acento -- */
+  --accent-100: #d9f0fb; --accent-200: #a8ddf6; --accent-300: #7dccf1;
+  --accent-400: #52baed; --accent-500: #2fa3dd; --accent-600: #1f87bb; --accent-700: #186a94;
+
+  /* -- Primitivos: índigo -- */
+  --indigo-300: #7a83c4; --indigo-400: #565fa3; --indigo-500: #353d7c;
+  --indigo-600: #2b3264; --indigo-700: #22284f; --indigo-800: #1a1e3b;
+
+  /* -- Primitivos: escala nocturna -- */
+  --night-950: #010203; --night-900: #0b0d12; --night-800: #14171f;
+  --night-700: #1e222d; --night-600: #2a2f3d; --night-500: #3d4354;
+  --night-400: #6b7183; --night-300: #9aa0b0; --night-200: #c5c9d4;
+  --night-100: #e8eaef; --night-50: #f6f7f9;
+
+  /* -- Primitivos: semánticos -- */
+  --success-400: #4ade80; --success-bg: #0a2617;
+  --warning-400: #fbbf24; --warning-bg: #2a2005;
+  --danger-400: #f87171;  --danger-bg: #2c0f0f;
+  --info-400: #52baed;    --info-bg: #0d1f2c;
+
+  /* -- 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);
+  --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);
+  --success: var(--success-400);
+  --warning: var(--warning-400);
+  --danger: var(--danger-400);
+  --info: var(--info-400);
+  --accent-ghost-hover: rgba(82,186,237,.08);
+  --accent-ghost-active: rgba(82,186,237,.14);
+  --accent-selected: rgba(82,186,237,.12);
+  --overlay: rgba(1,2,3,.7);
+
+  /* -- Aliases de componentes (derivados; cambian con el tema) -- */
+  --link: var(--accent-400);
+  --link-hover: var(--accent-200);
+  --focus-color: var(--accent-400);
+  --border-hover: var(--night-400);
+  --outline-hover-bg: var(--surface-2);
+  --outline-active-bg: var(--surface-3);
+  --text-on-danger: var(--night-950);
+  --data-color: var(--accent-400);         /* cifras/datos clave */
+  --elevated-border: var(--night-600);     /* borde de toasts, modales, menús */
+  --card-border: var(--night-600);
+  --code-color: var(--accent-300);
+  --code-border: var(--night-700);
+  --table-header-bg: var(--night-900);
+  --row-border: var(--night-800);
+  --row-hover: var(--night-700);
+  --navbar-bg: rgba(1,2,3,.8);
+  --nav-active: var(--accent-400);
+  --sidebar-bg: var(--night-900);
+  --sidebar-active-bg: var(--indigo-800);
+  --sidebar-active-text: var(--night-50);
+  --sidebar-active-icon: var(--accent-400);
+  --switch-off: var(--night-600);
+  --tooltip-bg: var(--night-700);
+  --tooltip-border: var(--night-600);
+  --tooltip-text: var(--night-100);
+  --skeleton-base: var(--night-800);
+  --skeleton-sheen: var(--night-700);
+  --empty-icon: var(--indigo-400);
+
+  /* -- Tipografía -- */
+  --font-display: "Space Grotesk", system-ui, sans-serif;
+  --font-body: "Manrope", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
+  --text-xl: 1.25rem; --text-2xl: 1.5625rem; --text-3xl: 1.9375rem;
+  --text-4xl: 2.4375rem; --text-5xl: 3.0625rem;
+  --leading-tight: 1.05; --leading-heading: 1.15; --leading-h2: 1.2;
+  --leading-h3: 1.3; --leading-h4: 1.4; --leading-snug: 1.5; --leading-body: 1.6;
+  --tracking-display: -0.02em; --tracking-overline: 0.08em;
+  --measure: 65ch;
+
+  /* -- Espaciado -- */
+  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
+  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
+  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
+  --card-padding: 24px; --card-padding-mobile: 16px;
+  --section-gap: 64px; --form-gap: 20px;
+  --button-padding: 12px 20px; --touch-target: 44px;
+  --grid-gutter: 24px; --grid-gutter-mobile: 16px;
+
+  /* -- Radios y bordes -- */
+  --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);
+  --focus-ring: 2px solid var(--accent-400);
+  --focus-ring-offset: 2px;
+
+  /* -- Elevación -- */
+  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
+  --shadow-2: 0 4px 12px rgba(0,0,0,.5);
+  --shadow-3: 0 12px 32px rgba(0,0,0,.6);
+  --glow-accent: 0 0 0 1px rgba(82,186,237,.35), 0 4px 20px rgba(82,186,237,.18);
+  --ring: 0 0 0 3px rgba(82,186,237,.2);
+  --ring-danger: 0 0 0 3px rgba(248,113,113,.2);
+
+  /* -- Motion -- */
+  --duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 220ms;
+  --duration-slow: 250ms; --duration-page: 350ms;
+  --ease-out: cubic-bezier(0.2, 0, 0, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* moverse de A a B en pantalla */
+  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
+
+  color-scheme: dark;
+}
+
+/* ============================================================
+   2. VARIANTE LIGHT — <html data-theme="light">
+   El CTA primario NO cambia (fondo #52baed, texto #010203).
+   ============================================================ */
+[data-theme="light"] {
+  --bg: #f5f8fb;
+  --surface-1: #ffffff;
+  --surface-2: #ffffff;
+  --surface-3: #eaf1f7;
+  --border: #d8dfe8;
+  --border-strong: #b9c3d1;
+  --text-primary: #14171f;
+  --text-secondary: #3d4354;
+  --text-muted: #6b7183;
+  --text-disabled: #9aa0b0;
+  --text-heading: #0b0d12;
+  --text-on-accent: #010203; /* el CTA no cambia */
+  --success: #15803d; --success-bg: #e3f5ea;
+  --warning: #a16207; --warning-bg: #fbf3dd;
+  --danger: #c03535;  --danger-bg: #fbe7e7;
+  --info: #1f87bb;    --info-bg: #e3f2fb;
+  --accent-ghost-hover: rgba(31,135,187,.08);
+  --accent-ghost-active: rgba(31,135,187,.14);
+  --accent-selected: rgba(82,186,237,.12);
+  --overlay: rgba(20,23,31,.45);
+
+  --link: #1f87bb;
+  --link-hover: #186a94;
+  --focus-color: #1f87bb;
+  --border-hover: #b9c3d1;
+  --outline-hover-bg: #eaf1f7;
+  --outline-active-bg: #d8dfe8;
+  --text-on-danger: #ffffff;
+  --data-color: #1f87bb;
+  --elevated-border: #d8dfe8;
+  --card-border: #d8dfe8;
+  --code-color: #186a94;
+  --code-border: #d8dfe8;
+  --table-header-bg: #eaf1f7;
+  --row-border: #eaf1f7;
+  --row-hover: #f5f8fb;
+  --navbar-bg: rgba(255,255,255,.8);
+  --nav-active: #186a94;
+  --sidebar-bg: #ffffff;
+  --sidebar-active-bg: #e3f2fb;
+  --sidebar-active-text: #14171f;
+  --sidebar-active-icon: #1f87bb;
+  --switch-off: #b9c3d1;
+  --tooltip-bg: #14171f;
+  --tooltip-border: #14171f;
+  --tooltip-text: #f6f7f9;
+  --skeleton-base: #eaf1f7;
+  --skeleton-sheen: #f5f8fb;
+
+  --ring: 0 0 0 3px rgba(31,135,187,.25);
+  --ring-danger: 0 0 0 3px rgba(192,53,53,.2);
+  --shadow-1: 0 1px 3px rgba(53,61,124,.08);
+  --shadow-2: 0 4px 10px rgba(53,61,124,.10);
+  --shadow-3: 0 12px 28px rgba(53,61,124,.14);
+  --glow-accent: 0 0 0 1px rgba(82,186,237,.4), 0 4px 16px rgba(82,186,237,.25);
+
+  color-scheme: light;
+}
+
+/* ============================================================
+   3. ACCESIBILIDAD DEL MOVIMIENTO
+   ============================================================ */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ============================================================
+   4. BASE
+   ============================================================ */
+*, *::before, *::after { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text-primary);
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  line-height: var(--leading-body);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* h1–h3 en display; h4 en adelante usa body */
+h1, h2, h3 {
+  font-family: var(--font-display);
+  color: var(--text-heading);
+  letter-spacing: var(--tracking-display);
+  margin: 0 0 var(--space-4);
+}
+h1 { font-size: var(--text-4xl); line-height: var(--leading-heading); font-weight: 700; }
+h2 { font-size: var(--text-3xl); line-height: var(--leading-h2); font-weight: 700; }
+h3 { font-size: var(--text-2xl); line-height: var(--leading-h3); font-weight: 600; }
+h4 { font-family: var(--font-body); font-size: var(--text-xl); line-height: var(--leading-h4); font-weight: 600; color: var(--text-heading); margin: 0 0 var(--space-3); }
+
+p { max-width: var(--measure); margin: 0 0 var(--space-4); }
+
+a { color: var(--link); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
+a:hover { color: var(--link-hover); }
+
+::placeholder { color: var(--text-disabled); }
+::selection { background: rgba(82,186,237,.3); }
+
+:focus-visible {
+  outline: 2px solid var(--focus-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+/* ============================================================
+   5. LAYOUT — contenedor y grid de 12 columnas
+   Breakpoints: sm 640 · md 768 · lg 1024 · xl 1280
+   ============================================================ */
+.container { width: 100%; margin-inline: auto; padding-inline: var(--space-4); }
+@media (min-width: 640px)  { .container { max-width: calc(100% - 32px); } }
+@media (min-width: 768px)  { .container { max-width: 720px; } }
+@media (min-width: 1024px) { .container { max-width: 960px; } }
+@media (min-width: 1280px) { .container { max-width: 1200px; } }
+
+.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gutter-mobile); }
+@media (min-width: 768px) { .grid { gap: var(--grid-gutter); } }
+[class*="col-"] { grid-column: span 12; }
+@media (min-width: 768px) {
+  .col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
+  .col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
+  .col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
+  .col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}
+}
+
+/* ============================================================
+   6. BOTONES — .btn
+   ============================================================ */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
+  height: 44px; padding: var(--button-padding); min-width: 44px;
+  border: 1px solid transparent; border-radius: var(--radius-md);
+  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
+  line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none;
+  transition: background-color var(--duration-fast) var(--ease-out),
+              border-color var(--duration-fast) var(--ease-out),
+              color var(--duration-fast) var(--ease-out),
+              box-shadow var(--duration-base) var(--ease-out),
+              transform var(--duration-instant) var(--ease-out);
+}
+.btn:active:not(:disabled) { transform: scale(.98); }
+.btn:disabled { cursor: not-allowed; }
+.btn svg { width: 20px; height: 20px; flex: none; }
+
+.btn--sm { height: 36px; padding: 8px 14px; font-size: var(--text-sm); }
+.btn--lg { height: 52px; padding: 14px 24px; font-size: var(--text-lg); }
+
+/* Primario — texto oscuro sobre acento, nunca blanco */
+/* Gating de hover (§11.5): los hover que mueven/elevan (transform, box-shadow, glow)
+   van dentro de @media (hover: hover) and (pointer: fine) — en touch el tap dispara
+   hovers falsos que se quedan pegados. Los hover de solo color/fondo quedan fuera. */
+.btn--primary { background: var(--accent-400); color: var(--text-on-accent); }
+.btn--primary:hover:not(:disabled) { background: var(--accent-500); }
+@media (hover: hover) and (pointer: fine) {
+  .btn--primary:hover:not(:disabled) { box-shadow: var(--glow-accent); }
+}
+.btn--primary:active:not(:disabled) { background: var(--accent-600); box-shadow: none; }
+.btn--primary:disabled { background: var(--surface-3); color: var(--text-disabled); }
+
+/* Secundario — índigo (idéntico en ambos temas) */
+.btn--secondary { background: var(--indigo-500); color: var(--night-50); }
+.btn--secondary:hover:not(:disabled) { background: var(--indigo-600); }
+.btn--secondary:active:not(:disabled) { background: var(--indigo-700); }
+.btn--secondary:disabled { opacity: .5; }
+
+/* Outline */
+.btn--outline { background: transparent; border-color: var(--border); color: var(--text-primary); }
+.btn--outline:hover:not(:disabled) { background: var(--outline-hover-bg); border-color: var(--border-hover); }
+.btn--outline:active:not(:disabled) { background: var(--outline-active-bg); }
+.btn--outline:disabled { opacity: .5; }
+
+/* Ghost */
+.btn--ghost { background: transparent; color: var(--link); }
+.btn--ghost:hover:not(:disabled) { background: var(--accent-ghost-hover); }
+.btn--ghost:active:not(:disabled) { background: var(--accent-ghost-active); }
+.btn--ghost:disabled { color: var(--text-disabled); }
+
+/* Destructivo */
+.btn--danger { background: var(--danger); color: var(--text-on-danger); }
+.btn--danger:hover:not(:disabled) { filter: brightness(.92); }
+.btn--danger:active:not(:disabled) { filter: brightness(.86); }
+.btn--danger:disabled { opacity: .5; filter: none; }
+
+/* ============================================================
+   7. ICON BUTTON — .icon-btn  (siempre con aria-label)
+   ============================================================ */
+.icon-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 44px; height: 44px; padding: 0; flex: none;
+  border: 1px solid transparent; border-radius: var(--radius-md);
+  background: transparent; cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-out),
+              border-color var(--duration-fast) var(--ease-out),
+              color var(--duration-fast) var(--ease-out),
+              transform var(--duration-instant) var(--ease-out);
+}
+.icon-btn:active:not(:disabled) { transform: scale(.98); }
+.icon-btn:disabled { opacity: .5; cursor: not-allowed; }
+.icon-btn svg { width: 20px; height: 20px; }
+.icon-btn--sm { width: 36px; height: 36px; } .icon-btn--sm svg { width: 18px; height: 18px; }
+.icon-btn--lg { width: 52px; height: 52px; }
+
+.icon-btn--outline { border-color: var(--border); color: var(--text-secondary); }
+.icon-btn--outline:hover:not(:disabled) { background: var(--outline-hover-bg); border-color: var(--border-hover); }
+.icon-btn--outline:active:not(:disabled) { background: var(--outline-active-bg); }
+
+.icon-btn--ghost { color: var(--text-muted); }
+.icon-btn--ghost:hover:not(:disabled) { background: var(--outline-hover-bg); color: var(--text-primary); }
+.icon-btn--ghost:active:not(:disabled) { background: var(--outline-active-bg); }
+
+.icon-btn--accent { color: var(--link); }
+.icon-btn--accent:hover:not(:disabled) { background: var(--accent-ghost-hover); }
+.icon-btn--accent:active:not(:disabled) { background: var(--accent-ghost-active); }
+
+/* ============================================================
+   8. SPINNER — .spinner
+   ============================================================ */
+.spinner {
+  display: inline-block; width: 16px; height: 16px; flex: none;
+  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
+  border-top-color: currentColor; border-radius: var(--radius-full);
+  color: var(--accent-400);
+  animation: ne-spin .8s linear infinite;
+}
+@keyframes ne-spin { to { transform: rotate(360deg); } }
+
+/* ============================================================
+   9. FORMULARIOS — .field, .input, .textarea, .select
+   ============================================================ */
+.field { display: flex; flex-direction: column; margin-bottom: var(--form-gap); }
+.field__label { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
+.field__help { font-size: var(--text-sm); color: var(--text-muted); margin-top: 6px; }
+.field__error {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: var(--text-sm); color: var(--danger); margin-top: 6px;
+}
+.field__error svg { width: 14px; height: 14px; flex: none; }
+
+.input, .textarea, .select {
+  width: 100%; background: var(--surface-2);
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base);
+  transition: border-color var(--duration-fast) var(--ease-out),
+              box-shadow var(--duration-fast) var(--ease-out);
+}
+.input, .select { height: 44px; padding: 0 14px; }
+.input:hover:not(:disabled):not(:focus) { border-color: var(--border-hover); }
+.input:focus, .textarea:focus, .select:focus {
+  outline: none; border-color: var(--focus-color); box-shadow: var(--ring);
+}
+.input:disabled, .textarea:disabled {
+  background: var(--surface-1); color: var(--text-disabled); cursor: not-allowed;
+}
+.input--error, .input--error:hover { border-color: var(--danger); }
+.input--error:focus { border-color: var(--danger); box-shadow: var(--ring-danger); }
+.input--success { border-color: var(--success); }
+
+/* Input con icono leading */
+.input-wrap { position: relative; }
+.input-wrap > svg {
+  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
+  width: 18px; height: 18px; color: var(--text-disabled); pointer-events: none;
+}
+.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; }
+
+/* Select nativo estilizado (el menú custom usa .menu) */
+.select-wrap { position: relative; }
+.select { appearance: none; padding-right: 40px; cursor: pointer; }
+.select-wrap::after {
+  content: ""; position: absolute; right: 14px; top: 50%;
+  width: 8px; height: 8px; pointer-events: none;
+  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
+  transform: translateY(-70%) rotate(45deg);
+  transition: transform var(--duration-base) var(--ease-out);
+}
+
+/* Menú desplegable (dropdown/select custom) */
+.menu {
+  min-width: 190px; padding: 6px; max-height: 320px; overflow: auto;
+  background: var(--surface-2); border: 1px solid var(--elevated-border);
+  border-radius: var(--radius-md); box-shadow: var(--shadow-3);
+}
+.menu__item {
+  display: flex; align-items: center; gap: 10px; width: 100%;
+  padding: 10px 12px; border: 0; border-radius: var(--radius-sm);
+  background: transparent; color: var(--text-primary);
+  font-family: var(--font-body); font-size: var(--text-sm); text-align: left; cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+.menu__item:hover { background: var(--surface-3); }
+.menu__item.is-selected { background: var(--accent-selected); color: var(--accent-300); }
+[data-theme="light"] .menu__item.is-selected { color: var(--link); }
+.menu__item svg { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
+
+/* SegmentedControl */
+.segmented {
+  display: inline-flex; align-items: stretch;
+  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px;
+  height: 44px;
+}
+.segmented--sm { height: 36px; }
+.segmented input { position: absolute; opacity: 0; pointer-events: none; }
+.segmented label {
+  display: inline-flex; align-items: center; padding: 0 16px;
+  border-radius: calc(var(--radius-md) - 3px);
+  font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary);
+  cursor: pointer; user-select: none; white-space: nowrap;
+  transition: background-color var(--duration-base) var(--ease-out),
+              color var(--duration-fast) var(--ease-out),
+              box-shadow var(--duration-base) var(--ease-out);
+}
+.segmented--sm label { padding: 0 12px; font-size: var(--text-xs); }
+.segmented input:checked + label {
+  background: var(--surface-3); color: var(--accent-300);
+  font-weight: 600; box-shadow: var(--shadow-1);
+}
+.segmented input:focus-visible + label { outline: var(--focus-ring); outline-offset: 2px; }
+
+/* Slider */
+.slider-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
+.slider-row .slider-label { font-size: var(--text-sm); color: var(--text-secondary); }
+.slider-row .slider-value { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
+.slider {
+  appearance: none; -webkit-appearance: none;
+  width: 100%; height: 6px; border-radius: var(--radius-full);
+  background: linear-gradient(to right, var(--accent-400) var(--slider-fill, 50%), var(--surface-3) var(--slider-fill, 50%));
+  cursor: pointer;
+}
+.slider:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
+.slider:disabled { opacity: .5; cursor: not-allowed; }
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none; width: 18px; height: 18px; border-radius: var(--radius-full);
+  background: var(--night-50); border: 2px solid var(--accent-400); box-shadow: var(--shadow-1);
+  transition: transform var(--duration-instant) var(--ease-out);
+}
+.slider:active::-webkit-slider-thumb { transform: scale(1.15); }
+.slider::-moz-range-thumb {
+  width: 14px; height: 14px; border-radius: var(--radius-full); border: 2px solid var(--accent-400);
+  background: var(--night-50); box-shadow: var(--shadow-1);
+  transition: transform var(--duration-instant) var(--ease-out);
+}
+.slider:active::-moz-range-thumb { transform: scale(1.15); }
+@media (prefers-reduced-motion: reduce) {
+  .slider::-webkit-slider-thumb { transition-duration: 0.01ms !important; }
+  .slider::-moz-range-thumb { transition-duration: 0.01ms !important; }
+}
+
+/* ============================================================
+   10. SELECCIÓN — .checkbox, .radio, .switch
+   ============================================================ */
+.check-row { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--text-base); }
+
+.checkbox, .radio {
+  appearance: none; width: 20px; height: 20px; margin: 0; flex: none;
+  background: transparent; border: 2px solid var(--border); cursor: pointer;
+  display: inline-grid; place-content: center;
+  transition: background-color var(--duration-base) var(--ease-out),
+              border-color var(--duration-fast) var(--ease-out);
+}
+.checkbox { border-radius: 4px; }
+.radio { border-radius: var(--radius-full); }
+.checkbox:hover, .radio:hover { border-color: var(--accent-300); }
+.checkbox:checked, .radio:checked { background: var(--accent-400); border-color: var(--accent-400); }
+.checkbox::after {
+  content: ""; width: 10px; height: 6px;
+  border-left: 2px solid var(--text-on-accent); border-bottom: 2px solid var(--text-on-accent);
+  transform: rotate(-45deg) scale(0); transform-origin: center;
+  transition: transform var(--duration-base) var(--ease-spring);
+  margin-top: -2px;
+}
+.checkbox:checked::after { transform: rotate(-45deg) scale(1); }
+.radio::after {
+  content: ""; width: 8px; height: 8px; border-radius: var(--radius-full);
+  background: var(--text-on-accent); transform: scale(0);
+  transition: transform var(--duration-base) var(--ease-spring);
+}
+.radio:checked::after { transform: scale(1); }
+
+/* Switch 44×24 */
+.switch {
+  appearance: none; width: 44px; height: 24px; margin: 0; flex: none;
+  background: var(--switch-off); border: 0; border-radius: var(--radius-full);
+  position: relative; cursor: pointer;
+  transition: background-color var(--duration-base) var(--ease-out);
+}
+.switch::after {
+  content: ""; position: absolute; top: 2px; left: 2px;
+  width: 20px; height: 20px; border-radius: var(--radius-full);
+  background: var(--night-50); box-shadow: var(--shadow-1);
+  transition: transform var(--duration-base) var(--ease-spring);
+}
+.switch:checked { background: var(--accent-400); }
+.switch:checked::after { transform: translateX(20px); }
+
+/* ============================================================
+   11. BADGES Y TAGS
+   ============================================================ */
+.badge {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 2px 8px; border-radius: var(--radius-full);
+  font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-snug);
+}
+.badge--success { background: var(--success-bg); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
+.badge--warning { background: var(--warning-bg); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }
+.badge--danger  { background: var(--danger-bg);  color: var(--danger);  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
+.badge--info    { background: var(--info-bg);    color: var(--info);    border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); }
+
+.tag {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 10px; border-radius: var(--radius-full);
+  background: var(--surface-2); border: 1px solid var(--border);
+  color: var(--text-secondary); font-size: var(--text-xs); font-weight: 500;
+}
+.tag__x {
+  display: inline-grid; place-content: center; width: 14px; height: 14px; padding: 0;
+  border: 0; border-radius: var(--radius-full); background: transparent;
+  color: inherit; cursor: pointer; font-size: 12px; line-height: 1;
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+.tag__x:hover { background: var(--surface-3); }
+
+/* ============================================================
+   12. AVATAR — .avatar (xs 24 · sm 32 · md 40 · lg 48 · xl 64)
+   ============================================================ */
+.avatar {
+  --avatar-size: 40px; --avatar-font: 15px;
+  position: relative; display: inline-flex; align-items: center; justify-content: center;
+  width: var(--avatar-size); height: var(--avatar-size); flex: none;
+  border-radius: var(--radius-full);
+  background: var(--indigo-700); border: 1px solid var(--indigo-600);
+  color: var(--night-50); font-family: var(--font-display); font-weight: 600;
+  font-size: var(--avatar-font); letter-spacing: var(--tracking-display);
+  text-transform: uppercase; user-select: none;
+}
+.avatar--xs { --avatar-size: 24px; --avatar-font: 10px; }
+.avatar--sm { --avatar-size: 32px; --avatar-font: 12px; }
+.avatar--lg { --avatar-size: 48px; --avatar-font: 18px; }
+.avatar--xl { --avatar-size: 64px; --avatar-font: 24px; }
+.avatar img {
+  width: 100%; height: 100%; object-fit: cover;
+  border-radius: inherit;
+}
+.avatar__dot {
+  position: absolute; right: 0; bottom: 0;
+  width: max(28%, 8px); height: max(28%, 8px);
+  border-radius: var(--radius-full); border: 2px solid var(--bg);
+}
+.avatar__dot--online  { background: var(--success); }
+.avatar__dot--busy    { background: var(--danger); }
+.avatar__dot--away    { background: var(--warning); }
+.avatar__dot--offline { background: var(--border); }
+
+/* ============================================================
+   12B. DIVIDER — .divider (hairline), .divider--label, .divider--vertical
+   ============================================================ */
+.divider { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
+.divider--label {
+  display: flex; align-items: center; gap: 12px; border: 0; margin: var(--space-4) 0;
+  color: var(--text-muted); font-size: var(--text-xs); font-weight: 500;
+  text-transform: uppercase; letter-spacing: var(--tracking-overline);
+}
+.divider--label::before, .divider--label::after {
+  content: ""; flex: 1; border-top: 1px solid var(--border);
+}
+.divider--vertical {
+  display: inline-block; align-self: stretch; width: 1px;
+  background: var(--border); border: 0; margin: 0 var(--space-3);
+}
+
+/* ============================================================
+   13. STAT — cifra de dashboard con count-up (JS opcional)
+   ============================================================ */
+.stat { display: flex; flex-direction: column; gap: 6px; }
+.stat__label {
+  font-size: var(--text-xs); font-weight: 500; text-transform: uppercase;
+  letter-spacing: var(--tracking-overline); color: var(--text-muted);
+}
+.stat__value {
+  font-family: var(--font-mono); font-size: var(--text-5xl); font-weight: 500;
+  line-height: var(--leading-tight); color: var(--data-color);
+  font-variant-numeric: tabular-nums; white-space: nowrap;
+}
+.stat__delta { font-family: var(--font-mono); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 4px; }
+.stat__delta--up { color: var(--success); }
+.stat__delta--down { color: var(--danger); }
+.stat__delta--neutral { color: var(--text-muted); }
+
+/* ============================================================
+   13B. PAGINATION — .pagination (activa: fondo acento + peso, no solo color)
+   ============================================================ */
+.pagination { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
+.pagination__btn {
+  display: inline-grid; place-items: center;
+  min-width: 36px; height: 36px; padding: 0 8px;
+  border: 0; border-radius: var(--radius-sm); background: transparent;
+  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
+  color: var(--text-secondary); cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
+}
+.pagination__btn:hover:not(:disabled):not(.is-active) { background: var(--surface-2); color: var(--text-primary); }
+.pagination__btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
+.pagination__btn.is-active {
+  background: var(--accent-400); color: var(--text-on-accent); font-weight: 700;
+}
+.pagination__btn:disabled { color: var(--text-disabled); cursor: not-allowed; }
+.pagination__btn svg { width: 16px; height: 16px; }
+.pagination__ellipsis { color: var(--text-disabled); padding: 0 4px; user-select: none; }
+
+/* ============================================================
+   14. CARD — elevación nivel 1; interactiva sube de nivel
+   ============================================================ */
+.card {
+  background: var(--surface-1);
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius-lg);
+  padding: var(--card-padding);
+  box-shadow: var(--shadow-1);
+}
+@media (max-width: 639px) { .card { padding: var(--card-padding-mobile); } }
+.card--interactive {
+  cursor: pointer;
+  transition: transform var(--duration-base) var(--ease-out),
+              background-color var(--duration-base) var(--ease-out),
+              box-shadow var(--duration-base) var(--ease-out);
+}
+.card--interactive:hover { background: var(--surface-2); }
+@media (hover: hover) and (pointer: fine) {
+  .card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
+}
+/* Glow de marca: MÁXIMO UNO POR PANTALLA (solo el elemento hero/CTA) */
+.card--glow { box-shadow: var(--glow-accent); }
+
+/* ============================================================
+   15. TOOLTIP — .has-tooltip > .tooltip (delay 400ms)
+   ============================================================ */
+.has-tooltip { position: relative; display: inline-flex; }
+.tooltip {
+  position: absolute; bottom: calc(100% + 8px); left: 50%;
+  transform: translate(-50%, 4px);
+  background: var(--tooltip-bg); border: 1px solid var(--tooltip-border);
+  color: var(--tooltip-text); font-size: var(--text-xs); line-height: var(--leading-snug);
+  padding: 6px 10px; border-radius: var(--radius-sm); white-space: nowrap;
+  opacity: 0; pointer-events: none;
+  transition: opacity var(--duration-fast) var(--ease-out) 0ms,
+              transform var(--duration-fast) var(--ease-out) 0ms;
+}
+.has-tooltip:focus-visible .tooltip {
+  opacity: 1; transform: translate(-50%, 0);
+  transition-delay: 400ms, 400ms;
+}
+/* Tooltip por hover solo con puntero real — en touch quedaría pegado tras el tap */
+@media (hover: hover) and (pointer: fine) {
+  .has-tooltip:hover .tooltip {
+    opacity: 1; transform: translate(-50%, 0);
+    transition-delay: 400ms, 400ms;
+  }
+}
+
+/* ============================================================
+   ALERT — .alert (banner inline persistente; vs Toast, transitorio)
+   Estado por icono + texto + color — nunca solo color.
+   ============================================================ */
+.alert {
+  display: flex; gap: 12px; align-items: flex-start;
+  padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid;
+  font-size: var(--text-sm);
+}
+.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__close {
+  margin-left: auto; flex: none; display: grid; place-items: center;
+  width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm);
+  background: transparent; color: inherit; cursor: pointer; opacity: .75;
+  transition: opacity var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
+}
+.alert__close:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
+.alert__close svg { width: 18px; height: 18px; }
+.alert--info    { background: var(--info-bg);    color: var(--info);    border-color: color-mix(in srgb, var(--info) 30%, transparent); }
+.alert--success { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
+.alert--warning { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
+.alert--danger  { background: var(--danger-bg);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
+.alert.is-leaving { animation: ne-alert-out 200ms var(--ease-in) forwards; }
+@keyframes ne-alert-out { to { opacity: 0; transform: scale(.98); } }
+
+/* ============================================================
+   16. TOAST — .toast-stack (fixed) + .toast
+   ============================================================ */
+.toast-stack {
+  position: fixed; top: var(--space-4); right: var(--space-4); z-index: 90;
+  display: flex; flex-direction: column; gap: 12px; width: 360px; max-width: calc(100vw - 32px);
+}
+@media (max-width: 639px) { .toast-stack { right: 50%; transform: translateX(50%); } }
+.toast {
+  display: flex; gap: 10px; align-items: flex-start;
+  background: var(--surface-2); border: 1px solid var(--elevated-border);
+  border-left-width: 3px; border-radius: var(--radius-md);
+  padding: 14px 16px; box-shadow: var(--shadow-3);
+  /* Entrada interrumpible (§11.2): transition + @starting-style, no @keyframes —
+     un keyframe no puede invertirse si el toast se apila o se descarta a mitad. */
+  opacity: 1; transform: none;
+  transition: opacity var(--duration-slow) var(--ease-out),
+              transform var(--duration-slow) var(--ease-out);
+}
+@starting-style {
+  .toast { opacity: 0; transform: translateX(24px); }
+}
+.toast--success { border-left-color: var(--success); } .toast--success > svg { color: var(--success); }
+.toast--warning { border-left-color: var(--warning); } .toast--warning > svg { color: var(--warning); }
+.toast--danger  { border-left-color: var(--danger); }  .toast--danger > svg  { color: var(--danger); }
+.toast--info    { border-left-color: var(--info); }    .toast--info > svg    { color: var(--info); }
+.toast > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
+.toast__title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
+.toast__body { font-size: var(--text-sm); color: var(--text-muted); }
+.toast.is-leaving { animation: ne-toast-out 200ms var(--ease-in) forwards; }
+@keyframes ne-toast-out { to { opacity: 0; transform: translateX(24px); } }
+
+/* ============================================================
+   17. MODAL — .modal-overlay + .modal
+   ============================================================ */
+.modal-overlay {
+  position: fixed; inset: 0; z-index: 100;
+  display: grid; place-items: center; padding: var(--space-4);
+  background: var(--overlay); backdrop-filter: blur(4px);
+  animation: ne-fade var(--duration-base) var(--ease-out);
+}
+.modal-overlay[hidden] { display: none; }
+.modal {
+  width: 100%; max-width: 480px;
+  background: var(--surface-2); border: 1px solid var(--elevated-border);
+  border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
+  padding: var(--card-padding);
+  animation: ne-modal-in var(--duration-slow) var(--ease-out);
+}
+.modal--lg { max-width: 640px; }
+.modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
+.modal__title { font-family: var(--font-body); font-size: var(--text-xl); font-weight: 600; color: var(--text-heading); margin: 0; }
+.modal__footer { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }
+@keyframes ne-fade { from { opacity: 0; } }
+@keyframes ne-modal-in { from { opacity: 0; transform: scale(.96); } }
+
+/* ============================================================
+   18. TABLA — .table
+   ============================================================ */
+.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
+.table th {
+  background: var(--table-header-bg);
+  font-size: var(--text-xs); font-weight: 500; text-transform: uppercase;
+  letter-spacing: var(--tracking-overline); color: var(--text-muted);
+  text-align: left; padding: 12px 16px;
+  border-bottom: 1px solid var(--border-strong);
+}
+.table td {
+  height: 52px; padding: 8px 16px;
+  border-bottom: 1px solid var(--row-border);
+  color: var(--text-secondary);
+}
+.table tbody tr { transition: background-color var(--duration-fast) var(--ease-out); }
+.table tbody tr:hover { background: var(--row-hover); }
+.table tbody tr.is-selected { background: var(--accent-selected); box-shadow: inset 2px 0 0 var(--accent-400); }
+.table .num, .table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+
+/* ============================================================
+   19. NAVEGACIÓN — .navbar, .sidebar, .tabs, .breadcrumbs
+   ============================================================ */
+.navbar {
+  position: sticky; top: 0; z-index: 50;
+  display: flex; align-items: center; gap: var(--space-6);
+  height: 64px; padding: 0 var(--space-6);
+  background: var(--navbar-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--elevated-border);
+}
+.navbar__links { display: flex; gap: var(--space-2); align-items: center; height: 100%; }
+.navbar__link {
+  position: relative; display: inline-flex; align-items: center; height: 100%;
+  padding: 0 var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500;
+  transition: color var(--duration-fast) var(--ease-out);
+}
+.navbar__link:hover { color: var(--text-primary); }
+.navbar__link.is-active { color: var(--nav-active); }
+.navbar__link.is-active::after {
+  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 0;
+  height: 2px; background: var(--accent-400);
+}
+
+.sidebar {
+  width: 260px; padding: var(--space-3);
+  background: var(--sidebar-bg); border-right: 1px solid var(--row-border);
+  display: flex; flex-direction: column; gap: 2px;
+}
+.sidebar__item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 12px; border-radius: var(--radius-md);
+  color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500;
+  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
+}
+.sidebar__item:hover { background: var(--surface-2); color: var(--text-primary); }
+.sidebar__item.is-active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); }
+.sidebar__item svg { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
+.sidebar__item.is-active svg { color: var(--sidebar-active-icon); }
+
+.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;
+  color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
+  transition: color var(--duration-fast) var(--ease-out);
+}
+.tabs__btn:hover { color: var(--text-primary); }
+.tabs__btn.is-active { color: var(--text-primary); }
+.tabs__indicator {
+  position: absolute; bottom: -1px; left: 0; height: 2px; width: 0;
+  background: var(--accent-400);
+  /* Se mueve de A a B en pantalla → --ease-in-out (§11.2) */
+  transition: transform var(--duration-slow) var(--ease-in-out), width var(--duration-slow) var(--ease-in-out);
+}
+
+.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
+.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
+.breadcrumbs li + li::before { content: "/"; color: var(--text-disabled); }
+.breadcrumbs a { color: var(--text-muted); } .breadcrumbs a:hover { color: var(--text-primary); }
+.breadcrumbs li:last-child { color: var(--text-primary); }
+
+/* ============================================================
+   20. ACCORDION — .accordion (animación grid-template-rows)
+   ============================================================ */
+.accordion { border: 1px solid var(--elevated-border); border-radius: var(--radius-lg); overflow: hidden; }
+.accordion__item { background: var(--surface-1); }
+.accordion__item + .accordion__item { border-top: 1px solid var(--row-border); }
+.accordion__header {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
+  width: 100%; padding: 16px 20px; border: 0; background: transparent; cursor: pointer;
+  color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); font-weight: 500; text-align: left;
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+.accordion__header:hover { background: var(--surface-2); }
+.accordion__header svg {
+  width: 18px; height: 18px; color: var(--text-muted); flex: none;
+  transition: transform var(--duration-slow) var(--ease-out);
+}
+.accordion__header[aria-expanded="true"] svg { transform: rotate(180deg); }
+.accordion__panel {
+  display: grid; grid-template-rows: 0fr;
+  transition: grid-template-rows var(--duration-slow) var(--ease-out);
+}
+.accordion__header[aria-expanded="true"] + .accordion__panel { grid-template-rows: 1fr; }
+.accordion__inner { overflow: hidden; }
+.accordion__content {
+  padding: 0 20px 18px; font-size: 15px; line-height: var(--leading-body); color: var(--text-muted);
+  opacity: 0; transition: opacity var(--duration-slow) var(--ease-out);
+}
+.accordion__header[aria-expanded="true"] + .accordion__panel .accordion__content { opacity: 1; }
+
+/* ============================================================
+   21. PROGRESS BAR — .progress (con glow de acento)
+   ============================================================ */
+.progress__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
+.progress__label { font-size: var(--text-sm); color: var(--text-secondary); }
+.progress__value { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--data-color); font-variant-numeric: tabular-nums; }
+.progress {
+  height: 6px; background: var(--surface-3); border-radius: var(--radius-full); overflow: hidden;
+}
+.progress__bar {
+  height: 100%; width: 0; background: var(--accent-400); border-radius: inherit;
+  box-shadow: 0 0 12px rgba(82,186,237,.5);
+  transition: width 300ms var(--ease-out);
+}
+.progress--no-glow .progress__bar { box-shadow: none; }
+.progress--indeterminate .progress__bar { width: 40%; animation: ne-sweep 1.2s var(--ease-out) infinite; }
+@keyframes ne-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
+
+.progress-ring { display: inline-grid; place-items: center; position: relative; }
+.progress-ring svg { transform: rotate(-90deg); }
+.progress-ring__track { fill: none; stroke: var(--surface-3); }
+.progress-ring__bar {
+  fill: none; stroke: var(--accent-400); stroke-linecap: round;
+  transition: stroke-dashoffset var(--duration-slow) var(--ease-out);
+}
+.progress-ring__value {
+  position: absolute; font-family: var(--font-mono); font-size: var(--text-sm);
+  font-weight: 600; color: var(--data-color); font-variant-numeric: tabular-nums;
+}
+@media (prefers-reduced-motion: reduce) {
+  .progress-ring__bar { transition-duration: 0.01ms !important; }
+}
+
+/* ============================================================
+   22. LINK Y CODE — .link (subrayado animado), .code (inline)
+   ============================================================ */
+.link { position: relative; display: inline-flex; align-items: center; gap: 4px; color: var(--link); }
+.link::after {
+  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
+  background: currentColor; transform: scaleX(0); transform-origin: left;
+  transition: transform 200ms var(--ease-out);
+}
+.link:hover { color: var(--link-hover); }
+.link:hover::after { transform: scaleX(1); }
+.link svg { width: 12px; height: 12px; }
+
+.code {
+  font-family: var(--font-mono); font-size: .9em;
+  color: var(--code-color); background: var(--surface-2);
+  border: 1px solid var(--code-border); border-radius: 6px; padding: 1px 6px;
+}
+
+/* ============================================================
+   23. SKELETON Y EMPTY STATE
+   ============================================================ */
+.skeleton {
+  position: relative; overflow: hidden;
+  background: var(--skeleton-base); border-radius: var(--radius-sm);
+}
+.skeleton--circle { border-radius: var(--radius-full); }
+.skeleton::after {
+  content: ""; position: absolute; inset: 0;
+  background: linear-gradient(90deg, transparent, var(--skeleton-sheen), transparent);
+  transform: translateX(-100%);
+  animation: ne-shimmer 1.4s infinite;
+}
+@keyframes ne-shimmer { to { transform: translateX(100%); } }
+
+.empty-state {
+  display: flex; flex-direction: column; align-items: center; text-align: center;
+  gap: var(--space-2); padding: var(--space-10) var(--space-6);
+}
+.empty-state svg { width: 40px; height: 40px; color: var(--empty-icon); margin-bottom: var(--space-2); }
+.empty-state__title { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); }
+.empty-state__desc { font-size: var(--text-sm); color: var(--text-muted); max-width: 36ch; }
+.empty-state .btn { margin-top: var(--space-3); }
+
+/* ============================================================
+   24. UTILIDADES MÍNIMAS
+   ============================================================ */
+.overline {
+  font-size: var(--text-xs); font-weight: 500; text-transform: uppercase;
+  letter-spacing: var(--tracking-overline); color: var(--text-muted);
+}
+.text-muted { color: var(--text-muted); }
+.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.visually-hidden {
+  position: absolute; width: 1px; height: 1px; margin: -1px;
+  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
+}