/* Generated by npm run build from src/styles. Do not edit directly. */

@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { scroll-behavior: smooth; }
  body { min-height: 100vh; }
  button, input, select, textarea { font: inherit; }
  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  img, svg { display: block; }
}

@layer tokens {
  :root {
    color-scheme: dark;
    /* Primitivos: valores sin intención de uso. */
    --color-neutral-0: #FFFFFF;
    --color-neutral-25: #F7F8FB;
    --color-neutral-50: #EEF0F5;
    --color-neutral-75: #E3E6EE;
    --color-neutral-150: #CDD1DD;
    --color-neutral-200: #B4B8C8;
    --color-neutral-250: #7A7E93;
    --color-indigo-700: #4A50D9;
    --color-indigo-800: #3B40B8;
    --color-green-700: #187040;
    --color-amber-700: #8C5200;
    --color-red-700: #C02B38;
    --color-neutral-950: #0F1017;
    --color-neutral-900: #15161F;
    --color-neutral-850: #1B1D28;
    --color-neutral-800: #242634;
    --color-neutral-750: #2B2E3E;
    --color-neutral-700: #33364A;
    --color-neutral-650: #484C68;
    --color-neutral-600: #4D516D;
    --color-neutral-500: #6C6F85;
    --color-neutral-450: #787B92;
    --color-neutral-400: #8B8EA5;
    --color-neutral-350: #9498AE;
    --color-neutral-300: #A6A9BE;
    --color-neutral-100: #E6E7F0;
    --color-indigo-300: #A4A9FF;
    --color-indigo-400: #8A90FF;
    --color-indigo-500: #7C83FF;
    --color-indigo-600: #6970F0;
    --color-indigo-950: #12143A;
    --color-green-400: #5FC98E;
    --color-amber-400: #F2B84B;
    --color-red-300: #FF8C95;
    --color-red-350: #F3707B;
    --color-red-400: #F0616D;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
    --font-size-base: 1rem;
    --font-size-display: clamp(2rem, 6vw, 3rem);
    --font-size-h1: 1.75rem;
    --font-size-h2: 1.375rem;
    --font-size-h3: 1.125rem;
    --font-size-h4: .95rem;
    --font-size-body: .9375rem;
    --font-size-small: .8125rem;
    --font-size-caption: .6875rem;
    --line-height-tight: 1.2;
    --letter-spacing-tight: -.025em;
    --line-height-base: 1.55;
    --radius-2: .3rem;
    --radius-3: .5rem;
    --radius-4: .65rem;
    --radius-5: .875rem;
    --radius-6: 1.25rem;
    --shadow-1: 0 1px 5px rgba(0, 0, 0, .22);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, .28);
    --shadow-3: 0 20px 60px rgba(0, 0, 0, .35);
    --shadow-4: 0 28px 80px rgba(0, 0, 0, .2);
    --duration-fast: .16s;
    --duration-base: .2s;
    --duration-slow: .25s;
    --ease-standard: ease;
    --z-base: 0;
    --z-sticky: 10;
    --z-overlay: 20;
    --z-navigation: 30;
    --z-toast: 50;
    --z-skip-link: 100;

    /* Serie de gráficos: tonos categóricos validados (validate_palette: banda de luminosidad, croma, daltonismo y visión normal). */
    --color-orange-500: #EB6834;
    --color-orange-600: #D95926;
    --color-aqua-500: #1BAF7A;
    --color-aqua-600: #199E70;
    --color-yellow-500: #EDA100;
    --color-yellow-600: #C98500;
    --color-magenta-500: #E87BA4;
    --color-magenta-600: #D55181;

    /* Semánticos: intención transversal. */
    --surface-canvas: var(--color-neutral-950);
    --surface-navigation: var(--color-neutral-900);
    --surface-default: var(--color-neutral-850);
    --surface-raised: var(--color-neutral-800);
    --surface-hover: var(--color-neutral-750);
    --border-default: var(--color-neutral-700);
    --border-hover: var(--color-neutral-600);
    /* Borde que identifica controles (WCAG 1.4.11: ≥3:1 sobre cualquier superficie). Los bordes de tarjetas y divisores siguen en --border-default. */
    --border-control: var(--color-neutral-450);
    --border-control-hover: var(--color-neutral-400);
    --border-hover-subtle: var(--color-neutral-650);
    --border-translucent: rgba(255, 255, 255, .08);
    --surface-scrim: rgba(4, 5, 10, .72);
    --shadow-raised: var(--shadow-1);
    --shadow-tooltip: var(--shadow-2);
    --shadow-showcase: var(--shadow-4);
    --text-default: var(--color-neutral-100);
    --text-subtle: var(--color-neutral-300);
    /* Solo para texto deshabilitado o decoración (exento de WCAG 1.4.3): no lo uses para contenido legible. */
    --text-muted: var(--color-neutral-500);
    --text-supporting: var(--color-neutral-350);
    --action-primary: var(--color-indigo-500);
    --action-primary-hover: var(--color-indigo-400);
    --action-primary-subtle: rgba(124, 131, 255, .15);
    --text-accent: var(--color-indigo-300);
    --text-on-action: var(--color-indigo-950);
    --status-success: var(--color-green-400);
    --status-warning: var(--color-amber-400);
    --status-danger: var(--color-red-350);
    /* Series categóricas de gráficos en orden fijo (nunca se reciclan: a partir de la sexta, --chart-series-other). */
    --chart-series-1: var(--color-indigo-500);
    --chart-series-2: var(--color-orange-600);
    --chart-series-3: var(--color-aqua-600);
    --chart-series-4: var(--color-yellow-600);
    --chart-series-5: var(--color-magenta-600);
    --chart-series-other: var(--color-neutral-450);
    --chart-series-total: var(--color-neutral-400);
    --text-danger: var(--color-red-300);
    --status-success-subtle: rgba(74, 222, 128, .1);
    --status-danger-subtle: rgba(248, 113, 113, .1);
    --status-danger-symbol: rgba(255, 107, 107, .12);
    --space-page-gutter: var(--space-4);

    /* Componentes: contratos locales que consumen los componentes. */
    --component-control-min-height: 2.75rem;
    --component-button-padding: .7rem 1rem;
    --component-copy-button-height: 2rem;
    --component-command-menu-width: 36rem;
    --component-icon-button-size: 2.75rem;
    --component-focus-ring: 0 0 0 3px var(--action-primary-subtle);
    --component-overlay-shadow: var(--shadow-3);
    --component-floating-offset: var(--space-2);
    --component-overlay-backdrop: rgba(5, 6, 11, .78);
    --component-overlay-drawer-width: 26rem;
    --component-overlay-drawer-padding: 1.25rem;
    --component-toast-max-width: 24rem;
    --component-toast-gap: .5rem;
    --component-toast-padding: .8rem;
    --component-toast-enter: .18s;
    --component-floating-max-width: 20rem;

    /* Acciones y etiquetas. */
    --component-control-border: var(--border-control);
    --component-control-border-hover: var(--border-control-hover);
    --component-icon-button-border-hover: var(--component-control-border-hover);
    --component-button-secondary-border-hover: var(--component-control-border-hover);
    --component-button-danger-text: var(--text-danger);
    --component-badge-accent-text: var(--text-accent);
    --component-toast-danger-symbol: var(--status-danger-symbol);
    --component-chart-tooltip-shadow: var(--shadow-tooltip);

    /* Divisor, grupo de botones y botón dividido. */
    --component-divider-color: var(--border-default);
    --component-divider-spacing: var(--space-4);
    --component-button-group-radius: .65rem;
    --component-button-group-pressed-bg: var(--action-primary-subtle);
    --component-button-group-pressed-border: var(--action-primary);
    --component-button-group-pressed-text: var(--text-default);
    --component-split-button-divider: var(--border-default);
    --component-split-button-divider-primary: var(--surface-canvas);

    /* Carga, progreso, teclas y cierre. */
    --component-spinner-size: 1.5rem;
    --component-spinner-thickness: 3px;
    --component-spinner-track: var(--border-default);
    --component-spinner-color: var(--action-primary);
    --component-spinner-duration: .8s;
    --component-progress-track: var(--surface-canvas);
    --component-progress-fill: var(--action-primary);
    --component-progress-indeterminate-duration: 1.6s;
    --component-progress-ring-size: 4rem;
    --component-progress-ring-thickness: 6px;
    --component-progress-ring-track: var(--surface-canvas);
    --component-progress-ring-fill: var(--action-primary);
    --component-kbd-bg: var(--surface-raised);
    --component-kbd-border: var(--border-default);
    --component-kbd-text: var(--text-subtle);
    --component-close-button-color: var(--text-supporting);
    --component-close-button-color-hover: var(--text-default);

    /* Avatares. */
    --component-avatar-status-size: .8rem;
    --component-avatar-ring: var(--surface-default);
    --component-avatar-overlap: -.4rem;

    /* Métricas y línea de tiempo. */
    --component-metric-min: 10rem;
    --component-metric-padding: var(--space-4);
    --component-metric-value-size: 1.75rem;
    --component-timeline-marker-size: .7rem;
    --component-timeline-gap: var(--space-4);

    /* Árbol y tabla avanzada. */
    --component-tree-indent: 1.25rem;
    --component-tree-row-height: var(--component-control-min-height);
    --component-tree-selected-bg: var(--action-primary-subtle);
    --component-table-compact-padding: var(--space-1) var(--space-3);
    --component-table-compact-row-height: 2.25rem;

    /* Chips, etiquetas y descripciones. */
    --component-chip-height: 2rem;
    --component-chip-bg: var(--surface-raised);
    --component-chip-border: var(--component-control-border);
    --component-chip-selected-bg: var(--action-primary-subtle);
    --component-chip-selected-border: var(--action-primary);
    --component-descriptions-min: 11rem;

    /* Contraseña, búsqueda y OTP. */
    --component-search-icon-space: 2.6rem;
    --component-otp-cell: 3rem;
    --component-otp-gap: var(--space-2);

    /* Selector de fecha y de rango. */
    --component-date-picker-width: 21rem;
    --component-date-picker-day-radius: var(--radius-3);
    --component-date-picker-selected-bg: var(--action-primary);
    --component-date-picker-selected-text: var(--text-on-action);
    --component-date-picker-range-bg: var(--action-primary-subtle);
    --component-calendar-mark-size: .3rem;
    --component-color-swatch-size: 2.75rem;
    --component-upload-padding: 1.5rem 1rem;
    --component-context-menu-width: 14rem;
    --component-bottom-nav-height: 3.5rem;
    --component-bottom-nav-indicator-width: 1.75rem;
    --component-rich-text-min-height: 9rem;
    --component-tour-width: 22rem;
    --component-tour-highlight-z: calc(var(--z-toast) - 1);
    --component-transfer-height: 11.5rem;

    /* Stepper y asistente. */
    --component-stepper-marker-size: 2rem;
    --component-stepper-gap: var(--space-4);
    --component-stepper-line: var(--border-default);
    --component-stepper-line-complete: var(--action-primary);
    --component-stepper-current-ring: var(--action-primary-subtle);
    --component-stepper-complete-bg: var(--action-primary);
    --component-stepper-complete-text: var(--text-on-action);

    /* Slider, slider de rango y campo numérico. */
    --component-slider-track: var(--surface-canvas);
    --component-slider-fill: var(--action-primary);
    --component-slider-thumb: var(--text-default);
    --component-slider-track-height: .375rem;
    --component-slider-thumb-size: 1.25rem;
    --component-number-input-gap: var(--space-2);
    --component-number-input-max-width: 14rem;
    --component-number-input-button-bg: var(--surface-raised);

    --component-field-bg: var(--surface-canvas);
    --component-field-border: var(--component-control-border);
    --component-field-border-hover: var(--component-control-border-hover);
    --component-field-focus: var(--action-primary);
    --component-field-focus-ring: var(--component-focus-ring);
    --component-field-error: var(--status-danger);
    --component-field-success: var(--status-success);
    --component-field-help: var(--text-supporting);
    --component-field-disabled-opacity: .5;
    --component-field-radius: .6rem;
    --component-field-padding: .7rem .8rem;
    /* Estados de navegación compartidos por tabs, paginación, breadcrumbs y side-nav. */
    --component-nav-text: var(--text-subtle);
    --component-nav-text-hover: var(--text-default);
    --component-nav-text-active: var(--text-default);
    --component-nav-text-disabled: var(--text-muted);
    --component-nav-surface-hover: var(--surface-hover);
    --component-nav-surface-active: var(--action-primary-subtle);
    --component-nav-indicator: var(--action-primary);
    --component-nav-indicator-width: 3px;
    --component-nav-focus-ring: var(--component-focus-ring);
    --component-nav-disabled-opacity: .45;
    --component-nav-transition: var(--duration-base) var(--ease-standard);
    --component-nav-item-padding: var(--space-2) var(--space-4);

    /* Tabla operativa v0.8 (solo .data-table). */
    --component-table-header-bg: var(--surface-raised);
    --component-table-header-text: var(--text-supporting);
    --component-table-border: var(--border-default);
    --component-table-row-hover: var(--surface-hover);
    --component-table-row-selected: var(--action-primary-subtle);
    --component-table-row-selected-border: var(--action-primary);
    --component-table-cell-padding: var(--space-2) var(--space-3);
    --component-table-row-min-height: var(--component-control-min-height);
    --component-table-min-width: 38rem;

    /* Primitivas de layout (.stack, .cluster, .grid, .container, .aspect-ratio). */
    --component-stack-gap: var(--space-4);
    --component-cluster-gap: var(--space-3);
    --component-grid-gap: var(--space-4);
    --component-grid-min: 16rem;
    --component-container-gutter: var(--space-page-gutter);
    --component-container-max: var(--component-container-max-lg);
    --component-container-max-sm: 36rem;
    --component-container-max-md: 48rem;
    --component-container-max-lg: 64rem;
    --component-container-max-xl: 90rem;
    --component-aspect-square: 1 / 1;
    --component-aspect-standard: 4 / 3;
    --component-aspect-wide: 16 / 9;

    /* Alias públicos v0.3: conservar para consumidores existentes. */
    --radius-sm: var(--radius-3);
    --radius-md: var(--radius-5);
    --radius-lg: var(--radius-6);
    --shadow-float: var(--component-overlay-shadow);
    --page-gutter: var(--space-page-gutter);
  }

  /* Densidad global (opcional): data-density="compact" en <html> reduce controles, celdas y rellenos.
     Solo redefine tokens de componente; "comfortable" (o sin atributo) conserva los valores por defecto. */
  :root[data-density="compact"] {
    --component-control-min-height: 2.25rem;
    --component-button-padding: .45rem .85rem;
    --component-icon-button-size: 2.25rem;
    --component-field-padding: .45rem .65rem;
    --component-metric-padding: var(--space-3);
    --component-nav-item-padding: var(--space-1) var(--space-3);
    --component-toast-padding: .6rem;
  }
  :root[data-density="compact"] { --component-table-cell-padding: var(--component-table-compact-padding); --component-table-row-min-height: var(--component-table-compact-row-height); }

  /* Tema claro (opcional): data-theme="light" en <html>, o data-theme="auto" para seguir al sistema.
     Solo redefine tokens semánticos; los bloques light y auto deben mantenerse idénticos (lo comprueba npm run check). */
  :root[data-theme="light"] {
    color-scheme: light;
    --surface-canvas: var(--color-neutral-25);
    --surface-navigation: var(--color-neutral-0);
    --surface-default: var(--color-neutral-0);
    --surface-raised: var(--color-neutral-50);
    --surface-hover: var(--color-neutral-75);
    --border-default: var(--color-neutral-150);
    --border-hover: var(--color-neutral-200);
    --border-hover-subtle: var(--color-neutral-200);
    --border-control: var(--color-neutral-250);
    --border-control-hover: var(--color-neutral-500);
    --border-translucent: rgba(21, 22, 31, .1);
    --surface-scrim: rgba(21, 22, 31, .45);
    --shadow-raised: 0 1px 3px rgba(21, 22, 31, .12);
    --shadow-tooltip: 0 8px 24px rgba(21, 22, 31, .16);
    --shadow-showcase: 0 24px 60px rgba(21, 22, 31, .12);
    --text-default: var(--color-neutral-900);
    --text-subtle: var(--color-neutral-700);
    --text-supporting: var(--color-neutral-600);
    --text-muted: var(--color-neutral-500);
    --action-primary: var(--color-indigo-700);
    --action-primary-hover: var(--color-indigo-800);
    --action-primary-subtle: rgba(74, 80, 217, .1);
    --text-on-action: var(--color-neutral-0);
    --text-accent: var(--color-indigo-800);
    --status-success: var(--color-green-700);
    --status-warning: var(--color-amber-700);
    --status-danger: var(--color-red-700);
    --chart-series-1: var(--color-indigo-700);
    --chart-series-2: var(--color-orange-500);
    --chart-series-3: var(--color-aqua-500);
    --chart-series-4: var(--color-yellow-500);
    --chart-series-5: var(--color-magenta-500);
    --chart-series-other: var(--color-neutral-250);
    --chart-series-total: var(--color-neutral-500);
    --text-danger: var(--color-red-700);
    --status-success-subtle: rgba(28, 124, 73, .1);
    --status-danger-subtle: rgba(192, 43, 56, .08);
    --status-danger-symbol: rgba(192, 43, 56, .12);
    --component-overlay-backdrop: rgba(21, 22, 31, .45);
    --component-overlay-shadow: 0 20px 50px rgba(21, 22, 31, .18);
    --component-progress-track: var(--color-neutral-75);
    --component-progress-ring-track: var(--color-neutral-75);
    --component-slider-thumb: var(--surface-default);
  }
  @media (prefers-color-scheme: light) {
    :root[data-theme="auto"] {
      color-scheme: light;
      --surface-canvas: var(--color-neutral-25);
      --surface-navigation: var(--color-neutral-0);
      --surface-default: var(--color-neutral-0);
      --surface-raised: var(--color-neutral-50);
      --surface-hover: var(--color-neutral-75);
      --border-default: var(--color-neutral-150);
      --border-hover: var(--color-neutral-200);
      --border-hover-subtle: var(--color-neutral-200);
      --border-control: var(--color-neutral-250);
      --border-control-hover: var(--color-neutral-500);
      --border-translucent: rgba(21, 22, 31, .1);
      --surface-scrim: rgba(21, 22, 31, .45);
      --shadow-raised: 0 1px 3px rgba(21, 22, 31, .12);
      --shadow-tooltip: 0 8px 24px rgba(21, 22, 31, .16);
      --shadow-showcase: 0 24px 60px rgba(21, 22, 31, .12);
      --text-default: var(--color-neutral-900);
      --text-subtle: var(--color-neutral-700);
      --text-supporting: var(--color-neutral-600);
      --text-muted: var(--color-neutral-500);
      --action-primary: var(--color-indigo-700);
      --action-primary-hover: var(--color-indigo-800);
      --action-primary-subtle: rgba(74, 80, 217, .1);
      --text-on-action: var(--color-neutral-0);
      --text-accent: var(--color-indigo-800);
      --status-success: var(--color-green-700);
      --status-warning: var(--color-amber-700);
      --status-danger: var(--color-red-700);
      --chart-series-1: var(--color-indigo-700);
      --chart-series-2: var(--color-orange-500);
      --chart-series-3: var(--color-aqua-500);
      --chart-series-4: var(--color-yellow-500);
      --chart-series-5: var(--color-magenta-500);
      --chart-series-other: var(--color-neutral-250);
      --chart-series-total: var(--color-neutral-500);
      --text-danger: var(--color-red-700);
      --status-success-subtle: rgba(28, 124, 73, .1);
      --status-danger-subtle: rgba(192, 43, 56, .08);
      --status-danger-symbol: rgba(192, 43, 56, .12);
      --component-overlay-backdrop: rgba(21, 22, 31, .45);
      --component-overlay-shadow: 0 20px 50px rgba(21, 22, 31, .18);
      --component-progress-track: var(--color-neutral-75);
      --component-progress-ring-track: var(--color-neutral-75);
      --component-slider-thumb: var(--surface-default);
    }
  }

  /* Impresión: siempre tema claro sobre papel, con los mismos valores que data-theme="light". */
  @media print {
    :root:root {
      color-scheme: light;
      --surface-canvas: var(--color-neutral-25);
      --surface-navigation: var(--color-neutral-0);
      --surface-default: var(--color-neutral-0);
      --surface-raised: var(--color-neutral-50);
      --surface-hover: var(--color-neutral-75);
      --border-default: var(--color-neutral-150);
      --border-hover: var(--color-neutral-200);
      --border-hover-subtle: var(--color-neutral-200);
      --border-control: var(--color-neutral-250);
      --border-control-hover: var(--color-neutral-500);
      --border-translucent: rgba(21, 22, 31, .1);
      --surface-scrim: rgba(21, 22, 31, .45);
      --shadow-raised: 0 1px 3px rgba(21, 22, 31, .12);
      --shadow-tooltip: 0 8px 24px rgba(21, 22, 31, .16);
      --shadow-showcase: 0 24px 60px rgba(21, 22, 31, .12);
      --text-default: var(--color-neutral-900);
      --text-subtle: var(--color-neutral-700);
      --text-supporting: var(--color-neutral-600);
      --text-muted: var(--color-neutral-500);
      --action-primary: var(--color-indigo-700);
      --action-primary-hover: var(--color-indigo-800);
      --action-primary-subtle: rgba(74, 80, 217, .1);
      --text-on-action: var(--color-neutral-0);
      --text-accent: var(--color-indigo-800);
      --status-success: var(--color-green-700);
      --status-warning: var(--color-amber-700);
      --status-danger: var(--color-red-700);
      --chart-series-1: var(--color-indigo-700);
      --chart-series-2: var(--color-orange-500);
      --chart-series-3: var(--color-aqua-500);
      --chart-series-4: var(--color-yellow-500);
      --chart-series-5: var(--color-magenta-500);
      --chart-series-other: var(--color-neutral-250);
      --chart-series-total: var(--color-neutral-500);
      --text-danger: var(--color-red-700);
      --status-success-subtle: rgba(28, 124, 73, .1);
      --status-danger-subtle: rgba(192, 43, 56, .08);
      --status-danger-symbol: rgba(192, 43, 56, .12);
      --component-overlay-backdrop: rgba(21, 22, 31, .45);
      --component-overlay-shadow: 0 20px 50px rgba(21, 22, 31, .18);
      --component-progress-track: var(--color-neutral-75);
      --component-progress-ring-track: var(--color-neutral-75);
      --component-slider-thumb: var(--surface-default);
    }
  }
}

@layer base {
  body { background: var(--surface-canvas); color: var(--text-default); font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--line-height-base); }
  a { color: inherit; text-decoration: none; }
  button { color: inherit; }
  ::selection { background: var(--action-primary); color: var(--text-on-action); }
  :focus-visible { outline: 2px solid var(--action-primary); outline-offset: 3px; box-shadow: var(--component-focus-ring); }
  .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .icon { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .skip-link { position: fixed; z-index: var(--z-skip-link); top: .75rem; left: .75rem; padding: .65rem 1rem; border-radius: var(--radius-sm); background: var(--action-primary); color: var(--text-on-action); transform: translateY(-150%); }
  .skip-link:focus { transform: translateY(0); }
}

@layer layout {
  .app-shell { min-height: 100vh; }
  .sidebar { position: fixed; z-index: var(--z-navigation); inset: 0 auto 0 0; display: flex; width: min(19rem, 86vw); flex-direction: column; border-right: 1px solid var(--border-default); background: var(--surface-navigation); transform: translateX(-101%); transition: transform var(--duration-slow) ease; }
  .menu-open { overflow: hidden; }
  .menu-open .sidebar { transform: translateX(0); }
  .sidebar-scrim { position: fixed; z-index: var(--z-overlay); inset: 0; visibility: hidden; background: var(--surface-scrim); opacity: 0; transition: opacity var(--duration-slow) ease, visibility var(--duration-slow); }
  .menu-open .sidebar-scrim { visibility: visible; opacity: 1; }
  .brand { display: flex; min-height: 4.75rem; align-items: center; gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--border-default); }
  .brand__mark { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .65rem; background: var(--action-primary); color: var(--text-on-action); box-shadow: 0 0 0 5px var(--action-primary-subtle); }
  .brand strong, .brand small, .sidebar__footer strong, .sidebar__footer small { display: block; }
  .brand strong { font-size: .9rem; letter-spacing: .04em; }
  .brand small, .sidebar__footer small { color: var(--text-supporting); font-size: .72rem; }
  .sidebar__close { margin-left: auto; }
  .side-nav { display: grid; gap: .25rem; padding: 1.25rem .75rem; }
  .side-nav .eyebrow { padding: 0 .75rem .5rem; }
  .side-nav__link { display: flex; min-height: 2.85rem; align-items: center; gap: .85rem; padding: .7rem .75rem; border-radius: .65rem; color: var(--text-subtle); font-size: .88rem; font-weight: 600; transition: background var(--duration-base), color var(--duration-base); }
  .side-nav__link span { color: var(--text-supporting); font: 500 .67rem/1 ui-monospace, SFMono-Regular, monospace; }
  .side-nav__link:hover { background: var(--component-nav-surface-hover); color: var(--component-nav-text-active); }
  .side-nav__link:focus-visible { box-shadow: var(--component-nav-focus-ring); }
  .side-nav__link[data-state~="active"], .side-nav__link[aria-current] { background: var(--component-nav-surface-active); color: var(--component-nav-text-active); box-shadow: inset var(--component-nav-indicator-width) 0 var(--component-nav-indicator); }
  .side-nav__link[data-state~="active"]:focus-visible { box-shadow: inset var(--component-nav-indicator-width) 0 var(--component-nav-indicator), var(--component-nav-focus-ring); }
  .side-nav__link[data-state~="active"] span { color: var(--text-accent); }
  .sidebar__footer { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding: 1.15rem 1.5rem; border-top: 1px solid var(--border-default); }
  .status-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--status-success); box-shadow: 0 0 0 5px color-mix(in srgb, var(--status-success) 12%, transparent); }
  .page { min-width: 0; }
  .topbar { position: sticky; z-index: var(--z-sticky); top: 0; display: flex; height: 4.25rem; align-items: center; gap: .6rem; padding: .65rem var(--page-gutter); border-bottom: 1px solid color-mix(in srgb, var(--border-default) 78%, transparent); background: color-mix(in srgb, var(--surface-canvas) 88%, transparent); backdrop-filter: blur(16px); }
  .command-search { display: flex; min-width: 0; flex: 1; align-items: center; gap: .6rem; padding: 0 .8rem; border: 1px solid var(--component-control-border); border-radius: .65rem; background: var(--surface-default); color: var(--text-supporting); }
  .command-search:focus-within { border-color: var(--action-primary); box-shadow: 0 0 0 3px var(--action-primary-subtle); }
  .command-search input { width: 100%; min-width: 0; height: 2.6rem; border: 0; outline: 0; background: transparent; color: var(--text-default); }
  .command-search kbd { display: none; padding: .18rem .42rem; white-space: nowrap; border: 1px solid var(--border-default); border-radius: .3rem; background: var(--surface-raised); color: var(--text-supporting); font: 600 .66rem/1.3 ui-monospace, monospace; }
  .notification-button { position: relative; }
  .notification-button > span { position: absolute; top: .48rem; right: .5rem; width: .4rem; height: .4rem; border: 2px solid var(--surface-canvas); border-radius: 50%; background: var(--status-danger); }
  .avatar { position: relative; display: grid; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--action-primary) 40%, transparent); border-radius: 50%; background: var(--action-primary-subtle); color: var(--text-accent); font-size: .7rem; font-weight: 800; }
  main { width: min(100%, 90rem); margin-inline: auto; padding: 0 var(--page-gutter); }
  .intro { display: grid; gap: 2rem; padding: 3.75rem 0 3rem; border-bottom: 1px solid var(--border-default); }
  .intro h1 { max-width: 13ch; margin-top: .8rem; font-size: clamp(2.35rem, 10vw, 5.6rem); font-weight: 650; letter-spacing: -.055em; line-height: .98; text-wrap: balance; }
  .intro h1 span { color: var(--text-supporting); }
  .intro__copy { max-width: 41rem; margin-top: 1.4rem; color: var(--text-subtle); font-size: 1.03rem; }
  .intro__meta { display: grid; grid-template-columns: repeat(3, minmax(max-content, 1fr)); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-default); }
  .intro__meta div { min-width: 0; padding: 1rem .7rem; }
  .intro__meta div + div { border-left: 1px solid var(--border-default); }
  .intro__meta span, .intro__meta strong { display: block; }
  .intro__meta span { overflow: hidden; color: var(--text-supporting); font-size: .65rem; letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; }
  .intro__meta strong { margin-top: .3rem; font-size: 1.08rem; }
  .doc-section { scroll-margin-top: 5rem; padding: 3.5rem 0; border-bottom: 1px solid var(--border-default); }
  .doc-section[hidden] { display: none; }
  .doc-section:focus { outline: none; box-shadow: none; }
  .section-heading { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem; }
  .section-heading > span { padding-top: .3rem; color: var(--text-accent); font: 600 .68rem/1 ui-monospace, monospace; }
  .section-heading h2 { margin-top: .25rem; font-size: clamp(1.65rem, 7vw, 2.35rem); letter-spacing: -.035em; line-height: 1.1; }
  .color-grid, .feedback-layout, .data-layout { display: grid; gap: 1rem; }
  .component-board { overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-default); }
  .component-group { padding: 1.25rem; }
  .component-group + .component-group { border-top: 1px solid var(--border-default); }
  .split-group { display: grid; gap: 1.5rem; }
  .component-row { display: flex; flex-wrap: wrap; gap: .65rem; }
  .component-row--center { align-items: center; }
  .skeleton-card + .component-board, .form-showcase + .component-board, .data-card + .component-board, .type-specimen + .component-board { margin-top: 1rem; }
  .form-showcase { display: grid; gap: 1rem; padding: 1.25rem; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-default); }
  .choice-group { display: grid; gap: 1rem; align-content: center; }
  .demo-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
  footer { display: flex; flex-direction: column; gap: .5rem; padding: 2rem var(--page-gutter); color: var(--text-supporting); font-size: .75rem; }

  /* Primitivas genéricas: espaciado y rejillas sin acoplarse a ningún componente. El hueco y los anchos salen de tokens --component-*. */
  .stack { display: flex; flex-direction: column; gap: var(--component-stack-gap); min-width: 0; }
  .stack--sm { --component-stack-gap: var(--space-2); }
  .stack--lg { --component-stack-gap: var(--space-6); }
  .stack--xl { --component-stack-gap: var(--space-8); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--component-cluster-gap); min-width: 0; }
  .cluster--sm { --component-cluster-gap: var(--space-2); }
  .cluster--lg { --component-cluster-gap: var(--space-6); }
  .cluster--between { justify-content: space-between; }
  .cluster--end { justify-content: flex-end; }
  .inline { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--component-cluster-gap); min-width: 0; }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--component-grid-min)), 1fr)); gap: var(--component-grid-gap); min-width: 0; }
  .grid--sm { --component-grid-gap: var(--space-2); }
  .grid--lg { --component-grid-gap: var(--space-6); }
  .grid--min-sm { --component-grid-min: 10rem; }
  .grid--min-lg { --component-grid-min: 24rem; }
  .container { box-sizing: border-box; width: min(100%, var(--component-container-max)); margin-inline: auto; padding-inline: var(--component-container-gutter); }
  .container--sm { --component-container-max: var(--component-container-max-sm); }
  .container--md { --component-container-max: var(--component-container-max-md); }
  .container--lg { --component-container-max: var(--component-container-max-lg); }
  .container--xl { --component-container-max: var(--component-container-max-xl); }
  .aspect-ratio { position: relative; aspect-ratio: var(--component-aspect-wide); overflow: hidden; }
  .aspect-ratio--1-1 { aspect-ratio: var(--component-aspect-square); }
  .aspect-ratio--4-3 { aspect-ratio: var(--component-aspect-standard); }
  .aspect-ratio--16-9 { aspect-ratio: var(--component-aspect-wide); }
  .aspect-ratio > :is(img, video, iframe, svg, canvas) { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* Demo de código, copia e índice (solo catálogo). */
  .content-demo__layout { display: grid; gap: var(--space-4); margin-block: var(--space-4); }
  .content-demo__article { display: grid; gap: var(--space-3); min-width: 0; }
  .content-demo__article :is(h4, h5) { margin: 0; scroll-margin-top: 5rem; }
  @media (min-width: 48rem) { .content-demo__layout { grid-template-columns: 11rem minmax(0, 1fr); align-items: start; } .content-demo__layout .toc { position: sticky; top: 5rem; } }

  /* Demo de las primitivas (solo catálogo). */
  .layout-primitives { margin-top: 1rem; }
  .layout-primitives .stack--sm { align-items: flex-start; }
  .layout-primitives__container { border: 1px dashed var(--border-control); border-radius: var(--radius-md); padding-block: var(--space-3); }
  .layout-primitives__ratio { display: grid; place-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-supporting); font: 600 .75rem/1 ui-monospace, monospace; }
}

@layer components {
  .eyebrow { color: var(--text-supporting); font-size: .66rem; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
  .accent-text { color: var(--text-accent); }
  code { color: var(--text-supporting); font: 500 .68rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
  .icon-button { display: inline-grid; width: var(--component-icon-button-size); height: var(--component-icon-button-size); flex: 0 0 auto; place-items: center; border: 1px solid var(--component-control-border); border-radius: .65rem; background: var(--surface-default); cursor: pointer; transition: border-color var(--duration-base), background var(--duration-base), color var(--duration-base); }
  .icon-button:hover { border-color: var(--component-icon-button-border-hover); background: var(--surface-hover); }
  .button { display: inline-flex; min-height: var(--component-control-min-height); align-items: center; justify-content: center; gap: .55rem; padding: var(--component-button-padding); border: 1px solid transparent; border-radius: .65rem; font-size: .85rem; font-weight: 720; cursor: pointer; transition: transform .18s, background .18s, border-color .18s; }
  .button:hover:not(:disabled) { transform: translateY(-1px); }
  .button:active:not(:disabled) { transform: translateY(0); }
  .button:disabled { cursor: not-allowed; opacity: .38; }
  .button--primary { background: var(--action-primary); color: var(--text-on-action); }
  .button--primary:hover { background: var(--action-primary-hover); }
  .button--secondary { border-color: var(--component-control-border); background: var(--surface-raised); }
  .button--secondary:hover { border-color: var(--component-button-secondary-border-hover); background: var(--surface-hover); }
  .button--ghost { background: transparent; color: var(--text-subtle); }
  .button--ghost:hover { background: var(--surface-hover); color: var(--text-default); }
  .button--danger { border-color: color-mix(in srgb, var(--status-danger) 35%, transparent); background: color-mix(in srgb, var(--status-danger) 10%, transparent); color: var(--component-button-danger-text); }

  .divider { display: block; width: 100%; margin: var(--component-divider-spacing) 0; padding: 0; border: 0; border-top: 1px solid var(--component-divider-color); background: transparent; }
  .divider--vertical { display: inline-block; align-self: stretch; width: 0; min-height: 1.5rem; margin: 0 var(--component-divider-spacing); border-top: 0; border-left: 1px solid var(--component-divider-color); }
  .divider--label { display: flex; align-items: center; gap: .75rem; border-top: 0; color: var(--text-supporting); font-size: .76rem; font-weight: 700; }
  .divider--label::before, .divider--label::after { content: ""; flex: 1; border-top: 1px solid var(--component-divider-color); }
  .button-group { display: inline-flex; max-width: 100%; overflow-x: auto; border-radius: var(--component-button-group-radius); }
  .button-group > .button { flex: none; position: relative; border-radius: 0; white-space: nowrap; }
  .button-group > .button:hover:not(:disabled) { transform: none; }
  .button-group > .button + .button { margin-left: -1px; }
  .button-group > .button:first-child { border-top-left-radius: var(--component-button-group-radius); border-bottom-left-radius: var(--component-button-group-radius); }
  .button-group > .button:last-child { border-top-right-radius: var(--component-button-group-radius); border-bottom-right-radius: var(--component-button-group-radius); }
  .button-group > .button:hover:not(:disabled), .button-group > .button:focus-visible { z-index: 2; }
  .button-group > .button:focus-visible { outline-offset: -3px; }
  .button-group--toggle > .button[aria-pressed="true"] { z-index: 2; border-color: var(--component-button-group-pressed-border); background: var(--component-button-group-pressed-bg); color: var(--component-button-group-pressed-text); }
  .split-button { display: inline-flex; max-width: 100%; }
  .split-button > .button { border-radius: 0; }
  .split-button > .button:first-child { border-top-left-radius: var(--component-button-group-radius); border-bottom-left-radius: var(--component-button-group-radius); }
  .split-button__toggle { min-width: var(--component-control-min-height); padding-inline: .75rem; margin-left: -1px; border-top-right-radius: var(--component-button-group-radius); border-bottom-right-radius: var(--component-button-group-radius); }
  .split-button__toggle:focus-visible { outline-offset: -3px; }
  .split-button--secondary > .split-button__toggle { border-left-color: var(--component-split-button-divider); }
  .split-button--primary > .split-button__toggle { border-left-color: var(--component-split-button-divider-primary); }
  .date-picker { position: relative; }
  .date-picker--range { grid-column: 1 / -1; container: date-range / inline-size; }
  @container date-range (max-width: 22rem) {
    .date-picker--range .date-picker__control { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .date-picker--range [data-date-input="start"] { grid-column: 1; grid-row: 1; }
    .date-picker--range [data-date-input="end"] { grid-column: 1; grid-row: 2; }
    .date-picker--range .date-picker__toggle { grid-column: 2; grid-row: 1; }
    .date-picker--range .date-picker__separator { display: none; }
  }
  .date-picker__control { display: flex; align-items: center; gap: var(--space-2); }
  .date-picker__control input { flex: 1 1 0; min-width: 0; }
  .date-picker__separator { flex: none; color: var(--text-supporting); }
  .date-picker__toggle { flex: none; }
  .floating-surface.date-picker__dialog { width: min(var(--component-date-picker-width), calc(100vw - 2rem)); }
  .date-picker__header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
  .date-picker__title { font-size: .85rem; }
  .date-picker__title::first-letter { text-transform: uppercase; }
  .date-picker__nav[data-date-prev] .icon { transform: rotate(90deg); }
  .date-picker__nav[data-date-next] .icon { transform: rotate(-90deg); }
  .date-picker__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .date-picker__grid th { padding: .25rem 0; border: 0; background: transparent; color: var(--text-supporting); font-size: .65rem; font-weight: 700; letter-spacing: 0; text-align: center; text-transform: none; }
  .date-picker__grid td { padding: 1px; border: 0; text-align: center; }
  .date-picker__day { width: 100%; min-height: 2rem; aspect-ratio: 1; padding: 0; border: 1px solid transparent; border-radius: var(--component-date-picker-day-radius); background: transparent; color: var(--text-subtle); font-size: .78rem; font-variant-numeric: tabular-nums; cursor: pointer; }
  .date-picker__day:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-default); }
  .date-picker__day[aria-current="date"] { border-color: var(--border-hover); color: var(--text-default); font-weight: 800; }
  .date-picker__day:disabled { cursor: not-allowed; opacity: .35; }
  .date-picker__grid td[data-state~="in-range"] .date-picker__day { border-radius: 0; background: var(--component-date-picker-range-bg); color: var(--text-default); }
  .date-picker__grid td[aria-selected="true"] .date-picker__day { border-color: var(--component-date-picker-selected-bg); background: var(--component-date-picker-selected-bg); color: var(--component-date-picker-selected-text); font-weight: 800; }
  .date-picker__day[data-marked] { position: relative; }
  .date-picker__day[data-marked]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: var(--component-calendar-mark-size); height: var(--component-calendar-mark-size); border-radius: 50%; background: currentColor; transform: translateX(-50%); }
  .calendar { width: min(100%, var(--component-date-picker-width)); padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-default); }
  .calendar__legend { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; color: var(--text-supporting); font-size: .7rem; }
  .calendar__legend::before { content: ""; width: var(--component-calendar-mark-size); height: var(--component-calendar-mark-size); border-radius: 50%; background: var(--text-subtle); }
  .color-picker__control { display: flex; align-items: center; gap: var(--space-2); }
  .color-picker__control input[data-color-hex] { flex: 1 1 0; min-width: 0; font-family: var(--font-mono); text-transform: uppercase; }
  /* Especificidad (0,5,0) para ganar a la regla general de .field input (0,4,1). */
  .color-picker .color-picker__control .color-picker__native[type="color"]:not([hidden]) { flex: none; width: var(--component-color-swatch-size); height: var(--component-color-swatch-size); padding: 0; border: 1px solid var(--component-control-border); border-radius: var(--radius-2); background: var(--color-picker-value, transparent); cursor: pointer; }
  .color-picker__native::-webkit-color-swatch-wrapper { padding: 3px; }
  .color-picker__native::-webkit-color-swatch { border: 0; border-radius: calc(var(--radius-2) - 3px); }
  .color-picker__native::-moz-color-swatch { border: 0; border-radius: calc(var(--radius-2) - 3px); }
  .color-picker__swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
  .color-picker__swatch { width: var(--component-color-swatch-size); height: var(--component-color-swatch-size); padding: 0; border: 1px solid var(--component-control-border); border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 3px var(--surface-default); cursor: pointer; }
  .color-picker__swatch[aria-checked="true"] { border: 2px solid var(--text-default); }
  .upload { display: grid; gap: var(--space-3); }
  .upload__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .upload__dropzone { display: grid; justify-items: center; gap: .35rem; padding: var(--component-upload-padding); border: 1px dashed var(--component-control-border); border-radius: var(--radius-4); background: var(--surface-canvas); color: var(--text-subtle); text-align: center; cursor: pointer; }
  .upload__dropzone:hover { border-color: var(--component-control-border-hover); background: var(--surface-hover); }
  .upload__input:focus-visible + .upload__dropzone { outline: 2px solid var(--action-primary); outline-offset: 3px; }
  .upload__dropzone[data-state="dragover"] { border-style: solid; border-color: var(--action-primary); background: var(--action-primary-subtle); color: var(--text-default); }
  .upload__dropzone-icon { width: 1.5rem; height: 1.5rem; color: var(--text-accent); }
  .upload__title { font-size: .85rem; font-weight: 600; }
  .upload__browse { color: var(--text-accent); text-decoration: underline; text-underline-offset: 2px; }
  .upload__hint { color: var(--text-supporting); font-size: .72rem; }
  .upload__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .upload__list:empty { display: none; }
  .upload__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-raised); }
  .upload__icon { color: var(--text-supporting); }
  .upload__item[data-state="done"] .upload__icon { color: var(--status-success); }
  .upload__item[data-state="error"] { border-color: color-mix(in srgb, var(--status-danger) 55%, transparent); }
  .upload__item[data-state="error"] .upload__icon { color: var(--status-danger); }
  .upload__meta { display: grid; min-width: 0; gap: .2rem; }
  .upload__name { overflow: hidden; color: var(--text-default); font-size: .8rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .upload__detail { color: var(--text-supporting); font-size: .7rem; font-variant-numeric: tabular-nums; }
  .upload__progress { width: 100%; }
  .upload__remove { align-self: start; }
  .upload__error { color: var(--status-danger); font-size: .7rem; font-weight: 600; }
  /* El contenedor es .transfer y la rejilla vive en .transfer__body: una consulta de contenedor no puede cambiar el propio contenedor. */
  .transfer { container: transfer / inline-size; }
  .transfer__body { display: grid; gap: var(--space-3); }
  /* El panel delimita una región de control: su borde usa el de controles (≥3:1, WCAG 1.4.11). */
  .transfer__panel { min-width: 0; margin: 0; padding: var(--space-3); border: 1px solid var(--component-control-border); border-radius: var(--radius-3); background: var(--surface-canvas); }
  .transfer__panel legend { padding: 0 .3rem; color: var(--text-default); font-size: .8rem; font-weight: 700; }
  .transfer__count { color: var(--text-supporting); font-weight: 600; font-variant-numeric: tabular-nums; }
  .transfer__filter { margin-bottom: var(--space-2); }
  .transfer__items { height: var(--component-transfer-height); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
  .transfer__item .check { padding: 0 .35rem; border-radius: var(--radius-2); }
  .transfer__item .check:hover { background: var(--surface-hover); }
  .transfer__empty { margin: var(--space-2) 0 0; color: var(--text-supporting); font-size: .75rem; }
  .transfer__actions { display: flex; justify-content: center; gap: var(--space-2); }
  /* En una columna las flechas apuntan hacia abajo (añadir) y hacia arriba (quitar). */
  .transfer__arrow { transform: rotate(90deg); }
  .transfer__arrow--back { transform: rotate(-90deg); }
  @container transfer (min-width: 34rem) {
    .transfer__body { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .transfer__actions { flex-direction: column; align-self: center; }
    .transfer__arrow { transform: none; }
    .transfer__arrow--back { transform: rotate(180deg); }
  }
  .date-picker__hint { margin-top: .5rem; color: var(--text-supporting); font-size: .65rem; }
  .stepper { display: grid; gap: var(--component-stepper-gap); margin: 0; padding: 0; list-style: none; }
  .stepper__item { position: relative; display: grid; grid-template-columns: var(--component-stepper-marker-size) minmax(0, 1fr); gap: .75rem; align-items: start; color: var(--text-supporting); }
  .stepper__item:not(:last-child)::after { position: absolute; top: calc(var(--component-stepper-marker-size) + .25rem); bottom: calc(.25rem - var(--component-stepper-gap)); left: calc(var(--component-stepper-marker-size) / 2 - 1px); width: 2px; border-radius: 1px; background: var(--component-stepper-line); content: ""; }
  .stepper__item[data-state~="complete"]:not(:last-child)::after { background: var(--component-stepper-line-complete); }
  .stepper__marker { display: grid; width: var(--component-stepper-marker-size); height: var(--component-stepper-marker-size); place-items: center; border: 2px solid var(--component-stepper-line); border-radius: 50%; background: var(--surface-default); font-size: .75rem; font-variant-numeric: tabular-nums; font-weight: 800; }
  .stepper__check { display: none; }
  .stepper__item[data-state~="current"] .stepper__marker { border-color: var(--component-stepper-line-complete); box-shadow: 0 0 0 4px var(--component-stepper-current-ring); color: var(--text-accent); }
  .stepper__item[data-state~="complete"] .stepper__marker { border-color: var(--component-stepper-complete-bg); background: var(--component-stepper-complete-bg); color: var(--component-stepper-complete-text); }
  .stepper__item[data-state~="complete"] .stepper__number { display: none; }
  .stepper__item[data-state~="complete"] .stepper__check { display: block; }
  .stepper__text { display: grid; gap: .1rem; min-width: 0; padding-top: .3rem; }
  .stepper__label { font-size: .8rem; font-weight: 700; }
  .stepper__item[data-state~="current"] .stepper__label, .stepper__item[data-state~="complete"] .stepper__label { color: var(--text-default); }
  .stepper__description { color: var(--text-supporting); font-size: .7rem; }
  .wizard { display: grid; gap: 1rem; }
  .wizard__panel { padding: 1rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-canvas); }
  .wizard__panel h4 { margin-bottom: .35rem; font-size: .9rem; }
  .wizard__panel p { color: var(--text-subtle); font-size: .8rem; }
  .wizard__actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; }
  @media (min-width: 48rem) {
    .stepper:not(.stepper--vertical) { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
    .stepper:not(.stepper--vertical) .stepper__item { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .stepper:not(.stepper--vertical) .stepper__item:not(:last-child)::after { top: calc(var(--component-stepper-marker-size) / 2 - 1px); right: .5rem; bottom: auto; left: calc(var(--component-stepper-marker-size) + .5rem); width: auto; height: 2px; }
    .stepper:not(.stepper--vertical) .stepper__text { padding-top: 0; }
  }
  .code-sample { margin-top: .75rem; color: var(--text-subtle); font-size: .78rem; }
  .code-sample summary { min-height: var(--component-control-min-height); display: flex; align-items: center; cursor: pointer; }
  .code-sample pre { margin: 0; padding: .75rem; overflow-x: auto; border: 1px solid var(--border-default); border-radius: .6rem; background: var(--surface-canvas); }
  .component-title, .card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
  .component-title h3, .card-heading h3 { font-size: .95rem; }
  .component-title > .button, .card-heading > .button { flex: none; white-space: nowrap; }
  .badge { display: inline-flex; min-height: 1.65rem; align-items: center; padding: .28rem .55rem; border: 1px solid var(--border-default); border-radius: 999px; background: color-mix(in srgb, var(--text-muted) 8%, transparent); color: var(--text-subtle); font-size: .68rem; font-weight: 720; white-space: nowrap; }
  .badge::before { width: .35rem; height: .35rem; margin-right: .4rem; border-radius: 50%; background: currentColor; content: ""; }
  .badge--accent { border-color: color-mix(in srgb, var(--action-primary) 28%, transparent); background: var(--action-primary-subtle); color: var(--component-badge-accent-text); }
  .badge--success { border-color: color-mix(in srgb, var(--status-success) 25%, transparent); background: color-mix(in srgb, var(--status-success) 10%, transparent); color: var(--status-success); }
  .badge--warning { border-color: color-mix(in srgb, var(--status-warning) 25%, transparent); background: color-mix(in srgb, var(--status-warning) 10%, transparent); color: var(--status-warning); }
  .badge--danger { border-color: color-mix(in srgb, var(--status-danger) 25%, transparent); background: color-mix(in srgb, var(--status-danger) 10%, transparent); color: var(--status-danger); }
  .segmented { display: inline-flex; max-width: 100%; padding: .25rem; border: 1px solid var(--component-control-border); border-radius: .7rem; background: var(--surface-canvas); overflow-x: auto; }
  .segmented button { min-height: 2.2rem; padding: .5rem .75rem; border: 0; border-radius: .48rem; background: transparent; color: var(--text-supporting); font-size: .76rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
  .segmented button[data-state~="active"] { background: var(--surface-raised); color: var(--text-default); box-shadow: var(--shadow-raised); }
  .help-anchor { position: relative; display: inline-flex; }
  .help-tooltip { position: absolute; z-index: var(--z-navigation); bottom: calc(100% + var(--component-floating-offset)); left: 0; width: max-content; max-width: min(17rem, calc(100vw - 2rem)); padding: .55rem .65rem; border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-raised); color: var(--text-subtle); box-shadow: var(--shadow-float); font-size: .72rem; line-height: 1.4; opacity: 0; transform: translateY(.25rem); transition: opacity var(--duration-fast), transform var(--duration-fast); visibility: hidden; }
  .help-anchor:hover .help-tooltip, .help-anchor:focus-within .help-tooltip { opacity: 1; transform: translateY(0); visibility: visible; }
  /* Puente transparente sobre el hueco: el puntero puede alcanzar el tooltip sin perder el hover. */
  .help-tooltip::after { position: absolute; top: 100%; right: 0; left: 0; height: var(--component-floating-offset); content: ''; }
  .help-anchor[data-state~="below"] .help-tooltip { top: calc(100% + var(--component-floating-offset)); bottom: auto; transform: translateY(-.25rem); }
  .help-anchor[data-state~="below"] .help-tooltip::after { top: auto; bottom: 100%; }
  .help-anchor[data-state~="below"]:hover .help-tooltip, .help-anchor[data-state~="below"]:focus-within .help-tooltip { transform: translateY(0); }
  .help-anchor[data-state~="dismissed"] .help-tooltip { opacity: 0; visibility: hidden; }
  .floating-catalog { overflow: visible; }
  .floating-example { position: relative; }
  .floating-example__note { max-width: 46rem; margin-top: .7rem; color: var(--text-supporting); font-size: .72rem; }
  .floating-surface { position: fixed; z-index: var(--z-toast); box-sizing: border-box; width: min(var(--component-floating-max-width), calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-float); }
  .floating-surface[hidden] { display: none; }
  .floating-surface__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .floating-surface__heading h4 { font-size: .84rem; }
  .popover p { margin: .6rem 0 .85rem; color: var(--text-subtle); font-size: .75rem; }
  .context-target { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--component-control-border); border-radius: var(--radius-3); background: var(--surface-canvas); cursor: context-menu; }
  .context-target:hover { border-color: var(--component-control-border-hover); }
  .context-target:focus-visible { outline: 2px solid var(--action-primary); outline-offset: 3px; }
  .context-target p { margin: 0; color: var(--text-supporting); font-size: .75rem; }
  .context-menu { width: min(var(--component-context-menu-width), calc(100vw - 2rem)); }
  .tour { width: min(var(--component-tour-width), calc(100vw - 2rem)); border-color: var(--action-primary); }
  .tour__progress { margin: 0 0 .25rem; color: var(--text-accent); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .tour__title { margin: 0 0 .35rem; font-size: .95rem; }
  .tour__title:focus { outline: none; }
  .tour__text { margin: 0; color: var(--text-subtle); font-size: .8rem; }
  /* La lista de pasos es solo la fuente de datos del tour: nunca se muestra. */
  .tour__steps { display: none; }
  .tour__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); }
  .tour__nav { display: flex; gap: var(--space-2); }
  /* El elemento del paso activo se resalta con un anillo (sin velo: el velo no puede cubrir capas de otros contextos de apilamiento,
     como el menú lateral). No depende solo del color: el diálogo nombra el elemento. */
  [data-tour-active] { position: relative; z-index: var(--component-tour-highlight-z); border-radius: var(--radius-3); outline: 3px solid var(--action-primary); outline-offset: 4px; }
  .bottom-nav { position: fixed; inset: auto 0 0; z-index: var(--z-navigation); display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; padding: .25rem max(.5rem, env(safe-area-inset-right)) max(.25rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); border-top: 1px solid var(--border-default); background: var(--surface-raised); }
  .bottom-nav--static { position: static; border: 1px solid var(--border-default); border-radius: var(--radius-4); }
  @media (min-width: 48rem) { .bottom-nav:not(.bottom-nav--static) { display: none; } }
  .bottom-nav__item { display: grid; justify-items: center; align-content: center; gap: .15rem; min-height: var(--component-bottom-nav-height); padding: .25rem; border-radius: var(--radius-3); color: var(--text-supporting); font-size: .68rem; font-weight: 700; text-decoration: none; }
  .bottom-nav__item:hover { color: var(--text-default); background: var(--surface-hover); }
  .bottom-nav__item:focus-visible { outline: 2px solid var(--action-primary); outline-offset: -2px; }
  /* La sección actual se marca con aria-current, color de acento y una barra sólida superior (≥3:1, WCAG 1.4.11):
     la forma de la barra la distingue sin depender solo del color del texto. */
  .bottom-nav__item { position: relative; }
  .bottom-nav__item[aria-current="page"] { color: var(--text-accent); }
  .bottom-nav__item[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: var(--component-bottom-nav-indicator-width); height: 3px; border-radius: 0 0 3px 3px; background: var(--action-primary); transform: translateX(-50%); }
  .bottom-nav__label { white-space: nowrap; }
  .bottom-nav__icon { position: relative; display: inline-grid; }
  .bottom-nav__badge { position: absolute; top: -.45rem; right: -.65rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; border: 2px solid var(--surface-raised); border-radius: 999px; background: var(--status-danger); color: var(--text-on-action); font-size: .6rem; font-weight: 800; line-height: .85rem; text-align: center; }
  .bottom-nav-demo { max-width: 24rem; }
  .rich-text { display: grid; gap: var(--space-2); }
  .rich-text__label { color: var(--text-default); font-size: .8rem; font-weight: 700; }
  .rich-text__toolbar { padding: var(--space-1); border: 1px solid var(--component-control-border); border-bottom: 0; border-radius: var(--component-field-radius) var(--component-field-radius) 0 0; background: var(--surface-raised); }
  .rich-text__toolbar .icon-button { border-color: transparent; }
  .rich-text__toolbar .icon-button[aria-pressed="true"] { border-color: var(--component-control-border); background: var(--action-primary-subtle); color: var(--text-accent); }
  .rich-text__toolbar + .rich-text__content { margin-top: calc(var(--space-2) * -1); border-radius: 0 0 var(--component-field-radius) var(--component-field-radius); }
  .rich-text__content { min-height: var(--component-rich-text-min-height); padding: var(--component-field-padding); border: 1px solid var(--component-field-border); border-radius: var(--component-field-radius); outline: 0; background: var(--component-field-bg); color: var(--text-default); font-size: .85rem; line-height: var(--line-height-base); overflow-wrap: anywhere; }
  .rich-text__content:focus-visible { border-color: var(--component-field-focus); box-shadow: var(--component-field-focus-ring); }
  .rich-text__content > * + * { margin-top: .6rem; }
  .rich-text__content :is(p, ul, ol, blockquote) { margin-bottom: 0; }
  .rich-text__content :is(ul, ol) { padding-left: 1.25rem; }
  .rich-text__content blockquote { margin-left: 0; padding-left: .8rem; border-left: 3px solid var(--component-control-border); color: var(--text-subtle); }
  .rich-text__content a { color: var(--text-accent); }
  .rich-text__content code { padding: .05rem .3rem; border-radius: var(--radius-2); background: var(--surface-hover); font-family: var(--font-mono); font-size: .8em; }
  .action-menu { display: grid; padding: .35rem; }
  .action-menu [role="menuitem"] { min-height: var(--component-control-min-height); padding: .65rem .75rem; border: 0; border-radius: var(--radius-2); background: transparent; color: var(--text-default); font: inherit; font-size: .78rem; font-weight: 700; text-align: left; cursor: pointer; }
  .action-menu [role="menuitem"]:hover, .action-menu [role="menuitem"]:focus-visible { background: var(--surface-hover); }
  .action-menu [role="menuitem"]:disabled { color: var(--text-muted); cursor: not-allowed; }
  .floating-status { min-height: 1.2rem; margin-top: .7rem; color: var(--text-supporting); font-size: .72rem; }
  .color-stack { overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-default); }
  .color-stack h3 { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border-default); font-size: .9rem; }
  .swatch { display: grid; grid-template-columns: 1.8rem 1fr auto; align-items: center; gap: .75rem; min-height: 3.35rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border-default); color: var(--text-subtle); font-size: .78rem; }
  .swatch:last-child { border-bottom: 0; }
  .swatch::before { width: 1.8rem; height: 1.8rem; border: 1px solid var(--border-translucent); border-radius: .45rem; background: var(--swatch); content: ""; }
  .signal-colors { display: flex; flex-direction: column; }
  .swatch--large { grid-template-columns: 3rem 1fr; min-height: 6rem; }
  .swatch--large::before { grid-row: 1 / 3; width: 3rem; height: 3rem; }
  .swatch--large code { grid-column: 2; }
  .signal-row { display: grid; flex: 1; grid-template-columns: repeat(3, 1fr); }
  .signal { position: relative; min-width: 0; padding: 3.8rem .65rem .85rem; background: linear-gradient(to bottom, var(--swatch) 0 3rem, transparent 3rem); text-align: center; }
  .signal + .signal { border-left: 1px solid var(--border-default); }
  .signal span, .signal code { display: block; overflow: hidden; text-overflow: ellipsis; }
  .signal span { font-size: .7rem; }
  .type-specimen { margin-top: 1rem; padding: 1.25rem; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-default); }
  .type-specimen__label { display: flex; justify-content: space-between; margin-bottom: 1rem; }
  .type-specimen__label span { font-size: .75rem; font-weight: 700; }
  .type-row { display: grid; gap: .5rem; padding: 1.25rem 0; border-top: 1px solid var(--border-default); }
  .type-row > span { color: var(--text-supporting); font: 500 .65rem/1.3 ui-monospace, monospace; }
  .type-row strong { font-size: clamp(1.8rem, 8vw, 3rem); letter-spacing: -.045em; line-height: 1; }
  .type-row h3 { font-size: 1.45rem; }
  .type-row p { max-width: 42rem; color: var(--text-subtle); }
  .type-row small { font-size: .65rem; letter-spacing: .12em; }
  .field, .fieldset { min-width: 0; }
  .field { display: grid; gap: .45rem; align-content: start; }
  .field > label, .fieldset > legend { color: var(--text-default); font-size: .77rem; font-weight: 700; }
  .req { margin-left: .2rem; color: var(--component-field-error); }
  .field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .field select, .field textarea { width: 100%; min-height: var(--component-control-min-height); padding: var(--component-field-padding); border: 1px solid var(--component-field-border); border-radius: var(--component-field-radius); outline: 0; background: var(--component-field-bg); color: var(--text-default); resize: vertical; }
  .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--component-field-border-hover); }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--component-field-focus); box-shadow: var(--component-field-focus-ring); }
  .field-help { color: var(--component-field-help); font-size: .7rem; }
  .data-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .data-columns { display: grid; gap: .6rem; }
  .data-columns h4 { font-size: .85rem; }
  [data-data-table][data-density="compact"] { --component-table-cell-padding: var(--component-table-compact-padding); --component-table-row-min-height: var(--component-table-compact-row-height); }
  .avatar--sm { width: 1.75rem; height: 1.75rem; font-size: .58rem; }
  .avatar--lg { width: 3rem; height: 3rem; font-size: .85rem; }
  .avatar__status { position: absolute; right: -1px; bottom: -1px; width: var(--component-avatar-status-size); height: var(--component-avatar-status-size); border: 2px solid var(--component-avatar-ring); border-radius: 50%; background: var(--border-control); }
  .avatar__status[data-presence="online"] { background: var(--status-success); }
  .avatar__status[data-presence="away"] { background: var(--status-warning); }
  .avatar__status[data-presence="busy"] { background: var(--status-danger); }
  .avatar-group { display: inline-flex; align-items: center; }
  /* Fondo opaco: el tinte de .avatar es translúcido y los solapes dejarían ver el avatar anterior. */
  .avatar-group > .avatar { background: linear-gradient(var(--action-primary-subtle), var(--action-primary-subtle)), var(--component-avatar-ring); box-shadow: 0 0 0 2px var(--component-avatar-ring); }
  .avatar-group > .avatar + .avatar { margin-left: var(--component-avatar-overlap); }
  .avatar-group > .avatar-group__more { background: var(--surface-raised); color: var(--text-subtle); }
  .avatar-demo-row { margin-top: .75rem; }
  .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .toolbar__group { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
  .toolbar + .component-note { margin-top: var(--space-3); }
  .toolbar__separator { width: 1px; align-self: stretch; min-height: 1.5rem; background: var(--border-default); }
  /* En una sola columna la barra se parte en filas y el separador quedaría colgando al final de una. */
  @media (max-width: 40rem) { .toolbar__separator { display: none; } }
  .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--component-metric-min)), 1fr)); gap: var(--space-3); }
  .metric { display: grid; gap: .2rem; align-content: start; min-width: 0; padding: var(--component-metric-padding); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-raised); }
  .metric__label { color: var(--text-supporting); font-size: .72rem; font-weight: 700; }
  .metric__value { color: var(--text-default); font-size: var(--component-metric-value-size); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-tight); }
  .metric__unit { margin-left: .2rem; color: var(--text-subtle); font-size: .5em; font-weight: 700; letter-spacing: 0; }
  .metric__delta { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-variant-numeric: tabular-nums; font-weight: 800; }
  .metric__delta::before { width: 0; height: 0; border-right: .3rem solid transparent; border-left: .3rem solid transparent; content: ""; }
  .metric__delta[data-direction="up"]::before { border-bottom: .38rem solid currentColor; }
  .metric__delta[data-direction="down"]::before { border-top: .38rem solid currentColor; }
  .metric__delta[data-direction="flat"]::before { width: .6rem; height: 2px; border: 0; background: currentColor; }
  .metric__delta--positive { color: var(--status-success); }
  .metric__delta--negative { color: var(--status-danger); }
  .metric__delta--neutral { color: var(--text-supporting); }
  .metric__comparison { color: var(--text-supporting); font-size: .68rem; }
  .metric-grid--spaced, .timeline--spaced { margin-top: var(--space-4); margin-bottom: var(--space-2); }
  .metric--compact { --component-metric-padding: var(--space-3); --component-metric-value-size: 1.25rem; }
  .timeline { display: grid; margin: 0; padding: 0; list-style: none; }
  .timeline__item { position: relative; display: grid; grid-template-columns: var(--component-timeline-marker-size) minmax(0, 1fr); gap: .85rem; padding-bottom: var(--component-timeline-gap); }
  .timeline__item:not(:last-child)::after { position: absolute; top: calc(var(--component-timeline-marker-size) + .3rem); bottom: .2rem; left: calc(var(--component-timeline-marker-size) / 2 - 1px); width: 2px; border-radius: 1px; background: var(--border-default); content: ""; }
  .timeline__marker { width: var(--component-timeline-marker-size); height: var(--component-timeline-marker-size); margin-top: .2rem; border-radius: 50%; background: var(--timeline-color, var(--action-primary)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--timeline-color, var(--action-primary)) 18%, transparent); }
  .timeline__item[data-state~="success"] { --timeline-color: var(--status-success); }
  .timeline__item[data-state~="warning"] { --timeline-color: var(--status-warning); }
  .timeline__item[data-state~="danger"] { --timeline-color: var(--status-danger); }
  .timeline__content { display: grid; gap: .15rem; min-width: 0; }
  .timeline__title { color: var(--text-default); font-size: .8rem; font-weight: 700; }
  .timeline__time { color: var(--text-supporting); font-size: .68rem; font-variant-numeric: tabular-nums; }
  .timeline__description { color: var(--text-subtle); font-size: .74rem; }
  .timeline--compact { --component-timeline-gap: var(--space-2); }
  .timeline--compact .timeline__description { display: none; }
  .tree, .tree ul { margin: 0; padding: 0; list-style: none; }
  .tree ul { padding-left: var(--component-tree-indent); }
  .tree [role="treeitem"] { outline: none; }
  .tree [role="treeitem"][aria-expanded="false"] > ul { display: none; }
  .tree__row { display: flex; min-height: var(--component-tree-row-height); align-items: center; gap: .4rem; padding: 0 .6rem; border-radius: var(--radius-sm); color: var(--text-subtle); font-size: .82rem; cursor: pointer; }
  .tree [role="treeitem"]:not([aria-expanded]) > .tree__row { padding-left: calc(.6rem + 1rem + .4rem); }
  .tree__row:hover { background: var(--surface-hover); color: var(--text-default); }
  .tree [role="treeitem"]:focus-visible > .tree__row { box-shadow: var(--component-focus-ring); outline: 2px solid var(--action-primary); outline-offset: -2px; }
  .tree [aria-selected="true"] > .tree__row { background: var(--component-tree-selected-bg); color: var(--text-default); font-weight: 700; }
  .tree__toggle { width: 1rem; height: 1rem; flex: none; transform: rotate(-90deg); transition: transform var(--duration-fast) var(--ease-standard); }
  .tree [aria-expanded="true"] > .tree__row .tree__toggle { transform: none; }
  .tree__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tree__meta { flex: none; color: var(--text-supporting); font-size: .7rem; font-weight: 600; }
  .text-display, .text-h1, .text-h2, .text-h3, .text-h4 { color: var(--text-default); font-weight: 760; letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-tight); }
  .text-display { font-size: var(--font-size-display); font-weight: 800; }
  .text-h1 { font-size: var(--font-size-h1); }
  .text-h2 { font-size: var(--font-size-h2); }
  .text-h3 { font-size: var(--font-size-h3); }
  .text-h4 { font-size: var(--font-size-h4); letter-spacing: 0; }
  .text-body { color: var(--text-subtle); font-size: var(--font-size-body); line-height: var(--line-height-base); }
  .text-small { color: var(--text-subtle); font-size: var(--font-size-small); }
  .text-caption { color: var(--text-supporting); font-size: var(--font-size-caption); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .text-mono { font-family: var(--font-mono); font-size: .92em; }
  .text-supporting { color: var(--text-supporting); }
  .type-scale { display: grid; gap: .9rem; }
  .theme-toggle .icon-moon, .theme-toggle[aria-pressed="true"] .icon-sun { display: none; }
  .theme-toggle[aria-pressed="true"] .icon-moon { display: block; }
  .chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .chip-group + .chip-group { margin-top: .75rem; }
  .chip { display: inline-flex; min-height: var(--component-chip-height); align-items: center; gap: .4rem; padding: 0 .8rem; border: 1px solid var(--component-chip-border); border-radius: 999px; background: var(--component-chip-bg); color: var(--text-subtle); font-size: .76rem; font-weight: 700; white-space: nowrap; }
  button.chip { cursor: pointer; }
  button.chip:hover { border-color: var(--border-hover); color: var(--text-default); }
  .chip[aria-pressed="true"] { border-color: var(--component-chip-selected-border); background: var(--component-chip-selected-bg); color: var(--text-default); }
  .chip[aria-pressed="true"]::before { width: .45rem; height: .3rem; border: solid currentColor; border-width: 0 0 2px 2px; content: ""; transform: translateY(-1px) rotate(-45deg); }
  .chip--removable { padding-right: 0; }
  .chip--static .status-dot { box-shadow: none; }
  .chip__remove { display: grid; width: var(--component-chip-height); height: var(--component-chip-height); flex: none; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-supporting); cursor: pointer; }
  .chip__remove:hover { background: var(--surface-hover); color: var(--text-default); }
  .chip__remove .icon { width: .85rem; height: .85rem; }
  .tags-input { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: var(--component-control-min-height); padding: .3rem .4rem; border: 1px solid var(--component-field-border); border-radius: var(--component-field-radius); background: var(--component-field-bg); cursor: text; }
  .tags-input:hover { border-color: var(--component-field-border-hover); }
  .tags-input:focus-within { border-color: var(--component-field-focus); box-shadow: var(--component-field-focus-ring); }
  .tags-input__list { display: contents; margin: 0; padding: 0; list-style: none; }
  .field .tags-input input[data-tags-entry]:not([type="checkbox"]):not([type="radio"]) { flex: 1 1 6rem; width: auto; min-width: 6rem; min-height: var(--component-chip-height); padding: 0 .4rem; border: 0; background: transparent; box-shadow: none; outline: none; }
  .descriptions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--component-descriptions-min)), 1fr)); gap: var(--space-4) var(--space-6); margin: 0; }
  .descriptions__item { display: grid; gap: .2rem; min-width: 0; }
  .descriptions dt { color: var(--text-supporting); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .descriptions dd { margin: 0; color: var(--text-default); font-size: .85rem; overflow-wrap: anywhere; }
  .descriptions--inline { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .descriptions--inline .descriptions__item { grid-template-columns: minmax(7rem, 1fr) 2fr; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--border-default); }
  .descriptions--inline .descriptions__item:last-child { border-bottom: 0; }
  .descriptions--inline dt { letter-spacing: 0; text-transform: none; font-size: .76rem; }
  .password-field, .search-field { position: relative; display: flex; align-items: center; }
  .password-field input { padding-right: calc(var(--component-control-min-height) + .25rem); }
  .password-field__toggle { position: absolute; right: 0; border-color: transparent; background: transparent; color: var(--text-supporting); }
  .password-field__toggle:hover { border-color: transparent; color: var(--text-default); }
  .password-field__hide, .password-field__toggle[aria-pressed="true"] .password-field__show { display: none; }
  .password-field__toggle[aria-pressed="true"] .password-field__hide { display: block; }
  .password-field__caps { color: var(--status-warning); font-size: .7rem; font-weight: 600; }
  .search-field input { width: 100%; min-height: var(--component-control-min-height); padding: var(--component-field-padding); padding-inline: calc(var(--component-search-icon-space)) calc(var(--component-control-min-height) + .25rem); border: 1px solid var(--component-field-border); border-radius: var(--component-field-radius); background: var(--component-field-bg); color: var(--text-default); font: inherit; appearance: none; }
  .search-field input:hover { border-color: var(--component-field-border-hover); }
  .search-field input:focus-visible { border-color: var(--component-field-focus); box-shadow: var(--component-field-focus-ring); outline: none; }
  .search-field input::-webkit-search-cancel-button { appearance: none; }
  .search-field__icon { position: absolute; left: .85rem; color: var(--text-supporting); pointer-events: none; }
  .search-field__clear { position: absolute; right: 0; }
  .search-field__clear[hidden], .password-field__caps[hidden] { display: none; }
  .otp { min-width: 0; margin: 0; padding: 0; border: 0; }
  .otp legend { margin-bottom: .5rem; padding: 0; color: var(--text-default); font-size: .77rem; font-weight: 700; }
  .otp__inputs { display: grid; grid-template-columns: repeat(6, minmax(0, var(--component-otp-cell))); gap: var(--component-otp-gap); margin-bottom: .45rem; }
  .otp__input { width: 100%; min-width: 0; min-height: var(--component-control-min-height); padding: 0; border: 1px solid var(--component-field-border); border-radius: var(--component-field-radius); background: var(--component-field-bg); color: var(--text-default); font: 700 1.1rem/1 var(--font-mono); text-align: center; caret-color: var(--action-primary); }
  .otp__input:hover { border-color: var(--component-field-border-hover); }
  .otp__input:focus-visible { border-color: var(--component-field-focus); box-shadow: var(--component-field-focus-ring); outline: none; }
  .otp[data-state~="complete"] .otp__input { border-color: var(--component-field-success); }
  .otp__status { min-height: 1.1rem; margin-top: .25rem; color: var(--component-field-success); font-size: .72rem; font-weight: 600; }
  .number-input { display: grid; grid-template-columns: var(--component-control-min-height) minmax(0, 1fr) var(--component-control-min-height); gap: var(--component-number-input-gap); max-width: var(--component-number-input-max-width); }
  .number-input input { text-align: center; font-variant-numeric: tabular-nums; appearance: textfield; }
  .number-input input::-webkit-inner-spin-button, .number-input input::-webkit-outer-spin-button { margin: 0; appearance: none; }
  .number-input__button { display: grid; min-height: var(--component-control-min-height); place-items: center; padding: 0; border: 1px solid var(--component-field-border); border-radius: var(--component-field-radius); background: var(--component-number-input-button-bg); color: var(--text-default); cursor: pointer; }
  .number-input__button:hover:not(:disabled) { border-color: var(--component-field-border-hover); background: var(--surface-hover); }
  .number-input__button:disabled { cursor: not-allowed; opacity: var(--component-field-disabled-opacity); }
  .slider-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
  .slider-heading label, .slider-heading__label { color: var(--text-default); font-size: .77rem; font-weight: 700; }
  .slider-heading__value { color: var(--text-subtle); font-size: .77rem; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
  .slider, .range-slider__input { width: 100%; height: var(--component-control-min-height); margin: 0; background: transparent; appearance: none; cursor: pointer; }
  .slider::-webkit-slider-runnable-track { height: var(--component-slider-track-height); border-radius: 999px; background: linear-gradient(to right, var(--component-slider-fill) var(--slider-fill, 0%), var(--component-slider-track) var(--slider-fill, 0%)); }
  .slider::-moz-range-track { height: var(--component-slider-track-height); border-radius: 999px; background: linear-gradient(to right, var(--component-slider-fill) var(--slider-fill, 0%), var(--component-slider-track) var(--slider-fill, 0%)); }
  .range-slider__input::-webkit-slider-runnable-track { height: var(--component-slider-track-height); background: transparent; }
  .range-slider__input::-moz-range-track { height: var(--component-slider-track-height); background: transparent; }
  .slider::-webkit-slider-thumb, .range-slider__input::-webkit-slider-thumb { width: var(--component-slider-thumb-size); height: var(--component-slider-thumb-size); margin-top: calc((var(--component-slider-track-height) - var(--component-slider-thumb-size)) / 2); border: 2px solid var(--component-slider-fill); border-radius: 50%; background: var(--component-slider-thumb); appearance: none; pointer-events: auto; }
  .slider::-moz-range-thumb, .range-slider__input::-moz-range-thumb { box-sizing: border-box; width: var(--component-slider-thumb-size); height: var(--component-slider-thumb-size); border: 2px solid var(--component-slider-fill); border-radius: 50%; background: var(--component-slider-thumb); pointer-events: auto; }
  .slider:focus-visible::-webkit-slider-thumb, .range-slider__input:focus-visible::-webkit-slider-thumb { box-shadow: var(--component-focus-ring); }
  .slider:focus-visible::-moz-range-thumb, .range-slider__input:focus-visible::-moz-range-thumb { box-shadow: var(--component-focus-ring); }
  .slider:disabled, .range-slider__input:disabled { cursor: not-allowed; opacity: var(--component-field-disabled-opacity); }
  .range-slider { position: relative; height: var(--component-control-min-height); }
  .range-slider::before { position: absolute; top: 50%; right: 0; left: 0; height: var(--component-slider-track-height); border-radius: 999px; background: linear-gradient(to right, var(--component-slider-track) var(--range-start, 0%), var(--component-slider-fill) var(--range-start, 0%) var(--range-end, 100%), var(--component-slider-track) var(--range-end, 100%)); content: ""; transform: translateY(-50%); }
  .range-slider__input { position: absolute; inset: 0; pointer-events: none; }
  .field-error, .field-ok { margin: 0; font-size: .72rem; font-weight: 600; }
  .field-error { color: var(--component-field-error); }
  .field-ok { color: var(--component-field-success); }
  .field--error input, .field--error select, .field--error textarea, .field [aria-invalid="true"] { border-color: var(--component-field-error); }
  .field--success input, .field--success select, .field--success textarea { border-color: var(--component-field-success); }
  .field select { padding-right: 2.5rem; appearance: none; background-color: var(--component-field-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a3a8bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 1rem; cursor: pointer; }
  .radio-group { display: grid; gap: .25rem; }
  .radio { position: relative; display: flex; min-height: var(--component-control-min-height); align-items: center; gap: .7rem; color: var(--text-subtle); font-size: .8rem; cursor: pointer; }
  .radio input { position: absolute; opacity: 0; }
  .radio span { display: grid; flex: none; width: 1.2rem; height: 1.2rem; place-items: center; border: 1px solid var(--component-field-border); border-radius: 50%; background: var(--component-field-bg); }
  .radio input:checked + span { border-color: var(--component-field-focus); }
  .radio input:checked + span::after { width: .55rem; height: .55rem; border-radius: 50%; background: var(--component-field-focus); content: ""; }
  .radio input:focus-visible + span { outline: 2px solid var(--component-field-focus); outline-offset: 3px; }
  .radio input[aria-invalid="true"] + span { border-color: var(--component-field-error); }
  .radio:has(input:disabled) { opacity: var(--component-field-disabled-opacity); cursor: not-allowed; }
  .combobox__control { position: relative; }
  .combobox__list, .combobox__empty { position: absolute; z-index: 5; top: calc(100% + .25rem); right: 0; left: 0; margin: 0; border: 1px solid var(--component-field-border); border-radius: var(--component-field-radius); background: var(--surface-raised); box-shadow: var(--component-overlay-shadow); }
  .combobox__list { max-height: 14rem; padding: .25rem; overflow-y: auto; list-style: none; }
  .combobox__list li { display: flex; min-height: var(--component-control-min-height); align-items: center; padding: .4rem .7rem; border-radius: .4rem; color: var(--text-subtle); font-size: .8rem; cursor: pointer; }
  .combobox__list li[aria-selected="true"] { background: var(--action-primary-subtle); color: var(--text-default); box-shadow: inset 0 0 0 2px var(--component-field-focus); }
  .combobox__empty { padding: .8rem; color: var(--component-field-help); font-size: .8rem; }
  .combobox__status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .field :disabled { opacity: var(--component-field-disabled-opacity); cursor: not-allowed; }
  .fieldset { display: grid; gap: 1rem; margin: 0; padding: 1rem; border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
  .fieldset > legend { padding: 0 .4rem; }
  .fieldset__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
  .fieldset__grid > .field--wide { grid-column: 1 / -1; }
  .form-note { margin: 0; color: var(--component-field-help); font-size: .72rem; }
  .form-summary, .form-success { padding: 1rem; border: 1px solid var(--component-field-error); border-radius: var(--radius-lg); background: var(--status-danger-subtle); font-size: .8rem; }
  .form-summary:focus-visible, .form-success:focus-visible { outline: 2px solid var(--action-primary); outline-offset: 3px; }
  .form-summary p { margin: 0 0 .5rem; font-weight: 700; }
  .form-summary ul { display: grid; gap: .25rem; margin: 0; padding-left: 1.1rem; }
  .form-summary a { display: inline-block; min-height: 1.5rem; color: var(--text-default); }
  .form-success { border-color: var(--component-field-success); background: var(--status-success-subtle); color: var(--component-field-success); font-weight: 700; }
  .form-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
  .check, .switch { display: flex; min-height: 2.75rem; align-items: center; gap: .7rem; color: var(--text-subtle); font-size: .8rem; cursor: pointer; }
  .check input, .switch input { position: absolute; opacity: 0; }
  .check span { display: grid; width: 1.2rem; height: 1.2rem; place-items: center; border: 1px solid var(--component-control-border); border-radius: .32rem; background: var(--surface-canvas); }
  .check input:checked + span { border-color: var(--action-primary); background: var(--action-primary); }
  .check input:checked + span::after { width: .42rem; height: .23rem; border-bottom: 2px solid var(--text-on-action); border-left: 2px solid var(--text-on-action); content: ""; transform: rotate(-45deg) translate(1px, -1px); }
  .switch span { position: relative; width: 2.45rem; height: 1.4rem; border: 1px solid var(--component-control-border); border-radius: 999px; background: var(--surface-canvas); transition: background var(--duration-base); }
  .switch span::after { position: absolute; top: .18rem; left: .2rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--text-muted); content: ""; transition: transform var(--duration-base), background var(--duration-base); }
  .switch input:checked + span { border-color: var(--action-primary); background: var(--action-primary-subtle); }
  .switch input:checked + span::after { background: var(--action-primary); transform: translateX(1rem); }
  .switch em { font-style: normal; }
  .check input:focus-visible + span, .switch input:focus-visible + span { outline: 2px solid var(--action-primary); outline-offset: 3px; }
  .alert-stack { display: grid; gap: .65rem; }
  .alert { display: flex; gap: .8rem; padding: 1rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-default); }
  .alert > .icon { flex: 0 0 auto; margin-top: .15rem; }
  .alert strong { display: block; font-size: .82rem; }
  .alert p { margin-top: .15rem; color: var(--text-subtle); font-size: .75rem; }
  .alert--success { border-left: 3px solid var(--status-success); }
  .alert--success > .icon { color: var(--status-success); }
  .alert--warning { border-left: 3px solid var(--status-warning); }
  .alert--warning > .icon { color: var(--status-warning); }
  .alert--danger { border-left: 3px solid var(--status-danger); }
  .alert--danger > .icon { color: var(--status-danger); }
  .state-card { display: grid; place-items: center; padding: 2rem 1.25rem; border: 1px dashed var(--border-default); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--surface-default), color-mix(in srgb, var(--surface-default) 40%, transparent)); text-align: center; }
  .state-card__icon { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; margin-bottom: 1rem; border: 1px solid var(--border-default); border-radius: 50%; background: var(--surface-raised); color: var(--text-supporting); }
  .state-card h3 { font-size: 1rem; }
  .state-card p { max-width: 19rem; margin: .35rem 0 1.1rem; color: var(--text-supporting); font-size: .78rem; }
  .skeleton-card { display: flex; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-default); }
  .skeleton-card > span, .skeleton-card i { display: block; border-radius: .35rem; background: linear-gradient(100deg, var(--surface-raised) 30%, var(--surface-hover) 50%, var(--surface-raised) 70%); background-size: 300% 100%; animation: shimmer 1.8s infinite; }
  .skeleton-card > span { width: 2.8rem; height: 2.8rem; flex: 0 0 auto; border-radius: .6rem; }
  .skeleton-card div { display: grid; flex: 1; gap: .45rem; }
  .skeleton-card i { height: .55rem; }
  .skeleton-card i:nth-child(1) { width: 35%; }
  .skeleton-card i:nth-child(2) { width: 82%; }
  .skeleton-card i:nth-child(3) { width: 60%; }
  @keyframes shimmer { to { background-position-x: -300%; } }
  .table-card, .progress-card { min-width: 0; padding: 1rem; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-default); }
  .table-wrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: .78rem; }
  th { padding: .7rem; border-bottom: 1px solid var(--border-default); color: var(--text-supporting); font-size: .63rem; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
  td { padding: .85rem .7rem; border-bottom: 1px solid color-mix(in srgb, var(--border-default) 62%, transparent); color: var(--text-subtle); white-space: nowrap; }
  tr:last-child td { border-bottom: 0; }
  td strong, td small { display: block; }
  td strong { color: var(--text-default); font-size: .78rem; }
  td small { color: var(--text-supporting); font-size: .67rem; }
  .progress-card { display: grid; gap: 1.2rem; align-content: start; }
  .progress-item > div { display: flex; justify-content: space-between; margin-bottom: .45rem; font-size: .76rem; }
  .progress-item small { color: var(--text-supporting); font-size: .65rem; }
  .spinner { display: inline-block; flex: none; width: var(--component-spinner-size); height: var(--component-spinner-size); border: var(--component-spinner-thickness) solid var(--component-spinner-track); border-top-color: var(--component-spinner-color); border-radius: 50%; animation: spinner-turn var(--component-spinner-duration) linear infinite; vertical-align: middle; }
  .spinner--sm { --component-spinner-size: 1rem; --component-spinner-thickness: 2px; }
  .spinner--lg { --component-spinner-size: 2.5rem; --component-spinner-thickness: 4px; }
  .button .spinner { --component-spinner-track: color-mix(in srgb, currentColor 25%, transparent); --component-spinner-color: currentColor; }
  .button[aria-busy="true"] { cursor: progress; }
  @keyframes spinner-turn { to { transform: rotate(1turn); } }
  progress:not([value]) { background: linear-gradient(90deg, var(--component-progress-track) 0 35%, var(--component-progress-fill) 35% 65%, var(--component-progress-track) 65%) 0 0 / 300% 100%; animation: progress-indeterminate var(--component-progress-indeterminate-duration) linear infinite; }
  progress:not([value])::-webkit-progress-bar { background: transparent; }
  progress:not([value])::-moz-progress-bar { background: transparent; }
  @keyframes progress-indeterminate { from { background-position-x: 100%; } to { background-position-x: -50%; } }
  .progress-meter { display: grid; gap: .4rem; }
  .progress-meter + .progress-meter { margin-top: 1rem; }
  .progress-meter__header { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-size: .76rem; }
  .progress-meter__label { color: var(--text-default); font-weight: 700; }
  .progress-meter__value { color: var(--text-subtle); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
  .progress-meter__help { color: var(--text-supporting); font-size: .68rem; }
  .progress-meter--success { --component-progress-fill: var(--status-success); }
  .progress-meter--warning { --component-progress-fill: var(--status-warning); }
  .progress-meter--danger { --component-progress-fill: var(--status-danger); }
  .progress-meter progress::-webkit-progress-value { background: var(--component-progress-fill); }
  .progress-meter progress::-moz-progress-bar { background: var(--component-progress-fill); }
  .progress-ring { position: relative; display: inline-grid; flex: none; width: var(--component-progress-ring-size); aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(var(--component-progress-ring-fill) calc(var(--progress-ring-value, 0) * 1%), var(--component-progress-ring-track) 0); }
  .progress-ring::before { position: absolute; inset: var(--component-progress-ring-thickness); border-radius: 50%; background: var(--surface-default); content: ""; }
  .progress-ring__value { position: relative; color: var(--text-default); font-size: .8rem; font-variant-numeric: tabular-nums; font-weight: 800; }
  .progress-ring--sm { --component-progress-ring-size: 2.75rem; --component-progress-ring-thickness: 4px; }
  .progress-ring--sm .progress-ring__value { font-size: .66rem; }
  .progress-ring--success { --component-progress-ring-fill: var(--status-success); }
  .progress-ring--warning { --component-progress-ring-fill: var(--status-warning); }
  .progress-ring--danger { --component-progress-ring-fill: var(--status-danger); }
  .kbd { display: inline-block; min-width: 1.5em; padding: .12rem .4rem; border: 1px solid var(--component-kbd-border); border-bottom-width: 2px; border-radius: var(--radius-2); background: var(--component-kbd-bg); color: var(--component-kbd-text); font: 600 .72em/1.3 var(--font-mono); text-align: center; white-space: nowrap; }
  .close-button { border-color: transparent; background: transparent; color: var(--component-close-button-color); }
  .close-button:hover { border-color: transparent; background: var(--surface-hover); color: var(--component-close-button-color-hover); }
  .component-note { color: var(--text-subtle); font-size: .8rem; }
  progress { width: 100%; height: .42rem; border: 0; border-radius: 999px; background: var(--component-progress-track); overflow: hidden; }
  progress::-webkit-progress-bar { background: var(--component-progress-track); }
  progress::-webkit-progress-value { border-radius: 999px; background: var(--component-progress-fill); }
  progress::-moz-progress-bar { border-radius: 999px; background: var(--component-progress-fill); }
  .chart-intro { display: grid; gap: 1rem; margin-bottom: 1rem; padding: 1.1rem; border-left: 2px solid var(--action-primary); background: linear-gradient(90deg, var(--action-primary-subtle), transparent 78%); }
  .chart-intro h3 { margin-top: .25rem; font-size: clamp(1.15rem, 5vw, 1.65rem); letter-spacing: -.025em; }
  .chart-intro > p { max-width: 42rem; color: var(--text-subtle); font-size: .78rem; }
  .chart-panel { min-width: 0; padding: 1rem; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-default); }
  .chart-panel--hero { position: relative; overflow: hidden; }
  .chart-panel--hero::before { position: absolute; inset: 0 0 auto; height: 7rem; background: linear-gradient(110deg, color-mix(in srgb, var(--action-primary) 10%, transparent), transparent 62%); content: ""; pointer-events: none; }
  .chart-heading { position: relative; display: grid; gap: 1rem; align-items: start; }
  .chart-heading h3 { font-size: 1rem; letter-spacing: -.02em; }
  .chart-heading--compact { display: flex; justify-content: space-between; gap: 1rem; }
  .chart-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .25rem; }
  .chart-title-line h3 { font-size: clamp(1.05rem, 5vw, 1.45rem); }
  .chart-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem; margin-top: .7rem; }
  .chart-summary strong { font-size: clamp(1.65rem, 8vw, 2.5rem); letter-spacing: -.055em; line-height: 1; }
  .chart-summary span { color: var(--status-success); font-size: .7rem; font-weight: 700; }
  .chart-range { display: flex; width: 100%; }
  .chart-range button { min-height: 2.75rem; flex: 1; }
  .chart-unit { color: var(--text-supporting); font: 600 .65rem/1.4 ui-monospace, monospace; white-space: nowrap; }
  .chart-heading--compact > .badge, .chart-heading--compact > .chart-unit { flex: none; }
  .chart-legend { position: relative; display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1rem; color: var(--text-supporting); font-size: .67rem; }
  .chart-legend span { display: inline-flex; align-items: center; gap: .4rem; }
  .legend-key { display: inline-block; width: .65rem; height: .65rem; border-radius: .18rem; background: var(--action-primary); }
  .legend-key--line { height: 2px; border-radius: 999px; }
  .legend-key--target { height: 0; border-top: 1px dashed var(--status-warning); border-radius: 0; background: transparent; }
  .legend-key--primary { background: var(--action-primary); }
  .legend-key--secondary { background: var(--surface-hover); }
  .legend-key--api { background: var(--action-primary); }
  .legend-key--media { background: var(--status-success); }
  .legend-key--jobs { background: var(--status-warning); }
  .legend-key--point { border-radius: 50%; background: var(--action-primary); }
  .legend-key--trend { height: 0; border-top: 1px dashed var(--status-warning); border-radius: 0; background: transparent; }
  .chart-frame { position: relative; min-width: 0; height: 17rem; margin-top: .8rem; overflow: hidden; border-radius: var(--radius-md); background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 28%, transparent), color-mix(in srgb, var(--surface-canvas) 12%, transparent)); }
  .chart-frame--bars { height: 15rem; }
  .chart-description { max-width: 38rem; margin-top: .55rem; color: var(--text-supporting); font-size: .7rem; }
  .chart-lab { display: grid; gap: 1rem; margin-top: 1rem; }
  .chart-frame--ranking { height: 19rem; }
  .chart-frame--stacked, .chart-frame--scatter { height: 18rem; }
  .chart-frame--heatmap { height: 21rem; }
  .chart-extended { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; margin-top: 1rem; }
  .legend-key--series-1 { background: var(--chart-series-1); }
  .legend-key--series-2 { background: var(--chart-series-2); }
  .legend-key--line.legend-key--series-2 { height: 2px; background: var(--chart-series-2); }
  .legend-key--dashed { height: 0; border-top: 2px dashed var(--chart-series-2); background: transparent; }
  .legend-key--total { background: var(--chart-series-total); }
  .chart-frame--combo, .chart-frame--waterfall { height: 16rem; }
  .chart-frame--funnel { height: 15rem; padding: 0 .25rem; overflow: visible; background: none; }
  .chart-frame--radar { height: 17rem; overflow: visible; }
  .pie-layout { display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr; align-items: center; gap: 1rem; margin-top: .8rem; }
  @media (max-width: 30rem) { .pie-layout { grid-template-columns: 1fr; justify-items: center; } .pie-layout .chart-frame--pie { max-width: 13rem; } .pie-layout .distribution-list { width: 100%; } }
  .chart-frame--pie { width: 100%; height: auto; aspect-ratio: 1; margin-top: 0; overflow: visible; background: none; }
  .combo-bar { fill: var(--chart-series-1); }
  .combo-line { fill: none; stroke: var(--chart-series-2); stroke-width: 2; stroke-linejoin: round; }
  .combo-point { fill: var(--chart-series-2); stroke: var(--surface-default); stroke-width: 2; }
  .pie-slice { stroke: var(--surface-default); stroke-width: 2; stroke-linejoin: round; cursor: pointer; outline: none; transition: opacity var(--duration-fast); }
  .pie-slice:hover, .pie-slice:focus-visible, .pie-slice[data-state~="active"] { opacity: .82; stroke: var(--text-default); }
  .funnel-bar { fill: var(--chart-series-1); }
  .chart-svg .funnel-label { fill: var(--text-default); font-family: var(--font-sans); font-weight: 600; }
  .waterfall-bar { transition: opacity var(--duration-fast); }
  .waterfall-bar--increase { fill: var(--chart-series-1); }
  .waterfall-bar--decrease { fill: var(--chart-series-2); }
  .waterfall-bar--total { fill: var(--chart-series-total); }
  .waterfall-connector { stroke: var(--border-control); stroke-width: 1; stroke-dasharray: 3 3; }
  .chart-svg .waterfall-value { fill: var(--text-default); }
  .radar-ring { fill: none; stroke: var(--border-default); stroke-width: 1; }
  .radar-axis { stroke: var(--border-default); stroke-width: 1; }
  .radar-area { stroke-linejoin: round; pointer-events: none; }
  .radar-area--1 { fill: color-mix(in srgb, var(--chart-series-1) 18%, transparent); stroke: var(--chart-series-1); stroke-width: 2; stroke-linejoin: round; }
  .radar-area--2 { fill: none; stroke: var(--chart-series-2); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
  .radar-point { fill: var(--chart-series-1); stroke: var(--surface-default); stroke-width: 2; pointer-events: none; }
  .chart-frame:has(.chart-point-hit:focus-visible) .radar-point, .chart-frame:has(.chart-bar-hit:focus-visible) { outline: none; }
  .chart-point-hit:focus-visible, .chart-bar-hit:focus-visible { stroke: var(--text-default); stroke-width: 2; }
  .gauge { position: relative; display: grid; justify-items: center; margin-top: .8rem; }
  .gauge__svg { width: min(100%, 16rem); height: auto; aspect-ratio: 200 / 112; overflow: visible; }
  .gauge__track { fill: none; stroke: var(--surface-hover); stroke-width: 16; stroke-linecap: round; }
  .gauge__bar { fill: none; stroke-width: 16; stroke-linecap: round; }
  .gauge__bar--success { stroke: var(--status-success); }
  .gauge__bar--warning { stroke: var(--status-warning); }
  .gauge__bar--danger { stroke: var(--status-danger); }
  .gauge__threshold { stroke: var(--text-supporting); stroke-width: 2; }
  .gauge__value { display: grid; justify-items: center; gap: .2rem; margin: -2.6rem 0 0; }
  .gauge__value strong { color: var(--text-default); font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1; }
  .gauge__status { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-subtle); font-size: .75rem; font-weight: 700; }
  .gauge[data-state="success"] .gauge__status { color: var(--status-success); }
  .gauge[data-state="warning"] .gauge__status { color: var(--status-warning); }
  .gauge[data-state="danger"] .gauge__status { color: var(--status-danger); }
  .gauge__legend { margin: .6rem 0 0; color: var(--text-supporting); font-size: .7rem; text-align: center; }
  .chart-svg { width: 100%; height: 100%; overflow: visible; }
  .chart-svg text { fill: var(--text-supporting); font: 500 10px/1 ui-monospace, monospace; }
  .chart-grid-line { stroke: var(--border-default); stroke-width: 1; stroke-dasharray: 3 5; opacity: .72; }
  .chart-axis-line { stroke: var(--border-default); stroke-width: 1; }
  .chart-target-line { stroke: var(--status-warning); stroke-width: 1; stroke-dasharray: 5 6; opacity: .8; }
  .chart-area { opacity: .86; }
  .chart-line { fill: none; stroke: var(--action-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .chart-cursor { stroke: var(--text-subtle); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; pointer-events: none; }
  .chart-frame:has(.chart-point-hit:focus) .chart-cursor, .chart-frame:has(.chart-point-hit:hover) .chart-cursor, .chart-cursor[data-state~="active"] { opacity: .35; }
  .chart-point-hit { fill: transparent; cursor: pointer; outline: none; }
  .chart-point { fill: var(--surface-default); stroke: var(--action-primary); stroke-width: 2; pointer-events: none; transform-box: fill-box; transform-origin: center; transition: fill var(--duration-fast), transform var(--duration-fast); }
  .chart-point-hit:hover + .chart-point, .chart-point-hit:focus + .chart-point, .chart-point-hit[data-state~="active"] + .chart-point { fill: var(--action-primary); transform: scale(1.55); }
  .chart-bar { cursor: pointer; transition: filter var(--duration-fast), opacity var(--duration-fast); }
  .chart-bar--current { fill: var(--action-primary); }
  .chart-bar--previous { fill: var(--surface-hover); }
  .chart-bar-hit { fill: transparent; cursor: pointer; outline: none; }
  .chart-bar-group:has(.chart-bar-hit:hover) .chart-bar, .chart-bar-group:has(.chart-bar-hit:focus) .chart-bar, .chart-bar-group[data-state~="active"] .chart-bar { filter: brightness(1.16); opacity: 1; }
  .ranking-bar { fill: var(--action-primary); opacity: .76; transition: opacity var(--duration-fast), filter var(--duration-fast); }
  .ranking-hit { fill: transparent; cursor: pointer; outline: none; }
  .ranking-row:has(.ranking-hit:hover) .ranking-bar, .ranking-row:has(.ranking-hit:focus) .ranking-bar, .ranking-row[data-state~="active"] .ranking-bar { filter: brightness(1.12); opacity: 1; }
  .chart-direct-value { fill: var(--text-default) !important; font-weight: 700 !important; }
  .stack-area { stroke: var(--surface-default); stroke-width: 1; stroke-linejoin: round; opacity: .82; vector-effect: non-scaling-stroke; }
  .stack-area--api { fill: var(--action-primary); }
  .stack-area--media { fill: var(--status-success); }
  .stack-area--jobs { fill: var(--status-warning); }
  .stack-hit { fill: transparent; cursor: pointer; outline: none; }
  .stack-cursor { stroke: var(--text-default); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; pointer-events: none; }
  .stack-cursor[data-state~="active"] { opacity: .45; }
  .scatter-trend { fill: none; stroke: var(--status-warning); stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
  .scatter-dot { fill: var(--action-primary); stroke: var(--surface-default); stroke-width: 2; pointer-events: none; transform-box: fill-box; transform-origin: center; transition: transform var(--duration-fast), filter var(--duration-fast); }
  .scatter-hit { fill: transparent; cursor: pointer; outline: none; }
  .scatter-hit:hover + .scatter-dot, .scatter-hit:focus + .scatter-dot, .scatter-hit[data-state~="active"] + .scatter-dot { filter: brightness(1.18); transform: scale(1.35); }
  .heatmap-scale { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; margin-top: .8rem; color: var(--text-supporting); font-size: .62rem; }
  .heatmap-scale i { width: 5rem; height: .42rem; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--action-primary) 12%, transparent), var(--action-primary)); }
  .heatmap-cell { fill: var(--action-primary); stroke: var(--surface-default); stroke-width: 3; cursor: pointer; outline: none; transition: filter var(--duration-fast), stroke var(--duration-fast); }
  .heatmap-cell:hover, .heatmap-cell:focus, .heatmap-cell[data-state~="active"] { filter: brightness(1.22); stroke: var(--text-default); }
  .heatmap-value { fill: var(--text-default) !important; font-weight: 700 !important; pointer-events: none; }
  .chart-tooltip { position: absolute; z-index: 3; min-width: 7.5rem; padding: .55rem .65rem; border: 1px solid var(--border-default); border-radius: .55rem; background: color-mix(in srgb, var(--surface-raised) 96%, transparent); box-shadow: var(--component-chart-tooltip-shadow); pointer-events: none; transform: translate(-50%, calc(-100% - .75rem)); }
  /* Flotante respecto a la ventana (el marco recorta su contenido y lo cortaría); el JS lo coloca bajo la .topbar,
     dentro de la ventana y del ancho del marco. Ancho independiente de la posición, para medirlo antes de moverlo. */
  .chart-tooltip:not(.chart-tooltip--inline) { position: fixed; width: max-content; max-width: min(16rem, calc(100vw - 2rem)); }
  .chart-tooltip[data-placement="below"] { transform: translate(-50%, .75rem); }
  .chart-tooltip strong, .chart-tooltip span { display: block; }
  .chart-tooltip strong { color: var(--text-default); font-size: .72rem; }
  .chart-tooltip span { margin-top: .12rem; color: var(--text-subtle); font-size: .65rem; }
  .chart-loading { position: absolute; z-index: 2; inset: 0; display: flex; align-items: flex-end; justify-content: space-around; gap: .5rem; padding: 3rem 1.5rem 2rem; background: var(--surface-default); transition: opacity var(--duration-base); }
  .chart-loading span { width: 28%; border-radius: .35rem .35rem 0 0; background: linear-gradient(100deg, var(--surface-raised) 30%, var(--surface-hover) 50%, var(--surface-raised) 70%); background-size: 300% 100%; animation: shimmer 1.8s infinite; }
  .chart-loading span:nth-child(1) { height: 44%; }
  .chart-loading span:nth-child(2) { height: 76%; }
  .chart-loading span:nth-child(3) { height: 58%; }
  .chart-loading[data-state~="ready"] { opacity: 0; pointer-events: none; }
  .chart-hint { margin-top: .55rem; color: var(--text-supporting); font-size: .65rem; }
  .chart-table { margin-top: .8rem; border-top: 1px solid var(--border-default); }
  .chart-table summary { padding-top: .75rem; color: var(--text-subtle); font-size: .7rem; font-weight: 700; cursor: pointer; }
  .chart-table table { margin-top: .55rem; }
  .chart-split { display: grid; gap: 1rem; margin-top: 1rem; }
  .chart-panel--distribution { container: distribution / inline-size; }
  .donut-layout { display: grid; gap: 1rem; align-items: center; margin-top: 1rem; }
  .donut-frame { width: min(100%, 13rem); justify-self: center; }
  .donut-plot { position: relative; aspect-ratio: 1; container-type: inline-size; }
  .donut-segment { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: opacity var(--duration-fast), transform var(--duration-fast); }
  .donut-segment:hover, .donut-segment:focus, .donut-segment[data-state~="active"] { outline: none; opacity: .78; transform: scale(1.025); }
  .donut-total { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
  .donut-total strong, .donut-total span { display: block; }
  .donut-total strong { font-size: clamp(1.15rem, 15cqi, 1.7rem); letter-spacing: -.05em; }
  .donut-total span { color: var(--text-supporting); font-size: clamp(.55rem, 6cqi, .62rem); }
  .donut-tooltip-slot { min-height: 3.4rem; margin-top: .35rem; }
  .chart-tooltip--inline { position: static; width: 100%; min-width: 0; transform: none; }
  .distribution-list { display: grid; gap: .15rem; list-style: none; padding: 0; }
  .distribution-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; padding: .45rem 0; border-bottom: 1px solid color-mix(in srgb, var(--border-default) 60%, transparent); color: var(--text-subtle); font-size: .7rem; }
  .distribution-list li:last-child { border-bottom: 0; }
  .distribution-list i { width: .55rem; height: .55rem; border-radius: .16rem; background: var(--legend-color); }
  .distribution-list strong { color: var(--text-default); font: 600 .67rem/1 ui-monospace, monospace; white-space: nowrap; }
  .sparkline-strip { display: grid; gap: .65rem; margin-top: 1rem; }
  .spark-card { display: flex; min-width: 0; align-items: end; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-default); }
  .spark-card span, .spark-card strong, .spark-card small { display: block; }
  .spark-card span { color: var(--text-supporting); font-size: .67rem; }
  .spark-card strong { margin-top: .15rem; font-size: 1.12rem; }
  .spark-card svg { width: 5.5rem; height: 2.4rem; flex: 0 0 auto; overflow: visible; }
  .spark-path { fill: none; stroke: var(--action-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .spark-fill { opacity: .5; }
  .trend { margin-top: .12rem; font-size: .62rem; font-weight: 700; }
  .trend--up, .trend--down { color: var(--status-success); }
  .chart-states { display: grid; gap: .65rem; margin-top: 1rem; }
  .chart-state { display: flex; align-items: center; gap: .85rem; min-height: 5rem; padding: .9rem; border: 1px dashed var(--border-default); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-default) 55%, transparent); }
  .chart-state strong { display: block; font-size: .76rem; }
  .chart-state p { margin-top: .12rem; color: var(--text-supporting); font-size: .67rem; }
  .state-mark { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--surface-raised); color: var(--text-supporting); font: 700 .8rem/1 ui-monospace, monospace; }
  .chart-state--error .state-mark { background: color-mix(in srgb, var(--status-danger) 10%, transparent); color: var(--status-danger); }
  .state-plot { display: flex; width: 3.25rem; height: 2.5rem; flex: 0 0 auto; align-items: end; gap: .2rem; }
  .state-plot i { width: .65rem; border-radius: .16rem .16rem 0 0; background: var(--surface-hover); animation: shimmer 1.8s infinite; }
  .state-plot i:nth-child(1) { height: 35%; }
  .state-plot i:nth-child(2) { height: 72%; }
  .state-plot i:nth-child(3) { height: 52%; }
  .state-plot i:nth-child(4) { height: 86%; }
  .dashboard-preview { overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-default); box-shadow: var(--shadow-showcase); }
  .preview-head { display: grid; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--border-default); background: linear-gradient(110deg, color-mix(in srgb, var(--action-primary) 10%, transparent), transparent 48%); }
  .preview-head h3 { margin-top: .25rem; font-size: 1.55rem; letter-spacing: -.03em; }
  .preview-head p:not(.eyebrow) { margin-top: .3rem; color: var(--text-supporting); font-size: .75rem; }
  .preview-grid { display: grid; gap: 1px; background: var(--border-default); }
  .preview-grid > div { background: var(--surface-default); }
  .preview-status { display: flex; align-items: center; gap: .85rem; padding: 1.25rem; }
  .preview-status div { flex: 1; }
  .preview-status small, .preview-status strong { display: block; }
  .preview-status small { color: var(--text-supporting); font-size: .65rem; }
  .preview-status strong { font-size: .85rem; }
  .preview-activity, .preview-note { padding: 1.25rem; }
  .preview-activity h4 { font-size: .82rem; }
  .activity-line { display: flex; gap: .75rem; padding: .8rem 0; border-top: 1px solid var(--border-default); }
  .activity-line > span { width: .45rem; height: .45rem; margin-top: .35rem; border-radius: 50%; background: var(--action-primary); box-shadow: 0 0 0 4px var(--action-primary-subtle); }
  .activity-line strong, .activity-line small { display: block; }
  .activity-line strong { font-size: .75rem; }
  .activity-line small { color: var(--text-supporting); font-size: .65rem; }
  .preview-note { background: linear-gradient(145deg, var(--surface-raised), var(--surface-default)) !important; }
  .preview-note h4 { margin-top: .8rem; font-size: 1.1rem; }
  .preview-note p:not(.eyebrow) { margin: .4rem 0 1.2rem; color: var(--text-subtle); font-size: .75rem; }
  .preview-note a { display: inline-flex; align-items: center; gap: .4rem; padding-block: .75rem; margin-block: -.75rem; color: var(--text-accent); font-size: .75rem; font-weight: 700; }
  .toast-stack { position: fixed; z-index: var(--z-toast); right: 1rem; bottom: 1rem; left: 1rem; display: grid; gap: var(--component-toast-gap); pointer-events: none; }
  .toast { display: flex; align-items: center; gap: .75rem; box-sizing: border-box; padding: var(--component-toast-padding); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--component-overlay-shadow); pointer-events: auto; animation: toast-in var(--component-toast-enter) ease-out; }
  .toast--danger { border-color: var(--status-danger); }
  .toast--danger > span { background: var(--component-toast-danger-symbol); color: var(--status-danger); }
  @keyframes toast-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
  @media (min-width: 40rem) { .toast-stack { left: auto; width: var(--component-toast-max-width); } }
  .banner-stack { display: grid; gap: .6rem; width: 100%; margin-top: 1rem; }
  .banner { --banner-color: var(--status-info, var(--action-primary)); display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; box-sizing: border-box; width: 100%; padding: .8rem 1rem; border: 1px solid var(--banner-color); border-radius: var(--radius-md); background: var(--surface-raised); }
  .banner[hidden] { display: none; }
  .banner--warning { --banner-color: var(--status-warning); }
  .banner--danger { --banner-color: var(--status-danger); }
  .banner > .icon { color: var(--banner-color); }
  .banner > div { flex: 1 1 12rem; min-width: 0; }
  .banner strong { display: block; font-size: .82rem; }
  .banner p { margin-top: .15rem; color: var(--text-subtle); font-size: .75rem; }
  .banner .icon-button { border: 0; background: transparent; }
  .toast > span { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: .55rem; background: color-mix(in srgb, var(--status-success) 12%, transparent); color: var(--status-success); }
  .toast > div { flex: 1; }
  .toast strong, .toast small { display: block; }
  .toast strong { font-size: .78rem; }
  .toast small { color: var(--text-supporting); font-size: .67rem; }
  .toast .icon-button { border: 0; background: transparent; }
  .modal { width: min(calc(100% - 2rem), 29rem); margin: auto; padding: 0; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-default); color: var(--text-default); box-shadow: var(--shadow-float); }
  .modal::backdrop { background: var(--component-overlay-backdrop); backdrop-filter: blur(4px); }
  .modal form { position: relative; padding: 1.5rem; }
  .modal__close { position: absolute; top: 1rem; right: 1rem; }
  .modal__symbol { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; margin-bottom: 1.5rem; border-radius: .7rem; background: color-mix(in srgb, var(--status-warning) 10%, transparent); color: var(--status-warning); }
  .modal h2 { margin-top: .35rem; font-size: 1.45rem; }
  .modal p:not(.eyebrow) { margin-top: .6rem; color: var(--text-subtle); font-size: .83rem; }
  .button--danger:disabled { opacity: .45; cursor: not-allowed; }
  .modal--destructive .modal__symbol { background: var(--status-danger-symbol); color: var(--status-danger); }
  .overlay-field { display: grid; gap: .4rem; margin-top: 1rem; color: var(--text-subtle); font-size: .8rem; }
  .overlay-field input[type="text"] { box-sizing: border-box; width: 100%; min-height: var(--component-control-min-height); padding: 0 .8rem; border: 1px solid var(--component-control-border); border-radius: var(--radius-sm); background: var(--surface-default); color: var(--text-default); font: inherit; }
  .drawer { position: fixed; inset: 0 0 0 auto; box-sizing: border-box; width: min(var(--component-overlay-drawer-width), 100vw); max-width: 100vw; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--border-default); background: var(--surface-default); color: var(--text-default); box-shadow: var(--component-overlay-shadow); }
  .drawer[open] { display: flex; flex-direction: column; animation: drawer-in var(--duration-base) ease-out; }
  .drawer::backdrop { background: var(--component-overlay-backdrop); }
  .drawer__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: var(--component-overlay-drawer-padding); border-bottom: 1px solid var(--border-default); }
  .drawer h2 { margin-top: .25rem; font-size: 1.25rem; }
  .drawer__body { display: grid; flex: 1; align-content: start; gap: 1rem; overflow-y: auto; padding: var(--component-overlay-drawer-padding); }
  .drawer__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; padding: var(--component-overlay-drawer-padding); border-top: 1px solid var(--border-default); }
  @keyframes drawer-in { from { transform: translateX(2rem); opacity: 0; } to { transform: none; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .toast, .drawer[open] { animation: none; } }
  .modal__actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.5rem; }
  .no-results { padding: 6rem 1rem; text-align: center; }
  .no-results .icon { width: 2rem; height: 2rem; margin: 0 auto 1rem; color: var(--text-supporting); }
  .no-results h2 { font-size: 1.3rem; }
  .no-results p { color: var(--text-supporting); }

  /* Navegación: tabs. Estados compartidos vía --component-nav-*. */
  .tabs { min-width: 0; }
  .tabs__list { display: flex; gap: var(--space-1); overflow-x: auto; overscroll-behavior-x: contain; border-bottom: 1px solid var(--border-default); scrollbar-width: thin; }
  .tabs__tab { flex: 0 0 auto; min-height: var(--component-control-min-height); padding: var(--component-nav-item-padding); border: 0; border-bottom: var(--component-nav-indicator-width) solid transparent; background: transparent; color: var(--component-nav-text); font-size: .85rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background var(--component-nav-transition), color var(--component-nav-transition), border-color var(--component-nav-transition); }
  .tabs__tab:hover { background: var(--component-nav-surface-hover); color: var(--component-nav-text-hover); }
  .tabs__tab[aria-selected="true"] { border-bottom-color: var(--component-nav-indicator); background: var(--component-nav-surface-active); color: var(--component-nav-text-active); }
  .tabs__tab:focus-visible { outline-offset: -3px; box-shadow: var(--component-nav-focus-ring); }
  .tabs__tab:disabled, .tabs__tab[aria-disabled="true"] { opacity: var(--component-nav-disabled-opacity); color: var(--component-nav-text-disabled); cursor: not-allowed; }
  .tabs__panel { padding: var(--space-4) var(--space-1) 0; color: var(--text-subtle); font-size: .88rem; }

  /* Navegación: accordion (varios paneles abiertos a la vez). */
  .accordion { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
  .accordion__item + .accordion__item { border-top: 1px solid var(--border-default); }
  .accordion__heading { font-size: inherit; }
  .accordion__trigger { display: flex; width: 100%; min-height: var(--component-control-min-height); align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--component-nav-item-padding); border: 0; background: transparent; color: var(--component-nav-text); font-size: .88rem; font-weight: 600; text-align: left; cursor: pointer; transition: background var(--component-nav-transition), color var(--component-nav-transition); }
  .accordion__trigger:hover { background: var(--component-nav-surface-hover); color: var(--component-nav-text-hover); }
  .accordion__trigger[aria-expanded="true"] { box-shadow: inset var(--component-nav-indicator-width) 0 var(--component-nav-indicator); color: var(--component-nav-text-active); }
  .accordion__trigger:focus-visible { outline-offset: -3px; box-shadow: var(--component-nav-focus-ring); }
  .accordion__trigger:disabled { opacity: var(--component-nav-disabled-opacity); color: var(--component-nav-text-disabled); cursor: not-allowed; }
  .accordion__icon { flex: 0 0 auto; transition: transform var(--component-nav-transition); }
  .accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
  .accordion__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--duration-slow) var(--ease-standard), visibility var(--duration-slow); }
  .accordion__item[data-state~="open"] > .accordion__panel { grid-template-rows: 1fr; visibility: visible; }
  .accordion__content { min-height: 0; overflow: hidden; padding: 0 var(--space-4); color: var(--text-subtle); font-size: .85rem; }
  .accordion__item[data-state~="open"] .accordion__content { padding-bottom: var(--space-4); }

  /* Navegación: breadcrumbs y paginación. */
  .breadcrumbs { min-width: 0; }
  .breadcrumbs__list { display: flex; margin: 0; padding: 0; list-style: none; min-width: 0; flex-wrap: nowrap; align-items: center; gap: var(--space-1); }
  .breadcrumbs__item { display: flex; min-width: 0; flex: 0 0 auto; align-items: center; gap: var(--space-1); color: var(--component-nav-text-disabled); font-size: .82rem; }
  .breadcrumbs__item + .breadcrumbs__item::before { content: "/"; color: var(--component-nav-text-disabled); }
  .breadcrumbs__item:last-child { min-width: min(10rem, 45vw); flex: 1 1 auto; }
  .breadcrumbs__item:last-child .breadcrumbs__link { max-width: 100%; }
  .breadcrumbs__item--optional { display: none; }
  .breadcrumbs__link { display: inline-flex; min-height: var(--component-control-min-height); min-width: 0; align-items: center; padding: 0 var(--space-2); border-radius: var(--radius-2); color: var(--component-nav-text); font-weight: 600; text-decoration: none; transition: background var(--component-nav-transition), color var(--component-nav-transition); }
  .breadcrumbs__link:hover { background: var(--component-nav-surface-hover); color: var(--component-nav-text-hover); }
  .breadcrumbs__link:focus-visible { box-shadow: var(--component-nav-focus-ring); }
  .breadcrumbs__link[aria-current="page"] { display: block; overflow: hidden; line-height: var(--component-control-min-height); background: transparent; color: var(--component-nav-text-active); text-overflow: ellipsis; white-space: nowrap; }
  .breadcrumbs__link[aria-disabled="true"] { opacity: var(--component-nav-disabled-opacity); color: var(--component-nav-text-disabled); pointer-events: none; }
  .pagination__list { display: flex; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
  .pagination__button { display: inline-grid; min-width: var(--component-control-min-height); min-height: var(--component-control-min-height); place-items: center; padding: 0 var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: transparent; color: var(--component-nav-text); font-size: .85rem; font-weight: 600; cursor: pointer; transition: background var(--component-nav-transition), color var(--component-nav-transition), border-color var(--component-nav-transition); }
  .pagination__button:hover { background: var(--component-nav-surface-hover); color: var(--component-nav-text-hover); }
  .pagination__button[aria-current="page"] { border-color: var(--component-nav-indicator); background: var(--component-nav-surface-active); color: var(--component-nav-text-active); }
  .pagination__button:focus-visible { box-shadow: var(--component-nav-focus-ring); }
  .pagination__button:disabled { opacity: var(--component-nav-disabled-opacity); color: var(--component-nav-text-disabled); background: transparent; cursor: not-allowed; }
  .pagination__ellipsis { display: inline-grid; min-width: var(--component-control-min-height); min-height: var(--component-control-min-height); place-items: center; color: var(--component-nav-text-disabled); user-select: none; }
  .pagination__status { margin-top: var(--space-2); color: var(--text-supporting); font-size: .75rem; }
  @media (min-width: 48rem) {
    .breadcrumbs__item--optional { display: flex; }
    .breadcrumbs__item--ellipsis { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .help-tooltip { transition-duration: .01ms; }
    .accordion__panel, .accordion__icon { transition-duration: .01ms; }
  }

  /* Tabla operativa (v0.8): todo el estilo cuelga de .data-table / .data-card. */
  [data-data-table] [hidden] { display: none !important; }
  .data-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .data-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3) var(--space-4); }
  .data-toolbar .field { flex: 1 1 14rem; }
  .data-count { margin: 0; min-height: var(--component-control-min-height); display: flex; align-items: center; color: var(--text-subtle); font-size: .8rem; font-variant-numeric: tabular-nums; }
  .data-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--component-table-border); border-radius: var(--radius-md); }
  .data-table-wrap:focus-visible { outline: 2px solid var(--component-field-focus); outline-offset: 2px; }
  .data-table { min-width: var(--component-table-min-width); }
  .data-table th { padding: 0 var(--space-2); background: var(--component-table-header-bg); border-bottom: 1px solid var(--component-table-border); color: var(--component-table-header-text); white-space: nowrap; }
  .data-table td { height: var(--component-table-row-min-height); padding: var(--component-table-cell-padding); border-bottom: 1px solid var(--component-table-border); }
  .data-table tbody tr:hover td { background: var(--component-table-row-hover); }
  .data-sort-button { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--component-control-min-height); padding: 0 var(--space-2); border: 0; border-radius: .4rem; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
  .data-sort-button::after { content: "\2195"; opacity: .5; font-size: .9em; }
  th[aria-sort="ascending"] .data-sort-button::after { content: "\25B2"; opacity: 1; }
  th[aria-sort="descending"] .data-sort-button::after { content: "\25BC"; opacity: 1; }
  th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--text-default); }
  .data-sort-button:hover { color: var(--text-default); }
  .data-sort-button:focus-visible { outline: 2px solid var(--component-field-focus); outline-offset: 1px; }

  .data-check { display: inline-flex; align-items: center; justify-content: center; min-width: var(--component-control-min-height); min-height: var(--component-control-min-height); cursor: pointer; }
  .data-check input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--action-primary); cursor: pointer; }
  .data-check:focus-within { outline: 2px solid var(--component-field-focus); outline-offset: -2px; border-radius: .4rem; }
  .data-table th.data-table__select, .data-table td.data-table__select { width: 1%; padding: 0; text-align: center; }
  .data-table tbody tr[data-state~="selected"] td { background: var(--component-table-row-selected); }
  .data-table tbody tr[data-state~="selected"] td:first-child { box-shadow: inset 3px 0 0 var(--component-table-row-selected-border); }
  .data-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--component-table-border); border-radius: var(--radius-md); background: var(--component-table-header-bg); font-size: .8rem; }

  .data-demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .data-demo__label { color: var(--text-supporting); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
  .data-demo .button[aria-pressed="true"] { border-color: var(--action-primary); background: var(--action-primary-subtle); }
  .data-state { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border: 1px dashed var(--component-table-border); border-radius: var(--radius-md); }
  .data-state p { margin: .2rem 0 0; color: var(--text-subtle); font-size: .8rem; }
  .data-state--error { border: 1px solid var(--status-danger); }
  .data-skeleton td { padding: var(--space-3); }
  .data-skeleton i { display: block; width: 70%; height: .6rem; border-radius: .35rem; background: linear-gradient(100deg, var(--surface-raised) 30%, var(--surface-hover) 50%, var(--surface-raised) 70%); background-size: 300% 100%; animation: shimmer 1.8s infinite; }

  /* Botón de copiar (data-copy): copia un texto o el contenido de un destino y confirma en línea y por role="status". */
  .copy-button { display: inline-flex; min-height: var(--component-copy-button-height); align-items: center; gap: .4rem; padding: 0 .65rem; border: 1px solid var(--component-control-border); border-radius: var(--radius-2); background: var(--surface-default); color: var(--text-subtle); font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; transition: border-color var(--duration-base), color var(--duration-base); }
  .copy-button:hover { border-color: var(--component-control-border-hover); color: var(--text-default); }
  .copy-button:focus-visible { outline: 0; box-shadow: var(--component-focus-ring); }
  .copy-button .icon { width: 1rem; height: 1rem; }
  .copy-button__label { white-space: nowrap; }
  .copy-button[data-state~="copied"] { border-color: var(--status-success); color: var(--status-success); }
  .copy-button[data-state~="error"] { border-color: var(--status-danger); color: var(--text-danger); }

  /* Bloque de código: cabecera con lenguaje y copia; el resaltado de sintaxis queda para un adaptador externo. */
  .code-block { margin: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-canvas); }
  .code-block__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-default); background: var(--surface-raised); }
  .code-block__lang { color: var(--text-supporting); font: 600 .7rem/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: .04em; text-transform: uppercase; }
  .code-block__body { margin: 0; padding: var(--space-4); overflow-x: auto; color: var(--text-default); font: .78rem/1.6 ui-monospace, SFMono-Regular, monospace; tab-size: 2; }
  .code-block__body:focus-visible { outline: 0; box-shadow: inset var(--component-focus-ring); }

  /* Índice de contenidos (data-toc): se genera desde los h2/h3 del destino y reutiliza el scrollspy. */
  .toc { font-size: .82rem; }
  .toc__title { margin: 0 0 var(--space-2); color: var(--text-supporting); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .toc__list { display: grid; gap: 2px; margin: 0; padding: 0; border-left: 1px solid var(--border-default); list-style: none; }
  .toc__link { display: block; padding: var(--space-1) var(--space-3); margin-left: -1px; border-left: 2px solid transparent; color: var(--text-subtle); text-decoration: none; }
  .toc__link--sub { padding-left: var(--space-6); font-size: .78rem; }
  .toc__link:hover { color: var(--text-default); }
  .toc__link:focus-visible { outline: 0; box-shadow: var(--component-focus-ring); }
  .toc__link[aria-current] { border-left-color: var(--action-primary); color: var(--text-accent); font-weight: 700; }

  /* Paleta de comandos (data-command-menu): diálogo modal con combobox y listbox. */
  .command-menu { width: min(calc(100% - 2rem), var(--component-command-menu-width)); max-height: min(calc(100% - 4rem), 32rem); margin: 12vh auto auto; padding: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-default); color: var(--text-default); box-shadow: var(--shadow-float); }
  .command-menu[open] { display: flex; flex-direction: column; }
  .command-menu::backdrop { background: var(--component-overlay-backdrop); backdrop-filter: blur(4px); }
  .command-menu__search { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); border-bottom: 1px solid var(--border-default); color: var(--text-supporting); }
  .command-menu__input { flex: 1; min-width: 0; min-height: 3.25rem; border: 0; outline: 0; background: transparent; color: var(--text-default); font: inherit; font-size: .95rem; }
  .command-menu__input:focus-visible { outline: 0; box-shadow: none; }
  .command-menu__search:focus-within { box-shadow: inset 0 -2px 0 var(--component-field-focus); }
  .command-menu__list { flex: 1; margin: 0; padding: var(--space-2); overflow-y: auto; list-style: none; }
  .command-menu__option { display: flex; min-height: var(--component-control-min-height); align-items: center; gap: var(--space-3); padding: .4rem .75rem; border-radius: var(--radius-2); color: var(--text-subtle); font-size: .85rem; cursor: pointer; }
  .command-menu__option[hidden] { display: none; }
  .command-menu__option .icon { flex: 0 0 auto; width: 1rem; height: 1rem; color: var(--text-supporting); }
  .command-menu__option:hover { background: var(--surface-hover); color: var(--text-default); }
  .command-menu__option[aria-selected="true"] { background: var(--action-primary-subtle); color: var(--text-default); box-shadow: inset 0 0 0 2px var(--component-field-focus); }
  .command-menu__hint { margin-left: auto; color: var(--text-supporting); font-size: .72rem; white-space: nowrap; }
  .command-menu__empty { margin: 0; padding: var(--space-6) var(--space-4); color: var(--text-supporting); font-size: .85rem; text-align: center; }
}

@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
}

@media (min-width: 40rem) {
  :root { --page-gutter: 1.75rem; }
  .command-search kbd { display: inline-block; }
  .intro__meta div { padding: 1.2rem; }
  .form-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.5rem; }
  .field:has(textarea), .choice-group, .form-summary, .form-success, .form-actions, .form-note { grid-column: 1 / -1; }
  .choice-group { grid-template-columns: repeat(2, 1fr); }
  .split-group { grid-template-columns: 1.25fr .75fr; }
  .type-row { grid-template-columns: 9rem 1fr; align-items: baseline; }
  .preview-head { grid-template-columns: 1fr auto; align-items: end; padding: 1.5rem; }
  .preview-status, .preview-activity, .preview-note { padding: 1.5rem; }
  .toast { right: 1.5rem; left: auto; width: 22rem; }
  .chart-heading:not(.chart-heading--compact) { grid-template-columns: 1fr auto; }
  .chart-range { width: auto; }
  .chart-range button { flex: initial; }
  .sparkline-strip, .chart-states { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spark-card { display: grid; }
  .spark-card svg { width: 100%; }
  footer { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 48rem) {
  .color-grid, .feedback-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-layout { grid-template-columns: minmax(0, 1.45fr) minmax(17rem, .75fr); }
  .component-group, .type-specimen, .table-card, .progress-card, .chart-panel { padding: 1.5rem; }
  .chart-intro { grid-template-columns: minmax(0, .9fr) minmax(18rem, 1.1fr); align-items: end; padding: 1.5rem; }
  .chart-split { grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr); }
  .chart-lab { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .chart-panel--ranking, .chart-panel--stacked, .chart-panel--scatter, .chart-panel--heatmap { grid-column: span 6; }
  .chart-frame--heatmap { height: 18rem; }
  @container distribution (min-width: 17rem) { .donut-layout { grid-template-columns: minmax(0, .9fr) minmax(8.5rem, 1.1fr); } }
  .preview-grid { grid-template-columns: .8fr 1.25fr; }
  .preview-status { grid-column: 1; }
  .preview-activity { grid-column: 2; grid-row: 1 / span 2; }
}

@media (min-width: 68rem) {
  :root { --page-gutter: clamp(2rem, 5vw, 5rem); }
  .app-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; width: 16rem; height: 100vh; transform: none; }
  .sidebar__close, .menu-button, .sidebar-scrim { display: none; }
  .menu-open { overflow: auto; }
  .topbar { padding-inline: var(--page-gutter); }
  .command-search { max-width: 30rem; margin-right: auto; }
  .intro { grid-template-columns: minmax(0, 1fr) 20rem; align-items: end; padding-block: 5.5rem 4rem; }
  .intro__meta { align-self: end; }
  .doc-section { padding-block: 5rem; }
  .section-heading { gap: 1.5rem; margin-bottom: 2.5rem; }
}

@media (min-width: 86rem) {
  .app-shell { grid-template-columns: 17.5rem minmax(0, 1fr); }
  .sidebar { width: 17.5rem; }
  .chart-panel--ranking { grid-column: span 5; }
  .chart-panel--stacked { grid-column: span 7; }
  .chart-panel--scatter { grid-column: span 7; }
  .chart-panel--heatmap { grid-column: span 5; }
}

@media (max-width: 34rem) {
  .table-wrap { overflow: visible; }
  table, tbody, tr, td { display: block; }
  thead { display: none; }
  tr { padding: .65rem 0; border-bottom: 1px solid var(--border-default); }
  tr:last-child { border-bottom: 0; }
  td { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 1rem; padding: .35rem 0; border: 0; white-space: normal; text-align: right; }
  td::before { grid-row: span 2; color: var(--text-supporting); content: attr(data-label); font-size: .65rem; text-align: left; text-transform: uppercase; }
  td > * { grid-column: 2; justify-self: end; }
  td:first-child { align-items: start; }
}

@media (max-width: 34rem) {
  .data-table-wrap { overflow-x: auto; }
  .data-table-wrap table { display: table; }
  .data-table-wrap thead { display: table-header-group; }
  .data-table-wrap tbody { display: table-row-group; }
  .data-table-wrap tr { display: table-row; padding: 0; border-bottom: 0; }
  .data-table-wrap td { display: table-cell; padding: var(--component-table-cell-padding); text-align: left; white-space: nowrap; }
  .data-table-wrap td::before { content: none; }
  .data-table-wrap td > * { justify-self: auto; }
}

/* El calendario del selector de fecha es una rejilla: no se apila como las tablas de datos. */
@media (max-width: 34rem) {
  .date-picker__grid { display: table; }
  .date-picker__grid thead { display: table-header-group; }
  .date-picker__grid tbody { display: table-row-group; }
  .date-picker__grid tr { display: table-row; padding: 0; border-bottom: 0; }
  .date-picker__grid td { display: table-cell; padding: 1px; text-align: center; }
  .date-picker__grid td::before { content: none; }
  .date-picker__grid td > * { justify-self: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Compatibilidad v1.0 */
@layer utilities {
  .field--wide { grid-column: 1 / -1; }

  /* Alternativa cuando el navegador no soporta :has(): las listas de selectores con :has() se descartan enteras. */
  @supports not selector(:has(*)) {
    .radio input:disabled + span { opacity: var(--component-field-disabled-opacity); cursor: not-allowed; }
    .chart-cursor[data-state~="active"] { opacity: .35; }
    .chart-bar-group[data-state~="active"] .chart-bar { filter: brightness(1.16); opacity: 1; }
    .ranking-row[data-state~="active"] .ranking-bar { filter: brightness(1.12); opacity: 1; }
  }

  /* Modo de alto contraste: colores de sistema para foco, bordes, estados seleccionados y controles. */
  @media (forced-colors: active) {
    :focus-visible, .radio input:focus-visible + span, .check input:focus-visible + span, .switch input:focus-visible + span,
    .form-summary:focus-visible, .form-success:focus-visible { outline: 3px solid Highlight; outline-offset: 3px; box-shadow: none; }
    .button, .icon-button, .field input, .field select, .field textarea, .segmented, .badge, .alert, .banner, .modal, .drawer,
    .popover, .floating-surface, .table-wrap, .toast-stack > *, .tabs__tab, .pagination__button, .combobox__list { border: 1px solid CanvasText; }
    .tabs__tab[aria-selected="true"], .pagination__button[aria-current="page"], .segmented button[data-state~="active"],
    .combobox__list li[aria-selected="true"], .side-nav__link[data-state~="active"], .breadcrumbs__link[aria-current="page"],
    .data-demo .button[aria-pressed="true"], .accordion__item[data-state~="open"] > .accordion__heading .accordion__trigger {
      background: Highlight; color: HighlightText; border-color: Highlight; forced-color-adjust: none;
    }
    .radio input + span, .check input + span, .switch input + span { border: 2px solid ButtonText; forced-color-adjust: none; background: Canvas; }
    .check input:checked + span, .switch input:checked + span { background: Highlight; border-color: Highlight; }
    .check input:checked + span::after { border-color: HighlightText; }
    .switch input + span::after { background: ButtonText; }
    .switch input:checked + span::after { background: HighlightText; }
    .radio input:checked + span { border-color: Highlight; }
    .radio input:checked + span::after { background: Highlight; }
    .field input:disabled, .field select:disabled, .field textarea:disabled, .button:disabled, .radio input:disabled + span { color: GrayText; border-color: GrayText; }
    .chart-bar, .ranking-bar, .donut-segment, .heatmap-cell { stroke: CanvasText; }
    .chart-point-hit:focus + .chart-point, .chart-bar-hit:focus + .chart-bar, .ranking-hit:focus, .heatmap-cell:focus { outline: 3px solid Highlight; }
  }
}

/* Impresión: papel claro, sin navegación ni capas flotantes, y sin cortar tarjetas, tablas ni gráficos.
   Va fuera de @layer para ganar a las reglas sin capa de escritorio (rejilla del app-shell, sidebar fijo). */
@media print {
  html, body { background: var(--surface-default); color: var(--text-default); }
  .app-shell { display: block; }
  .sidebar, .sidebar-scrim, .topbar, .bottom-nav, .toast-stack, .floating-surface, .tour, .modal, .drawer,
  .combobox__list, .chart-tooltip, .skip-link, .menu-button { display: none !important; }
  main { width: 100%; padding-inline: 0; }
  .doc-section { padding-block: 1.5rem; }
  .data-card, .metric, .chart-panel, .spark-card, .state-card, .progress-card, .table-card, .alert, .preview-activity, .preview-note,
  .chart-frame, .gauge, .table-wrap, figure, table, tr, img, svg { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3, h4, caption, .section-heading { break-after: avoid; page-break-after: avoid; }
  thead { display: table-header-group; }
  .table-wrap, .chart-frame { overflow: visible; }
  /* En papel no hay scroll: la tabla se ajusta al ancho y el código salta de línea. */
  :root { --component-table-min-width: 0 !important; }
  .intro__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .table-wrap table { width: 100%; min-width: 0 !important; max-width: 100%; table-layout: fixed; }
  .table-wrap th, .table-wrap td { white-space: normal; overflow-wrap: anywhere; }
  .data-table th.data-table__select, .data-table td.data-table__select { width: calc(var(--component-control-min-height) + 2px); padding: 0; text-align: center; }
  .data-sort-button { max-width: 100%; padding-inline: 0; }
  .table-wrap .badge { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .table-wrap .badge::before { display: inline-block; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
  main a[href^="http"]:not(.button)::after { content: " (" attr(href) ")"; overflow-wrap: anywhere; font-size: .85em; font-weight: 400; }
}