/* announce.css — el pop-up de "qué hay de nuevo".
 *
 * REFERENCIA DE ESTRUCTURA: el modal "Unlock Conduit AI" que Miguel mandó (un pop-up sobre una
 * tabla tipo Attio). Lo que se toma de él, que es exactamente lo que le faltaba a la primera
 * versión:
 *
 *   1. **El hero va INSET**, no a ras del borde: la tarjeta tiene padding y la imagen es una
 *      tarjeta redondeada adentro. Eso es lo que hace que se lea como una pieza y no como un
 *      recorte.
 *   2. **Cuando no hay imagen, hay un panel de color con un ícono al centro** — no un hueco. La
 *      primera versión sin media era texto suelto en una caja blanca, que es lo que él llamó
 *      "looks very bad".
 *   3. **Los botones van a la IZQUIERDA**, el primario relleno y en pill, el secundario texto
 *      pelado sin borde. Dos botones con borde y alineados a la derecha no dicen cuál es la
 *      acción.
 *   4. **Un badge al lado del título** ("Private Beta" en la referencia; "Nuevo" aquí).
 *   5. Radio grande (20px) y padding generoso.
 *
 * REFERENCIA DE MOTION: "recipe for smooth popovers — opacity + scale + y translate + blur"
 * (@samitkapoorr, categoría pop-up de collectui.com). Las cuatro propiedades a la vez, sin rebote.
 *
 * De ninguna de las dos se toma la paleta: los colores son los tokens `--bb-*`.
 */

.bba-back {
  position: fixed;
  inset: 0;
  z-index: 1000200; /* encima de BBDrop (1000100), que puede abrirse desde dentro */
  display: grid;
  place-items: center;
  padding: 24px;

  background: rgba(9, 20, 38, 0.34);
  /* El blur va en el backdrop, no en el contenido, o el texto de la tarjeta se ensucia. */
  backdrop-filter: blur(8px) saturate(108%);
  -webkit-backdrop-filter: blur(8px) saturate(108%);

  opacity: 0;
  transition: opacity 0.2s linear;
}
.bba-back.open { opacity: 1; }

/* ── la tarjeta ───────────────────────────────────────────────────────────── */

.bba-card {
  position: relative;
  width: 460px;
  max-width: 100%;
  max-height: min(88vh, 780px);
  overflow: auto;

  /* El padding es lo que deja al hero adentro en vez de a ras. */
  padding: 10px;
  background: var(--bb-surface, #fff);
  color: var(--bb-ink, #1a1a1a);
  border: 1px solid var(--bb-line, #e6e1d8);
  border-radius: 20px;
  box-shadow:
    0 32px 80px rgba(13, 42, 94, 0.26),
    0 2px 8px rgba(13, 42, 94, 0.08);

  /* La receta, las cuatro a la vez. */
  opacity: 0;
  transform: translateY(14px) scale(0.965);
  filter: blur(8px);
  transition:
    opacity 0.26s linear,
    transform 0.36s var(--bb-ease-strong, cubic-bezier(0.23, 1, 0.32, 1)),
    filter 0.24s var(--bb-ease-strong, cubic-bezier(0.23, 1, 0.32, 1));
}
.bba-back.open .bba-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* La X: chica, quieta y sin peso. La primera versión era un círculo gris grande encima del
   media — se veía como un error. La referencia no tiene X; ésta se queda por accesibilidad
   (Escape también cierra) pero no compite con nada. */
.bba-x {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(9, 20, 38, 0.30);
  backdrop-filter: blur(6px);
  transition: background 0.16s var(--bb-ease-strong, ease), opacity 0.16s linear;
  opacity: 0.75;
}
.bba-x:hover { background: rgba(9, 20, 38, 0.55); opacity: 1; }

/* ── el hero ──────────────────────────────────────────────────────────────── */

.bba-hero {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bb-canvas, #efede6);
}
.bba-hero img,
.bba-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* El relleno de marca. Navy → oro en diagonal, con el escudo en una placa clara al centro —
   la misma idea que el ícono sobre el degradado de la referencia, con nuestros colores. */
.bba-hero.is-fb {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 18% 8%, rgba(201, 164, 63, 0.42) 0%, rgba(201, 164, 63, 0) 58%),
    linear-gradient(145deg, var(--bb-accent, #0d2a5e) 0%, #12283c 62%, #0a1c2e 100%);
}
.bba-hero-mark {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(3px);
}
.bba-hero-mark svg { display: block; }

/* ── el cuerpo ────────────────────────────────────────────────────────────── */

.bba-body { padding: 20px 14px 14px; }

.bba-t-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bba-titulo {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--bb-ink, #1a1a1a);
}
.bba-badge {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--bb-r-chip, 6px);
  background: var(--bb-gold-tint, #fbf4e2);
  color: var(--bb-gold-ink, #a8842c);
  border: 1px solid rgba(201, 164, 63, 0.34);
  white-space: nowrap;
}

.bba-cuerpo {
  margin-top: 9px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--bb-ink-2, #5a564f);
}

/* Botones a la IZQUIERDA. Primario relleno en pill; secundario texto pelado. */
.bba-foot {
  margin-top: 20px;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
}
.bba-cta,
.bba-ok {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.16s var(--bb-ease-strong, ease),
    color 0.16s linear,
    transform 0.16s var(--bb-ease-strong, ease);
}
.bba-cta {
  padding: 11px 22px;
  border-radius: 999px;
  border: 0;
  background: var(--bb-accent, #0d2a5e);
  color: #fff;
}
.bba-cta:hover { background: var(--bb-accent-ink, #11326d); transform: translateY(-1px); }
.bba-ok {
  padding: 11px 16px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--bb-ink-2, #5a564f);
}
.bba-ok:hover { background: var(--bb-hover, #f4f2ec); color: var(--bb-ink, #1a1a1a); }

/* ── el preview en vivo del compositor ────────────────────────────────────── */

/* La misma tarjeta, sin backdrop y sin animación de entrada: en Equipo se está EDITANDO, y una
   tarjeta que hace fade cada vez que se escribe una letra es inservible. */
.bba-preview .bba-card {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
  margin: 0 auto;
}
/* La X y los botones se ven, pero no hacen nada en el preview. */
.bba-preview .bba-x,
.bba-preview .bba-cta,
.bba-preview .bba-ok { pointer-events: none; }

/* ── móvil ────────────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .bba-back { place-items: end center; padding: 0; }
  .bba-card {
    width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(28px) scale(1);
  }
  .bba-back.open .bba-card { transform: translateY(0) scale(1); }
}

/* ── dark mode. El tema se lee de `data-bb-theme`, NO de `data-theme`. ────── */

:root[data-bb-theme='dark'] .bba-back { background: rgba(4, 9, 18, 0.52); }
:root[data-bb-theme='dark'] .bba-card {
  background: var(--bb-surface, #131c2e);
  border-color: var(--bb-line, #24405c);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
}
:root[data-bb-theme='dark'] .bba-ok:hover { background: var(--bb-hover, #1a2438); }

/* ── movimiento reducido ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .bba-back,
  .bba-card { transition: none !important; }
  .bba-card {
    opacity: 1;
    transform: none;
    filter: none;
  }
  /* El video se QUEDA — esconderlo quitaría contenido, no movimiento. Lo que cambia es que no
     se reproduce solo: announce.js le pone `controls` en vez de `autoplay loop`. */
}