/* Cashier (design 3.1; batch I1, BATCH-I1-PLAN I1-D10 to I1-D13 and 6.2): the reference is the iPad landscape 1180x820
   (10th gen), with 1080x810 (9th gen) fitting; the iPad portrait 820 and 810 in two columns and a phone in one. Tiers of
   web/platform/tiers.js, mobile first: compact (under 600) one column; medium (600 to 1023) the ticket and the products
   side by side, 386 px each at 820 and 381 at 810, with the rail spanning the row above and its cards 5 across (151.2
   px at 820); wide (1024 up) rail, ticket and products as minmax(240px, 22%) minmax(340px, 30%) minmax(0, 1fr),
   240/340/436 px at 1080 and 252.56/344.4/519.04 at 1180, the rail's cards 2 across (116.0 px at 1080). Product tiles
   minmax(136px, 1fr): 3 across at 1080 (140.0 px) and 1180 (167.68), 4 at 1440, 2 at 820, 810 and 390. The rail holds
   the floor map of the chosen zone (web/platform/floormap.css) only in floor mode, where the map takes the body; with
   a table chosen it shows the zone's card grid. The receipt sheet spans the viewport and centres a 448 px content
   column by its inline padding (I1-D5). The action bar keeps the bottom safe area. Wholly inside @layer app. */
@layer app {
  .cashier-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) var(--space-4); align-items: start; }
  .rail { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
  .cashier-body.is-floor { grid-template-columns: minmax(0, 1fr); }
  .ticket-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .table-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--touch-gap); }
  .table-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-height: var(--table-card-minHeight);
    padding: var(--space-2) var(--space-3); border-radius: var(--table-card-radius); border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font: inherit; text-align: left; cursor: pointer; }
  .table-card.is-selected { outline: 3px solid var(--focus); }
  .table-state { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-200); }
  .ticket { padding: var(--ticket-card-padding); border-radius: var(--ticket-card-radius); background: var(--surface); border: 1px solid var(--border); }
  .totals { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); margin: var(--space-3) 0 0; font-size: var(--font-size-200); }
  .totals dd { margin: 0; text-align: right; }
  .totals .total { font-size: var(--font-size-500); font-weight: 700; }
  .line.is-void { border: 1px dashed var(--border); color: var(--text-muted); }
  .line.is-void .line-name, .line.is-void .qty { text-decoration: line-through; }
  .receipt-ref { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .actionbar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--touch-gap);
    min-height: var(--touch-primary); padding: var(--space-2) var(--space-4); background: var(--surface); border-top: 1px solid var(--border);
    padding-bottom: calc(var(--space-2) + var(--safe-bottom)); }
  .btn-pay { min-height: var(--touch-primary); font-weight: 700; font-size: var(--font-size-400); }
  .seg-group { display: flex; gap: var(--space-1); flex-wrap: wrap; margin: var(--space-2) 0; }
  .seg { min-height: var(--touch-service); padding: 0 var(--space-4); border-radius: var(--radius-m); border: 1px solid var(--border);
    background: var(--surface); color: var(--text); font: inherit; font-size: var(--font-size-300); cursor: pointer; }
  .seg.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .keypad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--touch-gap); margin: var(--space-2) 0; }
  .sheet-block { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-m); }
  .sheet.receipt { padding-inline: max(var(--space-4), calc((100% - 480px) / 2 + var(--space-4))); }
  /* Batch G (g6): the ticket header's tools (Cambiar de mesa, Anular cuenta, Plano), the caja banner, the close
     checklist and the live difference. */
  .ticket-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
  .caja-banner { background: var(--panel); border-bottom: 1px solid var(--border); }
  .caja-checklist .line { flex-wrap: wrap; }
  .caja-diff { font-size: var(--font-size-500); font-weight: 700; margin: var(--space-2) 0; }
  .caja-menu { justify-content: flex-start; }
  /* Batch H (h6): the ticket header's Juntar and Mover líneas on their own row, Anular beside a sent line, the count by
     denomination (label, stepper, quantity, row amount) and the X's head line. */
  .ticket-head { flex-wrap: wrap; }
  .ticket-join { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); flex-basis: 100%; }
  .line-void { margin-left: auto; }
  .count-rows { display: flex; flex-direction: column; gap: var(--space-1); }
  .count-row { display: grid; grid-template-columns: 5em auto 5em auto 1fr; align-items: center; gap: var(--space-2); }
  .count-qty { width: 5em; text-align: center; }
  .count-sub { text-align: right; }
  .x-head { font-size: var(--font-size-400); margin: 0 0 var(--space-2); }
  /* Batch I1 (I1-D10, I1-D11): the Cashier's own tile minimum (base.css's 150 px stays for the other pages), then the
     medium and wide tiers. */
  .app-cashier .products .tiles { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
  @media (min-width: 600px) {
    .cashier-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cashier-body .rail { grid-column: 1 / -1; }
    .table-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  }
  @media (min-width: 1024px) {
    .cashier-body { grid-template-columns: minmax(240px, 22%) minmax(340px, 30%) minmax(0, 1fr); }
    .cashier-body .rail { grid-column: auto; }
    .table-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}