/* static/ui/tokens.css — única fuente de verdad. Ningún otro archivo declara colores. */
:root {
  /* ── Primitivos (no usar fuera de este archivo) ─────────────────────── */
  --af-p-azul-700: #033a9f;
  --af-p-azul-600: #0b4dc2;
  --af-p-azul-100: #e7efff;
  --af-p-azul-050: #f3f7ff;
  --af-p-navy-900: #0f2c5c;
  --af-p-navy-marca: #16213a;
  --af-p-dorado-400: #f2c230;
  --af-p-dorado-800: #866a00;
  --af-p-dorado-100: #fdf3d3;
  --af-p-rojo-700: #b91c1c;
  --af-p-rojo-600: #dc2626;
  --af-p-rojo-200: #f6dada;
  --af-p-rojo-100: #fdecec;
  --af-p-verde-700: #1a7d47;
  --af-p-verde-500: #22a85c;
  --af-p-verde-100: #e6f6ec;
  --af-p-ambar-700: #b45309;
  --af-p-ambar-100: #fff7e6;
  --af-p-gris-900: #1f2937;
  --af-p-gris-700: #334155;
  --af-p-gris-600: #475569;
  --af-p-gris-550: #5e6d83;   /* antes #64748b */
  --af-p-gris-450: #8391a5;   /* borde de control 3:1 (D5) */
  --af-p-gris-400: #94a3b8;   /* solo decorativo */
  --af-p-gris-300: #cbd5e1;
  --af-p-gris-200: #e4e9f2;
  --af-p-gris-150: #eef1f6;
  --af-p-gris-100: #f6f8fb;   /* absorbe #f7f9fc */
  --af-p-blanco: #ffffff;

  /* ── Texto ──────────────────────────────────────────────────────────── */
  --af-texto:            var(--af-p-gris-900);  /* cuerpo */
  --af-texto-titulo:     var(--af-p-navy-900);  /* h1, título de tarjeta, cifra */
  --af-texto-rotulo:     var(--af-p-gris-700);  /* rótulo de campo */
  --af-texto-secundario: var(--af-p-gris-600);  /* dato secundario importante */
  --af-texto-tenue:      var(--af-p-gris-550);  /* subtítulo, th, metadato, placeholder */
  --af-texto-enlace:     var(--af-p-azul-600);
  --af-texto-invertido:  var(--af-p-blanco);
  --af-decorativo:       var(--af-p-gris-400);  /* NUNCA texto: puntos, íconos decorativos */

  /* ── Superficies ────────────────────────────────────────────────────── */
  --af-fondo-app:        var(--af-p-gris-150);
  --af-fondo-superficie: var(--af-p-blanco);    /* tarjeta, barra superior, modal */
  --af-fondo-sutil:      var(--af-p-gris-100);  /* th, métrica, solo lectura, fila «Agregar» */
  --af-fondo-fila-hover: var(--af-p-azul-050);

  /* ── Bordes ─────────────────────────────────────────────────────────── */
  --af-borde:            var(--af-p-gris-200);  /* tarjeta, menú desplegable, métrica */
  --af-borde-divisor:    var(--af-p-gris-150);  /* entre filas y bajo la cabecera de tarjeta */
  --af-borde-control:    var(--af-p-gris-450);  /* input, select, casilla (D5: o gris-300) */
  --af-borde-fuerte:     var(--af-p-gris-300);  /* botón secundario, riel del stepper */

  /* ── Interacción ────────────────────────────────────────────────────── */
  --af-primario:         var(--af-p-azul-600);
  --af-primario-hover:   var(--af-p-azul-700);
  --af-primario-suave:   var(--af-p-azul-100);  /* placa de ícono, chip info */
  --af-acento:           var(--af-p-dorado-400);/* solo acento, nunca superficie */
  --af-peligro:          var(--af-p-rojo-600);  /* relleno del botón, punto, ícono */
  --af-peligro-hover:    var(--af-p-rojo-700);
  --af-peligro-texto:    var(--af-p-rojo-700);
  --af-peligro-suave:    var(--af-p-rojo-100);
  --af-peligro-borde:    var(--af-p-rojo-200);  /* basurero en reposo */
  --af-foco:             var(--af-p-azul-600);
  --af-foco-ancho:       2px;
  --af-foco-separacion:  2px;
  --af-foco-halo:        0 0 0 3px rgb(11 77 194 / .15);  /* solo en inputs, junto al borde azul */

  /* ── Estados (badge, chip, línea de tiempo, alerta) ─────────────────── */
  --af-info-fondo:    var(--af-p-azul-100); --af-info-texto:    var(--af-p-azul-600); --af-info-punto:    var(--af-p-azul-600);   --af-info-borde:    #d3e2ff;
  --af-tramite-fondo: var(--af-p-dorado-100); --af-tramite-texto: var(--af-p-dorado-800); --af-tramite-punto: var(--af-p-dorado-400);
  --af-alerta-fondo:  var(--af-p-rojo-100); --af-alerta-texto:  var(--af-p-rojo-700); --af-alerta-punto:  var(--af-p-rojo-600);   --af-alerta-borde:  #f8d7d7;
  --af-ok-fondo:      var(--af-p-verde-100); --af-ok-texto:      var(--af-p-verde-700); --af-ok-punto:      var(--af-p-verde-500); --af-ok-borde:      #cdeeda;
  --af-neutro-fondo:  var(--af-p-gris-150); --af-neutro-texto:  var(--af-p-gris-550); --af-neutro-punto:  var(--af-p-gris-400);
  --af-aviso-fondo:   var(--af-p-ambar-100); --af-aviso-texto:   var(--af-p-ambar-700);

  /* Prioridad (texto + ícono, sin fondo) */
  --af-prioridad-alta:  var(--af-p-rojo-700);
  --af-prioridad-media: var(--af-p-dorado-800);
  --af-prioridad-baja:  var(--af-p-verde-700);

  /* Íconos de archivo */
  --af-archivo-pdf:   #d93025;
  --af-archivo-excel: #217346;
  --af-archivo-word:  #2b579a;

  /* Avatares (blanco encima ≥ 4,5:1) */
  --af-avatar-1: #0b4dc2; --af-avatar-2: #1a7d47; --af-avatar-3: #b91c1c;
  --af-avatar-4: #7c3aed; --af-avatar-5: #0e7490; --af-avatar-6: #b45309;
  --af-avatar-7: #be185d; --af-avatar-8: #0f766e; --af-avatar-9: #4338ca;

  /* Tooltip y velos */
  --af-tooltip-fondo: #3c4043;
  --af-velo:          rgb(8 21 48 / .5);    /* menú off-canvas y modal */
  --af-velo-espera:   rgb(15 44 92 / .28);  /* espera AJAX */

  /* ── Tipografía ─────────────────────────────────────────────────────── */
  --af-fuente: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --af-fs-11: .6875rem;  /* th, rótulo de métrica, chip, sección del menú */
  --af-fs-12: .75rem;    /* badge, dato secundario, ayuda, error de campo */
  --af-fs-13: .8125rem;  /* rótulo de campo, breadcrumb, subítem, ítem de kebab, btn compacto, celda fluida */
  --af-fs-14: .875rem;   /* cuerpo, celda, input, botón, ítem del menú */
  --af-fs-15: .9375rem;  /* título de tarjeta */
  --af-fs-18: 1.125rem;  /* cifra de métrica */
  --af-fs-20: 1.25rem;   /* h2 */
  --af-fs-25: 1.5625rem; /* h1 y cifra de la bandeja */
  --af-peso-normal: 400; --af-peso-medio: 500; --af-peso-semi: 600; --af-peso-negrita: 700; --af-peso-titulo: 800;
  --af-interlineado: 1.5;
  --af-interlineado-titulo: 1.2;
  --af-tracking-mayus: .05em;   /* 11px → .55px, 13px → .65px */
  --af-tracking-h1: -.012em;    /* 25px → -.3px */

  /* ── Espaciado (base 4) ─────────────────────────────────────────────── */
  --af-esp-1: 4px;  --af-esp-2: 8px;   --af-esp-3: 12px; --af-esp-4: 16px;
  --af-esp-5: 20px; --af-esp-6: 24px;  --af-esp-8: 32px; --af-esp-12: 48px;

  /* ── Tamaños de control ─────────────────────────────────────────────── */
  --af-alto-control: 42px;      /* input, select, Select2, botón */
  --af-alto-compacto: 36px;     /* btn-sm, botón de ícono, kebab, paginador, «Salir» */
  --af-objetivo-tactil: 44px;   /* área mínima de toque bajo 768px */

  /* ── Radios ─────────────────────────────────────────────────────────── */
  --af-r-control: 8px;    /* input, botón, kebab, métrica, placa de ícono, grupo de menú */
  --af-r-tarjeta: 12px;   /* tarjeta, menú desplegable, marca */
  --af-r-modal: 16px;
  --af-r-pastilla: 999px; /* badge, chip, gap del stepper */

  /* ── Sombras ────────────────────────────────────────────────────────── */
  --af-sombra-tarjeta:  0 1px 2px rgb(15 30 60 / .04);
  --af-sombra-hover:    0 4px 12px rgb(15 30 60 / .08);   /* bandeja y acceso rápido en hover */
  --af-sombra-boton:    0 2px 6px rgb(11 77 194 / .28);
  --af-sombra-flotante: 0 12px 32px rgb(15 30 60 / .18);  /* kebab y rótulo del rail */
  --af-sombra-modal:    0 24px 60px rgb(8 21 48 / .4);

  /* ── z-index (alineado a Bootstrap 5) ───────────────────────────────── */
  --af-z-ancla: 2;          /* kebab absoluto dentro de la tarjeta-fila, etc. */
  --af-z-dropdown: 1000;    /* = --bs-dropdown-zindex */
  --af-z-sticky: 1020;      /* barra superior, barra de monto */
  --af-z-menu-velo: 1040;
  --af-z-menu: 1045;        /* off-canvas */
  /* 1050 / 1055 = backdrop y modal de Bootstrap (no se redefinen) */
  --af-z-flotante: 1070;    /* rótulo fijo del rail */
  --af-z-tooltip: 1080;
  --af-z-espera: 1100;      /* sobre todo, incluso los modales */

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --af-menu-ancho: 250px;
  --af-menu-rail: 64px;
  --af-topbar-alto: 64px;
  --af-scroll-carril: 8px;
  --af-contenido-padding: 32px 32px 48px;
  --af-contenido-max: none;  /* hoy sin tope; ver D8 */

  /* Breakpoints: los @media no leen var(). Son constantes documentales
     que JS puede leer con getComputedStyle. Los únicos cortes válidos: */
  --af-bp-sm: 480px;   /* métricas de a una */
  --af-bp-md: 768px;   /* tabla → tarjetas, filtros en una columna */
  --af-bp-lg: 1024px;  /* menú off-canvas bajo este ancho; rail sobre él */
  --af-bp-xl: 1200px;  /* tabla fluida compacta bajo este ancho */

  /* ── Menú: tema claro (predeterminado) ──────────────────────────────── */
  --af-menu-fondo: linear-gradient(185deg, #ffffff, #f3f7fd);
  --af-menu-borde: #dfe6f1;
  --af-menu-texto: var(--af-p-gris-600);          /* 7,05 en el peor punto */
  --af-menu-texto-sub: var(--af-p-gris-550);      /* 4,89 */
  --af-menu-texto-seccion: var(--af-p-gris-550);  /* 4,89 · 11px/700 */
  --af-menu-hover-fondo: #eaf1fd;
  --af-menu-hover-texto: var(--af-p-navy-900);
  --af-menu-activo-fondo: #e2ecfb;
  --af-menu-activo-texto: var(--af-p-azul-600);   /* 6,17; en el rail, el ícono activo va en este color */
  --af-menu-activo-barra: var(--af-p-dorado-400); /* decorativa: no es la única señal */
  --af-menu-buscador-fondo: #f4f7fc;
  --af-menu-buscador-borde: #d6deea;
  --af-menu-foco: var(--af-p-azul-600);
  --af-menu-sombra-scroll: rgb(15 30 60 / .20);
  --af-menu-scroll-pulgar: #c5cfde;
  --af-scroll-pulgar: #c5cfde;                    /* resto de la app */
}

/* Menú: tema oscuro. Afecta SOLO al menú (html[data-menu-tema="oscuro"]). */
html[data-menu-tema="oscuro"] {
  --af-menu-fondo: linear-gradient(185deg, #141d2e, #080d16);
  --af-menu-borde: transparent;
  --af-menu-texto: #aebdd6;              /* 8,88 */
  --af-menu-texto-sub: #9fb0cc;          /* 7,68 */
  --af-menu-texto-seccion: #7890c1;      /* 5,27 (antes #7089bd: 4,25 sobre navy) */
  --af-menu-hover-fondo: rgb(255 255 255 / .06);
  --af-menu-hover-texto: #ffffff;
  --af-menu-activo-fondo: rgb(255 255 255 / .08);
  --af-menu-activo-texto: #ffffff;       /* 13,4 */
  --af-menu-activo-barra: var(--af-p-dorado-400); /* 8,0: aquí sí es señal suficiente */
  --af-menu-buscador-fondo: rgb(255 255 255 / .06);
  --af-menu-buscador-borde: rgb(255 255 255 / .14);
  --af-menu-foco: var(--af-p-dorado-400);
  --af-menu-sombra-scroll: rgb(0 0 0 / .45);
  --af-menu-scroll-pulgar: rgb(255 255 255 / .28);
}