/* ===== Gestão Baldini ===== */
:root {
  --red: #c8281e; --red-dark: #8e1710; --wine: #5a0f0a; --wine-deep: #2b0705;
  --yellow: #ffb81c; --yellow-soft: #ffd25e; --cream: #fff3df; --text: #2b1a14;
  --bg: #1c0604; --panel: #2e0c08; --panel-2: #3d120c; --line: #57201a; --ink: #fbe9dc; --muted: #c9a594;
  --ok: #3fbf6b; --warn: #ffb81c; --bad: #ff5a4e; --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
/* Sem zoom de pinça ou de toque duplo no celular (só rolar) */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.45 Inter, system-ui, sans-serif; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0 0 10px; line-height: 1.2; }
h2 { font-size: 18px; }
h4 { font-size: 14px; margin-top: 14px; color: var(--yellow); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.big { font-size: 22px; font-weight: 800; color: var(--yellow); }
a { color: var(--yellow); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 999px; padding: 12px 20px; font: 700 15px Inter, sans-serif; cursor: pointer; text-decoration: none; }
.btn--sm { padding: 8px 14px; font-size: 13px; }
.btn--yellow { background: var(--yellow); color: var(--wine-deep); }
.btn--yellow:hover { background: var(--yellow-soft); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--yellow); }
.btn--danger { background: transparent; color: var(--bad); border: 1.5px solid var(--bad); }
.btn--block { width: 100%; }
.link { background: none; border: 0; color: var(--yellow); cursor: pointer; font: inherit; padding: 0 4px; }
.icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 17px; cursor: pointer; text-decoration: none; }
.icon-btn.is-off { opacity: .4; }

.field { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.field input, .field select, .field textarea, .search, .inline-form input {
  width: 100%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 10px 12px; font: 15px Inter, sans-serif;
}
.field textarea { resize: vertical; }
.check { display: flex; gap: 8px; align-items: center; margin: 6px 0 12px; }
.error { color: var(--bad); font-weight: 600; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; align-items: end; }
.grid4 { grid-template-columns: repeat(4, 1fr); }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); font-size: 12px; font-weight: 700; }
.tag--ok { background: rgba(63, 191, 107, .18); color: var(--ok); }
.tag--live { background: rgba(255, 184, 28, .18); color: var(--yellow); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at top, var(--wine), var(--bg)); }
.login__box { width: min(360px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 28px; text-align: center; display: grid; gap: 6px; }
.login__box img { border-radius: 50%; margin: 0 auto; }
.login__box h1 { font-family: Anton, sans-serif; font-weight: 400; font-size: 30px; letter-spacing: .5px; margin: 6px 0 0; }
.login__box .field { text-align: left; }
.login__box p { margin: 4px 0; }
.btn--google { background: #fff; color: #1f1f1f; margin-top: 8px; }
.btn--google:hover { background: #f1f1f1; }
.login__alt { text-align: left; margin-top: 6px; }
.login__alt summary { cursor: pointer; color: var(--muted); font-size: 13px; text-align: center; padding: 6px 0; }
.login__alt[open] summary { margin-bottom: 8px; }
.uid { display: block; padding: 12px; border-radius: 10px; background: var(--bg); border: 1px dashed var(--yellow); color: var(--yellow); font: 600 14px/1.3 ui-monospace, monospace; word-break: break-all; user-select: all; margin: 6px 0 10px; }

/* Topo e abas */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--wine-deep); border-bottom: 1px solid var(--line); }
.top__brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: Anton, sans-serif; font-size: 20px; letter-spacing: .4px; }
.top__brand b { color: var(--yellow); font-weight: 400; }
.top__brand img { border-radius: 50%; }
.top__right { margin-left: auto; display: flex; gap: 8px; }
.pill { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(63, 191, 107, .15); color: var(--ok); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw; }
.pill.is-warn { background: rgba(255, 184, 28, .15); color: var(--yellow); }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; background: var(--wine-deep); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs button { flex: none; border: 0; background: transparent; color: var(--muted); padding: 8px 14px; border-radius: 999px; font: 700 14px Inter, sans-serif; cursor: pointer; }
.tabs button.is-on { background: var(--yellow); color: var(--wine-deep); }
.tabs em { font-style: normal; background: var(--red); color: #fff; border-radius: 999px; padding: 0 7px; margin-left: 4px; font-size: 12px; }
.tabs em:empty { display: none; }
.view { padding: 16px; max-width: 1500px; margin: 0 auto; }

/* Quadro de pedidos */
.board { display: grid; grid-template-columns: repeat(5, minmax(230px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 200px; display: flex; flex-direction: column; gap: 10px; }
.col h3 { font-size: 14px; display: flex; justify-content: space-between; margin: 2px 4px 0; }
.col h3 em { font-style: normal; color: var(--muted); }
.col--montando { border-style: dashed; }
.col--novo { border-color: var(--yellow); }
.ocard { background: var(--panel-2); border-radius: 12px; padding: 10px 12px; cursor: pointer; border: 1px solid transparent; }
.ocard:hover { border-color: var(--yellow); }
.ocard--live { opacity: .85; }
.ocard header { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ocard header b { color: var(--yellow); font-size: 15px; }
.ocard__who { margin: 6px 0 2px; font-weight: 700; }
.ocard__items { margin: 0 0 8px; font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ocard footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ocard__acts { display: flex; gap: 6px; margin-top: 10px; }
.ocard__auto { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--yellow); }
.ocard__acts .btn--yellow { flex: 1; white-space: nowrap; padding-inline: 10px; }
.done { margin-top: 16px; }
.done summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
.done__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }

/* Modal */
.modal { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px); border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: var(--panel); color: var(--ink); }
.modal::backdrop { background: rgba(0, 0, 0, .65); }
.modal__head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.modal__head small { display: block; font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 4px; }
.modal__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.statusbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.statusbar button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 6px 10px; font: 600 12px Inter, sans-serif; cursor: pointer; }
.statusbar button.is-on { background: var(--yellow); color: var(--wine-deep); border-color: var(--yellow); }
.lines { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.lines li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.lines small { grid-column: 1 / -1; color: var(--muted); }
.note { background: var(--panel-2); border-radius: 10px; padding: 8px 12px; }
.total { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 16px; margin: 6px 0 12px; }
.total strong { font-size: 22px; color: var(--yellow); }
.paybox { background: var(--panel-2); border-radius: 12px; padding: 12px; }
.pg { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 12px; padding: 8px 12px; }
.pg legend { font-weight: 700; padding: 0 6px; }
.pg legend small { color: var(--muted); font-weight: 500; }
.po { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; gap: 10px; }
.po.is-on span:first-child { color: var(--yellow); font-weight: 700; }
.qty { display: inline-flex; align-items: center; gap: 10px; }
.qty button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 18px; cursor: pointer; }

/* Lançar pedido */
.pos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
/* Sem isso a fileira de categorias alarga a página no celular */
.pos > *, .split > *, .view { min-width: 0; }
.pos__bar { display: none; }
.pos__cats { display: flex; gap: 6px; overflow-x: auto; margin: 10px 0; }
.pos__cats button { flex: none; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 6px 12px; font: 600 13px Inter, sans-serif; cursor: pointer; }
.pos__cats button.is-on { background: var(--yellow); color: var(--wine-deep); }
.pos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.pitem { display: grid; gap: 4px; text-align: left; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 12px; padding: 8px; cursor: pointer; font: inherit; }
.pitem:hover { border-color: var(--yellow); }
.pitem img, .pitem > span { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: grid; place-items: center; background: var(--panel-2); font-size: 28px; }
.pitem b { font-size: 13px; }
.pitem small { color: var(--yellow); font-weight: 700; }
.pos__cart { position: sticky; top: 120px; }

/* Entregadores */
.map { height: 460px; border-radius: 10px; }
.drow { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.drow small { width: 100%; }

/* Lucro */
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; color: var(--muted); padding: 8px 14px; border-radius: 999px; font: 700 13px Inter, sans-serif; cursor: pointer; }
.seg button.is-on { background: var(--yellow); color: var(--wine-deep); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0 16px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.kpi span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.kpi strong { font-size: 22px; }
.kpi.neg strong { color: #ff9b8f; }
.kpi.pos strong { color: var(--ok); }
/* .pos também é a tela de lançar pedido: o cartão não pode virar grade */
.kpi.pos { display: block; }
.chart { min-height: 220px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 200px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bar i { display: block; width: 100%; max-width: 34px; min-height: 2px; background: var(--yellow); border-radius: 4px 4px 0 0; }
.bar small { font-size: 10px; color: var(--muted); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.table th { color: var(--muted); font-size: 12px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.inline-form input { flex: 1; min-width: 100px; width: auto; }
.costs { max-height: 420px; overflow-y: auto; margin-bottom: 10px; padding-right: 6px; }
.crow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; }
.crow input { width: 90px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 6px 8px; text-align: right; font: 14px Inter, sans-serif; }

/* Bot */
.bot-preview { display: grid; gap: 10px; }
.bot-turn p { margin: 0 0 4px; padding: 8px 12px; border-radius: 12px; max-width: 90%; }
.bot-turn .me { background: var(--red); margin-left: auto; width: fit-content; }
.bot-turn .bot { background: var(--panel-2); width: fit-content; }

/* Configurações e sistema */
.config { max-width: 760px; }
.config h2 { margin-top: 18px; }
.config h2:first-child { margin-top: 0; }
.health { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.health li { padding: 10px 12px; border-radius: 10px; background: var(--panel-2); }
.health li.bad { outline: 1px solid var(--bad); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; z-index: 100; background: var(--cream); color: var(--text); padding: 12px 18px; border-radius: 12px; font-weight: 700; transition: .25s; max-width: calc(100vw - 32px); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast.is-bad { background: var(--bad); color: #fff; }

.print { display: none; }
@media print {
  body > *:not(.print) { display: none !important; }
  .print { display: block; color: #000; background: #fff; font: 13px/1.35 monospace; width: 72mm; }
  .print h1 { font-size: 16px; text-align: center; }
  .print h2 { font-size: 15px; }
}

@media (max-width: 1100px) {
  .pos, .split { grid-template-columns: 1fr; }
  .pos__cart { position: static; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .view { padding: 12px; }
  .board { grid-template-columns: 1fr; }
  .col { min-height: 0; }
  .col--montando { order: 5; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .top__brand span { display: none; }
  .map { height: 320px; }
  .pos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos__cart { scroll-margin-top: 120px; }
  #view-novo { padding-bottom: 90px; }
  /* Barra fixa com o pedido sendo montado */
  .pos__bar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border: 0; border-radius: 14px; padding: 14px 18px; background: var(--yellow); color: var(--wine-deep);
    font: 800 15px Inter, sans-serif; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); cursor: pointer;
  }
  .pos__bar[hidden] { display: none; }
  .toast { bottom: 88px; }

  /* Campos com 16px: abaixo disso o iPhone dá zoom ao tocar e a tela fica ampliada */
  input, select, textarea, .field input, .field select, .field textarea, .search, .inline-form input, .crow input { font-size: 16px; }

  /* Janelas (opções do produto, detalhe do pedido) viram tela cheia, com título e botão fixos */
  .modal {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0;
    border: 0; border-radius: 0; padding: 0 16px; overscroll-behavior: contain;
  }
  .modal__head {
    position: sticky; top: 0; z-index: 2; margin: 0 -16px; padding: 14px 16px 10px;
    background: var(--panel); border-bottom: 1px solid var(--line);
  }
  .modal__head h2 { font-size: 17px; margin: 0; }
  .modal__foot {
    position: sticky; bottom: 0; z-index: 2; margin: 16px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--panel); flex-wrap: nowrap; align-items: center;
  }
  #pickBody .modal__foot .btn { flex: 1; }
  .pg { margin-top: 12px; }
  .po { min-height: 48px; }
  .qty button { width: 40px; height: 40px; }
}

/* Toque rápido no + não vira zoom de "toque duplo" */
button, .btn, a { touch-action: manipulation; }
/* Com uma janela aberta, a página de trás não rola junto */
body:has(dialog[open]) { overflow: hidden; }

/* Prévia da nota fiscal */
.danfe { background: #fff; color: #111; border-radius: 10px; padding: 16px; font: 13px/1.45 ui-monospace, monospace; }
.danfe .table th, .danfe .table td { border-color: #ddd; color: #111; }
.danfe .muted { color: #666; }
.danfe p { margin: 8px 0; }

/* Conectando e atualizar */
.spinner { justify-self: center; width: 34px; height: 34px; margin: 10px auto; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--yellow); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#syncBtn.is-spin { animation: spin .8s linear; }
.tc-err { display: block; color: var(--bad); font-size: 12px; margin-top: 2px; }
.tc-acts .btn + .btn { margin-left: 6px; }

/* Nota fiscal no celular: cada pedido vira um cartão */
@media (max-width: 640px) {
  #view-nf .card { padding: 12px; }
  #nfState { line-height: 1.5; }
  .table--cards, .table--cards tbody { display: block; width: 100%; }
  .table--cards thead { display: none; }
  .table--cards tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
    padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
  }
  .table--cards td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .table--cards td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
  .table--cards .tc-head { grid-column: 1 / -1; font-size: 15px; }
  .table--cards .tc-acts { grid-column: 1 / -1; display: flex; gap: 8px; }
  .table--cards .tc-acts:empty { display: none; }
  .table--cards .tc-acts .btn { flex: 1; margin: 0; }
  /* Prévia da nota (DANFE) cabendo na tela */
  .danfe { padding: 12px; font-size: 12px; overflow-wrap: anywhere; }
  .danfe .table { table-layout: fixed; }
  .danfe .table th:first-child, .danfe .table td:first-child { width: 42%; }
  .danfe .table th:nth-child(2), .danfe .table td:nth-child(2) { width: 12%; }
  .danfe .table th:not(:first-child), .danfe .table td:not(:first-child) { white-space: nowrap; overflow-wrap: normal; font-size: 11.5px; }
  .danfe .table th, .danfe .table td { padding: 6px 4px; }
}

/* ===== Cargos ===== */
.role { display: inline-flex; align-items: center; }
#roleLabel { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--panel-2); white-space: nowrap; }
#roleView { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 5px 10px; font: 700 12px Inter, sans-serif; max-width: 42vw; }
.tag--mesa { background: rgba(255, 184, 28, .18); color: var(--yellow); }
.tag--conta { background: rgba(255, 140, 60, .2); color: #ffb27a; }
.kpi.warn strong { color: var(--yellow); }
button.kpi { text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
button.kpi:hover { border-color: var(--yellow); }

/* Cores das formas de pagamento (validadas para o fundo escuro, inclusive para daltonismo) */
:root { --pay-pix: #3987e5; --pay-credito: #d95926; --pay-debito: #199e70; --pay-dinheiro: #c98500; --pay-online: #d55181; --pay-ifood: #008300; }

/* ===== Mesas e comandas ===== */
.cmd-top { justify-content: space-between; gap: 10px; }
.cmd-sum { font-size: 15px; }
.cmd-sum b { color: var(--yellow); }
.tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 6px; }
.tables--sm { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); margin-top: 12px; }
.tbl { display: grid; gap: 2px; align-content: start; text-align: left; min-height: 120px; padding: 12px; border-radius: var(--radius); border: 2px dashed var(--line); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.tables--sm .tbl { min-height: 90px; }
.tbl:hover { border-color: var(--yellow); }
.tbl small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tbl > b { font-family: Anton, sans-serif; font-weight: 400; font-size: 34px; line-height: 1; }
.tbl strong { font-size: 17px; color: var(--yellow); }
.tbl span { font-size: 12px; }
.tbl__name { font-weight: 700; font-size: 13px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl em { font-style: normal; font-size: 12px; font-weight: 800; margin-top: 4px; }
.tbl em.is-soft { font-weight: 600; color: var(--muted); }
.tbl--ocupada { border: 2px solid var(--ok); background: rgba(63, 191, 107, .08); }
.tbl--pronto { border: 2px solid var(--yellow); background: rgba(255, 184, 28, .1); }
.tbl--pronto em { color: var(--yellow); animation: pulse 1.6s infinite; }
.tbl--conta { border: 2px solid #ff8c3c; background: rgba(255, 140, 60, .12); }
.tbl--conta em { color: #ffb27a; }
.cmd-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 14px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.dot--livre { border: 2px dashed var(--line); }
.dot--ocupada { background: var(--ok); }
.dot--pronto { background: var(--yellow); }
.dot--conta { background: #ff8c3c; }

/* Tela da mesa */
.modal--cmd { width: min(1280px, calc(100vw - 24px)); height: calc(100vh - 32px); padding: 0; overflow: hidden; }
.cmd { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto 1fr; height: 100%; }
.cmd__head { grid-column: 1 / -1; padding: 14px 18px; border-bottom: 1px solid var(--line); margin: 0; }
.cmd__head h2 { margin: 0; }
.cmd__menu, .cmd__side { overflow-y: auto; padding: 14px 18px; min-width: 0; }
.cmd__side { border-left: 1px solid var(--line); background: var(--bg); }
.cmd__side h3 { font-size: 15px; margin: 4px 0 10px; color: var(--yellow); }
.cmd__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cmd__new { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 14px; }
.cmd__new .lines li { align-items: center; }
.cmd__new .qty button { width: 30px; height: 30px; }
.round { background: var(--panel); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; border-left: 4px solid var(--line); }
.round--novo { border-left-color: var(--yellow); }
.round--preparo { border-left-color: var(--red); }
.round--pronto { border-left-color: var(--ok); }
.round header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.round header b { color: var(--yellow); }
.round__acts { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.round .lines { margin: 8px 0 0; }
.round .lines li:last-child { border-bottom: 0; padding-bottom: 0; }
.pitem { position: relative; }
.pitem.is-out { opacity: .55; }
.pbadge { position: absolute; top: 12px; left: 12px; font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.pbadge--falta { background: var(--bad); color: #fff; }
.pbadge--baixo { background: var(--yellow); color: var(--wine-deep); }

/* Fechar conta */
.paygrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.paybtn { border: 2px solid var(--line); background: var(--panel-2); color: var(--ink); border-radius: 12px; padding: 14px 8px; font: 800 15px Inter, sans-serif; cursor: pointer; }
.paybtn.is-on { border-color: var(--yellow); background: var(--yellow); color: var(--wine-deep); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ===== Caixa ===== */
.pie { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 18px; align-items: center; }
.pie__chart { position: relative; }
.pie__chart svg { display: block; width: 100%; height: auto; }
.pie__chart path { stroke: var(--panel); stroke-width: 2; }
.pie__chart [data-tip] { cursor: pointer; }
.pie__chart [data-tip]:hover { opacity: .85; }
.pie__total { fill: var(--ink); font: 800 17px Inter, sans-serif; }
.pie__sub { fill: var(--muted); font: 600 11px Inter, sans-serif; }
.pie__tip { position: absolute; transform: translate(-50%, calc(-100% - 12px)); background: var(--cream); color: var(--text); padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; pointer-events: none; z-index: 2; }
.pie__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pie__legend li { display: grid; grid-template-columns: 14px 1fr auto 52px; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pie__legend i { width: 14px; height: 14px; border-radius: 4px; }
.pie__legend span { font-weight: 700; }
.pie__legend small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.pie__legend em { font-style: normal; color: var(--muted); text-align: right; font-size: 13px; }
.drow--cmd.is-conta { background: rgba(255, 140, 60, .08); border-radius: 8px; padding-inline: 8px; }
.drow > span:last-child { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
#caixaOpen .drow small { width: auto; }

/* ===== Estoque ===== */
.kpis--stock { margin-top: 0; }
.stock-search { max-width: 280px; }
.stock-cat { margin-bottom: 12px; }
.stock-cat h3 { font-size: 15px; color: var(--yellow); }
.srow { display: grid; grid-template-columns: 1fr auto auto 24px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.srow:last-child { border-bottom: 0; }
.srow__name { font-weight: 600; min-width: 0; }
.srow__name small { display: block; }
.stag { font-size: 12px; font-weight: 700; color: var(--muted); }
.stag--falta { color: var(--bad); }
.stag--baixo { color: var(--yellow); }
.stag--ok { color: var(--ok); }
.srow--falta { background: linear-gradient(90deg, rgba(255, 90, 78, .1), transparent 60%); }
.srow .qty { gap: 6px; }
.srow .qty input, .srow__min input { width: 64px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 6px 8px; text-align: center; font: 700 15px Inter, sans-serif; }
.srow__min { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.srow__min input { width: 54px; font-weight: 500; }
.srow__min input:disabled { opacity: .4; }

/* ===== Equipe ===== */
.team-row small { display: block; width: auto; font-size: 11px; word-break: break-all; }
.team-row__acts { display: flex; gap: 8px; align-items: center; }
.team-row select { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 8px 10px; font: 600 14px Inter, sans-serif; }

@media (max-width: 1100px) {
  .pie { grid-template-columns: 1fr; justify-items: center; }
  .pie__chart { width: min(240px, 100%); }
  .pie__legend { width: 100%; }
}
@media (max-width: 900px) {
  .cmd { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  .modal--cmd { overflow-y: auto; }
  .cmd__menu, .cmd__side { overflow: visible; }
  .cmd__side { border-left: 0; border-top: 1px solid var(--line); padding-bottom: 90px; }
}
@media (max-width: 640px) {
  .modal--cmd { padding: 0; }
  .cmd__head { position: sticky; top: 0; z-index: 3; margin: 0; background: var(--panel); }
  .cmd__menu, .cmd__side { padding: 12px; }
  .tables { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tbl { min-height: 100px; padding: 10px; }
  .tbl > b { font-size: 28px; }
  .tbl strong { font-size: 14px; }
  .cmd-top .seg { order: 3; }
  .paygrid { grid-template-columns: repeat(2, 1fr); }
  .srow { grid-template-columns: 1fr auto; gap: 8px 10px; }
  .srow__min { grid-column: 1; }
  .srow > .link, .srow > span:last-child { justify-self: end; }
  .srow .qty button { width: 38px; height: 38px; }
  .stock-search { max-width: none; }
  .team-row__acts { width: 100%; }
  .team-row select { flex: 1; }
  /* O seletor "Ver como" do dono desce para uma linha própria */
  .top { flex-wrap: wrap; row-gap: 8px; }
  .role:has(#roleView:not([hidden])) { order: 5; flex-basis: 100%; }
  #roleView { max-width: none; width: 100%; padding: 8px 12px; font-size: 14px; }
  .top__right { gap: 6px; }
  .top .pill { flex: 1 1 0; min-width: 0; max-width: none; }
  .kpis--stock .kpi strong { font-size: 20px; }
}

.team-forms { display: grid; gap: 16px; align-content: start; }

/* ===== Retirada, contas fechadas ===== */
.cmd-new { margin: 0; }
.tbl--retirada { border-style: solid; border-left-width: 6px; }
.closed { margin-top: 14px; }
.closed summary { cursor: pointer; font-weight: 700; }
.closed summary small { font-weight: 500; }
.closed #closedList { margin-top: 8px; }

/* ===== Cardápio ===== */
.menu-search { max-width: 360px; margin-bottom: 12px; }
.menu-help { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.mrow { display: grid; grid-template-columns: 1fr auto auto 60px; align-items: center; gap: 8px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mrow:last-child { border-bottom: 0; }
.mrow.is-off > .mrow__name { opacity: .55; }
.mrow__name { font-weight: 600; min-width: 0; }
.mrow__name small { display: block; font-weight: 500; font-size: 12px; margin-top: 2px; }
.mrow__name input, .mrow__price input { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 6px 8px; font: 600 14px Inter, sans-serif; }
.mrow__name input { width: 100%; }
.mrow__price { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.mrow__price input { width: 104px; text-align: right; }
.mrow__on { margin: 0; font-size: 13px; white-space: nowrap; }
.mrow__opts { grid-column: 1 / -1; background: var(--panel-2); border-radius: 10px; padding: 8px 12px; }
.mrow__opts summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--yellow); }
.mrow__opts p { margin: 10px 0 2px; }
.mrow__opts .crow input { width: 104px; }
@media (max-width: 640px) {
  .mrow { grid-template-columns: 1fr auto; }
  .mrow__on { grid-column: 1; }
  .mrow > .link, .mrow > span:empty { justify-self: end; }
  .mrow__price input, .mrow__opts .crow input { font-size: 16px; }
  .menu-search { max-width: none; }
  .cmd-top .cmd-new { width: 100%; }
  .cmd-top .cmd-new .btn { flex: 1; }
}
.closed--caixa { margin-top: 12px; padding: 0; background: none; border: 0; }