/* BomMenu — estilos base compartilhados */
:root {
  --brand: #d9381e;
  --brand-ink: #fff;
  --brand-soft: color-mix(in srgb, var(--brand) 10%, #fff);
  --ink: #1f1b18;
  --ink-2: #5c544d;
  --ink-3: #8f857c;
  --line: #ebe4dc;
  --bg: #faf7f3;
  --card: #fff;
  --ok: #1f8a4c;
  --ok-soft: #e6f5ec;
  --warn: #b26a00;
  --warn-soft: #fff3df;
  --bad: #c62828;
  --bad-soft: #fdeaea;
  --info: #1d5fbf;
  --info-soft: #e7effb;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(31, 27, 24, .06), 0 4px 16px rgba(31, 27, 24, .06);
  --shadow-lg: 0 10px 40px rgba(31, 27, 24, .18);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --accent: #1f8a4c;
  --page-bg: #f6f2ed;
  --card-radius: 16px;
  --btn-radius: 999px;
  --sheet-radius: 20px;
  --platform: #d9381e;
  --sidebar: #1f1b18;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--brand); }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.2; }
p { margin: 0 0 .8em; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; border: 1px solid transparent; border-radius: var(--btn-radius); padding: .62em 1.15em; font-weight: 600; cursor: pointer; background: var(--card); color: var(--ink); border-color: var(--line); text-decoration: none; transition: transform .06s ease, background .15s, box-shadow .15s; white-space: nowrap; min-height: 40px; }
.btn:hover { background: #f4efe9; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn-primary:hover { background: color-mix(in srgb, var(--brand) 88%, #000); }
.btn-ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn-ok:hover { background: #18703d; }
.btn-danger { color: var(--bad); }
.btn-danger:hover { background: var(--bad-soft); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: rgba(0,0,0,.05); }
.btn-sm { padding: .35em .8em; min-height: 32px; font-size: .9em; }
.btn-lg { padding: .85em 1.4em; font-size: 1.05em; min-height: 50px; }
.btn-block { width: 100%; }
.btn-wa { background: #25d366; color: #fff; border-color: #25d366; }
.btn-wa:hover { background: #1eb457; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--card); cursor: pointer; padding: 0; }
.icon-btn:hover { background: #f4efe9; }

/* Formulários */
.field { display: grid; gap: .3em; margin-bottom: .85em; }
.field > span, .label { font-size: .85em; font-weight: 600; color: var(--ink-2); }
.input, input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=search], input[type=date], input[type=time], input[type=url], select, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .62em .8em; background: #fff; min-height: 42px; outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
textarea { min-height: 76px; resize: vertical; }
.row { display: flex; gap: .7em; align-items: center; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; }
@media (max-width: 560px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.check { display: flex; gap: .55em; align-items: center; cursor: pointer; user-select: none; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #d6cec6; border-radius: 99px; transition: .2s; cursor: pointer; }
.switch span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::before { transform: translateX(18px); }
.seg { display: inline-flex; background: #f1ebe4; border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: .45em 1em; border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--ink-2); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow); }

/* Cartões e etiquetas */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.badge { display: inline-flex; align-items: center; gap: .3em; font-size: .78em; font-weight: 700; padding: .2em .65em; border-radius: 99px; background: #f1ebe4; color: var(--ink-2); white-space: nowrap; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-brand { background: var(--brand-soft); color: var(--brand); }
.muted { color: var(--ink-3); }
.small { font-size: .86em; }
.strike { text-decoration: line-through; color: var(--ink-3); }
.price { font-weight: 700; font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--ink-3); }
.empty .big { font-size: 2.4rem; margin-bottom: .3rem; }

/* Avisos */
.alert { padding: .7rem .9rem; border-radius: 12px; font-size: .92rem; margin: .5rem 0; }
.alert-bad { background: var(--bad-soft); color: var(--bad); }
.alert-warn { background: var(--warn-soft); color: var(--warn); }
.alert-ok { background: var(--ok-soft); color: var(--ok); }
.alert-info { background: var(--info-soft); color: var(--info); }

/* Modal / folha inferior */
.overlay { position: fixed; inset: 0; background: rgba(25, 20, 16, .5); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: fade .15s ease; }
@media (min-width: 720px) { .overlay { align-items: center; padding: 2rem; } }
.sheet { background: #fff; width: 100%; max-width: 560px; max-height: 92vh; border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: up .22s cubic-bezier(.2,.8,.2,1); overflow: hidden; }
@media (min-width: 720px) { .sheet { border-radius: var(--sheet-radius); } .sheet.wide { max-width: 860px; } }
.sheet-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.sheet-head h3 { margin: 0; font-size: 1.08rem; flex: 1; }
.sheet-body { padding: 1rem; overflow: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.sheet-foot { padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: .6rem; align-items: center; background: #fff; }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

/* Toast */
.toasts { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 100; display: grid; gap: .5rem; width: min(92vw, 420px); pointer-events: none; }
.toast { background: #2a2420; color: #fff; padding: .75rem 1rem; border-radius: 12px; box-shadow: var(--shadow-lg); animation: up .2s ease; font-weight: 500; pointer-events: auto; }
.toast.bad { background: var(--bad); }
.toast.ok { background: var(--ok); }

/* Quantidade */
.qty { display: inline-flex; align-items: center; gap: .2rem; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: #fff; }
.qty button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; font-size: 1.15rem; font-weight: 700; color: var(--brand); cursor: pointer; display: grid; place-items: center; }
.qty button:disabled { color: #ccc; cursor: default; }
.qty button:hover:not(:disabled) { background: var(--brand-soft); }
.qty output { min-width: 1.6em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.spinner { width: 22px; height: 22px; border: 3px solid rgba(0,0,0,.1); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-page { min-height: 70vh; display: grid; place-items: center; }

table.tbl { width: 100%; border-collapse: collapse; font-size: .93em; }
.tbl th, .tbl td { text-align: left; padding: .6em .55em; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl th { font-size: .8em; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 700; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr:hover td { background: #fcfaf7; }