/* ===========================================================================
 * bbchart.css — LA GRÁFICA DE LA CASA. Una, en SVG.
 * ===========================================================================
 * Decisión de Miguel en `/ui`: el default es la de By Program. Y la
 * recomendación que aceptó: **se reescribe en SVG**. Las razones, por orden de
 * peso:
 *
 *   · el trazo animado que aprobó (`.bbm-draw`) necesita un `<path>`; en un
 *     canvas no existe;
 *   · el hover de un canvas hay que programarlo entero (y repintar la figura
 *     en cada movimiento del ratón); en SVG cada punto es un nodo y el
 *     `<title>` es el respaldo cuando el JS no llega;
 *   · las OTRAS CUATRO implementaciones que hay que retirar ya son SVG, así
 *     que la migración va hacia ellas y no contra ellas;
 *   · un SVG se lee con el zoom del navegador y con el lector de pantalla.
 *
 * Lo único que el canvas hacía mejor era el botón **Capturar** (`toBlob` en
 * una línea). Eso no se pierde: `BBChart.shoot()` rasteriza el SVG a PNG. Está
 * medido en `npm run chart:test` porque es lo que se pega en el correo a
 * WildFi, y romperlo en silencio sería peor que no migrar.
 * ------------------------------------------------------------------------- */

.bbc { position: relative; width: 100%; }
.bbc svg { display: block; width: 100%; height: auto; overflow: visible; }

/* La rejilla es recesiva a propósito: la línea es el dato, la rejilla es una
   referencia. Si compiten, se lee la rejilla. */
.bbc-grid line { stroke: var(--bb-line, #E6E1D8); stroke-width: 1; }
.bbc-zero line { stroke: var(--bb-line-strong, #D4CFC4); }
.bbc-ax {
  font-family: var(--bb-mono, 'Outfit', system-ui, sans-serif); font-size: 10px;
  fill: var(--bb-ink-3, #8A8578); font-variant-numeric: tabular-nums;
}

/* La serie. El año pasado va PUNTEADO y en el MISMO color, no en un color
   propio: son el mismo dato en dos años, y dos colores los convierten en dos
   cosas distintas. La regla ya estaba en el By Program de siempre. */
.bbc-cur { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.bbc-py  { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-dasharray: 4 4; opacity: .45; }
.bbc-dot { stroke: var(--bb-surface, #fff); stroke-width: 1.5; }
.bbc-lbl { font-family: var(--bb-mono, 'Outfit', system-ui, sans-serif); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* La línea del índice, cuando se mezclan unidades. Es el baseline de la vista,
   no una rejilla más, así que se ve. */
.bbc-base { stroke: var(--bb-accent, #0D2A5E); stroke-width: 1; stroke-dasharray: 2 3; opacity: .32; }
.bbc-note { font-size: 9.5px; fill: var(--bb-ink-3, #8A8578); }

/* El hover. Una columna invisible por semana, mucho más ancha que cualquier
   marca: apuntar a un punto de 3px con el ratón es un ejercicio de puntería,
   no una interfaz. */
.bbc-hit { fill: transparent; cursor: crosshair; }
.bbc-guide { stroke: var(--bb-accent, #0D2A5E); stroke-width: 1; stroke-dasharray: 3 3; opacity: .4; }

.bbc-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--bb-tip-bg, #12283C); color: var(--bb-tip-fg, #F5F3EE);
  border-radius: 8px; padding: 8px 10px; min-width: 132px;
  font: 400 11.5px/1.45 'Outfit', system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(9, 16, 30, .28);
  transform: translate(-50%, -100%);
  transition: opacity var(--bb-t-fast, .12s) ease-out;
}
.bbc-tip[hidden] { display: none; }
.bbc-tip .w { font-weight: 700; margin-bottom: 4px; }
.bbc-tip .r { display: flex; justify-content: space-between; gap: 16px; }
.bbc-tip .r i { font-style: normal; color: var(--bb-tip-muted, #9AA8B8); }
.bbc-tip .r b { font-family: var(--bb-mono, 'Outfit', system-ui, sans-serif); font-variant-numeric: tabular-nums; font-weight: 600; }
.bbc-tip .d { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--bb-tip-line, #24405C);
  font-family: var(--bb-mono, 'Outfit', system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.bbc-tip .d.pos { color: #7FD6A6; }
.bbc-tip .d.neg { color: #F09A9A; }

/* La leyenda: el color, el nombre y el total. Sin total, una leyenda sólo
   traduce colores; con él, contesta media pregunta antes de mirar la curva. */
.bbc-lg { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 2px 0; }
.bbc-lg span { display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--bb-ink-2, #5A564F); }
.bbc-lg i { width: 16px; height: 2.5px; border-radius: 2px; }
.bbc-lg i.py { background: none; border-top: 2px dashed currentColor; opacity: .55; height: 0; }
.bbc-lg b { font-family: var(--bb-mono, 'Outfit', system-ui, sans-serif); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--bb-ink, #1A1A1A); }

/* Las otras vistas. Mismos tokens; lo único propio es el rótulo de cada una,
   que en el canvas se dibujaba con `fillText` y aquí es un `<text>`. */
.bbc-title { font: 700 11px 'Outfit', system-ui, sans-serif; fill: var(--bb-accent, #0D2A5E); }
.bbc-sub { font: 400 10px 'Outfit', system-ui, sans-serif; fill: var(--bb-ink-3, #8A8578); }
.bbc-wk { font: 400 10px 'Outfit', system-ui, sans-serif; fill: var(--bb-ink-3, #8A8578); }
.bbc-gapn { font: 700 9.5px 'Outfit', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.bbc-mixn { font: 700 9px 'Outfit', system-ui, sans-serif; font-variant-numeric: tabular-nums;
  fill: var(--bb-accent, #0D2A5E); }
.bbc-rn { font: 400 11.5px 'Outfit', system-ui, sans-serif; fill: var(--bb-accent, #0D2A5E); }
.bbc-rv { font: 600 11px 'Outfit', system-ui, sans-serif; font-variant-numeric: tabular-nums;
  fill: var(--bb-accent, #0D2A5E); }
.bbc-rd { font-size: 9.5px; font-weight: 400; }
/* El cero de la brecha no es una línea de rejilla más: es el eje de la
   pregunta, así que se ve. */
.bbc-grid .bbc-zeroline { stroke: var(--bb-accent, #0D2A5E); stroke-opacity: .35; }

.bbc-area { fill-opacity: .10; }
.bbc-proj { fill: none; stroke-width: 1.6; stroke-dasharray: 2 4; opacity: .75; }
.bbc-ref { stroke: var(--bb-ink, #1A1A1A); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 4 3; }

/* El hueco donde Weekly Review y By PM montan la gráfica. Existe para que el
   componente tenga un contenedor con ancho real antes de medirse. */
.rv-tr-host { width: 100%; min-height: 40px; }

.bbc-thr { stroke: var(--bb-orange, #C77D1B); stroke-width: 1.5; stroke-dasharray: 6 4; opacity: .9; }
.bbc-thr-t { font: 700 9.5px 'Outfit', system-ui, sans-serif; fill: var(--bb-orange, #C77D1B); }