/* =========================================================================
   NUBLAR DESIGN SYSTEM · TOKENS
   v1.1 · 2026-10
   -------------------------------------------------------------------------
   Fuente única de verdad para color, tipografía, espaciado, radios,
   sombras, glass, motion y z-index.
   Prefijo de variables: --nb-*
   Tema: claro por defecto, oscuro con [data-theme="dark"] en <html>
         o automático con [data-theme="auto"] (sigue al sistema).
   Colores de marca extraídos de la app actual:
     teal  #55c6bb · ink #002825 · magenta #ff3366 · fondo #f4f6f6
   ========================================================================= */

:root {
  /* ---------- Marca (no cambian entre temas) ---------- */
  --nb-brand-teal: #55c6bb;
  --nb-brand-teal-600: #2fae9f;
  --nb-brand-teal-700: #1d8a7e;
  --nb-brand-teal-800: #136a61;
  --nb-brand-ink: #002825;
  --nb-brand-magenta: #ff3366;

  /* ---------- Tipografía ---------- */
  /* Fuente de marca: Roobert (ya autoalojada en /fonts del proyecto, pesos
     300/400/700). Se añade Roobert Medium 500 como recomendado; si no existe,
     el navegador sintetiza desde 400/700. Satoshi es el fallback libre más cercano. */
  --nb-font-sans: "Roobert", "Satoshi", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --nb-text-2xs: 0.6875rem;  /* 11px  · etiquetas mínimas */
  --nb-text-xs:  0.75rem;    /* 12px  · metadatos, cabecera de tabla */
  --nb-text-sm:  0.8125rem;  /* 13px  · celdas de tabla, ayuda */
  --nb-text-base:0.875rem;   /* 14px  · cuerpo por defecto de la app */
  --nb-text-md:  1rem;       /* 16px  · títulos de card */
  --nb-text-lg:  1.25rem;    /* 20px  · títulos de sección */
  --nb-text-xl:  1.5rem;     /* 24px  · título de página */
  --nb-text-2xl: 2rem;       /* 32px  · KPI */
  --nb-text-3xl: 2.5rem;     /* 40px  · KPI destacado */

  --nb-weight-regular: 400;
  --nb-weight-medium: 500;
  --nb-weight-bold: 700;

  --nb-leading-tight: 1.15;
  --nb-leading-snug: 1.35;
  --nb-leading-normal: 1.5;

  --nb-tracking-tight: -0.02em;
  --nb-tracking-normal: 0;
  --nb-tracking-wide: 0.04em;

  /* ---------- Espaciado (base 4px) ---------- */
  --nb-space-0: 0;
  --nb-space-1: 0.25rem;  /* 4  */
  --nb-space-2: 0.5rem;   /* 8  */
  --nb-space-3: 0.75rem;  /* 12 */
  --nb-space-4: 1rem;     /* 16 */
  --nb-space-5: 1.25rem;  /* 20 */
  --nb-space-6: 1.5rem;   /* 24 */
  --nb-space-8: 2rem;     /* 32 */
  --nb-space-10: 2.5rem;  /* 40 */
  --nb-space-12: 3rem;    /* 48 */
  --nb-space-16: 4rem;    /* 64 */

  /* ---------- Radios (regla única) ----------
     controles (botón, input, select): 10px
     cards y paneles: 16px
     estados, chips, contadores: pill            */
  --nb-radius-xs: 6px;
  --nb-radius-sm: 10px;
  --nb-radius-md: 16px;
  --nb-radius-lg: 22px;
  --nb-radius-pill: 999px;

  /* ---------- Layout ---------- */
  --nb-sidebar-w: 264px;
  --nb-sidebar-w-collapsed: 76px;
  --nb-topbar-h: 64px;
  --nb-content-max: 1600px;
  --nb-gutter: var(--nb-space-6);
  --nb-control-h: 40px;
  --nb-control-h-sm: 32px;
  --nb-control-h-lg: 48px;

  /* ---------- Motion ---------- */
  --nb-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --nb-dur-fast: 120ms;
  --nb-dur: 200ms;
  --nb-dur-slow: 360ms;

  /* ---------- Z-index (escala cerrada, no usar valores sueltos) ---------- */
  --nb-z-base: 1;
  --nb-z-sticky: 100;
  --nb-z-sidebar: 200;
  --nb-z-topbar: 300;
  --nb-z-dropdown: 1000;
  --nb-z-backdrop: 1040;
  --nb-z-modal: 1050;
  --nb-z-layer: 1060;
  --nb-z-palette: 1100;
  --nb-z-toast: 1200;
}

/* =========================================================================
   TEMA CLARO (por defecto)
   ========================================================================= */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Superficies */
  --nb-bg: #f2f5f4;
  --nb-bg-ambient-1: rgba(85, 198, 187, 0.20);   /* blob teal  */
  --nb-bg-ambient-2: rgba(120, 160, 230, 0.12);  /* blob azul frío */
  --nb-bg-ambient-3: rgba(85, 198, 187, 0.10);
  --nb-surface: #ffffff;           /* datos densos: tablas, formularios */
  --nb-surface-2: #f7f9f9;         /* cabecera de tabla, zonas hundidas */
  --nb-surface-3: #eef2f1;         /* hover, segmentados */
  --nb-surface-inverse: #002825;

  /* Glass (solo chasis: sidebar, topbar, KPIs, modales) */
  --nb-glass-bg: rgba(255, 255, 255, 0.62);
  --nb-glass-bg-strong: rgba(255, 255, 255, 0.82);
  --nb-glass-bg-solid: rgba(255, 255, 255, 0.95);   /* menús flotantes sobre contenido */
  --nb-glass-border: rgba(255, 255, 255, 0.75);
  --nb-glass-edge: rgba(0, 40, 37, 0.06);
  --nb-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --nb-glass-blur: 20px;
  --nb-glass-saturate: 160%;

  /* Bordes */
  --nb-border: #e2e8e7;
  --nb-border-strong: #cdd6d4;
  --nb-border-subtle: #edf1f0;

  /* Texto */
  --nb-text: #002825;              /* ink de marca */
  --nb-text-2: #3f5653;            /* secundario */
  --nb-text-3: #6b7f7c;            /* terciario / placeholders (4.6:1 sobre blanco) */
  --nb-text-disabled: #a3b1af;
  --nb-text-on-accent: #002825;    /* texto sobre teal: ink, no blanco */
  --nb-text-on-inverse: #ffffff;

  /* Acento (teal de marca) */
  --nb-accent: #55c6bb;
  --nb-accent-hover: #45b8ac;
  --nb-accent-active: #36a597;
  --nb-accent-strong: #1d8a7e;     /* texto/iconos teal sobre blanco (4.5:1) */
  --nb-accent-soft: rgba(85, 198, 187, 0.14);
  --nb-accent-soft-2: rgba(85, 198, 187, 0.24);
  --nb-focus-ring: 0 0 0 3px rgba(85, 198, 187, 0.45);

  /* Semánticos (fg = texto, bg = fondo suave, solid = relleno) */
  --nb-success-fg: #127356;
  --nb-success-bg: #e3f6ee;
  --nb-success-solid: #1fa67a;

  --nb-warning-fg: #8a5a00;
  --nb-warning-bg: #fff3d6;
  --nb-warning-solid: #f2a900;

  --nb-danger-fg: #c4103f;
  --nb-danger-bg: #ffe8ee;
  --nb-danger-solid: #ff3366;      /* magenta de marca = negativo/vencido */

  --nb-info-fg: #2557b8;
  --nb-info-bg: #e6eefc;
  --nb-info-solid: #3b74e0;

  --nb-neutral-fg: #3f5653;
  --nb-neutral-bg: #edf1f0;

  /* Sombras (tintadas con el ink, nunca negro puro) */
  --nb-shadow-xs: 0 1px 2px rgba(0, 40, 37, 0.05);
  --nb-shadow-sm: 0 1px 2px rgba(0, 40, 37, 0.04), 0 2px 8px rgba(0, 40, 37, 0.04);
  --nb-shadow-md: 0 2px 4px rgba(0, 40, 37, 0.04), 0 8px 24px rgba(0, 40, 37, 0.07);
  --nb-shadow-lg: 0 4px 12px rgba(0, 40, 37, 0.06), 0 24px 56px rgba(0, 40, 37, 0.12);

  /* Gráficas · paleta categórica VALIDADA (lightness, croma, daltonismo y visión normal)
     en claro y oscuro con validate_palette.js. Orden fijo: la serie 1 siempre es la 1.
     Ventas = 1 · Compras = 4 · Gastos = 3 en todas las gráficas (el color sigue a la entidad). */
  --nb-chart-1: #26a596;   /* teal (marca)   · Ventas */
  --nb-chart-2: #a35cc8;   /* ciruela */
  --nb-chart-3: #e5566a;   /* coral          · Gastos */
  --nb-chart-4: #5a6fe0;   /* índigo         · Compras */
  --nb-chart-5: #b88010;   /* ámbar */
  --nb-chart-6: #3d8bd4;   /* azul */
  --nb-chart-ink: #002825; /* línea de referencia (Diferencia, medias) */
  --nb-chart-area-top: 0.26;     /* opacidad del degradado de área arriba */
  --nb-chart-grid: #e8eeed;
  --nb-chart-axis: #6b7f7c;

  /* Scrollbar */
  --nb-scroll-thumb: rgba(0, 40, 37, 0.18);
  --nb-scroll-thumb-hover: rgba(0, 40, 37, 0.32);
}

/* =========================================================================
   TEMA OSCURO
   ========================================================================= */
[data-theme="dark"] {
  color-scheme: dark;

  --nb-bg: #061312;
  --nb-bg-ambient-1: rgba(85, 198, 187, 0.16);
  --nb-bg-ambient-2: rgba(90, 120, 220, 0.10);
  --nb-bg-ambient-3: rgba(85, 198, 187, 0.08);
  --nb-surface: #0c1d1b;
  --nb-surface-2: #102422;
  --nb-surface-3: #162e2b;
  --nb-surface-inverse: #e8f2f0;

  --nb-glass-bg: rgba(14, 32, 30, 0.58);
  --nb-glass-bg-strong: rgba(14, 32, 30, 0.82);
  --nb-glass-bg-solid: rgba(12, 29, 27, 0.95);
  --nb-glass-border: rgba(255, 255, 255, 0.08);
  --nb-glass-edge: rgba(255, 255, 255, 0.04);
  --nb-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --nb-border: #1d3532;
  --nb-border-strong: #2a4642;
  --nb-border-subtle: #152a27;

  --nb-text: #e6f0ee;
  --nb-text-2: #a9bdb9;
  --nb-text-3: #7f9592;
  --nb-text-disabled: #4c625f;
  --nb-text-on-accent: #002825;
  --nb-text-on-inverse: #002825;

  --nb-accent: #55c6bb;
  --nb-accent-hover: #6ad1c7;
  --nb-accent-active: #7fdad1;
  --nb-accent-strong: #6ad1c7;
  --nb-accent-soft: rgba(85, 198, 187, 0.14);
  --nb-accent-soft-2: rgba(85, 198, 187, 0.24);
  --nb-focus-ring: 0 0 0 3px rgba(85, 198, 187, 0.4);

  --nb-success-fg: #5fd8ac;
  --nb-success-bg: rgba(31, 166, 122, 0.16);
  --nb-success-solid: #1fa67a;

  --nb-warning-fg: #ffcb5c;
  --nb-warning-bg: rgba(242, 169, 0, 0.14);
  --nb-warning-solid: #f2a900;

  --nb-danger-fg: #ff7a98;
  --nb-danger-bg: rgba(255, 51, 102, 0.15);
  --nb-danger-solid: #ff3366;

  --nb-info-fg: #8fb2ff;
  --nb-info-bg: rgba(59, 116, 224, 0.16);
  --nb-info-solid: #3b74e0;

  --nb-neutral-fg: #a9bdb9;
  --nb-neutral-bg: #162e2b;

  --nb-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --nb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  --nb-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --nb-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.5);

  --nb-chart-1: #26a596;
  --nb-chart-2: #a35cc8;
  --nb-chart-3: #e5566a;
  --nb-chart-4: #5a6fe0;
  --nb-chart-5: #b88010;
  --nb-chart-6: #3d8bd4;
  --nb-chart-ink: #e6f0ee;
  --nb-chart-area-top: 0.32;
  --nb-chart-grid: #17302d;
  --nb-chart-axis: #7f9592;

  --nb-scroll-thumb: rgba(255, 255, 255, 0.14);
  --nb-scroll-thumb-hover: rgba(255, 255, 255, 0.26);
}

/* Tema automático: oscuro si el sistema lo pide */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
    --nb-bg: #061312;
    --nb-bg-ambient-1: rgba(85, 198, 187, 0.16);
    --nb-bg-ambient-2: rgba(90, 120, 220, 0.10);
    --nb-bg-ambient-3: rgba(85, 198, 187, 0.08);
    --nb-surface: #0c1d1b;
    --nb-surface-2: #102422;
    --nb-surface-3: #162e2b;
    --nb-surface-inverse: #e8f2f0;
    --nb-glass-bg: rgba(14, 32, 30, 0.58);
    --nb-glass-bg-strong: rgba(14, 32, 30, 0.82);
  --nb-glass-bg-solid: rgba(12, 29, 27, 0.95);
    --nb-glass-border: rgba(255, 255, 255, 0.08);
    --nb-glass-edge: rgba(255, 255, 255, 0.04);
    --nb-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --nb-border: #1d3532;
    --nb-border-strong: #2a4642;
    --nb-border-subtle: #152a27;
    --nb-text: #e6f0ee;
    --nb-text-2: #a9bdb9;
    --nb-text-3: #7f9592;
    --nb-text-disabled: #4c625f;
    --nb-text-on-inverse: #002825;
    --nb-accent-hover: #6ad1c7;
    --nb-accent-active: #7fdad1;
    --nb-accent-strong: #6ad1c7;
    --nb-success-fg: #5fd8ac;
    --nb-success-bg: rgba(31, 166, 122, 0.16);
    --nb-warning-fg: #ffcb5c;
    --nb-warning-bg: rgba(242, 169, 0, 0.14);
    --nb-danger-fg: #ff7a98;
    --nb-danger-bg: rgba(255, 51, 102, 0.15);
    --nb-info-fg: #8fb2ff;
    --nb-info-bg: rgba(59, 116, 224, 0.16);
    --nb-neutral-fg: #a9bdb9;
    --nb-neutral-bg: #162e2b;
    --nb-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --nb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
    --nb-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    --nb-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.5);
    --nb-chart-ink: #e6f0ee;
    --nb-chart-area-top: 0.32;
    --nb-chart-grid: #17302d;
    --nb-chart-axis: #7f9592;
    --nb-scroll-thumb: rgba(255, 255, 255, 0.14);
    --nb-scroll-thumb-hover: rgba(255, 255, 255, 0.26);
  }
}

/* Layout móvil: topbar más baja */
@media (max-width: 991.98px) {
  :root { --nb-topbar-h: 56px; --nb-gutter: var(--nb-space-4); }
}

/* Accesibilidad: sin transparencias si el usuario lo pide */
@media (prefers-reduced-transparency: reduce) {
  :root, [data-theme] {
    --nb-glass-bg: var(--nb-surface);
    --nb-glass-bg-strong: var(--nb-surface);
    --nb-glass-bg-solid: var(--nb-surface);
    --nb-glass-blur: 0px;
  }
}

/* Accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  :root {
    --nb-dur-fast: 0ms;
    --nb-dur: 0ms;
    --nb-dur-slow: 0ms;
  }
}