/* Tela de Pedidos: visual claro, destaque dourado do AiOS, estrutura do quadro do Saipos. */
:root{
  color-scheme:light;
  --bg:#f3f4f6;--panel:#ffffff;--panel2:#f5f6f8;--panel3:#e9ecf0;--line:#d3d9e0;--lineSoft:#e2e6eb;
  --text:#1c2228;--muted:#5d6874;--amber:#c99a2e;--amber2:#e0b44c;--amberText:#7a5a0f;--amberSoft:rgba(224,180,76,.16);
  --green:#1e7f47;--red:#c0392b;--info:#2563c9;--warn:#8a5d00;
  --preparo:#d9483b;--espera:#d99a1e;--em_rota:#2e9a5a;--entregue:#2f6fd1;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}
.spacer{flex:1}
.muted{color:var(--muted)}

.btn{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:10px;padding:9px 14px;font-weight:700;font-size:13px;cursor:pointer;min-height:40px;white-space:nowrap}
.btn:hover{border-color:#aeb7c2}
.btn:disabled{opacity:.5;cursor:default}
.btn.primary{background:var(--amber2);border-color:var(--amber);color:#1c1607}
.btn.primary:hover{background:#e8c264}
.btn.small{padding:6px 11px;min-height:34px;font-size:12px}
.btn.icon{padding:6px 10px;min-width:38px}
.btn.wide{width:100%;min-height:48px;font-size:14px;text-transform:uppercase;letter-spacing:.02em}

.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;background:rgba(255,255,255,.96);box-shadow:0 1px 3px rgba(20,30,40,.06);border-bottom:1px solid var(--lineSoft);backdrop-filter:blur(10px)}
.topbar h1{margin:0;font-size:19px}
.back{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);color:var(--text)}
.back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabs{display:flex;gap:6px}
.tab{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:10px;padding:8px 14px;font-weight:800;font-size:13px;cursor:pointer;min-height:40px}
.tab.active{color:var(--amberText);background:var(--amberSoft);border-color:var(--amber)}
.tabCount{display:inline-block;min-width:22px;padding:1px 6px;margin-left:4px;border-radius:999px;background:var(--panel2);color:var(--text);font-size:11px;text-align:center}
.search{flex:1;min-width:220px;max-width:460px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-height:40px}
.search.wide{max-width:none;width:100%;flex:none}
.sync{color:var(--muted);font-size:12px}
.user{color:var(--muted);font-size:13px;font-weight:700}

.banner{margin:12px 18px 0;padding:10px 14px;border-radius:10px;background:#fdecea;border:1px solid #f1b3ac;color:#8e2418;font-weight:600}

.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,1fr);gap:12px;padding:14px 18px;overflow-x:auto;min-height:calc(100vh - 110px);align-items:start}
.boardHint{margin:0 18px 18px;color:var(--muted);font-size:12px}
.column{background:var(--panel3);border:1px solid var(--lineSoft);border-radius:14px;min-height:300px;display:flex;flex-direction:column}
.columnHead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--lineSoft)}
.columnHead h2{margin:0;font-size:16px}
.count{min-width:28px;height:28px;border-radius:999px;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff}
.stage-preparo .count{background:var(--preparo)}.stage-espera .count{background:var(--espera)}.stage-em_rota .count{background:var(--em_rota)}.stage-entregue .count{background:var(--entregue)}
.columnNote{margin:8px 14px 0;color:var(--muted);font-size:12px}
.cards{display:grid;gap:10px;padding:10px}
.empty{color:var(--muted);font-size:13px;text-align:center;padding:18px 8px;margin:0}

.orderCard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 1px 2px rgba(20,30,40,.06);display:grid;gap:5px;font-size:13px}
.orderCard.late{border-color:#f1b3ac;box-shadow:inset 3px 0 0 var(--red)}
.cardTop,.cardSub{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.cardTitle{font-size:14px}
.cardTime{color:var(--muted);font-size:12px;white-space:nowrap}
.cardSub{color:var(--muted);font-size:12px}
.cardLine{margin:0;line-height:1.4}
.cardFoot{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.chip{display:inline-block;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid transparent}
.chip.ok{color:var(--green);background:#e6f5ec;border-color:#b5dfc5}
.chip.wait{color:var(--muted);background:var(--panel2);border-color:var(--line)}
.chip.warn{color:var(--warn);background:#fdf3dc;border-color:#ecd08a}
.chip.bad{color:var(--red);background:#fdecea;border-color:#f1b3ac}

/* Tela do pedido */
.overlay{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;flex-direction:column}
.orderHead{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--lineSoft);background:var(--panel3)}
.orderHead h2{margin:0;font-size:17px}
.stageChip{padding:4px 10px;border-radius:8px;font-size:12px;font-weight:800;color:#fff;background:var(--muted)}
.stageChip.stage-preparo{background:var(--preparo)}.stageChip.stage-espera{background:var(--espera)}.stageChip.stage-em_rota{background:var(--em_rota)}.stageChip.stage-entregue{background:var(--entregue)}
.orderBody{flex:1;display:grid;grid-template-columns:minmax(320px,38%) 1fr;min-height:0}
.viewMode .orderBody{grid-template-columns:1fr}
.viewMode .orderLeft{display:none}
.orderLeft{display:flex;flex-direction:column;gap:10px;padding:14px;border-right:1px solid var(--lineSoft);overflow:auto;min-height:0}
.orderRight{padding:14px;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:12px}
.customer{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.isBalcao .deliveryOnly{display:none!important}
label{display:grid;gap:4px;font-size:12px;color:var(--muted);font-weight:700}
input,select,textarea{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 10px;min-height:38px;width:100%}
input.invalid{border-color:var(--red)}
textarea{resize:vertical}
.internalNote textarea{background:#fde9bf;border-color:#efcf86}
.items{width:100%;border-collapse:collapse;font-size:13px}
.items th{text-align:left;color:var(--muted);font-weight:700;padding:6px 4px;border-bottom:1px solid var(--line)}
.items td{padding:8px 4px;border-bottom:1px solid var(--lineSoft);vertical-align:top}
.items .num{text-align:right;white-space:nowrap}
.items small{display:block;color:var(--muted)}
.qty{white-space:nowrap}
.qty span{display:inline-block;min-width:22px;text-align:center;font-weight:800}
.step{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);cursor:pointer}
.itemNote{margin-top:4px;min-height:32px;padding:5px 8px;font-size:12px}
.leftFoot{margin-top:auto;display:grid;gap:8px;position:sticky;bottom:0;background:var(--bg);padding-top:8px}
.summary{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}
.summary b{color:var(--text);font-size:15px}
.categories{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.category{flex:0 0 auto;border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:10px 14px;font-weight:800;font-size:12px;text-transform:uppercase;cursor:pointer;min-height:44px}
.category.active{border-color:var(--amber);color:var(--amberText);background:var(--amberSoft)}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.product{display:grid;gap:8px;align-content:space-between;text-align:left;min-height:96px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);cursor:pointer}
.product:hover{border-color:var(--amber)}
.product:active{transform:scale(.98)}
.productName{font-weight:800;font-size:14px;line-height:1.25}
.productPrice{color:var(--amberText);font-weight:800}
.payGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:8px;align-content:start}
.card h3{margin:4px 0 2px;font-size:15px}
.card p{margin:0}
.row{display:grid;grid-template-columns:1fr minmax(110px,160px);align-items:center;gap:8px;font-size:13px}
.row b{text-align:right}
.row.total{border-top:1px solid var(--line);padding-top:8px;font-size:15px}
.row.total b{font-size:20px;color:var(--amberText)}
.money{text-align:right}
.payment{display:grid;grid-template-columns:1.2fr 1fr 1fr auto auto;gap:8px;align-items:center}
.change{color:var(--green);font-weight:700;font-size:13px;white-space:nowrap}
.payStatus{font-size:13px;color:var(--muted)}
.payStatus.ok{color:var(--green)}
.payStatus.bad{color:var(--red)}
.noteBox{background:#fdf1d4;border:1px solid #efcf86;border-radius:9px;padding:8px 10px;white-space:pre-wrap}
.stageButtons{display:flex;gap:8px;flex-wrap:wrap}
.history{margin:0;padding-left:18px;color:var(--muted);font-size:13px;display:grid;gap:4px}
.formError{padding:0 16px;color:var(--red);font-weight:700;min-height:0}
.formError:not(:empty){padding:10px 16px;border-top:1px solid #f1b3ac;background:#fdecea}

.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-weight:700;transition:.2s;z-index:40;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Mapa de mesas */
.board.tableMode{display:block;overflow:visible}
.tableTools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;color:var(--muted);font-size:13px}
.tableTools input{width:90px}
.tableLegend{display:flex;gap:14px;margin-left:auto}
.tableLegend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--panel);border:1px solid var(--line)}
.tableLegend .busy::before{background:var(--amber2);border-color:var(--amber)}
.tableGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tableCard{display:grid;gap:4px;align-content:start;text-align:left;min-height:118px;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--panel);cursor:pointer;box-shadow:0 1px 2px rgba(20,30,40,.06)}
.tableCard:hover{border-color:var(--amber)}
.tableCard .tableName{font-size:18px;font-weight:800}
.tableCard .tableState{font-size:12px;font-weight:800;color:var(--green)}
.tableCard .tableLine{font-size:12px;color:var(--muted)}
.tableCard.busy{background:#fdf3dc;border-color:var(--amber)}
.tableCard.busy .tableState{color:var(--amberText)}
.tableCard.busy .tableTotal{font-size:16px;font-weight:800;color:var(--amberText)}
.paneTitle{margin:6px 0 0;font-size:15px}
.roundCard{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:10px 12px;display:grid;gap:6px;font-size:13px}
.roundHead{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.roundHead b{font-size:13px}
.roundItems{margin:0;padding-left:18px;display:grid;gap:2px}
.roundItems small{color:var(--muted)}
label.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);font-weight:600}
label.check input{width:18px;height:18px;min-height:0}

@media (max-width:900px){
  .topbar{padding:10px 12px;gap:8px}
  .search{order:5;max-width:none;flex-basis:100%}
  .user,.sync{display:none}
  .board{padding:12px;grid-auto-columns:minmax(280px,86vw);scroll-snap-type:x mandatory}
  .column{scroll-snap-align:start}
  .orderBody{grid-template-columns:minmax(0,1fr);overflow:auto}
  .search.wide{order:0}
  .orderHead h2{white-space:nowrap}
  .orderLeft{border-right:0;border-bottom:1px solid var(--lineSoft);overflow:visible}
  .orderRight{overflow:visible}
  .leftFoot{position:static}
  .payGrid{grid-template-columns:1fr}
  .customer{grid-template-columns:1fr}
  .payment{grid-template-columns:1fr 1fr;}
  .tableGrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .tableLegend{margin-left:0}
}