/* «Cuentas» — saldo y comprobantes por CUENTA CONTABLE de Odoo (ADR-030, docs/contrato-cuentas.md).
   -----------------------------------------------------------------------------------------------
   Un cliente puede deber en «Cuenta 1» y tener saldo a favor en «Cuenta 999» al mismo tiempo — el
   neto que ya muestra el rail (`.rail-saldo`/`.rs-*`) las mezcla, y esconde exactamente eso: medido
   contra Odoo, 39 partners con saldo en 2+ cuentas, 24 mixtos. Este archivo es SOLO el bloque nuevo
   (`.cta-*`); el rail sigue mostrando el neto en `.rail-card`/`.rail-row` de app.css, sin tocarlos —
   acá no se repite un total (§4.1 nº6/nº11).

   ⚠️ NINGÚN color nuevo: todo sale de `tokens.css`. `--red-text`/`--green-text` ya están medidos con
   la fórmula WCAG en los dos temas (ver el comentario de cheques.css, mismo hallazgo); acá se
   reusan sobre `--surface`/`--surface-2`, que es donde ya se miden en cheques.css.

   El signo NUNCA se muestra con un menos delante (§2 del contrato): la palabra («Debe» / «A favor»
   / «Sin saldo») y el color dicen el signo, sobre el valor ABSOLUTO. */

/* ---- Bloque "Comprobantes por cuenta": un <details> por cuenta ------------------------------- */
.cta-acc { border-top: .5px solid var(--hairline); }
.cta-acc:first-child { border-top: 0; }
/* Blanco táctil de 44px por el propio summary (mismo patrón que `details.chq-det > summary` de
   cheques.css): el sumario ES la fila, agrandar con padding no descoloca nada más. */
.cta-acc-hd {
  cursor: pointer; padding: var(--sp-2) var(--sp-4); min-height: 44px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 600 var(--fs-sm)/1.4 var(--font); color: var(--text-1);
  list-style: none;
}
.cta-acc-hd::-webkit-details-marker { display: none; }
.cta-acc-saldo { font: 700 var(--fs-sm)/1.3 var(--font); }
.cta-acc-saldo.due   { color: var(--red-text); }
.cta-acc-saldo.favor { color: var(--green-text); }
/* Ítem: valor absoluto + palabra («Debe» / «A favor»), color por signo — contrato §2. */
.cta-amt.due   { color: var(--red-text); }
.cta-amt.favor { color: var(--green-text); }
.cta-amt-word  { font-weight: 500; font-size: 12px; }

.cta-empty { padding: 0 var(--sp-4) var(--sp-3); font: 400 12px/1.4 var(--font); color: var(--text-2); }

/* ---- Lista de comprobantes (patrón `.chq-row`/`.chq-name`/`.chq-meta` de cheques.css) --------- */
.cta-list { padding: 0 var(--sp-4) var(--sp-2); }
.cta-row {
  display: flex; justify-content: space-between; gap: 10px; padding: 8px 0;
  border-top: .5px solid var(--hairline); align-items: flex-start;
}
.cta-row:first-child { border-top: 0; }
.cta-row-main { min-width: 0; }
/* Nombre a ancho completo en su propio renglón, meta abajo (§4.1 nº12): el número de comprobante
   NUNCA se corta con ellipsis sin `title` — un comprobante truncado se lee como uno que no existe. */
.cta-name { font: 600 var(--fs-sm)/1.35 var(--font); color: var(--text-1); }
.cta-meta { font: 400 12px/1.4 var(--font); color: var(--text-2); margin-top: 2px; }
.cta-meta .chip.mini { vertical-align: middle; margin: 1px 0; }
.cta-amt {
  font: 600 var(--fs-sm)/1.35 var(--font); white-space: nowrap; text-align: right; color: var(--text-1);
}

/* ---- Celular: la fila se apila (mismo umbral que `.chq-row`) ---------------------------------- */
@media (max-width: 500px) {
  .cta-row { flex-direction: column; gap: 4px; }
  .cta-amt { text-align: left; }
}

/* ---- «Saldo» arriba de la pestaña Cuenta (F7, 2026-09-13): total + una tile por cuenta -------- */
.cta-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); padding: var(--sp-2) var(--sp-4) 0; }
/* Fondo --surface y NO --surface-2: medido en oscuro (13/9) el rojo sobre --surface-2 da 4,02:1 —
   mismo hallazgo que los KPIs de cheques el 12/9; sobre --surface llega a AA. */
.cta-head-tile { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); background: var(--surface); min-width: 0; }
.cta-head-tile.big { grid-column: 1 / -1; }
.cta-head-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.cta-head-val { font: 800 21px/1.15 var(--font); letter-spacing: -.02em; color: var(--text-1); margin-top: 2px; }
.cta-head-tile.big .cta-head-val { font-size: 28px; }
.cta-head-val.empty { color: var(--text-3); font-size: 16px; }
/* Signo por palabra + color sobre el valor absoluto (contrato §2). Los ratios de --red-text /
   --green-text sobre --surface-2 son los que ya midió cheques.css en los dos temas. */
.cta-head-tile.due .cta-head-val   { color: var(--red-text); }
.cta-head-tile.favor .cta-head-val { color: var(--green-text); }
.cta-head-word { font: 600 12px/1.3 var(--font); color: var(--text-2); margin-top: 2px; }
.cta-head-foot { padding: var(--sp-2) var(--sp-4) var(--sp-3); }
.cta-head-link { color: var(--blue-text); text-decoration: none; font-weight: 600; }