/* ==========================================================================
   COPIA — NO EDITAR ACÁ. La fuente es queuereport_admin/static/css/qr_tokens.css
   (misma regla que channel_contracts.py: el admin manda, la consola recopia).
   Estas 12 líneas de cabecera son lo único propio; debajo va el archivo tal cual.
   Recopiar (desde la raíz de qreport, ADMIN = ruta del repo admin):
     (head -n 12 agente/static/qr_tokens.css; cat "$ADMIN/static/css/qr_tokens.css") \
       > /tmp/qr_tokens.css && mv /tmp/qr_tokens.css agente/static/qr_tokens.css
   Verificar que no quedó desfasada:
     tail -n +13 agente/static/qr_tokens.css | diff - "$ADMIN/static/css/qr_tokens.css"
   Lo cargan con <link> templates/svelte/page_main.html y page_login.html.
   Los temas (static/themes/) también son copia de static/css/themes/ del admin.
   ========================================================================== */
/* ==========================================================================
   QueueReport — TOKENS DE DISEÑO (fuente única del tema)

   Este archivo es el ÚNICO lugar con valores literales de color, tipografía,
   radio, sombra, espaciado y tiempos. Todo el resto (queuereport_global.css,
   queuereport_reports.css, los <style> de las pantallas) usa `var(--qr-…)`.

   Se carga ANTES de queuereport_global.css en todos los layouts, y DESPUÉS de
   coreui.min.css: así los `--cui-*` de abajo pisan los de CoreUI (misma
   especificidad, gana el último).

   Capas, de abajo hacia arriba:
     1. Paleta cruda   `--qr-<tono>-<paso>` (Tailwind + algunos intermedios propios).
     2. Semánticos     `--qr-primary`, `--qr-text`, `--qr-surface`, `--qr-border`,
                       `--qr-ok/warn/bad/info`… Es lo que usa el CSS del sistema.
     3. Escalas        tipografía `--qr-fs-*`, espaciado `--qr-sp-*`, radios
                       `--qr-radius-*`, sombras `--qr-shadow-*`, tiempos `--qr-dur-*`.
     3b. Componente    la FORMA de cada pieza: `--qr-control-*`, `--qr-btn-*`,
                       `--qr-table-*`, `--qr-card-*`, `--qr-modal-*`, `--qr-density`…
                       (+ sus puentes `.btn`/`.card`/`.nav` de CoreUI).
     4. Puentes        CoreUI/Bootstrap (`--cui-*`, `--bs-*`) y reportes (`--rd-*`)
                       apuntando a los semánticos: así las clases de Bootstrap
                       (`text-muted`, `btn-primary` de CoreUI, `form-check`…) y los
                       reportes siguen al tema sin tocar marcado.

   TEMAS: un tema es un archivo `static/css/themes/<nombre>.css` que SÓLO redefine
   variables bajo `:root[data-qr-theme="<nombre>"]` (más específico que `:root`,
   así gana sin importar el orden). El layout pone `data-qr-theme` en <html> a
   partir de `settings.QR_THEME` (default "qr" = este archivo, sin archivo extra).
   Ver SISTEMA_DE_DISENO.md → "Tokens y temas".

   REGLA: nada de `:root { … }` fuera de este archivo (y de los temas). Un token
   definido dos veces no da error: gana el de abajo y el otro desaparece.

   La consola del asesor usa una COPIA de este archivo (el admin es la fuente,
   igual que channel_contracts.py): si lo cambiás acá, se recopia allá.
   ========================================================================== */

:root {
    /* ======================================================================
       1. PALETA CRUDA — valores, sin significado. No usar directo en pantallas
          nuevas: preferir el semántico. Existen para las utilidades por tono
          (`.bg-pink-100`, `.qr-accent-teal`…) y para lo que todavía no tiene
          nombre semántico.
       ====================================================================== */
    --qr-white: #ffffff; --qr-black: #000000;
    --qr-white-rgb: 255, 255, 255; --qr-black-rgb: 0, 0, 0;

    --qr-slate-50: #f8fafc; --qr-slate-100: #f1f5f9; --qr-slate-150: #eef1f6; --qr-slate-200: #e2e8f0; --qr-slate-250: #dde3ec;
    --qr-slate-300: #cbd5e1; --qr-slate-350: #b9c5d8; --qr-slate-400: #94a3b8; --qr-slate-450: #8794a8; --qr-slate-500: #64748b;
    --qr-slate-600: #475569; --qr-slate-700: #334155; --qr-slate-800: #1e293b; --qr-slate-900: #0f172a;
    --qr-slate-500-rgb: 100, 116, 139; --qr-slate-900-rgb: 15, 23, 42;
    --qr-gray-50: #f9fafb; --qr-gray-100: #f3f4f6; --qr-gray-200: #e5e7eb; --qr-gray-300: #d1d5db; --qr-gray-400: #9ca3af;
    --qr-gray-450: #9aa0a6;
    --qr-gray-500: #6b7280; --qr-gray-600: #4b5563; --qr-gray-700: #374151; --qr-gray-800: #1f2937; --qr-gray-900: #111827;
    --qr-zinc-50: #fafafa;
    /* Navy: los azul-grisáceos de la banda de tabs y de los reportes. */
    --qr-navy-50: #eaf1fb; --qr-navy-100: #dbe4f0; --qr-navy-150: #cfd9e8; --qr-navy-200: #b9c9de;
    --qr-navy-700: #1e3a5f; --qr-navy-800: #153a5e;
    --qr-navy-800-rgb: 21, 58, 94;
    /* Grises de Bootstrap que quedaron en subtítulos y avisos viejos. */
    --qr-bs-gray-600: #6c757d; --qr-bs-gray-900: #212529; --qr-bs-blue: #0d6efd;

    --qr-red-50: #fef2f2; --qr-red-100: #fee2e2; --qr-red-200: #fecaca; --qr-red-300: #fca5a5; --qr-red-400: #f87171;
    --qr-red-500: #ef4444; --qr-red-600: #dc2626; --qr-red-700: #b91c1c; --qr-red-800: #991b1b; --qr-red-900: #7f1d1d;
    --qr-red-600-rgb: 220, 38, 38;
    --qr-orange-50: #fff7ed; --qr-orange-100: #ffedd5; --qr-orange-200: #fed7aa; --qr-orange-300: #fdba74; --qr-orange-400: #fb923c;
    --qr-orange-500: #f97316; --qr-orange-600: #ea580c; --qr-orange-700: #c2410c; --qr-orange-800: #9a3412; --qr-orange-900: #7c2d12;
    --qr-orange-500-rgb: 249, 115, 22;
    --qr-amber-50: #fffbeb; --qr-amber-100: #fef3c7; --qr-amber-200: #fde68a; --qr-amber-300: #fcd34d; --qr-amber-400: #fbbf24;
    --qr-amber-500: #f59e0b; --qr-amber-600: #d97706; --qr-amber-700: #b45309; --qr-amber-800: #92400e; --qr-amber-900: #78350f;
    --qr-yellow-50: #fefce8; --qr-yellow-100: #fef9c3; --qr-yellow-200: #fef08a; --qr-yellow-300: #fde047; --qr-yellow-400: #facc15;
    --qr-yellow-500: #eab308; --qr-yellow-600: #ca8a04; --qr-yellow-700: #a16207; --qr-yellow-800: #854d0e; --qr-yellow-900: #713f12;
    --qr-green-50: #f0fdf4; --qr-green-100: #dcfce7; --qr-green-200: #bbf7d0; --qr-green-300: #86efac; --qr-green-400: #4ade80;
    --qr-green-500: #22c55e; --qr-green-600: #16a34a; --qr-green-700: #15803d; --qr-green-800: #166534; --qr-green-900: #14532d;
    --qr-green-500-rgb: 34, 197, 94;
    --qr-emerald-50: #ecfdf5; --qr-emerald-100: #d1fae5; --qr-emerald-200: #a7f3d0; --qr-emerald-300: #6ee7b7; --qr-emerald-400: #34d399;
    --qr-emerald-500: #10b981; --qr-emerald-600: #059669; --qr-emerald-700: #047857; --qr-emerald-800: #065f46; --qr-emerald-900: #064e3b;
    --qr-teal-50: #f0fdfa; --qr-teal-100: #ccfbf1; --qr-teal-200: #99f6e4; --qr-teal-300: #5eead4; --qr-teal-400: #2dd4bf;
    --qr-teal-500: #14b8a6; --qr-teal-600: #0d9488; --qr-teal-700: #0f766e; --qr-teal-800: #115e59; --qr-teal-900: #134e4a;
    --qr-teal-500-rgb: 20, 184, 166;
    --qr-cyan-50: #ecfeff; --qr-cyan-100: #cffafe; --qr-cyan-200: #a5f3fc; --qr-cyan-300: #67e8f9; --qr-cyan-400: #22d3ee;
    --qr-cyan-500: #06b6d4; --qr-cyan-600: #0891b2; --qr-cyan-700: #0e7490; --qr-cyan-800: #155e75; --qr-cyan-900: #164e63;
    --qr-sky-500: #0ea5e9;
    --qr-blue-50: #eff6ff; --qr-blue-100: #dbeafe; --qr-blue-200: #bfdbfe; --qr-blue-300: #93c5fd; --qr-blue-400: #60a5fa;
    --qr-blue-500: #3b82f6; --qr-blue-600: #2563eb; --qr-blue-700: #1d4ed8; --qr-blue-800: #1e40af; --qr-blue-900: #1e3a8a;
    --qr-blue-560: #3d5af1; --qr-bs-indigo: #6610f2;   /* ilustración del login de la consola */
    --qr-indigo-50: #eef2ff; --qr-indigo-100: #e0e7ff; --qr-indigo-200: #c7d2fe; --qr-indigo-300: #a5b4fc; --qr-indigo-400: #818cf8;
    --qr-indigo-500: #6366f1; --qr-indigo-600: #4f46e5; --qr-indigo-700: #4338ca; --qr-indigo-800: #3730a3; --qr-indigo-900: #312e81;
    --qr-indigo-500-rgb: 99, 102, 241;
    --qr-violet-50: #f5f3ff; --qr-violet-100: #ede9fe; --qr-violet-200: #ddd6fe; --qr-violet-300: #c4b5fd; --qr-violet-400: #a78bfa;
    --qr-violet-500: #8b5cf6; --qr-violet-600: #7c3aed; --qr-violet-700: #6d28d9; --qr-violet-800: #5b21b6; --qr-violet-900: #4c1d95;
    --qr-violet-500-rgb: 139, 92, 246;
    --qr-purple-50: #faf5ff; --qr-purple-100: #f3e8ff; --qr-purple-200: #e9d5ff; --qr-purple-300: #d8b4fe; --qr-purple-400: #c084fc;
    --qr-purple-500: #a855f7; --qr-purple-600: #9333ea; --qr-purple-700: #7e22ce; --qr-purple-800: #6b21a8; --qr-purple-900: #581c87;
    --qr-pink-50: #fdf2f8; --qr-pink-100: #fce7f3; --qr-pink-200: #fbcfe8; --qr-pink-300: #f9a8d4; --qr-pink-400: #f472b6;
    --qr-pink-500: #ec4899; --qr-pink-600: #db2777; --qr-pink-700: #be185d; --qr-pink-800: #9d174d; --qr-pink-900: #831843;

    /* ---- Agregados al portar la consola del asesor (24/09/2026) ----
       Tailwind que faltaban: */
    --qr-gray-950: #030712;
    --qr-sky-100: #e0f2fe; --qr-sky-200: #bae6fd; --qr-sky-300: #7dd3fc; --qr-sky-600: #0284c7;
    --qr-sky-700: #0369a1;
    /* Intermedios de la consola: literales sin token a ΔE ≤ 2. Nombre = familia
       más cercana + paso interpolado por luminosidad (como slate-150). No usar en
       pantallas nuevas: preferir el paso Tailwind o el semántico. */
    --qr-emerald-80: #e4f9ec; --qr-emerald-205: #c4ecd4; --qr-emerald-285: #a7e0c4; --qr-emerald-335: #86dba8;
    --qr-emerald-340: #a3d3bd; --qr-emerald-695: #0f7a4f;
    --qr-gray-250: #d9dee3; --qr-gray-840: #1c2130; --qr-gray-895: #111924;
    --qr-green-135: #d1fadf; --qr-green-705: #1a7f4b; --qr-green-725: #0f7a3d; --qr-green-785: #15693d;
    --qr-indigo-170: #d3d8fb;
    --qr-navy-80: #e5e8f5;
    --qr-orange-15: #fffdf5; --qr-orange-165: #f3e2bd; --qr-orange-170: #f2e2b8; --qr-orange-175: #fbe1a0;
    --qr-pink-665: #b4434b; --qr-pink-775: #97333a;
    --qr-red-180: #f5d2d2; --qr-red-625: #c9372c; --qr-red-805: #8a2e33;
    --qr-sky-220: #bae0fb;
    --qr-slate-175: #e9ecf5; --qr-slate-275: #d7dbe7; --qr-slate-310: #cbd1e1; --qr-slate-375: #aeb4c7;
    --qr-yellow-530: #e0a800; --qr-yellow-545: #d6a419; --qr-yellow-620: #b8860b; --qr-yellow-645: #9c8253;
    --qr-yellow-675: #997404; --qr-yellow-695: #8a6d3b; --qr-yellow-710: #92660b; --qr-yellow-745: #92591b;
    /* Bootstrap (avisos y "danger" que la consola heredó de BS 5). */
    --qr-bs-red: #dc3545;
    --qr-bs-green-100: #d1e7dd;
    --qr-bs-red-100: #f8d7da; --qr-bs-red-200: #f1aeb5;
    /* Marcas de canal (puntos y chips de WhatsApp, Instagram, Messenger, Telegram):
       son colores de la marca ajena, un tema NO los cambia. */
    --qr-brand-whatsapp: #25d366;
    --qr-brand-instagram-1: #feda75; --qr-brand-instagram-2: #d62976; --qr-brand-instagram-3: #962fbf;
    --qr-brand-instagram-text: #c13584; --qr-brand-instagram-border: #f5c6e0;
    --qr-brand-messenger: #0084ff; --qr-brand-messenger-text: #0067cc; --qr-brand-messenger-border: #c2dffb;
    --qr-brand-telegram: #29a9eb; --qr-brand-telegram-text: #1d8fcc; --qr-brand-telegram-border: #c4e6f8;
    /* WhatsApp por dentro (vistas previas de plantillas y burbujas): imitan su interfaz. */
    --qr-brand-whatsapp-header: #075e54;  --qr-brand-whatsapp-accent: #128c7e;
    --qr-brand-whatsapp-wallpaper: #efeae2; --qr-brand-whatsapp-wallpaper-2: #ece5dd;
    --qr-brand-whatsapp-bubble-out: #d9fdd3;
    --qr-brand-whatsapp-ink: #111b21;     --qr-brand-whatsapp-ink-2: #3b4a54;  --qr-brand-whatsapp-meta: #667781;
    --qr-brand-whatsapp-tick: #8696a0;    --qr-brand-whatsapp-tick-read: #53bdeb;
    --qr-brand-whatsapp-error: #e5484d;   --qr-brand-whatsapp-link: #027eb5;
    /* Más marcas ajenas (un tema no las cambia). */
    --qr-brand-whatsapp-deep:        #0b3d2e;
    --qr-brand-whatsapp-rgb:         37, 211, 102;
    --qr-brand-whatsapp-accent-rgb:  18, 140, 126;
    --qr-brand-meta:                 #1877f2;
    /* Proveedores de IA (avatar del listado de integraciones). */
    --qr-brand-openai: #10a37f;   --qr-brand-azure: #0078d4;    --qr-brand-anthropic: #d97757;
    --qr-brand-gemini: #4285f4;   --qr-brand-openrouter: #6467f2; --qr-brand-deepseek: #4d6bfe;
    --qr-brand-grok:   #111827;   --qr-brand-ollama: #334155;

    /* Canales rgb para rgba(var(--x-rgb), alfa). */
    --qr-bs-red-rgb: 220, 53, 69; --qr-gray-500-rgb: 107, 114, 128; --qr-gray-600-rgb: 75, 85, 99; --qr-gray-840-rgb: 28, 33, 48; --qr-gray-895-rgb: 17, 25, 36; --qr-gray-950-rgb: 3, 7, 18;

    /* ======================================================================
       2. SEMÁNTICOS — esto es lo que cambia un tema.
       ====================================================================== */

    /* Primario ÚNICO del sistema: indigo #4f46e5. Antes convivían tres
       (#4f46e5 qr, #1d4ed8 de reportes, #5856d6 de CoreUI); CoreUI se alinea acá
       abajo (sección 4) y el azul de reportes pasa a ser `--qr-report-accent`.
       Un tema redefine la escala completa (25…950) y `--qr-primary-rgb`. */
    --qr-primary-25:            #f7f8ff;
    --qr-primary-50:            #eef2ff;
    --qr-primary-100:           #e0e7ff;
    --qr-primary-125:           #dfe3f5;
    --qr-primary-150:           #dcdcf8;
    --qr-primary-175:           #d5daf0;
    --qr-primary-200:           #c7d2fe;
    --qr-primary-300:           #a5b4fc;
    --qr-primary-400:           #818cf8;
    --qr-primary-500:           #6366f1;
    --qr-primary-600:           #4f46e5;
    --qr-primary-700:           #4338ca;
    --qr-primary-800:           #3730a3;
    --qr-primary-900:           #312e81;
    --qr-primary-950:           #1e1b4b;
    --qr-primary-rgb:           79, 70, 229;
    --qr-primary-dark-rgb:      55, 48, 163;
    --qr-primary-light-rgb:     99, 102, 241;   /* links del modo oscuro de la consola */
    --qr-primary-400-rgb:       129, 140, 248;
    /* nombres de uso */
    --qr-primary:               var(--qr-primary-600);
    --qr-primary-hover:         var(--qr-primary-700);
    --qr-primary-dark:          var(--qr-primary-800);
    --qr-primary-light:         var(--qr-primary-500);
    --qr-primary-soft:          var(--qr-primary-50);    /* fondo de un elemento activo */
    --qr-primary-subtle:        var(--qr-primary-100);
    /* Texto en color primario sobre fondo suave (pastilla primaria, paso activo). No es
       --qr-primary-hover, que también es fondo de botón: en oscuro éste se aclara y aquél no. */
    --qr-primary-ink:           var(--qr-primary-700);
    /* Texto sobre un fondo de advertencia (amarillo): oscuro en los dos modos. */
    --qr-on-warning:            var(--qr-slate-900);
    --qr-primary-border-subtle: var(--qr-primary-200);
    --qr-on-primary:            var(--qr-white);          /* texto sobre el primario */

    /* Texto */
    --qr-text:                  var(--qr-slate-900);
    --qr-text-secondary:        var(--qr-slate-500);
    --qr-text-muted:            var(--qr-slate-400);
    --qr-text-inverse:          var(--qr-white);          /* texto sobre fondos oscuros o de color */
    --qr-text-rgb:              15, 23, 42;

    /* Superficies */
    --qr-body-bg:               var(--qr-slate-100);      /* fondo de la página */
    --qr-surface:               var(--qr-white);          /* tarjetas, paneles, modales */
    --qr-surface-2:             var(--qr-slate-50);       /* superficie suave: cabezales, zebra */
    --qr-surface-3:             var(--qr-slate-100);      /* hundida: hovers, pistas */

    /* Bordes */
    --qr-border:                var(--qr-slate-200);      /* divisores y tarjetas */
    --qr-border-strong:         var(--qr-slate-300);      /* contornos que tienen que verse */
    --qr-border-soft:           var(--qr-slate-150);      /* separadores internos */
    --qr-line-soft:             var(--qr-border-soft);    /* alias: lo usaban pantallas sin definirlo */

    /* Estados. Base = el color sólido (íconos, puntos, barras); -bg/-border/-text
       = el tono suave de un aviso (lo que usa `.alert-*`). */
    --qr-success:               var(--qr-emerald-500);
    --qr-warning:               var(--qr-amber-500);
    --qr-danger:                var(--qr-red-500);
    --qr-info:                  var(--qr-blue-500);
    --qr-success-rgb:           16, 185, 129;
    --qr-warning-rgb:           245, 158, 11;
    --qr-danger-rgb:            239, 68, 68;
    --qr-info-rgb:              59, 130, 246;
    --qr-ok:                    var(--qr-success);
    --qr-warn:                  var(--qr-warning);
    --qr-bad:                   var(--qr-danger);
    --qr-ok-bg:   #edf8f3;  --qr-ok-border:   #cbead9;  --qr-ok-text:   #176b4c;
    --qr-warn-bg: #fdf7e9;  --qr-warn-border: #f6e3b6;  --qr-warn-text: #8a5b0a;
    --qr-bad-bg:  var(--qr-red-50); --qr-bad-border: #f9d4d4; --qr-bad-text: #99302f;
    --qr-info-bg: #eff5fe;  --qr-info-border: #d3e3fa;  --qr-info-text: #1c4e8a;

    /* ---- Agregados en la Fase 2 (componentes compartidos, 24/09/2026) ----
       Los componentes y las pantallas usan SÓLO semánticos: nunca la paleta cruda
       (`--qr-slate-600`, `--qr-red-600`…). Estos cubren lo que faltaba. */
    /* Rampa de texto neutro, de más fuerte a más tenue (entre --qr-text y --qr-text-muted). */
    --qr-text-emphasis:         var(--qr-slate-800);      /* títulos dentro de un panel */
    --qr-text-strong:           var(--qr-slate-700);      /* valores, texto de un control */
    --qr-text-body:             var(--qr-slate-600);      /* etiquetas, cuerpo secundario */
    --qr-text-faint:            var(--qr-slate-300);      /* deshabilitado, íconos apagados */
    --qr-text-muted-rgb:        148, 163, 184;
    /* Superficies extra */
    --qr-surface-sunken:        var(--qr-slate-150);      /* hundida más marcada: pistas, celdas vacías */
    --qr-surface-strong:        var(--qr-slate-200);      /* relleno neutro: botón presionado, barra */
    --qr-backdrop:              rgba(var(--qr-black-rgb), .5);   /* fondo detrás de un modal */
    /* Links fuera de CoreUI (chats, fichas) */
    --qr-link:                  var(--qr-info-600);
    --qr-link-hover:            var(--qr-info-700);
    --qr-link-rgb:              37, 99, 235;
    /* Rampas por estado: el paso fino que no cubren -bg/-border/-text (fondos suaves,
       bordes, textos sobre blanco). Un tema cambia la rampa entera. "special" es el acento
       de lo automático: variables de plantilla, herramientas del bot, eventos. */
    --qr-danger-50:  var(--qr-red-50);   --qr-danger-100: var(--qr-red-100);  --qr-danger-200: var(--qr-red-200);
    --qr-danger-300: var(--qr-red-300);  --qr-danger-400: var(--qr-red-400);  --qr-danger-500: var(--qr-red-500);
    --qr-danger-600: var(--qr-red-600);  --qr-danger-700: var(--qr-red-700);  --qr-danger-800: var(--qr-red-800);
    --qr-danger-900: var(--qr-red-900);
    --qr-warning-50:  var(--qr-amber-50);  --qr-warning-100: var(--qr-amber-100); --qr-warning-200: var(--qr-amber-200);
    --qr-warning-300: var(--qr-amber-300); --qr-warning-400: var(--qr-amber-400); --qr-warning-500: var(--qr-amber-500);
    --qr-warning-600: var(--qr-amber-600); --qr-warning-700: var(--qr-amber-700); --qr-warning-800: var(--qr-amber-800);
    --qr-warning-900: var(--qr-amber-900);
    --qr-success-50:  var(--qr-green-50);  --qr-success-100: var(--qr-green-100); --qr-success-200: var(--qr-green-200);
    --qr-success-300: var(--qr-green-300); --qr-success-400: var(--qr-green-400); --qr-success-500: var(--qr-green-500);
    --qr-success-600: var(--qr-green-600); --qr-success-700: var(--qr-green-700); --qr-success-800: var(--qr-green-800);
    --qr-success-900: var(--qr-green-900);
    --qr-info-50:  var(--qr-blue-50);  --qr-info-100: var(--qr-blue-100); --qr-info-200: var(--qr-blue-200);
    --qr-info-300: var(--qr-blue-300); --qr-info-400: var(--qr-blue-400); --qr-info-500: var(--qr-blue-500);
    --qr-info-600: var(--qr-blue-600); --qr-info-700: var(--qr-blue-700); --qr-info-800: var(--qr-blue-800);
    --qr-info-900: var(--qr-blue-900);
    --qr-special-50:  var(--qr-violet-50);  --qr-special-100: var(--qr-violet-100); --qr-special-200: var(--qr-violet-200);
    --qr-special-300: var(--qr-violet-300); --qr-special-400: var(--qr-violet-400); --qr-special-500: var(--qr-violet-500);
    --qr-special-600: var(--qr-violet-600); --qr-special-700: var(--qr-violet-700); --qr-special-800: var(--qr-violet-800);
    --qr-special-900: var(--qr-violet-900);
    --qr-special-500-rgb: 139, 92, 246;

    /* ---- Agregados en el cierre de la F3 (queuereport_global.css sin paleta cruda, 24/09/2026) ----
       Lo que el global nombraba por tono y no tenía rol. */
    --qr-danger-600-rgb:        220, 38, 38;
    --qr-success-500-rgb:       34, 197, 94;
    /* "Caution": lo detectado o que pide atención sin ser un error (naranja). */
    --qr-caution-50:  var(--qr-orange-50);  --qr-caution-100: var(--qr-orange-100); --qr-caution-200: var(--qr-orange-200);
    --qr-caution-500: var(--qr-orange-500); --qr-caution-800: var(--qr-orange-800);
    --qr-caution-500-rgb:       249, 115, 22;
    /* Botones sólidos que Bootstrap define con otro tono que el estado base. */
    --qr-neutral-solid:         var(--qr-slate-500);      /* .btn-secondary */
    --qr-neutral-solid-hover:   var(--qr-slate-600);
    --qr-neutral-solid-active:  var(--qr-slate-700);
    --qr-success-solid-hover:   var(--qr-emerald-600);    /* .btn-success (base = --qr-success) */
    --qr-success-solid-active:  var(--qr-emerald-700);
    --qr-success-ink:           var(--qr-emerald-700);    /* texto "ok" sobre blanco */
    --qr-info-solid:            var(--qr-cyan-500);       /* .btn-info de Bootstrap (cian) */
    --qr-info-solid-hover:      var(--qr-cyan-600);
    --qr-info-solid-active:     var(--qr-cyan-700);
    /* Neutros que faltaban */
    --qr-border-emphasis:       var(--qr-slate-400);      /* borde en hover de un chip/ejemplo */
    --qr-text-ghost:            var(--qr-slate-250);      /* marca "no" de una matriz: casi invisible */
    --qr-surface-stronger:      var(--qr-slate-250);      /* relleno neutro en hover sobre --qr-surface-strong */
    /* Superficie invertida (oscura): tooltips, bloques de código, chips sobre fondo claro. */
    --qr-surface-inverse:       var(--qr-slate-900);
    --qr-surface-inverse-2:     var(--qr-slate-800);
    --qr-text-inverse-rgb:      255, 255, 255;
    --qr-control-off:           var(--qr-slate-300);      /* pista de un switch apagado */
    --qr-control-off-hover:     var(--qr-slate-350);
    --qr-dot-idle:              var(--qr-slate-300);      /* punto de estado sin actividad */
    --qr-dot-muted:             var(--qr-slate-400);      /* punto de estado terminado */
    --qr-code-bg:               var(--qr-slate-900);      /* bloque de código / expresión */
    --qr-code-text:             var(--qr-slate-200);
    /* Canales rgb neutros para sombras y velos: oscurecer (shade) o aclarar sobre oscuro (highlight). */
    --qr-shade-rgb:             var(--qr-black-rgb);
    --qr-highlight-rgb:         var(--qr-white-rgb);
    /* Banda navy: variantes suaves (pills de 2º nivel) y su canal rgb. */
    --qr-band-rgb:              var(--qr-navy-800-rgb);
    --qr-band-soft:             var(--qr-navy-100);
    --qr-band-soft-border:      var(--qr-navy-200);
    /* Categorías (badges y acentos que distinguen cosas, no estados). Un tema las remapea. */
    --qr-cat-teal:              var(--qr-teal-500);
    --qr-cat-teal-rgb:          20, 184, 166;
    --qr-cat-teal-ink:          var(--qr-teal-700);
    --qr-cat-teal-soft:         var(--qr-teal-100);
    --qr-cat-sky:               var(--qr-sky-500);
    /* Acento de identidad/autenticación del bot (verificar identidad, OTP, estado de auth). */
    --qr-auth-50:  var(--qr-teal-50);  --qr-auth-100: var(--qr-teal-100); --qr-auth-200: var(--qr-teal-200);
    --qr-auth-600: var(--qr-teal-600); --qr-auth-700: var(--qr-teal-700);
    /* Acento de eventos externos y esperas del bot (wait_for_event, estado "leído"). */
    --qr-event-50:  var(--qr-cyan-50);  --qr-event-100: var(--qr-cyan-100);
    --qr-event-600: var(--qr-cyan-600); --qr-event-700: var(--qr-cyan-700);
    /* Opacidades: escala para rgba(var(--x-rgb), var(--qr-alpha-N)). */
    --qr-alpha-5: .05;  --qr-alpha-8: .08;  --qr-alpha-10: .1;  --qr-alpha-12: .12; --qr-alpha-15: .15;
    --qr-alpha-20: .2;  --qr-alpha-25: .25; --qr-alpha-30: .3;  --qr-alpha-35: .35; --qr-alpha-40: .4;
    --qr-alpha-50: .5;  --qr-alpha-60: .6;  --qr-alpha-80: .8;
    /* Base de la escala tipográfica: `html { font-size }`. Todo el rem del sistema cuelga de acá. */
    --qr-fs-root: 15px;

    /* Gráficos (Chart.js). Los lee frontend/reports/shared/chart_palette.js con
       getComputedStyle: es la ÚNICA fuente de colores de gráficos. Son series
       categóricas (el nombre dice el tono de la serie, no su significado) más la
       grilla; las series de estado (atendido/abandonado…) usan ok/warn/bad. */
    --qr-chart-blue:     var(--qr-info-600);     --qr-chart-blue-2:   var(--qr-info-500);
    --qr-chart-indigo:   var(--qr-primary-light);
    --qr-chart-violet:   var(--qr-special-500);  --qr-chart-violet-2: var(--qr-special-600);
    --qr-chart-purple:   var(--qr-purple-500);
    --qr-chart-cyan:     var(--qr-cyan-500);     --qr-chart-sky:      var(--qr-sky-500);
    --qr-chart-teal:     var(--qr-teal-500);     --qr-chart-teal-2:   var(--qr-teal-600);
    --qr-chart-green:    var(--qr-success-500);  --qr-chart-green-2:  var(--qr-success-600);
    --qr-chart-emerald:  var(--qr-success);
    --qr-chart-amber:    var(--qr-warning-500);  --qr-chart-orange:   var(--qr-orange-500);
    --qr-chart-red:      var(--qr-danger-500);   --qr-chart-pink:     var(--qr-pink-500);
    --qr-chart-slate:    var(--qr-text-secondary); --qr-chart-gray:   var(--qr-gray-500);
    --qr-chart-muted:    var(--qr-text-muted);
    --qr-chart-grid:     rgba(var(--qr-black-rgb), .05);
    /* Canales rgb de dos series (filete de grupo de columnas del sumarizado de agentes). */
    --qr-chart-teal-2-rgb:      13, 148, 136;
    --qr-chart-violet-2-rgb:    124, 58, 237;


    /* Banda navy (tabs de nivel 1 de los editores y cabezal de tarjetas de reportes) */
    --qr-band-bg:               var(--qr-navy-800);
    --qr-band-text:             var(--qr-navy-50);

    /* Foco */
    --qr-focus-border:          #a0aec0;
    --qr-focus-ring:            0 0 0 var(--qr-focus-ring-width) var(--qr-focus-ring-color);   /* ancho y color: tokens de componente */

    /* Reportes: conservan su paleta "corporativa" (tinta navy, acento azul, CTA
       naranja, semáforo desaturado). Viven acá con nombre qr; `--rd-*` (sección 4)
       son alias de estos. `--qr-report-accent` NO es un segundo primario: es el
       acento de gráficos y KPIs. Un tema que quiera todo de un color lo iguala a
       `var(--qr-primary)`. */
    --qr-report-accent:         var(--qr-blue-700);
    --qr-report-accent-soft:    var(--qr-blue-100);
    --qr-report-ink:            #0f2440;
    --qr-report-muted:          #5a6b82;
    --qr-report-faint:          var(--qr-slate-450);
    --qr-report-cta:            var(--qr-orange-600);
    --qr-report-cta-hover:      var(--qr-orange-700);
    --qr-report-cta-soft:       var(--qr-orange-50);
    --qr-report-cta-soft-bd:    var(--qr-orange-200);
    --qr-report-thead:          var(--qr-slate-150);
    --qr-report-thead-ink:      var(--qr-navy-700);
    --qr-report-thead-bd:       var(--qr-navy-150);
    --qr-report-row-hover:      var(--qr-navy-50);
    --qr-report-ok:             var(--qr-teal-700);  --qr-report-ok-bg:   #eafaf6;
    --qr-report-warn:           #a55a00;             --qr-report-warn-bg: #fff5e6;
    --qr-report-bad:            #b42318;             --qr-report-bad-bg:  var(--qr-red-50);
    --qr-report-idle:           var(--qr-slate-600); --qr-report-idle-bg: var(--qr-slate-100);
    /* Chips con relleno de reportes (aviso y error): tono propio, más apagado que el `.alert`. */
    --qr-report-chip-warn-bg:   var(--qr-warn-bg);   --qr-report-chip-warn-ink: var(--qr-warn-text);
    --qr-report-chip-warn-bd:   #eedcb6;
    --qr-report-chip-bad-bg:    var(--qr-bad-bg);    --qr-report-chip-bad-ink:  var(--qr-danger-800);
    --qr-report-chip-bad-bd:    #f0cbcb;
    /* Estado "entregado" de una notificación (cian: entre enviado gris y leído azul). */
    --qr-report-delivered:      var(--qr-cyan-700);
    --qr-report-delivered-bg:   var(--qr-cyan-50);
    --qr-report-delivered-bd:   var(--qr-cyan-100);
    /* Números de KPI de reportes (tamaños propios del tablero). */
    --qr-report-kpi-fs:         1.25rem;   /* .rd-kpi__val */
    --qr-report-kpi-lg-fs:      2rem;      /* .rd-kpi--lg */
    --qr-report-mini-fs:        1.35rem;   /* .rd-mini__v */

    /* Sidebar */
    --qr-sidebar-bg:            #0d1526;   /* navy muy oscuro */
    --qr-sidebar-bg-mid:        #162035;   /* navy medio para degradado */
    --qr-sidebar-accent:        var(--qr-primary);   /* ítem activo */
    --qr-sidebar-text:          #c8d6e8;
    --qr-sidebar-text-hover:    #eef2f8;
    --qr-sidebar-text-active:   var(--qr-white);
    --qr-sidebar-title:         #7a90ad;   /* títulos de sección */
    --qr-sidebar-hover-bg:      rgba(var(--qr-white-rgb), .08);
    --qr-sidebar-active-bg:     rgba(var(--qr-primary-rgb), .28);
    --qr-sidebar-border:        rgba(var(--qr-white-rgb), .09);
    --qr-sidebar-width:         255px;

    /* Header */
    --qr-header-bg:             var(--qr-surface);
    --qr-header-height:         44px;
    --qr-header-border:         var(--qr-border);
    --qr-header-shadow:         0 2px 8px rgba(var(--qr-black-rgb), .08);

    /* Diseñadores de flujo (IVR, voicebot). */
    /* Salida "ruta/derivación" en los diseñadores de flujo (voicebot, IVR): naranja */
    --qr-flow-route:          var(--qr-orange-600);
    --qr-flow-route-hover:    var(--qr-orange-700);
    --qr-flow-route-soft:     var(--qr-orange-50);
    --qr-flow-route-border:   var(--qr-orange-200);
    /* Salida de una etapa de DECISIÓN del voicebot (regla sin IA): verde azulado, distinto
       del naranja de change_stage para que se lea de un vistazo que no la decide el modelo. */
    --qr-flow-route-decision:        var(--qr-teal-600);
    --qr-flow-route-decision-soft:   var(--qr-teal-50);
    --qr-flow-route-decision-border: var(--qr-teal-200);
    --qr-flow-route-decision-text:   var(--qr-teal-800);
    /* Salto por INTENCIÓN del voicebot (la IA reconoce qué quiere el cliente y el motor salta):
       violeta, distinto del naranja del tool y del verde azulado de la decisión. */
    --qr-flow-route-intent:          var(--qr-violet-600);
    --qr-flow-route-intent-soft:     var(--qr-violet-50);
    --qr-flow-route-intent-border:   var(--qr-violet-200);
    --qr-flow-route-intent-text:     var(--qr-violet-800);
    /* Color por tipo de nodo en los diseñadores de flujo (IVR y acciones del voicebot).
       Es categórico: cada rol tiene su tono para distinguirlo en el lienzo y el minimapa. */
    --qr-flow-node-play:          var(--qr-sky-500);
    --qr-flow-node-menu:          var(--qr-violet-500);
    --qr-flow-node-capture:       var(--qr-amber-500);
    --qr-flow-node-record:        var(--qr-red-500);
    --qr-flow-node-condition:     #d946ef;
    --qr-flow-node-api:           var(--qr-cyan-600);
    --qr-flow-node-set-var:       var(--qr-emerald-500);
    --qr-flow-node-skill:         var(--qr-violet-600);
    --qr-flow-node-schedule:      var(--qr-teal-600);
    --qr-flow-node-schedule-test: var(--qr-teal-700);
    --qr-flow-node-identify:      #c026d3;
    --qr-flow-node-transfer:      #e11d48;
    --qr-flow-node-subflow:       var(--qr-orange-500);
    --qr-flow-node-dispo:         #65a30d;
    --qr-flow-node-goto:          var(--qr-teal-500);
    --qr-flow-node-voicebot:      var(--qr-indigo-500);
    --qr-flow-node-hangup:        var(--qr-slate-500);
    --qr-flow-node-end:           var(--qr-slate-700);
    --qr-flow-node-tag:           var(--qr-pink-600);
    --qr-flow-handle:             var(--qr-slate-400);  /* punto de conexión neutro */

    /* ---- Agregados en el cierre 100 % de las pantallas del admin (24/09/2026) ----
       Avatares de EntityPicker/PickerModal/AgentAssigner (`avatarColor()` de
       frontend/components/picker_items.js): un degradé por posición, estable por nombre. */
    --qr-avatar-1: linear-gradient(135deg, var(--qr-primary), var(--qr-special-500));
    --qr-avatar-2: linear-gradient(135deg, var(--qr-sky-500), var(--qr-sky-700));
    --qr-avatar-3: linear-gradient(135deg, var(--qr-emerald-600), var(--qr-emerald-700));
    --qr-avatar-4: linear-gradient(135deg, var(--qr-warning-500), var(--qr-warning-600));
    --qr-avatar-5: linear-gradient(135deg, var(--qr-danger-500), var(--qr-danger-700));
    --qr-avatar-6: linear-gradient(135deg, var(--qr-teal-500), var(--qr-teal-700));
    --qr-avatar-7: linear-gradient(135deg, var(--qr-purple-500), var(--qr-purple-700));
    --qr-avatar-8: linear-gradient(135deg, var(--qr-info-500), var(--qr-info-700));


    /* ----------------------------------------------------------------------
       CAMPOS DE FORMULARIO — una sola escala para todo el sistema. Los lee
       Bootstrap (reglas de queuereport_global.css), CSelect y EntityPicker.
       ---------------------------------------------------------------------- */
    /* Los cuatro de forma son alias de los tokens de componente (`--qr-control-*`, sección
       "TOKENS DE COMPONENTE"): un tema cambia aquéllos y éstos los siguen. */
    --qr-field-h:               var(--qr-control-height-md);   /* alto de un campo de una línea */
    --qr-field-radius:          var(--qr-control-radius);
    --qr-field-font:            var(--qr-control-font-size);   /* el texto que el usuario TIPEA */
    --qr-field-px:              var(--qr-control-padding-x);   /* padding horizontal */
    /* Carril de la izquierda de una fila seleccionable (hueco del filete de la
       fila activa): se reserva siempre para que el texto no salte en el hover. */
    --qr-perm-rail:             .6rem;
    --qr-field-bg:              var(--qr-surface);
    --qr-field-border:          var(--qr-slate-250);
    --qr-field-border-hover:    var(--qr-slate-350);
    --qr-field-focus:           var(--qr-primary);
    --qr-field-focus-ring:      rgba(var(--qr-primary-rgb), .16);
    --qr-field-focus-shadow:    0 0 0 3px var(--qr-field-focus-ring);
    --qr-field-placeholder:     var(--qr-slate-450);

    /* EntityPicker */
    --qr-picker-radius:         var(--qr-radius-md);
    --qr-picker-gap:            .65rem;
    --qr-picker-avatar:         34px;
    --qr-picker-avatar-sm:      26px;
    --qr-picker-avatar-xs:      20px;   /* densidad "field": entra en los 34px de alto de un input */
    --qr-picker-panel-bg:       var(--qr-surface);
    --qr-picker-row-hover:      var(--qr-surface-3);
    --qr-picker-mono:           "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Botones: ancho mínimo de los que siempre llevan texto (ver .qr-lh__create) */
    --qr-btn-min-w:             5.5rem;

    /* Barra de ocupación de la consola (la usa con fallback; definida acá para
       que no quede ninguna variable huérfana). */
    --qr-occbar-h:              var(--qr-field-h);

    /* ======================================================================
       3. ESCALAS
       ====================================================================== */

    /* Tipografía. Base: `html { font-size: 15px }` (queuereport_global.css).
       Escala t-shirt = los 11 pasos de la consola del asesor: es la que se usa en
       código nuevo. Los numéricos (`--qr-fs-78` = .78rem) son los tamaños
       intermedios que ya usaba el admin, tokenizados EXACTOS para no mover ni un
       píxel (bajar .78 a .76 re-acomodaba headers enteros). Son deuda: la Fase 3
       los converge a la escala t-shirt pantalla por pantalla. No crear nuevos. */
    --qr-font-sans:     'Inter', system-ui, -apple-system, sans-serif;
    --qr-font-mono:     ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
    --qr-fs-3xs:        0.58rem;   /* contadores minúsculos sobre un ícono */
    --qr-fs-2xs:        0.65rem;   /* badges, contadores */
    --qr-fs-xs:         0.72rem;   /* etiquetas, metadatos, pies */
    --qr-fs-sm:         0.80rem;   /* texto secundario, sub-navegación */
    --qr-fs-md:         0.85rem;   /* cuerpo denso */
    --qr-fs-lg:         0.92rem;   /* texto destacado */
    --qr-fs-base:       1rem;      /* íconos de acción, títulos chicos */
    --qr-fs-xl:         1.20rem;   /* títulos de sección */
    --qr-fs-2xl:        1.40rem;   /* títulos de pantalla */
    --qr-fs-3xl:        1.70rem;   /* íconos de estado vacío */
    --qr-fs-4xl:        2.10rem;   /* ícono grande de una zona de carga (FileDropzone) */
    --qr-fs-5xl:              3rem;      /* ícono grande de un estado vacío o de una zona de carga */
    --qr-fs-display:    2.60rem;   /* números grandes de métricas */
    /* intermedios heredados (deuda, ver arriba) */
    --qr-fs-60: .6rem;   --qr-fs-62: .62rem;  --qr-fs-63: .63rem;  --qr-fs-64: .64rem;  --qr-fs-66: .66rem;
    --qr-fs-68: .68rem;  --qr-fs-70: .7rem;   --qr-fs-73: .73rem;  --qr-fs-74: .74rem;  --qr-fs-75: .75rem;
    --qr-fs-76: .76rem;  --qr-fs-77: .77rem;  --qr-fs-78: .78rem;  --qr-fs-82: .82rem;  --qr-fs-84: .84rem;
    --qr-fs-86: .86rem;  --qr-fs-88: .88rem;  --qr-fs-90: .9rem;   --qr-fs-95: .95rem;  --qr-fs-105: 1.05rem;
    --qr-fs-110: 1.1rem; --qr-fs-115: 1.15rem; --qr-fs-130: 1.3rem; --qr-fs-150: 1.5rem; --qr-fs-175: 1.75rem;

    /* Espaciado (padding/margin/gap). Todavía no lo usa el global: es la escala
       para las pantallas nuevas y para la Fase 2/3. */
    --qr-sp-1: .25rem;  --qr-sp-2: .5rem;  --qr-sp-3: .75rem;  --qr-sp-4: 1rem;
    --qr-sp-5: 1.25rem; --qr-sp-6: 1.5rem; --qr-sp-7: 2rem;    --qr-sp-8: 3rem;

    /* Margen de página: lo que separa el contenido del menú lateral, del borde derecho y de
       la barra superior. Lo aplica UN lugar por layout (.qr-content-area, .report-body,
       .qr-breadcrumb-bar, .qr-px-gutter en los layouts a pantalla completa); las pantallas
       no ponen padding de página propio. Bajo 768px se achica (ver @media al pie). */
    --qr-page-gutter-x:      var(--qr-sp-5);
    --qr-page-gutter-top:    var(--qr-sp-5);
    --qr-page-gutter-bottom: var(--qr-sp-6);

    /* Radios */
    --qr-radius-2xs:    2px;
    --qr-radius-xs:     3px;       /* chips, controles de reportes */
    --qr-radius-sm:     4px;       /* campos, botones */
    --qr-radius-sm-plus:6px;
    --qr-radius-md:     8px;       /* tarjetas, modales, pickers */
    --qr-radius-md-plus:10px;
    --qr-radius-lg:     12px;
    --qr-radius-lg-plus:14px;
    --qr-radius-xl:     16px;
    --qr-radius-2xl:          20px;      /* tarjeta muy redondeada (tablero) */
    --qr-radius-pill:   999px;

    /* Sombras */
    --qr-shadow-rgb:    15, 23, 42;
    --qr-shadow-xs:     0 1px 2px rgba(var(--qr-shadow-rgb), .05);
    --qr-shadow-sm:     0 1px 3px rgba(var(--qr-shadow-rgb), .06), 0 1px 2px rgba(var(--qr-shadow-rgb), .04);
    --qr-shadow-md:     0 4px 12px rgba(var(--qr-shadow-rgb), .08), 0 2px 4px rgba(var(--qr-shadow-rgb), .04);
    --qr-shadow-lg:     0 10px 24px rgba(var(--qr-shadow-rgb), .12), 0 4px 8px rgba(var(--qr-shadow-rgb), .06);
    --qr-shadow-xl:     0 24px 60px rgba(var(--qr-shadow-rgb), .30);
    --qr-shadow-primary:0 4px 14px rgba(var(--qr-primary-rgb), .30);
    --qr-shadow-popover:0 8px 24px rgba(var(--qr-black-rgb), .10);   /* dropdowns y paneles flotantes */
    --qr-shadow-modal:  0 24px 60px -18px rgba(var(--qr-shadow-rgb), .38);
    --qr-shadow-card:   0 1px 2px rgba(var(--qr-shadow-rgb), .04), 0 12px 30px -18px rgba(var(--qr-shadow-rgb), .16);

    /* Movimiento */
    --qr-dur-fast:      120ms;   /* hovers, cambios de color */
    --qr-dur:           170ms;   /* transición estándar */
    --qr-dur-slow:      280ms;   /* reveals, paneles */
    --qr-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --qr-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --qr-ease-in:       cubic-bezier(0.4, 0, 1, 1);

    /* Tablas de reportes (.qr-table-report) */
    --qr-tbl-font:      var(--qr-fs-82);
    --qr-tbl-head-font: var(--qr-fs-70);
    --qr-tbl-pad-y:     8px;
    --qr-tbl-pad-x:     10px;
    --qr-tbl-head-pad-y:9px;

    /* ======================================================================
       4. PUENTES — CoreUI 5 / Bootstrap y reportes siguen al tema.
       ====================================================================== */

    /* CoreUI (lo que lee coreui.min.css). Con esto `text-primary`, `form-check`,
       `alert-primary`, los links, `text-muted` y `form-text` dejan de usar el
       violeta #5856d6 y los grises propios de CoreUI. */
    --cui-primary:                 var(--qr-primary);
    --cui-primary-rgb:             var(--qr-primary-rgb);
    --cui-primary-bg-subtle:       var(--qr-primary-subtle);
    --cui-primary-border-subtle:   var(--qr-primary-border-subtle);
    --cui-primary-text-emphasis:   var(--qr-primary-dark);
    --cui-link-color:              var(--qr-primary);
    --cui-link-color-rgb:          var(--qr-primary-rgb);
    --cui-link-hover-color:        var(--qr-primary-dark);
    --cui-link-hover-color-rgb:    var(--qr-primary-dark-rgb);
    --cui-body-color:              var(--qr-text);
    --cui-body-color-rgb:          var(--qr-text-rgb);
    --cui-body-bg:                 var(--qr-surface);    /* fondo de inputs/cards/modales; la página usa --qr-body-bg */
    --cui-secondary-color:         var(--qr-text-secondary);
    --cui-border-color:            var(--qr-field-border);
    --cui-font-sans-serif:         var(--qr-font-sans);
    --cui-body-font-size:          var(--qr-fs-base);
    --cui-border-radius:           var(--qr-radius-sm-plus);
    --cui-border-radius-sm:        var(--qr-radius-sm);
    --cui-border-radius-lg:        var(--qr-radius-md);
    --cui-border-radius-xl:        var(--qr-radius-xl);
    --cui-border-radius-pill:      var(--qr-radius-pill);

    /* Alias Bootstrap (`--bs-*`): CoreUI no los lee, pero hay pantallas y el
       propio global que los usan con fallback. */
    --bs-primary:                  var(--qr-primary);
    --bs-primary-rgb:              var(--qr-primary-rgb);
    --bs-primary-bg-subtle:        var(--qr-primary-subtle);
    --bs-link-color:               var(--qr-primary);
    --bs-body-color:               var(--qr-text);
    --bs-body-bg:                  var(--qr-surface);
    --bs-secondary-color:          var(--qr-text-secondary);
    --bs-border-color:             var(--qr-field-border);
    --bs-font-monospace:           var(--qr-font-mono);
    /* Anillo de foco: más sutil que el de Bootstrap (gris tenue, casi transparente). */
    --bs-focus-ring-color:         rgba(var(--qr-slate-500-rgb), .18);
    --bs-focus-ring-width:         var(--qr-focus-ring-width);

    /* Reportes (`--rd-*`, queuereport_reports.css): alias, sin valores propios.
       El modo oscuro de reportes (`[data-theme="dark"]`) sigue en su archivo. */
    --rd-bg:          var(--qr-body-bg);
    --rd-surface:     var(--qr-surface);
    --rd-surface-2:   var(--qr-surface-2);
    --rd-field:       var(--qr-field-bg);
    --rd-cardhd:      var(--qr-band-bg);
    --rd-cardhd-ink:  var(--qr-band-text);
    --rd-ink:         var(--qr-report-ink);
    --rd-muted:       var(--qr-report-muted);
    --rd-faint:       var(--qr-report-faint);
    --rd-line:        var(--qr-field-border);
    --rd-line-2:      var(--qr-border-soft);
    --rd-accent:      var(--qr-report-accent);
    --rd-accent-soft: var(--qr-report-accent-soft);
    --rd-cta:         var(--qr-report-cta);
    --rd-cta-hover:   var(--qr-report-cta-hover);
    --rd-cta-soft:    var(--qr-report-cta-soft);
    --rd-cta-soft-bd: var(--qr-report-cta-soft-bd);
    --rd-radius-sm:   var(--qr-radius-xs);
    --rd-radius:      var(--qr-radius-sm);
    --rd-ctl-h:       var(--qr-field-h);
    --rd-thead:       var(--qr-report-thead);
    --rd-thead-2:     var(--qr-surface-2);
    --rd-thead-ink:   var(--qr-report-thead-ink);
    --rd-thead-bd:    var(--qr-report-thead-bd);
    --rd-zebra:       var(--qr-surface-2);
    --rd-hover:       var(--qr-report-row-hover);
    --rd-grp:         var(--qr-field-border);
    --rd-grp-hd:      var(--qr-field-border-hover);
    --rd-shadow:      var(--qr-shadow-card);
    --rd-mono:        var(--qr-font-mono);
    --rd-ok:          var(--qr-report-ok);    --rd-ok-bg:   var(--qr-report-ok-bg);
    --rd-warn:        var(--qr-report-warn);  --rd-warn-bg: var(--qr-report-warn-bg);
    --rd-bad:         var(--qr-report-bad);   --rd-bad-bg:  var(--qr-report-bad-bg);
    --rd-idle:        var(--qr-report-idle);  --rd-idle-bg: var(--qr-report-idle-bg);
    --rd-chip-warn-bg: var(--qr-report-chip-warn-bg); --rd-chip-warn-ink: var(--qr-report-chip-warn-ink); --rd-chip-warn-bd: var(--qr-report-chip-warn-bd);
    --rd-chip-bad-bg:  var(--qr-report-chip-bad-bg);  --rd-chip-bad-ink:  var(--qr-report-chip-bad-ink);  --rd-chip-bad-bd:  var(--qr-report-chip-bad-bd);
    --rd-check-bd:     var(--qr-field-border-hover);   /* = --rd-grp-hd */
}

/* ==========================================================================
   3b. TOKENS DE COMPONENTE — la FORMA de cada pieza (alto, relleno, borde,
   radio, tamaño de ícono), no su color. Es lo que deja a un tema cambiar
   "botones más altos, bordes de 2px, tablas más densas" sin tocar pantallas.
   Sección propia (24/09/2026); los valores son los que ya se veían.

   Cómo se usan:
     - queuereport_global.css lee ESTOS tokens en sus reglas de componentes
       (`.btn`, `.form-control`, `.qr-table`, `.qr-pill`, `.modal`, sidebar…).
     - Los `--qr-field-*` de forma (semánticos, arriba) son alias de
       `--qr-control-*`: todo lo que ya leía `--qr-field-h` sigue al tema.
     - Al pie van los PUENTES por componente de CoreUI: CoreUI declara sus
       `--cui-btn-*`, `--cui-card-*`, `--cui-nav-*` en la clase del componente
       (no en :root), así que se pisan con la misma clase, y este archivo carga
       después de coreui.min.css. Lo que CoreUI escribe con literal (padding
       de `.form-control` y de las celdas de `.table`) lo pisa el global.
   `--qr-density` multiplica los rellenos VERTICALES (no los altos en px ni los
   horizontales): 1 = normal, .75 = denso, 1.2 = aireado.
   ========================================================================== */
:root {
    --qr-density:                  1;

    /* Controles (input, select, input-group-text; los botones `-sm` los igualan) */
    --qr-control-height-sm:        26px;      /* botones-ícono chicos (cabecera de modal) */
    --qr-control-height-md:        34px;      /* un campo de una línea (= --qr-field-h) */
    --qr-control-height-lg:        44px;      /* campos protagonistas (`-lg`) */
    --qr-control-padding-x:        .6rem;
    --qr-control-padding-x-lg:     .9rem;
    --qr-control-padding-y:        calc(.45rem * var(--qr-density));   /* los que crecen (textarea) */
    --qr-control-font-size:        .93rem;    /* el texto que el usuario TIPEA: no baja de acá */
    --qr-control-font-size-lg:     var(--qr-fs-base);
    --qr-control-radius:           var(--qr-radius-sm);

    /* Botones. `height` es alto MÍNIMO: `auto` = el que dan relleno + línea. */
    --qr-btn-height-xs:            0px;
    --qr-btn-height-sm:            var(--qr-control-height-md);   /* a la par del campo de al lado */
    --qr-btn-height-md:            auto;
    --qr-btn-height-lg:            auto;
    --qr-btn-padding-x-xs:         .45rem;
    --qr-btn-padding-y-xs:         calc(.15rem * var(--qr-density));
    --qr-btn-padding-x-sm:         .55rem;
    --qr-btn-padding-y-sm:         calc(.25rem * var(--qr-density));
    --qr-btn-padding-x-md:         .7rem;
    --qr-btn-padding-y-md:         calc(.4rem * var(--qr-density));
    --qr-btn-padding-x-lg:         .9rem;
    --qr-btn-padding-y-lg:         calc(.55rem * var(--qr-density));
    --qr-btn-padding-x-cta:        .85rem;    /* alta del header de listado (.qr-lh__create) */
    --qr-btn-font-size-xs:         var(--qr-fs-78);
    --qr-btn-font-size-sm:         var(--qr-fs-sm);
    --qr-btn-font-size-md:         var(--qr-fs-md);
    --qr-btn-font-size-lg:         var(--qr-fs-95);
    --qr-btn-font-weight:          500;
    --qr-btn-radius:               var(--qr-control-radius);      /* misma esquina que el campo */
    --qr-btn-radius-xs:            var(--qr-radius-xs);
    --qr-btn-gap:                  .375rem;   /* ícono ↔ texto */

    /* Bordes y foco */
    --qr-border-width:             1px;       /* campos, botones, tarjetas, tablas, modales */
    --qr-border-width-strong:      2px;       /* indicador de tab activa, filetes que marcan */
    --qr-focus-ring-width:         2px;
    --qr-focus-ring-color:         rgba(var(--qr-slate-500-rgb), .15);

    /* Tablas (.qr-table; las `.table` pelados de CoreUI usan -plain/-sm) */
    --qr-table-font-size:          var(--qr-fs-md);
    --qr-table-row-height:         48px;
    --qr-table-cell-padding-x:     .75rem;
    --qr-table-cell-padding-y:     calc(.6rem * var(--qr-density));
    --qr-table-header-bg:          var(--qr-surface-2);
    --qr-table-header-color:       var(--qr-text-secondary);
    --qr-table-header-font-size:   var(--qr-fs-78);
    --qr-table-header-font-weight: 600;
    --qr-table-header-padding-y:   calc(.6rem * var(--qr-density));
    --qr-table-header-border-width: var(--qr-border-width);
    --qr-table-plain-cell-padding: calc(.5rem * var(--qr-density));
    --qr-table-sm-cell-padding:    calc(.25rem * var(--qr-density));
    /* Ancho máximo de una columna de texto (td.text-start): lo que pase se corta con "…" y se ve
       entero al pasar el mouse (static/js/qr_table_hover.js). */
    --qr-table-text-cell-max:      32ch;

    /* Tarjetas (.card de CoreUI) y paneles (.qr-panel) */
    --qr-card-padding:             calc(1rem * var(--qr-density));
    --qr-card-header-padding-x:    1rem;
    --qr-card-header-padding-y:    calc(.5rem * var(--qr-density));
    --qr-card-radius:              var(--qr-radius-sm-plus);
    --qr-card-border-width:        var(--qr-border-width);
    --qr-card-shadow:              none;      /* `shadow-sm` en el marcado sigue mandando */
    --qr-panel-radius:             var(--qr-radius-lg-plus);

    /* Modales */
    --qr-modal-radius:             var(--qr-radius-md);
    --qr-modal-padding:            calc(1rem * var(--qr-density));
    --qr-modal-header-padding-x:   1rem;
    --qr-modal-header-padding-y:   calc(.625rem * var(--qr-density));
    --qr-modal-footer-padding-x:   1rem;
    --qr-modal-footer-padding-y:   calc(.625rem * var(--qr-density));
    --qr-modal-border-width:       var(--qr-border-width);
    --qr-modal-shadow:             0 24px 60px -18px rgba(var(--qr-shadow-rgb), var(--qr-alpha-40));
    --qr-modal-control-radius:     var(--qr-radius-sm-plus);   /* botones y campos de adentro */

    /* Íconos */
    --qr-icon-size-sm:             var(--qr-fs-md);    /* menú lateral, pills */
    --qr-icon-size-md:             var(--qr-fs-base);  /* acciones de fila */
    --qr-icon-size-lg:             var(--qr-fs-110);   /* título de un header */

    /* Badges (.qr-badge) */
    --qr-badge-padding-x:          .55rem;
    --qr-badge-padding-y:          .18rem;
    --qr-badge-font-size:          var(--qr-fs-xs);
    --qr-badge-font-weight:        700;
    --qr-badge-radius:             var(--qr-radius-pill);

    /* Navegación: tabs (nivel 1 subrayado y banda navy), pills (nivel 2) y sub-pills */
    --qr-tab-padding-x:            .9rem;
    --qr-tab-padding-y:            calc(.65rem * var(--qr-density));
    --qr-tab-font-size:            var(--qr-fs-md);
    --qr-tab-indicator-width:      var(--qr-border-width-strong);
    --qr-subtab-padding-x:         .7rem;
    --qr-subtab-padding-y:         calc(.3rem * var(--qr-density));
    --qr-subtab-radius:            var(--qr-radius-sm-plus);
    --qr-band-tab-padding-x:       .85rem;
    --qr-band-tab-padding-y:       calc(.42rem * var(--qr-density));
    --qr-band-tab-radius:          var(--qr-radius-md);
    --qr-pill-padding-x:           .85rem;
    --qr-pill-padding-y:           calc(.3rem * var(--qr-density));
    --qr-pill-sub-padding-x:       .7rem;
    --qr-pill-sub-padding-y:       calc(.22rem * var(--qr-density));
    --qr-pill-font-size:           var(--qr-fs-82);
    --qr-pill-radius:              var(--qr-radius-pill);
    --qr-pill-gap:                 .4rem;
    --qr-nav-link-padding-x:       1rem;      /* .nav de CoreUI sin clase del sistema */
    --qr-nav-link-padding-y:       calc(.5rem * var(--qr-density));

    /* Menú lateral (el ancho es --qr-sidebar-width, en semánticos) */
    --qr-sidebar-item-height:      auto;      /* alto mínimo de un ítem */
    --qr-sidebar-item-padding-x:   .75rem;
    --qr-sidebar-item-padding-y:   calc(.45rem * var(--qr-density));
    --qr-sidebar-item-radius:      var(--qr-radius-sm-plus);
    --qr-sidebar-item-font-size:   var(--qr-fs-sm);

    /* Marca de la instalación (BRAND_LOGO*, BRAND_LOGIN_IMAGE del settings): tamaños del
       logo en el menú/barra, del ícono del menú colapsado y del logo/imagen del login. */
    --qr-brand-logo-height:        28px;
    --qr-brand-logo-max-width:     100%;
    --qr-brand-icon-size:          28px;
    --qr-brand-login-logo-height:  48px;
    --qr-brand-login-image-max-width: 300px;

    /* Puentes globales: CoreUI/Bootstrap leen el ancho de borde desde :root
       (form-control, form-select, form-check, card, table, dropdown, alert…). */
    --cui-border-width:            var(--qr-border-width);
    --bs-border-width:             var(--qr-border-width);
}

/* Puentes por componente (ver cabecera de la sección). Sólo variables. */
.btn {
    --cui-btn-padding-x:     var(--qr-btn-padding-x-md);
    --cui-btn-padding-y:     var(--qr-btn-padding-y-md);
    --cui-btn-font-size:     var(--qr-btn-font-size-md);
    --cui-btn-font-weight:   var(--qr-btn-font-weight);
    --cui-btn-border-radius: var(--qr-btn-radius);
    --cui-btn-border-width:  var(--qr-border-width);
    --bs-btn-padding-x:      var(--qr-btn-padding-x-md);
    --bs-btn-padding-y:      var(--qr-btn-padding-y-md);
    --bs-btn-font-size:      var(--qr-btn-font-size-md);
    --bs-btn-font-weight:    var(--qr-btn-font-weight);
    --bs-btn-border-radius:  var(--qr-btn-radius);
    --bs-btn-border-width:   var(--qr-border-width);
}
.btn-group-sm > .btn,
.btn-sm {
    --cui-btn-padding-x:     var(--qr-btn-padding-x-sm);
    --cui-btn-padding-y:     var(--qr-btn-padding-y-sm);
    --cui-btn-font-size:     var(--qr-btn-font-size-sm);
    --cui-btn-border-radius: var(--qr-btn-radius);
    --bs-btn-padding-x:      var(--qr-btn-padding-x-sm);
    --bs-btn-padding-y:      var(--qr-btn-padding-y-sm);
    --bs-btn-font-size:      var(--qr-btn-font-size-sm);
    --bs-btn-border-radius:  var(--qr-btn-radius);
}
.btn-group-lg > .btn,
.btn-lg {
    --cui-btn-padding-x:     var(--qr-btn-padding-x-lg);
    --cui-btn-padding-y:     var(--qr-btn-padding-y-lg);
    --cui-btn-font-size:     var(--qr-btn-font-size-lg);
    --cui-btn-border-radius: var(--qr-btn-radius);
    --bs-btn-padding-x:      var(--qr-btn-padding-x-lg);
    --bs-btn-padding-y:      var(--qr-btn-padding-y-lg);
    --bs-btn-font-size:      var(--qr-btn-font-size-lg);
    --bs-btn-border-radius:  var(--qr-btn-radius);
}
.card {
    --cui-card-spacer-x:           var(--qr-card-padding);
    --cui-card-spacer-y:           var(--qr-card-padding);
    --cui-card-cap-padding-x:      var(--qr-card-header-padding-x);
    --cui-card-cap-padding-y:      var(--qr-card-header-padding-y);
    --cui-card-border-width:       var(--qr-card-border-width);
    --cui-card-border-radius:      var(--qr-card-radius);
    --cui-card-inner-border-radius: calc(var(--qr-card-radius) - var(--qr-card-border-width));
}
.nav {
    --cui-nav-link-padding-x:      var(--qr-nav-link-padding-x);
    --cui-nav-link-padding-y:      var(--qr-nav-link-padding-y);
}

/* ==========================================================================
   5. MODO OSCURO DE REPORTES (paleta "Midnight").
   Se activa con data-theme="dark" en <html> o <body> (hoy ninguna pantalla lo
   pone: queda listo). Redefine los mismos `--rd-*` de la sección 4: reportes
   (queuereport_reports.css) sólo usa esos alias. Hay que redefinirlos acá y no
   por sus `--qr-*`: un alias se resuelve en :root y lo heredado ya es el claro.
   Movido desde queuereport_reports.css el 24/09/2026.
   ========================================================================== */
[data-theme="dark"] {
    --rd-bg:        #0e1a2b;
    --rd-surface:   #16273d;
    --rd-surface-2: #122036;
    --rd-field:     #0e1a2b;
    --rd-cardhd:    #122036;
    --rd-cardhd-ink:#cbd5e1;
    --rd-ink:       #e2e8f0;
    --rd-muted:     #93a4bd;
    --rd-faint:     #6f829c;
    --rd-line:      #26384f;
    --rd-line-2:    #213247;
    --rd-accent:      #38bdf8;
    --rd-accent-soft: #0c3a55;
    --rd-cta:         #f97316;
    --rd-cta-hover:   #ea580c;
    --rd-cta-soft:    #3a2410;
    --rd-cta-soft-bd: #7c3d10;
    --rd-thead:     #122036;
    --rd-thead-2:   #16273d;
    --rd-thead-ink: #cbd5e1;
    --rd-thead-bd:  #26384f;
    --rd-zebra:     #16273d;
    --rd-hover:     #1e3350;
    --rd-grp:       #26384f;
    --rd-grp-hd:    #3a4f6b;
    --rd-shadow:    0 4px 16px rgba(0, 0, 0, .45);
    /* Los únicos chips con relleno llevan un tono que en oscuro no se lee. */
    --rd-chip-warn-bg: #3a2c11; --rd-chip-warn-ink: #e8c07a; --rd-chip-warn-bd: #5a4419;
    --rd-chip-bad-bg:  #3b1d1d; --rd-chip-bad-ink:  #f0a9a9; --rd-chip-bad-bd:  #5c2a2a;
    --rd-check-bd:     #3d4a5c;
}

/* ==========================================================================
   6. TEMA OSCURO — consola del asesor y admin (24/09/2026).
   Se enciende con data-bs-theme="dark" / data-coreui-theme="dark" en <html>
   (la consola los pone desde lib/theme.js; el admin hoy siempre es claro).
   Redefine SÓLO tokens: las pantallas no tienen reglas `[data-bs-theme="dark"] .x`.

   Selector `html:root[…]` (especificidad 0,2,1): gana a `:root` y también a un
   tema de color (`:root[data-qr-theme]`, 0,2,0), para que un tema claro no
   deshaga el oscuro. El modo oscuro de REPORTES (sección 5, `[data-theme]`)
   es aparte: redefine los `--rd-*` y no se toca desde acá.

   Capas: 6a paleta oscura (literales) · 6b semánticos del sistema en oscuro ·
   6c puentes CoreUI/Bootstrap · 6d semánticos propios de la consola (claro en
   el `:root` de abajo, oscuro en el bloque) · 6e chat.
   Los `*-fixed` NO cambian en oscuro (así se veían): candidatos a revisar.
   ========================================================================== */
:root {
    /* 6d. Semánticos propios de la consola: valor claro (el oscuro, abajo). Nombre =
       pieza + rol; el comentario dice dónde se usa. */
    --qr-shadow-underline:           inset 0 -2px 0 currentColor;  /* subrayado de tab activo en el color del texto */
    --qr-font-sans-variable:         'InterVariable', 'Inter', system-ui, -apple-system, sans-serif;  /* Inter variable (cuerpo, con @supports) */
    --qr-badge-shadow-fixed:         var(--qr-white);  /* .qr-iconbtn .qr-badge */
    --qr-band-strip-bg:              var(--qr-navy-800);  /* .qr-band */
    --qr-band-tab-active-text:       var(--qr-navy-800);  /* .qr-band-tab.is-active, .qr-band-tab.is-active i … */
    --qr-band-tab-n-active-bg:       var(--qr-navy-800);  /* .qr-band-tab.is-active .qr-band-tab__n, .qr-tabs .nav-link.active .qr- */
    --qr-band-tab-n-active-text:     var(--qr-text-inverse);  /* .qr-band-tab.is-active .qr-band-tab__n, .qr-tabs .nav-link.active .qr- */
    --qr-border-gray-fixed:          var(--qr-gray-200);  /* .qr-modal-header, .border-grey-lighter … */
    --qr-border-hairline:            var(--bs-border-color-translucent);  /* .qr-wait-chip, .qr-recsheet__sec … */
    --qr-border-veil:                var(--qr-border);  /* .qr-camp-card.is-static:hover, .qr-customer-head … */
    --qr-bubble-collab-border:       var(--qr-sky-200);  /* .qr-bubble-collab */
    --qr-callbacks-block-border:     var(--qr-slate-175);  /* .qr-callbacks-block, .qr-info-cell … */
    --qr-camp-card-check-border:     var(--qr-slate-310);  /* .qr-camp-card__check */
    --qr-camp-card-check-locked-bg-fixed: var(--qr-slate-375);  /* .qr-camp-card.is-locked .qr-camp-card__check */
    --qr-camp-card-check-locked-border-fixed: var(--qr-slate-375);  /* .qr-camp-card.is-locked .qr-camp-card__check */
    --qr-camp-head-count-border:     var(--bs-primary-border-subtle);  /* .qr-camp-head__count, .qr-chan-pill--out */
    --qr-camp-head-ico-in-bg:        var(--bs-primary-bg-subtle);  /* .qr-camp-head__ico--in, .qr-camp-head__count … */
    --qr-camp-head-ico-out-bg:       var(--qr-bs-green-100);  /* .qr-camp-head__ico--out, .qr-chan-pill--audio */
    --qr-chan-default-bg:            var(--qr-surface-3);  /* .qr-chan--default.qr-chan-chip */
    --qr-chan-default-border:        var(--qr-slate-200);  /* .qr-chan--default.qr-chan-chip, [data-bs-theme="dark"] .qr-emoji-popov */
    --qr-chan-default-text:          var(--qr-slate-500);  /* .qr-chan--default.qr-chan-chip, .qr-console-track */
    --qr-chan-dot-border-fixed:      var(--qr-white);  /* .qr-chan-dot */
    --qr-chan-instagram-bg:          var(--qr-pink-100);  /* .qr-chan--instagram.qr-chan-chip */
    --qr-chan-instagram-border:      var(--qr-brand-instagram-border);  /* .qr-chan--instagram.qr-chan-chip */
    --qr-chan-instagram-text:        var(--qr-brand-instagram-text);  /* .qr-chan--instagram.qr-chan-chip */
    --qr-chan-messenger-bg:          var(--qr-sky-100);  /* .qr-chan--messenger.qr-chan-chip */
    --qr-chan-messenger-border:      var(--qr-brand-messenger-border);  /* .qr-chan--messenger.qr-chan-chip */
    --qr-chan-messenger-text:        var(--qr-brand-messenger-text);  /* .qr-chan--messenger.qr-chan-chip */
    --qr-chan-phone-bg:              var(--qr-slate-150);  /* .qr-chan--phone.qr-chan-chip, .qr-pill--more.is-open */
    --qr-chan-phone-border:          var(--qr-slate-250);  /* .qr-chan--phone.qr-chan-chip */
    --qr-chan-phone-text:            var(--qr-slate-600);  /* .qr-chan--phone.qr-chan-chip, .qr-tl-more__n */
    --qr-chan-pill-audio-border:     var(--qr-emerald-340);  /* .qr-chan-pill--audio */
    --qr-chan-pill-audio-text:       var(--qr-emerald-695);  /* .qr-chan-pill--audio */
    --qr-chan-pill-chat-border:      var(--qr-sky-220);  /* .qr-chan-pill--chat */
    --qr-chan-pill-chat-text:        var(--qr-sky-700);  /* .qr-chan-pill--chat */
    --qr-chan-pill-req-border:       var(--qr-orange-175);  /* .qr-chan-pill--req */
    --qr-chan-pill-req-text:         var(--qr-yellow-710);  /* .qr-chan-pill--req */
    --qr-chan-sms-border:            var(--qr-indigo-170);  /* .qr-chan--sms.qr-chan-chip, .qr-event__chip--transfer */
    --qr-chan-sms-text:              var(--qr-primary);  /* .qr-chan--sms.qr-chan-chip, .qr-event__chip--transfer */
    --qr-chan-telegram-border:       var(--qr-brand-telegram-border);  /* .qr-chan--telegram.qr-chan-chip */
    --qr-chan-telegram-text:         var(--qr-brand-telegram-text);  /* .qr-chan--telegram.qr-chan-chip */
    --qr-chan-whatsapp-bg:           var(--qr-emerald-80);  /* .qr-chan--whatsapp.qr-chan-chip */
    --qr-chan-whatsapp-border:       var(--qr-emerald-205);  /* .qr-chan--whatsapp.qr-chan-chip, .qr-event__chip--join */
    --qr-chan-whatsapp-text:         var(--qr-green-725);  /* .qr-chan--whatsapp.qr-chan-chip */
    --qr-chat-item-menu-btn-hover-bg: var(--qr-navy-50);  /* .qr-chat-item__menu-btn:hover, .qr-composer__btn:hover … */
    --qr-chat-item-overdue-bg:       var(--qr-orange-50);  /* .qr-chat-item.is-overdue */
    --qr-chat-item-overdue-hover-bg: var(--qr-orange-100);  /* .qr-chat-item.is-overdue:hover */
    --qr-chip-bad-text:              var(--qr-red-700);  /* .qr-chip--bad */
    --qr-chip-info-bg:               var(--qr-blue-50);  /* .qr-chip--info */
    --qr-chip-info-border:           var(--qr-blue-200);  /* .qr-chip--info */
    --qr-chip-info-text:             var(--qr-blue-700);  /* .qr-chip--info */
    --qr-chip-muted-bg:              var(--qr-surface-3);  /* .qr-chip--muted */
    --qr-chip-ok-bg:                 var(--qr-emerald-50);  /* .qr-chip--ok */
    --qr-chip-ok-border:             var(--qr-emerald-200);  /* .qr-chip--ok */
    --qr-chip-ok-text:               var(--qr-emerald-700);  /* .qr-chip--ok */
    --qr-chip-warn-bg:               var(--qr-amber-50);  /* .qr-chip--warn */
    --qr-chip-warn-border:           var(--qr-amber-200);  /* .qr-chip--warn */
    --qr-chip-warn-text:             var(--qr-amber-700);  /* .qr-chip--warn */
    --qr-comment-editor-toolbar-border-fixed: var(--qr-slate-175);  /* .qr-comment-editor__toolbar */
    --qr-composer-btn-send-hover-text: var(--qr-emerald-600);  /* .qr-composer__btn--send:hover, .qr-camp-head__ico--out */
    --qr-console-bandeja-inbox-lift: 0 1px 2px rgba(var(--qr-gray-895-rgb), .06), 0 6px 18px -8px rgba(var(--qr-gray-895-rgb), .16);  /* .qr-console-bandeja */
    --qr-console-bandeja-inbox-line: var(--qr-slate-275);  /* .qr-console-bandeja */
    --qr-console-item-live-text:     var(--qr-green-700);  /* .qr-console-item__live */
    --qr-console-item-shadow-rgb:    var(--qr-gray-895-rgb);  /* .qr-console-item */
    --qr-console-item-since-hot-text: var(--qr-orange-700);  /* .qr-console-item__since.is-hot */
    --qr-console-item-unread-bg:     var(--qr-red-625);  /* .qr-console-item__unread */
    --qr-console-section-ico-callbacks-text: var(--qr-pink-600);  /* .qr-console-section__hd>i.qr-console-section__ico--callbacks */
    --qr-console-section-ico-mine-text: var(--qr-primary-light);  /* .qr-console-section__hd>i.qr-console-section__ico--mine */
    --qr-console-section-ico-queue-text: var(--qr-warning);  /* .qr-console-section__hd>i.qr-console-section__ico--queue */
    --qr-console-section-ico-records-text: var(--qr-teal-600);  /* .qr-console-section__hd>i.qr-console-section__ico--records */
    --qr-contact-more-hover-bg:      var(--qr-primary);  /* .qr-contact-more:hover */
    --qr-conv-meta-sep-text:         var(--qr-border);  /* .qr-conv-meta__sep */
    --qr-custpanel-sec-shadow:       0 1px 2px rgba(var(--qr-shadow-rgb), .04);  /* .qr-custpanel__sec */
    --qr-dispo-option-code-bg:       var(--qr-slate-150);  /* .qr-dispo-option__code, .qr-event__chip */
    --qr-divider-fixed:              var(--qr-slate-200);  /* .qr-status-time, .qr-status-remain … */
    --qr-event-chip-border:          var(--qr-slate-200);  /* .qr-event__chip */
    --qr-event-chip-join-bg:         var(--qr-emerald-50);  /* .qr-event__chip--join */
    --qr-event-chip-join-text:       var(--qr-green-705);  /* .qr-event__chip--join */
    --qr-event-chip-join-text-fixed: var(--qr-green-785);  /* .qr-event__chip--join strong */
    --qr-event-chip-leave-border:    var(--qr-red-180);  /* .qr-event__chip--leave */
    --qr-event-chip-leave-text:      var(--qr-pink-665);  /* .qr-event__chip--leave */
    --qr-event-chip-leave-text-fixed: var(--qr-pink-775);  /* .qr-event__chip--leave strong */
    --qr-focus-neutral-rgb:          var(--qr-slate-500-rgb);  /* .form-control:focus, textarea:focus … */
    --qr-form-control-border-fixed:  var(--qr-gray-250);  /* .form-control */
    --qr-iconbtn-hover-bg:           var(--qr-slate-150);  /* .qr-iconbtn:hover, .qr-user-dropdown .dropdown-item:hover … */
    --qr-iconbtn-hover-border:       var(--qr-navy-80);  /* .qr-iconbtn:hover, .qr-iconbtn.is-active */
    --qr-img-viewer-rgb:             var(--qr-gray-950-rgb);  /* .qr-img-viewer */
    --qr-img-viewer-toolbar-rgb:     var(--qr-gray-840-rgb);  /* .qr-img-viewer__toolbar */
    --qr-input-group-text-border:    var(--qr-gray-250);  /* .input-group-text, .qr-comment-editor */
    --qr-list-toolbar-border:        var(--qr-slate-150);  /* .qr-list-toolbar */
    --qr-mask-solid:                 var(--qr-black);  /* .qr-tabscroll */
    --qr-media-card-bg:              rgba(var(--qr-white-rgb), 0.6);  /* .qr-media-card */
    --qr-media-card-file-hover-bg:   rgba(var(--qr-white-rgb), 0.85);  /* .qr-media-card--file:hover */
    --qr-media-card-icon-text:       var(--qr-amber-600);  /* .qr-media-card--warning .qr-media-card__icon */
    --qr-media-thumb-bg-fixed:       var(--qr-black);  /* .qr-media-thumb video */
    --qr-metric-clickable-hover-bg:  var(--qr-slate-175);  /* .qr-metric--clickable:hover */
    --qr-metric-group-chat-icon-bg:  var(--qr-sky-100);  /* .qr-metric-group--chat .qr-metric-group__icon, .qr-bubble-collab */
    --qr-metric-group-chat-icon-text: var(--qr-sky-600);  /* .qr-metric-group--chat .qr-metric-group__icon */
    --qr-metric-group-email-icon-bg: var(--qr-violet-100);  /* .qr-metric-group--email .qr-metric-group__icon */
    --qr-metric-group-email-icon-text: var(--qr-violet-600);  /* .qr-metric-group--email .qr-metric-group__icon */
    --qr-metric-group-icon-bg:       var(--qr-slate-175);  /* .qr-metric-group__icon */
    --qr-metric-group-live-border:   var(--qr-emerald-335);  /* .qr-metric-group--live */
    --qr-metric-group-live-icon-bg:  var(--qr-green-135);  /* .qr-metric-group--live .qr-metric-group__icon */
    --qr-metric-group-live-ring:     0 0 0 1px rgba(var(--qr-green-500-rgb), 0.18), 0 2px 10px rgba(var(--qr-green-500-rgb), 0.15);  /* .qr-metric-group--live */
    --qr-metric-group-live-shadow:   var(--qr-slate-50);  /* .qr-metric-group__live */
    --qr-metric-group-session-icon-bg: var(--bs-primary-bg-subtle);  /* .qr-metric-group--session .qr-metric-group__icon, .qr-metric-group--to */
    --qr-metric-group-voz-icon-bg:   var(--cui-success-bg-subtle);  /* .qr-metric-group--voz .qr-metric-group__icon, .qr-metric-group--live */
    --qr-metric-group-voz-icon-text: var(--qr-emerald-600);  /* .qr-metric-group--voz .qr-metric-group__icon, .qr-metric-group--live . */
    --qr-modal-overlay-rgb:          var(--qr-gray-600-rgb);  /* .qr-modal-overlay */
    --qr-modal-overlay-scroll-rgb:   var(--qr-gray-500-rgb);  /* .qr-modal-overlay-scroll */
    --qr-msg-editor-btn-hover-bg:    var(--qr-navy-80);  /* .qr-msg-editor__btn:hover */
    --qr-msg-retry-hover-bg:         var(--qr-danger);  /* .qr-msg-retry:hover */
    --qr-msg-retry-hover-border:     var(--qr-danger);  /* .qr-msg-retry:hover */
    --qr-note-textarea-bg:           var(--qr-amber-50);  /* .qr-note-textarea */
    --qr-note-textarea-focus-border: var(--qr-warning);  /* .qr-note-textarea:focus */
    --qr-notif-item-hover-bg:        var(--qr-slate-150);  /* .qr-notif-item:hover, .qr-composer__input */
    --qr-pick-card-hover-border:     var(--bs-primary-border-subtle);  /* .qr-pick-card:hover, .qr-composer__input:focus-within */
    --qr-pick-card-selected-bg:      var(--bs-primary-bg-subtle);  /* .qr-pick-card.is-selected, .qr-camp-card.is-selected */
    --qr-pick-card-selected-border:  var(--qr-primary);  /* .qr-pick-card.is-selected, .qr-camp-card:hover … */
    --qr-pill-active-hover-border:   var(--qr-border-strong);  /* .qr-pill:hover:not(.is-active) */
    --qr-pill-more-open-border:      var(--qr-border-strong);  /* .qr-pill--more.is-open */
    --qr-pill-more-open-text:        var(--qr-slate-700);  /* .qr-pill--more.is-open */
    --qr-pill-n-bad-bg:              var(--qr-danger);  /* .qr-pill__n.is-bad */
    --qr-pill-n-bad-text:            var(--qr-text-inverse);  /* .qr-pill__n.is-bad */
    --qr-pills-border:               var(--qr-gray-200);  /* .qr-pills */
    --qr-quote-bg:                   rgba(var(--qr-slate-900-rgb), .06);  /* .qr-quote */
    --qr-rail-pop-shadow:            6px 0 22px rgba(var(--qr-shadow-rgb), .14);  /* .qr-rail-pop */
    --qr-react-shadow:               0 1px 2px rgba(var(--qr-shadow-rgb), .08);  /* .qr-react */
    --qr-reply-option-bg:            rgba(var(--qr-white-rgb), 0.7);  /* .qr-reply-option, .qr-contact-more */
    --qr-scroll-bottom-border:       var(--qr-navy-80);  /* .qr-scroll-bottom, .qr-contact-act */
    --qr-scroll-bottom-hover-bg:     var(--qr-primary);  /* .qr-scroll-bottom:hover, .qr-contact-act:hover */
    --qr-scroll-bottom-hover-text:   var(--qr-text-inverse);  /* .qr-scroll-bottom:hover, .qr-contact-act:hover … */
    --qr-scroll-bottom-text:         var(--qr-primary);  /* .qr-scroll-bottom, .qr-contact-act */
    --qr-secnav-n-bad-bg:            var(--bs-danger-bg-subtle);  /* .qr-secnav__n.is-bad, .qr-workarea .qr-subpill-b.is-active .qr-subpill */
    --qr-separator-fixed:            var(--qr-slate-200);  /* .qr-vsep, .qr-workbar .qr-tabs .nav-link .qr-tab-badge.bg-secondary */
    --qr-stat-border:                var(--qr-slate-175);  /* .qr-stat, .qr-metric-group … */
    --qr-stat-danger-bg:             var(--qr-red-100);  /* .qr-stat--danger */
    --qr-stat-info-bg:               var(--qr-sky-100);  /* .qr-stat--info, .qr-chan--telegram.qr-chan-chip … */
    --qr-stat-info-border:           var(--qr-sky-200);  /* .qr-stat--info */
    --qr-stat-pause-border:          var(--qr-amber-300);  /* .qr-stat--pause */
    --qr-stat-pause-over-bg:         var(--bs-danger-bg-subtle, var(--qr-bs-red-100));  /* .qr-stat--pause-over */
    --qr-stat-pause-over-border:     var(--bs-danger-border-subtle, var(--qr-bs-red-200));  /* .qr-stat--pause-over */
    --qr-stat-pause-over-icon-fixed: var(--bs-danger, var(--qr-bs-red));  /* .qr-stat--pause-over > .bi, .qr-status-remain--over */
    --qr-stat-primary-border-fixed:  var(--qr-indigo-170);  /* .qr-stat--primary */
    --qr-stat-success-bg:            var(--cui-success-bg-subtle);  /* .qr-stat--success, .qr-hover-success:hover */
    --qr-stat-success-border:        var(--qr-emerald-285);  /* .qr-stat--success, .qr-status-pill--live */
    --qr-stats-bg:                   var(--qr-slate-275);  /* .qr-stats::-webkit-scrollbar-thumb, .qr-actionbar-controls::-webkit-sc */
    --qr-status-label-text-fixed:    var(--bs-danger-text-emphasis, var(--qr-red-805));  /* .qr-status-pill--over .qr-status-label, .qr-status-pill--over .qr-stat */
    --qr-status-pill-over-bg-fixed:  var(--bs-danger-bg-subtle, var(--qr-red-100));  /* .qr-status-pill--over */
    --qr-status-pill-over-border-fixed: var(--bs-danger-border-subtle, var(--qr-bs-red-200));  /* .qr-status-pill--over, .qr-status-pill--over .qr-status-remain */
    --qr-status-pill-retry-border-fixed: var(--qr-red-200);  /* .qr-status-pill--retry, .qr-status-retry */
    --qr-subpill-b-active-border:    var(--bs-body-bg);  /* .qr-workarea .qr-subpill-b.is-active, .qr-workarea:not(.has-sub) .qr-w */
    --qr-subtabs-badge-bg:           var(--qr-slate-200);  /* .qr-subtabs .nav-link .badge, .qr-pill__n */
    --qr-subtabs-link-active-border: transparent;  /* .qr-subtabs .nav-link.active */
    --qr-subtabs-link-bg:            transparent;  /* .qr-subtabs .nav-link */
    --qr-surface-hover:              var(--cui-tertiary-bg);  /* .qr-hover-light:hover, .qr-workarea__nav … */
    --qr-surface-raised:             var(--qr-surface);  /* .qr-thememode-opt[aria-checked="true"], .qr-modal-subbar … */
    --qr-surface-recessed:           var(--bs-tertiary-bg);  /* .qr-subtabs, .qr-tabs … */
    --qr-surface-soft:               var(--qr-slate-50);  /* .qr-stat, .qr-metric-group … */
    --qr-sys-msg-card-accent-fixed:  var(--qr-yellow-530);  /* .qr-sys-msg__card */
    --qr-sys-msg-card-bg:            var(--qr-orange-15);  /* .qr-sys-msg__card */
    --qr-sys-msg-card-border-fixed:  var(--qr-orange-170);  /* .qr-sys-msg__card */
    --qr-sys-msg-head-text-fixed:    var(--qr-yellow-620);  /* .qr-sys-msg__head */
    --qr-table-border-fixed:         var(--qr-gray-100);  /* .qr-table > tbody > tr > td */
    --qr-tabs-link-active-text:      var(--bs-primary-text-emphasis);  /* .qr-tabs .nav-link.active */
    --qr-tabs-scroll-bg-fixed:       var(--qr-slate-275);  /* .qr-tabs.qr-tabs--scroll::-webkit-scrollbar-thumb */
    --qr-text-on-warning:            var(--qr-gray-800);  /* .btn-warning, .btn-warning:hover … */
    --qr-thememode-opt-shadow:       0 1px 2px rgba(var(--qr-shadow-rgb), 0.14);  /* .qr-thememode-opt[aria-checked="true"] */
    --qr-thememode-opt-text:         var(--qr-primary);  /* .qr-thememode-opt[aria-checked="true"] */
    --qr-thememode-track-bg:         var(--qr-surface-3);  /* .qr-thememode-track */
    --qr-threadcard-info-tone:       var(--qr-blue-700);  /* .qr-threadcard .is-info */
    --qr-threadcard-ok-tone:         var(--qr-emerald-700);  /* .qr-threadcard .is-ok, .qr-canalsum__st.is-ok */
    --qr-tip-text-fixed:             var(--qr-slate-175);  /* .qr-tip */
    --qr-tl-filters-border:          var(--qr-gray-200);  /* .qr-tl-filters */
    --qr-tl-more-n-bg:               var(--qr-slate-200);  /* .qr-tl-more__n */
    --qr-unsaved-text-fixed:         var(--bs-warning-text-emphasis, var(--qr-yellow-675));  /* .qr-unsaved */
    --qr-wait-chip-danger-bg:        var(--qr-orange-100);  /* .qr-wait-chip--danger */
    --qr-wait-chip-danger-border:    var(--qr-orange-200);  /* .qr-wait-chip--danger */
    --qr-wait-chip-danger-text:      var(--qr-orange-800);  /* .qr-wait-chip--danger */
    --qr-wait-chip-extreme-bg:       var(--qr-red-100);  /* .qr-wait-chip--extreme */
    --qr-wait-chip-extreme-border:   var(--qr-red-200);  /* .qr-wait-chip--extreme */
    --qr-wait-chip-extreme-text:     var(--qr-red-700);  /* .qr-wait-chip--extreme, .qr-threadcard .is-bad */
    --qr-wait-chip-warn-bg:          var(--qr-amber-100);  /* .qr-wait-chip--warn */
    --qr-wait-chip-warn-border:      var(--qr-amber-200);  /* .qr-wait-chip--warn */
    --qr-wait-chip-warn-text:        var(--qr-yellow-745);  /* .qr-wait-chip--warn */
    --qr-wait-danger-hover-bg:       var(--qr-orange-100);  /* .qr-chat-item.qr-wait-danger:hover */
    --qr-wait-extreme-hover-bg:      var(--qr-red-100);  /* .qr-chat-item.qr-wait-extreme:hover */
    --qr-window-notice-bg:           var(--qr-orange-50);  /* .qr-window-notice */
    --qr-window-notice-border:       var(--qr-orange-165);  /* .qr-window-notice */
    --qr-window-notice-icon-fixed:   var(--qr-yellow-545);  /* .qr-window-notice > .bi */
    --qr-window-notice-small-fixed:  var(--qr-yellow-645);  /* .qr-window-notice__text .small */
    --qr-window-notice-text-fixed:   var(--qr-yellow-695);  /* .qr-window-notice */
    --qr-workarea-tab-active-hover-bg: var(--bs-secondary-bg);  /* .qr-workarea__tab:hover:not(.is-active) */
    --qr-workarea-tab-active-shadow: 0 1px 2px rgba(var(--qr-shadow-rgb), .07);  /* .qr-workarea__tab.is-active */
    --qr-workbar-tab-active-bg:      var(--qr-navy-800);  /* .qr-workbar .qr-tabs .nav-link.active, .qr-pill.is-active */
    --qr-workbar-tab-active-border:  var(--qr-navy-800);  /* .qr-workbar .qr-tabs .nav-link.active, .qr-pill.is-active */
    --qr-workbar-tab-active-shadow:  0 2px 6px rgba(var(--qr-navy-800-rgb), .25);  /* .qr-workbar .qr-tabs .nav-link.active */
    --qr-workbar-tabs-bg:            transparent;  /* .qr-workbar .qr-tabs */
    /* Cierre de la consola (24/09/2026): no cambian en oscuro (así se veían). */
    --qr-pulse-critical-rgb:         var(--qr-bs-red-rgb);  /* @keyframes qrPauseOverPulse, qrCountdownPulse */
    --qr-dialog-backdrop-fixed:      rgba(var(--qr-slate-900-rgb), .55);  /* .qr-sendtpl-backdrop (ModalSendTemplate) */
    --qr-dialog-shadow-fixed:        0 24px 60px rgba(var(--qr-slate-900-rgb), .30);  /* .qr-sendtpl-content */
    --qr-login-art-ink:              var(--qr-white);  /* .qr-login-art__fill/__stroke (Login.svelte) */
    --qr-login-art-figure:           var(--qr-blue-560);  /* .qr-login-art__figure */
    --qr-login-art-dot:              var(--qr-bs-indigo);  /* .qr-login-art__dot */

    /* 6e. Chat del asesor y piezas de la consola: valor claro (el oscuro, abajo en 6e). */
    /* Burbujas del chat del asesor que no son cliente/asesor: la nota interna (ámbar), el
       susurro del supervisor (amarillo, interno) y la intervención del supervisor al cliente
       (violeta). Fondo, borde y color del encabezado; el valor oscuro va en 6e. */
    --qr-chat-bubble-note-bg:       var(--qr-amber-100);
    --qr-chat-bubble-note-border:   var(--qr-amber-200);
    --qr-chat-bubble-note-text:     var(--qr-amber-800);
    --qr-chat-bubble-whisper-bg:    var(--qr-yellow-100);
    --qr-chat-bubble-whisper-border:var(--qr-amber-200);
    --qr-chat-bubble-whisper-head:  var(--qr-amber-700);
    --qr-chat-bubble-interv-bg:     var(--qr-violet-100);
    --qr-chat-bubble-interv-border: var(--qr-violet-200);
    --qr-chat-bubble-interv-head:   var(--qr-violet-700);
    /* Onda de la grabación de audio del composer (WaveSurfer la pinta en canvas: se lee con
       getComputedStyle). Magenta: se distingue del índigo de la interfaz. */
    --qr-chat-wave:                 #c800c8;
    --qr-chat-wave-progress:        #640064;
    /* Color del NOMBRE de cada colaborador/supervisor en las burbujas (lib/participant_colors.js
       los asigna en orden de aparición). Evita verdes (dueño) e índigos (cliente); tonos
       oscuros, legibles sobre las burbujas pastel. */
    --qr-chat-participant-1:        var(--qr-blue-700);
    --qr-chat-participant-2:        var(--qr-red-700);
    --qr-chat-participant-3:        var(--qr-violet-600);
    --qr-chat-participant-4:        var(--qr-orange-700);
    --qr-chat-participant-5:        var(--qr-cyan-700);
    --qr-chat-participant-6:        #a21caf;                  /* fucsia */
    --qr-chat-participant-7:        #be123c;                  /* carmín */
    --qr-chat-participant-8:        var(--qr-orange-800);
    --qr-chat-participant-9:        var(--qr-sky-700);
    --qr-chat-participant-10:       var(--qr-violet-700);
    --qr-chat-participant-11:       var(--qr-pink-800);
    --qr-chat-participant-12:       var(--qr-amber-700);
    --qr-chat-participant-13:       var(--qr-blue-900);
    --qr-chat-participant-14:       var(--qr-pink-900);
    /* Ícono o texto en el primario SOBRE una superficie (FAB del softphone, reloj de la
       llamada, cuenta regresiva). En claro es el primario; en oscuro se aclara (abajo),
       porque el índigo base sobre fondo oscuro no se lee. */
    --qr-primary-ink:               var(--qr-primary);
    /* Categoría "cielo" como relleno con ícono blanco encima (nodo de chat de la línea de
       tiempo del registro): un paso más oscuro que --qr-cat-sky para que el ícono se lea. */
    --qr-cat-sky-strong:            var(--qr-sky-600);

}
html:root[data-bs-theme="dark"],
html:root[data-coreui-theme="dark"] {
    /* 6a. Paleta oscura: los únicos literales del tema. */
    --qr-dk-bg:                      #0b1220;
    --qr-dk-line:                    #2a3a52;
    --qr-dk-surface:                 #16203a;
    --qr-dk-surface-2:               #1d2944;
    --qr-dk-text:                    #e6edf6;
    --qr-dk-text-2:                  #9aa7bd;
    --qr-dk-text-3:                  #6b7a93;
    --qr-dk-blue-315:                #8dc2f5;
    --qr-dk-blue-925:                #1d2c66;
    --qr-dk-cyan-900:                #1d4d66;
    --qr-dk-emerald-255:             #99eac0;
    --qr-dk-emerald-770:             #1d6645;
    --qr-dk-emerald-785:             #226242;
    --qr-dk-emerald-820:             #2a5944;
    --qr-dk-emerald-915:             #0f3f24;
    --qr-dk-emerald-920:             #0f3d2e;
    --qr-dk-emerald-925:             #0f3f28;
    --qr-dk-gray-805:                #0c2a3a;
    --qr-dk-gray-815:                #182736;
    --qr-dk-gray-825:                #2a2410;
    --qr-dk-gray-840:                #3f0f2a;
    --qr-dk-gray-845:                #3a1414;
    --qr-dk-gray-850:                #2a1d0e;
    --qr-dk-gray-855:                #241f10;
    --qr-dk-green-275:               #92f1bb;
    --qr-dk-green-800:               #20643b;
    --qr-dk-green-925:               #0f3f21;
    --qr-dk-indigo-330:              #93abf0;
    --qr-dk-indigo-375:              #9893ef;
    --qr-dk-indigo-925:              #1d2566;
    --qr-dk-indigo-940:              #2b1b4d;
    --qr-dk-navy-240:                #a6bcdd;
    --qr-dk-navy-655:                #1d4866;
    --qr-dk-navy-670:                #3d4d75;
    --qr-dk-navy-675:                #1d4266;
    --qr-dk-navy-685:                #1d3e66;
    --qr-dk-navy-695:                #2b3a59;
    --qr-dk-navy-705:                #36456a;
    --qr-dk-navy-755:                #2c3a5c;
    --qr-dk-navy-800:                #24304e;
    --qr-dk-navy-805:                #2b3559;
    --qr-dk-navy-820:                #242f5f;
    --qr-dk-orange-230:              #f5d38d;
    --qr-dk-orange-270:              #f5c58d;
    --qr-dk-pink-340:                #e49ec6;
    --qr-dk-pink-915:                #661d46;
    --qr-dk-red-255:                 #f0a3a3;
    --qr-dk-red-325:                 #dda5a9;
    --qr-dk-red-345:                 #ee9494;
    --qr-dk-red-915:                 #661d1d;
    --qr-dk-red-920:                 #661d25;
    --qr-dk-red-925:                 #5c1d1d;
    --qr-dk-red-955:                 #3f0f0f;
    --qr-dk-red-960:                 #3f0f14;
    --qr-dk-sky-305:                 #93cfef;
    --qr-dk-sky-310:                 #8dd0f5;
    --qr-dk-slate-690:               #3b4a5e;
    --qr-dk-slate-700:               #2b4259;
    --qr-dk-slate-705:               #2b4059;
    --qr-dk-slate-710:               #2b3e59;
    --qr-dk-slate-795:               #0f2c3f;
    --qr-dk-slate-810:               #172737;
    --qr-dk-slate-815:               #0f2740;
    --qr-dk-slate-820:               #0f273f;
    --qr-dk-slate-825:               #182536;
    --qr-dk-slate-830:               #0f243f;
    --qr-dk-slate-835:               #182236;
    --qr-dk-slate-845:               #182036;
    --qr-dk-slate-870:               #111a3d;
    --qr-dk-slate-875:               #0f1a3f;
    --qr-dk-slate-890:               #0f153f;
    --qr-dk-slate-895:               #0f143f;
    --qr-dk-teal-220:                #8df5d5;
    --qr-dk-teal-225:                #8df5d8;
    --qr-dk-teal-240:                #92f1cb;
    --qr-dk-teal-855:                #115555;
    --qr-dk-teal-930:                #183628;
    --qr-dk-teal-940:                #0b2f26;
    --qr-dk-violet-870:              #1e1b4b;
    --qr-dk-yellow-810:              #66581d;
    --qr-dk-yellow-825:              #66551d;
    --qr-dk-yellow-845:              #66511d;
    --qr-dk-yellow-900:              #5a4a16;
    --qr-dk-yellow-905:              #5c4708;
    --qr-dk-yellow-915:              #5c3a0d;
    --qr-dk-yellow-930:              #3f350f;
    --qr-dk-yellow-940:              #3a2812;
    --qr-dk-yellow-945:              #3a2c08;
    --qr-dk-yellow-950:              #3a2408;

    /* 6b. Semánticos del sistema. */
    --qr-body-bg:                    var(--qr-dk-bg);
    --qr-surface:                    var(--qr-dk-surface);
    --qr-surface-2:                  var(--qr-dk-surface);
    --qr-surface-3:                  var(--qr-dk-surface-2);
    --qr-surface-sunken:             var(--qr-dk-surface-2);
    --qr-surface-strong:             var(--qr-dk-line);
    --qr-surface-stronger:           var(--qr-dk-line);
    --qr-border:                     var(--qr-dk-line);
    --qr-border-soft:                var(--qr-dk-navy-800);
    --qr-border-strong:              var(--qr-dk-slate-690);
    --qr-header-border:              var(--qr-dk-line);
    --qr-text:                       var(--qr-dk-text);
    --qr-text-emphasis:              var(--qr-dk-text);
    --qr-text-strong:                var(--qr-dk-text);
    --qr-text-body:                  var(--qr-dk-text-2);
    --qr-text-secondary:             var(--qr-dk-text-2);
    --qr-text-muted:                 var(--qr-dk-text-3);
    --qr-field-bg:                   var(--qr-dk-bg);
    --qr-field-border:               var(--qr-dk-line);
    --qr-field-border-hover:         var(--qr-dk-slate-690);
    --qr-field-placeholder:          var(--qr-dk-text-3);
    --qr-primary-soft:               var(--qr-dk-slate-890);
    --qr-primary-subtle:             var(--qr-dk-violet-870);
    /* El fondo casi blanco de un elemento elegido (tarjetas con check, filas marcadas, hover de
       pickers) quedaba claro en oscuro y el texto blanco encima desaparecía: acá es el soft oscuro. */
    --qr-primary-25:                 var(--qr-primary-soft);
    --qr-primary-ink:                var(--qr-primary-300);
    /* Estado "entregado" de una notificación (chip cian del reporte de notificaciones). */
    --qr-report-delivered:           var(--qr-cyan-300);
    --qr-report-delivered-bg:        color-mix(in srgb, var(--qr-cyan-500) 14%, var(--qr-dk-surface));
    --qr-report-delivered-bd:        var(--qr-dk-cyan-900);
    --qr-ok-bg:                      var(--qr-dk-emerald-925);
    --qr-ok-border:                  var(--qr-dk-emerald-770);
    --qr-ok-text:                    var(--qr-dk-teal-225);
    --qr-warn-bg:                    var(--qr-dk-yellow-930);
    --qr-warn-border:                var(--qr-dk-yellow-810);
    --qr-warn-text:                  var(--qr-dk-orange-230);
    --qr-bad-bg:                     var(--qr-dk-red-955);
    --qr-bad-border:                 var(--qr-dk-red-915);
    --qr-bad-text:                   var(--qr-dk-red-255);
    --qr-info-bg:                    var(--qr-dk-slate-795);
    --qr-info-border:                var(--qr-dk-cyan-900);
    --qr-info-text:                  var(--qr-dk-sky-310);
    --qr-danger-50:                  var(--qr-dk-red-955);
    --qr-danger-200:                 var(--qr-dk-red-915);
    --qr-warning-100:                var(--qr-dk-yellow-930);
    --qr-warning-700:                var(--qr-amber-300);
    --qr-flow-route-decision:        var(--qr-teal-400);
    --qr-flow-route-decision-soft:   var(--qr-dk-surface-2);
    --qr-flow-route-decision-border: var(--qr-teal-700);
    --qr-flow-route-decision-text:   var(--qr-teal-200);
    --qr-flow-route-intent:          var(--qr-violet-400);
    --qr-flow-route-intent-soft:     var(--qr-dk-surface-2);
    --qr-flow-route-intent-border:   var(--qr-violet-700);
    --qr-flow-route-intent-text:     var(--qr-violet-200);

    /* 6c. Puentes CoreUI/Bootstrap, escala subtle de CoreUI (que en oscuro seguía clara),
       links y sombras (venían del bloque oscuro de queuereport_agent.css). */
    --cui-body-bg:                   var(--qr-dk-bg);
    --cui-secondary-bg:              var(--qr-dk-surface-2);
    --cui-tertiary-bg:               var(--qr-dk-surface);
    --cui-border-color:              var(--qr-dk-line);
    --cui-primary-bg-subtle:         var(--qr-primary-950);
    --cui-primary-border-subtle:     var(--qr-primary-800);
    --cui-primary-text-emphasis:     var(--qr-primary-200);
    --cui-secondary-bg-subtle:       var(--qr-dk-surface-2);
    --cui-secondary-border-subtle:   var(--qr-dk-line);
    --cui-secondary-text-emphasis:   var(--qr-dk-text-2);
    --cui-success-bg-subtle:         var(--qr-dk-emerald-925);
    --cui-success-border-subtle:     var(--qr-dk-emerald-770);
    --cui-success-text-emphasis:     var(--qr-dk-teal-225);
    --cui-danger-bg-subtle:          var(--qr-dk-red-955);
    --cui-danger-border-subtle:      var(--qr-dk-red-915);
    --cui-danger-text-emphasis:      var(--qr-dk-red-255);
    --cui-warning-bg-subtle:         var(--qr-dk-yellow-930);
    --cui-warning-border-subtle:     var(--qr-dk-yellow-810);
    --cui-warning-text-emphasis:     var(--qr-dk-orange-230);
    --cui-info-bg-subtle:            var(--qr-dk-slate-795);
    --cui-info-border-subtle:        var(--qr-dk-cyan-900);
    --cui-info-text-emphasis:        var(--qr-dk-sky-310);
    --cui-light-bg-subtle:           var(--qr-dk-surface-2);
    --cui-light-border-subtle:       var(--qr-dk-line);
    --cui-light-text-emphasis:       var(--qr-dk-text);
    --cui-dark-bg-subtle:            var(--qr-dk-surface);
    --cui-dark-border-subtle:        var(--qr-dk-line);
    --cui-dark-text-emphasis:        var(--qr-dk-text-2);
    --qr-text-rgb:                   230,237,246;
    --bs-body-bg:                    var(--cui-body-bg);
    --bs-border-color:               var(--cui-border-color);
    --cui-link-color:                var(--qr-primary-light);
    --cui-link-color-rgb:            var(--qr-primary-light-rgb);
    --cui-link-hover-color:          var(--qr-primary-400);
    --cui-link-hover-color-rgb:      var(--qr-primary-400-rgb);
    --bs-primary-bg-subtle:          var(--qr-primary-950);
    --bs-primary-border-subtle:      var(--qr-primary-800);
    --bs-primary-text-emphasis:      var(--qr-primary-200);
    --qr-shadow-sm:                  0 1px 3px rgba(var(--qr-black-rgb), .45);
    --qr-shadow-md:                  0 4px 12px rgba(var(--qr-black-rgb), .5);
    --qr-shadow-lg:                  0 10px 24px rgba(var(--qr-black-rgb), .55);
    --qr-shadow-xl:                  0 24px 60px rgba(var(--qr-black-rgb), .6);

    /* 6d. Semánticos propios de la consola. */
    --qr-band-strip-bg:              var(--qr-dk-slate-815);
    --qr-band-tab-active-text:       var(--qr-blue-100);
    --qr-band-tab-n-active-bg:       var(--qr-blue-100);
    --qr-band-tab-n-active-text:     var(--qr-dk-slate-815);
    --qr-border-hairline:            var(--qr-dk-line);
    --qr-border-veil:                rgba(230, 237, 246, .14);
    --qr-btn-light-active-bg:        var(--qr-dk-navy-755);  /* botón .btn-light en oscuro */
    --qr-btn-light-active-border:    var(--qr-dk-navy-670);  /* botón .btn-light en oscuro */
    --qr-btn-light-hover-border:     var(--qr-dk-navy-705);  /* botón .btn-light en oscuro (en claro lo pone CoreUI) */
    --qr-bubble-collab-border:       var(--qr-dk-teal-855);
    --qr-callbacks-block-border:     var(--qr-dk-navy-805);
    --qr-camp-card-check-border:     var(--qr-dk-line);
    --qr-camp-head-count-border:     var(--qr-dk-blue-925);
    --qr-camp-head-ico-in-bg:        var(--qr-dk-slate-895);
    --qr-camp-head-ico-out-bg:       var(--qr-dk-teal-930);
    --qr-chan-default-bg:            var(--qr-dk-slate-810);
    --qr-chan-default-border:        var(--qr-dk-slate-710);
    --qr-chan-default-text:          var(--qr-dk-text);
    --qr-chan-instagram-bg:          var(--qr-dk-gray-840);
    --qr-chan-instagram-border:      var(--qr-dk-pink-915);
    --qr-chan-instagram-text:        var(--qr-dk-pink-340);
    --qr-chan-messenger-bg:          var(--qr-dk-slate-820);
    --qr-chan-messenger-border:      var(--qr-dk-navy-675);
    --qr-chan-messenger-text:        var(--qr-dk-blue-315);
    --qr-chan-phone-bg:              var(--qr-dk-gray-815);
    --qr-chan-phone-border:          var(--qr-dk-slate-700);
    --qr-chan-phone-text:            var(--qr-dk-navy-240);
    --qr-chan-pill-audio-border:     var(--qr-dk-emerald-820);
    --qr-chan-pill-audio-text:       var(--qr-dk-teal-240);
    --qr-chan-pill-chat-border:      var(--qr-dk-navy-655);
    --qr-chan-pill-chat-text:        var(--qr-dk-sky-310);
    --qr-chan-pill-req-border:       var(--qr-dk-yellow-845);
    --qr-chan-pill-req-text:         var(--qr-dk-orange-230);
    --qr-chan-sms-border:            var(--qr-dk-indigo-925);
    --qr-chan-sms-text:              var(--qr-dk-indigo-375);
    --qr-chan-telegram-border:       var(--qr-dk-cyan-900);
    --qr-chan-telegram-text:         var(--qr-dk-sky-305);
    --qr-chan-whatsapp-bg:           var(--qr-dk-green-925);
    --qr-chan-whatsapp-border:       var(--qr-dk-green-800);
    --qr-chan-whatsapp-text:         var(--qr-dk-green-275);
    --qr-chat-item-menu-btn-hover-bg: var(--qr-dk-slate-875);
    --qr-chat-item-overdue-bg:       var(--qr-dk-gray-850);
    --qr-chat-item-overdue-hover-bg: var(--qr-dk-yellow-940);
    --qr-chip-bad-text:              var(--qr-dk-red-345);
    --qr-chip-info-bg:               var(--qr-dk-slate-830);
    --qr-chip-info-border:           var(--qr-dk-navy-685);
    --qr-chip-info-text:             var(--qr-dk-indigo-330);
    --qr-chip-muted-bg:              rgba(230, 237, 246, .08);
    --qr-chip-ok-bg:                 var(--qr-dk-emerald-925);
    --qr-chip-ok-border:             var(--qr-dk-emerald-770);
    --qr-chip-ok-text:               var(--qr-dk-teal-225);
    --qr-chip-warn-bg:               rgba(245, 158, 11, .12);
    --qr-chip-warn-border:           rgba(245, 158, 11, .35);
    --qr-chip-warn-text:             var(--qr-amber-400);
    --qr-composer-btn-send-hover-text: var(--qr-dk-teal-220);
    --qr-console-bandeja-inbox-lift: 0 1px 2px rgba(var(--qr-black-rgb), .4),0 8px 20px -10px rgba(var(--qr-black-rgb), .6);
    --qr-console-bandeja-inbox-line: var(--qr-dk-line);
    --qr-console-item-live-text:     var(--qr-green-400);
    --qr-console-item-since-hot-text: var(--qr-orange-400);
    --qr-console-item-unread-bg:     var(--qr-red-500);
    --qr-console-section-ico-callbacks-text: var(--qr-pink-300);
    --qr-console-section-ico-mine-text: var(--qr-indigo-300);
    --qr-console-section-ico-queue-text: var[--qr-tone];
    --qr-console-section-ico-records-text: var(--qr-teal-300);
    --qr-contact-more-hover-bg:      rgba(var(--qr-white-rgb), .05);
    --qr-conv-meta-sep-text:         rgba(230, 237, 246, .14);
    --qr-custpanel-sec-shadow:       none;
    --qr-dispo-option-code-bg:       var(--qr-dk-slate-835);
    --qr-event-chip-border:          var(--qr-dk-navy-695);
    --qr-event-chip-join-bg:         var(--qr-dk-emerald-915);
    --qr-event-chip-join-text:       var(--qr-dk-emerald-255);
    --qr-event-chip-leave-border:    var(--qr-dk-red-915);
    --qr-event-chip-leave-text:      var(--qr-dk-red-325);
    --qr-iconbtn-hover-bg:           var(--qr-dk-slate-870);
    --qr-iconbtn-hover-border:       var(--qr-dk-navy-820);
    --qr-input-group-text-border:    var(--qr-dk-line);
    --qr-list-toolbar-border:        var(--qr-dk-line);
    --qr-media-card-bg:              rgba(var(--qr-white-rgb), 0.05);
    --qr-media-card-file-hover-bg:   rgba(var(--qr-white-rgb), 0.10);
    --qr-media-card-icon-text:       var(--qr-dk-orange-270);
    --qr-metric-clickable-hover-bg:  var[--qr-s3|rgba(42,49,66,1)];
    --qr-metric-group-chat-icon-bg:  var(--qr-dk-gray-805);
    --qr-metric-group-chat-icon-text: var(--qr-sky-300);
    --qr-metric-group-email-icon-bg: var(--qr-dk-indigo-940);
    --qr-metric-group-email-icon-text: var(--qr-violet-300);
    --qr-metric-group-icon-bg:       var(--qr-dk-surface-2);
    --qr-metric-group-live-border:   var(--qr-green-785);
    --qr-metric-group-live-icon-bg:  var(--qr-dk-emerald-920);
    --qr-metric-group-live-ring:     0 0 0 1px rgba(var(--qr-green-500-rgb), 0.22), 0 2px 10px rgba(var(--qr-black-rgb), 0.45);
    --qr-metric-group-live-shadow:   var(--qr-dk-surface);
    --qr-metric-group-session-icon-bg: var(--qr-dk-surface-2);
    --qr-metric-group-voz-icon-bg:   var(--qr-dk-teal-940);
    --qr-metric-group-voz-icon-text: var(--qr-emerald-300);
    --qr-msg-editor-btn-hover-bg:    var(--qr-dk-slate-845);
    --qr-msg-retry-hover-bg:         var(--qr-dk-red-955);
    --qr-msg-retry-hover-border:     var(--qr-dk-red-915);
    --qr-note-textarea-bg:           var(--qr-dk-surface);
    --qr-note-textarea-focus-border: var(--qr-dk-yellow-810);
    --qr-notif-item-hover-bg:        var(--qr-dk-surface);
    --qr-pick-card-hover-border:     var(--qr-dk-line);
    --qr-pick-card-selected-bg:      var(--qr-dk-surface);
    --qr-pick-card-selected-border:  var(--qr-dk-line);
    --qr-pill-active-hover-border:   var(--qr-dk-line);
    --qr-pill-more-open-border:      var(--qr-dk-slate-705);
    --qr-pill-more-open-text:        var(--qr-dk-navy-240);
    --qr-pill-n-bad-bg:              var(--qr-dk-surface-2);
    --qr-pill-n-bad-text:            var(--qr-dk-text-2);
    --qr-pills-border:               var(--qr-dk-line);
    --qr-quote-bg:                   rgba(var(--qr-text-rgb), .10);
    --qr-rail-pop-shadow:            6px 0 22px rgba(var(--qr-black-rgb), .45);
    --qr-react-shadow:               none;
    --qr-reply-option-bg:            rgba(var(--qr-white-rgb), 0.05);
    --qr-scroll-bottom-border:       var(--qr-dk-line);
    --qr-scroll-bottom-hover-bg:     var(--qr-dk-surface);
    --qr-scroll-bottom-hover-text:   var(--qr-dk-text);
    --qr-scroll-bottom-text:         var(--qr-dk-text);
    --qr-secnav-n-bad-bg:            var(--qr-dk-surface-2);
    --qr-stat-border:                var(--qr-dk-line);
    --qr-stat-danger-bg:             var(--qr-dk-red-955);
    --qr-stat-info-bg:               var(--qr-dk-slate-795);
    --qr-stat-info-border:           var(--qr-dk-cyan-900);
    --qr-stat-pause-border:          var(--qr-dk-yellow-825);
    --qr-stat-pause-over-bg:         var(--qr-dk-red-960);
    --qr-stat-pause-over-border:     var(--qr-dk-red-920);
    --qr-stat-success-bg:            var(--qr-dk-teal-930);
    --qr-stat-success-border:        var(--qr-dk-emerald-785);
    --qr-stats-bg:                   var(--qr-dk-surface);
    --qr-subpill-b-active-border:    var(--qr-dk-surface);
    --qr-subtabs-badge-bg:           var(--qr-dk-surface-2);
    --qr-subtabs-link-active-border: var(--qr-indigo-600);
    --qr-subtabs-link-bg:            var(--qr-dk-surface);
    --qr-surface-hover:              var(--qr-dk-surface-2);
    --qr-surface-raised:             var(--qr-dk-surface-2);
    --qr-surface-recessed:           var(--qr-dk-bg);
    --qr-surface-soft:               var(--qr-dk-surface-2);
    --qr-sys-msg-card-bg:            var(--qr-dk-gray-855);
    --qr-tabs-link-active-text:      var(--qr-blue-100);
    --qr-thememode-opt-shadow:       none;
    --qr-thememode-opt-text:         var(--qr-indigo-500);
    --qr-thememode-track-bg:         var(--qr-dk-slate-870);
    --qr-threadcard-info-tone:       var(--qr-blue-300);
    --qr-threadcard-ok-tone:         var(--qr-emerald-300);
    --qr-tl-filters-border:          rgba(230, 237, 246, .14);
    --qr-tl-more-n-bg:               var(--qr-dk-slate-825);
    --qr-wait-chip-danger-bg:        var(--qr-dk-yellow-950);
    --qr-wait-chip-danger-border:    var(--qr-dk-yellow-915);
    --qr-wait-chip-danger-text:      var(--qr-orange-300);
    --qr-wait-chip-extreme-bg:       var(--qr-dk-gray-845);
    --qr-wait-chip-extreme-border:   var(--qr-dk-red-925);
    --qr-wait-chip-extreme-text:     var(--qr-red-300);
    --qr-wait-chip-warn-bg:          var(--qr-dk-yellow-945);
    --qr-wait-chip-warn-border:      var(--qr-dk-yellow-905);
    --qr-wait-chip-warn-text:        var(--qr-amber-200);
    --qr-wait-danger-hover-bg:       var(--qr-dk-surface-2);
    --qr-wait-extreme-hover-bg:      var(--qr-dk-surface-2);
    --qr-window-notice-bg:           var(--qr-dk-gray-825);
    --qr-window-notice-border:       var(--qr-dk-yellow-900);
    --qr-workarea-tab-active-hover-bg: var(--qr-dk-surface);
    --qr-workarea-tab-active-shadow: none;
    --qr-workbar-tab-active-bg:      var(--qr-indigo-600);
    --qr-workbar-tab-active-border:  var(--qr-indigo-600);
    --qr-workbar-tab-active-shadow:  none;
    --qr-workbar-tabs-bg:            var(--qr-dk-bg);

    /* 6e. Chat del asesor (burbujas, onda de audio, participantes): movido del bloque
       `[data-bs-theme="dark"]` que estaba junto a la subsección "Consola". */
    --qr-chat-bubble-note-bg:        #3f350f;
    --qr-chat-bubble-note-border:    #66581d;
    --qr-chat-bubble-whisper-bg:     #3f3b0f;
    --qr-chat-bubble-whisper-border: #66581d;
    --qr-chat-bubble-interv-bg:      #180f3f;
    --qr-chat-bubble-interv-border:  #2a1d66;
    --qr-primary-ink:                var(--qr-primary-200);
}

/* Margen de página en pantallas angostas (tablet/teléfono): menos aire para no comer ancho. */
@media (max-width: 767.98px) {
    :root {
        --qr-page-gutter-x:      var(--qr-sp-3);
        --qr-page-gutter-top:    var(--qr-sp-3);
        --qr-page-gutter-bottom: var(--qr-sp-4);
    }
}