/* ===========================================================================
 * bbpicker.css — EL PICKER. Una píldora que abre sus opciones.
 * ===========================================================================
 * Referencia: CollectUI `f7c693ea` — "quick picker interaction" de
 * @nitishkmrk. Leída cuadro a cuadro del video (el MCP entrega los cuadros de
 * reposo; los de en medio se sacaron con ffmpeg), porque lo que importa de esa
 * pieza ocurre ENTRE los cuadros quietos:
 *
 *   · el disparador es una píldora tintada: icono · etiqueta · chevron;
 *   · al abrir, las opciones salen en una tarjeta blanca con una COLA que
 *     apunta al disparador, la escogida en tinta plena y la otra apagada;
 *   · al escoger, la tarjeta se va DESENFOCÁNDOSE (no sólo desvaneciendo), la
 *     etiqueta cambia con un cruce desenfocado ("Private" → "Public" pasa por
 *     un instante en que las dos palabras son niebla), el icono cambia igual y
 *     el chevron gira 180°;
 *   · duraciones medidas: 175–275ms, `linear`/`ease-out` casi siempre y un
 *     `ease-in-out` en el cruce de la etiqueta.
 *
 * En BridgeBI se usa para escoger la PLATAFORMA (Meta Ads / Google Ads): la
 * misma forma exacta que la referencia — dos opciones, cada una con su marca y
 * su nombre. Antes eran dos tabs de 170px cada una ocupando la fila.
 *
 * Todo sale de `--bb-*`. El desenfoque se apaga con reduced-motion.
 * ------------------------------------------------------------------------- */

.bbpk { position: relative; display: inline-flex; vertical-align: top; }

/* --- el disparador ------------------------------------------------------- */
.bbpk-trigger {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px 0 13px;
  border-radius: 10px;
  background: var(--bb-field, #F1EFE8);
  color: var(--bb-ink, #1A1A1A);
  font: 600 12.5px/1 'Outfit', system-ui, sans-serif;
  /* El ancho SE ANIMA al cambiar de etiqueta: "Meta Ads" y "Google Ads" no
     miden lo mismo, y un disparador que salta de ancho de golpe mueve todo lo
     que tiene a la derecha. */
  transition: background-color .16s ease-out, width .24s cubic-bezier(.42, 0, .58, 1);
  overflow: hidden; white-space: nowrap;
}
.bbpk-trigger:hover { background: var(--bb-hover-2, #E7E3D8); }
.bbpk-trigger:active { transform: scale(.985); }
.bbpk-trigger:focus-visible { outline: none; box-shadow: var(--bb-sh-focus); }

.bbpk-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; }
.bbpk-ico svg { width: 15px; height: 15px; max-width: none; }
.bbpk-lbl { display: inline-grid; }            /* las dos capas del cruce se apilan */
.bbpk-lbl > span { grid-area: 1 / 1; }
.bbpk-n {
  font-family: var(--bb-mono, 'Outfit', system-ui, sans-serif);
  font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600;
  color: var(--bb-ink-3, #8A8578);
}
.bbpk-chev {
  width: 14px; height: 14px; flex: none; max-width: none;
  color: var(--bb-ink-3, #8A8578);
  transition: transform .225s cubic-bezier(.42, 0, .58, 1);
}
.bbpk.is-open .bbpk-chev { transform: rotate(180deg); }

/* --- el cruce desenfocado de la etiqueta y el icono ---------------------- */
.bbpk-out { animation: bbpk-out .225s cubic-bezier(.42, 0, .58, 1) both; }
.bbpk-in  { animation: bbpk-in  .225s cubic-bezier(.42, 0, .58, 1) both; }
@keyframes bbpk-out { to   { opacity: 0; filter: blur(4px); transform: translateY(-3px); } }
@keyframes bbpk-in  { from { opacity: 0; filter: blur(4px); transform: translateY(3px); } }

/* --- el popover con cola -------------------------------------------------- */
.bbpk-pop {
  position: absolute; z-index: 40; left: 0; top: calc(100% + 10px);
  display: flex; gap: 2px; padding: 4px;
  background: var(--bb-surface, #fff);
  border-radius: 12px;
  box-shadow: var(--bb-sh-overlay, 0 0 0 1px #E6E1D8, 0 8px 28px rgba(13, 42, 94, .10));
  transform-origin: 28px 0;
}
/* La cola: apunta al disparador. Es lo que dice DE DÓNDE salió la tarjeta sin
   tener que leerlo — sin ella, un popover es una caja que apareció. */
.bbpk-pop::before {
  content: ''; position: absolute; top: -5px; left: 22px;
  width: 11px; height: 11px; transform: rotate(45deg);
  background: var(--bb-surface, #fff);
  border-radius: 2px 0 0 0;
  box-shadow: -1px -1px 0 0 var(--bb-line, #E6E1D8);
}
.bbpk-pop[hidden] { display: none; }
.bbpk.is-opening .bbpk-pop { animation: bbpk-pop-in .2s cubic-bezier(0, 0, .58, 1) both; }
.bbpk.is-closing .bbpk-pop { animation: bbpk-pop-out .175s linear both; }
@keyframes bbpk-pop-in  { from { opacity: 0; filter: blur(6px); transform: translateY(-4px) scale(.96); } }
@keyframes bbpk-pop-out { to   { opacity: 0; filter: blur(6px); transform: translateY(-2px) scale(.98); } }

/* Las opciones son los MISMOS botones de siempre (`[data-plat]`): el handler
   que ya existía los sigue escuchando, y este archivo no tiene que saber nada
   de campañas. Aquí sólo se les da la forma de la referencia. */
.bbpk-pop > button {
  appearance: none; border: 0; cursor: pointer; margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 8px;
  background: transparent; box-shadow: none;
  color: var(--bb-ink-3, #8A8578);
  font: 500 12.5px/1 'Outfit', system-ui, sans-serif; white-space: nowrap;
  transition: background-color .14s ease-out, color .14s ease-out;
}
.bbpk-pop > button:hover { background: var(--bb-hover, #F4F2EC); color: var(--bb-ink, #1A1A1A); }
.bbpk-pop > button.active { color: var(--bb-ink, #1A1A1A); font-weight: 600; background: none; }
.bbpk-pop > button svg { width: 15px; height: 15px; flex: none; max-width: none; }
/* La marca de la opción NO escogida va apagada, como el candado gris de la
   referencia: el color de marca es para la que está puesta. */
.bbpk-pop > button:not(.active) svg { filter: grayscale(1); opacity: .55; }
.bbpk-pop > button span[id$="Count"] {
  font-family: var(--bb-mono, 'Outfit', system-ui, sans-serif);
  font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600;
  color: var(--bb-ink-3, #8A8578); background: none; padding: 0; border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .bbpk-out, .bbpk-in, .bbpk.is-opening .bbpk-pop, .bbpk.is-closing .bbpk-pop { animation: none !important; }
  .bbpk-chev, .bbpk-trigger { transition: none !important; }
}