/* ── Créditos: recarga por Pago Móvil ─────────────────────────────────────────
   Mismo lenguaje que el resto: superficies claras, líneas finas, acento azul.
   ───────────────────────────────────────────────────────────────────────── */

.pm {
  scroll-margin-top: 6.5rem;   /* que la barra superior fija no tape el encabezado */
  margin-bottom: var(--space-8);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  box-shadow: 0 0 0 4px var(--color-primary-glow);
  overflow: hidden;
}

.pm__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) 0;
}
.pm__kicker { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: .04em; text-transform: uppercase; }
.pm__title  { margin: .2rem 0 0; font-size: var(--text-lg); }

.pm__body { padding: var(--space-5); }
.pm__lead { margin: 0 0 var(--space-4); color: var(--color-text-muted); }
.pm__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }

/* Pasos */
.pm-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) var(--space-5) 0;
  padding: 0;
  list-style: none;
  counter-reset: pm-step;
}
.pm-steps__item {
  counter-increment: pm-step;
  padding-top: var(--space-2);
  border-top: 3px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}
.pm-steps__item::before { content: counter(pm-step) ". "; }
.pm-steps__item.is-done { border-top-color: var(--color-primary); color: var(--color-text); }

/* Monto */
.pm-amount {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
}
.pm-amount__label { font-size: var(--text-xs); color: var(--color-text-muted); }
.pm-amount__value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  line-height: 1.1;
  color: var(--color-primary);
  overflow-wrap: anywhere;
}
.pm-amount__note { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Datos del receptor */
.pm-data { margin: var(--space-4) 0 0; }
.pm-data__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.pm-data__row dt { font-size: var(--text-sm); color: var(--color-text-muted); }
.pm-data__row dd { margin: 0; font-weight: var(--font-medium); overflow-wrap: anywhere; }

.pm-terms { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }

.pm-countdown { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.pm-countdown.is-late { color: var(--color-warning); }

/* Avisos */
.pm-alert { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-sm); }
.pm-alert--error   { background: var(--color-error-bg);   color: var(--color-error); }
.pm-alert--warning { background: var(--color-warning-bg); color: var(--color-warning); }

/* Estado */
.pm-status { text-align: center; }
.pm-status__icon  { margin: 0; font-size: 2.2rem; }
.pm-status__title { margin: var(--space-2) 0 0; font-weight: 600; font-size: var(--text-md); }
.pm-status__text  { margin: var(--space-2) auto 0; max-width: 34rem; color: var(--color-text-muted); }
.pm-status__meta  { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-text-dim); }
.pm-status .pm__actions { justify-content: center; }

/* Soporte */
.pm__support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Lista "Mis recargas" */
.pm-orders { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.pm-orders__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto auto 4rem;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}
.pm-orders__row + .pm-orders__row { border-top: 1px solid var(--color-border); }
.pm-orders__num { font-weight: 600; }

.pm-badge {
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  white-space: nowrap;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.pm-badge--pending_payment,
.pm-badge--reported,
.pm-badge--verified { background: var(--color-warning-bg); border-color: transparent; color: var(--color-warning); }
.pm-badge--credited { background: var(--color-success-bg); border-color: transparent; color: var(--color-success); }
.pm-badge--rejected { background: var(--color-error-bg);   border-color: transparent; color: var(--color-error); }

@media (max-width: 640px) {
  .pm-data__row { grid-template-columns: minmax(0, 1fr) auto; }
  .pm-data__row dt { grid-column: 1 / -1; }
  .pm-orders__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pm-orders__row > .text-xs { display: none; }
  .pm-orders__row .pm-badge { grid-column: 1 / 3; justify-self: start; }
}

/* ── Términos y condiciones (/terminos) ───────────────────── */
.terms {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) 16px;
  line-height: 1.65;
}
.terms__kicker { margin: 0; font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.terms__title { margin: .3rem 0 0; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.terms__updated { margin: .4rem 0 2rem; font-size: var(--text-sm); color: var(--color-text-dim); }
.terms h2 { margin: 2rem 0 .6rem; font-size: var(--text-lg); }
.terms ul { padding-left: 1.2rem; }
.terms li + li { margin-top: .4rem; }
.terms__back { margin-top: 2.5rem; }