/* =========================================================
   PDV — frente de caixa em tela cheia (P1, 2026-10-03)
   Tela: assets/js/pages/pdv.js + assets/js/pdv/pdvView.js

   Uma ousadia so: a COMANDA desenhada como o canhoto de papel do balcao —
   cabecalho com o numero grande, picote tracejado, o total sublinhado pelo
   fio de ouro (--gold-rule, o papel dele no design system) e a borda de
   baixo serrilhada. Todo o resto e quieto: grade de produtos em cartoes
   sem borda, barra superior compacta, cor so onde carrega informacao
   (categoria em --serie-*, estado em token de status + a palavra).

   Tela cheia: a rota declara `layout: 'pdv'` e o router poe a classe
   `.layout-pdv` no #app-shell; aqui ela esconde sidebar, cabecalho, rodape
   e barra de abas. Sem a rota, nenhuma regra deste arquivo se aplica.
   ========================================================= */

.app-shell.layout-pdv #sidebar-container,
.app-shell.layout-pdv #header-container,
.app-shell.layout-pdv #footer-container,
.app-shell.layout-pdv #bottom-nav-container { display: none; }
/* padding-top: no celular a casca reserva 104px para o cabecalho grande
   (components.css), que aqui nao existe — sobrava uma faixa vazia no topo. */
.app-shell.layout-pdv .app-main { margin-left: 0 !important; min-height: 100dvh; padding-top: 0 !important; }
/* O convite de instalar a PWA cobria a grade (e, no celular, a barra da
   comanda). No caixa ele so atrapalha: aparece em qualquer outra tela. */
body:has(.app-shell.layout-pdv) .pwa-convite-cf { display: none !important; }
.app-shell.layout-pdv .page-content {
  max-width: none;
  padding: 0 !important;
  height: 100dvh;
  overflow: hidden;
}

.pdv {
  --pdv-gap: var(--space-4);
  /* "Restam N": --gold-text (6.56:1) no claro; no escuro ele some no fundo e
     quem le e o --gold-brand. Definido aqui e REDEFINIDO no tema escuro. */
  --pdv-alerta: var(--gold-text);
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--bg-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pdv-kbd {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 3px 5px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  background: var(--bg-surface);
}
.pdv-kbd--claro {
  border-color: color-mix(in srgb, var(--color-on-primary) 35%, transparent);
  color: var(--color-on-primary);
  background: transparent;
}

/* ------------------------------------------------------------ topo */

.pdv-topo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--pdv-gap);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  min-width: 0;
}
.pdv-voltar {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-control);
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pdv-voltar:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.pdv-voltar:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pitch-200); }

.pdv-marca { display: flex; flex-direction: column; line-height: 1.15; flex: none; }
.pdv-marca__nome {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--color-primary);
}
.pdv-marca__sub { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; }

.pdv-busca {
  position: relative;
  flex: 1 1 320px;
  min-width: 0;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-input);
  background: var(--bg-body);
  color: var(--text-secondary);
}
.pdv-busca:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--pitch-200); }
.pdv-busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-base);
}
.pdv-busca__res {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 60vh;
  overflow: auto;
  padding: var(--space-2);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}
.pdv-res__grupo + .pdv-res__grupo { margin-top: var(--space-2); }
.pdv-res__grupo h3 {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin: var(--space-2) var(--space-2) var(--space-1);
}
.pdv-res__item {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  font-size: var(--text-sm);
}
.pdv-res__item:hover, .pdv-res__item:focus-visible { background: var(--bg-surface-hover); outline: none; }
.pdv-res__item small { display: block; color: var(--text-secondary); font-size: var(--text-xs); }
.pdv-res__acao { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-primary); white-space: nowrap; }
.pdv-res__info { margin: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }

.pdv-indicadores {
  display: flex;
  gap: var(--space-5);
  margin: 0;
  flex: none;
}
.pdv-ind { display: flex; flex-direction: column; gap: 2px; }
.pdv-ind dt { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-secondary); white-space: nowrap; }
.pdv-ind dd { margin: 0; font-size: var(--text-md); font-weight: var(--fw-semibold); }
.pdv-ind--destaque dd { color: var(--color-primary); }

.pdv-topo__acoes { display: flex; gap: var(--space-2); margin-left: auto; flex: none; }
.pdv-contagem {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
}

/* ------------------------------------------------------------ corpo */

.pdv-corpo {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr) minmax(360px, 400px);
  gap: var(--pdv-gap);
  padding: var(--pdv-gap);
  min-height: 0;
}

/* Categorias: coluna no desktop, faixa rolavel abaixo de 1200px. */
.pdv-cats {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow: auto;
  min-height: 0;
}
.pdv-cat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pdv-cat:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.pdv-cat:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pitch-200); }
.pdv-cat.is-ativa { background: var(--color-primary-soft); color: var(--color-primary); font-weight: var(--fw-semibold); }
.pdv-cat__tom { width: 10px; height: 10px; border-radius: 50%; background: var(--tom); flex: none; }
.pdv-cat__ico { width: 10px; font-size: 12px; text-align: center; }
.pdv-cat__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdv-cat__n { font-size: var(--text-xs); color: var(--text-muted); }

/* Grade de produtos */
.pdv-grade-area { min-height: 0; overflow: auto; padding: 2px; }
.pdv-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
  gap: var(--space-3);
  align-content: start;
}
.pdv-prod {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pdv-prod:hover { box-shadow: var(--shadow-card-hover); border-color: color-mix(in srgb, var(--tom) 45%, var(--card-border)); }
.pdv-prod:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pitch-200); }
.pdv-prod:disabled { cursor: not-allowed; box-shadow: none; }
.pdv-prod.is-esgotado { opacity: 0.6; }
.pdv-prod__img {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--tom) 13%, var(--bg-surface));
}
.pdv-prod__img img { width: 100%; height: 100%; object-fit: cover; }
.pdv-prod__mono {
  font-size: 28px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--tom) 75%, var(--text-primary));
}
.pdv-prod__corpo { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); flex: 1; }
.pdv-prod__nome {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pdv-prod__linha { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.pdv-prod__preco { font-size: var(--text-md); font-weight: var(--fw-bold); }
.pdv-prod__cod { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdv-prod__estoque { font-size: var(--text-xs); color: var(--text-secondary); }
.pdv-prod__estoque.is-baixo { color: var(--pdv-alerta); font-weight: var(--fw-semibold); }
:root[data-theme='dark'] .pdv { --pdv-alerta: var(--gold-brand); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .pdv { --pdv-alerta: var(--gold-brand); }
}
.pdv-prod__estoque.is-esgotado { color: var(--color-danger); font-weight: var(--fw-semibold); }
.pdv-prod__mais {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 13px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.pdv-prod:hover .pdv-prod__mais, .pdv-prod:focus-visible .pdv-prod__mais { opacity: 1; }
.pdv-prod:disabled .pdv-prod__mais { display: none; }
/* Confirmacao do toque: um aro na cor da marca, curto. E a resposta ao gesto,
   nao decoracao — sem ele, no tablet nao da para saber se o toque contou. */
.pdv-prod.is-lancado { animation: pdv-lancado 380ms var(--ease-out); }
@keyframes pdv-lancado {
  0% { box-shadow: 0 0 0 0 var(--color-primary); }
  100% { box-shadow: 0 0 0 8px transparent; }
}
.pdv-prod--esqueleto {
  min-height: 190px;
  cursor: default;
  background: linear-gradient(var(--bg-muted), var(--bg-muted)) top / 100% 58% no-repeat, var(--bg-surface);
}
.pdv-vazio-grade { grid-column: 1 / -1; }

/* ---------------------------------------------- Produtos | Mesas (P3) */
.pdv-visao {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  background: var(--bg-body);
}
.pdv-visao__abas { margin: 0; }
.pdv-visao__abas .tabs-cf__tab { display: inline-flex; align-items: center; gap: var(--space-2); }
.pdv-cats.is-apagada { opacity: 0.5; }

/* Mapa de mesas: grade simples por ordem (o pedido: "nao precisa ser um
   sistema de desenho"). O estado vem do servidor, derivado da comanda. */
.pdv-mesas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--space-3);
  align-content: start;
}
.pdv-mesa {
  --est: var(--color-success);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.pdv-mesa::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--est);
}
.pdv-mesa.is-ocupada { --est: var(--justificada); }
.pdv-mesa.is-conta { --est: var(--falta); }
.pdv-mesa.is-pagamento { --est: var(--info); }
.pdv-mesa.is-inativa { --est: var(--serie-neutra); opacity: 0.6; }
.pdv-mesa__corpo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 132px;
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 4px);
  border: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.pdv-mesa__corpo:hover:not(:disabled) { background: var(--bg-surface-hover); }
.pdv-mesa__corpo:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--pitch-200); }
.pdv-mesa__corpo:disabled { cursor: default; }
.pdv-mesa__nome { font-size: var(--text-lg); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.pdv-mesa__estado {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: color-mix(in srgb, var(--est) 72%, var(--text-primary));
  background: color-mix(in srgb, var(--est) 14%, transparent);
}
.pdv-mesa__valor { margin-top: auto; font-size: var(--text-xl); font-weight: var(--fw-bold); }
.pdv-mesa__info { font-size: var(--text-xs); color: var(--text-secondary); }
.pdv-mesa__edicao {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2) var(--space-2) calc(var(--space-2) + 4px);
  border-top: 1px solid var(--border-color);
}
.pdv-mesa--nova {
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 132px;
  border-style: dashed;
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.pdv-mesa--nova::before { display: none; }
.pdv-mesa--nova:hover { color: var(--text-primary); border-color: var(--border-strong); }
.pdv-nova__mesas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

/* ---------------------------------------------- a comanda (o canhoto) */

.pdv-comanda { min-height: 0; display: flex; padding-bottom: 10px; }
.pdv-ticket {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--card-border);
  border-bottom: 0;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  box-shadow: var(--shadow-card);
}
/* Borda serrilhada: dentes da propria superficie, pendurados abaixo do canhoto. */
.pdv-ticket::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -9px;
  height: 10px;
  background:
    linear-gradient(135deg, var(--bg-surface) 50%, transparent 50%) 0 0 / 14px 10px repeat-x,
    linear-gradient(225deg, var(--bg-surface) 50%, transparent 50%) 0 0 / 14px 10px repeat-x;
}
.pdv-ticket__cab { padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 2px dashed var(--border-color); }
.pdv-ticket__linha1 { display: flex; align-items: center; gap: var(--space-3); }
.pdv-ticket__num { font-size: var(--text-2xl); font-weight: var(--fw-bold); letter-spacing: -0.03em; line-height: 1; }
.pdv-ticket__fechar { margin-left: auto; }
.pdv-ticket__quem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.pdv-ticket__nome { font-weight: var(--fw-semibold); color: var(--text-primary); font-size: var(--text-base); }
.pdv-ticket__tempo { margin-left: auto; font-size: var(--text-xs); }
/* P2: a reserva da comanda — quadra, horario e o estado da QUADRA (que o PDV
   mostra mas nao cobra: o aluguel e recebido na tela de Alugueis). */
.pdv-ticket__reserva {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--bg-muted);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.pdv-ticket__reserva i { color: var(--serie-3); margin-right: 4px; }
.pdv-quadra-pag { font-weight: var(--fw-semibold); color: var(--pdv-alerta); }
.pdv-quadra-pag.is-pago { color: color-mix(in srgb, var(--color-success) 75%, var(--text-primary)); }
.pdv-res__hora { font-weight: var(--fw-bold); font-size: var(--text-md); min-width: 48px; }

.pdv-origem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}

/* Estado: token de status + a palavra (nunca so a cor). Tinta translucida
   com color-mix para valer igual nos dois temas. */
.pdv-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  --est: var(--color-success);
  color: color-mix(in srgb, var(--est) 72%, var(--text-primary));
  background: color-mix(in srgb, var(--est) 14%, transparent);
}
.pdv-estado.is-parcial { --est: var(--info); }
.pdv-estado.is-conta { --est: var(--justificada); }

.pdv-pessoas { padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border-color); }
.pdv-pessoas__rot, .pdv-pag__rot { display: block; font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-secondary); margin-bottom: var(--space-2); }
.pdv-pessoas__lista, .pdv-pag__pessoas { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pdv-pessoa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pdv-pessoa:hover { border-color: var(--border-strong); color: var(--text-primary); }
.pdv-pessoa:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pitch-200); }
.pdv-pessoa.is-ativa { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.pdv-pessoa--nova { border-style: dashed; }
.pdv-pessoa__pend { font-weight: var(--fw-semibold); opacity: 0.85; }

.pdv-ticket__itens { flex: 1; min-height: 0; overflow: auto; padding: var(--space-2) var(--space-5) var(--space-4); }
.pdv-grupo + .pdv-grupo { margin-top: var(--space-3); }
.pdv-grupo__cab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}
.pdv-grupo__nome { font-weight: var(--fw-semibold); flex: 1; min-width: 0; }
.pdv-grupo__nome .fa-star { color: var(--gold-rule); font-size: 11px; }
.pdv-grupo__soma { font-weight: var(--fw-semibold); }
.pdv-grupo__pago { font-weight: var(--fw-medium); font-size: var(--text-xs); color: var(--info); }
.pdv-grupo__vazio { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-2); }
.pdv-itens { list-style: none; margin: 0; padding: 0; }
.pdv-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-color);
}
.pdv-item:last-child { border-bottom: 0; }
.pdv-item__qtd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  padding: 2px;
}
.pdv-item__qtd > span { min-width: 24px; text-align: center; font-weight: var(--fw-bold); font-size: var(--text-sm); }
.pdv-step, .pdv-ico-btn {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pdv-step:hover, .pdv-ico-btn:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.pdv-step:focus-visible, .pdv-ico-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pitch-200); }
.pdv-ico-btn--perigo:hover { color: var(--color-danger); }
.pdv-item__desc { display: flex; flex-direction: column; min-width: 0; }
.pdv-item__nome { font-size: var(--text-sm); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdv-item__sub { font-size: var(--text-xs); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdv-item__valor { font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.pdv-item__acoes { display: flex; }

.pdv-ticket__sem-itens {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-4);
  color: var(--text-muted);
  text-align: center;
  font-size: var(--text-sm);
}
.pdv-ticket__sem-itens i { font-size: 22px; }
.pdv-ticket__sem-itens p { margin: 0; }

.pdv-recebidos { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 2px dashed var(--border-color); }
.pdv-recebidos__tit { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); margin: 0 0 var(--space-2); }
.pdv-recebidos ul { list-style: none; margin: 0; padding: 0; }
.pdv-recebidos li {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  padding: 2px 0;
}
.pdv-recebidos li.is-estornado { color: var(--text-muted); }
.pdv-recebidos li.is-estornado .num-display { text-decoration: line-through; }

.pdv-ticket__rodape { padding: var(--space-4) var(--space-5) var(--space-5); border-top: 2px dashed var(--border-color); }
.pdv-contas { margin: 0 0 var(--space-2); }
.pdv-contas > div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); padding: 2px 0; }
.pdv-contas dt { font-weight: var(--fw-regular); }
.pdv-contas dd { margin: 0; }
.pdv-contas .is-desconto dd { color: var(--color-danger); }
.pdv-contas__motivo { color: var(--text-muted); }
.pdv-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.pdv-total__rot { font-size: var(--text-base); font-weight: var(--fw-semibold); }
.pdv-total__valor {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: 1.1;
  padding-bottom: 4px;
  border-bottom: 3px solid var(--gold-rule);
}
.pdv-ticket__acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.pdv-ticket__acoes .is-on { --btn-bg: color-mix(in srgb, var(--justificada) 14%, transparent); --btn-fg: color-mix(in srgb, var(--justificada) 72%, var(--text-primary)); }
.pdv-btn-perigo:hover { --btn-fg: var(--color-danger); }
.pdv-receber {
  width: 100%;
  min-height: 56px;
  justify-content: space-between;
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
}
.pdv-receber .num-display { margin-left: auto; font-weight: var(--fw-bold); }

.pdv-ticket--vazio { border-radius: var(--radius-panel); }
.pdv-ticket--vazio::after { display: none; }
.pdv-ticket__vazio {
  margin: auto;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  max-width: 320px;
}
.pdv-ticket__vazio-ico {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 22px;
}
.pdv-ticket__vazio h2 { font-size: var(--text-lg); font-weight: var(--fw-bold); letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
.pdv-ticket__vazio p { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; margin: 0 0 var(--space-5); }
.pdv-ticket__vazio-acoes { display: grid; gap: var(--space-2); }

/* ------------------------------------------- gaveta de comandas abertas */

.pdv-gaveta { --bs-offcanvas-width: 440px; background: var(--bg-body); color: var(--text-primary); }
.pdv-gaveta .offcanvas-title { font-size: var(--text-lg); font-weight: var(--fw-bold); }
.pdv-abertas__chips { margin-bottom: var(--space-4); }
.pdv-abertas__lista { display: grid; gap: var(--space-3); }
.pdv-aberta {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: left;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pdv-aberta:hover { box-shadow: var(--shadow-card-hover); }
.pdv-aberta:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pitch-200); }
.pdv-aberta.is-ativa { border-color: var(--color-primary); }
.pdv-aberta__topo, .pdv-aberta__base { display: flex; align-items: center; gap: var(--space-3); }
.pdv-aberta__num { font-size: var(--text-lg); font-weight: var(--fw-bold); }
.pdv-aberta__tempo { margin-left: auto; font-size: var(--text-xs); color: var(--text-secondary); }
.pdv-aberta__nome { font-weight: var(--fw-semibold); }
.pdv-aberta__valor { margin-left: auto; font-size: var(--text-md); font-weight: var(--fw-bold); }
.pdv-aberta__pago { font-size: var(--text-xs); color: var(--info); text-align: right; }

/* ---------------------------------------------------------- caixa (P4) */
/* Estado escrito + icone; a cor reforca (aberto = sucesso, fechado = neutro). */
.pdv-caixa.is-aberto { --btn-fg: color-mix(in srgb, var(--color-success) 72%, var(--text-primary)); }
.pdv-caixa.is-fechado { --btn-fg: var(--text-secondary); }
.pdv-caixa:disabled { opacity: 1; cursor: default; }
.pdv-caixa-modal { display: grid; gap: var(--space-4); }
.pdv-caixa-modal__aviso, .pdv-caixa-modal__meta { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }
.pdv-caixa-modal__esperado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--bg-muted);
}
.pdv-caixa-modal__esperado span { font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.pdv-caixa-modal__esperado strong {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  padding-bottom: 2px;
  border-bottom: 3px solid var(--gold-rule);
}
.pdv-caixa-modal__contas { margin: 0; }
.pdv-caixa-modal__contas .is-total { margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--border-color); color: var(--text-primary); font-weight: var(--fw-semibold); }
.pdv-caixa-modal__movs { list-style: none; margin: 0; padding: 0; border-top: 2px dashed var(--border-color); }
.pdv-caixa-modal__movs li { display: grid; grid-template-columns: 18px 1fr auto; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; font-size: var(--text-sm); border-bottom: 1px solid var(--border-color); }
.pdv-caixa-modal__acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.pdv-caixa-modal__form { display: grid; gap: var(--space-2); }
.pdv-caixa-modal__div { margin: 0; min-height: 1.4em; font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.pdv-caixa-modal__div.is-ok { color: color-mix(in srgb, var(--color-success) 75%, var(--text-primary)); }
.pdv-caixa-modal__div.is-dif { color: var(--color-danger); }
.pdv-forma:disabled { cursor: not-allowed; opacity: 0.6; }
.pdv-forma small { font-size: 11px; font-weight: var(--fw-medium); }

/* ---------------------------------------------------------- modais */

.pdv-modal .modal-title { font-size: var(--text-lg); font-weight: var(--fw-bold); }
.pdv-nova { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.pdv-nova__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--bg-body);
  min-width: 0;
}
.pdv-nova__card h3 { font-size: var(--text-md); font-weight: var(--fw-bold); margin: 0; }
.pdv-nova__card p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 var(--space-2); }
.pdv-nova__card .form-label { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.pdv-nova__card .btn-cf { margin-top: var(--space-3); }
.pdv-nova__ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 18px;
}
.pdv-nova__alunos { display: grid; gap: 2px; max-height: 300px; overflow: auto; margin-top: var(--space-2); }

.pdv-pag { display: grid; gap: var(--space-5); }
.pdv-pag__saldo { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); }
.pdv-pag__saldo > span:first-child { font-size: var(--text-sm); color: var(--text-secondary); }
.pdv-pag__saldo strong { font-size: var(--text-3xl); font-weight: var(--fw-bold); letter-spacing: -0.03em; }
.pdv-pag__restante { margin-left: auto; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.pdv-pag__restante.is-ok { color: color-mix(in srgb, var(--color-success) 75%, var(--text-primary)); }
.pdv-pag__formas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.pdv-forma {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-input);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pdv-forma i { font-size: 20px; }
.pdv-forma:hover { border-color: var(--border-strong); color: var(--text-primary); }
.pdv-forma:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pitch-200); }
.pdv-forma.is-ativa { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
.pdv-pag__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); align-items: end; }
.pdv-pag__campos .form-control-lg { font-size: var(--text-xl); font-weight: var(--fw-semibold); }
.pdv-pag__troco { display: flex; flex-direction: column; justify-content: center; min-height: 50px; padding: 0 var(--space-3); border-radius: var(--radius-control); background: var(--bg-muted); }
.pdv-pag__troco span { font-size: var(--text-xs); color: var(--text-secondary); }
.pdv-pag__troco strong { font-size: var(--text-xl); }
.pdv-pag__troco.is-falta strong { color: var(--color-danger); }
.pdv-pag__add { grid-column: 1 / -1; justify-self: start; }
.pdv-pag__linhas { list-style: none; margin: 0; padding: 0; border-top: 2px dashed var(--border-color); }
.pdv-pag__linhas li {
  display: grid;
  grid-template-columns: 20px 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--text-base);
}
.pdv-pag__linhas .num-display { font-weight: var(--fw-semibold); }
.pdv-pag__erro { margin: 0; min-height: 1.2em; color: var(--color-danger); font-size: var(--text-sm); font-weight: var(--fw-medium); }
.pdv-pag__rodape { gap: var(--space-2); }
.pdv-pag__finalizar { min-width: 220px; min-height: 48px; font-size: var(--text-md); }

/* ---------------------------------------------------------- respostas */

/* Com o botao do Caixa (P4) o topo ficou mais cheio: os indicadores cedem
   espaco antes da busca, que e o que o operador usa o tempo todo. */
@media (max-width: 1599px) {
  .pdv-indicadores { gap: var(--space-4); }
  .pdv-ind:not(.pdv-ind--destaque):nth-child(4) { display: none; }
}
@media (max-width: 1439px) {
  .pdv-ind:not(.pdv-ind--destaque):nth-child(2) { display: none; }
  .pdv-btn-abertas .pdv-rot-longo { display: none; }
}
@media (max-width: 1279px) {
  .pdv-indicadores { display: none; }
}

/* Tablet: categorias viram faixa sobre a grade; a comanda segue ao lado. */
@media (max-width: 1199px) {
  .pdv-corpo {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .pdv-cats { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; scrollbar-width: none; }
  .pdv-cats::-webkit-scrollbar { display: none; }
  .pdv-cat { flex: none; border: 1px solid var(--border-color); border-radius: var(--radius-full); background: var(--bg-surface); min-height: 40px; }
  .pdv-cat__nome { overflow: visible; }
  .pdv-grade-area { grid-column: 1; grid-row: 2; }
  .pdv-comanda { grid-column: 2; grid-row: 1 / span 2; }
  .pdv-rot-longo { display: none; }
}

/* Celular: consulta e venda rapida. A comanda vira folha que sobe do rodape,
   aberta pela barra fixa com o total. */
@media (max-width: 767px) {
  .pdv { --pdv-gap: var(--space-3); }
  .pdv-topo { flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); }
  .pdv-busca { order: 5; flex: 1 0 100%; max-width: none; }
  .pdv-kbd { display: none; }
  .pdv-corpo { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(76px + var(--safe-bottom)); }
  .pdv-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .pdv-prod__img { aspect-ratio: 16 / 9; }
  .pdv-comanda {
    position: fixed;
    inset: 5vh 0 0 0;
    z-index: 1040;
    padding: 0;
    transform: translateY(105%);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .pdv-ticket, .pdv-ticket--vazio { border-radius: var(--radius-panel) var(--radius-panel) 0 0; border-bottom: 0; }
  .pdv-ticket::after { display: none; }
  .pdv.is-ticket-aberto .pdv-comanda { transform: none; box-shadow: var(--shadow-xl); }
  .pdv.is-ticket-aberto::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1039;
    background: color-mix(in srgb, var(--neutral-950) 45%, transparent);
  }
  .pdv-barra-mobile {
    position: fixed;
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--space-3) + var(--safe-bottom));
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-float);
    font-size: var(--text-sm);
  }
  .pdv-barra-mobile[hidden] { display: none; }
  .pdv-barra-mobile__num { font-weight: var(--fw-bold); }
  .pdv-barra-mobile__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
  .pdv-barra-mobile__total { font-size: var(--text-md); font-weight: var(--fw-bold); }
  .pdv-nova { grid-template-columns: 1fr; }
  .pdv-pag__formas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pdv-busca input, .pdv-nova input, .pdv-pag input { font-size: 16px; }
}
@media (min-width: 768px) {
  .pdv-barra-mobile { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pdv-prod.is-lancado { animation: none; outline: 2px solid var(--color-primary); }
  .pdv-comanda { transition: none; }
}

/* ---------------------------------------------- Painel do PDV (P5) */
.pdvp-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.pdvp-presets { margin: 0; }
.pdvp-data { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); color: var(--text-secondary); }
.pdvp-data input { min-width: 150px; }
.pdvp-abrir { margin-left: auto; }
.pdvp-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.pdvp-filtros .chips-cf { flex: 1 1 100%; }
.pdvp-filtros .form-select, .pdvp-filtros .form-control { width: auto; min-width: 180px; flex: 0 1 220px; }
.pdvp-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.pdvp-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: left;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.pdvp-card:hover { box-shadow: var(--shadow-card-hover); }
.pdvp-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pitch-200); }
.pdvp-card__topo, .pdvp-card__base { display: flex; align-items: center; gap: var(--space-3); }
.pdvp-card__num { font-size: var(--text-lg); font-weight: var(--fw-bold); }
.pdvp-card__tempo { margin-left: auto; font-size: var(--text-xs); color: var(--text-secondary); text-align: right; }
.pdvp-card__nome { font-weight: var(--fw-semibold); }
.pdvp-card__meta { font-size: var(--text-xs); color: var(--text-secondary); min-height: 1em; }
.pdvp-card__valor { margin-left: auto; font-size: var(--text-md); font-weight: var(--fw-bold); }
.pdvp-card__pago { font-size: var(--text-xs); color: var(--info); text-align: right; }
.pdv-estado.is-paga { --est: var(--color-success); }
.pdv-estado.is-cancelada { --est: var(--serie-neutra); }
.pdvp-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }
.pdvp-canvas { position: relative; height: 240px; }
.pdvp-dist { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.pdvp-bloco { padding: var(--space-5); margin-bottom: var(--space-4); }
.pdvp-dist .pdvp-bloco, .pdvp-graficos .pdvp-bloco { margin-bottom: 0; }
.pdvp-sub { font-size: var(--text-base); font-weight: var(--fw-bold); margin: 0 0 var(--space-3); }
.pdvp-links { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.pdvp-div { color: var(--color-danger); }
#pdvp-modal .pdv-contas .is-total { font-weight: var(--fw-bold); color: var(--text-primary); border-top: 1px solid var(--border-color); margin-top: var(--space-1); padding-top: var(--space-2); }
#pdvp-modal .pdvp-sub { margin-top: var(--space-4); }
@media (max-width: 767px) {
  .pdvp-abrir { margin-left: 0; }
  .pdvp-filtros .form-select, .pdvp-filtros .form-control { flex: 1 1 100%; }
  .pdvp-data input { font-size: 16px; }
}

/* Botao "Abrir PDV" no topo da tela de Comandas (fora do modo tela cheia). */
.comandas-pdv-btn { margin-top: var(--space-3); }