/* ============================================================================
   DEMO · step-launch · estilos propios (steps mini, acento ambar)
   R4 C16: lanzar y medir cada dolar. Toggle con tap que voltea a Live,
   campana que se enciende con ring ambar, libro contable de spend (montos
   tabulares que cuentan + checks --go que se dibujan), barras ambar y
   total contando. Chip de retorno con --amber-text (AA sobre amber-light)
   y badge de check ambar. Prefijo .demo--step-launch.
   ========================================================================== */

.demo--step-launch { min-height: 240px; }

.demo--step-launch .sl-stage {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 1.5rem 2.2rem 1.7rem;
}

.demo--step-launch .sl-cluster { position: relative; }

.demo--step-launch .sl-card {
  width: min(292px, 100%);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 0.9rem 0.95rem 0.95rem;
  display: grid;
  gap: 0.62rem;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-scene);
}
.demo--step-launch .sl-card.is-on { opacity: 1; transform: none; }

/* ---- encabezado: nombre + toggle ------------------------------------------ */
.demo--step-launch .sl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.demo--step-launch .sl-head__label {
  font-size: 0.8rem;
  font-weight: 620;
  color: var(--ink);
}
.demo--step-launch .sl-toggle-wrap { display: inline-flex; align-items: center; gap: 0.4rem; }

.demo--step-launch .sl-toggle {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 19px;
  flex: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  transition: background 0.32s var(--ease-out);
}
.demo--step-launch .sl-toggle.is-on { background: var(--go); }
.demo--step-launch .sl-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(17, 17, 16, 0.25);
  transition: transform 0.32s var(--ease-out);
}
.demo--step-launch .sl-toggle.is-on .sl-toggle__knob { transform: translateX(15px); }

.demo--step-launch .sl-status {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.3s var(--ease-out);
}
.demo--step-launch .sl-status.is-live { color: var(--go); }

/* ---- la campana: se enciende con la consecuencia del toggle --------------- */
.demo--step-launch .sl-camp {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.5rem 0.6rem;
  opacity: 0.45;
  transition: opacity 0.4s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.demo--step-launch .sl-camp.is-on {
  opacity: 1;
  border-color: color-mix(in srgb, var(--amber) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 14%, transparent);
}
.demo--step-launch .sl-camp__icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  color: var(--amber);
}
.demo--step-launch .sl-camp__icon svg {
  width: 14px; height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.demo--step-launch .sl-camp__name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- libro contable: cada dolar con su check ------------------------------ */
.demo--step-launch .sl-ledger { display: grid; gap: 0.4rem; }
.demo--step-launch .sl-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease-out), transform 0.38s var(--ease-out);
}
.demo--step-launch .sl-row.is-on { opacity: 1; transform: none; }

/* el check de "tracked" se dibuja al sellar (--go = estado listo) */
.demo--step-launch .sl-row__check {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background: transparent;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.demo--step-launch .sl-row__check svg {
  width: 9px; height: 9px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.4s var(--ease-out) 0.1s;
}
.demo--step-launch .sl-row__check.is-done {
  border-color: var(--go);
  background: var(--go);
}
.demo--step-launch .sl-row__check.is-done svg { stroke-dashoffset: 0; }

.demo--step-launch .sl-row__name {
  font-size: 0.72rem;
  font-weight: 540;
  color: var(--ink-soft);
}
.demo--step-launch .sl-row__amt {
  margin-left: auto;
  font-size: 0.74rem;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 3.2ch;
  text-align: right;
}

/* ---- pie: barras ambar + total que cuenta --------------------------------- */
.demo--step-launch .sl-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
}
.demo--step-launch .sl-foot .dm-bars { height: 30px; }
.demo--step-launch .sl-total {
  display: grid;
  justify-items: end;
  line-height: 1.15;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease-out), transform 0.38s var(--ease-out);
}
.demo--step-launch .sl-total.is-on { opacity: 1; transform: none; }
.demo--step-launch .sl-total__val {
  font-size: 0.98rem;
  font-weight: 740;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.demo--step-launch .sl-total__label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 560;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-text);
}

/* ---- flotantes: chip de retorno (POP) + badge check ambar ----------------- */
.demo--step-launch .sl-roi {
  /* texto chico ambar: --amber-text pasa AA sobre amber-light (regla r3) */
  --dm-accent: var(--amber-text);
  background: var(--amber-light);
  position: absolute;
  left: -0.7rem;
  bottom: -0.6rem;
  z-index: 2;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--amber) 28%, transparent);
}

/* el badge se asoma por la esquina SIN pisar el toggle del head (QA r4) */
.demo--step-launch .sl-check {
  position: absolute;
  right: -0.9rem;
  top: -0.9rem;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--amber);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--amber) 38%, transparent);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out);
}
.demo--step-launch .sl-check.is-on { opacity: 1; transform: scale(1); }
.demo--step-launch .sl-check svg {
  width: 14px; height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.45s var(--ease-out) 0.15s;
}
.demo--step-launch .sl-check.is-on svg { stroke-dashoffset: 0; }

@media (max-width: 720px) {
  .demo--step-launch { min-height: 220px; }
  .demo--step-launch .sl-stage { padding: 1.3rem 1.2rem 1.5rem; }
  .demo--step-launch .sl-card { width: min(272px, 100%); }
  .demo--step-launch .sl-roi { left: -0.3rem; bottom: -0.4rem; }
  .demo--step-launch .sl-check { right: -0.6rem; top: -0.7rem; }
}