/* Entradas de todos os apps (caixa, área do dono, garçom, cozinha e motoboy): o mesmo visual,
   com as cores da marca para as entradas (painel no cliente.js → --lk-bg, --lk-accent e --lk-glow, postas pelo core.js).
   Animações curtas e só na chegada de cada tela (nada que repita a cada toque além do aperto do botão). */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); }
/* Dentro das entradas, as cores do app viram as da marca: tudo o que já usa --orange, --bg e --panel acompanha */
.lock, .gate {
  --bg: var(--lk-bg, #0f0e0d);
  --orange: var(--lk-accent, #ff8a00);
  --orange-2: color-mix(in oklab, var(--lk-accent, #ff8a00), #fff 18%);
  --panel: color-mix(in oklab, var(--lk-bg, #0f0e0d), #fff 5%);
  --card: color-mix(in oklab, var(--lk-bg, #0f0e0d), #fff 9%);
  --card-2: color-mix(in oklab, var(--lk-bg, #0f0e0d), #fff 12%);
  --line: color-mix(in oklab, var(--lk-bg, #0f0e0d), #fff 15%);
  --dim: color-mix(in oklab, var(--lk-bg, #0f0e0d), #fff 58%); /* rodapés e ícones: 4,5:1 sobre o fundo (38% dava 2:1) */
  background:
    radial-gradient(60% 45% at 50% -8%, color-mix(in oklab, var(--lk-accent, #ff8a00) 22%, transparent), transparent 70%),
    radial-gradient(45% 40% at 0% 100%, color-mix(in oklab, var(--lk-glow, #ff8a00) 14%, transparent), transparent 70%),
    radial-gradient(35% 35% at 100% 80%, color-mix(in oklab, var(--lk-glow, #ff8a00) 8%, transparent), transparent 70%),
    var(--bg);
}
.lock .b-orange, .gate .btn-orange { color: var(--lk-ink, #160b00); }
.lock .b, .gate .btn { transition: transform 160ms var(--ease-out), background-color .15s, border-color .15s; }
.lock .b:active, .gate .btn:active { transform: scale(.97); }

body.locked { overflow: hidden; }
.lock { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; align-content: safe center; justify-content: safe center; gap: 56px; padding: 24px; overflow-y: auto; overscroll-behavior: contain; transition: opacity 200ms var(--ease-out); }
.lock.out { opacity: 0; pointer-events: none; }
.lock.out .lock-card { transform: translateY(-6px) scale(.98); transition: transform 200ms var(--ease-out); }
.lock-side { display: none; }
.lock-card { width: min(420px, 100%); background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-radius: 24px; padding: 28px;
  display: grid; gap: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 40px 80px -40px rgba(0, 0, 0, .85); backdrop-filter: blur(8px); }
.lock-card.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.lock-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.lock-brand img { width: 42px; height: 42px; border-radius: 12px; object-fit: contain; }
.lock-brand b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 20px; text-transform: uppercase; line-height: 1; }
.lock-brand small { color: var(--muted); font-size: 12px; }
.lock-step { display: grid; gap: 14px; }
.lock-step h2 { margin: 0; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.lock-step .hint { margin: 0; }
.lock-h { display: grid; gap: 4px; }
.lock-actions { display: grid; gap: 10px; }
.lock-demo { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--yellow); background: rgba(255, 197, 61, .08); border: 1px dashed rgba(255, 197, 61, .35); border-radius: 10px; padding: 8px 10px; }
.lock-demo .ic { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.lock-back { justify-self: center; border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 13.5px; padding: 6px 4px; }
.lock-back:hover { color: var(--text); }
.lock-err { margin: 0; min-height: 0; display: flex; gap: 8px; align-items: center; color: var(--red); font-size: 13px; font-weight: 600; }
.lock-err:not(:empty) { padding: 9px 11px; border-radius: 10px; background: color-mix(in srgb, var(--red) 10%, transparent); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); }
.lock-err .ic { width: 16px; height: 16px; flex: none; }
/* Lado da marca (computador) */
@media (min-width: 900px) {
  .lock { grid-template-columns: minmax(0, 380px) 420px; justify-content: center; }
  .lock-side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .lock-card .lock-brand { display: none; }
}
.lock-logo { width: 84px; height: 84px; border-radius: 22px; object-fit: contain; margin-bottom: 8px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); }
.lock-name { font-family: var(--f-display); font-weight: 400; font-size: 44px; line-height: .95; text-transform: uppercase; letter-spacing: .01em; }
.lock-place { display: inline-flex; padding: 5px 11px; border-radius: 99px; background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); font-size: 12.5px; font-weight: 700; }
.lock-clock { margin: 22px 0 6px; font-size: 64px; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--text); }
.lock-trust { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.lock-trust li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.lock-trust .ic { width: 18px; height: 18px; flex: none; color: var(--orange); }
/* Campos com ícone e senha com olho */
.lk-fld > span:first-child { font-size: 12.5px; }
.lk-in { position: relative; display: block; }
.lk-in > .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--dim); pointer-events: none; transition: color .15s; }
.lk-in:focus-within > .ic { color: var(--orange); }
.lk-fld .lk-in input { height: 48px; padding: 0 14px 0 40px; border-radius: 12px; font-size: 15px; }
.lk-fld .lk-in input[type=password] { letter-spacing: .12em; }
.lk-fld .lk-in input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 22%, transparent); }
.lk-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--dim); }
.lk-eye .ic { width: 18px; height: 18px; }
.lk-eye:hover, .lk-eye.on { color: var(--text); background: var(--line); }
.lk-in:has(.lk-eye) input { padding-right: 48px; }
.lk-seg { padding: 4px; border-radius: 12px; }
.lk-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 8px; border-radius: 9px; font-size: 13.5px; white-space: nowrap; }
.lk-seg button .ic { width: 16px; height: 16px; }
/* PIN: bolinhas + teclado */
.lk-pin { display: grid; gap: 14px; }
.lk-dots { position: relative; display: flex; justify-content: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); cursor: text; transition: border-color .15s, box-shadow .15s; }
.lk-dots:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 22%, transparent); }
.lk-dots input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; font-size: 16px; cursor: text; }
.lk-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--dim); transition: background-color .15s, border-color .15s, transform .15s; }
.lk-dots i.opt { border-style: dashed; opacity: .55; }
.lk-dots i.on { background: var(--orange); border-color: var(--orange); border-style: solid; opacity: 1; transform: scale(1.08); }
.lk-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lk-keys button { height: 54px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums;
  display: grid; place-items: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; transition: background-color .12s, transform .08s; }
.lk-keys button:active { background: var(--line); transform: scale(.96); }
.lk-keys [data-k=c] { font-size: 13px; font-weight: 600; color: var(--muted); }
.lk-keys [data-k=b] .ic { width: 22px; height: 22px; color: var(--muted); }
/* Com mouse e teclado (computador), o PIN se digita: o teclado na tela é para toque */
@media (hover: hover) and (pointer: fine) { .lk-keys { display: none; } }
@media (hover: hover) { .lk-keys button:hover { background: color-mix(in srgb, var(--line) 70%, var(--card)); } }
/* Código de 6 números em casinhas */
.lk-otp { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.lk-otp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; font-size: 16px; z-index: 1; }
.lk-otp i { height: 56px; display: grid; place-items: center; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font: 700 24px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; font-style: normal; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.lk-otp i.cur { border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 22%, transparent); }
.lk-otp i.cur:empty::after { content: ''; width: 2px; height: 24px; background: var(--orange); animation: lkBlink 1s steps(1) infinite; }
@keyframes lkBlink { 50% { opacity: 0; } }
/* Ícone de cada estado e passos da 2ª etapa */
.lk-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); }
.lk-ico .ic { width: 26px; height: 26px; }
.lk-ico.bad { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.lk-ico.wait { animation: lkPulse 1.6s ease-in-out infinite; }
@keyframes lkPulse { 50% { opacity: .55; transform: scale(.94); } }
.lock-steps { display: flex; gap: 6px; }
.lock-steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--line); }
.lock-steps i.on { background: var(--orange); }
/* Celular: tudo numa tela, sem rolar */
@media (max-width: 520px) {
  .lock { align-content: start; padding: 12px; }
  .lock-card { padding: 18px 16px; border-radius: 20px; gap: 12px; }
  .lock-brand { padding-bottom: 12px; }
  .lock-brand img { width: 36px; height: 36px; }
  .lock-step { gap: 11px; }
  .lock-step h2 { font-size: 20px; }
  .lock-h .hint { display: none; }
  .lk-fld .lk-in input { font-size: 16px; height: 46px; }
  .lk-dots { padding: 12px; }
  .lk-pin { gap: 10px; }
  .lk-keys { gap: 6px; }
  .lk-keys button { height: 46px; font-size: 20px; border-radius: 12px; }
  .lock-demo { padding: 7px 10px; font-size: 12px; }
  .lk-otp { gap: 6px; }
  .lk-otp i { height: 50px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .lk-ico.wait, .lk-otp i.cur:empty::after { animation: none; } .lock-card.shake { animation: none; } }
/* Fase 2: 2ª etapa e códigos de reserva */
.lock-qr { justify-self: center; width: 180px; height: 180px; background: #fff; border-radius: 14px; padding: 8px; }
.lock-key { display: block; margin-top: 6px; padding: 8px 10px; background: var(--card); border-radius: 10px; font-size: 13px; letter-spacing: .08em; word-break: break-all; user-select: all; }
.lock-codes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lock-codes code { display: block; text-align: center; padding: 7px 4px; background: var(--card); border: 1px solid var(--line); border-radius: 9px; font-size: 14px; letter-spacing: .06em; user-select: all; }
.lock-check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.lock-check input { width: 18px; height: 18px; accent-color: var(--orange); }
.lock-foot { margin: 0; text-align: center; color: var(--dim); font-size: 12px; line-height: 1.45; text-wrap: balance; }
.lock-foot .ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; }

/* ---------- Chegada: o cartão sobe e o conteúdo entra em cascata ---------- */
@keyframes lkIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes lkUp { from { opacity: 0; transform: translateY(8px); } }
.lock-card { animation: lkIn 420ms var(--ease-out) both; }
.lock-side > * { animation: lkUp 480ms var(--ease-out) both; }
.lock-side > :nth-child(2) { animation-delay: 50ms; } .lock-side > :nth-child(3) { animation-delay: 90ms; }
.lock-side > :nth-child(4) { animation-delay: 130ms; } .lock-side > :nth-child(5) { animation-delay: 180ms; }
/* cada passo novo (PIN → 2ª etapa → códigos) entra do mesmo jeito, sem o cartão inteiro piscar */
.lock-step.in > * { animation: lkUp 320ms var(--ease-out) both; }
.lock-step.in > :nth-child(2) { animation-delay: 30ms; } .lock-step.in > :nth-child(3) { animation-delay: 60ms; }
.lock-step.in > :nth-child(4) { animation-delay: 90ms; } .lock-step.in > :nth-child(5) { animation-delay: 120ms; }
.lock-step.in > :nth-child(n+6) { animation-delay: 150ms; }
.lock-err:not(:empty) { animation: lkUp 200ms var(--ease-out); }
/* bolinha do PIN: um pulinho quando entra um número */
@keyframes lkDot { 40% { transform: scale(1.35); } }
.lk-dots i.on { animation: lkDot 220ms var(--ease-out); }
/* brilho de fundo bem lento, só no computador (no celular gasta bateria) */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .lock::before { content: ''; position: fixed; inset: -20%; pointer-events: none; z-index: -1;
    background: radial-gradient(30% 30% at 30% 40%, color-mix(in oklab, var(--lk-accent, #ff8a00) 10%, transparent), transparent 70%);
    animation: lkDrift 18s ease-in-out infinite alternate; }
  .lock { isolation: isolate; }
}
@keyframes lkDrift { to { transform: translate(18%, 12%); } }

/* ---------- Entradas do garçom, da cozinha e do motoboy (.gate) ---------- */
.gate { max-width: none; width: 100%; margin: 0; padding-inline: max(20px, calc(50% - 200px)); }
.gate > * { animation: lkUp 420ms var(--ease-out) both; }
.gate > :nth-child(2) { animation-delay: 40ms; } .gate > :nth-child(3) { animation-delay: 80ms; }
.gate > :nth-child(4) { animation-delay: 120ms; } .gate > :nth-child(n+5) { animation-delay: 160ms; }
.gate .g-logo { width: 76px; height: 76px; border-radius: 22px; object-fit: contain; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9); }
.gate h1 { font-size: 32px; letter-spacing: .01em; }
.gate h1 span { display: block; margin-top: 6px; font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gate p { max-width: 32ch; }
.gate .g-form { padding: 20px; border-radius: 22px; background: color-mix(in oklab, var(--panel) 92%, transparent); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 30px 60px -36px rgba(0, 0, 0, .9); }
.gate .g-form input { height: 50px; padding: 0 14px; border-radius: 12px; font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.gate .g-form input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in oklab, var(--orange) 22%, transparent); }
.gate .g-form input:not(.lk-dots input) { letter-spacing: normal; text-align: left; }
.gate .lk-dots input { height: 100%; padding: 0; }
.gate .g-form .btn-orange { height: 52px; font-size: 16px; margin-top: 4px; }
.gate .g-demo { display: block; text-align: center; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; color: var(--yellow, #ffc53d); background: rgba(255, 197, 61, .08); border: 1px dashed rgba(255, 197, 61, .35); }
.gate .g-demo b { color: inherit; }
.gate .g-foot { font-size: 12.5px; max-width: 34ch; line-height: 1.45; }
.gate .g-ic { width: 56px; height: 56px; border-radius: 18px; background: color-mix(in oklab, var(--orange) 14%, transparent); margin-bottom: 8px; }
.gate .btn-ghost { border-color: var(--line); color: var(--muted); }
.gate .lk-pin { margin-top: 2px; }
.gate .lk-dots { background: var(--card); }
@media (max-width: 520px) {
  .gate { padding-block: 20px; justify-content: flex-start; }
  .gate .g-logo { width: 60px; height: 60px; margin-bottom: 10px; }
  .gate h1 { font-size: 26px; margin-bottom: 6px; }
  .gate p { margin-bottom: 14px; font-size: 14px; }
  .gate .g-form { padding: 16px; gap: 10px; }
  .gate .g-form input { height: 46px; }
  .gate .g-demo { margin-top: 12px; font-size: 12px; }
  .gate .g-foot { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .lock-card, .lock-side > *, .lock-step.in > *, .gate > *, .lk-dots i.on, .lock-err:not(:empty) { animation: none; }
  .lock.out .lock-card { transform: none; }
}
.gate .g-lb { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.gate .g-form.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Garçom: habilitar o celular com o QR do caixa; a demonstração ainda pode pedir aprovação sem QR */
.gate [data-habilitar] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.gate [data-habilitar] .ic { width: 20px; height: 20px; }
.gate .g-alt { margin-top: 16px; width: 100%; max-width: 340px; font-size: 13px; color: var(--muted, #aaa); }
.gate .g-alt summary { cursor: pointer; padding: 6px 0; }
.gate .g-alt .g-form { margin-top: 8px; }