Tokens, componentes
y patrones

El motor YiQiLogo usa data-axis="y" (flip vertical). Se reproduce al cargar; click para repetir.

Wordmark de certificación. SVG inline con colores fijos por variante. Clases globales: .iar (texto) y .iar-a (letra A).

Dark — letras #f0f1f3 · A #00ccff Light — letras #17191c · A #009fc7 Producción — clases .iar / .iar-a

Único peso cargado: Heavy (800). El archivo se declara con font-weight: 700 900 en @font-face, así cubre cualquier display title con peso 700-900. Pesos menores caen al fallback (Plus Jakarta Sans → Inter).

Callouts, notas y cards con borde en un solo lado (border-left o border-top de acento) quedan prohibidos: rompen el sistema flat & borderless y combinan mal con esquinas redondeadas. El énfasis se logra con fondo tonal (--amber-soft, --cyan-soft, etc.), nunca con bordes parciales.

Componente canónico para buscadores en landings y páginas internas. Sin borde visible por defecto (borderless). Fondo var(--bg-elev-2). Focus ring cyan. Clear button opcional. Shortcut ⌘K opcional. Clases: .search-wrap · .search-icon · .search-input · .search-clear · .search-kbd.

Usado en: faq.html · ayuda-erp.html · topbar del DS (variante compacta .topbar-search-wrap)

Para el hero o franjas de credibilidad. Hasta ~5 ítems en una fila. .trust.trust--inline

Para secciones con más respiro, con delta opcional. .trust.trust--cards

Para banners densos de 4-5 cifras. .trust.trust--grid

Ícono cyan-soft a la izquierda o mini-gráfico bajo la cifra. .trust-item.has-media · .trust-icon · .trust-spark

→ Componente de app. Documentado en Kit base · Estados de carga (§27 Aplicaciones).

LLM FAB

Botón flotante para copiar el contexto del DS al clipboard. Diseñado para uso en páginas servidas (no file://). Web Component reutilizable.

function runCounters(root = document) {
  root.querySelectorAll('[data-count]').forEach(el => {
    const target = parseFloat(el.dataset.count);
    const prefix = el.dataset.prefix || '';
    const suffix = el.dataset.suffix || '';
    const isInt  = Number.isInteger(target);
    const dur    = 900;
    let start = null;
    function fmt(v) {
      return isInt
        ? prefix + Math.round(v) + suffix
        : prefix + v.toFixed(1).replace('.', ',') + suffix;
    }
    el.textContent = fmt(0);
    function step(ts) {
      if (!start) start = ts;
      const p    = Math.min((ts - start) / dur, 1);
      const ease = 1 - Math.pow(1 - p, 3); // ease-out-cubic
      el.textContent = fmt(ease * target);
      if (p < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  });
}

// Activación por IntersectionObserver
const io = new IntersectionObserver(entries => {
  entries.forEach(e => { if (e.isIntersecting) { runCounters(e.target); io.unobserve(e.target); } });
}, { threshold: 0.3 });
document.querySelectorAll('.kpi-block').forEach(b => io.observe(b));

// Patrón canónico — pegar en options{} de cualquier chart
const chartAnim = {
  duration: 900,               // 900 barras · 1000 línea · 1000 donut
  easing:   'easeOutQuart'
};

// Respetar prefers-reduced-motion
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduce) chartAnim.duration = 0;

// Uso en new Chart()
options: {
  animation: chartAnim,
  // ...
}

Los gráficos no se inicializan al cargar. Se crean solo cuando el contenedor entra en el viewport (threshold 0.25). Evita animar charts fuera de pantalla.

let played = false;
const io = new IntersectionObserver(entries => {
  if (entries[0].isIntersecting && !played) {
    played = true;
    io.disconnect();
    buildCharts(); // inicializar aquí, no antes
    runCounters();
  }
}, { threshold: 0.25 });
io.observe(document.querySelector('#dashboard-section'));

Líneas SVG animadas con stroke-dashoffset. Solo se activan si prefers-reduced-motion: no-preference.

/* Estado inicial */
@media (prefers-reduced-motion: no-preference) {
  .sparkline polyline {
    stroke-dasharray:  1;
    stroke-dashoffset: 1;
  }
  body.anim-in .sparkline polyline {
    animation: sparkDraw 1.1s cubic-bezier(.6,.04,.2,1) forwards;
  }
  .sparkline polygon  { opacity: 0; }
  body.anim-in .sparkline polygon {
    animation: sparkFade .5s ease .8s forwards;
  }
}
@keyframes sparkDraw { to { stroke-dashoffset: 0 } }
@keyframes sparkFade  { to { opacity: 1 } }

/* Activar: agregar clase al body */
document.body.classList.add('anim-in');

Siempre usar easeOutQuart — nunca linear ni easeInOut en gráficos de datos. Respetar prefers-reduced-motion con duration:0. No animar en carga inicial si el chart está fuera del viewport. Los gráficos secundarios o de fondo pueden usar duration:0 directamente.

Las apps comparten tokens, paleta, radios y sombras con la web. Lo que cambia es intencional, no deriva:

Usar .load-progress a todo ancho, dentro de un contenedor transparente (.card-flush) para no boxear ni deformar la vista. Etiqueta + % mono cyan, barra de 4px, y línea de estado con dot.

Tarjeta base de indicador. Jerarquía: kicker → cifra (count-up, Plus Jakarta) → chip de delta tonal → nota de contexto. La “i” despliega el detalle al tocar (no title nativo). Toda la card es clickeable para abrir el gráfico en detalle.

Cada card es colapsable: el chevron de la esquina la reduce a una tira que deja visible solo el título; al expandir vuelve a mostrar valor, delta y nota. El colapso es independiente por card y no dispara el modal.

Regla: la cifra va en --text (neutral). El color semántico (verde positivo / rojo negativo) vive solo en el chip de delta, no en el número.

<article class="kpi-card">
  <div class="kpi-label">
    <span class="metric-label">Facturación total</span>
    <button type="button" class="kpi-help" aria-expanded="false">
      <span aria-hidden="true">i</span>
      <span class="kpi-help-pop" role="tooltip">Detalle del indicador…</span>
    </button>
  </div>
  <div class="kpi-value" data-count="2.84" data-prefix="$" data-suffix="M">$0M</div>
  <div class="kpi-delta is-positive">↑ +18,4% vs período anterior</div>
  <div class="kpi-note">Facturas + NDs − NCs del período.</div>
</article>

Al tocar un KPI card (con valor + delta de comparación), se abre un modal con dos barras (anterior vs actual), cards 2×2 y una tabla comparativa. El período anterior se deriva del delta declarado del KPI (no es un dato extra): si el delta es +8,7%, anterior = actual ÷ 1,087. Los valores secundarios van en mono tabular; los deltas en porcentaje con color por signo.

Nota: «Período anterior estimado a partir del delta declarado (+8,7%).» Solo se muestra en KPIs con delta de comparación; los de serie diaria (línea) mantienen Total/Promedio/Máx/Mín.

Las 7 secciones de módulo reutilizan los mismos componentes, así que estas reglas se definen una vez a nivel de clase y aplican a todas. Todo el panel es flat y borderless: la profundidad va por fondo/sombra, nunca por borde, y no hay degradés ni glows en datos.

Piezas de visualización del panel conectadas a datos reales del ERP. Todas flat & borderless, con tokens y animación de entrada.

Estructura del Resumen ejecutivo y los controles del topbar. Clases definidas a nivel de app; reglas canónicas acá.

Render en vivo de cada componente del panel, con su nombre.

• Estado general — Atención

  1 punto requiere seguimiento · 2 OK

• Facturación consolidada$157,4 M

  $157,4 M en 1335 pedidos procesados.

• Estado operativo de pedidos1 incid.

  0 pendientes, 0 demorados y 1 cancelado en el período.

• Franja de mayor actividad31%

  10-12 concentra 31% del flujo operativo.

Conmuta el tipo del sparkline/chart. .is-active marca el vigente; barras por defecto en series diarias.

Inventario completo: todos los componentes del Panel Gerencial (Analytics Pro) están documentados en esta sección a v1.2.7.