/* Tokens de MCyL: copiados del proyecto modelo del encargo 1.3 (tokens.css, renovación
   visual 4.1f1) con el prefijo `--pf-` cambiado a `--fg-` (encargo 1.3, decisión 7).

   Donde el comentario de cabecera del modelo da la equivalencia con los `--fg-*` de su
   DESIGN.md, se usa ese nombre (p. ej. --pf-tinta → --fg-texto, --pf-accion-fuerte →
   --fg-accion-hover, --pf-fuente-cifra → --fg-mono, --pf-r-pastilla → --fg-r-pildora,
   --pf-ok → --fg-exito); el resto conserva su nombre con el prefijo nuevo.

   Rojo de marca (#EE1D23, --fg-firma): solo en la marca y el filete, nunca para errores.
   Estados: cada uno con palabra o icono, nunca solo color.
   La familia IBM Plex Mono se empaqueta en 400 y 500. */
:root {
  /* Acción y firma */
  --fg-accion: #B3197C;
  --fg-accion-hover: #8E0F60;
  --fg-seleccion: #F7E9F2;
  --fg-firma: #EE1D23;

  /* Marca (decorativos: nunca texto) */
  --fg-verde: #7FB25C;
  --fg-verde-oscuro: #2A6B4F;
  --fg-azul: #56A0D3;
  --fg-azul-suave: #EDF4FB;

  /* Texto, fondos y líneas */
  --fg-texto: #2E2E30;
  --fg-texto-2: #5A5A5E;
  --fg-fondo: #F5F5F2;
  --fg-superficie: #FFFFFF;
  --fg-linea: #E2E2DC;
  --fg-borde-boton: #DEDED8;
  --fg-borde-campo: #8A8A86;
  --fg-borde-tarjeta: #ECECE6;
  --fg-linea-suave: #EFEFEA;
  --fg-fila-separador: #F2F2EE;
  --fg-fila-hover: #FAFAF7;
  --fg-esqueleto: #EFEFEA;
  --fg-esqueleto-brillo: #F8F8F4;

  /* Estados: cada uno lleva icono y palabra, nunca solo color */
  --fg-exito: #35651C;
  --fg-ok-fondo: #F1F8EC;
  --fg-aviso: #8C520E;
  --fg-aviso-fondo: #FDF1E7;
  --fg-error: #A5121A;
  --fg-error-fondo: #FDEDEE;
  --fg-info: #1D5280;
  --fg-info-fondo: #EDF4FB;

  /* Banda de entorno (desarrollo y preproducción): rayas a 45° y etiqueta blanca */
  --fg-banda-a: #F2A541;
  --fg-banda-b: #F7C27C;
  --fg-banda-rayas: repeating-linear-gradient(-45deg, var(--fg-banda-a) 0 12px, var(--fg-banda-b) 12px 24px);

  /* Fondo de página: dos degradados suaves sobre el color de fondo */
  --fg-fondo-degradado: radial-gradient(900px 520px at 0 0, rgba(179, 25, 124, 0.07), transparent 65%), radial-gradient(900px 520px at 100% 0, rgba(86, 160, 211, 0.10), transparent 65%);

  /* Filete de marca de 4 px: rojo 3/6, magenta 1/6, verde 1/6, azul 1/6 */
  --fg-filete: linear-gradient(90deg, var(--fg-firma) 0 50%, var(--fg-accion) 50% 66.667%, var(--fg-verde) 66.667% 83.333%, var(--fg-azul) 83.333% 100%);

  /* Barra lateral translúcida, velos y brillo de carga */
  --fg-lateral-fondo: rgba(255, 255, 255, 0.78);
  --fg-lateral-desenfoque: blur(12px);
  --fg-velo-modal: rgba(46, 46, 48, 0.45);
  --fg-velo-carga: rgba(245, 245, 242, 0.88);
  --fg-velo-desenfoque: blur(2px);
  --fg-borde-sobre-oscuro: rgba(255, 255, 255, 0.4);
  --fg-hover-sobre-oscuro: rgba(255, 255, 255, 0.1);
  --fg-esqueleto-degradado: linear-gradient(90deg, var(--fg-esqueleto) 0, var(--fg-esqueleto-brillo) 50%, var(--fg-esqueleto) 100%);

  /* Tipografía */
  --fg-fuente: "Archivo", system-ui, sans-serif;
  --fg-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fg-peso-medio: 500;
  --fg-peso-seminegrita: 600;
  --fg-peso-negrita: 700;
  --fg-t-display: 500 40px/1 var(--fg-mono);
  --fg-t-titulo: 700 30px/1.15 var(--fg-fuente);
  --fg-t-seccion: 700 20px/1.2 var(--fg-fuente);
  --fg-t-tarjeta: 700 17px/1.2 var(--fg-fuente);
  --fg-t-lectura: 400 16px/1.5 var(--fg-fuente);
  --fg-t-base: 400 14px/1.45 var(--fg-fuente);
  --fg-t-base-fuerte: 600 14px/1.45 var(--fg-fuente);
  --fg-t-boton: 600 14px/1.2 var(--fg-fuente);
  --fg-t-boton-grande: 600 15px/1.2 var(--fg-fuente);
  --fg-t-boton-pequeno: 600 13px/1.2 var(--fg-fuente);
  --fg-t-ayuda: 400 13px/1.4 var(--fg-fuente);
  --fg-t-etiqueta: 600 12.5px/1.4 var(--fg-fuente);
  --fg-t-grupo: 700 11px/1.3 var(--fg-fuente);
  --fg-t-cabecera-tabla: 700 11.5px/1.3 var(--fg-fuente);
  --fg-t-pildora: 600 12px/1.25 var(--fg-fuente);
  --fg-t-cifra: 500 13px/1.3 var(--fg-mono);
  --fg-t-cifra-fuerte: 500 14px/1.3 var(--fg-mono);
  --fg-t-cifra-pequena: 500 12px/1.3 var(--fg-mono);
  --fg-ls-titulo: -0.02em;
  --fg-ls-tarjeta: -0.01em;
  --fg-ls-display: -0.03em;
  --fg-ls-grupo: 0.14em;
  --fg-ls-seccion: 0.12em;
  --fg-ls-cabecera-tabla: 0.1em;
  --fg-ls-codigo: 0.08em;

  /* Espaciado (escala de 4 px de DESIGN.md §3) */
  --fg-e-1: 4px;
  --fg-e-2: 8px;
  --fg-e-3: 12px;
  --fg-e-4: 16px;
  --fg-e-5: 20px;
  --fg-e-6: 24px;
  --fg-e-7: 28px;
  --fg-e-8: 32px;
  --fg-e-12: 48px;

  /* Radios */
  --fg-r-campo: 12px;
  --fg-r-aviso: 12px;
  --fg-r-tarjeta: 18px;
  --fg-r-pildora: 999px;
  --fg-r-sello: 8px;

  /* Sombras */
  --fg-sombra-tarjeta: 0 18px 48px -26px rgba(46, 46, 48, 0.20), 0 2px 6px rgba(46, 46, 48, 0.04);
  --fg-sombra-accion: 0 8px 20px -8px rgba(179, 25, 124, 0.60);
  --fg-sombra-modal: 0 40px 100px -30px rgba(46, 46, 48, 0.60);
  --fg-sombra-lote: 0 20px 48px -16px rgba(46, 46, 48, 0.55);

  /* Foco y movimiento */
  --fg-foco: 3px solid var(--fg-info);
  --fg-foco-oscuro: 3px solid var(--fg-superficie);
  --fg-transicion: 150ms;
}