/* =========================================================
   ORFEBREGOLD — TOKENS
   Fuente única de verdad. Ningún otro archivo define :root.
   Archivo: static/css/og-tokens.css  (cargar SIEMPRE primero)
   ========================================================= */

:root {

  /* ── Marca ───────────────────────────────────────────── */
  /* Diseño v2 (2026-10-04): paleta tomada de joyasoft.net (build/assets/app-*.css).
     --og-primary sigue siendo "tinta": títulos, superficies oscuras chicas
     (página activa, total del POS). Ahora es el azul profundo del sitio,
     no el casi negro #263544. El azul de marca va en --og-brand. */
  --og-brand: #2b579a;             /* joyasoft --blue: marco, links, foco */
  --og-brand-dark: #1e3f73;        /* joyasoft --blue-dark */
  --og-brand-light: #dfe7f7;       /* joyasoft --blue-light: fondos de íconos */
  --og-brand-lighter: #eef2fb;     /* joyasoft --blue-lighter: ítem activo */
  --og-primary: #1e3f73;
  --og-primary-dark: #17325c;
  --og-accent: #e7b464;            /* joyasoft --gold: acción principal */
  --og-accent-hover: #d4a04e;      /* joyasoft --gold-dark */
  --og-accent-soft: rgba(231, 180, 100, 0.16);
  --og-on-accent: #1a1a2e;         /* texto sobre dorado, como "Solicitar Demo" */
  --og-accent-text: #8f6a1d;       /* dorado como TEXTO sobre blanco: #d4a04e da 2,35:1, este 4,9:1 */
  --og-link: #2b579a;

  /* ── Botones ─────────────────────────────────────────── */
  --og-secondary: #2b579a;         /* el azul del marco (en v1 era gris azulado #4a5d6e) */
  --og-secondary-hover: #1e3f73;
  --og-success: #1a8f5c;
  --og-success-hover: #158a53;
  --og-danger: #c0392b;
  --og-danger-hover: #a5311f;
  --og-info: #3a7cc3;
  --og-info-hover: #3270b3;
  --og-print: #0d9488;
  --og-print-hover: #0b7f74;
  --og-warning: #a85a22;           /* cobre: el dorado nuevo quedaba pegado al #f59f00 */
  --og-warning-hover: #8f4c1c;
  --og-light: #e8ebee;
  --og-light-hover: #dde1e5;
  --og-neutral: #6c757d;


  /* ── Fondos ──────────────────────────────────────────── */
  --og-body-bg: #f7f8fa;           /* joyasoft --gray-bg */
  --og-surface: #ffffff;
  --og-surface-soft: #fafbfc;
  --og-surface-hover: #f2f5fb;

  /* ── Texto ───────────────────────────────────────────── */
  --og-text: #1a1a2e;              /* joyasoft --black */
  --og-text-muted: #5a5a6a;        /* joyasoft --text-light */
  --og-text-soft: #787878;         /* joyasoft --gray */
  --og-text-light: #ffffff;

  /* ── Bordes ──────────────────────────────────────────── */
  --og-border: #e2e2e2;            /* joyasoft --gray-border */
  --og-border-soft: #eeeeef;

  /* ── Estados suaves (badges y alertas) ───────────────── */
  --og-success-soft: rgba(26, 143, 92, 0.1);
  --og-danger-soft: rgba(192, 57, 43, 0.08);
  --og-warning-soft: rgba(168, 90, 34, 0.1);
  --og-info-soft: rgba(58, 124, 195, 0.1);
  --og-print-soft: rgba(13, 148, 136, 0.1);
  --og-neutral-soft: #eef1f4;

  /* ── Logo: Orfebre Gold Evolution (versión 4A, aprobada 2026-10-04) ──
     El símbolo es el oficial (diamante de contorno + etiqueta), en vector.
     Sobre el azul del ERP va todo blanco y «Gold» en el dorado de la marca;
     sobre blanco, el diamante en su azul, la etiqueta negra y un dorado más
     profundo, porque el #e7b464 sobre blanco da 1,9:1 y se pierde. */
  --og-font-logo: 'Montserrat', 'DM Sans', sans-serif;
  --og-logo-diamante: #4f80ba;
  --og-logo-etiqueta: #262626;
  --og-logo-texto: #262626;
  --og-logo-oro: #b8862b;
  --og-logo-sub: #6b6b78;

  /* ── Metales ─────────────────────────────────────────────
     No son decoración: son el dato que en el sistema viejo
     era una sigla en la columna METAL (OA / OR / OBL / P / PT).
     Los tres blancos se separan así: plata clara y fría,
     platino oscuro (se distinguen aun sin color), oro blanco
     marfil cálido (es oro sin rodio: tira a amarillo).
     ────────────────────────────────────────────────────── */
  --og-metal-oro-amarillo: #dcab3c;
  --og-metal-oro-rojo:     #c4694f;
  --og-metal-oro-blanco:   #e8e0cc;
  --og-metal-plata:        #b7c2cd;
  --og-metal-platino:      #5d6b7a;

  /* ── Gráficos ────────────────────────────────────────────
     Validados con el verificador de paletas: separación CVD
     ΔE 23,8 (protan) y 26,1 en visión normal, contraste > 3:1.
     El #ffc107 de la marca NO sirve como color de dato: queda
     fuera de la banda de luminosidad y da 1,98:1 de contraste.
     ────────────────────────────────────────────────────── */
  --og-chart-1: #3a7cc3;           /* mismo azul que --og-info */
  --og-chart-2: #b0820f;           /* oro profundo, legible como dato */
  --og-chart-grid: #eef1f4;
  --og-chart-axis: #8a96a3;

  /* ── Marco: topbar y sidebar ─────────────────────────────
     Marco D (elegido el 2026-10-04): topbar azul con la línea dorada de
     los banners de joyasoft y sidebar azul. La línea dorada es lo que
     separa los dos bloques del mismo azul.
     -fg es el color base del texto; las transparencias salen de él
     con color-mix, así sirve igual sobre fondo claro u oscuro.
     Las variantes A, B y C quedan en design/prototypes/articulos.html.
     ────────────────────────────────────────────────────── */
  --og-topbar-bg: var(--og-brand);
  --og-topbar-fg: #ffffff;
  --og-topbar-line: 3px solid var(--og-accent);
  --og-topbar-shadow: 0 2px 8px rgba(30, 63, 115, 0.18);
  --og-brand-bg: rgba(0, 0, 0, 0.12);
  --og-brand-bg-hover: rgba(0, 0, 0, 0.2);

  --og-sidebar-bg: var(--og-brand);
  --og-sidebar-fg: #ffffff;
  --og-sidebar-item-hover: rgba(255, 255, 255, 0.08);
  --og-sidebar-item-active: rgba(255, 255, 255, 0.14);
  --og-sidebar-active-text: #ffffff;
  --og-sidebar-active-bar: var(--og-accent);
  --og-sidebar-accent-text: var(--og-accent);
  --og-sidebar-text: rgba(255, 255, 255, 0.75);
  --og-sidebar-text-hover: #ffffff;
  --og-sidebar-section: rgba(255, 255, 255, 0.55);

  /* ── Sombras ─────────────────────────────────────────── */
  --og-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --og-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --og-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
  --og-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
  --og-megamenu-shadow: var(--og-shadow-lg);

  /* ── Radios ──────────────────────────────────────────── */
  --og-radius-sm: 6px;
  --og-radius-md: 10px;
  --og-radius-lg: 14px;
  --og-radius-xl: 18px;

  /* ── Espaciado ───────────────────────────────────────── */
  --og-space-1: 4px;
  --og-space-2: 8px;
  --og-space-3: 12px;
  --og-space-4: 16px;
  --og-space-5: 20px;
  --og-space-6: 24px;
  --og-space-7: 32px;

  /* ── Layout y densidad ───────────────────────────────────
     Medido a 1366x768, la resolución del mostrador.
     ────────────────────────────────────────────────────── */
  --og-topbar-h: 60px;
  --og-sidebar-w: 260px;
  --og-sidebar-collapsed-w: 70px;
  --og-sidebar-item-h: 36px;       /* era 42: se veían 9 de 25 ítems */
  --og-content-pad: 12px 24px 20px; /* era 28px, después 20px 24px: arriba 12, el breadcrumb ya separa de la topbar */
  --og-row-pad: 9px 12px;          /* era 11px 14px */
  --og-field-h: 28px;              /* 40 -> 36 -> 32 -> 28. Mínimo de WCAG 2.2 es 24 */
  --og-field-gap: 10px;            /* era 16. Antes se sumaba al margin del grupo */
  --og-label-w: 112px;             /* ancho de la etiqueta en la variante og-labels-left */
  --og-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}