/* =====================================================================
   PDV — estilos
   Tokens no :root. Para mudar a identidade, altere só esta seção.
   ===================================================================== */
:root {
  --bg: #F2F4F3;
  --surface: #FFFFFF;
  --surface-2: #F7F9F8;
  --ink: #18211F;
  --muted: #5E6B67;
  --line: #DDE3E0;
  --line-strong: #C5CFCB;
  --primary: #136F63;
  --primary-hover: #0F5C52;
  --primary-soft: #E3F1EE;
  --amber: #F2B33D;
  --amber-soft: #FFF4DC;
  --danger: #B42318;
  --danger-soft: #FDECEA;
  --ok: #1B7F3B;
  --ok-soft: #E6F4EA;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow-pop: 0 12px 32px rgba(24, 33, 31, .16);

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.6rem;
  --fs-total: clamp(2rem, 4vw, 2.75rem);

  --sidebar: 236px;
  --sidebar-mini: 72px;
  --on-primary: #FFFFFF;
  --on-ink: #FFFFFF;
  --warn-ink: #8A5300;
  --ocupada-soft: var(--ocupada-soft);
  --paper: #FFFFFF;
  --overlay: rgba(24, 33, 31, .45);
  color-scheme: light;
  --font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
.num, .money, td.r, .total-valor { font-variant-numeric: tabular-nums; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 650; }
h1 { font-size: var(--fs-xl); letter-spacing: -.01em; }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p { margin: 0; }
a { color: var(--primary); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.r { text-align: right; }
.grow { flex: 1; }
.row { display: flex; gap: .75rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.stack { display: grid; gap: .75rem; }
.stack-lg { display: grid; gap: 1.25rem; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 42px; padding: 0 1rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-weight: 550; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--muted); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--surface)); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.lg { min-height: 56px; font-size: var(--fs-lg); padding: 0 1.5rem; }
.btn.sm { min-height: 34px; padding: 0 .7rem; font-size: var(--fs-sm); }
.btn.block { width: 100%; }
.btn .kbd { font-size: var(--fs-xs); opacity: .7; font-weight: 500; }
.icon-btn { width: 38px; min-height: 38px; padding: 0; }

/* ---------- Formulários ---------- */
.field { display: grid; gap: .3rem; }
.field > span { font-size: var(--fs-sm); font-weight: 550; color: var(--muted); }
.input, select.input, textarea.input {
  width: 100%; min-height: 42px; padding: .55rem .75rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface);
}
textarea.input { min-height: 80px; resize: vertical; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.input.lg { min-height: 52px; font-size: var(--fs-lg); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem 1rem; }
.span-2 { grid-column: span 2; }
.check { display: flex; gap: .55rem; align-items: center; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }
.hint { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem .75rem; background: var(--surface); border-right: 1px solid var(--line);
}
.brand { display: flex; gap: .6rem; align-items: center; padding: .25rem .5rem 1rem; }
/* Selo da marca Lis PDV: lírio branco com faixa de pólen sobre o Verde Lis (assets/marca.css) */
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px; background: var(--lis-verde, #136F63); color: #fff;
  display: grid; place-items: center; font-weight: 700;
}
.brand-name { font-weight: 650; line-height: 1.15; }
.brand-sub { display: flex; align-items: flex-end; gap: .3rem; margin-top: .2rem; color: var(--ink); }
.brand-sub span { font-size: .62rem; font-weight: 650; letter-spacing: .06em; color: var(--lis-verde-logo, var(--primary)); line-height: 1; }
.nav a {
  display: flex; gap: .7rem; align-items: center;
  padding: .6rem .7rem; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.nav a svg { width: 20px; height: 20px; flex: none; stroke: var(--muted); }
.nav a:hover { background: var(--surface-2); }
.nav a.ativo { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav a.ativo svg { stroke: var(--primary); }
.sidebar-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: .75rem; display: grid; gap: .4rem; }
.user-chip { display: flex; gap: .6rem; align-items: center; padding: .25rem .5rem; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 600;
}
.main { min-width: 0; }
.page { padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem; max-width: 1280px; }
.page-head { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-head p { color: var(--muted); margin-top: .2rem; }
.topbar-mobile { display: none; }

/* ---------- Painéis e tabelas ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel-pad { padding: 1.25rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: left; font-weight: 600; color: var(--muted); padding: .7rem 1rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: .7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr.click { cursor: pointer; }
.table tbody tr.click:hover { background: var(--surface-2); }
.table th.r, .table td.r { text-align: right; }

.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.warn { background: var(--amber-soft); color: var(--warn-ink); border-color: transparent; }
.badge.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge.info { background: var(--primary-soft); color: var(--primary); border-color: transparent; }

.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: .7rem 1rem; cursor: pointer; color: var(--muted); font-weight: 550; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button.ativo { color: var(--primary); border-bottom-color: var(--primary); }

.toolbar { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.toolbar .input { max-width: 340px; }

.empty { padding: 3rem 1rem; text-align: center; color: var(--muted); display: grid; gap: .75rem; justify-items: center; }

/* Indicadores (dashboard / relatórios) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi { padding: 1rem 1.25rem; }
.kpi .k-label { font-size: var(--fs-sm); color: var(--muted); }
.kpi .k-valor { font-size: 1.6rem; font-weight: 650; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.kpi .k-sub { font-size: var(--fs-xs); color: var(--muted); }
.bars { display: grid; gap: .55rem; }
.bar-row { display: grid; grid-template-columns: minmax(110px, 150px) 1fr auto; gap: .75rem; align-items: center; font-size: var(--fs-sm); }
.bar-track { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--primary); border-radius: 999px; }
.chart-cols { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: .5rem; }
.chart-cols .col { flex: 1; background: var(--primary); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.chart-cols .col:hover { background: var(--primary-hover); }
.chart-x { display: flex; gap: 4px; font-size: 10px; color: var(--muted); margin-top: 4px; }
.chart-x span { flex: 1; text-align: center; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---------- PDV ---------- */
.pdv { display: grid; grid-template-columns: minmax(0, 1fr) 400px; height: 100vh; }
.pdv-produtos { display: flex; flex-direction: column; min-width: 0; padding: 1rem 1.25rem 0; gap: .9rem; overflow: hidden; }
.pdv-top { display: flex; gap: .75rem; align-items: center; }
.pdv-busca { position: relative; flex: 1; }
.pdv-busca svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; stroke: var(--muted); pointer-events: none; }
.pdv-busca .input { padding-left: 2.6rem; min-height: 52px; font-size: var(--fs-lg); }
.chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.chip { flex: none; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: .45rem .9rem; cursor: pointer; font-weight: 550; display: inline-flex; gap: .45rem; align-items: center; }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; }
.chip.ativo { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.grid-produtos { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; align-content: start; padding-bottom: 1.25rem; }
.prod {
  display: grid; gap: .35rem; text-align: left; padding: .8rem .85rem;
  border: 1px solid var(--line); border-left: 4px solid var(--cat, var(--line-strong));
  border-radius: var(--r-md); background: var(--surface); cursor: pointer; min-height: 92px;
}
.prod:hover { border-color: var(--line-strong); border-left-color: var(--cat, var(--muted)); background: var(--surface-2); }
.prod:active { transform: scale(.98); }
.prod-nome { font-weight: 550; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod-preco { margin-top: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.prod-preco small { font-weight: 500; color: var(--muted); }
.prod.sem-estoque { opacity: .6; }

/* O cupom: o elemento-assinatura do sistema */
.cupom-col { background: var(--bg); padding: 1rem 1rem 1rem 0; display: flex; flex-direction: column; min-height: 0; }
.cupom {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  position: relative;
}
.cupom::after {
  /* borda serrilhada de papel térmico */
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -10px; height: 10px;
  background:
    linear-gradient(-45deg, transparent 6px, var(--surface) 6px) 0 0 / 12px 10px repeat-x,
    linear-gradient(45deg, transparent 6px, var(--surface) 6px) 0 0 / 12px 10px repeat-x;
  filter: drop-shadow(0 1px 0 var(--line));
}
.cupom-head { padding: 1rem 1.1rem .75rem; border-bottom: 1px dashed var(--line-strong); display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.cupom-head .ident { font-size: var(--fs-sm); color: var(--muted); }
.cupom-itens { flex: 1; overflow-y: auto; padding: .25rem 0; }
.item {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem .75rem;
  padding: .6rem 1.1rem; border-bottom: 1px dotted var(--line);
}
.item.sel { background: var(--amber-soft); }
.item-nome { font-weight: 550; }
.item-det { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.item-total { font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.item-acoes { grid-column: 1 / -1; display: flex; gap: .35rem; align-items: center; margin-top: .3rem; }
.qtd { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.qtd button { width: 34px; height: 32px; border: 0; background: var(--surface); cursor: pointer; font-size: 1.1rem; }
.qtd button:hover { background: var(--surface-2); }
.qtd input { width: 64px; height: 32px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-variant-numeric: tabular-nums; }
.cupom-vazio { margin: auto; text-align: center; color: var(--muted); padding: 2rem; display: grid; gap: .4rem; }
.cupom-vazio svg { width: 44px; height: 44px; stroke: var(--line-strong); margin: 0 auto .25rem; }
.cupom-rodape { border-top: 1px dashed var(--line-strong); padding: .85rem 1.1rem 1.25rem; display: grid; gap: .6rem; }
.linha-valor { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .35rem 0 .25rem; }
.total-label { font-weight: 600; }
.total-valor {
  font-size: var(--fs-total); font-weight: 700; letter-spacing: -.02em;
  background: linear-gradient(transparent 62%, var(--amber-soft) 62%);
}
.cupom-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cupom-acoes .btn.primary { grid-column: 1 / -1; }

/* Pagamento */
.formas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.forma { border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-md); padding: .8rem .5rem; cursor: pointer; display: grid; gap: .3rem; justify-items: center; font-weight: 550; font-size: var(--fs-sm); }
.forma svg { width: 24px; height: 24px; stroke: var(--ink); }
.forma.ativo { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.forma.ativo svg { stroke: var(--primary); }
.pag-lista { display: grid; gap: .35rem; }
.pag-linha { display: flex; justify-content: space-between; align-items: center; padding: .5rem .75rem; background: var(--surface-2); border-radius: var(--r-sm); font-variant-numeric: tabular-nums; }
.pag-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: center; }
.pag-resumo div { padding: .7rem .5rem; border-radius: var(--r-md); background: var(--surface-2); }
.pag-resumo b { display: block; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.pag-resumo .troco { background: var(--ok-soft); color: var(--ok); }
.pag-resumo .falta { background: var(--amber-soft); color: var(--warn-ink); }
.atalhos-valor { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ---------- Modal ---------- */
dialog.modal {
  border: 0; padding: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); color: var(--ink); background: var(--surface);
}
dialog.modal.wide { width: min(860px, calc(100vw - 2rem)); }
dialog.modal::backdrop { background: var(--overlay); backdrop-filter: blur(2px); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.modal-body { padding: 1.25rem; overflow-y: auto; max-height: calc(100vh - 10rem); }
.modal-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .9rem 1.25rem; border-top: 1px solid var(--line); background: var(--surface-2); }
dialog.modal[open] { animation: surgir .16s ease-out; }
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Toast ---------- */
.toasts { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; z-index: 1000; }
.toast { background: var(--ink); color: var(--on-ink); padding: .75rem 1rem; border-radius: var(--r-md); box-shadow: var(--shadow-pop); max-width: 380px; font-size: var(--fs-sm); animation: surgir .16s ease-out; }
.toast.erro { background: var(--danger); }
.toast.ok { background: var(--ok); }
/* Botão "Entender" no aviso de erro: abre o diagnóstico daquele erro */
.toast { display: flex; align-items: center; gap: .75rem; }
.toast-entender { margin-left: auto; flex: none; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.14); color: inherit; border-radius: 8px; padding: .3rem .6rem; font: 600 var(--fs-xs) var(--font); cursor: pointer; }
.toast-entender:hover { background: rgba(255,255,255,.26); }

/* ---------- Login ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-arte { background: var(--primary); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-arte h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); max-width: 14ch; font-weight: 650; letter-spacing: -.02em; }
.auth-arte p { opacity: .85; max-width: 38ch; margin-top: .75rem; }
.auth-recibo {
  align-self: flex-start; background: #fff; color: var(--ink); width: 260px; padding: 1rem 1.1rem 1.4rem;
  border-radius: 6px 6px 0 0; font-size: var(--fs-sm); transform: rotate(-3deg); position: relative;
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
}
.auth-recibo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background: linear-gradient(-45deg, transparent 6px, #fff 6px) 0 0 / 12px 10px repeat-x,
              linear-gradient(45deg, transparent 6px, #fff 6px) 0 0 / 12px 10px repeat-x; }
.auth-recibo .l { display: flex; justify-content: space-between; padding: .2rem 0; font-variant-numeric: tabular-nums; }
.auth-recibo .t { border-top: 1px dashed var(--line-strong); margin-top: .5rem; padding-top: .5rem; font-weight: 700; font-size: var(--fs-lg); }
.auth-form { display: grid; place-items: center; padding: 2rem; }
.auth-box { width: min(380px, 100%); display: grid; gap: 1.25rem; }
.auth-box h1 { font-size: 1.75rem; }
.link-btn { border: 0; background: none; color: var(--primary); cursor: pointer; padding: 0; font-weight: 550; }
.alerta { padding: .75rem 1rem; border-radius: var(--r-sm); font-size: var(--fs-sm); background: var(--danger-soft); color: var(--danger); }
.alerta.info { background: var(--primary-soft); color: var(--primary); }
.alerta.warn { background: var(--amber-soft); color: var(--warn-ink); }

.loading { display: grid; place-items: center; min-height: 40vh; color: var(--muted); }
.spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .pdv { grid-template-columns: minmax(0,1fr) 340px; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 50; width: 260px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-pop); }
  .sidebar.aberta { transform: none; }
  .topbar-mobile { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
  .pdv { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - 56px); }
  .pdv-produtos { overflow: visible; padding-bottom: 1rem; }
  .grid-produtos { overflow: visible; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .cupom-col { padding: 0 1rem 1.5rem; }
  .cupom { max-height: none; }
  .cupom-itens { max-height: 50vh; }
  .auth { grid-template-columns: 1fr; }
  .auth-arte { display: none; }
  .two-col, .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-2 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .formas { grid-template-columns: repeat(2, 1fr); }
  .page { padding-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ---------- Situação da conta (teste grátis) ---------- */
.aviso-conta { display: grid; gap: .35rem; padding: .7rem .75rem; margin: 0 .25rem .25rem; border-radius: var(--r-md); background: var(--amber-soft); font-size: var(--fs-sm); }
.aviso-conta strong { font-size: var(--fs-sm); }
.aviso-conta span { color: var(--warn-ink); line-height: 1.35; }
.aviso-conta .barra { height: 5px; border-radius: 99px; background: rgba(138, 90, 0, .15); overflow: hidden; }
.aviso-conta .barra div { height: 100%; background: var(--amber); }
.aviso-conta.bloqueado { background: var(--danger-soft); }
.aviso-conta.bloqueado span { color: var(--danger); }
.aviso-conta .btn { margin-top: .15rem; }

/* =====================================================================
   PIX, mesas, delivery
   ===================================================================== */
:root { --livre: #1B7F3B; --ocupada: #C77700; --conta: #B42318; }
.alerta.ok { background: var(--ok-soft); color: var(--ok); }
.link-quebra { word-break: break-all; font-weight: 550; }
.nav a { position: relative; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--danger); color: #fff; font-size: .72rem; font-weight: 700; display: inline-grid; place-items: center; }
.badge.canal-mesa { background: var(--ocupada-soft); color: var(--warn-ink); border-color: transparent; }
.badge.canal-delivery { background: #E8EEFF; color: #2347B8; border-color: transparent; }
.badge.canal-retirada { background: #F3E8FF; color: #6B2FB3; border-color: transparent; }

/* QR */
.qr-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: .5rem; line-height: 0; flex: none; width: 200px; }
.qr-box svg { width: 100%; height: auto; display: block; }
.qr-box.sm { width: 130px; }

/* PIX no recebimento */
.pix-area { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-md); padding: 1rem; }
.pix-linha { gap: 1.1rem; align-items: center; }
.pix-valor { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pix-status { font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: .45rem; }
.pix-status.auto { color: var(--primary); font-weight: 600; }
.pix-carregando { display: flex; align-items: center; gap: .6rem; color: var(--muted); }
.pix-carregando .spinner { width: 20px; height: 20px; border-width: 2px; }
.pulso { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); animation: pulsar 1.4s ease-out infinite; flex: none; }
@keyframes pulsar { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }

/* Foto do produto */
.foto-produto { width: 112px; height: 112px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); display: grid; place-items: center; cursor: pointer; overflow: hidden; background: var(--surface-2); color: var(--muted); position: relative; flex: none; }
.foto-produto img { width: 100%; height: 100%; object-fit: cover; }
.foto-produto span { display: grid; justify-items: center; gap: .2rem; }
.foto-produto.enviando::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--surface) 70%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23136F63' stroke-width='3' stroke-dasharray='40 20'/%3E%3C/svg%3E") center/32px no-repeat; }
textarea.input { resize: vertical; min-height: 64px; }

/* Segmentado */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: none; padding: .55rem .9rem; cursor: pointer; font-weight: 550; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.ativo { background: var(--ink); color: var(--on-ink); }

/* ---------- Mesas ---------- */
.mesas-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.dot-sit { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--muted); }
.dot-sit.livre { background: var(--livre); } .dot-sit.ocupada { background: var(--ocupada); } .dot-sit.conta { background: var(--conta); }
.sep-v { width: 1px; height: 14px; background: var(--line-strong); }
.mesas-page .chips { margin-bottom: 1rem; }
.mesas-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.mesas-layout.com-painel { grid-template-columns: minmax(0, 1fr) 380px; }
.mesas-area { min-width: 0; overflow: auto; }
.mapa { position: relative; background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 100%;
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1.2px); background-size: var(--c) var(--c); }
.mapa.editando { outline: 2px dashed var(--primary); outline-offset: 3px; }
.mesa-mapa, .mesa-card {
  position: absolute; border: 2px solid var(--livre); background: var(--ok-soft); color: var(--ink); border-radius: 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 2px; line-height: 1.1; font: inherit;
  transition: transform .12s, box-shadow .12s; touch-action: none; user-select: none; overflow: hidden;
}
.mesa-mapa.f-redonda { border-radius: 50%; }
.mesa-mapa:hover, .mesa-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(24,33,31,.12); }
.mesa-mapa.sel, .mesa-card.sel { box-shadow: 0 0 0 3px var(--ink); }
.sit-ocupada { border-color: var(--ocupada) !important; background: var(--ocupada-soft) !important; }
.sit-conta { border-color: var(--conta) !important; background: var(--danger-soft) !important; animation: chamar 1.6s ease-in-out infinite; }
@keyframes chamar { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--conta) 22%, transparent); } }
.mm-nome { font-size: clamp(.85rem, calc(var(--c, 30px) * .5), 1.2rem); font-weight: 700; }
.mm-total { font-size: .78rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.mm-info { font-size: .68rem; color: var(--muted); white-space: nowrap; }
.mm-info.demora { color: var(--danger); font-weight: 650; }
.mm-alerta { position: absolute; top: 3px; right: 4px; color: var(--conta); }
.mapa.editando .mesa-mapa { cursor: grab; border-style: dashed; }
.mesa-mapa.arrastando { cursor: grabbing; z-index: 5; box-shadow: var(--shadow-pop); transform: scale(1.04); transition: none; }
.editar-barra { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; padding: .6rem .8rem; background: var(--primary-soft); border-radius: var(--r-md); color: var(--primary); }
.mesas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .65rem; }
.mesa-card { position: relative; min-height: 104px; padding: .6rem .4rem; gap: .15rem; }
.mesa-card .mm-nome { font-size: 1.5rem; }
.mesa-card .mm-sit { font-size: .7rem; color: var(--muted); margin-top: .15rem; }

/* Painel da mesa */
.mesa-painel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; display: grid; gap: .85rem; }
.md-cab { display: flex; align-items: center; gap: .6rem; }
.md-nome { font-size: 1.35rem; font-weight: 700; }
.sit { font-size: .75rem; font-weight: 700; padding: .25rem .6rem; border-radius: 99px; white-space: nowrap; }
.sit.sit-livre { background: var(--ok-soft); color: var(--livre); }
.sit.sit-ocupada { background: var(--ocupada-soft); color: var(--warn-ink); border: 0 !important; animation: none; }
.sit.sit-conta { background: var(--danger-soft); color: var(--conta); border: 0 !important; animation: none; }
.md-info { display: flex; flex-wrap: wrap; gap: .35rem .9rem; color: var(--muted); font-size: var(--fs-sm); }
.md-info span { display: inline-flex; align-items: center; gap: .3rem; }
.md-itens { display: grid; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.md-item { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; font-size: var(--fs-sm); }
.md-item + .md-item { border-top: 1px solid var(--line); }
.md-q { font-weight: 700; min-width: 2.2rem; font-variant-numeric: tabular-nums; }
.md-item .r { font-variant-numeric: tabular-nums; white-space: nowrap; }
.obs { color: var(--warn-ink); font-style: italic; }
.md-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1rem; }
.md-total strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.md-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.md-acoes .btn.primary { grid-column: 1 / -1; }
.md-acoes .btn.receber { grid-column: 1 / -1; background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.md-acoes .btn.conta-on { background: var(--danger-soft); color: var(--conta); border-color: transparent; }
.md-livre { display: grid; justify-items: center; gap: .9rem; text-align: center; padding: 1.5rem .5rem; color: var(--muted); }
.qtd.grande button { width: 54px; height: 54px; font-size: 1.5rem; }
.qtd.grande span { min-width: 64px; text-align: center; font-size: 1.6rem; font-weight: 700; color: var(--ink); }
.qtd span { min-width: 40px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; }
.md-destinos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.mesa-mini { border: 2px solid var(--livre); background: var(--ok-soft); border-radius: 10px; padding: .6rem .3rem; display: grid; gap: .1rem; cursor: pointer; font: inherit; }

/* Seletor de itens */
.seletor { display: grid; gap: .75rem; }
.sel-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .5rem; max-height: 46vh; overflow-y: auto; padding: 2px; }
.sel-prod { position: relative; text-align: left; border: 1px solid var(--line); border-left: 4px solid var(--cat); background: var(--surface); border-radius: var(--r-sm); padding: .6rem .65rem; cursor: pointer; display: grid; gap: .3rem; min-height: 72px; font: inherit; }
.sel-prod:active { transform: scale(.97); }
.sel-prod.tem { background: var(--primary-soft); border-color: var(--primary); }
.sel-nome { font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; }
.sel-preco { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.sel-n { position: absolute; top: -7px; right: -5px; background: var(--primary); color: var(--on-primary); font-size: .75rem; font-weight: 700; min-width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; padding: 0 6px; }
.sel-carrinho { border-top: 1px solid var(--line); padding-top: .6rem; }
.sel-lista { display: grid; gap: .4rem; max-height: 26vh; overflow-y: auto; }
.sel-item { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); }

/* ---------- Delivery ---------- */
.loja-aberta { border-color: var(--livre); color: var(--livre); font-weight: 600; }
.loja-fechada { border-color: var(--conta); color: var(--conta); font-weight: 600; }
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.kb-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .75rem; min-height: 240px; }
.kb-col header { display: flex; align-items: center; gap: .5rem; margin: .1rem .2rem .7rem; }
.kb-col h2 { font-size: var(--fs-md); }
.kb-n { background: var(--ink); color: var(--on-ink); border-radius: 99px; font-size: .75rem; font-weight: 700; padding: .05rem .5rem; }
.kb-novos .kb-n { background: var(--danger); }
.kb-lista { display: grid; gap: .65rem; }
.kb-vazio { color: var(--muted); font-size: var(--fs-sm); text-align: center; padding: 1.5rem .5rem; }
.kb-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: .75rem; display: grid; gap: .45rem; cursor: pointer; box-shadow: 0 1px 2px rgba(24,33,31,.05); }
.kb-card.novo { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); animation: surgir .2s ease-out; }
.kb-card.atraso { border-left: 4px solid var(--danger); }
.kb-topo { display: flex; align-items: center; gap: .45rem; }
.kb-tempo { font-size: var(--fs-xs); color: var(--muted); display: inline-flex; gap: .25rem; align-items: center; }
.kb-tempo.demora { color: var(--danger); font-weight: 700; }
.kb-cliente { font-weight: 600; }
.kb-itens { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); display: grid; gap: .15rem; }
.kb-itens em { color: var(--warn-ink); }
.kb-rodape { display: flex; align-items: center; gap: .4rem; }
.kb-rodape strong { font-variant-numeric: tabular-nums; }
.kb-acoes { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
.concluidos summary { cursor: pointer; list-style: none; }
.concluidos summary::-webkit-details-marker { display: none; }
.timeline { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: var(--fs-sm); }
.formas.pequenas { grid-template-columns: repeat(4, 1fr); }
.forma-radio { position: relative; }
.forma-radio input { position: absolute; opacity: 0; }
.forma-radio span { display: block; text-align: center; padding: .65rem .3rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); font-weight: 550; cursor: pointer; }
.forma-radio input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.forma-radio input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); }

@media (max-width: 1100px) {
  .mesas-layout.com-painel { grid-template-columns: minmax(0, 1fr) 330px; }
}
@media (max-width: 900px) {
  .kanban { grid-template-columns: 1fr; }
  .mesas-layout.com-painel { grid-template-columns: 1fr; }
  .mesa-painel { position: fixed; inset: 0; z-index: 60; border-radius: 0; max-height: none; top: 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  dialog.modal.modal-seletor { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .modal-seletor[open] { display: flex; flex-direction: column; }
  .modal-seletor .modal-body { flex: 1; max-height: none; }
  .modal-seletor .sel-grade { max-height: none; }
  .formas.pequenas { grid-template-columns: repeat(2, 1fr); }
}
.modulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.modulo { display: flex; gap: .9rem; align-items: flex-start; }
.modulo h3 { margin-bottom: .2rem; }
.modulo-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex: none; }
.mesa-painel, .g-detalhe { grid-template-columns: minmax(0, 1fr); }
.mesa-painel > *, .g-detalhe > * { min-width: 0; }
.md-acoes .btn { white-space: normal; justify-content: center; text-align: center; line-height: 1.2; padding-left: .6rem; padding-right: .6rem; }
.mapa.compacto .mm-info, .mapa.compacto .mm-alerta { display: none; }
.mapa.compacto .mm-total { font-size: .62rem; }
.mapa.compacto .mm-nome { font-size: .95rem; }
.modal-seletor .modal-foot { display: grid; grid-template-columns: auto minmax(0, 1fr); padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); }
.modal-seletor #sel-enviar { white-space: normal; line-height: 1.2; font-size: 1rem; }

/* =====================================================================
   Tema escuro
   O tema é aplicado em <html data-tema="escuro|claro"> por js/tema.js
   (antes de pintar a tela, sem piscar). Só os tokens mudam.
   ===================================================================== */
html[data-tema="escuro"] {
  --bg: #0C1211;
  --surface: #131A19;
  --surface-2: #19221F;
  --ink: #E4EBE8;
  --muted: #8F9E99;
  --line: #233029;
  --line-strong: #31403B;
  --primary: #34C3AE;
  --primary-hover: #52D3BF;
  --primary-soft: #12302B;
  --on-primary: #04211C;
  --on-ink: #0C1211;
  --amber: #F2B33D;
  --amber-soft: #2D2514;
  --warn-ink: #F3C66E;
  --danger: #F2766A;
  --danger-soft: #35191A;
  --ok: #55C98A;
  --ok-soft: #13291D;
  --ocupada-soft: #2E2415;
  --livre: #55C98A; --ocupada: #F0A23A; --conta: #F2766A;
  --paper: #F6F4EE;
  --overlay: rgba(0, 0, 0, .6);
  --shadow-pop: 0 18px 44px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
html[data-tema="escuro"] body { background: var(--bg); }
html[data-tema="escuro"] .badge.canal-delivery { background: #182447; color: #9DB4FF; }
html[data-tema="escuro"] .badge.canal-retirada { background: #2A1A40; color: #CBA6FF; }
html[data-tema="escuro"] .toast.erro { background: #7A1F17; color: #fff; }
html[data-tema="escuro"] .toast.ok { background: #1B5E35; color: #fff; }
html[data-tema="escuro"] .total-valor { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--amber) 22%, transparent) 62%); }
html[data-tema="escuro"] .auth-arte { background: linear-gradient(150deg, #0F4F47, #0A2F2A); }
html[data-tema="escuro"] .mapa { background-color: var(--surface); }
html[data-tema="escuro"] .mesa-mapa, html[data-tema="escuro"] .mesa-card, html[data-tema="escuro"] .mesa-mini { color: var(--ink); }
html[data-tema="escuro"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-tema="escuro"] ::-webkit-scrollbar-thumb { background: #2A3633; border-radius: 99px; border: 2px solid var(--bg); }
html[data-tema="escuro"] ::-webkit-scrollbar-track { background: transparent; }
html[data-tema="escuro"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); }
html.trocando-tema *, html.trocando-tema *::before, html.trocando-tema *::after { transition: background-color .25s, border-color .25s, color .25s !important; }

/* =====================================================================
   Menu lateral recolhível
   .menu-auto: mostra só os ícones e abre ao passar o mouse.
   .menu-fixo: fica sempre aberto.
   ===================================================================== */
.sidebar { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.sidebar::-webkit-scrollbar { display: none; }
.brand { position: relative; }
.brand > div:not(.brand-mark), .nav a span, .user-chip .grow, .sair-rotulo, .tema-rotulo { transition: opacity .16s ease; white-space: nowrap; }
.nav { display: grid; gap: 2px; }
.nav a { padding-left: 14px; transition: background .15s, color .15s; }
.nav a svg { transition: transform .18s ease, stroke .15s; }
.nav a:hover svg { transform: scale(1.08); }
.nav a.ativo { position: relative; }
.nav a.ativo::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.btn-fixar { position: absolute; right: 0; top: 50%; transform: translateY(-75%); width: 30px; height: 30px; min-height: 30px; border-radius: 8px; color: var(--muted); }
.btn-fixar svg { width: 18px; height: 18px; transition: transform .2s; }
.menu-fixo .btn-fixar svg { transform: rotate(180deg); }
.sidebar-foot .btn.ghost { padding-left: 16px; }
.btn-tema svg, .btn-sair svg { flex: none; }

@media (min-width: 901px) {
  .shell { transition: grid-template-columns .22s ease; }
  .shell.menu-auto { grid-template-columns: var(--sidebar-mini) 1fr; }
  .shell.menu-auto .main { grid-column: 2; }
  .shell.menu-auto .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 45; width: var(--sidebar);
    transition: width .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s;
  }
  .shell.menu-auto .sidebar:not(.recolhida) { box-shadow: 12px 0 40px rgba(0, 0, 0, .14); }
  .sidebar.recolhida { width: var(--sidebar-mini) !important; }
  .sidebar.recolhida .brand > div:not(.brand-mark), .sidebar.recolhida .nav a span:not(.nav-badge),
  .sidebar.recolhida .user-chip .grow, .sidebar.recolhida .sair-rotulo, .sidebar.recolhida .tema-rotulo,
  .sidebar.recolhida .btn-fixar { opacity: 0; pointer-events: none; }
  .sidebar.recolhida .aviso-conta { display: none; }
  .sidebar.recolhida .aviso-mini { display: block; }
  .sidebar.recolhida .nav-badge { position: absolute; top: 3px; left: 34px; min-width: 16px; height: 16px; font-size: .62rem; padding: 0 4px; }
}
.aviso-mini { display: none; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); margin: 0 0 .25rem 31px; box-shadow: 0 0 0 4px var(--amber-soft); }
.aviso-mini.bloq { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }

/* Interruptor de tema */
.tema-switch { margin-left: auto; width: 34px; height: 20px; border-radius: 99px; background: var(--line-strong); position: relative; flex: none; transition: background .2s; }
.tema-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
html[data-tema="escuro"] .tema-switch { background: var(--primary); }
html[data-tema="escuro"] .tema-switch::after { transform: translateX(14px); }
.sidebar.recolhida .tema-switch { opacity: 0; }

/* =====================================================================
   Componentes novos: Minha conta, Etiquetas, Balança, Plataforma
   ===================================================================== */
.page-head .acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.panel { transition: border-color .15s, box-shadow .15s; }
.kpi .k-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); margin-bottom: .55rem; }
.kpi .k-ic svg { width: 19px; height: 19px; }
.kpi .k-var { display: inline-flex; align-items: center; gap: .2rem; font-size: var(--fs-xs); font-weight: 650; padding: .1rem .45rem; border-radius: 99px; margin-left: .35rem; vertical-align: middle; }
.k-var.sobe { background: var(--ok-soft); color: var(--ok); }
.k-var.desce { background: var(--danger-soft); color: var(--danger); }
.kpi.destaque { background: linear-gradient(135deg, #136F63 0%, #0F8A78 55%, #1AA38D 100%); border-color: transparent; color: #fff; position: relative; overflow: hidden; }
.kpi.destaque::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.08); }
.kpi.destaque .k-label, .kpi.destaque .k-sub { color: rgba(255,255,255,.82); }
.kpi.destaque .k-ic { background: rgba(255,255,255,.16); color: #fff; }
.kpi.cor-ambar .k-ic { background: var(--amber-soft); color: var(--warn-ink); }
.kpi.cor-azul .k-ic { background: color-mix(in srgb, #3B6FE0 14%, var(--surface)); color: #3B6FE0; }
.kpi.cor-roxo .k-ic { background: color-mix(in srgb, #8B5CF6 14%, var(--surface)); color: #8B5CF6; }
.kpi.cor-vermelho .k-ic { background: var(--danger-soft); color: var(--danger); }

/* Ranking de lojas (Plataforma) */
.rank-barra { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: .35rem; min-width: 80px; }
.rank-barra div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--primary), #3BB8A4); }
.rank-pos { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; font-weight: 700; font-size: .8rem; background: var(--surface-2); color: var(--muted); }
.rank-pos.p1 { background: #FDE9B4; color: #7A5300; } .rank-pos.p2 { background: #E6EAEE; color: #4A5560; } .rank-pos.p3 { background: #F6D9C3; color: #7A3E12; }
.periodos { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.periodos button { border: 0; background: transparent; color: var(--muted); font-weight: 600; padding: .45rem .85rem; border-radius: 9px; cursor: pointer; }
.periodos button.ativo { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.donut-legenda { display: grid; gap: .45rem; font-size: var(--fs-sm); }
.donut-legenda div { display: flex; align-items: center; gap: .5rem; }
.donut-legenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.chart-cols .col { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 75%, #fff) 0%, var(--primary) 100%); transition: opacity .15s; }
html[data-tema="escuro"] .chart-cols .col { background: linear-gradient(180deg, #52D3BF 0%, #1E8F7E 100%); }
.chart-cols:hover .col { opacity: .55; }
.chart-cols .col:hover { opacity: 1; }

/* Minha conta */
.conta-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.plano-card { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 1.4rem 1.5rem; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #1AA38D 0%, #136F63 45%, #0B3F38 100%); display: grid; gap: .9rem; }
.plano-card::before { content: ""; position: absolute; inset: auto -40px -60px auto; width: 220px; height: 220px; border-radius: 50%; border: 28px solid rgba(255,255,255,.06); }
.plano-card .pc-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.plano-card .pc-rot { font-size: var(--fs-sm); opacity: .8; }
.plano-card .pc-nome { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.plano-card .pc-valor { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.plano-card .pc-valor small { font-size: 1rem; opacity: .8; font-weight: 500; }
.plano-card .pc-info { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: var(--fs-sm); opacity: .92; }
.plano-card .btn { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }
.plano-card .btn:hover { background: rgba(255,255,255,.24); }
.plano-card .btn.claro { background: #fff; color: #0B3F38; border-color: #fff; }
.selo-status { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 99px; font-size: .78rem; font-weight: 700; background: rgba(255,255,255,.16); }
.selo-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7CF0B5; }
.selo-status.warn::before { background: #FFD27A; } .selo-status.danger::before { background: #FF9A8F; }
.prox-pag { display: grid; gap: .6rem; padding: 1.25rem; }
.prox-pag .pp-valor { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.prox-pag .pp-dias { font-size: var(--fs-sm); font-weight: 600; }
.pp-dias.atrasado { color: var(--danger); } .pp-dias.perto { color: var(--warn-ink); } .pp-dias.ok { color: var(--ok); }
.pendencias { display: grid; gap: .5rem; }
.pend { display: flex; gap: .8rem; align-items: center; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.pend .p-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.pend .p-ic svg { width: 18px; height: 18px; }
.pend.alta .p-ic { background: var(--danger-soft); color: var(--danger); }
.pend.media .p-ic { background: var(--amber-soft); color: var(--warn-ink); }
.pend.ok .p-ic { background: var(--ok-soft); color: var(--ok); }
.pend.info .p-ic { background: var(--primary-soft); color: var(--primary); }
.pend .grow small { display: block; color: var(--muted); }
.uso-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.uso { padding: .85rem 1rem; border-radius: var(--r-md); background: var(--surface-2); }
.uso b { display: block; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.uso span { font-size: var(--fs-xs); color: var(--muted); }
.uso .medidor { height: 5px; border-radius: 99px; background: var(--line); margin-top: .45rem; overflow: hidden; }
.uso .medidor div { height: 100%; background: var(--primary); border-radius: 99px; }
.pacotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .85rem; }
.pacote { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: transform .15s, box-shadow .15s, border-color .15s; position: relative; }
.pacote:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); border-color: var(--line-strong); }
.pacote .pk-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.pacote .pk-ic svg { width: 22px; height: 22px; }
.pacote .pk-preco { font-weight: 700; font-variant-numeric: tabular-nums; }
.pacote .pk-preco small { color: var(--muted); font-weight: 500; }
.pacote.ativo-ja { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
.pacote .pk-selo { position: absolute; top: .9rem; right: .9rem; }

/* Gerador de códigos */
.gerador { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 1rem; align-items: start; }
.prev-wrap { position: sticky; top: 1rem; display: grid; gap: .75rem; }
.prev-palco { background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50% / 18px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; display: grid; place-items: center; min-height: 260px; }
.etiqueta { background: #fff; color: #111; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 3mm; display: grid; gap: 1mm; justify-items: center; text-align: center; font-family: var(--font); overflow: hidden; }
.etiqueta .e-nome { font-weight: 700; line-height: 1.1; font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etiqueta .e-preco { font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.etiqueta .e-preco small { font-size: 9px; font-weight: 600; }
.etiqueta svg { max-width: 100%; height: auto; display: block; }
.etiqueta .e-linha { display: flex; gap: 2mm; align-items: center; justify-content: center; width: 100%; }
.tipo-cod { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; }
.tipo-cod label { position: relative; }
.tipo-cod input { position: absolute; opacity: 0; }
.tipo-cod span { display: grid; gap: .15rem; padding: .65rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer; font-weight: 600; font-size: var(--fs-sm); background: var(--surface); }
.tipo-cod span small { font-weight: 500; color: var(--muted); font-size: var(--fs-xs); }
.tipo-cod input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.tipo-cod input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); }
.cor-qr { display: flex; gap: .4rem; }
.cor-qr button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; }
.cor-qr button.ativo { box-shadow: 0 0 0 2px var(--primary); }
.lista-etq { display: grid; gap: .35rem; max-height: 280px; overflow-y: auto; }
.lista-etq .row { padding: .4rem .6rem; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-sm); }
.range-val { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.5ch; text-align: right; }
input[type="range"] { accent-color: var(--primary); width: 100%; }

/* Balança */
.balanca-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 99px; font-size: var(--fs-xs); font-weight: 650; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); cursor: pointer; }
.balanca-chip .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.balanca-chip.on { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.balanca-chip.on .pt { background: var(--ok); animation: pulsar 1.6s ease-out infinite; }
.peso-visor { background: #0B1513; color: #7CF0B5; border-radius: var(--r-md); padding: 1rem 1.25rem; font-family: ui-monospace, "SF Mono", Consolas, monospace; display: grid; gap: .25rem; text-align: right; box-shadow: inset 0 2px 10px rgba(0,0,0,.4); }
.peso-visor .pv-peso { font-size: 2.6rem; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; line-height: 1; }
.peso-visor .pv-peso small { font-size: 1rem; opacity: .7; margin-left: .25rem; }
.peso-visor .pv-info { display: flex; justify-content: space-between; font-size: .8rem; color: #8FB7AA; font-family: var(--font); }
.peso-visor.instavel .pv-peso { color: #FFD27A; }
.peso-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1rem; }
.peso-total strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }

@media (max-width: 1000px) {
  .gerador, .conta-hero { grid-template-columns: 1fr; }
  .prev-wrap { position: static; }
}

/* Impressão de etiquetas (folha gerada em janela própria usa estas regras) */
@media print {
  body.imprimindo-etq > *:not(#folha-etq) { display: none !important; }
}
.brand-mark, .avatar { flex: none; }
.brand > div:nth-child(2) { min-width: 0; padding-right: 30px; }
.brand-name, .brand-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pacote > .row { width: 100%; }
.etiqueta { align-content: center; }
.etiqueta > svg, .etiqueta .e-linha svg { max-height: calc(100% - 10mm); width: auto; }

/* ---------- Contingência: sem internet / fila de vendas ---------- */
.rede-status {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1001;
  max-width: calc(100vw - 2rem); padding: .55rem 1rem; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--shadow-pop);
  display: inline-flex; align-items: center; gap: .5rem;
}
.rede-status[hidden] { display: none; }
.rede-status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; flex: none; }
.rede-status.off { background: var(--amber-soft); color: var(--warn-ink); outline: 1px solid color-mix(in srgb, var(--warn-ink) 30%, transparent); }
.rede-status.off::before { animation: pulsar 1.4s ease-in-out infinite; }
.rede-status.enviando { background: var(--primary-soft); color: var(--primary); }
.rede-status.erro { background: var(--danger-soft); color: var(--danger); }
@keyframes pulsar { 50% { opacity: .25; } }
.cupom-rodape .ja-pago { color: var(--ok); font-weight: 600; }
.cupom-rodape .ja-pago[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .rede-status.off::before { animation: none; } }

/* ---------- Gestão (compras, financeiro, fiado, alertas, validade, promoções) ---------- */
.item-promo { font-size: var(--fs-xs); color: var(--ok); font-weight: 600; display: inline-flex; gap: .25rem; align-items: center; margin-top: .1rem; }
.cupom-rodape .promo { color: var(--ok); }
.cupom-rodape .linha-valor[hidden] { display: none; }
.drop-xml { display: flex; gap: 1rem; align-items: center; cursor: pointer; border: 2px dashed var(--line-strong); color: var(--muted); }
.drop-xml strong { color: var(--ink); }
.drop-xml.sobre, .drop-xml:hover { border-color: var(--primary); background: var(--primary-soft); }
.nf-tabela td { vertical-align: top; }
.nf-tabela .nf-ignorado { opacity: .5; }
.nf-info { display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: center; font-size: var(--fs-sm); color: var(--muted); }
.nf-info strong { color: var(--ink); }
.dre td { padding-top: .6rem; padding-bottom: .6rem; }
.dre .dre-total td { font-weight: 700; background: var(--surface-2); font-size: 1.02rem; }
.dre .dre-desp td:first-child { padding-left: 1.75rem; }
.fluxo-barras { display: grid; gap: 3px; }
.fluxo-barras span { display: block; height: 6px; border-radius: 3px; min-width: 0; }
.fluxo-barras .e { background: var(--ok); }
.fluxo-barras .s { background: var(--danger); }
.conf-linha { display: grid; grid-template-columns: 1fr 150px auto; gap: .75rem; align-items: center; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.alertas-lista { display: grid; }
.alerta-item { display: flex; gap: .75rem; align-items: center; padding: .8rem 1.25rem; border-bottom: 1px solid var(--line); }
.alerta-item:last-child { border-bottom: 0; }
.alerta-item.alto { background: color-mix(in srgb, var(--danger-soft) 55%, transparent); }
.resumo-prev .resumo-total { font-size: 2.2rem; font-weight: 700; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.resumo-prev .resumo-h { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 1.2rem 0 .3rem; }
.resumo-linha { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.resumo-linha strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.txt-danger { color: var(--danger); }
.txt-ok { color: var(--ok); }
.link-x { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 .25rem; font-size: .8em; }
label.chip { cursor: pointer; }
@media (max-width: 900px) {
  .conf-linha { grid-template-columns: 1fr 120px; }
  .drop-xml { flex-direction: column; text-align: center; }
}
.resumo-cols { align-items: start; }
.btn.lg.icon-btn { width: 56px; padding: 0; justify-content: center; }
.btn svg { flex-shrink: 0; }

/* =====================================================================
   Restaurante: tempo das mesas, cozinha (KDS), aprovação, transferência,
   desempenho do garçom e regras de serviço/couvert
   ===================================================================== */
:root { --t-ok: #1B7F3B; --t-alerta: #D98A00; --t-critico: #C2341F; }
html[data-tema="escuro"] { --t-ok: #55C98A; --t-alerta: #F2B33D; --t-critico: #F2766A; }
.txt-ok { color: var(--ok); } .txt-alerta { color: var(--warn-ink); } .txt-perigo { color: var(--danger); }
.nowrap { white-space: nowrap; }
.avatar.sm { width: 28px; height: 28px; font-size: .72rem; }
.link-btn { border: 0; background: none; padding: 0; color: var(--primary); font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; text-decoration: underline; }

/* Barra de tempo de ocupação (no rodapé do cartão da mesa) */
.tempo-barra { display: inline-block; width: 26px; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; vertical-align: middle; }
.tempo-barra i { display: block; height: 100%; border-radius: 99px; background: var(--t-ok); transition: width .4s; }
.tempo-barra.t-alerta i { background: var(--t-alerta); } .tempo-barra.t-critico i { background: var(--t-critico); }
.mesa-mapa .tempo-barra, .mesa-card .tempo-barra, .g-mesa .tempo-barra { position: absolute; left: 6px; right: 6px; bottom: 4px; width: auto; height: 4px; }
.mm-info.t-alerta, .g-sub.t-alerta { color: var(--warn-ink); font-weight: 650; }
.mm-info.t-critico, .g-sub.t-critico { color: var(--t-critico); font-weight: 700; }
.mesa-mapa.t-alerta, .mesa-card.t-alerta, .g-mesa.t-alerta { box-shadow: inset 0 0 0 1px var(--t-alerta); }
.mesa-mapa.t-critico, .mesa-card.t-critico, .g-mesa.t-critico { box-shadow: inset 0 0 0 2px var(--t-critico); }
.mesa-mapa.sel.t-alerta, .mesa-mapa.sel.t-critico, .mesa-card.sel.t-alerta, .mesa-card.sel.t-critico { box-shadow: 0 0 0 3px var(--ink); }
.mm-ocioso, .g-ocioso { font-size: .62rem; font-weight: 700; color: #6B4A00; background: var(--amber-soft); border-radius: 99px; padding: 0 .4rem; white-space: nowrap; }
html[data-tema="escuro"] .mm-ocioso, html[data-tema="escuro"] .g-ocioso { color: var(--warn-ink); }
.mapa.compacto .mm-ocioso, .mapa.compacto .mm-selos { display: none; }
.mm-selos { position: absolute; top: 3px; left: 4px; display: flex; gap: 2px; }
.g-mesa .mm-selos { top: 6px; left: 6px; }
.selo-cz { display: inline-flex; align-items: center; gap: 2px; font-size: .62rem; font-weight: 700; padding: 1px 5px; border-radius: 99px; line-height: 1.3; border: 0; }
.selo-cz.pronto { background: var(--ok); color: #fff; animation: chamar-pronto 1.4s ease-in-out infinite; }
.selo-cz.aguardando { background: var(--amber); color: #3A2800; }
.selo-cz.preparo { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: var(--primary); }
.selo-cz.clicavel { cursor: pointer; font-size: .75rem; padding: 2px 8px; }
.mesas-resumo .selo-cz { font-size: .75rem; padding: 2px 8px; }
@keyframes chamar-pronto { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 30%, transparent); } }
.mesa-mapa.cz-pronto, .mesa-card.cz-pronto, .g-mesa.cz-pronto { outline: 2px solid var(--ok); outline-offset: 2px; }
.mapa-legenda { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: .6rem; font-size: var(--fs-xs); color: var(--muted); }
.legenda-tempo { display: inline-flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; }
.comandas-faixa { display: flex; gap: .5rem; align-items: center; overflow-x: auto; margin: -.4rem 0 1rem; padding-bottom: .2rem; }
.comandas-faixa:empty { display: none; }
.comanda-chip { font-size: var(--fs-sm); }
.comanda-chip.conta { border-color: var(--conta); }

/* Detalhe da mesa */
.md-tempos { display: flex; flex-wrap: wrap; gap: .4rem; }
.md-tempo { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-xs); font-weight: 650; padding: .25rem .6rem; border-radius: 99px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.md-tempo.t-ok { color: var(--t-ok); } .md-tempo.t-alerta { color: var(--warn-ink); background: var(--amber-soft); border-color: transparent; }
.md-tempo.t-critico { color: var(--t-critico); background: var(--danger-soft); border-color: transparent; }
.md-pessoas { gap: .15rem !important; }
.md-pessoas .icon-btn { min-height: 26px; width: 26px; padding: 0; }
.md-aviso { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: var(--r-md); font-size: var(--fs-sm); }
.md-aviso.aguardando { background: var(--amber-soft); color: var(--warn-ink); }
.md-aviso.pronto { background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.md-aviso.recusado { background: var(--danger-soft); color: var(--danger); }
.md-linhas { display: grid; gap: .25rem; padding-top: .2rem; }
.etapa { font-weight: 650; }
.etapa.e-aguardando { color: var(--warn-ink); } .etapa.e-novo, .etapa.e-preparando { color: var(--primary); }
.etapa.e-pronto { color: var(--ok); } .etapa.e-entregue { color: var(--muted); } .etapa.e-recusado, .etapa.e-cancelado { color: var(--danger); }
.mesa-mini.comanda { border-color: var(--primary); background: var(--primary-soft); }
.mesa-mini.nova { border-style: dashed; border-color: var(--line-strong); background: var(--surface); }
.tr-lista { display: grid; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; max-height: 38vh; overflow-y: auto; }
.tr-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; font-size: var(--fs-sm); flex-wrap: wrap; }
.tr-item + .tr-item { border-top: 1px solid var(--line); }
.tr-item.on { background: var(--primary-soft); }
.tr-item .qtd button { width: 30px; height: 30px; }
.check.grande { align-items: flex-start; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--r-md); }
.check.grande input { margin-top: 2px; }
.check.grande span { display: grid; gap: .1rem; }
.check.grande small { font-size: var(--fs-xs); }
.lista-escolha { display: grid; gap: .4rem; }
.lista-escolha .btn { justify-content: flex-start; }

/* Aprovação dos pedidos do garçom */
.nav-badge.aprov { background: var(--amber); color: #3A2800; }
.pilula-aprov { position: fixed; left: 88px; bottom: 1.25rem; z-index: 70; display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem;
  border: 0; border-radius: 16px; background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-pop); cursor: pointer; text-align: left; font: inherit; max-width: calc(100vw - 2rem); }
.pilula-aprov span { display: grid; line-height: 1.25; }
.pilula-aprov small { opacity: .75; font-size: var(--fs-xs); }
.pilula-aprov.urgente { background: #8A3B00; color: #fff; animation: chamar 1.6s ease-in-out infinite; }
.aprov-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .65rem; }
.aprov-card { background: var(--surface); border: 1px solid var(--amber); border-left: 4px solid var(--amber); border-radius: var(--r-md); padding: .75rem; display: grid; gap: .45rem; }
.aprov-card.bloqueado { opacity: .75; border-style: dashed; }
.aprov-topo { display: flex; align-items: center; gap: .45rem; }

/* Tela da cozinha (KDS) */
.cozinha-page { max-width: none; }
.cozinha-page h1 { display: flex; align-items: center; gap: .5rem; }
.cozinha-page:fullscreen { background: var(--bg); overflow-y: auto; padding: 1rem 1.25rem 2rem; }
.kds-relogio { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; padding: 0 .5rem; }
.kds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; align-items: start; margin-bottom: 1rem; }
.kds.sem-aprov { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kds-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .7rem; min-height: 50vh; }
.kds-col header { display: flex; align-items: center; gap: .5rem; margin: .1rem .2rem .7rem; }
.kds-col h2 { font-size: var(--fs-md); }
.kc-aprov .kb-n { background: var(--amber); color: #3A2800; } .kc-novo .kb-n { background: var(--danger); } .kc-pronto .kb-n { background: var(--ok); }
.kds-lista { display: grid; gap: .7rem; }
.kds-card { background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--t-ok); border-radius: var(--r-md); display: grid; box-shadow: 0 1px 3px rgba(24,33,31,.08); animation: surgir .2s ease-out; }
.kds-card.k-alerta { border-top-color: var(--t-alerta); }
.kds-card.k-atrasado { border-top-color: var(--t-critico); box-shadow: 0 0 0 2px color-mix(in srgb, var(--t-critico) 35%, transparent); }
.kds-card.st-pronto { border-top-color: var(--ok); background: color-mix(in srgb, var(--ok-soft) 60%, var(--surface)); }
.kds-card header { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; padding: .65rem .75rem .5rem; border-bottom: 1px dashed var(--line); }
.kds-mesa { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kds-meta { display: grid; gap: .15rem; min-width: 0; color: var(--muted); }
.kds-origem.o-mesa { background: var(--ocupada-soft); color: var(--warn-ink); border-color: transparent; }
.kds-origem.o-delivery { background: #E8EEFF; color: #2347B8; border-color: transparent; }
.kds-origem.o-retirada { background: #F3E8FF; color: #6B2FB3; border-color: transparent; }
html[data-tema="escuro"] .kds-origem.o-delivery { background: #182447; color: #9DB4FF; }
html[data-tema="escuro"] .kds-origem.o-retirada { background: #2A1A40; color: #CBA6FF; }
.kds-timer { display: inline-flex; align-items: center; gap: .25rem; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--t-ok); }
.k-alerta .kds-timer { color: var(--warn-ink); } .k-atrasado .kds-timer { color: var(--t-critico); }
.kds-itens { list-style: none; margin: 0; padding: .55rem .75rem; display: grid; gap: .4rem; }
.kds-itens li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .4rem; font-size: 1.12rem; font-weight: 600; line-height: 1.25; }
.kds-itens li b { font-size: 1.25rem; text-align: right; }
.kds-itens li span { display: grid; }
.kds-itens li.cancelado { opacity: .55; text-decoration: line-through; }
.tag-canc { font-style: normal; font-size: .7rem; font-weight: 800; text-transform: uppercase; color: var(--danger); text-decoration: none; display: inline-block; }
.kds-obs { font-size: .9rem; font-weight: 700; color: #8A3B00; background: var(--amber-soft); border-radius: 6px; padding: .1rem .4rem; margin-top: .15rem; justify-self: start; }
html[data-tema="escuro"] .kds-obs { color: var(--warn-ink); }
.kds-card footer { display: flex; gap: .4rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; padding: .55rem .75rem .7rem; }
.kds-card footer .btn:not(.sm) { min-height: 46px; font-size: 1rem; flex: 1; justify-content: center; }
.btn.primary.ok { background: var(--ok); border-color: var(--ok); }
@media (max-width: 1200px) { .kds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kds.sem-aprov { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .kds, .kds.sem-aprov { grid-template-columns: 1fr; } .kds-col { min-height: 0; } }

/* Desempenho do garçom */
.desemp-periodos { margin-bottom: 1rem; }
.desemp-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.kpi .k-valor.grande { font-size: 2.3rem; letter-spacing: -.02em; }
.desemp-proj { display: flex; gap: .5rem; align-items: flex-start; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.18); font-size: var(--fs-sm); position: relative; z-index: 1; }
.desemp-meta { display: flex; gap: 1.1rem; align-items: center; }
.desemp-meta-v strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.anel-meta { --p: 0deg; flex: none; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--primary) var(--p), var(--surface-2) 0); }
.anel-meta.batida { background: conic-gradient(var(--ok) 360deg, var(--ok) 0); }
.anel-meta > div { width: 84px; height: 84px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; align-content: center; text-align: center; }
.anel-meta strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; } .anel-meta span { font-size: .68rem; color: var(--muted); }
.desemp-agora { display: flex; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.desemp-graf { margin-bottom: .5rem; }
.desemp-graf h2 { font-size: var(--fs-md); margin-bottom: .6rem; }
.rank-barra.batida div { background: linear-gradient(90deg, var(--ok), #3BB86A); }
.table.equipe td { vertical-align: middle; }
@media (max-width: 800px) { .desemp-hero, .desemp-graf.two-col { grid-template-columns: 1fr; } }

/* Regras do restaurante (Configurações) */
.opcoes-cartao { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.opcao { position: relative; display: block; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; }
.opcao > span { display: grid; gap: .25rem; height: 100%; padding: .8rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.opcao small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
.opcao input:checked + span { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.opcao input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); }
.chips.wrap { flex-wrap: wrap; overflow: visible; }

@media (max-width: 900px) { .pilula-aprov { left: 1rem !important; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); } }
.link-nome { border: 0; background: none; padding: 0; font: inherit; font-weight: 650; color: var(--ink); cursor: pointer; text-align: left; }
.link-nome:hover { color: var(--primary); text-decoration: underline; }

/* Fechar conta pelo app do garçom */
.fc { display: grid; gap: .9rem; }
.fc-topo { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 1rem; align-items: stretch; }
.fc-linhas { display: grid; gap: .3rem; }
.fc-saldo { display: grid; align-content: center; justify-items: center; gap: .15rem; padding: .8rem; border-radius: var(--r-md); background: var(--amber-soft); color: var(--warn-ink); text-align: center; }
.fc-saldo strong { font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.fc-saldo span { font-size: var(--fs-sm); font-weight: 600; }
.fc-saldo.ok { background: var(--ok-soft); color: var(--ok); }
.fc-pags { display: grid; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.fc-pag { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; font-size: var(--fs-sm); }
.fc-pag + .fc-pag { border-top: 1px solid var(--line); }
.fc-formas { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.fc-formas button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .75rem .3rem; }
.fc-valor { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.fc-div { display: grid; gap: .3rem; }
.fc-cartao { display: flex; gap: .9rem; align-items: flex-start; }
.fc-cartao > svg { color: var(--primary); flex: none; margin-top: .2rem; }
.fc-fim { display: grid; justify-items: center; gap: .6rem; text-align: center; padding: .5rem 0; }
.fc-ok { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; animation: surgir .25s ease-out; }
@media (max-width: 600px) { .fc-topo { grid-template-columns: 1fr; } .fc-valor .btn { flex: 1; } }
.fc, .fc > *, .fc-cartao .stack, .fc-valor .field { min-width: 0; }
.fc-valor .field { flex: 1 1 140px; }
.fc .field span { white-space: normal; }
.fc .btn { white-space: normal; text-align: center; line-height: 1.2; }
dialog.modal .fc { overflow-wrap: anywhere; }
@media (max-width: 600px) { .fc-cartao > svg { display: none; } .fc .pix-linha .qr-box { margin: 0 auto; } }
.fc .fc-div .btn { white-space: nowrap; }

/* Meu turno (garçom) */
.turno { display: grid; gap: 1rem; }
.turno-dias { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.turno-dias .input { max-width: 180px; }
.turno-hero { border-radius: var(--r-lg); padding: 1.1rem 1.2rem; color: #fff; background: linear-gradient(135deg, #136F63 0%, #0F8A78 60%, #1AA38D 100%); display: grid; gap: .9rem; }
.turno-hero-top { display: grid; gap: .15rem; }
.turno-hero-top span { display: inline-flex; gap: .4rem; align-items: center; opacity: .9; font-size: var(--fs-sm); }
.turno-hero-top strong { font-size: 2.3rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.turno-hero-top small { opacity: .8; }
.turno-formas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.turno-formas > div { background: rgba(255,255,255,.14); border-radius: 12px; padding: .55rem .65rem; display: grid; gap: .1rem; }
.turno-formas span { font-size: var(--fs-xs); opacity: .9; display: inline-flex; gap: .3rem; align-items: center; }
.turno-formas strong { font-variant-numeric: tabular-nums; }
.turno-comissao { display: grid; gap: .8rem; }
.turno-com-top { display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
.turno-com-v { font-size: 1.9rem; font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }
.turno-prev { text-align: left; } .turno-prev strong { font-size: 1.2rem; color: var(--primary); }
.turno-linhas { display: grid; gap: .3rem; }
.turno-det summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: var(--fs-sm); }
.turno-lista { display: grid; }
.turno-item { display: flex; gap: .7rem; align-items: center; padding: .65rem 1rem; border-top: 1px solid var(--line); cursor: default; }
label.turno-item { cursor: pointer; }
.turno-item input { width: 22px; height: 22px; accent-color: var(--ok); flex: none; }
.turno-item.ok { background: var(--ok-soft); }
.turno-item .block { display: block; margin-top: .1rem; }
.turno-det .turno-item { padding: .55rem 0; }
.turno-conf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.turno-conf .field span small { font-weight: 400; }
.turno-dif { font-size: var(--fs-xs); font-weight: 700; min-height: 1em; }
.turno-dif.ok { color: var(--ok); } .turno-dif.erro { color: var(--danger); }
.turno-total-dif { font-weight: 600; font-size: var(--fs-sm); }
@media (max-width: 600px) { .turno-conf { grid-template-columns: 1fr; } .turno-formas strong { font-size: .9rem; } }

/* Painel ao vivo dos garçons */
.aovivo { display: grid; gap: 1rem; }
.aovivo:fullscreen { background: var(--bg); padding: 1.25rem; overflow-y: auto; }
.aovivo-topo { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.aovivo-status { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); color: var(--ok); font-weight: 600; }
.aovivo-status .pulso, .pix-status .pulso { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); animation: pulsar 1.4s ease-in-out infinite; display: inline-block; }
@keyframes pulsar { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 25%, transparent); } }
.aovivo-equipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.aovivo-equipe > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .8rem 1rem; display: grid; gap: .1rem; }
.aovivo-equipe span { color: var(--muted); font-size: var(--fs-sm); display: inline-flex; gap: .35rem; align-items: center; }
.aovivo-equipe strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.aovivo-equipe small { color: var(--muted); font-size: var(--fs-xs); }
.aovivo-equipe > div:first-child { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.aovivo-equipe > div:first-child span, .aovivo-equipe > div:first-child small { color: inherit; opacity: .8; }
.aovivo-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.av-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--cor); border-radius: var(--r-lg); padding: 1rem; display: grid; justify-items: center; gap: .35rem; text-align: center; }
.av-card.parado { opacity: .8; }
.av-card.parado .boneco { filter: grayscale(.35); }
.av-medalha { position: absolute; top: .6rem; left: .6rem; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.av-medalha.m1 { background: #FDE9B4; color: #7A5300; } .av-medalha.m2 { background: #E6EAEE; color: #4A5560; } .av-medalha.m3 { background: #F6D9C3; color: #7A3E12; }
.av-boneco { position: relative; }
.av-pct { position: absolute; right: -6px; bottom: 2px; background: var(--surface); border: 2px solid currentColor; border-radius: 99px; padding: .05rem .5rem; font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; }
.av-pct-rot { font-size: var(--fs-xs); color: var(--muted); margin-top: -.2rem; }
.av-nome { font-size: 1.1rem; margin: .1rem 0 0; }
.av-estado { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; }
.av-linhas { width: 100%; display: grid; gap: .3rem; margin-top: .3rem; }
.av-linha { display: grid; grid-template-columns: 4.2rem 1fr 64px; gap: .5rem; align-items: center; text-align: left; font-size: var(--fs-sm); padding: .2rem .4rem; border-radius: 8px; }
.av-linha span { color: var(--muted); }
.av-linha strong { font-variant-numeric: tabular-nums; text-align: right; }
.av-linha.atual { background: color-mix(in srgb, var(--cor) 10%, transparent); }
.av-linha.atual span { color: var(--ink); font-weight: 600; }
.av-mini { height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; display: block; }
.av-mini b { display: block; height: 100%; border-radius: 99px; }
.av-rodape { line-height: 1.4; }
.boneco .boneco-anel { transition: stroke-dasharray .6s ease; }
.boneco.humor-festa .bandeja { animation: balanca 1.2s ease-in-out infinite; transform-origin: 78px 66px; }
@keyframes balanca { 50% { transform: translate(70px, 63px) rotate(-6deg); } }
.aovivo-mapa h2 { font-size: var(--fs-md); }
.av-leg { display: inline-flex; align-items: center; gap: .3rem; margin-left: .7rem; }
.av-leg i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
#av-mapa { overflow-x: auto; margin-top: .6rem; }
.av-salao { position: relative; background-image: radial-gradient(circle, var(--line) 1px, transparent 1.2px); background-size: 16px 16px; border-radius: var(--r-md); }
.av-mesa { position: absolute; border: 2px dashed var(--line-strong); border-radius: 8px; display: grid; place-items: center; align-content: center; gap: 1px; color: var(--muted); font-size: .72rem; background: var(--surface); }
.av-mesa.redonda { border-radius: 50%; }
.av-mesa.ocupada { border: 2px solid var(--cor); background: color-mix(in srgb, var(--cor) 16%, var(--surface)); color: var(--ink); }
.av-mesa.conta { box-shadow: 0 0 0 3px color-mix(in srgb, var(--conta) 45%, transparent); }
.av-cabeca { width: 22px; height: 22px; border-radius: 50%; background: var(--cor); color: #fff; font-size: .6rem; font-weight: 800; display: grid; place-items: center; }
@media (max-width: 800px) { .aovivo-equipe { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   Senha de aprovação dos pedidos do garçom (aprovacoes.js)
   ===================================================================== */
.senha-aprov { align-items: center; gap: .8rem; }
.senha-aprov-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--primary-soft); color: var(--primary); }
.senha-aprov-campo { width: 100%; max-width: 280px; text-align: center; font-size: 2rem; font-weight: 700; letter-spacing: .5em; padding-left: .5em; height: 64px; font-variant-numeric: tabular-nums; }
.senha-aprov-erro { margin: 0; color: var(--danger); font-weight: 600; font-size: var(--fs-sm); text-align: center; }
.tremer { animation: tremer .35s; border-color: var(--danger) !important; }
@keyframes tremer { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.aprov-ctl { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .9rem; }
.kds-ctl { flex-direction: row; flex-wrap: wrap; }
.aprov-ctl > div:empty { display: none; }
.kds-ctl > div { flex: 1 1 320px; }
.minha-senha .grow { min-width: 200px; }
.interruptor-aprov { padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); height: 100%; }
.minha-senha { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .6rem .9rem; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.minha-senha-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); flex: none; }
.minha-senha-cod { font-size: 1.4rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.kds-ctl { margin: 0 0 1rem; }

/* =====================================================================
   Superusuário e suporte (020)
   ===================================================================== */
/* Faixa do modo suporte: sempre visível enquanto a equipe está na loja de um cliente */
.faixa-suporte-wrap { position: sticky; top: 0; z-index: 48; }
.faixa-suporte { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem 1rem;
  background: #1E3A8A; color: #fff; font-size: var(--fs-sm); box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.faixa-suporte.total { background: #9A3412; }
.faixa-suporte .fs-ic { display: inline-flex; }
.faixa-suporte .fs-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52vw; }
.faixa-suporte .fs-motivo { opacity: .75; }
.fs-modos { display: inline-flex; background: rgba(255,255,255,.14); border-radius: 999px; padding: 2px; }
.fs-modos button, .fs-btn { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: transparent; color: #fff;
  font: inherit; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; cursor: pointer; }
.fs-modos button.ativo { background: #fff; color: #1E3A8A; }
.faixa-suporte.total .fs-modos button.ativo { color: #9A3412; }
.fs-btn { background: rgba(255,255,255,.14); }
.fs-btn:hover, .fs-modos button:not(.ativo):hover { background: rgba(255,255,255,.26); }
.fs-btn.sair { background: #fff; color: #111; }
.fs-tempo { display: inline-flex; align-items: center; gap: .3rem; font-variant-numeric: tabular-nums; opacity: .9; }
.fs-tempo.pouco { color: #FDE68A; font-weight: 700; opacity: 1; }
.faixa-suporte svg { stroke: currentColor; }

/* Avisos da plataforma no topo */
#avisos-plataforma:empty { display: none; }
.aviso-plat { display: flex; align-items: center; gap: .7rem; padding: .6rem 1rem; font-size: var(--fs-sm);
  background: var(--primary-soft); color: var(--ink); border-bottom: 1px solid var(--line); }
.aviso-plat.warn { background: var(--amber-soft); }
.aviso-plat.ok { background: var(--ok-soft); }
.aviso-plat > svg { flex: none; stroke: currentColor; }
.aviso-plat strong { margin-right: .25rem; }

/* Entrar na loja */
.opcoes-modo { display: grid; gap: .5rem; }
.opcao-modo { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.opcao-modo:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.opcao-modo span { display: grid; gap: .15rem; }
.opcao-modo small { color: var(--muted); }
.opcao-modo input { margin-top: .25rem; }

/* Chamados */
.chamado-cod { text-align: center; display: grid; gap: .6rem; }
.cod-grande { font-size: clamp(2.4rem, 9vw, 3.4rem); font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--primary); }
.cod-input { max-width: 190px; font-size: 1.1rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.cod-mini { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.linha-destaque { background: color-mix(in srgb, var(--amber-soft) 70%, transparent); }
.sinais { display: flex; flex-wrap: wrap; gap: .3rem; }
.d-block { display: block; }
@media (max-width: 900px) { .faixa-suporte .fs-motivo { display: none; } .faixa-suporte .fs-txt { max-width: 100%; } }

/* ---------- Licenças e backup (021) ---------- */
.lote-barra { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.lote-barra > div { height: 100%; width: 0; background: var(--primary); transition: width .25s ease; }
.sel-barra { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem .8rem; margin-bottom: .75rem;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line)); background: var(--primary-soft); border-radius: var(--r-md);
  position: sticky; top: .5rem; z-index: 5; }
.sel-barra[hidden] { display: none; }
.lic-atual { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.lic-atual > div { display: grid; gap: .25rem; justify-items: start; }
.lista-excluir { display: flex; flex-wrap: wrap; gap: .35rem; max-height: 140px; overflow: auto; }
.lista-excluir span { padding: .15rem .55rem; border-radius: 999px; background: var(--danger-soft); color: var(--danger); }
.table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }

/* ---------- Mudança de setor (023) ---------- */
.lista-setor { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; font-size: var(--fs-sm); }
.passo-setor { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md); }
.passo-setor > div { flex: 1 1 280px; display: grid; gap: .35rem; }
.passo-setor.feito { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: var(--ok-soft); }
.passo-setor[aria-disabled="true"] { opacity: .55; }


/* ---------- Central de Ajuda (024) ---------- */
.ajuda-page { max-width: 1040px; }
.ajuda-hero { display: grid; gap: .9rem; padding: 1.4rem; margin-bottom: 1.25rem; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--primary-soft), var(--surface) 70%); transition: border-color .15s, box-shadow .15s; }
.ajuda-hero.arrastando { border: 2px dashed var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.ajuda-hero-tit { display: flex; gap: .8rem; align-items: center; color: var(--primary); }
.ajuda-hero-tit h1 { color: var(--ink); }
.ajuda-hero-tit p { color: var(--muted); margin-top: .15rem; }
.ajuda-busca { position: relative; display: flex; gap: .4rem; align-items: center; background: var(--surface); border: 1.5px solid var(--line-strong, var(--line));
  border-radius: 999px; padding: .3rem .35rem .3rem 1rem; box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.ajuda-busca:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.ajuda-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.05rem; padding: .55rem 0; }
.ajuda-busca input::-webkit-search-cancel-button { cursor: pointer; }
.ajuda-busca .btn.primary { border-radius: 999px; }
.ajuda-busca.mini { border-radius: var(--r-md); padding-left: .8rem; box-shadow: none; }
.ajuda-busca.mini input.input { border: 0; box-shadow: none; padding-left: 0; }
.ajuda-lupa { color: var(--muted); display: inline-flex; }
.ajuda-sugestoes { position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 20; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 12px 30px rgba(0,0,0,.14); padding: .3rem; display: grid; }
.ajuda-sugestoes[hidden] { display: none; }
.ajuda-sugestoes button { display: flex; gap: .6rem; align-items: center; text-align: left; border: 0; background: none; color: var(--ink); font: inherit;
  padding: .55rem .7rem; border-radius: var(--r-sm); cursor: pointer; }
.ajuda-sugestoes button:hover, .ajuda-sugestoes button:focus { background: var(--primary-soft); outline: 0; }
.ajuda-sugestoes svg { color: var(--muted); flex: none; }
.ajuda-exemplos .chip { font-weight: 500; font-size: var(--fs-sm); }
.ajuda-anexos { display: grid; gap: .5rem; }
.ajuda-anexos:empty { display: none; }
.anexo-cartao { display: flex; gap: .75rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.anexo-cartao img, .anexo-cartao .anexo-ic { width: 52px; height: 52px; object-fit: cover; border-radius: var(--r-sm); flex: none; background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.anexo-cartao.erro { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.anexo-cartao strong { word-break: break-all; }
.barra-mini { display: inline-block; vertical-align: middle; width: 110px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-left: .35rem; }
.barra-mini > span { display: block; height: 100%; background: var(--primary); transition: width .2s; }
.anexos-lista { display: grid; gap: .35rem; }
.anexos-lista:empty { display: none; }
.anexo-item { display: flex; gap: .5rem; align-items: center; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.anexo-item .grow { word-break: break-all; }
.ajuda-sec { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; margin: 1.4rem 0 .7rem; }
.ajuda-papel { display: flex; gap: 1.25rem; padding: 1.2rem 1.3rem; flex-wrap: wrap; }
.ajuda-papel > .grow { flex: 1 1 380px; display: grid; gap: .45rem; justify-items: start; }
.ajuda-papel h3 { font-size: .95rem; margin-top: .4rem; }
.ajuda-papel-acoes { display: grid; gap: .5rem; align-content: start; flex: 0 1 260px; }
.ajuda-papel-acoes .btn { justify-content: flex-start; }
.ajuda-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .65rem; }
.ajuda-cat { display: grid; gap: .25rem; padding: .9rem 1rem; color: var(--ink); text-decoration: none; }
.ajuda-cat:hover, .ajuda-res:hover, .ajuda-tela:hover { border-color: var(--primary); }
.ajuda-cat-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ajuda-telas { display: grid; padding: .3rem; }
.ajuda-tela { display: flex; gap: .75rem; align-items: center; padding: .6rem .7rem; color: var(--ink); text-decoration: none; border-radius: var(--r-sm); border: 1px solid transparent; }
.ajuda-tela + .ajuda-tela { border-top-color: var(--line); border-radius: 0; }
.ajuda-resultados { display: grid; gap: .55rem; }
.ajuda-res { display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 1rem; color: var(--ink); text-decoration: none; }
.ajuda-res .grow { display: grid; gap: .2rem; }
.ajuda-res strong { color: var(--primary); font-size: 1.02rem; }
.ajuda-resultados.mini { gap: .25rem; }
.ajuda-res.compacto { padding: .45rem .7rem; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--primary); font-weight: 550; }
.ajuda-contagem { margin-bottom: .5rem; }
.ajuda-quis { margin-bottom: .75rem; }
.ajuda-quis a { font-weight: 650; font-style: italic; }
.ajuda-problema { padding: 1.1rem 1.25rem; margin-bottom: 1rem; display: grid; gap: .6rem; border-left: 5px solid var(--amber, #D97706); }
.ajuda-problema-tit { display: flex; gap: .7rem; align-items: center; color: var(--warn-ink); }
.ajuda-problema-tit h2 { color: var(--ink); font-size: 1.15rem; }
.ajuda-outro { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1rem; }
.ajuda-nada h2 { color: var(--ink); font-size: 1.1rem; }
.ajuda-rodape { display: flex; gap: .75rem; align-items: center; padding: .8rem 1rem; margin-top: 1rem; flex-wrap: wrap; }
.ajuda-lido { padding: .6rem .9rem; margin-bottom: 1rem; }
.ajuda-lido summary { cursor: pointer; display: flex; gap: .4rem; align-items: center; font-weight: 600; }
.ajuda-lido pre { white-space: pre-wrap; font-size: var(--fs-sm); margin: .6rem 0 0; max-height: 220px; overflow: auto; color: var(--muted); }
.ajuda-trilha { font-size: var(--fs-sm); color: var(--muted); margin-bottom: .7rem; }
.ajuda-artigo { padding: 1.4rem 1.5rem; display: grid; gap: .75rem; }
.ajuda-artigo h2 { font-size: 1.4rem; }
.ajuda-artigo h3 { font-size: 1rem; margin-top: .4rem; }
.ajuda-resumo { font-size: 1.05rem; line-height: 1.5; }
.ajuda-passos { counter-reset: passo; list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.ajuda-passos > li { counter-increment: passo; display: grid; grid-template-columns: 30px 1fr; gap: .7rem; align-items: start; line-height: 1.45; }
.ajuda-passos > li::before { content: counter(passo); width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff;
  font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; }
.ajuda-passos.compacto { gap: .35rem; }
.ajuda-passos.compacto > li { grid-template-columns: 24px 1fr; gap: .5rem; }
.ajuda-passos.compacto > li::before { width: 22px; height: 22px; font-size: .75rem; }
.ajuda-lista { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.ajuda-caixa { padding: .8rem 1rem; border-radius: var(--r-md); display: grid; gap: .35rem; }
.ajuda-caixa strong { display: inline-flex; gap: .35rem; align-items: center; }
.ajuda-caixa ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .25rem; }
.ajuda-caixa.dica { background: var(--primary-soft); }
.ajuda-caixa.dica strong { color: var(--primary); }
.ajuda-caixa.atencao { background: var(--amber-soft); }
.ajuda-caixa.atencao strong { color: var(--warn-ink); }
.ajuda-tecnico { border: 1px dashed var(--line); border-radius: var(--r-md); padding: .6rem .9rem; font-size: var(--fs-sm); }
.ajuda-tecnico summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.ajuda-tecnico ol { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.ajuda-acoes { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.ajuda-util { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--muted); }
.ajuda-modal h3 { font-size: .95rem; }
kbd { display: inline-block; padding: .05rem .4rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font: 600 .8em var(--font); background: var(--surface-2); }
.btn-ajuda .kbd { margin-left: .3rem; }
.tour-passo { display: grid; gap: .7rem; justify-items: start; }
.tour-ic { color: var(--primary); }
.tour-telas { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; max-height: 46vh; overflow: auto; }
.tour-telas li { display: grid; grid-template-columns: 22px 1fr; gap: .6rem; align-items: start; line-height: 1.4; }
.tour-telas li svg { color: var(--primary); margin-top: .1rem; }
.tour-pontos { display: flex; gap: .35rem; justify-content: center; margin-top: 1rem; }
.tour-pontos span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.tour-pontos span.ativo { background: var(--primary); width: 22px; border-radius: 999px; }
.ajuda-rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.anexos-ch { display: flex; flex-wrap: wrap; gap: .5rem; }
.anexos-ch .anexo-ch { display: grid; gap: .25rem; justify-items: center; width: 120px; font-size: var(--fs-xs); text-align: center; word-break: break-all; }
.anexos-ch img { width: 120px; height: 90px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); cursor: zoom-in; }
@media (max-width: 640px) {
  .ajuda-hero { padding: 1rem; }
  .ajuda-busca { border-radius: var(--r-md); flex-wrap: wrap; padding: .4rem .5rem; }
  .ajuda-busca input { flex-basis: calc(100% - 40px); }
  .ajuda-busca .btn.primary { flex: 1; }
  .ajuda-artigo { padding: 1rem; }
}
@media print {
  .sidebar, .topbar-mobile, .ajuda-hero, .ajuda-util, .ajuda-acoes, .ajuda-trilha, #avisos-plataforma, #faixa-suporte { display: none !important; }
  .ajuda-artigo { border: 0; }
}
.ajuda-hero-tit svg { flex: none; }

/* =====================================================================
   Pedido por voz (app do garçom e tela Mesas): ouvir → conferir → enviar
   ===================================================================== */
.modal-voz .modal-body { padding: 1rem 1.1rem; }
.voz { display: grid; gap: .9rem; }
.voz-alvo { text-align: center; color: var(--muted); display: flex; gap: .4rem; justify-content: center; align-items: center; font-size: var(--fs-md); }
.voz-alvo strong { color: var(--ink); }
.voz-mic { position: relative; justify-self: center; width: 132px; height: 132px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--primary); color: var(--on-primary); display: grid; place-items: center; box-shadow: var(--shadow-pop);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .12s, background .2s; }
.voz-mic:active { transform: scale(.95); }
.voz-mic:disabled { background: var(--line-strong); cursor: not-allowed; box-shadow: none; }
.voz-mic.on { background: var(--danger); }
.voz-mic .voz-onda { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.voz-mic.on .voz-onda { animation: voz-onda 1.3s ease-out infinite; }
@keyframes voz-onda { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent); } 100% { box-shadow: 0 0 0 26px transparent; } }
@media (prefers-reduced-motion: reduce) { .voz-mic.on .voz-onda { animation: none; box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 30%, transparent); } }
.voz-estado { text-align: center; font-weight: 600; min-height: 1.4em; }
.voz-texto { font-size: 1.1rem; line-height: 1.4; min-height: 96px; }
.voz-dica { margin: -.4rem 0 0; }
.voz-rodape { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; position: sticky; bottom: -1rem; background: var(--surface);
  padding: .7rem 0 calc(.2rem + env(safe-area-inset-bottom)); margin-top: .2rem; border-top: 1px solid var(--line); }
.voz-rodape .btn.lg { font-size: 1rem; white-space: normal; line-height: 1.2; }
.voz-rodape .btn.primary.ok { font-size: 1.05rem; }
.voz-entendendo { display: grid; justify-items: center; gap: .3rem; padding: 2.5rem 1rem; text-align: center; }
.voz-entendendo .spinner { width: 42px; height: 42px; margin-bottom: .6rem; }
.voz-aviso { display: flex; gap: .5rem; align-items: flex-start; background: var(--amber-soft); color: var(--warn-ink); padding: .6rem .75rem; border-radius: var(--r-md); font-size: var(--fs-sm); }
.voz-aviso svg { flex: none; margin-top: .1rem; }
.voz-fala { background: var(--surface-2); border-radius: var(--r-md); padding: .55rem .8rem; }
.voz-fala p { margin: .1rem 0 0; font-style: italic; }
.voz-mesa { border: 1px solid var(--line); border-radius: var(--r-md); padding: .7rem .8rem; display: grid; gap: .5rem; }
.voz-mesa.falta { border: 2px solid var(--amber); background: var(--amber-soft); }
.voz-mesa-linha { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; }
.voz-tit { display: flex; gap: .4rem; align-items: center; }
.voz-pessoas { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); }
.voz-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .4rem; max-height: 34vh; overflow-y: auto; }
.voz-mesas .mesa-mini.ativo { outline: 3px solid var(--primary); }
.voz-itens { display: grid; gap: .55rem; }
.voz-item { border: 1px solid var(--line); border-radius: var(--r-md); padding: .65rem .7rem .4rem; display: grid; gap: .45rem; background: var(--surface); }
.voz-item.duvida { border: 2px solid var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent); }
.voz-item.nao { border: 2px solid var(--danger); background: var(--danger-soft); padding-bottom: .65rem; }
.voz-item.nao .voz-item-topo svg { color: var(--danger); flex: none; }
.voz-item-topo { display: flex; gap: .6rem; align-items: flex-start; }
.voz-qtd button { width: 40px; height: 40px; }
.voz-qtd span { min-width: 44px; font-size: 1.1rem; }
.voz-qtd small { font-size: .7rem; font-weight: 500; color: var(--muted); }
.voz-nome { min-width: 0; line-height: 1.3; }
.voz-nome strong { font-size: 1.02rem; }
.voz-preco { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.voz-pergunta { display: grid; gap: .4rem; background: var(--amber-soft); color: var(--warn-ink); border-radius: var(--r-sm); padding: .5rem .55rem; font-weight: 600; font-size: var(--fs-sm); }
.voz-escolha { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.voz-escolha .btn { white-space: normal; text-align: left; line-height: 1.2; min-height: 40px; }
.voz-alts .btn small { color: var(--muted); font-weight: 500; margin-left: .25rem; }
.voz-alts .btn.primary small { color: inherit; }
.voz-peso { width: 110px; text-align: center; font-size: 1.1rem; }
.voz-item-acoes { display: flex; align-items: center; gap: .9rem; font-size: var(--fs-sm); }
.voz-mais { display: flex; gap: .5rem; flex-wrap: wrap; }
.voz-mais .btn { flex: 1 1 auto; justify-content: center; }
.voz-origem { margin: -.3rem 0 0; text-align: center; }
.voz-busca { display: grid; gap: .3rem; max-height: 55vh; overflow-y: auto; }
.voz-busca-item { display: flex; gap: .6rem; align-items: center; text-align: left; font: inherit; padding: .8rem .75rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); cursor: pointer; min-height: 48px; }
.voz-busca-item:active { background: var(--primary-soft); }
.btn-voz { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn-voz svg { stroke: currentColor; }
.md-acoes .btn-voz { grid-column: 1 / -1; min-height: 56px; font-size: 1.05rem; }
.md-livre .btn-voz { margin-top: -.25rem; }
@media (max-width: 760px) {
  dialog.modal.modal-voz { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .modal-voz[open] { display: flex; flex-direction: column; }
  .modal-voz .modal-body { flex: 1; max-height: none; }
}

/* =====================================================================
   Tela "Hoje" (dono e gerente): o que pede atenção, com a ação ao lado
   ===================================================================== */
.hoje-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin-bottom: 1.4rem; }
.hoje-kpi { padding: .9rem 1.1rem; display: grid; gap: .15rem; }
.hoje-kpi .k-label { font-size: var(--fs-sm); color: var(--muted); }
.hoje-kpi strong { font-size: 1.55rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.hoje-kpi small { font-size: var(--fs-xs); }
.hoje-grupo { margin-bottom: 1.4rem; }
.hoje-grupo h2 { display: flex; align-items: baseline; gap: .5rem; font-size: var(--fs-lg); margin-bottom: .6rem; }
.hoje-grupo h2 small { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.hoje-grupo.g-urgente .kb-n { background: var(--danger); }
.hoje-grupo.g-atencao .kb-n { background: var(--amber); color: #3A2800; }
.hoje-grupo.g-info .kb-n { background: var(--line-strong); color: var(--ink); }
.hoje-itens { display: grid; gap: .5rem; }
.hoje-item { display: flex; align-items: center; gap: .85rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
  border-radius: var(--r-md); padding: .75rem .85rem; transition: opacity .18s, transform .18s; }
.hoje-item.n-urgente { border-left-color: var(--danger); }
.hoje-item.n-atencao { border-left-color: var(--amber); }
.hoje-item.n-info { border-left-color: var(--primary); }
.hoje-item.visto { opacity: .6; }
.hoje-item.saindo { opacity: 0; transform: translateX(16px); }
.hoje-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--muted); }
.n-urgente .hoje-ic { background: var(--danger-soft); color: var(--danger); }
.n-atencao .hoje-ic { background: var(--amber-soft); color: var(--warn-ink); }
.n-info .hoje-ic { background: var(--primary-soft); color: var(--primary); }
.hoje-txt { display: grid; gap: .1rem; line-height: 1.3; }
.hoje-txt span { font-size: var(--fs-sm); color: var(--muted); }
.hoje-valor { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hoje-acoes { display: flex; gap: .3rem; align-items: center; flex: none; }
.hoje-vazio { padding: 2.5rem 1rem; display: grid; justify-items: center; gap: .5rem; text-align: center; color: var(--ok); }
.hoje-vazio h2 { color: var(--ink); }
@media (max-width: 640px) {
  .hoje-resumo { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .hoje-kpi { padding: .7rem .8rem; }
  .hoje-kpi strong { font-size: 1.2rem; }
  .hoje-item { flex-wrap: wrap; }
  .hoje-item .hoje-txt { flex-basis: calc(100% - 52px); }
  .hoje-valor { margin-left: 52px; }
  .hoje-acoes { margin-left: auto; }
}

/* =====================================================================
   QR Code na mesa: avisos de chamado para a equipe
   ===================================================================== */
.pilula-chamados { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 71; display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem;
  border: 0; border-radius: 16px; background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-pop); cursor: pointer; text-align: left; font: inherit; max-width: min(420px, calc(100vw - 2rem)); }
.pilula-chamados span { display: grid; line-height: 1.25; }
.pilula-chamados small { opacity: .85; font-size: var(--fs-xs); }
.pilula-chamados svg { stroke: currentColor; flex: none; }
.pilula-chamados.urgente { background: var(--danger); color: #fff; animation: chamar 1.6s ease-in-out infinite; }
@media (max-width: 900px) { .pilula-chamados { left: 1rem; right: 1rem; bottom: calc(5rem + env(safe-area-inset-bottom)); } }
.ch-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .65rem; }
.ch-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--r-md); padding: .75rem; display: flex; flex-direction: column; gap: .45rem; }
.ch-card .kb-acoes { margin-top: auto; display: flex; justify-content: flex-end; align-items: center; gap: .4rem; }
.ch-card.t-pedido { border-left-color: var(--danger); }
.ch-card.t-pix { border-left-color: var(--ok); }
.ch-card.meu { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.ch-topo { display: flex; gap: .5rem; align-items: center; }
.md-aviso.chamado { background: var(--primary-soft); color: var(--ink); }
.md-aviso.pago-qr { background: var(--ok-soft); color: var(--ink); }
.mesa-mapa.chamando, .mesa-card.chamando { animation: chamar 1.4s ease-in-out infinite; outline: 3px solid var(--primary); outline-offset: 2px; }
.mesa-mapa.chamando::after, .mesa-card.chamando::after { content: "🔔"; position: absolute; top: -10px; right: -8px; font-size: 1rem; }

@media (prefers-reduced-motion: reduce) { .mesa-mapa.chamando, .mesa-card.chamando, .pilula-chamados.urgente { animation: none; } }

/* =====================================================================
   Inteligência artificial (Configurações e Plataforma)
   ===================================================================== */
.ia-estado { display: grid; gap: .6rem; }
.ia-estado-topo { display: flex; gap: .85rem; align-items: center; flex-wrap: wrap; }
.ia-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; }
.ia-fontes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .75rem; }
.ia-fonte { display: flex; gap: .7rem; align-items: flex-start; border: 1.5px solid var(--line); border-radius: var(--r-md); padding: .9rem; cursor: pointer; background: var(--surface); }
.ia-fonte.on { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.ia-fonte input { margin-top: .25rem; }
.ia-fonte > .grow { display: grid; gap: .45rem; }
.ia-fonte small { color: var(--muted); }
.ia-saldo { display: grid; gap: .15rem; background: var(--surface-2); border-radius: var(--r-sm); padding: .55rem .7rem; }
.ia-saldo b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.ia-chave { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.ia-chave code { background: var(--surface-2); padding: .15rem .45rem; border-radius: 6px; }
.ia-compras { display: grid; gap: .35rem; }
.ia-compra { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.ia-compra:last-child { border-bottom: 0; }
.ia-pacotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; }
.ia-pacote { border: 1.5px solid var(--line-strong); background: var(--surface); border-radius: var(--r-md); padding: 1rem .6rem; cursor: pointer; display: grid; gap: .2rem; font: inherit; color: var(--ink); }
.ia-pacote strong { font-size: 1.25rem; }
.ia-pacote small { color: var(--muted); }
.ia-pacote:hover { border-color: var(--primary); background: var(--primary-soft); }

/* Configurações: modo Essencial esconde as opções avançadas */
.cfg-essencial .cfg-av { display: none !important; }
.cfg-modo button { padding: .45rem .8rem; font-size: var(--fs-sm); }
.aprov-auto { display: grid; gap: .45rem; padding: .75rem; border-radius: var(--r-md); background: var(--surface-2); }

/* Fechamento de caixa: contar notas e moedas */
.contagem { display: grid; gap: .7rem; }
.cont-modo { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.cont-grade { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.cont-grade[hidden] { display: none; }
.cont-col { display: grid; gap: .35rem; align-content: start; }
.cont-col h4 { margin: 0 0 .1rem; font-size: var(--fs-sm); color: var(--muted); }
.cont-linha { display: grid; grid-template-columns: 4.2rem auto 1fr; align-items: center; gap: .5rem; }
.cont-v { font-weight: 650; font-variant-numeric: tabular-nums; padding: .2rem .45rem; border-radius: 6px; text-align: center; font-size: var(--fs-sm); }
.cont-v.nota { background: var(--ok-soft); color: var(--ok); }
.cont-v.moeda { background: var(--amber-soft); color: var(--warn-ink); }
.cont-qtd input { width: 52px; height: 32px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-variant-numeric: tabular-nums; background: var(--surface); color: var(--ink); }
.cont-sub { font-size: var(--fs-xs); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.cont-total { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .cont-grade { grid-template-columns: 1fr; } }

/* Configurações › PIX e pagamentos: escolha da operadora (027) */
.prov-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem; }
.prov-op { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.prov-op input { margin-top: .2rem; accent-color: var(--primary); }
.prov-op span { display: grid; gap: .2rem; }
.prov-op small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
.prov-op:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.prov-op .badge.sm { font-size: .68rem; padding: .05rem .4rem; justify-self: start; }
.prov-campos { padding: .85rem; border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
#url-aviso { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--fs-xs); }

/* =====================================================================
   Marca Lis PDV no login do sistema e do garçom
   ===================================================================== */
.auth-logo { --lis-verde-logo: #fff; --lis-raiz: #fff; position: relative; z-index: 1; }
.auth-logo .lis-pdv { color: rgba(255, 255, 255, .78); }
.auth-arte > div:not(.auth-lirio), .auth-arte > .auth-recibo { position: relative; z-index: 1; }
.auth-lirio { position: absolute; right: -110px; bottom: -40px; color: #fff; opacity: .07; pointer-events: none; z-index: 0; }
.auth-lirio .lis-faixa { fill: currentColor !important; }
.auth-recibo { color: #18211F; } /* papel branco: texto escuro também no tema escuro */
.g-marca { display: flex; justify-content: center; margin-bottom: .4rem; }

/* =====================================================================
   Cobrança automática (028): pagar a mensalidade e painel do Asaas
   ===================================================================== */
.pf-pix { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.pf-pix .qr-box { background: #fff; padding: 10px; border-radius: var(--r-sm); line-height: 0; }
.pf-outras { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 560px) { .pf-pix { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.asaas > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.asaas > summary::-webkit-details-marker { display: none; }
.mono-pq { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--fs-xs); }

/* Documentos legais (029): aceite no cadastro e links */
.aceite-termos { align-items: flex-start; font-size: var(--fs-sm); line-height: 1.45; }
.aceite-termos input { margin-top: .2rem; flex: none; }
.auth-form { grid-template-rows: 1fr auto; }
.auth-legal { display: flex; gap: 1rem; justify-content: center; font-size: var(--fs-xs); padding-top: 1rem; }
.auth-legal a { color: var(--muted); }
.lista-legal { margin: 0; padding-left: 1.2em; display: grid; gap: .35rem; }

/* Backup › Apagar todos os dados (030) */
.zona-perigo { margin-top: 1rem; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger-soft) 55%, var(--surface)); }
.zona-perigo h2 { color: var(--danger); }
.zona-perigo .btn.danger, #ap-confirmar.btn.danger:not(:disabled) { background: var(--danger); border-color: var(--danger); color: #fff; }
.zona-perigo .btn.danger:hover, #ap-confirmar.btn.danger:not(:disabled):hover { background: color-mix(in srgb, var(--danger) 85%, #000); }