/* =====================================================================
   Delivery Plus — estilos do painel
   Paleta: manjericão (principal), mostarda (destaque), tinta, papel.
   ===================================================================== */

:root {
  /* Paleta Lexxo (azul, marinho, magenta e ciano do logotipo) */
  --basil: #0B3BF5;
  --basil-strong: #0A2CC0;
  --basil-deep: #070B2E;
  --basil-soft: #E6EBFF;
  --mustard: #E06CF5;
  --mustard-soft: #FBE8FE;
  --ink: #141833;
  --muted: #5B6180;
  --paper: #F5F6FB;
  --surface: #FFFFFF;
  --surface-2: #EEF0F8;
  --line: #DCE0EE;
  --danger: #B42318;
  --danger-soft: #FDECEA;
  --warning: #8A5A0B;
  --warning-soft: #FFF4DB;
  --info: #2F5D8A;
  --info-soft: #E6EEF7;
  --focus: #00B8F0;
  --radius-s: 6px;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(28, 35, 33, .06), 0 4px 16px rgba(28, 35, 33, .06);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --sidebar-w: 248px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --basil: #7389FF; --basil-strong: #97A7FF; --basil-deep: #04061A; --basil-soft: #171D48;
    --mustard-soft: #3B1846; --ink: #E8EAF6; --muted: #9CA3C7; --paper: #0B0E1F; --surface: #131732;
    --surface-2: #1A1F40; --line: #262C52; --danger: #F07A6E; --danger-soft: #3B1D1A; --warning: #E8B230;
    --warning-soft: #362C14; --info: #7FB0E0; --info-soft: #1B2A38; --shadow: 0 1px 2px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --basil: #7389FF; --basil-strong: #97A7FF; --basil-deep: #04061A; --basil-soft: #171D48;
  --mustard-soft: #3B1846; --ink: #E8EAF6; --muted: #9CA3C7; --paper: #0B0E1F; --surface: #131732;
  --surface-2: #1A1F40; --line: #262C52; --danger: #F07A6E; --danger-soft: #3B1D1A; --warning: #E8B230;
  --warning-soft: #362C14; --info: #7FB0E0; --info-soft: #1B2A38; --shadow: 0 1px 2px rgba(0,0,0,.3);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5;
  color: var(--ink); background: var(--paper);
}
a { color: var(--basil); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--basil-strong); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1rem; }
small, .muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Estrutura ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--basil-deep); color: #DDE3FF; padding: 20px 14px 20px 14px;
  display: flex; flex-direction: column; gap: 18px;
}
/* A borda serrilhada de comanda: a marca visual do Delivery Plus */
.sidebar::after {
  content: ""; position: absolute; top: 0; right: -8px; width: 8px; height: 100%;
  background: radial-gradient(circle at 0 8px, var(--basil-deep) 5px, transparent 5.5px) 0 0 / 8px 16px repeat-y;
  pointer-events: none;
}
.sidebar-wrap { position: relative; z-index: 20; }

.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px; color: #fff; text-decoration: none; }
.brand:hover { color: #fff; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--mustard); color: var(--basil-deep);
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
.brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.1; }
.brand-sub { display: block; font-size: .78rem; color: #A9B2E0; font-weight: 400; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-title { font-size: .78rem; color: #8FAB9C; padding: 10px 10px 4px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-s);
  color: #DDE3FF; text-decoration: none; font-weight: 500;
}
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav a.is-active { background: rgba(232,178,48,.16); color: #fff; box-shadow: inset 3px 0 0 var(--mustard); }
.nav svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.sidebar-foot { margin-top: auto; font-size: .78rem; color: #8FAB9C; padding: 0 10px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: var(--surface);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10;
}
.topbar .spacer { flex: 1; }
.menu-toggle { display: none; }
.content { padding: 28px; width: 100%; max-width: 1240px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head p { margin: 4px 0 0; color: var(--muted); }

/* ---------- Componentes ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.panel + .panel, .panel + .stack, .stack + .panel { margin-top: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; }
.stack { display: grid; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* Faixa de números em estilo cupom fiscal */
.tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); }
.tally > div { padding: 16px 18px; border-right: 1px dashed var(--line); }
.tally > div:last-child { border-right: 0; }
.tally strong { display: block; font-size: 1.7rem; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tally span { color: var(--muted); font-size: .88rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  padding: 8px 16px; border-radius: var(--radius-s); border: 1px solid transparent; font: inherit;
  font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; background: var(--surface-2); color: var(--ink);
}
.btn:hover { filter: brightness(.97); color: var(--ink); }
.btn-primary { background: var(--basil); color: var(--on-basil, #fff); }
.btn-primary:hover { background: var(--basil-strong); color: #fff; filter: none; }
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-primary:hover { color: #04061A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { color: #04061A; } }
.btn-outline { background: transparent; border-color: var(--line); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { color: #fff; }
.btn-ghost { background: transparent; }
.btn-sm { min-height: 32px; padding: 4px 10px; font-size: .88rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline; margin: 0; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label, .label { font-weight: 600; font-size: .92rem; }
.field .hint { font-size: .84rem; color: var(--muted); }
.field .error { font-size: .86rem; color: var(--danger); font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface); color: var(--ink); font: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--basil); box-shadow: 0 0 0 3px var(--basil-soft); }
.has-error input, .has-error select { border-color: var(--danger); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--basil); flex: none; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 8px; flex-wrap: wrap; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 650; font-size: 1rem; margin-bottom: 10px; padding: 0; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filters .field { margin: 0; min-width: 160px; flex: 1; }
.filters .field.grow { flex: 3; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: .84rem; color: var(--muted); font-weight: 600; background: var(--surface-2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td .sub { display: block; font-size: .84rem; color: var(--muted); }
.row-blocked td { opacity: .62; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; background: var(--surface-2); color: var(--muted); white-space: nowrap;
}
.badge-ok { background: var(--basil-soft); color: var(--basil); }
.badge-warn { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

.alert { padding: 12px 16px; border-radius: var(--radius-s); margin-bottom: 16px; border: 1px solid transparent; display: flex; gap: 10px; align-items: flex-start; }
.alert-success { background: var(--basil-soft); color: var(--basil); border-color: color-mix(in srgb, var(--basil) 25%, transparent); }
.alert-error { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.alert-warning { background: var(--warning-soft); color: var(--warning); }
.alert-info { background: var(--info-soft); color: var(--info); }
.alert .close { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0 4px; }

.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 4px; }

.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { padding: 10px 0; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 12px; }
.list-plain li:last-child { border-bottom: 0; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs a { padding: 10px 14px; text-decoration: none; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.is-active { color: var(--ink); border-bottom-color: var(--mustard); }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 36px; padding: 6px 10px; border-radius: var(--radius-s); border: 1px solid var(--line); text-align: center; text-decoration: none; background: var(--surface); }
.pagination .current { background: var(--basil); color: #fff; border-color: var(--basil); }

/* Matriz de permissões */
.perm-module { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.perm-module + .perm-module { margin-top: 12px; }
.perm-module-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; }
.perm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 18px; padding: 14px 16px; }
.perm-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.perm-row select { min-height: 34px; width: auto; padding: 4px 8px; font-size: .88rem; }
.perm-flag { font-size: .76rem; color: var(--warning); font-weight: 600; }

/* Topo */
.branch-select { display: flex; align-items: center; gap: 8px; }
.branch-select select { min-height: 36px; width: auto; max-width: 220px; }
.user-chip { display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--mustard-soft); color: var(--warning); display: grid; place-items: center; font-weight: 700; }
.icon-btn { width: 38px; height: 38px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.icon-btn svg { width: 18px; height: 18px; }

/* Telas de entrada (login, instalação) */
.auth-body { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.auth-side {
  background: var(--basil-deep); color: #E3EEE8; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth-side::after {
  content: ""; position: absolute; top: 0; right: 0; width: 10px; height: 100%;
  background: radial-gradient(circle at 10px 10px, var(--paper) 6px, transparent 6.5px) 0 0 / 10px 20px repeat-y;
}
.auth-side h1 { font-size: 2.1rem; color: #fff; max-width: 14ch; }
.auth-side p { color: #A9C2B5; max-width: 38ch; }
.ticket { background: #FBFAF5; color: #2A2A2A; border-radius: 4px; padding: 16px 18px; max-width: 290px; font-size: .9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); transform: rotate(-2deg); }
.ticket .t-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.ticket .t-sep { border-top: 1px dashed #BDBDBD; margin: 8px 0; }
.ticket .t-head { font-weight: 700; display: flex; justify-content: space-between; }
.auth-main { display: grid; place-items: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card.wide { max-width: 720px; }
.auth-card h2 { font-size: 1.5rem; }

dialog { border: 0; border-radius: var(--radius); padding: 0; width: min(440px, 92vw); background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(14, 26, 21, .55); }
.dialog-body { padding: 22px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }

.qr-box { display: inline-block; padding: 12px; background: #fff; border-radius: var(--radius-s); border: 1px solid var(--line); }
.qr-box svg, .qr-box img { display: block; width: 180px; height: 180px; }
.code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--surface-2); padding: 3px 8px; border-radius: 4px; font-size: .95rem; word-break: break-all; }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 360px; }

.error-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.error-code { font-size: 4rem; font-weight: 800; color: var(--mustard); line-height: 1; }

/* ---------- Etapa 2: plataforma, assinatura e Pix ---------- */
.text-danger { color: var(--danger) !important; }
.text-ok { color: var(--basil) !important; }
.group-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 10px; font-weight: 700; }
.alert svg, .license-banner svg { width: 18px; height: 18px; vertical-align: -3px; }
.license-banner { align-items: center; justify-content: space-between; flex-wrap: wrap; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.btn-lg { min-height: 48px; padding: 10px 22px; font-size: 1.05rem; }
.btn svg, .panel h2 svg { width: 18px; height: 18px; }
.panel h2 svg { vertical-align: -3px; color: var(--basil); }
.input-prefix { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); overflow: hidden; }
.input-prefix span { padding: 0 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); border-right: 1px solid var(--line); }
.input-prefix input { border: 0 !important; border-radius: 0 !important; flex: 1; min-width: 0; }
.has-error .input-prefix { border-color: var(--danger); }
.copy-field { display: flex; gap: 8px; }
.copy-field input { flex: 1; min-width: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .88rem; }
.disclosure { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.disclosure > summary { cursor: pointer; font-weight: 600; color: var(--basil); padding: 4px 0; list-style-position: inside; }
.disclosure[open] > summary { margin-bottom: 12px; }
td .disclosure { margin-top: 6px; padding-top: 6px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px 18px; margin-bottom: 14px; }
.check.is-disabled { opacity: .55; cursor: not-allowed; }
.check.has-error { color: var(--danger); }
.note { background: var(--mustard-soft); border-radius: var(--radius-s); padding: 10px 12px; margin: 12px 0 0; font-size: .92rem; }
.danger-zone { border-color: var(--danger-soft); }
.danger-zone h2 { color: var(--danger); }

/* Medidor de uso do plano */
.meter { margin-bottom: 14px; }
.meter-label { display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: 6px; }
.meter-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.meter-bar span { display: block; height: 100%; background: var(--basil); border-radius: 99px; }
.meter.is-full .meter-bar span { background: var(--danger); }
.meter.is-full .meter-label strong { color: var(--danger); }

/* Planos */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.plan-grid .panel + .panel { margin-top: 0; }
.plan-card.is-inactive { opacity: .6; }
.plan-price { font-size: 1.7rem; font-weight: 700; margin: 4px 0; font-variant-numeric: tabular-nums; }
.plan-price small { font-size: .9rem; font-weight: 500; color: var(--muted); }
.plan-grid.compact .plan-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 4px; align-content: start; }
.plan-grid.compact .plan-price { font-size: 1.3rem; }
.plan-grid.compact .plan-card.is-current { border-color: var(--basil); box-shadow: inset 0 0 0 1px var(--basil); }

/* Cabeçalho da assinatura: borda serrilhada de comanda à esquerda */
.sub-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; position: relative; padding-left: 28px; }
.sub-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: var(--radius) 0 0 var(--radius);
  background: var(--basil); -webkit-mask: radial-gradient(circle 4px at 8px 8px, transparent 3.5px, #000 4px) 0 0 / 8px 12px; mask: radial-gradient(circle 4px at 8px 8px, transparent 3.5px, #000 4px) 0 0 / 8px 12px; }
.sub-hero.is-warn::before { background: var(--mustard); }
.sub-hero.is-danger::before { background: var(--danger); }
.sub-hero h2 { margin: 4px 0 6px; font-size: 1.4rem; }
.sub-hero h2 small { font-size: .9rem; color: var(--muted); font-weight: 500; }
.sub-hero p { margin: 4px 0; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--basil); }
.sub-hero.is-warn .eyebrow { color: var(--warning); }
.sub-hero.is-danger .eyebrow { color: var(--danger); }
.sub-hero-action { display: grid; gap: 6px; justify-items: end; }
.included { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.included li { display: flex; gap: 8px; align-items: flex-start; font-size: .93rem; }
.included svg { width: 16px; height: 16px; color: var(--basil); flex: none; margin-top: 3px; }

/* Pagamento com Pix */
.pix-amount { display: grid; gap: 2px; margin-bottom: 18px; }
.pix-amount strong { font-size: 2.2rem; line-height: 1.1; }
.pix-grid { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
.qr-box.qr-lg svg { width: 240px; height: 240px; }
.steps { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 6px; }
.pix-status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--surface-2); margin: 14px 0 12px; }
.pix-status.is-paid { background: var(--basil-soft); color: var(--basil-strong); }
.dot-pulse { color: var(--mustard); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.legal-note { margin: 22px 0 0; font-size: .8rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 12px; }

/* Cadastro público e páginas legais */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.signup-cta { margin-top: 22px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--basil-soft); font-size: .93rem; }
.legal-links { font-size: .82rem; color: var(--muted); margin-top: 16px; }
.legal-links a { color: var(--muted); }
.public-head { padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--surface); }
.public-head .brand { color: var(--ink); }
.public-main { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; }
.legal h1 { margin-bottom: 4px; }
.legal h2 { font-size: 1.05rem; margin: 26px 0 8px; }
.legal p { line-height: 1.65; }

/* ---------- Etapa 3: configurações do estabelecimento ---------- */
.brand-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; background: #fff; flex: none; }
.span-2 { grid-column: 1 / -1; }
.sticky-actions { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--paper) 30%); padding: 18px 0 8px; z-index: 2; }
.inline-number { width: 64px; min-height: 30px !important; padding: 2px 6px !important; display: inline-block; margin: 0 4px; }
.input-suffix { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); overflow: hidden; max-width: 160px; }
.input-suffix input { border: 0 !important; border-radius: 0 !important; flex: 1; min-width: 0; }
.input-suffix span { padding: 0 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); border-left: 1px solid var(--line); }
.check.is-locked { opacity: .75; }
.steps-grid .check span { line-height: 1.35; }
.inline-panel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.inline-panel select { width: auto; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .8rem; background: var(--surface-2); color: var(--muted); text-decoration: line-through; }
.chip.is-on { background: var(--basil-soft); color: var(--basil-strong); text-decoration: none; font-weight: 600; }
.services { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
p svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--muted); }

/* Filiais */
.branch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.branch-grid .panel + .panel { margin-top: 0; }
.branch-card.is-inactive { opacity: .65; }
.branch-card p { margin: 6px 0; }
.menu-more { position: relative; display: inline-block; }
.menu-more > summary { list-style: none; }
.menu-more > summary::-webkit-details-marker { display: none; }
.menu-more-list { position: absolute; right: 0; top: calc(100% + 4px); min-width: 180px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-s); box-shadow: var(--shadow); padding: 6px; z-index: 5; display: grid; }
.menu-more-list button { width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; font: inherit; color: var(--ink); cursor: pointer; }
.menu-more-list button:hover { background: var(--surface-2); }
.menu-more-list button.danger { color: var(--danger); }

/* Editor de horários */
.day-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.day-row:last-of-type { border-bottom: 0; }
.day-name { display: grid; padding-top: 8px; }
.day-shifts { display: grid; gap: 8px; }
.shift { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.shift input[type=time] { width: 118px; }
.shift select { width: auto; }
.shift .icon-btn svg { width: 18px; height: 18px; }
.day-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* Aparência */
.appearance { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.preview-wrap { position: sticky; top: 76px; }
.upload-box { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.upload-thumb { height: 64px; max-width: 160px; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--line); }
.upload-thumb.is-logo { width: 64px; object-fit: contain; background: #fff; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.preset { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-s); cursor: pointer; font-size: .9rem; font-weight: 600; }
.preset input { position: absolute; opacity: 0; pointer-events: none; }
.preset.is-selected { border-color: var(--basil); box-shadow: inset 0 0 0 1px var(--basil); }
.preset:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.swatches { display: flex; height: 28px; border-radius: 6px; overflow: hidden; }
.swatches i { flex: 1; }
.swatch-custom { background: conic-gradient(#e53935, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935); }
.color-field { display: flex; gap: 8px; align-items: center; }
.color-field input[type=color] { width: 48px; height: 40px; padding: 2px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.color-field input[type=text] { font-family: ui-monospace, Consolas, monospace; text-transform: uppercase; }

/* Prévia do cardápio (celular) */
.preview-phone { --p-radius: 12px; --p-bg: #F6F6F4; --p-card: #fff; --p-text: #1d1d1b; --p-muted: #6b6b66;
  width: 100%; max-width: 320px; margin: 0 auto; border-radius: 28px; border: 8px solid #1c2321; background: var(--p-bg); color: var(--p-text);
  overflow: hidden; box-shadow: var(--shadow); font-size: 13px; position: relative; min-height: 520px; }
.preview-phone[data-mode="dark"] { --p-bg: #141414; --p-card: #1f1f1f; --p-text: #f2f2f2; --p-muted: #a3a3a3; }
.preview-phone[data-corners="round"] { --p-radius: 18px; }
.preview-phone[data-corners="square"] { --p-radius: 3px; }
.pv-cover { height: 110px; background: var(--p-secondary) center / cover no-repeat; }
.pv-head { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--p-secondary); color: #fff; }
.pv-cover:not([hidden]) + .pv-head { margin-top: -28px; background: transparent; color: var(--p-text); align-items: flex-end; }
.pv-cover:not([hidden]) + .pv-head strong { margin-top: 30px; }
.pv-head strong { display: block; font-size: 15px; }
.pv-logo { width: 52px; height: 52px; border-radius: var(--p-radius); background: #fff; display: grid; place-items: center; font-weight: 800; color: var(--p-secondary);
  border: 2px solid #fff; overflow: hidden; flex: none; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.pv-logo img { width: 100%; height: 100%; object-fit: contain; }
.pv-open { font-size: 11px; color: #3fb96e; font-weight: 600; }
.pv-tabs { display: flex; gap: 6px; padding: 10px 14px; overflow: hidden; }
.pv-tabs span { padding: 5px 12px; border-radius: 99px; background: var(--p-card); color: var(--p-muted); white-space: nowrap; font-weight: 600; font-size: 12px; }
.pv-tabs .is-on { background: var(--p-primary); color: #fff; }
.pv-items { display: grid; gap: 8px; padding: 0 14px 70px; }
.pv-item { display: flex; gap: 10px; background: var(--p-card); border-radius: var(--p-radius); padding: 8px; }
.pv-img { width: 64px; height: 64px; border-radius: calc(var(--p-radius) - 4px); background: linear-gradient(135deg, var(--p-accent), var(--p-primary)); opacity: .55; flex: none; }
.pv-info { display: grid; gap: 2px; align-content: center; }
.pv-info small { color: var(--p-muted); font-size: 11px; }
.pv-price { font-weight: 700; color: var(--p-primary); }
.preview-phone[data-mode="dark"] .pv-price { color: var(--p-accent); }
.pv-tag { font-style: normal; font-size: 10px; background: var(--p-accent); color: #1d1d1b; padding: 1px 6px; border-radius: 99px; margin-left: 4px; }
.preview-phone[data-layout="grid"] .pv-items { grid-template-columns: 1fr 1fr; }
.preview-phone[data-layout="grid"] .pv-item { flex-direction: column; }
.preview-phone[data-layout="grid"] .pv-img { width: 100%; height: 70px; }
.pv-cart { position: absolute; left: 14px; right: 14px; bottom: 14px; background: var(--p-primary); color: #fff; text-align: center; font-weight: 700;
  padding: 11px; border-radius: var(--p-radius); }

/* ---------- Etapa 4: cardápio ---------- */
.menu-more-list a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.menu-more-list a:hover { background: var(--surface-2); }
.menu-more-label { display: grid; gap: 4px; padding: 6px 10px; font-size: .85rem; color: var(--muted); }
.plain-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.short-input { max-width: 140px; }
.text-promo { color: var(--danger); }
tr.is-muted td { opacity: .6; }
.cat-list { list-style: none; padding: 0; margin: 0; }
.cat-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cat-row:last-child { border-bottom: 0; }
.cat-row.is-child { padding-left: 40px; }
.cat-row.is-hidden .cat-info { opacity: .55; }
.cat-thumb, .product-thumb { width: 44px; height: 44px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden;
  flex: none; font-weight: 700; color: var(--muted); font-size: .85rem; }
.cat-thumb img, .product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb svg { width: 20px; height: 20px; }
.cat-info { flex: 1; min-width: 180px; display: grid; }
.product-group .panel-head { margin-bottom: 4px; }
.product-list { list-style: none; margin: 0; padding: 0; }
.product-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.product-row:last-child { border-bottom: 0; }
.product-row.is-paused .product-info, .product-row.is-paused .product-thumb { opacity: .55; }
.product-info { flex: 1; min-width: 200px; display: grid; gap: 3px; }
.product-info a { color: var(--ink); text-decoration: none; }
.product-info a:hover strong { text-decoration: underline; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.product-price { min-width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.repeat-list { display: grid; gap: 10px; margin-bottom: 10px; }
.repeat-row { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; background: var(--surface); }
.var-row, .opt-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.var-row .field, .opt-row .field { margin: 0; flex: 1; min-width: 110px; }
.var-row .field:first-of-type, .opt-row .field:first-of-type { flex: 2; min-width: 160px; }
.var-row .check, .opt-row .check { margin-bottom: 8px; }
.combo-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 16px; }
.combo-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.input-prefix.small { max-width: 130px; }
.input-prefix.small input { min-height: 34px; padding: 4px 8px; }
.disclosure.flush { border-top: 0; margin-top: 0; padding-top: 0; }
.weekdays { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

/* ---------- Etapa 5: link do cardápio ---------- */
.menu-share { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.menu-share .qr-box { width: 140px; aspect-ratio: 1; flex: none; background: #fff; padding: 6px; border-radius: 10px; overflow: hidden; }
/* O QR Code é desenhado sem tamanho fixo: força a caber inteiro na caixa (painel, Pix, mesas). */
[data-qr] svg, .pix-qr svg { display: block; width: 100%; height: auto; max-width: 100%; }
.menu-share > div:last-child { flex: 1; min-width: 260px; }
.note-inline { color: var(--warning); font-weight: 600; }

/* ---------- Etapa 6: painel de pedidos e cozinha ---------- */
.nav-badge { margin-left: auto; min-width: 22px; height: 22px; border-radius: 99px; background: var(--mustard); color: var(--basil-deep); font-size: .75rem; font-weight: 800; display: inline-grid; place-items: center; padding: 0 6px; }
.btn.is-on { background: var(--basil-soft); border-color: var(--basil); color: var(--basil-strong); }
.menu-more-list.wide { min-width: 280px; }
.menu-more-list.wide form { display: grid; gap: 8px; padding: 6px; }
.menu-more-list.wide input, .menu-more-list.wide select { width: 100%; }
.order-actions .row-actions { gap: 10px; }
.badge.status-cancelled, .badge.status-rejected { background: var(--danger-soft); color: var(--danger); }
.badge.status-finished, .badge.status-delivered { background: var(--basil-soft); color: var(--basil-strong); }
.badge.status-received, .badge.status-awaiting_confirmation { background: var(--mustard-soft); color: var(--warning); }
.badge.item-ready { background: var(--basil-soft); color: var(--basil-strong); }
.badge.item-preparing { background: var(--mustard-soft); color: var(--warning); }

.board-head { margin-bottom: 12px; }
.board { display: grid; grid-template-columns: repeat(5, minmax(250px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.board-col { background: var(--surface-2); border-radius: var(--radius); padding: 10px; min-height: 200px; }
.board-col header { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 10px; }
.board-col h2 { font-size: .95rem; margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.board-col .count { min-width: 26px; height: 26px; border-radius: 99px; background: var(--surface); display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.board-col[data-col="new"] .count { background: var(--mustard); color: var(--basil-deep); }
.board-col.is-done { opacity: .85; }
.board-list { display: grid; gap: 10px; }
.board-empty { text-align: center; margin-top: 8px; }
.order-card { background: var(--surface); border-radius: var(--radius-s); padding: 10px 12px; border-left: 5px solid var(--basil); box-shadow: 0 1px 2px rgba(0,0,0,.06); font-size: .9rem; }
.order-card.urg-warn { border-left-color: var(--mustard); }
.order-card.urg-late { border-left-color: var(--danger); }
.order-card.is-new { animation: pulse-new 1.6s ease-in-out 3; box-shadow: 0 0 0 2px var(--mustard); }
.order-card.is-closed { border-left-color: var(--line); opacity: .75; }
@keyframes pulse-new { 0%, 100% { box-shadow: 0 0 0 2px var(--mustard); } 50% { box-shadow: 0 0 0 6px transparent; } }
.order-card header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.order-card .num { font-size: 1.15rem; font-weight: 800; color: var(--ink); text-decoration: none; }
.order-card .tag { font-size: .72rem; font-weight: 700; background: var(--surface-2); padding: 2px 8px; border-radius: 99px; }
.order-card .time { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.order-card.urg-late .time { color: var(--danger); }
.order-card p { margin: 4px 0; }
.order-card .who small, .order-card .items small { display: block; color: var(--muted); font-size: .8rem; }
.order-card .addr { color: var(--muted); font-size: .85rem; }
.order-card .sched { font-weight: 700; color: var(--warning); }
.order-card .items { list-style: none; margin: 6px 0; padding: 6px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); display: grid; gap: 4px; }
.order-card .obs, .order-card .items .obs { color: var(--danger); font-weight: 600; }
.order-card .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.order-card .acts .btn-primary { flex: 1; }
.modal { border: 0; border-radius: var(--radius); padding: 20px; width: min(460px, calc(100% - 24px)); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.modal::backdrop { background: rgba(0,0,0,.5); }
.modal h2 { margin-top: 0; }

.dispatch-inline { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.dispatch-inline select { flex: 1; min-width: 130px; min-height: 34px; padding: 4px 8px; }
.order-card .on-route { margin: 8px 0 0; font-weight: 700; color: var(--basil-strong); }
/* Cozinha: letras grandes, fundo escuro, para TV ou tablet */
body.kitchen-page { background: #101412; }
body.kitchen-page .main-content, body.kitchen-page main { color: #EDEFEC; }
.kitchen-head h1, .kitchen-head .muted { color: #EDEFEC; }
.sector-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { border: 2px solid #3A4540; background: transparent; color: #CFD6D2; padding: 8px 14px; border-radius: 99px; font-weight: 700; cursor: pointer; font: inherit; }
.chip-btn.is-on { background: var(--sector, var(--basil)); border-color: var(--sector, var(--basil)); color: #fff; }
.kitchen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; align-items: start; }
.kitchen-empty { color: #9AA5A0; text-align: center; font-size: 1.3rem; margin-top: 40px; }
.k-ticket { background: #1B221E; border-radius: 12px; border-top: 8px solid #2F9E63; color: #EDEFEC; overflow: hidden; }
.k-ticket.urg-warn { border-top-color: #E8B230; }
.k-ticket.urg-late { border-top-color: #E0533D; }
.k-ticket.is-done { opacity: .5; }
.k-ticket header { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; font-size: 1.05rem; }
.k-ticket header strong { font-size: 1.6rem; }
.k-time { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.k-ticket.urg-late .k-time { color: #FF8A73; }
.k-sched { margin: 0 14px 6px; color: #F2C75C; font-weight: 700; }
.k-cust { margin: 0 14px 6px; color: #A9B4AF; }
.k-ticket ul { list-style: none; margin: 0; padding: 0; }
.k-item { border-top: 1px solid #2A332E; }
.k-btn { display: flex; gap: 10px; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: 12px 14px; font: inherit; font-size: 1.1rem; cursor: pointer; align-items: flex-start; }
.k-btn:disabled { cursor: default; }
.k-qty { font-weight: 900; min-width: 34px; }
.k-name { flex: 1; font-weight: 700; display: grid; gap: 2px; }
.k-name small { font-weight: 500; font-size: .92rem; color: #B7C2BD; }
.k-name .k-add { color: #8EE0B0; }
.k-name .k-rem { color: #FFB199; font-weight: 800; text-transform: uppercase; }
.k-name .k-obs, .k-ticket > .k-obs { color: #FFD166; font-weight: 700; }
.k-ticket > .k-obs { margin: 8px 14px; }
.k-state { font-size: .8rem; font-weight: 800; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: #2A332E; white-space: nowrap; }
.k-item.st-preparing .k-state { background: #E8B230; color: #1b1b1b; }
.k-item.st-ready .k-state { background: #2F9E63; color: #fff; }
.k-item.st-ready .k-name { text-decoration: line-through; opacity: .6; }
.k-bump { width: 100%; border: 0; background: #2F9E63; color: #fff; font: inherit; font-weight: 800; font-size: 1.1rem; padding: 14px; cursor: pointer; }
.k-bump:hover { background: #28895A; }

/* Lançar pedido (equipe) usa o visual do cardápio */
.staff-order { background: var(--bg); border-radius: var(--radius); padding: 8px 8px 90px; }
.staff-order .m-cats { position: sticky; top: 0; }
.staff-order .m-cartbar { width: min(560px, calc(100% - 24px)); }

/* ---------- Etapa 7: salão, mesas e comandas ---------- */
.salon-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; font-size: .85rem; }
.salon-legend .lg::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--c); }
.lg-free, .st-free { --c: #2F9E63; }
.lg-occupied, .st-occupied { --c: #E8B230; }
.lg-awaiting_payment, .st-awaiting_payment { --c: #D9480F; }
.lg-cleaning, .st-cleaning { --c: #6C8EAD; }
.lg-reserved, .st-reserved { --c: #7B61A8; }
.lg-blocked, .st-blocked { --c: #8A8F8C; }
.salon-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.salon-filter .chip-btn { border-color: var(--line); color: var(--ink); }
.salon-filter .chip-btn.is-on { background: var(--basil); border-color: var(--basil); color: #fff; }
.salon-grid, .loose-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.t-tile { position: relative; display: grid; gap: 2px; padding: 12px; min-height: 108px; border-radius: var(--radius); background: var(--surface); color: var(--ink);
  text-decoration: none; border: 2px solid var(--c); box-shadow: inset 0 6px 0 var(--c); padding-top: 16px; }
.t-tile:hover { box-shadow: inset 0 6px 0 var(--c), var(--shadow); }
.t-tile.has-call { animation: call-pulse 1.4s ease-in-out infinite; }
@keyframes call-pulse { 0%, 100% { box-shadow: inset 0 6px 0 var(--c), 0 0 0 0 rgba(217,72,15,.5); } 50% { box-shadow: inset 0 6px 0 var(--c), 0 0 0 8px rgba(217,72,15,0); } }
.t-num { font-size: 1.15rem; font-weight: 800; }
.t-state { font-size: .8rem; font-weight: 700; color: var(--c); }
.t-total { font-weight: 800; font-size: 1.05rem; margin-top: 4px; }
.t-meta { font-size: .8rem; color: var(--muted); }
.t-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.t-call { font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: #D9480F; color: #fff; }
.t-call-waiter { background: #1971C2; }
.t-call-order { background: var(--mustard); color: var(--basil-deep); }
.tab-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.tab-summary { position: sticky; top: 12px; }
.tab-summary .big { font-size: 1.4rem; }
.stack-actions { display: grid; gap: 8px; margin-top: 12px; }
.stack-actions form { margin: 0; }
.btn-block { width: 100%; justify-content: center; }
.tab-order { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; margin-bottom: 10px; }
.tab-order.is-dead { opacity: .55; }
.tab-order-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.list-plain li.is-dead > span:first-child { text-decoration: line-through; }
.badge.tstatus-free { background: var(--basil-soft); color: var(--basil-strong); }
.badge.tstatus-occupied { background: var(--mustard-soft); color: var(--warning); }
.badge.tstatus-awaiting_payment { background: var(--danger-soft); color: var(--danger); }
.call-alert { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.grow-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.grow-form input[type="text"] { flex: 1; min-width: 160px; }
.field-inline { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.link-btn { border: 0; background: none; padding: 0; color: var(--basil-strong); text-decoration: underline; cursor: pointer; font: inherit; }
@media (max-width: 860px) { .tab-layout { grid-template-columns: 1fr; } .tab-summary { position: static; } }

/* ---------- Etapa 8: caixa e pagamentos ---------- */
.panel.narrow { max-width: 560px; }
.pay-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.pay-totals > div { background: var(--surface); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 2px; border: 1px solid var(--line); }
.pay-totals span { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.pay-totals strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.pay-totals .is-due { background: var(--basil); border-color: var(--basil); }
.pay-totals .is-due span, .pay-totals .is-due strong { color: #fff; }
.pay-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.split-tools .field-inline { flex-wrap: wrap; }
.pay-items li label { flex: 1; }
.pay-line { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px; margin-bottom: 10px; display: grid; gap: 10px; }
.method-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.method-pick input { position: absolute; opacity: 0; }
.method-pick span { display: inline-block; padding: 9px 14px; border-radius: 99px; border: 2px solid var(--line); font-weight: 700; cursor: pointer; }
.method-pick input:checked + span { border-color: var(--basil); background: var(--basil-soft); color: var(--basil-strong); }
.method-pick input:focus-visible + span { outline: 3px solid var(--mustard); }
.change { display: block; margin-top: 6px; font-weight: 800; color: var(--basil-strong); font-size: 1.05rem; }
.change.is-bad, .pay-sum.is-bad { color: var(--danger); }
.pay-sum { font-weight: 700; }
.pix-box { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: var(--surface-2); border-radius: var(--radius-s); padding: 12px; }
.pix-qr { width: 170px; background: #fff; padding: 6px; border-radius: 8px; }
.pix-box > div:last-child { flex: 1; min-width: 200px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: inline-block; padding: 8px 14px; border: 2px solid var(--line); border-radius: 99px; font-weight: 700; cursor: pointer; }
.seg input:checked + span { border-color: var(--basil); background: var(--basil-soft); color: var(--basil-strong); }
.text-ok { color: var(--basil-strong); font-weight: 700; }
.text-danger { color: var(--danger); font-weight: 700; }
.pay-status { font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; }
.pay-status.paid { background: var(--basil-soft); color: var(--basil-strong); }
.pay-status.pending, .pay-status.partial { background: var(--mustard-soft); color: var(--warning); }
@media (max-width: 860px) { .pay-layout { grid-template-columns: 1fr; } .pay-totals strong { font-size: 1.1rem; } }

/* ---------- Etapa 9: entregas ---------- */
.dispatch-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dispatch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dispatch-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-s);
  border: 1px solid var(--line); border-left: 5px solid var(--line); }
.dispatch-item.is-ready { border-left-color: var(--basil); }
.dispatch-item.urg-warn { border-left-color: var(--mustard); }
.dispatch-item.urg-late { border-left-color: var(--danger); }
.dispatch-item .check { flex: 1; align-items: flex-start; }
.dispatch-send { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.dispatch-send select { flex: 1; min-width: 200px; }
.route-title { display: flex; align-items: center; gap: 6px; font-size: 1rem; margin: 14px 0 6px; }
.route-title svg { width: 18px; height: 18px; }
.courier-card .courier-name { font-size: 1.15rem; margin: 0; }
.courier-card .courier-address { font-size: 1.05rem; margin: 4px 0 10px; }
.courier-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 10px; }
.courier-links .btn { justify-content: center; }
.courier-pay { background: var(--mustard-soft); padding: 10px 12px; border-radius: var(--radius-s); }
.courier-fail { margin-top: 8px; display: block; }
.courier-fail summary { width: 100%; }
@media (max-width: 860px) { .dispatch-layout { grid-template-columns: 1fr; } }

/* ---------- Etapa 10: impressão ---------- */
.highlight-panel { border: 2px solid var(--mustard); background: var(--mustard-soft); }
.badge.agent-online { background: var(--basil-soft); color: var(--basil-strong); }
.badge.agent-recent { background: var(--mustard-soft); color: var(--warning); }
.badge.agent-offline, .badge.agent-never { background: var(--danger-soft); color: var(--danger); }
.badge.job-printed { background: var(--basil-soft); color: var(--basil-strong); }
.badge.job-failed { background: var(--danger-soft); color: var(--danger); }
.badge.job-pending, .badge.job-sent { background: var(--mustard-soft); color: var(--warning); }
.sector-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.sector-row select { min-width: 200px; }
.print-menu { position: relative; display: inline-block; }
.print-menu .menu-more-list { min-width: 190px; }
.print-menu .menu-more-list button { width: 100%; text-align: left; }
.btn.is-sent { background: var(--basil-soft); border-color: var(--basil); color: var(--basil-strong); }

/* ---------- Etapa 11.2: estoque, reservas e fila ---------- */
.text-warn { color: var(--warning); }
.text-ok { color: var(--basil-strong); }
.recipe-table { width: 100%; border-collapse: collapse; }
.recipe-table th, .recipe-table td { padding: 6px; text-align: left; border-bottom: 1px solid var(--line); }
.recipe-table select { min-width: 180px; }
.recipe-total { margin-left: 12px; }
.option-stock-row select { min-width: 200px; }
.reservation-list .res-time { font-size: 1.15rem; margin-right: 6px; }
.grid-waitlist { display: grid; grid-template-columns: 2fr 90px 1.4fr 2fr auto; gap: 10px; align-items: end; }
.waitlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.waitlist-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); flex-wrap: wrap; }
.waitlist-item.is-called { border-color: var(--mustard); background: var(--mustard-soft); }
.wl-pos { font-size: 1.4rem; font-weight: 800; min-width: 44px; color: var(--basil); }
.wl-main { flex: 1; min-width: 200px; }
.tile-reserved { display: block; font-size: .72rem; font-weight: 700; color: var(--warning); margin-top: 2px; }
@media (max-width: 860px) { .grid-waitlist { grid-template-columns: 1fr 1fr; } }

/* ---------- Tema do painel ---------- */
.panel-theme-roles { display: grid; gap: 8px; }
.panel-theme-role { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; }
.panel-theme-role summary { cursor: pointer; }
.panel-theme-role[open] summary { margin-bottom: 10px; }
.panel-theme-preview { display: flex; border-radius: var(--radius-s); overflow: hidden; border: 1px solid var(--line); max-width: 420px; }
.panel-theme-preview .pv-side { background: var(--pv-side); color: #DDE3FF; padding: 14px 16px; font-weight: 700; }
.panel-theme-preview .pv-body { flex: 1; background: var(--pv-bg); color: var(--pv-ink); padding: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.panel-theme-preview .pv-btn { background: var(--pv-btn); color: var(--pv-on); padding: 6px 12px; border-radius: 8px; font-weight: 700; }
.panel-theme-preview .pv-acc { background: var(--pv-acc); color: #1C2321; padding: 4px 8px; border-radius: 6px; font-weight: 700; }

/* ---------- Relatórios ---------- */
.report-filters { align-items: end; }
.quick-periods { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-block; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .9rem; }
.chip.is-on, .chip:hover { background: var(--basil-soft); border-color: var(--basil); }
.report-cards .tally-item small { display: block; margin-top: 2px; font-weight: 700; }
.change.up { color: var(--basil-strong); }
.change.down { color: var(--danger); }
.report-breakdown { margin: -4px 0 14px; }
.bars svg { width: 100%; height: 150px; display: block; }
.bars .bar { fill: var(--basil); opacity: .75; }
.bars .bar-peak { fill: var(--mustard); }
.bars .bar:hover, .bars .bar-peak:hover { opacity: 1; }
.bars-labels { display: grid; font-size: .72rem; color: var(--muted); text-align: center; margin-top: 4px; }
.report-table td.num, .report-table th.num { white-space: nowrap; }

/* ---------- Celular e tablet ---------- */
@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar-wrap { position: fixed; inset: 0 auto 0 0; transform: translateX(-105%); transition: transform .2s ease; }
  .sidebar-wrap.is-open { transform: none; }
  .sidebar { width: 270px; }
  .menu-toggle { display: grid; }
  .topbar { padding: 10px 14px; }
  .content { padding: 18px 14px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .pix-grid { grid-template-columns: 1fr; justify-items: center; }
  .appearance { grid-template-columns: 1fr; }
  .board { grid-template-columns: repeat(5, 86%); scroll-snap-type: x mandatory; }
  .board-col { scroll-snap-align: start; }
  .product-price { text-align: left; min-width: 0; }
  .cat-row.is-child { padding-left: 16px; }
  .preview-wrap { position: static; }
  .day-row { grid-template-columns: 1fr; gap: 6px; }
  .day-actions { justify-content: flex-start; }
  .sub-hero-action { justify-items: start; }
  .auth-body { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .hide-mobile { display: none !important; }
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 15; }
}
@media (max-width: 640px) {
  .table-responsive thead { display: none; }
  .table-responsive tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
  .table-responsive td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 6px 14px; }
  .table-responsive td::before { content: attr(data-label); color: var(--muted); font-size: .84rem; font-weight: 600; }
  .table-responsive td.cell-main { display: block; }
  .table-responsive td.cell-main::before { content: none; }
  .branch-select select { max-width: 140px; }
  .user-chip .user-name { display: none; }
}

@media print {
  .sidebar-wrap, .topbar, .actions, .filters, .pagination { display: none !important; }
  .shell { display: block; }
  body { background: #fff; }
}
.code-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px; white-space: pre-wrap; word-break: break-all; font-size: .85rem; user-select: all; }

/* ---------- Etapa 13: caixa sem internet ---------- */
.offline-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 90; background: var(--mustard); color: #1C2321; padding: 10px 14px; border-radius: var(--radius); box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; }
.offline-body { background: var(--paper); }
.off-app { padding: 12px; max-width: 1400px; margin: 0 auto; }
.off-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.off-brand { font-size: 1.1rem; }
.off-status { padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.off-status.is-on { background: var(--basil-soft); color: var(--basil-strong); }
.off-status.is-off { background: var(--danger-soft); color: var(--danger); }
.off-queue { font-weight: 700; color: var(--warning); }
.off-back { margin-left: auto; }
.off-help { background: var(--mustard-soft); border: 2px solid var(--mustard); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
.off-main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; align-items: start; }
.off-search { width: 100%; margin-bottom: 8px; }
.off-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.off-cats a { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-size: .9rem; }
.off-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.off-product { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px; min-height: 76px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.off-product:hover { border-color: var(--basil); }
.off-product[disabled] { opacity: .5; cursor: not-allowed; }
.off-product span { color: var(--muted); font-size: .9rem; }
.off-cart { position: sticky; top: 10px; }
.off-items { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; max-height: 38vh; overflow: auto; }
.off-items li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.off-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.off-types label { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 6px; text-align: center; cursor: pointer; font-size: .9rem; }
.off-types label:has(input:checked) { background: var(--basil); color: var(--on-basil, #fff); border-color: var(--basil); }
.off-types input { position: absolute; opacity: 0; pointer-events: none; }
.off-summary > div { display: flex; justify-content: space-between; }
.off-total { font-size: 1.25rem; font-weight: 800; border-top: 1px solid var(--line); padding-top: 4px; margin-top: 4px; }
.off-error { color: var(--danger); font-weight: 700; margin: 0; }
.off-dialog { max-width: 520px; width: calc(100% - 24px); border: 0; border-radius: var(--radius); padding: 16px; }
.off-dialog fieldset { border: 1px solid var(--line); border-radius: var(--radius-s); margin: 0 0 8px; }
.off-rep { justify-content: space-between; }
.off-rep input { width: 64px; }
.off-qty input { width: 64px; }
.off-print { display: none; }
@media (max-width: 900px) { .off-main { grid-template-columns: 1fr; } .off-cart { position: static; } }
@media print {
  body.offline-body > *:not(.off-print) { display: none !important; }
  .off-print { display: block !important; }
  .off-page-break { page-break-before: always; }
}

/* ---------- Etapa 14.1: marca Lexxo ---------- */
.brand-symbol { width: 34px; height: auto; flex: none; }
.auth-logo { display: block; }
.auth-logo img { max-width: 260px; width: 100%; height: auto; }
.about { max-width: 980px; margin: 0 auto; }
.about-hero { background: #01051F; border-radius: var(--radius); padding: 28px 16px 18px; text-align: center; margin-bottom: 16px; }
.about-hero img { max-width: 320px; width: 80%; height: auto; }
.about-version { color: #9CA3C7; margin: 10px 0 0; font-weight: 700; letter-spacing: .04em; }
.about-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.about-contacts li { display: flex; justify-content: space-between; gap: 12px; }
.about-ver { font-size: .95rem; margin: 12px 0 4px; }
.about-news { margin: 0; padding-left: 18px; }
.about-foot { text-align: center; margin: 18px 0 0; }

/* Menu lateral: Lexxo à esquerda, o logotipo do estabelecimento à direita */
.sidebar .brand .brand-name { flex: 1; min-width: 0; }
.sidebar .brand .brand-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-est-logo { width: 42px; height: 42px; border-radius: 10px; object-fit: contain; background: #fff; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.brand-est-initials { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: .95rem;
  background: rgba(255,255,255,.12); color: #fff; letter-spacing: .02em; }

.menu-address { display: grid; gap: 6px; padding: 10px 12px; margin-bottom: 10px; border: 1px dashed var(--line); border-radius: var(--radius-s); }
.menu-address code { word-break: break-all; font-size: .95rem; }