/* A payment as its card («Tessera viva», wave 4b): viste/app/pagamento.php (the record card of app-record.css: the band
   with the state and the amount, the white body with one line each for amount, method and day, which open «Correggi»,
   the member and the subscription it belongs to, the history printed small) and the payments list. Shared tokens only.
   The right column is the member card's (app-tessera.css, ts-*). Prefix pg-. */

/* ------------------------------------------------------------------------------------------------ the card */
.gx .pg-carta { max-width: 26rem }
.gx .pg-barrato { text-decoration: line-through; text-decoration-thickness: 3px; opacity: .85 }
.gx .pg-righe { display: grid; border-top: 1px solid var(--line) }
.gx .pg-righe--legami { margin-top: .75rem }
.gx .pg-riga { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr) 30px; align-items: center; gap: 8px; min-height: 50px; padding: 6px 4px 6px 6px;
  border-bottom: 1px solid var(--line); border-radius: 8px; color: var(--ink) !important; text-decoration: none !important }
.gx a.pg-riga:hover { background: var(--brand-primary-soft) }
.gx .pg-et { font-size: .85rem; color: var(--ink-3); font-weight: 600 }
.gx .pg-val { font-size: .98rem; font-weight: 650; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums }
.gx .pg-ico { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--ink-2); background: var(--bg) }
.gx .pg-riga--ferma .pg-ico { background: transparent; color: var(--ink-3) }
.gx .pg-riga--ferma .pg-ico:empty { visibility: hidden }
.gx .pg-firma { margin: .75rem 0 0; font-size: .85rem; color: var(--ink-3) }
.gx .pg-firma b { color: var(--ink-2) }
.gx .pg-storia { list-style: none; margin: .75rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: .82rem; line-height: 1.4; color: var(--ink-2) }
.gx .pg-storia span { color: var(--ink-3); margin-right: 4px }

/* a reference to copy (the receipt of PayPal or Stripe) */
.gx .ts-copia { display: flex; gap: 8px }
.gx .ts-copia input { flex: 1 1 auto; min-width: 0; min-height: 44px; font-variant-numeric: tabular-nums }
.gx .ts-copia .btn { min-height: 44px; flex: none }

/* ------------------------------------------------------------------------------------------------ the list */
.gx .pg-apri { font-weight: 650 }
.gx .pg-importo { color: inherit !important; text-decoration: none !important; display: inline-flex; min-height: 44px; align-items: center }
.gx .pg-importo:hover b { text-decoration: underline; text-underline-offset: 3px }
.gx .vd-chips a.pg-chip-aperti { display: inline-flex; align-items: center; gap: 6px }
.gx .pg-chip-n { font-size: .8rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--warn-soft); color: var(--warn) }
.gx .pg-aperti-nota { margin: 0 0 14px; color: var(--ink-2) }
.gx .pg-esiti:empty { display: none }
.gx .pg-esiti { margin: 0 0 12px }

@media (max-width: 560px) {
  .gx .pg-carta { max-width: none }
  .gx .pg-riga { grid-template-columns: 6.2rem minmax(0, 1fr) 30px }
}