:where(.table) {
  caption-side: bottom;
  font-size: var(--text-sm);
  inline-size: var(--size-full);

  caption {
    color: var(--color-text-subtle);
    margin-block-start: var(--size-4);
  }

  thead {
    color: var(--color-text);
  }

  tbody tr {
    border-block-start-width: var(--border);
  }

  tr:hover {
    background-color: rgb(from var(--color-border-light) r g b / .5);
  }

  th {
    font-weight: var(--font-medium);
    text-align: start;
  }

  th, td {
    padding: var(--size-2);
  }

  tfoot {
    background-color: rgb(from var(--color-border-light) r g b / .5);
    border-block-start-width: var(--border);
    font-weight: var(--font-medium);
  }
}

/* The owner's cross-firm saldos page. A firm in the red is still being served (CREDITS_ENFORCED was
   unset in production when the owner sat at -$25.639,74), so a negative balance has to be findable
   by scanning the column, not by reading each number. */
.saldos__balance {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.saldos__balance--negative {
  color: var(--color-negative);
}

.saldos__shared {
  display: block;
  font-size: 0.8rem;
  opacity: 0.75;
}

.saldos__section {
  margin-block: 1.5rem;
}

/* The reversa sits in the carga's own row, because a reversal names the credit it undoes and a
   button anywhere else would need the reference typed again. Plain rather than primary: undoing a
   load is a correction, not the thing this page is for.

   There is no rule here on purpose. `.saldos__revertir { margin-inline-start: auto }` was, and did
   nothing: button_to renders a FORM, the class lands on the button inside it, .btn is inline-flex
   so an auto margin computes to 0, and the li is not a flex box either. pretor-plans.css records
   the same trap. Pushing the button to the end of its row needs the li made a flex row AND the
   margin moved onto the form, which changes how every one of these rows looks -- a call for
   someone looking at the page, not for a rule that reads as if it already happened. */

.saldos__movements {
  font-variant-numeric: tabular-nums;
}
