/* ===========================================================================
 * bbbar.css — LA BARRA. Seis propuestas, un solo archivo, y el que se escoja
 * se queda como el componente de la casa.
 * ===========================================================================
 * Miguel, 24 sep 2026, mirando el catálogo: *"i hate how the progress bar looks
 * like!!"*. Tenía razón: las cinco que había (`bb-bar-row`, `bp-bar`,
 * `bbf-bar`, `besc-bar`, el pace de `review.css`) son cinco geometrías sueltas
 * y ninguna se diseñó — se escribieron.
 *
 * REFERENCIAS (CollectUI, leídas con el MCP, no de memoria):
 *   · `1f0bdcc2` — LLM Leaderboard, @jeetnirnejak. La fila: chip de rango ·
 *     nombre + sub · pista pill · número mono grande con la unidad chiquita al
 *     lado. Es EXACTAMENTE la forma de "Paid Search / Paid Social / Otros".
 *     De ahí salen `bbb-lb` y la tipografía del número en todas.
 *   · `5873cd36` — Progress bar explorations, @disarto_max. Seis tratamientos
 *     de una misma pista; el que sirve para DATO es *segmented ticks*: la barra
 *     hecha de marcas deja leer la escala sin dibujar un eje. De ahí `bbb-ticks`.
 *
 * LO QUE **NO** SE TRAJO, a propósito: el degradado (aurora flow), el cometa y
 * el brillo. Son de una barra de CARGA, donde el número no significa nada y el
 * trabajo del dibujo es entretener. En una barra de DATO un degradado hace que
 * el mismo valor se lea distinto según dónde caiga, y el brillo pone atención
 * donde no hay hallazgo. Un dato se pinta en UN color.
 *
 * REGLAS QUE CUMPLEN LAS SEIS
 *   1. Ni un color suelto: todo sale de `--bb-*` (beautiful.css). El modo
 *      oscuro sale gratis por eso mismo.
 *   2. El número va en `--bb-mono` con `tabular-nums`. Una columna de números
 *      que no alinea es una columna que no se puede comparar de un vistazo.
 *   3. La pista se pinta SIEMPRE, aunque el valor sea 0: el largo del riel es
 *      la escala, y sin él un 2% y un 20% se ven igual de cortos.
 *   4. `--p` (0–100) es la única entrada. Nada de anchos escritos a mano en el
 *      HTML de cada llamada.
 *   5. Un valor que no se pudo medir es `—`, nunca una barra de largo cero:
 *      cero es una medición, y "no hay dato" no lo es.
 * -------------------------------------------------------------------------*/

.bbb {
  --bbb-track: var(--bb-field);
  --bbb-fill: var(--bb-accent);
  --bbb-h: 8px;
  --bbb-r: 999px;
  font-family: inherit;
}
.bbb.is-good { --bbb-fill: var(--bb-green); }
.bbb.is-bad  { --bbb-fill: var(--bb-red); }
.bbb.is-warn { --bbb-fill: var(--bb-orange); }

.bbb-n {
  font-family: var(--bb-mono); font-variant-numeric: tabular-nums;
  font-weight: 600; letter-spacing: -.02em; color: var(--bb-ink);
}
.bbb-u { font-size: .72em; font-weight: 500; color: var(--bb-ink-3); margin-left: 1px; }

/* --- 1 · FICHA (del LLM Leaderboard) --------------------------------------
 * Una fila por serie: rango · nombre + sub · pista · número. El rango es lo que
 * convierte una lista en un RANKING, y el sub carga la unidad para que el
 * número no tenga que explicarse.
 * La separación es una línea PUNTEADA: son filas de una misma lectura, no
 * bloques distintos, y una línea sólida las corta más de la cuenta. */
.bbb-lb { display: flex; flex-direction: column; }
.bbb-lb-row {
  display: grid; grid-template-columns: 26px minmax(110px, 1.2fr) minmax(90px, 2fr) auto;
  align-items: center; gap: 14px; padding: 11px 2px;
  border-bottom: 1px dashed var(--bb-line);
}
.bbb-lb-row:last-child { border-bottom: 0; }
.bbb-lb-rank {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  font-family: var(--bb-mono); font-size: 11px; font-weight: 600;
  color: var(--bb-ink-2); background: var(--bb-field); font-variant-numeric: tabular-nums;
}
/* El primero se invierte. Es el único adorno del diseño y dice el hallazgo:
   quién va arriba, sin leer un número. */
.bbb-lb-row:first-child .bbb-lb-rank { color: var(--bb-surface); background: var(--bb-accent); }
.bbb-lb-name { font-size: 13.5px; font-weight: 600; color: var(--bb-ink); line-height: 1.25; }
.bbb-lb-sub { font-size: 11.5px; color: var(--bb-ink-3); }
.bbb-lb-track {
  position: relative; height: var(--bbb-h); border-radius: var(--bbb-r);
  background: var(--bbb-track); overflow: hidden;
}
.bbb-lb-track > i {
  display: block; height: 100%; width: calc(var(--p) * 1%);
  border-radius: var(--bbb-r); background: var(--bbb-fill);
  transition: width .5s var(--bb-ease-strong);
}
.bbb-lb-val { font-size: 17px; text-align: right; white-space: nowrap; }

/* --- 2 · TICKS SEGMENTADOS (de las explorations) --------------------------
 * La pista es una fila de marcas. Deja LEER la escala —se cuentan— sin dibujar
 * un eje debajo, que es lo que una barra de dato normalmente no tiene sitio
 * para poner. El relleno se hace recortando la capa de marcas encendidas con
 * `clip-path`, así que las marcas nunca se deforman ni se parten a la mitad. */
.bbb-ticks-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(120px, 2.4fr) auto;
  align-items: center; gap: 14px; padding: 9px 2px; }
.bbb-ticks-l { font-size: 12.5px; font-weight: 600; color: var(--bb-ink-2); }
.bbb-ticks {
  position: relative; height: 18px;
  --tick: 3px; --gap: 5px;
}
.bbb-ticks > span {
  position: absolute; inset: 0; display: block;
  background: repeating-linear-gradient(90deg,
    currentColor 0 var(--tick), transparent var(--tick) calc(var(--tick) + var(--gap)));
  -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000);
}
.bbb-ticks .off { color: var(--bb-line-strong); }
.bbb-ticks .on  { color: var(--bbb-fill); clip-path: inset(0 calc(100% - var(--p) * 1%) 0 0);
  transition: clip-path .5s var(--bb-ease-strong); }
.bbb-ticks-v { font-size: 15px; text-align: right; }

/* --- 3 · RIEL CON META ----------------------------------------------------
 * Para "% de la meta", que es una pregunta distinta a "qué parte del total":
 * aquí el 100% no es el final del riel, es una MARCA en medio, y se puede
 * pasar. Sin esa marca un 88% y un 112% se leen igual de bien.
 * El riel llega al 125% para que sobrepasar tenga a dónde ir. */
.bbb-goal-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(140px, 2.4fr) auto;
  align-items: center; gap: 14px; padding: 10px 2px; }
.bbb-goal-l { font-size: 12.5px; font-weight: 600; color: var(--bb-ink-2); }
.bbb-goal {
  position: relative; height: 10px; border-radius: var(--bbb-r);
  background: var(--bbb-track); --max: 125;
}
.bbb-goal > i {
  position: absolute; inset: 0 auto 0 0; border-radius: var(--bbb-r);
  width: calc(100% * var(--p) / var(--max)); background: var(--bbb-fill);
  transition: width .5s var(--bb-ease-strong);
}
.bbb-goal.over > i { background: var(--bb-green); }
/* La marca de la meta CORTA el riel, no se pinta encima: encima se perdería
   justo cuando el relleno la pasa, que es el único momento que importa. */
.bbb-goal::after {
  content: ''; position: absolute; top: -4px; bottom: -4px;
  /* `calc(100 / var(--max) * 1%)` da 0.8%, no 80%: la división pasa primero y
     el resultado (0.83) se multiplica por 1%. La marca se pintó pegada al borde
     izquierdo — un riel de meta con la meta en el cero. El porcentaje tiene que
     salir de multiplicar 100% por la razón, no al revés. */
  left: calc(100% * 100 / var(--max)); width: 2px; border-radius: 2px;
  background: var(--bb-ink); opacity: .7;
}
.bbb-goal-v { font-size: 15px; text-align: right; }
.bbb-goal-cap { grid-column: 2; font-size: 10.5px; color: var(--bb-ink-3); margin-top: -4px; }

/* --- 4 · APILADA ----------------------------------------------------------
 * UNA pista para "qué parte del total". Tres barras separadas obligan a sumar
 * de cabeza para saber si el reparto cambió; apiladas, el reparto ES la figura.
 * La leyenda va debajo con el número, porque un segmento fino no puede cargar
 * texto adentro. */
.bbb-stack { display: flex; height: 14px; border-radius: var(--bbb-r); overflow: hidden;
  background: var(--bbb-track); }
.bbb-stack > i { display: block; height: 100%; width: calc(var(--p) * 1%);
  transition: width .5s var(--bb-ease-strong); }
.bbb-stack > i + i { box-shadow: inset 1px 0 0 var(--bb-surface); }
.bbb-stack-lg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.bbb-stack-lg span { display: inline-flex; align-items: baseline; gap: 7px; font-size: 12px;
  color: var(--bb-ink-2); }
.bbb-stack-lg i { width: 9px; height: 9px; border-radius: 3px; align-self: center; }
.bbb-stack-lg b { font-family: var(--bb-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 600; color: var(--bb-ink); }

/* --- 5 · MICRO-BARRA DE CELDA --------------------------------------------
 * Para una tabla densa, donde una fila mide 30px y no cabe un riel. La barra
 * es el SUBRAYADO del número: cuesta 3px, no añade una columna, y deja la
 * tabla comparable de arriba a abajo sin leer cada cifra. */
.bbb-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px;
  min-width: 62px; }
.bbb-cell-n { font-family: var(--bb-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 600; color: var(--bb-ink); line-height: 1; }
.bbb-cell-t { width: 100%; height: 3px; border-radius: 2px; background: var(--bbb-track); }
.bbb-cell-t > i { display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: 2px;
  background: var(--bbb-fill); }

/* --- 6 · ESCALERA DEL EMBUDO ---------------------------------------------
 * La única que NO es una lista de barras sueltas: cada escalón cuelga del de
 * arriba, así que la caída entre dos etapas se VE en vez de calcularse. Es
 * monótona por construcción — la figura no puede ensancharse — que es la regla
 * que ya gobierna el embudo de iniciativas (`docs/rules/initiative-funnel.md`).
 * La caída se rotula en LEADS, nunca en puntos porcentuales. */
.bbb-step { display: flex; flex-direction: column; gap: 2px; }
.bbb-step-row { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(120px, 3fr) auto;
  align-items: center; gap: 12px; }
.bbb-step-l { font-size: 12.5px; font-weight: 600; color: var(--bb-ink-2); }
.bbb-step-t { position: relative; height: 22px; }
.bbb-step-t > i { position: absolute; inset: 2px auto 2px 0; width: calc(var(--p) * 1%);
  border-radius: 5px; background: var(--bbb-fill); opacity: calc(1 - var(--i, 0) * .13);
  transition: width .5s var(--bb-ease-strong); }
.bbb-step-v { font-size: 14px; text-align: right; }
/* El escalón: una guía punteada desde donde terminó la barra de arriba hasta
   donde termina esta, con la pérdida escrita al lado. */
.bbb-step-drop { grid-column: 2; display: flex; align-items: center; gap: 8px;
  height: 14px; margin-top: -3px; }
.bbb-step-drop span { flex: 0 0 auto; font-family: var(--bb-mono); font-size: 10.5px;
  font-weight: 600; color: var(--bb-red); font-variant-numeric: tabular-nums; }
.bbb-step-drop i { display: block; height: 1px; border-top: 1px dashed var(--bb-line-strong); }

/* --- 7 · ESTRELLAS --------------------------------------------------------
 * La calificación de 1 a 5. Miguel, 25 sep 2026, sobre la columna "Stars" de
 * BESC · Reviews que decía «4.3»: *"add actual visual gold stars here"*. Entró
 * al catálogo como su propia familia ANTES de usarse (docs/rules/ui-catalog.md,
 * regla 2) y vive aquí porque ES una barra: una pista de cinco estrellas con un
 * relleno — las mismas cinco reglas de arriba.
 *   · Rule 1: el dorado es `--bb-gold` y la pista `--bb-line-strong`; el modo
 *     oscuro sale de los tokens.
 *   · Rule 3: las cinco se pintan SIEMPRE, así que 1.0 y 4.7 se leen por lo que
 *     falta, no solo por lo que hay.
 *   · Rule 4: `--p` (0–100) = calificación ÷ 5 × 100. Un solo elemento: el
 *     relleno es un degradado duro recortado por la máscara de la estrella, así
 *     que 4.3 pinta cuatro enteras y un tercio de la quinta sin cinco nodos.
 *   · Rule 5: sin calificación, quien llama pone `—`; nunca cinco vacías.
 * Tamaños: `.sm` 12px (celda de tabla), default 16px, `.lg` 22px (titular). */
.bbb-stars {
  --s: 16px;
  --bbb-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.4 7 .9-5.1 4.9 1.3 6.9L12 17.6l-6.3 3.3 1.3-6.9L1.9 9.1l7-.9z'/%3E%3C/svg%3E");
  display: inline-block; flex: 0 0 auto; vertical-align: -2px;
  width: calc(var(--s) * 5); height: var(--s);
  background: linear-gradient(90deg, var(--bb-gold) calc(var(--p, 0) * 1%), var(--bb-line-strong) 0);
  -webkit-mask: var(--bbb-star) left center / var(--s) var(--s) repeat-x;
          mask: var(--bbb-star) left center / var(--s) var(--s) repeat-x;
}
.bbb-stars.sm { --s: 12px; vertical-align: -1px; }
.bbb-stars.lg { --s: 22px; vertical-align: -3px; }