/* =====================================================================
   Menú digital · pedidos por mesa — sistema visual
   Tema oscuro editorial: brasa, oro y crema. Una sola estética
   deliberada para cliente, cocina, meseros, caja y administración.
   ===================================================================== */

:root{
  --bg:#120F0D;
  --bg-2:#1A1512;
  --surface:#211B17;
  --surface-2:#2A221C;
  --surface-3:#33291F;
  --line:rgba(243,235,221,.09);
  --line-strong:rgba(243,235,221,.18);
  --ink:#F3EBDD;
  --ink-2:#D9CFBF;
  --muted:#A3947F;
  --muted-2:#6F6255;

  --accent:#C1502E;            /* configurable desde Ajustes */
  --accent-strong:#D8623C;
  --accent-soft:rgba(193,80,46,.16);
  --on-accent:#FFF7EC;
  --gold:#D9A566;
  --gold-soft:rgba(217,165,102,.14);

  --success:#8FAE73; --success-bg:rgba(143,174,115,.14);
  --warning:#E0AC5A; --warning-bg:rgba(224,172,90,.14);
  --info:#93A5BC;    --info-bg:rgba(147,165,188,.14);
  --danger:#E08279;  --danger-bg:rgba(224,130,121,.14);

  --shadow:0 20px 50px -20px rgba(0,0,0,.7);
  --shadow-sm:0 8px 24px -12px rgba(0,0,0,.6);
  --glow:0 0 0 1px rgba(255,255,255,.04), 0 12px 40px -10px color-mix(in srgb, var(--accent) 55%, transparent);

  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.45s;

  --font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui:'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme:dark;
}

/* ---------- base ---------- */
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-ui); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh; overflow-x:hidden; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
}
body::before{ /* grano fino, casi imperceptible: quita el "plano" del negro */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; line-height:1.05; letter-spacing:-.01em; text-wrap:balance; font-variant-numeric:lining-nums; }
.ticket-table, .stat-num, .amount, .eta-ring .mins, .pin-key, .qr-card .t, .dish-name, .totals .total span:last-child{ font-variant-numeric:lining-nums tabular-nums; }
p{ margin:0; }
a{ color:var(--gold); text-decoration:none; }
a:hover{ color:var(--ink); }
button{ font-family:inherit; color:inherit; }
img{ max-width:100%; display:block; }
input,select,textarea{
  font-family:inherit; font-size:14px; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:11px 13px; width:100%;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
input::placeholder, textarea::placeholder{ color:var(--muted-2); }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--surface-3); }
select{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23A3947F' stroke-width='1.8' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
select option{ background:var(--surface-2); color:var(--ink); }
input[type=color]{ padding:4px; height:46px; cursor:pointer; }
button:focus-visible, [tabindex]:focus-visible, a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:100px; border:2px solid var(--bg); }
::selection{ background:var(--accent); color:var(--on-accent); }

#app{ position:relative; z-index:1; min-height:100vh; }
.view{ animation:view-in var(--dur) var(--ease-out) both; }
@keyframes view-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ---------- utilidades ---------- */
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.stack{ display:flex; flex-direction:column; }
.between{ justify-content:space-between; }
.muted{ color:var(--muted); }
.tabular{ font-variant-numeric:tabular-nums; }
.eyebrow{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--gold); }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); }
.card-glass{ background:rgba(33,27,23,.62); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border:1px solid var(--line); border-radius:var(--r-md); }
.hr{ height:1px; background:var(--line); margin:12px 0; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.field .hint{ font-size:12px; color:var(--muted-2); }
.grow{ flex:1; min-width:0; }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:0 18px; min-height:46px; border-radius:100px; border:1px solid var(--line-strong);
  background:var(--surface-2); color:var(--ink); font-weight:600; font-size:14px; cursor:pointer;
  white-space:nowrap; text-decoration:none; position:relative; overflow:hidden;
  transition:transform .18s var(--ease), background .2s, border-color .2s, box-shadow .25s, color .2s;
}
.btn:hover{ background:var(--surface-3); border-color:var(--muted-2); transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-primary{ background:linear-gradient(135deg, var(--accent-strong), var(--accent)); border-color:transparent; color:var(--on-accent); box-shadow:var(--glow); }
.btn-primary:hover{ background:linear-gradient(135deg, var(--accent-strong), var(--accent)); filter:brightness(1.08); border-color:transparent; }
.btn-gold{ background:var(--gold); color:#2A1A0C; border-color:transparent; }
.btn-gold:hover{ background:#E4B677; border-color:transparent; }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn-ghost:hover{ background:var(--surface-2); border-color:transparent; }
.btn-outline{ background:transparent; }
.btn-danger{ background:var(--danger-bg); color:var(--danger); border-color:transparent; }
.btn-success{ background:var(--success-bg); color:var(--success); border-color:transparent; }
.btn-warning{ background:var(--warning-bg); color:var(--warning); border-color:transparent; }
.btn-info{ background:var(--info-bg); color:var(--info); border-color:transparent; }
.btn-block{ width:100%; }
.btn-sm{ min-height:38px; padding:0 14px; font-size:12.5px; }
.btn-xs{ min-height:32px; padding:0 12px; font-size:12px; }
.btn-icon{ width:44px; padding:0; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none !important; filter:none !important; }
.btn .ripple{ position:absolute; border-radius:100px; transform:scale(0); background:rgba(255,255,255,.35); animation:ripple .6s ease-out forwards; pointer-events:none; }
@keyframes ripple{ to{ transform:scale(3); opacity:0; } }

.pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:100px; font-size:11.5px; font-weight:600; letter-spacing:.02em; background:var(--surface-2); color:var(--ink-2); }
.pill-dot{ width:6px; height:6px; border-radius:100px; background:currentColor; }
.pill.live .pill-dot{ animation:pulse-dot 1.8s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ box-shadow:0 0 0 0 currentColor; opacity:1; } 60%{ box-shadow:0 0 0 6px transparent; opacity:.7; } }
.pill-success{ background:var(--success-bg); color:var(--success); }
.pill-warning{ background:var(--warning-bg); color:var(--warning); }
.pill-info{ background:var(--info-bg); color:var(--info); }
.pill-danger{ background:var(--danger-bg); color:var(--danger); }
.pill-gold{ background:var(--gold-soft); color:var(--gold); }

.toggle{ position:relative; width:42px; height:24px; border-radius:100px; background:var(--surface-3); border:1px solid var(--line-strong); cursor:pointer; flex-shrink:0; transition:background .2s, border-color .2s; padding:0; }
.toggle::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:100px; background:var(--muted); transition:transform .22s var(--ease), background .2s; }
.toggle.on{ background:var(--success); border-color:var(--success); }
.toggle.on::after{ transform:translateX(18px); background:#fff; }

/* ---------- toast ---------- */
#toast-root{ position:fixed; left:50%; bottom:104px; transform:translateX(-50%); z-index:1000; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:max-content; max-width:92vw; }
.toast{ background:var(--ink); color:#1A1310; padding:12px 20px; border-radius:100px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow); display:flex; gap:8px; align-items:center; animation:toast-in .3s var(--ease-out); }
.toast.leaving{ animation:toast-out .25s var(--ease) forwards; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(10px) scale(.96); } }
@keyframes toast-out{ to{ opacity:0; transform:translateY(6px) scale(.98); } }

/* ---------- modal / bottom sheet ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(8,6,5,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:flex-end; justify-content:center; z-index:900; animation:fade-in .25s ease-out; }
.modal-overlay.leaving{ animation:fade-out .2s ease-in forwards; }
@keyframes fade-in{ from{ opacity:0; } }
@keyframes fade-out{ to{ opacity:0; } }
.modal{
  background:var(--surface); width:100%; max-width:520px; max-height:90vh; overflow-y:auto; overscroll-behavior:contain;
  border-radius:24px 24px 0 0; padding:14px 22px 26px; border:1px solid var(--line); border-bottom:none;
  box-shadow:var(--shadow); animation:sheet-up .38s var(--ease-out);
}
.modal-overlay.leaving .modal{ animation:sheet-down .22s var(--ease) forwards; }
@keyframes sheet-up{ from{ transform:translateY(40px); opacity:0; } }
@keyframes sheet-down{ to{ transform:translateY(30px); opacity:0; } }
.sheet-handle{ width:40px; height:4px; border-radius:100px; background:var(--line-strong); margin:0 auto 14px; }
@media (min-width:720px){
  .modal-overlay{ align-items:center; padding:20px; }
  .modal{ border-radius:24px; border-bottom:1px solid var(--line); padding:24px 26px 28px; }
  .sheet-handle{ display:none; }
}
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.modal-head h3{ font-size:24px; }
.modal-close{ width:36px; height:36px; border-radius:100px; border:1px solid var(--line-strong); background:var(--surface-2); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .2s, transform .2s; }
.modal-close:hover{ background:var(--surface-3); transform:rotate(90deg); }

/* ---------- skeleton ---------- */
.skeleton{ position:relative; overflow:hidden; background:var(--surface-2); border-radius:10px; }
.skeleton::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); transform:translateX(-100%); animation:shimmer 1.4s infinite; }
@keyframes shimmer{ to{ transform:translateX(100%); } }
.loading-shell{ min-height:60vh; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; color:var(--muted); }
.spinner{ width:34px; height:34px; border-radius:100px; border:2px solid var(--line-strong); border-top-color:var(--gold); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =====================================================================
   PLATO ILUSTRADO — visual animado para platillos sin foto
   ===================================================================== */
.plate{
  --p1:#C1502E; --p2:#E8B98A; --p3:#F2ECDC; --p4:#6B7A4F;
  position:relative; width:100%; aspect-ratio:1; border-radius:100px; flex-shrink:0;
  background:radial-gradient(circle at 38% 32%, #FBF6EC 0%, #EDE3D1 48%, #D6C9B2 82%, #BDB09A 100%);
  box-shadow:inset 0 -6px 14px rgba(80,60,40,.18), inset 0 2px 4px rgba(255,255,255,.7), 0 18px 34px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.05);
  overflow:hidden; isolation:isolate;
}
.plate::before{ /* aro del plato */
  content:""; position:absolute; inset:9%; border-radius:100px; border:1px solid rgba(120,95,70,.18);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.35), 0 0 0 3px rgba(255,255,255,.25);
}
.plate-food{
  position:absolute; inset:16%; border-radius:100px;
  background:
    radial-gradient(ellipse 62% 48% at 44% 46%, var(--p1) 0%, var(--p1) 38%, transparent 72%),
    radial-gradient(ellipse 44% 38% at 64% 38%, var(--p2) 0%, transparent 70%),
    radial-gradient(ellipse 36% 30% at 36% 64%, var(--p3) 0%, transparent 68%),
    radial-gradient(ellipse 30% 26% at 66% 66%, var(--p4) 0%, transparent 66%),
    radial-gradient(ellipse 18% 14% at 52% 50%, var(--p2) 0%, transparent 60%);
  filter:saturate(1.08) drop-shadow(0 4px 6px rgba(60,40,20,.35));
  animation:food-drift 9s ease-in-out infinite alternate;
  transform-origin:50% 50%;
}
@keyframes food-drift{ from{ transform:rotate(-4deg) scale(1); } to{ transform:rotate(4deg) scale(1.04); } }
.plate-shine{ position:absolute; inset:0; border-radius:100px; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%); background-size:220% 100%; animation:shine 7s ease-in-out infinite; }
@keyframes shine{ 0%{ background-position:120% 0; } 50%{ background-position:-20% 0; } 100%{ background-position:-20% 0; } }
.plate-steam{ position:absolute; left:0; right:0; top:-8%; height:60%; pointer-events:none; opacity:.55; }
.plate-steam path{ fill:none; stroke:rgba(255,255,255,.75); stroke-width:1.4; stroke-linecap:round; animation:steam 3.6s ease-in-out infinite; transform-origin:50% 100%; }
.plate-steam path:nth-child(2){ animation-delay:-1.2s; }
.plate-steam path:nth-child(3){ animation-delay:-2.4s; }
@keyframes steam{ 0%{ opacity:0; transform:translateY(8px) scaleX(1); } 30%{ opacity:.9; } 100%{ opacity:0; transform:translateY(-14px) scaleX(1.15); } }
.plate.hot .plate-steam{ display:block; }
.plate .plate-steam{ display:none; }
.plate-photo{ position:absolute; inset:0; border-radius:100px; object-fit:cover; width:100%; height:100%; animation:kenburns-slow 22s ease-in-out infinite alternate; }
@keyframes kenburns-slow{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.12) translate(-2%, 2%); } }

/* =====================================================================
   INICIO — hero cinematográfico + selección de mesa + accesos
   ===================================================================== */
.home{ min-height:100vh; display:flex; flex-direction:column; }
.hero{ position:relative; min-height:58vh; display:flex; flex-direction:column; justify-content:flex-end; padding:88px 24px 42px; overflow:hidden; isolation:isolate; }
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img{ width:100%; height:100%; object-fit:cover; animation:kenburns 32s ease-in-out infinite alternate; transform-origin:60% 40%; filter:saturate(.9) contrast(1.05); }
@keyframes kenburns{ from{ transform:scale(1.02) translate(0,0); } to{ transform:scale(1.18) translate(-3%, -2%); } }
.hero-veil{ position:absolute; inset:0; z-index:-1; background:
  linear-gradient(180deg, rgba(18,15,13,.55) 0%, rgba(18,15,13,.15) 35%, rgba(18,15,13,.72) 75%, var(--bg) 100%),
  radial-gradient(60% 50% at 20% 100%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); }
.hero-embers{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.ember{ position:absolute; bottom:-10px; width:4px; height:4px; border-radius:100px; background:var(--gold); opacity:0; filter:blur(.4px); box-shadow:0 0 10px 2px color-mix(in srgb, var(--gold) 60%, transparent); animation:ember-rise var(--t,9s) linear infinite; animation-delay:var(--d,0s); left:var(--x,50%); }
@keyframes ember-rise{ 0%{ transform:translate(0,0) scale(.6); opacity:0; } 10%{ opacity:.9; } 60%{ opacity:.6; } 100%{ transform:translate(var(--dx,20px), -70vh) scale(1.2); opacity:0; } }
.hero-top{ position:absolute; top:0; left:0; right:0; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; }
.brand-mark{ font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:.28em; text-transform:uppercase; }
.hero h1{ font-size:clamp(40px, 9vw, 64px); font-weight:500; margin-top:10px; line-height:.98; }
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero .lead{ margin-top:14px; font-size:15px; color:var(--ink-2); max-width:34ch; line-height:1.55; }
.hero-content > *{ animation:rise .8s var(--ease-out) both; }
.hero-content > :nth-child(2){ animation-delay:.08s; } .hero-content > :nth-child(3){ animation-delay:.16s; } .hero-content > :nth-child(4){ animation-delay:.24s; }
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } }

.home-body{ padding:8px 20px 40px; max-width:560px; width:100%; margin:0 auto; }
.section-title{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:26px 0 14px; }
.section-title h2{ font-size:26px; }
.tables-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.table-tile{
  aspect-ratio:1; border-radius:var(--r-md); border:1px solid var(--line); background:linear-gradient(160deg, var(--surface-2), var(--surface));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .25s var(--ease), border-color .25s, box-shadow .25s; animation:tile-in .6s var(--ease-out) both; animation-delay:calc(var(--i, 0) * 45ms);
}
@keyframes tile-in{ from{ opacity:0; transform:translateY(12px) scale(.96); } }
.table-tile::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 100%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%); opacity:0; transition:opacity .3s; }
.table-tile:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:var(--shadow-sm); }
.table-tile:hover::after{ opacity:1; }
.table-tile .num{ font-family:var(--font-display); font-size:32px; font-weight:600; line-height:1; position:relative; font-variant-numeric:lining-nums; }
.table-tile .lbl{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); position:relative; }
.roles{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.role-card{ padding:16px 8px 14px; display:flex; flex-direction:column; align-items:center; gap:9px; cursor:pointer; text-align:center; transition:transform .25s var(--ease), border-color .25s, background .25s; animation:tile-in .6s var(--ease-out) both; animation-delay:calc(var(--i,0) * 60ms + .2s); }
.role-card:hover{ transform:translateY(-3px); border-color:var(--line-strong); background:var(--surface-2); }
.role-icon{ width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--gold-soft); color:var(--gold); transition:transform .3s var(--ease); }
.role-card:hover .role-icon{ transform:rotate(-8deg) scale(1.06); }
.role-card span{ font-size:12px; font-weight:600; letter-spacing:.02em; }
.brand-foot{ text-align:center; font-size:11.5px; color:var(--muted-2); padding:22px 0 8px; }
.brand-foot a{ color:var(--muted); font-weight:600; }
.brand-foot a:hover{ color:var(--gold); }
@media (max-width:380px){ .tables-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){
  .hero{ min-height:64vh; padding:100px 48px 56px; }
  .home-body{ max-width:760px; }
  .tables-grid{ grid-template-columns:repeat(6,1fr); }
}

/* =====================================================================
   MENÚ DEL CLIENTE
   ===================================================================== */
.menu-stage{ min-height:100vh; }
@media (min-width:720px){
  .menu-stage{ position:relative; display:flex; justify-content:center; padding:32px 20px 60px; }
  .menu-stage::before{ content:""; position:fixed; inset:0; z-index:-1; background:url("assets/img/barra.webp") center/cover; filter:blur(24px) brightness(.28) saturate(.8); transform:scale(1.1); }
  .menu-shell{ border:1px solid var(--line); border-radius:34px; box-shadow:var(--shadow); overflow:hidden; min-height:auto; max-height:calc(100vh - 92px); overflow-y:auto; overscroll-behavior:contain; }
}
.menu-shell{ position:relative; max-width:520px; width:100%; margin:0 auto; min-height:100vh; background:var(--bg); display:flex; flex-direction:column; }
.menu-cover{ position:relative; height:190px; overflow:hidden; }
.menu-cover img{ width:100%; height:100%; object-fit:cover; animation:kenburns 26s ease-in-out infinite alternate; }
.menu-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,15,13,.3) 0%, rgba(18,15,13,.45) 35%, rgba(18,15,13,.92) 72%, var(--bg) 100%); }
.menu-cover-text{ position:absolute; left:20px; right:20px; bottom:16px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.menu-cover-text{ z-index:1; }
.menu-cover-text h1{ font-size:32px; font-weight:500; text-shadow:0 2px 18px rgba(0,0,0,.6); }
.menu-cover-text .table-pill{ background:var(--gold); color:#2A1A0C; padding:7px 14px; border-radius:100px; font-size:12px; font-weight:700; letter-spacing:.04em; white-space:nowrap; box-shadow:0 8px 20px -8px var(--gold); }
.menu-header{ position:sticky; top:0; z-index:8; padding:10px 20px 12px; background:rgba(18,15,13,.82); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid transparent; transition:border-color .3s; }
.menu-header.stuck{ border-bottom-color:var(--line); }
.menu-header-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.menu-header-row .title{ font-family:var(--font-display); font-size:19px; font-weight:600; opacity:0; transform:translateY(4px); transition:opacity .3s, transform .3s; }
.menu-header.stuck .menu-header-row .title{ opacity:1; transform:none; }
.cart-fab{ position:relative; width:44px; height:44px; border-radius:100px; background:var(--surface-2); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s var(--ease), background .2s; }
.cart-fab:hover{ background:var(--surface-3); }
.cart-fab.bump{ animation:bump .45s var(--ease-out); }
@keyframes bump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.22) rotate(-6deg); } 100%{ transform:scale(1); } }
.cart-badge{ position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; border-radius:100px; background:var(--accent); color:var(--on-accent); font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--bg); }
.cat-tabs{ position:relative; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-top:10px; padding-bottom:2px; }
.cat-tabs::-webkit-scrollbar{ display:none; }
.cat-tab{ position:relative; z-index:1; padding:9px 16px; border-radius:100px; border:1px solid transparent; background:transparent; color:var(--muted); font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer; flex-shrink:0; transition:color .25s; }
.cat-tab.active{ color:var(--on-accent); }
.cat-indicator{ position:absolute; top:0; left:0; height:100%; border-radius:100px; background:linear-gradient(135deg, var(--accent-strong), var(--accent)); box-shadow:var(--glow); transition:transform .4s var(--ease-out), width .4s var(--ease-out); z-index:0; }
.filters{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-top:8px; }
.filters::-webkit-scrollbar{ display:none; }
.filter-chip{ padding:6px 11px; border-radius:100px; border:1px solid var(--line-strong); background:transparent; color:var(--muted); font-size:11.5px; font-weight:600; white-space:nowrap; cursor:pointer; flex-shrink:0; transition:all .2s; }
.filter-chip.active{ background:var(--gold-soft); border-color:var(--gold); color:var(--gold); }

.menu-list{ flex:1; padding:14px 20px 130px; display:flex; flex-direction:column; gap:8px; }
.menu-section-head{ margin:14px 0 6px; display:flex; align-items:baseline; gap:10px; }
.menu-section-head h2{ font-size:26px; font-weight:500; }
.menu-section-head .count{ font-size:11px; letter-spacing:.14em; color:var(--muted-2); text-transform:uppercase; }
.dish{
  display:grid; grid-template-columns:86px 1fr; gap:16px; align-items:center; padding:12px; border-radius:var(--r-md);
  border:1px solid transparent; background:transparent; cursor:pointer; text-align:left; width:100%;
  transition:background .25s, border-color .25s, transform .25s var(--ease);
  animation:dish-in .5s var(--ease-out) both; animation-delay:calc(var(--i,0) * 40ms);
}
@keyframes dish-in{ from{ opacity:0; transform:translateY(10px); } }
.dish:hover{ background:var(--surface); border-color:var(--line); }
.dish:hover .plate{ transform:scale(1.05) rotate(-4deg); }
.dish .plate{ transition:transform .4s var(--ease); }
.dish-name{ font-family:var(--font-display); font-size:19px; font-weight:600; line-height:1.1; }
.dish-desc{ font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dish-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:8px; }
.dish-price{ font-weight:700; font-size:14.5px; color:var(--gold); }
.dish-price small{ font-weight:500; color:var(--muted); font-size:11px; margin-right:1px; }
.dish-tags{ display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
.dish-tag{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:100px; background:var(--surface-2); color:var(--muted); }
.dish-tag.veg{ background:var(--success-bg); color:var(--success); }
.add-btn{ width:34px; height:34px; border-radius:100px; background:var(--surface-2); border:1px solid var(--line-strong); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:all .2s var(--ease); }
.dish:hover .add-btn{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); transform:rotate(90deg); }
.add-btn:active{ transform:scale(.88) !important; }

.float-bar{
  position:fixed; left:16px; right:16px; bottom:18px; max-width:488px; margin:0 auto; z-index:20;
  background:var(--ink); color:#1A1310; border-radius:100px; padding:12px 12px 12px 22px; display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 20px 50px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); cursor:pointer; border:none; font-family:inherit;
  animation:float-in .45s var(--ease-out);
}
@media (min-width:720px){ .float-bar{ position:sticky; bottom:18px; margin:0 16px; left:auto; right:auto; } }
@keyframes float-in{ from{ transform:translateY(80px); opacity:0; } }
.float-bar .cta{ background:var(--accent); color:var(--on-accent); padding:10px 16px; border-radius:100px; font-weight:700; font-size:13px; display:flex; align-items:center; gap:6px; }
.fly{ position:fixed; z-index:999; pointer-events:none; border-radius:100px; }

/* detalle de platillo */
.item-hero{ display:flex; gap:18px; align-items:center; margin-bottom:12px; }
.item-hero .plate{ width:112px; }
.item-hero .plate .plate-steam{ display:block; }
.qty-control{ display:flex; align-items:center; gap:14px; background:var(--surface-2); border-radius:100px; padding:5px; border:1px solid var(--line); }
.qty-btn{ width:36px; height:36px; border-radius:100px; border:none; background:transparent; color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; cursor:pointer; transition:background .2s, transform .15s; }
.qty-btn:hover{ background:var(--surface-3); }
.qty-btn:active{ transform:scale(.9); }
.qty-btn.primary{ background:var(--accent); color:var(--on-accent); }
.qty-val{ font-weight:700; min-width:18px; text-align:center; font-size:15px; }
.qty-val.tick{ animation:qty-tick .25s var(--ease-out); }
@keyframes qty-tick{ 0%{ transform:translateY(-6px); opacity:0; } }
.cart-line{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); animation:dish-in .3s var(--ease-out); }
.cart-line:last-child{ border-bottom:none; }
.cart-line .name{ font-weight:600; font-size:14px; }
.cart-line .note{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.totals{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line-strong); display:flex; flex-direction:column; gap:7px; }
.totals .line{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--muted); }
.totals .total{ display:flex; justify-content:space-between; font-size:20px; font-weight:700; margin-top:4px; color:var(--ink); }
.totals .total span:last-child{ font-family:var(--font-display); font-size:28px; color:var(--gold); }

/* =====================================================================
   ESTADO DEL PEDIDO
   ===================================================================== */
.order-shell{ padding:18px 20px 60px; }
.order-hero{ text-align:center; padding:16px 0 24px; }
.check-ring{ width:86px; height:86px; margin:0 auto 18px; border-radius:100px; display:flex; align-items:center; justify-content:center; background:var(--success-bg); color:var(--success); position:relative; }
.check-ring::before{ content:""; position:absolute; inset:-6px; border-radius:100px; border:1px solid var(--success); opacity:.35; animation:ring-pulse 2.4s ease-out infinite; }
@keyframes ring-pulse{ 0%{ transform:scale(.9); opacity:.5; } 100%{ transform:scale(1.35); opacity:0; } }
.check-ring svg path{ stroke-dasharray:40; stroke-dashoffset:40; animation:draw .7s var(--ease-out) .25s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.order-hero h1{ font-size:30px; font-weight:500; }
.order-hero h1 em{ color:var(--gold); font-style:italic; }
.eta{ margin:22px auto 0; display:flex; align-items:center; gap:16px; padding:14px 16px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); text-align:left; }
.eta-ring{ width:58px; height:58px; flex-shrink:0; position:relative; }
.eta-ring svg{ transform:rotate(-90deg); }
.eta-ring circle{ fill:none; stroke-width:4; }
.eta-ring .track{ stroke:var(--surface-3); }
.eta-ring .bar{ stroke:var(--gold); stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.eta-ring .mins{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; font-family:var(--font-display); font-size:18px; }
.eta .label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.eta .value{ font-size:15px; font-weight:600; margin-top:2px; }
.track{ display:grid; grid-template-columns:repeat(4, 1fr); position:relative; margin:26px 0 22px; }
.track-line{ position:absolute; left:12.5%; right:12.5%; top:15px; height:2px; background:var(--surface-3); }
.track-fill{ position:absolute; left:0; top:0; height:100%; background:linear-gradient(90deg, var(--success), var(--gold)); width:0; transition:width .9s var(--ease-out); }
.step{ display:flex; flex-direction:column; align-items:center; gap:9px; font-size:11px; color:var(--muted-2); text-align:center; position:relative; }
.step .dot{ width:32px; height:32px; border-radius:100px; background:var(--surface-2); border:2px solid var(--surface-3); display:flex; align-items:center; justify-content:center; transition:all .4s var(--ease); }
.step.done .dot{ background:var(--success); border-color:var(--success); color:#10190B; animation:pop .45s var(--ease-out); }
.step.active .dot{ background:var(--surface); border-color:var(--gold); box-shadow:0 0 0 6px var(--gold-soft); }
.step.active .dot::after{ content:""; width:10px; height:10px; border-radius:100px; background:var(--gold); animation:pulse-dot 1.6s ease-in-out infinite; }
.step.done, .step.active{ color:var(--ink-2); font-weight:600; }
@keyframes pop{ 0%{ transform:scale(.6); } 60%{ transform:scale(1.15); } 100%{ transform:scale(1); } }
.receipt{ padding:18px; }
.receipt .line{ display:flex; justify-content:space-between; font-size:13.5px; padding:5px 0; }
.receipt .line.head{ color:var(--muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.receipt .total{ display:flex; justify-content:space-between; font-weight:700; font-size:16px; padding-top:10px; margin-top:6px; border-top:1px dashed var(--line-strong); }
.order-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.cancelled{ padding:18px; text-align:center; border-radius:var(--r-md); background:var(--danger-bg); color:var(--danger); font-weight:600; margin-bottom:16px; }

/* =====================================================================
   PIN
   ===================================================================== */
.pin-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; overflow:hidden; }
.pin-shell::before{ content:""; position:absolute; inset:0; background:url("assets/img/cocina-autor.webp") center/cover; filter:brightness(.22) saturate(.6) blur(3px); transform:scale(1.06); z-index:-1; }
.pin-card{ width:100%; max-width:350px; text-align:center; padding:34px 28px 28px; }
.pin-card h2{ font-size:26px; }
.pin-dots{ display:flex; gap:14px; justify-content:center; margin:22px 0 18px; }
.pin-dot{ width:13px; height:13px; border-radius:100px; border:1.5px solid var(--line-strong); transition:all .2s var(--ease); }
.pin-dot.filled{ background:var(--gold); border-color:var(--gold); transform:scale(1.15); box-shadow:0 0 12px var(--gold-soft); }
.pin-dots.shake{ animation:shake .4s var(--ease); }
@keyframes shake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-8px); } 40%{ transform:translateX(8px); } 60%{ transform:translateX(-5px); } 80%{ transform:translateX(5px); } }
.pin-keys{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pin-key{ height:58px; border-radius:16px; border:1px solid var(--line); background:var(--surface-2); font-size:20px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, transform .12s; font-family:var(--font-display); }
.pin-key:hover{ background:var(--surface-3); }
.pin-key:active{ transform:scale(.94); background:var(--gold-soft); }

/* =====================================================================
   PANTALLAS DE STAFF (cocina · meseros · caja)
   ===================================================================== */
.staff{ min-height:100vh; padding:22px 24px 40px; max-width:1500px; margin:0 auto; }
.staff-top{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.staff-top h1{ font-size:34px; font-weight:500; }
.staff-top h1 em{ color:var(--gold); font-style:italic; }
.stat{ padding:10px 18px; min-width:104px; text-align:left; border-radius:var(--r-sm); }
.stat-num{ font-family:var(--font-display); font-size:26px; font-weight:600; line-height:1; }
.stat-label{ font-size:10.5px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; margin-top:4px; }
.stat-num.tick{ animation:qty-tick .3s var(--ease-out); }
.board{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:start; }
@media (max-width:980px){ .board{ grid-template-columns:1fr; } }
.col-head{ display:flex; align-items:center; gap:10px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin-bottom:12px; padding:0 4px; }
.col-head .n{ margin-left:auto; font-family:var(--font-display); font-size:20px; letter-spacing:0; }
.col-dot{ width:8px; height:8px; border-radius:100px; background:currentColor; box-shadow:0 0 12px currentColor; }
.ticket{ padding:14px 14px 12px; margin-bottom:12px; position:relative; overflow:hidden; transition:border-color .3s, transform .3s var(--ease); }
.ticket.new{ animation:ticket-in .55s var(--ease-out); }
@keyframes ticket-in{ from{ opacity:0; transform:translateX(-14px) scale(.98); } }
.ticket.leaving{ animation:ticket-out .3s var(--ease) forwards; }
@keyframes ticket-out{ to{ opacity:0; transform:scale(.96); } }
.ticket-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ticket-table{ font-family:var(--font-display); font-size:22px; font-weight:600; }
.ticket-num{ font-size:11px; color:var(--muted); letter-spacing:.1em; }
.ticket-timer{ font-variant-numeric:tabular-nums; font-weight:700; font-size:13px; display:flex; align-items:center; gap:5px; padding:4px 10px; border-radius:100px; background:var(--surface-2); }
.ticket-bar{ height:3px; border-radius:100px; background:var(--surface-3); margin:10px 0 12px; overflow:hidden; }
.ticket-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--success), var(--warning) 70%, var(--danger)); transition:width 1s linear; }
.ticket-items{ font-size:13px; line-height:1.55; }
.ticket-items li{ list-style:none; display:flex; gap:8px; padding:3px 0; border-bottom:1px dashed var(--line); }
.ticket-items li:last-child{ border-bottom:none; }
.ticket-items ul{ margin:0; padding:0; }
.ticket-items .q{ font-weight:700; color:var(--gold); min-width:26px; font-family:var(--font-display); font-size:16px; }
.ticket-items .note{ font-size:11.5px; color:var(--warning); display:block; }
.ticket-actions{ display:flex; gap:8px; margin-top:12px; }
.ticket.urgent{ border-color:var(--danger); animation:urgent 1.8s ease-in-out infinite; }
@keyframes urgent{ 0%,100%{ box-shadow:0 0 0 0 rgba(224,130,121,0); } 50%{ box-shadow:0 0 0 5px rgba(224,130,121,.18); } }
.urgent-tag{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--danger); background:var(--danger-bg); padding:3px 8px; border-radius:100px; display:inline-flex; align-items:center; gap:4px; }
.empty{ text-align:center; padding:34px 16px; color:var(--muted); border:1px dashed var(--line-strong); border-radius:var(--r-md); font-size:13px; }
.empty .ico{ width:46px; height:46px; border-radius:100px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; color:var(--muted); }
.calls{ margin-top:22px; padding:18px; }
.call{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); animation:dish-in .35s var(--ease-out); }
.call:last-child{ border-bottom:none; }
.call .ico{ width:38px; height:38px; border-radius:100px; display:flex; align-items:center; justify-content:center; background:var(--warning-bg); color:var(--warning); flex-shrink:0; }
.call .ico.bell{ animation:bell 2.2s ease-in-out infinite; transform-origin:50% 0; }
@keyframes bell{ 0%,60%,100%{ transform:rotate(0); } 65%{ transform:rotate(12deg); } 70%{ transform:rotate(-10deg); } 75%{ transform:rotate(8deg); } 80%{ transform:rotate(-6deg); } 85%{ transform:rotate(0); } }
.grid-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px; }
.bill-card{ padding:18px; display:flex; flex-direction:column; gap:8px; transition:transform .25s var(--ease), border-color .25s; animation:tile-in .5s var(--ease-out) both; }
.bill-card:hover{ transform:translateY(-2px); border-color:var(--line-strong); }
.bill-card .amount{ font-family:var(--font-display); font-size:34px; color:var(--gold); }
.tip-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{ padding:8px 14px; border-radius:100px; border:1px solid var(--line-strong); background:transparent; color:var(--muted); font-weight:600; font-size:12.5px; cursor:pointer; transition:all .2s; }
.chip.active{ background:var(--gold-soft); border-color:var(--gold); color:var(--gold); }

/* =====================================================================
   ADMIN
   ===================================================================== */
.admin{ min-height:100vh; display:flex; }
.admin-side{ width:236px; flex-shrink:0; background:var(--bg-2); border-right:1px solid var(--line); padding:24px 14px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.admin-brand{ padding:0 10px 22px; }
.admin-brand .name{ font-family:var(--font-display); font-weight:600; font-size:22px; line-height:1.1; }
.admin-brand .sub{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.nav-item{ display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:12px; font-size:13.5px; color:var(--muted); font-weight:500; cursor:pointer; border:none; background:none; text-align:left; width:100%; transition:background .2s, color .2s, transform .2s; position:relative; }
.nav-item:hover{ background:var(--surface); color:var(--ink); }
.nav-item.active{ background:var(--gold-soft); color:var(--gold); font-weight:700; }
.nav-item.active::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:3px; background:var(--gold); }
.admin-main{ flex:1; padding:30px 34px 60px; min-width:0; }
.admin-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
.admin-head h2{ font-size:32px; font-weight:500; }
.admin-head .sub{ color:var(--muted); font-size:13px; margin-top:4px; }
table.data{ width:100%; border-collapse:collapse; }
table.data th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); padding:12px 14px; border-bottom:1px solid var(--line); font-weight:600; }
table.data td{ padding:12px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
table.data tr:last-child td{ border-bottom:none; }
table.data tr:hover td{ background:rgba(255,255,255,.02); }
.table-scroll{ overflow-x:auto; }
.cats-strip{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.cat-pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 8px 8px 14px; border-radius:100px; background:var(--surface); border:1px solid var(--line); font-size:13px; font-weight:600; }
.cat-pill button{ width:26px; height:26px; border-radius:100px; border:none; background:var(--surface-2); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.cat-pill button:hover{ background:var(--surface-3); color:var(--ink); }
.qr-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:14px; }
.qr-card{ padding:18px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; animation:tile-in .5s var(--ease-out) both; animation-delay:calc(var(--i,0) * 40ms); }
.qr-card .t{ font-family:var(--font-display); font-size:22px; font-weight:600; }
.qr-box{ background:#fff; padding:12px; border-radius:14px; display:inline-flex; box-shadow:0 10px 30px -14px rgba(0,0,0,.8); }
.qr-card .url{ font-size:10px; color:var(--muted-2); word-break:break-all; }
.qr-card.inactive{ opacity:.55; }
.stats-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:22px; }
.bar-row{ margin-bottom:12px; }
.bar-row .meta{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:5px; }
.bar-row .bar{ height:6px; border-radius:100px; background:var(--surface-2); overflow:hidden; }
.bar-row .bar i{ display:block; height:100%; border-radius:100px; background:linear-gradient(90deg, var(--accent), var(--gold)); width:0; animation:grow 1s var(--ease-out) forwards; }
@keyframes grow{ from{ width:0 !important; } }
.settings-grid{ display:grid; grid-template-columns:1fr; gap:22px; max-width:960px; }
@media (min-width:1100px){ .settings-grid{ grid-template-columns:1fr 1fr; } }
.settings-card{ padding:22px; display:flex; flex-direction:column; gap:14px; }
.settings-card h3{ font-size:20px; margin-bottom:4px; }
.admin-menu-btn{ display:none; }
@media (max-width:860px){
  .admin{ flex-direction:column; }
  .admin-side, body.is-demo .admin-side{ width:100%; height:auto; position:static; flex-direction:row; flex-wrap:wrap; align-items:center; padding:12px 14px; gap:4px; border-right:none; border-bottom:1px solid var(--line); }
  .admin-side .grow, .admin-side .brand-foot{ display:none; }
  .admin-side #staff-logout{ margin-left:auto; }
  .admin-brand{ width:100%; padding-bottom:10px; }
  .nav-item{ width:auto; padding:9px 12px; }
  .nav-item.active::before{ display:none; }
  .admin-main{ padding:22px 18px 60px; }
}

/* ---------- setup / error ---------- */
.setup{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:30px; text-align:center; }
.setup .box{ max-width:460px; padding:34px 30px; }
.setup h2{ font-size:26px; margin-bottom:10px; }
.setup p{ color:var(--muted); line-height:1.65; font-size:13.5px; }
.setup code{ background:var(--surface-2); padding:2px 6px; border-radius:6px; font-size:12px; color:var(--gold); }
.demo-banner{ position:fixed; top:0; left:0; right:0; height:22px; z-index:50; display:flex; align-items:center; justify-content:center; font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; background:#2E2414; color:var(--warning); border-bottom:1px solid rgba(224,172,90,.25); pointer-events:none; }
body.is-demo{ padding-top:22px; }
body.is-demo .menu-header{ top:22px; }
@media (min-width:861px){ body.is-demo .admin-side{ top:22px; height:calc(100vh - 22px); } }

/* ---------- impresión ---------- */
#print-area{ display:none; }
@media print{
  body{ background:#fff; color:#111; }
  body::before, #app, #toast-root, #modal-root, .demo-banner{ display:none !important; }
  #print-area{ display:block !important; }
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .hero-media img, .menu-cover img, .plate-photo{ animation:none !important; }
}