/* ═══════════════════════════════════════════════════════════════════════════
   NovaCore POS Desktop — Tokens de diseño
   ───────────────────────────────────────────────────────────────────────────
   Misma identidad que la app de Android: naranja de marca sobre una base
   neutra CÁLIDA. Los valores de marca y de superficie se toman literalmente
   del tema de la APK (`context/ThemeContext.tsx` y `app.json`) para que ambas
   versiones se reconozcan como el mismo producto.

   Lo que sí cambia respecto al móvil es la DENSIDAD, no el color: en un
   monitor caben más datos por pantalla, así que las medidas son más
   compactas. El color es el mismo.

   Un solo lugar define color, espacio, tipografía, radio y sombra. Ninguna
   hoja de estilo debe escribir un valor crudo (#hex, px sueltos) que pudiera
   salir de aquí.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Neutros cálidos ──────────────────────────────────────────────────────
     Base tostada, no gris azulado: un neutro frío junto a un naranja de marca
     hace que el naranja se vea sucio. Los extremos coinciden con la APK:
     #FAFAF8 de lienzo claro, #1C1917 de texto, #121110 de lienzo oscuro y la
     escala de elevación #201E1C / #2A2725 / #343130. */
  --n-0:   #ffffff;
  --n-25:  #fdfcfa;
  --n-50:  #fafaf8;   /* lienzo claro — APK `bg` */
  --n-100: #f5f3f0;
  --n-150: #edeae5;
  --n-200: #e4ded7;
  --n-300: #cfc8bf;
  --n-400: #a49a90;
  --n-500: #7b7168;
  --n-600: #5d554e;
  --n-700: #433c36;
  --n-750: #343130;   /* elevación 3 — APK */
  --n-800: #2a2725;   /* elevación 2 — APK `surfaceStrong` */
  --n-850: #201e1c;   /* elevación 1 — APK `surface` */
  --n-900: #1c1917;   /* texto oscuro — APK `text` en claro */
  --n-950: #121110;   /* lienzo oscuro — APK `bg` en oscuro */

  /* ── Marca: el naranja de NovaCore POS ─────────────────────────────────────────
     `--b-600` es exactamente el acento del tema claro de la APK (#EA580C) y
     `--b-500` el del icono de Android (#FF6B00 redondeado a la escala). */
  --b-50:  #fff7ed;
  --b-100: #ffedd5;
  --b-200: #fed7aa;
  --b-300: #fdba74;
  --b-400: #fb923c;
  --b-500: #f97316;
  --b-600: #ea580c;   /* acento del tema claro — APK */
  --b-700: #c2410c;
  --b-800: #9a3412;
  --b-900: #7c2d12;
  --b-dark: #e8934f;  /* acento del tema oscuro — APK (croma bajado a propósito) */

  /* ── Semánticos ───────────────────────────────────────────────────────── */
  --ok-50:   #e8f7f0;  --ok-500:   #12a06a;  --ok-600:   #0d8757;  --ok-700: #0a6d47;
  --warn-50: #fdf3e3;  --warn-500: #d98416;  --warn-600: #b96c0c;  --warn-700: #94550a;
  --dan-50:  #fdecec;  --dan-500:  #d94141;  --dan-600:  #bd2f2f;  --dan-700: #9a2626;
  --info-50: #e7f2fd;  --info-500: #2a7fd4;  --info-600: #1f68b3;  --info-700: #185490;

  /* ── Color de datos ────────────────────────────────────────────────────
     Estos valores NO se eligieron a ojo: se comprobaron con un validador de
     paletas (banda de luminosidad, suelo de croma, separación bajo
     daltonismo protan/deutan/tritan y contraste contra el fondo).

     · Categórica (identidad: una serie = una entidad). Asignar SIEMPRE en
       este orden y nunca reciclar; una quinta serie se agrupa como "Otros".
       Verificada con TODOS los pares, no solo los contiguos, y encabezada por
       el naranja de marca para que la serie principal sea la de la casa. */
  --dv-1: #ea580c;  /* naranja de marca */
  --dv-2: #1b5aa0;  /* azul             */
  --dv-3: #12a06a;  /* verde            */
  --dv-4: #8a5cd0;  /* morado           */

  /* · Secuencial (magnitud: barras, sectores, mapas de calor). Un solo tono
       naranja, de claro a oscuro. Escala propia por tema porque invertir la
       clara no cumple el contraste contra un fondo oscuro. */
  --seq-1: #f59e5b;
  --seq-2: #f0762a;
  --seq-3: #d9520a;
  --seq-4: #8f3210;

  /* ── Tipografía ───────────────────────────────────────────────────────── */
  /* Sin fuentes externas a propósito: cero peticiones de red, cero parpadeo
     de texto al cargar, y en Windows "Segoe UI Variable" ya es una tipografía
     de producto moderna. */
  --font: "Segoe UI Variable Display", "Segoe UI", -apple-system,
          BlinkMacSystemFont, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Segoe UI Variable Text", "Segoe UI", -apple-system, "Inter", sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", "SF Mono", "Roboto Mono", monospace;

  /* Escala tipográfica compacta: en escritorio la densidad de información es
     una función, no un defecto. Nada por debajo de 12px para no sacrificar
     accesibilidad. */
  --fs-2xs: 0.6875rem; /* 11px — solo para etiquetas en mayúsculas */
  --fs-xs:  0.75rem;   /* 12px */
  --fs-sm:  0.8125rem; /* 13px — texto base de tablas y controles */
  --fs-md:  0.875rem;  /* 14px — texto base de la app */
  --fs-lg:  1rem;      /* 16px */
  --fs-xl:  1.125rem;  /* 18px */
  --fs-2xl: 1.375rem;  /* 22px */
  --fs-3xl: 1.75rem;   /* 28px */
  --fs-4xl: 2.25rem;   /* 36px */
  --fs-5xl: 3rem;      /* 48px */
  --fs-6xl: 3.75rem;   /* 60px */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.55;

  --ls-tight: -0.02em;
  --ls-wide:  0.04em;

  /* ── Espaciado (escala de 4px) ────────────────────────────────────────── */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* ── Radios ───────────────────────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-full: 999px;

  /* ── Medidas del armazón ──────────────────────────────────────────────────
     Sin tope de ancho: esta versión es para monitor y el contenido debe
     ocupar toda la ventana. Si algún día hiciera falta limitarlo en pantallas
     muy anchas, se cambia aquí y afecta a todas las secciones a la vez. */
  --sidebar-w:    248px;
  --sidebar-w-sm: 64px;
  --header-h:     56px;
  --content-max:  100%;

  /* ── Movimiento ───────────────────────────────────────────────────────── */
  /* Curvas cortas y con salida rápida: en un POS la animación debe confirmar
     la acción, nunca hacerte esperar. */
  --ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    120ms;
  --t-base:    180ms;
  --t-slow:    280ms;

  --z-sticky: 20;
  --z-drawer: 60;
  --z-modal:  80;
  --z-toast:  100;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tema claro (predeterminado)
   Los tokens semánticos de abajo son los ÚNICOS que deben usar los componentes.
   ═══════════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg-app:      var(--n-50);
  --bg-surface:  var(--n-0);
  --bg-raised:   var(--n-0);
  --bg-sunken:   var(--b-50);
  --bg-subtle:   var(--n-100);
  --bg-hover:    color-mix(in srgb, var(--b-600) 6%, transparent);
  --bg-active:   color-mix(in srgb, var(--b-600) 11%, transparent);
  --bg-inverse:  var(--n-900);

  --fg:          var(--n-900);
  --fg-muted:    var(--n-600);
  --fg-subtle:   var(--n-500);
  --fg-faint:    var(--n-400);
  --fg-inverse:  var(--n-0);
  --fg-on-brand: #ffffff;

  /* Bordes teñidos de naranja al 12-32%, como en la APK: dan calidez sin
     que la interfaz se vea marcada a línea. */
  --border:        color-mix(in srgb, var(--b-600) 15%, transparent);
  --border-strong: color-mix(in srgb, var(--b-600) 32%, transparent);
  --border-subtle: color-mix(in srgb, var(--b-600) 9%, transparent);

  --brand:       var(--b-600);
  --brand-hover: var(--b-700);
  --brand-soft:  var(--b-50);
  --brand-fg:    var(--b-800);
  --ring:        color-mix(in srgb, var(--b-600) 30%, transparent);

  --ok:   var(--ok-600);   --ok-soft:   var(--ok-50);   --ok-fg:   var(--ok-700);
  --warn: var(--warn-600); --warn-soft: var(--warn-50); --warn-fg: var(--warn-700);
  --dan:  var(--dan-600);  --dan-soft:  var(--dan-50);  --dan-fg:  var(--dan-700);
  --info: var(--info-600); --info-soft: var(--info-50); --info-fg: var(--info-700);

  /* Barra lateral oscura fija: ancla la vista y separa navegación de trabajo.
     Usa el marrón oscuro de la APK, no un gris neutro, para que el naranja
     del elemento activo se apoye en un fondo de la misma familia. */
  --nav-bg:        var(--n-900);
  --nav-fg:        rgba(237, 234, 231, 0.66);
  --nav-fg-strong: #ffffff;
  --nav-hover:     rgba(255, 255, 255, 0.07);
  --nav-active:    color-mix(in srgb, var(--b-500) 22%, transparent);
  --nav-border:    rgba(255, 255, 255, 0.08);
  --nav-accent:    var(--b-400);

  /* Sombras tostadas: una sombra gris sobre un lienzo cálido se ve sucia. */
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.07), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.09), 0 1px 3px rgba(28, 25, 23, 0.05);
  --shadow-lg: 0 12px 32px rgba(28, 25, 23, 0.12), 0 2px 8px rgba(28, 25, 23, 0.06);
  --shadow-xl: 0 24px 60px rgba(28, 25, 23, 0.18), 0 4px 12px rgba(28, 25, 23, 0.07);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tema oscuro
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  /* Elevación por superficies cada vez más claras (Material 3), nunca por
     sombras: son los cuatro niveles exactos de la APK. */
  --bg-app:      var(--n-950);   /* #121110 lienzo   */
  --bg-surface:  var(--n-850);   /* #201e1c tarjetas */
  --bg-raised:   var(--n-800);   /* #2a2725 modales  */
  --bg-sunken:   #171615;
  --bg-subtle:   var(--n-750);   /* #343130 chips    */
  --bg-hover:    rgba(255, 255, 255, 0.05);
  --bg-active:   rgba(255, 255, 255, 0.09);
  --bg-inverse:  var(--n-100);

  /* Escala de énfasis 87 / 66 / 45 / 28 %, igual que en la APK. */
  --fg:          #edeae7;
  --fg-muted:    rgba(237, 234, 231, 0.66);
  --fg-subtle:   rgba(237, 234, 231, 0.52);
  --fg-faint:    rgba(237, 234, 231, 0.34);
  --fg-inverse:  var(--n-900);
  --fg-on-brand: #ffffff;

  /* Bordes NEUTROS en oscuro (nunca teñidos de naranja): teñirlos es lo que
     hacía ver la interfaz «fosforescente» en las primeras pasadas del móvil. */
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.17);
  --border-subtle: rgba(255, 255, 255, 0.055);

  --brand:       var(--b-dark);   /* #e8934f — croma bajado para fondo oscuro */
  --brand-hover: var(--b-300);
  --brand-soft:  rgba(232, 147, 79, 0.13);
  --brand-fg:    var(--b-300);
  --ring:        color-mix(in srgb, var(--b-dark) 45%, transparent);

  --ok:   var(--ok-500);   --ok-soft:   rgba(18, 160, 106, 0.14); --ok-fg:   #4ecf9b;
  --warn: var(--warn-500); --warn-soft: rgba(217, 132, 22, 0.14); --warn-fg: #f0ac54;
  --dan:  var(--dan-500);  --dan-soft:  rgba(217, 65, 65, 0.14);  --dan-fg:  #f08080;
  --info: var(--info-500); --info-soft: rgba(42, 127, 212, 0.14); --info-fg: #6cb0ec;

  /* Categórica del tema oscuro. Solo TRES pasos verificados: la banda de
     luminosidad admisible sobre fondo oscuro es estrecha (L 0.48–0.67) y un
     cuarto tono ya no se distingue del azul bajo daltonismo protan. Una
     cuarta serie se agrupa como "Otros" en vez de inventarle un color. */
  --dv-1: #d97427;
  --dv-2: #4189cc;
  --dv-3: #1fa876;
  --dv-4: #4189cc;

  /* Pasos propios del tema oscuro (no es la escala clara invertida: se
     revalidó contra el fondo oscuro para que el extremo oscuro despegue). */
  --seq-1: #c2410c;
  --seq-2: #ea580c;
  --seq-3: #fb923c;
  --seq-4: #fdba74;

  /* En oscuro la barra baja un escalón por debajo del lienzo para seguir
     leyéndose como una capa aparte. */
  --nav-bg:        #0d0c0b;
  --nav-fg:        rgba(237, 234, 231, 0.6);
  --nav-fg-strong: #ffffff;
  --nav-hover:     rgba(255, 255, 255, 0.055);
  --nav-active:    rgba(232, 147, 79, 0.16);
  --nav-border:    rgba(255, 255, 255, 0.07);
  --nav-accent:    var(--b-dark);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.7);
}