/* Generado por scripts/build.js desde kit/contrato/contrato.css — no editar acá. */
/* ============================================================================
   contrato.css — CONTRATO DE TOKENS del VA App Kit.

   Es la capa de FALLBACK + la definición canónica de los tokens que consumen los
   componentes del kit (kit.css). Usa el MISMO vocabulario que la marca del cliente
   (clientes/<c>/marca/tokens.css): --marca, --fondo, --tinta, --borde, --radio,
   --ok-bg, etc. No inventa un dialecto nuevo; extiende el contrato de marca con lo
   que el kit necesita y a las marcas les faltaba: el par superficie/contenido de la
   marca (--marca-contenido), el foco accesible (--foco) y las series de gráfico
   (--serie-1..5).

   Orden de carga en una app:
     1) contrato.css     — nombres + NEUTRO de referencia (por si falta un token)
     2) marca/tokens.css — VALORES de la marca del cliente (pisa el neutro)
     3) kit.css          — componentes que consumen los tokens
   Así, aunque la marca de un cliente no traiga --foco o --serie-*, el kit igual
   renderiza con el neutro. La identidad la fija SIEMPRE la marca del cliente.
   ========================================================================== */

:root {
  /* --- Identidad: la fija la marca del cliente --- */
  --marca:                 #3f4b5b;   /* color dominante */
  --marca-contenido:       #ffffff;   /* texto/íconos SOBRE --marca (contraste correcto) */
  --marca-fuerte:          #2c3644;   /* hover / énfasis */
  --marca-suave:           #eef1f4;   /* fondo tenue de estado activo/hover */
  --marca-suave-contenido: #2c3644;   /* texto sobre --marca-suave */

  /* --- Superficies y texto --- */
  --fondo:         #f6f7f8;   /* fondo de página */
  --superficie:    #ffffff;   /* tarjetas y paneles */
  --superficie-alt:#f1f3f5;   /* superficie alterna / hover de fila */
  --elevado:       #ffffff;   /* modales, menús, paneles laterales */
  --tinta:         #1a1f26;   /* texto principal */
  --tinta-suave:   #4a5460;   /* texto secundario */
  /* Estaba en #8a929c, que daba 2,93:1 sobre el fondo de página, 3,15 sobre la tarjeta y 2,83
     sobre la fila alterna: por debajo de AA en las tres superficies, y es el gris del subtítulo
     que lleva toda pantalla de back office. Sólo se le bajó la luminosidad (mismo tono, misma
     saturación) hasta el valor MÁS CLARO que pasa 4,5 en las tres: 4,73 / 5,07 / 4,56. Es el
     default de toda app que no lo redefina en su marca; Tifox ya lo tiene resuelto por su lado. */
  --tinta-tenue:   #696f77;   /* texto terciario / mute (4,73:1 sobre --fondo) */
  --borde:         #e2e6ea;   /* bordes */
  --borde-suave:   #eef1f3;   /* bordes sutiles internos */
  --foco:          #64748b;   /* anillo de foco — ACCESIBILIDAD (>=3:1 sobre blanco, WCAG 1.4.11) */

  /* --- Tipografía --- */
  --fuente:        system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-titulo: var(--fuente);

  /* --- Estado (señal, no identidad) ---
     Cada color pasa AA (4,5:1) sobre SU propio -bg, que es donde se usa: el `.pill` es de 12 px
     con weight 700, o sea texto normal para WCAG, y ese par es el que el checklist nombra. El
     amarillo y el verde estaban en 3,28 y 4,31, así que se les bajó la luminosidad lo mínimo que
     los pone arriba de 4,5 (el tono y la saturación no se tocan). Medido, no estimado. */
  --ok:        #2e7958;  --ok-bg:        #e6f1ea;   /* 4,54:1 sobre su -bg */
  --atencion:  #926419;  --atencion-bg:  #f8efdc;   /* 4,53:1 sobre su -bg */
  --error:     #b23b2e;  --error-bg:     #f6e5e1;
  --info:      #3d6f8a;  --info-bg:      #e9f0f4;

  /* --- Series de gráfico (para el charting: charts.js propio) --- */
  --serie-1: #3f4b5b;
  --serie-2: #6b8fa8;
  --serie-3: #2f7d5b;
  --serie-4: #b0791e;
  --serie-5: #8a929c;

  /* --- Forma --- */
  --radio-sm: 4px;
  --radio:    8px;
  --radio-lg: 14px;
  --sombra-sm: 0 1px 2px rgba(20, 24, 30, .06);
  --sombra:    0 4px 16px rgba(20, 24, 30, .09);
  --sombra-lg: 0 14px 38px rgba(20, 24, 30, .16);

  /* --- Medidas del shell --- */
  --nav-h:     60px;
  --sidebar-w: 232px;
  --ancho-max: 1200px;
}