/* Tela da cozinha: escura, letra grande e botões grandes, para ler de longe e tocar com pressa. Nunca rola a página. */
:root {
  --bg: #0f0e0d;
  --panel: #171513;
  --card: #201d1a;
  --card-2: #29251f;
  --line: #312c26;
  --text: #f4efe8;
  --muted: #9d948a;
  --orange: #ff8a00;
  --red: #f0484c;
  --green: #34c27a;
  --blue: #4aa3ff;
  --yellow: #ffc53d;
  --f: 'Inter', system-ui, sans-serif;
  --f-display: 'Alfa Slab One', serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--f); background: var(--bg); color: var(--text); font-size: 15px; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; overscroll-behavior: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
.ic { width: 18px; height: 18px; flex: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--card-2); border-radius: 12px; padding: 10px 14px; font-weight: 700; }
.btn-orange { background: var(--orange); border-color: var(--orange); color: #1b0f00; }
.btn-green { background: var(--green); border-color: var(--green); color: #04210f; }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-sm { padding: 7px 11px; font-size: 13px; border-radius: 10px; }

.toast { position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translate(-50%, 20px); opacity: 0; width: max-content; max-width: calc(100vw - 32px); background: var(--text); color: var(--bg); padding: 11px 16px; border-radius: 12px; font-weight: 700; font-size: 14px; pointer-events: none; transition: .2s; display: flex; gap: 8px; align-items: center; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .7); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast { top: calc(env(safe-area-inset-top) + 64px); bottom: auto; } /* embaixo cobriria o botão Pronto */

/* Entrada */
.gate { min-height: 100dvh; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 16px; }
.g-logo { width: 72px; height: 72px; margin-bottom: 14px; object-fit: contain; }
.gate h1 { font-family: var(--f-display); font-weight: 400; font-size: 30px; margin: 0 0 8px; }
.gate h1 span { color: var(--orange); }
.gate h2 { margin: 6px 0 8px; font-size: 22px; }
.gate p { color: var(--muted); margin: 0 0 22px; line-height: 1.5; }
.g-form { width: 100%; display: grid; gap: 12px; text-align: left; }
.g-form label span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.g-form input { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; font-size: 22px; letter-spacing: .3em; text-align: center; outline: none; }
.g-form input:focus { border-color: var(--orange); }
.g-form .btn { padding: 14px; font-size: 16px; }
.g-demo { margin-top: 14px; color: var(--muted); font-size: 13px; }
.g-demo b { color: var(--text); }

/* Estrutura */
.kd { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.kd-h { display: flex; align-items: center; gap: 10px; padding: 8px 14px; padding-top: calc(8px + env(safe-area-inset-top)); background: var(--panel); border-bottom: 1px solid var(--line); min-width: 0; }
.kd-logo { width: 34px; height: 34px; object-fit: contain; flex: none; }
.kd-t { font-family: var(--f-display); font-weight: 400; font-size: 20px; }
.kd-unit { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; min-width: 0; }
.kd-wait { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--yellow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-wait .ic { width: 15px; height: 15px; }
.kd-rush { flex: none; padding: 4px 9px; border-radius: 99px; background: var(--orange); color: #1b0f00; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.kd-sp { flex: 1; }
.kd-clock { font-weight: 800; font-size: 18px; }
.kd-ib { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--muted); }
.kd-ib.off { color: var(--red); opacity: .7; }
.kd-tabs { display: none; }
.kd-main { display: grid; grid-template-columns: minmax(0, 1fr) 230px; min-height: 0; }
.kd-todo { min-width: 0; min-height: 0; }

/* Pedidos: da esquerda (mais antigo) para a direita */
.kd-rail { height: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 310px; gap: 12px; padding: 12px 14px; overflow-x: auto; scrollbar-width: none; }
.kd-rail::-webkit-scrollbar { display: none; }
.kt { min-height: 0; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.kt-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px 2px; }
.kt-h > b { font-family: var(--f-display); font-weight: 400; font-size: 22px; }
.kt-ch { font-size: 12.5px; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: var(--card-2); white-space: nowrap; }
.kt-ch.delivery { color: var(--blue); background: rgba(74, 163, 255, .14); }
.kt-ch.retirada { color: var(--orange); background: rgba(255, 138, 0, .14); }
.kt-ch.mesa { color: var(--green); background: rgba(52, 194, 122, .14); }
.kt-t { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 17px; white-space: nowrap; }
.kt-t .ic { width: 15px; height: 15px; }
.kt-who { padding: 0 12px 8px; color: var(--muted); font-size: 12.5px; border-bottom: 1px solid var(--line); }
.kt-items { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 6px; }
.kt-l { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; text-align: left; background: none; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); padding: 9px 6px; }
.kt-l:last-child { border-bottom: 0; }
.kt-l > b { font-size: 19px; color: var(--orange); }
.kt-l strong { font-size: 17px; line-height: 1.25; }
.kt-l small { font-size: 11px; color: var(--green); font-weight: 700; }
.kt-l i, .kt-l em { display: block; font-style: normal; margin-top: 2px; font-size: 14.5px; }
.kt-l i { color: var(--muted); }
.kt-l em { color: var(--red); font-weight: 800; }
.kt-l.done { opacity: .38; }
.kt-l.done strong { text-decoration: line-through; }
.kt-l u { display: block; text-decoration: none; margin-top: 2px; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.kt-go2 { margin: 8px 12px 0; padding: 5px 8px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.kt-f { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 8px; }
.kt-go { padding: 15px; font-size: 18px; }
.kt-go .ic { width: 22px; height: 22px; }
.kt-full { padding: 15px 12px; font-size: 13.5px; white-space: nowrap; }

/* Janelas: pedido completo e confirmação */
.kd-ov { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .72); }
.kd-box { width: min(560px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.kd-sheet .kd-ib { margin-left: 4px; width: 36px; height: 36px; }
@media (max-width: 400px) { .kd-sheet .kd-ib { display: none; } } /* no celular pequeno, Fechar fica embaixo */
.kd-sheet .kt-l strong { font-size: 19px; }
.kd-sheet .kt-l i, .kd-sheet .kt-l em { font-size: 16px; }
.kd-ok { width: min(440px, 100%); padding: 18px; gap: 8px; }
.kd-ok h2 { margin: 0; font-size: 22px; }
.kd-ok-s { margin: 0; color: var(--muted); font-size: 14px; }
.kd-ok ul { list-style: none; margin: 4px 0; padding: 8px 10px; background: var(--card); border-radius: 10px; max-height: 34dvh; overflow-y: auto; display: grid; gap: 4px; }
.kd-ok li b { color: var(--orange); }
.kd-ok-w { margin: 0; font-size: 13.5px; color: var(--yellow); }
.kd-ok-f { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.kd-ok-f .btn { padding: 16px 14px; font-size: 16px; }
.kd-ok-f .btn:disabled { opacity: .5; }

/* Prontos */
.kd-side { min-height: 0; overflow-y: auto; border-left: 1px solid var(--line); background: var(--panel); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.kd-side h2 { margin: 0 0 2px; font-size: 15px; display: flex; justify-content: space-between; }
.kd-side h2 b { color: var(--green); }
.kd-side p { margin: 0; color: var(--muted); font-size: 13px; }
.kr { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--card); border-radius: 10px; padding: 8px 10px; }
.kr span { display: grid; min-width: 0; }
.kr b { font-size: 15px; }
.kr small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); text-align: center; padding: 20px; }
.kd-empty .ic { width: 44px; height: 44px; color: var(--green); }
.kd-empty b { color: var(--text); font-size: 22px; }

/* Celular: um pedido por vez, deslizando, e os prontos em outra aba */
@media (max-width: 760px) {
  .kd { grid-template-rows: auto auto minmax(0, 1fr); }
  .kd-h { padding-left: 12px; padding-right: 12px; gap: 8px; flex-wrap: wrap; }
  .kd-wait { order: 9; flex: 1 1 100%; }
  .kd-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 12px 0; }
  .kd-tabs button { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px; font-weight: 700; color: var(--muted); }
  .kd-tabs button.on { background: var(--orange); border-color: var(--orange); color: #1b0f00; }
  .kd-main { grid-template-columns: minmax(0, 1fr); }
  .kd-rail { grid-auto-columns: calc(100vw - 44px); padding: 10px 12px; scroll-snap-type: x mandatory; scroll-padding: 12px; }
  .kt { scroll-snap-align: start; }
  .kd[data-tab="fazer"] .kd-side, .kd[data-tab="prontos"] .kd-todo { display: none; }
  .kd-side { border-left: 0; background: none; }
  .kd-side h2 { display: none; }
}

/* Urgência por cor (5/11/2026): faixa no topo de cada pedido com o nível, o tempo, quanto falta e uma barra até o prazo.
   Delivery tem o menor prazo, retirada +20% e mesa +40%; a fila vem do mais urgente. */
.kt { --u: var(--green); --u-ink: #04210f; border-color: color-mix(in srgb, var(--u) 45%, var(--line)); }
.u-ok { --u: var(--green); --u-ink: #04210f; }
.u-warn { --u: var(--yellow); --u-ink: #2a1d00; }
.u-hot { --u: var(--orange); --u-ink: #1b0f00; }
.u-late { --u: var(--red); --u-ink: #fff; }
.kt.u-late { background: color-mix(in srgb, var(--red) 7%, var(--panel)); animation: kt-late 1.6s ease-in-out infinite; }
@keyframes kt-late { 50% { border-color: color-mix(in srgb, var(--red) 90%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 35%, transparent); } }
.kt-u { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; padding: 9px 12px 12px; background: var(--u); color: var(--u-ink); }
.kt-lv { font-weight: 900; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.kt-u .kt-t { margin: 0; grid-row: span 2; font-size: 24px; font-weight: 900; color: inherit; }
.kt-u .kt-t .ic { width: 18px; height: 18px; }
.kt-left { font-size: 12.5px; font-weight: 700; opacity: .8; }
.kt-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0, 0, 0, .22); }
.kt-bar em { display: block; height: 100%; background: var(--u-ink); opacity: .55; transition: width .6s ease; }
.kt-ch { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 4px 10px; }
.kt-ch .ic { width: 15px; height: 15px; }
.kt-ch.delivery { text-transform: uppercase; letter-spacing: .04em; }
.kd-sheet .kt-u { border-radius: 0; }
/* resumo de cores no topo */
.kd-leg { display: flex; gap: 6px; min-width: 0; overflow: hidden; }
.kd-leg span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--u) 16%, transparent); color: var(--u); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.kd-leg i { width: 8px; height: 8px; border-radius: 50%; background: var(--u); }
@media (max-width: 760px) { .kd-leg { order: 10; flex: 1 1 100%; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .kt.u-late { animation: none; border-color: var(--red); } }

/* Item a item (5/11/2026): do mais rápido ao mais demorado; tocar marca pronto para o garçom e o cliente */
.kt-l .kt-pt { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--muted); }
.kt-l.done { opacity: 1; background: rgba(52, 194, 122, .1); border-radius: 8px; }
.kt-l.done strong { text-decoration: line-through; color: var(--muted); }
.kt-l.done > b { color: var(--green); }
.kt-l.done > b .ic { width: 22px; height: 22px; }
.kt-l.done .kt-pt { color: var(--green); }
.kt-tj { margin: 8px 12px 0; padding: 6px 9px; border-radius: 8px; display: flex; align-items: center; gap: 6px; background: rgba(74, 163, 255, .16); color: var(--blue); font-size: 12.5px; font-weight: 800; }
.kt-tj .ic { width: 15px; height: 15px; }
.kt-tj.sep { background: none; padding: 0 0 0 2px; color: var(--muted); font-weight: 600; }
.kt-go.all { animation: kt-all 1.2s ease-in-out infinite; }
@keyframes kt-all { 50% { box-shadow: 0 0 0 4px rgba(52, 194, 122, .35); } }
@media (prefers-reduced-motion: reduce) { .kt-go.all { animation: none; } }

/* Último item: fecha com Pronto (5/11/2026) · pedido a mais na mesma mesa */
.kt-l.last { cursor: default; }
.kt-l.last .kt-pt { color: var(--orange); }
.kt-go.nudge { animation: kt-nudge .5s ease 2; }
@keyframes kt-nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.kt-seq { padding: 3px 9px; border-radius: 99px; background: var(--yellow); color: #2a1d00; font-size: 12px; font-weight: 900; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .kt-go.nudge { animation: none; outline: 3px solid var(--yellow); } }