/* ============================================================
   RixART — Design Tokens v3.2
   Fuente de verdad de la identidad visual en toda la plataforma.
   05/09/2026: marca madre renombrada de "EJN ART"/"EJN Soft" a RixART
   (ver docs/ESTADO.md). Los 6 colores de módulo (Core/Poliza/Work/Care/
   Business/Finance) NO cambiaron -- alcance de este rebrand: sólo el
   nivel de plataforma/marca madre, mismo criterio que el rebrand v3 (ver
   docs/PENDIENTES_PLATAFORMA.md P-56/P-57).
   Uso: <link rel="stylesheet" href="ejn-tokens.css"> en el layout base.
   ============================================================ */

:root {
  /* ---------- Marca madre ---------- */
  --ejn-blue:        #3A7CA5;  /* 21/10/2026: paleta nueva — Primario */
  --ejn-blue-dark:   #2E6485;  /* Primario hover */
  --ejn-blue-soft:   #E3EEF5;

  --ejn-navy:        #2C2C2C;  /* 21/10/2026: tinta = Texto principal de la paleta nueva (antes navy #0A2144) */
  --ejn-navy-dark:   #1F1F1F;
  --ejn-navy-soft:   #E8EEF2;  /* = Sidebar de la paleta nueva */

  /* Azul de acento (distinto del navy): la "A" del wordmark y el badge
     "Ingresar" de las tarjetas de módulo (pedido de Daniel, 06/09/2026,
     a partir de su mockup de referencia). */
  --ejn-azul-acento:      #3A7CA5;  /* 21/10/2026: paleta nueva — Primario (antes #5E5CFF «lila»). Es el tema por defecto; los demás temas de Mi cuenta lo redefinen */
  --ejn-azul-acento-dark: #2E6485;  /* Primario hover */
  --ejn-azul-acento-soft: #E3EEF5;
  --ejn-azul-acento-mist: #F3F8FB;  /* sombreado muy tenue para superficies grandes (grillas) -- mas diluido que -soft */
  --cristal-blue-light:   #9DC3DB;  /* acento secundario claro del mockup -- fondo de login */

  /* ---------- Colores de módulo (de los logos oficiales) ---------- */
  --ejn-green:       #3D9B7A;  /* Éxito */
  --ejn-green-dark:  #2F7A60;
  --ejn-green-soft:  #E4F3ED;

  --ejn-gold:        #D4A017;  /* Advertencia */
  --ejn-gold-dark:   #8A6508;
  --ejn-gold-soft:   #FBF3DC;

  --ejn-orange:      #CD9B16;  /* EJN Work (trabajador) */
  --ejn-orange-dark: #AE8313;
  --ejn-orange-soft: #FBF4DE;

  --ejn-red:         #E01E2D;  /* Error = rojo franco (el rojo de marca), no el terracota de la paleta de referencia */
  --ejn-red-dark:    #B41824;
  --ejn-red-soft:    #FCE8EA;

  --ejn-teal:        #30678A;  /* EJN Business */
  --ejn-teal-dark:   #295876;
  --ejn-teal-soft:   #E3EEF5;

  --ejn-purple:      #38779E;  /* EJN Finance */
  --ejn-purple-dark: #2F6586;
  --ejn-purple-soft: #E6ECF1;

  /* Alias semánticos por módulo */
  /* ROJO EJN de marca: acciones destructivas y el punto del logo.
     No confundir con --ejn-red, que es el acento del módulo Care. */
  --ejn-brand-red:      #E01E2D;
  --ejn-brand-red-dark: #B41824;
  --ejn-brand-red-soft: #FCE8EA;

  /* ---------- Semánticos de UI ---------- */
  --color-secondary: #5A7D9A;  /* Secundario de la paleta nueva (21/10/2026): iconos y acciones de menor jerarquía, información */
  --color-primary:   var(--ejn-azul-acento);  /* 06/09/2026: antes var(--ejn-blue) (navy) -- el boton primario de toda la plataforma pasa al acento "Cristal" */
  --color-success:   var(--ejn-green);
  --color-warning:   var(--ejn-gold);
  --color-danger:    var(--ejn-brand-red);
  --color-info:      var(--color-secondary);

  /* ---------- Neutros ---------- */
  --gray-900: #2C2C2C;  /* Texto principal */
  --gray-700: #4A4A4A;
  --gray-600: #6B6B6B;  /* Texto secundario */
  --gray-800: #363636;  /* 17/10/2026 (estilo LICIPAS): texto fuerte de cuadros emergentes; entre --gray-700 y --gray-900 */
  --gray-500: #8C8C8C;  /* 17/10/2026: entre --gray-600 y --gray-400 (iconos y textos de apoyo) */
  --gray-disabled: #C9C9C9;  /* 17/10/2026: controles y textos deshabilitados */
  --gray-400: #A6A6A6;  /* placeholder / deshabilitado */
  --gray-300: #D6D3CF;
  --gray-200: #E5E2DE;  /* Bordes */
  --gray-100: #F0EEEB;
  --gray-50:  #F4F6F8;  /* Fondo principal */
  --white:    #FFFFFF;
  --mono-ink: #130000;  /* versión monocromática del logo */

  /* ---------- Tipografía ---------- */
  --font-family: 'Noto Sans', Tahoma, Verdana, Geneva, sans-serif;  /* 21/10/2026 (pedido de Daniel): Noto Sans (autoalojada, ver @font-face en rixart-app.css). Tahoma/Verdana quedan de respaldo. Antes: Montserrat y, por unas horas, Tahoma. */
  --fw-light: 300;   /* Noto Sans Light: títulos principales y números grandes de los KPI (con letter-spacing -0.01em) */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-display: 32px;   /* 700 */
  --fs-h1: 24px;        /* 700 */
  --fs-h2: 20px;        /* 600 */
  --fs-h3: 16px;        /* 600 */
  --fs-body: 14px;      /* 400 — densidad ERP */
  --fs-small: 12px;     /* 400 */
  --fs-caption: 11px;   /* 500, uppercase, tracking 0.5px */

  --lh-tight: 1.25;
  --lh-normal: 1.5;

  /* ---------- Layout ---------- */
  --radius-sm: 8px;   /* 06/09/2026: +2px, esquinas mas "continuas" estilo macOS */
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(29,29,31,.06);   /* 06/09/2026: "sombras suaves en vez de bordes duros" (Daniel) */
  --shadow-md: 0 6px 20px rgba(29,29,31,.08);
  --shadow-lg: 0 16px 40px rgba(29,29,31,.12);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;

  /* ---------- Barra lateral ----------
     Fondo claro: el ícono de marca es navy sobre transparente, así que
     sobre un fondo azul oscuro desaparecía. Con superficie blanca el
     logo se lee y los colores de módulo mantienen su valor real. */
  --sidebar-bg:     #E8EEF2;  /* 21/10/2026: Sidebar de la paleta nueva (antes vidrio blanco) */
  --sidebar-borde:  var(--gray-200);
  --sidebar-texto:  var(--gray-700);
  --sidebar-activo: var(--ejn-navy-soft);
  --sidebar-width: 248px;
  --topbar-height: 56px;

  /* ---------- Cristal / Vidrio Diurno (pedido de Daniel, 06/09/2026) ----------
     Paneles translucidos con blur real, sombras suaves en vez de bordes
     duros -- lenguaje visual de macOS hoy (System Settings). */
  --cristal-glass-bg:        rgba(255,255,255,.66);
  --cristal-glass-bg-strong: rgba(255,255,255,.80);
  --cristal-glass-border:    rgba(255,255,255,.55);
  --cristal-blur: 20px;
  --font-mono: 'Noto Sans', Tahoma, Verdana, Geneva, sans-serif;  /* reservado para una 2da pasada en datos tabulares -- no aplicado aun, ver ESTADO.md */
}

/* ---------- Tema de color por usuario (pedido de Daniel, 07/09/2026) ----------
   Cada usuario elige su acento desde "Mi cuenta" (ver CuentaController /
   CuentaRepo::TEMAS, misma lista de claves que estas reglas). El valor
   vive en sys_usuario.tema_color y llega acá como
   <body data-tema="...">, seteado en layouts/privado.php.

   Por qué alcanza con redefinir sólo estas 4 variables: --color-primary
   y [data-module] { --module-accent: ... } (mas abajo en este archivo)
   ya estaban escritas como var(--ejn-azul-acento) en vez de un valor
   fijo -- una propiedad custom de CSS se re-resuelve por elemento
   siguiendo la cascada, así que sobreescribir --ejn-azul-acento* en
   <body> alcanza para recolorear botones primarios, nav activo, foco,
   badges y grillas en toda la plataforma sin tocar ninguna otra regla.

   'lila' (el celeste-violeta de siempre, #5E5CFF) es el default: no
   tiene bloque acá porque ya son los valores base de :root, así que
   ningún usuario existente ve un cambio al salir esta feature.

   Paleta pastel estilo macOS (System Settings > Apariencia), con el
   mismo criterio que ya usa 'lila': el tono base tiene saturación media
   (para que el texto blanco de los botones se siga leyendo bien), y lo
   "pastel" se nota en los tonos -soft/-mist (fondos de badges, foco,
   grillas), igual que hoy. Se dejó afuera el rojo a propósito: ya está
   reservado como --color-danger/--ejn-red para acciones destructivas
   y badges de error -- usarlo también como acento de marca confundiría
   "elegiste este color" con "esto es un error". */
[data-tema="celeste"] {
  --ejn-azul-acento:      #3E9BE0;
  --ejn-azul-acento-dark: #2E7BB8;
  --ejn-azul-acento-soft: #E3F3FC;
  --ejn-azul-acento-mist: #F3FAFE;
}
[data-tema="menta"] {
  --ejn-azul-acento:      #2FBF9C;
  --ejn-azul-acento-dark: #239E80;
  --ejn-azul-acento-soft: #E1F7F1;
  --ejn-azul-acento-mist: #F1FCF9;
}
[data-tema="rosa"] {
  --ejn-azul-acento:      #F0629A;
  --ejn-azul-acento-dark: #D14A80;
  --ejn-azul-acento-soft: #FDE7F0;
  --ejn-azul-acento-mist: #FEF4F8;
}
[data-tema="durazno"] {
  --ejn-azul-acento:      #F0985A;
  --ejn-azul-acento-dark: #D67A3C;
  --ejn-azul-acento-soft: #FDECDF;
  --ejn-azul-acento-mist: #FEF6F0;
}
[data-tema="grafito"] {
  --ejn-azul-acento:      #64748B;
  --ejn-azul-acento-dark: #4B5768;
  --ejn-azul-acento-soft: #EEF1F5;
  --ejn-azul-acento-mist: #F7F9FB;
}

/* ---------- Símbolo de marca ----------
   Los logos v4 son planos, sin degradado ni sombra (manual v4 §7:
   no alterar colores ni agregar efectos). PNG con transparencia,
   servidos a 3x para pantallas de alta densidad. */
.marca-escudo { display: block; flex-shrink: 0; }
.ico--escudo  { flex-shrink: 0; }

/* ---------- Base ---------- */
body.ejn {
  font-family: var(--font-family);
  font-size: var(--fs-body);
  color: var(--gray-900);
  /* 12/09/2026: el fondo tornasolado (probado mas arriba en este mismo
     dia) no convencio a Daniel en la app real -- pidio volver a fondo
     blanco plano y en cambio usar sombra en tarjetas/formularios para
     dar sensacion de profundidad (ver .tarjeta en ejn-erp.css). .app
     (ejn-app.css) es el que realmente pinta el fondo visible (cubre
     100vh encima de body), asi que ahi esta el valor que manda; esta
     copia queda como respaldo por si algun navegador llega a mostrar
     el body (ej. rebote de scroll en iOS). */
  background: var(--white);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: var(--fw-semibold) var(--fs-body)/1 var(--font-family);
  padding: 10px 16px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; transition: background .15s;
}
/* 11/09/2026 (pedido de Daniel, RAR Expuestos Task #97): no existía ningún
   estilo para .btn:disabled -- un botón deshabilitado por JS (ej.
   ejn-rar-expuestos.js seteando btn.disabled) se veía idéntico a uno
   habilitado, sin ninguna señal visual. pointer-events: none además evita
   que el hover de variantes como .btn-modulo (filter: brightness) se vea
   al pasar el mouse por encima estando disabled. Global y aditivo: aplica
   a cualquier .btn de cualquier módulo que use el atributo disabled, no
   sólo a RAR. */
.btn:disabled, .btn[disabled] {
  opacity: .45; filter: grayscale(.35); cursor: not-allowed; pointer-events: none;
}
.btn-primary   { background: var(--color-primary); color: var(--white); }
.btn-primary:hover { background: var(--ejn-azul-acento-dark); }
.btn-secondary { background: var(--white); color: var(--gray-700); border-color: var(--gray-300); }
.btn-danger    { background: var(--color-danger); color: var(--white); }
.btn-danger:hover { background: var(--ejn-red-dark); }

/* ---------- StatusBadge: etiqueta de estado UNICA de la plataforma (21/10/2026, pedido de Daniel) ----------
   Una sola definición para TODAS las etiquetas de estado (.badge y sus alias, y los chips de semáforo .prv-chip): mismo tamaño en cualquier pantalla
   (alto 18 px, ancho mínimo 84 px que crece con el texto, borde de pastilla, 11 px / peso 500; ajustado el 21/10/2026: a 30 × 124 px / 13 px agrandaba las filas y la letra), sin paddings ni tamaños locales. Solo el COLOR cambia con el estado. No agregar reglas de tamaño de
   .badge en otros archivos: se cambian acá, en las variables --estado-*.
   Variantes: ok (disponible, activo, completado) · pend (pendiente, en espera) · proc (en proceso) · error (error, bloqueado, vencido) · inactivo (inactivo, no disponible).
   Excepciones de tamaño, SOLO para lo que no es un estado: .badge--contador (cifras, también en los chips de semáforo) y .badge-modulo («Ingresar ›»).
   El ancho es un MÍNIMO: un texto más largo («H&S: En proceso») ensancha la etiqueta en lugar de recortarse. Solo si una celda de tabla es más angosta que el texto, se recorta
   con «…» y el texto completo va en el tooltip (rixart-estado.js). Sin fundidos ni transparencias. */
:root {
  --estado-alto: 18px;
  --estado-ancho: 84px;
  --estado-fuente: 11px;   /* un poco menor que el texto de tablas y fichas (12.5px) */
  --estado-ok-fondo:      var(--ejn-green-soft);  --estado-ok-texto:      var(--ejn-green-dark);
  --estado-pend-fondo:    var(--ejn-gold-soft);   --estado-pend-texto:    #8A6508;
  --estado-proc-fondo:    #E3EEF5;                --estado-proc-texto:    #2E6485;
  --estado-error-fondo:   var(--ejn-red-soft);    --estado-error-texto:   var(--ejn-red-dark);
  --estado-inactivo-fondo: #EEF0F2;               --estado-inactivo-texto: var(--gray-600);
}
.badge, .prv-chip {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: auto; min-width: var(--estado-ancho); height: var(--estado-alto); padding: 0 6px; border-radius: 9999px; vertical-align: middle;
  font-size: var(--estado-fuente); font-weight: 500; line-height: 1; text-align: center; white-space: nowrap; overflow: hidden;
  background: var(--estado-inactivo-fondo); color: var(--estado-inactivo-texto);
}
.badge--ok, .badge-success, .badge-ok, .badge--activo, .badge--disponible, .badge--completado
  { background: var(--estado-ok-fondo); color: var(--estado-ok-texto); }
.badge--warn, .badge-warning, .badge--pendiente, .badge--espera
  { background: var(--estado-pend-fondo); color: var(--estado-pend-texto); }
.badge--info, .badge-info, .badge--proceso
  { background: var(--estado-proc-fondo); color: var(--estado-proc-texto); }
.badge--dang, .badge-danger, .badge--error, .badge--bloqueado, .badge--vencido
  { background: var(--estado-error-fondo); color: var(--estado-error-texto); }
.badge--neu, .badge-neutral, .badge--muted, .badge--inactivo, .badge--no-disponible
  { background: var(--estado-inactivo-fondo); color: var(--estado-inactivo-texto); }
/* En una celda de tabla, la etiqueta nunca se sale de su columna (si la columna es más angosta, se ajusta a ella); fuera de las tablas sigue fija. */
td .badge, th .badge { max-width: 100%; }
/* Texto que no entra en una celda angosta: queda cortado con «…» (el tooltip con el texto completo lo pone rixart-estado.js). Se pasa a bloque porque text-overflow no actúa dentro de un contenedor flex. */
.badge--larga { display: inline-block; text-align: left; line-height: var(--estado-alto); text-overflow: ellipsis; }
.prv-chip.badge--larga { line-height: calc(var(--estado-alto) - 2px); }
/* Excepciones de tamaño: cifras y llamadas a la acción, que no son un estado. */
.badge.badge--contador, .prv-chip.badge--contador, .arbol-causas__nodo__numero .badge { width: auto; min-width: 20px; height: var(--estado-alto); padding: 0 6px; font-size: var(--estado-fuente); font-weight: 600; }
.badge.badge-modulo { width: auto; height: auto; padding: 3px 10px; font-size: var(--fs-small); font-weight: var(--fw-semibold); }

/* ---------- Acento por módulo (aplicar en <body data-module="...">) ---------- */
/* 06/09/2026 (pedido de Daniel): los 6 modulos dejan de tener cada uno
   su propio color -- ahora todos usan el mismo acento de marca (navy
   RixART), conforme al manual. Las variables --module-<modulo> por modulo
   se quitaron el 13/11/2026 (nadie las leia): solo queda --module-accent. */
/* --module-accent pasa de navy a azul-acento (electrico) en los 6
   modulos -- pedido de Daniel (06/09/2026): el nombre de modulo, el
   item de menu activo y el resaltado de tablas/foco/wizard que dependen
   de --module-accent en toda la plataforma (ejn-app.css + ejn-erp.css)
   quedaban "grisaceos" con navy. Un solo azul unificado para los 6 --
   ya no hay paleta por modulo (gold/teal/etc) desde la unificacion
   anterior, asi que no hay riesgo de contraste dispar entre modulos. */
/* Separación por producto (CLOUD - CSS, 13/11/2026, CSS-2): las siete reglas por módulo eran idénticas, así que alcanza una sola, con el mismo selector de
   atributo y la misma especificidad. El kernel no nombra módulos de ningún producto. */
[data-module] { --module-accent: var(--ejn-azul-acento); --module-accent-soft: var(--ejn-azul-acento-soft); }

/* Paleta RixartNetwork (grafico animado del panel de inicio, pedido de
   Daniel 06/09/2026, spec de 28 puntos). Nombres tal cual los pidio,
   se usan solo en hub-network.css/.svg -- no reemplazan --ejn-azul-*
   que ya usa el resto del sitio (sidebar, badges, etc). */
:root {
  --rixart-blue: #3B7FA8;
  --rixart-blue-2: #5297C2;
  --rixart-blue-light: #EFF6FA;
  --rixart-navy: #1F4359;
  --rixart-text: #444444;
  --rixart-muted: #777777;
  --rixart-border: #EDEDED;
  --rixart-bg: #F9FAFB;
  --rixart-white: #FFFFFF;
}

/* 19/10/2026 (pedido de Daniel, referencia de la pantalla de SCI): franja superior azul continua (logo + barra superior) y su tratamiento de avisos.
   Los componentes usan SOLO estos tokens: los colores viven acá, no en las reglas. */
:root {
  --franja-inicio: #214A62;  /* 21/10/2026: del Primario hover hacia más oscuro (antes navy #0A2144): arranque de la franja, donde está el logo */
  --franja-medio:  #2E6485;
  --franja-fin:    #3A7CA5;
  --franja-bg: linear-gradient(100deg, var(--franja-inicio) 0%, var(--franja-medio) 48%, var(--franja-fin) 100%);
  --franja-alto: 44px;
  --franja-texto: #FFFFFF;
  --franja-texto-suave: #D2E2EC;
  --franja-vidrio: rgba(255, 255, 255, .10);
  --franja-vidrio-fuerte: rgba(255, 255, 255, .22);
  --franja-A-inicio: #A9D5EE;  /* la «A» del wordmark sobre fondo oscuro: el degradé original (#5EC2FD→#16299A) se pierde en el azul */
  --franja-A-fin:    #5FA7D1;
  --aviso-punto: #E01E2D;      /* punto con el número de avisos pendientes */
}

/* 19/10/2026 (pedido de Daniel, referencia de SCI): tintes de los íconos de acceso, indicadores y paneles (fondo suave + ícono del mismo tono). */
:root {
  --tinte-azul-fondo:     #E3EEF5;  --tinte-azul-icono:     #3A7CA5;
  --tinte-verde-fondo:    #E4F3ED;  --tinte-verde-icono:    #3D9B7A;
  --tinte-violeta-fondo:  #E6ECF1;  --tinte-violeta-icono:  #5A7D9A;  /* = Secundario */
  --tinte-turquesa-fondo: #DCEBEF;  --tinte-turquesa-icono: #2E6485;
  --tinte-naranja-fondo:  #FBF3DC;  --tinte-naranja-icono:  #D4A017;
  --tinte-rojo-fondo:     #FCE8EA;  --tinte-rojo-icono:     #E01E2D;
  --tinte-gris-fondo:     #EEF0F2;  --tinte-gris-icono:     #6B6B6B;
}