/* Cambios de precio · cola de aprobación, bloques y pasos al aprobar */

.cp-hero { padding-top: 80px; }
.cp-hero__title { max-width: 16em; }
.cp-hero__lead { max-width: 36em; }

/* ---- Maqueta "Cambios pendientes" ------------------------------------- */
.cp-queue { padding-top: 56px; }

.queue {
  background: var(--white); border: 1px solid var(--ink); border-radius: 4px; overflow: hidden;
  box-shadow: 0 30px 60px -50px rgba(0, 0, 0, .6);
}
.queue__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px; border-bottom: 1px solid var(--ink);
}
.queue__title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.queue__badge {
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--white);
  background: var(--orange); padding: 3px 8px; border-radius: 2px;
}
.queue__actions { display: flex; gap: 8px; }
.queue__btn { font-size: 13px; border-radius: 2px; padding: 8px 14px; }
.queue__btn--ghost { font-weight: 500; border: 1px solid var(--line-2); color: var(--muted); }
.queue__btn--dark { font-weight: 600; background: var(--ink); color: var(--white); }

.queue__scroll { overflow-x: auto; }
.queue__table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 13px; }
.queue__table th {
  text-align: left; font-family: var(--mono); color: var(--muted); font-weight: 500;
  padding: 12px 12px; border-bottom: 1px solid var(--line);
}
.queue__table td { padding: 16px 12px; border-bottom: 1px solid var(--line-soft); }
.queue__table th:first-child, .queue__table td:first-child,
.queue__table th:last-child, .queue__table td:last-child { padding-left: 22px; padding-right: 22px; }
.queue__table .num { text-align: right; }
.queue__table tbody tr { transition: background .2s; }
.queue__table tbody tr:hover { background: var(--paper-2); }

.queue__sku { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.queue__name { margin-top: 3px; font-weight: 500; font-size: 14px; }
.queue__old, .queue__new, .queue__diff { font-family: var(--mono); white-space: nowrap; }
.queue__old { color: var(--muted); text-decoration: line-through; }
.queue__new { font-weight: 600; }
.diff--down { color: #b3261e; }
.diff--up { color: var(--green); }
.queue__by { color: var(--ink-2); }
.queue__when { margin-top: 3px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.queue__act { white-space: nowrap; }
.queue__approve {
  font-size: 13px; font-weight: 600; background: var(--orange); color: var(--white);
  border-radius: 2px; padding: 7px 13px;
}
.queue__discard { font-size: 13px; font-weight: 500; color: var(--muted); padding: 7px 0 7px 14px; }

.queue__foot {
  padding: 14px 22px; border-top: 1px solid var(--line); background: var(--paper);
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}

.cp-note { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* ---- Tres bloques ------------------------------------------------------ */
.cp-blocks { padding-top: 96px; }
.cp-blocks__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cp-h3 { font-size: 22px; }

/* ---- Qué pasa cuando apruebas ----------------------------------------- */
.cp-steps { margin-top: 96px; }
.cp-steps__inner { padding-top: 88px; padding-bottom: 88px; }
.cp-h2 {
  font-size: clamp(26px, 3.2vw, 40px); line-height: 1.06; letter-spacing: -.028em; font-weight: 700; max-width: 24em;
}
.steps { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; }
.step { padding: 24px 24px 24px 0; border-top: 2px solid var(--ink); }
.step__n { font-family: var(--mono); font-size: 12px; color: var(--orange-ink); }
.step__text { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--ink); font-weight: 500; }
.cp-steps__note { margin-top: 28px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 44em; }

@media (prefers-reduced-motion: reduce) {
  .queue__table tbody tr { transition: none; }
}