/* Tokens.css - TOKENS del estilo por defecto (JFGCloudERP). SÓLO variables: no tiene reglas ni reset.
   Única fuente de colores y fuentes del sistema (01/10/2026). La cargan JFGCloudERP.css (@import) y, directamente, las
   pantallas y formatos antiguos que no usan JFGCloudERP.css (Renovadora, formulario antiguo de Orden de Servicio).
   Cada estilo de empresa (Estilos/<codigo>.css, definido en el skill references/diseno-ui.md) sólo redefine estos tokens.
   El servidor los lee para PDF y correos (Routines/PaletaEstilo.cs): nunca escribas un color fuera de aquí o de un estilo. */
:root {
    /* Principal (heredada JFG Cloud Computing) */
    --jfg-azul-profundo: #1078d0;
    --jfg-azul-medio: #20a0d8;
    --jfg-celeste: #30b0e0;
    --jfg-azul-marino: #314f85;
    /* Acento de producto */
    --jfg-indigo: #5b5fee;
    --jfg-indigo-claro: #8b8dff;
    --jfg-lila: #edeafb;
    /* Neutros */
    --jfg-espacial: #0b1526;
    --jfg-pizarra: #5b6b85;
    --jfg-niebla: #eef3fa;
    --jfg-blanco: #fff;
    /* Estados */
    --jfg-verde: #22c55e;
    --jfg-ambar: #f5a623;
    --jfg-error: #c53030;
    --jfg-error-fondo: color-mix(in srgb, var(--jfg-error) 9%, var(--jfg-blanco));
    /* Tipografia */
    --fuente-titulo: "Poppins", sans-serif;
    --fuente-ui: "Manrope", "Segoe UI", sans-serif;   /* 04/10/2026, decisión de Jorge: Manrope como en el ERP; los títulos siguen con la letra del tema */
    --fuente-mono: "JetBrains Mono", monospace;
    /* Forma */
    --radio: 8px;

    /* ====== Tokens POR USO (01/10/2026). Las pantallas usan ÉSTOS, no los --jfg-* ni colores fijos: cada estilo de empresa
       (Areas/Main/Styles/Estilos/<codigo>.css, definido en el skill references/diseno-ui.md) sólo los redefine. Aquí, el estilo
       JFGCloudERP (por defecto). */
    --color-primario: var(--jfg-azul-profundo);          /* botón principal, barra/ítem activo */
    --color-primario-hover: var(--jfg-azul-marino);      /* el principal al pasar el mouse */
    --color-sobre-primario: var(--jfg-blanco);                        /* texto e íconos sobre el principal */
    --color-acento: var(--jfg-indigo);                   /* acento del producto: selección, módulo activo (hasta el 10 %) */
    --color-acento-hover: var(--jfg-indigo-claro);
    --color-acento-suave: var(--jfg-lila);               /* fondo de tarjetas "inteligentes" */
    --color-sobre-acento: var(--jfg-blanco);
    --color-fondo: var(--jfg-niebla);                    /* fondo de página */
    --color-superficie: var(--jfg-blanco);                            /* tarjetas, panel, campos */
    --color-superficie-hover: color-mix(in srgb, var(--color-fondo) 56%, var(--color-superficie));                   /* fila o ítem al pasar el mouse */
    --color-texto: var(--jfg-espacial);                  /* texto principal */
    --color-texto-suave: var(--jfg-pizarra);             /* etiquetas, texto secundario (≥ 4,5:1 sobre superficie) */
    --color-titulo: var(--jfg-azul-marino);              /* títulos y texto con peso de marca */
    --color-icono: var(--jfg-pizarra);                   /* íconos y placeholders */
    --color-borde: color-mix(in srgb, var(--color-titulo) 8%, var(--color-fondo));                              /* bordes y separadores */
    --color-borde-fuerte: color-mix(in srgb, var(--color-titulo) 20%, var(--color-fondo));                       /* bordes de controles */
    --color-borde-campo: var(--jfg-pizarra);             /* borde de los campos de formulario */
    --color-enlace: var(--jfg-azul-profundo);
    --color-enlace-hover: var(--jfg-azul-marino);
    --color-cabecera: var(--jfg-espacial);               /* superficies oscuras (menú, cabeceras) */
    --color-sobre-cabecera: var(--jfg-blanco);
    --color-foco: color-mix(in srgb, var(--color-primario) 90%, transparent);   /* anillo de foco: >= 3:1 sobre blanco (3,85) y niebla (3,53), WCAG 2.2 (04/10/2026) */
    --color-resalte: var(--jfg-celeste);                 /* resalte sobre superficies oscuras (opción activa del menú, foco) */
    --color-cabecera-claro: var(--jfg-azul-marino);      /* inicio del degradado de las superficies oscuras */
    --color-velo: var(--jfg-espacial);                                  /* base de velos y sombras negras (cámara, texto sobre fotos) */
    --color-exito: var(--jfg-verde);                     /* estados: sólo estados */
    --color-advertencia: var(--jfg-ambar);
    --color-error: var(--jfg-error);
    --color-error-fondo: color-mix(in srgb, var(--color-error) 9%, var(--color-superficie));
    --color-error-texto: var(--color-error);             /* texto de error sobre blanco o su fondo (4,76:1); un estilo lo oscurece si no alcanza 4,5 */
    --color-neutro: color-mix(in srgb, var(--color-texto-suave) 59%, var(--color-fondo));                             /* estado neutro de un dato ("No aplica", sin color) */
    --color-sombra: color-mix(in srgb, var(--color-cabecera) 6%, transparent);
    --fuente-dato: var(--fuente-mono);                   /* placas, códigos, números de orden, montos alineados */
    --foco: 0 0 0 2px var(--color-foco);

    /* Tonos derivados (fondos y textos de estado, capas, series). TODOS salen de la paleta (--jfg-*) o de otros tokens con
       color-mix: si un estilo cambia un color base, sus derivados lo siguen solos (Jorge, 01/10/2026: ningún color fuera de la paleta).
       Un estilo de cliente sólo redefine los que quiera distintos. */
    --color-primario-tinte: color-mix(in srgb, var(--color-primario) 10%, transparent);         /* fondo suave del principal (indicadores) */
    --color-acento-tinte: color-mix(in srgb, var(--color-acento) 10%, transparent);
    --color-seleccion: color-mix(in srgb, var(--color-primario) 9%, var(--color-superficie));                          /* fila o tarjeta seleccionada, barra de selección múltiple */
    --color-esqueleto-brillo: color-mix(in srgb, var(--color-fondo) 39%, var(--color-superficie));                   /* brillo del esqueleto de carga */
    --color-exito-fondo: color-mix(in srgb, var(--color-exito) 16%, transparent);
    --color-exito-fondo-suave: color-mix(in srgb, var(--color-exito) 14%, transparent);
    --color-exito-texto: color-mix(in srgb, var(--color-exito) 40%, var(--color-texto));                        /* texto de éxito sobre su fondo */
    --color-exito-fuerte: color-mix(in srgb, var(--color-exito) 58%, var(--color-texto));                       /* tinte de éxito para íconos, cifras y texto chico */
    --color-advertencia-fondo: color-mix(in srgb, var(--color-advertencia) 14%, transparent);    /* avisos ámbar */
    --color-advertencia-fondo-medio: color-mix(in srgb, var(--color-advertencia) 16%, transparent);
    --color-advertencia-fondo-fuerte: color-mix(in srgb, var(--color-advertencia) 20%, transparent);
    --color-advertencia-texto: color-mix(in srgb, var(--color-advertencia) 38%, var(--color-texto));                  /* texto de advertencia sobre su fondo */
    --color-advertencia-fuerte: color-mix(in srgb, var(--color-advertencia) 56%, var(--color-texto));                 /* tinte de advertencia para íconos, cifras y texto chico */
    --color-grabando: var(--color-error);                           /* cámara: grabación; error intenso */
    --color-error-tenue: color-mix(in srgb, var(--color-grabando) 5%, transparent);
    --color-grabando-fondo: color-mix(in srgb, var(--color-grabando) 90%, transparent);
    --color-grabando-halo: color-mix(in srgb, var(--color-grabando) 35%, transparent);
    --color-sobre-oscuro: var(--jfg-blanco);                          /* texto e íconos sobre fotos, videos y capas oscuras */
    --color-camara-fondo: var(--color-velo);
    /* capas oscuras (velos sobre la página, sombras): transparencias del color de la cabecera */
    --color-capa-12: color-mix(in srgb, var(--color-cabecera) 12%, transparent);
    --color-capa-18: color-mix(in srgb, var(--color-cabecera) 18%, transparent);
    --color-capa-35: color-mix(in srgb, var(--color-cabecera) 35%, transparent);
    --color-capa-60: color-mix(in srgb, var(--color-cabecera) 60%, transparent);
    --color-capa-70: color-mix(in srgb, var(--color-cabecera) 70%, transparent);
    --color-capa-75: color-mix(in srgb, var(--color-cabecera) 75%, transparent);
    --color-capa-88: color-mix(in srgb, var(--color-cabecera) 88%, transparent);
    /* velos negros (cámara y sombras de texto sobre fotos) y brillos sobre lo oscuro */
    --color-velo-20: color-mix(in srgb, var(--color-velo) 20%, transparent);
    --color-velo-35: color-mix(in srgb, var(--color-velo) 35%, transparent);
    --color-velo-45: color-mix(in srgb, var(--color-velo) 45%, transparent);
    --color-velo-60: color-mix(in srgb, var(--color-velo) 60%, transparent);
    --color-velo-65: color-mix(in srgb, var(--color-velo) 65%, transparent);
    --color-velo-80: color-mix(in srgb, var(--color-velo) 80%, transparent);
    --color-brillo-25: color-mix(in srgb, var(--color-sobre-oscuro) 25%, transparent);
    --color-brillo-60: color-mix(in srgb, var(--color-sobre-oscuro) 60%, transparent);
    --color-brillo-90: color-mix(in srgb, var(--color-sobre-oscuro) 90%, transparent);
    --color-brillo-92: color-mix(in srgb, var(--color-sobre-oscuro) 92%, transparent);
    /* gráficos (Dashboard.js los lee con getComputedStyle: el JS no tiene colores propios) */
    --color-grafico-1: var(--color-primario);
    --color-grafico-2: var(--color-acento);
    --color-grafico-3: var(--color-titulo);
    --color-grafico-4: var(--jfg-azul-medio);
    --color-grafico-5: var(--color-acento-hover);
    --color-grafico-otros: color-mix(in srgb, var(--color-titulo) 35%, var(--color-superficie));                      /* porción "Otros" */
    --color-grafico-eje: color-mix(in srgb, var(--color-titulo) 19%, var(--color-fondo));                        /* línea del cero */
    --color-grafico-rejilla: color-mix(in srgb, var(--color-titulo) 3%, var(--color-fondo));                    /* líneas guía */
    /* series: avatares por iniciales y colores de datos (checklist): color de la paleta oscurecido hasta contraste >= 4,5 sobre su fondo */
    --color-serie-0: color-mix(in srgb, var(--jfg-azul-profundo) 86%, var(--color-texto)); --color-serie-0-fondo: color-mix(in srgb, var(--jfg-azul-profundo) 14%, var(--color-superficie));
    --color-serie-1: color-mix(in srgb, var(--jfg-indigo) 90%, var(--color-texto)); --color-serie-1-fondo: color-mix(in srgb, var(--jfg-indigo) 14%, var(--color-superficie));
    --color-serie-2: color-mix(in srgb, var(--jfg-azul-medio) 67%, var(--color-texto)); --color-serie-2-fondo: color-mix(in srgb, var(--jfg-azul-medio) 14%, var(--color-superficie));
    --color-serie-3: var(--jfg-azul-marino); --color-serie-3-fondo: color-mix(in srgb, var(--jfg-azul-marino) 14%, var(--color-superficie));
    --color-serie-4: color-mix(in srgb, var(--jfg-verde) 58%, var(--color-texto)); --color-serie-4-fondo: color-mix(in srgb, var(--jfg-verde) 14%, var(--color-superficie));
    --color-serie-5: color-mix(in srgb, var(--jfg-ambar) 56%, var(--color-texto)); --color-serie-5-fondo: color-mix(in srgb, var(--jfg-ambar) 14%, var(--color-superficie));
}