/* Copia: MIRESTIAIA/styles/tokens.css — variables globales (--color-*, --space-*, etc.) */
:root {
  color-scheme: light;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-sans: var(--font-body);

  --color-primary-400: #fb923c;
  --color-primary-500: #f97316;
  --color-primary-gradient: linear-gradient(135deg, #fb923c, #f97316);
  --color-nav-900: #15192c;
  --color-nav-950: #0f1324;

  --color-bg: #f3f5f8;
  --color-bg-warm: #fffdf7;
  --color-surface: #ffffff;
  --color-card-bg: #fffbf2;
  --color-surface-muted: #f7f8fa;
  --color-surface-soft: #fff1e6;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-soft: #94a3b8;

  --color-success: #10b981;
  --color-success-soft: #ecfdf5;
  --color-warning: #f59e0b;
  --color-warning-soft: #fffbeb;
  --color-info: #0ea5e9;
  --color-info-soft: #f0f9ff;

  --color-accent: #f07c2a;
  --color-accent-dark: #d96a1e;
  --color-accent-soft: rgba(240, 124, 42, 0.15);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  /* Alias usado en submódulos legacy; mismo peso visual que tarjetas del shell */
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-elevated: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

  --sidebar-width: 260px;
  --content-max: 1480px;
  --transition-base: 0.2s ease;

  /* Shell móvil (≤1180px): sidebar drawer + topbar fijo — misma familia cromática que el dashboard oscuro */
  --shell-mobile-gradient: linear-gradient(135deg, #231e34 0%, #12121c 100%);
  --shell-mobile-solid: #1b1b2f;

  /*
   * Fase 1 — PWA “Limelight”: pastilla naranja con brillo (bottom nav + menú drawer).
   * Consumidos por public/css/limelight-nav.css; ref. degradado horizontal + rim light.
   */
  --mr-f1-pill-a: #b8320f;
  --mr-f1-pill-b: #d84315;
  --mr-f1-pill-c: #e64a19;
  --mr-f1-pill-d: #ff7e22;
  --mr-f1-pill-e: #ffb347;
  --mr-f1-shine-strong: rgba(255, 255, 255, 0.42);
  --mr-f1-shine-soft: rgba(255, 255, 255, 0.14);
  --mr-f1-rim: rgba(255, 255, 255, 0.52);
  --mr-f1-glow: rgba(230, 74, 25, 0.5);
  --mr-f1-depth: rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #101527;
  --color-bg-warm: #0f1425;
  --color-surface: #171d33;
  --color-card-bg: #171d33;
  --color-surface-muted: #202740;
  --color-surface-soft: rgba(246, 164, 86, 0.12);
  --color-border: #2b3453;
  --color-border-strong: #3c476a;
  --color-text: #f3f6fc;
  --color-text-muted: #b2bdd4;
  --color-text-soft: #8d98b3;
  --color-nav-900: #0a0f1d;
  --color-nav-950: #070b16;
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.22);
  --shadow-card-hover: 0 16px 34px rgba(0, 0, 0, 0.28);
  --shadow-elevated: 0 18px 36px rgba(0, 0, 0, 0.35);
}

/* Compatibilidad MiRestconIA: vistas EJS + layout.css siguen usando --palette-* / --dg-* / --pwa-* */
:root {
  --palette-page-cream: #fff9f1;
  --palette-page-cream-2: #fff3e6;
  --palette-surface-card: #ffffff;
  --palette-surface-main: rgba(255, 255, 255, 0.94);
  --palette-sidebar-base: #1c1c28;
  --palette-sidebar-top: #252532;
  --palette-sidebar-bottom: #18181f;
  --palette-accent-orange: #ff7043;
  --palette-accent-orange-strong: #f4511e;
  --palette-accent-orange-soft: #ff8a65;
  --palette-action-blue: #4285f4;
  --palette-urgent-red: #ef5350;
  --palette-success-green: #66bb6a;
  --palette-text-heading: #1a1a1a;
  --palette-text-body: #757575;
  --palette-text-muted: #9e9e9e;
  --palette-text-on-sidebar: rgba(255, 255, 255, 0.92);
  --palette-text-on-sidebar-muted: rgba(198, 204, 230, 0.78);
  --palette-border-subtle: rgba(0, 0, 0, 0.08);
  --palette-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.05);
  --palette-shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.06);
  --palette-radius-card: 1rem;
  --palette-radius-card-sm: 0.75rem;
  --palette-radius-pill: 9999px;
  --palette-sidebar-width: 280px;
  --palette-viewport-inset: 70px;
  --dg-bg-start: var(--palette-page-cream);
  --dg-bg-end: var(--palette-page-cream-2);
  --dg-main-bg: var(--palette-surface-main);
  --dg-text-primary: var(--palette-text-heading);
  --dg-text-secondary: var(--palette-text-body);
  --dg-text-muted: var(--palette-text-muted);
  --dg-card-shadow: var(--palette-shadow-floating);
  --dg-sidebar-start: var(--palette-sidebar-top);
  --dg-sidebar-mid: var(--palette-sidebar-base);
  --dg-sidebar-end: var(--palette-sidebar-bottom);
  --dg-orange-active: linear-gradient(
    180deg,
    #ffece5 0%,
    #ffccbc 12%,
    #ffab91 28%,
    var(--palette-accent-orange) 52%,
    var(--palette-accent-orange-strong) 100%
  );
  --dg-orange-btn: linear-gradient(
    135deg,
    var(--palette-accent-orange-soft) 0%,
    var(--palette-accent-orange) 45%,
    var(--palette-accent-orange-strong) 100%
  );
  --dg-orange-glow: 0 12px 24px rgba(255, 112, 67, 0.28);
  --pwa-color-accent: #e64a19;
  --pwa-color-accent-strong: #df2c05;
  --pwa-color-accent-soft: #ff6b3d;
  --pwa-color-accent-on: #ffffff;
  --pwa-color-bg-page: #f5f5f7;
  --pwa-color-bg-card: #ffffff;
  --pwa-color-bg-input: #ececf0;
  --pwa-color-bg-chip-inactive: #ececf0;
  --pwa-color-header: #0d0d1a;
  --pwa-color-nav: #0d0d1a;
  --pwa-color-nav-active-glow: rgba(230, 74, 25, 0.45);
  --pwa-color-text-primary: #1a1a1a;
  --pwa-color-text-secondary: #8e8e93;
  --pwa-color-text-on-dark: #ffffff;
  --pwa-color-border-subtle: rgba(13, 13, 26, 0.08);
  --pwa-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pwa-font-weight-regular: 400;
  --pwa-font-weight-medium: 500;
  --pwa-font-weight-semibold: 600;
  --pwa-font-weight-bold: 700;
  --pwa-font-size-caption: 0.75rem;
  --pwa-font-size-body: 0.9375rem;
  --pwa-font-size-title: 1.125rem;
  --pwa-font-size-headline: 1.375rem;
  --pwa-line-tight: 1.25;
  --pwa-line-body: 1.45;
  --pwa-space-1: 0.25rem;
  --pwa-space-2: 0.5rem;
  --pwa-space-3: 0.75rem;
  --pwa-space-4: 1rem;
  --pwa-space-5: 1.25rem;
  --pwa-space-6: 1.5rem;
  --pwa-space-8: 2rem;
  --palette-space-1: var(--pwa-space-1);
  --palette-space-2: var(--pwa-space-2);
  --palette-space-3: var(--pwa-space-3);
  --palette-space-4: var(--pwa-space-4);
  --palette-space-5: var(--pwa-space-5);
  --palette-space-6: var(--pwa-space-6);
  --palette-space-8: var(--pwa-space-8);
  --pwa-radius-card: 1.5rem;
  --pwa-radius-control: 0.75rem;
  --pwa-radius-control-lg: 1rem;
  --pwa-radius-header-bottom: 1.25rem;
  --pwa-shadow-card: 0 4px 24px rgba(13, 13, 26, 0.06);
  --pwa-shadow-accent: 0 8px 24px rgba(230, 74, 25, 0.28);
}

@media (max-width: 1280px) {
  :root {
    --palette-viewport-inset: 28px;
  }
}