fix(web): stop large balances clipping on the statement page

TRASPASOS PAYPAL's 7-figure balances exposed three layout bugs on
/estado-cuenta/[id], all invisible on normal small-figure customers:

- summary/línea cards: `summary-grid` uses auto-fill, so a single- or
  two-currency card never widens past the min track (~190px) however wide
  the page is. The 24px nowrap headline (-$7,028,533.44) overflowed the
  card border. Widen the min track to 260px so the figure fits in full,
  and drop the size to 22px. Explicitly no ellipsis — a truncated money
  figure reads as a wrong number.
- `concept-list` had no horizontal padding (`.card` carries none), so the
  concept totals sat flush on the card border. Pad it.
- the Cargo/Abono direction label was an inline span glued to the amount;
  make it a block so it drops onto its own line. Same fix applied to the
  movement-list page for consistency.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

apps/web/src/app/estado-cuenta/[id]/page.tsx

@@ -448,7 +448,7 @@ function StatementRow({ m }: { m: StatementMovement }) {
         <span className={`tx-amount ${m.direction === "charge" ? "neg" : "pos"}`}>
           {formatMoney(m.amount, m.currency)}
         </span>
-        <span className="tx-cur">{directionLabel(m.direction)}</span>
+        <div className="tx-cur">{directionLabel(m.direction)}</div>
       </td>
       <td className="num">
         <span className={`bal-running ${balanceTone(m.balanceAfter)}`}>

apps/web/src/app/estado-cuenta/page.tsx

@@ -772,9 +772,9 @@ function MovementRow({ m }: { m: MovementListItem }) {
         <span className={`tx-amount ${m.direction === "charge" ? "neg" : "pos"}`}>
           {formatMoney(m.amount, m.currency)}
         </span>
-        <span className="tx-cur">
+        <div className="tx-cur">
           {m.currency} · {directionLabel(m.direction)}
-        </span>
+        </div>
       </td>
     </tr>
   );

apps/web/src/app/globals.css

@@ -1270,7 +1270,10 @@ button {
    ========================================================================== */
 .summary-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+  /* Min track holds a 7-figure balance (e.g. TRASPASOS PAYPAL's -$7,028,533.44)
+     in full — auto-fill packs fixed-width tracks, so a single-currency card
+     never widens on its own and the min is what has to fit the number. */
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 12px;
   margin-bottom: 18px;
 }
@@ -1302,11 +1305,13 @@ button {
 }
 .summary-total {
   font-family: var(--font-display);
-  font-size: 24px;
+  font-size: 22px;
   font-weight: 560;
   margin-top: 8px;
   font-feature-settings: "tnum" 1;
   color: var(--ink);
+  /* Never truncate a balance — a clipped money figure reads as a wrong number.
+     The track width above is what keeps it inside the card. */
 }
 .summary-count {
   font-size: 12px;
@@ -1988,10 +1993,12 @@ button {
   color: var(--ink);
 }
 
-/* Charges broken out by concept, with a proportional bar. */
+/* Charges broken out by concept, with a proportional bar. `.card` carries no
+   padding, so the list pads itself — otherwise the total sits on the border. */
 .concept-list {
   display: flex;
   flex-direction: column;
+  padding: 4px 16px;
 }
 .concept-row {
   display: grid;