/* =========================================================
   Blume Demos — mockups interactivos del producto (mock data)
   Se montan con <div class="bxd" data-bx-demo="tipo">.
   Lenguaje: panel grafito/blanco, hairlines, acentos semánticos —
   el mismo del admin blume-x y de los mockups del home y las LPs.
   ========================================================= */

.demoShell { max-width: 780px; margin: 0 auto; }
.demoShell__note { margin: 12px auto 0; max-width: 640px; text-align: center; font-size: 12.5px; color: var(--muted-2); }
.demoShell__cta { display: flex; justify-content: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

.bxd { background: var(--surface-solid, #fff); border: 1px solid var(--line); border-radius: var(--radius-lg, 22px); box-shadow: var(--shadow-md); overflow: hidden; font-size: 13.5px; text-align: left; }
.bxd__bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); color: var(--muted); }
.bxd__bar i { width: 9px; height: 9px; border-radius: 99px; background: var(--line); }
.bxd__bar span { font-weight: 600; font-size: 12px; letter-spacing: .02em; }
.bxd__bar .bxd__barEnd { margin-left: auto; display: flex; gap: 4px; }

.bxd__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 16px 4px; }
.bxd__kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bxd__kpi { border: 1px solid var(--line-2); border-radius: 12px; padding: 8px 11px; background: var(--surface-solid, #fff); }
.bxd__kpi small { display: block; color: var(--muted); font-size: 11px; }
.bxd__kpi b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.bxd__kpi .up { color: var(--success, #34c759); font-size: 11px; font-weight: 600; }

.bxd__table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.bxd__table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); text-align: left; padding: 8px 16px; border-bottom: 1px solid var(--line-2); font-weight: 600; }
.bxd__table td { padding: 9px 16px; border-bottom: 1px solid var(--line-2); color: var(--text-2); font-variant-numeric: tabular-nums; }
.bxd__table td:first-child { color: var(--ink); font-weight: 500; }
.bxd__table tr:last-child td { border-bottom: none; }
.bxd__table th:last-child, .bxd__table td:last-child { text-align: right; }

.bxd__num { display: inline-block; min-width: 26px; text-align: right; transition: color .3s; }
.bxd__num.is-low { color: var(--warning, #ff9f0a); font-weight: 600; }
.bxd__num.is-flash { color: var(--success, #34c759); font-weight: 600; }

.bxd__rows { padding: 8px 16px 12px; display: grid; gap: 7px; }
.bxd__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; padding: 8px 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bxd__row.is-new { animation: bxdIn .5s var(--ease); border-color: rgba(52, 199, 89, .4); }
.bxd__row b { color: var(--ink); font-weight: 600; font-size: 12.5px; }
.bxd__row small { display: block; color: var(--muted-2); font-size: 11px; }
.bxd__row.is-hidden { display: none; }
@keyframes bxdIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.bxd__chip { font-size: 10.5px; font-weight: 600; border-radius: 99px; padding: 3px 9px; background: var(--bg-2); color: var(--muted); white-space: nowrap; }
.bxd__chip--online { background: rgba(10, 132, 255, .1); color: #0a84ff; }
.bxd__chip--pos { background: rgba(52, 199, 89, .12); color: #34c759; }
.bxd__chip--wa { background: rgba(255, 159, 10, .14); color: #ff9f0a; }

.bxd__filters { display: flex; gap: 6px; padding: 10px 16px 2px; flex-wrap: wrap; }
.bxd__filter, .bxd__tab { border: 1px solid var(--line); background: var(--surface-solid, #fff); color: var(--muted); border-radius: 999px; padding: 5px 13px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.bxd__filter[aria-pressed="true"], .bxd__tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.bxd__filter:focus-visible, .bxd__tab:focus-visible, .bxd__btn:focus-visible { outline: none; box-shadow: var(--focus); }

.bxd__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-2); background: var(--bg-2); }
.bxd__btn { border: 1px solid var(--line); background: var(--surface-solid, #fff); color: var(--ink); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: transform .15s var(--ease), box-shadow .15s; }
.bxd__btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.bxd__btn--primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.bxd__toast { margin: 8px 16px 0; padding: 8px 12px; border-radius: 12px; background: rgba(52, 199, 89, .12); color: var(--ink); font-size: 12px; font-weight: 500; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.bxd__toast.is-on { opacity: 1; transform: none; }

.bxd__insights { padding: 10px 16px 4px; display: grid; gap: 8px; }
.bxd__insight { border: 1px solid var(--line-2); border-left: 3px solid var(--warning, #ff9f0a); border-radius: 12px; background: var(--surface-solid, #fff); padding: 9px 12px; font-size: 12px; color: var(--text-2); }
.bxd__insight--good { border-left-color: var(--success, #34c759); }
.bxd__insight b { color: var(--ink); }

.bxd__bars { display: grid; gap: 9px; padding: 8px 16px 4px; }
.bxd__barRow { display: grid; grid-template-columns: 64px minmax(0, 1fr) 92px; align-items: center; gap: 10px; }
.bxd__barRow small { color: var(--text-2); font-size: 12px; font-weight: 500; }
.bxd__track { height: 14px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.bxd__fill { height: 100%; border-radius: 99px; background: var(--ink); opacity: .82; transition: width .5s var(--ease); }
.bxd__barRow.is-top .bxd__fill { background: var(--success, #34c759); opacity: 1; }
.bxd__barRow b { font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }

/* Tarjeta wallet / gift card */
.bxd__stage { display: grid; place-items: center; padding: 18px 16px 10px; background: linear-gradient(180deg, var(--bg-2), transparent); }
.bxd__card { width: min(320px, 100%); border-radius: 18px; padding: 18px; color: #f5f5f7; background: linear-gradient(135deg, #1c1c22 0%, #2a2a33 55%, #3a3a46 100%); box-shadow: 0 18px 40px rgba(10, 10, 12, .35); transition: transform .35s var(--ease); }
.bxd__card.is-bump { transform: scale(1.025); }
.bxd__card--gift { background: linear-gradient(135deg, #103c22 0%, #17603a 60%, #1f7a4b 100%); }
.bxd__cardHead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.bxd__cardBrand { font-weight: 700; font-size: 14px; }
.bxd__tier { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; border-radius: 99px; padding: 3px 10px; background: rgba(255, 255, 255, .14); }
.bxd__tier.is-gold { background: rgba(255, 214, 102, .22); color: #ffd666; }
.bxd__cardBig { font-size: 29px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bxd__cardBig small { font-size: 12px; font-weight: 500; opacity: .7; }
.bxd__progress { margin: 13px 0 6px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.bxd__progress i { display: block; height: 100%; border-radius: 99px; background: #fff; opacity: .92; transition: width .5s var(--ease); }
.bxd__cardFoot { display: flex; justify-content: space-between; font-size: 11px; opacity: .75; }
.bxd__benefit { margin: 8px 16px 0; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-solid, #fff); font-size: 12px; color: var(--text-2); }
.bxd__benefit b { color: var(--ink); }

/* Playground API */
.bxd__req { display: flex; align-items: center; gap: 8px; padding: 10px 16px 0; flex-wrap: wrap; }
.bxd__method { font-family: ui-monospace, Consolas, monospace; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 3px 8px; background: rgba(10, 132, 255, .1); color: #0a84ff; }
.bxd__method--post { background: rgba(52, 199, 89, .12); color: #34c759; }
.bxd__url { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--text-2); word-break: break-all; }
.bxd__send { margin-left: auto; }
.bxd__out { position: relative; background: #101014; border-radius: 12px; padding: 12px 14px; min-height: 190px; overflow-x: auto; margin: 10px 16px 0; }
.bxd__out pre { margin: 0; font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; line-height: 1.65; color: #d6d6dc; white-space: pre; }
.bxd__out .k { color: #7dc4ff; } .bxd__out .s { color: #9fe3a1; } .bxd__out .n { color: #ffc078; }
.bxd__status { position: absolute; top: 10px; right: 12px; font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 2px 8px; background: rgba(52, 199, 89, .18); color: #6fdc8c; opacity: 0; transition: opacity .3s; }
.bxd__status.is-on { opacity: 1; }
.bxd__tabs { display: flex; gap: 6px; padding: 10px 16px 0; flex-wrap: wrap; }

/* Omni: storefront + admin lado a lado */
.bxd__split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; }
@media (max-width: 640px) { .bxd__split { grid-template-columns: 1fr; } .bxd__side + .bxd__side { border-left: none; border-top: 1px solid var(--line-2); } }
.bxd__side { padding: 0 0 6px; }
.bxd__side + .bxd__side { border-left: 1px solid var(--line-2); }
.bxd__sideHead { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding: 10px 16px 4px; }
.bxd__product { margin: 8px 16px; border: 1px solid var(--line-2); border-radius: 14px; padding: 12px; }
.bxd__thumb { height: 78px; border-radius: 10px; background: linear-gradient(135deg, var(--bg-2), var(--bg-3, #ececf0)); margin-bottom: 9px; display: grid; place-items: center; color: var(--muted-2); }
.bxd__product b { display: block; color: var(--ink); font-size: 13px; }
.bxd__product small { color: var(--muted); font-size: 11.5px; }
.bxd__price { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; margin: 4px 0 8px; }

/* Wizard de promos */
.bxd__steps { display: flex; gap: 6px; padding: 10px 16px 2px; flex-wrap: wrap; }
.bxd__step { font-size: 11px; font-weight: 600; border-radius: 99px; padding: 4px 12px; background: var(--bg-2); color: var(--muted-2); }
.bxd__step.is-active { background: var(--ink); color: var(--bg); }
.bxd__step.is-done { background: rgba(52, 199, 89, .12); color: #34c759; }
.bxd__body { padding: 12px 16px 4px; }
.bxd__checkout { margin: 8px 16px 0; border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 14px; font-variant-numeric: tabular-nums; }
.bxd__coLine { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-2); padding: 3px 0; }
.bxd__coLine.is-discount { color: var(--success, #34c759); font-weight: 600; }
.bxd__coLine.is-total { border-top: 1px solid var(--line-2); margin-top: 6px; padding-top: 8px; color: var(--ink); font-weight: 600; font-size: 13.5px; }

.bxd__note { padding: 8px 16px 12px; font-size: 11.5px; color: var(--muted-2); }

@media (prefers-reduced-motion: reduce) {
  .bxd__btn, .bxd__toast, .bxd__card, .bxd__fill, .bxd__progress i { transition: none; }
  .bxd__row.is-new { animation: none; }
}

/* ---- Móvil: nada se sale del marco ---- */
@media (max-width: 600px) {
  .bxd { font-size: 12.5px; }
  .bxd__kpi b { font-size: 13px; }
  .bxd__kpi small { font-size: 10px; }
  .bxd__kpi .up { font-size: 10px; }
  .bxd__table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bxd__table th, .bxd__table td { padding: 8px 10px; white-space: nowrap; }
  .bxd__row { gap: 8px; padding: 8px 10px; }
  .bxd__row b { font-size: 12px; }
  .bxd__chip { font-size: 9.5px; padding: 2px 7px; }
  .bxd__out pre { font-size: 10.5px; }
  .bxd__url { font-size: 10.5px; }
}