/* =============================================================================
   Dashboard Design Tokens R1 — fuente canónica de aliases visuales.
   No redefine identidad: apunta a --color-*, --shell-*, --dps-*, --tc-* existentes.
   Cargar DESPUÉS de estilos.css, dashboard-shell-refresh.css y
   dashboard-professional-system-r1.css. Nuevas pantallas deben usar --ds-*.
   ============================================================================= */

.tu-campo-body .dashboard-shell {
  /* ----- Colores ----- */
  --ds-brand-primary: var(--color-primary);
  --ds-brand-primary-hover: var(--color-primary-text);
  --ds-brand-subtle: var(--shell-green-soft);
  --ds-brand-ink: var(--shell-green);

  --ds-bg-app: var(--tc-dash-bg);
  --ds-bg-surface: var(--shell-card-bg);
  --ds-bg-elevated: var(--shell-card-bg);
  --ds-bg-soft-info: var(--shell-blue-soft);
  --ds-bg-soft-warning: var(--shell-orange-soft);

  --ds-text-primary: var(--shell-topbar-text, var(--color-text));
  --ds-text-secondary: var(--shell-topbar-muted, var(--color-muted));
  --ds-text-muted: var(--color-muted);
  --ds-text-on-brand: var(--color-on-primary);

  --ds-border-default: var(--shell-card-border);
  --ds-border-strong: var(--shell-topbar-border);
  --ds-border-focus: var(--shell-green);

  --ds-success: var(--dps-status-completado-fg);
  --ds-success-subtle: var(--dps-status-completado-bg);
  --ds-warning: var(--dps-status-atencion-fg);
  --ds-warning-subtle: var(--dps-status-atencion-bg);
  --ds-danger: var(--dps-status-error-fg);
  --ds-danger-subtle: var(--dps-status-error-bg);
  --ds-info: var(--dps-status-programado-fg);
  --ds-info-subtle: var(--dps-status-programado-bg);

  --ds-focus-ring: var(--dps-focus-ring);

  /* ----- Tipografía ----- */
  --ds-font-family: "DM Sans", system-ui, sans-serif;
  --ds-font-page-title: var(--dps-title-size);
  --ds-font-page-title-weight: var(--dps-title-weight);
  --ds-font-section-title: var(--dps-section-size);
  --ds-font-body: var(--dps-body-size);
  --ds-font-body-small: var(--dps-meta-size);
  --ds-font-metadata: var(--dps-meta-size);
  --ds-font-label: var(--dps-label-size);
  --ds-font-table-header: var(--dps-table-head-size);
  --ds-font-button: 0.9375rem;
  --ds-font-lead: var(--dps-lead-size);
  --ds-color-ink: var(--dps-ink);
  --ds-color-lead: var(--dps-lead-color);

  /* ----- Espaciado (escala usada por DPS / shell) ----- */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 32px;
  --ds-space-8: 48px;

  --ds-page-gap: var(--dps-page-gap);
  --ds-header-gap: var(--dps-header-gap);
  --ds-section-gap: var(--dps-section-gap);
  --ds-toolbar-gap: var(--dps-toolbar-gap);

  /* ----- Radios / sombras / layout ----- */
  --ds-radius-control: var(--shell-btn-radius);
  --ds-radius-surface: var(--shell-radius);
  --ds-shadow-elevated: 0 8px 24px rgba(7, 63, 42, 0.08);
  --ds-content-max: var(--dps-content-max);
  --ds-sidebar-width: var(--shell-sidebar-w);
  --ds-topbar-height: var(--shell-topbar-h);
  --ds-control-height: var(--dps-control-h);
  --ds-table-row-height: 52px;
  --ds-btn-pad-y: var(--shell-btn-pad-y);
  --ds-btn-pad-x: var(--shell-btn-pad-x);

  /* ----- Z-index ----- */
  --ds-z-base: 1;
  --ds-z-sticky: 10;
  --ds-z-topbar: 20;
  --ds-z-sidebar: 30;
  --ds-z-dropdown: 40;
  --ds-z-modal: 50;
  --ds-z-toast: 60;

  /* ----- Breakpoints (documentación; media queries usan px literales legacy) ----- */
  --ds-bp-mobile-max: 767px;
  --ds-bp-tablet-min: 768px;
  --ds-bp-desktop-min: 1024px;

  /* ----- Motion ----- */
  --ds-transition-fast: 120ms ease;
  --ds-transition-base: 180ms ease;
  --ds-transition-slow: 240ms ease;
}

/* Utilidades mínimas: no duplican componentes; solo puente token → uso. */
.tu-campo-body .dashboard-shell .ds-surface {
  background: var(--ds-bg-surface);
  border: 1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-surface);
}

.tu-campo-body .dashboard-shell .ds-focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* DangerButton — variante canónica sobre Secondary (sin hex nuevos) */
.tu-campo-body .dashboard-shell .ds-btn-danger {
  color: var(--ds-danger);
  border-color: var(--ds-danger);
}
.tu-campo-body .dashboard-shell .ds-btn-danger:hover,
.tu-campo-body .dashboard-shell .ds-btn-danger:focus-visible {
  background: var(--ds-danger-subtle);
  color: var(--ds-danger);
}