/* Cuentas and Patrimonio (js/views/accounts.js). */

/* UX Cuentas: each account shows its balance and each card what it owes and when it
   is due, with the action next to it. Touch targets of at least 40px in this view. */
.acc-head .btn, .acc-section .btn.small { min-height: 40px; }
.acc-total { margin-top: 2px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text); }
.acc-item { align-items: flex-start; }
.acc-item > .avatar { margin-top: 2px; }
.acc-item .main { display: grid; gap: 4px; }
.acc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.acc-top .title { padding-top: 8px; }
.acc-icon-btn { min-width: 40px; padding: 0; margin-right: -8px; flex: none; }
.acc-icon-btn svg { width: 18px; height: 18px; }
.acc-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.acc-amounts { display: grid; }
.acc-amounts .amount { text-align: left; font-size: 1.15rem; letter-spacing: -0.01em; }
.acc-when { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.acc-history > summary { padding: 10px 0; cursor: pointer; color: var(--accent); font-weight: 650; }
.acc-history > .list { border-radius: 12px; background: var(--panel-2); padding: 0 12px; }
.acc-statement { align-items: flex-start; }
.acc-side { display: grid; justify-items: end; gap: 4px; }
.acc-paid { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acc-archived-title { display: inline; font-size: 1rem; }
.acc-archived[open] > summary { margin-bottom: 8px; }
.acc-link { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; }

/* UX Cuentas: archivadas plegadas al final y aviso de transferencias sin dirección en cada cuenta */
.acc-archived > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--accent); font-weight: 650; }
.acc-archived > p { margin: 0 0 6px; }
.acc-archived .item { align-items: center; }
.acc-archived .btn.small { min-height: 40px; flex: none; }
.acc-unclassified { padding: 8px 10px; margin-top: 2px; }
.acc-unclassified a { color: inherit; font-weight: 650; text-decoration: underline; }

/* Patrimonio and Inversiones in Cuentas (js/views/accounts.js). */
.net-worth .kv-list { display: grid; gap: 6px; margin-top: 8px; }
.net-worth .kv { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.net-worth .kv b { white-space: nowrap; }
.net-worth-total { font-size: 1.15rem; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--text); }

/* UX Cuentas: the net worth breakdown folds under its total, with a 40px summary like the statements history. */
.net-worth-detail { margin-top: 4px; }
.net-worth-detail > summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; color: var(--accent); font-weight: 650; }
.net-worth-detail > .kv-list { margin-top: 2px; }
.net-worth-detail > p { margin: 8px 0 0; }

/* UX Cuentas: negative amounts (an overdraft, a net worth below zero) in red; "Ver movimientos"
   under each account and card; the folding summaries (Patrimonio, Archivadas, Resúmenes) show one
   chevron, since display: flex hides the native triangle (Safari's own marker is hidden so only one
   shows); "Resúmenes (N)" on a 40px row; the empty states of bancos and tarjetas offer creating one
   by hand next to importing it. */
.acc-neg { color: var(--bad); }
.acc-item > .main > .acc-link { justify-self: start; margin-top: -4px; }
.acc-history > summary { display: flex; align-items: center; min-height: 40px; padding: 0; }
.net-worth-detail > summary, .acc-archived > summary, .acc-history > summary { gap: 8px; list-style: none; }
.net-worth-detail > summary::-webkit-details-marker, .acc-archived > summary::-webkit-details-marker, .acc-history > summary::-webkit-details-marker { display: none; }
.net-worth-detail > summary::after, .acc-archived > summary::after, .acc-history > summary::after {
  content: ''; flex: none; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.net-worth-detail[open] > summary::after, .acc-archived[open] > summary::after, .acc-history[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.acc-history[open] > summary { margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) {
  .net-worth-detail > summary::after, .acc-archived > summary::after, .acc-history > summary::after { transition: none; }
}
.acc-empty-actions { justify-content: center; }