/* Payment rows (Cobros) and plate chips (Pensionados). The table follows its
   own width (the sidebar eats into the viewport). */
.corte-table { container-type: inline-size; }
.corte-head,
.corte-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.45fr) minmax(0, 0.85fr) minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 12px;
}
.corte-head { padding: 10px 20px; border-block: 1px solid #f0f1ee; background: #fbfbf9; color: #8b958f; font-size: 12px; font-weight: 500; }
.corte-head .is-num,
.corte-num { text-align: right; }
.corte-rows { margin: 0; padding: 0; list-style: none; }
.corte-row { min-height: 46px; padding: 9px 20px; border-bottom: 1px solid #f3f4f1; box-sizing: border-box; color: #10201a; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.corte-row:last-child { border-bottom: 0; }
.corte-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.corte-tag { padding: 1px 7px; border-radius: 6px; background: #f6efdf; color: #8a5a1c; font-size: 11.5px; font-weight: 500; }
.corte-plate { justify-self: start; padding: 3px 8px; border: 1px solid rgba(16, 32, 26, 0.08); border-radius: 7px; background: #f3f4f1; font-family: var(--font-mono); font-size: 12.5px; font-weight: 550; letter-spacing: 0.04em; white-space: nowrap; }
.corte-plate.is-empty { font-family: inherit; color: #9aa39d; letter-spacing: 0; }
.corte-tender { color: #5f6b64; }
.corte-paid { font-weight: 550; }
.corte-refunded { color: #b9603f; }
.corte-refunded.is-empty { color: #c5ccc8; }
.corte-row.is-refunded .corte-paid { color: #9aa39d; font-weight: 400; text-decoration: line-through; }

@container (max-width: 720px) {
  .corte-head { display: none; }
  .corte-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "plate paid"
      "when tender"
      "refunded refunded";
    gap: 6px 10px;
    padding: 12px 16px;
  }
  .corte-plate { grid-area: plate; }
  .corte-paid { grid-area: paid; font-size: 15px; }
  .corte-when { grid-area: when; color: #7b867f; font-size: 12.5px; }
  .corte-tender { grid-area: tender; justify-self: end; font-size: 12.5px; }
  .corte-refunded { grid-area: refunded; justify-self: start; font-size: 12.5px; }
  .corte-refunded::before { content: "Reembolsado "; }
  .corte-row > .corte-refunded.is-empty { display: none; }
}