/* ============================================================
   Página «Créditos» (/creditos, 07/11/2026). Usa legal.css (fondo, logo, idioma) y precios.css (tarjetas de
   paquetes y botones, igual que /precios); aquí solo lo propio: saldo, «Más elegido», historial.
   ============================================================ */
.page-creditos { max-width: 860px; }

.cr-volver {
  display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 8px;
  color: var(--muted); font-size: .9rem; text-decoration: none; min-height: 44px;
}
.cr-volver svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cr-volver:hover { color: var(--text); }

.cr-head h1 { margin-bottom: 18px; }

/* El saldo arriba: el número grande y cuántos videos alcanzan */
.cr-saldo {
  margin: 0 auto 36px; max-width: 520px; padding: 24px 22px; text-align: center;
  background: linear-gradient(180deg, rgba(139, 92, 246, .14), rgba(16, 18, 40, .7));
  border: 1px solid rgba(139, 92, 246, .45); border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .18) inset, 0 20px 60px rgba(99, 102, 241, .25);
}
.cr-saldo p { margin: 0; }
.cr-saldo-etq { color: var(--lila); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cr-saldo-n { margin-top: 6px !important; font: 700 clamp(2rem, 7vw, 2.6rem)/1.1 var(--font-display); color: var(--text); }
.cr-saldo-videos { margin-top: 8px !important; color: var(--text); font-size: 1rem; }
.cr-saldo-vence { margin-top: 6px !important; color: var(--faint); font-size: .85rem; }
/* «También alcanzan para»: una línea por herramienta que la cuenta puede usar */
.cr-saldo-mas { margin: 14px auto 0; padding-top: 12px; border-top: 1px solid var(--border); max-width: 380px; }
.cr-saldo-mas-t { color: var(--muted); font-size: .82rem; }
.cr-saldo-mas-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cr-saldo-mas-lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .9rem; text-align: left; }
.cr-saldo-mas-lista b { color: var(--text); font-weight: 600; }
.cr-saldo-mas-lista span { color: var(--faint); font-size: .8rem; white-space: nowrap; }
@media (max-width: 400px) { .cr-saldo-mas-lista li { flex-direction: column; gap: 0; } .cr-saldo-mas-lista span { white-space: normal; } }
.cr-saldo-aviso { margin-top: 10px !important; color: var(--rosa); font-size: .88rem; }
.cr-entrar { display: inline-flex; margin-top: 16px; width: auto; padding-inline: 28px; text-decoration: none; }
.cr-saldo .cr-sinsesion { color: var(--muted); font-size: 1rem; font-weight: 500; font-family: var(--font-body); }

/* Los 6 paquetes: 3 por fila en escritorio, uno debajo del otro en el celular (precios.css) */
.cr-paquetes { margin-bottom: 36px; }
.cr-lista { padding-top: 12px; }
.tokens-card { position: relative; }
.tokens-card.cr-destacado {
  border-color: rgba(139, 92, 246, .6);
  background: linear-gradient(180deg, rgba(139, 92, 246, .16), rgba(16, 18, 40, .72));
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .22) inset, 0 18px 50px rgba(99, 102, 241, .3);
}
.cr-etiqueta {
  position: absolute; top: -12px; left: 18px; padding: 4px 12px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--grad-boton);
  box-shadow: 0 6px 18px rgba(99, 102, 241, .45);
}
.cr-cerrada { margin: 8px auto 0; max-width: 520px; color: var(--muted); font-size: .92rem; }

/* La vuelta de pagar */
.cr-compra {
  margin: 0 auto 20px; max-width: 520px; padding: 14px 18px; text-align: center;
  border: 1px solid var(--border-strong); border-radius: 14px; background: var(--card);
}
.cr-compra p { margin: 0; color: var(--text); }
.cr-compra.listo { border-color: rgba(52, 211, 153, .5); }
.cr-compra-btn { margin-top: 12px; width: auto; padding-inline: 22px; }

/* Historial */
.cr-historial { margin: 0 auto 40px; max-width: 640px; }
.cr-historial .tokens-titulo { text-align: center; margin-bottom: 14px; }
.cr-movs { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--card); overflow: hidden; }
.cr-mov { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.cr-mov + .cr-mov { border-top: 1px solid var(--border); }
.cr-mov-texto { flex: 1; min-width: 0; }
.cr-mov-texto b { display: block; color: var(--text); font-weight: 600; font-size: .95rem; }
.cr-mov-texto span { display: block; color: var(--faint); font-size: .8rem; margin-top: 2px; overflow-wrap: anywhere; }
.cr-mov-n { flex: none; font: 700 1rem var(--font-display); white-space: nowrap; }
.cr-mov-n.suma { color: #6ee7b7; }
.cr-mov-n.resta { color: var(--muted); }
.cr-vacio, .cr-mas { text-align: center; color: var(--faint); font-size: .88rem; }

@media (max-width: 720px) {
  .cr-saldo { padding: 20px 16px; }
  .cr-mov { padding: 12px 14px; }
}
.cr-nota-moneda { margin-top: 4px !important; }
.cr-saldo-mas:not([hidden]) + .cr-saldo-vence { margin-top: 14px !important; }