/* app/public/css/credits.css — créditos extra y pack (SPEC C; Lote 2).
   Oferta del pack dentro del aviso «sin créditos» de Imágenes ([data-img-pack], 56-credits.js),
   la línea «Usa N de tus créditos extra» bajo Generar ([data-img-bal-note], 40-images.js)
   y la tarjeta «Créditos extra» de Cuenta › Plan y uso ([data-acc-balance]). */

/* ---- Imágenes: oferta del pack ---- */
.img-pack { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.img-pack__title { color: rgb(var(--c-text)); font-weight: 600; }
.img-pack__text { margin-top: 4px; color: rgb(var(--c-soft)); }
.img-pack .notice__actions { margin-top: 10px; }
.img-pack .btn { display: inline-flex; align-items: center; gap: 8px; }
.img-pack__pro { margin-top: 10px; color: rgb(var(--c-muted)); font-size: var(--fs-xs); line-height: 1.5; }

/* ---- Imágenes: parte del coste que sale del saldo ---- */
.img-bal-note { margin-top: 6px; color: rgb(var(--c-soft)); font-size: var(--fs-xs); text-align: center; }

/* ---- Cuenta: tarjeta «Créditos extra» ---- */
[data-acc-balance] { margin-top: 32px; }
.acc-credits { padding: 20px 24px; }
.acc-credits .acc-h3 { margin-bottom: 8px; }
.acc-credits .acc-text { max-width: 46em; }
.acc-credits__bal { margin-bottom: 6px; color: rgb(var(--c-soft)); }
.acc-credits__bal b { color: rgb(var(--c-text)); font: 600 1.5rem / 1.1 var(--font-serif); font-variant-numeric: tabular-nums; }
.acc-credits__buy { margin-top: 16px; }
.acc-credits__buy .btn { display: inline-flex; align-items: center; gap: 8px; }
.acc-credits__h4 {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  color: rgb(var(--c-muted)); font: 600 var(--fs-label) / 1.2 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase;
}
.acc-credits__list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.acc-credits__list li { display: grid; grid-template-columns: minmax(4.5em, auto) 1fr auto auto; align-items: center; gap: 12px; color: rgb(var(--c-soft)); }
.acc-credits__when { color: rgb(var(--c-muted)); }

@media (max-width: 640px) {
  .acc-credits { padding: 16px; }
  .acc-credits__list li { grid-template-columns: 1fr auto; gap: 2px 12px; }
  .acc-credits__list li .chip { justify-self: end; }
}