/* ===========================================================================
 * bbspark.css — LA CHISPA. Seis propuestas; la que se escoja se queda.
 * ===========================================================================
 * Las seis que había en el catálogo no eran seis diseños: eran la MISMA línea
 * con el trazo en 1.6, 1.6, 1.8, 1.8, 1.9 y uno en CSS. Escoger entre ellas no
 * decide nada. Estas seis contestan preguntas distintas, que es lo único que
 * justifica que exista más de una.
 *
 * REFERENCIA: `1b230ab4` — Mono Charts (@SubhanHQ), 30 visualizadores
 * monocromáticos: sparkline de telemetría, matriz de puntos, barras, spline.
 * Lo que se trae es la doctrina, no el estilo: **una figura chiquita dice UNA
 * cosa**, y la forma se escoge por lo que el dato es, no por gusto.
 *
 * LA REGLA QUE LAS GOBIERNA A TODAS: una chispa NO tiene eje, así que no puede
 * afirmar magnitud — sólo FORMA. Por eso ninguna se pinta sola: todas van
 * pegadas al número que sí está rotulado. Una chispa suelta es un adorno.
 *
 * Y la trampa que ya cobró en este app: un dato semanal es DISCRETO. Una línea
 * entre dos semanas dibuja los días de en medio, que nadie midió. Donde eso
 * importa, `.bbs-bars`.
 * -------------------------------------------------------------------------*/

.bbs {
  --bbs-ink: var(--bb-accent);
  --bbs-dim: var(--bb-line-strong);
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--bbs-ink);
}
.bbs.is-good { --bbs-ink: var(--bb-green); }
.bbs.is-bad  { --bbs-ink: var(--bb-red); }
.bbs svg { display: block; overflow: visible; }
.bbs-n { font-family: var(--bb-mono); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--bb-ink); }

/* --- 1 · LÍNEA CON DELTA --------------------------------------------------
 * La línea, el punto de la última lectura, y el cambio contra la anterior
 * PEGADO a la figura. Es la que resuelve el problema de fondo: la chispa sola
 * no dice cuánto, y el número solo no dice hacia dónde. Juntos, sí. */
.bbs-line path { fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linejoin: round; stroke-linecap: round; }
.bbs-line .last { fill: currentColor; }
.bbs-d { font-family: var(--bb-mono); font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: var(--bb-r-chip);
  color: var(--bb-green); background: var(--bb-green-tint); }
.bbs-d.neg { color: var(--bb-red); background: var(--bb-red-tint); }

/* --- 2 · BARRAS SEMANALES -------------------------------------------------
 * Una barra por semana. Es la HONESTA para un dato semanal: no dibuja nada
 * entre dos lecturas, y una semana que falta se ve como un hueco en vez de
 * como una recta inventada. La última va en tono pleno porque es la que se
 * está mirando; las demás quedan atrás. */
.bbs-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 28px; }
.bbs-bars i { display: block; width: 5px; border-radius: 1.5px;
  background: currentColor; opacity: .34; height: calc(var(--h) * 1%); min-height: 2px; }
.bbs-bars i:last-child { opacity: 1; }
.bbs-bars i.gap { background: repeating-linear-gradient(45deg,
  var(--bb-line-strong) 0 2px, transparent 2px 4px); opacity: 1; height: 100%; }

/* --- 3 · LÍNEA CON BANDA DEL AÑO PASADO ----------------------------------
 * El año pasado como BANDA de fondo, no como segunda línea: a 28px de alto dos
 * líneas se cruzan y se vuelven un garabato. Con la banda, "por encima o por
 * debajo de PY" se lee sin distinguir cuál trazo es cuál — que es la única
 * pregunta que cabe en una figura de este tamaño. */
.bbs-py .band { fill: currentColor; opacity: .13; }
.bbs-py path.ln { fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linejoin: round; stroke-linecap: round; }
.bbs-py .last { fill: currentColor; }

/* --- 4 · TIRA DE ESTADO (matriz de puntos) -------------------------------
 * Una celda por semana, teñida por el valor. No es una tendencia: es una
 * RACHA. Contesta "¿cuántas semanas seguidas?" que una línea no contesta,
 * y cabe donde no cabe ninguna otra.
 * Cinco pasos de tinte, no un degradado continuo: un ojo no distingue 40
 * tonos, y con cinco la celda se puede nombrar. */
.bbs-strip { display: inline-flex; gap: 3px; }
.bbs-strip i { width: 11px; height: 18px; border-radius: 3px;
  background: color-mix(in srgb, currentColor calc(var(--t) * 20%), var(--bb-field)); }
.bbs-strip i.na { background: repeating-linear-gradient(45deg,
  var(--bb-line) 0 2px, transparent 2px 4px); }

/* --- 5 · LÍNEA CON MÍNIMO Y MÁXIMO ROTULADOS -----------------------------
 * La única que dice su escala. Dos etiquetas chiquitas en el pico y el valle
 * convierten la forma en algo con magnitud, sin gastar un eje. Para cuando la
 * chispa va sola en una celda y no tiene un número grande al lado. */
.bbs-mm path { fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linejoin: round; stroke-linecap: round; }
.bbs-mm .pk { fill: currentColor; }
.bbs-mm text { font-family: var(--bb-mono); font-size: 8.5px; font-weight: 600;
  fill: var(--bb-ink-3); font-variant-numeric: tabular-nums; }

/* --- 6 · ÁREA CON LÍNEA DE PROMEDIO --------------------------------------
 * El área da el volumen de un vistazo y la punteada dice dónde está el
 * promedio del período, así que cada semana se lee como "arriba o abajo de lo
 * normal" en vez de contra la semana de al lado. El relleno es un tinte plano
 * —nunca un degradado— por la misma razón que la barra: un degradado hace que
 * el mismo valor se lea distinto según dónde caiga. */
.bbs-avg .ar { fill: currentColor; opacity: .12; }
.bbs-avg path.ln { fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linejoin: round; stroke-linecap: round; }
.bbs-avg .avg { stroke: var(--bb-ink-3); stroke-width: 1; stroke-dasharray: 3 3; }

/* Los envoltorios que emite `bbspark.js`. La figura viaja con sus grosores en
   el atributo (regla del app: el HTML se pinta en su estado final, el CSS es
   la mejora), así que esto sólo coloca. */
.bbs-bars-w, .bbs-strip-w { display: inline-flex; align-items: center; }
.bbs-thin { font-size: 10.5px; font-style: normal; color: var(--bb-ink-3); }
.bbs-line .bbs-d { font-family: var(--bb-mono, 'Outfit', system-ui, sans-serif);
  font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: var(--bb-r-chip);
  color: var(--bb-green); background: var(--bb-green-tint); }
.bbs-line .bbs-d.neg { color: var(--bb-red); background: var(--bb-red-tint); }