/* Copia: MIRESTIAIA/styles/tokens.css — variables globales (--color-*, --space-*, etc.) */

/* ── Canonical brand orange — fuente única de verdad ──────────────────
   Todos los sistemas (--color-*, --palette-*, --pwa-*, --dg-*) derivan
   de estos tres valores. Para cambiar el color de marca: solo aquí.
   Spec: CLAUDE.md + UI.DELSISTEMA.pen frame "1920w default"
   ──────────────────────────────────────────────────────────────────── */
:root {
  --brand-orange:       #ef520f;   /* primario sólido */
  --brand-orange-dark:  #df2c05;   /* dark / strong */
  --brand-orange-light: #ff7043;   /* muted / hover background */
  --brand-orange-soft:  #ff8a65;   /* very soft / disabled states */
}

:root {
  color-scheme: light;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-sans: var(--font-body);
  --font-pwa: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --color-primary-400: var(--brand-orange-light);
  --color-primary-500: var(--brand-orange);
  --color-primary-gradient: linear-gradient(135deg, var(--brand-orange-light), var(--brand-orange));
  /* Gradiente de marca canónico (orange → dark) — botones/CTAs/iconos. Spec: CLAUDE.md "Orange: #ef520f → #df2c05" */
  --gradient-brand: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  /* Gradiente rico 4-stop del botón de login (CTA premium con shimmer). Fuente: views/login.ejs --orange-grad */
  --gradient-brand-rich: linear-gradient(135deg, #fdb75e 0%, #fd9931 16%, #ef520f 58%, #df2c05 100%);
  --shadow-brand-glow: 0 10px 22px -8px rgba(239, 82, 15, 0.55);
  --shadow-brand-glow-hover: 0 14px 28px -8px rgba(239, 82, 15, 0.62);
  --color-nav-900: #15192c;
  --color-nav-950: #0f1324;

  --color-bg: #F0F2F8;
  --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: var(--brand-orange);
  --color-accent-dark: var(--brand-orange-dark);
  --color-accent-soft: rgba(239, 82, 15, 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;

  /* ── Motion — fuente única de duración y easing ───────────────────────
     Valores derivados de la auditoría (los más usados en el código real).
     Usar siempre estos tokens; prohibido hardcodear ms/cubic-bezier nuevos.
     ───────────────────────────────────────────────────────────────────── */
  --duration-fast: 150ms;   /* micro: inputs, hover de botón */
  --duration-base: 200ms;   /* default: la mayoría de transiciones */
  --duration-slow: 300ms;   /* paneles, cards, cambios grandes */

  --ease-suave:   cubic-bezier(0.4, 0, 0.2, 1);    /* Material standard — uso general */
  --ease-entrada: cubic-bezier(0.16, 1, 0.3, 1);   /* easeOutExpo — modales/cards/drawers entrando */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot sutil — sidebar/progress */
  --ease-salida:  ease;                            /* default genérico (dominante histórico) */

  --transition-base: var(--duration-base) var(--ease-salida);
  --transition-fast: var(--duration-fast) var(--ease-suave);
  --transition-slow: var(--duration-slow) var(--ease-suave);

  /* 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;

  /* Desktop shell gradient atoms — fuente única para layout.css */
  --mr-sidebar-gradient:         linear-gradient(180deg, #231e34 0%, #1a1828 42%, #12121c 100%);
  --mr-topbar-gradient:          linear-gradient(180deg, #252238 0%, #16151f 100%);
  --mr-nav-btn-gradient:         linear-gradient(180deg, #2a263c 0%, #1c1a28 100%);
  --mr-sidebar-active-gradient:  linear-gradient(270deg, #FEFBF5 0%, #FDB75E 4%, #FD9931 9%, #EF520F 38%, #DF2C05 79%, #E13809 89%, #FBA251 97%, #EE6D2D 100%);
  --mr-amber:                    #fdb75e;   /* golden accent — sub-dot activo, chip tint */

  /*
   * 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: #ef520f;
  --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(239, 82, 15, 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: var(--brand-orange-light);
  --palette-accent-orange-strong: var(--brand-orange-dark);
  --palette-accent-orange-soft: var(--brand-orange-soft);
  --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: var(--brand-orange);
  --pwa-color-accent-strong: var(--brand-orange-dark);
  --pwa-color-accent-soft: var(--brand-orange-light);
  --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(239, 82, 15, 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(239, 82, 15, 0.28);
}

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

/* ─── Breakpoints oficiales ────────────────────────────────────
   PWA shell : ≤ 480px  (--pwa-shell-max-width)
   Tablet    : 481 – 767px
   Desktop   : ≥ 768px  (desktop-layout.ejs, -desktop.ejs)
   Desktop-lg: ≥ 1024px
   Wide      : ≥ 1280px

   Uso en @media:
     PWA intra-shell  →  max-width: 480px
     Desktop compact  →  max-width: 1023px
     Desktop standard →  min-width: 1024px
     Desktop wide     →  min-width: 1280px

   CSS vars para documentación; no usarlos en @media() directamente
   ya que CSS no soporta var() en media queries.
   ───────────────────────────────────────────────────────────── */
:root {
  --bp-pwa:        480px;
  --bp-tablet:     768px;
  --bp-desktop:   1024px;
  --bp-desktop-lg: 1280px;
}

/* ─────────────────────────────────────────────────────────────
   PWA Layout tokens — fuente única de verdad para shell,
   header y bottom-nav. Cambiar aquí afecta todos los módulos.
   ───────────────────────────────────────────────────────────── */
:root {
  /* Página — fondo de todas las vistas PWA */
  --pwa-body-bg:          #F0F2F8;

  /* Shell (contenedor página PWA) */
  --pwa-shell-max-width:  480px;
  --pwa-shell-pb:         calc(80px + env(safe-area-inset-bottom, 0px));

  /* Header oscuro superior */
  --pwa-header-min-height:    72px;
  --pwa-header-pt:            calc(env(safe-area-inset-top, 0px) + 18px);
  --pwa-header-px:            16px;
  --pwa-header-pb:            16px;
  --pwa-header-br:            0 0 20px 20px;
  --pwa-header-bg:            linear-gradient(180deg, #10152f 0%, #0a0f24 60%, #090d1d 100%);
  --pwa-header-gap:           12px;
  --pwa-header-shadow:        0 4px 20px rgba(0, 0, 0, 0.22);
  --pwa-header-title-size:    18px;
  --pwa-header-title-weight:  700;
  --pwa-header-sub-size:      12px;
  --pwa-header-avatar-size:   28px;
  --pwa-header-back-size:     36px;
  --pwa-header-chip-px:       10px;
  --pwa-header-chip-py:       5px;

  /* Bottom nav / drawer */
  --pwa-nav-max-width:   480px;
  --pwa-nav-height:      54px;
  --pwa-nav-spacer:      calc(88px + env(safe-area-inset-bottom, 0px));
  --pwa-nav-icon-size:   20px;
  --pwa-nav-label-size:  9px;
  --pwa-nav-br:          28px;
  --pwa-nav-tab-br:      20px;
  --pwa-nav-px:          14px;
  --pwa-nav-pb:          calc(12px + env(safe-area-inset-bottom, 0px));
  --pwa-nav-bg:          linear-gradient(180deg, #1a1d2e 0%, #10152f 55%, #0a0f24 100%);
  --pwa-drawer-br:       24px 24px 0 0;
  --pwa-drawer-bg:       #1a1a2e;

  /* ─── Regla inamovible de contenido PWA ───────────────────────────
   * Derivada del módulo Inicio como referencia visual del proyecto.
   * NO modificar sin actualizar TODAS las vistas PWA en paralelo.
   * ──────────────────────────────────────────────────────────────── */
  --pwa-content-px:      16px;   /* margen horizontal de todo contenedor/card */
  --pwa-content-pt:      20px;   /* separación header → primer contenedor     */
  --pwa-card-gap:        10px;   /* espacio entre cards en grid               */
  --pwa-card-br:         16px;   /* border-radius de todas las cards          */
  --pwa-card-bg:         #ffffff;
  --pwa-card-shadow:     0 2px 8px rgba(10,15,36,0.06);
  --pwa-card-border:     1px solid rgba(15,23,42,0.06);
}

/* Shell global — todos los wrappers PWA comparten este tamaño.
   Añadir clase "pwa-shell" a nuevas vistas; las existentes ya
   usan "shell", "cfg-shell", etc. que son alias aquí. */
.pwa-shell,
.shell,
.cfg-shell,
.app-shell,
.chat-shell {
  max-width: var(--pwa-shell-max-width);
  margin-inline: auto;
  min-height: 100dvh;
  padding-bottom: var(--pwa-shell-pb);
}