/* Módulo de pagos (P4): tarjeta «Cuenta» de la ficha, diálogo «Registrar cobro» y widget charge-lines. Solo tokens del canon (canon-tokens.css) y piezas del canon
   (.ui-btn, .ui-input, .ui-status, .ui-metric, .alert…). Las dos reglas nuevas del módulo: .money y .money-total. Panel de PC (≥ 1024 px). */

/* ---- Dinero: cifras tabulares, alineadas a la derecha ---- */
.money { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.money-total { font-variant-numeric: tabular-nums; font-size: var(--fs-title); font-weight: var(--fw-bold); color: var(--text-strong); white-space: nowrap; }

/* ---- Cuenta de la ficha ---- */
.person-account .section-heading { align-items: center; }
.pay-actions { display: flex; align-items: center; gap: var(--sp-2); }
.pay-menu-wrap { position: relative; display: inline-flex; }
.pay-menu-wrap > .ui-menu { position: absolute; top: 100%; right: 0; z-index: 20; min-width: calc(var(--row-h) * 4); margin-top: var(--sp-1); }
.pay-figures { display: grid; grid-template-columns: repeat(var(--pay-cols, 2), minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); }
.pay-figure { padding: var(--sp-3) var(--sp-4); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); background: var(--surface-1); }
.pay-figure-label { color: var(--text-muted); font-size: var(--fs-meta); }
.pay-figure.is-warning .money-total { color: var(--warning-ink); }
.pay-figure.is-success .money-total { color: var(--success-ink); }
.pay-figure.is-zero .money-total { color: var(--text-subtle); }
.pay-meta { color: var(--text-muted); font-size: var(--fs-meta); }
.pay-skeleton-figure { display: block; height: calc(var(--row-h) * 1.4); border-radius: var(--r-md); }
.pay-credit-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-3); }
.pay-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-2) 0; }
.pay-subtitle { margin: 0; padding: 0; color: var(--text-strong); font-size: var(--fs-body); font-weight: var(--fw-bold); }
.pay-more { display: flex; justify-content: center; padding-top: var(--sp-2); }

/* ---- Tabla densa de dinero ---- */
.pay-table-wrap { overflow-x: auto; border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); background: var(--surface-1); }
.pay-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.pay-table th { padding: var(--sp-2) var(--sp-3); border-bottom: var(--border-w) solid var(--border-default); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-meta); font-weight: var(--fw-medium); text-align: left; white-space: nowrap; }
.pay-table th.is-money { text-align: right; }
.pay-table td { padding: var(--sp-1) var(--sp-3); border-bottom: var(--border-w) solid var(--border-soft); color: var(--text-primary); vertical-align: middle; }
.pay-table tbody tr:last-child td { border-bottom: 0; }
.pay-table tr { min-height: var(--row-h-compact); }
.pay-table tr.is-dim td { color: var(--text-subtle); }
.pay-table tr.is-dim .pay-cell-concept { text-decoration: none; }
.pay-table tr.pay-subrow td { padding-top: 0; border-bottom-color: transparent; color: var(--text-muted); font-size: var(--fs-meta); }
.pay-cell-date { color: var(--text-muted); font-size: var(--fs-meta); white-space: nowrap; }
.pay-cell-concept { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.pay-cell-menu { width: var(--ctl-md); text-align: right; }

/* ---- Registrar cobro (diálogo ancho de dos columnas) ---- */
.ui-dialog.is-form.pay-charge { width: min(calc(var(--ctl-lg) * 30.6), calc(100vw - var(--sp-8) * 2)); }
.ui-dialog.is-form.pay-charge > .ui-dialog-foot { position: sticky; bottom: calc(var(--sp-6) * -1); z-index: 2; margin: 0 calc(var(--sp-6) * -1) calc(var(--sp-6) * -1); padding: var(--sp-3) var(--sp-6); border-top: var(--border-w) solid var(--border-default); background: var(--surface-1); }
.pay-charge-grid { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--row-h) * 5.6); gap: var(--sp-5); align-items: start; }
.pay-charge-main { display: grid; gap: var(--sp-5); min-width: 0; }
.pay-block { display: grid; gap: var(--sp-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.pay-block-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--text-strong); font-size: var(--fs-title); font-weight: var(--fw-bold); }
.pay-step { display: inline-grid; place-items: center; width: var(--ctl-sm); height: var(--ctl-sm); border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand-strong); font-size: var(--fs-meta); font-weight: var(--fw-bold); }
.pay-step-done { display: inline-grid; place-items: center; color: var(--success-ink); }
.pay-site { display: inline-flex; align-items: center; gap: var(--sp-2); justify-self: end; color: var(--text-muted); font-size: var(--fs-meta); }
.pay-quiet { margin: 0; color: var(--text-muted); font-size: var(--fs-body); }
.pay-lead { margin: 0; color: var(--text-strong); font-size: var(--fs-body); }
.pay-note { margin: 0; font-size: var(--fs-meta); }
.pay-note.is-warning { color: var(--warning-ink); }
.pay-note.is-success { color: var(--success-ink); }
.pay-amounts { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: start; }
.pay-split { display: grid; gap: var(--sp-3); padding: var(--sp-3); border: var(--border-w) solid var(--border-soft); border-radius: var(--r-md); background: var(--surface-2); }
.pay-split > .ui-btn { justify-self: start; }
.pay-pending { display: grid; gap: var(--sp-1); margin: 0; padding: 0; border: 0; }
.pay-pending-row, .pay-apply-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.pay-pending-row > label, .pay-apply-row > label { flex: 1 1 auto; min-width: 0; }
.pay-apply-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; border: 0; }
.pay-apply-amount { width: calc(var(--ctl-lg) * 3); text-align: right; }
.pay-after { margin: 0; color: var(--text-strong); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.ui-dialog.pay-apply, .ui-dialog.pay-refund, .ui-dialog.pay-discount-dialog { width: min(100%, calc(var(--ctl-lg) * 16.5)); }

/* ---- Columna «Resumen»: el ticket (único elemento destacado del cobro) ---- */
.pay-summary { position: sticky; top: 0; display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface-2); }
.pay-summary-title { margin: 0; color: var(--text-strong); font-size: var(--fs-title); font-weight: var(--fw-bold); }
.pay-summary-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.pay-summary-list li, .pay-summary-row { display: flex; justify-content: space-between; gap: var(--sp-3); color: var(--text-primary); font-size: var(--fs-body); }
.pay-summary-list li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.pay-summary-credit { display: grid; gap: var(--sp-2); }
.pay-summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); border-top: var(--border-w) solid var(--border-default); color: var(--text-strong); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.pay-summary-total .money-total { font-size: var(--fs-screen); }

/* ---- Widget charge-lines ---- */
.pay-lines { display: grid; gap: var(--sp-3); min-width: 0; }
.pay-search { position: relative; }
.pay-search-box { position: relative; }
.pay-search-results { position: absolute; z-index: 10; top: 100%; left: 0; right: 0; margin-top: var(--sp-1); box-shadow: var(--shadow-2); }
.pay-search-results li { display: block; }
.pay-search-results button { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.pay-search-results button[aria-selected="true"] { background: var(--surface-hover); }
.pay-search-results button.is-new { color: var(--brand-strong); font-weight: var(--fw-medium); }
.pay-opt-meta { color: var(--text-muted); font-size: var(--fs-meta); white-space: nowrap; }
.pay-line-list { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.pay-line { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); background: var(--surface-1); }
.pay-line-head { display: flex; align-items: center; gap: var(--sp-3); }
.pay-line-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); font-size: var(--fs-body); font-weight: var(--fw-bold); }
input.pay-line-name { font-weight: var(--fw-regular); }
.pay-line-total { flex: none; min-width: calc(var(--ctl-lg) * 2.5); color: var(--text-strong); font-size: var(--fs-body); font-weight: var(--fw-bold); }
.pay-line-fields { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3) var(--sp-4); }
.pay-mini { display: grid; gap: var(--sp-1); min-width: 0; }
.pay-mini > label, .pay-mini-label { margin: 0; color: var(--text-muted); font-size: var(--fs-meta); }
.pay-mini .ui-input[list] { width: calc(var(--ctl-lg) * 3); }
.pay-mini .sa-money { width: calc(var(--ctl-lg) * 4); }
.pay-line-extra { display: grid; gap: var(--sp-1); }
.pay-discount { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: nowrap; }
.pay-discount .ui-input { min-width: 0; width: calc(var(--ctl-lg) * 2); text-align: right; }
.pay-inline-field { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-muted); font-size: var(--fs-meta); }
.pay-inline-field .ui-input { flex: 1 1 auto; }
.pay-total-discount { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: var(--border-w) solid var(--border-soft); border-radius: var(--r-md); background: var(--surface-2); }
.pay-total-discount label { color: var(--text-muted); font-size: var(--fs-meta); }

/* ---- Presupuestos de la cuenta (P6) ---- */
.pay-quotes { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.pay-quotes .section-heading { align-items: center; }
.pay-quote-dialog { width: min(1040px, calc(100vw - 48px)); }
.pay-quote-advance { width: min(520px, calc(100vw - 48px)); }
.pay-quote-dialog .ui-dialog-foot { flex-wrap: wrap; }