/* ═══════════════════════════════════════════════════════════════════════════
   BOLETO — Morritos Snacks POS design system
   ───────────────────────────────────────────────────────────────────────────
   Core metaphor: the app IS a receipt on a counter.
   Two surfaces — cream paper + espresso wood — joined by a perforated tear.
   Three voices — Alfa Slab (stamped), Barlow Condensed (UI), Space Mono (print).
   B/R/W palette, both poles softened, red a jewel only on prices/stamps/warnings.
   Every component below composes into every screen. Nothing page-specific lives
   here — page specifics go in the page's own small <style> block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ Self-hosted fonts (WOFF2, Latin subset) ═══════════════════════════════
   Landed under /static/fonts/ from Google's CDN. Removes the external CDN
   dependency — production never reaches fonts.googleapis.com. */

@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/alfa-slab-one-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-700-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-800-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/space-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/space-mono-700-latin.woff2') format('woff2');
}

/* Opt in to cross-document view transitions. Navigations within the same origin
   animate natively — the brand stamp in the top-bar and the masthead title
   morph between pages, everything else crossfades. Baseline 2024 (Chromium 126,
   Safari 18, Firefox 128). Browsers that don't support it just hard-cut. */
@view-transition { navigation: auto; }

/* ─── DESIGN FRAMEWORK ───────────────────────────────────────────
   Boleto uses framework-shaped token names (--paper, --ink, --accent)
   and overlapping layer names (reset, tokens, components, utilities)
   already, so this @import slots in cleanly. Boleto's print + receipt
   styling is unaffected because lib/design/print.css is OPT-IN
   (not loaded by index.css). */
@import url("/static/design/index.css");

@layer reset, tokens, surfaces, type, components, motion, utilities;

/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */
@layer tokens {
  :root {
    /* ─ Palette: B/R/W, softened poles ─ */
    --paper:         #EFE5D1;  /* aged-receipt cream — the "white" pole */
    --paper-edge:    #E5D8BB;  /* paper's shadow edge */
    --paper-2:       #E8DCC0;  /* slightly darker cream for cards on paper */
    --ink:           #1A110E;  /* deep espresso — the "black" pole */
    --ink-2:         #25180F;  /* slightly lighter counter tone */
    --cream:         #EFE5D1;  /* same as paper; used when on counter */
    --red:           #C42518;  /* brand red */
    --red-hi:        #D93020;
    --red-lo:        #8A1A10;  /* deep red for accents on paper */
    --stamp-green:   #1E5E3C;  /* only used for "CUADRADO" / confirmed stamps */
    --stamp-green-hi:#2A7B50;

    /* ─ Alpha companions (for lines, dims, ghosts) ─ */
    --ink-dim:       rgb(26 17 14 / 0.55);
    --ink-soft:      rgb(26 17 14 / 0.36);
    --ink-line:      rgb(26 17 14 / 0.22);
    --ink-dot:       rgb(26 17 14 / 0.34);
    --ink-ghost:     rgb(26 17 14 / 0.08);
    --cream-dim:     rgb(239 229 209 / 0.55);
    --cream-soft:    rgb(239 229 209 / 0.36);
    --cream-line:    rgb(239 229 209 / 0.14);
    --cream-ghost:   rgb(239 229 209 / 0.06);

    /* ─ Type trio ─ */
    --ff-display: 'Alfa Slab One', Georgia, serif;
    --ff-ui:      'Barlow Condensed', system-ui, sans-serif;
    --ff-mono:    'Space Mono', ui-monospace, 'Courier New', monospace;

    /* ─ Type scale (use clamp for fluid where it matters) ─ */
    --fs-xs:   11px;
    --fs-sm:   13px;
    --fs-md:   15px;
    --fs-lg:   18px;
    --fs-xl:   22px;
    --fs-2xl:  28px;
    --fs-3xl:  34px;
    --fs-4xl:  clamp(40px, 10vw, 56px);
    --fs-hero: clamp(56px, 16vw, 84px);

    /* ─ Space scale ─ */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  26px;
    --s-7:  34px;
    --s-8:  44px;

    /* ─ Radius — small by design. Receipts have corners, not pills. ─ */
    --r-xs: 2px;
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;
    --r-pill: 999px;

    /* ─ Motion ─ */
    --t-press:  80ms;
    --t-fast:  140ms;
    --t-std:   220ms;
    --t-enter: 380ms;
    --t-exit:  260ms;
    --e-std:  ease;
    --e-out:  cubic-bezier(0.2, 0, 0, 1);
    --e-back: cubic-bezier(0.4, 0, 1, 1);
    --e-sheet:cubic-bezier(0.32, 0.72, 0, 1);

    /* ─ Grain textures — SVG inline, reused everywhere ─ */
    --grain-paper:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --grain-wood:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.015 0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.86  0 0 0 0 0.74  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --grain-stamp:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════════════════════════════════════ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    font-family: var(--ff-ui);
    font-weight: 500;
    color: var(--ink);
    background: var(--ink);
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
  }
  a { color: inherit; text-decoration: none; }
  button {
    cursor: pointer; font-family: inherit;
    border: none; background: none; color: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  input, select, textarea {
    font-family: inherit; color: inherit; background: transparent;
    border: none; outline: none;
  }
  ul, ol { list-style: none; }
  img, svg { display: block; max-width: 100%; }
  ::-webkit-scrollbar { width: 0; height: 0; }
  :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: var(--r-xs); }

  /* Native checkbox + radio pick up brand red. The handler emits raw
     <input type="checkbox"> markup for admin toggles (active_input, etc.);
     without this default they render browser-blue and break the palette. */
  input[type="checkbox"], input[type="radio"] { accent-color: var(--red); }

  /* iOS zoom guard — 16px on every input, every viewport. Tablet portrait
     (768–1024) still triggers iOS zoom below 16px, and desktop never minds. */
  input, select, textarea { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SURFACES — paper, counter, tear
   The two physical grounds of the app. Every page picks one or both.
   ═══════════════════════════════════════════════════════════════════════════ */
@layer surfaces {

  /* Cream paper surface. Grain overlay at 9% multiply. */
  .surface-paper {
    background-color: var(--paper);
    color: var(--ink);
    position: relative;
    background-image:
      radial-gradient(ellipse at 20% 10%, rgb(26 17 14 / 0.04), transparent 40%),
      radial-gradient(ellipse at 80% 90%, rgb(26 17 14 / 0.05), transparent 50%);
  }
  .surface-paper::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    opacity: 0.09; mix-blend-mode: multiply;
    background-image: var(--grain-paper);
  }
  .surface-paper > * { position: relative; z-index: 1; }

  /* Espresso counter surface. Faint vertical wood-grain overlay. */
  .surface-counter {
    background-color: var(--ink);
    color: var(--cream);
    position: relative;
  }
  .surface-counter::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    opacity: 0.05; mix-blend-mode: lighten;
    background-image: var(--grain-wood);
  }
  .surface-counter > * { position: relative; z-index: 1; }

  /* Perforated top edge — half-circle cutouts. Apply to paper surfaces that sit
     below a counter surface. The cutouts reveal whatever's above. */
  .tear-top {
    position: relative;
  }
  .tear-top::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 10px;
    background: var(--_tear-bg, var(--ink));
    -webkit-mask-image: radial-gradient(circle 5px at 6px 0, transparent 5px, #000 5.5px);
    mask-image: radial-gradient(circle 5px at 6px 0, transparent 5px, #000 5.5px);
    -webkit-mask-size: 12px 10px;
    mask-size: 12px 10px;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    z-index: 2;
  }

  /* Perforated bottom edge — mirror of tear-top. */
  .tear-bottom {
    position: relative;
  }
  .tear-bottom::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 10px;
    background: var(--_tear-bg, var(--ink));
    -webkit-mask-image: radial-gradient(circle 5px at 6px 10px, transparent 5px, #000 5.5px);
    mask-image: radial-gradient(circle 5px at 6px 10px, transparent 5px, #000 5.5px);
    -webkit-mask-size: 12px 10px;
    mask-size: 12px 10px;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    z-index: 2;
  }

  /* Full-screen shell. Most pages use this as the outermost container. */
  .page {
    display: flex; flex-direction: column;
    height: 100svh; overflow: hidden;
  }

  /* Wide-viewport frame — prevents stretching on tablet/desktop. */
  @media (min-width: 760px) {
    .page {
      max-width: 420px; margin-inline: auto;
      box-shadow: 0 0 48px rgb(0 0 0 / 0.6);
    }
  }

  /* Laptop counter — the ticket is in hand on phone; at ≥1024px the counter
     the ticket has been resting on finally comes into frame. POS routes keep
     the 420px cap (.page without .admin-shell). Admin routes lift it and
     become the wood surface, so content templates can lay documents across
     a real working width. Wood grain rides on the shell itself, so document
     cards dropped on top (cream paper) read as laid on the counter. */
  @media (min-width: 1024px) {
    .page.admin-shell {
      max-width: min(1440px, 100vw);
      background-color: var(--ink);
      box-shadow: 0 0 64px rgb(0 0 0 / 0.55);
    }
    .page.admin-shell::before {
      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
      opacity: 0.06; mix-blend-mode: lighten;
      background-image: var(--grain-wood);
    }
    .page.admin-shell > * { position: relative; z-index: 1; }

    .page.admin-shell .top-bar,
    .page.admin-shell .nav-bar {
      padding-inline: var(--s-7);
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPE — the three voices as reusable utilities
   ═══════════════════════════════════════════════════════════════════════════ */
@layer type {

  /* The brand stamp — "Morritos" with red "i". Used on every screen's header. */
  .stamp {
    font-family: var(--ff-display);
    font-size: var(--fs-2xl);
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .stamp em { color: var(--red); font-style: normal; }
  .stamp--lg { font-size: var(--fs-3xl); }
  .stamp--hero { font-size: var(--fs-4xl); }

  /* View-transition anchors — the stamp in the top-bar morphs between pages,
     the masthead title crossfades. One name per role; collisions would cause
     both to disappear during the transition. */
  .top-bar .stamp { view-transition-name: brand-topbar; }
  .masthead__title { view-transition-name: page-title; }

  /* Display headings — Alfa Slab, big. */
  .hd-display {
    font-family: var(--ff-display);
    font-size: var(--fs-3xl);
    line-height: 0.95;
    letter-spacing: -0.02em;
  }

  /* Masthead — newspaper-scale date heading. */
  .hd-masthead {
    font-family: var(--ff-display);
    font-size: var(--fs-hero);
    line-height: 0.88;
    letter-spacing: -0.03em;
  }

  /* Section heading — Barlow Condensed caps, tracked. */
  .hd-caps {
    font-family: var(--ff-ui);
    font-weight: 800;
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .hd-caps--md { font-size: var(--fs-sm); }
  .hd-caps--lg { font-size: var(--fs-md); }

  /* Receipt metadata — Space Mono. */
  .meta-mono {
    font-family: var(--ff-mono);
    font-weight: 400;
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Inline price — Alfa Slab red. */
  .price {
    font-family: var(--ff-display);
    color: var(--red);
    letter-spacing: -0.01em;
  }
  .price--lg { font-size: var(--fs-2xl); }
  .price--xl { font-size: var(--fs-3xl); }
  .price--hero { font-size: var(--fs-4xl); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTS — composable pieces every page builds from
   ═══════════════════════════════════════════════════════════════════════════ */
@layer components {

  /* ───────────────────────────────────────────────────────────────────────
     RECEIPT — the cream paper container
     Variants: default, compact (dashboard briefs), full-screen (ticket)
     ─────────────────────────────────────────────────────────────────────── */
  .receipt {
    display: flex; flex-direction: column;
    padding: var(--s-6) var(--s-5) var(--s-4);
    min-height: 0;
  }
  .receipt__brand {
    text-align: center;
  }
  .receipt__meta {
    display: flex; justify-content: space-between; align-items: baseline;
    color: var(--ink-dim);
    margin-top: var(--s-2);
    padding-bottom: var(--s-3);
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .receipt__meta > :last-child { color: var(--ink); font-weight: 700; }
  .receipt__rule {
    border: none;
    border-top: 1px dashed var(--ink-dot);
    margin-block: var(--s-1) var(--s-3);
  }
  .receipt__lines {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: flex; flex-direction: column;
    gap: var(--s-2);
    padding-bottom: var(--s-2);
    scrollbar-width: none;
  }
  .receipt__totals {
    display: flex; flex-direction: column;
    gap: var(--s-1);
    padding-top: var(--s-3);
    border-top: 1px dashed var(--ink-dot);
  }
  .receipt__subtotal {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .receipt__total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: var(--s-1);
  }
  .receipt__total-lbl {
    font-family: var(--ff-ui);
    font-weight: 800;
    font-size: var(--fs-md);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .receipt__total-amt {
    font-family: var(--ff-display);
    font-size: var(--fs-3xl);
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .receipt__cta {
    align-self: center;
    margin-top: var(--s-4);
  }

  /* Detail receipt — a full-size paper card used on order_detail, success
     pages, confirm dialogs. Compose with `class="detail-receipt surface-paper"`.
     Pages can override margin/padding/shadow in their own @scope block. */
  .detail-receipt {
    margin: var(--s-4) var(--s-4) var(--s-3);
    border-radius: var(--r-sm);
    padding: var(--s-6) var(--s-5) var(--s-4);
    box-shadow: 0 3px 0 rgb(0 0 0 / 0.35), 0 6px 20px rgb(0 0 0 / 0.2);
  }

  /* ───────────────────────────────────────────────────────────────────────
     LEDGER ROW — the dotted-leader price line
     Used in: receipts, cierre summaries, historial, reports, anywhere a
     qty·name···amt pattern appears.
     ─────────────────────────────────────────────────────────────────────── */
  .ledger-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: baseline;
    gap: var(--s-1);
  }
  .ledger-row__qty {
    font-family: var(--ff-mono);
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--ink);
  }
  .ledger-row__name-wrap {
    position: relative;
    overflow: hidden;
    display: flex; align-items: baseline;
    padding-right: var(--s-2);
  }
  .ledger-row__name {
    font-family: var(--ff-ui);
    font-weight: 700;
    font-size: var(--fs-md);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
    white-space: nowrap;
    background: var(--paper);
    padding-right: var(--s-1);
  }
  .ledger-row__leader {
    flex: 1;
    border-top: 2px dotted var(--ink-dot);
    transform: translateY(-4px);
  }
  .ledger-row__amt {
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    color: var(--ink);
    letter-spacing: -0.01em;
    padding-left: var(--s-1);
    background: var(--paper);
  }
  .ledger-row__mods {
    grid-column: 2 / -1;
    font-family: var(--ff-mono);
    font-weight: 400;
    font-size: var(--fs-xs);
    color: var(--ink-dim);
    letter-spacing: 0.02em;
    margin-top: var(--s-1);
    padding-left: var(--s-2);
    text-transform: none;
  }
  .ledger-row--voided .ledger-row__name,
  .ledger-row--voided .ledger-row__amt { text-decoration: line-through; color: var(--ink-dim); }

  /* Cream variant — for ledger rows displayed on counter surfaces. */
  .surface-counter .ledger-row__name,
  .surface-counter .ledger-row__amt { background: var(--ink); color: var(--cream); }
  .surface-counter .ledger-row__qty { color: var(--cream); }
  .surface-counter .ledger-row__leader { border-top-color: var(--cream-soft); }
  .surface-counter .ledger-row__mods { color: var(--cream-dim); }

  /* Paper variant — must come AFTER counter variant so it wins source-order ties
     when a paper card is nested inside a counter page (e.g. order_detail). */
  .surface-paper .ledger-row__name,
  .surface-paper .ledger-row__amt { background: var(--paper); color: var(--ink); }
  .surface-paper .ledger-row__qty { color: var(--ink); }
  .surface-paper .ledger-row__leader { border-top-color: var(--ink-dot); }
  .surface-paper .ledger-row__mods { color: var(--ink-dim); }

  /* ───────────────────────────────────────────────────────────────────────
     STAMP BUTTON — the rubber-stamp CTA
     Variants: red (default/primary), green (confirm/cuadrado),
               gray (neutral/cancel)
     Sizes:    default, lg (hero Cobrar), sm (inline actions)
     ─────────────────────────────────────────────────────────────────────── */
  .stamp-btn {
    --_stamp-color: var(--red);
    --_stamp-color-hi: var(--red-hi);
    display: inline-block;
    padding: var(--s-2) var(--s-6) 11px;
    border: 3px solid var(--_stamp-color);
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--_stamp-color);
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    transform: rotate(-2.5deg);
    transition: transform 160ms var(--e-out), color 120ms;
    position: relative;
    cursor: pointer;
  }
  .stamp-btn::before {
    content: ''; position: absolute; inset: -3px;
    background-image: var(--grain-stamp);
    opacity: 0.25; mix-blend-mode: lighten;
    pointer-events: none; border-radius: var(--r-xs);
  }
  .stamp-btn:hover { transform: rotate(-2.5deg) scale(1.03); color: var(--_stamp-color-hi); border-color: var(--_stamp-color-hi); }
  .stamp-btn:active { transform: rotate(-2.5deg) scale(0.97); }
  /* Focus ring — default global ring is red, which collides with red-bordered
     stamp-btns. Bump offset so the ring reads as separate from the border. */
  .stamp-btn:focus-visible { outline-offset: 5px; }
  /* Disabled / submitting — flatten rotation, damp opacity, kill pointer.
     Paired with the form-submit handler in admin/_layout.html which sets
     `disabled` while a save is in flight. */
  .stamp-btn:disabled {
    opacity: 0.5;
    transform: rotate(0deg);
    cursor: not-allowed;
    pointer-events: none;
  }

  .stamp-btn__sub {
    display: block;
    font-family: var(--ff-mono);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.3em;
    margin-top: var(--s-1);
    text-align: center;
  }

  .stamp-btn--lg {
    padding: var(--s-3) var(--s-7) 13px;
    font-size: var(--fs-2xl);
  }
  .stamp-btn--sm {
    padding: 6px var(--s-4) 7px;
    font-size: var(--fs-md);
    border-width: 2px;
  }

  .stamp-btn--green {
    --_stamp-color: var(--stamp-green);
    --_stamp-color-hi: var(--stamp-green-hi);
  }
  .stamp-btn--ink {
    --_stamp-color: var(--ink);
    /* Hover lifts ink toward cream by 14% — enough to register without
       drifting into gray. Composed from tokens, per DESIGN.md. */
    --_stamp-color-hi: color-mix(in oklab, var(--ink), var(--cream) 14%);
  }
  .stamp-btn--cream {
    --_stamp-color: var(--cream);
    /* Hover brightens cream by 10% white — stays within the paper pole. */
    --_stamp-color-hi: color-mix(in oklab, var(--cream), white 10%);
  }

  /* Static stamps — for decoration, not buttons (e.g., "CERRADO" on cierre) */
  .stamp-mark {
    display: inline-block;
    padding: var(--s-2) var(--s-5) 9px;
    border: 3px solid var(--red);
    border-radius: var(--r-xs);
    color: var(--red);
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    transform: rotate(-4deg);
    position: relative;
  }
  .stamp-mark::before {
    content: ''; position: absolute; inset: -3px;
    background-image: var(--grain-stamp);
    opacity: 0.3; mix-blend-mode: lighten;
    pointer-events: none; border-radius: var(--r-xs);
  }
  .stamp-mark--green { border-color: var(--stamp-green); color: var(--stamp-green); transform: rotate(3deg); }
  .stamp-mark--ink { border-color: var(--ink); color: var(--ink); }
  .stamp-mark--cream { border-color: var(--cream); color: var(--cream); }
  .stamp-mark--lg { font-size: var(--fs-2xl); padding: var(--s-3) var(--s-6) 11px; }

  /* ───────────────────────────────────────────────────────────────────────
     CATEGORY PILL BAR — horizontal-scroll selector
     ─────────────────────────────────────────────────────────────────────── */
  .cat-bar {
    display: flex; gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    flex-shrink: 0;
  }
  .cat-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 6px var(--s-4) 7px;
    border: 1px solid var(--_pill-line, var(--cream-line));
    border-radius: var(--r-pill);
    font-family: var(--ff-ui);
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--_pill-color, var(--cream));
    white-space: nowrap;
    background: transparent;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  }
  .cat-pill:hover { border-color: var(--_pill-color, var(--cream)); }
  .cat-pill--on {
    background: var(--_pill-color, var(--cream));
    border-color: var(--_pill-color, var(--cream));
    color: var(--_pill-on-text, var(--ink));
  }
  /* On paper surfaces: pills are ink-on-paper */
  .surface-paper .cat-pill {
    --_pill-color: var(--ink);
    --_pill-line: var(--ink-line);
    --_pill-on-text: var(--paper);
  }

  /* ───────────────────────────────────────────────────────────────────────
     PICKER ROW — the typographic product list row (never a grid)
     ─────────────────────────────────────────────────────────────────────── */
  .pick-list {
    flex: 1; overflow-y: auto;
    padding: 2px 0 var(--s-2);
    scrollbar-width: none;
    mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
  }
  .pick-list__item { list-style: none; }
  .pick-row {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--_row-line, var(--cream-line));
    text-align: left;
    transition: background var(--t-press), transform var(--t-press);
    position: relative;
    overflow: hidden;
    background: transparent;
  }
  .pick-row::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--red);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--t-fast);
  }
  .pick-row:hover { background: var(--_row-hover, var(--cream-ghost)); }
  .pick-row:hover::after { transform: scaleX(1); }
  .pick-row:active { transform: translateX(2px); }
  .pick-row__name {
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    letter-spacing: -0.01em;
    color: var(--_row-color, var(--cream));
    line-height: 1;
  }
  .pick-row__price {
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    color: var(--red);
    letter-spacing: -0.01em;
    line-height: 1;
    flex-shrink: 0;
  }
  .pick-row--hot {
    background: rgb(196 37 24 / 0.08);
  }
  .pick-row--hot::before {
    content: '•';
    position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    color: var(--red); font-size: var(--fs-xl); line-height: 1;
  }
  /* Paper variant */
  .surface-paper .pick-row {
    --_row-line: var(--ink-line);
    --_row-color: var(--ink);
    --_row-hover: var(--ink-ghost);
  }

  /* ───────────────────────────────────────────────────────────────────────
     TOP BAR — page header with back link + title + action
     ─────────────────────────────────────────────────────────────────────── */
  .top-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--_bar-line, var(--cream-line));
    flex-shrink: 0;
    gap: var(--s-3);
  }
  .top-bar__back {
    font-family: var(--ff-ui); font-weight: 800;
    font-size: var(--fs-sm); letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--red);
    flex-shrink: 0;
    transition: color var(--t-fast);
  }
  .top-bar__back:hover { color: var(--red-hi); }
  .top-bar__title {
    font-family: var(--ff-display);
    font-size: var(--fs-lg); color: var(--_bar-title, var(--cream));
    flex: 1; text-align: center;
  }
  .top-bar__action { flex-shrink: 0; min-width: 60px; display: flex; justify-content: flex-end; }
  .surface-paper .top-bar { --_bar-line: var(--ink-line); --_bar-title: var(--ink); }

  /* ───────────────────────────────────────────────────────────────────────
     NAV BAR — bottom tabs (admin only)
     ─────────────────────────────────────────────────────────────────────── */
  .nav-bar {
    display: flex;
    border-top: 1px solid var(--_nav-line, var(--cream-line));
    flex-shrink: 0;
    background: var(--ink);
  }
  .nav-bar__item {
    flex: 1;
    padding: var(--s-3) var(--s-2);
    font-family: var(--ff-ui);
    font-weight: 800;
    font-size: var(--fs-sm);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    color: var(--cream-dim);
    border-top: 2px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast);
  }
  .nav-bar__item--on {
    color: var(--red);
    border-top-color: var(--red);
  }

  /* ───────────────────────────────────────────────────────────────────────
     INDEX CARD — bodega-style kraft card for inventory/staff
     ─────────────────────────────────────────────────────────────────────── */
  .index-card {
    background: var(--paper-2);
    color: var(--ink);
    border: 1px solid var(--ink-line);
    border-radius: var(--r-sm);
    padding: var(--s-4);
    display: flex; flex-direction: column;
    gap: var(--s-2);
    position: relative;
    transition: border-color var(--t-fast), transform var(--t-press);
  }
  .index-card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    opacity: 0.06; mix-blend-mode: multiply;
    background-image: var(--grain-paper);
    border-radius: inherit;
  }
  .index-card:hover { border-color: var(--ink); }
  .index-card:active { transform: translateY(1px); }
  .index-card__label {
    font-family: var(--ff-mono);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .index-card__title {
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .index-card__meta {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--ink-dim);
    letter-spacing: 0.04em;
  }
  .index-card__bar {
    width: 100%; height: 3px;
    background: var(--ink-line); border-radius: var(--r-xs);
    overflow: hidden;
  }
  .index-card__bar-fill {
    height: 100%;
    width: var(--w, 0%);
    background: var(--ink);
    border-radius: inherit;
    transition: width 600ms var(--e-out);
  }
  .index-card__bar-fill--low { background: var(--red); }
  .index-card--low { border-color: var(--red-lo); }
  .index-card--low .index-card__title { color: var(--red-lo); }

  /* ───────────────────────────────────────────────────────────────────────
     FORM — ledger-style inputs (underline only on paper, boxed on counter)
     ─────────────────────────────────────────────────────────────────────── */
  .form {
    display: flex; flex-direction: column;
    gap: var(--s-4);
  }
  .field { display: flex; flex-direction: column; gap: var(--s-1); }
  .field__label {
    font-family: var(--ff-mono);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--_field-label, var(--cream-dim));
  }
  .field__input {
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    color: var(--_field-input, var(--cream));
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--_field-line, var(--cream-soft));
    padding: var(--s-2) 0;
    width: 100%;
    transition: border-color var(--t-fast);
  }
  .field__input:focus { border-bottom-color: var(--red); }
  .field__input::placeholder { color: var(--_field-placeholder, var(--cream-dim)); }
  .field__hint {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--_field-hint, var(--cream-dim));
    letter-spacing: 0.04em;
  }
  .surface-paper .field {
    --_field-label: var(--ink-dim);
    --_field-input: var(--ink);
    --_field-line: var(--ink-soft);
    --_field-placeholder: var(--ink-soft);
    --_field-hint: var(--ink-dim);
  }

  /* Inline checkbox + label. The handler emits raw <input type="checkbox">
     for active / required toggles; without this, the checkbox floats above
     a block-level .field__label and the row reads as an orphaned word. */
  .field:has(> input[type="checkbox"]) {
    flex-direction: row;
    align-items: center;
    gap: var(--s-3);
  }
  .field:has(> input[type="checkbox"]) .field__label {
    order: 1;
    margin: 0;
    color: var(--_field-input, var(--cream));
    font-family: var(--ff-ui);
    font-weight: 700;
    font-size: var(--fs-md);
    letter-spacing: 0.08em;
    text-transform: none;
  }
  .field:has(> input[type="checkbox"]) > input[type="checkbox"] {
    width: 20px; height: 20px;
    flex-shrink: 0;
    margin: 0;
  }

  /* Toggle — same rubber-stamp vocabulary, on/off */
  .toggle {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: 6px var(--s-3) 7px;
    border: 2px solid var(--_tog-line, var(--cream-soft));
    border-radius: var(--r-xs);
    font-family: var(--ff-ui); font-weight: 800;
    font-size: var(--fs-xs); letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--_tog-color, var(--cream));
    transition: color var(--t-fast), border-color var(--t-fast);
  }
  .toggle--on { border-color: var(--red); color: var(--red); }

  /* ───────────────────────────────────────────────────────────────────────
     FLASH STAMP — alerts as rubber-stamp marks
     ─────────────────────────────────────────────────────────────────────── */
  .flash {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 2px solid var(--_flash-color, var(--red));
    color: var(--_flash-color, var(--red));
    border-radius: var(--r-xs);
    font-family: var(--ff-ui); font-weight: 700;
    font-size: var(--fs-sm); letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    background: transparent;
  }
  .flash::before {
    content: ''; position: absolute; inset: -2px;
    background-image: var(--grain-stamp);
    opacity: 0.2; mix-blend-mode: lighten;
    pointer-events: none; border-radius: inherit;
  }
  .flash--ok { --_flash-color: var(--stamp-green); }
  .flash--warn { --_flash-color: var(--red-lo); }
  .flash--err { --_flash-color: var(--red); }
  .surface-counter .flash--ok { color: var(--stamp-green-hi); border-color: var(--stamp-green-hi); }

  /* ───────────────────────────────────────────────────────────────────────
     EMPTY STATE — drawn, not blank
     "Aún no hay nada aquí" as a hand-stamped message on the page
     ─────────────────────────────────────────────────────────────────────── */
  .empty {
    display: flex; flex-direction: column;
    align-items: center; gap: var(--s-3);
    padding: var(--s-8) var(--s-4);
    text-align: center;
  }
  .empty__stamp {
    padding: var(--s-2) var(--s-5);
    border: 2px dashed var(--_empty-color, var(--cream-soft));
    color: var(--_empty-color, var(--cream-dim));
    border-radius: var(--r-xs);
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transform: rotate(-3deg);
  }
  .empty__msg {
    font-family: var(--ff-mono);
    font-size: var(--fs-sm);
    color: var(--_empty-color, var(--cream-dim));
    letter-spacing: 0.02em;
    max-width: 28ch;
  }
  .surface-paper .empty { --_empty-color: var(--ink-soft); }

  /* ───────────────────────────────────────────────────────────────────────
     MASTHEAD — newspaper-scale page heading (dashboard, cierre, reports)
     ─────────────────────────────────────────────────────────────────────── */
  .masthead {
    padding: var(--s-5) var(--s-5) var(--s-4);
    border-bottom: 3px solid var(--_head-line, var(--ink));
    display: flex; flex-direction: column;
    gap: var(--s-1);
  }
  .masthead__eyebrow {
    font-family: var(--ff-mono);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--_head-sub, var(--ink-dim));
  }
  .masthead__title {
    font-family: var(--ff-display);
    font-size: var(--fs-hero);
    line-height: 0.88;
    letter-spacing: -0.03em;
    color: var(--_head-title, var(--ink));
    /* Protect against long single words (e.g. "Modificadores") blowing out
       the viewport on narrow phones. Wraps at syllables when hyphens are
       available; otherwise breaks within the word as a last resort. */
    overflow-wrap: break-word;
    hyphens: auto;
    text-wrap: balance;
  }
  .masthead__sub {
    font-family: var(--ff-ui);
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--_head-sub, var(--ink-dim));
    margin-top: var(--s-1);
  }
  .surface-counter .masthead {
    --_head-line: var(--cream);
    --_head-title: var(--cream);
    --_head-sub: var(--cream-dim);
  }

  /* ───────────────────────────────────────────────────────────────────────
     KPI BRIEF — news-card stats (dashboard)
     ─────────────────────────────────────────────────────────────────────── */
  .brief-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
    padding: var(--s-4);
  }
  .brief {
    padding: var(--s-4);
    container-type: inline-size;
    border: 1px solid var(--_brief-line, var(--cream-line));
    border-radius: var(--r-sm);
    display: flex; flex-direction: column;
    gap: var(--s-1);
    transition: border-color var(--t-fast);
    background: transparent;
    min-width: 0;
  }
  .brief:hover { border-color: var(--_brief-hover, var(--cream-soft)); }
  .brief__label {
    font-family: var(--ff-mono);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--_brief-label, var(--cream-dim));
  }
  .brief__value {
    font-family: var(--ff-display);
    font-size: clamp(22px, 16cqi, 34px);
    line-height: 1.05;
    color: var(--_brief-value, var(--cream));
    font-variant-numeric: tabular-nums;
    word-break: normal;
    overflow-wrap: normal;
  }
  .brief__sub {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--_brief-label, var(--cream-dim));
  }
  .brief--accent { border-color: var(--red); color: var(--red); }
  .brief--accent .brief__value { color: var(--red); }
  .brief--wide { grid-column: 1 / -1; }
  .surface-paper .brief {
    --_brief-line: var(--ink-line);
    --_brief-hover: var(--ink-soft);
    --_brief-label: var(--ink-dim);
    --_brief-value: var(--ink);
  }

  /* ───────────────────────────────────────────────────────────────────────
     DIALOGS — native <dialog> element for modifier sheets + confirms
     Use <dialog open class="dialog-sheet"> for bottom-sheet (modifier picker).
     Use <dialog open class="dialog-confirm"> for centered modal (destructive
     action confirms — void, logout, cancel). Native ::backdrop handles the
     dim overlay.
     ─────────────────────────────────────────────────────────────────────── */

  dialog {
    border: none;
    padding: 0;
    background: transparent;
    color: inherit;
    max-height: 100dvh;
    max-width: 100vw;
  }
  dialog::backdrop {
    background: rgb(0 0 0 / 0.72);
  }

  /* Bottom-sheet dialog — paper surface slides up from bottom. Used for
     the modifier picker when tapping a product on POS. */
  .dialog-sheet {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    inset-block-start: auto;
    margin: 0;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    max-height: 88dvh;
    border-radius: 20px 20px 0 0;
    background: var(--paper);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -12px 32px rgb(0 0 0 / 0.4);
    animation: sheet-up var(--t-enter) var(--e-sheet) both;
  }
  @keyframes sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .dialog-sheet__grabber {
    width: 36px; height: 4px;
    background: var(--ink-dot);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }
  .dialog-sheet__head {
    padding: var(--s-3) var(--s-5) var(--s-3);
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1px dashed var(--ink-dot);
    flex-shrink: 0;
  }
  .dialog-sheet__title {
    font-family: var(--ff-display);
    font-size: var(--fs-2xl);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .dialog-sheet__sub {
    font-family: var(--ff-mono);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .dialog-sheet__body {
    flex: 1; overflow-y: auto;
    padding: var(--s-4) var(--s-5);
    scrollbar-width: none;
  }
  .dialog-sheet__foot {
    padding: var(--s-3) var(--s-5) var(--s-5);
    border-top: 1px dashed var(--ink-dot);
    flex-shrink: 0;
    display: flex;
    gap: var(--s-3);
    align-items: center;
    justify-content: space-between;
  }

  /* Modifier picker components — used inside .dialog-sheet (POS modifier
     selection). Promoted from modifier_sheet.html scope so they render
     correctly when the dialog is a sibling of <main> (which scoped styles
     can't reach). */
  .mod-group {
    margin-bottom: var(--s-5);
  }
  .mod-group:last-child { margin-bottom: 0; }
  .mod-group__hd {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 2px solid var(--ink-dot);
  }
  .mod-group__name {
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .mod-group__rule {
    font-family: var(--ff-mono);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .mod-group__rule--req { color: var(--red); }

  .mod-options {
    display: flex; flex-direction: column; gap: var(--s-2);
  }
  .mod-opt {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--ink-line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
  }
  .mod-opt:hover { border-color: var(--ink); }
  .mod-opt:has(input:checked) {
    border-color: var(--red);
    background: rgb(196 37 24 / 0.08);
  }
  .mod-opt input {
    width: 18px; height: 18px;
    appearance: none;
    border: 2px solid var(--ink-soft);
    background: transparent;
    cursor: pointer;
    display: grid; place-items: center;
    transition: border-color var(--t-fast), background var(--t-fast);
  }
  .mod-opt input[type="radio"] { border-radius: 50%; }
  .mod-opt input[type="checkbox"] { border-radius: var(--r-xs); }
  .mod-opt input:checked {
    border-color: var(--red);
    background: var(--red);
  }
  .mod-opt input[type="radio"]:checked::after {
    content: '';
    width: 8px; height: 8px;
    background: var(--paper);
    border-radius: 50%;
  }
  .mod-opt input[type="checkbox"]:checked::after {
    content: '✓';
    color: var(--paper);
    font-family: var(--ff-display);
    font-size: var(--fs-sm);
    line-height: 1;
  }
  .mod-opt__name {
    font-family: var(--ff-ui);
    font-weight: 700;
    font-size: var(--fs-md);
    letter-spacing: 0.04em;
    color: var(--ink);
  }
  .mod-opt__delta {
    font-family: var(--ff-display);
    font-size: var(--fs-md);
    color: var(--red);
    letter-spacing: -0.01em;
  }
  .mod-opt__delta--zero { color: var(--ink-soft); }
  .mod-opt__delta--neg { color: var(--stamp-green); }

  /* Confirm dialog — centered paper card, smaller. Used for destructive
     action confirms (anular, cancelar, salir). */
  .dialog-confirm {
    margin: auto;
    width: calc(100% - var(--s-7));
    max-width: 340px;
    background: var(--paper);
    color: var(--ink);
    border-radius: var(--r-md);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    animation: dialog-pop var(--t-enter) var(--e-out) both;
    box-shadow: 0 12px 40px rgb(0 0 0 / 0.5);
    position: relative;
  }
  .dialog-confirm::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    opacity: 0.08; mix-blend-mode: multiply;
    background-image: var(--grain-paper);
    border-radius: inherit;
  }
  .dialog-confirm > * { position: relative; z-index: 1; }
  @keyframes dialog-pop {
    0%   { transform: scale(0.92); opacity: 0; }
    60%  { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
  }
  .dialog-confirm__head {
    display: flex; flex-direction: column;
    gap: var(--s-1);
  }
  .dialog-confirm__eyebrow {
    font-family: var(--ff-mono);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--red);
  }
  .dialog-confirm__title {
    font-family: var(--ff-display);
    font-size: var(--fs-2xl);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .dialog-confirm__body {
    font-family: var(--ff-ui);
    font-size: var(--fs-md);
    color: var(--ink-dim);
    line-height: 1.5;
    letter-spacing: 0.02em;
  }
  .dialog-confirm__body strong { color: var(--ink); font-weight: 700; }
  .dialog-confirm__actions {
    display: flex;
    gap: var(--s-3);
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  /* ───────────────────────────────────────────────────────────────────────
     PIN DISPLAY + PAD — reusable across login, staff-form, anywhere a
     numeric PIN is set or entered. Paper-variant styling; counter-variant
     overrides below via :where(.surface-counter).
     ─────────────────────────────────────────────────────────────────────── */
  .pin-display {
    display: flex; gap: var(--s-4);
    justify-content: center;
    padding: var(--s-4) 0;
  }
  .pin-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--_pin-color, var(--ink));
    background: transparent;
    transition: background 140ms var(--e-out), transform 140ms var(--e-out);
  }
  .pin-dot--filled {
    background: var(--_pin-color, var(--ink));
    transform: scale(1.1);
  }
  .pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
    max-width: 320px;
    margin-inline: auto;
    width: 100%;
  }
  .pin-key {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 2px solid var(--_pin-line, var(--ink-line));
    border-radius: var(--r-sm);
    font-family: var(--ff-display);
    font-size: var(--fs-3xl);
    color: var(--_pin-color, var(--ink));
    transition: background var(--t-press), border-color var(--t-fast), transform var(--t-press), color var(--t-press);
  }
  .pin-key:hover { border-color: var(--_pin-color, var(--ink)); }
  .pin-key:active {
    background: var(--_pin-color, var(--ink));
    color: var(--_pin-color-invert, var(--paper));
    border-color: var(--_pin-color, var(--ink));
    transform: scale(0.97);
  }
  .pin-key--action {
    font-family: var(--ff-ui); font-weight: 800;
    font-size: var(--fs-xl); letter-spacing: 0.08em;
    color: var(--red);
    border-color: transparent;
  }
  .pin-key--action:hover { border-color: var(--red); }
  .pin-key--action:active { background: var(--red); color: var(--paper); border-color: var(--red); }
  .pin-key--empty { visibility: hidden; pointer-events: none; }

  /* Counter variant */
  .surface-counter .pin-dot,
  .surface-counter .pin-key {
    --_pin-color: var(--cream);
    --_pin-line: var(--cream-line);
    --_pin-color-invert: var(--ink);
  }

  /* ───────────────────────────────────────────────────────────────────────
     DENOMINATION ROW — for cierre cash counting
     ─────────────────────────────────────────────────────────────────────── */
  .denom {
    display: grid;
    grid-template-columns: 52px 14px 90px 14px 1fr;
    align-items: center; gap: var(--s-1);
    padding: var(--s-2) 0;
  }
  .denom__bill {
    font-family: var(--ff-display);
    font-size: var(--fs-md);
    color: var(--ink);
  }
  .denom__x, .denom__eq {
    font-family: var(--ff-mono);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    text-align: center;
  }
  .denom__count {
    font-family: var(--ff-mono);
    font-weight: 700;
    font-size: var(--fs-md);
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ink-soft);
    padding: 4px 6px;
    width: 100%;
    text-align: right;
    outline: none;
    transition: border-color var(--t-fast);
  }
  .denom__count:focus { border-bottom-color: var(--red); border-bottom-width: 2px; }
  .denom__sub {
    font-family: var(--ff-display);
    font-size: var(--fs-md);
    color: var(--ink);
    text-align: right;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION — defined once, used everywhere
   ═══════════════════════════════════════════════════════════════════════════ */
@layer motion {

  /* Line slides in from below with a stagger — used by receipts, historial,
     cierre breakdowns. Apply `anim-typed` to the container; children get the
     effect via nth-child delays. */
  @keyframes typed {
    0%   { transform: translateY(6px); opacity: 0; }
    100% { transform: translateY(0);   opacity: 1; }
  }
  .anim-typed > * {
    animation: typed 380ms var(--e-out) both;
  }
  .anim-typed > *:nth-child(1)  { animation-delay: 40ms; }
  .anim-typed > *:nth-child(2)  { animation-delay: 110ms; }
  .anim-typed > *:nth-child(3)  { animation-delay: 180ms; }
  .anim-typed > *:nth-child(4)  { animation-delay: 250ms; }
  .anim-typed > *:nth-child(5)  { animation-delay: 320ms; }
  .anim-typed > *:nth-child(6)  { animation-delay: 390ms; }
  .anim-typed > *:nth-child(7)  { animation-delay: 460ms; }
  .anim-typed > *:nth-child(8)  { animation-delay: 530ms; }

  /* Stamp drop — slam a rubber stamp onto the page. Use on .stamp-mark
     on confirmation screens. */
  @keyframes stamp-drop {
    0%   { transform: rotate(-14deg) scale(2.4); opacity: 0; }
    55%  { transform: rotate(-5deg) scale(1.14); opacity: 1; }
    80%  { transform: rotate(-3deg) scale(0.97); }
    100% { transform: rotate(-4deg) scale(1); opacity: 1; }
  }
  .anim-stamp { animation: stamp-drop 620ms var(--e-out) both; }

  /* Slam — the big price entry (total, Cobrar amount, cierre total). */
  @keyframes slam {
    0%   { transform: scale(0.82); opacity: 0; }
    60%  { transform: scale(1.04); }
    100% { transform: scale(1); opacity: 1; }
  }
  .anim-slam { animation: slam 420ms var(--e-out) both; }

  /* Pulse — breathing dot for live state (cart, open status). */
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
  }
  .anim-pulse { animation: pulse 2s var(--e-std) infinite; }

  /* Paper flutter — on page arrival, tiny settle of the paper surface. */
  @keyframes flutter {
    0%   { transform: translateY(-4px) rotate(-0.25deg); opacity: 0; }
    100% { transform: translateY(0) rotate(0); opacity: 1; }
  }
  .anim-flutter { animation: flutter 420ms var(--e-out) both; }

  /* Universal tap feedback. :where() is zero-specificity so any component
     that defines its own :active (stamp-btn, pin-key, pick-row, dash-cta,
     index-card) still wins. This catches everything else — bottom-nav
     items, admin list rows, POS item cards — so nothing feels dead on tap. */
  :where(
    .nav-bar__item,
    .menu-row,
    .mg-row,
    .ing-row,
    .cat-row,
    .staff-row,
    .order-card,
    .item-card,
    .opt-choice,
    .cierre-history-row,
    .cfg-row
  ):active {
    transform: translateY(1px);
    transition: transform var(--t-press);
  }
  :where(button):not(.stamp-btn):not(.pin-key):not(:disabled):active {
    transform: scale(0.98);
    transition: transform var(--t-press);
  }

  /* Error flash shakes once when rendered — conveys rejection viscerally
     without requiring the operator to read the copy. */
  @keyframes flash-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-4px); }
    40%      { transform: translateX(4px); }
    60%      { transform: translateX(-2px); }
    80%      { transform: translateX(2px); }
  }
  .flash--err {
    animation: flash-shake 420ms var(--e-out) 1;
  }

  /* Motion-reduce override */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      transition-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITIES — short list, high-discipline
   ═══════════════════════════════════════════════════════════════════════════ */
@layer utilities {
  .stack { display: flex; flex-direction: column; }
  .stack-1 { display: flex; flex-direction: column; gap: var(--s-1); }
  .stack-2 { display: flex; flex-direction: column; gap: var(--s-2); }
  .stack-3 { display: flex; flex-direction: column; gap: var(--s-3); }
  .stack-4 { display: flex; flex-direction: column; gap: var(--s-4); }
  .row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
  .grow { flex: 1; min-height: 0; min-width: 0; }
  .center { margin-inline: auto; }
  .scroll-y { overflow-y: auto; min-height: 0; scrollbar-width: none; }
  .pad-4 { padding: var(--s-4); }
  .pad-5 { padding: var(--s-5); }
  .mt-3 { margin-top: var(--s-3); }
  .mt-4 { margin-top: var(--s-4); }
  .mt-5 { margin-top: var(--s-5); }
  .text-center { text-align: center; }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NARROW PHONE GUARD (<360px)
   Step down hero type sizes so nothing overflows on 320-wide devices.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 359px) {
  :root {
    --fs-3xl:  28px;
    --fs-4xl:  40px;
    --fs-hero: 56px;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   TOUR — product-tour coach marks.
   Overlay is a single full-viewport <svg> (injected by tour.js) whose
   fill-rule="evenodd" path covers the whole viewport AND carves a rounded
   rectangle over the highlighted element's getBoundingClientRect. That
   cutout shows the element at full brightness through a transparent hole,
   independent of the element's stacking context or background — same
   technique driver.js uses.
   ───────────────────────────────────────────────────────────────────────── */

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}

[data-tour-active] {
  outline: 2px solid var(--red, #c42518);
  outline-offset: 4px;
  border-radius: var(--r-xs);
}

.tour-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  max-width: min(360px, calc(100vw - 24px));
  padding: var(--s-4) var(--s-5);
  background: var(--cream, #efe5d1);
  color: var(--ink, #1a110e);
  border: 2px solid var(--ink, #1a110e);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
  z-index: 9500;
  font-family: var(--ff-ui);
  animation: tour-tooltip-in 200ms var(--e-out, ease-out);
}
@keyframes tour-tooltip-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tour-tooltip__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-2);
}
.tour-tooltip__counter {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim, #7a6a5a);
}
.tour-tooltip__x {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-dim, #7a6a5a);
  cursor: pointer;
  padding: 0 4px;
}
.tour-tooltip__x:hover { color: var(--red, #c1272d); }

.tour-tooltip__title {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  line-height: 1.1;
  margin: 0 0 var(--s-2);
  color: var(--ink, #1a110e);
}
.tour-tooltip__body {
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  line-height: 1.45;
  margin: 0 0 var(--s-3);
  color: var(--ink, #1a110e);
}
.tour-tooltip__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--ink-line, rgb(0 0 0 / 0.18));
}
.tour-tooltip__prev,
.tour-tooltip__next {
  font-family: var(--ff-ui);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink, #1a110e);
  background: transparent;
  border: none;
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
}
.tour-tooltip__prev:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.tour-tooltip__next {
  color: var(--red, #c1272d);
}
.tour-tooltip__next:hover { color: var(--red-hi, #a01f24); }