/* Self-hosted so the design holds up with no internet: the shop's connection can drop and staff keep working on the LAN. Both files are the variable latin subset, which covers Spanish. Montserrat and Inter are OFL-1.1. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/montserrat-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* MesaLista design tokens ------------------------------------------------- Palette, type scale, and shape come from the Stitch design system exported for the customer surface (Material 3, burnt orange on a warm off-white). The customer page runs the light theme; the staff page opts into the dark derivation with `class="theme-dark"` on , because that screen stays on all day behind the bar. Both themes define the same semantic names, so every component rule below is written once. */ :root { color-scheme: light; --primary: #944a00; --on-primary: #ffffff; --primary-container: #e67e22; --on-primary-container: #502600; --primary-fixed: #ffdcc5; --on-primary-fixed: #301400; --on-primary-fixed-variant: #713700; --primary-fixed-dim: #ffb783; --secondary: #586062; --on-secondary: #ffffff; --secondary-container: #dae1e3; --on-secondary-container: #5d6466; --tertiary: #745a2e; --tertiary-container: #b39563; --on-tertiary-container: #422e05; --error: #ba1a1a; --error-container: #ffdad6; --on-error-container: #93000a; --bg: #fbf9f7; --surface: #ffffff; --surface-container-low: #f5f3f1; --surface-container: #efedec; --surface-container-high: #eae8e6; --surface-container-highest: #e4e2e0; --surface-variant: #e4e2e0; --surface-dim: #dbdad8; --text: #1b1c1b; --text-muted: #564337; --text-faint: #897365; --line: rgba(27, 28, 27, .08); --line-strong: #dcc1b1; /* Status roles. The board leans on these, so they are named by meaning rather than by hue -- a ready ticket stays "ok" in either theme. */ --ok: #2f7d4f; --ok-surface: rgba(47, 125, 79, .12); --ok-text: #14532d; --warn: #b26a00; --warn-surface: rgba(178, 106, 0, .12); --warn-text: #6b3e00; --hot: #ba1a1a; --hot-surface: rgba(186, 26, 26, .1); --hot-text: #93000a; --info: #3f6470; --info-surface: rgba(63, 100, 112, .12); --info-text: #244049; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-card: 24px; --r-pill: 999px; /* 4px-based spacing scale from the design system. */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --pad: clamp(20px, 5vw, 32px); /* Elevation is a warm shadow tinted with the primary, never neutral grey. */ --shadow: 0 12px 32px rgba(148, 74, 0, .15); --shadow-sm: 0 8px 24px rgba(148, 74, 0, .1); --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-head: Montserrat, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-family: var(--font-body); font-size: 16px; background: var(--bg); color: var(--text); } /* Dark derivation of the same hues. Applied by the staff page, and offered to any viewer whose OS asks for dark -- the customer page opts out of that with `.theme-light` so a sunlit phone keeps the appetite-forward light design. */ .theme-dark { color-scheme: dark; --primary: #ffb783; --on-primary: #301400; --primary-container: #713700; --on-primary-container: #ffdcc5; --primary-fixed: #542a00; --on-primary-fixed: #ffdcc5; --on-primary-fixed-variant: #ffb783; --primary-fixed-dim: #ffb783; --secondary: #c1c8ca; --on-secondary: #2b3235; --secondary-container: #41484a; --on-secondary-container: #dde4e6; --tertiary: #e3c28c; --tertiary-container: #5a4319; --on-tertiary-container: #ffdeaa; --error: #ffb4ab; --error-container: #93000a; --on-error-container: #ffdad6; --bg: #14100d; --surface: #1f1a16; --surface-container-low: #1a1512; --surface-container: #241e1a; --surface-container-high: #2e2621; --surface-container-highest: #392f29; --surface-variant: #2e2621; --surface-dim: #14100d; --text: #f2ede9; --text-muted: #d5c3b6; --text-faint: #a08d7f; --line: rgba(242, 237, 233, .1); --line-strong: #58483d; --ok: #6ddba0; --ok-surface: rgba(109, 219, 160, .14); --ok-text: #a7f3d0; --warn: #f5bd5c; --warn-surface: rgba(245, 189, 92, .14); --warn-text: #fde3b0; --hot: #ff8a80; --hot-surface: rgba(255, 138, 128, .14); --hot-text: #ffd5d1; --info: #9fc4d1; --info-surface: rgba(159, 196, 209, .14); --info-text: #d3e7ee; --shadow: 0 12px 32px rgba(0, 0, 0, .5); --shadow-sm: 0 8px 24px rgba(0, 0, 0, .4); background: var(--bg); color: var(--text); } * { box-sizing: border-box; } body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-family: var(--font-head); line-height: 1.25; } h1 { font-size: 22px; font-weight: 700; } h2 { font-size: 18px; font-weight: 600; } p { margin: 0; } a { color: var(--primary); text-decoration: none; } /* `hidden` must win over any layout display we set on a component. */ [hidden] { display: none !important; } .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; } /* Controls ---------------------------------------------------------------- */ button, .button-like { font-family: var(--font-head); font-size: 14px; font-weight: 600; border: 1px solid transparent; border-radius: var(--r-md); padding: 12px 18px; background: var(--surface-container); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm); min-height: 48px; transition: background .14s ease, border-color .14s ease, transform .06s ease; } button:hover, .button-like:hover { background: var(--surface-variant); } button:active { transform: scale(.97); } button:disabled { opacity: .38; cursor: not-allowed; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); border-radius: var(--r-md); } .primary:hover { background: var(--on-primary-fixed-variant); border-color: var(--on-primary-fixed-variant); } .ghost { background: transparent; border-color: var(--line-strong); } .ghost:hover { background: var(--surface-container); } input { width: 100%; font: 400 16px/24px var(--font-body); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: var(--r-md); padding: 12px 14px; min-height: 48px; } input::placeholder { color: var(--text-faint); } label { display: grid; gap: var(--sp-xs); color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-md); } .pill { display: inline-flex; align-items: center; border-radius: var(--r-pill); padding: 4px 12px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--surface-container-high); color: var(--text-muted); } .pill.ok { background: var(--ok-surface); color: var(--ok-text); } .pill.warn { background: var(--warn-surface); color: var(--warn-text); } .pill.info { background: var(--info-surface); color: var(--info-text); } .pill.hot { background: var(--hot-surface); color: var(--hot-text); } .empty { color: var(--text-faint); border-radius: var(--r-lg); background: var(--surface-container-low); padding: var(--sp-lg) var(--sp-md); text-align: center; font-size: 16px; } .split { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .stack { display: grid; gap: var(--sp-md); } .muted { color: var(--text-muted); } .tiny { font-size: 14px; color: var(--text-muted); } /* Customer: sticky header ------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; padding: 0 var(--pad); background: var(--bg); } .brand { display: flex; align-items: baseline; gap: var(--sp-sm); } .brand-name { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--primary); } .brand-sub { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); } .seat { display: flex; align-items: center; gap: var(--sp-sm); padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface-container-highest); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } .seat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: seat-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; } @keyframes seat-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.2); } } .shell { width: min(680px, 100%); margin: 0 auto; padding: var(--sp-md) var(--pad) 148px; display: grid; gap: var(--sp-lg); } /* The board is a wall display, not a reading column: it fills the counter screen so both queues stay visible without scrolling. */ .shell-wide { width: 100%; max-width: none; padding-bottom: var(--sp-lg); } /* Customer: quick actions ------------------------------------------------- */ /* Flex rather than fixed columns: the pickup lane hides "Pedir la cuenta", and a 3-column grid would leave a hole where it used to be. */ .quick-actions { display: flex; gap: var(--sp-sm); background: var(--surface-container); border-radius: var(--r-card); padding: var(--sp-md); } .quick-actions button { flex: 1 1 0; min-width: 0; flex-direction: column; gap: var(--sp-xs); padding: 10px 6px; min-height: 68px; border-radius: var(--r-md); background: var(--secondary-container); color: var(--on-secondary-container); font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1.25; text-align: center; } .quick-actions button:hover { background: var(--surface-variant); } .quick-actions .qa-icon { width: 24px; height: 24px; flex-shrink: 0; } /* The buzz opt-in and the two alert requests all latch: once they are on, the control has to read as "already sent" rather than as another tap target. */ .quick-actions button[data-on="1"], .quick-actions button[data-sent="1"] { background: var(--primary-container); color: var(--on-primary-container); } /* A latched button is disabled so it cannot be tapped twice, but it is showing live state rather than being unavailable -- it keeps full contrast. */ .quick-actions button[data-sent="1"]:disabled { opacity: 1; cursor: default; } /* Customer: menu ---------------------------------------------------------- */ .menu-section { display: grid; gap: var(--sp-md); } .menu-section + .menu-section { margin-top: var(--sp-lg); } .menu-heading { display: inline-flex; justify-self: start; align-items: center; border-radius: var(--r-pill); padding: 8px 24px; background: var(--primary-container); color: var(--on-primary-container); font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .menu-list { display: grid; gap: var(--sp-md); } .menu-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-md); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: var(--sp-md); transition: box-shadow .14s ease, border-color .14s ease; } .menu-item.selected { border-color: var(--primary-fixed-dim); box-shadow: var(--shadow-sm); } .item-tap { display: block; text-align: left; background: transparent; border: 0; padding: 0; min-height: 0; border-radius: var(--r-sm); color: inherit; font-family: var(--font-body); } .item-tap:hover { background: transparent; } .item-name { display: block; font-family: var(--font-head); font-size: 18px; font-weight: 600; line-height: 24px; } .item-desc { display: block; font-size: 14px; line-height: 20px; color: var(--text-muted); font-weight: 400; margin-top: var(--sp-xs); } .item-price { display: block; margin-top: var(--sp-sm); font-family: var(--font-head); font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--primary); } /* The stepper collapses to a single "＋" pill until the item is in the cart, which is how the design distinguishes an untouched row from a chosen one. */ .qty { display: flex; align-items: center; height: 44px; border-radius: var(--r-pill); background: var(--surface-container-low); border: 1px solid var(--surface-variant); overflow: hidden; } .qty button { width: 44px; min-height: 44px; padding: 0; border-radius: 0; background: transparent; color: var(--primary); font-size: 22px; font-weight: 700; } .qty button:hover { background: var(--surface-variant); } .qty-value { width: 32px; text-align: center; font-family: var(--font-head); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; } .menu-item[data-qty="0"] .qty { background: var(--primary-container); border-color: transparent; } .menu-item[data-qty="0"] .qty .remove, .menu-item[data-qty="0"] .qty-value { display: none; } .menu-item[data-qty="0"] .qty .add { width: auto; padding: 0 20px; color: var(--on-primary-container); font-size: 18px; } /* Decorative: the button already carries an "Agregar " aria-label, so the word is for sighted scanning only. */ .menu-item[data-qty="0"] .qty .add::after { content: 'Agregar'; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-left: 6px; } .menu-item[data-qty="0"] .qty .add:hover { background: var(--primary-fixed-dim); } /* Customer: order details + activity -------------------------------------- */ .details-toggle { width: 100%; justify-content: space-between; background: var(--surface-container-low); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text-muted); font-family: var(--font-body); font-size: 16px; font-weight: 400; } .details-fields { margin-top: var(--sp-md); } .activity { display: grid; gap: var(--sp-md); } .act { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-card); padding: var(--sp-md); display: grid; gap: var(--sp-sm); } .act-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .act-title { font-family: var(--font-head); font-size: 18px; font-weight: 600; } .act-body { font-size: 14px; line-height: 20px; color: var(--text-muted); } .act-total { font-family: var(--font-head); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .act.pending { border-color: var(--warn-surface); } /* The ready card is the payoff of the whole flow: it gets the tinted surface, the warm elevation, and the only lift animation on the page. */ .act.ready { background: var(--primary-fixed); border-color: transparent; color: var(--on-primary-fixed); box-shadow: var(--shadow); } .act.ready .act-body, .act.ready .tiny { color: var(--on-primary-fixed-variant); } .act.ready .pill { background: var(--primary); color: var(--on-primary); } .act.completed { opacity: .6; } .act.open { border-color: var(--info-surface); } .act.closed { opacity: .6; } .act-ready-note { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--on-primary-fixed); } /* Customer: cart bar ------------------------------------------------------ */ .cart-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--sp-md) + env(safe-area-inset-bottom)); z-index: 25; width: min(680px, calc(100% - 2 * var(--pad))); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: var(--sp-md); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); } .cart-info { display: grid; gap: 2px; min-width: 0; } .cart-count { font-size: 14px; color: var(--text-muted); } .cart-total { font-family: var(--font-head); font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .cart-bar .primary { padding: 12px 24px; flex-shrink: 0; } /* Overlays ---------------------------------------------------------------- */ .connection-pill { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 40; background: var(--surface-container-highest); color: var(--text); border-radius: var(--r-pill); padding: 8px 16px; font-size: 12px; font-weight: 700; letter-spacing: .05em; box-shadow: var(--shadow-sm); } .toast-root { position: fixed; top: 16px; right: 16px; z-index: 60; display: grid; gap: var(--sp-sm); max-width: min(360px, calc(100% - 32px)); } .toast { padding: var(--sp-md); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 600; box-shadow: var(--shadow); animation: toast-in .16s ease-out; } .toast-success { background: var(--ok-surface); color: var(--ok-text); } .toast-error { background: var(--error-container); color: var(--on-error-container); } @keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .banner { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(520px, calc(100% - 24px)); z-index: 50; display: grid; gap: var(--sp-xs); padding: var(--sp-md) 48px var(--sp-md) var(--sp-md); border-radius: var(--r-card); box-shadow: var(--shadow); } .banner strong { font-family: var(--font-head); font-size: 18px; font-weight: 600; } .banner span { font-size: 14px; opacity: .9; } .banner-ready { background: var(--primary-container); color: var(--on-primary-container); animation: nudge 3s ease-in-out infinite; } @keyframes nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } } .banner-dismiss { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: var(--r-pill); background: rgba(0, 0, 0, .1); color: inherit; font-weight: 700; } /* Staff ------------------------------------------------------------------- */ .staff-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px var(--pad); background: var(--surface-container-low); border-bottom: 1px solid var(--line); } .staff-bar .brand { margin-right: auto; } .staff-bar button, .staff-bar .button-like { min-height: 44px; padding: 10px 16px; } .stat-row { display: flex; gap: var(--sp-sm); } .stat { display: grid; gap: 2px; padding: 8px 16px; border-radius: var(--r-lg); background: var(--surface-container); min-width: 86px; } .stat-value { font-family: var(--font-head); font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 700; } .stat.has-alerts .stat-value { color: var(--info); } .stat.has-hot .stat-value { color: var(--hot); } .board { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-lg); align-items: start; } .column { display: grid; gap: var(--sp-md); } .column-head { display: flex; align-items: center; gap: 12px; } .column-head h2 { font-size: 18px; } .tickets { display: grid; gap: var(--sp-md); } /* Pending vs ready has to be readable in half a second from a metre away, so the difference is a filled left rail plus a surface tint, not just a hue. */ .ticket { border: 1px solid var(--line); border-left: 6px solid var(--line-strong); background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-md); display: grid; gap: var(--sp-sm); } .ticket.pending { border-left-color: var(--warn); } .ticket.ready { border-left-color: var(--ok); background: var(--ok-surface); } .ticket.stale { border-left-color: var(--hot); background: var(--hot-surface); } .ticket.completed { opacity: .6; } .ticket.alert { border-left-color: var(--info); } .ticket.alert.stale { border-left-color: var(--hot); } .ticket-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .seat-tag { font-family: var(--font-head); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .ref { font-size: 12px; color: var(--text-faint); font-weight: 700; letter-spacing: .05em; font-variant-numeric: tabular-nums; } .age { margin-left: auto; font-size: 14px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .age.hot { color: var(--hot); font-weight: 700; } .ticket-who { font-size: 14px; color: var(--text-muted); } .ticket-items { display: grid; gap: var(--sp-xs); font-size: 16px; } .ticket-line { display: flex; justify-content: space-between; gap: 12px; } .ticket-line .qty-badge { color: var(--primary); font-weight: 700; } /* Missing a kitchen note means remaking the food, so it gets its own surface rather than sitting in the item list. */ .ticket-note { font-size: 16px; padding: var(--sp-sm) 12px; border-radius: var(--r-sm); background: var(--warn-surface); color: var(--warn-text); font-weight: 600; } .ticket-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ticket-total { font-family: var(--font-head); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } .ticket-foot button { min-height: 48px; } .done { color: var(--ok); font-weight: 700; font-size: 14px; } .completed-group { margin-top: var(--sp-xs); } .completed-group summary { cursor: pointer; color: var(--text-faint); font-weight: 700; font-size: 14px; padding: var(--sp-sm) 2px; list-style: none; } .completed-group summary::-webkit-details-marker { display: none; } .completed-group summary::before { content: '▸ '; } .completed-group[open] summary::before { content: '▾ '; } .completed-group .tickets { margin-top: var(--sp-sm); } .login-panel { width: min(400px, calc(100% - 32px)); margin: 12vh auto 0; display: grid; gap: var(--sp-md); } .login-panel h1 { font-size: 22px; } .error-text { color: var(--error); font-weight: 600; font-size: 14px; } /* Responsive -------------------------------------------------------------- */ @media (max-width: 860px) { .board { grid-template-columns: 1fr; } } /* On a phone the staff bar is sticky, so keep it to a single row: the customer-view link is a desk convenience, not a floor tool. */ @media (max-width: 620px) { .staff-bar .button-like { display: none; } .staff-bar .brand-sub { display: none; } .staff-bar { gap: var(--sp-sm); padding: var(--sp-sm) var(--pad); } .stat-row { gap: 6px; } .stat { min-width: 0; padding: 6px 10px; } .stat-value { font-size: 22px; } .stat-label { font-size: 11px; letter-spacing: .04em; } .staff-bar button { padding: 10px 12px; } } @media (max-width: 420px) { .brand-sub { display: none; } .quick-actions { padding: var(--sp-sm); } .quick-actions button { font-size: 11px; padding: 10px 4px; } .menu-item { grid-template-columns: 1fr; } .menu-item .qty { justify-self: start; } .cart-bar .primary { padding: 12px 18px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }