/* design-tokens.css — única fuente de verdad de los tokens del portal Lexta (DESIGN.md §2).
   Los componentes solo usan var(--lx-*); si falta un token, se agrega en DESIGN.md §2 y acá.
   El mapeo a DevExpress vive en dx-overrides.css (solo variables). */

/* ---- Tipografía self-hosted (DESIGN.md §2, LEXTA-BRAND.md §5.1) ----

   Se sirven desde la propia app y no desde Google Fonts (decisión de Aldo,
   2026-09-23): sin llamada a un tercero por pageview con la IP del usuario del
   tenant, sin depender de un CDN para que el portal se vea bien, y sin abrir
   la CSP. Las tres son OFL-1.1; la licencia viaja al lado de los archivos.

   Solo el subset LATIN: el portal es en castellano y todos sus glifos entran
   ahí (á, é, ñ, ¿, ¡, €, comillas tipográficas). Si hiciera falta otro idioma,
   se agrega el subset con su unicode-range y el navegador baja solo el que usa.

   INTER — variable (wght 100–900), 48 KB. Copia exacta del de HUB (Fontsource
     v20). Un archivo cubre 400/500/600, que en estáticas serían tres descargas.
   IBM PLEX MONO — Regular 400 y Medium 500, ~15 KB cada una (Fontsource 5.3).
     Estáticas porque el repo oficial no publica variable. 500 para montos y
     totales en énfasis; nunca más pesado.
   SORA — variable (wght 100–800), 34 KB (Fontsource 5.3). Solo títulos grandes
     (bienvenida, estados vacíos). El wordmark del logo NO la usa: los SVG de
     marca vienen con el texto trazado.

   font-display: swap — se dibuja con el fallback y se reemplaza al cargar, sin
   flash de texto invisible. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable-latin.woff2") format("woff2-variations"),
       url("../fonts/InterVariable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-Regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-Medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/SoraVariable-latin.woff2") format("woff2-variations"),
       url("../fonts/SoraVariable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Neutrales (gris frío) ---- */
  --lx-bg:            #FAFAFB;   /* fondo de página */
  --lx-surface:       #FFFFFF;   /* cards, paneles, grillas */
  --lx-surface-2:     #F4F4F6;   /* headers de grilla, zonas hundidas, hover de fila */
  --lx-border:        #E4E4E9;   /* hairlines de 1px */
  --lx-border-strong: #C9C9D2;   /* foco de input, divisores enfáticos */

  /* ---- Texto ----
     ⚠️ --lx-text-3 NO es el #9090A0 del borrador de DESIGN.md: medido en la
     fase 1 daba 2,86:1 sobre --lx-surface-2 (el peor fondo) y 3,14:1 sobre
     blanco — reprobaba AA. HUB ya había pasado por esto (subió a #6E6E81).
     Acá se fue un paso más oscuro porque en Lexta el terciario también cae
     sobre la fila SELECCIONADA (--lx-accent-subtle): #6E6E81 daba 4,33 ahí.
     #6B6B7E: 4,74 en surface-2 · 5,21 en surface · 5,00 en bg · 4,52 en
     accent-subtle. Costo asumido: casi no se distingue de --lx-text-2 (1,26);
     donde haga falta jerarquía, se separa por tamaño o peso, no por un gris. */
  --lx-text:   #1A1A21;
  --lx-text-2: #5C5C6B;          /* labels, metadatos */
  --lx-text-3: #6B6B7E;          /* placeholders, timestamps */

  /* ---- Acento: índigo Lexta (LEXTA-BRAND.md §4.1) ----
     Medidos en la fase 1 (WCAG 2.x):
       accent       6,37 surface · 5,80 surface-2 · 5,52 accent-subtle
       accent-hover 8,06 surface · 7,33 surface-2 · 6,98 accent-subtle
       on-accent sobre accent-hover 8,06 · texto sobre accent-subtle 15,00 */
  --lx-accent:        #3B4FD8;
  --lx-accent-hover:  #3242B8;
  --lx-accent-subtle: #ECEEFC;   /* selección, badge de acento (fondo, no texto) */
  --lx-on-accent:     #FFFFFF;

  /* ---- Marca (NO es un segundo acento: solo logo, login y splash) ---- */
  --lx-brand-from: #5F21AD;      /* gradiente del isotipo L-Scan */
  --lx-brand-to:   #149BE9;
  --lx-brand-gradient: linear-gradient(135deg, var(--lx-brand-from) 0%, var(--lx-brand-to) 100%);
  --lx-on-brand:   #FFFFFF;      /* lo que va ENCIMA del gradiente (isotipo blanco) */
  /* Arco del splash: la punta púrpura del gradiente en claro (7,95 sobre
     --lx-bg). En oscuro se invierte a la punta cyan (ver bloque dark). */
  --lx-brand-spinner: var(--lx-brand-from);

  /* ---- Semánticos: solo ESTADO, nunca decoración ----
     ⚠️ success/warning/danger se oscurecieron respecto del borrador de
     DESIGN.md: como texto de badge sobre su propio -subtle daban 3,89 / 3,73 /
     4,42 (reprobaban AA). Son los mismos valores que HUB corrigió el
     2026-09-01 (mismo tono, solo baja la luminosidad): 4,65 / 4,62 / 4,62.
     info ya pasaba (4,87). */
  --lx-success: #1C7C45;  --lx-success-subtle: #E7F5EC;
  --lx-warning: #9E5E00;  --lx-warning-subtle: #FBF1DE;
  --lx-danger:  #C03A3A;  --lx-danger-subtle:  #FBEAEA;
  --lx-info:    #21708F;  --lx-info-subtle:    #E5F2F8;

  /* ---- Tipografía ---- */
  --lx-font:       "Inter", system-ui, sans-serif;           /* cuerpo, formularios, grillas */
  --lx-font-mono:  "IBM Plex Mono", ui-monospace, monospace; /* RUC, CDC, timbrado, montos, IDs */
  --lx-font-brand: "Sora", "Inter", sans-serif;             /* SOLO títulos grandes */
  --lx-text-xs: 11px;    /* metadatos, eyebrows */
  --lx-text-sm: 12.5px;  /* celdas en modo compacto, labels */
  --lx-text-md: 14px;    /* base */
  --lx-text-lg: 16px;    /* títulos de sección */
  --lx-text-xl: 20px;    /* título del registro en el header */
  /* Pesos: 400 cuerpo, 500 labels, 600 títulos. Nunca 700+. */

  /* ---- Espaciado (grilla de 4px) ---- */
  --lx-sp-1: 4px;  --lx-sp-2: 8px;  --lx-sp-3: 12px;
  --lx-sp-4: 16px; --lx-sp-6: 24px; --lx-sp-8: 32px;

  /* ---- Radios: nada > 6px ---- */
  --lx-radius-sm: 4px;   /* inputs, badges, botones */
  --lx-radius-md: 6px;   /* cards, paneles, popovers */

  /* ---- Elevación: sombra SOLO en overlays ---- */
  --lx-shadow-overlay: 0 8px 24px rgba(26,26,33,.12);
  /* Capa de los overlays propios (peek). Por DEBAJO de los popups de DevExpress (dropdowns,
     menús del ribbon, toasts de XAF: z-index ≥ 1000 en 25.2), que tienen que poder abrirse
     encima del panel; por encima de la grilla y su header sticky. */
  --lx-z-overlay: 900;

  /* ---- Motion ---- */
  --lx-ease: cubic-bezier(.2,.8,.3,1);
  --lx-dur-fast: 120ms;  /* hover, foco */
  --lx-dur-med:  200ms;  /* peek, colapsos */
}

/* ---- Modo oscuro ----
   DevExpress NO marca el modo en el DOM (ni atributo ni clase): lo cambia
   swapeando el archivo modes/light.min.css ↔ modes/dark.min.css. La única
   señal real es el <link> cargado, de ahí el :has(). Verificado en 25.2.4. */
:root:has(link[href*="modes/dark.min.css"]) {
  --lx-bg:            #0D1117;
  --lx-surface:       #161B22;
  --lx-surface-2:     #1C2129;
  --lx-border:        #30363D;
  --lx-border-strong: #444C56;

  /* Medidos sobre --lx-surface-2 (peor fondo): text-3 5,26 · text-2 8,18. */
  --lx-text:   #E6EDF3;
  --lx-text-2: #ADBAC7;
  --lx-text-3: #8B949E;

  /* accent 6,40 surface-2 · accent-hover 7,95 surface-2 · on-accent sobre
     accent 7,49 y sobre accent-hover 9,31 · texto sobre accent-subtle 13,39.
     accent-subtle vs surface-2 da 1,02: se separa por TONO (índigo contra
     azul-gris), no por luminosidad. Por eso la selección de grilla lleva
     además el hairline de acento (fase 2), que es lo que cumple 3:1. */
  --lx-accent:        #8C9CFF;
  --lx-accent-hover:  #A5B1FF;
  --lx-accent-subtle: #1B2040;
  --lx-on-accent:     #0D1117;   /* se INVIERTE: el acento dark es claro */

  /* Púrpura #5F21AD sobre #0D1117 da 1,9: el arco desaparecería. La punta
     cyan del gradiente sí se ve (6,4) y sigue siendo la marca. */
  --lx-brand-spinner: var(--lx-brand-to);

  /* Los cuatro badges oscuros: 5,68 / 5,97 / 4,97 / 5,19. */
  --lx-success: #3FAE6E;  --lx-success-subtle: #12261B;
  --lx-warning: #D89044;  --lx-warning-subtle: #2A2216;
  --lx-danger:  #E06767;  --lx-danger-subtle:  #2C1A1A;
  --lx-info:    #4E9EC2;  --lx-info-subtle:    #132630;

  --lx-shadow-overlay: 0 8px 24px rgba(0,0,0,.5);
}