/* ==========================================================================
   BESC — Brand Experience & Strategic Content
   ==========================================================================
   Three surfaces: the nine-function hub, Direct Marketing (LeadWire) and
   Social (comentarios + señales).

   REFERENCE. The standing instruction is to scan https://collectui.com/ before
   any new page and name the reference here. On the day this shipped the site
   answered an empty body over curl and timed out at 60s over fetch from this
   machine — so the references NAMED for this build are the ones already
   distilled into this app's own layer from earlier scans (the landing-page
   loader's motion study, the Report Card's grade cards, and the Competencia
   duel split), and nothing external was imported. Every colour here is a
   --bb-* token. If a later session can reach CollectUI, the two screens worth
   re-referencing are its "analytics chart" (for the DM ledger) and "direct
   messaging" (for the inbox split).

   Type: Outfit for everything that reads as language, JetBrains Mono +
   tabular-nums for every number, per DESIGN.md. A number in Outfit is the
   single fastest way to make this app look like a different app.
   ========================================================================== */

.besc-wrap { display: flex; flex-direction: column; gap: 18px; }

/* --- page head: NAME + controls. No subtitle, no tagline. ---------------- */
.besc-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.besc-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.besc-title h2 {
  margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em;
  color: var(--bb-ink);
}
.besc-lead {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--bb-ink-3);
}
.besc-lead b { color: var(--bb-ink-2); font-weight: 600; }
.besc-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- chips: where every caveat lives (long reasoning in title=) ---------- */
.besc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.besc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: var(--bb-r-chip, 6px);
  border: 1px solid var(--bb-line); background: var(--bb-inset);
  font-size: 11.5px; color: var(--bb-ink-2); white-space: nowrap;
  cursor: default;
}
.besc-chip[title] { cursor: help; }
button.besc-chip { appearance: none; cursor: pointer; font: inherit; }
button.besc-chip:hover { background: var(--bb-line); }
.besc-chip .num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.besc-chip.warn { border-color: color-mix(in srgb, var(--bb-orange) 42%, var(--bb-line)); background: var(--bb-orange-tint); color: var(--bb-ink); }
.besc-chip.bad  { border-color: color-mix(in srgb, var(--bb-red) 42%, var(--bb-line)); background: var(--bb-red-tint); color: var(--bb-ink); }
.besc-chip.good { border-color: color-mix(in srgb, var(--bb-green) 42%, var(--bb-line)); background: var(--bb-green-tint); color: var(--bb-ink); }
.besc-chip.cold { opacity: .68; }

/* --- the nine-function map ----------------------------------------------- */
.besc-blocks { display: flex; flex-direction: column; gap: 22px; }
.besc-block-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.besc-block-head .n {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em;
  color: var(--bb-ink-3); text-transform: uppercase;
}
.besc-block-head .t { font-size: 13px; font-weight: 600; color: var(--bb-ink-2); letter-spacing: .01em; }
.besc-block-head .rule { flex: 1; height: 1px; background: var(--bb-line); }

.besc-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.besc-fn {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 16px 16px 14px; border-radius: var(--bb-r-card, 12px);
  border: 1px solid var(--bb-line); background: var(--bb-surface);
  box-shadow: var(--bb-sh-hairline);
  transition: transform var(--bb-t-fast, .14s) var(--bb-ease-strong, ease),
              box-shadow var(--bb-t-fast, .14s) var(--bb-ease-strong, ease),
              border-color var(--bb-t-fast, .14s) ease;
  overflow: hidden;
}
.besc-fn::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--bb-accent);
}
.besc-fn[data-bloque="1"]::before { background: var(--bb-accent); }
.besc-fn[data-bloque="2"]::before { background: var(--bb-violet); }
.besc-fn[data-bloque="3"]::before { background: var(--bb-cyan); }
.besc-fn.live { cursor: pointer; }
.besc-fn.live:hover {
  transform: translateY(-2px); box-shadow: var(--bb-sh-raised);
  border-color: var(--bb-line-strong);
}
.besc-fn.sinfuente { background: var(--bb-inset); }
.besc-fn.sinfuente::before { background: var(--bb-line-strong); }

.besc-fn-top { display: flex; align-items: flex-start; gap: 10px; }
.besc-fn-n {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 700; line-height: 1;
  color: color-mix(in srgb, var(--bb-ink) 26%, transparent);
  min-width: 34px;
}
.besc-fn-name {
  font-size: 14.5px; font-weight: 650; line-height: 1.25; color: var(--bb-ink);
  letter-spacing: -.005em;
}
.besc-fn-parts { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.besc-fn-parts li {
  font-size: 12px; color: var(--bb-ink-3); line-height: 1.35;
  padding-left: 11px; position: relative;
}
.besc-fn-parts li::before {
  content: ''; position: absolute; left: 2px; top: 7px;
  width: 3px; height: 3px; border-radius: 50%; background: var(--bb-ink-3); opacity: .6;
}
.besc-fn-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--bb-line);
}
.besc-fn-stat { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.besc-fn-stat .v {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 19px; font-weight: 700; color: var(--bb-ink); line-height: 1;
}
.besc-fn-stat .u { font-size: 11.5px; color: var(--bb-ink-3); }
.besc-fn-go {
  font-size: 11.5px; font-weight: 600; color: var(--bb-accent-ink);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.besc-fn-go svg { width: 13px; height: 13px; }

/* --- KPI row (DM) -------------------------------------------------------- */
.besc-kpis {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.besc-kpi {
  position: relative; padding: 14px 14px 12px; border-radius: var(--bb-r-card, 12px);
  border: 1px solid var(--bb-line); background: var(--bb-surface);
  box-shadow: var(--bb-sh-hairline); overflow: hidden;
}
.besc-kpi::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--bb-accent); }
.besc-kpi[data-tone="good"]::before { background: var(--bb-green); }
.besc-kpi[data-tone="bad"]::before { background: var(--bb-red); }
.besc-kpi[data-tone="warn"]::before { background: var(--bb-orange); }
.besc-kpi[data-tone="flat"]::before { background: var(--bb-line-strong); }
.besc-kpi .k { font-size: 11.5px; color: var(--bb-ink-3); margin-bottom: 6px; letter-spacing: .01em; }
.besc-kpi .v {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 27px; font-weight: 700; line-height: 1; color: var(--bb-ink);
}
.besc-kpi .v.na { font-size: 17px; color: var(--bb-ink-3); font-weight: 600; }
.besc-kpi .s { margin-top: 6px; font-size: 11px; color: var(--bb-ink-3); }

/* --- account strip ------------------------------------------------------- */
.besc-acct {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: var(--bb-r-card, 12px);
  border: 1px solid var(--bb-line); background: var(--bb-inset);
}
.besc-acct-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.besc-acct-cell .k { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--bb-ink-3); }
.besc-acct-cell .v { font-size: 14px; font-weight: 600; color: var(--bb-ink); }
.besc-acct-cell .v.mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.besc-usage { flex: 1 1 220px; min-width: 180px; }
.besc-usage-bar {
  height: 8px; border-radius: 999px; background: var(--bb-line);
  overflow: hidden; display: flex; margin-top: 6px;
}
.besc-usage-bar i { display: block; height: 100%; }
.besc-usage-bar i.out { background: var(--bb-accent); }
.besc-usage-bar i.in  { background: var(--bb-cyan); }
.besc-usage-legend { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; color: var(--bb-ink-3); }
.besc-usage-legend b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--bb-ink-2); }

/* --- campaign ledger ---------------------------------------------------- */
.besc-camps { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.besc-camp {
  display: flex; flex-direction: column; gap: 10px; padding: 15px;
  border-radius: var(--bb-r-card, 12px); border: 1px solid var(--bb-line);
  background: var(--bb-surface); box-shadow: var(--bb-sh-hairline);
}
.besc-camp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.besc-camp-name { font-size: 14px; font-weight: 650; color: var(--bb-ink); line-height: 1.25; }
.besc-camp-when { font-size: 11px; color: var(--bb-ink-3); white-space: nowrap; font-family: 'JetBrains Mono', monospace; }
.besc-camp-body {
  font-size: 12.5px; line-height: 1.45; color: var(--bb-ink-2);
  padding: 10px 12px; border-radius: 8px; background: var(--bb-inset);
  border-left: 3px solid var(--bb-accent);
  white-space: pre-wrap; word-break: break-word;
  max-height: 96px; overflow: auto;
}
.besc-camp-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.besc-camp-num { display: flex; flex-direction: column; gap: 2px; }
.besc-camp-num .k { font-size: 10.5px; color: var(--bb-ink-3); }
.besc-camp-num .v {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 700; color: var(--bb-ink); line-height: 1.1;
}
.besc-camp-num .v.sm { font-size: 13px; font-weight: 600; color: var(--bb-ink-3); }
.besc-rate { display: flex; flex-direction: column; gap: 5px; }
.besc-rate-row { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--bb-ink-3); }
.besc-rate-row b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--bb-ink); }
.besc-rate-bar { height: 6px; border-radius: 999px; background: var(--bb-line); overflow: hidden; }
.besc-rate-bar i { display: block; height: 100%; background: var(--bb-green); }
.besc-rate-bar.bajas i { background: var(--bb-red); }

/* --- inbox split -------------------------------------------------------- */
.besc-inbox { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 14px; min-height: 380px; }
.besc-inbox-list {
  display: flex; flex-direction: column; gap: 2px; max-height: 520px; overflow-y: auto;
  border: 1px solid var(--bb-line); border-radius: var(--bb-r-card, 12px);
  background: var(--bb-surface); padding: 6px;
}
.besc-conv {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 10px;
  border-radius: 8px; cursor: pointer; border: 1px solid transparent;
  transition: background var(--bb-t-fast, .14s) ease;
}
.besc-conv:hover { background: var(--bb-hover); }
.besc-conv.sel { background: var(--bb-accent-tint); border-color: color-mix(in srgb, var(--bb-accent) 40%, var(--bb-line)); }
.besc-conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.besc-conv-who { font-size: 12.5px; font-weight: 600; color: var(--bb-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.besc-conv-when { font-size: 10.5px; color: var(--bb-ink-3); font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.besc-conv-prev { font-size: 11.5px; color: var(--bb-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.besc-thread {
  display: flex; flex-direction: column; border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-card, 12px); background: var(--bb-surface); overflow: hidden;
}
.besc-thread-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--bb-line); background: var(--bb-inset);
}
.besc-thread-msgs { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px; max-height: 400px; overflow-y: auto; }
.besc-msg { max-width: 78%; display: flex; flex-direction: column; gap: 3px; }
.besc-msg.in  { align-self: flex-start; }
.besc-msg.out { align-self: flex-end; align-items: flex-end; }
.besc-msg-b {
  padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4;
  white-space: pre-wrap; word-break: break-word;
}
.besc-msg.in .besc-msg-b { background: var(--bb-inset); color: var(--bb-ink); border-bottom-left-radius: 4px; }
.besc-msg.out .besc-msg-b { background: var(--bb-accent); color: #fff; border-bottom-right-radius: 4px; }
.besc-msg-m { font-size: 10.5px; color: var(--bb-ink-3); font-family: 'JetBrains Mono', monospace; }
.besc-composer { display: flex; gap: 8px; padding: 11px 12px; border-top: 1px solid var(--bb-line); background: var(--bb-inset); }
.besc-composer textarea {
  flex: 1; min-height: 40px; max-height: 120px; resize: vertical;
  padding: 9px 11px; border-radius: 9px; border: 1px solid var(--bb-line);
  background: var(--bb-field); color: var(--bb-ink); font: inherit; font-size: 13px;
}
.besc-composer-meta { font-size: 10.5px; color: var(--bb-ink-3); font-family: 'JetBrains Mono', monospace; align-self: flex-end; padding-bottom: 4px; white-space: nowrap; }

/* --- rezagados ---------------------------------------------------------- */
.besc-lag { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.besc-lag-card {
  display: flex; flex-direction: column; gap: 9px; padding: 15px;
  border-radius: var(--bb-r-card, 12px); border: 1px solid var(--bb-line);
  background: var(--bb-surface); box-shadow: var(--bb-sh-hairline);
  border-left: 4px solid var(--bb-red);
}
.besc-lag-card[data-tone="warn"] { border-left-color: var(--bb-orange); }
.besc-lag-card[data-tone="good"] { border-left-color: var(--bb-green); }
.besc-lag-who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.besc-lag-who .n { font-size: 15px; font-weight: 680; color: var(--bb-ink); letter-spacing: -.01em; }
.besc-lag-who .s { font-size: 11.5px; color: var(--bb-ink-3); }
/* The one sentence per card that IS the deliverable: plain language, numbers
   inline. This is not decorative prose — it is the fact, written the way she
   has to repeat it to the agency. */
.besc-lag-say { font-size: 13px; line-height: 1.5; color: var(--bb-ink); }
.besc-lag-say b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 700; }
.besc-lag-ask {
  font-size: 12px; line-height: 1.45; color: var(--bb-ink-2);
  padding: 9px 11px; border-radius: 8px; background: var(--bb-inset);
}
.besc-lag-ask .k { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--bb-ink-3); margin-bottom: 3px; }
.besc-lag-bar { height: 7px; border-radius: 999px; background: var(--bb-line); overflow: hidden; position: relative; }
.besc-lag-bar i { display: block; height: 100%; background: var(--bb-red); }
.besc-lag-card[data-tone="warn"] .besc-lag-bar i { background: var(--bb-orange); }
.besc-lag-card[data-tone="good"] .besc-lag-bar i { background: var(--bb-green); }
.besc-lag-bar span {
  position: absolute; top: -3px; width: 2px; height: 13px; background: var(--bb-ink);
  opacity: .55; border-radius: 1px;
}

/* --- comments / sentiment ---------------------------------------------- */
.besc-posts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.besc-post {
  display: flex; flex-direction: column; border-radius: var(--bb-r-card, 12px);
  border: 1px solid var(--bb-line); background: var(--bb-surface); overflow: hidden;
  cursor: pointer; box-shadow: var(--bb-sh-hairline);
  transition: transform var(--bb-t-fast, .14s) var(--bb-ease-strong, ease), box-shadow var(--bb-t-fast, .14s) ease;
}
.besc-post:hover { transform: translateY(-2px); box-shadow: var(--bb-sh-raised); }
.besc-post.sel { border-color: var(--bb-accent); box-shadow: var(--bb-sh-focus); }
.besc-post-img { aspect-ratio: 16 / 10; background: var(--bb-inset); overflow: hidden; }
.besc-post-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.besc-post-img.none { display: flex; align-items: center; justify-content: center; color: var(--bb-ink-3); font-size: 11px; }
.besc-post-b { padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; }
.besc-post-t { font-size: 12px; line-height: 1.4; color: var(--bb-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.besc-post-n { display: flex; gap: 10px; font-size: 11px; color: var(--bb-ink-3); }
.besc-post-n b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--bb-ink); }

.besc-meter {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: var(--bb-r-card, 12px);
  border: 1px solid var(--bb-line); background: var(--bb-surface);
}
.besc-needle { flex: 1 1 260px; min-width: 220px; }
.besc-needle-bar { height: 12px; border-radius: 999px; overflow: hidden; display: flex; background: var(--bb-line); }
.besc-needle-bar i { display: block; height: 100%; }
.besc-needle-bar i.pos { background: var(--bb-green); }
.besc-needle-bar i.neu { background: var(--bb-line-strong); }
.besc-needle-bar i.neg { background: var(--bb-red); }
.besc-needle-legend { display: flex; gap: 14px; margin-top: 7px; font-size: 11.5px; color: var(--bb-ink-3); flex-wrap: wrap; }
.besc-needle-legend b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--bb-ink); }
.besc-neto { display: flex; flex-direction: column; gap: 2px; }
.besc-neto .v {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 700; line-height: 1;
}
.besc-neto .v.pos { color: var(--bb-green); }
.besc-neto .v.neg { color: var(--bb-red); }
.besc-neto .v.na  { color: var(--bb-ink-3); font-size: 16px; }
.besc-neto .k { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--bb-ink-3); }

.besc-comments { display: flex; flex-direction: column; gap: 8px; }
.besc-com {
  display: flex; gap: 11px; padding: 12px 13px; border-radius: 10px;
  border: 1px solid var(--bb-line); background: var(--bb-surface);
}
.besc-com.crit { border-left: 4px solid var(--bb-red); background: color-mix(in srgb, var(--bb-red-tint) 55%, var(--bb-surface)); }
.besc-com.lead { border-left: 4px solid var(--bb-green); background: color-mix(in srgb, var(--bb-green-tint) 45%, var(--bb-surface)); }
.besc-com.hid { opacity: .55; }
.besc-com.done { opacity: .6; }
.besc-com-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--bb-line-strong); }
.besc-com-dot.positivo { background: var(--bb-green); }
.besc-com-dot.negativo { background: var(--bb-red); }
.besc-com-dot.neutral  { background: var(--bb-line-strong); }
.besc-com-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.besc-com-who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.besc-com-who .a { font-size: 12.5px; font-weight: 650; color: var(--bb-ink); }
.besc-com-who .w { font-size: 10.5px; color: var(--bb-ink-3); font-family: 'JetBrains Mono', monospace; }
.besc-com-t { font-size: 13px; line-height: 1.45; color: var(--bb-ink); word-break: break-word; }
.besc-com-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.besc-com-act {
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  padding: 4px 10px; border-radius: var(--bb-r-chip, 6px);
  border: 1px solid var(--bb-line); background: var(--bb-surface); color: var(--bb-ink-2);
  transition: background var(--bb-t-fast, .14s) ease, border-color var(--bb-t-fast, .14s) ease;
}
.besc-com-act:hover { background: var(--bb-hover); border-color: var(--bb-line-strong); }
.besc-com-act.danger:hover { background: var(--bb-red-tint); border-color: var(--bb-red); color: var(--bb-ink); }
.besc-com-reply { display: none; gap: 8px; margin-top: 4px; }
.besc-com-reply.open { display: flex; }
.besc-com-reply textarea {
  flex: 1; min-height: 34px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--bb-line); background: var(--bb-field); color: var(--bb-ink);
  font: inherit; font-size: 12.5px; resize: vertical;
}

/* --- señales / ideas ---------------------------------------------------- */
.besc-sig { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .besc-sig { grid-template-columns: 1fr; } .besc-inbox { grid-template-columns: 1fr; } }
.besc-panel {
  border: 1px solid var(--bb-line); border-radius: var(--bb-r-card, 12px);
  background: var(--bb-surface); overflow: hidden;
}
.besc-panel-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--bb-line); background: var(--bb-inset);
  font-size: 12.5px; font-weight: 650; color: var(--bb-ink);
}
.besc-panel-b { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; max-height: 520px; overflow-y: auto; }

.besc-trend { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; background: var(--bb-inset); }
.besc-trend.off { opacity: .5; }
.besc-trend-img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex: none; background: var(--bb-line); }
.besc-trend-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.besc-trend-t { font-size: 13px; font-weight: 620; color: var(--bb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.besc-trend-m { font-size: 11px; color: var(--bb-ink-3); display: flex; gap: 8px; flex-wrap: wrap; }
.besc-trend-m b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--bb-ink-2); }

/* El rango de X (y las iniciales del medio) ocupan el mismo hueco de 42px que
   la imagen de una tendencia de Google: cinco fuentes en una sola cuadrícula
   solo se leen como una si las filas miden igual. */
.besc-trend-img.rk {
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 12.5px; font-weight: 620; color: var(--bb-ink-3);
  background: var(--bb-surface); border: 1px solid var(--bb-line);
}
/* Un título de Reddit o de una noticia es una oración, no un keyword: con
   nowrap se corta en la tercera palabra y la fila deja de decir nada. Dos
   líneas y corte con puntos. */
.besc-trend-t.wrap {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; line-height: 1.32; text-decoration: none;
}
a.besc-trend-t:hover { text-decoration: underline; }

/* El fallo de una idea: qué pasó y una salida, no una línea gris. */
.besc-idea-err {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  border: 1px solid var(--bb-red); border-left-width: 3px;
  border-radius: var(--bb-r-card, 12px); background: var(--bb-red-tint);
}
.besc-idea-err b { font-size: 13px; color: var(--bb-ink); }
.besc-idea-err span { font-size: 12px; color: var(--bb-ink-2); line-height: 1.45; }

.besc-kw { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; }
.besc-kw:hover { background: var(--bb-hover); }
.besc-kw-r {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 11px; color: var(--bb-ink-3); min-width: 22px; text-align: right;
}
.besc-kw-t { flex: 1; font-size: 12.5px; color: var(--bb-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.besc-pair {
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border-radius: var(--bb-r-card, 12px); border: 1px solid var(--bb-line-strong);
  background: var(--bb-surface); box-shadow: var(--bb-sh-card);
}
.besc-pair-line { font-size: 14px; line-height: 1.6; color: var(--bb-ink); }
.besc-pair-line b { font-weight: 700; }
.besc-pair-line .slot {
  display: inline-block; padding: 1px 8px; border-radius: var(--bb-r-chip, 6px);
  background: var(--bb-accent-tint); color: var(--bb-accent-ink); font-weight: 650;
}
.besc-pair-line .slot.empty { background: var(--bb-inset); color: var(--bb-ink-3); font-weight: 500; }
.besc-fmt { display: flex; gap: 6px; }
.besc-fmt button {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 6px 14px; border-radius: var(--bb-r-control, 8px);
  border: 1px solid var(--bb-line); background: var(--bb-surface); color: var(--bb-ink-2);
}
.besc-fmt button.on { background: var(--bb-accent); border-color: var(--bb-accent); color: #fff; }

.besc-idea { display: flex; flex-direction: column; gap: 12px; }
.besc-idea-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.besc-idea-t { font-size: 17px; font-weight: 700; color: var(--bb-ink); letter-spacing: -.015em; }
.besc-idea-copy {
  font-size: 13.5px; line-height: 1.6; color: var(--bb-ink); white-space: pre-wrap;
  padding: 13px 15px; border-radius: 10px; background: var(--bb-inset);
  border-left: 3px solid var(--bb-accent);
}
.besc-idea-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.besc-idea-tags span { font-size: 11.5px; color: var(--bb-accent-ink); background: var(--bb-accent-tint); padding: 3px 8px; border-radius: var(--bb-r-chip, 6px); }
.besc-guion { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.besc-guion th {
  text-align: left; padding: 8px 10px; background: var(--bb-inset);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--bb-ink-3);
  border-bottom: 1px solid var(--bb-line); font-weight: 600;
}
.besc-guion td { padding: 9px 10px; border-bottom: 1px solid var(--bb-line); vertical-align: top; color: var(--bb-ink-2); line-height: 1.45; }
.besc-guion td.t { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--bb-ink); white-space: nowrap; font-weight: 600; }
.besc-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.besc-card-n {
  padding: 12px; border-radius: 10px; border: 1px solid var(--bb-line);
  background: var(--bb-surface); display: flex; flex-direction: column; gap: 5px;
  position: relative; padding-top: 22px;
}
.besc-card-n .i {
  position: absolute; top: 7px; left: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--bb-ink-3);
}
.besc-card-n .h { font-size: 13.5px; font-weight: 700; color: var(--bb-ink); line-height: 1.25; }
.besc-card-n .p { font-size: 11.5px; color: var(--bb-ink-3); line-height: 1.4; }
.besc-risk { display: flex; flex-direction: column; gap: 5px; }
.besc-risk div {
  font-size: 12px; color: var(--bb-ink-2); padding: 7px 10px; border-radius: 8px;
  background: var(--bb-orange-tint); border-left: 3px solid var(--bb-orange);
}

/* --- shared bits -------------------------------------------------------- */
.besc-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--bb-r-control, 8px); background: var(--bb-inset); border: 1px solid var(--bb-line); }
.besc-seg button {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 5px 12px; border-radius: 6px; border: none; background: transparent; color: var(--bb-ink-3);
  transition: background var(--bb-t-fast, .14s) ease, color var(--bb-t-fast, .14s) ease;
}
.besc-seg button:hover { color: var(--bb-ink); }
.besc-seg button.on { background: var(--bb-surface); color: var(--bb-ink); box-shadow: var(--bb-sh-btn); }
.besc-sec { display: flex; flex-direction: column; gap: 12px; }
.besc-sec-h { display: flex; align-items: center; gap: 10px; }
.besc-sec-h .t { font-size: 13px; font-weight: 650; color: var(--bb-ink-2); letter-spacing: .01em; }
.besc-sec-h .rule { flex: 1; height: 1px; background: var(--bb-line); }
.besc-sec-h .n { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--bb-ink-3); }
.besc-empty {
  padding: 26px 20px; text-align: center; border-radius: var(--bb-r-card, 12px);
  border: 1px dashed var(--bb-line-strong); background: var(--bb-inset);
  color: var(--bb-ink-3); font-size: 13px;
}
.besc-empty b { color: var(--bb-ink-2); }
.besc-in {
  font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: var(--bb-r-control, 8px);
  border: 1px solid var(--bb-line); background: var(--bb-field); color: var(--bb-ink);
}
.besc-btn {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: var(--bb-r-control, 8px);
  border: 1px solid var(--bb-line); background: var(--bb-surface); color: var(--bb-ink);
  transition: background var(--bb-t-fast, .14s) ease, border-color var(--bb-t-fast, .14s) ease;
}
.besc-btn:hover { background: var(--bb-hover); border-color: var(--bb-line-strong); }
.besc-btn.primary { background: var(--bb-accent); border-color: var(--bb-accent); color: #fff; }
.besc-btn.primary:hover { filter: brightness(1.06); }
.besc-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ==========================================================================
   BESC · v2 — cockpit layout
   ==========================================================================
   WHY THIS EXISTS. v1 shipped as six identical flat tiles in a row, every one
   reading 0, with no chart anywhere and most of the page empty. Miguel's words:
   "the UI looks like SHIT… i can't have this basic shit." He was right, and the
   diagnosis is specific rather than a matter of taste:

     1. NO HIERARCHY. Six equal tiles means nothing is the headline, so the eye
        has nowhere to land and every number reads as equally unimportant.
     2. NO SHAPE. Not one chart. This app is read by a paid-media analyst who
        thinks in trend lines; a column of integers is a table pretending to be
        a dashboard.
     3. NO DEPTH. Flat white rectangles on flat beige. Nothing is layered, so
        nothing feels built.
     4. NO ANSWER. Numbers with labels, and no sentence saying what they mean or
        what to do about them. He asked for "insight and actions", not readouts.
     5. THE EMPTY STATE WAS A DASHED BOX. Which is the FIRST thing he saw, since
        LeadWire is not connected yet. An unconfigured product still has to look
        like a product.

   REFERENCE. The standing instruction is to scan collectui.com first. Attempted
   again for this pass and their backend is DOWN — every content query returns
   `503 upstream connect error … connection timeout` from their Supabase, so the
   site renders with zero designs on it (verified in the browser console, not
   guessed). Rather than claim a scan that did not happen, the patterns used here
   are named outright: a Stripe-style hero metric with an inline sparkline, a
   Vercel-Analytics-style dense stat rail (one dominant figure, the rest
   subordinate), and Linear-style insight rows where a verdict sentence carries
   its own action button. Every colour is a --bb-* token; nothing is imported.
   ========================================================================== */

/* --- hero band: ONE number owns the page ------------------------------- */
.besc-hero {
  position: relative; overflow: hidden;
  display: grid; gap: 22px;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  align-items: stretch;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid var(--bb-line);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--bb-accent) 12%, transparent) 0%, transparent 58%),
    var(--bb-surface);
  box-shadow: var(--bb-sh-card);
}
.besc-hero::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--bb-accent), color-mix(in srgb, var(--bb-cyan) 70%, var(--bb-accent)) 60%, transparent);
}
@media (max-width: 860px) { .besc-hero { grid-template-columns: 1fr; } }

.besc-hero-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; justify-content: center; }
.besc-hero-k {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bb-ink-3); font-weight: 600;
}
.besc-hero-v {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 6vw, 60px); font-weight: 700; line-height: .95;
  color: var(--bb-ink); letter-spacing: -.03em;
}
.besc-hero-v .unit {
  font-family: 'Outfit', system-ui, sans-serif; font-size: 14px; font-weight: 500;
  color: var(--bb-ink-3); letter-spacing: 0;
}
.besc-hero-v.na { font-size: 26px; color: var(--bb-ink-3); font-weight: 600; }
.besc-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}
.besc-delta.up   { color: var(--bb-green); background: var(--bb-green-tint); }
.besc-delta.down { color: var(--bb-red);   background: var(--bb-red-tint); }
.besc-delta.flat { color: var(--bb-ink-3); background: var(--bb-inset); }
/* The verdict. This is the sentence that turns a number into a decision, and it
   is a FACT, not encouragement — see the no-copy-slop rule. */
.besc-hero-say { font-size: 13.5px; line-height: 1.5; color: var(--bb-ink-2); max-width: 46ch; }
.besc-hero-say b { color: var(--bb-ink); font-weight: 650; }
.besc-hero-chart { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.besc-hero-chart svg { width: 100%; height: 116px; display: block; overflow: visible; }
.besc-hero-legend {
  display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--bb-ink-3);
}
.besc-hero-legend i { display: inline-block; width: 9px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* --- stat rail: subordinate numbers, not six equal tiles ---------------- */
.besc-rail {
  display: grid; gap: 1px; background: var(--bb-line);
  border: 1px solid var(--bb-line); border-radius: 14px; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.besc-rail-cell {
  background: var(--bb-surface); padding: 13px 14px 12px;
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  transition: background var(--bb-t-fast, .14s) ease;
}
.besc-rail-cell:hover { background: var(--bb-hover); }
.besc-rail-cell .k {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.besc-rail-row { display: flex; align-items: baseline; gap: 7px; }
.besc-rail-cell .v {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 21px; font-weight: 700; line-height: 1; color: var(--bb-ink);
}
.besc-rail-cell .v.na { font-size: 13px; color: var(--bb-ink-3); font-weight: 600; }
.besc-rail-cell .s { font-size: 10.5px; color: var(--bb-ink-3); }
.besc-rail-cell .spark { height: 22px; margin-top: 2px; }
.besc-rail-cell .spark svg { width: 100%; height: 22px; display: block; }
.besc-rail-cell[data-tone="bad"]  .v { color: var(--bb-red); }
.besc-rail-cell[data-tone="good"] .v { color: var(--bb-green); }
.besc-rail-cell[data-tone="warn"] .v { color: var(--bb-orange); }

/* --- insight rows: a verdict that carries its own action ---------------- */
.besc-insights { display: flex; flex-direction: column; gap: 8px; }
.besc-insight {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; border-radius: 12px;
  border: 1px solid var(--bb-line); background: var(--bb-surface);
  border-left: 3px solid var(--bb-line-strong);
  transition: border-color var(--bb-t-fast, .14s) ease, background var(--bb-t-fast, .14s) ease;
}
.besc-insight:hover { background: var(--bb-hover); }
.besc-insight[data-tone="bad"]  { border-left-color: var(--bb-red); background: color-mix(in srgb, var(--bb-red-tint) 34%, var(--bb-surface)); }
.besc-insight[data-tone="warn"] { border-left-color: var(--bb-orange); background: color-mix(in srgb, var(--bb-orange-tint) 34%, var(--bb-surface)); }
.besc-insight[data-tone="good"] { border-left-color: var(--bb-green); }
.besc-insight-ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; background: var(--bb-inset);
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--bb-ink-2);
}
.besc-insight[data-tone="bad"]  .besc-insight-ico { background: var(--bb-red-tint);    color: var(--bb-red); }
.besc-insight[data-tone="warn"] .besc-insight-ico { background: var(--bb-orange-tint); color: var(--bb-orange); }
.besc-insight[data-tone="good"] .besc-insight-ico { background: var(--bb-green-tint);  color: var(--bb-green); }
.besc-insight-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.besc-insight-t { font-size: 13.5px; font-weight: 620; color: var(--bb-ink); line-height: 1.3; }
.besc-insight-t b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.besc-insight-s { font-size: 12px; color: var(--bb-ink-3); line-height: 1.4; }
.besc-insight-go { flex: none; }

/* --- setup: a designed checklist, never a dashed box -------------------- */
.besc-setup {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px;
  padding: 26px; border-radius: 16px;
  border: 1px solid var(--bb-line);
  background:
    radial-gradient(110% 130% at 100% 0%, color-mix(in srgb, var(--bb-cyan) 10%, transparent) 0%, transparent 60%),
    var(--bb-surface);
  box-shadow: var(--bb-sh-card);
}
@media (max-width: 900px) { .besc-setup { grid-template-columns: 1fr; } }
.besc-setup-h { font-size: 19px; font-weight: 700; color: var(--bb-ink); letter-spacing: -.015em; margin-bottom: 4px; }
.besc-setup-steps { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.besc-step { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--bb-line); }
.besc-step:first-child { border-top: none; }
.besc-step-n {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  background: var(--bb-inset); color: var(--bb-ink-3); border: 1px solid var(--bb-line);
}
.besc-step.done .besc-step-n { background: var(--bb-green); border-color: var(--bb-green); color: #fff; }
.besc-step.now .besc-step-n  { background: var(--bb-accent); border-color: var(--bb-accent); color: #fff; }
.besc-step-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.besc-step-t { font-size: 13px; font-weight: 600; color: var(--bb-ink); }
.besc-step.done .besc-step-t { color: var(--bb-ink-3); text-decoration: line-through; }
.besc-step-s { font-size: 12px; color: var(--bb-ink-3); line-height: 1.45; word-break: break-word; }
.besc-step-s code {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  background: var(--bb-inset); padding: 1px 6px; border-radius: 5px; color: var(--bb-ink-2);
}
/* The preview: what the page WILL look like once it is connected. An empty
   product that shows nothing teaches nothing; this shows the shape of the
   answer so the setup work has a visible point. */
.besc-preview {
  border-radius: 13px; border: 1px solid var(--bb-line); background: var(--bb-inset);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
}
.besc-preview::after {
  content: 'vista previa'; position: absolute; top: 10px; right: 12px;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bb-ink-3); background: var(--bb-surface);
  padding: 2px 7px; border-radius: 5px; border: 1px solid var(--bb-line);
}
.besc-preview .ghost {
  background: linear-gradient(90deg, var(--bb-line) 0%, color-mix(in srgb, var(--bb-line) 45%, transparent) 60%, var(--bb-line) 100%);
  border-radius: 6px; height: 10px;
}
.besc-preview svg { width: 100%; height: 78px; display: block; opacity: .5; }

/* --- gauge (sentiment) -------------------------------------------------- */
.besc-gauge { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.besc-gauge svg { width: 148px; height: 92px; display: block; flex: none; }
.besc-gauge-v {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 700; line-height: 1;
}

/* --- chart shell used by the trend panels ------------------------------- */
.besc-chart {
  border: 1px solid var(--bb-line); border-radius: 14px; background: var(--bb-surface);
  padding: 16px 18px 12px; box-shadow: var(--bb-sh-hairline);
}
.besc-chart-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.besc-chart-t { font-size: 13px; font-weight: 650; color: var(--bb-ink); }
.besc-chart svg { width: 100%; display: block; overflow: visible; }
.besc-axis { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; fill: var(--bb-ink-3); }
.besc-grid-line { stroke: var(--bb-line); stroke-width: 1; }

/* --- campaign card v2: sparkline inline --------------------------------- */
.besc-camp { transition: transform var(--bb-t-fast, .14s) var(--bb-ease-strong, ease), box-shadow var(--bb-t-fast, .14s) ease, border-color var(--bb-t-fast, .14s) ease; }
.besc-camp:hover { transform: translateY(-2px); box-shadow: var(--bb-sh-raised); border-color: var(--bb-line-strong); }
.besc-camp.sel { border-color: var(--bb-accent); box-shadow: var(--bb-sh-focus); }
.besc-camp-spark { height: 30px; margin: -2px 0 2px; }
.besc-camp-spark svg { width: 100%; height: 30px; display: block; }

/* Axis labels live in HTML, not in the SVG: the chart frame uses
   preserveAspectRatio="none" so the bars can stretch to any width, and that
   scales text by the same non-uniform factor. Geometry stretches; type must not. */
.besc-axis-row {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 3px;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--bb-ink-3);
}
.besc-axis-row span { flex: 1; min-width: 0; }

/* ==========================================================================
   PUBLICACIONES — el feed orgánico de Facebook + Instagram
   ==========================================================================
   Media grande primero, números debajo: la forma de la Creative Gallery, que es
   la que él ya aprobó en este app. Todo con los tokens --bb-*; nada de paletas
   prestadas. Los números van en JetBrains Mono con tabular-nums, y una métrica
   que la plataforma NO reportó se pinta apagada y dice "no lo reporta" — nunca
   un 0, que sería un número inventado.
   ========================================================================== */
.besc-pgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }

/* La cabecera: los tres números con los que se entra a la reunión. */
.besc-resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--bb-line); border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-card, 12px); overflow: hidden;
}
.besc-rs { background: var(--bb-surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.besc-rs[title] { cursor: help; }
.besc-rs .v {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 25px; font-weight: 700; line-height: 1.05; color: var(--bb-ink);
}
.besc-rs .k { font-size: 11px; color: var(--bb-ink-3); }
.besc-rs.na .v { font-size: 15px; font-family: inherit; font-weight: 500; color: var(--bb-ink-3); }

/* La tarjeta: la imagen manda, y los números viven debajo sin cajas. Las cajas
   por cifra convertían cada tarjeta en un formulario — seis marcos por
   publicación compitiendo con el creativo, que es lo único que él quiere ver
   primero. */
.besc-pc {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  border-radius: var(--bb-r-card, 12px); border: 1px solid var(--bb-line);
  background: var(--bb-surface); box-shadow: var(--bb-sh-hairline);
  transition: transform var(--bb-t-fast, .14s) var(--bb-ease-strong, ease), box-shadow var(--bb-t-fast, .14s) ease;
}
.besc-pc:hover { transform: translateY(-3px); box-shadow: var(--bb-sh-raised); }
.besc-pc.on { border-color: var(--bb-accent); box-shadow: var(--bb-sh-focus); }
/* La que más movió ocupa dos columnas cuando la rejilla se lo permite. */
.besc-pc.big { grid-column: span 2; }
.besc-pc.big .besc-pc-media { aspect-ratio: 16 / 10; }
.besc-pc.big .besc-pc-t { -webkit-line-clamp: 3; font-size: 13px; }
@media (max-width: 700px) { .besc-pc.big { grid-column: span 1; } }

.besc-pc-media { position: relative; aspect-ratio: 4 / 5; background: var(--bb-inset); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.besc-pc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.besc-pc-noimg { color: var(--bb-ink-3); font-size: 11px; }
/* El degradado existe para que el pie se lea sobre CUALQUIER foto — sin él, un
   creativo claro se come el texto blanco. */
.besc-pc-shade {
  position: absolute; inset: auto 0 0 0; height: 62px; pointer-events: none;
  background: linear-gradient(to top, rgba(9,14,26,.72), rgba(9,14,26,0));
}
.besc-pc-cap {
  position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; justify-content: space-between;
  font-size: 10.5px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); pointer-events: none;
}
.besc-pc-red {
  position: absolute; top: 9px; left: 9px; width: 27px; height: 27px; flex: none;
  display: flex; align-items: center; justify-content: center; border-radius: 9px;
  background: color-mix(in srgb, var(--bb-surface) 88%, transparent);
  border: 1px solid var(--bb-line); backdrop-filter: blur(6px);
}
/* Un icono dentro de un flex se colapsa a 0 de ancho con el `svg{max-width:100%}`
   de responsive.css. Ancho y alto explícitos, medidos. */
.besc-pc-red svg { width: 15px; height: 15px; max-width: none; }
.besc-pc-red.facebook { color: #1877F2; }
.besc-pc-red.instagram { color: #C13584; }
.besc-pc-rate {
  position: absolute; top: 9px; right: 9px; padding: 4px 8px; border-radius: 7px;
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 700;
  background: color-mix(in srgb, var(--bb-surface) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--bb-green) 46%, var(--bb-line)); color: var(--bb-ink);
  backdrop-filter: blur(6px);
}
.besc-pc-rate.na { border-color: var(--bb-line); color: var(--bb-ink-3); font-weight: 500; }
.besc-pc-flag {
  position: absolute; left: 9px; top: 44px; padding: 3px 8px; border-radius: 6px;
  font-size: 10.5px; font-weight: 650; color: var(--bb-ink);
  background: var(--bb-amber-tint, #fdf3d7); border: 1px solid color-mix(in srgb, var(--bb-amber, #c8961f) 45%, var(--bb-line));
}
.besc-pc-b { padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 11px; }
.besc-pc-t { font-size: 12.5px; line-height: 1.45; color: var(--bb-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.besc-pc-stats { display: flex; gap: 14px; border-top: 1px solid var(--bb-line); padding-top: 11px; }
.besc-pc-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.besc-pc-stat .v {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 700; color: var(--bb-ink); line-height: 1.1;
}
.besc-pc-stat .k { font-size: 10px; color: var(--bb-ink-3); line-height: 1.25; }
.besc-pc-stat.na .v { color: var(--bb-ink-3); font-weight: 500; }

.besc-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.besc-kpi .v {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 700; color: var(--bb-ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* La etiqueta ENVUELVE, no se corta: "Seguidores d…" no dice nada, y ese es
   justo el número que él pidió ver. */
.besc-kpi .k { font-size: 9.5px; line-height: 1.25; color: var(--bb-ink-3); }
.besc-kpi.na .v { font-size: 9.5px; font-weight: 500; color: var(--bb-ink-3); font-family: inherit; }
.besc-pc-kpis .besc-kpi .k { font-size: 9px; }
.besc-sheet-h a.besc-btn { text-decoration: none; }
.besc-pc-media { aspect-ratio: 1 / 1; }
.besc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px 10px; }
.besc-kpi.wide {
  grid-column: 1 / -1; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--bb-line); background: var(--bb-inset);
}
.besc-kpi.wide .v { font-size: 20px; }

/* La hoja: media a la izquierda, números a la derecha, análisis debajo. */
.besc-sheet {
  border-radius: var(--bb-r-card, 12px); border: 1px solid var(--bb-accent);
  background: var(--bb-surface); box-shadow: var(--bb-sh-raised); overflow: hidden; margin-bottom: 14px;
}
.besc-sheet-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--bb-line); flex-wrap: wrap; }
.besc-sheet-h .t { font-size: 11.5px; color: var(--bb-ink-3); }
.besc-sheet-h .rule { flex: 1; }
.besc-sheet-h .besc-pc-red { position: static; }
.besc-sheet-b { display: flex; gap: 16px; padding: 14px; flex-wrap: wrap; }
.besc-sheet-media { flex: 0 1 300px; min-width: 220px; display: flex; flex-direction: column; gap: 10px; }
.besc-sheet-media img { width: 100%; border-radius: 10px; border: 1px solid var(--bb-line); display: block; }
.besc-sheet-txt { font-size: 12.5px; line-height: 1.5; color: var(--bb-ink-2); white-space: pre-wrap; max-height: 220px; overflow: auto; }
.besc-sheet-side { flex: 1 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: 12px; }

/* Brilliant Basics — el MISMO radar del Report Card (window.BBRadar). */
.besc-bb { border-top: 1px solid var(--bb-line); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.besc-bb-h { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--bb-ink); flex-wrap: wrap; }
.besc-bb-load { font-size: 12px; color: var(--bb-ink-3); }
.besc-bb-body { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.besc-bb-radar { flex: 0 0 240px; max-width: 100%; }
.besc-bb-radar svg { width: 100%; height: auto; }
.besc-bb-axes { flex: 1 1 300px; min-width: 240px; display: flex; flex-direction: column; gap: 5px; }
.besc-bb-ax { display: grid; grid-template-columns: 92px 1fr 24px; align-items: center; gap: 8px; font-size: 11px; color: var(--bb-ink-2); }
.besc-bb-ax .bar { height: 6px; border-radius: 999px; background: var(--bb-line); overflow: hidden; }
.besc-bb-ax .bar i { display: block; height: 100%; background: var(--bb-green); }
.besc-bb-ax .n { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--bb-ink); text-align: right; }
.besc-bb-ax .nt { grid-column: 2 / 4; font-size: 10px; color: var(--bb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.besc-bb-line { font-size: 12.5px; line-height: 1.5; color: var(--bb-ink-2); }
.besc-bb-line b { color: var(--bb-ink); }

@media (max-width: 640px) {
  .besc-pc-kpis { grid-template-columns: repeat(2, 1fr); }
  .besc-bb-ax { grid-template-columns: 76px 1fr 22px; }
}

/* Los comentarios viven DENTRO de la hoja, debajo del análisis: el mismo panel
   que pinta la pestaña Comentarios, no una segunda copia. */
.besc-sheet-coms { border-top: 1px solid var(--bb-line); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.besc-sheet-coms:empty { display: none; }

/* Sentimiento — filas de publicaciones ordenadas por VOLUMEN de negativos. */
.besc-srows { display: flex; flex-direction: column; gap: 6px; }
.besc-srow {
  display: grid; grid-template-columns: 56px 1fr 66px; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bb-line);
  background: var(--bb-surface); cursor: pointer;
  transition: border-color var(--bb-t-fast, .14s) ease, box-shadow var(--bb-t-fast, .14s) ease;
}
.besc-srow:hover { border-color: var(--bb-accent); box-shadow: var(--bb-sh-hairline); }
.besc-srow .n {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 700; text-align: right;
}
.besc-srow .n.neg { color: var(--bb-red); }
.besc-srow .l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.besc-srow .l b { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--bb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.besc-srow .l span { font-size: 11px; color: var(--bb-ink-3); }
.besc-srow .pctcol {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 700; text-align: right; color: var(--bb-ink);
}
.besc-srow .pctcol.na { font-family: inherit; font-size: 10.5px; font-weight: 500; color: var(--bb-ink-3); }

/* Escucha — los términos vigilados y lo que aparece con ellos. */
.besc-terms { display: flex; flex-wrap: wrap; gap: 8px; }
.besc-term {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px;
  border-radius: 8px; border: 1px solid var(--bb-line); background: var(--bb-surface);
  font-size: 12px; color: var(--bb-ink);
}
.besc-term b { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.besc-term button {
  border: 0; background: transparent; cursor: pointer; color: var(--bb-ink-3);
  font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 5px;
}
.besc-term button:hover { background: var(--bb-red-tint); color: var(--bb-red); }

.besc-hits { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.besc-hit {
  display: flex; gap: 12px; padding: 10px; overflow: hidden;
  border-radius: var(--bb-r-card, 12px); border: 1px solid var(--bb-line);
  background: var(--bb-surface); box-shadow: var(--bb-sh-hairline);
}
.besc-hit-media {
  flex: 0 0 88px; height: 88px; border-radius: 9px; overflow: hidden; background: var(--bb-inset);
  display: flex; align-items: center; justify-content: center;
}
.besc-hit-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.besc-hit-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.besc-hit-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.besc-hit-top .w { margin-left: auto; font-size: 10.5px; color: var(--bb-ink-3); }
.besc-hit-a { font-size: 12px; font-weight: 650; color: var(--bb-ink); }
.besc-hit-a .na { font-weight: 500; color: var(--bb-ink-3); cursor: help; }
.besc-hit-t { font-size: 12px; line-height: 1.4; color: var(--bb-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.besc-hit-n { display: flex; gap: 12px; align-items: center; font-size: 11px; color: var(--bb-ink-3); }
.besc-hit-n b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--bb-ink); }
.besc-hit-n a { margin-left: auto; color: var(--bb-accent); text-decoration: none; font-weight: 600; }

/* Una métrica que Meta RETIRÓ no es lo mismo que una que esta publicación no
   trae: la primera no va a volver, y decir "no lo reporta" manda a buscar un
   permiso que no existe. */
.besc-kpi.retirada .v { font-style: italic; }

/* Una miniatura que la CDN de Meta no sirvió (URL firmada caducada, o el
   referrer rechazado) se DICE. Un rectángulo gris se lee como "esta
   publicación no tiene creativo", que es una afirmación falsa sobre el post. */
.besc-pc-media.sinmedia::after,
.besc-hit-media.sinmedia::after {
  content: 'vista previa caducada';
  font-size: 10.5px; color: var(--bb-ink-3); text-align: center; padding: 0 8px;
}
.besc-sheet-media.sinmedia::after { content: 'vista previa caducada'; font-size: 11px; color: var(--bb-ink-3); }


/* ==========================================================================
   La página, más fácil de leer  (25 ago 2026)
   ==========================================================================
   Cuatro cosas, todas por la misma razón: la pantalla pedía leer en vez de
   mirar. Siete pestañas de solo texto, ocho controles en una fila, un chip
   verde permanente que no pide nada, y un detalle que empujaba la rejilla.
   ========================================================================== */

/* 1 · Pestañas con forma. El icono se reconoce antes que la palabra. */
.besc-seg button svg { width: 14px; height: 14px; max-width: none; flex: none; }
.besc-seg button { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 1180px) {
  /* Cuando no caben las siete, sobrevive el icono: una etiqueta cortada a la
     mitad no dice más que su forma. */
  .besc-head .besc-seg button span { display: none; }
  .besc-head .besc-seg button svg { width: 16px; height: 16px; }
}

/* 2 · La barra: qué miro (izquierda) · cómo lo miro (derecha). */
.besc-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.besc-bar-l, .besc-bar-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.besc-bar-r { margin-left: auto; }
.besc-chips-estado { margin-top: -2px; }

/* 3 · La tarjeta dice que se abre. Sin esto no hay nada que sugiera un clic. */
.besc-pc-open {
  position: absolute; inset: auto 10px 10px auto; padding: 4px 9px; border-radius: 7px;
  font-size: 10.5px; font-weight: 650; color: var(--bb-ink);
  background: color-mix(in srgb, var(--bb-surface) 92%, transparent);
  border: 1px solid var(--bb-line); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--bb-t-fast, .14s) ease, transform var(--bb-t-fast, .14s) ease;
  pointer-events: none;
}
.besc-pc:hover .besc-pc-open { opacity: 1; transform: translateY(0); }
/* En pantalla táctil no hay hover, así que ahí se queda visible. */
@media (hover: none) { .besc-pc-open { opacity: 1; transform: none; } }

/* 4 · El detalle entra por el lado y deja la rejilla quieta.
   z-index por debajo del panel de BBDrop (1000100) para que un <select> dentro
   del panel siga abriendo su lista por encima. */
.besc-drawer-bg {
  position: fixed; inset: 0; z-index: 900000; background: rgba(9, 14, 26, .38);
  backdrop-filter: blur(2px); animation: bescFade .16s ease both;
}
.besc-drawer {
  position: fixed; z-index: 900001; top: 0; right: 0; bottom: 0; width: min(760px, 94vw);
  background: var(--bb-surface); border-left: 1px solid var(--bb-line);
  box-shadow: -18px 0 48px rgba(9, 14, 26, .22);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  animation: bescSlide .2s var(--bb-ease-strong, cubic-bezier(.22,.61,.36,1)) both;
}
@keyframes bescFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes bescSlide { from { transform: translateX(22px); opacity: .4 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .besc-drawer, .besc-drawer-bg { animation: none; }
}
/* La cabecera del panel se queda fija: el botón de cerrar tiene que estar
   siempre a mano, y este panel es largo (métricas + análisis + comentarios). */
.besc-drawer .besc-sheet-h {
  position: sticky; top: 0; z-index: 2; background: var(--bb-surface);
  border-bottom: 1px solid var(--bb-line);
}
.besc-drawer .besc-sheet-b { flex-wrap: wrap; }
.besc-drawer .besc-sheet-media { flex: 1 1 240px; }
.besc-drawer .besc-sheet-side { flex: 1 1 280px; }
@media (max-width: 560px) {
  .besc-drawer { width: 100vw; }
}

/* El panel: tres números mandan, el resto se escanea. */
.besc-heroes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bb-line);
  border: 1px solid var(--bb-line); border-radius: 11px; overflow: hidden; }
.besc-hero { background: var(--bb-surface); padding: 13px 14px; display: flex; flex-direction: column; gap: 2px; cursor: help; }
.besc-hero .v { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 23px; font-weight: 700; line-height: 1.05; color: var(--bb-ink); }
.besc-hero .k { font-size: 10.5px; color: var(--bb-ink-3); line-height: 1.25; }
.besc-hero.na .v { font-size: 15px; font-family: inherit; font-weight: 500; color: var(--bb-ink-3); }

.besc-filas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 20px; }
.besc-fila { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--bb-line); font-size: 12px; }
.besc-fila .l { color: var(--bb-ink-3); }
.besc-fila .v { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--bb-ink); }
.besc-fila.na .v { font-family: inherit; font-weight: 500; font-size: 11px; color: var(--bb-ink-3); font-style: italic; }
.besc-btn.ghost { background: transparent; border-color: transparent; color: var(--bb-ink-3); }
.besc-btn.ghost:hover { border-color: var(--bb-line); color: var(--bb-ink); }

/* Buscador y "cargar más". */
.besc-busca { position: relative; display: flex; align-items: center; }
.besc-busca svg {
  position: absolute; left: 10px; width: 14px; height: 14px; max-width: none;
  color: var(--bb-ink-3); pointer-events: none;
}
.besc-busca .besc-in { padding-left: 30px; min-width: 230px; }
.besc-busca .besc-in::-webkit-search-cancel-button { cursor: pointer; }
.besc-mas {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  padding: 6px 0 2px; font-size: 11.5px; color: var(--bb-ink-3);
}


/* ==========================================================================
   EL PANEL DE UNA PUBLICACIÓN — ritmo tomado de la tarjeta "Conversion Rate"
   (categoría Statistics de collectui.com): un número héroe con su pill, y
   debajo filas etiqueta -> valor sin una sola caja. Colores y tipografía son
   los tokens --bb-* de siempre; de la referencia se toma el RITMO.
   ========================================================================== */
.besc-dh {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; background: var(--bb-surface); border-bottom: 1px solid var(--bb-line);
}
.besc-dh .besc-pc-red { position: static; }
.besc-dh-t { display: flex; flex-direction: column; font-size: 12.5px; font-weight: 650; color: var(--bb-ink); }
.besc-dh-t i { font-style: normal; font-size: 10.5px; font-weight: 400; color: var(--bb-ink-3); }
.besc-dh .besc-btn { margin-left: auto; }
.besc-x {
  width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid var(--bb-line); background: var(--bb-surface);
  color: var(--bb-ink-3); cursor: pointer; padding: 0;
}
.besc-x svg { width: 15px; height: 15px; max-width: none; }
.besc-x:hover { color: var(--bb-ink); border-color: var(--bb-line-strong); }

.besc-dbody { display: flex; gap: 20px; padding: 18px; flex-wrap: wrap; align-items: flex-start; }
.besc-dmedia {
  flex: 0 1 300px; min-width: 240px; margin: 0; border-radius: 12px; overflow: hidden;
  background: var(--bb-inset); border: 1px solid var(--bb-line);
  display: flex; align-items: center; justify-content: center; min-height: 200px;
}
.besc-dmedia img { width: 100%; height: auto; display: block; }
.besc-dcol { flex: 1 1 300px; min-width: 260px; display: flex; flex-direction: column; gap: 14px; }

/* El héroe: UN número manda. */
.besc-hd { display: flex; flex-direction: column; gap: 2px; }
.besc-hd-n { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.besc-hd-n .v {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 40px; font-weight: 700; line-height: 1; color: var(--bb-ink); letter-spacing: -.02em;
}
.besc-hd-k { font-size: 12px; color: var(--bb-ink-3); }
.besc-pill {
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 650;
  background: var(--bb-green-tint); color: var(--bb-green);
  border: 1px solid color-mix(in srgb, var(--bb-green) 30%, transparent);
}
.besc-pill.na { background: var(--bb-inset); color: var(--bb-ink-3); border-color: var(--bb-line); font-weight: 500; cursor: help; }

/* Las filas: sin marco y sin punteado. La punteada le metía ruido a cada
   renglón y hacía ver la lista como un formulario a medio llenar. */
.besc-rows { display: flex; flex-direction: column; }
.besc-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--bb-line); font-size: 12.5px;
}
.besc-row:last-child { border-bottom: 0; }
.besc-row .l { color: var(--bb-ink-2); }
.besc-row .v {
  margin-left: auto; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--bb-ink);
}
.besc-row.na .v { font-family: inherit; font-weight: 400; font-size: 11.5px; color: var(--bb-ink-3); font-style: italic; }

/* Secciones del panel. */
.besc-dsec { border-top: 1px solid var(--bb-line); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.besc-dsec-h { display: flex; align-items: center; gap: 10px; }
.besc-dsec-h h4 {
  margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--bb-ink-3);
}
.besc-dsec-h .besc-btn, .besc-dsec-h .besc-dsec-n { margin-left: auto; }
.besc-dsec-n {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700; color: var(--bb-ink-3);
}
/* El copy NO va en una cajita con scroll propio: un scroll dentro de un panel
   que ya scrollea recorta el texto sin que se note que hay más. Se clampa a
   cuatro líneas y se abre con un clic. */
.besc-dtxt {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--bb-ink-2); white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  cursor: pointer;
}
.besc-dtxt.abierto { display: block; -webkit-line-clamp: unset; }
.besc-dnota { font-size: 12.5px; color: var(--bb-ink-3); }
.besc-bb-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.besc-bb-cta span { font-size: 11.5px; color: var(--bb-ink-3); }
.besc-bb { display: flex; flex-direction: column; gap: 12px; padding: 0; border: 0; }
.besc-dlinks { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; }
.besc-dlinks a { color: var(--bb-accent); text-decoration: none; border-bottom: 1px solid transparent; }
.besc-dlinks a:hover { border-bottom-color: currentColor; }

/* La curva de permanencia. Referencia: "URL Performance Trend" (analytics-chart
   de collectui.com) — gridlines punteadas, ejes escasos, tooltip flotante. */
.besc-perm-n { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px;
  background: var(--bb-line); border: 1px solid var(--bb-line); border-radius: 11px; overflow: hidden; }
.besc-perm-n .besc-hero { background: var(--bb-surface); }
.besc-cv { position: relative; }
.besc-cv svg { width: 100%; height: 170px; display: block; overflow: visible; }
.besc-cv-grid { stroke: var(--bb-line); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.besc-cv-ax { font-family: 'JetBrains Mono', monospace; font-size: 8px; fill: var(--bb-ink-3); }
.besc-cv-mark { stroke: var(--bb-orange, #b26a00); stroke-width: 1; stroke-dasharray: 2 3; opacity: .55; vector-effect: non-scaling-stroke; }
.besc-cv-area { fill: color-mix(in srgb, var(--bb-green) 16%, transparent); }
.besc-cv-line { fill: none; stroke: var(--bb-green); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.besc-cv-hair { stroke: var(--bb-ink-3); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; transition: opacity .1s; }
.besc-cv-dot { fill: var(--bb-green); stroke: var(--bb-surface); stroke-width: 2; transition: opacity .1s; }
.besc-cv-tip {
  position: absolute; top: 2px; pointer-events: none; transition: opacity .12s;
  background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 9px;
  padding: 7px 10px; box-shadow: var(--bb-sh-raised); font-size: 11.5px; color: var(--bb-ink-2);
  display: flex; flex-direction: column; gap: 1px; min-width: 120px;
}
.besc-cv-tip b { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--bb-ink); }
.besc-cv-tip span { color: var(--bb-ink-3); font-size: 10.5px; }
.besc-srow { grid-template-columns: 46px auto 1fr 66px; }
.besc-srow-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; display: block; }
.besc-srow .l b.na { font-family: inherit; font-weight: 500; font-style: italic; color: var(--bb-ink-3); }
.besc-srow .l b { white-space: normal; font-family: inherit; font-weight: 600; font-size: 12px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Corregir el sentimiento de un comentario. Tres botones, no un <select>: la
   corrección es de un clic y tiene que verse cuál está puesto ahora. */
.besc-sent-pick { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--bb-inset); border: 1px solid var(--bb-line); }
.besc-sent-b {
  width: 26px; height: 22px; border: 0; background: transparent; cursor: pointer; border-radius: 6px;
  font-size: 12px; line-height: 1; color: var(--bb-ink-3); display: flex; align-items: center; justify-content: center;
}
.besc-sent-b:hover { background: var(--bb-surface); color: var(--bb-ink); }
.besc-sent-b.on.positivo { background: var(--bb-green-tint); color: var(--bb-green); }
.besc-sent-b.on.neutral { background: var(--bb-surface); color: var(--bb-ink); }
.besc-sent-b.on.negativo { background: var(--bb-red-tint); color: var(--bb-red); }
.besc-sent-b.auto { color: var(--bb-accent); }

/* ==========================================================================
   Esqueletos — la FORMA de lo que viene, no la palabra "cargando"
   ==========================================================================
   Un "Leyendo…" sobre el fondo de la página se lee como una pantalla en blanco
   que después salta. Esto ocupa el sitio con la silueta del contenido.
   ========================================================================== */
.besc-sk {
  background: linear-gradient(90deg, var(--bb-inset) 25%, color-mix(in srgb, var(--bb-line) 55%, var(--bb-inset)) 37%, var(--bb-inset) 63%);
  background-size: 400% 100%; border-radius: 7px; animation: bescSk 1.35s ease infinite;
}
@keyframes bescSk { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
@media (prefers-reduced-motion: reduce) { .besc-sk { animation: none; } }
.besc-sk-card {
  border-radius: var(--bb-r-card, 12px); border: 1px solid var(--bb-line); background: var(--bb-surface);
  overflow: hidden; display: flex; flex-direction: column;
}
.besc-sk .media, .besc-sk-card .media { border-radius: 0; }
.besc-sk-card .besc-sk.media { aspect-ratio: 4 / 5; }
.besc-sk-b { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.besc-sk.l1 { height: 11px; width: 92%; }
.besc-sk.l2 { height: 11px; width: 64%; }
.besc-sk.n { height: 22px; width: 54px; }
.besc-sk.kpi { height: 54px; flex: 1; }
.besc-sk.chart { height: 150px; width: 100%; margin-bottom: 10px; }
.besc-sk-row { display: flex; gap: 10px; padding-top: 9px; border-top: 1px solid var(--bb-line); }
.besc-sk-line { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--bb-line); }
.besc-sk-line .besc-sk.l1 { flex: 1; }

/* --- sello "en construcción" (Direct Marketing) ---------------------------
   Etiqueta gris, no una alerta: la página se puede leer, pero no es final.
   El SVG lleva width/height EXPLÍCITOS y max-width:none porque la regla
   `svg{max-width:100%}` de responsive.css resuelve a 0 para un ícono dentro
   de un contenedor flex — ya nos comió íconos dos veces. La grúa levanta el
   ladrillo, lo suelta sobre la pila y vuelve; con reduced-motion se queda
   quieta con el andamio armado (nunca en un frame vacío).                  */
.besc-wip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 9px 4px 7px; border-radius: 6px;
  border: 1px solid var(--bb-line);
  background: color-mix(in srgb, var(--bb-ink-3) 8%, transparent);
  color: var(--bb-ink-3);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  align-self: center;
}
.besc-wip-svg {
  width: 26px; height: 20px; max-width: none; flex: none;
  color: var(--bb-ink-3); overflow: visible;
}
.besc-wip-hook { animation: bescWipHook 2.6s cubic-bezier(.4,0,.5,1) infinite; }
.besc-wip-load { animation: bescWipLoad 2.6s linear infinite; }
.besc-wip-b2 { animation: bescWipStack 2.6s linear infinite; }
@keyframes bescWipHook {
  0%, 8%    { transform: translate(0, 0); }
  38%       { transform: translate(-2px, 8px); }
  58%       { transform: translate(-2px, 8px); }
  88%, 100% { transform: translate(0, 0); }
}
@keyframes bescWipLoad {
  0%, 55%   { opacity: 1; }
  58%, 100% { opacity: 0; }
}
@keyframes bescWipStack {
  0%, 55%   { opacity: 0; }
  58%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .besc-wip-hook, .besc-wip-load, .besc-wip-b2 { animation: none; }
  .besc-wip-load { opacity: 0; }
  .besc-wip-b2 { opacity: 1; }
}


/* ==========================================================================
   ESCUCHA — el contador de menciones, los filtros y la hoja de la mención
   ==========================================================================
   Referencia: el widget "total count" de la categoría statistics de
   collectui.com (@Nomandsign): etiqueta pequeña arriba, el total ENORME en
   tipografía tabular debajo, y una fila de barras por día donde pasar el ratón
   levanta una tarjeta con esa fecha y su número. Se toma su RITMO — qué manda
   y cuánto más grande es — no su paleta: aquí todo sale de los --bb-*.        */

.besc-lsum {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 18px 12px; border-radius: var(--bb-r-card, 12px);
  border: 1px solid var(--bb-line); background: var(--bb-surface);
  box-shadow: var(--bb-sh-hairline);
}
.besc-lsum-h { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.besc-lsum-tot { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.besc-lsum-tot .k {
  font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bb-ink-3);
}
/* El total es el número que manda: mismo salto de escala que la referencia
   (etiqueta ~11px, total ~44px). clamp() para que en móvil no rompa la fila. */
.besc-lsum-tot .v {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 5.2vw, 46px); font-weight: 700; line-height: 1.05;
  color: var(--bb-ink); letter-spacing: -.02em;
}
.besc-lsum-tot .w { font-size: 11.5px; color: var(--bb-ink-3); font-variant-numeric: tabular-nums; }
.besc-lsum-side { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto; }
.besc-lsum-m { display: flex; flex-direction: column; gap: 1px; cursor: help; }
.besc-lsum-m .v {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 19px; font-weight: 650; color: var(--bb-ink); line-height: 1.1;
}
.besc-lsum-m .k { font-size: 10.5px; color: var(--bb-ink-3); }

/* Las barras. Un día sin menciones se dibuja igual (2% de alto, apagado): el
   cero es un dato, y un hueco se leería como un día que nadie midió. */
.besc-lbars { display: flex; align-items: flex-end; gap: 2px; height: 76px; }
.besc-lbar { position: relative; flex: 1 1 0; min-width: 2px; height: 100%; display: flex; align-items: flex-end; }
.besc-lbar i {
  display: block; width: 100%; height: var(--h, 2%);
  background: color-mix(in srgb, var(--bb-accent) 34%, transparent);
  border-radius: 3px 3px 1px 1px; transition: background .12s ease;
}
.besc-lbar.cero i { background: var(--bb-inset); }
.besc-lbar.pico i { background: color-mix(in srgb, var(--bb-accent) 68%, transparent); }
.besc-lbar:hover i { background: var(--bb-accent); }
/* La tarjeta flotante del hover, como en la referencia: fecha arriba, número
   grande abajo. No lleva `title` porque el tooltip del sistema tarda 1s y aquí
   se pasa el ratón por 90 barras seguidas. */
.besc-lbar em {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 9px; border-radius: 8px; white-space: nowrap; font-style: normal;
  border: 1px solid var(--bb-line); background: var(--bb-surface);
  box-shadow: var(--bb-sh-card, 0 6px 18px rgba(13, 42, 94, .12));
  font-size: 10.5px; color: var(--bb-ink-3);
  opacity: 0; pointer-events: none; transition: opacity .1s ease; z-index: 3;
}
.besc-lbar em b {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 700; color: var(--bb-ink);
}
.besc-lbar:hover em { opacity: 1; }
/* La primera y la última barra sacarían su tarjeta fuera de la tarjeta madre. */
.besc-lbar:first-child em { left: 0; transform: none; }
.besc-lbar:last-child em { left: auto; right: 0; transform: none; }
.besc-lbars-ax {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 10.5px; color: var(--bb-ink-3); font-variant-numeric: tabular-nums;
}
.besc-lbars-ax .pico { color: var(--bb-ink-2); font-weight: 600; }

/* Los chips de fuente: filtran, y cada uno lleva su conteo de la VENTANA (no
   de lo ya filtrado, o apretar uno pondría los demás en cero). */
.besc-fsel { display: flex; flex-wrap: wrap; gap: 6px; }
.besc-fchip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 10px; border-radius: 8px; font: inherit; font-size: 11.5px;
  border: 1px solid var(--bb-line); background: var(--bb-surface); color: var(--bb-ink-2);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.besc-fchip u {
  text-decoration: none; font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--bb-ink);
}
.besc-fchip:hover { border-color: var(--bb-accent); }
.besc-fchip.on {
  border-color: var(--bb-accent); color: var(--bb-ink);
  background: color-mix(in srgb, var(--bb-accent) 12%, var(--bb-surface));
}

/* Un término vigilado también es un filtro, así que se comporta como uno. */
.besc-term { cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.besc-term:hover { border-color: var(--bb-accent); }
.besc-term.on {
  border-color: var(--bb-accent);
  background: color-mix(in srgb, var(--bb-accent) 12%, var(--bb-surface));
}
.besc-term u {
  text-decoration: none; font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700; color: var(--bb-ink-2);
}
/* El tipo se ve sin leer: el hashtag es lo de siempre, la prensa lleva el
   acento cálido, y una frase se marca punteada porque NO se busca en ningún
   lado — filtra lo que las otras fuentes ya trajeron. */
.besc-term.t-noticias { border-color: color-mix(in srgb, var(--bb-orange) 42%, var(--bb-line)); }
.besc-term.t-frase, .besc-term.t-palabra { border-style: dashed; }

.besc-cargando { font-size: 11px; color: var(--bb-ink-3); align-self: center; }
.besc-mas { font-size: 11.5px; color: var(--bb-ink-3); text-align: center; padding: 4px 0 2px; }

/* La tarjeta de mención abre la hoja: se comporta como botón y lo dice. */
.besc-hit { cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.besc-hit:hover { border-color: var(--bb-accent); box-shadow: var(--bb-sh-card, 0 6px 18px rgba(13, 42, 94, .10)); }
.besc-hit:focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 2px; }
.besc-hit-n .na { color: var(--bb-ink-3); font-style: italic; cursor: help; }
.besc-hit-a.big { font-size: 15px; }

/* El crecimiento desde que lo vimos. Verde arriba, rojo abajo, y un guión
   cuando no hay primer conteo que restar — nunca un cero. */
.besc-row .v b.up { color: var(--bb-green); }
.besc-row .v b.down { color: var(--bb-red); }
.besc-row .v code {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--bb-ink-3);
  word-break: break-all;
}
#bescHitSheet .besc-dtxt { max-height: none; }

@media (max-width: 720px) {
  .besc-lsum-side { margin-left: 0; gap: 16px; }
  .besc-lbars { height: 56px; }
}
/* Sin permalink no hay botón primario en la cabecera, y sin él la X se pega al
   título. Con botón, la X solo necesita su separación. */
#bescHitSheet .besc-dh .besc-x { margin-left: auto; }
#bescHitSheet .besc-dh .besc-btn + .besc-x { margin-left: 8px; }
/* Una frase vigilada puede ser larga ("Northbridge University" OR "NUC
   University"). El chip la corta y la deja entera en el title: un chip de 600px
   empuja los demás fuera de la fila. */
.besc-term b { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   EL LIBRO DE COMENTARIOS (pestaña Sentimiento)
   ==========================================================================
   Referencia de forma: "Account list UI for a customer operations product"
   (@DilanOktay80, categoría *table* de collectui.com) — columna de selección
   con su select-all, celda de identidad con miniatura cuadrada + dos líneas,
   estado en un pill de CONTORNO (no relleno), acciones a la derecha en botones
   fantasma, filas altas separadas por hairline y sin cebra. Se toma ese ritmo;
   la paleta es la de siempre (--bb-*).

   La cuarta franja del medidor de marca: lo DESCONOCIDO. Va en ámbar y no en
   gris — el gris ya es "neutral medido", y confundir los dos en la barra es
   exactamente lo que esta pantalla vino a arreglar. */
.besc-needle-bar i.desc { background: var(--bb-gold); }
.besc-needle-legend span.desc b { color: var(--bb-gold-ink); }

/* Lo aprendido: una franja de chips, no una tarjeta. Es contexto de la pantalla,
   no una respuesta que compita con el medidor. */
/* `align-items: flex-start` no es cosmética: sin ella, en una columna flex el
   chip del estado vacío se estira a todo el ancho y se lee como un campo de
   texto vacío en medio de la página. */
.besc-apr { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.besc-aprt { display: flex; flex-wrap: wrap; gap: 6px; }
.besc-apre {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; padding: 3px 8px;
  border-radius: 6px; border: 1px solid var(--bb-line); color: var(--bb-ink-2);
  background: var(--bb-inset);
}
.besc-apre.positivo { border-color: var(--bb-green); color: var(--bb-green); }
.besc-apre.negativo { border-color: var(--bb-red); color: var(--bb-red); }

/* Los montones. Cada botón lleva SU conteo: una pestaña sin número obliga a
   entrar para saber si hay algo, y el número es la mitad de la información. */
.besc-lbuckets { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.besc-lbuckets button {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 12px; border-radius: var(--bb-r-control, 8px);
  border: 1px solid var(--bb-line); background: var(--bb-surface); color: var(--bb-ink-2);
  transition: background var(--bb-t-fast, .14s) ease, border-color var(--bb-t-fast, .14s) ease;
}
.besc-lbuckets button:hover { background: var(--bb-hover); border-color: var(--bb-line-strong); }
.besc-lbuckets button .n {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--bb-ink-3);
}
.besc-lbuckets button.on { background: var(--bb-accent); border-color: var(--bb-accent); color: #fff; }
.besc-lbuckets button.on .n { color: rgba(255, 255, 255, .82); }
/* El montón que pide acción se distingue en reposo, no solo al estar activo. */
.besc-lbuckets button.desconocido:not(.on) { border-color: var(--bb-gold); color: var(--bb-gold-ink); }
.besc-lbuckets button.desconocido:not(.on) .n { color: var(--bb-gold-ink); }
.besc-lbuckets button.positivo:not(.on) .n { color: var(--bb-green); }
.besc-lbuckets button.negativo:not(.on) .n { color: var(--bb-red); }

.besc-lbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.besc-lbar-l, .besc-lbar-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.besc-lbar-r { margin-left: auto; }
.besc-lbar .besc-in[type="search"] { min-width: 240px; }
.besc-btn.on { background: var(--bb-accent); border-color: var(--bb-accent); color: #fff; }

/* La barra de tandas aparece SOLO con selección. */
.besc-ltanda {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 10px;
  border: 1px solid var(--bb-accent); border-radius: var(--bb-r-card, 12px);
  background: var(--bb-accent-tint, var(--bb-inset));
}
.besc-ltanda .c { font-size: 12px; color: var(--bb-ink-2); }
.besc-ltanda .c b { font-family: 'JetBrains Mono', monospace; color: var(--bb-ink); }
/* TRAMPA MEDIDA: `.besc-sent-b` es un botón de ICONO — `width: 26px` fijo. En
   la barra de tandas los botones llevan PALABRA ("＋ Positivo"), y con el ancho
   heredado salían encimados y cortados: "Posit Neut lega Auto". Aquí el ancho es
   del contenido, y el texto no se parte. */
.besc-ltanda .besc-sent-b {
  width: auto; height: auto; padding: 5px 10px; font-size: 11.5px;
  font-weight: 600; white-space: nowrap; gap: 4px;
}
.besc-ltanda .besc-sent-pick { flex-wrap: wrap; gap: 3px; }
.besc-ltanda .besc-btn { margin-left: auto; }

.besc-lrows { display: flex; flex-direction: column; }
.besc-lrow {
  display: grid; grid-template-columns: 26px 300px minmax(0, 1fr) auto;
  gap: 12px; align-items: start; padding: 12px 4px;
  border-top: 1px solid var(--bb-line);
}
.besc-lrow:last-child { border-bottom: 1px solid var(--bb-line); }
.besc-lrow:hover { background: var(--bb-hover); }
.besc-lrow.sel { background: var(--bb-accent-tint, var(--bb-inset)); }
.besc-lrow.done { opacity: .62; }
.besc-lrow.hid .besc-ltxt { text-decoration: line-through; }
/* Un crítico se ve antes de leerse: filo rojo a la izquierda. */
.besc-lrow.crit { box-shadow: inset 3px 0 0 var(--bb-red); }
.besc-lrow.lead:not(.crit) { box-shadow: inset 3px 0 0 var(--bb-green); }
.besc-lrow.desconocido:not(.crit):not(.lead) { box-shadow: inset 3px 0 0 var(--bb-gold); }

.besc-lck { display: flex; align-items: center; justify-content: center; padding-top: 2px; cursor: pointer; }
.besc-lck input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--bb-accent); }

/* La celda de la publicación: miniatura cuadrada + dos líneas. Es la respuesta a
   "¿de qué post es este comentario?", así que va antes que el comentario. */
.besc-lpost {
  display: flex; gap: 8px; align-items: center; min-width: 0; cursor: pointer;
  border-radius: 8px; padding: 2px;
}
.besc-lpost:hover { background: var(--bb-surface); }
/* EL CREATIVO A 96px. A 40 era un icono de color: no se distinguía una foto de
   graduación de un anuncio de precios, que es justo lo que hay que saber para
   leer un comentario. La fila ya medía 100+ por el texto, así que la miniatura
   grande NO cuesta una sola línea de alto. */
.besc-lpost-m {
  position: relative; width: 96px; height: 96px; flex: none; display: block;
  border-radius: 10px; overflow: hidden;
  background: var(--bb-inset); border: 1px solid var(--bb-line);
}
.besc-lpost-m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.besc-lpost-m.roto img { display: none; }
.besc-lpost-noimg {
  width: 96px; height: 96px; flex: none; border-radius: 10px;
  background: var(--bb-inset); border: 1px dashed var(--bb-line-strong);
}
/* La lupa dice que se abre, y solo aparece al pasar por encima — en táctil, donde
   no hay hover, se queda visible al 55%. */
.besc-lpost-zoom {
  position: absolute; inset: auto 6px 6px auto; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(13, 42, 94, .82); color: #fff;
  opacity: 0; transition: opacity var(--bb-t-fast, .14s) ease;
}
.besc-lpost-zoom svg { width: 13px; height: 13px; }
.besc-lpost.conmedia:hover .besc-lpost-zoom { opacity: 1; }
@media (hover: none) { .besc-lpost-zoom { opacity: .55; } }
.besc-lpost .l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.besc-lpost .l b {
  font-size: 11.5px; color: var(--bb-ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.besc-lpost .l b.na { color: var(--bb-ink-3); font-weight: 500; font-style: italic; }
.besc-lpost .l span { font-size: 10.5px; color: var(--bb-ink-3); }

.besc-lcom { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.besc-lwho { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.besc-lwho .a { font-size: 12px; font-weight: 600; color: var(--bb-ink); }
.besc-lwho .w { font-size: 11px; color: var(--bb-ink-3); }
/* El comentario se CLAMPA a cuatro líneas y se abre con un clic. Un comentario
   de 300 palabras en una lista de 60 hace que las otras 59 dejen de existir, y
   un scroll propio dentro de una página que ya scrollea recorta el texto sin que
   se note que hay más. Misma decisión que el copy de una publicación. */
.besc-ltxt {
  font-size: 13px; line-height: 1.45; color: var(--bb-ink-2); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  cursor: pointer;
}
.besc-ltxt.abierto { -webkit-line-clamp: unset; overflow: visible; cursor: default; }

.besc-lact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* Pill de CONTORNO, como la referencia: un pill relleno por fila convierte la
   lista en un semáforo y compite con el filo de color. */
.besc-pill {
  font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--bb-line-strong); color: var(--bb-ink-3); white-space: nowrap;
}
.besc-pill.positivo { border-color: var(--bb-green); color: var(--bb-green); }
.besc-pill.negativo { border-color: var(--bb-red); color: var(--bb-red); }
.besc-pill.desconocido { border-color: var(--bb-gold); color: var(--bb-gold-ink); }

/* Agrupado por publicación: el encabezado es la publicación y las filas cuelgan
   de él sin repetir la miniatura en cada una. */
.besc-lgrupo { margin-bottom: 14px; }
.besc-lgh {
  display: flex; gap: 10px; align-items: center; cursor: pointer;
  padding: 8px 10px; border-radius: var(--bb-r-card, 12px);
  background: var(--bb-inset); border: 1px solid var(--bb-line);
}
.besc-lgh:hover { border-color: var(--bb-accent); }
/* En el encabezado de un grupo el creativo es de UNA publicación con veinte
   comentarios debajo: ahí manda, y va a 120px. */
.besc-lgh-m {
  position: relative; width: 120px; height: 120px; flex: none; display: block;
  border-radius: 10px; overflow: hidden;
  background: var(--bb-surface); border: 1px solid var(--bb-line);
}
.besc-lgh-m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.besc-lgh-m.roto img { display: none; }
.besc-lgh-noimg {
  width: 120px; height: 120px; flex: none; border-radius: 10px;
  background: var(--bb-surface); border: 1px dashed var(--bb-line-strong);
}
.besc-lgh:hover .besc-lpost-zoom { opacity: 1; }
.besc-lgh .l b {
  white-space: normal; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.besc-lgh .l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.besc-lgh .l b { font-size: 12.5px; color: var(--bb-ink); }
.besc-lgh .l span { font-size: 10.5px; color: var(--bb-ink-3); }
.besc-lgrupo .besc-lrow { grid-template-columns: 26px minmax(0, 1fr) auto; }

/* Bajo 1100px la columna de la publicación se va debajo del comentario en vez de
   estrujarse: 210px de miniatura + texto en 300px de ancho no se lee. */
/* Una fila ya clasificada se queda en su sitio a propósito (sacarla movería
   todo lo de abajo y el próximo clic caería en el comentario equivocado), así
   que se marca en vez de desaparecer. */
.besc-lrow.movida { background: var(--bb-green-tint); }
.besc-lrow.movida .besc-ltxt { opacity: .72; }

@media (max-width: 1240px) {
  .besc-lrow { grid-template-columns: 26px 220px minmax(0, 1fr); }
  .besc-lact { grid-column: 3; justify-content: flex-start; margin-top: 6px; }
}
@media (max-width: 1100px) {
  .besc-lrow { grid-template-columns: 26px minmax(0, 1fr); }
  .besc-lpost { grid-column: 2; order: 3; }
  .besc-lact { grid-column: 2; order: 4; justify-content: flex-start; }
  .besc-lcom { grid-column: 2; order: 2; }
  .besc-lgrupo .besc-lrow { grid-template-columns: 26px minmax(0, 1fr); }
}

/* ==========================================================================
   EL VISOR DEL CREATIVO
   ==========================================================================
   Referencia de forma: el lightbox de "Stacked dialogs" (@oguzyagizkara,
   collectui.com) — el fondo se apaga, la MEDIA manda el espacio, y los datos van
   en una columna estrecha al lado; nunca una tarjeta encima de la imagen, que es
   como se tapa justo la parte del creativo que se quería ver.

   Miguel: "necesito poder ver el creativo, this is tiny as shit". El visor es la
   respuesta: la pieza a tamaño de pantalla, y al lado lo que la gente le
   escribió. */
.besc-visor-bg {
  position: fixed; inset: 0; z-index: 900010;
  background: rgba(8, 18, 38, .78); backdrop-filter: blur(3px);
  animation: bbVisorIn .16s ease;
}
.besc-visor {
  position: fixed; inset: 3vh 3vw; z-index: 900011;
  display: flex; gap: 0; overflow: hidden;
  border-radius: 16px; background: var(--bb-surface);
  box-shadow: 0 30px 80px rgba(8, 18, 38, .45);
  animation: bbVisorIn .18s ease;
}
@keyframes bbVisorIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .besc-visor, .besc-visor-bg { animation: none; }
}
/* La media: todo el espacio que sobre, centrada, sin recortar. `contain` y no
   `cover` — recortar un creativo para que llene la caja esconde justo el texto
   quemado en la pieza, que es lo que Compliance mira. */
.besc-visor-m {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center;
  background: #0b1526; padding: 18px;
}
.besc-visor-m img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.besc-visor-m.roto img { display: none; }
.besc-visor-sin {
  max-width: 380px; text-align: center; font-size: 13px; line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}
.besc-visor-side {
  flex: 0 0 380px; display: flex; flex-direction: column; min-width: 0;
  border-left: 1px solid var(--bb-line); background: var(--bb-surface);
}
.besc-visor-h {
  display: flex; gap: 8px; align-items: center; padding: 14px 16px;
  border-bottom: 1px solid var(--bb-line);
}
.besc-visor-red {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; background: var(--bb-inset); color: var(--bb-ink-2);
}
.besc-visor-w { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--bb-ink-3); }
.besc-visor-h .besc-x {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font-size: 15px; color: var(--bb-ink-3); padding: 2px 6px; border-radius: 6px;
}
.besc-visor-h .besc-x:hover { background: var(--bb-hover); color: var(--bb-ink); }
.besc-visor-cap {
  padding: 14px 16px; font-size: 13px; line-height: 1.5; color: var(--bb-ink-2);
  border-bottom: 1px solid var(--bb-line); max-height: 26vh; overflow: auto;
}
.besc-visor-n { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px 0; }
.besc-visor-n .besc-pill b { font-family: 'JetBrains Mono', monospace; }
.besc-visor-vacio { padding: 10px 16px; font-size: 11.5px; color: var(--bb-ink-3); }
.besc-visor-acts { display: flex; gap: 8px; padding: 12px 16px; flex-wrap: wrap; }
.besc-visor-acts .besc-btn { text-decoration: none; }
/* La lista de comentarios de ESA publicación. Sin picker: clasificar se hace en
   la fila, y dos pickers para el mismo comentario son dos caminos para la misma
   escritura. */
.besc-visor-lista { flex: 1 1 auto; overflow: auto; padding: 4px 16px 16px; }
.besc-vc { display: flex; gap: 8px; padding: 9px 0; border-top: 1px solid var(--bb-line); }
.besc-vc .b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.besc-vc .w { font-size: 10.5px; color: var(--bb-ink-3); }
.besc-vc .w b { color: var(--bb-ink-2); font-size: 11px; }
.besc-vc .t { font-size: 12.5px; line-height: 1.4; color: var(--bb-ink-2); overflow-wrap: anywhere; }
.besc-com-dot.desconocido { background: var(--bb-gold); }

/* Bajo 900px la columna de datos se va debajo: 380px de panel sobre una pantalla
   de 800 no deja creativo que mirar, que es lo contrario de para qué existe. */
@media (max-width: 900px) {
  .besc-visor { inset: 2vh 2vw; flex-direction: column; }
  .besc-visor-m { flex: 0 0 46%; padding: 10px; }
  .besc-visor-side { flex: 1 1 auto; border-left: 0; border-top: 1px solid var(--bb-line); }
  .besc-visor-cap { max-height: none; }
}

/* EL AMENÓMETRO. Lo pidió cómico, así que es lo único de esta página que se
   permite un chiste — pero el número es real (la señal `amen` sumada en la base)
   y el nivel desaparece si no hay piso para dar por ciento. Va DENTRO de la
   tarjeta del medidor, en su propia línea: como tarjeta aparte competiría con el
   neto de marca, que es lo que se lleva a una reunión. */
/* El amenómetro es una tercera columna dentro de la tarjeta del medidor, así que
   la aguja necesita piso propio: sin él, meterlo ahí empujaba "negativo 1 · 2.1%"
   a una segunda línea y la leyenda de cuatro tramos se partía. */
/* Acotado con :has al medidor QUE LLEVA amenómetro. El mismo `.besc-meter` se
   pinta dentro del panel de una publicación, que mide ~380px: un min-width de
   430 ahí lo desbordaría. Si un navegador no soporta :has, lo único que pasa es
   que la leyenda se parte — que es el estado de antes, no un fallo. */
.besc-meter:has(.besc-amen) { flex-wrap: wrap; }
.besc-meter:has(.besc-amen) .besc-needle { min-width: 430px; }
.besc-amen {
  display: inline-flex; align-items: baseline; gap: 7px; margin-top: 10px;
  flex: none; align-self: center;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bb-gold-tint); border: 1px solid var(--bb-gold);
  cursor: help;
}
.besc-amen-i { font-size: 14px; line-height: 1; }
.besc-amen-v {
  font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--bb-gold-ink); line-height: 1;
}
.besc-amen-k { font-size: 11.5px; color: var(--bb-ink-2); }
.besc-amen-n {
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--bb-gold-ink); border-left: 1px solid var(--bb-gold); padding-left: 8px;
}