/* BBDmCompose — «Crear». Only what Preparar (dmprep.css) and the catalog
   defaults (bbui.css) do not already draw. Tokens only: --bb-*, --bb-mono.
   Reference: CollectUI 162524b4 (token strip · prompt · one control row). */

.dmc { display: flex; flex-direction: column; gap: 14px; }
.dmc-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dmc-cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

.besc-kpi input.dmc-num {
  order: 2; height: auto; box-shadow: none; width: 100%; box-sizing: border-box; margin-top: 2px;
  padding: 3px 6px; font-family: var(--bb-mono); font-size: 22px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--bb-ink);
  background: transparent; border: 1px solid transparent; border-radius: 6px;
}
.besc-kpi input.dmc-num:focus { outline: none; border-color: var(--bb-accent); background: var(--bb-surface); }
.besc-kpi input.dmc-num:hover { border-color: var(--bb-line); }
.dmc-ta { min-height: 150px; border-radius: 10px; }

/* A field the audience does NOT carry: outlined, so the row still offers it. */
.dmp-field.off { background: transparent; border-style: dashed; color: var(--bb-ink-3); }
.dmp-field.on { border-color: color-mix(in srgb, var(--bb-accent) 45%, var(--bb-line)); }

.dmc-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dmc-act { cursor: pointer; }

/* EL MEDIDOR — the catalog rail (.bbb-goal) with the goal at 100. The fill colour
   is the level; its width transition is the lever moving as the text improves. */
.dmc-meter { gap: 12px; }
.dmc-m-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.dmc-m-score { display: flex; flex-direction: column; align-items: center; min-width: 88px; }
.dmc-m-score b { font-family: var(--bb-mono); font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.dmc-m-score .k { margin-top: 4px; font-size: 10px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-ink-3); }
.dmc-m-rails { display: flex; flex-direction: column; gap: 2px; }
.dmc-rail-lg { height: 16px; }
.dmc-m-row { grid-template-columns: 110px minmax(0, 1fr) 64px; }
.dmc-m-row { padding: 4px 2px; }
.dmc-m-act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dmc-rail[data-nivel="lo"] > i   { background: var(--bb-red); }
.dmc-rail[data-nivel="mid"] > i  { background: var(--bb-orange); }
.dmc-rail[data-nivel="hi"] > i   { background: var(--bbb-fill, var(--bb-accent)); }   /* --bbb-fill lives on .bbb, not .bbb-goal: unset here, the 80-99 bar painted transparent */
.dmc-rail[data-nivel="full"] > i { background: var(--bb-green); }
.dmc-rail[data-nivel="lock"] > i { background: repeating-linear-gradient(135deg, var(--bb-red) 0 6px, color-mix(in srgb, var(--bb-red) 60%, transparent) 6px 12px); }
[data-nivel="lo"] > b, b[data-nivel="lo"], [data-nivel="lock"] > b, b[data-nivel="lock"] { color: var(--bb-red); }
[data-nivel="mid"] > b, b[data-nivel="mid"] { color: var(--bb-orange); }
[data-nivel="full"] > b, b[data-nivel="full"] { color: var(--bb-green); }
.dmc-crit { display: flex; flex-wrap: wrap; gap: 6px; }
.dmc-c {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
  font-size: 11.5px; border: 1px solid var(--bb-line); border-radius: 6px; background: var(--bb-surface); color: var(--bb-ink-2);
}
.dmc-c i { font-style: normal; font-size: 10.5px; color: var(--bb-ink-3); }
.dmc-c[data-e="ok"]   { border-color: color-mix(in srgb, var(--bb-green) 40%, var(--bb-line)); background: var(--bb-green-tint); }
.dmc-c[data-e="ok"] b::before { content: '✓ '; color: var(--bb-green); }
.dmc-c[data-e="falla"] { border-color: color-mix(in srgb, var(--bb-orange) 45%, var(--bb-line)); background: var(--bb-orange-tint); }
.dmc-c[data-e="lock"] { border-color: color-mix(in srgb, var(--bb-red) 45%, var(--bb-line)); background: var(--bb-red-tint); color: var(--bb-ink); }
.dmc-c[data-e="na"] { opacity: .5; }
.dmc-c-ia b { font-family: var(--bb-mono); font-size: 10.5px; letter-spacing: .04em; }
.dmc-c-ia[data-e] b::before { content: none; }
.dmc-opt { display: flex; flex-direction: column; gap: 9px; padding: 12px; border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); background: var(--bb-inset); }
.dmc-opt-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dmc-opt-n { font-family: var(--bb-mono); font-size: 20px; }
.dmc-opt-n s { color: var(--bb-ink-3); }
.dmc-opt-phone { min-height: 0; }
.dmc-opt-cambios { margin: 0; padding-left: 18px; font-size: 12px; color: var(--bb-ink-2); }
.dmc-var-m { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.dmc-var-m b { font-family: var(--bb-mono); font-size: 18px; font-weight: 700; }

/* Escribir con IA — context strip, prompt, control row */
.dmc-ctx { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dmc-brief { min-height: 76px; border-radius: 10px; }
.dmc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dmc-paso { font-size: 12px; color: var(--bb-ink-3); }

.dmc-vars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.dmc-var {
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px; border: 1px solid var(--bb-line); border-radius: var(--bb-r-card);
  background: var(--bb-surface);
}
.dmc-var.is-bad { border-color: color-mix(in srgb, var(--bb-red) 40%, var(--bb-line)); }
.dmc-ang {
  font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-ink-3);
}
.dmc-var-phone { min-height: 0; }
.dmc-par { font-size: 12px; color: var(--bb-ink-2); line-height: 1.45; }
.dmc-par .k { font-size: 10px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-ink-3); }
.dmc-par .num { display: block; color: var(--bb-ink-3); }
.dmc-foot { display: flex; gap: 6px; margin-top: 8px; }

/* Borradores */
.dmc-drafts .dmp-h .besc-btn { margin-left: 6px; }
.dmc-dlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.dmc-d {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 10px 28px 10px 12px; cursor: pointer;
  border: 1px solid var(--bb-line); border-radius: 10px; background: var(--bb-surface);
}
.dmc-d:hover { border-color: color-mix(in srgb, var(--bb-accent) 40%, var(--bb-line)); }
.dmc-d.on { border-color: var(--bb-accent); box-shadow: 0 0 0 1px var(--bb-accent) inset; }
.dmc-d b { font-size: 13px; }
.dmc-d .besc-chip { align-self: flex-start; }
.dmc-d .num { font-size: 12px; color: var(--bb-ink-2); }
.dmc-d-t { font-size: 12px; color: var(--bb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmc-d-m { font-size: 11px; color: var(--bb-ink-3); }
.dmc-x {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 0;
  font-size: 15px; line-height: 20px; color: var(--bb-ink-3);
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
}
.dmc-x:hover { background: var(--bb-hover); color: var(--bb-red); }

/* LOS DOS TELÉFONOS — iPhone 18 Pro (Messages, iOS 26) + Galaxy S26 Ultra (Google
   Messages). Screens are drawn at their REAL logical size (402×874 pt / 384×832 dp)
   and shrunk with `zoom: var(--dmc-z)` (set by ajustarDispositivos), so a line
   wraps here where it wraps on the phone. Colours below are the DEVICE's — a phone
   screen does not follow BridgeBI's dark mode — so they are --dev-* locals, never
   --bb-*. The fonts are the platforms' own (SF on iOS, Google Sans/Roboto on
   Android) for the same reason: the mockup has to measure like the device. */
.dmc-devs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dmc-devs-idle { grid-column: 1 / -1; }
.dmc-dev-slot { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.dmc-dev { zoom: var(--dmc-z, .5); flex: none; }
.dmc-dev svg { display: block; fill: currentColor; max-width: none; }

/* ---- iPhone 18 Pro ---------------------------------------------------- */
.dmc-ios {
  --dev-ink: #000; --dev-ink-2: #8a8a8e; --dev-bub: #e9e9eb; --dev-link: #0a7aff;
  width: 402px; height: 874px; padding: 11px; border-radius: 66px;
  background: linear-gradient(145deg, #c9c4bb, #8f8a82 45%, #d6d1c8);
  box-shadow: inset 0 0 0 2px #6f6a63, 0 18px 40px -18px rgba(13, 42, 94, .45);
  box-sizing: content-box;
}
.dmc-ios-scr {
  position: relative; width: 402px; height: 874px; border-radius: 55px; overflow: hidden;
  background: #fff; color: var(--dev-ink); display: flex; flex-direction: column;
  box-shadow: 0 0 0 5px #0b0b0c;
  font-family: -apple-system, "SF Pro Text", "SF Pro", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.dmc-ios-bar { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 44px; box-sizing: border-box; flex: none; }
.dmc-ios-bar .t { font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.dmc-ios-bar .island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; }
.dmc-ios-bar .ic { display: flex; align-items: center; gap: 6px; }
.dmc-ios-bar .ic svg:nth-child(1) { width: 18px; } .dmc-ios-bar .ic svg:nth-child(2) { width: 16px; } .dmc-ios-bar .ic svg:nth-child(3) { width: 27px; }
.dmc-ios .glass {
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px);
}
.dmc-ios .round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.dmc-ios-nav { display: flex; align-items: flex-start; justify-content: space-between; padding: 4px 16px 8px; flex: none; }
.dmc-ios-nav .round:first-child svg { width: 11px; }
.dmc-ios-nav .round:last-child svg { width: 24px; }
.dmc-ios-nav .who { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.dmc-ios-nav .av { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(180deg, #a5abb8, #858b98); display: grid; place-items: center; overflow: hidden; }
.dmc-ios-nav .av svg { width: 56px; height: 56px; }
.dmc-ios-nav .pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 16px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .8); box-shadow: 0 4px 14px rgba(0, 0, 0, .10); white-space: nowrap; max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.dmc-ios-nav .pill svg { width: 6px; color: var(--dev-ink-2); flex: none; }
.dmc-ios-msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 0 16px 10px; scrollbar-width: none; }
.dmc-ios-msgs::-webkit-scrollbar { display: none; }
.dmc-ios-msgs .stamp { margin-top: auto; text-align: center; font-size: 12px; line-height: 1.35; color: var(--dev-ink-2); padding: 8px 0 10px; }
.dmc-ios-msgs .stamp b { font-weight: 600; }
.dmc-ios-msgs .bub {
  position: relative; align-self: flex-start; max-width: 264px; padding: 7px 13px 8px;
  border-radius: 19px; background: var(--dev-bub); font-size: 17px; line-height: 22px;
  letter-spacing: -.25px; overflow-wrap: anywhere; margin-left: 2px;
}
/* The tail: a bubble-coloured curl masked by a screen-coloured one. */
.dmc-ios-msgs .bub::before, .dmc-ios-msgs .bub::after { content: ''; position: absolute; bottom: 0; height: 20px; }
.dmc-ios-msgs .bub::before { left: -7px; width: 20px; background: var(--dev-bub); border-bottom-right-radius: 16px 14px; }
.dmc-ios-msgs .bub::after { left: -26px; width: 26px; background: #fff; border-bottom-right-radius: 10px; }
.dmc-ios .dmc-dev-link { color: var(--dev-link); text-decoration: underline; text-underline-offset: 2px; }
.dmc-ios-in { display: flex; align-items: center; gap: 8px; padding: 8px 14px 38px; flex: none; }
.dmc-ios-in .round svg { width: 18px; color: #3c3c43; }
.dmc-ios-in .field { flex: 1; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 16px; font-size: 17px; color: #b3b3b8; }
.dmc-ios-in .mic svg { width: 20px; color: #8a8a8e; }
.dmc-ios-home { position: absolute; left: 50%; bottom: 9px; width: 140px; height: 5px; margin-left: -70px; border-radius: 3px; background: #000; }

/* ---- Galaxy S26 Ultra ------------------------------------------------- */
.dmc-and {
  --dev-ink: #1f1f1f; --dev-ink-2: #5e5e62; --dev-bub: #e9eef6; --dev-surf: #f8f9fc; --dev-acc: #0b57d0;
  width: 384px; height: 832px; padding: 8px; border-radius: 40px;
  background: linear-gradient(160deg, #3a3d42, #1d1f22 55%, #45484e);
  box-shadow: inset 0 0 0 1.5px #5b5f66, 0 18px 40px -18px rgba(13, 42, 94, .45);
  box-sizing: content-box;
}
.dmc-and-scr {
  position: relative; width: 384px; height: 832px; border-radius: 33px; overflow: hidden;
  background: var(--dev-surf); color: var(--dev-ink); display: flex; flex-direction: column;
  box-shadow: 0 0 0 3px #050505;
  font-family: "Google Sans Text", "Google Sans", Roboto, "Segoe UI", Arial, sans-serif;
}
.dmc-and-bar { height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 4px 22px 0 26px; box-sizing: border-box; flex: none; font-size: 14px; }
.dmc-and-bar .t { font-weight: 500; }
.dmc-and-bar .cam { position: absolute; left: 50%; top: 12px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #050505; box-shadow: 0 0 0 2px #1b1b1d; }
.dmc-and-bar .ic { display: flex; align-items: center; gap: 5px; }
.dmc-and-bar .ic svg { width: 13px; height: 13px; } .dmc-and-bar .ic svg:nth-child(3) { width: 8px; }
.dmc-and-bar .ic b { font-weight: 500; font-size: 13px; }
.dmc-and-nav { display: flex; align-items: center; gap: 6px; padding: 6px 8px 10px 6px; flex: none; }
.dmc-and-nav .btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--dev-ink); flex: none; }
.dmc-and-nav .btn svg { width: 24px; }
.dmc-and .av { width: 40px; height: 40px; border-radius: 50%; background: #7a8cb0; color: #fff; display: grid; place-items: center; font-size: 18px; font-weight: 500; overflow: hidden; flex: none; }
.dmc-and .av svg { width: 40px; height: 40px; }
.dmc-and .av.sm { width: 32px; height: 32px; font-size: 14px; } .dmc-and .av.sm svg { width: 32px; height: 32px; }
.dmc-and-nav .who { flex: 1; min-width: 0; font-size: 20px; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; }
.dmc-and-msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 0 14px 12px 12px; scrollbar-width: none; }
.dmc-and-msgs::-webkit-scrollbar { display: none; }
.dmc-and-msgs .stamp { margin-top: auto; text-align: center; font-size: 12px; line-height: 1.45; color: var(--dev-ink-2); padding: 8px 0 14px; }
.dmc-and-msgs .row { display: flex; align-items: flex-end; gap: 8px; }
.dmc-and-msgs .bub {
  max-width: 262px; padding: 11px 16px 12px; border-radius: 22px 22px 22px 6px;
  background: var(--dev-bub); font-size: 16px; line-height: 22px; letter-spacing: .1px; overflow-wrap: anywhere;
}
.dmc-and .dmc-dev-link { text-decoration: underline; text-underline-offset: 2px; }
.dmc-and-in { display: flex; align-items: center; gap: 8px; padding: 8px 10px 30px; flex: none; }
.dmc-and-in .plus { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--dev-ink); flex: none; }
.dmc-and-in .plus svg { width: 22px; }
.dmc-and-in .field { flex: 1; height: 48px; border-radius: 24px; background: #e9eef6; display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--dev-ink-2); }
.dmc-and-in .field svg { width: 22px; flex: none; }
.dmc-and-in .field .ph { flex: 1; font-size: 16px; }
.dmc-and-in .send { width: 48px; height: 48px; border-radius: 50%; background: #d3e3fd; color: #041e49; display: grid; place-items: center; flex: none; }
.dmc-and-in .send svg { width: 22px; }
.dmc-and-home { position: absolute; left: 50%; bottom: 10px; width: 108px; height: 4px; margin-left: -54px; border-radius: 2px; background: #1f1f1f; opacity: .85; }

.dmc-dev-tok { font-style: normal; outline: 1.5px dashed #b26a00; outline-offset: 1px; border-radius: 4px; background: #fff3dc; }

@media (max-width: 1040px) {
  .dmc-cols { grid-template-columns: minmax(0, 1fr); }
  .dmc-vars { grid-template-columns: minmax(0, 1fr); }
  .dmc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .dmc-m-top { grid-template-columns: auto minmax(0, 1fr); }
  .dmc-m-act { grid-column: 1 / -1; align-items: stretch; }
  /* The bar keeps its one row on a phone: the tokens wrap, the row never does. The
     program token gives up its fixed width first. The selector has to outrank
     `.dmc-prog { width: 190px }` below, which is plain (0,1,0) and sits LATER in the file
     (a media query loses to source order on a tie) — so this rule was written, read as
     applied, and never once did anything. Measured 29 sep 2026. */
  .dmc-dock .dmc-prog { width: 100%; }
  .eb2-dock-row { flex-wrap: wrap; }
  .eb2-dock-row textarea { flex: 1 1 100%; order: -1; }
}

/* «+ Crear» — the chooser popover in the Direct Marketing header (besc.js
   crearBoton). Catalog popover tokens (.bbh-pop): surface, card radius, overlay shadow. */
.bdm-crear { position: relative; display: inline-flex; }
.bdm-crear-btn span { font-size: 16px; line-height: 0; margin-right: 2px; font-weight: 700; }
/* 29 sep 2026 — re-hecho con el MENÚ de la barra de pregunta de beautifului.dev
   (bbai.css `.bbai-menu`/`.bbai-mi`): una LISTA de filas con su icono en una
   baldosa `inset` + hairline, 4px de marco, 12px de radio, y entra ESCALANDO desde
   la esquina del botón que la abrió (transform-origin: top right) en vez de caer.
   Las dos tarjetas grandes con borde que había leían como dos botones más de la
   barra, no como la continuación del «+ Crear». */
.bdm-crear-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 1px; padding: 4px;
  width: 248px; max-width: 92vw;
  background: var(--bb-surface); border: 0; border-radius: 12px;
  box-shadow: var(--bb-sh-overlay);
  transform-origin: top right;
  animation: bdmCrearIn .18s var(--bb-ease-link, cubic-bezier(.16,1,.3,1)) both;
}
.bdm-crear-pop[hidden] { display: none; }
@keyframes bdmCrearIn { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bdm-crear-pop { animation: none; } }
.bdm-crear-card {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; text-align: left;
  font: inherit; color: var(--bb-ink); cursor: pointer; width: 100%;
  background: transparent; border: 0; border-radius: var(--bb-r-control); box-shadow: none;
  transition: background var(--bb-t-fast, .12s);
}
.bdm-crear-card:hover, .bdm-crear-card:focus-visible { background: var(--bb-hover); outline: none; }
.bdm-crear-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: var(--bb-inset); box-shadow: var(--bb-sh-hairline); color: var(--bb-ink-2); }
.bdm-crear-ico svg { width: 15px; height: 15px; max-width: none; }
.bdm-crear-card:hover .bdm-crear-ico { color: var(--bb-accent); }
.bdm-crear-t { display: flex; flex-direction: column; gap: 0; line-height: 1.3; min-width: 0; }
.bdm-crear-t b { font-size: 13px; font-weight: 600; }
.bdm-crear-t span { font-size: 11.5px; color: var(--bb-ink-3); }
.bdm-crear-t .num { font-size: 11px; color: var(--bb-ink-3); }
@media (max-width: 620px) {
  .bdm-crear-pop { right: auto; left: 0; transform-origin: top left; }
}


/* ---- Parity with the email builder (29 sep 2026) --------------------------------
   Miguel: "apply the same edits … for the SMS as well for consistency". The bar, the
   AI dock, the tray, the selection menu and the reveal are the EMAIL builder's own
   classes (emailbuild.css loads on this page); these rules only seat them here. */
.dmc { position: relative; }
.dmc-bar { gap: 8px; }
.dmc-bar .eb2-name { flex: 1 1 260px; max-width: 420px; }
.dmc-stage { display: flex; flex-direction: column; gap: 12px; }
/* The email dock overlaps its canvas (margin-top -96px); here it sits UNDER the columns
   and stays reachable while scrolling (sticky), never covering the message box. */
.dmc-dock { margin-top: 0; width: min(760px, 100%); }
/* The one token this bar has that the email bar does not: the PROGRAM the SMS is about.
   It rides in the token strip (emailbuild.css `.eb2-toks`) alongside the attached
   documents — the CollectUI 162524b4 move: what an ask is ABOUT is a token inside the
   card, never a field parked on a row of its own. */
.dmc-prog { width: 190px; }
.dmc-tcard { cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.dmc-tcard.is-bad { cursor: not-allowed; }
.dmc-tcard:focus-visible { outline: none; border-color: #E2B13C; }
.dmc-tcard-t { font-size: 12.5px; line-height: 1.45; color: var(--bb-ink); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.dmc-tcard .dmc-act { align-self: flex-start; }
/* The reveal sits over the two phones (#dmcPhoneW survives #dmcPhone's repaint). */
.dmc-phone-w { position: relative; }
.dmc-gen { inset: 0; border-radius: 14px; }

/* ---- BBPick — the variant picker (both builders) --------------------------------
   Reference: the APPROVAL CARD Miguel handed over (human-in-the-loop) — one item at a
   time, the stack slides vertically while the card's height animates, an odometer step
   counter, pill actions (quiet Siguiente, dark Usar ⏎). App tokens only. */
.bbp-tray { align-items: flex-start; }
.bbp {
  position: relative; width: min(460px, 100%); overflow: hidden;
  background: var(--bb-surface); border-radius: var(--bb-r-card); box-shadow: var(--bb-sh-card), 0 18px 44px -20px rgba(13,42,94,.35);
  animation: bbpUp .38s cubic-bezier(.23, 1, .32, 1) both;
}
@keyframes bbpUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bbp-x {
  position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  color: var(--bb-ink-3); background: transparent; border: 0; border-radius: var(--bb-r-control); cursor: pointer; transition: background .1s, color .1s;
}
.bbp-x:hover { background: var(--bb-hover); color: var(--bb-ink); }
.bbp-pad { padding: 14px 16px 12px; }
.bbp-meta { margin: 0 34px 8px 0; font-size: 11px; color: var(--bb-ink-3); }
.bbp-vp { overflow: hidden; }
.bbp-track { display: flex; flex-direction: column; gap: 26px; will-change: transform; }
.bbp-it { opacity: 0; pointer-events: none; transition: opacity 360ms cubic-bezier(.22, 1, .36, 1); }
.bbp-it.on { opacity: 1; pointer-events: auto; }
.bbp-h { display: flex; align-items: flex-start; gap: 10px; padding-right: 30px; }
.bbp-t { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--bb-ink); }
.bbp-score { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--bb-inset); box-shadow: inset 0 0 0 1px var(--bb-line); }
.bbp-score b { font-family: var(--bb-mono); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The badge says what the number IS. Bare «82» next to a title read as a count of
   something; the meter on this same screen writes «82/100», so the card does too. */
.bbp-score i { font-style: normal; font-family: var(--bb-mono); font-size: 10px; color: var(--bb-ink-3); }
.bbp-score[data-nivel="hi"] b { color: var(--bb-ink); }
.bbp-body { margin-top: 10px; }
.bbp-sms { font-size: 13.5px; line-height: 1.5; color: var(--bb-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.bbp-mail { display: grid; gap: 3px; }
.bbp-mail b { font-size: 13.5px; font-weight: 600; color: var(--bb-ink); }
.bbp-mail span { font-size: 12.5px; color: var(--bb-ink-2); }
.bbp-mail p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--bb-ink-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bbp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.bbp-chips .besc-chip { font-size: 11px; padding: 2px 7px; }
.bbp-ops { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.bbp-op {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px 6px 4px; font: inherit; text-align: left; cursor: pointer;
  color: var(--bb-ink-2); background: transparent; border: 0; border-radius: var(--bb-r-control); transition: background .1s, color .2s;
}
.bbp-op:hover, .bbp-op:focus-visible { outline: none; background: var(--bb-hover); }
.bbp-op.on { color: var(--bb-ink); }
.bbp-radio { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bb-line-strong); transition: background .2s, box-shadow .2s; }
.bbp-radio i { width: 6px; height: 6px; border-radius: 50%; background: var(--bb-surface); transform: scale(0); transition: transform .2s; }
.bbp-op.on .bbp-radio { background: var(--bb-ink); box-shadow: none; }
.bbp-op.on .bbp-radio i { transform: scale(1); }
.bbp-op-l { flex: 1; font-size: 13px; }
.bbp-op-m { font-size: 11.5px; color: var(--bb-ink-3); }
.bbp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px 9px 12px; border-top: 1px solid var(--bb-line); background: color-mix(in srgb, var(--bb-inset) 55%, var(--bb-surface)); }
.bbp-nav { display: flex; align-items: center; gap: 4px; color: var(--bb-ink-3); }
.bbp-nav button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; color: inherit; background: transparent; border: 0; border-radius: 5px; cursor: pointer; transition: color .1s; }
.bbp-nav button:hover:not([disabled]) { color: var(--bb-ink); }
.bbp-nav button[disabled] { opacity: .3; cursor: default; }
.bbp-n { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: -.1px; font-variant-numeric: tabular-nums; }
.bbp-roll { display: inline-block; position: relative; overflow: hidden; height: 1em; line-height: 1em; vertical-align: -.05em; }
.bbp-roll > span { display: flex; flex-direction: column; transition: transform 350ms cubic-bezier(.4, 0, .2, 1); }
.bbp-roll > span > span { height: 1em; line-height: 1em; }
.bbp-roll[data-dir="up"] > span { transform: translateY(0); }
.bbp-roll[data-dir="up"].go > span { transform: translateY(-1em); }
.bbp-roll[data-dir="down"] > span { transform: translateY(-1em); }
.bbp-roll[data-dir="down"].go > span { transform: translateY(0); }
.bbp-acts { display: flex; align-items: center; gap: 8px; }
.bbp-ghost, .bbp-go {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; font: inherit; font-size: 12.5px; font-weight: 600;
  border: 0; border-radius: 999px; cursor: pointer; transition: background .15s, transform .12s, opacity .15s;
}
.bbp-ghost { color: var(--bb-ink-2); background: transparent; }
.bbp-ghost:hover { background: var(--bb-hover); color: var(--bb-ink); }
.bbp-go { color: var(--bb-surface); background: var(--bb-ink); }
.bbp-go:hover:not([disabled]) { transform: translateY(-1px); }
.bbp-go[disabled] { opacity: .4; cursor: not-allowed; }
.bbp-go kbd { font-family: var(--bb-mono); font-size: 11px; opacity: .7; }
/* A blocked variant is visibly quieter, not unreadable: the reader has to be able to read
   WHY it is blocked (the compliance chip is the reason the button is off). */
.bbp-it.is-bad .bbp-sms, .bbp-it.is-bad .bbp-mail { opacity: .72; }
@media (prefers-reduced-motion: reduce) { .bbp, .bbp-it, .bbp-roll > span { animation: none; transition: none; } }

/* The AI bars' boxes grow with the text (BBAutoAlto); no scrollbar before JS runs either. */
.eb2-dock-bar textarea { overflow-y: hidden; }