/* Epulo's look (platform plan phase 6): two styles, Pizarra and Mercado
(docs/resto-designs/), each a set of tokens in both themes, over one set
of components. `` carries what the local's «Ajustes» say (app.js
applyLook): data-style, data-theme (none: the OS's), data-anim
(sobrias|alegres), data-grain, data-catcolors, data-phonenav
(cajon|barra). States are never shown by colour alone: each also has a
label and a border, shape or pattern. */
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url(/fonts/atkinson-400.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url(/fonts/atkinson-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url(/fonts/barlow-condensed-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-700.woff2) format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 400; font-display: swap; src: url(/fonts/kalam-400.woff2) format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 700; font-display: swap; src: url(/fonts/kalam-700.woff2) format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 300 700; font-display: swap; src: url(/fonts/fredoka.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 200 1000; font-display: swap; src: url(/fonts/nunito.woff2) format("woff2"); }
/* ---------------------------------------------------------------- tokens */
/* Pizarra, dark (also the look of a page with no style: main.py's _page). */
:root, :root[data-style="pizarra"] {
--bg: #101311; --panel: #171b19; --panel-2: #1e2320; --panel-3: #282e2b; --line: #363d39; --line-soft: #252a27;
--fg: #f2ecdf; --fg-2: #c8c1b3; --muted: #8f8a80;
--accent: #f6a93b; --accent-ink: #1b1204; --accent-text: #f7b452; --accent-soft: rgba(246, 169, 59, .15);
--ok: #84d3a1; --ok-soft: rgba(132, 211, 161, .13); --ok-text: #84d3a1; --on-ok: #101311;
--warn: #ead26c; --warn-soft: rgba(234, 210, 108, .15); --warn-text: #ead26c; --on-warn: #101311;
--crit: #ff7262; --crit-soft: rgba(255, 114, 98, .16); --crit-text: #ff7262; --on-crit: #101311;
--info: #95bef0; --info-soft: rgba(149, 190, 240, .15); --info-text: #95bef0;
--st-atendida: #7fd0d6; --st-esperando: #bba6ef; --st-parcial: #ee9cc0; --st-comiendo: #84d3a1;
--cat-0: #e9a77a; --cat-1: #e5c04e; --cat-2: #8fd3a6; --cat-3: #95bef0; --cat-4: #ee9cc0; --cat-5: #bba6ef;
--scrim: rgba(3, 5, 4, .68); --shadow: 0 22px 60px rgba(0, 0, 0, .55); --grain: .075; --topbar: rgba(16, 19, 17, .86);
--rail-bg: var(--panel); --rail-fg: var(--fg-2); --rail-on-bg: var(--panel-3); --rail-on-fg: var(--fg); --rail-on-ico: var(--accent-text);
--press: none; --press-accent: none; --bw: 1.5px;
--floor: linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem, var(--panel-2);
--f-display: "Kalam", "Segoe Print", cursive;
--f-ui: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
--f-num: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
--num-size: 1.12; --title-weight: 700;
--r: 12px; --r-lg: 18px; --r-xl: 18px;
--ease: ease;
color-scheme: dark;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme]):not([data-style="mercado"]) {
--bg: #e8ebe6; --panel: #fbfcf9; --panel-2: #f1f3ee; --panel-3: #e1e5de; --line: #c4cbc1; --line-soft: #dce1d9;
--fg: #141815; --fg-2: #39403b; --muted: #5f6660;
--accent: #f0a032; --accent-ink: #1b1204; --accent-text: #985200; --accent-soft: rgba(240, 160, 50, .2);
--ok: #1d7743; --ok-soft: rgba(29, 119, 67, .11); --ok-text: #1d7743; --on-ok: #fff;
--warn: #7f6300; --warn-soft: rgba(180, 142, 0, .15); --warn-text: #7f6300; --on-warn: #fff;
--crit: #c0332a; --crit-soft: rgba(192, 51, 42, .1); --crit-text: #c0332a; --on-crit: #fff;
--info: #2b65a8; --info-soft: rgba(43, 101, 168, .1); --info-text: #2b65a8;
--st-atendida: #11717c; --st-esperando: #6a4bb8; --st-parcial: #b03a72; --st-comiendo: #1d7743;
--cat-0: #b5622c; --cat-1: #8a6a00; --cat-2: #1d7743; --cat-3: #2b65a8; --cat-4: #b03a72; --cat-5: #6a4bb8;
--scrim: rgba(20, 24, 22, .45); --shadow: 0 18px 44px rgba(20, 32, 26, .2); --grain: 0; --topbar: rgba(232, 235, 230, .88);
color-scheme: light;
}
}
:root[data-style="pizarra"][data-theme="light"] {
--bg: #e8ebe6; --panel: #fbfcf9; --panel-2: #f1f3ee; --panel-3: #e1e5de; --line: #c4cbc1; --line-soft: #dce1d9;
--fg: #141815; --fg-2: #39403b; --muted: #5f6660;
--accent: #f0a032; --accent-ink: #1b1204; --accent-text: #985200; --accent-soft: rgba(240, 160, 50, .2);
--ok: #1d7743; --ok-soft: rgba(29, 119, 67, .11); --ok-text: #1d7743; --on-ok: #fff;
--warn: #7f6300; --warn-soft: rgba(180, 142, 0, .15); --warn-text: #7f6300; --on-warn: #fff;
--crit: #c0332a; --crit-soft: rgba(192, 51, 42, .1); --crit-text: #c0332a; --on-crit: #fff;
--info: #2b65a8; --info-soft: rgba(43, 101, 168, .1); --info-text: #2b65a8;
--st-atendida: #11717c; --st-esperando: #6a4bb8; --st-parcial: #b03a72; --st-comiendo: #1d7743;
--cat-0: #b5622c; --cat-1: #8a6a00; --cat-2: #1d7743; --cat-3: #2b65a8; --cat-4: #b03a72; --cat-5: #6a4bb8;
--scrim: rgba(20, 24, 22, .45); --shadow: 0 18px 44px rgba(20, 32, 26, .2); --grain: 0; --topbar: rgba(232, 235, 230, .88);
color-scheme: light;
}
/* Mercado, light. */
:root[data-style="mercado"] {
--bg: #f4f1fa; --panel: #fff; --panel-2: #f8f6fc; --panel-3: #eee9f6; --line: #cfc6df; --line-soft: #e3ddee;
--fg: #261b38; --fg-2: #4b3f60; --muted: #6d6283;
--accent: #ff5a36; --accent-ink: #fff; --accent-text: #c7361a; --accent-soft: #ffe2d8;
--ok: #1fa463; --ok-soft: #d6f4e4; --ok-text: #0d6a3d; --on-ok: #fff;
--warn: #ffb800; --warn-soft: #fff0c2; --warn-text: #7a5200; --on-warn: #2b1f3d;
--crit: #e5383b; --crit-soft: #ffe0e0; --crit-text: #a3191c; --on-crit: #fff;
--info: #3d8bff; --info-soft: #dceaff; --info-text: #1b4fa6;
--st-atendida: #0f8a9c; --st-esperando: #7c4dea; --st-parcial: #d63a7e; --st-comiendo: var(--accent);
--cat-0: #ff5a36; --cat-1: #ffb800; --cat-2: #22b573; --cat-3: #3d8bff; --cat-4: #f0468c; --cat-5: #8b5cf6;
--chunk: #dcd3ea; --chunk-ink: #0e0817; --ink-btn: #261b38; --ink-btn-fg: #fff;
--scrim: rgba(30, 18, 48, .42); --shadow: 0 18px 50px -18px rgba(38, 27, 56, .35); --grain: 0; --topbar: rgba(244, 241, 250, .9);
--rail-bg: var(--ink-btn); --rail-fg: var(--ink-btn-fg); --rail-on-bg: var(--accent); --rail-on-fg: var(--accent-ink); --rail-on-ico: currentColor;
--press: 0 4px 0 var(--chunk); --press-accent: 0 4px 0 color-mix(in srgb, var(--accent) 55%, var(--chunk-ink)); --bw: 2px;
--floor: radial-gradient(var(--line-soft) 1.6px, transparent 1.8px) 0 0 / 22px 22px, var(--panel-2);
--f-display: "Fredoka", "Baloo 2", ui-rounded, system-ui, sans-serif;
--f-ui: "Nunito", "Nunito Sans", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
--f-num: "Fredoka", ui-rounded, system-ui, sans-serif;
--num-size: 1; --title-weight: 600;
--r: 16px; --r-lg: 22px; --r-xl: 28px;
--ease: cubic-bezier(.34, 1.56, .64, 1);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root[data-style="mercado"]:not([data-theme]) {
--bg: #15101e; --panel: #211a2d; --panel-2: #2a2238; --panel-3: #332a43; --line: #4a3e5d; --line-soft: #372d47;
--fg: #f3eefc; --fg-2: #cfc5e0; --muted: #aba0c0;
--accent: #ff7452; --accent-ink: #1b1428; --accent-text: #ff8f73; --accent-soft: #4b2219;
--ok: #3dd18c; --ok-soft: #173d2b; --ok-text: #7be8b4; --on-ok: #0e2a1c;
--warn: #ffc83d; --warn-soft: #463812; --warn-text: #ffd873; --on-warn: #2b1f3d;
--crit: #ff6b6b; --crit-soft: #4a1d22; --crit-text: #ffa3a3; --on-crit: #1b1428;
--info: #66a3ff; --info-soft: #1a2d4d; --info-text: #a9cbff;
--st-atendida: #3fc6d8; --st-esperando: #a684ff; --st-parcial: #ff6ba5; --st-comiendo: var(--accent);
--cat-0: #ff7452; --cat-1: #ffc83d; --cat-2: #3dd18c; --cat-3: #66a3ff; --cat-4: #ff6ba5; --cat-5: #a684ff;
--chunk: #0d0914; --chunk-ink: #000; --ink-btn: #f3eefc; --ink-btn-fg: #1b1428;
--scrim: rgba(0, 0, 0, .62); --shadow: 0 18px 50px -12px rgba(0, 0, 0, .7); --topbar: rgba(21, 16, 30, .9);
color-scheme: dark;
}
}
:root[data-style="mercado"][data-theme="dark"] {
--bg: #15101e; --panel: #211a2d; --panel-2: #2a2238; --panel-3: #332a43; --line: #4a3e5d; --line-soft: #372d47;
--fg: #f3eefc; --fg-2: #cfc5e0; --muted: #aba0c0;
--accent: #ff7452; --accent-ink: #1b1428; --accent-text: #ff8f73; --accent-soft: #4b2219;
--ok: #3dd18c; --ok-soft: #173d2b; --ok-text: #7be8b4; --on-ok: #0e2a1c;
--warn: #ffc83d; --warn-soft: #463812; --warn-text: #ffd873; --on-warn: #2b1f3d;
--crit: #ff6b6b; --crit-soft: #4a1d22; --crit-text: #ffa3a3; --on-crit: #1b1428;
--info: #66a3ff; --info-soft: #1a2d4d; --info-text: #a9cbff;
--st-atendida: #3fc6d8; --st-esperando: #a684ff; --st-parcial: #ff6ba5; --st-comiendo: var(--accent);
--cat-0: #ff7452; --cat-1: #ffc83d; --cat-2: #3dd18c; --cat-3: #66a3ff; --cat-4: #ff6ba5; --cat-5: #a684ff;
--chunk: #0d0914; --chunk-ink: #000; --ink-btn: #f3eefc; --ink-btn-fg: #1b1428;
--scrim: rgba(0, 0, 0, .62); --shadow: 0 18px 50px -12px rgba(0, 0, 0, .7); --topbar: rgba(21, 16, 30, .9);
color-scheme: dark;
}
:root[data-anim="sobrias"] { --ease: ease; }
/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
html { touch-action: manipulation; }
body { font: 16px/1.45 var(--f-ui); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; min-height: 100dvh; }
[data-style="mercado"] body { font-weight: 600; font-size: 15.5px; line-height: 1.4; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.15; }
h1 { font: var(--title-weight) clamp(28px, 4vw, 40px)/1.05 var(--f-display); text-wrap: balance; }
h2 { font: var(--title-weight) 23px/1.1 var(--f-display); }
h3 { font: 700 12.5px/1.3 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
p { margin: 0 0 .75rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[data-style="mercado"] :focus-visible { outline-color: var(--info); }
.dim { color: var(--muted); }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; font-weight: 600; }
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--grain); display: none;
background-image: url("data:image/svg+xml;utf8,"); }
[data-grain="true"] .grain { display: block; }
/* ----------------------------------------------------------------- shell */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: 100px minmax(0, 1fr); min-height: 100dvh; }
[data-signed="out"] .app { grid-template-columns: minmax(0, 1fr); }
[data-signed="out"] .rail, [data-signed="out"] .burger { display: none; }
.rail { position: sticky; top: 0; align-self: start; height: 100dvh; display: flex; flex-direction: column; gap: 4px;
padding: 12px 8px; background: var(--rail-bg); color: var(--rail-fg); border-right: 1px solid var(--line-soft); overflow-y: auto; z-index: 40; }
/* The rail scrolls with no visible scrollbar, so its items stay centred. */
.rail { scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.brand { display: flex; flex-direction: column; align-items: center; padding: 6px 0 12px; margin-bottom: 6px;
border-bottom: 1px dashed var(--line); text-decoration: none; }
.brand b { font: 700 28px/1 var(--f-display); color: var(--accent-text); }
#nav { display: flex; flex-direction: column; gap: 4px; }
.navbtn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
min-height: 66px; padding: 6px 4px; border-radius: 14px; color: inherit; font: 700 12.5px/1.15 var(--f-ui);
text-align: center; text-decoration: none; }
.navbtn .ico { width: 26px; height: 26px; }
.navbtn:hover { background: var(--panel-2); color: var(--fg); }
.navbtn[aria-current="page"] { background: var(--rail-on-bg); color: var(--rail-on-fg); }
.navbtn[aria-current="page"] .ico { color: var(--rail-on-ico); }
[data-style="mercado"] .app { gap: 16px; padding: 16px; }
[data-style="mercado"][data-signed="out"] .app { padding: 0; }
[data-style="mercado"] .rail { top: 16px; height: calc(100dvh - 32px); border: 0; border-radius: var(--r-xl); align-items: center; padding: 14px 8px; }
[data-style="mercado"] .brand { border: 0; }
[data-style="mercado"] .brand b { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center;
background: var(--accent); color: var(--accent-ink); font-size: 16px; box-shadow: 0 4px 0 var(--chunk-ink); }
[data-style="mercado"] .navbtn { width: 76px; border-radius: 20px; opacity: .72; font-weight: 800; font-size: 11.5px;
transition: opacity .15s, transform .2s var(--ease); }
[data-style="mercado"] .navbtn:hover { opacity: 1; background: transparent; color: inherit; }
[data-style="mercado"] .navbtn[aria-current="page"] { opacity: 1; transform: scale(1.04); }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; min-height: 64px;
padding: 8px 24px; background: var(--topbar); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line-soft); }
[data-style="mercado"] .top { border: 0; padding: 0 0 12px; top: 0; }
.place { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.iconbtn.fsbtn { width: 30px; height: 30px; flex: none; border-radius: 99px; box-shadow: none; }
.fsbtn .ico { width: 15px; height: 15px; }
.place b { font: 700 16px/1.2 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place b:has(.local-logo) { display: flex; align-items: center; gap: 10px; }
.local-logo { height: 34px; width: auto; max-width: 10rem; object-fit: contain; flex: none; }
.brand b[data-logo] { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; }
.brand b img { display: block; width: 72px; max-height: 72px; object-fit: contain; }
.place span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-style="mercado"] .place b { font: 600 26px/1.05 var(--f-display); }
.clock { font: 600 28px/1 var(--f-num); font-variant-numeric: tabular-nums; }
[data-style="mercado"] .clock { font-size: 20px; padding: 7px 12px; border-radius: 999px; background: var(--panel); border: 2px solid var(--line-soft); }
.who { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.who .avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-3);
font: 700 14px var(--f-ui); color: var(--fg); flex: none; }
[data-style="mercado"] .who .avatar { border-radius: 14px; font-family: var(--f-display); background: color-mix(in srgb, var(--cat-5) 22%, var(--panel)); color: var(--fg); }
/* The account menu (drawWho): a popover under the name, a sheet on phones. */
.who-btn { display: flex; align-items: center; gap: .5rem; min-height: 46px; padding: 4px 10px 4px 4px; border: var(--bw) solid transparent;
border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; max-width: 16rem; }
.who-btn:hover, .who-btn[aria-expanded="true"] { border-color: var(--line); background: var(--panel); }
.who-btn .name-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-scrim { position: fixed; inset: 0; z-index: 70; background: transparent; border: 0; }
.account { position: fixed; z-index: 71; width: 17rem; display: flex; flex-direction: column; gap: 10px;
padding: 16px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow); }
.account-h { display: flex; flex-direction: column; gap: 2px; }
.account-h b { font-size: 17px; }
.account .btn { justify-content: center; }
.account p { margin: 0; font-size: 14px; }
[data-style="mercado"] .account { border-width: 2px; border-radius: var(--r-xl); }
.net { font-size: .85rem; padding: .3rem .7rem; border-radius: 99px; border: var(--bw) solid var(--line); white-space: nowrap; font-weight: 700; }
.net[data-state="online"]::before { content: "● "; color: var(--ok); }
.net[data-state="sync"]::before { content: "◐ "; color: var(--warn); }
.net[data-state="offline"] { border-style: dashed; color: var(--warn-text); }
.net[data-state="offline"]::before { content: "○ "; }
.iconbtn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r); border: var(--bw) solid var(--line);
background: transparent; cursor: pointer; flex: none; box-shadow: var(--press); }
.burger { display: none; }
.drawer-scrim { display: none; }
.view { flex: 1; padding: 22px 24px 56px; max-width: 1500px; width: 100%; }
[data-style="mercado"] .view { padding: 4px 0 40px; }
[data-signed="out"] .view { margin: 0 auto; }
/* Starting (index.html, main.py's `index`): signed in, the layout with
placeholders until the first screen; signed out, nothing until the way in. */
[data-boot="out"] .app { visibility: hidden; }
.skel { display: block; border-radius: 8px; background: var(--panel-2);
background-image: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--panel-3) 70%, transparent) 50%, transparent 70%);
background-size: 220% 100%; animation: skel 1.4s ease-in-out infinite; }
@keyframes skel { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.skel-line { height: 12px; margin: 3px 0; }
.place .skel-line:first-child { height: 15px; }
.skel-avatar { width: 38px; height: 38px; border-radius: 50%; }
[data-style="mercado"] .skel-avatar { border-radius: 14px; }
.skel-nav { pointer-events: none; }
.skel-nav .skel-ico { width: 26px; height: 26px; border-radius: 8px; }
.skel-nav .skel-label { width: 46px; height: 10px; }
.skel-page { display: flex; flex-direction: column; gap: 12px; }
.skel-title { width: min(16rem, 60%); height: 34px; border-radius: 10px; margin-bottom: 4px; }
.skel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 14px; margin-top: 1.25rem; }
.skel-card { height: 128px; border-radius: var(--r-lg); background-color: var(--panel); border: 1px solid var(--line-soft); }
[data-style="mercado"] .skel-card { border-radius: var(--r-xl); border-width: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.offline-note { max-width: 32rem; margin: 12vh auto; padding: 0 16px; text-align: center; }
/* ------------------------------------------------------------- components */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
border-radius: var(--r); border: var(--bw) solid var(--line); background: var(--panel-2); color: var(--fg);
font: 700 15px/1.1 var(--f-ui); cursor: pointer; text-decoration: none; white-space: nowrap; touch-action: manipulation;
box-shadow: var(--press); transition: transform .12s, box-shadow .12s, background .12s; }
.btn:hover { background: var(--panel-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--press-accent); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--fg-2); }
.btn.block { width: 100%; }
.btn.lg { min-height: 58px; font-size: 17px; }
.btn:disabled { opacity: .42; cursor: not-allowed; filter: none; }
[data-style="mercado"] .btn { font-weight: 800; }
[data-style="mercado"] .btn:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--chunk); }
.mini { border: var(--bw) solid var(--line); background: transparent; border-radius: 8px; padding: .2rem .55rem; cursor: pointer; font-weight: 700; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: var(--bw) solid var(--line); background: transparent;
color: var(--fg-2); font: 700 14.5px var(--f-ui); display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
white-space: nowrap; text-decoration: none; }
.chip .n { font: 600 16px var(--f-num); opacity: .75; }
.chip[aria-current], .chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
[data-style="mercado"] .chip { border-radius: 16px; background: var(--panel); color: var(--fg); font-weight: 800; border-color: var(--line-soft); }
[data-style="mercado"] .chip[aria-current], [data-style="mercado"] .chip[aria-pressed="true"] {
background: var(--panel); color: var(--fg); border-color: var(--fg); box-shadow: var(--press); transform: translateY(-2px); }
.seg { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line-soft); gap: 4px; flex-wrap: wrap; }
.seg button { min-height: 42px; padding: 0 16px; border-radius: 10px; border: 0; background: transparent; color: var(--fg-2); font-weight: 700; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
[data-style="mercado"] .seg { background: var(--panel-3); border: 0; border-radius: 16px; }
[data-style="mercado"] .seg button { font-weight: 800; border-radius: 12px; }
[data-style="mercado"] .seg button[aria-pressed="true"] { background: var(--panel); color: var(--fg); box-shadow: 0 3px 0 var(--chunk); }
.sw { position: relative; width: 58px; height: 34px; border-radius: 999px; border: var(--bw) solid var(--line); background: var(--panel-3);
cursor: pointer; flex: none; padding: 0; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 25px; height: 25px; border-radius: 50%; background: var(--muted);
transition: transform .2s var(--ease); }
.sw[aria-checked="true"] { background: var(--ok-soft); border-color: var(--ok); }
.sw[aria-checked="true"]::after { transform: translateX(23px); background: var(--ok); }
[data-style="mercado"] .sw { border: 0; background: var(--line); }
[data-style="mercado"] .sw::after { top: 4px; left: 4px; background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
[data-style="mercado"] .sw[aria-checked="true"] { background: var(--ok); }
[data-style="mercado"] .sw[aria-checked="true"]::after { background: #fff; }
.sw:disabled { opacity: .5; cursor: not-allowed; }
.card { padding: 18px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-soft); min-width: 0; }
[data-style="mercado"] .card { border-width: 2px; }
input, select { min-height: 46px; color: var(--fg); background: var(--panel-2); border: var(--bw) solid var(--line);
border-radius: var(--r); padding: 0 14px; min-width: 0; }
textarea { color: var(--fg); background: var(--panel-2); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 10px 14px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
[data-style="mercado"] input:focus, [data-style="mercado"] select:focus { border-color: var(--info); box-shadow: 0 0 0 4px var(--info-soft); }
.form { display: flex; flex-direction: column; gap: .7rem; text-align: left; margin-top: 1rem; }
.form label { display: flex; flex-direction: column; gap: .3rem; color: var(--fg-2); font-weight: 700; font-size: 14px; }
.form .row { display: flex; flex-wrap: wrap; gap: .5rem; }
.form .row[hidden], .form[hidden] { display: none; }
.form .row > input, .form .row > select, .form .row > label { flex: 1 1 10rem; }
.form .field { display: flex; flex-direction: column; gap: .4rem; color: var(--fg-2); font-weight: 700; font-size: 14px; }
.btn.danger { color: var(--crit-text); }
.err { color: var(--crit-text); margin: 0; font-weight: 700; }
.empty { color: var(--muted); text-align: center; padding: 4rem 0; font-weight: 700; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90;
max-width: calc(100% - 32px); padding: 14px 18px; border-radius: 14px; background: var(--fg); color: var(--bg);
font-weight: 700; box-shadow: var(--shadow); }
[data-style="mercado"] .toast { border-radius: 18px; font-weight: 800; }
[data-anim="alegres"] .toast:not([hidden]) { animation: rise .35s var(--ease); }
@keyframes rise { from { transform: translate(-50%, 40%); opacity: 0; } }
/* ------------------------------------------------- signing in, «Inicio» */
.gate { max-width: 32rem; margin: 12vh auto; padding: 0 16px; text-align: center; }
/* The way in: no top bar (no «Epulo», no connection badge). */
[data-gate] .top { display: none; }
.gate .scan-btn { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; }
.gate .scan-btn .ico { width: 22px; height: 22px; }
.scan-layer { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 16px; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
background: rgba(0, 0, 0, .88); color: #fff; text-align: center; }
.scan-view { position: relative; width: min(100%, 26rem); aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden; background: #000; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 14%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 18px;
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
.scan-layer p { margin: 0; max-width: 26rem; font-weight: 700; }
.home .choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 14px; margin: 1.5rem 0; }
.choice { display: flex; flex-direction: column; gap: .35rem; padding: 18px; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
background: var(--panel); text-decoration: none; color: var(--fg-2); }
.choice .ico { width: 30px; height: 30px; color: var(--accent-text); }
.choice b { font: var(--title-weight) 26px/1.1 var(--f-display); color: var(--fg); }
.choice:hover { border-color: var(--line); }
[data-style="mercado"] .choice { border-width: 2px; box-shadow: var(--press); transition: transform .2s var(--ease); }
[data-style="mercado"] .choice:hover { transform: translateY(-3px); }
.pin { box-sizing: border-box; width: 100%; max-width: 40rem; margin: 6vh auto; padding: 0 max(24px, 5vw); text-align: center; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); gap: .75rem; width: 100%; }
.person { display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem .5rem; border-radius: var(--r-lg); background: var(--panel);
border: var(--bw) solid var(--line-soft); cursor: pointer; box-shadow: var(--press); }
.person b { font: var(--title-weight) 22px/1.1 var(--f-display); }
.person small { color: var(--muted); }
/* A fixed width: the box doesn't grow with each digit. */
.pin form { width: min(100%, 13rem); }
.pin-input { box-sizing: border-box; width: 100%; text-align: center; font-size: 2rem; letter-spacing: .5em; }
/* Fits inside the side margins even with a phone's larger text (rem grows with it). */
.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 5rem)); gap: .6rem; width: min(100%, 16.2rem); }
.key { height: 4.2rem; font: 600 30px var(--f-num); border-radius: var(--r); background: var(--panel); border: var(--bw) solid var(--line);
cursor: pointer; box-shadow: var(--press); min-width: 0; }
.combo { position: relative; display: flex; flex-direction: column; }
.combo-list { display: flex; flex-direction: column; max-height: 16rem; overflow-y: auto; margin-top: 6px; padding: 6px;
border-radius: 12px; border: var(--bw) solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.combo-list[hidden] { display: none; }
.combo-list button { display: flex; justify-content: space-between; gap: 10px; text-align: left; padding: 9px 10px; border: 0; border-radius: 8px;
background: transparent; color: var(--fg); font: 700 15px var(--f-ui); cursor: pointer; }
.combo-list button small { font-weight: 600; white-space: nowrap; }
.combo-list button:hover, .combo-list button[aria-selected="true"] { background: var(--panel-3); }
.combo-list button[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }
.count-q { width: 100%; max-width: 24rem; margin: 12px 0 4px; }
.key.ok { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
.pin-dots { box-sizing: border-box; height: 3.6rem; display: flex; align-items: center; justify-content: center; padding: 0 14px;
border-radius: var(--r); background: var(--panel-2); border: var(--bw) solid var(--line); color: var(--fg); }
/* ----------------------------------------------------------------- mesas */
.plan-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
/* 10px more under «Mesas»: the zones' chips keep their top border clear. */
.mesas-top { margin-bottom: 24px; }
.zone { margin-bottom: 18px; scroll-margin-top: 80px; }
.zone-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.zone-h h2 { margin: 0; }
.zone-h span { color: var(--muted); font-weight: 700; }
.zones-all { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 16px; align-items: start; }
.floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 18px 14px; padding: 18px 14px;
border-radius: 14px; background: var(--floor); border: 1px solid var(--line-soft); }
[data-style="mercado"] .floor { border-radius: var(--r-xl); border-width: 2px; }
.table { position: relative; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
padding: 8px 6px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer; text-align: center; }
.table b { font: 700 30px/1 var(--f-num); }
.table small { font: 700 12.5px/1.15 var(--f-ui); color: var(--fg-2); }
/* Pizarra: libre dashed, ocupada solid, para servir a double border. */
.table[data-state="libre"] { background: transparent; border: 2px dashed var(--muted); color: var(--fg-2); }
.table[data-state="ocupada"] { background: var(--ok-soft); border-color: var(--ok); }
.table[data-state="ocupada"] small { color: var(--ok-text); }
.table[data-state="listo"] { background: var(--accent-soft); border: 5px double var(--accent); }
.table[data-state="listo"] small { color: var(--accent-text); }
/* Mercado: libre a ring, ocupada filled, para servir green with a bobbing badge. */
[data-style="mercado"] .table { border-radius: 20px; border-width: 3px; box-shadow: 0 4px 0 var(--chunk); transition: transform .25s var(--ease); }
[data-style="mercado"] .table b { font: 700 26px/1 var(--f-display); }
[data-style="mercado"] .table small { font-weight: 900; font-size: 12px; }
[data-style="mercado"] .table:active { transform: scale(.95); }
[data-style="mercado"] .table[data-state="libre"] { border: 3px solid var(--ok); background: var(--panel); color: var(--fg); }
[data-style="mercado"] .table[data-state="libre"] small { color: var(--ok-text); }
[data-style="mercado"] .table[data-state="ocupada"] { background: var(--accent); border-color: color-mix(in srgb, var(--accent) 70%, var(--chunk-ink)); color: var(--accent-ink); }
[data-style="mercado"] .table[data-state="ocupada"] small { color: var(--accent-ink); }
[data-style="mercado"] .table[data-state="listo"] { background: var(--ok); border: 3px solid color-mix(in srgb, var(--ok) 65%, var(--chunk-ink)); color: var(--on-ok); }
[data-style="mercado"] .table[data-state="listo"] small { color: var(--on-ok); }
/* Pizarra: por pagar a double border and «$», reservada stripes and its time, limpiando dotted. */
.table[data-state="porpagar"] { background: var(--warn-soft); border: 5px double var(--warn); }
.table[data-state="porpagar"] small { color: var(--warn-text); }
.table[data-state="reservada"] { border-color: var(--info); background: repeating-linear-gradient(135deg, var(--info-soft) 0 7px, transparent 7px 14px), var(--panel); }
.table[data-state="reservada"] small { color: var(--info-text); }
.table[data-state="limpiando"] { border: 2px dotted var(--fg-2); background: var(--panel-3); color: var(--fg-2); }
/* Mercado: por pagar stripes and a «$» coin, reservada dashed, limpiando hatched. */
[data-style="mercado"] .table[data-state="porpagar"] { border: 3px solid color-mix(in srgb, var(--warn) 70%, var(--chunk-ink));
background: repeating-linear-gradient(135deg, var(--warn-soft) 0 8px, color-mix(in srgb, var(--warn) 35%, var(--panel)) 8px 16px); color: var(--fg); }
[data-style="mercado"] .table[data-state="porpagar"] small { color: var(--warn-text); }
[data-style="mercado"] .table[data-state="reservada"] { border: 3px dashed var(--info); background: var(--info-soft); color: var(--fg); }
[data-style="mercado"] .table[data-state="limpiando"] { border: 3px dotted var(--muted);
background: repeating-linear-gradient(45deg, var(--panel-3) 0 5px, var(--panel) 5px 10px); }
/* An open order's service (app.js tableState), each its own token, border
and fill as well as its words: atendida a plain ring, esperando a bar at
the foot, parcial half filled from below, comiendo filled. */
.table[data-state="atendida"] { --st: var(--st-atendida); }
.table[data-state="esperando"] { --st: var(--st-esperando); }
.table[data-state="parcial"] { --st: var(--st-parcial); }
.table[data-state="comiendo"] { --st: var(--st-comiendo); }
.table:is([data-state="atendida"], [data-state="esperando"], [data-state="parcial"], [data-state="comiendo"]) {
border: 2px solid var(--st); background: color-mix(in srgb, var(--st) 12%, var(--panel)); }
.table:is([data-state="atendida"], [data-state="esperando"], [data-state="parcial"], [data-state="comiendo"]) small {
color: color-mix(in srgb, var(--st) 75%, var(--fg)); }
.table[data-state="esperando"] { box-shadow: inset 0 -6px 0 var(--st); }
.table[data-state="parcial"] { background: linear-gradient(to top, color-mix(in srgb, var(--st) 30%, var(--panel)) 50%,
color-mix(in srgb, var(--st) 8%, var(--panel)) 50%); }
.table[data-state="comiendo"] { border-width: 3px; background: color-mix(in srgb, var(--st) 26%, var(--panel)); }
[data-style="mercado"] .table:is([data-state="atendida"], [data-state="esperando"], [data-state="parcial"], [data-state="comiendo"]) {
border-width: 3px; border-color: color-mix(in srgb, var(--st) 80%, var(--chunk-ink)); }
[data-style="mercado"] .table[data-state="esperando"] { box-shadow: inset 0 -7px 0 var(--st), 0 4px 0 var(--chunk); }
[data-style="mercado"] .table[data-state="comiendo"] { background: var(--st); color: var(--accent-ink); }
[data-style="mercado"] .table[data-state="comiendo"] small { color: var(--accent-ink); }
.table[data-pending] small::after { content: " ⟳"; }
.table .badge { display: none; }
.table[data-state="porpagar"] .badge { display: grid; position: absolute; top: -11px; right: -9px; width: 28px; height: 28px; border-radius: 50%;
place-items: center; background: var(--warn); color: var(--on-warn); font: 800 15px var(--f-num); }
.tablewrap { position: relative; display: grid; }
.tmore { position: absolute; left: 4px; top: 4px; width: 34px; height: 30px; border: 0; border-radius: 9px; background: transparent;
color: var(--muted); font: 800 18px/1 var(--f-ui); cursor: pointer; }
.tmore:hover { background: var(--panel-3); color: var(--fg); }
[data-style="mercado"] .table[data-state="porpagar"] .badge { border: 3px solid var(--fg); background: var(--warn); color: var(--on-warn); font-family: var(--f-display); }
[data-style="mercado"] .table[data-state="listo"] .badge { display: grid; position: absolute; top: -11px; right: -9px; width: 28px; height: 28px;
border-radius: 50%; place-items: center; background: var(--panel); border: 3px solid var(--fg); color: var(--fg); font-weight: 900; font-size: 14px; }
[data-anim="alegres"] .table[data-state="porpagar"] .badge, [data-anim="alegres"] .table[data-state="listo"] .badge { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }
/* «Mostrar sillas»: one per seat, above and below; the filled ones are the covers seated. */
.chairs { position: absolute; left: 10%; right: 10%; display: flex; justify-content: space-evenly; pointer-events: none; }
.chairs.n { top: -10px; }
.chairs.s { bottom: -10px; }
.chairs i { width: 18px; height: 7px; border-radius: 4px; border: 1.5px solid var(--line); background: var(--panel-2); }
.chairs i.on { background: var(--fg-2); border-color: var(--fg-2); }
[data-style="mercado"] .chairs i { border: 0; background: var(--line); height: 8px; }
[data-style="mercado"] .chairs i.on { background: color-mix(in srgb, var(--accent) 60%, var(--panel)); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13.5px; color: var(--fg-2); margin-top: 4px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 24px; height: 16px; border-radius: 5px; display: inline-block; }
.legend .lg-libre { border: 2px dashed var(--muted); }
.legend .lg-ocupada { background: var(--ok-soft); border: 2px solid var(--ok); }
.legend .lg-listo { background: var(--accent-soft); border: 4px double var(--accent); }
.legend .lg-porpagar { background: var(--warn-soft); border: 4px double var(--warn); }
.legend .lg-reservada { border: 2px solid var(--info); background: repeating-linear-gradient(135deg, var(--info-soft) 0 4px, transparent 4px 8px); }
.legend .lg-limpiando { border: 2px dotted var(--fg-2); background: var(--panel-3); }
.legend .lg-atendida { border: 2px solid var(--st-atendida); background: color-mix(in srgb, var(--st-atendida) 12%, var(--panel)); }
.legend .lg-esperando { border: 2px solid var(--st-esperando); box-shadow: inset 0 -4px 0 var(--st-esperando); }
.legend .lg-parcial { border: 2px solid var(--st-parcial); background: linear-gradient(to top, color-mix(in srgb, var(--st-parcial) 35%, var(--panel)) 50%, transparent 50%); }
.legend .lg-comiendo { border: 3px solid var(--st-comiendo); background: color-mix(in srgb, var(--st-comiendo) 26%, var(--panel)); }
[data-style="mercado"] .legend .lg-comiendo { background: var(--st-comiendo); border: 0; border-radius: 7px; }
.plan-title { position: relative; min-width: 0; }
.legend-q { display: none; }
[data-style="mercado"] .legend .lg-porpagar { border: 0; border-radius: 7px; background: repeating-linear-gradient(135deg, var(--warn-soft) 0 4px, var(--warn) 4px 8px); }
[data-style="mercado"] .legend .lg-reservada { border: 2px dashed var(--info); border-radius: 7px; background: var(--info-soft); }
[data-style="mercado"] .legend .lg-limpiando { border: 2px dotted var(--muted); border-radius: 7px; }
[data-style="mercado"] .legend .lg-libre { border: 3px solid var(--ok); border-radius: 7px; }
[data-style="mercado"] .legend .lg-ocupada { background: var(--accent); border: 0; border-radius: 7px; }
[data-style="mercado"] .legend .lg-listo { background: var(--ok); border: 0; border-radius: 7px; }
/* ---------------------------------------------------- the order (ticket) */
.order { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem); gap: 18px; align-items: start; }
.menu section { margin-bottom: 18px; }
.menu h3 { display: flex; align-items: center; gap: 8px; }
[data-catcolors="true"] .menu h3::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--cat); }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 10px; }
.product { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; min-height: 5.5rem;
padding: 12px; text-align: left; border-radius: var(--r); background: var(--panel); border: var(--bw) solid var(--line-soft);
cursor: pointer; font-weight: 700; box-shadow: var(--press); transition: transform .18s var(--ease), border-color .15s; }
.product b { font: 600 calc(19px * var(--num-size)) var(--f-num); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.product:hover { border-color: var(--line); }
.product:disabled { opacity: .45; text-decoration: line-through; border-style: dashed; cursor: not-allowed; }
[data-style="mercado"] .product { border-radius: 22px; }
[data-style="mercado"] .product:not(:disabled):active { transform: scale(.96); }
[data-catcolors="true"] .product { background: color-mix(in srgb, var(--cat) 14%, var(--panel)); border-color: color-mix(in srgb, var(--cat) 45%, var(--line-soft)); }
[data-catcolors="true"] .product:hover { border-color: var(--cat); }
.ticket { position: sticky; top: 84px; display: flex; flex-direction: column; gap: .7rem; padding: 18px; border-radius: var(--r-lg);
background: var(--panel); border: 1px solid var(--line-soft); }
[data-style="mercado"] .ticket { top: 12px; border-width: 2px; border-radius: var(--r-xl); }
.ticket h2 { font-size: 30px; }
.ticket ul, .kot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ticket li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; padding: 8px 0;
border-bottom: 1px dashed var(--line-soft); }
[data-style="mercado"] .ticket ul { gap: 6px; }
[data-style="mercado"] .ticket li { border: 0; padding: 8px; border-radius: 16px; background: var(--panel-2); }
[data-catcolors="true"] .ticket li { border-left: 4px solid var(--cat, transparent); padding-left: 8px; }
.qty { font: 600 calc(20px * var(--num-size)) var(--f-num); color: var(--fg-2); }
.name { font-weight: 700; min-width: 0; }
.name small { display: block; color: var(--accent-text); font-size: 13px; }
.st { font-size: .8rem; color: var(--muted); font-weight: 700; }
li[data-state="nuevo"] .st { color: var(--warn-text); }
li[data-state="listo"] .st { color: var(--ok-text); font-weight: 800; }
li[data-state="anulado"] { opacity: .5; text-decoration: line-through; }
li[data-pending] .st::after { content: " ⟳"; }
/* A product just added (app.js addLine): colours swapped for a moment, no
transition, so «Sobrias» and reduced motion get them too. */
.ticket li[data-lit] { background: var(--accent-soft); }
.ticket .total.lit { background: var(--accent-soft); }
.ticket-bar.lit { filter: brightness(1.25); }
.product .pcount { position: absolute; top: 8px; right: 8px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 700 15px var(--f-num); }
.product[data-photo] .pcount { box-shadow: 0 0 0 2px var(--panel); }
[data-anim="alegres"] .product .pcount[data-bump] { animation: pop .35s var(--ease); }
@keyframes pop { 40% { transform: scale(1.35); } }
.total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: .7rem; margin: 0; font-weight: 700; }
.total b { font: 600 calc(36px * var(--num-size)) var(--f-num); font-variant-numeric: tabular-nums; }
.ticket-bar { display: none; }
.ticket-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ticket-acts .btn { min-height: 44px; padding: 0 10px; font-size: 14px; white-space: normal; }
.ticket-acts .btn[aria-pressed="true"] { border-color: var(--warn); color: var(--warn-text); }
/* ------------------------------------------- the side panel (a sheet on phones) */
.panel-scrim { position: fixed; inset: 0; z-index: 80; background: var(--scrim); border: 0; }
.panel { position: fixed; z-index: 81; top: 0; right: 0; bottom: 0; width: min(26rem, 100%); overflow-y: auto; display: flex; flex-direction: column;
gap: 14px; padding: 20px; background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow); }
[data-style="mercado"] .panel { top: 12px; right: 12px; bottom: 12px; border-radius: var(--r-xl); border: 2px solid var(--line-soft); }
[data-anim="alegres"] .panel { animation: slidein .3s var(--ease); }
@keyframes slidein { from { transform: translateX(30%); opacity: 0; } }
.panel-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.panel-h small { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.panel-h h2 { font-size: 30px; margin: 0; }
.panel-b { display: flex; flex-direction: column; gap: 10px; }
.panel-b .form { margin: 6px 0 0; }
.tstate { font-weight: 800; margin: 0; }
.tstate[data-state="ocupada"] { color: var(--ok-text); }
.tstate[data-state="listo"] { color: var(--accent-text); }
.tstate[data-state="porpagar"] { color: var(--warn-text); }
.tstate[data-state="reservada"] { color: var(--info-text); }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 8px; margin-bottom: 8px; }
.pick { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: var(--r); cursor: pointer;
border: var(--bw) dashed var(--muted); background: transparent; box-shadow: var(--press); }
.pick b { font: 700 24px/1 var(--f-num); }
.pick small { font-size: 12px; color: var(--fg-2); font-weight: 700; }
.pick:disabled { border-style: solid; opacity: .45; cursor: not-allowed; }
.pick[aria-current] { border: 3px solid var(--accent); opacity: 1; }
/* ------------------------------------------------------------- «Caja» */
.adjrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 700; }
.adjrow .seg button { min-height: 36px; padding: 0 10px; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; }
.totals dt { color: var(--fg-2); }
.totals dd { margin: 0; text-align: right; font: 600 calc(19px * var(--num-size)) var(--f-num); font-variant-numeric: tabular-nums; }
.fine { color: var(--muted); font-size: 13px; margin-top: -6px; }
.ticket .pays { gap: 4px; }
.ticket .pays li { grid-template-columns: minmax(0, 1fr) auto auto; padding: 4px 0; border: 0; background: transparent; }
.pays small { color: var(--muted); font-size: 13px; }
.pays .num { font-size: calc(19px * var(--num-size)); }
.panel.wide { width: min(36rem, 100%); }
.paytotal small { display: block; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.paytotal b { font-size: calc(54px * var(--num-size)); line-height: 1; }
.pay .field, .panel-b > .field, .panel-b > .two > .field { display: flex; flex-direction: column; gap: .4rem; font-weight: 700; font-size: 14px; color: var(--fg-2); }
.pay .setting { padding: 6px 0; }
.pay .seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
input.num.big { font-size: calc(26px * var(--num-size)); }
.vuelto { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px; border-radius: var(--r); background: var(--panel-2); font-weight: 700; }
.vuelto b { font-size: calc(34px * var(--num-size)); line-height: 1; }
.vuelto.diff b[data-sign="-1"] { color: var(--crit-text); }
.vuelto.diff b[data-sign="1"] { color: var(--warn-text); }
.vuelto.diff b[data-sign="0"] { color: var(--ok-text); }
.copyrows { display: flex; flex-direction: column; }
.copyrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); }
.copyrow small { display: block; color: var(--muted); font-size: 12.5px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 10px; }
.two input { width: 100%; }
.panel-f { position: sticky; bottom: -20px; display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 0 4px; margin-top: auto; background: var(--panel); }
.panel-f .btn.primary { flex: 1; }
.warnbox { margin: 0; padding: 10px 14px; border-radius: var(--r); background: var(--warn-soft); color: var(--warn-text); font-weight: 700; border: 1px dashed var(--warn); }
.stepper { display: inline-flex; align-items: center; gap: 14px; }
.stepper .btn { width: 52px; padding: 0; font-size: 24px; }
.stepper b { font-size: calc(34px * var(--num-size)); min-width: 2ch; text-align: center; }
.parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 10px; }
.part { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--r); background: var(--panel-2); border: 1px solid var(--line-soft); }
.part small { color: var(--muted); font-weight: 700; }
.part b { font-size: calc(26px * var(--num-size)); }
.part[data-paid="true"] b { text-decoration: line-through; color: var(--muted); }
.part .ok { color: var(--ok-text); font-weight: 800; }
.assign { display: flex; flex-direction: column; gap: 6px; }
.assignrow { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; min-height: 50px;
padding: 6px 12px; border-radius: var(--r); border: var(--bw) solid var(--line-soft); background: transparent; cursor: pointer; }
.assignrow[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.assignrow[aria-pressed="true"] .qty::before { content: "✓ "; color: var(--accent-text); }
.caja-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(19rem, 1fr); gap: 18px; align-items: start; }
.caja-main, .caja-side { display: grid; gap: 16px; }
.charge { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--line-soft); }
.charge:first-of-type { border-top: 0; }
.charge-main { flex: 1; min-width: 0; text-decoration: none; }
.charge-main b { display: block; font-size: 18px; }
.charge-main small { color: var(--muted); }
.charge > .num { font-size: calc(24px * var(--num-size)); }
.charge[data-bill] .charge-main small { color: var(--warn-text); font-weight: 700; }
.charge[data-pending] .charge-main b::after, .moves li[data-pending] b::after, .pays li[data-pending] b::after { content: " ⟳"; }
.till { margin-top: 0; }
.till h2 { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.stats > div { padding: 10px 12px; border-radius: var(--r); background: var(--panel-2); }
.stats small { display: block; color: var(--muted); font-weight: 700; font-size: 13px; }
.stats b { font-size: calc(26px * var(--num-size)); }
.till .totals { margin-bottom: 12px; }
.till .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.moves { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; }
.moves li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line-soft); }
.moves small { color: var(--muted); }
.moves .num { font-size: calc(19px * var(--num-size)); white-space: nowrap; }
.moves li[data-diff="-1"] .num { color: var(--crit-text); }
.moves li[data-diff="1"] .num { color: var(--warn-text); }
.setting textarea { flex: 1 1 100%; }
[data-style="mercado"] .vuelto, [data-style="mercado"] .stats > div, [data-style="mercado"] .part { border-radius: 18px; }
[data-style="mercado"] .assignrow { border-radius: 16px; border-width: 2px; }
/* ---------------------------------------------------------------- cocina */
.kots { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 16px; align-items: start; }
.kot { display: flex; flex-direction: column; border-radius: 16px; background: var(--panel); border: 1.5px solid var(--line-soft); overflow: hidden; }
.kot header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 14px; background: var(--panel-2);
border-bottom: 1px solid var(--line-soft); }
.kot header b { font: 700 18px/1.2 var(--f-ui); }
.kot header small { grid-column: 1; color: var(--muted); font-size: 13px; }
.kot .timer { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 700 calc(36px * var(--num-size))/1 var(--f-num); font-variant-numeric: tabular-nums; }
.kot .late { display: none; font: 700 12px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
.kot[data-urgency="atento"] { border-color: var(--warn); }
.kot[data-urgency="atento"] .timer { color: var(--warn-text); }
.kot[data-urgency="atrasado"] { border-color: var(--crit); border-width: 2.5px; }
.kot[data-urgency="atrasado"] header { background: repeating-linear-gradient(135deg, var(--crit-soft) 0 10px, transparent 10px 20px), var(--panel-2); }
.kot[data-urgency="atrasado"] .timer, .kot[data-urgency="atrasado"] .late { color: var(--crit-text); }
.kot[data-urgency="atrasado"] .late { display: block; grid-column: 1; }
[data-anim="alegres"] .kot[data-urgency="atrasado"] { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px var(--crit-soft); } }
.kot ul { padding: 6px 8px; }
.kot li { border-radius: 10px; }
.line { width: 100%; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .5rem; align-items: center; text-align: left;
padding: 9px 6px; border-radius: 10px; border: 0; background: transparent; font-size: 17px; line-height: 1.25; }
button.line { cursor: pointer; }
button.line:hover { background: var(--panel-2); }
.line .qty { font-size: calc(26px * var(--num-size)); font-weight: 700; color: var(--fg); }
.kot li[data-state="preparando"] .st { color: var(--warn-text); }
.kot li[data-state="listo"] .name, .kot li[data-state="listo"] .qty { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); }
.kot .adv { margin: 4px 10px 10px; width: auto; }
.kot[data-all="listo"] .adv { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
/* Mercado: the timer a chip, green → amber → red pulsing. */
/* Several stations on: the station's name on its ticket. Just arrived
(app.js `arrived`): «Nuevo» and a highlight until touched; the border's
colour pulses (no movement: also under «Sobrias»; reduced motion keeps
the static highlight). */
.kot header .stn { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line-soft);
font: 700 12px var(--f-ui); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.kot header .new { display: none; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
font: 700 12px var(--f-ui); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.kot[data-new] { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: arrive 1.2s ease-in-out infinite; }
.kot[data-new] header .new { display: inline-block; }
@keyframes arrive { 50% { box-shadow: 0 0 0 8px var(--accent-soft); border-color: var(--fg); } }
.soundbar { display: block; width: 100%; min-height: 48px; margin-bottom: 14px; border-radius: 12px; border: var(--bw) dashed var(--warn);
background: var(--warn-soft); color: var(--warn-text); font: 700 16px var(--f-ui); cursor: pointer; }
.volume { display: flex; align-items: center; gap: 10px; }
/* «Para servir» (app.js `trayButton`/`trayPanel`): a button always in view
while something is ready at this person's tables; above the phone's
bottom bar and the order's ticket bar. */
.fabs { position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 30;
display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; }
.traybtn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 8px 0 18px; border-radius: 999px;
border: 0; background: var(--ok); color: var(--on-ok); font: 700 16px var(--f-ui); box-shadow: var(--shadow); cursor: pointer; }
.traybtn b { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 999px;
background: var(--bg); color: var(--fg); font: 600 calc(20px * var(--num-size)) var(--f-num); }
.tray-o { border-top: 1px dashed var(--line-soft); padding-top: 10px; }
.tray-o:first-child { border-top: 0; padding-top: 0; }
.tray-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tray-h h3 { margin: 0; }
.tray ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; }
.tray li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; padding: 8px 0; }
.tray li[data-pending] { opacity: .55; }
/* The chat (app.js `viewChat`): the list beside the conversation (one or
the other on a phone), the bubble with its unread count (red: a direct
message, orange: a mention, blue: the rest), the popups at the top right. */
.chatbtn { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px;
border: var(--bw) solid var(--line); background: var(--panel-3); color: var(--fg); box-shadow: var(--shadow); }
.chatbtn .ico { width: 24px; height: 24px; }
.chatbtn b, .chan-u, .navbadge[data-tone] { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
background: var(--info); color: var(--bg); font: 700 12px var(--f-ui); }
.chatbtn b { position: absolute; top: -5px; right: -5px; }
[data-tone="mention"] > b, .chan-u[data-tone="mention"], .navbadge[data-tone="mention"] { background: var(--warn); color: var(--on-warn); }
[data-tone="dm"] > b, .chan-u[data-tone="dm"], .navbadge[data-tone="dm"] { background: var(--crit); color: var(--on-crit); }
.chat { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; height: calc(100dvh - 140px); min-height: 320px; }
.chat-list { overflow-y: auto; min-height: 0; padding-right: 6px; border-right: 1px dashed var(--line-soft); }
.chan-s h3, .chan-s summary { margin: 14px 10px 4px; font: 700 12px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.chan-s > .btn, .chan-s > .mini { margin: 4px 10px; }
.chan { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 8px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.chan:hover { background: var(--panel-2); }
.chan[aria-current] { background: var(--panel-3); }
.chan[data-archived] { opacity: .55; }
.chan-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.chan small { flex-basis: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 10px; }
.convo { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.empty-c { justify-content: center; align-items: center; }
.convo-h { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--line-soft); }
.convo-h h2 { margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-h .back { display: none; }
.msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 2px; }
.msgs > .btn { align-self: center; }
.msg { align-self: flex-start; max-width: 78%; padding: 8px 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line-soft); }
.msg[data-own] { align-self: flex-end; background: var(--accent-soft); }
.msg[data-pending] { opacity: .6; }
.msg[data-deleted] { opacity: .65; border-style: dashed; border-color: var(--crit); }
.msg header { display: flex; align-items: baseline; gap: 8px; }
.msg p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* A message's actions: on hover with a mouse, as a menu on a long press. */
.msg { position: relative; }
.msg-acts { display: none; gap: 4px; margin-left: auto; }
.msg-acts .mini { min-height: 28px; min-width: 28px; padding: 0 .4rem; }
.msg-acts .act-l { display: none; }
@media (hover: hover) {
.msg-acts { display: flex; opacity: 0; transition: opacity .12s; }
.msg:hover .msg-acts, .msg:focus-within .msg-acts { opacity: 1; }
}
@media (hover: none) {
.msg { -webkit-touch-callout: none; user-select: none; }
}
.msg[data-menu] { z-index: 7; }
.msg[data-menu] .msg-acts { display: flex; opacity: 1; position: absolute; top: calc(100% + 4px); right: 0; flex-direction: column; min-width: 12rem;
padding: 6px; border-radius: 12px; border: var(--bw) solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.msg:not([data-own])[data-menu] .msg-acts { right: auto; left: 0; }
.msg[data-menu] .msg-acts .mini { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; background: transparent; font-size: 15px; }
.msg[data-menu] .msg-acts .act-l { display: inline; }
.msg-scrim { position: fixed; inset: 0; z-index: 6; border: 0; background: transparent; }
.msg .edited { padding: 0; border: 0; background: none; color: var(--muted); font: italic 12px var(--f-ui); }
.msg button.edited { text-decoration: underline dotted; cursor: pointer; }
.msg-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; min-width: min(22rem, 70vw); }
.msg-edit textarea { min-height: 3.2rem; max-height: 9rem; resize: vertical; }
.msg-edit-f { display: flex; justify-content: flex-end; gap: 6px; }
.msg-edit-f .primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.msg-acts .mini { color: inherit; }
.msg-acts .mini.danger { color: var(--crit-text); }
.versions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.versions li { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--panel-2); }
.versions li[data-current] { border-color: var(--accent); }
.versions p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mention { font-weight: 700; color: var(--info-text); }
.mention.me { padding: 0 3px; border-radius: 4px; background: var(--warn-soft); color: var(--warn-text); }
.typing { min-height: 1.3em; margin: 2px 0 6px; color: var(--muted); font-size: 13px; }
.readonly { margin: 6px 0 0; }
.composer { position: relative; display: flex; align-items: flex-end; gap: 8px; }
.composer textarea { flex: 1; min-width: 0; min-height: 46px; max-height: 9rem; resize: vertical; }
.mentions { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5; display: flex; flex-direction: column; min-width: 14rem;
padding: 6px; border-radius: 12px; border: var(--bw) solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.mentions[hidden] { display: none; }
.mentions button { text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: 700 15px var(--f-ui); cursor: pointer; }
.mentions button:hover, .mentions button[aria-selected="true"] { background: var(--panel-3); }
.mentions button[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }
.chatpops { position: fixed; top: calc(72px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 85; display: flex; flex-direction: column; gap: 10px;
width: min(22rem, calc(100% - 32px)); }
.chatpop { padding: 12px; border-radius: 14px; border: var(--bw) solid var(--line); border-left: 6px solid var(--info); background: var(--panel); box-shadow: var(--shadow); }
.chatpop[data-tone="mention"] { border-left-color: var(--warn); }
.chatpop[data-tone="dm"] { border-left-color: var(--crit); }
.chatpop-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chatpop p { margin: 4px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chatpop-f { display: flex; gap: 6px; margin-bottom: 6px; }
.chatpop-f input { flex: 1; min-width: 0; }
.chatpop-a { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
[data-anim="alegres"] .chatpop[data-new] { animation: slidein .3s var(--ease); }
/* Notifications asked once after signing in; the zones a person serves. */
.pushbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: 12px;
border: var(--bw) solid var(--info); background: var(--info-soft); }
.pushbar span { flex: 1 1 14rem; min-width: 0; font-weight: 700; }
.zonepick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; border: 0; margin: 0; padding: 0; min-width: 0; }
.zonepick[hidden] { display: none; }
.zonepick legend { padding: 0; margin-bottom: 4px; font-weight: 700; font-size: 14px; color: var(--fg-2); }
.zonepick small { flex-basis: 100%; }
.setting.zonepick { padding: 14px 0; border-top: 1px dashed var(--line-soft); }
.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; flex-direction: row !important; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.volume input { width: 140px; accent-color: var(--accent); }
[data-style="mercado"] .kot { border-radius: 22px; border-width: 2px; }
[data-style="mercado"] .kot header { background: transparent; border-bottom: 2px dashed var(--line-soft); }
[data-style="mercado"] .kot .timer { font: 600 17px/1 var(--f-display); border-radius: 12px; padding: 5px 10px; background: var(--ok-soft); color: var(--ok-text); }
[data-style="mercado"] .kot[data-urgency="atento"] { border-color: var(--line-soft); }
[data-style="mercado"] .kot[data-urgency="atento"] .timer { background: var(--warn-soft); color: var(--warn-text); }
[data-style="mercado"] .kot[data-urgency="atrasado"] { border-color: var(--crit); box-shadow: 0 0 0 4px var(--crit-soft); animation: none; }
[data-style="mercado"] .kot[data-urgency="atrasado"] header { background: transparent; }
[data-style="mercado"] .kot[data-urgency="atrasado"] .timer { background: var(--crit); color: var(--on-crit); }
[data-style="mercado"][data-anim="alegres"] .kot[data-urgency="atrasado"] .timer { animation: throb 1s infinite; }
@keyframes throb { 50% { transform: scale(1.08); } }
[data-style="mercado"] .line .qty { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font: 700 17px var(--f-display); background: var(--panel-3); }
[data-style="mercado"] .line { font-size: 15.5px; font-weight: 800; }
.chip.push { margin-left: auto; }
.soldout { margin-bottom: 16px; }
.soldout .setting .dim { font-weight: 700; }
/* --------------------------------------------------------- «Productos» */
.prod { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(19rem, 1fr); gap: 18px; align-items: start; }
.prod > .card > input[type="search"] { width: 100%; margin-bottom: 10px; }
.prod-side { display: grid; gap: 16px; }
.plist section { margin-top: 12px; }
.plist h3 { display: flex; align-items: center; gap: 8px; }
[data-catcolors="true"] .plist h3::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--cat); }
.prow { display: flex; align-items: center; gap: 10px; border-bottom: 1px dashed var(--line-soft); }
.prow-main { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 8px;
border: 0; background: transparent; text-align: left; cursor: pointer; border-radius: 10px; }
.prow-main:hover { background: var(--panel-2); }
.prow[aria-current] .prow-main { background: var(--accent-soft); }
.prow-main b { display: block; }
.prow-main small { color: var(--muted); font-size: 13px; }
.prow[data-available="false"] .prow-main b { text-decoration: line-through; color: var(--muted); }
.prow .pr { font: 600 calc(20px * var(--num-size)) var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-style="mercado"] .prow { border: 0; }
[data-style="mercado"] .prow-main { border-radius: 16px; }
.peditor { margin-top: 0; }
.peditor h2 { margin: 0; }
.peditor .setting:first-of-type { border-top: 1px dashed var(--line-soft); }
.peditor input.num { font: 600 22px var(--f-num); }
.chip.tag-vegano[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
.chip.tag-sin_gluten[aria-pressed="true"] { background: var(--info); border-color: var(--info); color: var(--bg); }
.chip.tag-picante[aria-pressed="true"] { background: var(--crit); border-color: var(--crit); color: var(--on-crit); }
.namelist ul, .tablelist { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.namelist li, .tablelist li { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.namelist li > input { flex: 1 1 8rem; }
.namelist .row, .addtable { display: flex; gap: 8px; flex-wrap: wrap; }
.namelist .row > input { flex: 1 1 10rem; }
.mini { min-height: 36px; min-width: 36px; }
.tablelist li > input { width: 6rem; }
.tablelist input[type="number"], .addtable input[type="number"] { width: 4.5rem; text-align: center; }
.addtable > input:first-child { flex: 1 1 6rem; }
.floor-edit { display: grid; gap: 16px; max-width: 60rem; }
/* The drawing takes the whole width: the board and the tools beside it. */
.floor-edit.floor-draw { max-width: none; }
.floor-draw > .plan-top, .floor-draw > .floor-tabs { max-width: 60rem; }
/* ---------------------------------------------------------- «Equipo» */
.team { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: 1.5rem; align-items: start; }
.team-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.team-h h2 { margin: 0; }
.team .sec-h { display: flex; align-items: center; gap: 8px; font-size: 23px; }
.team h3.sec-h { font-size: 12.5px; margin-top: 1.2rem; }
.devices-sec { margin-top: 2rem; }
.team-table { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; margin-top: .8rem; }
.team-table th, .team-table td { padding-inline: 12px; }
.team-table tbody tr:last-child td { border-bottom: 0; }
.team-table tr[data-member]:hover td { background: var(--panel-2); }
.devices-table { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.devices-table td { padding: 10px 12px; vertical-align: middle; }
.devices-table tbody tr:last-child td { border-bottom: 0; }
.devices-table td b { display: inline; }
.devices-table .acts { width: 1%; white-space: nowrap; }
.team-table th:not(:first-child) { text-align: left; }
.team-table td { vertical-align: middle; }
.team-table tr[data-active="false"] td:not(.acts) { opacity: .6; }
.team-table td small.on { display: block; color: var(--fg); }
.team-table .acts { width: 1%; white-space: nowrap; }
.member-actions { display: flex; flex-wrap: nowrap; gap: 4px; justify-content: flex-end; }
.icon-act { display: inline-grid; place-items: center; padding: 0; width: 36px; color: inherit; }
.icon-act .ico { width: 19px; height: 19px; }
.icon-act[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.icon-act.danger { color: var(--crit-text); }
.icon-act:hover { background: var(--panel-2); }
.mini.danger { color: var(--crit-text); }
.member-edit > td { padding: 0 0 12px; border-bottom: 1px solid var(--line-soft); }
.member-edit .form { margin: 0; }
.device-acts { display: flex; flex-wrap: nowrap; gap: 4px; justify-content: flex-end; }
.pin-email { width: min(100%, 24rem); }
.pin-email summary { cursor: pointer; color: var(--muted); text-align: center; }
.console-people { list-style: none; margin: 0; padding: 0; }
.console-people li { border-bottom: 1px solid var(--line-soft); padding: .7rem 0; }
.devices { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.devices li { display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
.devices small { display: block; }
.code-big { font-size: 1.6rem; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
.code-shown { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-top: .8rem; }
.code-shown .code-big { font-size: 2.6rem; }
.code-big span + span { margin-left: .45em; }
.code-copy { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; }
.code-qr { width: min(14rem, 70vw); aspect-ratio: 1; padding: 6px; border-radius: 10px; background: #fff; color: #111; }
.code-qr svg { display: block; width: 100%; height: 100%; }
.gate-tabs { display: flex; flex-wrap: nowrap; margin: 1rem auto 0; width: fit-content; max-width: 100%; }
.gate-tabs button { flex: 1; white-space: nowrap; padding: 0 12px; }
.code-input { text-transform: uppercase; letter-spacing: .1em; }
/* ---------------------------------------------------------- «Ajustes» */
/* «Ajustes»: the index beside the cards (settingsSpy), a bar of chips on a phone. */
.settings-wrap { display: grid; grid-template-columns: 13rem minmax(0, 60rem); gap: 24px; align-items: start; }
.settings-nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100dvh - 110px); overflow-y: auto;
padding: 8px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-soft); }
.settings-nav a { padding: 8px 12px; border-radius: 10px; color: var(--fg-2); font-weight: 700; font-size: 14.5px; text-decoration: none;
border-left: 3px solid transparent; }
.settings-nav a:hover { background: var(--panel-2); color: var(--fg); }
.settings-nav a[aria-current="true"] { background: var(--panel-3); color: var(--fg); border-left-color: var(--accent); }
.settings .card { scroll-margin-top: 88px; }
@media (max-width: 900px) {
.settings-wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.settings-nav { top: 64px; z-index: 20; flex-direction: row; overflow-x: auto; max-height: none; padding: 6px; scrollbar-width: none;
box-shadow: var(--shadow); }
.settings-nav::-webkit-scrollbar { display: none; }
.settings-nav a { flex: none; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
.settings-nav a[aria-current="true"] { border-bottom-color: var(--accent); }
.settings .card { scroll-margin-top: 130px; }
}
.settings { display: grid; gap: 16px; max-width: 60rem; }
/* «Personas con chat»: each person a box, on or off. */
.people-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 8px; flex: 1 1 100%; }
.person-tog { display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; border-radius: var(--r);
border: var(--bw) solid var(--line); background: transparent; color: var(--muted); font: inherit; cursor: pointer;
transition: background .15s, border-color .15s, color .15s; }
.person-tog .tog-t { display: flex; flex-direction: column; min-width: 0; }
.person-tog b { font-weight: 700; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-tog small { font-size: 12.5px; }
.person-tog .tog-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); }
.person-tog[aria-pressed="true"] { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--panel)); color: var(--fg); }
.person-tog[aria-pressed="true"] .tog-dot { border-color: var(--ok); background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.person-tog[aria-pressed="false"] { border-style: dashed; opacity: .75; }
.person-tog:disabled { cursor: default; }
/* Saving: the dot turns into a spinner, the box stays where it is. */
.person-tog[aria-busy="true"] { cursor: progress; opacity: 1; }
.person-tog[aria-busy="true"] .tog-dot { border-color: var(--line); border-top-color: var(--accent); background: transparent;
box-shadow: none; animation: tog-spin .7s linear infinite; }
@keyframes tog-spin { to { transform: rotate(360deg); } }
.settings .card h2 { margin-bottom: 4px; }
.settings .lead { color: var(--fg-2); }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 14px 0;
border-top: 1px dashed var(--line-soft); }
.setting:first-of-type { border-top: 0; }
.setting .what { flex: 1 1 16rem; min-width: 0; }
.setting .what b { display: block; }
.setting .what small { display: block; color: var(--muted); font-size: 13.5px; }
.setting .what .changed { color: var(--accent-text); font-weight: 700; font-size: 12.5px; margin-left: 6px; }
.setting input[type="number"] { width: 6rem; text-align: center; font: 600 22px var(--f-num); }
.styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 12px; margin: 12px 0; }
.style-pick { display: grid; gap: 8px; padding: 14px; text-align: left; border-radius: var(--r-lg); cursor: pointer; border: 2px solid var(--line); }
.style-pick[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; }
.style-pick b { font-size: 26px; line-height: 1; }
.style-pick small { font-size: 13.5px; }
.style-pick .swatches { display: flex; gap: 6px; }
.style-pick .swatches i { width: 22px; height: 22px; border-radius: 6px; }
.style-pick.pizarra { background: #101311; color: #f2ecdf; border-color: #363d39; font-family: "Atkinson Hyperlegible", sans-serif; border-radius: 18px; }
.style-pick.pizarra b { font-family: "Kalam", cursive; color: #f7b452; }
.style-pick.mercado { background: #f4f1fa; color: #261b38; border-color: #cfc6df; font-family: "Nunito", sans-serif; font-weight: 700; border-radius: 22px; }
.style-pick.mercado b { font-family: "Fredoka", sans-serif; font-weight: 600; color: #ff5a36; }
.device-note { color: var(--muted); font-size: 13.5px; }
.logo-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-pick .ph { width: 88px; height: 88px; border-radius: var(--r); background: var(--panel-2); display: grid; place-items: center;
overflow: hidden; color: var(--muted); font-size: 13px; text-align: center; }
.logo-pick .ph img { width: 100%; height: 100%; object-fit: contain; }
/* ---------------------------------------------------------- tooltips */
.hint { position: fixed; z-index: 1000; max-width: min(22rem, calc(100vw - 16px)); padding: 7px 10px; border-radius: 8px;
background: var(--fg); color: var(--bg); font: 600 13px/1.35 var(--f-ui); pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.info-tip { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
background: var(--info); color: var(--bg); font: 700 13px/1 Georgia, serif; font-style: italic; cursor: help; letter-spacing: 0; text-transform: none; vertical-align: middle; }
/* ------------------------------------------------------------ responsive */
@media (max-width: 1060px) {
.order { grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem); }
}
@media (max-width: 860px) {
.order { grid-template-columns: 1fr; }
.prod { grid-template-columns: 1fr; }
.caja-grid { grid-template-columns: 1fr; }
.ticket { position: static; }
.team { grid-template-columns: 1fr; }
/* The people's table as one card per person on a narrow screen. */
.rtable-wrap:has(.team-table) { overflow: visible; }
.team-table thead { display: none; }
.team-table, .team-table tbody, .team-table tr, .team-table td { display: block; width: auto; }
.team-table tr[data-member] { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.team-table td { border: 0; padding: 2px 0; }
.team-table td[data-label]:not([data-label="Nombre"])::before { content: attr(data-label) ": "; color: var(--muted); font-size: 13px; }
.team-table .acts { width: auto; white-space: normal; padding-top: 6px; }
.member-actions { justify-content: flex-start; }
/* «Cuenta en el teléfono»: barra → a bar that takes you down to the
ticket; hoja → a floating total that opens it as a sheet. */
.ticket-bar { display: flex; align-items: center; gap: 10px; position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 15;
margin-top: 14px; padding: 12px 16px; border-radius: 14px; border: 0; width: 100%; cursor: pointer;
background: var(--accent); color: var(--accent-ink); font-weight: 800; box-shadow: var(--shadow); text-align: left; }
.ticket-bar span { flex: 1; }
.ticket-bar b { font: 600 calc(22px * var(--num-size)) var(--f-num); }
[data-ticket="hoja"] .ticket-bar { position: fixed; left: 16px; right: 16px; width: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 20px; }
[data-phonenav="barra"][data-ticket="hoja"] .ticket-bar { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
.fabs { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
[data-phonenav="barra"] .fabs { bottom: calc(164px + env(safe-area-inset-bottom, 0px)); }
.chat { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 120px); }
[data-phonenav="barra"] .chat { height: calc(100dvh - 210px); }
.chat.open .chat-list, .chat:not(.open) .convo { display: none; }
.convo-h .back { display: inline-flex; }
.msg { max-width: 92%; }
[data-ticket="hoja"] .order .ticket { display: none; }
[data-ticket="hoja"] .order .ticket.open { display: flex; position: fixed; inset: auto 0 0 0; z-index: 85; max-height: 88dvh; overflow-y: auto;
border-radius: 26px 26px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow); }
[data-anim="alegres"][data-ticket="hoja"] .order .ticket.open[data-enter] { animation: sheetup .35s var(--ease); }
@keyframes sheetup { from { transform: translateY(40%); } }
.sheet-scrim { position: fixed; inset: 0; z-index: 84; background: var(--scrim); border: 0; }
[data-ticket="hoja"] .order { padding-bottom: 80px; }
}
/* ------------------------------------- modifiers and photos (phase 8.3) */
.product[data-photo] { padding-top: 0; overflow: hidden; }
.product img { display: block; width: calc(100% + 24px); margin: 0 -12px; aspect-ratio: 4 / 3; object-fit: cover;
background: var(--panel-2); border-bottom: 1px solid var(--line-soft); }
.name small.mods { color: var(--fg-2); font-weight: 700; }
.kot .name small.mods { font-size: 15px; }
.mods-photo { width: 100%; max-height: 12rem; object-fit: cover; border-radius: var(--r); }
.grp h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 8px; font-size: 20px; }
.grp .req { font: 700 12px var(--f-ui); text-transform: uppercase; letter-spacing: .08em; padding: 4px 10px; border-radius: 999px;
background: var(--warn-soft); color: var(--warn-text); }
.grp .req.done { background: var(--ok-soft); color: var(--ok-text); }
.optgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 8px; }
.opt { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 56px; padding: 8px 12px;
text-align: left; font-weight: 700; border-radius: var(--r); background: var(--panel-2); border: var(--bw) solid var(--line-soft); cursor: pointer; }
.opt em { font: 600 15px var(--f-num); font-style: normal; color: var(--fg-2); }
.opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.opt[aria-pressed="true"] span::before { content: "✓ "; color: var(--accent-text); }
[data-style="mercado"] .opt { border-radius: 16px; border-width: 2px; }
.peditor-h { display: flex; flex-direction: column; gap: 10px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-soft); }
.tabs [role="tab"] { min-height: 44px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: transparent;
color: var(--fg-2); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tabs [role="tab"][aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.tabs .n { font: 600 14px var(--f-num); padding: 0 7px; border-radius: 999px; background: var(--panel-2); }
.photo { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 14px; align-items: center; }
.photo .ph { aspect-ratio: 1; border-radius: var(--r); overflow: hidden; display: grid; place-items: center; background: var(--panel-2);
border: 1px dashed var(--line); color: var(--muted); font-size: 13px; font-weight: 700; }
.photo .ph img { width: 100%; height: 100%; object-fit: cover; }
.photo-b { display: grid; gap: 6px; }
.photo-b .row { display: flex; flex-wrap: wrap; gap: 6px; }
.prow-main > span:not(.pr) { flex: 1; min-width: 0; }
.prow-main .thumb { flex: none; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--panel-2); }
.pmods { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.modgroup { padding: 12px; border-radius: var(--r); border: 1px solid var(--line-soft); background: var(--panel-2); }
.modgroup-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pills { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pill { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-2); }
.pill.acc { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.opts span { padding: 4px 10px; border-radius: 8px; background: var(--panel); font-size: 14px; font-weight: 700; }
.opts em { font-style: normal; color: var(--fg-2); margin-left: 4px; }
.addgroup { display: flex; gap: 8px; }
.addgroup select { flex: 1; min-width: 0; }
.grouplist { list-style: none; margin: 0 0 12px; padding: 0; }
.linkrow { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 8px; text-align: left;
border: 0; border-bottom: 1px dashed var(--line-soft); background: transparent; color: inherit; cursor: pointer; }
.linkrow:hover { background: var(--panel-2); }
.optrows { display: flex; flex-direction: column; gap: 6px; }
.optrow { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem auto; gap: 6px; align-items: center; }
.optrow input { width: 100%; }
/* ------------------------------------------- «Carta QR» (phase 8.4) */
/* The customer's page (carta.html): one column, a phone's width. */
.carta { position: relative; z-index: 1; max-width: 36rem; margin: 0 auto; min-height: 100dvh; padding-bottom: 12px; }
.c-loading { padding: 30vh 16px 0; text-align: center; }
.c-gone { padding: 18vh 16px 0; text-align: center; }
.c-head { padding: calc(28px + env(safe-area-inset-top, 0px)) 18px 16px;
background: radial-gradient(120% 90% at 0% 0%, var(--accent-soft), transparent 60%), var(--panel); border-bottom: 1px solid var(--line-soft); }
.c-head h1 { font-size: 34px; margin: 0; }
.c-head p { margin: 6px 0 0; color: var(--fg-2); font-weight: 700; }
.c-head .c-msg { font-weight: 400; font-size: 14.5px; }
[data-style="mercado"] .c-head { border-radius: 0 0 var(--r-xl) var(--r-xl); border: 0; }
.c-cats { position: sticky; top: 0; z-index: 3; padding: 10px 14px; background: var(--topbar); -webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); }
/* Scrolled sideways, the row clips what sticks out: room inside for the chips' borders. */
.c-cats .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: 4px 2px; scrollbar-width: none; }
.c-cats .chip { min-height: 40px; flex: none; }
.c-banner { margin: 12px 14px 0; padding: 12px 14px; border-radius: var(--r); background: var(--ok-soft); border: var(--bw) solid var(--ok);
font-weight: 700; }
.c-banner::before { content: "✓ "; color: var(--ok-text); }
.c-note { margin: 12px 14px 0; color: var(--fg-2); font-weight: 700; }
.c-sec { padding: 6px 14px 4px; }
.c-sec h2 { font-size: 26px; margin: 16px 4px 10px; color: var(--accent-text); display: flex; align-items: center; gap: 8px; }
[data-catcolors="true"] .c-sec h2::before { content: ""; width: 14px; height: 14px; border-radius: 5px; background: var(--cat); }
.dish { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; padding: 10px; margin-bottom: 10px; border-radius: var(--r-lg);
background: var(--panel); border: 1px solid var(--line-soft); }
.dish.nophoto { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
.dish img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); background: var(--panel-2); }
[data-catcolors="true"] .dish { border-left: 5px solid var(--cat); }
[data-style="mercado"] .dish { border-width: 2px; box-shadow: var(--press); }
.dish h3 { margin: 0; font: 700 17px/1.2 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--fg); }
.dish p { margin: 3px 0 0; font-size: 14px; color: var(--fg-2); line-height: 1.35; }
.dish .tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.tg { font: 700 11px var(--f-ui); letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px;
border: 1px solid var(--line); color: var(--fg-2); }
.tg.picante { border-color: var(--crit); color: var(--crit-text); }
.tg.vegano { border-color: var(--ok); color: var(--ok-text); }
.tg.sin_gluten { border-color: var(--info); color: var(--info-text); }
.dish .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.dish .pr { font-size: calc(24px * var(--num-size)); line-height: 1; }
.dish .add { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink);
font: 700 28px/1 var(--f-ui); cursor: pointer; box-shadow: var(--press-accent); flex: none; }
.dish .add .n { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px;
background: var(--fg); color: var(--bg); font: 700 13px/22px var(--f-num); }
.incart { display: inline-flex; align-items: center; gap: 6px; }
.incart button { width: 42px; height: 42px; border-radius: 50%; border: var(--bw) solid var(--line); background: transparent; color: var(--fg);
font: 700 22px/1 var(--f-ui); cursor: pointer; }
.incart button:disabled { opacity: .4; cursor: not-allowed; }
.incart b { font-size: calc(22px * var(--num-size)); min-width: 1.4em; text-align: center; }
/* Agotado: greyed, the price struck, and said in words. */
.dish.out { opacity: .55; border-style: dashed; }
.dish.out img { filter: grayscale(1); }
.dish.out .pr { text-decoration: line-through; }
.soldout { font: 700 12px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); border: 1.5px dashed var(--muted);
padding: 6px 10px; border-radius: 8px; }
.c-mine ul { list-style: none; margin: 0 0 8px; padding: 0; }
.c-mine li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 4px;
border-bottom: 1px dashed var(--line-soft); }
.c-mine .name small { color: var(--fg-2); }
.c-mine li[data-state="nuevo"] .st { color: var(--warn-text); }
.c-mine li[data-state="listo"] .st, .c-mine li[data-state="entregado"] .st { color: var(--ok-text); }
.c-mine .totals { padding: 4px; }
.c-bottom { position: sticky; bottom: 0; z-index: 4; display: grid; gap: 8px; margin-top: 8px;
padding: 14px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--bg) 22%); }
.c-bottom .two { grid-template-columns: 1fr 1fr; gap: 8px; }
.c-bottom .btn { min-height: 52px; white-space: normal; background: var(--panel); }
.cartbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; padding: 0 18px; border: 0;
border-radius: var(--r-lg); background: var(--accent); color: var(--accent-ink); font: 800 16px var(--f-ui); cursor: pointer;
box-shadow: var(--press-accent), var(--shadow); }
.cartbar b { font-size: calc(26px * var(--num-size)); }
[data-anim="alegres"] .cartbar { animation: rise .35s var(--ease); }
.c-scrim { position: fixed; inset: 0; z-index: 80; background: var(--scrim); border: 0; }
.c-sheet { position: fixed; z-index: 81; left: 0; right: 0; bottom: 0; max-width: 36rem; margin: 0 auto; max-height: 88dvh; overflow-y: auto;
padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-radius: 24px 24px 0 0; box-shadow: var(--shadow); }
[data-anim="alegres"] .c-sheet { animation: sheetup .35s var(--ease); }
@keyframes sheetup { from { transform: translateY(40%); } }
.c-sheet-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.c-sheet-h h2 { font-size: 28px; margin: 0; }
.c-sheet-b { display: flex; flex-direction: column; gap: 12px; }
.c-sheet-b .field { display: flex; flex-direction: column; gap: .4rem; font-weight: 700; font-size: 14px; color: var(--fg-2); }
.c-photo { width: 100%; max-height: 14rem; object-fit: cover; border-radius: var(--r); }
.c-lines { list-style: none; margin: 0; padding: 0; }
.c-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0;
border-bottom: 1px dashed var(--line-soft); }
.c-lines .name small { display: block; color: var(--fg-2); font-weight: 400; font-size: 13.5px; }
.c-lines li > .num { font-size: calc(19px * var(--num-size)); min-width: 4.5rem; text-align: right; }
.c-qty { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--fg-2); }
/* The staff's «Carta QR» (app.js viewCarta): the codes by zone, printable. */
.carta-admin { display: grid; gap: 16px; }
.qrzone h3 { margin: 6px 0 10px; }
.qrgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 12px; margin-bottom: 8px; }
.qrcard { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 12px; border-radius: var(--r-lg);
border: 1px solid var(--line-soft); background: var(--panel-2); }
.qrcard .code { width: 100%; max-width: 9.5rem; aspect-ratio: 1; padding: 4px; border-radius: 10px; background: #fff; color: #111; }
.qrcard .code svg { display: block; width: 100%; height: 100%; }
.qrcard b { font: var(--title-weight) 24px/1 var(--f-display); }
.qrcard small { color: var(--muted); font-size: 12px; word-break: break-all; }
.qrcard .local, .qrcard .scan { display: none; }
.qrcard .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.qrcard .acts a { text-decoration: none; display: inline-flex; align-items: center; }
/* The customer's sheet has its button at the bottom: the toast goes up top. */
.carta-page .toast { top: calc(14px + env(safe-area-inset-top, 0px)); bottom: auto; }
/* A table a customer called from the carta: a bell, a ring, and in words. */
.table[data-call] { outline: 3px solid var(--info); outline-offset: 3px; }
.table .callbadge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px;
background: var(--info); color: var(--bg); font: 800 11px/1.4 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
[data-anim="alegres"] .table[data-call] .callbadge { animation: bob 1.6s ease-in-out infinite; }
.callbox { margin: 0; padding: 10px 14px; border-radius: var(--r); border: var(--bw) solid var(--info); background: var(--info-soft);
color: var(--info-text); font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.qrtag { font: 800 10.5px/1 var(--f-ui); letter-spacing: .06em; padding: 3px 5px; border-radius: 5px; border: 1px solid var(--info);
color: var(--info-text); margin-left: 6px; vertical-align: middle; }
/* ------------------------------------------- ingredients and inventory */
.navbadge { position: absolute; top: 4px; right: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
display: grid; place-items: center; background: var(--crit); color: var(--on-crit); font: 700 13px var(--f-num); }
.okbox { margin: 0; padding: 10px 14px; border-radius: var(--r); background: var(--ok-soft); color: var(--fg); border: 1px dashed var(--ok); }
.pill.low { background: var(--warn-soft); border-color: var(--warn); color: var(--warn-text); }
.pill.zero { background: var(--crit-soft); border-color: var(--crit); color: var(--crit-text); }
.inv-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.inv-tools input[type="search"] { flex: 1 1 16rem; }
.inv-tools .chips { margin-bottom: 0; }
.ilist section { margin-top: 14px; }
.ingrow { width: 100%; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(9rem, 1fr) 6.5rem 8.5rem; gap: 6px 14px; align-items: center;
padding: 10px 8px; border: 0; border-bottom: 1px dashed var(--line-soft); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.ingrow:hover { background: var(--panel-2); }
.ing-name { min-width: 0; }
.ing-name b, .ing-fig small { display: block; }
.ing-name small, .ing-fig small { color: var(--muted); font-size: 13px; }
.ing-fig .num { font-size: calc(18px * var(--num-size)); white-space: nowrap; }
.stockcell { display: grid; gap: 5px; min-width: 0; }
.stockcell .v { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: calc(19px * var(--num-size)); }
.stockcell[data-level="low"] .v { color: var(--warn-text); }
.stockcell[data-level="zero"] .v { color: var(--crit-text); }
.lvl { position: relative; display: block; height: 6px; border-radius: 999px; background: var(--panel-3); }
.lvl i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ok); }
.stockcell[data-level="low"] .lvl i { background: var(--warn); }
.stockcell[data-level="zero"] .lvl i { background: var(--crit); }
/* The minimum: a mark, so the level isn't told by colour alone. */
.lvl u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--fg); }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 16px; }
.kpis .foot { display: block; color: var(--muted); font-size: 13px; }
.kpis [data-level="low"] b { color: var(--warn-text); }
.kpis [data-level="zero"] b { color: var(--crit-text); }
.inv-screen > .card + .inv-grid, .inv-screen > .card + .card { margin-top: 16px; }
.inv-grid { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
.chains, .levels, .stockmoves { list-style: none; margin: 0; padding: 0; }
.chains li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px dashed var(--line-soft); }
.chains li > span:not(.arrow) { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--r); background: var(--panel-2); }
.chains small { color: var(--muted); }
.chains .arrow { font-size: 22px; color: var(--muted); }
.levels li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, 1.2fr); gap: 10px; align-items: center; padding: 8px 0;
border-bottom: 1px dashed var(--line-soft); }
.levels + .btn { margin-top: 10px; }
.stockmoves li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0;
border-bottom: 1px dashed var(--line-soft); }
.stockmoves .mv small { display: block; color: var(--muted); font-size: 13px; }
.stockmoves .num { font-size: calc(18px * var(--num-size)); white-space: nowrap; }
.stockmoves [data-sign="1"] { color: var(--ok-text); }
.stockmoves [data-sign="-1"] { color: var(--fg-2); }
.mtype { justify-self: start; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px;
border-radius: 999px; border: 1px solid var(--line); color: var(--fg-2); }
[data-kind="compra"] .mtype { border-color: var(--ok); color: var(--ok-text); }
[data-kind="merma"] .mtype { border-style: dashed; border-color: var(--crit); color: var(--crit-text); }
[data-kind="ajuste"] .mtype { border-color: var(--info); color: var(--info-text); }
.countrows { display: flex; flex-direction: column; }
.countrow { display: grid; grid-template-columns: minmax(0, 1.4fr) 7.5rem 8rem 7.5rem; gap: 6px 14px; align-items: center; padding: 10px 0;
border-bottom: 1px dashed var(--line-soft); }
.countrow > span:first-child small { display: block; color: var(--muted); font-size: 13px; }
.countrow input { width: 100%; font: 600 20px var(--f-num); }
.countrow .diff[data-sign="-1"] { color: var(--crit-text); }
.countrow .diff[data-sign="1"] { color: var(--warn-text); }
.count-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
padding: 12px 0 2px; background: var(--panel); }
.count-foot > span { margin-right: auto; }
.comp { display: grid; gap: 14px; margin-top: 14px; }
.comprows { display: flex; flex-direction: column; }
.comprow { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 7rem 5.5rem auto; gap: 8px; align-items: center; padding: 8px 0;
border-bottom: 1px dashed var(--line-soft); }
.comprow b, .comprow small { display: block; }
.comprow input, .comprow select { width: 100%; }
.comprow > .num { text-align: right; }
.costbox .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.costbox [data-margin="good"] b { color: var(--ok-text); }
.costbox [data-margin="low"] b { color: var(--crit-text); }
.costbox p { margin: 6px 0 0; }
.meter { height: 10px; border-radius: 999px; background: var(--ok-soft); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--warn); }
[data-style="mercado"] .chains li > span:not(.arrow), [data-style="mercado"] .okbox { border-radius: 18px; }
@media (max-width: 1060px) {
.inv-grid { grid-template-columns: minmax(0, 1fr); }
.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.ingrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ingrow .ing-name, .ingrow .stockcell { grid-column: 1 / -1; }
.countrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.countrow > span:first-child { grid-column: 1 / -1; }
.comprow { grid-template-columns: minmax(0, 1fr) 4.5rem 6.5rem auto; }
.comprow > .num { display: none; }
.stockmoves li { grid-template-columns: minmax(0, 1fr) auto; }
.stockmoves .mtype { grid-column: 1 / -1; }
}
@media print {
.rail, .top, .drawer-scrim, .grain, .toast, .no-print, .panel, .panel-scrim { display: none !important; }
.app, [data-style="mercado"] .app { display: block; padding: 0; }
.view { padding: 0; max-width: none; }
html, body { background: #fff; color: #111; }
.carta-admin > :not(.qrsheet) { display: none; }
.qrsheet { border: 0; padding: 0; background: #fff; }
.qrsheet > h2, .qrsheet > p { display: none; }
.qrzone h3 { display: none; }
.qrgrid { grid-template-columns: repeat(2, 1fr); gap: 10mm; }
.qrcard { break-inside: avoid; border: 1px dashed #999; background: #fff; color: #111; padding: 8mm 6mm; border-radius: 4mm; }
.qrcard .code { max-width: 55mm; padding: 0; }
.qrcard .local { display: block; font: 700 16pt/1.1 var(--f-display); }
.qrcard .scan { display: block; font-size: 11pt; }
.qrcard b { font-size: 22pt; color: #111; }
.qrcard small, .qrcard .acts { display: none; }
}
@media (max-width: 760px) {
.app { grid-template-columns: minmax(0, 1fr); }
.top { padding: 8px 16px; gap: 10px; }
.top .hide-s { display: none; }
.clock { font-size: 24px; }
.view { padding: 18px 16px 40px; }
/* «Mesas»: small tiles on a floor that never runs wider than the screen,
the legend behind «?», the chips scrolling in their own row. */
.floor { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 16px 10px; padding: 16px 10px; }
.table { min-height: 80px; padding: 6px 4px; }
.table b, [data-style="mercado"] .table b { font-size: 24px; }
.table small, [data-style="mercado"] .table small { font-size: 11.5px; }
.tmore { width: 28px; height: 26px; left: 2px; top: 2px; font-size: 16px; }
.zones-all { grid-template-columns: 1fr; }
.plan-title { display: flex; align-items: center; gap: 10px; }
.plan-title h1 { margin: 0; }
.legend-q { display: grid; width: 38px; height: 38px; font: 800 18px var(--f-ui); }
.legend { display: none; }
.legend[data-open] { display: flex; position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: min(18rem, calc(100vw - 32px));
flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line);
box-shadow: var(--shadow); }
.chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding: 3px 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; }
.panel, [data-style="mercado"] .panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 85dvh; border-radius: 24px 24px 0 0;
border: 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.account { top: auto !important; left: 0; right: 0 !important; bottom: 0; width: auto; border-radius: 24px 24px 0 0;
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.account-scrim { background: var(--scrim); }
/* «Menú en el teléfono»: cajón → a drawer from the left behind ☰. */
[data-phonenav="cajon"] .rail { position: fixed; inset: 0 auto 0 0; height: auto; align-self: stretch; width: 250px; transform: translateX(-105%);
transition: transform .2s ease; box-shadow: var(--shadow); }
[data-phonenav="cajon"] .rail.open { transform: none; }
[data-phonenav="cajon"] .navbtn { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 54px; padding: 0 14px; font-size: 16px; width: auto; }
[data-phonenav="cajon"] .brand { flex-direction: row; justify-content: flex-start; padding-left: 12px; }
[data-phonenav="cajon"] .drawer-scrim.open { display: block; position: fixed; inset: 0; z-index: 35; background: var(--scrim); border: 0; }
[data-phonenav="cajon"] .burger { display: grid; }
[data-style="mercado"][data-phonenav="cajon"] .rail { top: 0; border-radius: 0 var(--r-xl) var(--r-xl) 0; align-items: stretch; }
/* barra → a bar at the bottom. */
[data-phonenav="barra"] .rail { position: fixed; inset: auto 0 0 0; top: auto; height: auto; flex-direction: row; gap: 4px; z-index: 40;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid var(--line-soft); overflow-x: auto; }
[data-phonenav="barra"] .rail .brand { display: none; }
[data-phonenav="barra"] #nav { flex-direction: row; flex: 1; justify-content: space-around; }
[data-phonenav="barra"] .navbtn { min-width: 68px; min-height: 58px; flex: 1; width: auto; }
[data-phonenav="barra"] .view { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
[data-style="mercado"][data-phonenav="barra"] .rail { border-radius: 24px 24px 0 0; }
[data-style="mercado"] .app { padding: 12px 12px 0; gap: 0; }
[data-style="mercado"] .top { padding: 0 0 10px; }
[data-style="mercado"] .view { padding: 4px 0 40px; }
[data-style="mercado"][data-phonenav="barra"] .view { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 420px) {
.who .name-s { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* ------------------------------------------------- «Reportes», the shift */
.delta { font-weight: 800; white-space: nowrap; }
.delta[data-sign="1"] { color: var(--ok-text); }
.delta[data-sign="-1"] { color: var(--crit-text); }
.shift { margin: 1.25rem 0 .5rem; }
.shift .inv-grid { grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr); }
.alerts, .toplist, .hbars { list-style: none; margin: 0; padding: 0; }
.alerts li { padding: 10px 12px; margin-bottom: 8px; border-radius: var(--r); background: var(--panel-2); border-left: 4px solid var(--line); font-weight: 700; }
.alerts li[data-level="zero"] { border-left-color: var(--crit); }
.alerts li[data-level="low"] { border-left-color: var(--warn); }
.alerts a { color: var(--fg); text-decoration: none; }
.alerts a::after { content: " →"; color: var(--muted); }
.toplist { counter-reset: top; }
.toplist li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); }
.toplist li::before { counter-increment: top; content: counter(top); width: 1.6em; color: var(--muted); font: 600 16px var(--f-num); }
.toplist li span { flex: 1; }
.toplist + .btn, .card > .btn.quiet { margin-top: 10px; }
.rep-periods { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.rep-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.rep-charts { grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); margin-bottom: 16px; }
.reports > .card { margin-bottom: 16px; }
/* Another period asked: the last report, dimmed until the new one comes. */
.reports[aria-busy="true"] > :not(.plan-top, .rep-periods) { opacity: .45; transition: opacity .2s; }
/* The title bar: sticky under the top bar, small once the page scrolls. */
.rep-head { position: sticky; top: var(--top-h, 64px); z-index: 20; margin: -8px -12px 14px; padding: 8px 12px;
border-radius: 0 0 var(--r) var(--r); transition: padding .15s, background-color .15s; }
.rep-head.stuck { padding-block: 6px; background: var(--topbar); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .5); align-items: center; }
.rep-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rep-title h1 { margin: 0; transition: font-size .15s; }
.rep-head.stuck h1 { font-size: 18px; }
.rep-head.stuck .rep-when { display: none; }
.rep-head.stuck .btn { min-height: 0; padding-block: 6px; font-size: 13px; }
.rep-reload { width: 36px; height: 36px; }
.rep-reload .ico { width: 18px; height: 18px; }
.rep-reload[aria-busy="true"] .ico { animation: rep-spin .8s linear infinite; }
@keyframes rep-spin { to { transform: rotate(360deg); } }
.rep-at { font-size: 12px; }
.rep-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.rep-note { font-size: 13px; margin: 10px 0 0; }
.chart { margin: 0; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 180px; padding-top: 22px; }
.bar { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
align-items: center; outline: none; }
.bar i { display: block; width: 100%; max-width: 38px; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--accent); }
.bar small { margin-top: 6px; font: 600 12px var(--f-num); color: var(--muted); white-space: nowrap; }
.bar-v { position: absolute; top: -20px; font-size: 12px; font-weight: 700; color: var(--fg-2); white-space: nowrap; }
.bar:hover i, .bar:focus-visible i { background: var(--accent-text); }
.bar[data-tip]:hover::after, .bar[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 4px);
z-index: 5; padding: 6px 10px; border-radius: 8px; background: var(--fg); color: var(--bg); font-size: 13px; font-weight: 700;
white-space: nowrap; pointer-events: none; }
.bar:first-child[data-tip]::after { left: 0; }
.bar:last-child[data-tip]::after { right: 0; }
.chart details { margin-top: 10px; }
.chart summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 700; }
.rtable-wrap { overflow-x: auto; }
.rtable { width: 100%; border-collapse: collapse; }
.rtable th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }
.rtable td { padding: 8px; border-bottom: 1px dashed var(--line-soft); vertical-align: top; }
.rtable td small { display: block; color: var(--muted); font-size: 13px; }
.rtable .num, .rtable th:not(:first-child) { text-align: right; white-space: nowrap; }
.margin[data-margin="good"] { color: var(--ok-text); font-weight: 700; }
.margin[data-margin="low"] { color: var(--crit-text); font-weight: 700; }
.hbars li { display: grid; grid-template-columns: minmax(6rem, 1fr) minmax(4rem, 1.2fr) auto; gap: 10px; align-items: center; padding: 7px 0; }
.hbars .hb-name small { display: block; color: var(--muted); font-size: 13px; }
.hb-track { height: 10px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.hb-track i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.hbars + .stockmoves, .hbars + .levels { margin-top: 12px; }
[data-style="mercado"] .alerts li { border-radius: 14px; }
@media (max-width: 1060px) {
.shift .inv-grid, .rep-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
.bars { height: 140px; }
.bar small { font-size: 10px; }
.rep-range input { flex: 1 1 7rem; width: 7rem; }
}
.kot header .mini { grid-column: 1; justify-self: start; margin-top: 4px; }
/* ------------------------------------------------------------ printing:
only #print, as wide as the roll (72 mm printable of 80, 48 of 58),
black on white whatever the style and theme. */
#print { display: none; }
@media print {
@page { margin: 0; }
html, body { background: #fff !important; }
body > :not(#print) { display: none !important; }
#print { display: block; width: 72mm; padding: 2mm 0 6mm; color: #000; font: 400 12px/1.35 "Atkinson Hyperlegible", system-ui, sans-serif; }
#print * { font-family: inherit; letter-spacing: normal; }
#print[data-paper="58"] { width: 48mm; font-size: 11px; }
#print section + section { break-before: page; }
#print h1 { font-size: 17px; text-align: center; margin: 0 0 2px; }
#print h2 { font-size: 14px; text-align: center; text-transform: uppercase; margin: 6px 0; }
#print p { margin: 0; }
#print .c { text-align: center; }
#print .foot { margin-top: 6px; font-weight: 700; }
#print hr { border: 0; border-top: 1px dashed #000; margin: 5px 0; }
#print .pr { display: flex; justify-content: space-between; gap: 6px; }
#print .pr span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
#print .pr.big { font-weight: 700; font-size: 1.2em; }
#print .sub { padding-left: 1.2em; font-size: .92em; }
#print .comanda h2 { font-size: 16px; }
#print .huge { font-size: 26px; font-weight: 700; text-align: center; margin: 2px 0 4px; }
#print .cl { margin: 0 0 5px; }
#print .cl b { font-size: 16px; }
#print .cl p { padding-left: 1.2em; }
#print .cl .note { font-weight: 700; }
}
/* The floating chat (app.js `chatFloat`): a phone's from the bubble, and
anyone's opened on a person («Mensaje directo» in «Equipo»). */
.chatfloat { position: fixed; z-index: 84; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px));
width: min(24rem, calc(100% - 32px)); height: min(70dvh, 36rem); display: flex; flex-direction: column; padding: 8px 10px 10px;
border-radius: 20px 20px 6px 20px; border: var(--bw) solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.chatfloat-scrim { position: fixed; inset: 0; z-index: 83; border: 0; background: transparent; }
.chatfloat-h { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--line-soft); }
.chatfloat-h b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.burger-c { position: relative; font-size: 20px; }
.burger-c i { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 999px; background: var(--info); }
.burger-c i[data-tone="mention"] { background: var(--warn); }
.burger-c i[data-tone="dm"] { background: var(--crit); }
.chatfloat-list { flex: 1; min-height: 0; overflow-y: auto; padding-top: 6px; }
.chatfloat-list .chan { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.chatfloat .convo { flex: 1; }
.chatfloat .convo-h { display: none; }
.chatfloat .msgs { padding-top: 8px; }
.chatfloat .msg { max-width: 88%; }
.chatfloat .composer textarea { min-height: 42px; }
/* The chat on a phone (app.js `chatFloat`, `chatPops`): small cards rising
from the bubble instead of the popups at the top, and the chat floating
over the screen from the bubble, its burger switching conversations. */
@media (max-width: 760px) {
.chatpops { top: auto; right: 16px; bottom: calc(146px + env(safe-area-inset-bottom, 0px)); width: min(17rem, calc(100% - 32px));
flex-direction: column-reverse; gap: 8px; }
[data-phonenav="barra"] .chatpops, [data-phonenav="barra"] .chatfloat { bottom: calc(226px + env(safe-area-inset-bottom, 0px)); }
.chatpop { padding: 8px 10px; border-radius: 14px 14px 4px 14px; border-left-width: 4px; font-size: 14px; }
.chatpop-h b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.chatpop-h .iconbtn { width: 34px; height: 34px; }
.chatpop p { margin: 2px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chatpop-a .mini, .chatpop-a a { min-height: 36px; display: inline-flex; align-items: center; }
.chatfloat { left: 16px; right: 16px; width: auto; bottom: calc(146px + env(safe-area-inset-bottom, 0px)); height: min(68dvh, 34rem); }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
.chatpop[data-new], .chatfloat[data-new] { transform-origin: calc(100% - 26px) calc(100% + 60px); animation: frombubble .25s var(--ease); }
}
@keyframes frombubble { from { transform: scale(.2); opacity: 0; } }
/* «−» on a product's tile and the ticket's lines: one less, not sent yet. */
.ptile { position: relative; display: grid; }
.ptile .product { min-width: 0; }
.pminus { position: absolute; top: 4px; right: 40px; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
border: var(--bw) solid var(--line); background: var(--panel); color: var(--fg); font: 700 20px/1 var(--f-num); cursor: pointer;
box-shadow: var(--press); touch-action: manipulation; z-index: 1; }
.pminus:hover { background: var(--panel-3); }
.ticket .mini.minus { min-width: 34px; min-height: 34px; font: 700 18px/1 var(--f-num); }
/* The kitchen's «Quitar» (Administración). */
.kot li.with-void { display: flex; align-items: stretch; gap: 6px; }
.kot li.with-void > .line { flex: 1; min-width: 0; }
.kot .line-void { align-self: center; min-width: 34px; min-height: 34px; }
.kot header .kot-void { color: var(--crit-text); }
/* «Historial» */
.history { display: grid; gap: 14px; max-width: 60rem; }
.history .lead { color: var(--fg-2); }
.hist-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.hist-filters input { flex: 1 1 16rem; }
.hist-filters select { flex: 0 1 14rem; }
.hist { list-style: none; margin: 0; padding: 6px 16px; }
.hist-day { padding: 12px 0 4px; font: 700 12.5px/1.3 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hist-row { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); }
.hist-row:last-child { border-bottom: 0; }
.hist-row time { color: var(--fg-2); }
/* «Cobro de los meseros»: the waiter's green «Cobrar», the wait, Caja's approvals. */
.btn.go { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
.btn.go:hover { filter: brightness(1.07); background: var(--ok); }
.waitbox { margin: 0; padding: 12px 14px; border-radius: var(--r); border: var(--bw) dashed var(--warn); color: var(--warn-text);
font-weight: 700; text-align: center; }
.approvals { border-color: var(--ok); }
/* The carta's photos: tapped, full screen (carta.js `lightbox`). */
.c-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r); }
.c-zoom img { display: block; }
.c-photo.c-zoom { max-height: none; }
.c-photo.c-zoom img { width: 100%; max-height: 14rem; object-fit: cover; border-radius: var(--r); }
.c-lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
background: rgba(0, 0, 0, .92); cursor: zoom-out; }
.c-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.c-lightbox-x { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 46px; height: 46px;
border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 20px; cursor: pointer; }
/* The chat's reactions: chips under a message, the row to pick one. */
.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.react-c { display: inline-flex; align-items: center; gap: 3px; min-height: 28px; padding: 0 8px; border-radius: 999px;
border: 1px solid var(--line-soft); background: var(--panel); font-size: 15px; line-height: 1; cursor: pointer; }
.react-c small { font-size: 12px; color: var(--fg-2); font-weight: 700; }
.react-c[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.react-pick { display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0 2px; }
.react-e { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent;
font-size: 21px; cursor: pointer; }
.react-e:hover, .react-e[aria-pressed="true"] { background: var(--panel-3); }
.msg[data-menu] .react-pick { margin: 0 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line-soft); }
.msg[data-menu] .react-btn { display: none; }
.react-who { list-style: none; margin: 0; padding: 0; }
.react-who li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line-soft); }
.react-who li .mini { margin-left: auto; }
.react-who .react-e { width: auto; height: auto; font-size: 22px; }
/* «Directos»: «+» opens whom to write to; a private conversation's «✕» closes it. */
.chan-s h3 .dm-new { margin-left: 8px; min-width: 28px; min-height: 26px; padding: 0 .45rem; font-size: 16px; line-height: 1; vertical-align: middle; }
.chan-s { position: relative; }
.chan-row { display: flex; align-items: center; gap: 4px; }
.chan-row .chan { flex: 1; min-width: 0; }
.chan-row .chan-x { flex: none; min-width: 28px; min-height: 28px; opacity: .55; }
.chan-row:hover .chan-x, .chan-row .chan-x:focus-visible { opacity: 1; }
.picker-scrim { position: fixed; inset: 0; z-index: 60; border: 0; background: transparent; }
.people-pop { position: relative; z-index: 61; display: flex; flex-direction: column; gap: 6px; margin: -4px 0 10px; padding: 8px;
border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.people-pop input { width: 100%; }
.people-list { display: flex; flex-direction: column; max-height: 18rem; overflow-y: auto; }
.people-list .chan { border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
/* The chat's list on a phone: each conversation a button to tap. */
@media (max-width: 860px) {
.chat-list { padding-right: 0; border-right: 0; }
.chat-list .chan, .chatfloat-list .chan { box-sizing: border-box; width: 100%; min-height: 58px; margin-bottom: 10px; padding: 12px 16px;
border-radius: var(--r); border: var(--bw) solid var(--line); background: var(--panel); box-shadow: var(--press); }
.chatfloat-list .chan { min-height: 54px; }
.chat-list .chan:active, .chatfloat-list .chan:active { transform: translateY(1px); }
.chatfloat-list .chan[aria-current] { background: var(--panel-3); }
.chatfloat-list .chan .chan-n { font-size: 16px; }
.chat-list .chan .chan-n { font-weight: 700; font-size: 16px; }
.chat-list .chan-row { align-items: stretch; margin-bottom: 10px; }
.chat-list .chan-row .chan { margin-bottom: 0; }
.chat-list .chan-row .chan-x { opacity: 1; min-width: 44px; border-radius: var(--r); }
.chat-list .chan-s h3 { margin-left: 2px; }
.chat-list .people-list .chan { box-shadow: none; }
[data-style="mercado"] .chat-list .chan { border-width: 2px; border-radius: 18px; }
}
/* The bottom bar on a phone: no «Chat» tab, its bubble floats on every screen. */
@media (max-width: 760px) {
[data-phonenav="barra"] .rail .navbtn[href="#/chat"] { display: none; }
}
.approve-lines { list-style: none; margin: 0 0 12px; padding: 0; }
.approve-lines li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: 7px 0;
border-bottom: 1px dashed var(--line-soft); }
.approvals .charge .row { display: flex; gap: 8px; flex-wrap: wrap; }
/* ----------------------------------------------------- the drawn plan (plan.py) */
/* «Mesas»: a zone drawn in «Dibujo», the decor on paper and each table at its place. */
.plan-actions { gap: 10px; align-items: center; }
.plan-actions .seg button { min-height: 40px; }
.drawn { position: relative; width: 100%; container-type: inline-size; border-radius: 14px; overflow: hidden;
background: #fbfaf7; border: 1px solid var(--line-soft); }
[data-style="mercado"] .drawn { border-radius: var(--r-xl); border-width: 2px; }
.drawn-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.drawn .spot { position: absolute; display: block; transform-origin: center; }
.drawn .spot .table { width: 100%; height: 100%; min-height: 0; padding: 2px; gap: 0; box-sizing: border-box; border-radius: 10px; }
.drawn .spot .table b { font-size: clamp(12px, 3.2cqi, 30px); }
.drawn .spot .table small { font-size: clamp(8px, 1.3cqi, 12.5px); line-height: 1.05; }
.drawn .spot .table[data-state="libre"] { background: var(--panel); }
.drawn .spot .tmore { width: 22px; height: 20px; left: 2px; top: 2px; font-size: 13px; opacity: .7; }
.drawn .spot .table .badge { top: -6px; right: -4px; width: 20px; height: 20px; font-size: 12px; }
.drawn .spot .callbadge { top: -8px; font-size: 10px; }
/* A round table (an oval when long): its chairs in a ring (chairRing), «⋯» at its top. */
.drawn .spot[data-shape="circle"] .table { border-radius: 50%; }
.drawn .spot[data-shape="circle"] .tmore { left: 50%; top: 4%; transform: translateX(-50%); }
.chairs.ring { inset: 0; left: 0; right: 0; display: block; }
.chairs.ring i { position: absolute; left: calc(50% + 50% * sin(var(--a)) + 6px * sin(var(--a)));
top: calc(50% - 50% * cos(var(--a)) - 6px * cos(var(--a))); transform: translate(-50%, -50%) rotate(var(--a)); }
/* A square table: the tile with its chairs above and below; they scale with the drawing. */
.drawn .chairs.n { top: clamp(-10px, -.9cqi, -5px); }
.drawn .chairs.s { bottom: clamp(-10px, -.9cqi, -5px); }
.drawn .chairs i { width: clamp(7px, 1.7cqi, 18px); height: clamp(4px, .65cqi, 8px); }
.drawn-off { margin-top: 10px; }
/* A narrow drawing: small tables, only their number (and a tap); «⋯» stays in «Cuadrícula». */
@container (max-width: 520px) { .drawn .spot .table small, .drawn .spot .tmore { display: none; } }
/* «Editar el plano»: «Lista» or «Dibujo». */
.floor-tabs { margin-bottom: 14px; }
.floor-tabs a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 10px; color: var(--fg-2);
font-weight: 700; text-decoration: none; }
.floor-tabs a[aria-current="page"] { background: var(--fg); color: var(--bg); }
[data-style="mercado"] .floor-tabs a { font-weight: 800; border-radius: 12px; }
[data-style="mercado"] .floor-tabs a[aria-current="page"] { background: var(--panel); color: var(--fg); box-shadow: 0 3px 0 var(--chunk); }
/* The designer (plan.js, ENTi's): the board, the tools at its right in two
columns; nothing scrolls inside, the containers grow (the board only scrolls
sideways when zoomed past its column). */
.pd { display: grid; grid-template-columns: minmax(0, 1fr) 30rem; gap: 16px; align-items: start; }
.pd-loading { padding: 40px 0; }
.pd-side { display: flex; flex-direction: column; gap: 16px; padding: 14px; }
.pd-sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-content: start; }
.pd-sec > * { grid-column: 1 / -1; }
.pd-sec > .btn, .pd-sec > .pd-field, .pd-sec > .check { grid-column: auto; }
.pd-sec > .check { font-size: 14px; line-height: 1.2; }
.pd-sec > .pd-field:has(select[data-link]) { grid-column: 1 / -1; }
.pd-h { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pd-side .btn { min-height: 38px; padding: 0 12px; font-size: 14.5px; }
.pd-objs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pd-objs .btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pd-tables { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
.pd-tables li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px;
border: 1px dashed var(--line); }
.pd-tables li[data-on] { border-style: solid; border-color: var(--line-soft); background: var(--panel-2); }
.pd-tables li small { color: var(--muted); white-space: nowrap; }
.pd-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700; min-width: 0; }
.pd-field input[type="number"] { width: 4.5rem; min-height: 36px; text-align: center; }
.pd-field input[type="color"] { width: 44px; height: 32px; padding: 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.pd-field select { min-width: 0; max-width: 9.5rem; min-height: 36px; }
.pd-fmt { display: flex; gap: 4px; flex-wrap: wrap; }
.pd-fmt .btn { min-height: 34px; min-width: 34px; padding: 0 8px; }
.pd-fmt .btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.pd-fmt .ico, .pd-group .ico { width: 18px; height: 18px; }
.pd-shape { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.pd-shape .pd-fmt .btn { flex: 1; gap: 6px; }
.pd-sw { display: inline-block; width: 13px; height: 13px; border: 2px solid currentColor; border-radius: 3px; }
.pd-sw.redonda { border-radius: 50%; }
.pd-default { min-height: 30px !important; font-size: 13px !important; padding: 0 4px !important; justify-content: flex-start; }
.pd-hint { font-size: 13.5px; margin: 0; }
.pd-save { min-height: 46px !important; }
.pd-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pd-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-group { display: inline-flex; gap: 2px; }
.pd-group .btn { min-height: 38px; min-width: 40px; padding: 0 10px; }
.pd-zoom { min-width: 64px !important; font-variant-numeric: tabular-nums; }
.pd-size { font-variant-numeric: tabular-nums; font-size: 13px; }
.pd-dirty { font-size: 13px; font-weight: 800; color: var(--warn-text); }
.pd-scroll { overflow-x: auto; overflow-y: hidden; padding: 0 14px 14px 0; }
.pd-board { position: relative; display: inline-block; border: 1px solid #d1d5db; background-color: #fff;
background-image: linear-gradient(to right, #e5e7eb 1px, transparent 1px), linear-gradient(to bottom, #e5e7eb 1px, transparent 1px); }
.pd-handle { position: absolute; border-radius: 4px; background: #3b82f6; touch-action: none; z-index: 2; }
.pd-handle.r { top: 50%; right: -6px; width: 12px; height: 32px; transform: translateY(-50%); cursor: ew-resize; }
.pd-handle.b { left: 50%; bottom: -6px; width: 32px; height: 12px; transform: translateX(-50%); cursor: ns-resize; }
.pd-handle.c { right: -6px; bottom: -6px; width: 16px; height: 16px; background: #2563eb; cursor: nwse-resize; }
.pd-menu { position: fixed; z-index: 10000; width: 12rem; padding: 4px 0; border-radius: 10px; background: var(--panel); color: var(--fg);
border: 1px solid var(--line); box-shadow: var(--shadow); }
.pd-menu button { display: block; width: 100%; text-align: left; padding: 7px 12px; border: 0; background: transparent; color: inherit;
font: 600 14px var(--f-ui); cursor: pointer; }
.pd-menu button:hover:not(:disabled) { background: var(--panel-3); }
.pd-menu button:disabled { opacity: .4; cursor: default; }
.pd-menu button.danger { color: var(--crit-text); }
.pd-menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--line-soft); }
.pd-menu .dim { padding: 7px 12px; font-size: 14px; }
.pd-dialog { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); color: var(--fg); padding: 18px; width: min(22rem, calc(100vw - 32px)); }
.pd-dialog::backdrop { background: var(--scrim, rgba(0, 0, 0, .4)); }
.pd-dialog form { display: flex; flex-direction: column; gap: 12px; }
.pd-dialog label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px; }
@media (max-width: 1200px) {
.pd { grid-template-columns: minmax(0, 1fr) 22rem; }
.pd-sec { grid-template-columns: minmax(0, 1fr); }
.pd-sec > .btn, .pd-sec > .pd-field, .pd-sec > .check { grid-column: 1 / -1; }
.pd-tables { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.pd { grid-template-columns: minmax(0, 1fr); }
.pd-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-sec > .btn, .pd-sec > .pd-field, .pd-sec > .check { grid-column: auto; }
.pd-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.pd-sec, .pd-tables { grid-template-columns: minmax(0, 1fr); }
.pd-sec > .btn, .pd-sec > .pd-field, .pd-sec > .check { grid-column: 1 / -1; }
}
/* ------------------------------------------- «Reservas»: the public page (reservas.html) */
/* 16px at least: a phone (iOS) zooms the page in on a smaller field when it's focused. */
.carta-page input, .carta-page textarea, .carta-page select { font-size: max(16px, 1em); }
.reservas { max-width: 40rem; }
.embedded .reservas { max-width: none; }
.r-head .r-local { margin: 0 0 4px; font-weight: 700; color: var(--fg-2); font-size: 14px; }
.embedded .r-head { padding-top: 22px; padding-right: 60px; }
.r-body { padding: 4px 0 24px; transition: opacity .15s; }
.r-body[aria-busy="true"] .r-times, .r-body[aria-busy="true"] .r-places, .r-body[aria-busy="true"] .r-drawn-wrap { opacity: .5; }
.r-sec { padding: 6px 16px 8px; }
.r-sec h2 { font-size: 20px; margin: 16px 0 10px; }
.r-empty { padding: 14px; border-radius: var(--r); background: var(--panel); border: 1px dashed var(--line); color: var(--fg-2); }
.r-party { display: flex; align-items: center; gap: 14px; }
.r-party output { min-width: 8.5rem; text-align: center; font-size: 20px; font-weight: 800; }
.r-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.r-day { flex: none; scroll-snap-align: start; width: 4.2rem; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px;
border-radius: var(--r); border: var(--bw) solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer; }
.r-day small { font-size: 12px; color: var(--fg-2); text-transform: capitalize; }
.r-day b { font-size: 22px; line-height: 1.1; }
.r-day[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.r-day[aria-pressed="true"] small { color: inherit; opacity: .8; }
.r-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; }
.r-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: 8px; }
.r-time { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
border-radius: var(--r); border: var(--bw) solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer; font-size: 17px; }
.r-time small { font-size: 11px; color: var(--muted); }
.r-time:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.r-time[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.r-zones { margin-bottom: 10px; }
.r-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 8px; margin: 8px 0; }
.r-place { min-height: 58px; padding: 10px 14px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left;
border-radius: var(--r); border: var(--bw) solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer; }
.r-place small { color: var(--fg-2); font-size: 13px; }
.r-place[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.r-drawn-wrap { margin: 8px 0 4px; }
.r-drawn { background: var(--panel); border: 1px solid var(--line-soft); }
.r-area { position: absolute; display: flex; align-items: flex-start; justify-content: flex-start; padding: 4px 6px; border-radius: 10px; cursor: pointer;
border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-text); font-weight: 800;
font-size: clamp(10px, 2.2cqi, 15px); }
.r-area[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 26%, transparent); border-style: solid; }
.r-spot { position: absolute; display: grid; place-items: center; box-sizing: border-box; border-radius: 10px; transform-origin: center;
border: 2px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: clamp(11px, 3cqi, 24px); padding: 0; z-index: 1; }
.r-spot[data-shape="circle"] { border-radius: 50%; }
.r-spot[data-free="false"] { opacity: .45; }
button.r-spot { cursor: pointer; background: var(--ok-soft); border-color: var(--ok); color: var(--fg); }
button.r-spot[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.r-legend { font-size: 13px; margin: 6px 0; }
.r-picked { font-weight: 800; color: var(--accent-text); margin: 6px 0 0; }
.r-sum { margin: 0 0 4px; }
.r-form { margin-top: 8px; }
.r-fine { font-size: 13px; margin: 0; }
.r-mine { font-size: 14px; }
.r-mine-card { margin: 16px; padding: 18px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-soft); }
.r-mine-card p { margin: 6px 0; }
.r-when { font-size: 20px; font-weight: 800; }
.r-state { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; background: var(--panel-2); }
.r-mine-card[data-state="confirmada"] .r-state, .r-mine-card[data-state="llego"] .r-state { background: var(--ok); color: var(--on-ok); }
.r-mine-card[data-state="pendiente"] .r-state { background: var(--warn-soft, var(--panel-2)); color: var(--fg); }
.r-mine-card[data-state="rechazada"] .r-state, .r-mine-card[data-state="cancelada"] .r-state { background: var(--crit-soft); color: var(--crit); }
.r-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 420px) { .r-sec { padding-inline: 14px; } .r-party output { min-width: 6.5rem; } }
/* ------------------------------------------- «Reservas»: the staff's (app.js viewBookings) */
[data-bookings] { position: relative; }
[data-bookings] .navbadge { position: static; margin-left: 4px; background: var(--warn); color: var(--on-warn); }
.bookings { display: grid; gap: 14px; }
.bookings > .plan-top, .bookings > .floor-tabs { margin-bottom: 0; }
.bk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bk { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; padding: 14px 16px; }
.bk-when b { display: block; font-size: 26px; line-height: 1; }
.bk-when small { color: var(--fg-2); font-size: 12.5px; text-transform: capitalize; }
.bk-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-who small { color: var(--fg-2); overflow-wrap: anywhere; }
.bk-party { font-weight: 600; color: var(--fg-2); }
.bk-note { font-style: italic; }
.bk-state { justify-self: end; padding: 4px 10px; border-radius: 999px; font-weight: 800; font-size: 12.5px; background: var(--panel-2); white-space: nowrap; }
.bk[data-state="pendiente"] { border-color: var(--warn); }
.bk[data-state="pendiente"] .bk-state { background: var(--warn); color: var(--on-warn); }
.bk[data-state="confirmada"] .bk-state, .bk[data-state="llego"] .bk-state { background: var(--ok); color: var(--on-ok); }
.bk[data-state="rechazada"], .bk[data-state="cancelada"], .bk[data-state="no_vino"] { opacity: .7; }
.bk-acts { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.bk-acts .btn { min-height: 40px; padding: 0 14px; }
.bk-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 8px; }
.bk-tables .btn { flex-direction: column; gap: 0; min-height: 56px; }
.bk-tables .btn small { font-weight: 500; font-size: 11.5px; color: var(--fg-2); }
.bk-tables .btn[aria-pressed="true"] { border-color: var(--accent); }
@media (max-width: 640px) {
.bk { grid-template-columns: minmax(0, 1fr) auto; }
.bk-who { grid-column: 1 / -1; grid-row: 2; }
.bk-acts { grid-column: 1 / -1; }
.bk-when { display: flex; align-items: baseline; gap: 8px; }
}
.bk-mail { margin: 4px 0 0; font-size: 13.5px; }
.bk-mail.warn { padding: 10px 12px; border-radius: var(--r); background: var(--warn-soft); color: var(--fg); font-weight: 600; }
.bk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 14px; align-items: start; }
.bk-link .row { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-link .pd-field { flex: 1 1 12rem; display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 13.5px; color: var(--fg-2); }
.bk-url { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.bk-url code { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; padding: 10px 12px; border-radius: var(--r); background: var(--panel-2); font-size: 13px; }
.bk-qrbox { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.bk-qr { width: 10rem; aspect-ratio: 1; padding: 6px; border-radius: 10px; background: #fff; color: #111; flex: none; }
.bk-qr svg { display: block; width: 100%; height: 100%; }
.bk-qracts { display: flex; flex-direction: column; gap: 8px; flex: 1 1 12rem; }
.bk-code { width: 100%; box-sizing: border-box; font: 12.5px/1.45 ui-monospace, Menlo, monospace; padding: 10px; border-radius: var(--r);
background: var(--panel-2); color: var(--fg); border: 1px solid var(--line-soft); resize: vertical; margin-bottom: 10px; }
.bk-zone { display: grid; gap: 6px; }
.bk-zone h2 { margin: 0 0 4px; }
.bk-rule { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 10px 0;
border-top: 1px dashed var(--line-soft); }
.bk-rule .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-rule .what small { color: var(--fg-2); }
.bk-rule .btn { min-height: 40px; }
.bk-tone[data-tone="on"] { color: var(--ok-text); font-weight: 700; }
.bk-tone[data-tone="off"] { color: var(--muted); }
.bk-paused { color: var(--warn-text); font-weight: 700; }
.bk-area { padding-left: 14px; border-left: 3px solid var(--line-soft); margin-left: 4px; }
.bk-area .pd-h { margin: 8px 0 4px; }
.bk-ts { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 10px; }
.bk-trow { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 10px 4px 4px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--line); background: var(--panel-2); color: var(--fg); font: inherit; }
.bk-trow small { font-size: 12px; color: var(--fg-2); }
.bk-t { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; background: var(--panel-3); font-weight: 800; }
.bk-trow[data-on] .bk-t { background: var(--ok); color: var(--on-ok); }
.bk-cfg { display: grid; gap: 10px; }
.bk-cfg h2, .bk-cfg h3 { margin: 0; }
.bk-cfg > .dim { margin: 0; }
.bk-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 12px; margin: 6px 0; }
.bk-num { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 13.5px; color: var(--fg-2); }
.bk-num .row { display: flex; align-items: center; gap: 8px; }
.bk-num input { width: 6.5rem; }
.hours { display: grid; gap: 8px; }
.hours-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; border-radius: var(--r); background: var(--panel-2); }
.hours-days { display: flex; gap: 4px; }
.hours-days .day { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--fg-2); font-weight: 800; cursor: pointer; }
.hours-days .day[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.hours-t { display: inline-flex; align-items: center; gap: 6px; }
.hours-t input { width: 7.5rem; }
.bk-choices { display: grid; gap: 2px; }
button.r-spot[data-whole] { border-style: dashed; }
button.r-spot[data-whole][aria-pressed="true"] { border-style: solid; }
/* «Configurar» › «Enlaces»: a table, each link a card on a phone. */
.bk-links-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bk-links-h h2 { margin: 0; }
.bk-ltable-wrap { overflow-x: auto; margin: 6px -4px 0; }
.bk-ltable { width: 100%; border-collapse: collapse; }
.bk-ltable th { text-align: left; font-size: 12.5px; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }
.bk-ltable td { padding: 10px 8px; border-bottom: 1px dashed var(--line-soft); vertical-align: top; font-size: 14px; }
.bk-ltable td b { display: block; }
.bk-lurl { display: block; font-size: 12px; overflow-wrap: anywhere; max-width: 22rem; }
.bk-lacts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.bk-lacts .btn { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.btn.danger { color: var(--crit-text); }
.bk-rotate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 12px; }
.bk-qrpanel { display: grid; gap: 10px; justify-items: center; }
.bk-qrpanel .bk-qr { width: min(16rem, 100%); }
.bk-qrpanel small { overflow-wrap: anywhere; text-align: center; }
@media (max-width: 900px) {
.bk-ltable thead { display: none; }
.bk-ltable, .bk-ltable tbody, .bk-ltable tr, .bk-ltable td { display: block; }
.bk-ltable tr { padding: 10px 0; border-bottom: 1px dashed var(--line-soft); }
.bk-ltable td { border: 0; padding: 3px 4px; }
.bk-ltable td[data-th]:not(:first-child)::before { content: attr(data-th) ": "; color: var(--muted); font-weight: 700; }
.bk-lacts { justify-content: flex-start; padding-top: 8px !important; }
.bk-lurl { max-width: none; }
}
/* ------------------------------------------- the general menu (carta.js on /c/) */
.c-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 0; }
.c-links .btn { flex: 1 1 12rem; text-decoration: none; }
.c-info { margin: 14px 16px 0; padding: 14px 16px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-soft);
overflow-wrap: anywhere; line-height: 1.5; }
.c-info > :first-child { margin-top: 0; }
.c-info > :last-child { margin-bottom: 0; }
.c-info img { max-width: 100%; height: auto; border-radius: 10px; }
.c-info a { color: var(--accent-text); }
.c-info table { border-collapse: collapse; width: 100%; }
.c-info td, .c-info th { padding: 4px 6px; border-bottom: 1px solid var(--line-soft); text-align: left; }
/* «Mesas»: the general menu's link, under «Para llevar». */
.menu-link-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.menu-link-card code { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; padding: 10px 12px; border-radius: var(--r); background: var(--panel-2); font-size: 13px; }
.mbtn-row { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 10rem) minmax(10rem, 1.4fr) auto; gap: 8px; align-items: center; }
@media (max-width: 700px) { .mbtn-row { grid-template-columns: 1fr 1fr; } .mbtn-row > :nth-child(3) { grid-column: 1 / -1; } }
.mbtn-list { display: grid; gap: 8px; margin: 8px 0; }
.menu-info { width: 100%; box-sizing: border-box; font: 13px/1.45 ui-monospace, Menlo, monospace; min-height: 8rem; }
.menu-zone { margin-bottom: 18px; }
/* The global search (app.js «search»): design/search/search.css on Epulo's tokens. */
.gs-field { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 7px 10px; border: var(--bw) solid var(--line);
border-radius: var(--r); background: var(--panel-2); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.gs-field:hover { color: var(--fg-2); border-color: var(--fg-2); }
.gs-field .ico { width: 16px; height: 16px; }
.gs-field + .clock { margin-left: 0; }
.gs-field kbd, .gs kbd { font-family: var(--f-ui); font-size: 10.5px; line-height: 1; padding: 3px 5px; border-radius: 5px;
border: 1px solid currentColor; opacity: .75; white-space: nowrap; }
[data-gate] .gs-field { display: none; }
.gs-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: start center; padding: 5vh 2vw 0;
background: var(--scrim); backdrop-filter: blur(3px); }
.gs { display: flex; flex-direction: column; width: min(1100px, 96vw); height: min(82vh, 860px); overflow: hidden;
border: var(--bw) solid var(--line); border-radius: var(--r-lg); background: var(--panel); color: var(--fg); box-shadow: var(--shadow); }
.gs-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); color: var(--muted); }
.gs-head .ico { width: 20px; height: 20px; }
.gs-head input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 4px 0; font: inherit; font-size: 19px; color: var(--fg); box-shadow: none; }
.gs-esc { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; }
.gs-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.gs-list { overflow-y: auto; padding: 8px 8px 16px; border-right: 1px solid var(--line-soft); scrollbar-width: thin; }
.gs-group { margin-bottom: 6px; }
.gs-group h3 { position: sticky; top: -8px; z-index: 1; display: flex; align-items: center; margin: 0; padding: 10px 10px 6px;
background: var(--panel); font-family: var(--f-ui); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gs-group h3 span { margin-left: auto; font-weight: 500; letter-spacing: 0; }
.gs-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; width: 100%; padding: 8px 12px; border: 0;
border-radius: calc(var(--r) - 3px); background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; box-shadow: none; }
.gs-item.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.gs-title { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-sub { grid-column: 1; font-size: 12.5px; color: var(--fg-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.45; }
.gs-sub em { font-style: normal; color: var(--muted); }
.gs-tag { grid-column: 2; grid-row: 1; font-size: 10.5px; color: var(--muted); }
.gs mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; border-radius: 2px; }
.gs-none { padding: 40px 12px; text-align: center; color: var(--muted); }
.gs-preview { overflow-y: auto; padding: 22px 28px 28px; scrollbar-width: thin; }
.gs-preview-empty { display: grid; place-items: center; height: 100%; color: var(--muted); }
.gs-pv-kind { font-size: 12px; color: var(--muted); }
.gs-preview h2 { margin: 6px 0 18px; font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
.gs-pv-field { margin-bottom: 16px; }
.gs-pv-label { margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gs-pv-field p { margin: 0; line-height: 1.6; color: var(--fg-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.gs-pv-field.hit p { color: var(--fg); }
.gs-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 18px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); }
@media (max-width: 820px) {
.gs-body { grid-template-columns: minmax(0, 1fr); }
.gs-preview, .gs-foot { display: none; }
.gs-list { border-right: 0; }
.gs-overlay { padding: 0; }
.gs { width: 100vw; height: 100dvh; border-radius: 0; }
.gs-field { padding: 7px; }
}
/* A result the search opened: its border and background lit for a moment. */
@keyframes gs-flash {
0%, 30% { outline-color: var(--accent); background-color: var(--accent-soft); }
100% { outline-color: transparent; }
}
.gs-flash { outline: 3px solid transparent; outline-offset: 3px; border-radius: var(--r); animation: gs-flash 2.2s ease-out; }