/* ════════════════════════════════════════════════════════════════════
   eLunch Ops · Design Tokens v2.0
   ────────────────────────────────────────────────────────────────────
   Cambios respecto a v1:
   - Tokens nuevos: --input-bg, --input-border, --input-fg, --input-placeholder
   - Tokens nuevos: --chart-grid, --chart-axis, --chart-tooltip-bg
   - Tokens nuevos: --table-header-bg, --table-row-hover, --table-stripe
   - Tokens nuevos: --btn-* explícitos para cada variante
   - Sombras en dark más sutiles (0.25 en vez de 0.5)
   - --bg en dark más cálido (#0E0E13) y --card un punto más claro
   - Densidad COMPACTA por default (lo que pediste)
   - Cubre estados focus, disabled, placeholder
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Brand ─────────────────────────────────────────────── */
  --orange:        #E8703A;
  --orange-dark:   #C05A28;
  --orange-darker: #9F4920;
  --orange-soft:   rgba(232,112,58,0.10);
  --orange-tint:   rgba(232,112,58,0.05);
  --orange-ring:   rgba(232,112,58,0.25);

  /* ─── Semánticos ────────────────────────────────────────── */
  --green:        #16A34A;
  --green-soft:   rgba(22,163,74,0.10);
  --blue:         #2563EB;
  --blue-soft:    rgba(37,99,235,0.10);
  --red:          #DC2626;
  --red-soft:     rgba(220,38,38,0.10);
  --amber:        #C2410C;
  --amber-soft:   rgba(194,65,12,0.10);
  --purple:       #7C3AED;
  --purple-soft:  rgba(124,58,237,0.10);
  --teal:         #0D9488;
  --teal-soft:    rgba(13,148,136,0.10);

  /* ─── Light theme: superficies ─────────────────────────── */
  --bg:        #F4F2EE;        /* warm off-white app background */
  --bg-2:      #FAF8F5;        /* secondary surfaces (search, table headers) */
  --card:      #FFFFFF;        /* cards & main panels */
  --card-2:    #FBFAF7;        /* nested cards / sub-cards */
  --overlay:   rgba(15,15,20,0.45);  /* modal scrim */

  /* ─── Light theme: texto ───────────────────────────────── */
  --ink:       #1A1A21;        /* primary */
  --ink-2:     #45454F;        /* secondary */
  --ink-3:     #82828E;        /* tertiary / placeholders */
  --ink-4:     #B8B8C0;        /* disabled / muted */

  /* ─── Light theme: divisores ──────────────────────────── */
  --line:      rgba(15,15,25,0.08);
  --line-2:    rgba(15,15,25,0.05);
  --line-3:    rgba(15,15,25,0.03);

  /* ─── Light theme: estados ─────────────────────────────── */
  --hover:     rgba(232,112,58,0.05);
  --selected:  rgba(232,112,58,0.08);
  --focus-ring: 0 0 0 3px var(--orange-ring);

  /* ─── Light theme: sombras ─────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(15,15,25,0.04);
  --shadow-sm: 0 1px 3px rgba(15,15,25,0.05), 0 1px 2px rgba(15,15,25,0.03);
  --shadow-md: 0 4px 12px rgba(15,15,25,0.06), 0 1px 3px rgba(15,15,25,0.04);
  --shadow-lg: 0 12px 32px rgba(15,15,25,0.10), 0 4px 12px rgba(15,15,25,0.06);

  /* ─── Sidebar (siempre oscuro en light, más profundo en dark) ── */
  --side-bg:    #18181F;
  --side-bg-2:  #22222B;
  --side-bg-3:  #2C2C36;       /* hover state distinct from active */
  --side-ink:   rgba(255,255,255,0.65);
  --side-ink-2: rgba(255,255,255,0.92);
  --side-mute:  rgba(255,255,255,0.32);
  --side-line:  rgba(255,255,255,0.07);

  /* ─── Inputs ──────────────────────────────────────────── */
  --input-bg:           #FFFFFF;
  --input-bg-disabled:  #F4F2EE;
  --input-border:       rgba(15,15,25,0.12);
  --input-border-hover: rgba(15,15,25,0.20);
  --input-border-focus: var(--orange);
  --input-fg:           var(--ink);
  --input-placeholder:  var(--ink-3);

  /* ─── Tablas ──────────────────────────────────────────── */
  --table-header-bg:   var(--bg-2);
  --table-header-fg:   var(--ink-3);
  --table-row-hover:   var(--orange-tint);
  --table-stripe:      transparent;
  --table-divider:     var(--line-2);

  /* ─── Botones ─────────────────────────────────────────── */
  --btn-primary-bg:    var(--orange);
  --btn-primary-fg:    #FFFFFF;
  --btn-primary-hover: var(--orange-dark);
  --btn-ghost-bg:      transparent;
  --btn-ghost-fg:      var(--ink-2);
  --btn-ghost-border:  var(--line);
  --btn-ghost-hover:   var(--bg-2);
  --btn-soft-bg:       var(--bg-2);
  --btn-soft-fg:       var(--ink);

  /* ─── Charts (Chart.js) ───────────────────────────────── */
  --chart-grid:        rgba(15,15,25,0.06);
  --chart-axis:        var(--ink-3);
  --chart-tooltip-bg:  #1A1A22;
  --chart-tooltip-fg:  #FFFFFF;
  --chart-tooltip-border: rgba(255,255,255,0.08);
  --chart-1: #E8703A;
  --chart-2: #2563EB;
  --chart-3: #16A34A;
  --chart-4: #7C3AED;
  --chart-5: #0D9488;
  --chart-6: #C2410C;
  --chart-7: #DB2777;

  /* ─── Pills de estado de cotizaciones ─────────────────── */
  --pill-borrador-bg:#E8E8EC;  --pill-borrador-fg:#52525B;
  --pill-enviada-bg:#DBEAFE;   --pill-enviada-fg:#1D4ED8;
  --pill-aceptada-bg:#DCFCE7;  --pill-aceptada-fg:#15803D;
  --pill-rechazada-bg:#FEE2E2; --pill-rechazada-fg:#B91C1C;
  --pill-expirada-bg:#FFEDD5;  --pill-expirada-fg:#C2410C;
  --pill-convertida-bg:#EDE9FE;--pill-convertida-fg:#6D28D9;

  /* ─── Pills de estado de eventos ─────────────────────── */
  --pill-programado-bg:#DBEAFE;     --pill-programado-fg:#1D4ED8;
  --pill-produccion-bg:#FEF3C7;     --pill-produccion-fg:#A16207;
  --pill-completado-bg:#DCFCE7;     --pill-completado-fg:#15803D;
  --pill-cancelado-bg:#FEE2E2;      --pill-cancelado-fg:#B91C1C;

  /* ─── Tipografía ──────────────────────────────────────── */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-9:  9px;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-38: 38px;

  /* ─── Densidad (COMPACTA por default) ─────────────────── */
  --row-pad-y:   8px;
  --row-pad-x:   14px;
  --card-pad:    14px 16px;
  --section-gap: 14px;
  --kpi-pad:     14px 16px;
  --font-base:   12.5px;
  --line-height: 1.45;

  /* ─── Radio ───────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ─── Layout ──────────────────────────────────────────── */
  --side-w-expanded: 232px;
  --side-w-collapsed: 64px;
  --topbar-h: 56px;

  /* ─── Transiciones ────────────────────────────────────── */
  --tx-fast: 120ms cubic-bezier(.4,0,.2,1);
  --tx-base: 200ms cubic-bezier(.4,0,.2,1);
  --tx-slow: 320ms cubic-bezier(.4,0,.2,1);
}

/* ════════════════════════════════════════════════════════════════════
   DARK THEME · sobrescribe TODOS los tokens neutros y de superficie
   ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:        #0E0E13;
  --bg-2:      #16161D;
  --card:      #1A1A22;
  --card-2:    #22222B;
  --overlay:   rgba(0,0,0,0.65);

  --ink:       #F2F2F5;
  --ink-2:     #C5C5D0;
  --ink-3:     #888894;
  --ink-4:     #4A4A55;

  --line:      rgba(255,255,255,0.08);
  --line-2:    rgba(255,255,255,0.05);
  --line-3:    rgba(255,255,255,0.03);

  --hover:     rgba(232,112,58,0.10);
  --selected:  rgba(232,112,58,0.14);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.20);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.25);

  --side-bg:    #08080C;
  --side-bg-2:  #14141B;
  --side-bg-3:  #1E1E27;
  --side-ink:   rgba(255,255,255,0.62);
  --side-ink-2: rgba(255,255,255,0.94);
  --side-mute:  rgba(255,255,255,0.30);
  --side-line:  rgba(255,255,255,0.06);

  /* INPUTS — el bug grande del v1 */
  --input-bg:           #16161D;
  --input-bg-disabled:  #0E0E13;
  --input-border:       rgba(255,255,255,0.10);
  --input-border-hover: rgba(255,255,255,0.18);
  --input-fg:           var(--ink);
  --input-placeholder:  var(--ink-3);

  /* TABLAS — el header ya no es blanco fuerte */
  --table-header-bg:   #14141B;
  --table-header-fg:   var(--ink-3);
  --table-row-hover:   rgba(232,112,58,0.08);
  --table-divider:     var(--line-2);

  /* BOTONES */
  --btn-ghost-fg:      var(--ink-2);
  --btn-ghost-border:  var(--line);
  --btn-ghost-hover:   var(--bg-2);
  --btn-soft-bg:       var(--bg-2);
  --btn-soft-fg:       var(--ink);

  /* CHARTS — fix crítico del bug "gráficos espantosos" */
  --chart-grid:        rgba(255,255,255,0.06);
  --chart-axis:        #888894;
  --chart-tooltip-bg:  #2C2C36;
  --chart-tooltip-fg:  #F2F2F5;
  --chart-tooltip-border: rgba(255,255,255,0.10);

  --orange-soft: rgba(232,112,58,0.18);
  --orange-tint: rgba(232,112,58,0.08);
  --orange-ring: rgba(232,112,58,0.35);

  /* PILLS — opacidades sutilmente más altas para legibilidad */
  --pill-borrador-bg:rgba(255,255,255,0.08);          --pill-borrador-fg:#A8A8B5;
  --pill-enviada-bg:rgba(37,99,235,0.18);             --pill-enviada-fg:#93B5FF;
  --pill-aceptada-bg:rgba(22,163,74,0.18);            --pill-aceptada-fg:#86EFAC;
  --pill-rechazada-bg:rgba(220,38,38,0.18);           --pill-rechazada-fg:#FCA5A5;
  --pill-expirada-bg:rgba(194,65,12,0.18);            --pill-expirada-fg:#FDBA74;
  --pill-convertida-bg:rgba(124,58,237,0.18);         --pill-convertida-fg:#C4B5FD;

  --pill-programado-bg:rgba(37,99,235,0.18);          --pill-programado-fg:#93B5FF;
  --pill-produccion-bg:rgba(217,119,6,0.20);          --pill-produccion-fg:#FCD34D;
  --pill-completado-bg:rgba(22,163,74,0.18);          --pill-completado-fg:#86EFAC;
  --pill-cancelado-bg:rgba(220,38,38,0.18);           --pill-cancelado-fg:#FCA5A5;
}

/* ════════════════════════════════════════════════════════════════════
   DENSITY · CÓMODA (override del default que es compacto)
   ════════════════════════════════════════════════════════════════════ */
[data-density="comfy"] {
  --row-pad-y:   12px;
  --row-pad-x:   18px;
  --card-pad:    18px 20px;
  --section-gap: 20px;
  --kpi-pad:     18px 20px;
  --font-base:   13.5px;
}

/* ════════════════════════════════════════════════════════════════════
   BASE · reset + tipografía global
   ════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
[data-theme="dark"] html, html[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--font-base);
  line-height: var(--line-height);
  transition: background var(--tx-base), color var(--tx-base);
}

button { font-family: inherit; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--orange-soft); color: var(--ink); }

/* ─── Scrollbar — sutil, themed ──────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ink-3);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* ─── Utilities ─────────────────────────────────────── */
.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* ─── Dashboard 2.0 ─────────────────────────────────── */
.kpi-delta {
  font-size: var(--fs-11);
  margin-top: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.kpi-delta--up   { color: #047857; font-weight: 600; }
.kpi-delta--down { color: #B91C1C; font-weight: 600; }

.periodo-selector {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}
.periodo-btn {
  border: 0;
  background: transparent;
  color: var(--ink-3, #94A3B8);
  padding: 6px 14px;
  font-size: var(--fs-12, 12px);
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
  letter-spacing: 0.01em;
}
.periodo-btn:hover {
  color: var(--ink-1, #fff);
  background: rgba(255, 255, 255, 0.04);
}
.periodo-btn.is-active {
  background: var(--orange, #FF6B00);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(255, 107, 0, 0.35);
}

.sparkline-wrap {
  width: 100%;
  height: 60px;
}

.accion-item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.accion-item:hover { background: var(--surface-2, rgba(0,0,0,.02)); }
.accion-item:last-child { border-bottom: 0; }
.accion-item.crit .accion-num { color: #B91C1C; }
.accion-item.warn .accion-num { color: #B45309; }
.accion-item.info .accion-num { color: var(--ink-3); }

.actividad-item:hover { background: var(--surface-2, rgba(0,0,0,.02)); }
.actividad-item:last-child { border-bottom: 0 !important; }

.alerta-prioridad-critica { border-left: 3px solid #B91C1C; }
.alerta-prioridad-alta    { border-left: 3px solid #F59E0B; }
.alerta-prioridad-media   { border-left: 3px solid #3B82F6; }
.alerta-prioridad-baja    { border-left: 3px solid var(--ink-3); }
.alerta-prioridad-info    { border-left: 3px solid var(--ink-3); }

.pipeline-row {
  align-items: stretch;
}
.pipeline-card {
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.pipeline-card:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.04) !important;
}
@media (max-width: 720px) {
  .pipeline-row {
    flex-direction: column;
    gap: 8px !important;
  }
  .pipeline-arrow {
    flex-direction: row !important;
    padding: 4px 0 !important;
  }
  .pipeline-arrow svg {
    transform: rotate(90deg);
    margin-top: 0 !important;
    margin-left: 8px;
  }
}

/* ─── Reportes 2.0 ───────────────────────────────────── */
.reportes-filterbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.06));
}
.reportes-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--section-gap, 16px);
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}
.reportes-tab {
  border: 0;
  background: transparent;
  color: var(--ink-3, #94A3B8);
  padding: 10px 18px;
  font-size: var(--fs-13, 13px);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.18s ease;
  letter-spacing: 0.01em;
}
.reportes-tab:hover {
  color: var(--ink-1, #fff);
  background: rgba(255, 255, 255, 0.03);
}
.reportes-tab.is-active {
  color: var(--orange, #FF6B00);
  border-bottom-color: var(--orange, #FF6B00);
  font-weight: 600;
}

/* Grid de 6 KPIs (responsive) */
.kpi-grid-6 {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 1200px) {
  .kpi-grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .kpi-grid-6 { grid-template-columns: repeat(2, 1fr); }
}