/* ===========================================================================
 * bbsheet.css — ABRIR EL DETALLE DE UNA FILA. Cinco propuestas.
 * ===========================================================================
 * Las dos que había —la hoja lateral de BESC y el modal de todas las demás—
 * comparten el mismo defecto y por eso ninguna convenció: **las dos tapan la
 * fila de la que saliste**. El modal tapa la pantalla entera; la hoja tapa el
 * 62% derecho, que en una tabla ancha es justo donde están los números.
 *
 * Lo que una fila necesita al abrirse no es una capa encima: es que la tabla
 * SIGA SIENDO LEGIBLE mientras se lee el detalle, porque la pregunta casi
 * siempre es comparativa — "este programa contra los de arriba".
 *
 * REFERENCIA de artesanía: `e3f1230d` Sandbox Limits (@jeetnirnejak) — chip de
 * estado arriba a la derecha, números en mono, panel hundido para el cuerpo,
 * pie con la ruta a la izquierda y la acción a la derecha. Esa anatomía se
 * repite en las cinco para que cambiar de patrón no cambie de lenguaje.
 *
 * Las cinco declaran lo mismo (`--bbh-*`) y se pueden cambiar sin tocar el
 * contenido: el detalle es el mismo HTML en todas.
 * -------------------------------------------------------------------------*/

.bbh { --bbh-pad: 16px; position: relative; }

/* La anatomía compartida. */
.bbh-head { display: flex; align-items: flex-start; gap: 10px;
  padding: 13px var(--bbh-pad); border-bottom: 1px solid var(--bb-line); }
.bbh-t { flex: 1 1 auto; min-width: 0; }
.bbh-t b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.bbh-t span { display: block; font-size: 11.5px; color: var(--bb-ink-3); }
.bbh-chip { flex: 0 0 auto; font-family: var(--bb-mono); font-size: 10.5px; font-weight: 600;
  padding: 3px 8px; border-radius: var(--bb-r-chip);
  color: var(--bb-green); background: var(--bb-green-tint); font-variant-numeric: tabular-nums; }
.bbh-x { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 7px; cursor: pointer;
  background: var(--bb-field); color: var(--bb-ink-2); font-size: 15px; line-height: 1; }
.bbh-body { padding: var(--bbh-pad); }
.bbh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.bbh-kpi { background: var(--bb-inset); border-radius: 8px; padding: 9px 11px; }
.bbh-kpi .k { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--bb-ink-3); }
.bbh-kpi .v { font-family: var(--bb-mono); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; }
.bbh-foot { display: flex; align-items: center; gap: 10px; padding: 11px var(--bbh-pad);
  border-top: 1px solid var(--bb-line); background: var(--bb-inset); }
.bbh-foot .path { flex: 1 1 auto; font-family: var(--bb-mono); font-size: 11px; color: var(--bb-ink-3); font-variant-numeric: tabular-nums; }

/* El escenario de la demo: la tabla que queda detrás. */
.bbh-demo { position: relative; height: 330px; border-radius: var(--bb-r-card);
  background: var(--bb-canvas); overflow: hidden; }
.bbh-demo-list { padding: 12px; }
.bbh-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 9px 10px; border-radius: 8px; font-size: 13px; }
/* EL PARÉNTESIS.
 *
 * Miguel, 24 sep: *"no me gusta el '(' bracket design thingy ese"*. No era un
 * adorno — era un `box-shadow: inset 2px 0 0` sobre una fila con
 * `border-radius: 8px`: una sombra interior SIGUE la esquina redondeada, así
 * que la barra de 2px se curvaba arriba y abajo y salía un "(" dibujado.
 * La marca de "esta es la fila abierta" tiene que ser una barra RECTA, así que
 * se pinta como un pseudo-elemento con su propia geometría en vez de heredar
 * el radio de la fila. */
.bbh-row.on { background: var(--bb-accent-tint); position: relative; }
.bbh-row.on::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px;
  border-radius: 1px; background: var(--bb-accent);
}
.bbh-row b { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; font-weight: 600; }

/* --- 1 · EXPANDIR EN SITIO ------------------------------------------------
 * La fila crece y el detalle sale DEBAJO de ella. Cero pérdida de contexto: la
 * fila sigue en pantalla, con sus vecinas arriba y abajo. Es lo que el app ya
 * hace en Eventos (`.ev-row.is-open`), o sea que no hay que inventarlo.
 * Límite honesto: un detalle largo empuja media tabla hacia abajo, así que es
 * para 4–6 datos, no para una ficha completa. */
.bbh-inline { margin: 2px 0 8px; background: var(--bb-surface);
  border-radius: var(--bb-r-card); box-shadow: var(--bb-sh-card); overflow: hidden; }

/* --- 2 · PANEL FIJO AL LADO (maestro-detalle) ----------------------------
 * La lista se angosta y el detalle vive a la derecha SIEMPRE, no aparece: se
 * llena. Mover la selección con el teclado recorre las filas y el panel se
 * actualiza, que es la forma más rápida de comparar diez programas. Necesita
 * ancho — bajo 1100px se cae al patrón 3. */
.bbh-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 12px;
  height: 100%; }
.bbh-split-d { background: var(--bb-surface); border-radius: var(--bb-r-card);
  box-shadow: var(--bb-sh-card); overflow: auto; }

/* --- 3 · HOJA INFERIOR ----------------------------------------------------
 * Sube desde abajo y se come el tercio inferior. Una tabla se lee de arriba
 * hacia abajo, así que tapar el pie cuesta menos que tapar la derecha (donde
 * están los números) — y en una pantalla angosta es el único que no deja el
 * detalle en una columna de 200px. */
.bbh-bottom { position: absolute; left: 0; right: 0; bottom: 0; max-height: 62%;
  background: var(--bb-surface); border-radius: var(--bb-r-card) var(--bb-r-card) 0 0;
  box-shadow: 0 -10px 30px rgba(13, 42, 94, .13); overflow: auto; }
.bbh-grab { width: 34px; height: 4px; border-radius: 2px; background: var(--bb-line-strong);
  margin: 8px auto 0; }

/* --- 4 · CAJÓN QUE EMPUJA -------------------------------------------------
 * El cajón de siempre, pero la tabla se ENCOGE en vez de quedar debajo. Nada
 * queda tapado: la tabla se re-ajusta y sigue entera, sólo más angosta. Cuesta
 * un reflow de la tabla, que es real — pero tapar una columna de números
 * cuesta más. */
.bbh-push { display: flex; height: 100%; }
.bbh-push-l { flex: 1 1 auto; min-width: 0; overflow: auto;
  transition: flex-basis .28s var(--bb-ease-strong); }
.bbh-push-r { flex: 0 0 46%; background: var(--bb-surface); border-radius: var(--bb-r-card);
  box-shadow: var(--bb-sh-raised); margin-left: 10px; overflow: auto; }

/* --- 5 · POPOVER ANCLADO A LA FILA ---------------------------------------
 * Una tarjeta chiquita al lado de la fila que se apretó, con la flecha
 * apuntándola. Es el que menos tapa y el único que dice DE CUÁL fila es el
 * detalle sin tener que repetir su nombre. Sólo aguanta lo esencial: si hay
 * que hacer scroll dentro del popover, el patrón está mal escogido. */
.bbh-pop { position: absolute; width: min(340px, 74%);
  background: var(--bb-surface); border-radius: var(--bb-r-card); box-shadow: var(--bb-sh-overlay);
  z-index: 3; }
.bbh-pop::before { content: ''; position: absolute; left: -6px; top: 22px; width: 12px; height: 12px;
  transform: rotate(45deg); background: var(--bb-surface); border-radius: 2px; }

/* ===========================================================================
 * SEGUNDA TANDA (24 sep 2026) — cinco patrones más, mirando CollectUI en el
 * navegador y no por descripción: la rejilla de `table-ui-design-inspiration`
 * y la de `dashboard-ui-design-inspiration`.
 * ---------------------------------------------------------------------------
 * Lo que se ve repetido ahí y NO estaba en la primera tanda:
 *   · el detalle como su propia PÁGINA con breadcrumb de vuelta
 *     (URL Performance / Mastercard.com, en la rejilla de dashboard);
 *   · el detalle FIJO ARRIBA de la tabla, no encima de ella;
 *   · la lista que CAMBIA DE FORMA —se comprime a un riel— en vez de quedar
 *     tapada;
 *   · varias fichas APILADAS para comparar dos o tres filas, que es lo que un
 *     analista hace de verdad;
 *   · el acordeón con el encabezado pegado, para que la tabla no se pierda al
 *     bajar dentro del detalle.
 * ------------------------------------------------------------------------- */

/* --- 6 · FICHA FIJA ARRIBA -----------------------------------------------
 * El detalle se ancla ENCIMA de la tabla y la tabla entera se queda debajo,
 * entera y usable. Nada se tapa nunca: lo único que pasa es que la lista
 * empieza más abajo. Es el que mejor aguanta cambiar de fila diez veces
 * seguidas, porque la ficha no entra ni sale — se rellena. */
.bbh-pin { position: sticky; top: 0; z-index: 2; background: var(--bb-surface);
  border-radius: var(--bb-r-card); box-shadow: var(--bb-sh-raised); margin-bottom: 10px; }

/* --- 7 · PÁGINA CON BREADCRUMB -------------------------------------------
 * La fila abre su propia página. La tabla desaparece, y por eso el breadcrumb
 * no es decoración: es la única prueba de dónde estás y el único camino de
 * vuelta. Para un detalle que no cabe en una ficha —un programa con sus
 * campañas, sus creativos y su embudo— es el único honesto: meterlo en un
 * cajón de 420px es pedirle scroll a algo que es una pantalla. */
.bbh-crumb { display: flex; align-items: center; gap: 7px; font-size: 12px;
  color: var(--bb-ink-3); padding: 2px 0 12px; }
.bbh-crumb a { color: var(--bb-accent-ink); text-decoration: none; font-weight: 600; }
.bbh-crumb a:hover { text-decoration: underline; }
.bbh-crumb span.sep { opacity: .5; }
.bbh-page { background: var(--bb-surface); border-radius: var(--bb-r-card);
  box-shadow: var(--bb-sh-card); }

/* --- 8 · LISTA COMPRIMIDA + DETALLE --------------------------------------
 * La lista no se tapa: se ENCOGE a un riel de nombres con su número, y el
 * detalle se queda con el ancho. Se diferencia del maestro-detalle en que la
 * lista cambia de forma — así que en una tabla de ocho columnas no hay que
 * escoger entre ver la tabla o ver el detalle: se ven las dos cosas que
 * importan, el nombre y el número. */
.bbh-rail { display: grid; grid-template-columns: 178px minmax(0, 1fr); gap: 12px; height: 100%; }
.bbh-rail-l { overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.bbh-rail-i { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 8px; font-size: 12.5px; cursor: pointer; }
.bbh-rail-i b { font-family: var(--bb-mono); font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 600; color: var(--bb-ink-2); }
.bbh-rail-i.on { background: var(--bb-accent); color: #fff; }
.bbh-rail-i.on b { color: rgba(255, 255, 255, .82); }
.bbh-rail-d { background: var(--bb-surface); border-radius: var(--bb-r-card);
  box-shadow: var(--bb-sh-card); overflow: auto; }

/* --- 9 · FICHAS APILADAS (comparar) --------------------------------------
 * Apretar una segunda fila NO reemplaza la ficha: la añade. Dos o tres fichas
 * una encima de otra, cada una con su fila marcada, y se comparan de verdad —
 * que es lo que hace un analista con "Enfermería vs Ciencias Forenses".
 * Todos los demás patrones obligan a cerrar uno para abrir el otro y a
 * recordar el número, que es justo donde se cometen los errores.
 * Tope de tres: a la cuarta no se compara, se hojea. */
.bbh-stack { display: flex; flex-direction: column; gap: 8px; overflow: auto; height: 100%; }
.bbh-stack .bbh { background: var(--bb-surface); border-radius: var(--bb-r-card);
  box-shadow: var(--bb-sh-card); }
.bbh-stack-n { font-family: var(--bb-mono); font-size: 10.5px; font-weight: 600;
  color: var(--bb-ink-3); padding: 2px 2px 0; font-variant-numeric: tabular-nums; }

/* --- 10 · ACORDEÓN CON ENCABEZADO PEGADO ---------------------------------
 * Como expandir en sitio, pero el encabezado de la tabla Y la fila abierta se
 * quedan pegados al bajar. Arregla el límite del patrón 1: un detalle largo
 * empujaba media tabla y, al hacer scroll, se perdía de vista de quién era el
 * detalle que estabas leyendo. */
.bbh-acc-head { position: sticky; top: 0; z-index: 2; background: var(--bb-canvas);
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--bb-ink-3); padding: 8px 10px; }
.bbh-acc-row { position: sticky; top: 30px; z-index: 2; }