/* ============================================================
   OnAxis ERP · Design Tokens  v1.0
   Fuente única de verdad del sistema de diseño.
   Marca: dorado #F5C419 · tinta #16161A · crema cálido
   Tipografías: Archivo (display) · IBM Plex Sans (UI y datos, desde jul-2026)
   Tema: :root = claro · [data-theme="dark"] = oscuro
   ============================================================ */

:root{
  color-scheme: light;

  /* ---------- MARCA ---------- */
  --gold:        #F5C419;   /* dorado OnAxis — botones primarios, acentos */
  --gold-deep:   #E0AE12;   /* hover / bordes activos */
  --gold-soft:   #F7D862;   /* rellenos suaves */
  --gold-ink:    #8A6B00;   /* texto dorado accesible sobre claro (4.8:1) */
  --gold-tint:   rgba(245,196,25,.14);  /* wash de selección / activo */
  --gold-tint-2: rgba(245,196,25,.24);  /* wash intenso / hover de activo */

  /* ---------- SUPERFICIES ---------- */
  --bg-0:      #F7F5F0;   /* lienzo de la app (fondo de contenido) */
  --bg-1:      #FFFFFF;   /* superficie elevada base */
  --panel:     #FBFAF6;   /* tarjetas y paneles */
  --panel-2:   #F1EEE7;   /* panel hundido: toolbars, thead, wells */
  --overlay:   rgba(22,22,26,.44);   /* backdrop de modales */

  /* Sidebar: tinta constante en ambos temas (identidad OnAxis) */
  --side-bg:      #16161A;
  --side-bg-2:    #1F1F24;
  --side-ink:     #F6F5F1;
  --side-muted:   #9A958B;
  --side-line:    rgba(255,255,255,.08);

  /* ---------- TINTA / TEXTO ---------- */
  --ink:       #16161A;   /* texto principal */
  --ink-2:     #3F3D38;   /* texto secundario fuerte */
  --muted:     #55524C;   /* texto secundario */
  --muted-2:   #6E6A61;   /* terciario */
  --dim:       #9A958B;   /* deshabilitado / placeholders */
  --ink-inv:   #F6F5F1;   /* texto sobre tinta */

  /* ---------- LÍNEAS Y BORDES ---------- */
  --line:        rgba(17,16,14,.10);   /* hairline */
  --line-strong: rgba(17,16,14,.22);   /* bordes de inputs */
  --line-focus:  var(--gold-deep);

  /* ---------- SEMÁNTICOS (todos ≥4.2:1 texto sobre superficie) ---------- */
  --success:      #1C8A45;  --success-bg: #E4F3E9;  --success-line: #A8D8B7;
  --warning:      #B45309;  --warning-bg: #FCEFD9;  --warning-line: #EFCB94;
  --danger:       #C2453B;  --danger-bg:  #FBE9E7;  --danger-line:  #EFB6B0;
  --info:         #3870AD;  --info-bg:    #E7F0F9;  --info-line:    #B3CDE8;
  --neutral-bg:   #EDEAE2;  --neutral-line:#D6D1C4;

  /* ---------- GRÁFICOS (validados CVD ΔE≥12 · superficie #FBFAF6) ----------
     Orden fijo de series — nunca se recicla ni reordena.
     s3 y s7 <3:1 de contraste: exigen etiquetas directas o vista tabla. */
  --series-1: #B08000;   /* oro profundo (marca) */
  --series-2: #2A78D6;   /* azul */
  --series-3: #1BAF7A;   /* aqua */
  --series-4: #E34948;   /* rojo */
  --series-5: #4A3AA7;   /* violeta */
  --series-6: #EB6834;   /* naranja */
  --series-7: #E87BA4;   /* magenta */
  --series-8: #008300;   /* verde */
  /* Secuencial (magnitud): rampa oro claro→oscuro */
  --seq-100:#F9EBBB; --seq-200:#F3D97F; --seq-300:#E9C43F;
  --seq-400:#D9A912; --seq-500:#B08000; --seq-600:#8A6B00; --seq-700:#5F4A00;
  /* Divergente: oro ↔ azul, punto medio neutro */
  --div-neg: #2A78D6;  --div-mid: #EDEAE2;  --div-pos: #B08000;
  /* Chrome de gráfico */
  --viz-surface: #FBFAF6;
  --viz-grid:    #E7E3D8;
  --viz-axis:    #C9C3B5;
  --viz-label:   #6E6A61;

  /* ---------- TIPOGRAFÍA ---------- */
  --font-display: "Archivo", system-ui, sans-serif;      /* títulos, KPIs */
  --font-body:    "IBM Plex Sans", system-ui, sans-serif; /* UI general */
  /* Cifras: folios, RFC, importes, etiquetas.
     Desde jul-2026 NO es monoespaciada: se adoptó IBM Plex Sans también aquí (decisión de
     dirección). Los dígitos de Plex Sans miden todos 600/1000, o sea que son tabulares por
     construcción y las columnas de importes siguen alineando; `tabular-nums` se mantiene en
     .u-num/.cell-num como refuerzo. Ojo: su cero es un óvalo liso (sin punto ni diagonal),
     así que 0 y 8 se parecen a 11–12.5 px — compensar con tamaño/peso, no con la fuente. */
  --font-mono:    "IBM Plex Sans", system-ui, sans-serif;

  --fs-caption: .6875rem;   /* 11px  etiquetas mono, metadatos */
  --fs-small:   .78125rem;  /* 12.5px secundario, celdas densas */
  --fs-body:    .84375rem;  /* 13.5px base de la app */
  --fs-emph:    .9375rem;   /* 15px  énfasis, inputs lg */
  --fs-h3:      1.0625rem;  /* 17px  título de sección/card */
  --fs-h2:      1.25rem;    /* 20px  subtítulo de página */
  --fs-h1:      1.5rem;     /* 24px  título de página (Archivo) */
  --fs-kpi:     1.875rem;   /* 30px  cifras KPI (Archivo) */

  --lh-tight: 1.2;
  --lh-body:  1.5;
  --track-label: .13em;     /* tracking de etiquetas mono uppercase */

  /* ---------- ESPACIADO (base 4px) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px;

  /* ---------- CONTROLES ---------- */
  --ctl-h-sm: 28px;   /* denso: toolbars de tabla */
  --ctl-h:    34px;   /* estándar */
  --ctl-h-lg: 42px;   /* formularios amplios / táctil */

  /* ---------- RADIOS ---------- */
  --r-xs: 6px;    /* checks, tags pequeños */
  --r-sm: 8px;    /* inputs, botones */
  --r-md: 12px;   /* tarjetas, dropdowns */
  --r-lg: 16px;   /* modales, paneles grandes */
  --r-pill: 999px;

  /* ---------- SOMBRAS (cálidas, tinta 17,16,14) ---------- */
  --sh-1: 0 1px 2px rgba(17,16,14,.06);
  --sh-2: 0 4px 12px rgba(17,16,14,.08), 0 1px 3px rgba(17,16,14,.06);
  --sh-3: 0 12px 32px rgba(17,16,14,.14), 0 2px 8px rgba(17,16,14,.08);
  --sh-focus: 0 0 0 3px var(--gold-tint-2);

  /* ---------- LAYOUT ---------- */
  --side-w:       248px;
  --side-w-min:   64px;
  --topbar-h:     56px;
  --content-max:  1480px;

  /* ---------- MOVIMIENTO ---------- */
  --t-fast: 120ms cubic-bezier(.2,.7,.2,1);
  --t-med:  200ms cubic-bezier(.2,.7,.2,1);
  --t-slow: 320ms cubic-bezier(.2,.7,.2,1);

  /* ---------- Z-INDEX ---------- */
  --z-sticky: 40; --z-side: 60; --z-drop: 200;
  --z-modal: 400; --z-toast: 600; --z-tip: 800;
}

/* ============================================================
   TEMA OSCURO — mismas variables, valores re-seleccionados
   (no es una inversión automática)
   ============================================================ */
[data-theme="dark"]{
  color-scheme: dark;

  --gold-ink:    #F5C419;                 /* en oscuro el dorado puro es accesible como texto */
  --gold-tint:   rgba(245,196,25,.16);
  --gold-tint-2: rgba(245,196,25,.28);

  --bg-0:      #0C0C0E;
  --bg-1:      #131316;
  --panel:     #161619;
  --panel-2:   #1F1F24;
  --overlay:   rgba(0,0,0,.6);

  --side-bg:    #111114;    /* se distingue apenas del lienzo */
  --side-bg-2:  #1C1C20;

  --ink:       #F6F5F1;
  --ink-2:     #DBD8D0;
  --muted:     #B7B3AB;
  --muted-2:   #928E86;
  --dim:       #6A665E;
  --ink-inv:   #16161A;

  --line:        rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.22);

  --success:      #3EC46A;  --success-bg: rgba(62,196,106,.14);  --success-line: rgba(62,196,106,.35);
  --warning:      #F08A24;  --warning-bg: rgba(240,138,36,.14);  --warning-line: rgba(240,138,36,.35);
  --danger:       #E66767;  --danger-bg:  rgba(230,103,103,.14); --danger-line:  rgba(230,103,103,.35);
  --info:         #5B91CF;  --info-bg:    rgba(91,145,207,.14);  --info-line:    rgba(91,145,207,.35);
  --neutral-bg:   rgba(255,255,255,.08);  --neutral-line: rgba(255,255,255,.18);

  /* Gráficos: pasos re-elegidos para superficie #161619 (todos PASS, ΔE≥16) */
  --series-1: #BC8A00;
  --series-2: #3987E5;
  --series-3: #1BAF7A;
  --series-4: #E66767;
  --series-5: #9085E9;
  --series-6: #D95926;
  --series-7: #D55181;
  --series-8: #008300;
  --seq-100:#3A3110; --seq-200:#5F4A00; --seq-300:#8A6B00;
  --seq-400:#B08000; --seq-500:#D9A912; --seq-600:#E9C43F; --seq-700:#F3D97F;
  --div-neg: #3987E5;  --div-mid: #383835;  --div-pos: #BC8A00;
  --viz-surface: #161619;
  --viz-grid:    #26262B;
  --viz-axis:    #3A3A40;
  --viz-label:   #928E86;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 12px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  --sh-3: 0 12px 32px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --sh-focus: 0 0 0 3px rgba(245,196,25,.30);
}

/* ============================================================
   BASE GLOBAL
   ============================================================ */
*, *::before, *::after{ box-sizing:border-box; }

body{
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

::selection{ background: var(--gold); color:#16161A; }

:focus-visible{
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover{ background: var(--gold-deep); }

/* Iconos del sprite: tamaño por defecto del sistema */
.icon{ width:18px; height:18px; flex:none; stroke-width:1.75; }
.icon--sm{ width:14px; height:14px; }
.icon--lg{ width:24px; height:24px; }

/* Utilidades tipográficas del sistema */
.u-label{
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted-2);
}
.u-num{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.u-display{
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 110%;
  letter-spacing: -.015em;
  line-height: var(--lh-tight);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}