@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('/fonts/nunito-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('/fonts/nunito-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Davaro Chef — estilo: marfil, azul oscuro, coral, verde y ámbar. Pensado primero para móvil. */
:root {
  --ivory: #FBF6EC; --ivory-2: #F4EBDA; --line: #E6D9C2; --navy: #1F2A44; --navy-2: #46506A; --muted: #5E6779;
  --coral: #E8664D; --coral-d: #C94E37; --green: #3E9B6E; --green-l: #E2F3EA; --amber: #E9A53A; --amber-l: #FFF1D6;
  --blue: #3B6FB6; --blue-l: #E3ECF8; --red-l: #FDE6E1; --white: #fff;
  --r: 18px; --r-lg: 26px; --shadow: 0 2px 10px rgba(31, 42, 68, .08); --shadow-lg: 0 10px 30px rgba(31, 42, 68, .16);
  --fs: 18px; --tap: 56px;
  --dur: .22s;
}
body.reduce-motion { --dur: 0s; }
body.big-text { --fs: 21px; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--ivory); color: var(--navy); font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 600; font-size: var(--fs); line-height: 1.4; }
body.has-modal { overflow: hidden; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.15rem; }
a { color: var(--blue); }
img { max-width: 100%; }
.lead { font-size: 1.05rem; color: var(--navy-2); }
.muted { color: var(--muted); } .small { font-size: .85rem; } .center { text-align: center; } .right { text-align: right; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 4px solid var(--amber); outline-offset: 2px; }

/* ---------- Cabecera ---------- */
.top { position: sticky; top: 0; z-index: 20; background: var(--ivory); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 64px; }
.top .brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.top .brand img, .top .brand .logo-ph { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; flex: none; background: var(--coral); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; }
.top .brand b { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.top .brand small { color: var(--muted); font-size: .8rem; display: block; }
.top-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 60px; min-height: 52px; padding: 4px 6px; border-radius: 14px; border: 2px solid transparent; background: transparent; color: var(--navy); font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.top-btn .ico { font-size: 1.35rem; line-height: 1; }
.top-btn:active { background: var(--ivory-2); }
.top-btn .badge { position: absolute; top: 2px; right: 6px; background: var(--coral); color: #fff; border-radius: 99px; min-width: 22px; height: 22px; font-size: .75rem; display: grid; place-items: center; padding: 0 5px; }
.top .brand small.net { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.net .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--green); flex: none; }
.net.off { color: var(--coral-d) !important; font-weight: 700; } .net.sync { color: #8a5a00 !important; font-weight: 700; }
@media (max-width: 560px) { .net .who { display: none; } .top { gap: 4px; padding: 6px 8px; } .top-btn { min-width: 52px; font-size: .68rem; } .top .brand img, .top .brand .logo-ph { width: 38px; height: 38px; } }
.net.off .dot { background: var(--coral); }
.net.sync .dot { background: var(--amber); }
.back { display: flex; align-items: center; gap: 6px; }
.demo-band { background: var(--amber-l); color: #6b4a00; text-align: center; font-size: .85rem; padding: 6px 10px; font-weight: 600; border-bottom: 1px solid #f1d79a; }
.off-band { background: var(--red-l); color: #7a2414; text-align: center; font-size: .9rem; padding: 8px 10px; font-weight: 600; }

main.view { padding: 14px 14px 120px; max-width: 1200px; margin: 0 auto; animation: fade var(--dur) ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-title { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.page-title h1 { margin: 0; flex: 1; }

/* ---------- Inicio: seis cuadrados grandes ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 14px 10px 16px; border-radius: var(--r-lg);
  background: var(--white); border: 3px solid var(--line); text-decoration: none; color: var(--navy); box-shadow: var(--shadow); min-height: 190px; transition: transform var(--dur), border-color var(--dur); }
.tile:active { transform: scale(.97); }
.tile:hover { border-color: var(--coral); }
.tile svg { width: 100%; max-width: 170px; height: auto; flex: 1; }
.tile b { font-size: 1.25rem; }
.tile small { color: var(--muted); font-size: .82rem; text-align: center; }
.tile .badge { position: absolute; top: 10px; right: 10px; background: var(--coral); color: #fff; font-weight: 800; border-radius: 99px; padding: 3px 10px; font-size: .85rem; }
.tile.locked { opacity: .45; pointer-events: none; }
.welcome { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.welcome h1 { margin: 0; font-size: 1.45rem; }
.setup-card { background: var(--amber-l); border: 2px solid #f1d79a; border-radius: var(--r); padding: 14px; margin-bottom: 14px; display: flex; gap: 12px; align-items: center; }
.setup-card p { margin: 0; flex: 1; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap); padding: 10px 20px; border-radius: 16px; border: 2px solid var(--line); background: var(--white); color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .08s, background var(--dur); user-select: none; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .ico { font-size: 1.3em; line-height: 1; }
.btn.primary { background: var(--coral); border-color: var(--coral); color: #fff; }
.btn.primary:hover { background: var(--coral-d); }
.btn.green { background: var(--green); border-color: var(--green); color: #fff; }
.btn.amber { background: var(--amber); border-color: var(--amber); color: var(--navy); }
.btn.blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.danger { background: #fff; border-color: var(--coral); color: var(--coral-d); }
.btn.ghost { background: transparent; }
.btn.big { min-height: 66px; font-size: 1.1rem; border-radius: 18px; padding: 12px 24px; }
.btn.huge { min-height: 84px; font-size: 1.3rem; border-radius: 22px; width: 100%; }
.btn.block { width: 100%; }
.btn.sm { min-height: 44px; padding: 6px 14px; font-size: .9rem; border-radius: 12px; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.row-btns > .btn { flex: 1 1 140px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--ivory-2); font-size: .85rem; font-weight: 600; border: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.seg { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.seg button { flex: none; min-height: 50px; padding: 8px 16px; border-radius: 99px; border: 2px solid var(--line); background: #fff; font: inherit; font-weight: 700; color: var(--navy); cursor: pointer; display: flex; gap: 8px; align-items: center; }
.seg button.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- Tarjetas y listas ---------- */
.card { background: var(--white); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); border: 1px solid var(--line); margin-bottom: 14px; }
.card h2, .card h3 { margin-top: 0; }
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: 1fr; } .grid.three { grid-template-columns: 1fr; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li, .list-item { display: flex; align-items: center; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 10px; }
.list-item { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.list-item:active { background: var(--ivory-2); }
.list .grow, .grow { flex: 1; min-width: 0; }
.big-num { font-size: 2rem; font-weight: 800; }
.stat { background: #fff; border-radius: var(--r); padding: 14px; border: 1px solid var(--line); }
.stat small { display: block; color: var(--muted); font-weight: 600; }
.stat b { font-size: 1.5rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.empty-state { text-align: center; padding: 30px 10px; color: var(--muted); }
.empty-state svg { width: 160px; }
.note { background: var(--blue-l); border-radius: 14px; padding: 12px 14px; margin: 10px 0; font-size: .92rem; }
.note.warn { background: var(--amber-l); } .note.err { background: var(--red-l); } .note.ok { background: var(--green-l); }

/* ---------- Formularios ---------- */
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-weight: 700; }
.form label small { font-weight: 400; color: var(--muted); }
input, select, textarea { font: inherit; color: var(--navy); background: #fff; border: 2px solid var(--line); border-radius: 14px; min-height: var(--tap); padding: 10px 14px; width: 100%; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--navy); outline: none; }
input.doubt, select.doubt { border-color: var(--amber); background: var(--amber-l); }
.check { display: flex !important; grid-template-columns: none; align-items: center; gap: 12px; font-weight: 600 !important; min-height: var(--tap); cursor: pointer; }
.check input { width: 30px; height: 30px; min-height: 0; flex: none; accent-color: var(--green); }
.switch { position: relative; width: 64px; height: 36px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #cfc6b5; border-radius: 99px; transition: var(--dur); cursor: pointer; }
.switch span::before { content: ''; position: absolute; width: 28px; height: 28px; left: 4px; top: 4px; background: #fff; border-radius: 50%; transition: var(--dur); }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::before { transform: translateX(28px); }
.field-row { display: flex; gap: 10px; } .field-row > * { flex: 1; }
.hint { color: var(--muted); font-size: .88rem; margin: 0; }
.err-text { color: var(--coral-d); font-weight: 600; }

/* ---------- Diálogos y avisos ---------- */
.modal-wrap { position: fixed; left: 0; right: 0; top: var(--vvtop, 0px); height: var(--vvh, 100dvh); z-index: 100; background: rgba(31, 42, 68, .45); display: flex; align-items: flex-end; justify-content: center; animation: fade var(--dur); }
.modal-wrap.out { opacity: 0; transition: opacity .18s; }
.modal { position: relative; background: var(--ivory); width: 100%; max-height: calc(var(--vvh, 100dvh) - 12px); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 22px 18px 26px; box-shadow: var(--shadow-lg); }
.modal h2 { padding-right: 70px; }
.modal-x { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; align-items: center; border: 0; background: var(--ivory-2); border-radius: 14px; width: 62px; height: 56px; font-size: 1.2rem; cursor: pointer; color: var(--navy); font-family: inherit; }
.modal-x small { font-size: .65rem; font-weight: 700; }
#toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; width: min(92vw, 480px); pointer-events: none; }
.toast { display: flex; gap: 10px; align-items: center; background: var(--navy); color: #fff; padding: 14px 18px; border-radius: 16px; box-shadow: var(--shadow-lg); font-weight: 600; animation: fade var(--dur); transition: opacity .4s; }
.toast.out { opacity: 0; } .toast-ico { font-size: 1.2rem; }
.toast-ok { background: var(--green); } .toast-err { background: var(--coral-d); } .toast-warn { background: var(--amber); color: var(--navy); }

/* ---------- Estados de mesa ---------- */
.st-free { --st: #B9B1A3; --st-bg: #fff; }
.st-pending { --st: var(--coral); --st-bg: var(--red-l); }
.st-preparing { --st: var(--amber); --st-bg: var(--amber-l); }
.st-ready { --st: var(--green); --st-bg: var(--green-l); }
.st-served { --st: var(--blue); --st-bg: var(--blue-l); }
.st-open { --st: var(--navy-2); --st-bg: #fff; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: var(--st-bg); color: var(--navy); border: 2px solid var(--st); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.legend { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
body.pulse-on .needs-attention { animation: softpulse 2.4s ease-in-out infinite; }
@keyframes softpulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--st) 45%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--st) 0%, transparent); } }
body.reduce-motion .needs-attention { animation: none !important; }

/* ---------- Plano ---------- */
.floor-wrap { position: relative; background: #fff; border: 2px solid var(--line); border-radius: var(--r); overflow: auto; touch-action: pan-x pan-y; }
.floor { position: relative; transform-origin: 0 0; }
.floor .outline { position: absolute; inset: 0; pointer-events: none; }
.fi { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 14px; font-weight: 800; user-select: none; color: var(--navy); line-height: 1.1; }
.fi.table { background: var(--st-bg, #fff); border: 4px solid var(--st, #B9B1A3); cursor: pointer; box-shadow: var(--shadow); container-type: size; z-index: 2; }
.fi.table.round { border-radius: 50%; }
.fi.table .num { font-size: clamp(14px, 38cqmin, 48px); }
.fi.table .lab { font-size: clamp(9px, 13cqmin, 15px); font-weight: 700; }
.fi.table .new-badge { position: absolute; top: -12px; right: -10px; background: var(--coral); color: #fff; border-radius: 99px; font-size: .7rem; padding: 2px 7px; border: 2px solid #fff; }
.fi.table .ready-badge { position: absolute; top: -12px; left: -10px; background: var(--green); color: #fff; border-radius: 99px; font-size: .7rem; padding: 2px 7px; border: 2px solid #fff; white-space: nowrap; }
.fi.table .paid-badge { position: absolute; bottom: -12px; background: var(--navy); color: #fff; border-radius: 99px; font-size: .65rem; padding: 2px 7px; border: 2px solid #fff; white-space: nowrap; }
.fi.bar { background: #C7A27E; color: #fff; border: 3px solid #8C5A3C; }
.fi.door { background: repeating-linear-gradient(45deg, #fff, #fff 6px, var(--ivory-2) 6px, var(--ivory-2) 12px); border: 3px dashed var(--navy-2); font-size: .75rem; }
.fi.chair { background: var(--ivory-2); border: 3px solid #cbbfa8; border-radius: 10px; }
.fi.plant { background: var(--green-l); border: 3px solid var(--green); border-radius: 50%; font-size: 1.2rem; }
.fi.wall { background: var(--navy-2); border-radius: 4px; }
.fi.label { background: transparent; font-size: 1rem; color: var(--navy-2); }
.edit .fi { cursor: grab; }
.edit .fi.sel { outline: 4px solid var(--coral); outline-offset: 3px; z-index: 5; }
.editor-tools { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.editor-tools .btn { flex: none; flex-direction: column; gap: 2px; min-width: 84px; padding: 8px; font-size: .82rem; }
.editor-tools .btn .ico { font-size: 1.6rem; }
.sel-bar { display: flex; gap: 8px; flex-wrap: wrap; background: #fff; border: 2px solid var(--coral); border-radius: 16px; padding: 10px; margin: 8px 0; }
.sel-bar .btn { flex: 1 1 auto; }
.sketch { width: 100%; height: 60vh; background: #fff; border: 2px solid var(--line); border-radius: var(--r); touch-action: none; display: block; }
.method-cards { display: grid; gap: 12px; }
.method { display: flex; align-items: center; gap: 14px; background: #fff; border: 3px solid var(--line); border-radius: var(--r-lg); padding: 14px; text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; }
.method svg { width: 110px; flex: none; }
.method b { font-size: 1.15rem; display: block; }

/* ---------- Comanda / carta ---------- */
.order-layout { display: grid; gap: 14px; }
.order-layout > *, .grid > *, .doc-grid > * { min-width: 0; }
.cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.cat { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 92px; padding: 10px 8px; border-radius: 18px; background: #fff; border: 3px solid var(--line); font: inherit; font-weight: 700; color: var(--navy); cursor: pointer; font-size: .9rem; }
.cat .ico { font-size: 1.8rem; }
.cat.on { border-color: var(--coral); background: var(--red-l); }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.prod { position: relative; display: flex; flex-direction: column; background: #fff; border: 2px solid var(--line); border-radius: 18px; overflow: hidden; cursor: pointer; font: inherit; color: inherit; text-align: left; padding: 0; transition: transform .08s; }
.prod:active { transform: scale(.96); }
.prod img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--ivory-2); display: block; }
.prod .pn { padding: 8px 10px 2px; font-weight: 700; font-size: .95rem; line-height: 1.2; }
.prod .pp { padding: 0 10px 10px; color: var(--coral-d); font-weight: 800; }
.prod .qty-badge { position: absolute; top: 6px; left: 6px; background: var(--coral); color: #fff; border-radius: 99px; min-width: 32px; height: 32px; display: grid; place-items: center; font-weight: 800; border: 3px solid #fff; }
.prod.na { opacity: .45; } .prod .na-tag { position: absolute; top: 6px; right: 6px; background: var(--navy); color: #fff; font-size: .7rem; padding: 2px 8px; border-radius: 99px; }
.prod .portions { position: absolute; top: 6px; right: 6px; background: #fffd; font-size: .7rem; padding: 2px 8px; border-radius: 99px; font-weight: 700; }
.prod .portions.low { background: var(--amber); }
.ticket { background: #fff; border-radius: var(--r); border: 2px solid var(--line); padding: 12px; }
.ticket h3 { display: flex; justify-content: space-between; align-items: center; }
.line { display: flex; gap: 10px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px dashed var(--line); }
.line:last-child { border-bottom: 0; }
.line .q { font-weight: 800; min-width: 34px; font-size: 1.1rem; }
.line .n { flex: 1; min-width: 0; }
.line .n small { display: block; color: var(--muted); }
.line .n .note-txt { color: var(--coral-d); font-weight: 700; }
.line .pr { font-weight: 700; white-space: nowrap; }
.line.wrap { flex-wrap: wrap; } .line.wrap .n { flex-basis: 100%; }
.line.void { opacity: .5; text-decoration: line-through; }
.line.cart { background: var(--amber-l); border-radius: 12px; border-bottom: 0; margin-bottom: 4px; padding: 10px; }
.line.local { background: var(--blue-l); border-radius: 12px; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 48px; height: 48px; border-radius: 14px; border: 2px solid var(--line); background: #fff; font-size: 1.4rem; font-weight: 800; cursor: pointer; color: var(--navy); }
.stepper span { min-width: 30px; text-align: center; font-weight: 800; font-size: 1.15rem; }
.totals { display: flex; justify-content: space-between; align-items: center; font-size: 1.3rem; font-weight: 800; padding: 10px 4px; }
.sticky-bottom { position: sticky; bottom: 0; background: linear-gradient(to top, var(--ivory) 70%, transparent); padding: 12px 0 10px; z-index: 5; }
.batch-head { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--muted); margin: 10px 0 2px; font-weight: 600; }
.opt-group { margin-bottom: 14px; } .opt-group h3 { font-size: 1rem; }
.opt-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-choices label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font-weight: 600; min-height: 52px; }
.opt-choices input { width: 22px; height: 22px; min-height: 0; accent-color: var(--coral); }
.opt-choices label:has(input:checked) { border-color: var(--coral); background: var(--red-l); }
.quick-notes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---------- Cocina ---------- */
.kds { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.kt { background: #fff; border-radius: var(--r); border: 4px solid var(--line); overflow: hidden; box-shadow: var(--shadow); }
.kt header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; background: var(--ivory-2); }
.kt header b { font-size: 1.5rem; }
.kt.new { border-color: var(--coral); } .kt.new header { background: var(--red-l); }
.kt.late header .elapsed { background: var(--coral); color: #fff; }
.kt .elapsed { font-weight: 800; padding: 4px 10px; border-radius: 99px; background: #fff; }
.kt .meta { padding: 6px 14px; font-size: .85rem; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.kline { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); }
.kline .q { font-size: 1.5rem; font-weight: 800; min-width: 40px; }
.kline .n { flex: 1; font-size: 1.15rem; font-weight: 700; }
.kline .n small { display: block; font-weight: 600; color: var(--muted); font-size: .85rem; }
.kline .n .note-txt { display: block; color: var(--coral-d); font-size: 1rem; }
.kline.preparing { background: var(--amber-l); } .kline.ready { background: var(--green-l); }
.kline .btn { min-width: 132px; }
.amp-tag { background: var(--amber); color: var(--navy); border-radius: 99px; padding: 3px 10px; font-size: .8rem; font-weight: 800; }
.new-tag { background: var(--coral); color: #fff; border-radius: 99px; padding: 3px 10px; font-size: .8rem; font-weight: 800; }


/* ---------- Cobro ---------- */
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-methods .btn { flex-direction: column; min-height: 104px; font-size: 1.05rem; }
.pay-methods .btn .ico { font-size: 2rem; }
.bizum-phone { font-size: 2.6rem; font-weight: 800; letter-spacing: 2px; text-align: center; background: #fff; border: 3px dashed var(--blue); border-radius: var(--r); padding: 18px; margin: 10px 0; }
.amount-big { font-size: 2.4rem; font-weight: 800; text-align: center; margin: 8px 0; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button { min-height: 64px; font-size: 1.5rem; font-weight: 800; border-radius: 16px; border: 2px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; }
.cash-quick { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; } .cash-quick button { flex: 1 1 22%; }
.change-box { background: var(--green-l); border: 3px solid var(--green); border-radius: var(--r); padding: 16px; text-align: center; }
.change-box b { font-size: 2.6rem; display: block; }
.receipt { font-family: ui-monospace, "Courier New", monospace; background: #fff; padding: 16px; border: 1px dashed var(--line); max-width: 360px; margin: 0 auto; font-size: .9rem; }

/* ---------- Documentos ---------- */
.doc-grid { display: grid; gap: 14px; }
.doc-preview { width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.status-tag { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: .8rem; font-weight: 700; }
.status-tag.pending { background: var(--amber-l); color: #6b4a00; } .status-tag.ok { background: var(--green-l); color: #1d5a3c; }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.folder { background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 14px; text-align: center; cursor: pointer; font: inherit; color: inherit; }
.folder .ico { font-size: 2.4rem; display: block; }

/* ---------- Stock ---------- */
.bar-meter { height: 14px; background: var(--ivory-2); border-radius: 99px; overflow: hidden; }
.bar-meter span { display: block; height: 100%; background: var(--green); border-radius: 99px; transition: width var(--dur); }
.bar-meter.low span { background: var(--coral); }

/* ---------- Ayudante ---------- */

body.reduce-motion .helper-fab { transition: none; }
.chat { display: flex; flex-direction: column; gap: 10px; max-height: 55vh; overflow: auto; padding: 4px; }
.msg { max-width: 88%; padding: 12px 14px; border-radius: 18px; }
.msg.me { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-form { display: flex; gap: 8px; margin-top: 10px; } .chat-form input { flex: 1; }

/* ---------- Ticket imprimible ---------- */
#print-area { display: none; }
@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; font-family: ui-monospace, "Courier New", monospace; color: #000; width: 72mm; font-size: 11pt; }
  #print-area.w58 { width: 48mm; font-size: 9pt; }
  @page { margin: 3mm; }
}

/* ---------- Tablet ---------- */
@media (min-width: 720px) {
  main.view { padding: 20px 24px 120px; }
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .tile { min-height: 230px; }
  .grid.two { grid-template-columns: 1fr 1fr; }
  .grid.three { grid-template-columns: repeat(3, 1fr); }
  .modal-wrap { align-items: center; }
  .modal { width: min(620px, 94vw); border-radius: var(--r-lg); }
  .modal.wide { width: min(980px, 96vw); }
  .order-layout { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .order-layout .ticket { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow: auto; }
  .doc-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .method-cards { grid-template-columns: repeat(3, 1fr); }
  .method { flex-direction: column; text-align: center; }
  .pay-methods { grid-template-columns: repeat(4, 1fr); }
}
/* ---------- TPV sobremesa y pantalla de cocina ---------- */
@media (min-width: 1100px) {
  .tiles { grid-template-columns: repeat(3, 1fr); max-width: 1100px; margin: 0 auto; }
  .tile { min-height: 260px; }
  .products { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .kds { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  body.kitchen-mode main.view { max-width: none; }
}


/* ================= Estilo de la referencia aprobada ================= */
h1, h2, h3, .btn, b, strong { font-weight: 800; }
h1 { letter-spacing: -.01em; }
.brand-mark { width: 40px; height: 40px; flex: none; color: var(--coral); }
.team-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--green-l); color: #1d5a3c; border-radius: 99px; padding: 2px 10px; font-size: .78rem; font-weight: 700; }
.team-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.team-pill.off { background: var(--red-l); color: var(--coral-d); } .team-pill.off .dot { background: var(--coral); }
.team-pill.sync { background: var(--amber-l); color: #6b4a00; } .team-pill.sync .dot { background: var(--amber); }
.biz-switch { display: inline-flex; align-items: center; gap: 4px; }
.home-title { text-align: center; font-size: 1.7rem; margin: 6px 0 16px; }
.tiles { gap: 12px; }
.tile { background: var(--tile-bg, #fff); border: 0; border-radius: 22px; padding: 10px 8px 14px; min-height: 0; box-shadow: 0 2px 0 rgba(31,42,68,.05); justify-content: flex-start; }
.tile img.tile-img { width: 100%; max-width: 230px; aspect-ratio: 120/72; object-fit: contain; border-radius: 14px; }
.tile b { font-size: 1.3rem; margin-top: 2px; }
.tile:hover { outline: 3px solid var(--coral); }
.helper-bar { display: flex; align-items: flex-end; gap: 10px; margin-top: 18px; background: none; border: 0; padding: 0; width: 100%; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.helper-bar img { width: 92px; height: 86px; object-fit: cover; object-position: top; border-radius: 18px; flex: none; }
.bubble { position: relative; background: #fff; border: 2px solid var(--line); border-radius: 22px; padding: 12px 16px; font-weight: 700; box-shadow: var(--shadow); }
.bubble::before { content: ''; position: absolute; left: -10px; bottom: 18px; border: 8px solid transparent; border-right-color: var(--line); border-left: 0; }
.bubble small { display: block; font-weight: 600; color: var(--muted); }

/* Pestañas de zona y de categorías (pastillas) */
.seg button.on, .zone-tabs button.on { background: var(--coral); border-color: var(--coral); color: #fff; }
.cats.pills .cat { flex-direction: row; min-width: 0; padding: 8px 18px; border-radius: 14px; font-size: 1rem; gap: 8px; min-height: 50px; }
.cats.pills .cat .ico { font-size: 1.3rem; }
.cats.pills .cat.on { background: var(--coral); color: #fff; border-color: var(--coral); }

/* Plano: suelo de baldosas, sillas y plantas como en la referencia */
.floor-wrap { background: #fff; border: 3px solid #cdbda4; border-radius: 20px; }
.floor { background-color: #F7EFE2; background-image: linear-gradient(#ead9c0 1px, transparent 1px), linear-gradient(90deg, #ead9c0 1px, transparent 1px); background-size: 40px 40px; }
.fi.table { border-width: 3px; box-shadow: 0 3px 0 rgba(31,42,68,.12); overflow: visible; }
.fi.table.round { border-radius: 50%; }
.fi.table::before, .fi.table::after { content: ''; position: absolute; width: 34%; height: 14%; background: #C9935F; border-radius: 10px 10px 4px 4px; left: 33%; z-index: -1; }
.fi.table::before { top: -17%; } .fi.table::after { bottom: -17%; transform: rotate(180deg); }
.fi.table .num { font-weight: 900; }
.fi.table.st-free { --st: #7FC49A; --st-bg: #DDF1E3; }
.fi.table.st-pending { --st: #E8664D; --st-bg: #F8B9AA; }
.fi.table.st-preparing { --st: #E9A53A; --st-bg: #F9D98C; }
.fi.table.st-ready { --st: #2F8A5D; --st-bg: #8FD3A9; }
.fi.table.st-served { --st: #4E83C9; --st-bg: #B5D2F2; }
.fi.bar { background: linear-gradient(#D9A877, #B97F4C); border: 3px solid #8C5A3C; border-radius: 16px; color: #3b2414; font-size: 1rem; }
.fi.plant { background: radial-gradient(circle at 40% 35%, #8ACB7C, #3E9B6E); border: 3px solid #2e7a55; }
.fi.door { background: #fff; border: 3px solid #b9a88f; border-radius: 6px; color: var(--navy); }
.floor-actions { display: flex; gap: 10px; margin-top: 12px; } .floor-actions .btn { flex: 1; }

/* Comanda: tarjetas horizontales con «+ Añadir» */
.products.cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.prod.h { flex-direction: row; align-items: center; gap: 6px; padding: 8px; border-radius: 18px; border: 2px solid var(--line); }
.prod.h img { width: 72px; height: 72px; aspect-ratio: auto; border-radius: 12px; flex: none; object-fit: cover; background: transparent; }
.prod.h .pbody { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.prod.h .pn { padding: 0; font-size: 1rem; }
.prod.h .pp { padding: 0; color: var(--navy); font-weight: 700; }
.prod.h .add { margin-top: 6px; align-self: flex-start; background: var(--coral); color: #fff; border-radius: 10px; padding: 4px 10px; font-weight: 800; font-size: .9rem; }
.cart-bar { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--line); border-radius: 18px; padding: 12px 14px; margin-top: 12px; font-weight: 800; }
.cart-bar .chip { background: var(--amber-l); }
.btn.send { background: var(--coral); border-color: var(--coral); color: #fff; min-height: 76px; font-size: 1.45rem; border-radius: 20px; width: 100%; margin-top: 10px; box-shadow: 0 4px 0 #c24f37; }
.who-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--navy-2); font-size: .95rem; }

/* Cocina */
.live-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--green-l); color: #1d5a3c; border-radius: 99px; padding: 4px 12px; font-weight: 800; }
.live-pill .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
body:not(.reduce-motion) .live-pill .dot { animation: softpulse 2.4s infinite; --st: var(--green); }
.kt { border-radius: 22px; border-width: 3px; }
.kt.new { border-color: var(--coral); background: #FFF6F3; } .kt.new header { background: transparent; }
.kt.prep { border-color: var(--amber); background: #FFFBF0; } .kt.prep header { background: transparent; }
.kt .timer { color: var(--coral-d); font-weight: 900; font-size: 1.3rem; display: inline-flex; gap: 6px; align-items: center; }
.kt .btn.prep-btn { background: var(--amber-l); border: 2px solid var(--amber); color: var(--navy); }
.serve-notice { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--line); border-radius: 18px; padding: 12px 14px; margin-bottom: 10px; }

/* Cobro */
.total-band { display: flex; justify-content: space-between; align-items: center; background: #FCE3A6; border-radius: 16px; padding: 14px 16px; font-size: 1.6rem; font-weight: 900; margin: 8px 0; }
.method-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.method-row button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; border: 2px solid var(--line); background: #fff; font: inherit; font-weight: 800; color: var(--navy); cursor: pointer; min-height: 92px; }
.method-row button .ico { font-size: 2rem; }
.method-row button.on { border-color: var(--coral); background: var(--red-l); box-shadow: 0 0 0 2px var(--coral) inset; }
.printer-bar { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--green-l); border-radius: 14px; padding: 10px; font-weight: 700; margin: 10px 0; }
.printer-bar.off { background: var(--ivory-2); color: var(--muted); }
.btn.confirm { background: var(--coral); border-color: var(--coral); color: #fff; width: 100%; min-height: 70px; font-size: 1.35rem; border-radius: 18px; box-shadow: 0 4px 0 #c24f37; }

/* Stock como en la referencia */
.stock-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--green-l); margin-bottom: 8px; text-decoration: none; color: inherit; }
.stock-row.alert { background: #FBD5CC; }
.stock-row img, .stock-row .ph { width: 64px; height: 44px; object-fit: contain; flex: none; border-radius: 10px; }
.stock-row .ph { display: grid; place-items: center; font-size: 1.8rem; }
.stock-row .grow b { font-weight: 800; }
.stock-row .warn { color: var(--coral-d); font-weight: 800; }
.helper-card { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 2px solid var(--line); border-radius: 20px; padding: 12px; margin: 14px 0; }
.helper-card img { width: 72px; height: 86px; object-fit: cover; object-position: top; flex: none; border-radius: 14px; }
.helper-card .q { background: var(--blue-l); border-radius: 14px; padding: 6px 12px; font-weight: 700; display: inline-block; margin: 4px 0; }
.helper-card .a { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 6px 12px; display: inline-block; }

/* Entrada */
.login-hero { display: grid; gap: 16px; align-items: center; }
.login-hero .logo { max-width: 260px; margin: 0 auto; display: block; }
.login-hero .hero { display: none; }
.oauth-btns { display: grid; gap: 10px; }
.btn.google { background: #fff; border-color: #dadce0; color: #1f1f1f; }
.btn.apple { background: #000; border-color: #000; color: #fff; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 700; margin: 6px 0; } .or::before, .or::after { content: ''; flex: 1; height: 2px; background: var(--line); }
@media (min-width: 900px) {
  .login-hero { grid-template-columns: 1fr 1fr; max-width: 1000px; margin: 0 auto; }
  .login-hero .hero { display: block; width: 100%; border-radius: 28px; }
}

.send-b { display: none; } @media (min-width: 720px) { .send-a { display: none; } .send-b { display: flex; } }

.team-pill { white-space: nowrap; }
.top .brand b { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.prod.h .add { white-space: nowrap; }
@media (max-width: 560px) {
  .products.cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .prod.h { flex-direction: column; align-items: stretch; text-align: left; }
  .prod.h img { width: 100%; height: 86px; object-fit: contain; }
  .prod.h .add { align-self: stretch; text-align: center; padding: 8px; }
  .kitchen-fs { display: none; }
  .quick-row .btn { min-height: 52px; font-size: 1rem; }
}

.list li.req { flex-wrap: wrap; } .list li.req .grow { flex-basis: 60%; } .list li.req select { flex: 1 1 100%; } .list li.req .btn { flex: 1; min-height: 52px; }

/* Cocinero flotante del ayudante */
.helper-fab { position: fixed; right: 12px; bottom: 16px; z-index: 40; width: 74px; height: auto; padding: 4px 4px 6px; border-radius: 22px; border: 3px solid var(--coral); background: #fff; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; align-items: center; gap: 0; cursor: pointer; font: inherit; font-weight: 900; font-size: .78rem; color: var(--navy); transition: bottom var(--dur), transform .1s; }
.helper-fab img { width: 60px; height: 56px; object-fit: cover; object-position: top; border-radius: 16px; }
.helper-fab:active { transform: scale(.94); }
body.has-bottom-bar .helper-fab { bottom: 168px; }
body.has-modal .helper-fab { display: none; }
body.has-modal { overflow: hidden; }
body.has-helper-fab #view { padding-bottom: 120px; }
body.no-fab-route .helper-fab { display: none; }
@media (min-width: 720px) { body.has-bottom-bar .helper-fab { bottom: 16px; } .order-layout .ticket { padding-bottom: 90px; } }