/* 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. Batch R (r2; BATCH-R-PLAN 7.2 item 4,
   batch I1 R7, R-D2): under 600 px floor mode draws the zone as the Handy's card grid (web/handy/plan.css is the model),
   three cards across at (W - 32 - 16) / 3 (104 px at 360, 114 at 390) and 96 px tall, the walls, doors, plants and
   rotation bars hidden and the round tables and stools with the square table's corners, where floormap.css's 24-column
   cells of 13.67 and 14.92 px put every 48 px card over its neighbours, and the 600 block sets each property those rules
   touch back to floormap.css's own value or, where it declares none, the initial one (gap normal, flex-wrap nowrap,
   flex 0 1 auto, the rotation bar's display inline), so floor mode computes as before from 600 up. 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)); }
  /* Batch R (r2): the compact floor mode (the header's batch R sentence). */
  .app-cashier .cashier-body.is-floor .fm-zone { display: flex; flex-wrap: wrap; gap: var(--touch-gap); width: 100%; background: transparent; }
  .app-cashier .cashier-body.is-floor .fm-card { flex: 0 0 calc((100% - 2 * var(--touch-gap)) / 3); width: auto; height: var(--table-card-minHeight); min-height: var(--table-card-minHeight); }
  .app-cashier .cashier-body.is-floor .fm-el, .app-cashier .cashier-body.is-floor .fm-rot { display: none; }
  .app-cashier .cashier-body.is-floor .fm-card.shape-round, .app-cashier .cashier-body.is-floor .fm-card.shape-stool { border-radius: var(--radius-s); }
  /* Batch UNIFY (unC; UNIFY-D6 (a), UNIFY-D9 (a)): the one structure of Juntar, Mover líneas, Mi PIN, Cambiar de mesa and
     the step-up sheet (web/platform/merge.js, pinform.js, moveto.js, stepupsheet.js) on the till: the Handy's rules for its
     classes (web/handy/app.css :55-56, :154-158, :185, :190-195 at 0823878) under .app-cashier, and a disabled table's reason under its name (btn-why).
     Gate round 1 M1 (design/OPUS-batchUNIFY-r1.md): the table chosen in Mover líneas (web/platform/merge.js targetGrid,
     class is-on and aria-pressed="true" inside .grid-tables) takes base.css's chip.is-on colours, keyed on the class and
     on the attribute, so the pick UNIFY-D13 (a) keeps is seen before Mover n sends. */
  .app-cashier .zone-head { font-size: var(--font-size-200); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
    margin: var(--space-4) 0 var(--space-2); }
  .app-cashier .sheet-pin { position: sticky; bottom: calc(-1 * (var(--space-4) + var(--safe-bottom)));
    margin: var(--space-3) calc(-1 * var(--space-4)); margin-bottom: calc(-1 * (var(--space-4) + var(--safe-bottom)));
    padding: var(--space-3) var(--space-4); padding-bottom: calc(var(--space-3) + var(--safe-bottom));
    background: var(--surface); border-top: 1px solid var(--border); }
  .app-cashier .sheet-pin .btn-primary { flex: 1; }
  .app-cashier .sheet-stepup { z-index: 11; }
  .app-cashier .move-lines { list-style: none; margin: 0; padding: 0; }
  .app-cashier .move-line { width: 100%; justify-content: flex-start; border: 0; background: transparent; color: var(--text); text-align: left; }
  .app-cashier .move-line .box { flex: none; width: var(--space-5); height: var(--space-5); border: 2px solid var(--border); border-radius: var(--space-1); }
  .app-cashier .move-line[aria-checked="true"] .box { background: var(--accent); border-color: var(--accent); }
  .app-cashier .move-line:disabled { color: var(--text-muted); }
  .app-cashier .move-line .line-state { margin-left: auto; font-size: var(--font-size-200); }
  .app-cashier .grid-tables .btn-why { flex-direction: column; gap: 0; }
  .app-cashier .grid-tables .btn-why .reason { margin: 0; text-align: center; }
  .app-cashier .grid-tables .btn.is-on, .app-cashier .grid-tables .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  @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)); }
    .app-cashier .cashier-body.is-floor .fm-zone { display: grid; flex-wrap: nowrap; gap: normal; width: max-content; background: var(--floor-zone-bg); }
    .app-cashier .cashier-body.is-floor .fm-card { flex: 0 1 auto; width: 100%; height: 100%; min-height: var(--touch-service); }
    .app-cashier .cashier-body.is-floor .fm-el { display: block; }
    .app-cashier .cashier-body.is-floor .fm-rot { display: inline; }
    .app-cashier .cashier-body.is-floor .fm-card.shape-round, .app-cashier .cashier-body.is-floor .fm-card.shape-stool { border-radius: 50%; }
  }
  @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)); }
  }
}