/* Parribomber: identidad de tótem de fast-food.
   Negro carbón de fondo, rojo bombero para la marca, amarillo fuego para precios y alertas, verde parrilla para cobrar y "listo".
   Todo lo que se toca mide 60 px o más y responde al dedo (se hunde al apretar). Pensado para tablet apaisada y TV. */
:root {
  /* paleta oficial */
  --carbon: #09090b;
  --ember: #dc2626;      /* Rojo Bombero */
  --brass: #f59e0b;      /* Amarillo Fuego */
  --ok: #16a34a;         /* Verde Parrilla */
  --orange: #ea580c;
  /* derivados */
  --bg: var(--carbon);
  --panel: #151518;
  --panel-2: #1f1f23;
  --panel-3: #2a2a30;
  --line: #2e2e35;
  --hair: rgb(255 255 255 / .07);
  --fg: #fafaf9;
  --muted: #a1a1aa;
  --ember-2: #ef4444;
  --ember-d: #7f1d1d;
  --brass-d: #92400e;
  --ok-2: #22c55e;
  --ok-d: #14532d;
  --warn: var(--brass);
  --bad: #f87171;
  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --body: 'Barlow', 'Segoe UI', Roboto, system-ui, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --r: 14px;
  --r-lg: 20px;
  --press: transform .12s cubic-bezier(.3, .7, .4, 1.4), box-shadow .12s, background .15s, border-color .15s, filter .15s;
  --depth: 0 1px 0 rgb(255 255 255 / .05) inset, 0 18px 40px -18px rgb(0 0 0 / .9);
  --touch: 64px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 520px at 50% -180px, rgb(220 38 38 / .16), transparent 70%), var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font: 16px/1.4 var(--body);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
#app { min-height: 100%; display: flex; flex-direction: column; }
#print-root { display: none; }
button, input, select { font: inherit; color: inherit; }
button { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
a { color: var(--brass); }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
small { color: var(--muted); }
code { font-family: ui-monospace, monospace; }
[hidden] { display: none !important; }

.mark { width: 36px; height: 36px; flex: none; }
.eyebrow { font: 700 13px/1.2 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin: 0; }
.hint { color: var(--muted); font-size: 14px; margin: 0; }
.err { color: var(--bad); margin: 0; font-weight: 600; }
.empty { color: var(--muted); padding: 12px 0; margin: 0; list-style: none; }
.spacer { flex: 1; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); background: var(--panel-2); border-radius: var(--r);
  padding: 10px 18px; font-weight: 700; cursor: pointer; min-height: 52px; text-decoration: none;
  box-shadow: 0 3px 0 rgb(0 0 0 / .55);
  transition: var(--press);
}
.btn:hover:not(:disabled) { background: var(--panel-3); }
.btn:active:not(:disabled) { transform: translateY(2px) scale(.95); box-shadow: 0 1px 0 rgb(0 0 0 / .55); }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.btn-primary { background: var(--ember); border-color: var(--ember-2); color: #fff; box-shadow: 0 4px 0 var(--ember-d), 0 10px 24px -10px rgb(220 38 38 / .7); }
.btn-primary:hover:not(:disabled) { background: var(--ember-2); }
.btn-primary:active:not(:disabled) { box-shadow: 0 1px 0 var(--ember-d); }
.btn-ok { background: var(--ok); border-color: var(--ok-2); color: #fff; box-shadow: 0 4px 0 var(--ok-d), 0 10px 24px -10px rgb(22 163 74 / .7); }
.btn-ok:hover:not(:disabled) { background: #15b04f; }
.btn-ok:active:not(:disabled) { box-shadow: 0 1px 0 var(--ok-d); }
.btn-warn { background: var(--brass); border-color: #fbbf24; color: #1c1002; box-shadow: 0 4px 0 var(--brass-d), 0 10px 24px -10px rgb(245 158 11 / .6); }
.btn-warn:hover:not(:disabled) { background: #fbbf24; }
.btn-warn:active:not(:disabled) { box-shadow: 0 1px 0 var(--brass-d); }
.btn-dark { background: var(--panel-3); border-color: #3f3f46; color: var(--fg); }
.btn-ghost { background: transparent; border-color: var(--line); box-shadow: none; }
.btn-ghost:hover:not(:disabled) { background: var(--panel-2); }
.btn-sm { min-height: 44px; padding: 6px 14px; font-size: 15px; border-radius: 12px; }
.btn-lg { min-height: var(--touch); font-size: 19px; padding: 12px 24px; }
.btn-xl { min-height: 80px; font: 900 32px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; width: 100%; border-radius: var(--r-lg); }
.btn-ok.btn-xl:disabled { background: var(--panel-2); border-color: var(--line); color: var(--muted); opacity: 1; }
.btn.danger { color: var(--bad); }
.btn.armed { background: var(--ember); color: #fff; border-color: var(--ember-2); animation: armed .5s ease-in-out infinite alternate; }
@keyframes armed { to { filter: brightness(1.25); } }
.link { background: none; border: 0; color: var(--brass); cursor: pointer; padding: 8px; text-decoration: underline; min-height: 44px; }
.chip {
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: 8px 20px; min-height: 52px; cursor: pointer; font: 700 18px/1 var(--cond); letter-spacing: .04em; white-space: nowrap;
  transition: var(--press);
}
.chip:active { transform: scale(.95); }
.chip.on { background: var(--fg); color: var(--carbon); border-color: var(--fg); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
#c-pay { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg button {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 2px solid var(--line); background: var(--panel-2); border-radius: var(--r); padding: 8px 6px; min-height: var(--touch);
  cursor: pointer; font: 700 16px/1.1 var(--cond); letter-spacing: .02em; transition: var(--press);
}
.seg button span { font-size: 22px; line-height: 1; }
.seg button:active { transform: scale(.95); }
.seg button.on, .seg button[aria-selected="true"] { background: color-mix(in srgb, var(--brass) 16%, var(--panel-2)); color: var(--brass); border-color: var(--brass); box-shadow: 0 0 0 3px rgb(245 158 11 / .18); }
.chk { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); min-height: 44px; }
.chk input { width: 22px; height: 22px; accent-color: var(--ember); }
.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 700 13px/1.4 var(--cond); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.s-nuevo { background: color-mix(in srgb, var(--ember) 22%, transparent); color: #fca5a5; }
.s-preparando { background: color-mix(in srgb, var(--brass) 22%, transparent); color: var(--brass); }
.s-listo { background: color-mix(in srgb, var(--ok) 25%, transparent); color: var(--ok-2); }
.s-entregado { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.s-anulado { background: transparent; color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); text-decoration: line-through; }

input:not([type="checkbox"]), select {
  background: var(--carbon); border: 2px solid var(--line); border-radius: 12px;
  padding: 10px 14px; min-height: 52px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { border-color: var(--brass); outline: none; box-shadow: 0 0 0 4px rgb(245 158 11 / .15); }
.panel { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--depth); }
.panel h3 { font: 800 20px/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; margin-bottom: 12px; }

/* ---------- barra superior ---------- */
.bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  background: rgb(9 9 11 / .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair); box-shadow: 0 3px 0 var(--ember);
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
}
.bar-brand { display: flex; align-items: center; gap: 8px; color: var(--fg); text-decoration: none; font: 900 24px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; min-height: 44px; }
.bar-brand .mark { width: 30px; height: 30px; }
.bar-title { font: 700 18px/1 var(--cond); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-left: 12px; border-left: 2px solid var(--line); }
.bar-station { color: var(--brass); margin-left: 6px; }
.bar-clock { font: 800 26px/1 var(--display); color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.bar-user { color: var(--muted); font-size: 14px; }

/* ---------- inicio ---------- */
.hub { width: 100%; max-width: 1040px; margin: 0 auto; padding: 48px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 28px; }
.hub-head { display: flex; gap: 20px; align-items: center; }
.hub-head .mark { width: 84px; height: 84px; filter: drop-shadow(0 8px 24px rgb(220 38 38 / .45)); }
.hub h1 { font: 900 clamp(56px, 10vw, 112px)/.85 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.hub-sub { margin: 8px 0 0; color: var(--muted); font-size: 18px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.hub-card {
  --acc: var(--ember);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; min-height: 180px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 14%, var(--panel-2)), var(--panel) 60%);
  border: 1px solid var(--hair); border-radius: var(--r-lg); color: var(--fg); text-decoration: none;
  box-shadow: var(--depth), inset 0 4px 0 var(--acc); transition: var(--press);
}
.hub-card:hover { transform: translateY(-3px); }
.hub-card:active { transform: scale(.97); }
.hub-ico { font-size: 40px; line-height: 1; margin-bottom: auto; }
.hub-k { font: 900 clamp(26px, 2.5vw, 32px)/1 var(--display); overflow-wrap: anywhere; text-transform: uppercase; letter-spacing: .02em; }
.hub-d { color: var(--muted); }
.hub > .btn { align-self: flex-start; }
.demo-banner {
  border: 1px solid color-mix(in srgb, var(--brass) 40%, transparent); border-left: 5px solid var(--brass); border-radius: 12px; padding: 12px 16px;
  background: color-mix(in srgb, var(--brass) 8%, var(--panel));
  display: flex; flex-direction: column; gap: 4px; font-size: 15px;
}
.demo-banner p { margin: 0; }
.demo-keys { color: var(--muted); }
.demo-keys b { color: var(--fg); }
.admin .demo-banner, .bar + .demo-banner { margin: 12px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }

/* ---------- ingreso ---------- */
.gate { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
.gate .back { align-self: flex-start; color: var(--muted); text-decoration: none; padding: 10px 0; font-weight: 600; }
.gate-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--hair); box-shadow: var(--depth), inset 0 5px 0 var(--ember); border-radius: var(--r-lg); padding: 28px; }
.gate-card .mark { width: 52px; height: 52px; }
.gate-card h1 { font: 900 48px/1 var(--display); text-transform: uppercase; margin-bottom: 8px; }
.gate-card label { font: 700 14px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
#g-pin { font: 800 34px/1 var(--display); letter-spacing: .45em; text-align: center; min-height: 68px; }
.gate-card .btn { margin-top: 8px; }
.gate-card .link { align-self: center; font-size: 14px; }

/* ---------- caja ---------- */
.caja { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 18px; padding: 18px max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px)); align-items: start; }
.caja-menu { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cats { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.chip.cat:not(.on)[style] { box-shadow: inset 0 -3px 0 var(--acc); }
.chip.cat.on[style] { background: var(--acc); border-color: var(--acc); color: #fff; }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.prod {
  --acc: var(--ember);
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  min-height: 190px; padding: 16px; text-align: left; cursor: pointer;
  background:
    radial-gradient(140px 110px at 18% 0%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  box-shadow: var(--depth), inset 0 -4px 0 color-mix(in srgb, var(--acc) 70%, black);
  transition: var(--press);
}
.prod:hover:not(:disabled) { border-color: color-mix(in srgb, var(--acc) 50%, transparent); }
.prod:active:not(:disabled) { transform: scale(.95); box-shadow: 0 6px 16px -10px rgb(0 0 0 / .9), inset 0 -2px 0 var(--acc); }
.prod.has { border-color: color-mix(in srgb, var(--brass) 60%, transparent); box-shadow: var(--depth), inset 0 -4px 0 var(--brass), 0 0 0 2px rgb(245 158 11 / .25); }
.prod-ico { font-size: 52px; line-height: 1; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .5)); }
.prod-name { font: 700 21px/1.1 var(--cond); letter-spacing: .01em; }
.prod-foot { margin-top: auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.prod-price { font: 900 28px/1 var(--display); color: var(--brass); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.prod-qty {
  position: absolute; top: 10px; right: 10px; min-width: 40px; height: 40px; border-radius: 20px; padding: 0 10px;
  background: var(--brass); color: #1c1002; font: 900 24px/40px var(--display); text-align: center;
  box-shadow: 0 4px 12px -2px rgb(245 158 11 / .6);
}
.bump { animation: bump .28s cubic-bezier(.3, .7, .4, 1.6); }
@keyframes bump { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.prod-tag { font: 700 12px/1 var(--cond); text-transform: uppercase; letter-spacing: .08em; padding: 5px 8px; border-radius: 6px; }
.prod-tag.bad { background: var(--ember); color: #fff; }
.prod-tag.warn { background: color-mix(in srgb, var(--brass) 22%, transparent); color: var(--brass); }
.prod.out { opacity: .45; cursor: not-allowed; filter: grayscale(.8); }
.prod.out .prod-price { color: var(--muted); text-decoration: line-through; }

.caja-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 76px); }
.cart { display: flex; flex-direction: column; gap: 12px; padding: 0; overflow: hidden auto; max-height: calc(100dvh - 76px - 18px - env(safe-area-inset-top, 0px)); box-shadow: var(--depth), 0 0 0 1px rgb(255 255 255 / .04); }
.cart > * { flex: none; min-width: 0; }
.cart > :not(.cart-head):not(.total-row):not(#c-cobrar) { margin-left: 18px; margin-right: 18px; }
.cart > input { width: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cart-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--ember); box-shadow: inset 0 -4px 0 var(--ember-d); }
.cart-head h2 { font: 900 30px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: #fff; }
.cart-count { font: 700 15px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; background: rgb(0 0 0 / .28); color: #fff; padding: 6px 10px; border-radius: 999px; }
.cart-count:empty { display: none; }
.cart-head .btn { color: #fff; border-color: rgb(255 255 255 / .35); }
.cart-head .btn:hover:not(:disabled) { background: rgb(0 0 0 / .2); }
.cart > .cart-list { flex: 1 1 auto; min-height: 112px; }
.cart-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.cart-list li:not(.empty) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 86px; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px dashed var(--line);
}
.cart-list li.in { animation: line-in .26s cubic-bezier(.2, .8, .3, 1.2); }
.cart-list li.out { animation: line-out .17s ease-in forwards; pointer-events: none; }
@keyframes line-in { from { opacity: 0; transform: translateX(24px); background: rgb(245 158 11 / .18); } to { opacity: 1; transform: none; background: transparent; } }
@keyframes line-out { to { opacity: 0; transform: translateX(-24px); } }
.cart-list .empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 8px; font-size: 16px; }
.cart-list .empty span { font-size: 34px; opacity: .7; }
.ci-name { font: 700 18px/1.15 var(--cond); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; }
.ci-ico { grid-row: span 2; font-size: 26px; }
.ci-name small { font: 500 13px/1.2 var(--body); }
.ci-sub { text-align: right; font: 800 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--carbon); border-radius: 14px; padding: 3px; border: 1px solid var(--line); }
.stepper button { width: 52px; height: 52px; border-radius: 11px; border: 0; background: var(--panel-3); font: 700 26px/1 var(--body); cursor: pointer; transition: var(--press); }
.stepper button:active:not(:disabled) { transform: scale(.9); background: var(--line); }
.stepper button:disabled { opacity: .3; }
.stepper button[data-inc] { background: color-mix(in srgb, var(--ok) 30%, var(--panel-3)); }
.stepper b { display: inline-block; min-width: 30px; text-align: center; font: 900 24px/1 var(--display); font-variant-numeric: tabular-nums; }
.lbl { font: 700 13px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.cash { display: flex; flex-direction: column; gap: 8px; }
.cash:empty { display: none; }
.cash-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.cash-row::-webkit-scrollbar { display: none; }
.cash-row input { flex: 0 0 112px; width: 112px; font: 800 24px/1 var(--display); min-height: var(--touch); }
.cash-row .chip { flex: 1 0 auto; min-height: var(--touch); padding: 8px 10px; font: 800 19px/1 var(--display); font-variant-numeric: tabular-nums; }
.change { margin: 0; font: 600 18px/1.2 var(--body); color: var(--ok-2); padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ok) 12%, transparent); }
.change strong { font: 900 28px/1 var(--display); }
.change.bad { color: var(--bad); background: color-mix(in srgb, var(--ember) 12%, transparent); }
.total-row {
  display: flex; justify-content: space-between; align-items: center; margin: 4px 0 0; padding: 16px 18px;
  background: var(--carbon); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.total-row span { font: 700 18px/1 var(--cond); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.total-row strong { font: 900 54px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--brass); letter-spacing: .01em; }
#c-cobrar { width: auto; margin: 0 14px 14px; }
.recent h3 { font-size: 16px; color: var(--muted); }
.recent-list { list-style: none; margin: 0; padding: 0; }
.recent-list li:not(.empty) { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "n i p" "n a a"; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rnum { grid-area: n; font: 900 38px/1 var(--display); color: var(--brass); text-align: center; background: var(--carbon); border-radius: 12px; padding: 8px 0; }
.rinfo { grid-area: i; font-size: 14px; }
.recent-list .pill { grid-area: p; }
.ractions { grid-area: a; display: flex; gap: 6px; justify-content: flex-end; }

/* modal */
.modal { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; animation: fade .18s ease-out; }
.modal-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 16%, var(--panel-2)), var(--panel) 45%);
  border: 1px solid var(--hair); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .9), inset 0 6px 0 var(--ok);
  border-radius: 24px; padding: 32px 28px; width: 100%; max-width: 460px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: pop .28s cubic-bezier(.2, .8, .3, 1.3);
}
.succ-check { width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: #fff; font: 900 38px/64px var(--body); box-shadow: 0 8px 24px -6px rgb(22 163 74 / .8); margin-bottom: 4px; }
.big-num { font: 900 168px/.85 var(--display); color: var(--brass); font-variant-numeric: tabular-nums; text-shadow: 0 10px 40px rgb(245 158 11 / .35); }
.succ-line { margin: 0; font-size: 20px; font-weight: 600; }
.succ-change { margin: 0; font-size: 22px; color: var(--ok-2); }
.succ-change strong { font: 900 34px/1 var(--display); }
.modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; width: 100%; }
.modal-actions .btn { flex: 1 1 160px; }
@keyframes pop { from { transform: scale(.9) translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } }

/* ---------- cocina (KDS) ---------- */
.kds { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 14px max(14px, env(safe-area-inset-right, 0px)) 14px max(14px, env(safe-area-inset-left, 0px)); align-items: start; }
.kcol { --col: var(--ember); min-width: 0; }
.k-preparando { --col: var(--brass); }
.k-listo { --col: var(--ok); }
.kcol h2 {
  font: 900 26px/1 var(--display); text-transform: uppercase; letter-spacing: .03em;
  padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-radius: var(--r); margin-bottom: 12px;
  background: color-mix(in srgb, var(--col) 16%, var(--panel)); box-shadow: inset 5px 0 0 var(--col);
}
.count { font: 900 24px/1 var(--display); background: var(--col); color: #fff; border-radius: 999px; min-width: 44px; padding: 8px 12px; text-align: center; }
.k-preparando .count { color: #1c1002; }
.kcards { display: flex; flex-direction: column; gap: 12px; }
.kempty { text-align: center; padding: 28px 0; border: 2px dashed var(--line); border-radius: var(--r); font: 700 18px/1 var(--cond); text-transform: uppercase; letter-spacing: .1em; }
.kcard {
  --t: var(--ok);
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--hair); border-radius: var(--r-lg);
  box-shadow: var(--depth), inset 0 5px 0 var(--col);
  padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px;
}
.kcard.late1 { --t: var(--brass); }
.kcard.late2 { --t: var(--ember); border-color: color-mix(in srgb, var(--ember) 60%, transparent); animation: late 1.6s ease-in-out infinite; }
@keyframes late { 50% { box-shadow: var(--depth), inset 0 5px 0 var(--col), 0 0 0 4px rgb(220 38 38 / .35); } }
.kcard header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.knum { font: 900 84px/.82 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.knum small { font: 800 22px/1 var(--display); color: var(--muted); margin-right: 2px; vertical-align: top; }
.kside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ktime {
  font: 900 26px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap;
  padding: 8px 12px; border-radius: 12px; color: var(--t); background: color-mix(in srgb, var(--t) 18%, transparent); border: 2px solid color-mix(in srgb, var(--t) 55%, transparent);
}
.kcard.late2 .ktime { background: var(--ember); color: #fff; border-color: var(--ember-2); }
.k-listo .ktime { --t: var(--muted); }
.kmeta { color: var(--muted); font-size: 13px; text-align: right; }
.kitems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kitems li { display: flex; align-items: center; gap: 12px; font: 700 23px/1.15 var(--cond); }
.kitems b { flex: none; min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--brass); color: #1c1002; font: 900 28px/1 var(--display); font-variant-numeric: tabular-nums; }
.knote { margin: 0; padding: 10px 12px; background: color-mix(in srgb, var(--brass) 14%, transparent); border-left: 5px solid var(--brass); border-radius: 10px; color: var(--brass); font-weight: 700; font-size: 18px; }
.kcard footer { display: flex; align-items: stretch; gap: 10px; }
.kback { min-height: 72px; min-width: 72px; font-size: 28px; padding: 0; }
.kgo { flex: 1; min-height: 72px; font: 900 30px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; border-radius: var(--r-lg); }

/* ---------- pantalla de retiro (TV) ---------- */
body[data-view="pantalla"] { overflow: hidden; background: #000; }
.tv { flex: 1; display: flex; flex-direction: column; min-height: 100%; background: #000; }
.tv-head { display: flex; align-items: center; gap: 16px; padding: 14px max(28px, env(safe-area-inset-right, 0px)) 14px max(28px, env(safe-area-inset-left, 0px)); background: var(--ember); flex-wrap: wrap; box-shadow: inset 0 -6px 0 var(--ember-d); }
.tv-brand { display: flex; align-items: center; gap: 14px; font: 900 clamp(32px, 3.8vw, 64px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.tv-brand .mark { width: 1.1em; height: 1.1em; filter: drop-shadow(0 2px 0 rgb(0 0 0 / .3)); }
.tv-brand .mark path:first-child { fill: #fff; }
.tv-clock { margin-left: auto; font: 900 clamp(32px, 3.4vw, 58px)/1 var(--display); font-variant-numeric: tabular-nums; color: #fff; background: rgb(0 0 0 / .3); padding: .12em .4em; border-radius: 12px; }
.tv-tools { display: flex; gap: 6px; opacity: .25; transition: opacity .2s; }
.tv-tools:hover, .tv-tools:focus-within { opacity: 1; }
.tv-btn { background: rgb(0 0 0 / .35); border: 1px solid rgb(255 255 255 / .3); color: #fff; border-radius: 10px; padding: 10px 14px; min-height: 44px; cursor: pointer; font-size: 14px; }
.tv-cols { flex: 1; display: grid; grid-template-columns: 2fr 3fr; min-height: 0; }
.tv-col { padding: clamp(18px, 2vw, 36px) max(28px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 28px); min-width: 0; }
.tv-col h2 { display: flex; align-items: center; gap: .4em; font: 900 clamp(30px, 3.6vw, 68px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; padding-bottom: .3em; border-bottom: 6px solid currentColor; }
.tv-dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; flex: none; }
.tv-col.prep { border-right: 6px solid #18181b; }
.tv-col.prep h2 { color: var(--brass); }
.tv-col.prep .tv-dot { animation: blink 1.4s ease-in-out infinite; }
.tv-col.ready h2 { color: var(--ok-2); }
@keyframes blink { 50% { opacity: .25; } }
.tv-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 11vw, 220px), 1fr)); gap: clamp(10px, 1.2vw, 20px); align-content: start; }
.ready .tv-nums { grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 14vw, 280px), 1fr)); }
.tv-n { font: 900 clamp(56px, 7vw, 140px)/1 var(--display); font-variant-numeric: tabular-nums; text-align: center; padding: .14em 0; border-radius: clamp(10px, 1vw, 20px); }
.prep .tv-n { color: #d4d4d8; background: #111113; border: 2px solid #27272a; font-size: clamp(42px, 4.8vw, 96px); }
.ready .tv-n { background: #000; color: #fff; border: clamp(3px, .35vw, 6px) solid var(--ok); box-shadow: 0 0 0 1px #000, 0 0 40px -8px rgb(22 163 74 / .6); font-size: clamp(68px, 8.4vw, 170px); }
.ready .tv-n.flash { animation: flash 1s ease-in-out infinite; }
@keyframes flash { 0%, 100% { background: var(--ok); color: #000; transform: scale(1.04); } 50% { background: #000; color: #fff; transform: scale(1); } }
.tv-nums[data-empty]:empty::after { content: attr(data-empty); grid-column: 1 / -1; color: #52525b; font: 700 clamp(20px, 2vw, 36px)/1.2 var(--cond); text-transform: uppercase; letter-spacing: .1em; padding: 1em 0; }
.tv-foot { padding: 14px 24px; text-align: center; color: #71717a; font: 700 clamp(16px, 1.4vw, 26px)/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; border-top: 1px solid #18181b; }

/* administración */
.tabs { display: flex; gap: 4px; overflow-x: auto; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; border-bottom: 4px solid transparent; padding: 14px 16px; min-height: 52px; font: 700 18px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--ember); }
.admin { width: 100%; max-width: 1180px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 16px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.toolbar input[type="search"] { max-width: 200px; }
.tab-title { font: 800 28px/1 var(--display); text-transform: uppercase; }
.custom-range { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.custom-range label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.range-note { color: var(--muted); margin: -6px 0 0; font-size: 14px; }
.r-body { display: flex; flex-direction: column; gap: 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.kpi { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--hair); box-shadow: var(--depth); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.kpi span { font: 600 13px/1 var(--cond); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.kpi strong { font: 900 34px/1 var(--display); font-variant-numeric: tabular-nums; }
.kpi-main { box-shadow: var(--depth), inset 0 4px 0 var(--brass); }
.kpi-main strong { color: var(--brass); font-size: 40px; }
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.report-grid .wide { grid-column: 1 / -1; }
.hbar { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) 110px; gap: 10px; align-items: center; padding: 5px 0; }
.hbar-k { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 14px; background: var(--panel-2); border-radius: 7px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; background: var(--ember); border-radius: 7px; }
.hbar-v { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; font: 600 13px/1 var(--cond); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 10px 8px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.tbl th.num { text-align: right; }
.tbl td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl td.big { font: 800 24px/1 var(--display); }
.tbl tr.muted td { color: var(--muted); }
.tbl .neg { color: var(--bad); }
.tbl .pos { color: var(--ok); }
.items-cell { min-width: 200px; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions .btn + .btn { margin-left: 4px; }
.qty-in { max-width: 100px; }
.s-summary { display: flex; gap: 6px; }
.export { display: flex; flex-wrap: wrap; gap: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: end; }
.form-grid.sub { padding: 0; }
.form-grid label:not(.chk-line):not(.switch) { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.form-grid h3 { margin: 0; }
.span2 { grid-column: 1 / -1; }
.chk-line { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.chk-line input, .switch input { width: 22px; height: 22px; accent-color: var(--ember); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.config-grid .panel { display: flex; flex-direction: column; gap: 12px; }
.config-grid .form-grid { display: grid; }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px);
  background: var(--fg); color: var(--carbon); padding: 14px 20px; border-radius: 14px; font-weight: 700; box-shadow: 0 16px 40px -10px rgb(0 0 0 / .8);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--ember); color: #fff; }
.fatal { padding: 40px 16px; max-width: 640px; margin: 0 auto; }
.fatal pre { white-space: pre-wrap; color: var(--bad); }

@media (max-width: 900px) {
  .caja { grid-template-columns: minmax(0, 1fr); }
  .caja-side { position: static; }
  .cart { max-height: none; }
  .knum { font-size: 72px; }
  .kds { grid-template-columns: minmax(0, 1fr); }
  .tv-cols { grid-template-columns: minmax(0, 1fr); }
  .tv-col.prep { border-right: 0; border-bottom: 6px solid #18181b; }
  .report-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-view="pantalla"] { overflow: auto; }
}
@media (max-width: 520px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hbar { grid-template-columns: 90px minmax(0, 1fr) 90px; }
  .bar-title { display: none; }
  .big-num { font-size: 120px; }
  .prod { min-height: 170px; }
  .prod-ico { font-size: 44px; }
  .seg button { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ticket para impresora térmica de 80 mm (en 58 mm también entra) */
@media print {
  @page { size: 80mm auto; margin: 0; }
  body { background: #fff !important; color: #000 !important; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; }
  .tk { width: 72mm; padding: 3mm 2mm; font: 12px/1.3 'Courier New', monospace; color: #000; }
  .tk-head { font: 900 22px/1 Arial, sans-serif; text-align: center; letter-spacing: .05em; }
  .tk-sub { text-align: center; font-size: 11px; }
  .tk-lbl { text-align: center; margin-top: 6px; font: 700 12px/1 Arial, sans-serif; letter-spacing: .2em; }
  .tk-num { text-align: center; font: 900 64px/1 Arial, sans-serif; }
  .tk-row { display: flex; justify-content: space-between; gap: 6px; }
  .tk-total { font-weight: 900; font-size: 16px; }
  .tk-note { margin-top: 4px; font-style: italic; }
  .tk-foot { text-align: center; font-size: 11px; }
  .tk hr { border: 0; border-top: 1px dashed #000; margin: 6px 0; }
}