/* BridgeBI — el loader del PUENTE. Un archivo de estilos, un archivo de motor.
   --------------------------------------------------------------------------
   Nació dentro de index.html para la página de Campañas y vive aquí desde el
   4 sep 2026, cuando /texas pedía lo mismo: mientras leía la ficha del CRM y
   los creativos, la página ponía una línea de texto quieta y nada se movía.
   Miguel: «at first glance it will seem like nothing is loading or working».

   Desde el 24 sep 2026 el movimiento es «Onda → puente» y lo dibuja un <canvas>
   (bridge-loader.js). Aquí sólo queda el TAMAÑO y el mensaje. Todo el porqué del
   movimiento —la onda, el metal que cuaja de un extremo al otro, el agua fila por
   fila, el bucle sin costura— está en el encabezado de bridge-loader.js, junto al
   código que lo hace.

   Lo que se descartó en el camino, para que nadie lo reintroduzca:
     · una cuenta luminosa recorriendo los cables («no dot or any circles
       following or scanning through»)
     · una silueta pálida del puente entero detrás de la construcción («no
       deberia ver un faded full version of it»)
     · ocho variantes que armaban el puente pieza por pieza con CSS
   El archivo de marca es la geometría: `SHAPE` en bridge-loader.js, sacado de
   `Northbridge-University_Graphical-Element_Bridge-RGB.pdf`, página 3. */

.bbl { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 26px 20px 22px; }
.bbl.sm { padding: 16px 12px 12px; gap: 6px; }

/* El canvas trae su proporción: puente (623.504 × 333.573) + 150 de agua. Los
   atributos width/height del HTML ya van en esa proporción para que el hueco no
   salte cuando el motor les pone la resolución real. `flex: none` porque `.bbl`
   es un flex column y un hueco estrecho aplastaría la marca. */
.bbl-canvas { display: block; flex: none; width: 208px; max-width: 100%; height: auto; aspect-ratio: 623.504 / 483.573; }
.bbl.sm .bbl-canvas { width: 138px; }

/* El mensaje es lo ÚNICO que dice qué se está leyendo, así que es un hecho, no
   decoración: «Leyendo los creativos · 6 campañas de Meta, 5 de Google». */
.bbl-msg { font-family: 'Outfit', system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--navy, #0D2A5E); text-align: center; animation: bbl-msg-pulse 1.8s ease-in-out infinite; }
.bbl.sm .bbl-msg { font-size: 12px; }
/* En el tema oscuro del app el navy de marca cae sobre fondo oscuro y el mensaje
   —el único texto que dice qué se está leyendo— desaparecía. Se toma la tinta del
   tema; en claro se queda el navy. */
html[data-bb-theme="dark"] .bbl-msg { color: var(--bb-ink, #EEF1F6); }
@keyframes bbl-msg-pulse { 0%, 100% { opacity: .58; } 50% { opacity: 1; } }

/* Sin movimiento: el motor pinta UN frame del puente terminado y se detiene. */
@media (prefers-reduced-motion: reduce) {
  .bbl-msg { animation: none; opacity: 1; }
}